/* Full-width landscape battlefield, top HUD and a thumb-reachable lower-left stick. */
html[data-mobile-game="true"], html[data-mobile-game="true"] body { width:100%;height:100%;overflow:hidden;overscroll-behavior:none; }
html[data-mobile-game="true"] .shell { position:fixed;inset:0 auto auto 0;width:var(--game-width);height:var(--game-height);max-width:none;margin:0;padding:max(4px,env(safe-area-inset-top)) max(4px,env(safe-area-inset-right)) max(4px,env(safe-area-inset-bottom)) max(4px,env(safe-area-inset-left));background:#24372f; }
html[data-rotated-game="true"] .shell { transform-origin:0 0;transform:translateX(var(--game-height)) rotate(90deg); }
html[data-mobile-game="true"] .heading { display:none; }
html[data-mobile-game="true"] .topbar { position:absolute;top:calc(max(4px,env(safe-area-inset-top)) + 9px);left:calc(max(4px,env(safe-area-inset-left)) + 9px);width:96px;min-height:44px;padding:0;border:0;color:#fff5cf;z-index:3;gap:8px; }
html[data-mobile-game="true"] .topbar a { display:grid;place-items:center;min-height:44px;width:44px;flex-shrink:0;font-size:0;border:1px solid #a6874c;background:#3b5141; }
html[data-mobile-game="true"] .topbar a::before { content:'←';font-size:24px; }
html[data-mobile-game="true"] .game-layout { display:block;height:100%; }
html[data-mobile-game="true"] .battle { display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto minmax(0,1fr);gap:0;width:100%;min-width:0;max-width:none;height:100%;box-shadow:none; }
html[data-mobile-game="true"] .hud-shell { align-self:stretch;margin:0;padding:3px 8px 6px 112px;border-width:6px;border-image-width:6px;width:100%; }
html[data-mobile-game="true"] .hud-shell .hud { display:flex;gap:16px;min-height:44px;margin-bottom:4px; }
html[data-mobile-game="true"] .health { flex:1;min-width:80px; }
html[data-mobile-game="true"] .hud-shell #pause { margin-left:0; }
html[data-mobile-game="true"] .hud-shell .counter { min-width:46px; }
html[data-mobile-game="true"] .hud-shell .counter strong { font-size:18px; }
html[data-mobile-game="true"] .hud-shell .counter small { font-size:10px; }
html[data-mobile-game="true"] .hud-shell .experience { flex-wrap:nowrap;gap:6px; }
html[data-mobile-game="true"] .hud-shell .experience .meter { height:20px; }
html[data-mobile-game="true"] .hud-shell .meter-value { font-size:11px; }
html[data-mobile-game="true"] .arena { align-self:stretch;min-width:0;min-height:0;width:100%;height:100%;max-width:none;aspect-ratio:auto;overflow:hidden; }
html[data-mobile-game="true"] canvas { object-fit:contain; }
html[data-mobile-game="true"] .arena>.joystick { width:clamp(104px,calc(var(--game-height) * .3),132px);left:max(16px,env(safe-area-inset-left));bottom:max(12px,env(safe-area-inset-bottom)); }
html[data-mobile-game="true"] #panel { position:fixed;inset:50% auto auto 50%;margin:0;width:min(540px,calc(var(--game-width) - 32px));max-width:none;max-height:calc(var(--game-height) - 24px);padding:14px 20px;transform:translate(-50%,-50%); }
html[data-rotated-game="true"] #panel { transform:translate(-50%,-50%) rotate(90deg); }
html[data-mobile-game="true"] #panel h2 { margin:8px 0;font-size:25px; }
html[data-mobile-game="true"] #panel .choices { margin:10px 0; }
html[data-mobile-game="true"] #panel .choice { min-height:106px;padding:8px;gap:5px; }
html[data-mobile-game="true"] #panel .choice img { width:38px;height:38px; }
html[data-mobile-game="true"] #panel .choice strong { font-size:12px; }
html[data-mobile-game="true"] #panel .choice small { font-size:11px; }
html[data-mobile-game="true"] #panel .panel-back { margin-top:8px;min-height:32px;display:grid;place-items:center; }
html[data-mobile-game="true"] #panel #panelCopy { margin-bottom:8px; }
html[data-mobile-game="true"] #panel #loadStatus { margin:6px 0; }
html[data-mobile-game="true"] #panel #startInstructions { margin:6px 0; }