:root{--forest-950:#082a24;--forest-900:#0d372e;--forest-800:#14503f;--forest-700:#1d654e;--aqua:#5fd4ca;--aqua-deep:#178f8b;--parchment:#eee3c9;--cream:#fbf6e9;--sand:#d8c8a8;--ink:#24332e;--muted:#6c7a70;--line:#c9c4ae;--live:#75d18e;--screen-h:clamp(290px,calc((100dvh - 130px)/2),440px)}
html:has(.play-page){height:100%;overflow:hidden}
body.play-page{height:100%;margin:0;overflow:hidden;color:var(--ink);font-family:Inter,ui-rounded,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;background:radial-gradient(circle at 18% 8%,#28705a 0,transparent 35%),radial-gradient(circle at 80% 100%,#17645a66 0,transparent 34%),linear-gradient(145deg,var(--forest-950),#103e34 58%,#0b302a)}
.play-page *{box-sizing:border-box}.console-header{height:54px;padding:0 clamp(15px,2vw,30px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-bottom:1px solid #70c8ba42;background:#082a24e8;backdrop-filter:blur(16px);box-shadow:0 3px 18px #03171355;position:relative;z-index:10;color:var(--parchment)}
.surface-brand{font-size:1.3rem;font-weight:900;letter-spacing:-.06em;text-decoration:none;color:var(--cream)}.surface-brand span{color:var(--aqua)}.surface-title{text-align:center;display:flex;align-items:baseline;gap:10px}.surface-title strong{font-size:.95rem}.surface-title span{font-size:.7rem;color:#b7c9bd}.header-actions{justify-self:end;display:flex;align-items:center;gap:10px}.header-live{height:30px;display:flex;align-items:center;gap:7px;padding:0 11px;border:1px solid #acc7bb44;border-radius:999px;background:#fff1;color:#b7c9bd;font-size:.68rem;font-weight:850;letter-spacing:.09em}.header-live i,.status-dot{width:8px;height:8px;border-radius:50%;background:#92a49a;box-shadow:0 0 0 3px #92a49a20}.header-live.live i,.connection-state.online .status-dot,.status-dot.ready{background:var(--live);box-shadow:0 0 0 3px #75d18e28}.header-live.live{color:#c7f5d3;border-color:#75d18e66;background:#75d18e10}
.play-page button,.play-page .surface-button{font-family:inherit}.icon-button,.dialog-close{width:34px;height:34px;border:1px solid #b7cec344;border-radius:50%;padding:0;background:#fff1;color:#d9e8df;box-shadow:none;display:grid;place-items:center;font-size:1rem;cursor:pointer}.icon-button:hover{background:#fff2}.icon-button.muted{color:#ffcf9b;background:#ae5c322e;border-color:#efb47b66}.header-tool{height:30px;padding:0 11px;border:1px solid #acc7bb44;border-radius:999px;background:#fff1;color:#d5e4dc;box-shadow:none;display:flex;align-items:center;gap:6px;font-size:.68rem;font-weight:800;cursor:pointer}.header-tool:hover,.header-tool[aria-expanded=true]{background:#fff2;border-color:#5fd4ca88}.tool-icon{font-size:.82rem}.controls-popover{position:fixed;z-index:40;right:68px;top:60px;width:min(360px,calc(100vw - 24px));max-height:calc(100dvh - 72px);overflow:auto;padding:16px;border:1px solid #61c8ba88;border-radius:18px;background:linear-gradient(155deg,#fffaf0,#e8dcc1);color:var(--ink);box-shadow:0 18px 50px #001a1477}.controls-popover[hidden]{display:none}.controls-popover>header{display:flex;align-items:flex-start;justify-content:space-between}.controls-popover>header strong{display:block;color:#173d32;font-size:1.25rem;letter-spacing:-.035em}.controls-popover>p{margin:9px 0 12px;color:#66776e;font-size:.72rem;line-height:1.5}.popover-close{width:28px;height:28px;padding:0;border:1px solid #b6aa91;border-radius:50%;background:#fff9ec;color:#3f564c;box-shadow:none;font-size:1rem;cursor:pointer}.control-mappings{display:grid;grid-template-columns:1fr 1fr;gap:6px}.control-map-row{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:6px;padding:5px 6px;border:1px solid #d8cdb5;border-radius:9px;background:#fff9ec}.control-map-row>span{font-size:.68rem;font-weight:900;color:#325044}.control-map-row select{min-width:0;width:100%;border:1px solid #c8bda7;border-radius:7px;background:#fffef8;color:#30483e;padding:5px;font:700 .65rem inherit}.controls-popover footer{display:flex;justify-content:flex-end;margin-top:12px}
.console-app{height:calc(100dvh - 54px);padding:9px clamp(10px,1.25vw,22px) 11px;display:grid;grid-template-columns:minmax(580px,1fr) clamp(370px,30vw,455px);gap:clamp(10px,1.2vw,18px);overflow:hidden}.game-surface,.companion-surface{min-height:0;border-radius:22px;overflow:hidden;box-shadow:0 16px 42px #021a164a}
.game-surface{padding:8px 14px 10px;display:grid;grid-template-rows:28px minmax(0,1fr);gap:3px;border:1px solid #6ccabc3d;background:radial-gradient(circle at 50% 36%,#266553 0,#16493b 45%,#0c322b 100%);box-shadow:inset 0 1px #8be0d13b,0 16px 42px #021a1659}.shoulder-row{display:grid;grid-template-columns:1fr;align-items:center}.shoulder{display:none}.device-status{justify-self:center;display:flex;align-items:center;gap:8px;color:#b8cbbf;font-size:.69rem;font-weight:750}
.screen-stack{min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px}.screen-unit{display:grid;grid-template-columns:32px auto;align-items:center;gap:7px}.screen-name{writing-mode:vertical-rl;transform:rotate(180deg);text-transform:uppercase;letter-spacing:.16em;font-size:.55rem;font-weight:850;color:#8fb7aa}.console-screen{height:var(--screen-h);aspect-ratio:4/3;padding:6px;border-radius:11px;background:#101816;border:1px solid #76c7b755;box-shadow:inset 0 0 0 3px #030706,0 5px 18px #00110d85;overflow:hidden}.console-screen canvas{width:100%;height:100%;display:block;background:#030504;image-rendering:pixelated;touch-action:none}
.controls-row,[data-game-controls],.controls-row *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;touch-action:none}.controls-row{display:none}.control-button,.system-button{appearance:none;border:1px solid #9db2a8;background:linear-gradient(180deg,#fffaf0,#d7ccb2);color:#344b41;box-shadow:0 3px 5px #06271f44,inset 0 1px #fff;border-radius:999px;font-weight:850;cursor:pointer;transition:transform .08s ease,box-shadow .08s ease}.control-button:active,.control-button.pressed,.system-button:active,.system-button.pressed{transform:translateY(2px) scale(.97);box-shadow:0 1px 2px #06271f33}.control-button:focus-visible,.system-button:focus-visible,.virtual-stick:focus-visible,.detail-tabs button:focus-visible{outline:3px solid #5fd4ca88;outline-offset:2px}.stick-zone{justify-self:start;display:flex;align-items:center;gap:10px;color:#bad0c4;font-size:.57rem;font-weight:900;letter-spacing:.12em}.virtual-stick{position:relative;width:82px;height:82px;border-radius:50%;background:radial-gradient(circle,#e8dfca 0 28%,#b8c9bd 29% 48%,#f7efdd 49% 64%,#88a69a 65% 67%,#dce5d9 68%);box-shadow:inset 0 3px 8px #092e2555,0 3px 8px #061d1855;cursor:grab}.virtual-stick.active{cursor:grabbing}.stick-knob{position:absolute;left:20px;top:20px;width:42px;height:42px;border-radius:50%;background:linear-gradient(145deg,#fff8e8,#bfcfc3);border:1px solid #829f92;box-shadow:0 5px 10px #021a1666,inset 0 2px #fff;will-change:transform;pointer-events:none;transition:transform .12s ease}.virtual-stick.active .stick-knob{transition:none}.system-buttons{display:flex;gap:7px;align-self:end;margin-bottom:8px}.system-button{height:24px;min-width:56px;padding:0 10px;font-size:.55rem;letter-spacing:.07em}.face-buttons{justify-self:end;width:118px;height:82px;position:relative}.face-buttons .control-button{position:absolute;width:39px;height:39px;padding:0;color:#eafffa;border-color:#1e9c94;background:linear-gradient(145deg,#64ddd1,#168f88);box-shadow:0 4px 7px #062e2955,inset 0 1px #c8fff9}.face-x{left:39px;top:0}.face-y{left:0;top:31px}.face-a{right:0;top:31px}.face-b{left:39px;bottom:0}
.companion-surface{padding:15px;display:grid;grid-template-rows:auto auto auto minmax(0,1fr);gap:10px;border:1px solid #e6d8ba;background:linear-gradient(165deg,#fffaf0,#eee2c8 100%);color:var(--ink)}.section-kicker{font-size:.63rem;font-weight:900;letter-spacing:.16em;color:#637c70;margin-bottom:7px}.now-card{padding:2px 3px 10px;border-bottom:1px solid #d8cdb4}.class-line{display:flex;align-items:center;justify-content:space-between;gap:10px}.class-line>strong{font-size:clamp(1.3rem,2vw,1.85rem);letter-spacing:-.04em;color:#173d32}.soft-pill{font-size:.58rem;font-weight:900;letter-spacing:.1em;color:#66786f;background:#ded8c6;padding:5px 8px;border-radius:999px}.soft-pill.live{color:#1e6a43;background:#d7ead6}.now-metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:7px;margin-top:10px}.now-metrics div{min-width:0;padding:8px 7px;border:1px solid #d8cdb5;border-radius:10px;background:#fffaf0}.now-metrics span{display:block;color:#78877f;font-size:.55rem;font-weight:900;letter-spacing:.08em}.now-metrics strong{display:block;margin-top:3px;font-size:.78rem;white-space:nowrap}
.acquisition-card{position:relative;padding:13px 15px;border:1px solid #63c9be;border-radius:16px;background:linear-gradient(145deg,#e9faf4,#cdeee5);box-shadow:0 6px 18px #167e7020;overflow:hidden}.acquisition-card:after{content:"";position:absolute;width:100px;height:100px;border-radius:50%;right:-55px;top:-58px;background:#5fd4ca35}.acquisition-card.empty{border-color:#d4cbb6;background:#f6efdf;box-shadow:none}.acquisition-items{display:grid;gap:3px;position:relative;z-index:1}.acquisition-items span{font-size:1.12rem;font-weight:850;letter-spacing:-.025em}.acquisition-gold{color:#087d75;font-size:1rem;font-weight:900;margin-top:3px}.acquisition-age{color:#6b7b73;font-size:.68rem;margin-top:6px}.recent-strip{min-height:45px;padding:1px 3px}.recent-list{display:flex;gap:6px;overflow:hidden}.recent-chip{max-width:48%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:6px 9px;border:1px solid #d8cdb5;border-radius:999px;background:#fff9ec;color:#53665d;font-size:.67rem;font-weight:750}.muted-empty{color:#819088;font-size:.75rem;margin:0}
.detail-area{min-height:0;display:grid;grid-template-rows:auto minmax(0,1fr);border-top:1px solid #d8cdb4;padding-top:9px}.detail-tabs{display:flex;gap:3px;overflow-x:auto;padding-bottom:7px;scrollbar-width:none}.detail-tabs::-webkit-scrollbar{display:none}.detail-tabs button{flex:0 0 auto;appearance:none;border:0;border-radius:999px;background:transparent;color:#607369;padding:6px 9px;font-size:.64rem;font-weight:850;box-shadow:none;cursor:pointer}.detail-tabs button[aria-selected=true]{background:#ccece4;color:#116f69}.detail-scroll{min-height:0;overflow:auto;padding:2px}.detail-panel{display:none}.detail-panel.active{display:block}.detail-list{display:grid;gap:5px}.detail-row{display:flex;justify-content:space-between;gap:10px;padding:6px 8px;border-radius:8px;background:#fff9ec;font-size:.7rem}.detail-row span:last-child{color:#687a70;text-align:right}.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}.stat-tile{padding:9px;border:1px solid #d8cdb5;border-radius:10px;text-align:center;background:#fff9ec}.stat-tile span{display:block;color:#78877f;font-size:.58rem;font-weight:900}.stat-tile strong{font-size:1rem}.developer-actions{display:flex;gap:6px;margin-bottom:7px}.surface-button{appearance:none;border:1px solid #aebcaf;border-radius:10px;background:linear-gradient(#fffaf0,#ddd2ba);box-shadow:0 2px 4px #092e2522;color:#30483e;padding:9px 12px;text-decoration:none;font-weight:850;font-size:.75rem;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}.surface-button.primary{color:#effffa;border-color:#147f78;background:linear-gradient(#48c9be,#168f87);box-shadow:0 3px 7px #0c635b42}.surface-button.small{padding:6px 9px;font-size:.65rem}.developer-summary{white-space:pre-wrap;font:600 .67rem/1.45 ui-monospace,monospace;color:#52665c}.detail-panel pre{max-height:180px;overflow:auto;margin:7px 0 0;padding:9px;border-radius:8px;background:#082a24;color:#d8f5eb;font:10px/1.45 ui-monospace,monospace}
.setup-dialog{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:14px;border:0;background:#06241ed9;backdrop-filter:blur(14px);z-index:50;place-items:center}.setup-dialog[open]{display:grid}.setup-sheet{width:min(760px,calc(100vw - 28px));max-height:calc(100dvh - 28px);overflow:auto;border:1px solid #68c8b8;border-radius:24px;background:linear-gradient(150deg,#fffaf0,#eadfc6);box-shadow:0 24px 70px #00140f88;padding:20px}.setup-sheet>header{display:flex;align-items:start;justify-content:space-between}.setup-sheet .dialog-close{color:#28483d;border-color:#9eb8ac;background:#fff8e9}.setup-sheet h1{font-size:1.7rem;line-height:1;margin:0 0 16px;letter-spacing:-.05em;color:#173d32}.setup-sheet h2{font-size:.9rem;margin:0 0 12px}.setup-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.setup-grid section{padding:16px;border:1px solid #d4c8ae;border-radius:16px;background:#fff9ec}.setup-grid label{display:block;margin:9px 0 5px;color:#53685d;font-size:.7rem;font-weight:850}.setup-grid input{width:100%;border:1px solid #c8bda7;border-radius:9px;background:#fffef8;padding:9px;color:#293b34;font:600 .76rem inherit}.setup-grid p,.setup-sheet footer{color:#6d7d74;font-size:.68rem;line-height:1.45}.setup-actions{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px}.setup-status,.connection-state{margin-top:10px;padding:9px;border-radius:10px;background:#e3ddca;color:#52655c;font-size:.69rem;font-weight:750}.connection-state{display:flex;align-items:center;gap:8px}.connection-state.online{background:#d8ecd8;color:#226f46}.connection-state.error{background:#f5d8cd;color:#943e35}.setup-sheet footer{text-align:center;padding-top:14px}
@media(max-width:1100px){.console-app{grid-template-columns:minmax(560px,1fr) 350px}.companion-surface{padding:12px}.now-metrics{grid-template-columns:repeat(2,1fr)}.recent-strip{display:none}}
@media(max-width:1023px){:root{--screen-h:290px}html:has(.play-page),body.play-page{height:auto;min-height:100%;overflow:auto}.console-header{position:sticky;top:0;grid-template-columns:1fr auto}.surface-title{display:none}.console-app{height:auto;min-height:calc(100dvh - 54px);display:flex;flex-direction:column;padding:8px;overflow:visible}.game-surface{min-height:calc(100dvh - 70px);grid-template-rows:34px auto 96px;border-radius:18px}.shoulder-row{grid-template-columns:72px 1fr 72px;gap:8px}.shoulder{display:block;width:72px;height:29px;padding:0;font-size:.75rem}.shoulder:last-child{justify-self:end}.screen-stack{padding:4px 0}.console-screen{width:min(74vw,390px);height:auto;aspect-ratio:4/3}.controls-row{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;max-width:590px;width:100%;margin:auto}.companion-surface{min-height:470px;border-radius:18px;grid-template-rows:auto auto auto minmax(170px,1fr)}.companion-surface .acquisition-card{order:-1}.recent-strip{display:block}.setup-grid{grid-template-columns:1fr}.setup-sheet{padding:16px}.header-live{padding:0 9px}}
@media(max-width:520px){.console-header{height:48px}.header-actions{gap:5px}.header-tool{width:34px;height:34px;padding:0;justify-content:center}.tool-label{display:none}.icon-button{width:32px;height:32px}.controls-popover{right:7px;top:53px;width:calc(100vw - 14px)}.console-app{min-height:calc(100dvh - 48px)}.game-surface{padding:7px;min-height:auto;grid-template-rows:32px auto 91px}.shoulder-row{grid-template-columns:64px 1fr 64px}.shoulder{width:64px;height:28px}.device-status{font-size:.62rem}.screen-unit{grid-template-columns:18px auto;gap:4px}.screen-name{font-size:.48rem}.console-screen{width:min(82vw,350px);padding:4px}.controls-row{gap:4px}.virtual-stick{width:76px;height:76px}.stick-knob{left:19px;top:19px;width:38px;height:38px}.stick-zone>span{display:none}.face-buttons{width:106px;height:78px}.face-buttons .control-button{width:37px;height:37px}.face-x,.face-b{left:35px}.system-buttons{gap:3px;flex-direction:column;margin-bottom:6px}.system-button{height:23px;min-width:52px}.companion-surface{padding:12px}.now-metrics{grid-template-columns:repeat(4,1fr);gap:4px}.now-metrics div{padding:6px 4px}.now-metrics strong{font-size:.7rem}.detail-tabs button{padding:6px 8px}.setup-dialog{padding:7px}.setup-sheet{width:calc(100vw - 14px);max-height:calc(100dvh - 14px);border-radius:18px}.setup-grid{gap:10px}.setup-grid section{padding:13px}}

/* v0.3.4 Soma-native keyboard legend */
.control-mappings{display:grid;grid-template-columns:1fr;gap:8px}.control-help-group{padding:9px 10px;border:1px solid #d8cdb5;border-radius:11px;background:#fff9ec}.control-help-group h2{margin:0 0 7px;color:#5d776b;font-size:.58rem;letter-spacing:.13em;text-transform:uppercase}.control-help-row,.control-help-grid>div{display:flex;align-items:center;gap:8px;color:#30483e;font-size:.7rem;font-weight:800}.control-help-grid{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}.control-help-grid.system{grid-template-columns:repeat(3,1fr)}.control-help-grid>div span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.controls-popover kbd{min-width:25px;height:23px;padding:0 6px;display:inline-grid;place-items:center;border:1px solid #b5aa94;border-bottom-width:3px;border-radius:6px;background:#fffef8;color:#173d32;font:900 .66rem inherit;box-shadow:0 1px 0 #fff}.keycaps{display:flex;gap:3px}.keycaps kbd{min-width:22px;padding:0 4px}
@media(max-width:1023px){#controlsToggle,#controlsPanel{display:none!important}}
@media(prefers-reduced-motion:reduce){.control-button,.system-button,.stick-knob{transition:none}}
.profile-card{display:grid;gap:.2rem;padding:.75rem .85rem;margin:.45rem 0 .75rem;border:1px solid rgba(18,83,70,.2);border-radius:12px;background:rgba(238,229,199,.45)}
.profile-card strong{color:#123f36}.profile-card span{font-size:.78rem;color:#61746c}.connection-state.connecting .status-dot{background:#74d8ca;box-shadow:0 0 0 4px rgba(116,216,202,.14)}