html,body{margin:0}
[hidden]{display:none!important}
/* Layout: an arcade cabinet on one screen. Scoreboard strip on top, a 16:9 pixel field below it, menus sit on top of the field. */
:root{
  --night:#120d1f; --ink:#0a0712; --panel:#221a38; --cream:#f6ecd2;
  --gold:#fdd023; --purple:#461d7c; --crimson:#9e1b32; --white:#ffffff;
  --good:#5dff7a; --bad:#ff6b6b; --veil:rgba(10,7,18,.62);
  --pixel:"Press Start 2P", ui-monospace, "Courier New", monospace;
  color-scheme:dark;
}
html,body{height:100%}
body{margin:0;background:var(--night);color:var(--cream);font-family:var(--pixel);overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}
#app{height:100%;box-sizing:border-box;display:flex;flex-direction:column;gap:10px;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:8px}

/* Scoreboard */
#hud{display:flex;justify-content:center;align-items:stretch;gap:6px;font-size:clamp(8px,1.4vw,13px);flex-wrap:wrap}
.tm{display:flex;align-items:center;gap:.7em;padding:.55em .8em;border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);letter-spacing:.05em}
.tm.lsu{background:var(--purple);color:var(--gold)}
.tm.bama{background:var(--crimson);color:var(--white)}
.tm b{font-size:1.7em;font-weight:400;font-variant-numeric:tabular-nums;min-width:1.4em;text-align:center}
.mid{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:.5em;padding:.45em .8em;
  background:var(--ink);border:3px solid var(--ink);min-width:12em}
.mid .clk{color:var(--gold);font-variant-numeric:tabular-nums}
.mid .dd{font-size:.78em;color:var(--cream)}
#snd{font:inherit;background:var(--panel);color:var(--cream);border:3px solid var(--ink);box-shadow:0 3px 0 var(--ink);padding:0 .8em;cursor:pointer}
#snd[aria-pressed="false"]{color:var(--bad)}
#snd:focus-visible,.btn:focus-visible,.card:focus-visible{outline:3px solid var(--cream);outline-offset:2px}

/* Field screen */
#stage{flex:1;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;touch-action:none}
#screen{position:relative;border:3px solid var(--ink);box-shadow:0 0 0 3px var(--gold),0 0 0 6px var(--ink),0 10px 0 6px var(--ink);
  background:var(--ink);--u:4px;overflow:hidden;max-width:100%}
#cv{display:block;width:100%;height:100%;image-rendering:pixelated;image-rendering:crisp-edges}

#msg{position:absolute;left:0;right:0;top:20%;text-align:center;pointer-events:none;
  font-size:max(14px,calc(var(--u)*5.6));color:var(--gold);line-height:1.2;padding-inline:4%;
  text-shadow:.12em .12em 0 var(--ink),-.06em 0 0 var(--ink),0 -.06em 0 var(--ink),.06em 0 0 var(--ink);opacity:0}
#msg.show{opacity:1;animation:pop .32s steps(4) both}
#msg.red{color:var(--bad)} #msg.white{color:var(--cream)} #msg.small{font-size:max(10px,calc(var(--u)*3.4))}
@keyframes pop{0%{transform:scale(.3)}70%{transform:scale(1.12)}100%{transform:scale(1)}}
#hint{position:absolute;left:50%;top:calc(var(--u)*2.2);transform:translateX(-50%);pointer-events:none;text-align:center;width:max-content;max-width:88%;box-sizing:border-box;line-height:1.5;
  font-size:max(7px,calc(var(--u)*1.75));background:var(--veil);color:var(--cream);padding:.7em 1em;border:2px solid var(--ink)}
