*{box-sizing:border-box}html,body{margin:0;height:100%;overflow:hidden;background:#080b0e;color:#f7f9fc;font-family:Arial,sans-serif}button,select{font:inherit;color:inherit;border:1px solid #36434c;background:#172129;border-radius:9px;padding:12px;cursor:pointer}button:focus-visible,select:focus-visible{outline:3px solid #65ee9e;outline-offset:3px}button:hover{background:#24333d}[hidden]{display:none!important}main{height:100dvh;max-width:1200px;margin:auto;padding:12px;display:flex;flex-direction:column;gap:10px}header{display:flex;align-items:center;justify-content:space-between;gap:10px}h1{font-size:20px;letter-spacing:2px;margin:0}header span{font-size:13px;color:#65ee9e}#menu{margin:auto;width:min(100%,520px);padding:28px;border:1px solid #29383f;border-radius:16px;background:#10171d}h2{margin:0 0 24px;font-size:26px}#menu label{display:flex;justify-content:space-between;align-items:center;margin:18px 0;gap:12px}#menu button{display:block;width:100%;margin:12px 0;padding:18px;font-weight:bold}#ai{background:#65ee9e;color:#07160e}p{color:#adb9c4;font-size:14px;line-height:1.5}#match{flex:1;min-height:0;display:flex;flex-direction:column;gap:8px}.bar{display:flex;justify-content:space-between;align-items:center;gap:8px}.bar button{padding:8px 12px;font-size:14px}#score{font-weight:bold;text-align:center;font-size:20px}#details{text-align:center;font-size:13px;color:#b5c1ca}#stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;position:relative}canvas{display:block;background:#000;border:1px solid #334047;touch-action:none;max-width:100%;max-height:100%}#notice{position:absolute;background:#10171de8;border:1px solid #526470;border-radius:12px;padding:18px;text-align:center;pointer-events:none;font-weight:bold}#help{text-align:center;margin:0;font-size:14px}#touch{display:none;justify-content:space-between;gap:24px;flex-shrink:0;user-select:none;-webkit-user-select:none;touch-action:none}#touch .pair{display:flex;gap:10px}#touch button{width:70px;height:62px;font-size:28px;touch-action:none;-webkit-touch-callout:none}#touch button.held{background:#65ee9e;color:#06170e}body.touch #touch{display:flex}body.touch #help{font-size:12px}body.touch #duel,body.touch #keyboardHint{display:none}@media(max-width:600px){main{padding:8px 10px max(8px,env(safe-area-inset-bottom));gap:6px}h1{font-size:15px}header span{font-size:11px}#menu{padding:22px}#touch button{width:60px;height:58px}#touch .pair{gap:8px}#score{font-size:17px}}@media(max-height:480px){header{display:none}#touch button{height:42px;width:60px}#help{display:none}}
#menu .online{display:block;text-align:center;padding:14px;color:#65ee9e;border:1px solid #36434c;border-radius:9px;text-decoration:none;font-weight:bold}#menu .online:focus-visible{outline:3px solid #65ee9e;outline-offset:3px}#menu .online-note{text-align:center;font-size:13px;margin:8px 0}#menu{max-height:100%;overflow:auto}
#lobby{margin:auto;width:min(100%,520px);max-height:100%;overflow:auto;padding:24px;border:1px solid #29383f;border-radius:16px;background:#10171d}#lobby button,#inviteLink{display:block;width:100%;margin:12px 0}#inviteLink{padding:12px;background:#080b0e;border:1px solid #526470;color:#fff;font-size:16px}#connection{margin:0;color:#ffe66d;text-align:center}
/* Keep three buttons on one baseline; only up occupies the court side. */
body.touch main{padding:4px max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));gap:4px}
body.touch.playing header{display:none}
body.touch #match{display:grid;grid-template-columns:minmax(0,1fr) 84px;grid-template-rows:auto auto auto minmax(0,1fr) 82px;column-gap:4px;row-gap:4px}
body.touch .bar{grid-column:1/-1;grid-row:1}
body.touch #details{grid-column:1/-1;grid-row:2}
body.touch #connection{grid-column:1/-1;grid-row:3}
body.touch #stage{grid-column:1;grid-row:4;justify-content:flex-start;align-items:flex-end;min-width:0}
body.touch #help{display:none}
body.touch #touch,body.touch #touch .vertical{display:contents}
body.touch #touch .lateral{grid-column:1;grid-row:5;justify-content:flex-start;gap:10px}
body.touch #touch [data-dir="ArrowUp"]{grid-column:2;grid-row:4;align-self:end}
body.touch #touch [data-dir="ArrowDown"]{grid-column:2;grid-row:5}
body.touch #touch .pair{touch-action:none;user-select:none;-webkit-user-select:none}
body.touch #touch button{width:84px;height:82px;font-size:36px;padding:8px;border-radius:14px}
@media(max-width:360px){body.touch #match{grid-template-columns:minmax(0,1fr) 74px;grid-template-rows:auto auto auto minmax(0,1fr) 76px}body.touch #touch button{width:74px;height:76px}}
@media(max-height:480px){body.touch #match{grid-template-columns:minmax(0,1fr) 76px;grid-template-rows:auto auto auto minmax(0,1fr) 62px}body.touch #touch button{height:62px;width:76px}body.touch #touch .lateral{gap:6px}}#manual{width:min(94vw,640px);max-height:88dvh;overflow:auto;padding:20px;background:#10171d;color:#f7f9fc;border:1px solid #526470;border-radius:16px;overscroll-behavior:contain}#manual::backdrop{background:#000b}.manual-head{display:flex;align-items:center;justify-content:space-between;gap:12px;position:sticky;top:-20px;background:#10171d;padding:12px 0}#manual h2{font-size:22px;margin:0}#manual h3{margin:22px 0 8px;font-size:18px}#manual p,#manual li{font-size:16px;line-height:1.5}#manual ul{padding-left:22px}#resumeManual{background:#65ee9e;color:#07160e;font-weight:bold}
/* The court owns the score and ammunition; controls float above it. */
body.playing header{display:none}#match{position:relative}#match .bar{position:absolute;top:4px;left:4px;right:4px;z-index:2;pointer-events:none}#match .bar button{pointer-events:auto;opacity:.75;padding:6px 10px}#match #help{display:none}.sr-only{position:absolute;width:1px;height:1px;padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
body.touch #match{grid-template-rows:minmax(0,1fr) 82px}body.touch #stage,body.touch #touch [data-dir="ArrowUp"]{grid-row:1}body.touch #touch .lateral,body.touch #touch [data-dir="ArrowDown"]{grid-row:2}#connection:not([hidden]){position:absolute;top:45px;left:6px;right:6px;z-index:3;background:#10171de8;padding:8px;border-radius:8px}
#startRules{margin-top:16px;border-top:1px solid #36434c;padding-top:14px}#startRules summary{font-size:16px;cursor:pointer;color:#65ee9e}#startRules p,#startRules li{font-size:16px;line-height:1.5}#startRules h3{font-size:18px;margin:18px 0 6px}
@media(max-width:360px){body.touch #match{grid-template-rows:minmax(0,1fr) 76px}}@media(max-height:480px){body.touch #match{grid-template-rows:minmax(0,1fr) 62px}}

#playerName{min-width:0;width:65%;font:inherit;font-size:16px;padding:10px;background:#080b0e;color:#fff;border:1px solid #526470;border-radius:8px}body.touch main{padding-bottom:max(20px,env(safe-area-inset-bottom))}#championshipBoard{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:8px}#championshipBoard section{border:1px solid #36434c;border-radius:9px;padding:10px}#championshipBoard h4{margin:0 0 8px}#championshipBoard p{margin:6px 0;font-size:14px}#championshipBoard .won{color:#65ee9e}#championshipBoard .lost{color:#ff8a98}#championshipBoard .current{color:#ffe66d}#matchHistory{list-style:none;padding-left:0}

#match,#match *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent}#match{touch-action:none}#playerName{-webkit-user-select:text;user-select:text}.tournament-screen{margin:auto;width:min(100%,850px);max-height:100%;overflow:auto;padding:24px;background:#10171d;border:1px solid #36434c;border-radius:16px}.tournament-screen button{margin:12px 8px 0 0}.tournament-screen input{display:block;margin-top:12px}#bracketPath{display:flex;align-items:center;gap:28px;padding:18px 0}.bracket-card{flex:1;min-width:0;position:relative;border:1px solid #526470;border-radius:10px;background:#080b0e}.bracket-card h3{font-size:14px;padding:10px;margin:0;color:#65ee9e}.bracket-card p{padding:12px;margin:0;border-top:1px solid #36434c;overflow-wrap:anywhere}.bracket-card+.bracket-card:before{content:'';position:absolute;width:28px;height:2px;background:#65ee9e;left:-29px;top:50%}.advancing{animation:advance-round .8s ease-out}@keyframes advance-round{from{transform:translateX(-24px);opacity:.25;box-shadow:0 0 24px #65ee9e}to{transform:translateX(0);opacity:1;box-shadow:none}}@media(max-width:600px){#bracketPath{flex-direction:column;align-items:stretch}.bracket-card+.bracket-card:before{width:2px;height:28px;left:50%;top:-29px}.tournament-screen{padding:18px}}@media(prefers-reduced-motion:reduce){.advancing{animation:none}}

/* Worn cartoon arcade: warm paper, screen-printed ink, painted controls. */
:root{--ink:#202a2c;--paper:#f1dfb5;--muted:#bfb697;--paint:#edb954}html,body{background:#263335;color:var(--paper);font-family:'Trebuchet MS',Arial,sans-serif;background-image:radial-gradient(#eadab513 .8px,transparent .8px);background-size:6px 6px}main{padding:16px;gap:12px}header h1{font-size:12px;letter-spacing:1.4px}header span{color:#d3be91;font-size:10px}button,select{border:2px solid var(--ink);border-radius:9px 13px 8px 11px;background:#e6d6b2;color:var(--ink);font-weight:900;box-shadow:0 4px 0 #111b1d;transition:background .12s,transform .12s,box-shadow .12s}button:hover{background:#fff0c9;transform:translateY(-1px)}button:active,button.held{transform:translateY(3px);box-shadow:0 1px 0 #111b1d}button:focus-visible,input:focus-visible,summary:focus-visible{outline:3px solid #f9b548;outline-offset:4px}p{color:#c7bea4}#menu,#lobby,.tournament-screen,#manual{background:#f1dfb5;color:var(--ink);border:3px solid var(--ink);border-radius:13px 22px 16px 10px;box-shadow:7px 8px 0 #131f21;background-image:repeating-linear-gradient(4deg,transparent 0 23px,#493f2010 24px,transparent 25px)}#menu{width:min(100%,470px);padding:24px 30px;position:relative}#menu p,#lobby p,.tournament-screen p,#manual p,#manual li{color:#515343}#menu>p:not(.arcade-tagline){font-size:12px;text-align:center}#menu button{margin:10px 0;padding:14px;letter-spacing:.5px}#ai,#playRound,#resumeManual,#nameForm button{background:#edb954;color:#202a2c}#invite{background:#9fc6b2}#duel{background:#d9cfb5}.arcade-kicker{text-align:center;font-size:10px;font-weight:bold;letter-spacing:2px}.arcade-logo{font-family:Impact,'Arial Black',sans-serif;font-size:clamp(64px,13vw,104px);font-weight:900;line-height:1.05;text-align:center;letter-spacing:-4px;color:#e9785f;-webkit-text-stroke:2px #202a2c;text-shadow:3px 4px 0 #202a2c;transform:rotate(-3deg);position:relative}.arcade-logo>span:first-child{color:#edb954}.logo-star{font-size:35px;position:absolute;right:2px;top:10px;color:#9fc6b2}.arcade-tagline{text-align:center;font-weight:bold;font-size:16px!important;margin:10px 0}.menu-art{height:74px;position:relative;margin:8px 16px 16px;border-bottom:2px dashed #26333540}.art-paddle{position:absolute;width:15px;height:47px;background:#ef7f68;border:3px solid #263335;box-shadow:3px 3px 0 #263335;transform:rotate(12deg);left:16px;top:5px}.art-paddle.two{left:auto;right:18px;top:15px;background:#edb954;transform:rotate(-12deg)}.art-ball{position:absolute;left:40%;top:6px;width:38px;height:38px;border-radius:50%;border:3px solid #263335;background:#acd286;text-align:center;font-size:27px;line-height:30px;font-weight:bold;box-shadow:3px 3px 0 #263335;transform:rotate(-10deg)}.art-path{position:absolute;left:22%;top:26px;width:40px;border-top:3px dashed #26333570;transform:rotate(-12deg)}.art-label{position:absolute;right:45px;top:0;font-family:Impact,sans-serif;font-size:22px;transform:rotate(12deg)}#startRules{border-color:#26333540}#startRules summary{color:#374f49;font-weight:bold;text-align:center}#startRules p,#startRules li{color:#515343}#playerName,#inviteLink{background:#fff0cf;color:#202a2c;border:2px solid #263335;border-radius:7px;font-weight:bold}#playerName{width:100%}#manual h3{color:#334d45}.manual-head{background:#f1dfb5}#manual::backdrop{background:#132124d9}.tournament-screen h2{font-family:Impact,'Arial Black',sans-serif;font-size:32px;letter-spacing:.5px}.bracket-card{background:#fff0cf;border:2px solid #263335;box-shadow:3px 3px 0 #263335;border-radius:6px 11px 7px 9px}.bracket-card h3{color:#263335;background:#edb954}.bracket-card p{border-top:2px solid #26333533;font-weight:bold}.bracket-card+.bracket-card:before{background:#344d45}#bracketStatus{font-weight:bold}canvas{border:3px solid #152428;border-radius:6px;box-shadow:3px 4px 0 #101c20}#match .bar button{opacity:.9;font-size:12px}body.touch #touch button{background:#e8d7b0;color:#233638;border:3px solid #142225;box-shadow:0 4px 0 #101c20;text-shadow:1px 1px #fff3d7}body.touch #touch button.held{background:#edb954}#notice{background:#f1dfb5;color:#263335;border:3px solid #263335;box-shadow:4px 4px 0 #152428}#connection:not([hidden]){background:#f1dfb5;color:#263335}body.playing{background-color:#29383a}body.playing main{padding-top:5px}#fullscreenHelp{color:#813c2c!important}@media(max-height:650px){#menu{padding:16px 24px}.menu-art{height:48px;margin-bottom:8px}.arcade-logo{font-size:64px}.arcade-tagline{margin:6px 0}#menu button{padding:11px;margin:8px 0}}@media(prefers-reduced-motion:reduce){button{transition:none}}

#bracketScreen.champion:before{content:'★';display:block;color:#e4a131;font-size:76px;line-height:1;text-align:center;-webkit-text-stroke:2px #263335;text-shadow:4px 4px #263335;transform:rotate(-8deg)}#bracketScreen.champion h2{text-align:center;font-size:46px}#nameScreen{max-width:480px}#nameScreen h2{font-size:38px}#nameForm button{width:100%;padding:16px}#nameForm label{font-weight:bold}

.sound-controls{display:flex;align-items:center;gap:10px;margin:16px 0;color:#263335;font-size:12px}.sound-controls label{display:flex!important;align-items:center;gap:8px;margin:0!important;flex:1;min-width:0}.sound-controls input{width:100%;min-width:40px;accent-color:#426b59}.sound-controls output{min-width:30px}#menu .sound-controls button,.sound-controls button{width:auto;display:inline-block;padding:8px;margin:0;font-size:10px}

#bracketScreen{width:min(100%,1120px)}#bracketPath{display:flex;flex-direction:row;align-items:stretch;gap:30px;height:min(56dvh,540px);overflow:auto;padding:12px 16px 20px;scrollbar-color:#917a49 #e6d5ae;scrollbar-width:auto;touch-action:pan-x pan-y;overscroll-behavior:contain}.tournament-column{flex:0 0 210px;display:flex;flex-direction:column}.tournament-column>h3{margin:0;height:38px;position:sticky;top:0;background:#edb954;color:#263335;z-index:1;padding:8px;font-size:14px}.round-games{height:1440px;min-height:1440px;display:flex;flex-direction:column;justify-content:space-around}.tournament-match{position:relative;background:#fff0cf;border:2px solid #263335;border-radius:7px;box-shadow:2px 3px #263335}.tournament-match:after{content:'';position:absolute;right:-32px;top:50%;width:30px;border-top:2px solid #7d805e}.tournament-column:last-child .tournament-match:after{display:none}.tournament-match>div{display:flex;justify-content:space-between;gap:6px;padding:7px 8px;font-size:12px}.tournament-match>div+div{border-top:1px solid #26333540}.tournament-match .winner{background:#a7cc9c}.tournament-match .you{font-weight:bold}.your-match{outline:3px solid #db8646;outline-offset:3px}.bracket-hint{font-size:12px}#bracketScreen.champion:before{display:none}#bracketTrophy{text-align:center;animation:cup-arrives .9s ease-out}#bracketTrophy svg{width:130px;display:block;margin:auto;filter:drop-shadow(4px 5px 0 #26333540)}#bracketTrophy span{font-weight:bold;color:#263335}@keyframes cup-arrives{0%{transform:translateY(45px) scale(.3) rotate(-20deg);opacity:0}65%{transform:translateY(-10px) scale(1.12) rotate(6deg)}100%{transform:none;opacity:1}}@media(prefers-reduced-motion:reduce){#bracketTrophy{animation:none}}

.tournament-match .country-flag{flex-shrink:0}.tournament-match>div>span{white-space:normal}

#tutorialTools{position:absolute;top:43px;left:6px;right:6px;z-index:2;display:flex;gap:8px;align-items:center;background:#f1dfb5ed;color:#202a2c;padding:5px 9px;border-radius:8px;font-size:13px;pointer-events:none}#quickLevel,#quickCountry{display:block;width:100%;margin:8px 0 16px}#menu{max-height:100%;overflow:auto;flex-shrink:1}.control-choice{display:none!important}body.touch .control-choice{display:flex!important;gap:10px;align-items:center;flex-wrap:wrap;font-size:14px}#joystick{display:none;touch-action:none;user-select:none;-webkit-user-select:none}body.touch.joystick-mode #touch{display:none}body.touch.joystick-mode #match{grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 142px}body.touch.joystick-mode #stage{grid-column:1;grid-row:1;justify-content:center}body.touch.joystick-mode #joystick{display:flex;position:relative;grid-column:1;grid-row:2;justify-self:end;align-self:end;align-items:center;justify-content:center;width:132px;height:132px;margin:0 8px 4px;border:3px solid #142225;border-radius:50%;background:repeating-conic-gradient(from 22.5deg,#26333524 0deg 1deg,transparent 1deg 45deg),#e8d7b0;box-shadow:0 4px #101c20}.joystick-guides{font-size:90px;color:#26333530;pointer-events:none}#joystickKnob{position:absolute;width:58px;height:58px;border:3px solid #142225;border-radius:50%;background:#edb954;box-shadow:0 3px #101c20;pointer-events:none}#joystick.held #joystickKnob{background:#ffcf73}@media(orientation:landscape){body.touch.joystick-mode #match{grid-template-columns:minmax(0,1fr) 146px;grid-template-rows:minmax(0,1fr)}body.touch.joystick-mode #joystick{grid-column:2;grid-row:1}}

/* Let the portrait court use the full width; controls occupy their own bottom area. */
@media(orientation:portrait){
 body.touch.playing main{padding-left:max(6px,env(safe-area-inset-left));padding-right:max(6px,env(safe-area-inset-right));gap:4px}
 body.touch:not(.joystick-mode) #match{grid-template-columns:minmax(0,1fr) 84px;grid-template-rows:minmax(0,1fr) 168px;gap:4px}
 body.touch:not(.joystick-mode) #stage{grid-column:1/-1;grid-row:1;justify-content:center;align-items:center}
 body.touch:not(.joystick-mode) #touch .lateral{grid-column:1;grid-row:2;align-self:end}
 body.touch:not(.joystick-mode) #touch [data-dir="ArrowUp"]{grid-column:2;grid-row:2;align-self:start}
 body.touch:not(.joystick-mode) #touch [data-dir="ArrowDown"]{grid-column:2;grid-row:2;align-self:end}
 body.touch.joystick-mode #stage{align-items:center}
}
@media(orientation:portrait) and (max-width:360px){body.touch:not(.joystick-mode) #match{grid-template-columns:minmax(0,1fr) 74px;grid-template-rows:minmax(0,1fr) 156px}}

#tutorialTools{max-width:520px;margin:0 auto;padding:7px 10px;border:0;box-shadow:none;background:#203537d9;color:#fff0cf}#tutorialTools strong{display:block;font-size:14px}#tutorialHint{display:block;font-size:12px;margin-top:2px;color:#e0dbc9}#tutorialTools.completed strong{color:#bce392}

body.touch #stage,body.touch:not(.joystick-mode) #stage,body.touch.joystick-mode #stage{justify-content:flex-start;align-items:flex-start}

.language-choice{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:14px 0;color:#263335;font-size:14px}.language-choice select{max-width:65%;min-width:130px}#tutorialGoal,#tutorialHint{overflow-wrap:anywhere}#tutorialTools{max-width:min(520px,calc(100% - 12px))}

/* Mobile: information above, proportional court, large controls below. */
#matchSidebar{display:contents}#mobileMatchInfo{display:none}
body.touch #match,body.touch:not(.joystick-mode) #match,body.touch.joystick-mode #match{display:flex;flex-direction:column;gap:6px;min-height:0}
body.touch #matchSidebar{display:flex;flex:0 0 auto;flex-direction:column;gap:6px;min-width:0;width:100%}
body.touch #match .bar{position:static;display:flex;gap:8px;pointer-events:auto}
body.touch #match .bar button{font-size:13px;padding:6px 10px;opacity:1}
body.touch #mobileMatchInfo:not([hidden]){display:flex;gap:12px;padding:2px 4px;color:#fff0cf}
#mobileMatchInfo>div{flex:1;min-width:0}#mobileMatchInfo strong{display:block;font-size:12px;line-height:1.3;overflow-wrap:anywhere}#mobileMatchInfo span{display:block;font-size:12px;line-height:1.4;overflow-wrap:anywhere}#mobileMatchInfo img{width:18px;height:13px;margin-right:4px;vertical-align:middle}
body.touch #tutorialTools{position:static;max-width:100%;width:100%;margin:0;padding:4px 6px}
body.touch #stage,body.touch:not(.joystick-mode) #stage,body.touch.joystick-mode #stage{flex:0 0 auto;min-height:0;min-width:0;width:100%;justify-content:center;align-items:flex-start}
body.touch:not(.joystick-mode) #touch{display:grid;flex:0 0 var(--controls-height);width:100%;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:var(--controls-height);gap:8px}
body.touch:not(.joystick-mode) #touch .pair{display:grid;min-width:0;min-height:0;height:100%;gap:4px;align-self:stretch}
body.touch:not(.joystick-mode) #touch .lateral{grid-column:1;grid-row:1;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:minmax(0,1fr)}
body.touch:not(.joystick-mode) #touch .vertical{grid-column:2;grid-row:1;grid-template-columns:minmax(0,1fr);grid-template-rows:repeat(2,minmax(0,1fr))}
body.touch #touch button{width:100%;height:100%;font-size:36px;padding:8px;min-width:0;min-height:0}
body.touch:not(.joystick-mode) #touch [data-dir="ArrowLeft"]{grid-column:1;grid-row:1}
body.touch:not(.joystick-mode) #touch [data-dir="ArrowRight"]{grid-column:2;grid-row:1}
body.touch:not(.joystick-mode) #touch [data-dir="ArrowUp"]{grid-column:1;grid-row:1;align-self:stretch}
body.touch:not(.joystick-mode) #touch [data-dir="ArrowDown"]{grid-column:1;grid-row:2;align-self:stretch}
body.touch.joystick-mode #joystick{flex:0 0 132px;align-self:flex-end;min-height:132px;margin:0}
body.touch #connection:not([hidden]){position:static;margin:0;padding:4px 6px;font-size:12px}

/* Mobile finish: preserve the desktop palette and give the court more room. */
:root{color-scheme:only light}
.mobile-brand{display:none}
body.touch{--controls-height:116px;background-color:#203638;background-image:radial-gradient(ellipse at top,#36514e,transparent 65%);color:#f6e9cf}
/* Menu colours come from the shared brand styles on every device. */
body.touch #menu{padding:20px 22px}
body.touch #menu .arcade-logo,body.touch #menu .arcade-kicker{display:none}
body.touch .mobile-brand{display:flex;flex-direction:column;align-items:center;gap:0;margin:2px auto 12px;max-width:270px}
body.touch .mobile-brand img{display:block;width:100%;height:auto;max-height:104px}
body.touch .mobile-brand strong{color:#294a46;font-size:14px;letter-spacing:6px;padding-left:6px}
body.touch #menu .arcade-tagline{font-size:14px!important;font-weight:600;color:#49605a;margin:8px 0 10px}
body.touch #menu .menu-art{height:48px;margin:6px 14px 14px;opacity:.85}
body.touch #menu>button{border:1px solid #314b4533;border-radius:12px;box-shadow:0 3px 0 #314b4526;min-height:46px;font-size:14px;letter-spacing:.2px;margin:9px 0}
body.touch #matchSidebar{gap:4px}
body.touch #match .bar{gap:6px}
body.touch #match .bar button{background:#e9dec2;color:#28423e;border:1px solid #718577;border-radius:8px;box-shadow:0 2px 0 #0e242666;padding:5px 10px;min-height:30px;font-size:12px}
body.touch #mobileMatchInfo:not([hidden]){padding:4px 7px;border-block:1px solid #e3dcc329;gap:12px}
body.touch #mobileMatchInfo strong{color:#f6e9cf}body.touch #mobileMatchInfo span{color:#c4d0bf}
body.touch #tutorialTools{background:#304d47;border-left:3px solid #eabc65;border-radius:4px 9px 9px 4px;padding:5px 8px}
body.touch #tutorialGoal{font-size:13px}body.touch #tutorialHint{font-size:12px;margin-top:1px}
body.touch canvas{border:2px solid #668579;border-radius:10px;box-shadow:0 3px 0 #102a2c}
body.touch #touch button{background:#eee1c4;color:#29483f;border:1px solid #98a78e;border-radius:13px;box-shadow:inset 0 1px 0 #fff8e4,0 3px 0 #102a2c;text-shadow:none;font-size:32px;transition:background .1s,box-shadow .1s}
body.touch #touch .vertical button{background:#e7bb6c;border-color:#d1a55a}
body.touch #touch button:hover{transform:none}
body.touch #touch button.held,body.touch #touch button:active{background:#416c5c;color:#fff4d8;box-shadow:inset 0 2px 4px #16382b55;transform:none}
body.touch #manual,body.touch .tournament-screen{border-width:1px;border-radius:18px;box-shadow:0 7px 20px #10262755}
body.touch #joystick{border:2px solid #96a58d;box-shadow:0 3px 0 #102a2c}
@media(max-height:740px){body.touch{--controls-height:104px}body.touch #menu{padding:14px 18px}body.touch .mobile-brand{max-width:215px;margin-bottom:6px}body.touch #menu .menu-art{height:38px;margin-bottom:8px}}
@media(prefers-reduced-motion:reduce){body.touch #touch button{transition:none}}

/* Extend only the right thumb pair upward; each button gains exactly 20%. */
body.touch:not(.joystick-mode) #touch .vertical{height:calc(var(--controls-height) * 1.2 - .8px);align-self:end;position:relative;z-index:3;overflow:visible}
body.touch #touch button,body.touch #touch .vertical button,body.touch #touch .vertical [data-dir="ArrowUp"]{background:rgba(231,187,108,.38);border-color:#e7bb6c99;color:#fff4d8;text-shadow:0 1px 2px #203638;box-shadow:inset 0 1px 0 #fff8e455,0 2px 0 #102a2c66}
body.touch #touch button.held,body.touch #touch button:active,body.touch #touch .vertical button.held,body.touch #touch .vertical button:active,body.touch #touch .vertical [data-dir="ArrowUp"].held,body.touch #touch .vertical [data-dir="ArrowUp"]:active{background:rgba(65,108,92,.55);color:#fff4d8;box-shadow:inset 0 2px 4px #16382b55}

#matchTournament{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:9px;margin:0 180px;padding:7px 12px;border-bottom:2px solid var(--venue,#eabc65);color:#fff2d7;text-align:center;min-height:34px}
#matchTournament strong{font-size:16px;line-height:1.2;overflow-wrap:anywhere}#matchTournament .country-flag{width:25px;height:18px;flex-shrink:0}
body.touch #matchTournament{margin:0;padding:4px 6px;min-height:25px}body.touch #matchTournament strong{font-size:14px}
#bracketPath{align-items:flex-start;scroll-padding-top:42px}
#bracketPath>.tournament-column{height:max-content}
#bracketPath>.tournament-column>h3{flex-shrink:0;position:sticky;top:0;z-index:3;box-shadow:0 2px 0 #263335}
/* Menu art direction: printed sporting tickets / midnight teal / sun-faded ink. */
body:not(.playing){background:#142f33;background-image:radial-gradient(ellipse at 10% 0%,#35554d,transparent 60%),repeating-linear-gradient(110deg,#ffffff02 0 1px,transparent 1px 9px)}
body:not(.playing)>main>header{display:none}
#menu.menu-redesign,body.touch #menu.menu-redesign{width:100%;max-width:1160px;display:grid;grid-template-columns:1fr 1fr;padding:0;margin:auto;background:#f0e3c5;border:2px solid #0e282c;border-radius:24px;box-shadow:0 20px 70px #071b2355;overflow:auto;min-height:0;color:#173b3b}
.menu-poster{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:600px;overflow:hidden;padding:45px 25px;background:#284a46;background-image:radial-gradient(ellipse at 90% 80%,#486654,transparent 70%),repeating-linear-gradient(0deg,#ffffff03 0 1px,transparent 1px 5px);border-right:2px solid #173735}
.new-logo{width:100%;height:auto;filter:drop-shadow(0 9px 0 #102b3333);position:relative;z-index:2;transform:rotate(-4deg)}.poster-edition{font-size:10px;letter-spacing:4px;color:#d9d6b5;position:absolute;top:28px;left:28px}.poster-tagline{color:#f0e3c5!important;font-size:17px!important;letter-spacing:1px;font-weight:600;margin:20px 0;z-index:2}.poster-footnote{position:absolute;bottom:16px;left:28px;font-size:11px;color:#bbccb3}.poster-seal{position:absolute;right:28px;bottom:32px;color:#173b3b;background:#e99372;padding:14px 20px;border:2px solid #16383b;box-shadow:4px 4px 0 #122e33;font-size:13px;font-weight:900;line-height:1.1;transform:rotate(9deg)}
.poster-orbit{position:absolute;width:320px;height:320px;border:1px dashed #dcd8ad33;border-radius:50%;transform:rotate(-28deg);pointer-events:none}.poster-orbit i{position:absolute;width:45px;height:45px;border-radius:50%;background:#a8c486;border:3px solid #163638;box-shadow:inset -6px -6px 0 #36554633,4px 5px 0 #0c30334d}.poster-orbit i:nth-child(1){left:5px;top:30px}.poster-orbit i:nth-child(2){right:-15px;bottom:90px;background:#e9b25e;width:30px;height:30px}.poster-orbit i:nth-child(3){bottom:-15px;left:90px;background:#d17454;width:36px;height:36px}.poster-orbit span{position:absolute;top:5px;right:15px;font-size:28px;color:#efdfb2}
.menu-play{padding:40px 32px;display:flex;flex-direction:column;justify-content:center;gap:13px}.menu-eyebrow{font-size:10px;letter-spacing:3px;font-weight:800;color:#697564;margin-bottom:6px}
#menu.menu-redesign button.mode-card{display:flex;align-items:center;text-align:left;gap:14px;margin:0;padding:22px 18px;border:2px solid #29463e;border-radius:10px;box-shadow:3px 4px 0 #29463e;min-height:100px;background:#e3dfbb;color:#193a36;transition:transform .15s,box-shadow .15s}
#menu.menu-redesign .mode-card:hover{transform:translate(-1px,-2px);box-shadow:4px 6px 0 #29463e}#menu.menu-redesign .mode-card:active{transform:translate(2px,3px);box-shadow:1px 1px 0 #29463e}.mode-card>span:not(.mode-number){flex:1}.mode-card strong{display:block;font-size:16px;line-height:1.25}.mode-card small{display:block;font-weight:400;font-size:12px;line-height:1.5;margin-top:8px}.mode-number{font-size:11px;align-self:flex-start;opacity:.65;letter-spacing:1px}.mode-card>b{font-size:30px;font-weight:400}
#menu.menu-redesign #worldTourButton{background:#eed075!important;color:#183b35!important;min-height:120px}.mode-career strong{font-size:23px;letter-spacing:-.5px}.mode-pair{display:grid;grid-template-columns:1fr 1fr;gap:12px}#menu.menu-redesign .mode-pair .mode-card{align-items:flex-start;flex-direction:column;gap:8px;min-height:147px}#menu.menu-redesign #invite{background:#eaa080}#menu.menu-redesign #ai{background:#b4c99a}#menu.menu-redesign .mode-local{min-height:52px;padding:14px 18px;background:transparent;box-shadow:none;border-color:#afb394}.mode-local strong{font-size:12px!important}#menu.menu-redesign #tutorialButton{background:none;border:0;box-shadow:none;margin:0;padding:12px;color:#294f46;font-size:11px;letter-spacing:.8px;text-decoration:underline;text-underline-offset:4px}
.menu-utilities{border-top:1px dashed #a8aa8a;padding-top:8px}#menu.menu-redesign details{border:0;padding:0;margin:0;background:none}#menu.menu-redesign summary{padding:12px 0;color:#43584c;font-size:12px;font-weight:700;cursor:pointer}#menu.menu-redesign .sound-controls{flex-wrap:wrap}#menu.menu-redesign .sound-controls button{width:auto;padding:8px;font-size:11px;margin:4px 0}#menu.menu-redesign label{font-size:13px;color:#294b41;margin:12px 0}#menu.menu-redesign p{color:#43584c}#menu.menu-redesign select{color:#294b41;background:#fff1d1}
body.touch #menu.menu-redesign #duel{display:none}#menu.menu-redesign :focus-visible{outline:3px solid #d67852;outline-offset:4px}
@media(max-width:760px){#menu.menu-redesign,body.touch #menu.menu-redesign{grid-template-columns:1fr;border-radius:17px}.menu-poster{min-height:230px;padding:26px 60px 20px;border-right:0;border-bottom:2px solid #173735}.new-logo{max-width:360px}.poster-edition{font-size:8px;top:12px;left:18px;letter-spacing:2px}.poster-tagline{margin:6px 0;font-size:12px!important}.poster-seal,.poster-footnote{display:none}.poster-orbit{width:240px;height:240px}.menu-play{padding:22px 20px;gap:11px}#menu.menu-redesign #worldTourButton{min-height:98px}#menu.menu-redesign .mode-pair .mode-card{min-height:126px;padding:14px}.mode-career strong{font-size:20px}.mode-card strong{font-size:14px}}
@media(prefers-reduced-motion:reduce){#menu.menu-redesign .mode-card{transition:none;transform:none!important}}
/* Supporting screens use the same paper, ink and ticket vocabulary. */
#nameScreen,#bracketScreen,#lobby,#manual,body.touch #manual,body.touch .tournament-screen{background:#f0e3c5;color:#203e37;border:2px solid #173a35;border-radius:18px;box-shadow:0 15px 55px #081e3344;padding:26px}
#nameScreen h2,#bracketScreen h2,#lobby h2,#manual h2{font-size:clamp(23px,4vw,35px);letter-spacing:-1px;color:#21483b;border-bottom:2px solid #c4c4a0;padding-bottom:18px;margin-bottom:20px}#nameScreen label{display:block;color:#52634b;font-size:11px;font-weight:bold;text-transform:uppercase;letter-spacing:1px;margin:18px 0 7px}#nameScreen input,#nameScreen select,#inviteLink{width:100%;min-height:46px;border:1px solid #97a788;background:#fff5da;color:#274b3b;border-radius:8px;padding:12px;font-size:16px}#nameScreen button,#bracketScreen button,#lobby button,#manual button{background:#2a5043;color:#fff1cc;border:1px solid #133a2b;border-radius:8px;min-height:43px;font-size:12px;font-weight:bold;box-shadow:0 3px 0 #143526}#nameScreen button[type=submit],#playRound,#shareInvite{background:#eed075;color:#1f4036}#manual p,#nameScreen p,#bracketScreen p,#lobby p{color:#52654d;font-size:13px}#manual h3{color:#274b3b;font-size:16px;margin-top:24px}#manual select,#manual input{color:#244c39;accent-color:#3f6c50}#manual .sound-controls{border-color:#b1ba97}#bracketPath{background:#dfdfbd;border:1px solid #a3b18e;border-radius:12px;padding:16px}#bracketPath>.tournament-column>h3{background:#dfdfbd;color:#3c573e;font-size:12px;letter-spacing:1px;box-shadow:0 2px 0 #a5b28e}#manualHome,#nameBack,#bracketBack,#cancelInvite{background:transparent!important;color:#345840!important;box-shadow:none!important;border-color:#a3b38e!important}
@media(max-width:760px){#nameScreen,#bracketScreen,#lobby,#manual,body.touch #manual,body.touch .tournament-screen{padding:18px;border-radius:13px}}
/* Hide the mouse over the match, including its margins. Dialogs restore the
   normal cursor; buttons keep their explicit pointer so they remain discoverable. */
body.playing:not(:has(dialog[open])){cursor:none}
/* Desktop controls and tournament title occupy separate, measured grid cells.
   The mobile terrace keeps its own layout and control placement. */
body:not(.touch) #matchSidebar{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 16px;flex:none;min-width:0}
body:not(.touch) #match .bar{position:static;grid-column:1;grid-row:1;justify-content:flex-start;gap:8px;min-width:0}
body:not(.touch) #matchTournament{grid-column:2;grid-row:1;margin:0;min-width:0}
body:not(.touch) #matchSidebar>#connection{grid-column:1/-1}
@media(max-width:640px){body:not(.touch) #matchSidebar{grid-template-columns:minmax(0,1fr)}body:not(.touch) #matchTournament{grid-column:1;grid-row:2}}

/* Online play is reserved for a later release. */
#menu.menu-redesign .mode-card:disabled{cursor:default;opacity:.65;transform:none;box-shadow:3px 4px 0 #29463e}