/* =====================================================================
   BIG FAIRWAYS :: THE GRIDIRON FIELD, the look
   Lifted out of score.html so the field on the website is the same field
   the app draws. Pair it with /assets/gridiron-field.js.
   ===================================================================== */
.ggstrip{border-radius:14px;margin-bottom:12px;overflow:hidden;
  border:1px solid rgba(126,196,68,.34);
  background:linear-gradient(180deg,rgba(10,38,24,.92),rgba(6,26,42,.62))}
.ggfield{position:relative;width:100%;aspect-ratio:1100/318;overflow:hidden;background:#000}
.ggfield img.gga{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0;opacity:0;transition:opacity .6s ease}
.ggfield img.gga.on{opacity:1}
.ggfield svg.ggm{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
/* THE STAND. The same picture as the art underneath it, clipped to the crowd
   and held at nought until something is worth standing up for. */
.ggfield .ggcrowd{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;
  clip-path:inset(2% 0 62% 0);will-change:transform}
.ggfield .ggcrowd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.ggfield .ggcrowd.fg{opacity:1;animation:ggRock .26s ease-in-out 4}
.ggfield .ggcrowd.td{opacity:1;animation:ggGoWild .17s ease-in-out 10;filter:brightness(1.14) saturate(1.12)}
.ggfield .ggcrowd.td.big{animation:ggGoWild .13s ease-in-out 15;filter:brightness(1.22) saturate(1.2)}
@keyframes ggRock{
  0%,100%{transform:translate3d(0,0,0) scale(1.02)}
  30%{transform:translate3d(-.5%,.5%,0) scale(1.025)}
  65%{transform:translate3d(.5%,-.3%,0) scale(1.025)}}
@keyframes ggGoWild{
  0%,100%{transform:translate3d(0,0,0) scale(1.05)}
  20%{transform:translate3d(-1.1%,1%,0) scale(1.06) rotate(-.5deg)}
  45%{transform:translate3d(1.2%,-.9%,0) scale(1.07) rotate(.5deg)}
  70%{transform:translate3d(-.8%,-1%,0) scale(1.06) rotate(-.3deg)}}
@media (prefers-reduced-motion: reduce){
  .ggfield .ggcrowd.fg,.ggfield .ggcrowd.td,.ggfield .ggcrowd.td.big{animation:none;opacity:0}}
.ggfield img.ggball{position:absolute;width:10.5%;height:auto;inset:auto auto 0 0;z-index:5;
  filter:drop-shadow(0 6px 10px rgba(0,0,0,.75));will-change:transform,left}
.ggpop{position:absolute;inset:0;z-index:8;display:grid;place-items:center;pointer-events:none;opacity:0}
.ggpop.show{opacity:1}
.ggpop .ggin{display:flex;align-items:center;justify-content:center;gap:10px;
  width:100%;height:100%;transform:scale(.6);opacity:0}
.ggpop.show .ggin{animation:ggslam .62s cubic-bezier(.2,1.5,.35,1) forwards}
.ggpop img{max-height:78%;max-width:46%;object-fit:contain;filter:drop-shadow(0 10px 26px rgba(0,0,0,.85))}
.ggpop b{font-size:clamp(34px,10vw,64px);font-weight:900;letter-spacing:-.05em;line-height:1;
  color:#fff;text-shadow:0 6px 24px rgba(0,0,0,.7)}
@keyframes ggslam{0%{transform:scale(.6);opacity:0}55%{transform:scale(1.12);opacity:1}
  75%{transform:scale(.97)}100%{transform:scale(1);opacity:1}}
@media (prefers-reduced-motion: reduce){
  .ggfield img.gga{transition:none}
  .ggpop.show .ggin{animation:none;transform:scale(1);opacity:1}
}

/* =====================================================================
   THE SCOREBOARD
   The same board the Gridiron lab runs: the matchup across the top, a
   crowd behind it, a big silver number a side, the ball sitting with
   whoever has it, and the quarter, the hole and the doubling down the
   middle. Lifted out of `Claude outputs/gridiron.css` so the website and
   the lab show the same board.
   ===================================================================== */
.ggboard{
  position:relative;border-radius:18px;overflow:hidden;margin-bottom:12px;
  background:linear-gradient(180deg,#0b1c29 0%,#061320 55%,#040d16 100%);
  border:1px solid var(--line);
  box-shadow:0 1px 0 rgba(255,255,255,.1) inset,
             0 -18px 40px -30px rgba(126,194,74,.25) inset,
             0 26px 50px -34px #000;
}
.ggboard::before{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.45;z-index:2;
  background-image:radial-gradient(rgba(255,255,255,.07) 1px,transparent 1.2px);
  background-size:7px 7px;
}
/* THE CROWD, anchored to the top of the shot and zoomed, so the window is
   always the upper part of the picture and the empty bottom never shows. */
.ggbbg{position:absolute;inset:0;z-index:0;overflow:hidden}
.ggbbg img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:50% 0;transform:scale(1.25);transform-origin:50% 0;opacity:.3;
}
.ggbbg::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(4,17,28,.72),rgba(4,17,28,.5) 42%,rgba(3,12,20,.86)),
    radial-gradient(ellipse at 50% 45%,rgba(3,12,20,.1),rgba(3,12,20,.74) 82%);
}
.ggbwrap{position:relative;z-index:3}

.ggmatch{
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:9px;
  padding:12px 12px 10px;border-bottom:1px solid rgba(190,212,230,.07);
  background:linear-gradient(180deg,rgba(255,255,255,.055),transparent);
}
/* the two names split the row evenly and lean in towards the VS, so a pair
   of full names fits on a phone without either one being cut off */
.ggteam{
  font-size:clamp(12px,3.2vw,15px);font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;
}
.ggteam.red{text-align:right}
.ggteam.blue{text-align:left}
.ggteam.red{color:#ff8d90;text-shadow:0 0 20px rgba(224,57,62,.55),0 2px 10px rgba(0,0,0,.9)}
.ggteam.blue{color:#8fb7ff;text-shadow:0 0 20px rgba(47,111,224,.55),0 2px 10px rgba(0,0,0,.9)}
.ggvs{font-size:11.5px;font-weight:800;letter-spacing:.26em;flex:none}

.ggbgrid{display:grid;grid-template-columns:1fr auto 1fr;gap:4px;align-items:stretch;padding:10px 8px 12px}
.ggside{
  text-align:center;padding:8px 2px 6px;border-radius:15px;position:relative;
  transition:background .45s ease,box-shadow .45s ease;
}
.ggside.has.red{background:linear-gradient(180deg,rgba(224,57,62,.2),rgba(224,57,62,.03));
  box-shadow:0 0 0 1px rgba(224,57,62,.35) inset}
.ggside.has.blue{background:linear-gradient(180deg,rgba(47,111,224,.2),rgba(47,111,224,.03));
  box-shadow:0 0 0 1px rgba(47,111,224,.35) inset}
.ggpts{
  font-size:clamp(50px,16.5vw,72px);font-weight:800;letter-spacing:-.055em;line-height:.92;
  font-variant-numeric:tabular-nums;filter:drop-shadow(0 3px 14px rgba(0,0,0,.85));
}
.ggside.has.red .ggpts{filter:drop-shadow(0 0 22px rgba(224,57,62,.45))}
.ggside.has.blue .ggpts{filter:drop-shadow(0 0 22px rgba(47,111,224,.45))}
.ggposs{
  display:inline-flex;align-items:center;gap:6px;margin-top:6px;
  font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  border-radius:999px;padding:4px 10px 4px 5px;
  opacity:0;transform:translateY(-3px);transition:opacity .35s ease,transform .35s ease;
}
.ggposs img{width:20px;height:auto;flex:none;filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}
.ggside.red .ggposs{color:#ffd9da;background:rgba(224,57,62,.3);box-shadow:0 0 0 1px rgba(224,57,62,.5) inset}
.ggside.blue .ggposs{color:#d6e5ff;background:rgba(47,111,224,.3);box-shadow:0 0 0 1px rgba(47,111,224,.5) inset}
.ggside.has .ggposs{opacity:1;transform:none}
.ggmid{text-align:center;min-width:92px;align-self:center;padding:0 4px}
.ggq{font-size:11px;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--silver-4)}
.gghole{font-size:24px;font-weight:800;letter-spacing:-.035em;line-height:1.15;margin:1px 0;
  text-shadow:0 2px 12px rgba(0,0,0,.9)}
.ggdbl{font-size:9.5px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold)}
.ggdbl.quiet{color:var(--silver-4)}

/* the line under the field: where the ball is and how far it has to go.
   THE ROW IS THE INNER SPAN, not the box, because the box is what carries the
   border. Put the flex on the box and its one child can never wrap, and a
   phone ends up scrolling sideways. */
.ggballline{
  padding:9px 12px;margin-bottom:12px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.03);
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-3);
  text-align:center;line-height:1.35;
}
.ggballline > span{display:block}
/* a line each. A middle dot that lands on a line break reads as a typo, and
   at 375 wide these phrases never share a line anyway. */
.ggballline em,.ggballline span.bit{display:block;font-style:normal}
.ggballline em{color:var(--ink)}
.ggballline .nb{white-space:nowrap}
.ggballline span.bit{margin-top:2px;opacity:.85}

/* THE TWO NUMBERS. Each side's two net scores make one number, low ball
   first, and the gap between them is the whole game. They were only ever in
   the prose before Alex asked for them here. */
.ggnums{
  display:flex;align-items:center;justify-content:center;gap:10px;
  margin-top:9px;padding-top:9px;border-top:1px solid var(--line-soft,rgba(190,212,230,.07));
}
/* the name sits ON its number rather than beside it. Side by side, a pair of
   full names and two big numbers do not fit on a phone and both names get cut
   off at the ellipsis. */
.ggn{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;flex:1}
.ggn i{
  font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.06em;
  color:var(--ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  max-width:100%;
}
.ggn b{
  font-size:28px;font-weight:800;letter-spacing:-.04em;line-height:1;
  font-variant-numeric:tabular-nums;
}
.ggn.red b{color:#ff8d90}
.ggn.blue b{color:#8fb7ff}
/* the low number takes the hole, so it is the one that lights up */
.ggn.low i{color:var(--ink-2)}
.ggn.red.low b{text-shadow:0 0 18px rgba(224,57,62,.6)}
.ggn.blue.low b{text-shadow:0 0 18px rgba(47,111,224,.6)}
.ggnvs{
  flex:none;font-size:10px;font-weight:800;letter-spacing:.2em;color:var(--silver-4);
}

/* THE BUTTON STAYS ON THE SCREEN. Once a hole has played, the teaching copy
   above the card has done its job, so it steps out of the way and the field,
   the board and SIMULATE NEXT HOLE all fit on a phone without a scroll. */
body[data-game="gridiron"] .simCard.running .simLead,
body[data-game="gridiron"] .simCard.running .simNote{display:none}
body[data-game="gridiron"] .simCard.running .simBtns{margin-top:0}
body[data-game="gridiron"] .simBtns{margin-bottom:16px}
/* SIMULATE NEXT HOLE is the button anybody actually presses, so it gets the
   room. Replay is the small one beside it. */
/* SIMULATE NEXT HOLE gets the whole row so the label stays on one line at
   full size. Replay sits under it, slim, because it is pressed once a round. */
body[data-game="gridiron"] .simBtns{flex-wrap:wrap;gap:8px}
body[data-game="gridiron"] .simBtns #simNext{flex:1 1 100%}
body[data-game="gridiron"] .simBtns #simReset{flex:1 1 100%;height:42px;font-size:13.5px}