:root{color-scheme:dark;--navy:#132540;--blue:#22466a;--ink:#101b33;--gold:#ffdc6b;--paper:#fff1d2;--dim:#b9c6d3;--line:#ffffff22;--edge:clamp(12px,2.6vw,42px);font-family:Inter,"Avenir Next",system-ui,"PingFang SC",sans-serif}
*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;color:var(--paper);background:var(--ink)}
button,select,input{font:inherit}
button,select{border:1px solid var(--line);background:#233f61;color:var(--paper);border-radius:8px}
button{cursor:pointer;min-height:40px;padding:8px 14px;font-weight:800}
button:hover{background:#345778}
button:focus-visible,select:focus-visible,input:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
button:disabled{opacity:.5;cursor:default}
#app{height:100vh;height:100dvh;position:relative;overflow:hidden;isolation:isolate}
#pitch,#pitch canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.topbar{position:absolute;z-index:5;top:max(10px,env(safe-area-inset-top));left:max(var(--edge),env(safe-area-inset-left));right:max(var(--edge),env(safe-area-inset-right));display:flex;justify-content:space-between;align-items:center;pointer-events:none}
.wordmark,.tools{display:flex;gap:9px;align-items:center}
.wordmark img{width:31px;height:31px}
.wordmark b{font-size:12px;letter-spacing:.12em;color:#fff5d8;text-shadow:0 2px 7px #0e233c}
.tools{pointer-events:auto}
.tools button{min-width:40px;height:40px;padding:7px;display:grid;place-items:center;background:#152845ed}
.tools button:hover{background:#33577c}
.tools svg{width:22px;height:22px}
#screen{position:absolute;inset:0;z-index:2;overflow:auto;padding:clamp(66px,10vh,110px) max(var(--edge),env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(var(--edge),env(safe-area-inset-left));background:linear-gradient(106deg,#11213bf7 0%,#132c47ed 45%,#13253b69 73%,#13263a38 100%)}
#screen h1{font-family:Impact,"Arial Black","PingFang SC",sans-serif;font-size:clamp(39px,7vw,104px);line-height:.9;margin:7px 0 20px;text-transform:uppercase;font-style:italic;letter-spacing:-.02em;max-width:8ch;text-wrap:balance}
#screen h2,.sheet h2{font-family:"Arial Black",system-ui,sans-serif;letter-spacing:-.04em;font-size:clamp(24px,4vw,47px);margin:0 0 .45em;line-height:1}
#screen p,.sheet p{margin:.55em 0 1em;color:var(--dim);line-height:1.5}
.eyebrow{font-weight:900;letter-spacing:.15em;color:var(--gold);font-size:12px;text-transform:uppercase}
.hero{max-width:940px;margin-inline:auto;display:grid;grid-template-columns:minmax(230px,1fr) minmax(195px,310px);gap:clamp(18px,6vw,100px);align-items:center}
.hero p{max-width:32ch}
.actions{display:grid;gap:9px}
.actions button{text-align:left}
.primary{background:var(--gold);color:#16213a;border-color:#ffdd72}
.primary:hover{background:#fff0a6;color:#16213a}
.secondary{background:#17304bec}
.panel,.sheet{background:#142842f5;border:1px solid #ffffff28;box-shadow:0 15px 40px #07132166;border-radius:15px}
.panel{padding:clamp(13px,3vw,29px);max-width:830px;margin:auto}
.panel.narrow{max-width:600px}
.row,.footer-buttons{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.footer-buttons{margin-top:17px}
.form{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:14px}
.form label{display:grid;align-content:start;gap:5px;color:var(--dim);font-size:13px;font-weight:700}
.form select,.form input[type=range]{width:100%;min-height:40px;padding:5px 8px}
.table-wrap{overflow:auto;max-height:230px;margin-top:12px}
table{width:100%;border-collapse:collapse;text-align:left;font-variant-numeric:tabular-nums}
td,th{padding:7px 8px;border-bottom:1px solid var(--line);white-space:nowrap;font-size:13px}
th{color:var(--dim);position:sticky;top:0;background:#152a44}
tr.myteam td{color:var(--gold);font-weight:900}
.result-line{display:flex;gap:12px;align-items:center;justify-content:center;padding:12px 8px;background:#0b1e36;border:1px solid var(--line);border-radius:8px;text-align:center}
.result-line b{font-variant-numeric:tabular-nums;white-space:nowrap;font-size:21px}
.bracket-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(167px,1fr));gap:6px}
.bracket-grid div{padding:7px;background:#0b1e36;border-radius:5px;font-size:13px}
.groups-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:5px;margin:8px 0}
.groups-list button{font-size:12px;min-height:32px}
#hud{position:absolute;inset:0;z-index:3;pointer-events:none}
body.in-game #pitch,body.in-game #hud{touch-action:none;}
body.in-game #app{user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;overscroll-behavior:none}
#scoreboard{position:absolute;top:max(11px,env(safe-area-inset-top));left:50%;transform:translateX(-50%);display:flex;align-items:stretch;overflow:hidden;border-radius:8px;border:1px solid #ffffff50;background:#112844ee;box-shadow:0 4px 15px #11213a42;white-space:nowrap;font-variant-numeric:tabular-nums}
.teamplate{display:flex;gap:5px;align-items:center;padding:0 10px;font-size:13px;font-weight:900;border-bottom:3px solid var(--team,#fff);min-width:74px;justify-content:center}
.score{display:grid;grid-template-rows:auto auto;min-width:80px;text-align:center;background:#fce3a4;color:#132540;font-weight:950;padding:2px 8px 4px;line-height:1.05}
.score b{font-size:20px;letter-spacing:.1em}.score small{font-size:10px}
#match-note{position:absolute;top:clamp(57px,13%,115px);left:50%;transform:translateX(-50%);text-align:center;width:max-content;max-width:82%;font-size:clamp(12px,2vw,18px);font-weight:800;color:#fff3d0;text-shadow:0 2px 6px #0d1b2b;white-space:normal}
#match-note:not(:empty){background:#122846df;border:1px solid #ffffff2b;padding:6px 12px;border-radius:5px}
#match-note.goal{top:28%;font-family:Impact,"Arial Black",sans-serif;font-size:clamp(26px,6vw,71px);font-style:italic;line-height:1;color:var(--gold);padding:.25em .5em}
#charge{position:absolute;bottom:max(18px,env(safe-area-inset-bottom));width:100px;left:50%;translate:-50% 0;height:6px;background:#142640d9;border-radius:6px;overflow:hidden}
#charge i{display:block;background:var(--gold);height:100%;transform-origin:left}
#penalty-meter{position:absolute;top:23%;left:50%;translate:-50% 0;width:min(180px,31vw);height:11px;background:#15304ae0;border:1px solid #ffffff80;border-radius:4px}
#penalty-meter i{position:absolute;top:-3px;width:5px;height:15px;background:#ffe175;border-radius:2px}
#touch{position:absolute;inset:0;pointer-events:none}
.stick,.action-pad{position:absolute;bottom:max(12px,env(safe-area-inset-bottom));pointer-events:auto;touch-action:none}
.stick{right:max(var(--edge),env(safe-area-inset-right));width:clamp(82px,27vh,138px);aspect-ratio:1;border:2px solid #fff4d778;border-radius:50%;background:radial-gradient(circle,#1b335987 58%,#1e395dc9 60%);box-shadow:0 5px 14px #101e39aa;display:grid;place-items:center}
.stick.sprint{border-color:var(--gold)}
.stick i{width:45%;aspect-ratio:1;border-radius:50%;border:1px solid #fff3ca9c;background:#fce5a89e;pointer-events:none}
.action-pad{left:max(var(--edge),env(safe-area-inset-left));display:grid;grid-template-columns:repeat(2,auto);gap:6px}
.action-pad button{font-size:clamp(11px,3.5vh,15px);width:calc(clamp(51px,17vh,83px) * var(--button-scale,1));min-height:0;height:calc(clamp(41px,13.2vh,65px) * var(--button-scale,1));padding:4px;background:#102742e8;border:1px solid #fff3d780;touch-action:none}
.action-pad button[data-play=shoot]{background:#ffe18bf0;color:#172842}
.action-pad button.pressed{filter:brightness(1.38);scale:.96}
#touch.left .stick{right:auto;left:max(var(--edge),env(safe-area-inset-left))}
#touch.left .action-pad{left:auto;right:max(var(--edge),env(safe-area-inset-right))}
#modal,#rotate{position:absolute;inset:0;z-index:7;display:grid;place-items:center;padding:max(12px,env(safe-area-inset-top)) max(15px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(15px,env(safe-area-inset-left));background:#09182cc7;overflow:auto}
#rotate{z-index:9;text-align:center}
.sheet{width:min(100%,560px);padding:clamp(14px,3vw,30px);max-height:100%;overflow:auto;touch-action:pan-y}
#feedback{position:absolute;z-index:10;bottom:max(8px,env(safe-area-inset-bottom));left:50%;translate:-50% 0;background:#132b46;border:1px solid var(--line);padding:7px 12px;border-radius:7px;font-size:12px;text-align:center;max-width:85%}
.key-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px}
.key-list button{font-size:12px;text-align:left}
@media (max-width:650px) and (orientation:portrait){.hero{grid-template-columns:1fr;max-width:430px;gap:12px}.form{grid-template-columns:1fr}#screen h1{font-size:clamp(42px,14vw,80px)}}
@media (max-height:500px) and (orientation:landscape){.topbar{top:max(5px,env(safe-area-inset-top))}.wordmark img{width:24px;height:24px}.wordmark b{font-size:9px}.tools{gap:5px}.tools button{min-width:34px;height:34px}.tools svg{width:18px}#screen{padding-top:51px}.hero{max-width:740px;gap:30px}#screen h1{font-size:clamp(42px,8vw,68px);margin:7px 0 10px}#screen p{font-size:13px}.actions{gap:5px}.actions button{min-height:34px;padding:5px 10px;font-size:13px}#scoreboard{top:max(5px,env(safe-area-inset-top))}.teamplate{min-width:55px;padding:0 6px}.score{min-width:66px}.score b{font-size:16px}#match-note{top:44px}.panel{padding:12px}.form{gap:7px}.footer-buttons{margin-top:10px}}
@media (max-width:640px){body.in-game .wordmark b{display:none}}

#skip-replay{position:absolute;left:50%;bottom:max(25px,env(safe-area-inset-bottom));translate:-50% 0;pointer-events:auto}

.trophy{text-align:center;font-size:clamp(38px,14vh,90px);margin:.15em auto;color:#ffdc6b;filter:drop-shadow(0 6px 16px #ffdc6b70);animation:trophy-rise .7s cubic-bezier(.15,.82,.2,1) both}
@keyframes trophy-rise{from{translate:0 25px;scale:.78;opacity:0}to{translate:0 0;scale:1;opacity:1}}
@media(prefers-reduced-motion:reduce){.trophy{animation:none}}