/* ── football HUD ────────────────────────────────────────────
   The play sheet used to be a 560px card stack in the middle of the screen —
   directly over the grass you draw routes on. It is a bottom dock now, and
   the container is click-through so only the four cards eat a click.       */

#fthud{display:none}
/* display:contents so each child anchors to the viewport instead of a
   transformed column that would trap position:absolute children */
#fthud.on{display:contents}

.ftmid b{font-size:var(--t-h2);letter-spacing:1.5px}      /* DOWN n is the state you read */
.ftmid i{font-style:normal;font-size:var(--t-body);font-weight:700;color:var(--ink-2)}
.ftmid.flash b{animation:bump .32s var(--ease-pop)}
#ftResult{display:none}          /* the announcer's lanes own results now */

#ftplays{position:absolute;left:0;right:0;bottom:var(--dock);margin:auto;width:min(720px,94vw);
  display:none;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s3);
  pointer-events:none;z-index:var(--z-hudmode)}
#ftplays.on{display:grid}
.ftplay{position:relative;pointer-events:auto;display:flex;flex-direction:column;align-items:flex-start;
  text-align:left;gap:2px;padding:10px 12px 12px;font-family:inherit;
  background:var(--cream);color:var(--ink);border:var(--bd) solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--sh-card);
  animation:riseIn var(--d-pop) var(--ease-out) both;animation-delay:calc(var(--i,0)*50ms)}
.ftplay:nth-child(2){--i:1} .ftplay:nth-child(3){--i:2} .ftplay:nth-child(4){--i:3}
.ftplay b{display:block;font-size:var(--t-lead);letter-spacing:1px}
.ftplay i{display:block;font-style:normal;font-size:var(--t-small);font-weight:600;
  color:var(--ink-2);line-height:1.3}
.ftplay:hover{transform:translateY(-4px) rotate(-1deg)}
/* picked reads as PRESSED IN, so it can never be mistaken for the hover lift */
.ftplay.picked{background:var(--yellow);transform:translateY(2px);box-shadow:var(--sh-press)}
.ftplay.picked::after{content:'✓';position:absolute;right:10px;top:6px;font-size:var(--t-h3);font-weight:700}

/* the contextual prompt: the one thing to do right now */
#ftPrompt{position:absolute;left:0;right:0;bottom:calc(var(--dock) + 8px);margin:auto;width:max-content;
  display:none;font-size:var(--t-h2);font-weight:700;letter-spacing:2px;padding:10px 26px;
  background:var(--yellow);color:var(--ink);border:var(--bd) solid var(--ink);
  border-radius:var(--r-card);box-shadow:var(--sh-card);z-index:var(--z-hudmode);
  animation:popIn var(--d-pop) var(--ease-pop) both}
#ftPrompt.on{display:block}
#ftplays.on ~ #ftPrompt{bottom:calc(var(--dock) + 122px)}   /* clear the dock */

/* the coaching line: small, quiet, out of the way */
#ftHint{position:absolute;right:var(--hud-side);bottom:var(--dock);display:none;max-width:360px;
  white-space:normal;text-align:right;font-size:var(--t-small);font-weight:600;letter-spacing:.5px;
  padding:7px 14px;z-index:var(--z-hudmode)}
#ftHint.on{display:block}
#ftplays.on ~ #ftHint{display:none}    /* the cards already say what to do */