:root{color-scheme:dark;--bg:#101419;--panel:#1a2028;--line:#333c48;--muted:#a7b2c2;--lime:#d7fa75;--red:#ff6c77;--blue:#70b8ff}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:#f3f6f9;font:16px/1.6 system-ui,sans-serif}header,main,footer{max-width:1180px;margin:auto;padding:24px 32px}header{display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--line)}.brand{font-size:26px;font-weight:950;letter-spacing:-1px;color:#fff;text-decoration:none}.brand span{color:var(--lime)}.badge,.eyebrow{font-size:12px;letter-spacing:2px;color:var(--muted)}#home{display:grid;grid-template-columns:1.2fr 1fr;gap:70px;align-items:center;padding:48px 0}h1{font-size:clamp(32px,5vw,62px);line-height:1.15;letter-spacing:-2px;margin:20px 0}h1 span{color:var(--lime)}h2{font-size:24px;margin:0 0 24px}p{color:var(--muted)}.panel{padding:30px;background:var(--panel);border:1px solid var(--line);border-radius:16px}label{display:block;font-size:14px;margin-bottom:8px;color:var(--muted)}input,button{font:inherit;border-radius:8px;border:1px solid var(--line);padding:12px 16px}input{background:#101419;color:#fff;width:100%;min-width:0}button{background:#2c3541;color:#fff;cursor:pointer;font-weight:650}button:hover{filter:brightness(1.15)}button:disabled{opacity:.4;cursor:not-allowed}.primary{background:var(--lime);color:#18220a;border-color:var(--lime)}#create,.ghost{width:100%;margin-top:18px}.ghost{background:transparent}.row{display:flex;gap:12px;align-items:center}.separator{font-size:13px;text-align:center;color:var(--muted);margin:20px}.mini{margin-top:45px;font-size:14px;color:var(--muted)}.mini span{padding:0 10px;color:var(--lime)}.teams{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin:24px 0}.red{border-top:3px solid var(--red)}.blue{border-top:3px solid var(--blue)}small{font-size:13px;color:var(--muted);font-weight:400}h2 small{display:block}.player{padding:12px 0;border-top:1px solid var(--line);display:flex;justify-content:space-between}.teams button{margin-top:16px;width:100%}.roomhead{display:flex;justify-content:space-between;align-items:center;gap:20px}.roomhead h1{font-size:32px}#roomcode{font:700 24px monospace;color:var(--lime)}.scoreboard{display:flex;justify-content:center;align-items:center;gap:48px;text-align:center;margin:12px 0 24px}.scoreboard b{font-size:36px;padding:0 16px}.scoreboard strong{font-size:24px;font-variant-numeric:tabular-nums}.scoreboard small{display:block}.redtext{color:var(--red)}.bluetext{color:var(--blue)}.arena{position:relative;background:#19272a;border:1px solid #3d5659;border-radius:12px;overflow:hidden}canvas{display:block;width:100%;height:auto}#overlay{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;font-size:clamp(22px,4vw,44px);font-weight:850;text-shadow:0 2px 14px #000}.gamefoot{display:flex;justify-content:space-between;align-items:center;margin-top:14px;font-size:14px;color:var(--muted)}.rules{border-top:1px solid var(--line);padding-top:20px;margin-top:30px;font-size:14px}.rules>div{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}summary{cursor:pointer;font-weight:700}kbd{display:inline-block;border:1px solid #44515e;border-radius:4px;padding:1px 5px;color:#fff}footer{display:flex;justify-content:space-between;color:var(--muted);font-size:12px;border-top:1px solid var(--line)}#error{color:#ffafac;min-height:24px}.touch{display:none;justify-content:space-between;align-items:center;margin-top:18px;touch-action:none}#stick{width:120px;height:120px;border-radius:50%;background:#28313c;border:1px solid #596775;position:relative;touch-action:none}#knob{position:absolute;left:40px;top:40px;width:40px;height:40px;border-radius:50%;background:#b0bdcf;pointer-events:none}#kick{border-radius:50%;width:90px;height:90px;background:var(--lime);color:#172000;touch-action:none}[hidden]{display:none!important}:focus-visible{outline:3px solid var(--lime);outline-offset:4px}@media(pointer:coarse){.touch{display:flex}}@media(max-width:720px){header,main,footer{padding:18px}#home{grid-template-columns:1fr;gap:24px;padding:20px 0}.intro h1{font-size:42px}.mini{display:none}.panel{padding:22px}.teams{gap:12px}.roomhead{display:block}.roomhead .row{flex-wrap:wrap}.scoreboard{gap:12px;font-size:14px}.scoreboard b{padding:0 8px}.rules>div{grid-template-columns:1fr;gap:0}.badge{font-size:10px}.teams h2{font-size:21px}.player{font-size:14px;flex-wrap:wrap}footer span{max-width:60%}}
.gamefoot{flex-wrap:wrap;gap:12px}.gamefoot button{flex-shrink:0}.row button{flex-shrink:0}

.celebrations{margin:16px 0}.celebrations>span{display:block;font-size:12px;color:#adb9c3;margin-bottom:8px}#emotes{display:flex;gap:8px;flex-wrap:wrap}#emotes button{display:grid;place-items:center;width:48px;height:48px;padding:7px}#emotes img{width:32px;height:32px}#emotes button:disabled{opacity:.45}footer a{font-size:11px;color:inherit}
#pass{border-radius:50%;width:76px;height:76px;padding:8px;color:var(--lime);touch-action:none}.touch{gap:8px}#kick{width:76px;height:76px;padding:8px}@media(max-width:380px){#stick{width:100px;height:100px}#knob{left:30px;top:30px}}

.portrait-picker{display:flex;justify-content:space-between;align-items:center;gap:20px;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:20px;margin-top:24px}.portrait-picker p{margin:4px 0}.portrait-controls{display:flex;align-items:center;gap:20px}.portrait-choice{text-align:center;min-width:90px}.portrait{width:42px;height:42px;border:4px solid #c51c35;border-radius:50%;background-repeat:no-repeat;background-color:#27303c;flex-shrink:0}.portrait.blue{border-color:#1457cf}.portrait-choice .portrait{width:84px;height:84px;margin:0 auto 6px}.player{align-items:center;gap:10px}.player>span{flex:1}.portrait-controls button{min-width:44px;min-height:44px}@media(max-width:540px){.portrait-picker{flex-direction:column;align-items:center;text-align:center}.player{flex-wrap:wrap}}

#overlay.goal-celebration{font-size:clamp(28px,6vw,72px);color:#d7fa75;text-align:center;line-height:1.15;padding:24px;overflow-wrap:anywhere;text-shadow:0 3px 5px #000,0 0 22px #000}

/* The artwork is the interactive main-menu stage. */
#home{display:block;padding:20px 0 28px}.home-art{position:relative;isolation:isolate;overflow:hidden;border-radius:18px;border:1px solid #536274;background:#172434;min-height:660px;padding:210px 28px 28px;display:flex;justify-content:flex-end;align-items:center}.home-scene{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center;z-index:-2}.home-art::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#0b142b10 15%,#06101f15 45%,#07111e66 100%);z-index:-1;pointer-events:none}.home-logo{position:absolute;width:36%;max-width:400px;height:auto;left:50%;top:12px;transform:translateX(-50%);filter:drop-shadow(0 5px 8px #0008);pointer-events:none}.game-menu{width:360px;max-width:100%;padding:22px 24px 14px;border-radius:14px;background:#101722e8;border:1px solid #e2a33280;box-shadow:0 12px 36px #0009,0 0 0 3px #07101a70;backdrop-filter:blur(5px)}.menu-tagline{text-align:center;font-size:10px;letter-spacing:1.1px;color:#f9d782;margin:0 0 14px;font-weight:750}.game-menu label{color:#e0e6ef;font-size:12px;margin-bottom:5px}.game-menu input{background:#0b111ae6;border:1px solid #606c7c;min-height:44px}.game-menu button{min-height:48px;border:2px solid #151515;box-shadow:0 4px 0 #05090e;font-weight:900;letter-spacing:1px;transition:transform .12s,filter .12s,box-shadow .12s}.game-menu button:hover{transform:translateY(-2px);filter:brightness(1.12)}.game-menu button:active{transform:translateY(2px);box-shadow:0 1px 0 #05090e}.game-menu #create{background:linear-gradient(#ffe762,#ffb62c);color:#342003;margin-top:14px;border-color:#c87814;font-size:18px}.game-menu #join{background:linear-gradient(#4087d7,#225493);color:#fff;border-color:#163862;padding:10px 16px}.game-menu #practice{background:linear-gradient(#394858,#25313f);color:#eff5fb;border-color:#596878;margin-top:14px;width:100%}.game-menu .separator{font-size:10px;color:#aebdcc;letter-spacing:1.5px;margin:14px 0 10px}.menu-hint{margin:14px 0 0;text-align:center;color:#b9c6d4;font-size:11px}.brand{font-size:clamp(20px,3vw,26px);letter-spacing:-.5px}@media(max-width:720px){#home{padding:12px 0 20px}.home-art{min-height:620px;padding:190px 16px 22px;border-radius:12px}.home-logo{width:86%;max-width:330px;top:12px}.game-menu{padding:18px 18px 12px;max-width:340px}.badge{letter-spacing:1px;max-width:110px;text-align:right}.menu-tagline{font-size:9px;letter-spacing:.6px}}@media(prefers-reduced-motion:reduce){.game-menu button{transition:none}}

header{padding-top:10px;padding-bottom:10px}.brand{display:flex;align-items:center}.brand img{display:block;width:88px;height:88px;object-fit:contain}@media(max-width:720px){.brand img{width:72px;height:72px}}

.spectators{grid-column:1/-1;border-top:3px solid #8a98ae}.portrait.spectator{border-color:#8a98ae}.spectators h2{margin-bottom:14px}

#emotes button.pad-selected{outline:3px solid #ffd752;outline-offset:3px;box-shadow:0 0 14px #ffcf3955}

#record-board{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:min(800px,calc(100% - 28px));padding:22px;background:#62676e;color:#fff;border:2px solid #a2a8b1;border-radius:12px;box-shadow:0 16px 50px #0009;z-index:100;pointer-events:none}.record-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px}.record-heading strong{font-size:20px;letter-spacing:1px}.record-heading span{font-size:12px}.record-teams{display:grid;grid-template-columns:1fr 1fr;gap:22px}.record-teams h2{font-size:20px;text-align:center;padding:8px;margin:0 0 12px;border-radius:6px}.record-red{background:#a22338}.record-blue{background:#174c9b}.record-teams table{width:100%;border-collapse:collapse;table-layout:fixed;font-size:14px}.record-teams th{font-size:11px;padding:6px 4px;text-align:left;border-bottom:1px solid #9298a1}.record-teams td{padding:12px 4px;border-bottom:1px solid #818791;overflow-wrap:anywhere}.record-teams th:first-child{width:42%}.record-teams th:nth-child(2){width:34%}.record-teams td:not(:first-child),.record-teams th:not(:first-child){text-align:center;font-variant-numeric:tabular-nums}#record-board p{color:#eef1f6;font-size:11px;margin:14px 0 0}.record-note{line-height:1.5}@media(max-width:600px){#record-board{padding:12px}.record-teams{gap:10px}.record-heading strong{font-size:16px}.record-heading span{font-size:10px}.record-teams table{font-size:12px}.record-teams th{font-size:9px}.record-teams td{padding:10px 2px}}

/* Touch controls sit with the pitch, before celebrations and help text. */
.play-surface{position:relative}
.touch-device .touch{display:flex}
.touch{gap:12px;margin-top:8px;padding:12px;background:#1a2028;border:1px solid #333c48;border-radius:12px;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.touch-shots{display:flex;align-items:center;gap:12px}
#stick{flex:none;width:112px;height:112px;background:#28313c;border:2px solid #718093;box-shadow:inset 0 0 0 14px #222a34;overscroll-behavior:contain}
#knob{left:calc(50% - 20px);top:calc(50% - 20px);width:40px;height:40px;background:#c6d3e3;box-shadow:0 3px 8px #0008}
#kick,#finesse{display:flex;flex-direction:column;justify-content:center;align-items:center;flex:none;border-radius:50%;width:76px;height:76px;padding:6px;border:2px solid #e8ffa4;font-size:13px;font-weight:850;line-height:1.2;touch-action:none;box-shadow:0 4px 0 #080d13}
#kick{background:#d7fa75;color:#172000}
#finesse{background:#ffc963;border-color:#ffe0a0;color:#362300}
#kick.pressed,#finesse.pressed{transform:translateY(3px);box-shadow:0 1px 0 #080d13;filter:brightness(.85)}
.touch-device.playing>header,.touch-device.playing>footer,.touch-device.playing .rules{display:none}
.touch-device.playing main{padding:10px max(10px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left))}
.touch-device .scoreboard{gap:12px;margin:0 0 8px;font-size:12px;line-height:1.3}
.touch-device .scoreboard b{font-size:26px;padding:0 6px}
.touch-device .scoreboard strong{font-size:16px}
.touch-device .scoreboard small{font-size:10px}
.touch-device .control-guide,.touch-device #padstatus{display:none}
.touch-device .celebrations{margin:10px 0}
.touch-device #emotes{flex-wrap:nowrap;overflow-x:auto;padding:4px 0}
.touch-device #emotes button{flex:none;width:44px;height:44px}
.touch-device .gamefoot{font-size:11px;gap:8px}
.touch-device .gamefoot button{padding:8px 12px;font-size:12px;min-height:40px}
@media(max-width:360px){.touch{padding:8px;gap:8px}.touch-shots{gap:8px}#stick{width:96px;height:96px}#kick,#finesse{width:66px;height:66px;font-size:11px}}
/* The visible viewport includes browser chrome and the phone's safe areas. */
@media(orientation:landscape){
 .touch-device.playing{overflow:hidden;overscroll-behavior:none}
 .touch-device.playing main{padding:0;max-width:none}
 .touch-device.playing #game{position:fixed;inset:0;z-index:10;width:100%;height:var(--game-height,100dvh);padding:max(4px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));display:grid;grid-template-rows:28px minmax(0,1fr) 32px;background:#101419;gap:4px}
 .touch-device.playing .scoreboard{margin:0;align-self:center}
 .touch-device.playing .scoreboard small{display:none}
 .touch-device.playing .play-surface{display:flex;align-items:center;justify-content:center;min-height:0;min-width:0}
 .touch-device.playing .arena{width:min(100%,calc((var(--game-height,100dvh) - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom)) * 1.75));aspect-ratio:7/4;max-height:100%;border-radius:8px}
 .touch-device.playing .arena canvas{width:100%;height:100%;object-fit:contain}
 .touch-device.playing .touch{position:absolute;left:8px;right:8px;bottom:8px;z-index:20;margin:0;padding:0;background:transparent;border:0;pointer-events:none}
 .touch-device.playing .touch #stick,.touch-device.playing .touch-shots{pointer-events:auto}
 .touch-device.playing #stick{width:96px;height:96px}
 .touch-device.playing #kick,.touch-device.playing #finesse{width:68px;height:68px;font-size:12px}
 .touch-device.playing .celebrations{display:none}
 .touch-device.playing .gamefoot{margin:0;justify-content:flex-end}
 .touch-device.playing #connection{display:none}
 .touch-device.playing .gamefoot button{min-height:32px;padding:4px 12px}
 .touch-device.playing #overlay{font-size:clamp(18px,4vh,36px)}
}
@media(orientation:landscape) and (max-height:350px){
 .touch-device.playing #stick{width:78px;height:78px}
 .touch-device.playing #kick,.touch-device.playing #finesse{width:56px;height:56px;font-size:10px}
}

#finesse-charge{position:absolute;top:8px;left:50%;transform:translateX(-50%);padding:4px 10px;border:1px solid #ffc963;border-radius:6px;background:#182029;color:#ffda92;font-size:clamp(9px,1.8vw,12px);font-weight:800;white-space:nowrap;pointer-events:none;font-variant-numeric:tabular-nums}

#portrait-random{display:block;margin:8px auto 0;padding:6px 14px;font-size:13px;min-height:44px}

#debug-toggle{position:fixed;right:max(10px,env(safe-area-inset-right));bottom:max(8px,env(safe-area-inset-bottom));z-index:120;padding:6px 12px;min-height:36px;font-size:11px;letter-spacing:1px;background:#202a35;border-color:#73869d;color:#d7fa75}
#debug-panel{position:fixed;right:max(8px,env(safe-area-inset-right));bottom:calc(52px + env(safe-area-inset-bottom));z-index:121;width:min(620px,calc(100vw - 16px));max-height:calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));overflow:auto;overscroll-behavior:contain;padding:12px;background:#101820f5;border:1px solid #7890a8;border-radius:10px;box-shadow:0 8px 30px #0009;touch-action:pan-y;color:#e4f0fa}
.debug-heading{display:flex;justify-content:space-between;align-items:center;gap:12px;font-size:13px}.debug-heading button,.debug-actions button{padding:5px 10px;min-height:36px;font-size:12px}.debug-actions{display:flex;gap:8px;margin-top:8px}#debug-status{font-size:11px;line-height:1.4;margin:8px 0;color:#c6d4e2}#debug-values{font:11px/1.55 ui-monospace,SFMono-Regular,Consolas,monospace;margin:0;white-space:pre-wrap;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}#debug-output{width:100%;min-height:120px;background:#101419;color:#fff;font:11px monospace}.touch-device.playing #debug-toggle{bottom:max(8px,env(safe-area-inset-bottom));right:auto;left:50%;transform:translateX(-50%)}
@media(orientation:landscape) and (max-height:500px){#debug-panel{max-height:calc(100dvh - 62px);bottom:48px;padding:8px}#debug-values{font-size:10px}.debug-heading button,.debug-actions button{min-height:30px}}

.room-browser{margin:18px 0 0;padding:12px 0;border-top:1px solid #606c7c;border-bottom:1px solid #606c7c}.room-browser-heading{display:flex;align-items:center;justify-content:space-between;gap:12px}.room-browser-heading h2{font-size:12px;letter-spacing:1.3px;margin:0;color:#f9d782}.game-menu #rooms-refresh{font-size:11px;min-height:32px;padding:4px 10px;letter-spacing:0;border:1px solid #606c7c;box-shadow:none}#rooms-status{font-size:11px;line-height:1.4;color:#c6d3e1;margin:9px 0 0}#rooms-list{display:grid;gap:8px;max-height:192px;overflow-y:auto;overscroll-behavior:contain;margin-top:8px}.game-menu .room-card{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;min-height:60px;padding:10px;border:1px solid #647b92;background:#25364a;box-shadow:none;letter-spacing:0;width:100%}.game-menu .room-card:hover{background:#304a65;transform:none}.game-menu .room-card:disabled{transform:none;filter:none;opacity:.5}.room-card-info{display:block;min-width:0}.room-card-info strong{display:block;font-size:13px;line-height:1.3;overflow-wrap:anywhere}.room-card-info small{display:block;font-size:10px;margin-top:3px;color:#b8cadc}.room-card-state{flex:none;padding:3px 7px;border-radius:5px;color:#18220a;background:#d7fa75;font-size:10px;font-weight:900}

#game:focus{outline:none}.celebrations{display:grid;grid-template-columns:minmax(0,1fr) 220px;column-gap:16px;row-gap:0}.celebrations>span{grid-column:1;grid-row:1}#emotes{grid-column:1;grid-row:2;min-width:0}#emotes button{position:relative}.emote-shortcut{position:absolute;right:2px;bottom:1px;min-width:12px;padding:0 2px;border-radius:3px;background:#101419e8;color:#e5f3c7;font:800 10px/14px ui-monospace,monospace;pointer-events:none}.game-click-area{grid-column:2;grid-row:1 / span 2;display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:76px;padding:10px 14px;border:1px dashed #6c8b83;border-radius:10px;background:#1c302d;user-select:none;cursor:default}.game-click-area strong{font-size:11px;letter-spacing:1.2px;color:#d7fa75}.game-click-area span,.game-click-area small{font-size:10px;line-height:1.4;color:#b8cbc4}
@media(max-width:720px){.celebrations{grid-template-columns:minmax(0,1fr)}.game-click-area{grid-column:1;grid-row:3;min-height:48px;margin-top:8px;padding:8px 12px}.game-click-area strong{font-size:10px}.game-click-area small{display:none}}

/* Sound is available in menus and matches, including compact landscape mode. */
header>.brand{margin-left:0}header>.badge{margin-right:90px}.settings-controls{position:fixed;right:max(12px,calc((100vw - 1180px)/2 + 24px));left:auto;display:flex;flex-direction:column;align-items:flex-end;top:max(24px,env(safe-area-inset-top));z-index:90;font-size:14px}.settings-controls button{padding:8px 12px;font-size:12px;min-height:36px;background:#17232e;border-color:#64737e}.settings-controls button:focus-visible{outline-offset:1px}body.playing .settings-controls{left:auto;right:max(8px,env(safe-area-inset-right));top:max(8px,env(safe-area-inset-top))}#settings-panel{width:min(238px,calc(100vw - 24px));max-height:calc(100dvh - 68px);overflow:auto;margin-top:6px;padding:16px;background:#17232e;border:1px solid #64737e;border-radius:10px;box-shadow:0 8px 28px #0009}#settings-panel strong{display:block;font-size:12px;letter-spacing:2px;margin-bottom:12px}#settings-panel label{font-size:13px;margin:12px 0 4px;color:#eef4fa}#settings-panel .sound-mute{display:flex;align-items:center;gap:10px;margin-top:0}#sound-mute{width:18px;height:18px;margin:0;accent-color:var(--lime)}#settings-panel output{float:right;color:var(--lime);font-variant-numeric:tabular-nums}#settings-panel input[type=range]{display:block;width:100%;height:30px;padding:0;border:0;accent-color:var(--lime);cursor:pointer;touch-action:pan-y}

#room .roomhead .row{flex-wrap:wrap}#coin-start{border-color:#d7af50;color:#ffdc83}.coin-dialog{position:fixed;inset:0;z-index:120;background:#070c14d9;display:grid;place-items:center;padding:14px;overflow:auto;overscroll-behavior:contain}.coin-card{width:min(420px,100%);max-height:calc(100dvh - 28px);overflow:auto;padding:24px;text-align:center;border:1px solid #90713a;border-radius:18px;background:radial-gradient(ellipse at top,#34403d,#17212b 65%);box-shadow:0 24px 100px #000b}.coin-card>small{font-size:11px;color:#c1c8cf}.coin-card h2{margin:6px 0 12px;font-size:27px}.coin-stage{perspective:700px;height:138px;display:grid;place-items:center}#coin-token{position:relative;width:118px;height:118px;transform-style:preserve-3d;transform:rotateY(0deg);transition:transform .25s ease-out}.coin-face{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:50%;border:7px double #f8d878;background:radial-gradient(circle at 32% 25%,#fff0ad,#d39722 70%,#8f5912);color:#55370b;box-shadow:0 5px 18px #0007,inset 0 0 0 3px #8d641d}.coin-face span{font-size:48px;font-weight:950;line-height:1}.coin-face small{color:#55370b;font-size:10px;font-weight:900;letter-spacing:2px}.coin-tails-face{transform:rotateY(180deg);background:radial-gradient(circle at 32% 25%,#fff0ad,#d39722 70%,#8f5912)}#coin-token.coin-spinning{animation:coin-spin .65s linear infinite}#coin-token.coin-tails{transform:rotateY(180deg)}@keyframes coin-spin{0%{transform:rotateY(0deg) rotateZ(-8deg)}50%{transform:rotateY(180deg) rotateZ(8deg)}100%{transform:rotateY(360deg) rotateZ(-8deg)}}#coin-result{display:block;min-height:26px;color:#ffdf8d;font-size:15px}#coin-status{font-size:13px;min-height:23px;margin:6px 0 12px;color:#d2dce6}#coin-players{list-style:none;margin:0 0 16px;padding:0;text-align:left}#coin-players li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px solid #ffffff15;font-size:13px}#coin-players li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#coin-players strong{flex:none;font-size:11px}.coin-actions{display:flex;justify-content:center;gap:10px;margin-bottom:12px}.coin-actions button{min-width:100px}.settings-controls{z-index:130}@media(max-height:500px) and (orientation:landscape){.coin-card{width:min(600px,100%);padding:14px 22px;display:grid;grid-template-columns:155px 1fr;column-gap:20px;align-items:center}.coin-card>small:first-child,.coin-card h2,.coin-card>small:last-child{grid-column:1/-1}.coin-card h2{font-size:21px;margin:0 0 6px}.coin-stage{grid-row:3/6;height:135px}#coin-result,#coin-status,#coin-players,.coin-actions{grid-column:2}#coin-players{margin-bottom:8px}.coin-actions button{padding:7px 12px}.coin-actions{margin-bottom:6px}}@media(prefers-reduced-motion:reduce){#coin-token.coin-spinning{animation:none;transform:rotateY(35deg)}#coin-token{transition:none}}

#settings-panel fieldset{margin:12px 0 0;padding:10px 0 0;border:0;border-top:1px solid #64737e66;min-width:0}#settings-panel legend{font-size:10px;letter-spacing:1.5px;color:#a7b2c2;padding:0 8px 0 0}#settings-panel .setting-check{display:flex;align-items:center;gap:9px;margin:0}#settings-guide{width:18px;height:18px;margin:0;accent-color:var(--lime);flex:none}#settings-guide-value{margin-left:auto;float:none;font-size:12px}

.settings-actions{display:flex;gap:6px;align-items:center}.settings-controls:has(#voice-toggle:not([hidden]))~header>.badge{margin-right:220px}#voice-toggle.mic-live{color:var(--lime);border-color:var(--lime)}#voice-panel{width:min(300px,calc(100vw - 24px));max-height:calc(100dvh - 68px - env(safe-area-inset-bottom));overflow:auto;margin-top:6px;padding:16px;background:#17232e;border:1px solid #64737e;border-radius:10px;box-shadow:0 8px 28px #0009}#voice-panel>strong{font-size:12px;letter-spacing:2px;color:var(--lime)}.voice-hint,#voice-status{font-size:12px;line-height:1.5;color:#c6d3e1;margin:10px 0}.voice-buttons{display:grid;grid-template-columns:1fr 1fr;gap:6px}.voice-buttons #voice-join{grid-column:1/-1}.voice-buttons button{min-height:44px}.voice-buttons button[aria-pressed=true]{border-color:#a6c75d;color:var(--lime)}#voice-members{list-style:none;margin:10px 0;padding:0}#voice-members li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-bottom:1px solid #ffffff15}#voice-members span{font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}#voice-members small{font-size:10px;flex:none;color:#b7c7d3}#voice-panel>small{display:block;font-size:10px;line-height:1.6;color:#a6b5c5}#voice-audio{display:none}@media(max-width:540px){header>.badge{display:none}.settings-actions button{padding:7px 9px;font-size:11px}}@media(orientation:landscape) and (max-height:500px){#voice-panel{padding:10px 12px}.voice-hint{margin:6px 0;font-size:11px}.voice-buttons{grid-template-columns:repeat(3,1fr)}.voice-buttons #voice-join{grid-column:auto}.voice-buttons button{padding:5px;min-height:38px}#voice-members li{padding:5px 0}}
@media(orientation:portrait){.touch-device.playing main{padding-top:54px}}
@media(orientation:landscape){.touch-device.playing .settings-controls{top:max(4px,env(safe-area-inset-top))}.touch-device.playing .settings-actions button{min-height:28px;padding:3px 9px;font-size:11px}.touch-device.playing #voice-toggle{position:fixed;left:max(8px,env(safe-area-inset-left));top:max(4px,env(safe-area-inset-top))}.touch-device.playing #voice-panel{position:fixed;left:max(8px,env(safe-area-inset-left));top:calc(36px + env(safe-area-inset-top));margin-top:0;max-height:calc(100dvh - 48px - env(safe-area-inset-top) - env(safe-area-inset-bottom))}}
#voice-panel label{font-size:12px;margin:10px 0 4px}#voice-input{width:100%;padding:8px;background:#101820;color:#f3f6f9;border:1px solid #64737e;border-radius:6px;font:inherit;font-size:12px}#voice-panel .voice-filter{display:flex;gap:8px;align-items:center}#voice-noise{width:17px;height:17px;margin:0;accent-color:var(--lime)}.voice-meter{display:flex;align-items:center;gap:8px;margin-top:8px}.voice-meter meter{flex:1;min-width:40px;height:12px;accent-color:var(--lime)}.voice-meter small{font-size:10px}

#portrait-stats{max-width:420px;color:var(--lime);font-size:14px;font-variant-numeric:tabular-nums;line-height:1.6;margin:10px 0 4px}.portrait-picker>div:first-child{min-width:0}.portrait-controls{flex-shrink:0}

/* Keep a single loading surface while the correct device interface starts. */
.platform-loading body{visibility:hidden}.platform-loading::after{content:'CRAZY FUTSAL';position:fixed;inset:0;display:grid;place-items:center;background:#101419;color:#d7fa75;font:800 18px system-ui;letter-spacing:3px}