/* Pour Sully — the page is the field.
 * Turf green ground, chalk type, first-down yellow for "now", pylon orange for flags. */

:root {
  --turf: #1e5b37;
  --turf-mown: #1a5232;
  --turf-lit: #2f7a4b;
  --chalk: #f4f2e8;
  --chalk-dim: rgba(244, 242, 232, .68);
  --chalk-line: rgba(244, 242, 232, .38);
  --line-yellow: #ffd21f;
  --pylon: #f2601d;
  --leather: #6a3b1f;
  --ink: #0f2b1b;

  --display: "Big Shoulders Display", "Arial Narrow", sans-serif;
  --stencil: "Big Shoulders Stencil Display", var(--display);
  --body: "Archivo", system-ui, sans-serif;

  --stripe: 96px;
}

*, *::before, *::after { box-sizing: border-box; }

[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  color: var(--chalk);
  font: 400 1rem/1.5 var(--body);
  background:
    repeating-linear-gradient(180deg, var(--turf) 0 var(--stripe), var(--turf-mown) var(--stripe) calc(var(--stripe) * 2));
  min-height: 100vh;
}

.wrap {
  max-width: 46rem;
  margin: 0 auto;
  padding: calc(1.5rem + env(safe-area-inset-top)) 1rem calc(3rem + env(safe-area-inset-bottom));
}

button { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--line-yellow);
  outline-offset: 3px;
}

#confetti {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 50;
}

/* ---------- Hero ---------- */
.hero h1 {
  margin: 0;
  font: 900 clamp(4rem, 21vw, 9.5rem)/.82 var(--display);
  text-transform: uppercase;
  letter-spacing: -.01em;
}

.lede {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  color: var(--chalk-dim);
}

/* ---------- The field ---------- */
.drive { margin-top: 2rem; }

.field {
  display: grid;
  grid-template-columns: 8% 1fr 8%;
  height: 7.5rem;
  border: 3px solid var(--chalk);
  background: var(--turf-mown);
}

.endzone {
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--ink);
}
.endzone span {
  writing-mode: vertical-rl;
  font: 700 .95rem/1 var(--display);
  text-transform: uppercase;
  letter-spacing: .12em;
}
.endzone-home span { transform: rotate(180deg); }
.endzone-home { border-right: 3px solid var(--chalk); }
.endzone-away { border-left: 3px solid var(--chalk); transition: background .6s, color .6s; }
.is-finished .endzone-away { background: var(--line-yellow); color: var(--ink); }

.turf {
  position: relative;
  /* 5-yard lines faint, 10-yard lines solid */
  background:
    repeating-linear-gradient(90deg, transparent 0 calc(10% - 2px), var(--chalk-line) calc(10% - 2px) 10%),
    repeating-linear-gradient(90deg, transparent 0 calc(5% - 1px), rgba(244, 242, 232, .16) calc(5% - 1px) 5%);
}

.turf-driven {
  position: absolute;
  inset: 0 auto 0 0;
  width: 0;
  background: var(--turf-lit);
  mix-blend-mode: screen;
  opacity: .55;
  transition: width .7s cubic-bezier(.2, .8, .2, 1);
}

.yard-numbers {
  position: absolute;
  inset: auto 0 .35rem 0;
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  padding: 0 5%;
  font: 800 clamp(.8rem, 3.4vw, 1.35rem)/1 var(--stencil);
  color: var(--chalk-dim);
  text-align: center;
}

.first-down-line {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 4px;
  margin-left: -2px;
  background: var(--line-yellow);
  transition: left .7s cubic-bezier(.2, .8, .2, 1);
}

.ball {
  position: absolute;
  top: 38%;
  transform: translate(-50%, -50%);
  transition: left .7s cubic-bezier(.2, .8, .2, 1);
  filter: drop-shadow(0 3px 0 rgba(0, 0, 0, .35));
}
.ball svg { display: block; }

.quarters {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin: .4rem 8% 0;
  font: 700 .9rem/1 var(--display);
  color: var(--chalk-dim);
  text-align: center;
}