#hint:empty{display:none}
#jukes{position:absolute;left:0;right:0;bottom:calc(var(--u)*2.4);display:flex;justify-content:space-between;padding-inline:calc(var(--u)*2.4);pointer-events:none;z-index:2}
#jukes .btn{pointer-events:auto;flex-direction:row;font-size:max(12px,calc(var(--u)*2.6));padding:1.2em 1.1em;gap:.6em}
.tri{display:block;width:0;height:0;border:.55em solid transparent}
.tri.l{border-right-color:currentColor;margin-left:-.4em} .tri.r{border-left-color:currentColor;margin-right:-.4em}
#screen:not(.vert) #jukes{left:auto;flex-direction:column;gap:calc(var(--u)*1.6)}
#screen:not(.vert) #jukes .btn{font-size:max(10px,calc(var(--u)*1.9))}
#screen:not(.vert) .tri{transform:rotate(90deg)}
.card svg.v,#screen.vert .card svg.h{display:none}
#screen.vert .card svg.v{display:block}
#screen.vert .card{font-size:max(7px,calc(var(--u)*1.35))}
#screen.vert #ovPlay{background:linear-gradient(transparent 15%,var(--veil) 40%)}
@media (max-height:520px){#app{gap:6px;padding-block:4px}#hud{font-size:8px}.tm,.mid{padding-block:.35em}}
#hint.hot{color:var(--gold);animation:blink .5s steps(2) infinite}
@keyframes blink{50%{opacity:.35}}

/* Overlays */
.ov{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2.2);
  background:var(--veil);text-align:center;padding:calc(var(--u)*2.5);box-sizing:border-box;font-size:max(8px,calc(var(--u)*2.1));line-height:1.5}
.ov h2{margin:0;font-size:max(11px,calc(var(--u)*3.6));font-weight:400;color:var(--gold);text-shadow:.12em .12em 0 var(--ink);text-wrap:balance}
.ov p{margin:0}
.row{display:flex;gap:calc(var(--u)*2);justify-content:center;flex-wrap:wrap}
.btn{font-family:var(--pixel);font-size:max(9px,calc(var(--u)*2.3));color:var(--ink);background:var(--gold);border:3px solid var(--ink);
  box-shadow:0 .35em 0 var(--ink);padding:.9em 1.3em;cursor:pointer;touch-action:manipulation;display:flex;flex-direction:column;gap:.6em;align-items:center}
.btn small{font-size:.62em;opacity:.8}
.btn:active{transform:translateY(.25em);box-shadow:0 .1em 0 var(--ink)}
.btn.red{background:var(--crimson);color:var(--white)}
.btn.purple{background:var(--purple);color:var(--gold)}
.btn.ghost{background:var(--panel);color:var(--cream)}

#ovTitle{background:linear-gradient(var(--veil),rgba(10,7,18,.85));gap:calc(var(--u)*2.6)}
.logo{display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.8);line-height:1}
.logo span{display:block}
.logo .l1{font-size:calc(var(--u)*8.4);color:var(--gold);text-shadow:calc(var(--u)*.6) calc(var(--u)*.6) 0 var(--purple),calc(var(--u)*1.1) calc(var(--u)*1.1) 0 var(--ink)}
.logo .l2{font-size:calc(var(--u)*5.6);color:var(--white);letter-spacing:.08em;text-shadow:calc(var(--u)*.5) calc(var(--u)*.5) 0 var(--crimson),calc(var(--u)*.9) calc(var(--u)*.9) 0 var(--ink)}
.match{display:flex;gap:1em;align-items:center;font-size:max(8px,calc(var(--u)*2.2))}
.match .t1{color:var(--gold);background:var(--purple);padding:.5em .7em;border:2px solid var(--ink)}
.match .t2{color:var(--white);background:var(--crimson);padding:.5em .7em;border:2px solid var(--ink)}
.how{font-size:max(7px,calc(var(--u)*1.6));opacity:.9;max-width:44em}

#ovPlay h2{font-size:max(9px,calc(var(--u)*2.6))}
#ovPlay{justify-content:flex-end;background:linear-gradient(transparent 25%,var(--veil) 55%);gap:calc(var(--u)*1.6)}
.cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:calc(var(--u)*1.4);width:100%;max-width:calc(var(--u)*92)}
.card{font-family:var(--pixel);font-size:max(7px,calc(var(--u)*1.7));background:var(--panel);color:var(--cream);border:3px solid var(--ink);
  box-shadow:0 .4em 0 var(--ink);padding:calc(var(--u)*.8);cursor:pointer;display:flex;flex-direction:column;gap:.7em;align-items:stretch;touch-action:manipulation}
