:root { font-family: Arial, Helvetica, sans-serif; color: #eee9dc; background: #0a0b09; font-synthesis: none; --line: #2a2c24; --muted: #929587; --accent: #b55040; }
* { box-sizing: border-box; }
body { margin: 0; }
main { width: min(1160px, calc(100% - 64px)); margin: 0 auto; }
.masthead { padding: 34px 0 27px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.identity { display: flex; align-items: baseline; gap: 22px; }
.wordmark { font-size: 34px; font-weight: 900; letter-spacing: -1.8px; }
.point { color: var(--accent); }
.studio, .edition, .eyebrow, h2, footer > span { font: 10px ui-monospace, monospace; letter-spacing: 1.4px; color: var(--muted); }
.edition { display: flex; align-items: center; gap: 13px; line-height: 1.5; }
.edition-number { font: 38px Arial, sans-serif; font-weight: 700; color: #5f6555; letter-spacing: -2px; }
.probe-heading { display: flex; justify-content: space-between; align-items: end; padding: 31px 0 23px; gap: 20px; }
.eyebrow { margin: 0 0 11px; color: #b37d64; }
h1 { margin: 0; font-size: clamp(22px, 3.2vw, 36px); letter-spacing: -1.3px; font-weight: 600; }
.running { font: 11px ui-monospace, monospace; color: #b7bcaa; padding-bottom: 5px; text-align: right; }
.running::before { content: ''; display: inline-block; width: 5px; height: 5px; background: #99a782; margin-right: 8px; vertical-align: middle; }
[data-paused="true"] .running::before { background: #d5ad67; }
.arena-wrap { border: 1px solid var(--line); background: #10110f; }
canvas { display: block; width: 100%; height: auto; outline-offset: 4px; }
#arena { aspect-ratio: 16 / 9; }
canvas:focus-visible { outline: 2px solid #b37d64; }
.readouts { border: 1px solid var(--line); border-top: 0; display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; }
.readouts > div { padding: 18px 22px; display: flex; justify-content: space-between; align-items: center; border-right: 1px solid var(--line); gap: 15px; }
.readouts > div:last-child { border: 0; }
.readouts span { font: 11px ui-monospace, monospace; color: var(--muted); }
.readouts output { font: 25px ui-monospace, monospace; color: #e6e1d4; }
.readouts .state-readout output { font-size: 12px; color: #b9bcae; }
.desk { display: grid; grid-template-columns: 2fr 1fr; gap: 48px; padding: 27px 0; border-bottom: 1px solid var(--line); }
h2 { font-size: 10px; margin: 0 0 18px; font-weight: 400; }
dl { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px 16px; margin: 0; }
dt { display: flex; align-items: center; gap: 5px; height: 30px; }
kbd { font: 11px ui-monospace, monospace; display: inline-flex; min-width: 29px; padding: 7px; justify-content: center; border: 1px solid #5c5f50; color: #eee9dc; }
small { color: var(--muted); font: 10px ui-monospace, monospace; margin-left: 4px; }
dd { margin: 10px 0 0; color: #b8bcab; font-size: 12px; }
.measurement-line { display: flex; justify-content: space-between; font: 12px ui-monospace, monospace; margin-bottom: 8px; }
.measurement > output, .measurement p { font: 10px ui-monospace, monospace; color: var(--muted); line-height: 1.5; margin: 5px 0 0; }
.tools { display: flex; gap: 10px; padding: 23px 0; }
button { border: 1px solid #535849; color: #d8d9ca; background: transparent; font: 11px ui-monospace, monospace; min-height: 44px; padding: 0 18px; cursor: pointer; }
button:hover { background: #20221b; border-color: #929587; }
button:focus-visible { outline: 2px solid #d5ad67; outline-offset: 3px; }
#pause { background: #e6e1d4; color: #171912; border-color: #e6e1d4; min-width: 112px; }
#export { margin-left: auto; color: var(--muted); }
footer { padding: 4px 0 30px; display: flex; gap: 45px; justify-content: space-between; }
footer p { font: 10px/1.7 ui-monospace, monospace; color: #848a77; margin: 0; max-width: 700px; }
footer > span { white-space: nowrap; font-size: 9px; padding-top: 4px; }
@media (max-width: 760px) { main { width: calc(100% - 32px); } .identity { display: block; } .studio { display: block; margin-top: 6px; } .edition-number { font-size: 30px; } .probe-heading { display: block; } .running { display: block; margin-top: 15px; text-align: left; } .desk { grid-template-columns: 1fr; gap: 28px; } dl { justify-content: space-between; gap: 10px; } .readouts { grid-template-columns: 1fr 1fr; } .readouts > div { padding: 12px; border-bottom: 1px solid var(--line); } .readouts > div:nth-child(2) { border-right: 0; } .readouts > div:nth-child(3), .readouts > div:last-child { border-bottom: 0; } .tools { flex-wrap: wrap; } #export { margin-left: 0; } footer { display: block; } footer > span { display: block; margin-top: 14px; } }

/* Gaming-Landingpage mit bestehendem Player */
a { color:inherit; } a:focus-visible { outline:2px solid #eee9dc; outline-offset:5px; }
.arcade-nav { min-height:90px; display:flex; align-items:center; gap:28px; border-bottom:1px solid var(--line); font:11px ui-monospace,monospace; }
.arcade-nav a { text-decoration:none; padding:14px 0; } .arcade-nav strong { color:#d9503d; } .arcade-nav nav { display:flex; gap:25px; margin-left:auto; }
.arcade-hero { padding-top:40px; background:radial-gradient(ellipse at 50% 40%,#2a1b15,transparent 65%); }
.hero-logo { max-width:1000px; margin:-15px auto; } .hero-logo svg { display:block; width:100%; height:auto; }
.hero-bottom { display:flex; justify-content:space-between; align-items:center; gap:24px; padding-bottom:40px; }
.hero-bottom p { color:#b8bcab; line-height:1.6; } .play-link { padding:23px 28px; background:#d24935; color:#100d09; text-decoration:none; font-weight:900; }
.play-link:hover { background:#ed604b; } .hero-strip { border-block:1px solid var(--line); padding:18px 0; display:flex; justify-content:space-between; gap:16px; font:10px ui-monospace,monospace; color:var(--muted); }
.player-label { padding-top:60px; font:11px ui-monospace,monospace; color:#d9503d; letter-spacing:1px; }
.next-game { border-block:1px solid var(--line); margin:45px 0 30px; padding:45px 0; background:linear-gradient(115deg,transparent,#171a12); }
.next-game h2 { color:#eee9dc; font:900 clamp(28px,4vw,48px)/1.05 Arial,sans-serif; letter-spacing:-1.5px; margin:20px 0; }
.next-game p:not(.eyebrow) { color:#b8bcab; font-size:14px; line-height:1.6; } .next-game > span { display:block; color:#ad8067; font:10px ui-monospace,monospace; margin-top:24px; }
@media(max-width:760px) { .arcade-nav { min-height:76px; flex-wrap:wrap; gap:8px 20px; padding:16px 0; } .arcade-nav nav { gap:14px; } .arcade-nav > span { display:none; } .hero-logo { margin:0 -12px; } .hero-bottom { flex-direction:column; align-items:start; } .hero-strip { flex-wrap:wrap; font-size:9px; } .player-label { padding-top:36px; font-size:9px; } }

.figure-picker { display:flex; flex-wrap:wrap; align-items:center; gap:16px; padding-top:24px; font:11px ui-monospace,monospace; color:var(--muted); }
.figure-picker select { min-height:44px; padding:10px 14px; border:1px solid #535849; background:#171912; color:#eee9dc; font:13px ui-monospace,monospace; }
.figure-picker select:focus-visible { outline:2px solid #d5ad67; outline-offset:3px; }

.figure-picker select { max-width:100%; }
button:disabled { opacity:.45; cursor:default; }

.match-line { margin: 0; padding: 12px 22px; border: 1px solid var(--line); font: 13px ui-monospace, monospace; color: var(--muted); }
#next-round { border-color: #d5ad67; color: #d5ad67; }

#sound-status { align-self: center; color: var(--muted); font: 12px ui-monospace, monospace; }
.tools { flex-wrap: wrap; }

/* WUTBÜRGAZ · Arcade 01. Vorhandene Werkstatt bleibt aufklappbar. */
:root { --gold:#e5bc49; --red:#c83f30; --muted:#aaa598; --line:#38352d; background:#11110f; }
[hidden] { display:none !important; }
body { background:radial-gradient(ellipse at 50% 10%,#30241a 0,transparent 60%),repeating-linear-gradient(135deg,#ffffff03 0 1px,transparent 1px 7px),#11110f; min-height:100svh; }
main.arcade-shell { width:min(1420px,calc(100% - 48px)); }
.game-bar { min-height:80px; display:flex; align-items:center; justify-content:space-between; gap:18px; border-bottom:1px solid var(--line); }
.wordmark-button { border:0; padding:0; background:transparent; min-height:64px; }
.wordmark-button img { display:block; width:180px; height:72px; object-fit:contain; }
.edition { color:var(--gold); letter-spacing:2px; font-size:10px; }
.sound-controls { display:flex; align-items:center; gap:12px; }
#sound-toggle { color:var(--gold); border-color:#665531; font-weight:700; }
#sound-status { max-width:190px; line-height:1.5; }
.title-screen { min-height:calc(100svh - 150px); display:flex; flex-direction:column; align-items:center; justify-content:center; padding:28px 0; }
.title-screen .eyebrow { letter-spacing:4px; color:#aaa598; }
.disk-button { display:flex; flex-direction:column; align-items:center; width:min(480px,64svh); max-width:100%; border:0; padding:0; background:transparent; }
.disk-button:hover { background:transparent; }
.disk-button img { width:100%; height:auto; display:block; filter:drop-shadow(0 18px 25px #0008); }
.disk-button > span { display:flex; align-items:center; gap:28px; color:var(--gold); font:900 clamp(18px,2.5vw,28px) Arial,sans-serif; letter-spacing:2px; margin-top:8px; }
.disk-button:hover > span { color:#fff0b9; }
.disk-button:focus-visible { outline:2px solid var(--gold); outline-offset:12px; }
.start-hint { color:#d5ccbb; font:11px ui-monospace,monospace; letter-spacing:2px; margin:22px 0 8px; }
.title-meta { color:var(--muted); font:10px ui-monospace,monospace; letter-spacing:2px; }
.game-footer { border-top:1px solid var(--line); padding:20px 0; font:9px ui-monospace,monospace; letter-spacing:1.5px; color:#8e887a; }
.game-footer span { white-space:normal; }
.selection-screen { display:grid; grid-template-columns:minmax(170px,1fr) minmax(390px,2.15fr) minmax(170px,1fr); gap:18px 24px; padding:24px 0 30px; }
.section-heading { grid-column:1/-1; display:flex; justify-content:space-between; align-items:center; padding-bottom:12px; border-bottom:1px solid var(--line); }
.section-heading h1 { font-size:clamp(28px,4vw,50px); font-weight:900; font-style:italic; letter-spacing:-2px; }
.eyebrow { color:var(--red); }
.build-label { color:#93866b; font:10px ui-monospace,monospace; letter-spacing:2px; }
.duel-lineup { display:contents; }
.fighter-preview { min-width:0; display:flex; flex-direction:column; align-items:center; background:radial-gradient(ellipse at 50% 60%,#c83f3015,transparent 70%); border-bottom:3px solid var(--red); }
.player-preview { grid-column:1; grid-row:2/4; }
.opponent-preview { grid-column:3; grid-row:2/4; border-color:var(--gold); background:radial-gradient(ellipse at 50% 60%,#e5bc4913,transparent 70%); }
.fighter-preview canvas { width:100%; height:auto; max-height:330px; object-fit:contain; }
.side-label { font:11px ui-monospace,monospace; letter-spacing:2px; color:var(--red); padding-top:12px; }
.opponent-preview .side-label { color:var(--gold); }
.fighter-preview h2 { margin:0; color:#eee9dc; font:900 clamp(24px,3vw,40px) Arial,sans-serif; text-transform:uppercase; font-style:italic; letter-spacing:-1px; }
.fighter-preview p { color:var(--muted); font:10px ui-monospace,monospace; letter-spacing:1px; }
.versus { display:none; }
.pick-tabs { grid-column:2; grid-row:2; display:flex; flex-wrap:wrap; gap:8px; align-items:center; align-self:start; }
.pick-tabs button { flex:1; font-weight:900; border-bottom:3px solid #514b3d; }
#pick-player[aria-pressed=true] { background:#8f2c24; color:#fff2db; border-color:var(--red); }
#pick-opponent[aria-pressed=true] { background:#736025; color:#fff2ce; border-color:var(--gold); }
#pick-hint { display:block; width:100%; color:#b6ac99; font:11px ui-monospace,monospace; margin-top:5px; }
.fighter-grid { grid-column:2; grid-row:3; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:8px; align-self:start; }
.fighter-card { min-width:0; padding:0 4px 6px; border:1px solid #3b3831; background:linear-gradient(160deg,#34312a,#151513 70%); position:relative; overflow:hidden; }
.fighter-card canvas { width:100%; height:112px; object-fit:contain; aspect-ratio:auto; }
.fighter-card > span:not(.fighter-badge) { display:block; padding-top:5px; font:900 clamp(10px,1vw,14px) Arial,sans-serif; text-transform:uppercase; letter-spacing:.5px; }
.fighter-card[data-player=true] { border:2px solid var(--red); background:linear-gradient(140deg,#61261f,#171513); }
.fighter-card[data-opponent=true] { border:2px solid var(--gold); }
.fighter-card[aria-pressed=true] { box-shadow:inset 0 0 0 2px #fff0b9; }
.fighter-badge { display:block; height:12px; font:9px ui-monospace,monospace; color:var(--gold); padding-top:4px; }
.stage-heading { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:8px; }
.stage-heading h2 { margin:0; font:900 18px Arial,sans-serif; color:#eee9dc; font-style:italic; }
#world-hint { font:11px ui-monospace,monospace; color:var(--muted); }
.world-grid { grid-column:1/-1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:12px; }
.world-card { padding:0 0 12px; text-align:left; background:#191916; overflow:hidden; }
.world-card img { display:block; width:100%; height:clamp(70px,10vw,125px); object-fit:cover; opacity:.68; }
.world-card > span { display:block; margin:10px 12px 5px; font:900 12px Arial,sans-serif; color:#eee9dc; }
.world-card small { display:block; margin-left:12px; font-size:10px; }
.world-card[aria-pressed=true] { border:2px solid var(--gold); background:#302719; }
.world-card[aria-pressed=true] img { opacity:1; }
.world-card:disabled img { filter:grayscale(1); }
.world-card:disabled { opacity:.35; }
.start-row { grid-column:1/-1; display:flex; align-items:center; justify-content:space-between; gap:24px; padding-top:8px; }
#selection-status { font:12px ui-monospace,monospace; color:#b6ac99; }
.primary-button { background:var(--red); color:#fff3dd; padding:17px 30px; border:1px solid #df6250; font:900 17px Arial,sans-serif; letter-spacing:1px; min-height:54px; }
.primary-button:hover { background:#e14f3f; border-color:#f07b63; }
.primary-button:disabled { background:#3b342b; color:#948671; border-color:#504537; }
.fight-screen { padding:20px 0; }
.fight-heading { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:12px; }
#stage-label { font:12px ui-monospace,monospace; text-transform:uppercase; color:var(--gold); }
#pause { background:#211e16; color:var(--gold); border-color:#7e6935; font-weight:900; }
.arena-wrap { border:1px solid #66533b; box-shadow:0 18px 60px #0007; }
.fight-footer { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:14px; padding:18px 0; }
#match-status { font:900 16px Arial,sans-serif; letter-spacing:1px; color:#e4d6bc; }
#status { color:#a49b89; font:11px ui-monospace,monospace; }
.controls-line { font:10px/1.8 ui-monospace,monospace; letter-spacing:1px; color:#b0a48e; text-align:center; margin:4px 0 18px; }
.lab { border-top:1px solid #38352d; color:#8d8676; padding-top:15px; }
.lab summary { cursor:pointer; font:10px ui-monospace,monospace; letter-spacing:1.5px; padding:10px 0; }
.lab > p { font:11px/1.6 ui-monospace,monospace; }
@media(min-width:1600px) { body:is([data-screen=fight],[data-screen=intro]) main.arcade-shell { width:min(1540px,calc(100% - 80px)); } }
@media(max-width:950px) { .selection-screen { grid-template-columns:minmax(120px,1fr) minmax(310px,2fr) minmax(120px,1fr); gap:16px 12px; } .fighter-card canvas { height:90px; } .fighter-preview h2 { font-size:24px; } .side-label { font-size:9px; letter-spacing:0; } .edition { display:none; } }
@media(max-width:700px) { main.arcade-shell { width:calc(100% - 24px); } .game-bar { min-height:66px; gap:8px; } .wordmark-button img { width:130px; height:60px; } #sound-status { display:none; } .selection-screen { grid-template-columns:1fr 1fr; } .player-preview { grid-column:1; grid-row:2; } .opponent-preview { grid-column:2; grid-row:2; } .fighter-preview canvas { max-height:210px; } .pick-tabs { grid-column:1/-1; grid-row:3; } .fighter-grid { grid-column:1/-1; grid-row:4; } .fighter-card canvas { height:90px; } .world-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } .start-row { flex-direction:column; align-items:stretch; } .stage-heading { flex-direction:column; align-items:start; gap:8px; } .fight-heading { flex-wrap:wrap; } #stage-label { order:3; width:100%; font-size:10px; } .game-footer { flex-direction:column; gap:10px; } .title-screen .eyebrow { letter-spacing:2px; font-size:9px; } .start-hint { font-size:9px; letter-spacing:1px; } .title-meta { font-size:9px; letter-spacing:1px; } }
.fighter-preview canvas { aspect-ratio:320 / 330; }
.fight-screen .arena-wrap { width:min(100%,calc(177.7778svh - 426.6667px)); margin:0 auto; }
@media(max-height:540px) { .fight-screen .arena-wrap { width:100%; } }
@media(min-width:701px) { .world-grid { grid-template-columns:repeat(5,minmax(0,1fr)); } }


/* Kurzer Auftritt beider Kämpfer vor dem Match. */
.fight-screen .arena-wrap { position:relative; }
.intro-overlay { position:absolute; inset:0; width:100%; height:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:18px; border:0; padding:12px; background:linear-gradient(transparent 20%,#11110f88 50%,transparent 85%); }
.intro-overlay:hover { background:linear-gradient(transparent 20%,#11110f88 50%,transparent 85%); }
.intro-overlay > span { color:var(--gold); font:900 italic clamp(22px,5vw,76px)/.95 Arial,sans-serif; text-align:center; text-shadow:3px 3px 0 #9b2c21,0 3px 14px #000; }
.intro-overlay small { margin:0; color:#eee9dc; font:10px ui-monospace,monospace; letter-spacing:1px; }
body[data-screen=intro] .fight-footer, body[data-screen=intro] .lab { display:none; }
@media(prefers-reduced-motion:reduce) { .intro-overlay > span { text-shadow:2px 2px 0 #9b2c21; } }

/* Tastaturlegende nur für Desktop, Sichtbarkeit zusätzlich durch Spielphase gesteuert. */
.controls-line { display:none; color:#938b7c; font-size:9px; letter-spacing:.5px; margin:12px 0 18px; }
@media(min-width:701px) and (hover:hover) and (pointer:fine) { .controls-line:not([hidden]) { display:block; } }

.disk-launch { display:flex; flex-direction:column; align-items:center; width:min(480px,64svh); max-width:100%; gap:18px; }
.disk-launch .disk-button { width:100%; }
.disk-start { min-width:180px; }

.match-options { grid-column:1/-1; display:flex; flex-wrap:wrap; gap:16px; }
.match-options label { display:flex; align-items:center; gap:10px; font:10px ui-monospace,monospace; color:var(--muted); }
.match-options select { padding:12px; min-height:44px; border:1px solid #665531; background:#191916; color:#eee9dc; font:12px ui-monospace,monospace; max-width:100%; }
.player-preview,.opponent-preview { grid-row:3/5; }.pick-tabs { grid-row:3; }.fighter-grid { grid-row:4; }
@media(max-width:700px) { .player-preview,.opponent-preview { grid-row:3; }.pick-tabs { grid-row:4; }.fighter-grid { grid-row:5; } }

.tournament-status { margin:0; color:var(--gold); font:11px ui-monospace,monospace; }
.start-row { flex-wrap:wrap; }

.mode-screen { min-height:65svh; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:24px; padding:32px 0; }
.mode-screen h1 { font-weight:900; font-style:italic; }
.mode-screen button { width:min(380px,100%); min-height:80px; }

#controller-status { color:var(--gold); font:9px ui-monospace,monospace; }

.arcade-link { text-decoration:none; padding:12px 0; }

.fighter-preview p.selection-quote { color:#d0bfa0; font:italic 11px/1.5 Arial,sans-serif; text-align:center; max-width:230px; padding:0 10px 12px; margin:0; }

.replay-overlay { justify-content:flex-start; padding-top:160px; background:transparent; gap:8px; }.replay-overlay:hover{background:transparent}.replay-overlay>span {font-size:clamp(16px,2.5vw,32px)}
@media(max-width:700px){.replay-overlay{padding-top:20%;}.replay-overlay small{font-size:8px}}


/* Lesbares Mobil-HUD außerhalb der weiterhin unveränderten 16:9-Arena. */
.mobile-hud { display:none; }
.controller-legend { color:var(--muted); font:11px/1.8 ui-monospace,monospace; text-align:center; padding:10px 0; }
@media(hover:none) and (pointer:coarse) {
 .mobile-hud { display:grid; grid-template-columns:minmax(0,1fr) 58px minmax(0,1fr); gap:6px 10px; padding:12px 0 8px; }
 .hud-side { min-width:0; display:flex; flex-direction:column; gap:5px; }
 .hud-side strong { font:900 14px Arial,sans-serif; overflow-wrap:anywhere; }
 .hud-opponent { text-align:right; }
 .hud-side span { font:11px ui-monospace,monospace; color:#d0c7b5; }
 .hud-side progress { appearance:none; width:100%; height:12px; border:0; border-radius:0; background:#39382e; accent-color:var(--gold); }
 .hud-side progress::-webkit-progress-bar { background:#39382e; }
 .hud-side progress::-webkit-progress-value { background:var(--gold); }
 .hud-side progress::-moz-progress-bar { background:var(--gold); }
 .hud-clock { display:flex; flex-direction:column; align-items:center; gap:4px; }
 .hud-clock strong { font:900 30px/1 Arial,sans-serif; color:var(--gold); }
 .hud-clock span { font:10px ui-monospace,monospace; white-space:nowrap; }
 .hud-signature { grid-column:1/-1; margin:3px 0 0; color:var(--gold); font:11px/1.5 ui-monospace,monospace; overflow-wrap:anywhere; }
 #match-status { font-size:13px; line-height:1.5; overflow-wrap:anywhere; }
 #controller-status { max-width:110px; font-size:10px; line-height:1.4; }
 .sound-controls { flex-wrap:wrap; justify-content:flex-end; }
 .controller-legend { font-size:11px; line-height:1.7; }
}


/* Touch-Steuerung für Handy und Tablet, mehrere Finger gleichzeitig. */
.touch-controller { display:none; }
@media(hover:none) and (pointer:coarse) {
 .touch-controller:not([hidden]) { display:flex; justify-content:space-between; align-items:center; gap:12px; padding:12px max(0px,env(safe-area-inset-right)) 6px max(0px,env(safe-area-inset-left)); }
 .touch-controller button { touch-action:none; user-select:none; -webkit-user-select:none; -webkit-touch-callout:none; min-width:44px; min-height:48px; padding:0 6px; border:1px solid #756648; background:#262218; color:#eee9dc; font:900 11px Arial,sans-serif; border-radius:8px; }
 .touch-controller button[aria-pressed=true] { background:#e5bc49; color:#15120c; border-color:#fff0b9; }
 .touch-directions { display:grid; grid-template-columns:repeat(3,44px); grid-template-rows:repeat(2,48px); gap:5px; }
 .touch-directions button { font-size:23px; }
 .touch-up { grid-column:2; grid-row:1; }
 .touch-left { grid-column:1; grid-row:2; }
 .touch-down { grid-column:2; grid-row:2; }
 .touch-right { grid-column:3; grid-row:2; }
 .touch-actions { display:grid; grid-template-columns:repeat(2,minmax(58px,76px)); gap:8px; }
 .touch-actions button { height:48px; }
 .touch-actions .touch-special { border-color:var(--red); color:#f2b6a7; }
 .touch-actions .touch-special[aria-pressed=true] { color:#15120c; }
}
@media(max-width:360px) { .touch-controller:not([hidden]) {gap:6px;} .touch-actions {grid-template-columns:repeat(2,58px);gap:5px;} }


.mobile-home {display:none;}
.asset-overlay {position:absolute;inset:0;z-index:5;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;padding:16px;text-align:center;background:#11110ff5;}
.asset-overlay p {font:900 13px/1.5 Arial,sans-serif;color:var(--gold);margin:0;}
.asset-overlay button {background:var(--red);color:#fff1dc;min-height:44px;}

.mobile-studio-back {display:none;}