/* FootSal: full-bleed 3D stadium; HUD bands pinned to top and bottom; menus float as cards over the live stadium.
   Single dark look by choice. See reference/footsal-page.md. */
:root{
  --wall:#0f1517; --glass:rgba(11,16,18,.88); --glass-0:rgba(11,16,18,0); --card:rgba(16,22,24,.92);
  --chalk:#eef3ea; --chalk-dim:rgba(238,243,234,.42); --muted:#a9b8b2; --line:rgba(238,243,234,.2);
  --red:#d9493c; --blue:#3a73d6; --marker:#f2c641; --ink:#151a1b;
  --f-display:"Bangers","Permanent Marker","Comic Sans MS",cursive;
  --f-jp:"Dela Gothic One","Hiragino Sans","Yu Gothic",sans-serif;
  --f-ui:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{height:100%;margin:0;overflow:hidden}
body{background:var(--wall);color:var(--chalk);font-family:var(--f-ui);font-size:16px;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;overscroll-behavior:none}
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;touch-action:none}
#fail{position:fixed;inset:0;display:grid;place-items:center;padding:24px;text-align:center;color:var(--muted);font-size:18px}

/* back to Experiments (menus only; hidden in a match) */
.back{position:fixed;left:max(16px,env(safe-area-inset-left,0px));top:calc(env(safe-area-inset-top,0px) + 16px);width:42px;height:42px;display:grid;place-items:center;border-radius:50%;color:var(--ink);background:var(--marker);border:3px solid var(--ink);box-shadow:3px 3px 0 var(--ink);text-decoration:none;z-index:5;transition:transform .08s,box-shadow .08s}
.back:hover{transform:translate(-1px,-1px);box-shadow:4px 4px 0 var(--ink)}
.back:active{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--ink)}
.back:focus-visible{outline:3px solid var(--marker);outline-offset:2px}
.back svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
body.ingame .back{display:none}