.down-distance {
  margin: 1.5rem 0 0;
  font: 700 clamp(1.6rem, 6.4vw, 2.5rem)/1.05 var(--display);
  text-wrap: balance;
}
.is-finished .down-distance { color: var(--line-yellow); }

.sideline {
  margin: .5rem 0 0;
  max-width: 36rem;
  color: var(--chalk-dim);
  min-height: 3em;
}

.tally {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 1.25rem 0 0;
  border-top: 1px solid var(--chalk-line);
  border-bottom: 1px solid var(--chalk-line);
}
.tally div {
  display: flex;
  flex-direction: column-reverse;
  padding: .75rem 0 .65rem .9rem;
}
.tally div + div { border-left: 1px solid var(--chalk-line); }
.tally div:first-child { padding-left: 0; }
.tally dt { font-size: .875rem; color: var(--chalk-dim); }
.tally dd {
  margin: 0;
  font: 900 clamp(2.25rem, 10vw, 3.5rem)/1 var(--display);
  font-variant-numeric: tabular-nums;
}

/* ---------- Bars ---------- */
.bars { margin-top: 2.5rem; }

.bar {
  padding: 1.1rem 0 1.4rem;
  border-top: 3px solid var(--chalk);
}
.bar.is-locked { opacity: .45; }

.bar-head {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: .75rem;
}

.bar-quarter {
  font: 800 2.25rem/1 var(--stencil);
  min-width: 2.6rem;
}
.bar.is-current .bar-quarter { color: var(--line-yellow); }

.bar-name {
  min-width: 0;
  padding: .15rem 0;
  border: 0;
  background: none;
  text-align: left;
  font: 700 1.5rem/1.1 var(--display);
  overflow-wrap: anywhere;
  cursor: pointer;
  text-decoration: underline dotted var(--chalk-line);
  text-underline-offset: .25em;
}
.bar-name:hover { text-decoration-color: var(--chalk); }

.bar-status {
  font-size: .875rem;
  color: var(--chalk-dim);
  white-space: nowrap;
}
.bar.is-current .bar-status { color: var(--line-yellow); font-weight: 600; }

.beers {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: .5rem;
  margin-top: .9rem;
}

.beer {
  position: relative;
  aspect-ratio: 1;
  padding: 0;
  overflow: hidden;
  border: 2px dashed var(--chalk-line);
  border-radius: 4px;
  background: rgba(15, 43, 27, .28);
  cursor: pointer;
}
.beer:disabled { cursor: not-allowed; }
.bar.is-current .beer:not(.is-done) { border-color: var(--chalk); }
.beer:not(:disabled):not(.is-done):hover { background: rgba(244, 242, 232, .12); }

.beer.is-done {
  border: 2px solid var(--line-yellow);
  background: var(--line-yellow);
  color: var(--ink);
}

.beer img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.beer-num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font: 800 clamp(1.5rem, 7vw, 2.5rem)/1 var(--stencil);
  color: var(--chalk-dim);
}
.beer.is-done .beer-num { color: var(--ink); }
.beer.has-photo .beer-num { display: none; }

