@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+Thai:wght@400;500;600&family=Press+Start+2P&display=swap');
:root{color-scheme:dark;--bg:#0c0d12;--panel:#14151d;--panel2:#1b1c27;--line:#2b2c3a;--ink:#f1f0e8;--muted:#9898aa;--gold:#f4c65c;--blue:#84baff;--red:#fa7b78;--green:#9ad7a3;--pixel:'Press Start 2P',monospace;--body:'IBM Plex Sans Thai',system-ui,sans-serif}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:15px var(--body);min-width:320px}button,input,select{font:inherit}button,a,input,select{-webkit-tap-highlight-color:transparent}button{cursor:pointer}button:disabled{cursor:default;opacity:.5}a{color:inherit;text-decoration:none}button:focus-visible,a:focus-visible,input:focus-visible,select:focus-visible{outline:2px solid var(--blue);outline-offset:4px}button{color:inherit}button:disabled{pointer-events:none}[hidden]{display:none!important}.testbar{min-height:32px;padding:7px 5%;display:flex;align-items:center;gap:10px;background:#211e15;color:#e3c77e;font:9px var(--pixel);line-height:1.6}.test-dot,.live-dot{display:inline-block;width:6px;height:6px;background:var(--gold);box-shadow:0 0 8px #f4c65c40}.test-note{font:12px var(--body);color:#b9aa86}.testbar button{background:none;border:0;margin-left:auto;font:12px var(--body);color:var(--gold)}.site-header{height:86px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:40px;max-width:1360px;padding:0 5%;margin:auto}.wordmark{display:flex;align-items:center;gap:11px;font:12px var(--pixel);white-space:nowrap}.gold{color:var(--gold)}nav{display:flex;align-items:center;gap:28px;margin-left:auto}nav a{font:9px var(--pixel);color:var(--gold)}nav button{border:0;background:none;color:var(--muted);font-size:13px}.profile-button{display:flex;gap:22px;align-items:center;padding:10px 16px;background:var(--panel);border:1px solid var(--line);font-size:13px}.profile-button span{color:var(--gold)}#app{max-width:1240px;padding:0 32px;margin:auto;min-height:calc(100vh - 210px)}.eyebrow{font:9px var(--pixel);letter-spacing:1px;line-height:1.8;color:var(--gold)}.hero{display:grid;grid-template-columns:1fr 280px;align-items:center;padding:55px 0 32px;gap:30px}.hero h1{font:clamp(26px,4vw,46px)/1.45 var(--pixel);letter-spacing:-2px;margin:16px 0 18px;text-shadow:3px 3px #5d421d}.hero p{color:var(--muted);line-height:1.9;margin:0}.hero-art{width:250px;height:170px;display:grid;place-items:center;position:relative;background:radial-gradient(ellipse,#f4c65c0c,transparent 65%)}.hero-art:before,.hero-art:after{content:'✦';position:absolute;color:var(--gold);font:14px monospace;top:20px;left:15px}.hero-art:after{left:auto;right:7px;top:70px;font-size:8px}.hero-art img{width:230px;image-rendering:pixelated}.hero-art small{font:8px var(--pixel);color:var(--muted);letter-spacing:3px}.action-grid{display:grid;grid-template-columns:1.1fr 1fr 1fr;gap:16px;margin-bottom:44px}.action{display:flex;flex-direction:column;align-items:start;text-align:left;border:1px solid var(--line);background:var(--panel);padding:23px;min-height:164px;position:relative;transition:transform .15s,border-color .15s}.action:hover{transform:translateY(-3px);border-color:#77727a}.action.primary{background:var(--gold);border-color:var(--gold);color:#231b0b;box-shadow:4px 4px 0 #76501e}.action .topline{display:flex;justify-content:space-between;width:100%;font:9px var(--pixel);opacity:.65;margin-bottom:22px}.action strong{font:15px var(--pixel);font-weight:400;margin-bottom:11px}.action small{color:var(--muted);font-size:13px}.action.primary small{color:#5d471c}.section-head{display:flex;align-items:center;gap:18px;margin-bottom:20px}.section-head h2{font:12px var(--pixel);font-weight:400;margin:0}.section-head .count{font:11px monospace;color:var(--muted)}.filters{margin-left:auto;display:flex;gap:4px}.filters button{background:transparent;border:1px solid transparent;padding:7px 13px;color:var(--muted);font-size:12px}.filters button.active{border-color:var(--line);background:var(--panel);color:var(--ink)}.room-list{border-top:1px solid var(--line)}.room-row{display:grid;grid-template-columns:46px minmax(160px,1fr) 115px 95px 180px;gap:16px;align-items:center;padding:20px 8px;border-bottom:1px solid var(--line)}.room-avatar{width:40px;height:40px;background:#273044;border:1px solid #3c4c68;display:grid;place-items:center;color:var(--blue);font:14px var(--pixel)}.room-avatar.red{background:#382729;border-color:#674245;color:var(--red)}.room-avatar.gold{background:#352e1e;border-color:#635231;color:var(--gold)}.room-name{font-size:16px;font-weight:500;margin-bottom:5px}.room-sub{font-size:12px;color:var(--muted)}.tag{font:8px var(--pixel);display:inline-flex;align-items:center;gap:6px;margin-right:8px;color:var(--green)}.tag.battle{color:var(--red)}.room-metric{font-size:13px;color:var(--ink)}.room-metric small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}.room-actions{display:flex;gap:8px;justify-content:end}.btn{border:1px solid var(--line);background:var(--panel2);padding:10px 16px;font-size:13px;min-height:42px;display:inline-flex;justify-content:center;align-items:center;gap:8px}.btn:hover{border-color:var(--muted)}.btn.primary{color:#231b0b;background:var(--gold);border-color:var(--gold);box-shadow:3px 3px 0 #76501e}.btn.ghost{background:transparent}.btn.wide{width:100%}.btn.blue{border-color:#4c678c;color:var(--blue);background:#202b3a}.room-tail{display:flex;justify-content:space-between;margin:18px 0 40px;color:var(--muted);font-size:12px}.room-tail span:first-child{color:var(--green)}.site-footer{border-top:1px solid var(--line);padding:22px 5%;font:8px/1.8 var(--pixel);color:var(--muted);display:flex;justify-content:space-between;gap:16px;margin-top:30px}.site-footer span:last-child{font:11px var(--body)}.dim{color:#55566b}.login-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;align-items:center;padding:60px 30px 75px;min-height:600px}.login-story .logo-large{width:200px;margin-bottom:12px;image-rendering:pixelated}.login-story h1{font:29px/1.6 var(--pixel);text-shadow:3px 3px #68491e;margin:14px 0 20px}.login-story p{color:var(--muted);line-height:1.9}.login-card{max-width:420px;width:100%;border:1px solid var(--line);background:var(--panel);padding:32px;box-shadow:6px 6px 0 #05060a}.login-card h2{font-size:27px;margin:10px 0;font-weight:500}.login-card p{font-size:13px;color:var(--muted);line-height:1.8}.login-card .social{background:#eeeef3;color:#242434;border:0;margin:15px 0;font-family:var(--body);min-height:46px}.google-g{font:bold 19px system-ui;color:#4285f4}.divider{display:flex;align-items:center;gap:15px;color:var(--muted);font-size:11px;margin:7px 0 17px}.divider:before,.divider:after{content:'';height:1px;background:var(--line);flex:1}.field{display:block;font-size:12px;color:var(--muted);margin:15px 0 7px}.input{width:100%;background:var(--bg);border:1px solid var(--line);padding:12px 13px;min-height:44px;color:var(--ink);border-radius:0}.form-bottom{display:flex;justify-content:space-between;align-items:center;font-size:11px;margin:12px 0 22px;gap:10px}.link-button{background:none;border:0;padding:0;color:var(--gold);font-size:12px;text-decoration:underline;text-underline-offset:4px}.login-alt{border-top:1px solid var(--line);margin-top:23px;padding-top:18px;font-size:12px;color:var(--muted);text-align:center}.fineprint{font-size:11px!important;color:var(--muted);margin-top:18px!important}.error{color:var(--red);font-size:12px;min-height:18px;margin-top:10px}.hint{color:var(--muted);font-size:12px;line-height:1.8}.test-hint{padding:10px 12px;border-left:2px solid var(--gold);background:#262216;color:#ddc68f;font-size:12px;margin:15px 0}.screen-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:25px 0 18px}.screen-top h1{font-size:19px;font-weight:500;margin:0}.screen-top .eyebrow{font-size:8px}.back{border:0;background:none;padding:7px 0;font-size:13px;color:var(--muted)}.badge{font:8px var(--pixel);padding:7px 9px;border:1px solid #64542c;color:var(--gold);background:#292315;display:inline-flex;gap:8px;align-items:center}.game-layout{display:grid;grid-template-columns:210px minmax(280px,1fr) 210px;gap:16px;align-items:start}.side-panel{border:1px solid var(--line);background:var(--panel);padding:17px}.side-label{font:8px var(--pixel);color:var(--muted);margin-bottom:18px}.pilot{display:flex;gap:10px;align-items:center;margin-bottom:18px}.pilot-name{font-size:14px}.pilot small{display:block;font-size:11px;color:var(--muted);margin-top:4px}.clock{font:25px var(--pixel);color:var(--gold);margin:14px 0}.instructions{font-size:12px;color:var(--muted);line-height:1.9;border-top:1px solid var(--line);padding-top:15px;margin-top:20px}.game-stage{background:#000;border:1px solid var(--line);position:relative;aspect-ratio:256/240}.game-stage iframe{width:100%;height:100%;border:0;display:block}.game-caption{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:11px;color:var(--muted);padding:11px 0}.controller{margin:25px auto 15px;width:156px;height:156px;position:relative;touch-action:none;user-select:none}.controller .key{position:absolute;width:49px;height:49px;border:1px solid #4b4c60;background:#282937;display:grid;place-items:center;font-size:19px;color:var(--ink);touch-action:none;user-select:none}.key.up{top:0;left:53px}.key.left{top:53px;left:0}.key.right{top:53px;right:0}.key.down{bottom:0;left:53px}.controller .hub{position:absolute;top:53px;left:53px;width:49px;height:49px;background:#22232e}.key.pressed,.round.pressed{background:var(--gold)!important;color:#15110a!important}.action-keys{display:flex;gap:18px;justify-content:center;padding:20px 0}.round{border:2px solid #97645d;background:#693d3c;width:58px;height:58px;border-radius:50%;font:17px var(--pixel);color:#ffdbd3;touch-action:none;user-select:none;box-shadow:3px 4px 0 #08090e}.round.a{background:#384f6d;border-color:#6986ae;color:#d6e8ff}.system-keys{display:flex;gap:8px;justify-content:center}.system-keys button{font:7px var(--pixel);padding:10px 8px;background:#292a37;border:1px solid #4b4c60;touch-action:none}.controller-pad{width:156px;height:156px;border:1px solid #65667a;background:#222330;border-radius:50%;position:relative;touch-action:none;margin:25px auto 15px}.stick{position:absolute;width:56px;height:56px;border-radius:50%;background:#52566d;border:3px solid #9296aa;left:49px;top:49px;pointer-events:none}.controller-pad.touch{border-radius:4px;background:repeating-linear-gradient(0deg,#252634 0,#252634 1px,transparent 1px,transparent 20px),repeating-linear-gradient(90deg,#252634 0,#252634 1px,transparent 1px,transparent 20px);}.controller-pad.touch .stick{width:16px;height:16px;left:69px;top:69px;background:var(--gold);border:0}.config-open{width:100%;margin-top:20px;background:transparent;border:1px solid var(--line);padding:10px;font-size:12px}.online-warning{font-size:12px;color:#d4b46d;padding:12px 15px;border:1px solid #49402c;background:#211e16;margin-bottom:18px;line-height:1.8}.chat-panel{display:flex;flex-direction:column;min-height:420px}.chat-lines{flex:1;min-height:220px;font-size:12px;line-height:1.8}.chat-line{margin:0 0 13px;overflow-wrap:anywhere}.chat-line strong{color:var(--blue);font-weight:500;margin-right:6px}.chat-line.system{color:var(--muted);font-size:11px}.chat-send{display:flex;gap:6px;margin-top:10px}.chat-send input{min-width:0;padding:9px;font-size:12px}.chat-send button{border:1px solid var(--line);background:var(--panel2);padding:6px 9px}.heart{color:var(--red);background:none;border:0;font-size:20px}.match-item{padding:15px 0;border-bottom:1px solid var(--line)}.match-item:first-of-type{padding-top:0}.match-item b{font-size:13px;font-weight:500}.match-item p{font-size:11px;color:var(--muted)}.match-item button{width:100%;font-size:11px;margin-top:5px}.watch-tools{display:flex;justify-content:space-between;align-items:center;margin:8px 0}.watch-center{position:relative}.portrait-overlay{display:none}.mobile-switch{display:none}.room-wait{margin-top:15px;padding:16px;border:1px dashed var(--line);text-align:center;color:var(--muted);font-size:13px}.room-wait strong{display:block;color:var(--gold);margin-bottom:8px;font-weight:500}dialog{color:var(--ink);background:var(--panel);border:1px solid #555366;padding:0;max-width:min(540px,calc(100% - 30px));width:100%;box-shadow:8px 8px 0 #0009}dialog::backdrop{background:#000b}.modal-inner{padding:27px}.modal-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;gap:12px}.modal-head h2{font-size:21px;font-weight:500;margin:0}.close{border:1px solid var(--line);background:none;width:32px;height:32px;font-size:22px}.check-row{display:flex;gap:10px;align-items:center;font-size:13px;margin:18px 0}.check-row input{accent-color:var(--gold)}.config-tabs{display:flex;gap:8px;margin-bottom:20px}.config-tabs button{flex:1}.config-tabs button.active{background:var(--gold);color:#231b0b}.config-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.config-grid label{font-size:12px;color:var(--muted)}.config-grid select,.config-grid input{margin-top:6px}.key-map{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:18px 0}.key-map label{font-size:11px;color:var(--muted)}.key-map input{padding:8px 4px;text-align:center;font-size:11px}.button-row{display:flex;gap:10px;margin-top:22px}.button-row>*{flex:1}.test-input{margin:14px 0;padding:15px;border:1px dashed var(--line);font:10px monospace;color:var(--gold);min-height:46px}.status-note{font-size:12px;color:var(--muted);margin-top:15px;line-height:1.8}#toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);max-width:calc(100vw - 30px);padding:13px 20px;background:var(--gold);color:#231b0b;border:1px solid #ffe19a;box-shadow:4px 4px 0 #0009;font-size:13px;z-index:30}.empty{padding:35px;color:var(--muted);text-align:center}
@media(min-width:1500px){#app{max-width:1390px}}@media(max-width:1000px){.game-layout{grid-template-columns:175px minmax(260px,1fr) 175px;gap:10px}.side-panel{padding:12px}.controller{transform:scale(.85);transform-origin:center;margin:8px auto}.game-layout .clock{font-size:20px}.round{width:50px;height:50px}.room-row{grid-template-columns:40px 1fr 80px 160px}.room-metric.spectators{display:none}.login-layout{gap:35px;padding:40px 0}.hero-art{width:200px}.hero{grid-template-columns:1fr 210px}}@media(max-width:740px){.site-header{padding:0 18px;height:70px;gap:10px}.wordmark{font-size:9px;gap:6px}.wordmark img{width:38px}.site-header nav{display:none}.profile-button{margin-left:auto;padding:8px 10px;font-size:11px;gap:8px}.testbar{padding:6px 14px;gap:7px;font-size:7px}.test-note{display:none}.testbar button{font-size:11px}#app{padding:0 18px}.hero{grid-template-columns:1fr;padding:32px 0 25px;gap:0}.hero-art{display:none}.hero h1{font-size:30px}.hero p{font-size:13px}.eyebrow{font-size:8px}.action-grid{grid-template-columns:1fr 1fr;gap:12px;margin-bottom:34px}.action.primary{grid-column:1/-1;min-height:120px}.action{padding:18px;min-height:146px}.action .topline{margin-bottom:16px;font-size:8px}.action strong{font-size:12px}.action small{font-size:12px}.section-head{flex-wrap:wrap;gap:14px}.section-head h2{font-size:10px}.filters{margin-left:0;width:100%;gap:4px}.filters button{flex:1;padding:8px 5px;font-size:12px}.room-row{grid-template-columns:34px 1fr;gap:10px;padding:17px 0}.room-avatar{width:32px;height:32px;font-size:11px}.room-name{font-size:14px}.room-actions{grid-column:2;justify-content:start}.room-metric{display:none}.room-actions .btn{min-height:40px;padding:8px 17px}.room-sub{font-size:11px}.room-tail{font-size:10px;gap:10px}.site-footer{padding:18px;font-size:6px;flex-direction:column;gap:8px}.login-layout{grid-template-columns:1fr;gap:20px;padding:30px 0 40px}.login-story{display:flex;align-items:center;gap:20px}.login-story .logo-large{width:100px;margin:0}.login-story h1{font-size:15px;margin:0;text-shadow:2px 2px #68491e}.login-story p{display:none}.login-story>.eyebrow{display:none}.login-card{max-width:none;padding:24px}.screen-top{margin-top:18px;flex-wrap:wrap}.screen-top h1{font-size:16px}.screen-top .badge{font-size:7px}.game-layout{grid-template-columns:1fr}.player-layout{grid-template-columns:1fr 1fr}.player-layout .game-center{grid-column:1/-1;grid-row:1}.player-layout>.side-panel{min-height:250px}.player-layout .pilot,.player-layout .instructions{display:none}.player-layout .side-label{margin-bottom:10px}.player-layout .controller{transform:scale(.9);margin:0 auto}.player-layout .clock{font-size:18px}.player-layout .action-keys{padding:10px 0}.player-layout .config-open{margin-top:10px}.game-caption{font-size:10px}.online-warning{font-size:11px}.watch-layout{display:flex;flex-direction:column}.watch-center{width:100%;order:0}.watch-layout>.chat-panel{order:2;width:100%;min-height:0}.watch-layout>.other-matches{order:3;width:100%}.watch-layout .chat-lines{display:none}.watch-layout .chat-panel>.side-label{display:none}.portrait-overlay{display:flex;position:absolute;inset:auto 10px 16px;flex-direction:column;align-items:start;gap:7px;pointer-events:none;max-height:44%;overflow:hidden}.portrait-overlay span{font-size:12px;background:#10121c9e;color:#fff;padding:3px 7px;text-shadow:1px 1px #000;max-width:90%;overflow-wrap:anywhere}.portrait-overlay strong{color:var(--gold);font-weight:500}.mobile-switch{display:flex;gap:8px;margin:10px 0}.mobile-switch button{flex:1}.watch-layout>.other-matches{display:none}.watch-layout.show-matches>.other-matches{display:block}.watch-tools{font-size:12px}.config-grid{grid-template-columns:1fr 1fr}.key-map{grid-template-columns:repeat(4,1fr)}.modal-inner{padding:20px}}
@media(max-width:380px){.hero h1{font-size:25px}.wordmark{font-size:8px}.action strong{font-size:10px}.controller{margin-left:-4px!important}.key-map{grid-template-columns:repeat(2,1fr)}}@media(orientation:landscape) and (max-width:950px){.player-layout{grid-template-columns:150px minmax(260px,1fr) 150px}.player-layout .game-center{grid-column:auto;grid-row:auto}.player-layout>.side-panel{min-height:230px}.player-layout .controller{transform:scale(.75);margin:0 -15px}.player-layout .side-label{font-size:7px}.watch-layout{display:grid;grid-template-columns:160px minmax(250px,1fr) 165px}.watch-center{order:initial}.watch-layout>.chat-panel,.watch-layout>.other-matches{display:flex;order:initial}.watch-layout>.other-matches{display:block}.watch-layout .chat-lines{display:block;min-height:150px}.portrait-overlay,.mobile-switch{display:none}.screen-top{margin-top:12px}.game-layout .clock{font-size:17px}.game-layout .round{width:45px;height:45px}.game-layout .action-keys{gap:10px}}
@media(prefers-reduced-motion:reduce){*{scroll-behavior:auto!important;transition:none!important}}

/* The control surface must never invoke iOS text selection or the long-press callout. */
.player-layout>.side-panel,.controller,.controller-pad,.action-keys,.system-keys,
[data-key],[data-key] *,.controller-pad *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none;}
.controller,.controller-pad,.action-keys,.system-keys,[data-key]{touch-action:none;}
[data-key]{-webkit-appearance:none;appearance:none;}
.key::before{content:"";display:block;width:18px;height:18px;background:currentColor;clip-path:polygon(50% 0,100% 100%,0 100%);pointer-events:none;}
.key.down::before{transform:rotate(180deg)}.key.left::before{transform:rotate(-90deg)}.key.right::before{transform:rotate(90deg)}
.control-glyph{display:block;pointer-events:none;width:24px;height:29px;overflow:visible;}
.system-keys .control-glyph{width:45px;height:11px;}
/* Full-play shell: keep both game and controls inside the visible viewport. */
.immersive-enter{margin-left:auto}.immersive-bar{display:none}
body.arena-immersive{position:fixed;inset:0;width:100%;height:100%;overflow:hidden;overscroll-behavior:none;}
.arena-immersive .site-header,.arena-immersive .testbar,.arena-immersive .site-footer,.arena-immersive .screen-top,.arena-immersive .online-warning{display:none!important}
.arena-immersive #app{position:fixed;inset:0;max-width:none;margin:0;padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);width:100%;height:100dvh;min-height:0;display:grid;grid-template-rows:36px minmax(0,1fr);background:var(--bg);overflow:hidden;}
.arena-immersive .immersive-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:4px 12px;font:8px var(--pixel);color:var(--gold);border-bottom:1px solid var(--line)}
.immersive-bar button{min-height:28px;padding:4px 12px;background:var(--panel2);border:1px solid var(--line);color:var(--ink);font:12px var(--body);-webkit-user-select:none;user-select:none;}
.arena-immersive .player-layout{height:100%;min-height:0;grid-template-columns:minmax(145px,185px) minmax(0,1fr) minmax(145px,185px);align-items:center;gap:10px;padding:8px;overflow:hidden}
.arena-immersive .game-center{display:flex;justify-content:center;align-items:center;min-width:0;min-height:0;height:100%;grid-column:auto;grid-row:auto;overflow:hidden;}
.arena-immersive .game-stage{width:min(100%,calc((100dvh - 58px)*256/240));aspect-ratio:256/240;max-height:100%;flex:none;}
.arena-immersive .side-panel{align-self:center;min-height:0;padding:10px;height:auto;max-height:100%;overflow:visible}
.arena-immersive .player-layout .game-caption,.arena-immersive .player-layout .instructions,.arena-immersive .player-layout .hint,.arena-immersive .player-layout .side-label,.arena-immersive .room-wait{display:none}
.arena-immersive .controller{margin:0 auto!important;transform:scale(.9);transform-origin:center}
.arena-immersive .controller-pad{margin:0 auto;width:140px;height:140px}
.arena-immersive .controller-pad .stick{left:41px;top:41px}.arena-immersive .controller-pad.touch .stick{left:61px;top:61px}
.arena-immersive .clock{font-size:19px;margin:6px 0;text-align:center}
.arena-immersive .action-keys{padding:12px 0;gap:15px}.arena-immersive .round{height:52px;width:52px}
.arena-immersive .config-open{margin-top:5px;padding:8px 4px;min-height:36px;font-size:11px}
@media(orientation:portrait){
 .arena-immersive .player-layout{grid-template-columns:1fr 1fr;grid-template-rows:minmax(0,1fr) 220px;gap:8px;padding:6px;align-items:center}
 .arena-immersive .game-center{grid-column:1/-1;grid-row:1}
 .arena-immersive .game-stage{width:min(100%,calc((100dvh - 278px)*256/240))}
 .arena-immersive .side-panel{width:100%;height:212px;align-self:center;display:flex;flex-direction:column;justify-content:center;padding:7px}
 .arena-immersive #direction-controls{height:148px;display:grid;place-items:center}
 .arena-immersive .clock{font-size:16px;margin:4px 0}
 .arena-immersive .action-keys{padding:15px 0}.arena-immersive .round{width:50px;height:50px}
}
@media(orientation:landscape) and (max-height:450px){
 .arena-immersive #app{grid-template-rows:30px minmax(0,1fr)}
 .arena-immersive .player-layout{grid-template-columns:145px minmax(0,1fr) 145px;gap:4px;padding:3px}
 .arena-immersive .game-stage{width:min(100%,calc((100dvh - 40px)*256/240))}
 .arena-immersive .side-panel{padding:5px}.arena-immersive .controller{transform:scale(.82);margin:0 -10px!important}
 .arena-immersive .controller-pad{width:130px;height:130px}.arena-immersive .controller-pad .stick{left:36px;top:36px}
 .arena-immersive .controller-pad.touch .stick{left:56px;top:56px}
 .arena-immersive .action-keys{gap:10px;padding:14px 0}
}
/* Grid-sized D-pad: no transformed/absolute hit targets can spill into another panel. */
.controller{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr));gap:4px;width:min(156px,100%);height:auto;aspect-ratio:1;transform:none!important;margin:8px auto!important;}
.controller .key{position:static;inset:auto;width:100%;height:100%;min-width:0;min-height:0;padding:0;}
.controller .key.up{grid-column:2;grid-row:1}.controller .key.left{grid-column:1;grid-row:2}.controller .key.right{grid-column:3;grid-row:2}.controller .key.down{grid-column:2;grid-row:3}
.controller .hub{position:static;width:100%;height:100%;grid-column:2;grid-row:2;pointer-events:none;}
#direction-controls{min-width:0;max-width:100%;position:relative;isolation:isolate;}
.player-layout>.side-panel{min-width:0;}
.system-keys{flex-wrap:wrap;gap:6px;}.system-keys button{min-height:36px;min-width:0;padding:9px 7px;}
.system-keys .control-glyph{width:40px;height:11px;}
.system-keys [data-key="pass"]{flex:0 0 100%;display:grid;place-items:center;color:var(--gold);border-color:#80652a;}
.system-keys [data-key="pass"] .control-glyph{width:48px;height:12px;}
.arena-immersive .controller{width:min(148px,100%);margin:0 auto!important;}
@media(orientation:portrait){.arena-immersive #direction-controls{height:auto;max-height:150px;}.arena-immersive .config-open{margin-top:8px;}.arena-immersive .action-keys{padding:8px 0;}.arena-immersive .system-keys button{min-height:30px;padding:7px 6px;}}
@media(orientation:landscape) and (max-height:450px){.arena-immersive .controller{width:min(132px,100%);}.arena-immersive .action-keys{padding:8px 0;}.arena-immersive .system-keys button{min-height:29px;}}

/* Resizing never expands the direction hit surface beyond its sidebar. */
#direction-controls .controller{width:min(var(--control-size,156px),100%);}
#direction-controls .controller-pad{width:min(var(--control-size,156px),100%);height:auto;aspect-ratio:1;}
#direction-controls .controller-pad .stick{left:calc(50% - 28px);top:calc(50% - 28px);}
#direction-controls .controller-pad.touch .stick{left:calc(50% - 8px);top:calc(50% - 8px);}

body.arena-immersive,body.arena-immersive *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
body.arena-immersive input,body.arena-immersive textarea,body.arena-immersive [contenteditable="true"]{-webkit-user-select:text;user-select:text;-webkit-touch-callout:default}