#hud{position:fixed;inset:0;pointer-events:none}
.band{position:absolute;left:0;right:0;pointer-events:auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.band.top{top:0;padding-top:calc(env(safe-area-inset-top,0px) + 8px);padding-bottom:16px;background:linear-gradient(var(--glass) 72%,var(--glass-0))}
.band.bot{bottom:0;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 12px);padding-top:16px;background:linear-gradient(var(--glass-0),var(--glass) 32%)}
.wrap{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:6px;position:relative}
.score{display:grid;grid-template-columns:auto 1fr auto 1fr;align-items:center;gap:8px;font-weight:700;letter-spacing:.04em;text-transform:uppercase}
.side{display:flex;align-items:center;gap:8px;min-width:0}
.side.right{justify-content:flex-end}
.chip{width:14px;height:14px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 2px var(--chalk)}
.chip.red{background:var(--red)} .chip.blue{background:var(--blue)}
.nm{font-size:15px;min-width:0;overflow:hidden}
.nm b{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-weight:700}
.nm small{display:block;font-size:11px;color:var(--muted);letter-spacing:.08em}
.side.right .nm{text-align:right}
.goals{font-size:34px;line-height:1;font-variant-numeric:tabular-nums}
.goals.bump{animation:bump .6s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{30%{transform:scale(1.5);color:var(--marker)}}
.mid{font-size:11px;color:var(--muted);letter-spacing:.1em;text-align:center}
.icon{width:38px;height:38px;padding:0;display:grid;place-items:center;border-radius:8px;background:var(--marker);color:var(--ink);box-shadow:3px 3px 0 var(--ink)}
.icon svg{width:16px;height:16px}
.banner{min-height:70px;display:flex;gap:12px;align-items:flex-start}
.btext{flex:1;min-width:0}
.banner h1{font-family:var(--f-display);font-weight:400;font-size:24px;letter-spacing:.03em;line-height:1.1;margin:0;color:var(--tc,var(--chalk));text-wrap:balance;text-shadow:2px 2px 0 var(--ink)}
.banner p{margin:2px 0 0;color:var(--muted);font-size:15px;line-height:1.3;font-weight:500}
.watch{flex:none;width:58px;display:flex;flex-direction:column;align-items:center;gap:1px}
.watch svg{width:58px;height:66px;display:block;overflow:visible}
.watch .ph{font-size:11px;font-weight:700;letter-spacing:.12em;color:var(--muted)}
.watch.off{display:none}
.watch.ticking svg{animation:nudge 1s steps(1) infinite}
@keyframes nudge{0%{transform:rotate(-2deg)}50%{transform:rotate(2deg)}}
.sw-c{fill:var(--chalk)} .sw-face{fill:var(--wall);stroke:var(--chalk);stroke-width:3.5}
.sw-w{fill:var(--wc,var(--marker));opacity:.9} .sw-t{stroke:var(--chalk);stroke-width:2;stroke-linecap:round}
.sw-h{stroke:var(--chalk);stroke-width:2.5;stroke-linecap:round}
.sw-n{fill:var(--chalk);font:700 13px var(--f-ui);font-variant-numeric:tabular-nums}
.watch.low .sw-n{fill:var(--marker)} .watch.low .sw-face{stroke:var(--marker)}
.controls{display:flex;gap:10px}
.controls.off{visibility:hidden}
#meter{position:absolute;left:0;right:0;bottom:100%;margin-bottom:12px;background:var(--card);border:2px solid var(--line);border-radius:12px;padding:8px 12px 6px;display:flex;flex-direction:column;gap:5px;cursor:pointer}
#mlab{font-weight:700;letter-spacing:.1em;font-size:14px;text-align:center;color:var(--marker)}
.mbar{position:relative;height:16px;border-radius:8px;background:rgba(238,243,234,.16);overflow:hidden}
#mzone{position:absolute;top:0;bottom:0;background:var(--marker)}
#mneedle{position:absolute;top:-2px;bottom:-2px;width:4px;margin-left:-2px;background:var(--chalk);border-radius:2px;box-shadow:0 0 0 2px var(--ink)}
#orders{position:absolute;left:0;right:0;bottom:100%;margin-bottom:14px;background:var(--card);border:3px solid var(--ink);border-radius:10px;box-shadow:4px 4px 0 var(--ink);padding:8px 10px 12px;display:flex;flex-direction:column;gap:9px}
#olab{font:400 16px/1 var(--f-display);letter-spacing:.12em;text-align:center;color:var(--marker);text-transform:uppercase}
.obtns{display:flex;gap:10px}
.obtns button{flex:1;font-size:18px;padding:11px 6px 10px;background:#1c2427;color:#fff}
.obtns button[aria-pressed="true"]{background-color:var(--marker);background-image:radial-gradient(rgba(21,26,27,.16) 28%,transparent 31%);background-size:7px 7px;color:var(--ink)}
.mends{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.12em;color:var(--muted);font-weight:600}
/* buttons share the cut-in look: comic type, a forward slant, ink outline, hard offset shadow, halftone */
button{font:400 21px/1 var(--f-display);letter-spacing:.07em;text-transform:uppercase;border-radius:8px;padding:13px 16px 12px;cursor:pointer;border:3px solid var(--ink);color:var(--chalk);
  transform:skewX(-8deg);box-shadow:4px 4px 0 var(--ink);transition:transform .08s,box-shadow .08s,filter .12s}
button:hover{transform:skewX(-8deg) translate(-1px,-1px);box-shadow:5px 5px 0 var(--ink)}
button:active{transform:skewX(-8deg) translate(3px,3px);box-shadow:1px 1px 0 var(--ink)}
button:focus-visible,input:focus-visible,a:focus-visible{outline:3px solid var(--marker);outline-offset:3px}
.prime{background-color:var(--marker);background-image:radial-gradient(rgba(21,26,27,.16) 28%,transparent 31%);background-size:7px 7px;color:var(--ink);flex:2;text-shadow:1px 1px 0 rgba(255,255,255,.55)}
.prime:hover{filter:brightness(1.06)}
.ghost{background-color:#1c2427;background-image:repeating-linear-gradient(-60deg,rgba(238,243,234,.05) 0 2px,transparent 2px 9px);color:#fff;flex:1;box-shadow:4px 4px 0 var(--ink),inset 0 0 0 2px rgba(238,243,234,.28);text-shadow:2px 2px 0 var(--ink)}
.ghost:hover{box-shadow:5px 5px 0 var(--ink),inset 0 0 0 2px var(--marker)}
.ghost:active{box-shadow:1px 1px 0 var(--ink),inset 0 0 0 2px var(--marker)}

/* overlays */
#ov{position:fixed;inset:0;display:grid;place-items:center;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:calc(env(safe-area-inset-top,0px) + 16px) calc(env(safe-area-inset-bottom,0px) + 16px);overflow-y:auto}
#ov.solid{background:rgba(12,17,19,.97)}
#ov.dim{background:linear-gradient(rgba(10,14,16,.15),rgba(10,14,16,.55))}
#ov.low{align-items:end;padding-bottom:calc(env(safe-area-inset-bottom,0px) + 96px)}
.card{background:var(--card);border:2px solid var(--line);border-radius:16px;padding:20px 18px;width:100%;max-width:340px;text-align:center;display:flex;flex-direction:column;gap:10px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.card h2{font-family:var(--f-display);font-weight:400;font-size:30px;margin:0;line-height:1.1;text-wrap:balance}
.card p{margin:0;color:var(--muted);font-size:16px;line-height:1.35}
.card ol{margin:0;padding-left:20px;text-align:left;color:var(--chalk);font-size:15px;line-height:1.4;display:flex;flex-direction:column;gap:4px}
.card .prime,.card .ghost{width:100%;flex:none}
#ov.low .card{gap:6px;padding:14px 16px}
#ov.low .card h2{font-size:26px}
.logo{font-family:var(--f-display);font-weight:400;margin:0;line-height:.9;text-align:center;font-size:clamp(64px,20vw,120px);letter-spacing:.02em;color:#fff;-webkit-text-stroke:6px var(--ink);paint-order:stroke fill;text-shadow:6px 6px 0 var(--red),12px 12px 0 var(--ink),0 18px 40px rgba(0,0,0,.6);transform:rotate(-6deg) skewX(-8deg)}
.logo{white-space:nowrap}
.logo span{color:var(--marker);text-shadow:5px 5px 0 var(--blue),10px 10px 0 var(--ink)}
.logo small{display:block;font:400 .2em/1.4 var(--f-jp);letter-spacing:.3em;-webkit-text-stroke:0;color:var(--chalk);text-shadow:2px 2px 0 var(--ink)}
.splash{position:relative}
.splash::before{content:"";position:fixed;inset:-30%;z-index:-1;pointer-events:none;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.22) 0deg .5deg,transparent .5deg 5deg);-webkit-mask:radial-gradient(circle at 50% 45%,transparent 18%,#000 55%);mask:radial-gradient(circle at 50% 45%,transparent 18%,#000 55%);animation:ci-jit .16s steps(2) infinite}
.splash{display:flex;flex-direction:column;align-items:center;gap:18px;max-width:360px;width:100%}
.tag{margin:0;font-weight:600;letter-spacing:.14em;text-transform:uppercase;font-size:15px;color:var(--chalk);text-shadow:0 2px 6px rgba(0,0,0,.8)}
.status{margin:0;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);min-height:16px;text-shadow:0 1px 4px rgba(0,0,0,.8)}
.load{width:100%;max-width:220px;height:4px;border-radius:2px;background:rgba(238,243,234,.16);overflow:hidden}
.load i{display:block;height:100%;width:0;background:var(--marker);transition:width .25s}
.load.done{visibility:hidden}
.big{width:100%;font-size:20px;padding:18px}
.pulse{animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{50%{transform:scale(1.03)}}
.menu{max-width:320px}
.menu .logo{font-size:52px;margin-bottom:6px}
.menu nav{display:flex;flex-direction:column;gap:10px}
.field{display:flex;flex-direction:column;gap:6px;text-align:left}
.sec{margin:6px 0 -2px;padding-top:12px;border-top:2px solid var(--line);font:400 20px/1 var(--f-display);letter-spacing:.08em;text-transform:uppercase;text-align:left;color:var(--marker);text-shadow:2px 2px 0 var(--ink)}
.lab{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);display:flex;align-items:center;gap:8px}
.row{display:flex;gap:8px}
input[type=text]{flex:1;min-width:0;font:600 19px var(--f-ui);background:rgba(238,243,234,.06);border:2px solid var(--line);border-radius:10px;color:var(--chalk);padding:11px 12px;user-select:text;-webkit-user-select:text}
input[readonly]{color:var(--chalk);border-style:dashed}
.dice{flex:none;width:50px;padding:0;display:grid;place-items:center;background:var(--marker);color:var(--ink)}
.dice svg{width:22px;height:22px}
.seg{display:flex;border:3px solid var(--ink);border-radius:8px;overflow:hidden;transform:skewX(-8deg);box-shadow:4px 4px 0 var(--ink);background:#1c2427}
.seg button{flex:1;border-radius:0;border:0;border-left:2px solid var(--ink);background:transparent;padding:11px 6px 10px;font-size:18px;transform:none;box-shadow:none;color:#fff}
.seg button:first-child{border-left:0}
.seg button:hover,.seg button:active{transform:none;box-shadow:none;background:rgba(238,243,234,.08)}
.seg button[aria-pressed="true"]{background-color:var(--marker);background-image:radial-gradient(rgba(21,26,27,.16) 28%,transparent 31%);background-size:7px 7px;color:var(--ink)}
input[type=range]{width:100%;accent-color:var(--marker)}
.val{margin-left:auto;color:var(--chalk);font-variant-numeric:tabular-nums}
.foot{font-size:13px;color:var(--muted);margin:0}
.credit{color:var(--marker);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.credits{list-style:none;margin:0;padding:0;text-align:left;display:flex;flex-direction:column;gap:8px;font-size:15px;line-height:1.3}
.credits b{display:block;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.credits a{color:var(--chalk);text-underline-offset:3px}

/* anime cut-ins: full-screen splash for every game state. Layers: white flash, speed lines (or gloom
   lines for a sad beat), a skewed halftone band, then the katakana and the title, letter by letter.
   Never takes input; see cutIn() in js/footsal.js. */
#cut{position:fixed;inset:0;pointer-events:none;z-index:20;overflow:hidden}
.ci{position:absolute;inset:0;display:grid;place-items:center;--c:var(--marker);--c2:var(--ink);--d:1.2s;animation:ci-out .2s ease-in calc(var(--d) - .2s) forwards}
.ci-flash{position:absolute;inset:0;background:#fff;animation:ci-flash .28s ease-out forwards}
.ci-lines{position:absolute;inset:-35%;background:repeating-conic-gradient(from 0deg at 50% 50%,rgba(255,255,255,.95) 0deg .45deg,transparent .45deg 3.3deg,rgba(255,255,255,.6) 3.3deg 3.6deg,transparent 3.6deg 7deg);-webkit-mask:radial-gradient(circle at 50% 50%,transparent 20%,#000 52%);mask:radial-gradient(circle at 50% 50%,transparent 20%,#000 52%);animation:ci-jit .1s steps(2) infinite}
.ci-band{position:relative;width:150vw;justify-self:start;margin-left:-25vw;padding:min(4vh,30px) 0 min(5vh,36px);display:flex;flex-direction:column;align-items:center;gap:2px;background-color:var(--c);background-image:radial-gradient(rgba(0,0,0,.2) 28%,transparent 31%),linear-gradient(90deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.25));background-size:9px 9px,100% 100%;box-shadow:0 0 0 6px var(--c2),0 0 0 11px #fff,0 0 0 15px var(--c2),0 30px 60px rgba(0,0,0,.45);transform:rotate(-7deg);animation:ci-in .24s cubic-bezier(.2,1.5,.4,1) both}
.ci-jp{font:400 clamp(22px,7vw,46px)/1 var(--f-jp);letter-spacing:.18em;color:var(--c2);transform:translateX(-8vw);animation:ci-slide .5s cubic-bezier(.2,1,.3,1) .06s both}
.ci-t{display:flex;font:400 clamp(52px,17vw,160px)/.92 var(--f-display);letter-spacing:.02em;white-space:nowrap}
.ci-t i{font-style:normal;display:inline-block;color:#fff;-webkit-text-stroke:clamp(5px,1.6vw,10px) var(--c2);paint-order:stroke fill;text-shadow:.06em .06em 0 var(--c2);animation:ci-pop .42s cubic-bezier(.2,1.9,.4,1) both,ci-shake .09s steps(2) 4;animation-delay:calc(.07s + var(--i)*.035s),calc(.4s + var(--i)*.035s)}
.ci-sub{font:700 clamp(15px,4vw,22px)/1.2 var(--f-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--c2);animation:ci-slide .5s cubic-bezier(.2,1,.3,1) .15s both}
/* sizes and moods */
.ci.small{place-items:start center;padding-top:calc(env(safe-area-inset-top,0px) + 150px)}
.ci.small .ci-band{width:120vw;margin-left:-10vw;padding:10px 0 12px;transform:rotate(-4deg);box-shadow:0 0 0 4px var(--c2),0 0 0 7px #fff,0 0 0 10px var(--c2)}
.ci.small .ci-t{font-size:clamp(40px,12vw,84px)}
.ci.small .ci-jp{font-size:clamp(16px,4.6vw,26px)}
.ci.small .ci-lines,.ci.small .ci-flash{display:none}
.ci.huge .ci-t{font-size:clamp(76px,25vw,230px)}
.ci.huge .ci-band{animation:ci-in .3s cubic-bezier(.2,1.6,.4,1) both,ci-zoom var(--d) linear both}
.ci.huge::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,transparent 40%,var(--c) 140%);mix-blend-mode:screen;animation:ci-flash .9s ease-out forwards}
.ci.sad .ci-flash{display:none}
.ci.sad .ci-lines{inset:0 0 40% 0;background:repeating-linear-gradient(90deg,rgba(20,30,60,.75) 0 2px,transparent 2px 13px);-webkit-mask:linear-gradient(#000,transparent);mask:linear-gradient(#000,transparent);animation:ci-gloom .9s ease-out both}
.ci.sad .ci-band{--c:#8c97a6;filter:saturate(.6)}
.ci.sad .ci-t i{color:#d9e1ea;animation:ci-pop .42s cubic-bezier(.2,1.9,.4,1) both,ci-droop .9s ease-in both;animation-delay:calc(.07s + var(--i)*.035s),calc(.45s + var(--i)*.06s)}
@keyframes ci-flash{from{opacity:.95}to{opacity:0}}
@keyframes ci-jit{50%{transform:rotate(1.4deg) scale(1.03)}}
@keyframes ci-in{from{transform:rotate(-7deg) translateX(-115%) scaleY(.4)}}
@keyframes ci-slide{from{opacity:0;transform:translateX(30vw)}}
@keyframes ci-pop{0%{opacity:0;transform:scale(2.6) rotate(-12deg)}100%{opacity:1;transform:none}}
@keyframes ci-shake{50%{transform:translate(3px,-2px) rotate(1deg)}}
@keyframes ci-droop{to{transform:translateY(14px) rotate(6deg);opacity:.85}}
@keyframes ci-gloom{from{transform:translateY(-100%)}}
@keyframes ci-zoom{to{scale:1.08}}
@keyframes ci-out{to{opacity:0;transform:translateX(18vw) skewX(-20deg)}}
/* shot impact frame on the whole page chrome */
body.impact #hud{filter:invert(1) contrast(1.4)}
@media (prefers-reduced-motion:reduce){.pulse,.watch.ticking svg,.goals.bump,.splash::before,.ci-lines,.ci-t i{animation:none}.ci-band{animation:none}}