:root {
  --ink:#18342b; --muted:#65705e; --paper:#f6f7f0; --lime:#d1f66d;
  --green:#183c30; --line:#dfe3d8; --player:#f26952;
  --device-top:env(safe-area-inset-top,0px); --device-right:env(safe-area-inset-right,0px);
  --device-bottom:env(safe-area-inset-bottom,0px); --device-left:env(safe-area-inset-left,0px);
  --stage-width:1280px; --stage-height:720px; --stage-scale:1;
  font-family:Arial,"Noto Sans Hebrew",system-ui,sans-serif;
  color:var(--ink); background:#12271f; font-synthesis:none; color-scheme:light;
}
* { box-sizing:border-box; min-width:0; }
html,body { position:fixed; inset:0; width:100%; height:100%; margin:0; overflow:hidden; overscroll-behavior:none; }
body { touch-action:manipulation; }
/* The engine fits a complete logical screen inside this physical TV-safe frame.
   Clipping is a last safeguard, never a substitute for fitting screen contents. */
#viewport { position:fixed; overflow:clip; contain:strict; border:1px solid #cde49d65; border-radius:12px; background:#142b24; }
#app { position:absolute; left:var(--stage-left,0px); top:var(--stage-top,0px); width:var(--stage-width); height:var(--stage-height); transform:scale(var(--stage-scale)); transform-origin:top left; overflow:clip; contain:layout paint; }
[hidden] { display:none!important; }
button,input { font:inherit; }
button,a { -webkit-tap-highlight-color:transparent; }
button { border:0; cursor:pointer; color:inherit; }
button:disabled { cursor:default; opacity:.5; }
a { color:inherit; text-decoration:none; }
button:focus-visible,a:focus-visible,input:focus-visible,summary:focus-visible { outline:3px solid #a4c954; outline-offset:3px; }
svg { width:22px; height:22px; flex-shrink:0; pointer-events:none; }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { font-weight:700; line-height:1.2; }
h2 { font-size:32px; }
p { line-height:1.5; }
bdi,.room-code b { direction:ltr; unicode-bidi:isolate; }
.host-shell { width:100%; height:100%; display:grid; grid-template-rows:76px minmax(0,1fr); background:var(--paper); }
.topbar { display:flex; align-items:center; justify-content:space-between; padding:0 24px; border-bottom:1px solid var(--line); gap:20px; }
.wordmark { display:inline-flex; align-items:center; gap:10px; font-size:22px; font-weight:700; white-space:nowrap; }
.brand-mark { display:grid; place-items:center; width:40px; height:42px; border-radius:10px; background:var(--ink); color:var(--lime); font-size:30px; }
.topbar nav { display:flex; align-items:center; gap:24px; height:100%; }
.nav-link { height:100%; padding:0 4px; background:none; border-bottom:3px solid transparent; font-size:18px; font-weight:600; color:var(--muted); }
.nav-link.active { color:var(--ink); border-bottom-color:var(--ink); }
.top-actions,.game-bar-actions { display:flex; align-items:center; gap:10px; }
.host-label { display:flex; align-items:center; gap:8px; font-size:16px; color:#536d51; margin-inline-end:10px; }
.connection-warning { color:#c68e55!important; }
.icon-btn { display:grid; place-items:center; width:44px; height:44px; border:1px solid #d6ddca; border-radius:50%; background:transparent; }
.icon-btn:hover { background:#e5ebdb; }
.is-muted { opacity:.4; }
.arcade-lobby { padding:24px; display:grid; grid-template-columns:minmax(0,1fr) 282px; gap:24px; min-height:0; }
.game-selection { display:grid; grid-template-rows:76px minmax(0,1fr) 32px; gap:16px; min-height:0; }
.section-heading { display:flex; align-items:center; justify-content:space-between; gap:16px; }
.section-heading h1 { font-size:36px; margin-bottom:7px; }
.section-heading p { font-size:18px; color:var(--muted); }
.season-tag { padding:8px 12px; border-radius:8px; background:#e5ecd7; font-size:17px; white-space:nowrap; }
.game-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; min-height:0; }
.game-card { position:relative; display:grid; grid-template-rows:minmax(0,1fr) 218px; min-height:0; background:#fff; border:2px solid #e3e8da; border-radius:16px; overflow:clip; }
.game-card.chosen { border-color:#8caa4f; }
.game-card:hover { border-color:#a4bd71; }
.card-art { position:relative; display:block; padding:0; width:100%; height:100%; overflow:clip; background:#e2e7d5; }
.card-art img { display:block; height:100%; width:100%; object-fit:cover; }
.card-tag { position:absolute; inset-inline-start:10px; top:12px; background:#fff8e7ed; padding:6px 9px; border-radius:20px; font-size:14px; color:#71552c; }
.brawl .card-tag { color:#555079; background:#eeebffed; }
.art-play { position:absolute; inset-inline-end:12px; bottom:12px; display:grid; place-items:center; width:38px; height:38px; background:#fffffff2; border-radius:50%; font-size:25px; }
.card-body { padding:16px; display:flex; flex-direction:column; gap:8px; }
.card-meta { display:flex; justify-content:space-between; align-items:center; color:#65745b; font-size:15px; }
.card-meta span:last-child { display:flex; gap:5px; align-items:center; direction:rtl; }
.card-meta svg { width:17px; height:17px; }
.card-body h3 { font-size:28px; }
.card-body>p { font-size:17px; line-height:1.4; color:var(--muted); }
.card-footer { border-top:1px solid #e6ebde; padding-top:10px; display:flex; justify-content:space-between; align-items:center; gap:8px; margin-top:auto; }
.card-footer>span { font-size:15px; color:#62734f; }
.play-button { background:#eaf0df; border-radius:7px; padding:8px 11px; display:flex; align-items:center; gap:9px; font-size:18px; font-weight:700; min-height:42px; }
.play-button:hover { background:var(--lime); }
.play-button svg,.join-bottom svg { transform:scaleX(-1); }
.vote-tag { position:absolute; inset-inline-end:10px; top:50px; padding:6px 10px; border-radius:6px; background:var(--lime); font-size:16px; font-weight:700; }
.lobby-footer { display:flex; align-items:center; justify-content:space-between; font-size:16px; color:#657653; gap:12px; }
.join-panel { display:flex; flex-direction:column; justify-content:space-between; align-items:stretch; background:var(--green); color:#f8f9ec; border-radius:18px; padding:18px; gap:12px; min-height:0; }
.join-panel-top { display:flex; flex-direction:column; align-items:center; gap:12px; text-align:center; }
.join-eyebrow { font-size:16px; color:#bed6af; }
.join-panel h2 { font-size:30px; margin:0 0 8px; }
.join-panel p { font-size:17px; color:#cfdbc7; }
.room-code { display:flex; align-items:center; justify-content:center; gap:8px; font-size:15px; color:#c2d7b8; margin-top:8px; }
.room-code b { font:700 20px monospace; letter-spacing:2px; color:#e2faaf; }
.small-icon { background:none; color:inherit; display:grid; place-items:center; padding:8px; }
.qr-button { padding:8px; background:#fff; border-radius:12px; display:flex; align-items:center; flex-direction:column; gap:4px; color:var(--ink); }
.qr-button canvas { width:176px; height:176px; image-rendering:pixelated; }
.qr-button span { font-size:15px; font-weight:700; }
.seats { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.seat { border:1px dashed #93af8066; border-radius:10px; padding:10px 6px; display:flex; align-items:center; justify-content:center; gap:5px; font-size:15px; color:#b6cca9; position:relative; }
.seat>span:last-of-type { overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.seat-avatar { display:grid; place-items:center; width:22px; height:22px; background:#405e49; color:#b8cbb0; border-radius:50%; font-size:16px; flex-shrink:0; }
.seat.occupied { border-style:solid; border-color:var(--seat); color:#fff; }
.seat.occupied .seat-avatar { background:var(--seat); color:#18281e; }
.seat small { position:absolute; bottom:-5px; background:var(--green); padding:0 3px; font-size:12px; }
.join-bottom { display:flex; flex-direction:column; align-items:center; gap:10px; font-size:16px; color:#c0d4b4; }
.join-bottom button { background:transparent; color:#e4f4c8; display:flex; align-items:center; gap:8px; padding:8px; font-size:17px; }
.btn { padding:12px 18px; min-height:46px; display:inline-flex; justify-content:center; align-items:center; gap:10px; border-radius:9px; font-weight:700; font-size:18px; }
.btn:hover { filter:brightness(.96); }
.primary { background:var(--ink); color:#f4f8eb; }
.lime { background:var(--lime); color:#20382b; }
.ghost { background:transparent; border:1px solid #ced8bd; }
.small { padding:9px 14px; background:#e5eddb; font-size:16px; }
.toast { position:absolute; bottom:20px; left:50%; transform:translateX(-50%); z-index:1000; padding:12px 20px; border-radius:10px; background:#17382ff5; color:white; font-size:19px; max-width:calc(100% - 48px); text-align:center; }
/* Native dialogs live in the top layer: explicitly share the engine's bounds. */
dialog { position:fixed; margin:0; left:var(--dialog-left,0px); top:var(--dialog-top,0px); right:auto; bottom:auto; width:var(--stage-width); height:var(--stage-height); max-width:none; max-height:none; padding:24px; border:0; background:transparent; color:var(--ink); transform:scale(var(--stage-scale)); transform-origin:top left; overflow:clip; }
dialog[open] { display:grid; place-items:center; }
dialog::backdrop { background:#11261dcc; }
.modal-card { position:relative; width:900px; max-width:100%; max-height:100%; padding:38px; border-radius:20px; background:var(--paper); overflow:clip; }
.modal-close { position:absolute; inset-inline-end:12px; top:12px; border-radius:50%; height:36px; width:36px; background:#e5ecda; font-size:28px; line-height:1; z-index:2; }
dialog h2 { margin:8px 0 16px; font-size:34px; }
dialog p { font-size:19px; color:var(--muted); }
.eyebrow { font-size:16px; font-weight:700; color:#61794d; }
.qr-modal { text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; }
.qr-modal canvas { width:260px; height:260px; background:#fff; border-radius:12px; image-rendering:pixelated; }
.qr-modal h2 { margin:0; }
.qr-modal .room-code { color:#5b6e4b; margin:0; }
.qr-modal .room-code b { color:var(--ink); }
.game-detail { display:grid; grid-template-columns:1fr 1.15fr; gap:30px; align-items:center; }
.game-detail>img { width:100%; height:375px; object-fit:cover; border-radius:12px; }
.control-guide { display:flex; gap:10px; margin:22px 0; }
.control-guide>span { display:flex; flex-direction:column; align-items:center; gap:8px; font-size:17px; font-weight:700; flex:1; text-align:center; }
.control-guide b { display:grid; place-items:center; width:43px; height:43px; background:#e4ebd6; border-radius:50%; font-size:24px; }
.game-detail .detail-note { font-size:17px; margin-bottom:20px; }
.game-detail .btn { width:100%; }
.score-row { display:flex; align-items:center; gap:18px; border-bottom:1px solid var(--line); padding:12px 0; }
.score-row img { width:66px; height:48px; border-radius:7px; object-fit:cover; }
.score-row>div { flex:1; }
.score-row strong { display:block; font-size:20px; }
.score-row small { font-size:16px; color:var(--muted); }
.score-row>span { max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:20px; font-weight:700; }
.score-pages { display:flex; align-items:center; justify-content:space-between; gap:14px; margin-top:20px; font-size:18px; }
.empty-score { text-align:center; padding:30px; font-size:48px; color:#97ab70; }
.empty-score h3 { font-size:28px; color:var(--ink); margin:12px 0; }
.setting-row { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:16px 0; border-bottom:1px solid var(--line); }
.setting-row span { flex:1; }
.setting-row strong { display:block; font-size:21px; }
.setting-row small { display:block; color:var(--muted); font-size:17px; line-height:1.5; margin-top:5px; }
.setting-row input { width:26px; height:26px; accent-color:#5f7b37; }
.settings-tools { margin-top:20px; display:flex; gap:14px; }
.capability-list { display:flex; flex-direction:column; gap:15px; padding:18px 0; }
.capability-list span { display:flex; justify-content:space-between; font-size:20px; }
.settings-footnote { font-size:17px!important; margin-top:20px; }
/* Every game is a child of the engine stage, never of the browser viewport. */
#game-screen { position:absolute; inset:0; display:grid; grid-template-rows:64px minmax(0,1fr); background:#13281f; z-index:20; overflow:clip; }
.game-topbar { display:flex; align-items:center; justify-content:space-between; padding:0 20px; color:#f4f7e9; gap:16px; }
.game-topbar .btn { font-size:18px; min-height:42px; padding:8px 14px; border-color:#64795c; }
.game-topbar .icon-btn { border-color:#64795c; }
.game-topbar .icon-btn:hover { background:#365340; }
.game-topbar strong { font-size:24px; }
.game-stage { position:relative; min-height:0; overflow:clip; contain:strict; }
#game-canvas,#game-hud { position:absolute; inset:0; width:100%; height:100%; display:block; }
#game-hud { pointer-events:none; }
.game-overlay { position:absolute; inset:0; display:grid; place-items:center; z-index:10; background:#11231dc7; padding:20px; overflow:clip; }
.overlay-card { width:580px; max-width:100%; padding:28px; border-radius:20px; background:#f7f6e8; text-align:center; max-height:100%; overflow:clip; }
.overlay-card h2 { font-size:38px; margin:10px 0; overflow-wrap:anywhere; }
.overlay-card p { font-size:20px; color:#657053; margin:16px 0 22px; }
.overlay-card>.btn { margin:5px; }
.winner-symbol { font-size:46px; line-height:1; }
.result-list { margin:20px 0; text-align:start; }
.result-list>div { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid #dfe4d4; font-size:21px; }
.result-place { color:#647451; font-size:20px; }
.result-dot { width:12px; height:12px; border-radius:50%; flex-shrink:0; }
.result-list strong { flex:1; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.result-list>div>span:last-child { font-size:18px; color:#596b46; }
.result-buttons { display:flex; justify-content:center; gap:12px; }
.tiny-spinner { width:28px; height:28px; margin:10px auto; border:3px solid #8ca66555; border-top-color:#839e4c; border-radius:50%; animation:spin 1s linear infinite; }
@keyframes spin { to { transform:rotate(360deg); } }
.practice-wrap { position:absolute; left:16px; bottom:18px; z-index:5; pointer-events:none; }
.practice-wrap>* { pointer-events:auto; }
.practice-size { display:block; background:#17382ff0; color:#eaf4d9; padding:9px 12px; border-radius:7px; font-size:16px; margin-bottom:8px; }
.practice-pad { width:430px; height:174px; display:grid; grid-template-columns:150px minmax(0,1fr) 145px; align-items:center; gap:12px; padding:10px; background:#142d27e6; border:1px solid #81956d; border-radius:16px; color:#fff; touch-action:none; direction:ltr; }
.practice-pad .pad-center { display:none; }
.practice-pad .control-stick { width:140px; height:140px; grid-column:1; }
.practice-pad .action-grid { grid-column:3; gap:9px; }
.practice-pad .action { height:64px; width:64px; }
.practice-pad .action-symbol { font-size:22px; }
.practice-pad .action-label { font-size:14px; }
.practice-pad .stick-caption { display:none; }
/* Phone text is RTL. Physical steering and action positions retain their sides. */
.phone-mode { color:#f5f8e9; }
.phone-mode #viewport { border-color:#73935966; }
.phone-join { width:100%; height:100%; padding:32px; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:auto 1fr auto; gap:16px 36px; align-items:center; }
.phone-join .wordmark { grid-column:1/-1; color:var(--lime); }
.join-intro h1 { font-size:42px; line-height:1.2; margin:12px 0; }
.join-intro p { font-size:21px; color:#b0c6a7; }
.join-intro .eyebrow { color:#b9d39e; }
.phone-join form { display:flex; flex-direction:column; gap:14px; }
.phone-join label { font-size:20px; color:#d3e0c5; }
.phone-join input { background:#274438; border:1px solid #758e63; border-radius:10px; padding:14px; color:white; font-size:24px; width:100%; }
.phone-join .primary { background:var(--lime); color:#173326; }
.phone-join .btn { min-height:52px; font-size:22px; }
.join-note { font-size:17px; color:#a2bb91; grid-column:1/-1; }
.phone-shell { position:relative; height:100%; width:100%; display:flex; flex-direction:column; overflow:clip; touch-action:manipulation; }
.phone-header { height:56px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 20px; border-bottom:1px solid #3e5746; gap:15px; }
.phone-header>div:first-child { display:flex; gap:10px; align-items:center; }
.phone-seat { font-size:17px; color:var(--player); }
.phone-player { font-size:22px; max-width:200px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.phone-connection { font-size:16px; color:#adc399; }
.phone-tools { display:flex; gap:8px; }
.phone-tools button { color:#dceaca; background:#2b4839; width:38px; height:38px; border-radius:50%; font-size:24px; }
.phone-waiting { flex:1; min-height:0; overflow:clip; text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:10px; gap:8px; }
.phone-waiting h2 { font-size:29px; color:#f5f8e9; }
.phone-waiting p { font-size:18px; color:#b2cba7; }
.phone-ready-star { color:var(--player); font-size:27px; line-height:1; }
.phone-game-options { display:flex; gap:14px; margin:2px 0; }
.phone-game-options button { padding:5px; background:#2b473a; border:2px solid transparent; border-radius:10px; color:#e5eedc; width:166px; overflow:clip; }
.phone-game-options button.selected { border-color:var(--lime); }
.phone-game-options img { display:block; width:100%; height:67px; object-fit:cover; border-radius:6px; }
.phone-game-options span { display:block; font-size:18px; font-weight:700; padding:6px 0; }
.phone-waiting .btn { padding:9px 24px; min-height:44px; font-size:20px; }
.phone-waiting .muted { font-size:18px; color:#b0c49f; }
.phone-result-actions { display:flex; gap:14px; }
.phone-result-actions .ghost { color:#d6e2c8; border-color:#6c855f; }
.phone-footer { height:40px; flex-shrink:0; display:flex; align-items:center; justify-content:space-between; padding:0 20px; font-size:16px; color:#a6be98; gap:10px; }
.phone-footer small { font-size:16px; }
.phone-footer button { padding:6px 10px; background:transparent; border:1px solid #647a56; border-radius:6px; color:#c0d9ac; font-size:16px; max-width:52%; }
.touch-pad { display:grid; grid-template-columns:240px minmax(0,1fr) 240px; gap:20px; align-items:center; flex:1; min-height:0; padding:10px 30px; touch-action:none; user-select:none; -webkit-user-select:none; direction:ltr; }
.control-stick { width:224px; height:224px; position:relative; touch-action:none; display:grid; place-items:center; justify-self:center; }
.stick-rings { width:88%; height:88%; border:1px solid #8aab6755; border-radius:50%; background:radial-gradient(circle,#35544066 40%,#142b24 41%,#142b24 60%,#43614833 61%,#264231 62%); position:relative; display:grid; place-items:center; }
.stick-knob { position:relative; width:42%; height:42%; border-radius:50%; background:linear-gradient(145deg,#79916b,#3b573d); box-shadow:0 5px 0 #10251a,0 8px 22px #0006,inset 0 1px 0 #a5b899; z-index:2; will-change:transform; pointer-events:none; }
.stick-knob:after { content:''; position:absolute; inset:17%; border:1px solid #819d7244; border-radius:50%; }
.stick-arrow { position:absolute; color:#9ab488; font-size:22px; line-height:1; pointer-events:none; }
.north { top:7%; left:calc(50% - 6px); }.south { bottom:7%; left:calc(50% - 6px); }.west { left:7%; top:calc(50% - 10px); }.east { right:7%; top:calc(50% - 10px); }
.stick-caption { position:absolute; bottom:-5px; left:0; right:0; text-align:center; font-size:17px; color:#adc294; pointer-events:none; direction:rtl; }
.pad-center { direction:rtl; text-align:center; display:flex; flex-direction:column; align-items:center; gap:12px; pointer-events:none; }
.controller-game { font-size:20px; font-weight:700; color:#b7caa7; }
.controller-stat { font-size:25px; line-height:1.25; color:var(--player); }
.controller-hint { font-size:18px; line-height:1.4; color:#abc29c; }
.item-display { font-size:36px; height:40px; }
.action-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:14px; justify-self:center; touch-action:none; direction:ltr; }
.action { width:96px; height:96px; border-radius:50%; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2px; touch-action:none; user-select:none; -webkit-user-select:none; background:#3b5740; border:2px solid #7b955e; box-shadow:0 5px 0 #0a2016; color:#dceac6; direction:rtl; }
.action-a { background:var(--player); border-color:var(--player); color:#17291e; }
.action-b { background:#d5ed9f; color:#173326; border-color:#d5ed9f; }
.action-c,.action-d { background:#244335; }
.action.pressed { transform:translateY(4px); box-shadow:0 1px 0 #0a2016; }
.action-symbol { font-size:30px; line-height:1.1; pointer-events:none; }
.action-label { font-size:18px; font-weight:700; pointer-events:none; }
.has-item { box-shadow:0 5px 0 #0a2016,0 0 20px #d2f77888; }
.rotate-note { display:none; position:absolute; inset:0; background:#142b24fa; z-index:99; flex-direction:column; align-items:center; justify-content:center; padding:30px; text-align:center; gap:18px; }
.rotate-note>span { font-size:90px; color:var(--lime); }
.rotate-note>strong { font-size:34px; }
.rotate-note p { font-size:22px; color:#b8d1a6; }
.rotate-note button { margin-top:20px; background:none; border:1px solid #88a677; border-radius:8px; color:#c9e6b0; padding:12px; font-size:20px; }
.rotate-note.dismissed { display:none!important; }
/* Portrait screens get a different complete composition, not a scroll column. */
:root[data-layout=portrait] .topbar { gap:12px; padding:0 20px; }
:root[data-layout=portrait] .host-label { display:none; }
:root[data-layout=portrait] .topbar nav { gap:14px; }
:root[data-layout=portrait] .wordmark { font-size:20px; }
:root[data-layout=portrait] .arcade-lobby { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 236px; gap:18px; padding:20px; }
:root[data-layout=portrait] .game-selection { grid-template-rows:72px minmax(0,1fr) 24px; gap:12px; }
:root[data-layout=portrait] .game-grid { grid-template-columns:1fr; grid-template-rows:repeat(3,minmax(0,1fr)); gap:10px; }
:root[data-layout=portrait] .game-card { grid-template-columns:180px minmax(0,1fr); grid-template-rows:1fr; }
:root[data-layout=portrait] .card-body { padding:10px 16px; gap:4px; }
:root[data-layout=portrait] .card-meta { display:none; }
:root[data-layout=portrait] .card-body h3 { font-size:26px; }
:root[data-layout=portrait] .card-body>p { font-size:16px; }
:root[data-layout=portrait] .card-footer { padding-top:5px; }
:root[data-layout=portrait] .play-button { min-height:34px; padding:5px 10px; }
:root[data-layout=portrait] .join-panel { position:relative; padding:18px; gap:10px; }
:root[data-layout=portrait] .join-panel-top { display:grid; grid-template-columns:1fr 180px; text-align:start; }
:root[data-layout=portrait] .join-panel-top>div { align-self:start; }
:root[data-layout=portrait] .join-panel-top .room-code { justify-content:flex-start; margin-top:8px; }
:root[data-layout=portrait] .qr-button canvas { width:152px; height:152px; }
:root[data-layout=portrait] .join-panel h2 { font-size:28px; margin:0 0 6px; }
:root[data-layout=portrait] .join-panel p { font-size:16px; line-height:1.3; }
:root[data-layout=portrait] .join-panel-top .room-code { margin-top:2px; }
:root[data-layout=portrait] .seats { position:absolute; right:18px; bottom:56px; width:calc(100% - 232px); grid-template-columns:repeat(4,minmax(0,1fr)); gap:5px; }
:root[data-layout=portrait] .seat { padding:8px 2px; font-size:13px; }
:root[data-layout=portrait] .seat-avatar { display:none; }
:root[data-layout=portrait] .join-bottom { position:absolute; bottom:12px; right:18px; flex-direction:row; gap:16px; font-size:15px; }
:root[data-layout=portrait] .join-bottom button { font-size:15px; }
:root[data-layout=portrait] .game-detail { grid-template-columns:1fr; gap:20px; }
:root[data-layout=portrait] .game-detail>img { height:190px; }
:root[data-layout=portrait] .phone-join { display:flex; flex-direction:column; justify-content:center; align-items:stretch; gap:30px; }
:root[data-layout=portrait] .phone-join .wordmark { font-size:25px; }
:root[data-layout=portrait] .join-intro h1 { font-size:42px; }
:root[data-layout=portrait] .phone-shell .rotate-note { display:flex; }
:root[data-layout=portrait] .phone-header { padding:0 12px; gap:8px; height:70px; flex-wrap:wrap; }
:root[data-layout=portrait] .phone-seat { display:none; }
:root[data-layout=portrait] .phone-player { max-width:170px; }
:root[data-layout=portrait] .phone-connection { font-size:14px; }
:root[data-layout=portrait] .phone-tools { gap:5px; }
:root[data-layout=portrait] .phone-tools button { width:31px; height:31px; }
:root[data-layout=portrait] .phone-game-options { flex-direction:column; gap:12px; }
:root[data-layout=portrait] .phone-game-options button { width:270px; display:flex; align-items:center; gap:12px; }
:root[data-layout=portrait] .phone-game-options img { width:96px; height:65px; }
:root[data-layout=portrait] .phone-waiting { gap:18px; }
:root[data-layout=portrait] .phone-footer { padding:0 12px; height:72px; flex-wrap:wrap; justify-content:center; }
:root[data-layout=portrait] .phone-footer small { display:none; }
:root[data-layout=portrait] .phone-result-actions { flex-direction:column; }
:root[data-layout=portrait] .touch-pad { grid-template-columns:1fr 1fr; grid-template-rows:minmax(0,1fr) 210px; padding:18px 10px; gap:15px; }
:root[data-layout=portrait] .touch-pad .pad-center { grid-column:1/-1; grid-row:1; }
:root[data-layout=portrait] .touch-pad .control-stick { width:185px; height:185px; }
:root[data-layout=portrait] .touch-pad .action { width:81px; height:81px; }
:root[data-layout=portrait] .touch-pad .action-grid { gap:12px; }
@media(prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.01ms!important; transition-duration:.01ms!important; } }