.card svg{display:block;width:100%;height:auto;border:2px solid var(--ink)}
.card:hover{background:var(--purple)}
.card:active{transform:translateY(.3em);box-shadow:0 .1em 0 var(--ink)}
.card em{font-style:normal;color:var(--gold)}
#fourth{display:flex;gap:calc(var(--u)*1.4);align-items:center;flex-wrap:wrap;justify-content:center}
#fourth .lab{color:var(--bad)}
#fourth .btn{padding:.7em 1em;flex-direction:row}

.meter{position:relative;width:min(80%,calc(var(--u)*60));height:calc(var(--u)*4.2);background:var(--crimson);border:3px solid var(--ink)}
.meter .zone{position:absolute;top:0;bottom:0;background:var(--good)}
.meter .zone::after{content:"";position:absolute;top:0;bottom:0;left:50%;width:2px;background:var(--white);opacity:.7}
.meter .needle{position:absolute;top:-30%;bottom:-30%;width:calc(var(--u)*.9);background:var(--white);border:2px solid var(--ink);transform:translateX(-50%)}
.posts{position:relative;z-index:1;width:calc(var(--u)*26);height:calc(var(--u)*16)}
.posts i{position:absolute;background:var(--gold);display:block}
.posts .up1{left:15%;top:0;width:calc(var(--u)*.8);height:62%}
.posts .up2{right:15%;top:0;width:calc(var(--u)*.8);height:62%}
.posts .bar{left:15%;right:15%;top:60%;height:calc(var(--u)*.8)}
.posts .pole{left:50%;top:60%;width:calc(var(--u)*.8);height:40%;transform:translateX(-50%)}
.kball{position:absolute;left:50%;bottom:-40%;width:calc(var(--u)*2.4);height:calc(var(--u)*1.6);background:#8b4a1c;border:2px solid var(--ink);
  transform:translate(-50%,0);transition:transform .8s cubic-bezier(.2,.7,.4,1)}
.kball.good{transform:translate(-50%,calc(var(--u)*-15)) scale(.5)}
.kball.left{transform:translate(calc(-50% - var(--u)*15),calc(var(--u)*-13)) scale(.5)}
.kball.right{transform:translate(calc(-50% + var(--u)*15),calc(var(--u)*-13)) scale(.5)}
.kball.short{transform:translate(-50%,calc(var(--u)*-6)) scale(.7)}

#ovDef{gap:calc(var(--u)*1.6)}
.mini{position:relative;width:min(90%,calc(var(--u)*70));height:calc(var(--u)*4);border:3px solid var(--ink);
  background:repeating-linear-gradient(90deg,#3e8e3a 0 calc(var(--u)*3.5),#46963f calc(var(--u)*3.5) calc(var(--u)*7))}
.mini::before,.mini::after{content:"";position:absolute;top:0;bottom:0;width:8%}
.mini::before{left:0;background:var(--purple)} .mini::after{right:0;background:var(--crimson)}
.mini i{position:absolute;top:50%;width:calc(var(--u)*2);height:calc(var(--u)*1.4);background:#8b4a1c;border:2px solid var(--ink);
  transform:translate(-50%,-50%);transition:left .45s steps(6);z-index:1}
#dLog{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.7em;min-height:6em;font-size:max(7px,calc(var(--u)*1.8))}
#dLog li.big{font-size:1.5em;color:var(--gold)}
#dLog li.big.red{color:var(--bad)}
.ovFinal .score{font-size:max(12px,calc(var(--u)*4));display:flex;gap:1em;align-items:center}
.ovFinal .score .a{color:var(--gold)} .ovFinal .score .b{color:var(--white)}

@media (prefers-reduced-motion:reduce){#msg.show,#hint.hot{animation:none}.kball{transition:none}}
.back{color:var(--cream);font-size:max(7px,calc(var(--u)*1.6));text-decoration:underline;text-underline-offset:.3em}