#quest-mobile { position: fixed; inset: 0; box-sizing: border-box; padding: var(--quest-toolbar-height, 100px) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left); display: grid; grid-template-rows: minmax(0,1fr); pointer-events: none; z-index: 20; font: 14px system-ui, sans-serif; color: #fff; }
.quest-toolbar { display: flex; gap: 8px; align-items: center; justify-content: space-between; padding: 2px 8px; pointer-events: auto; background: #090d16; }
#quest-mobile button { min-width: 44px; min-height: 44px; border: 1px solid #b8a371; border-radius: 8px; color: #fff; background: #1b2637; font: inherit; touch-action: none; user-select: none; -webkit-user-select: none; cursor: pointer; }
#quest-mobile button:focus-visible { outline: 3px solid #f4d58a; outline-offset: 2px; }
#quest-mobile button[data-held] { background: #594b29; }
#quest-screen-status { font-size: 12px; flex: 1; }
#quest-stage { min-height: 1px; min-width: 1px; }
#quest-touch-controls { display: none; }
#quest-mobile.quest-touch { grid-template-rows: minmax(0,1fr) 156px; }
#quest-mobile.quest-touch #quest-touch-controls { display: flex; justify-content: space-between; align-items: center; padding: 4px 8px; gap: 8px; pointer-events: auto; background: #090d16; }
#quest-mobile #quest-touch-controls[hidden] { visibility: hidden; }
.quest-pad { display: grid; grid-template: repeat(3, 44px) / repeat(3, 44px); gap: 4px; }
.quest-pad [data-key="up"] { grid-area: 1 / 2; }
.quest-pad [data-key="left"] { grid-area: 2 / 1; }
.quest-pad [data-key="down"] { grid-area: 3 / 2; }
.quest-pad [data-key="right"] { grid-area: 2 / 3; }
.quest-actions { display: grid; grid-template-columns: repeat(2, minmax(44px, 1fr)); gap: 6px; max-width: 180px; }
.quest-actions button { padding: 4px 8px; }
@media (orientation: landscape) and (min-width: 640px) {
  #quest-mobile.quest-touch { grid-template-rows: minmax(0,1fr); grid-template-columns: 152px 1fr 152px; }
  .quest-toolbar { grid-column: 1 / -1; }
  #quest-mobile.quest-touch #quest-stage { grid-area: 1 / 2; }
  #quest-mobile.quest-touch #quest-touch-controls { display: contents; }
  .quest-pad { grid-area: 1 / 1; align-self: center; justify-self: center; pointer-events: auto; }
  .quest-actions { grid-area: 1 / 3; align-self: center; justify-self: center; pointer-events: auto; padding: 0 6px; }
  #quest-mobile #quest-touch-controls[hidden] > * { visibility: hidden; }
}

#quest-controls { left:0; right:0; top:0; max-width:none; box-sizing:border-box; padding:max(8px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); display:flex;flex-wrap:wrap;gap:4px;background:#09090bf5; }
#quest-controls #quest-save-status {flex-basis:100%;margin:0;text-align:left;}
#quest-help {flex-basis:100%;}
#quest-mobile button {color:#f2ead9;background:#171514;border-color:#77674c;}

/* Keep the game canvas large. Less-used actions expand from Game menu. */
#quest-controls .quest-game-menu {display:none;}
#quest-controls.quest-compact {padding-top:max(2px,env(safe-area-inset-top));gap:4px;}
#quest-controls.quest-compact .quest-game-menu {display:block;}
#quest-controls.quest-compact:not(.quest-menu-open) > button {display:none;}
#quest-controls.quest-compact:not(.quest-menu-open) > .quest-game-menu {display:block;flex:1;min-width:0;padding:4px 6px;}
#quest-controls.quest-compact.quest-menu-open {max-height:50dvh;overflow-y:auto;overscroll-behavior:contain;}
#quest-controls.quest-compact.quest-menu-open > .quest-game-menu {order:-1;flex-basis:100%;position:sticky;top:0;z-index:1;}
#quest-controls.quest-compact:not(.quest-menu-open) #quest-help {display:none;}
#quest-controls.quest-compact #quest-save-status {font-size:12px;line-height:16px;}

@media (orientation:landscape) and (max-height:600px) {
 #quest-mobile.quest-touch {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) 52px;}
 #quest-mobile.quest-touch #quest-stage {grid-area:1/1;}
 #quest-mobile.quest-touch #quest-touch-controls {grid-area:2/1;display:flex;gap:12px;padding:2px 8px;}
 /* Left and right at the ends: up sat beside left. */
 .quest-pad {display:flex;gap:4px;}
 .quest-pad [data-key="left"] {order:-1;}
 .quest-actions {display:flex;gap:4px;max-width:none;padding:0;}
 #quest-mobile .quest-actions button {padding:2px 8px;}
}

/* The canvas owns the viewport. Menus and controls never resize or pan it. */
html, body { position:fixed; inset:0; overscroll-behavior:none; }
#quest-mobile, #quest-mobile.quest-touch { display:block; padding:0; }
#quest-mobile #quest-stage, #quest-mobile.quest-touch #quest-stage { position:absolute; inset:0; grid-area:auto; }
#quest-mobile.quest-touch #quest-touch-controls { position:absolute; bottom:env(safe-area-inset-bottom); left:env(safe-area-inset-left); right:env(safe-area-inset-right); grid-area:auto; display:flex; background:transparent; pointer-events:none; }
#quest-mobile .quest-pad, #quest-mobile .quest-actions { pointer-events:none; }
#quest-mobile #quest-touch-controls button { pointer-events:auto; }
#quest-controls.quest-compact:not(.quest-menu-open) { left:max(8px,env(safe-area-inset-left)); right:auto; max-width:240px; background:transparent; }
#quest-controls.quest-compact:not(.quest-menu-open) #quest-save-status { display:none; }

/* Desktop: one slim row with the status inline, so the game keeps its height. */
#quest-controls:not(.quest-compact) { align-items:center; padding:4px max(8px, env(safe-area-inset-right)) 4px max(8px, env(safe-area-inset-left)); gap:6px; }
#quest-controls:not(.quest-compact) > button { min-height:34px; padding:4px 12px; font-size:13px; }
#quest-controls:not(.quest-compact) #quest-save-status { flex:1 1 220px; margin:0; padding:0 4px; background:none; text-align:right; font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (hover:hover) and (pointer:fine) { #quest-controls #quest-controls-toggle { display:none; } }

/* Portrait card battles overlap; ask to rotate (Play anyway hides it for this visit). */
#quest-rotate { display:none; position:fixed; inset:0; z-index:2147483000; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; background:#090d16f2; color:#f2ead9; font:18px/1.4 system-ui, sans-serif; text-align:center; }
#quest-rotate .phone { width:46px; height:78px; border:3px solid #e9c579; border-radius:9px; animation:quest-tilt 1.6s ease-in-out infinite alternate; }
@keyframes quest-tilt { to { transform:rotate(-90deg); } }
#quest-rotate button { min-height:44px; padding:8px 18px; border:1px solid #77674c; border-radius:8px; color:#f2ead9; background:#171514; font:15px system-ui, sans-serif; }
@media (orientation:portrait) and (pointer:coarse) { #quest-rotate { display:flex; }
  /* Modal dialogs (hero picker, battle details) sit in the top layer above any z-index: hide them until the phone turns. */
  dialog[open] { visibility:hidden; } dialog::backdrop { background:transparent; } }
@media (prefers-reduced-motion:reduce) { #quest-rotate .phone { animation:none; transform:rotate(-90deg); } }

/* In battles the compact Game menu sat on the battle log; the pad is hidden there,
   so park the button in the empty bottom-right corner under END TURN. */
body.quest-battle #quest-controls.quest-compact:not(.quest-menu-open) { top:auto; left:auto; bottom:max(8px, env(safe-area-inset-bottom)); right:max(8px, env(safe-area-inset-right)); padding:0; }

/* First-battle tip */
#quest-battle-hint { position:fixed; top:10px; left:12px; z-index:180; max-width:min(380px,44vw); padding:7px 14px; border:1px solid #c9a24a; border-radius:8px; background:rgba(20,14,6,.86); color:#ffe9a8; font:600 clamp(13px,1.7vw,17px)/1.3 system-ui, sans-serif; pointer-events:none; animation:quest-hint-in .25s ease-out; }
#quest-battle-hint[hidden] { display:none; }
@keyframes quest-hint-in { from { opacity:0; transform:translateY(-6px); } }
@media (prefers-reduced-motion:reduce) { #quest-battle-hint { animation:none; } }
/* Menu screens: tap the windows directly; keep only Back (it sits in the corner). The Game menu button covered the first entry. */
body.quest-menu-scene #quest-mobile .quest-pad, body.quest-menu-scene #quest-mobile .quest-actions button:not([data-key="escape"]) { display:none; }
body.quest-menu-scene #quest-controls:not(.quest-menu-open) > .quest-game-menu { display:none !important; }
body.quest-menu-scene #quest-mobile .quest-actions { position:fixed; top:calc(8px + env(safe-area-inset-top)); right:calc(8px + env(safe-area-inset-right)); }
body.quest-menu-scene #quest-mobile .quest-actions button { min-width:72px; min-height:40px; }
/* Title: the menu is tapped directly and there is nothing to walk; the pad and action buttons only covered the art. */
body.quest-title-scene #quest-mobile .quest-pad, body.quest-title-scene #quest-mobile .quest-actions { display:none; }