/* Einzige Quelle für den aktiven mobilen Spielmodus. */
html[data-mobile-game=true] {overflow:hidden;overscroll-behavior:none;background:#050505;}
body[data-mobile-game=true] {position:fixed;inset:0;min-height:0;overflow:hidden;overscroll-behavior:none;background:#050505;}
body[data-mobile-game=true] #game-shell {
 --game-width:calc(100vw - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px) - 8px);
 --game-height:calc(100vh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 4px);
 position:fixed;inset:0;margin:auto;width:var(--game-width);height:var(--game-height);overflow:hidden;border:0;aspect-ratio:auto;background:#050505;
}
@supports(height:100dvh){body[data-mobile-game=true] #game-shell {--game-height:calc(100dvh - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px) - 4px);}}
body[data-mobile-game=true] :is(.game-bar,.game-footer,.lab,#controller-legend,#controls-legend) {display:none;}
body[data-mobile-game=true] .mobile-home {display:block;position:absolute;right:8px;top:6px;z-index:10;width:44px;height:44px;padding:0;font-size:25px;background:#171610;}
body[data-mobile-game=true]:is([data-screen=fight],[data-screen=intro]) .mobile-home {display:none;}

/* Modus und zwei getrennte Auswahlansichten. */
body[data-mobile-game=true] #mode-screen {min-height:0;height:100%;padding:12px;gap:14px;}
body[data-mobile-game=true] #mode-screen h1 {font-size:28px;}
body[data-mobile-game=true] #mode-screen button {min-height:58px;width:min(360px,85%);}
body[data-mobile-game=true] #selection-screen {height:100%;padding:8px 12px;overflow:hidden;display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:44px minmax(0,1fr) 44px;gap:8px;align-content:stretch;}
body[data-mobile-game=true] #selection-screen .section-heading {grid-column:1;grid-row:1;padding:0;border:0;}
body[data-mobile-game=true] #selection-screen .section-heading h1 {font-size:22px;letter-spacing:-1px;}
body[data-mobile-game=true] #selection-screen :is(.section-heading .eyebrow,.fighter-preview,.build-label,#pick-hint) {display:none;}
body[data-mobile-game=true] #selection-screen .match-options {grid-column:2;grid-row:1;flex-wrap:nowrap;gap:8px;padding-right:44px;align-items:center;}
body[data-mobile-game=true] .match-options label {gap:4px;font-size:9px;}
body[data-mobile-game=true] .match-options select {font-size:10px;min-height:40px;padding:6px;}
body[data-mobile-game=true] #fighter-grid {grid-column:1/-1;grid-row:2;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));height:100%;gap:8px;}
body[data-mobile-game=true] .fighter-card {display:flex;flex-direction:column;align-items:center;min-height:0;padding:2px 4px 5px;}
body[data-mobile-game=true] .fighter-card canvas {flex:1;min-height:0;height:0;max-height:none;object-fit:contain;}
body[data-mobile-game=true] .fighter-card > span:not(.fighter-badge) {font-size:12px;padding-top:3px;}
body[data-mobile-game=true] .fighter-badge {flex:none;}
body[data-mobile-game=true] #selection-screen .pick-tabs {grid-column:1;grid-row:3;margin:0;}
body[data-mobile-game=true] #selection-screen .start-row {grid-column:2;grid-row:3;flex-direction:row;align-items:center;flex-wrap:nowrap;padding:0;gap:8px;}
body[data-mobile-game=true] #selection-back {width:44px;height:44px;padding:0;font-size:20px;}
body[data-mobile-game=true] #start-fight {height:44px;min-height:44px;padding:6px 18px;font-size:14px;}
body[data-mobile-game=true][data-screen=selection] :is(#world-grid,.stage-heading,#selection-status) {display:none;}
body[data-mobile-game=true][data-screen=stage] #selection-screen {grid-template-columns:minmax(0,1fr);}
body[data-mobile-game=true][data-screen=stage] #selection-screen .section-heading {grid-column:1;}
body[data-mobile-game=true][data-screen=stage] :is(.match-options,.pick-tabs,#fighter-grid,.stage-heading) {display:none;}
body[data-mobile-game=true][data-screen=stage] #world-grid {grid-column:1;grid-row:2;grid-template-columns:repeat(5,minmax(0,1fr));grid-template-rows:repeat(2,minmax(0,1fr));height:100%;min-height:0;gap:8px;}
body[data-mobile-game=true][data-screen=stage] .world-card {display:flex;flex-direction:column;min-height:0;padding-bottom:5px;}
body[data-mobile-game=true][data-screen=stage] .world-card img {flex:1;min-height:0;height:0;object-fit:cover;}
body[data-mobile-game=true][data-screen=stage] .world-card > span {font-size:12px;margin:6px 8px 3px;}
body[data-mobile-game=true][data-screen=stage] .world-card small {font-size:9px;margin-left:8px;}
body[data-mobile-game=true][data-screen=stage] #selection-screen .start-row {grid-column:1;justify-content:space-between;}
body[data-mobile-game=true][data-screen=stage] #selection-status {font-size:11px;line-height:1.4;max-width:60%;}

/* Keine Raster-/Seitenleistenbreite für die Arena: sie füllt den gesamten Rahmen. */
body[data-mobile-game=true] #game-shell #fight-screen {position:relative;display:block;width:100%;height:100%;padding:0;touch-action:none;}
body[data-mobile-game=true] #game-shell #fight-screen .arena-wrap {position:relative;inset:auto;width:100%;height:100%;max-width:none;margin:0;border:0;aspect-ratio:auto;}
body[data-mobile-game=true] #game-shell #arena {width:100%;height:100%;aspect-ratio:auto;object-fit:cover;touch-action:none;}
body[data-mobile-game=true] #mobile-hud {position:absolute;inset:0 0 auto;z-index:3;pointer-events:none;display:grid;grid-template-columns:minmax(0,1fr) 50px minmax(0,1fr);padding:6px 9px 12px;gap:2px 10px;margin:0;background:linear-gradient(#090a08dc,#090a0866 75%,transparent);text-shadow:0 1px 3px #000;}
body[data-mobile-game=true] .hud-side {gap:2px;}
body[data-mobile-game=true] .hud-side strong {font-size:12px;}
body[data-mobile-game=true] .hud-side progress {height:7px;}
body[data-mobile-game=true] .hud-side span {font-size:9px;}
body[data-mobile-game=true] .hud-clock strong {font-size:24px;}
body[data-mobile-game=true] .hud-clock span {font-size:9px;}
body[data-mobile-game=true] .hud-signature {font-size:9px;line-height:1.2;margin:0;}
body[data-mobile-game=true] #game-shell #touch-controller:not([hidden]) {display:contents;}
body[data-mobile-game=true] #game-shell .touch-directions {position:absolute;left:12px;bottom:8px;width:140px;height:92px;display:grid;grid-template-columns:repeat(3,44px);grid-template-rows:repeat(2,44px);gap:4px;z-index:4;}
body[data-mobile-game=true] #game-shell .touch-directions button {width:44px;height:44px;min-height:44px;min-width:44px;padding:0;border-radius:12px;font-size:24px;}
body[data-mobile-game=true] #game-shell .touch-actions {position:absolute;right:12px;bottom:8px;width:108px;height:108px;display:grid;grid-template-columns:repeat(2,50px);grid-template-rows:repeat(2,50px);gap:8px;z-index:4;}
body[data-mobile-game=true] #game-shell .touch-actions button {width:50px;height:50px;min-width:50px;min-height:50px;padding:0;border-radius:50%;font-size:9px;letter-spacing:0;box-shadow:0 3px 8px #0006;}
body[data-mobile-game=true] #fight-screen .fight-heading {display:contents;}
body[data-mobile-game=true] #stage-label {display:none;}
body[data-mobile-game=true] #game-shell :is(#back-selection,#pause) {position:absolute;bottom:12px;width:44px;height:44px;min-height:44px;padding:0;font-size:0;z-index:4;background:#171610df;border-radius:50%;}
body[data-mobile-game=true] #back-selection {left:calc(50% - 52px);}
body[data-mobile-game=true] #pause {left:calc(50% + 8px);}
body[data-mobile-game=true] #back-selection::after {content:'←';font:20px Arial,sans-serif;}
body[data-mobile-game=true] #pause::after {content:'Ⅱ';font:20px Arial,sans-serif;}
body[data-mobile-game=true][data-paused=true] #pause::after {content:'▶';}
body[data-mobile-game=true] #fight-screen .fight-footer {position:absolute;left:50%;bottom:66px;width:min(230px,calc(100% - 320px));transform:translateX(-50%);z-index:4;display:flex;align-items:center;justify-content:center;margin:0;padding:0;}
body[data-mobile-game=true] .fight-footer :is(#match-status,#status) {display:none;}
body[data-mobile-game=true] #next-round {min-width:0;min-height:44px;padding:5px 8px;font-size:11px;letter-spacing:0;}
body[data-mobile-game=true] .replay-overlay {padding-top:70px;}
body[data-mobile-game=true] .replay-overlay > span {font-size:14px;}
body[data-mobile-game=true] .replay-overlay small {font-size:9px;}

.rotate-device {position:fixed;inset:0;z-index:1000;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:22px;padding:32px;background:#11110f;color:#eee9dc;touch-action:none;text-align:center;}
.rotate-device strong {font:900 24px Arial,sans-serif;color:#e5bc49;letter-spacing:1px;}
.rotate-device p {font:13px/1.5 Arial,sans-serif;margin:0;}
.rotate-phone {position:relative;width:44px;height:82px;border:4px solid #e5bc49;border-radius:9px;margin:24px;animation:turn-phone 1.3s ease-in-out .2s forwards;}
.rotate-phone::after {content:'';position:absolute;width:14px;height:3px;background:#e5bc49;bottom:4px;left:11px;border-radius:2px;}
@keyframes turn-phone {from{transform:rotate(0deg);}to{transform:rotate(90deg);}}
@media(prefers-reduced-motion:reduce){.rotate-phone{animation:none;transform:rotate(90deg);}}
/* Vollständige Bedienelement-Stile, unabhängig von Hover-/Pointer-Erkennung nach dem Drehen. */
body[data-mobile-game=true] .hud-side {min-width:0;display:flex;flex-direction:column;}
body[data-mobile-game=true] .hud-opponent {text-align:right;}
body[data-mobile-game=true] .hud-side progress {appearance:none;width:100%;border:0;border-radius:0;background:#39382e;accent-color:#e5bc49;}
body[data-mobile-game=true] .hud-side progress::-webkit-progress-bar {background:#39382e;}
body[data-mobile-game=true] .hud-side progress::-webkit-progress-value {background:#e5bc49;}
body[data-mobile-game=true] .hud-side progress::-moz-progress-bar {background:#e5bc49;}
body[data-mobile-game=true] .hud-clock {display:flex;flex-direction:column;align-items:center;gap:4px;}
body[data-mobile-game=true] .hud-signature {grid-column:1/-1;color:#e5bc49;}
body[data-mobile-game=true] #touch-controller button {touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none;border:1px solid #756648;background:#262218;color:#eee9dc;font-weight:900;}
body[data-mobile-game=true] #touch-controller button[aria-pressed=true] {background:#e5bc49;color:#15120c;border-color:#fff0b9;}
body[data-mobile-game=true] #touch-controller .touch-special {border-color:#c83f30;color:#f2b6a7;}
body[data-mobile-game=true] #touch-controller .touch-special[aria-pressed=true] {color:#15120c;}
body[data-mobile-game=true] .touch-up {grid-column:2;grid-row:1;}
body[data-mobile-game=true] .touch-left {grid-column:1;grid-row:2;}
body[data-mobile-game=true] .touch-down {grid-column:2;grid-row:2;}
body[data-mobile-game=true] .touch-right {grid-column:3;grid-row:2;}

/* Dasselbe freistehende Symbol für Pause und Play, größere transparente Trefferfläche. */
body[data-mobile-game=true] #game-shell #pause {width:56px;height:56px;min-width:56px;max-width:56px;min-height:56px;z-index:20;padding:0;font:32px Arial,sans-serif;background:transparent;border:0;border-radius:0;box-shadow:none;color:#d5ccbc;opacity:.72;touch-action:manipulation;}
body[data-mobile-game=true] #game-shell #pause:hover,body[data-mobile-game=true] #game-shell #pause:active {background:transparent;border:0;box-shadow:none;opacity:.72;}
body[data-mobile-game=true] #game-shell #pause::after {content:none;}

/* Tournament-Präsentation im vorhandenen mobilen Spielrahmen. */
body[data-mobile-game=true] #tournament-screen{position:absolute;inset:0;width:100%;height:100%;min-height:0;grid-template-rows:minmax(0,1fr) auto}body[data-mobile-game=true] .tournament-rules{padding:8px 12px;gap:4px 14px}body[data-mobile-game=true] .tournament-rules h1{font-size:14px;margin:0 0 3px}body[data-mobile-game=true] .tournament-rules p{font-size:10px;line-height:1.4;margin:1px 0}body[data-mobile-game=true] .tournament-rules .opponents{font-size:9px}body[data-mobile-game=true] .tournament-rules button{padding:8px 12px;font-size:10px;min-height:44px}body[data-mobile-game=true] .tournament-film>button{height:44px;font-size:12px}

/* Rückweg zum Studio nur am Titel, außerhalb der Kampfsteuerung. */
body[data-mobile-game=true][data-screen=title] .mobile-studio-back {display:inline-flex;position:absolute;left:max(12px,env(safe-area-inset-left));top:max(6px,env(safe-area-inset-top));z-index:10;align-items:center;min-height:44px;padding:8px;color:#c9c2ad;font-size:12px;letter-spacing:1px;text-decoration:none;}
