@import url('/base.css');
#item-announcement { position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:4;pointer-events:none;text-align:center;padding:0;background:transparent;border:0;color:#fff;font-size:clamp(18px,2.5vw,32px);font-weight:bold;text-shadow:0 2px 5px #000; }
#item-announcement[data-team="0"] { color:#82ff18; }
#item-announcement[data-team="1"] { color:#ff36c8; }
.ability-display { display: inline-flex; align-items: center; gap: 8px; }
#arena3d { position: absolute; inset: 0; pointer-events: none; }
.check-label { display: flex; gap: 8px; align-items: center; } .check-label input { width: auto; }
.set-score { text-align: center; color: #c4d5e8; font-size: .85rem; }
.replay-info { display: flex; flex-wrap: wrap; gap: 8px 20px; border-left: 3px solid #ffd97b; padding: 10px 14px; margin-bottom: 10px; color: #ffe4a7; background: #2b241a; font-size: .85rem; }
/* The match fills the viewport; setup controls remain below it and are reachable by scrolling. */
body[data-playing="true"] { background:#000; }
body[data-playing="true"] .shell { max-width:none; padding:0; }
body[data-playing="true"] .topbar { display:none; }
body[data-playing="true"] .layout { display:flex; flex-direction:column; gap:0; }
body[data-playing="true"] .arena-panel { order:-1; position:relative; }
body[data-playing="true"] .arena-wrap { height:100svh; width:100%; aspect-ratio:auto; border:0; border-radius:0; box-shadow:none; }
body[data-playing="true"] .scoreboard { position:absolute; top:0; left:50%; transform:translateX(-50%); width:280px; z-index:2; padding:0; height:54px; }
body[data-playing="true"] .team strong { font-size:2.3rem; font-weight:300; }
body[data-playing="true"] .team span, body[data-playing="true"] .round { display:none; }
body[data-playing="true"] .cyan { color:#82ff18; }
body[data-playing="true"] .pink { color:#ff36c8; }
body[data-playing="true"] #set-score { position:absolute; top:10px; left:50%; transform:translateX(-50%); z-index:2; font-size:10px; width:140px; opacity:.7; pointer-events:none; }
body[data-playing="true"] .statusbar { position:absolute; top:calc(100svh - 44px); left:20px; right:20px; min-height:36px; z-index:2; }
body[data-playing="true"] .statusbar>span { opacity:.65; }
body[data-playing="true"] #replay-info { position:absolute; top:55px; left:20px; right:20px; z-index:2; background:#081220c9; }
body[data-playing="true"] #lobby { display:none; }
body[data-playing="true"] .rules,body[data-playing="true"] #roster,body[data-playing="true"] #class-roster,body[data-playing="true"] #item-info,body[data-playing="true"] .arena-panel>p:last-child { display:none; }
body[data-selecting="true"] #lobby { display:none; }
body[data-selecting="true"] {overflow:hidden;}
body[data-selecting="true"] .scoreboard,body[data-selecting="true"] #set-score,body[data-selecting="true"] .statusbar { visibility:hidden; }
#preparation {position:fixed;inset:0;height:100svh;display:grid;grid-template-rows:auto minmax(0,1fr) auto;z-index:4;padding:24px 4vw;pointer-events:none;background:linear-gradient(#030507 0%,transparent 28%,transparent 60%,#030507 92%);}
#preparation[hidden]{display:none;}
#preparation>header h1{font-size:clamp(18px,2vw,28px);margin:0;color:#fff;letter-spacing:.12em;}
#prep-hint{font-size:13px;color:#aebcc9;margin:6px 0;}
#prep-teams{display:flex;gap:3vw;min-height:0;}
.prep-team{flex:1;min-width:0;display:flex;flex-direction:column;--team:#82ff18;color:var(--team);}
.prep-team[data-team="1"]{--team:#ff36c8;}
.prep-team h2{font-size:clamp(28px,6vw,76px);font-weight:800;line-height:1;margin:4px 0 0;text-align:center;letter-spacing:.04em;color:transparent;-webkit-text-stroke:1.5px var(--team);border-bottom:2px solid var(--team);}
.prep-team-name{text-align:center;font-size:12px;letter-spacing:.35em;margin:5px;}
.prep-cards{display:flex;gap:12px;margin-top:auto;justify-content:center;}
.prep-player{flex:1;min-width:0;text-align:center;border-block:2px solid var(--team);padding:8px 4px;background:#030507bb;}
.prep-player:only-child{max-width:230px;}
.prep-player strong,.prep-player small{display:block;}
.prep-player strong{font-size:clamp(12px,1.8vw,24px);}
.prep-player small{color:#aab8c6;font-size:12px;margin-top:4px;}
.prep-player[data-ready="true"]{background:var(--team);color:#030507;}.prep-player[data-ready="true"] small{color:#030507;}
.prep-player[data-local="true"]{outline:1px solid white;outline-offset:4px;}
.prep-number{display:inline-grid;place-items:center;width:30px;height:30px;border:1px solid currentColor;transform:rotate(0deg);margin:0 0 5px;font-size:16px;}
#preparation>footer{display:flex;align-items:end;justify-content:center;gap:20px;margin-top:18px;pointer-events:auto;}
#prep-controls{max-width:570px;width:80%;}#prep-controls #class-controls{display:grid;grid-template-columns:1fr;gap:10px;align-items:center;}
#prep-controls label{display:none;}#prep-controls #class-help{grid-column:1/-1;grid-row:2;margin:0;font-size:12px;}
#prep-controls #class-confirm{grid-column:1;grid-row:4;margin:0;width:100%;border-radius:0;background:transparent;color:white;border:1px solid #ffffff65;}#prep-controls select{border-radius:0;}
@media(max-height:650px){#preparation{padding:12px 3vw;}.prep-team h2{font-size:42px;}.prep-team-name{display:none;}.prep-number{display:none;}}
body[data-playing="true"] .match-menu { position:fixed; z-index:6; top:25%; left:50%; transform:translateX(-50%); width:320px; }
.menu-choice{display:flex;align-items:center;position:relative;gap:4px;margin:6px 0;min-width:0;}
.menu-choice>button{margin:0;border-radius:0;min-width:38px;width:auto;}
.menu-choice .choice-value{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;background:transparent;color:#fff;border-block:2px solid #ffffff65;}
/* Solid white chevrons echo the player's foot V, with no button plate behind them. */
.menu-choice>.choice-arrow{display:grid;place-items:center;flex:0 0 48px;min-width:48px;width:48px;height:52px;margin:0;padding:0;border:0;background:transparent;color:#fff;box-shadow:none;}
.choice-arrow::before{content:"";display:block;width:23px;height:38px;background:currentColor;clip-path:polygon(0 0,35% 0,100% 50%,35% 100%,0 100%,65% 50%);transition:transform .12s ease;}
.choice-previous::before{rotate:180deg;}
.menu-choice>.choice-arrow:hover:enabled{background:transparent;filter:none;}
.choice-arrow:hover:enabled::before{transform:scale(1.1);}
.choice-arrow:active:enabled::before{transform:scale(.94);}
.menu-choice:focus-within .choice-value{border-color:#fff;box-shadow:none;}
.native-choice{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;border:0!important;margin:0!important;clip-path:inset(50%);pointer-events:none;}
/* Pad focus is programmatic; show the same frame even after mouse input. */
button:focus,input:focus,summary:focus{outline:3px solid #fff;outline-offset:4px;box-shadow:0 0 16px #57bdff80;}
#prep-timer{position:absolute;right:4vw;top:25px;font-size:clamp(20px,2.8vw,36px);font-variant-numeric:tabular-nums;color:#fff;}
.menu-hint{font-size:11px;color:#b8c8d8;margin:5px 0;}
#match-menu{position:fixed;z-index:6;left:50%;transform:translateX(-50%);top:5vh;width:min(540px,94vw);max-height:90vh;overflow:auto;}
body[data-playing="true"] #match-menu{top:5vh;width:min(540px,94vw);}
#menu-settings .top-actions{display:flex;flex-wrap:wrap;margin-bottom:12px;}
#match-result{position:fixed;z-index:4;bottom:10vh;left:50%;transform:translateX(-50%);width:min(420px,90vw);padding:18px;background:#030910e8;border-block:1px solid #6a879b;}
#match-result[hidden]{display:none;}
#match-result button{display:block;width:100%;border-radius:0;margin:12px 0;background:transparent;color:#fff;border:1px solid #ffffff65;}
#match-result button:focus{background:#ffffff12;}
#result-home:empty{display:none;}
@media(max-width:650px){#prep-timer{position:static;font-size:20px;}.menu-hint{font-size:10px;}}
/* Entry flow: controller check, matchmaking, team preparation, match. */
#controller-check{position:fixed;inset:0;z-index:20;overflow:auto;display:grid;place-items:center;padding:32px 5vw;background:radial-gradient(ellipse at 50% 0%,#142132,#030507 70%);}
.check-content{width:min(780px,100%);text-align:center;}
.check-content h1{font-size:clamp(26px,4vw,44px);letter-spacing:.1em;margin-bottom:12px;}
.check-content>p{color:#becbd6;}
.controller-emblem{display:flex;align-items:center;justify-content:space-around;gap:25px;max-width:420px;margin:26px auto 16px;padding:18px 32px;border:2px solid #fff;border-radius:70px 70px 42px 42px;color:#fff;}
.controller-emblem>span{font-size:42px;line-height:1;}.controller-emblem strong{font-size:17px;letter-spacing:.08em;}
#check-actions{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:22px 0;}
#check-actions>div{border-bottom:2px solid #45515f;background:#ffffff05;padding:13px 5px;color:#91a0ad;font-size:14px;}
#check-actions>div::before{content:'○';display:block;font-size:22px;margin-bottom:4px;}
#check-actions>div[data-done="true"]{border-color:#fff;color:#fff;background:#ffffff0b;}
#check-actions>div[data-done="true"]::before{content:'✓';}
#check-continue{min-width:280px;border-block:2px solid #fff;background:transparent;color:#fff;border-radius:0;}
.check-family-options{font-size:11px;margin:24px auto 12px;color:#9cabb9;max-width:600px;}
.check-family-options button{background:transparent;color:white;border:1px solid #65717e;border-radius:0;margin:0 5px;padding:8px 16px;}
#check-logout{font-size:12px;padding:5px 15px;}
body[data-screen="controller"]>.shell{visibility:hidden;}
#flow-steps{display:flex;justify-content:center;gap:clamp(16px,4vw,55px);list-style:none;margin:0 auto 28px;padding:0;color:#65717e;font-size:13px;counter-reset:flow;}
#flow-steps li{counter-increment:flow;border-bottom:2px solid transparent;padding-bottom:8px;}
#flow-steps li::before{content:'0' counter(flow) ' ';font-size:11px;}
#flow-steps [data-active="true"]{color:#fff;border-color:#fff;}
body[data-playing="true"] #flow-steps{display:none;}
body[data-screen="matching"]{background:radial-gradient(ellipse at 50% 10%,#142132,#030507 70%);min-height:100svh;}
body[data-screen="matching"] .shell{max-width:1100px;}
body[data-screen="matching"] .layout{display:block;}
body[data-screen="matching"] .arena-panel{display:none;}
body[data-screen="matching"] #lobby{margin:auto;width:min(640px,100%);background:transparent;border:0;border-radius:0;padding:10px 24px;}
body[data-screen="matching"] #lobby>h1{letter-spacing:.15em;font-size:34px;}
body[data-screen="matching"] #lobby>.eyebrow,body[data-screen="matching"] #class-controls-home{display:none;}
body[data-screen="matching"] #lobby>label{margin-top:12px;}
body[data-screen="matching"] #lobby>p.small:not(.menu-hint):not(#connection):not(#error):not(#assigned-team){display:none;}
#lobby #game-options{display:none;}
#lobby-settings{margin-top:16px;}
#prep-controls #class-help{display:none;}
.prep-description{font-size:11px;line-height:1.55;color:#d1dae2;margin:8px auto 4px;max-width:34em;text-wrap:pretty;}
.prep-player[data-ready="true"] .prep-description{color:#10171a;}
.prep-player strong{line-height:1.25;}
@media(max-width:650px){#check-actions{grid-template-columns:repeat(2,1fr);}#controller-check{padding:20px 5vw;}#flow-steps{font-size:10px;gap:15px;}.prep-description{font-size:10px;}body[data-screen="matching"] .shell{padding:16px;}body[data-screen="matching"] #lobby{padding:8px;}}

#item-announcement-name{display:block;font:inherit;white-space:nowrap;}
#item-announcement-description{display:block;margin-top:6px;font-size:clamp(11px,1.3vw,16px);font-weight:500;line-height:1.5;white-space:nowrap;}

/* Shared intro clock drives cuts; the overlay adds no interactive blockers. */
#entrance{position:fixed;inset:0;z-index:4;pointer-events:none;color:#fff;--intro-color:#fff;--intro-fade:1;}
#entrance[data-team="1"]{--intro-color:#ff36c8;}#entrance[data-team="0"]{--intro-color:#82ff18;}
#entrance::before,#entrance::after{content:'';position:absolute;left:0;right:0;height:8vh;background:#000;}
#entrance::before{top:0;}#entrance::after{bottom:0;}
#entrance header{position:absolute;top:10vh;left:5vw;right:5vw;opacity:var(--intro-fade);text-shadow:0 2px 8px #000;}
.entrance-caption{font-size:12px;letter-spacing:.22em;margin:0 0 5px;color:var(--intro-color);}
#entrance h2{margin:0;line-height:1.1;letter-spacing:.12em;font-size:clamp(26px,5vw,64px);color:transparent;-webkit-text-stroke:1px var(--intro-color);}
.entrance-roster{position:absolute;bottom:12vh;left:14vw;right:14vw;display:flex;justify-content:space-around;gap:24px;opacity:var(--intro-fade);}
.entrance-roster>div{flex:1;max-width:260px;text-align:center;padding:8px 18px;color:var(--intro-color);border-block:1px solid currentColor;background:#030507bb;}
.entrance-roster span{display:block;font-size:13px;margin-bottom:4px;}
.entrance-roster strong{font-size:clamp(14px,2.4vw,28px);letter-spacing:.12em;}
body[data-screen="entrance"] .scoreboard,body[data-screen="entrance"] #set-score,body[data-screen="entrance"] .statusbar>span{visibility:hidden;}
body[data-screen="entrance"] .statusbar{z-index:5;}
@media(max-width:650px){.entrance-roster{left:4vw;right:4vw;gap:10px;}.entrance-roster>div{padding:8px 4px;}}

#entrance{background:rgba(0,0,0,calc(1 - var(--intro-fade)));}
.entrance-roster[data-count="3"]{left:0;right:0;}

/* Score plates are driven by replay time, including their paused animations. */
#replay-score{position:fixed;bottom:max(58px,8vh);left:50%;transform:translateX(-50%);z-index:3;display:flex;align-items:center;gap:clamp(18px,4vw,56px);pointer-events:none;text-align:center;filter:drop-shadow(0 3px 10px #000);}
.replay-team-score{color:#82ff18;min-width:1em;font-size:clamp(64px,13vh,144px);font-weight:800;font-variant-numeric:tabular-nums;}
.replay-team-score[data-team="1"]{color:#ff36c8;}
.replay-team-label{display:block;font-size:clamp(10px,1.4vh,15px);letter-spacing:.16em;margin-bottom:6px;white-space:nowrap;}
.replay-digit{position:relative;width:1em;height:1em;line-height:1;perspective:500px;text-shadow:0 0 14px currentColor;}
.score-value{font:inherit;}
.replay-score-divider{color:#ffffff80;font-size:clamp(30px,5vh,56px);font-weight:300;padding-top:15px;}
.score-faces{display:none;position:absolute;inset:0;}
.score-faces span{position:absolute;inset:0;line-height:1;}
.replay-team-score[data-changing="true"] .score-value{opacity:0;}
.replay-team-score[data-changing="true"] .score-faces{display:block;}
.score-faces span,.score-faces::after{animation-duration:1s;animation-delay:var(--score-delay);animation-play-state:paused;animation-fill-mode:both;animation-timing-function:linear;}
.flip-top,.flip-bottom{display:none;backface-visibility:hidden;}
#replay-score[data-animation="flip"] .score-old,#replay-score[data-animation="flip"] .score-new{display:none;}
#replay-score[data-animation="flip"] .flip-top,#replay-score[data-animation="flip"] .flip-bottom{display:block;background:#070d13cc;}
.flip-top{clip-path:inset(0 0 50%);}.flip-bottom{clip-path:inset(50% 0 0);}
.flip-top.flip-leaf{animation-name:score-flip-away;}.flip-bottom.flip-leaf{animation-name:score-flip-in;}
#replay-score[data-animation="flip"] .score-faces::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;background:#000a;}
@keyframes score-flip-away{0%{transform:rotateX(0);}50%,100%{transform:rotateX(-90deg);}}
@keyframes score-flip-in{0%,50%{transform:rotateX(90deg);}100%{transform:rotateX(0);}}
#replay-score[data-animation="glitch"] .score-old{animation-name:score-glitch-out;}
#replay-score[data-animation="glitch"] .score-new{animation-name:score-glitch-in;}
#replay-score[data-animation="glitch"] .score-faces::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(0deg,transparent 0 7px,currentColor 8px 9px,transparent 10px 14px);mix-blend-mode:screen;animation-name:score-noise;}
@keyframes score-glitch-out{0%,16%{opacity:1;transform:translateX(0);}24%{transform:translateX(-.07em);clip-path:inset(25% 0 35%);}34%{transform:translateX(.08em);clip-path:inset(0);}46%{opacity:1;transform:translateX(-.04em);}50%,100%{opacity:0;}}
@keyframes score-glitch-in{0%,49%{opacity:0;}50%{opacity:1;transform:translateX(.1em);clip-path:inset(15% 0 20%);}62%{transform:translateX(-.05em);clip-path:inset(0);}72%{transform:translateX(.03em);clip-path:inset(35% 0 10%);}85%,100%{opacity:1;transform:translateX(0);clip-path:inset(0);}}
@keyframes score-noise{0%,12%,90%,100%{opacity:0;}25%,55%{opacity:.5;transform:translateX(-.08em);}40%,70%{opacity:.15;transform:translateX(.08em);}}
body[data-replay="true"] .scoreboard{visibility:hidden;}
@media(prefers-reduced-motion:reduce){.replay-team-score[data-changing="true"] .score-value{opacity:1;}.replay-team-score[data-changing="true"] .score-faces{display:none;}}

#prep-controls [data-choice="modifier-choice"]{grid-row:2;}
#prep-controls #modifier-help{grid-row:3;margin:0;text-align:center;font-size:12px;min-height:1.5em;color:#d1dae2;}
.prep-modifier{margin:4px 0;font-size:12px;color:inherit;}.entrance-roster small{display:block;font-size:12px;}

#lobby-waiting{font-size:24px;color:white;text-align:center;}#add-bots:focus{outline:3px solid white;outline-offset:4px;}#bot-votes{text-align:center;color:#ccefff;font-size:12px;}

.prep-player[data-bot="true"] .prep-number{width:auto;padding:0 6px;white-space:nowrap;font-size:12px;}.prep-player[data-bot="true"][data-ready="true"]{background:#030507bb;color:var(--team);}.prep-player[data-bot="true"] .prep-description,.prep-player[data-bot="true"] small{color:#d1dae2;}

/* Touch controls only intercept their own hit areas, leaving the court visible. */
#rotate-device{position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;background:#030910f5;color:#fff;}
#rotate-device h1{font-size:24px;}#rotate-device p{max-width:28em;color:#bdcad6;line-height:1.8;}
.rotate-phone{width:112px;height:64px;border:3px solid #fff;border-radius:12px;font-size:42px;line-height:54px;margin-bottom:20px;}
#touch-controls{position:fixed;inset:0;z-index:3;pointer-events:none;user-select:none;-webkit-user-select:none;}
#touch-stick,#touch-skill{position:absolute;pointer-events:auto;touch-action:none;-webkit-touch-callout:none;border:2px solid #ffffff90;background:#06101c45;box-shadow:0 0 15px #0005;}
#touch-stick{width:clamp(104px,27vh,150px);height:clamp(104px,27vh,150px);left:max(24px,env(safe-area-inset-left));bottom:max(28px,env(safe-area-inset-bottom));border-radius:50%;display:grid;place-items:center;}
#touch-stick span{width:38%;height:38%;border:2px solid #fff;border-radius:50%;background:#ffffff38;pointer-events:none;}
#touch-skill{width:clamp(80px,22vh,112px);height:clamp(80px,22vh,112px);right:max(28px,env(safe-area-inset-right));bottom:max(36px,env(safe-area-inset-bottom));border-radius:50%;color:#fff;font-size:14px;letter-spacing:.12em;margin:0;padding:0;}
#touch-skill[data-pressed="true"]{background:#ffffff45;border-color:#fff;box-shadow:0 0 18px #ffffff40;}
#touch-controls[hidden],#rotate-device[hidden]{display:none;}
body[data-touch="true"][data-playing="true"]{overscroll-behavior:none;}
body[data-touch="true"][data-playing="true"] .arena-wrap{height:100dvh;}
body[data-touch="true"][data-playing="true"] .statusbar{top:8px;left:max(12px,env(safe-area-inset-left));right:max(12px,env(safe-area-inset-right));pointer-events:none;}
body[data-touch="true"] .statusbar #menu{pointer-events:auto;min-height:44px;margin-left:auto;}
body[data-touch="true"] .statusbar>span{display:none;}
body[data-touch="true"] #flow-steps [data-step="controller"]{display:none;}
@media (orientation:landscape) and (max-height:500px){
  body[data-touch="true"] #preparation{padding:8px max(16px,env(safe-area-inset-right)) 8px max(16px,env(safe-area-inset-left));height:100dvh;}
  body[data-touch="true"] #preparation>header h1{font-size:18px;}
  body[data-touch="true"] #preparation>header p{margin:2px 0;font-size:10px;}
  body[data-touch="true"] #preparation>header .menu-hint{display:none;}
  body[data-touch="true"] #preparation>footer{margin-top:4px;gap:10px;}
  body[data-touch="true"] #prep-controls #class-controls{grid-template-columns:1fr 1fr;gap:4px 12px;}
  body[data-touch="true"] #prep-controls [data-choice="class-choice"]{grid-column:1;grid-row:1;}
  body[data-touch="true"] #prep-controls [data-choice="modifier-choice"]{grid-column:2;grid-row:1;}
  body[data-touch="true"] #prep-controls #modifier-help{grid-column:1/-1;grid-row:2;font-size:10px;}
  body[data-touch="true"] #prep-controls #class-confirm{grid-column:1/-1;grid-row:3;min-height:40px;padding:6px;}
  body[data-touch="true"] #prep-controls .menu-choice{min-height:44px;}
  body[data-touch="true"] .prep-description{font-size:10px;margin:2px 0;}
  body[data-touch="true"] #prep-timer{font-size:16px;top:8px;}
  body[data-touch="true"] .entrance-roster{bottom:9vh;}
  body[data-touch="true"] #match-result{bottom:5vh;padding:8px;}
  body[data-touch="true"] #match-result button{min-height:44px;margin:6px 0;}
}