.beer-time {
  position: absolute;
  inset: auto 0 0 0;
  padding: .15rem 0 .2rem;
  font-size: .6875rem;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.beer.has-photo .beer-time {
  background: rgba(15, 43, 27, .78);
  color: var(--chalk);
}

/* ---------- Line score ---------- */
.linescore {
  margin-top: 1rem;
  padding-top: 1.1rem;
  border-top: 3px solid var(--chalk);
}
.linescore h2 {
  margin: 0 0 .6rem;
  font: 700 1.5rem/1.1 var(--display);
}
.linescore-scroll { overflow-x: auto; }
.linescore table {
  width: 100%;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}
.linescore th, .linescore td {
  padding: .5rem .4rem;
  text-align: right;
  border-bottom: 1px solid var(--chalk-line);
  white-space: nowrap;
}
.linescore th { font-weight: 600; color: var(--chalk-dim); }
.linescore tbody th, .linescore thead th:first-child { text-align: left; padding-left: 0; }
.linescore td:last-child, .linescore thead th:last-child { color: var(--line-yellow); font-weight: 600; }

/* ---------- Footer ---------- */
.foot {
  margin-top: 2.5rem;
  color: var(--chalk-dim);
  font-size: .875rem;
}
.foot p { margin: 1rem 0 0; max-width: 30rem; }

/* ---------- Buttons ---------- */
.btn {
  min-height: 2.75rem;
  padding: .55rem 1.1rem;
  border: 2px solid transparent;
  border-radius: 4px;
  font-weight: 600;
  cursor: pointer;
}
.btn:disabled { opacity: .6; cursor: progress; }
.btn-primary { background: var(--line-yellow); color: var(--ink); }
.btn-primary:hover { background: #ffdc4d; }
.btn-flag { background: var(--pylon); color: #fff; }
.btn-flag:hover { background: #ff7233; }
.btn-quiet { background: none; border-color: currentColor; }
.btn-quiet:hover { background: rgba(127, 127, 127, .15); }

/* ---------- Dialogs: the referee's card ---------- */
dialog.card {
  width: min(26rem, calc(100vw - 2rem));
  max-height: calc(100dvh - 2rem);
  padding: 1.4rem;
  border: 0;
  border-radius: 6px;
  background: var(--chalk);
  color: var(--ink);
  box-shadow: 0 0 0 3px var(--ink), 0 24px 60px rgba(0, 0, 0, .5);
}
dialog.card::backdrop { background: rgba(9, 28, 17, .78); }
dialog.card :focus-visible { outline-color: var(--ink); }

.card h2 {
  margin: 0;
  font: 900 2rem/1 var(--display);
}
.card-sub { margin: .4rem 0 0; color: rgba(15, 43, 27, .75); }
.card-note { margin: .5rem 0 0; font-size: .875rem; color: rgba(15, 43, 27, .7); }
.card-error { margin: .6rem 0 0; font-weight: 600; color: #b3380a; }

.card-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .6rem;
  margin-top: 1.25rem;
}
.card-actions .btn-quiet { margin-right: auto; }

.photo-drop {
  display: grid;
  place-items: center;
  margin-top: 1rem;
  min-height: 11rem;
  overflow: hidden;
  border: 2px dashed rgba(15, 43, 27, .45);
  border-radius: 4px;
  background: rgba(15, 43, 27, .06);
  cursor: pointer;
}
.photo-drop:hover { border-color: var(--ink); }
.photo-drop:focus-within { outline: 3px solid var(--ink); outline-offset: 3px; }
.photo-drop img {
  display: block;
  width: 100%;
  max-height: 55dvh;
  object-fit: contain;
  background: var(--ink);
}
.photo-hint { font-weight: 600; }

.text-input {
  width: 100%;
  margin-top: 1rem;
  padding: .7rem .8rem;
  border: 2px solid var(--ink);
  border-radius: 4px;
  background: #fff;
  color: var(--ink);
  font: 600 1.125rem/1.2 var(--body);
}
.pin-input {
  font: 800 2rem/1 var(--stencil);
  letter-spacing: .3em;
  text-align: center;
}

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  inset: auto;
  margin: 0;
  border: 0;
  left: 50%;
  bottom: calc(1.25rem + env(safe-area-inset-bottom));
  z-index: 60;
  width: max-content;
  max-width: calc(100vw - 2rem);
  padding: .7rem 1rem;
  border-radius: 4px;
  background: var(--chalk);
  color: var(--ink);
  font-weight: 600;
  box-shadow: 0 0 0 3px var(--ink);
  transform: translate(-50%, 1rem);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.toast.is-showing { opacity: 1; transform: translate(-50%, 0); }
.toast.is-flag { background: var(--line-yellow); }

@media (max-width: 26rem) {
  .bar-head { grid-template-columns: auto 1fr; }
  .bar-status { grid-column: 2; }
  .bar-quarter { grid-row: span 2; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}