/* Penalty Shootout: the night stadium, the home screen, the scoreboard. */
:root{--lacquer:#0B1630;--lacquer-hi:#132546;--hair:rgba(253,224,71,.28);--brass:#F5C842;--brass-lo:#B8891C;--brass-hi:#FDE68A;--ink-soft:#BFC9DA;--ink-dim:#8391A8}
body{background:radial-gradient(ellipse at 50% 30%,#1B3355,#081022 72%)}
.screen{position:fixed;inset:0;display:flex;flex-direction:column}
.card{background:linear-gradient(180deg,#1A3158,var(--lacquer-hi) 40%)}
.card .actions{background:#132546}
.pill{color:#2A1B02}

/* home */
.home{align-items:center;justify-content:center;gap:1em;padding:1.2em;text-align:center}
.home .title{font-size:clamp(2.3em,10vw,4.2em);color:#FFF;text-shadow:0 3px 0 #0E3A1E,0 8px 22px rgba(0,0,0,.55)}
.lead{display:flex;flex-direction:column;align-items:center;gap:.5em}
.lead .art{width:9.5em;height:auto;filter:drop-shadow(0 8px 16px rgba(0,0,0,.45))}
.tagline{margin:0;color:var(--ink);font-size:1.12em}
.menu-col{display:flex;flex-direction:column;align-items:center;gap:.65em;width:min(24em,100%)}
.menu-col .pill{min-width:12em;min-height:50px}
.menu-col .pill.alt{background:linear-gradient(180deg,#E8EEF8,#BFC9DA 55%,#8C99AE);box-shadow:0 1px 0 #fff8 inset,0 4px 0 #4A5568,0 8px 16px rgba(0,0,0,.45);color:#13213A}
.ladder{display:flex;align-items:stretch;gap:.4em;width:100%}
.ladder .step{flex:none;width:52px;min-height:52px;border-radius:.8em;border:1px solid var(--hair);background:rgba(255,255,255,.06);display:grid;place-items:center;padding:0}
.ladder .step svg{width:1.4em;height:1.4em;fill:none;stroke:var(--brass-hi);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.ladder .step.next svg{transform:scaleX(-1)}
.ladder .step:disabled{opacity:.3;cursor:default}
.ladder .step:focus-visible{outline:3px solid var(--brass-hi);outline-offset:2px}
.rung{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:.3em .5em;border-radius:.8em;background:rgba(8,16,34,.7);border:1px solid var(--hair)}
.rung b{font-size:1.1em;color:var(--brass-hi)}
.rung span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.pips{display:flex;gap:.3em;margin-top:.2em}
.pip{width:.6em;height:.6em;border-radius:50%;background:rgba(255,255,255,.28)}
.pip.won{background:var(--brass)}
.pip.locked{background:rgba(255,255,255,.1)}
.pip.here{box-shadow:0 0 0 2px #fff}
.links{display:flex;gap:.1em;justify-content:center;flex-wrap:wrap}
.links .link{min-height:44px;font-size:.98em;color:var(--brass-hi)}
/* a short wide screen: the title beside the buttons, never stacked */
@media (max-height:480px){
  .home{display:grid;grid-template-columns:1fr 1.2fr;align-items:center;gap:0 1.2em;padding:.4em 1em}
  .home .title{font-size:2em}
  .lead .art{width:6.5em}
  .tagline{font-size:.95em}
  .menu-col{gap:.35em;width:100%}
  .menu-col .pill{min-height:44px;padding:.35em 1.6em;font-size:1.05em}
  .ladder .step{min-height:46px;width:46px}
  .rung{padding:.15em .4em;line-height:1.2}
  .pips{margin-top:.1em}
  .links .link{padding:.25em .45em}
}
@media (max-height:480px) and (max-width:760px){html:not(.hw-embed) body:has(#home:not([hidden])) #home{padding-top:.4em!important}
  html:not(.hw-embed) .home .lead{padding-top:50px}}
@media (max-height:380px){.menu-col .pill{min-height:44px;padding:.25em 1.4em}.rung span:not(.pips){font-size:.9em}.tagline{display:none}}

/* the game */
#game{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
#game .bar{padding:max(.35em,env(safe-area-inset-top)) .6em .3em max(.6em,env(safe-area-inset-left));gap:.5em;align-items:stretch}
#game .bar .jewel{flex:none;width:2.75em;height:2.75em;align-self:center}
.score{flex:1;display:flex;gap:.45em;justify-content:center;min-width:0}
.chip{flex:1 1 0;max-width:15em;min-width:0;display:flex;flex-direction:column;padding:.25em .7em .3em;border-radius:.8em;
  background:rgba(8,16,34,.82);border:1px solid rgba(255,255,255,.14);opacity:.75;transition:opacity .2s,box-shadow .2s}
.chip.on{opacity:1}
.chip.you.on{box-shadow:0 0 0 2px #2F7BFF,0 0 16px rgba(47,123,255,.4)}
.chip.cpu.on{box-shadow:0 0 0 2px var(--kit,#F5C842),0 0 16px rgba(255,255,255,.18)}
.chip .who{font-size:.82em;color:var(--ink-soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:flex;align-items:center;gap:.4em}
.chip .sw{width:.75em;height:.75em;border-radius:50%;background:#2F7BFF;flex:none}
.chip.cpu .sw{background:var(--kit,#F5C842)}
.chip .line{display:flex;align-items:center;gap:.5em;min-width:0}
.chip .goals{font:900 1.75em/1 var(--sans);font-variant-numeric:tabular-nums;color:#fff}
.dots{display:flex;gap:.25em;flex-wrap:nowrap;overflow:hidden}
.dot{width:.8em;height:.8em;border-radius:50%;border:2px solid rgba(255,255,255,.45);flex:none}
.dot.in{background:#22C55E;border-color:#86EFAC}
.dot.out{background:#EF4444;border-color:#FCA5A5}
.dot.sd{border-style:dashed}
.felt{flex:1;position:relative;min-height:0;touch-action:none}
#bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
#scene{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
.banner{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);max-width:calc(100% - 16px);pointer-events:none;padding:.4em 1.1em;border-radius:999px;
  background:rgba(6,12,24,.85);border:1px solid var(--hair);font-weight:700;font-size:1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .25s}
.banner:empty{opacity:0}
@media (max-width:420px){.chip{padding:.2em .5em}.chip .goals{font-size:1.5em}.dot{width:.7em;height:.7em}.banner{font-size:.92em}}
/* a short wide screen: the score in a column beside the pitch */
@media (max-height:500px) and (min-aspect-ratio:6/5){
  #game{flex-direction:row}
  #game .bar{flex-direction:column;justify-content:flex-start;width:11.5em;flex:none;padding:max(.4em,env(safe-area-inset-top)) .4em .4em max(.5em,env(safe-area-inset-left))}
  #game .bar .jewel{align-self:flex-start}
  .score{flex-direction:column;justify-content:flex-start;flex:none}
  .chip{max-width:none;flex:none}
  .banner{font-size:.9em}
}
.card .big{font:800 1.25em/1.3 var(--serif);text-align:center;margin:0 0 .3em}
.card .game-name{text-align:center;color:var(--brass);font-weight:700;margin:0 0 .3em}
.card p{margin:.2em 0 .5em}
.card ul{margin:.2em 0 .4em;padding-left:1.2em}
.card li{margin:.25em 0}
.card .pill,.card .row,.card .choice,.card .link{min-height:44px}
.rung .pips{overflow:visible;padding:3px 0 2px}