.matchup-spotlight{display:flex;align-items:center;justify-content:space-between;gap:20px;margin:0 0 22px;padding:19px 24px;border:1px solid #b8a3ef55;border-radius:7px;background:linear-gradient(100deg,#191329f5,#161b30dc 68%,#25244588),url('assets/moonkingdom.webp') center 35%/cover}
.matchup-spotlight span{display:block;font:700 10px Arial;letter-spacing:2px;color:#ebceff}.matchup-spotlight strong{display:block;font:700 27px 'Barlow Condensed',Impact,sans-serif;color:#f6eefe;margin-top:5px}.matchup-spotlight p{margin:5px 0 0;color:#b9c1d5;font-size:12px;line-height:1.45}.matchup-spotlight button{padding:13px 18px;border:1px solid #e0c6ff80;border-radius:4px;background:#d6b6f218;color:#efd9ff;font:700 12px Arial;white-space:nowrap}.matchup-spotlight button:hover{background:#d6b6f232}.matchup-spotlight button:focus-visible{outline:2px solid #e5d3ff;outline-offset:3px}
@media(max-width:760px){.matchup-spotlight{padding:16px;align-items:start;flex-wrap:wrap;gap:12px}.matchup-spotlight strong{font-size:25px}.matchup-spotlight button{width:100%}}
/* A shared touch surface: independent pointers, generous targets, safe-area margins. */
.touch-deck{display:none;touch-action:none;user-select:none;-webkit-user-select:none;align-items:end;justify-content:space-between;gap:14px;z-index:6}
.touch-deck .touch-stick{position:relative;width:116px;height:116px;flex:0 0 116px;border:1px solid #c3d9ff45;border-radius:50%;background:radial-gradient(circle,#34466a60,#0b132b80);touch-action:none}
.stick-guide{position:absolute;top:9px;left:0;width:100%;text-align:center;font:bold 10px Arial;color:#ccd5e8;letter-spacing:1.8px;pointer-events:none}
.stick-thumb{position:absolute;inset:35px;border-radius:50%;border:1px solid #d5e7ff99;background:radial-gradient(circle at 35% 30%,#c7dbf3b0,#44638d9c);box-shadow:0 4px 14px #0007;pointer-events:none}
.touch-deck .touch-keys{display:grid;grid-template-columns:repeat(5,minmax(42px,1fr));gap:6px;width:278px;max-width:65%}
#touch-controls.touch-deck button,#touch.touch-deck button{min-width:42px;width:100%;height:46px;padding:0 2px;border:1px solid #bacfff57;background:#15253bcc;border-radius:12px;color:#e7f1ff;font:800 11px Arial;letter-spacing:0;touch-action:none;box-shadow:0 3px 10px #0004}
#touch-controls.touch-deck .touch-attack,#touch.touch-deck .touch-attack{background:#bfef6be8;border-color:#e5ffac;color:#14210b}
#touch-controls.touch-deck .touch-special,#touch.touch-deck .touch-special{background:#655595e8;border-color:#c8a8ff}
#touch-controls.touch-deck .touch-jump,#touch.touch-deck .touch-jump{background:#365b82e8;border-color:#a6d8ff}
#touch-controls.touch-deck button.pressed,#touch.touch-deck button.pressed{background:#f3e5ff;color:#151025;transform:scale(.94);box-shadow:0 0 16px #b4caff60}
.mobile-tip{display:none;text-align:center;color:#aebdd3;font-size:13px;line-height:1.5;margin:12px 0}
.fighter-card[data-id="sailormoon"] .card-name,.fighter-card[data-id="tuxedomask"] .card-name{font-size:clamp(16px,1.7vw,25px)}
.fighter-copy.long-name h2{font-size:clamp(52px,6.5vw,92px);line-height:.94;max-width:420px}
@media(max-width:760px){
 body{overflow-x:clip}button,select,input{min-height:44px}select,input{font-size:16px!important}
 .topbar{height:auto;min-height:76px;padding:12px 4%;gap:10px;flex-wrap:wrap}.topbar nav{order:3;flex:1 0 100%;justify-content:space-between;gap:8px}.topbar nav :is(a,button){font-size:13px!important;min-height:32px;display:inline-flex;align-items:center}.top-tools{margin-left:auto}.topbar .brand{min-height:42px}
 .selection-header h1{font-size:34px}.fighter-showcase{height:345px}.fighter-copy{width:55%;margin:18px}.fighter-copy p{font-size:13px;line-height:1.5;max-width:200px}.fighter-copy.long-name h2{font-size:48px;overflow-wrap:normal}.fighter-tags{gap:5px}.fighter-art-wrap{left:40%;width:66%}
 .roster{grid-template-columns:repeat(3,minmax(0,1fr))}.fighter-card{height:118px}.fighter-card .card-name{font-size:21px}.fighter-card[data-id="sailormoon"] .card-name,.fighter-card[data-id="tuxedomask"] .card-name{font-size:19px}.fighter-card .card-series{font-size:10px!important}.stages{grid-template-columns:repeat(2,minmax(0,1fr))}.stage-sub{font-size:10px;max-width:90%;line-height:1.25}.stage-name{font-size:19px}
 .setup-row{flex-wrap:wrap;gap:8px}.segmented{flex-wrap:wrap}.segmented button{font-size:13px;padding:9px}.rules-line{flex-wrap:wrap;gap:10px}.fight-button{min-height:60px}.mobile-tip{display:block}
 dialog{max-height:88dvh;overflow:auto;padding:23px!important}dialog p{font-size:15px!important}#room-browser{min-width:0}.room-join{grid-template-columns:1fr auto}.room-join button{padding:10px}.open-room-row img{width:60px}.open-room-row strong{font-size:21px}
 body.playing .topbar{height:44px;min-height:44px;padding:3px 12px;flex-wrap:nowrap}body.playing .topbar nav,body.playing .brand small,body.playing .brand-mark{display:none}body.playing .brand{font-size:23px;min-height:0}body.playing .top-tools .icon-button{min-height:36px}
 #match{height:calc(100dvh - 44px)}#practice-panel{max-height:31dvh}.practice-toolbar button{min-height:40px}.practice-toolbar select{max-width:155px}#battle-action{top:42px;bottom:auto;padding:4px 8px;max-width:55%}#battle-action span{font-size:10px}.controller-match-status{display:none}
 .match-top{font-size:10px;gap:5px;top:4px}.match-top button{min-height:34px}.match-top #network-status{order:unset;margin:0;max-width:44%;font-size:10px}
 /* Story selection: scrollable chapters and a compact setup on phones. */
 body>header{padding:12px 4%;height:auto;gap:12px;flex-wrap:wrap}body>header nav{gap:12px;flex-wrap:wrap;font-size:13px}body>header nav button{font-size:13px}.hero{min-height:530px}.hero-copy{padding:32px 5vw}.hero-copy h1{font-size:65px}.hero-copy p{font-size:15px}.hero-art{width:75%;right:-25%;opacity:.65}.setup{display:grid;grid-template-columns:1fr 1fr;gap:15px}.setup .plus{display:none}.setup label{font-size:12px}.chapters{display:flex;overflow-x:auto;scroll-snap-type:x proximity;padding:3px 2px 13px}.chapter{min-width:150px;scroll-snap-align:start}.launch{flex-wrap:wrap}.launch>div{flex-basis:100%}.launch button{flex:1;font-size:19px}.features{gap:20px;grid-template-columns:1fr}.section-title{align-items:start}.section-title p{max-width:45%;font-size:12px}
 body.playing>header{display:none}.play-bar{min-height:44px;padding:4px 10px;gap:8px}.play-bar>span:first-child{font-size:13px}.play-bar button{min-height:34px;font-size:12px;padding:4px 8px}.play-bar #connection{font-size:11px;max-width:25%}#play{height:100dvh;display:flex;flex-direction:column}#stage-wrap{width:100%;flex:1;min-height:0;display:flex;align-items:center}#stage-wrap #game{max-height:100%;object-fit:contain}#overlay{z-index:8;padding:20px;align-items:center;overflow:auto}.dialogue h2{font-size:30px}.dialogue p{font-size:15px;margin:12px 0;line-height:1.5}.dialogue button{min-height:42px}.play-hint{display:none}
}
@media(pointer:coarse){
 #touch-controls.touch-deck,#touch.touch-deck{display:flex;padding:10px max(14px,env(safe-area-inset-right)) max(10px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left));left:0;right:0;bottom:0;width:100%;position:absolute;pointer-events:none}
 .touch-deck>*{pointer-events:auto}.match-bottom-hint,.play-hint{display:none}.mobile-tip{display:block}
 #touch.touch-deck{position:relative;background:#080e1c;flex:none}.touch-deck .touch-keys{align-self:end}
}
@media(pointer:coarse) and (orientation:portrait){
 #arena-wrap{display:flex;flex-direction:column;justify-content:center;padding-top:35px;padding-bottom:160px}#arena-wrap #game{width:100%;height:auto;max-height:100%;object-fit:contain}
 #touch-controls.touch-deck{background:linear-gradient(transparent,#080e1c 24%);min-height:155px;align-items:center}.touch-deck .touch-stick{width:98px;height:98px;flex-basis:98px}.stick-thumb{inset:29px}.touch-deck .touch-keys{max-width:69%;gap:5px;grid-template-columns:repeat(5,minmax(35px,1fr))}#touch-controls.touch-deck button,#touch.touch-deck button{min-width:35px;height:50px;font-size:9px}
 #touch.touch-deck .touch-keys{grid-template-columns:repeat(4,minmax(42px,1fr))}#battle-action{top:40px;max-width:78%}#battle-action span{display:none}
}
@media(pointer:coarse) and (orientation:landscape){
 body.playing .topbar{display:none}#match{height:100dvh}#arena-wrap #game{height:100%;width:100%;object-fit:contain}.touch-deck .touch-stick{width:100px;height:100px;flex-basis:100px}.stick-thumb{inset:30px}.touch-deck .touch-keys{width:260px;max-width:40%}#touch-controls.touch-deck button,#touch.touch-deck button{height:43px;font-size:10px}#battle-action{top:36px;max-width:48%}#battle-action span{display:none}
 #touch.touch-deck{position:absolute;background:none}#play .play-bar{position:absolute;top:0;left:0;right:0;z-index:7}#play #stage-wrap{height:100dvh}#play #overlay{padding:20px 18%;background:#050b20dd}#practice-panel{max-height:25dvh}
}
@media(pointer:coarse) and (max-width:360px) and (orientation:portrait){
 #touch-controls.touch-deck,#touch.touch-deck{gap:8px;padding-left:10px;padding-right:10px}
 .touch-deck .touch-stick{width:80px;height:80px;flex-basis:80px}.stick-thumb{inset:24px}
 .fighter-copy.long-name h2{font-size:40px}
}

@media(min-width:1101px){.chapters{grid-template-columns:repeat(7,minmax(0,1fr))}.roster{grid-template-columns:repeat(6,minmax(0,1fr))}}