/* Final responsive layer: all chrome and the renderer share the visible viewport.
   Keep browser zoom accessible; 16px fields prevent Safari's automatic focus zoom. */
html { overflow:hidden; overscroll-behavior:none; }
body { position:fixed; left:var(--game-left,0px); top:var(--game-top,0px); width:var(--game-width,100dvw); height:var(--game-height,100dvh); overflow:hidden; transform:translateZ(0); }
#world { width:100%; height:100%; }
#camera-zoom { display:none; }
/* Match chrome must never bleed through the lobby or results screen. */
body:not(.match-playing) :is(#mobile,#camera-zoom,#hud,#hud-bubbles,#scoreboard,#skillbar,#minimap-frame,#controls,#control-help,#location,#status-banner,#offer-panel,#loot-prompt) { display:none!important; }
body:not(.match-playing) #prototype-notice { display:none; }

@media (pointer:coarse) {
  body { --edge-left:max(8px,env(safe-area-inset-left)); --edge-right:max(8px,env(safe-area-inset-right)); --edge-top:max(8px,env(safe-area-inset-top)); --edge-bottom:max(10px,env(safe-area-inset-bottom)); }
  input,select,textarea { font-size:16px!important; }
  #hud { top:var(--edge-top); left:var(--edge-left); right:auto; width:212px; min-height:0; height:76px; box-sizing:border-box; padding:6px; gap:6px; border-radius:15px; }
  #hud .hero-crest { flex:0 0 42px; width:42px; height:56px; }
  #hud #hero-portrait { width:42px; height:56px; border-radius:11px; }
  #hud .hero-level { font-size:8px; bottom:-4px; right:-3px; }
  #hud .hero-readout { min-width:0; }
  #hud .barlabel,#hud .stamina-label,#hud .xp-label { font-size:10px; line-height:13px; }
  #hud .bar,#hud .bar.energy,#hud .bar.xp { height:5px; margin:0; }
  #hud #playername-display { max-width:43px; }
  #hud #match-timer-box { width:36px; min-width:36px; padding:4px 1px; }
  #hud #match-timer { font-size:12px; }
  #hud #match-timer-box .eyebrow { font-size:6px; }
  #hud-bubbles { top:calc(var(--edge-top) + 84px); left:var(--edge-left); flex-direction:row; gap:6px; }
  #hud-bubbles .hud-bubble { width:44px; height:44px; }
  #hud-bubbles kbd { display:none; }
  #scoreboard { top:var(--edge-top); right:var(--edge-right); width:92px; border-radius:14px; }
  #scoreboard .board-header { min-height:44px; padding:6px; justify-content:center; font-size:10px; }
  #scoreboard .board-header:after,#scoreboard .board-stats,#scoreboard-rows { display:none; }
  #camera-zoom { display:grid; grid-template-columns:44px 44px; gap:4px; position:absolute; z-index:20; top:calc(var(--edge-top) + 52px); right:var(--edge-right); }
  #camera-zoom button { width:44px; height:44px; padding:0; border:1px solid var(--tg-line); border-radius:50%; background:rgba(8,22,30,.88); color:#e5cf98; font:24px/1 Georgia,serif; touch-action:manipulation; }
  #camera-zoom span { grid-column:1 / -1; color:#c8d9d5; font:8px/1.2 system-ui,sans-serif; letter-spacing:.04em; text-align:center; text-shadow:0 1px 3px #000; pointer-events:none; }
  #mobile { left:var(--edge-left); right:var(--edge-right); bottom:var(--edge-bottom); align-items:flex-end; }
  /* Thumb layout: movement left, dash/jump along the base, skills above attack.
     Reserve a generous attack target without putting an invisible panel over play. */
  #stick { width:92px; height:92px; flex:0 0 92px; }
  #mobile .touchactions { position:relative; display:block; width:254px; height:180px; flex:0 0 254px; pointer-events:none; }
  #mobile .touchactions button { position:absolute; inset:auto; width:60px; height:60px; min-width:0; font-size:9px; pointer-events:auto; }
  #mobile .touchactions .touch-strike { right:0; bottom:0; width:106px; height:106px; font-size:12px; }
  #mobile .touchactions .touch-dodge { left:0; bottom:0; }
  #mobile .touchactions .touch-jump { left:70px; bottom:0; }
  #mobile #touch-skill-0 { right:114px; bottom:90px; }
  #mobile #touch-skill-1 { right:24px; bottom:120px; }
  #mobile .touchactions .hud-icon { width:28px; height:28px; }
  #mobile .touchactions .touch-strike .hud-icon { width:48px; height:48px; }
  #prototype-notice { top:auto; bottom:calc(var(--edge-bottom) + 100px); left:var(--edge-left); right:auto; width:86px; max-width:86px; padding:0; font-size:0; background:none; border:0; }
  body:has(#loot-prompt[style*="flex"]) #prototype-notice { display:none; }
  #prototype-notice #net-badge { font-size:8px; line-height:12px; }
  #minimap-frame,#controls,#control-help,#skillbar { display:none; }
  #location { top:calc(var(--edge-top) + 136px); left:var(--edge-left); font-size:9px; }
  #status-banner { top:calc(var(--edge-top) + 138px); max-width:80%; }
  #loot-prompt { bottom:calc(var(--edge-bottom) + 178px); max-width:calc(100% - 24px); }
  #loot-prompt .loot-bubble { width:58px; height:58px; font-size:9px; }
  #loot-prompt .loot-label { max-width:180px; font-size:10px; }
  #loot-prompt .loot-bubble kbd { display:none; }
  #level-banner { top:112px; padding:5px 12px; gap:1px; }
  #level-banner strong { font-size:14px; }
  #level-banner span,#level-banner em { font-size:9px; }
  body:has(#offer-panel[style*="block"]) #level-banner { display:none; }
  #toast,#equip-toast { max-width:calc(100% - 24px); bottom:calc(var(--edge-bottom) + 130px); }
  #screen { position:absolute; inset:0; height:100%; overflow:auto; box-sizing:border-box; padding:calc(var(--edge-top) + 10px) 16px calc(var(--edge-bottom) + 10px); align-items:safe center; }
  #screen .intro { max-width:100%; margin:auto; }
  #screen h1 { font-size:clamp(34px,8vw,60px); }
  #screen .hint { font-size:10px; }
  .rpg-panel,#sheet-panel,#talent-panel,#score-panel { position:absolute; top:var(--edge-top); bottom:auto; left:var(--edge-left); right:auto; transform:none; width:calc(100% - var(--edge-left) - var(--edge-right)); max-width:none; max-height:calc(100% - var(--edge-top) - var(--edge-bottom)); box-sizing:border-box; padding:16px; overflow:auto; }
  .rpg-panel .rpg-close { width:44px; height:44px; z-index:2; }
  #offer-panel { top:calc(var(--edge-top) + 138px); left:50%; right:auto; transform:translateX(-50%); width:min(360px,calc(100% - var(--edge-left) - var(--edge-right))); max-height:190px; padding:7px; overflow:auto; box-sizing:border-box; border-radius:14px; }
  #offer-panel .offer-header { gap:3px; margin-bottom:5px; font-size:12px; line-height:1.1; letter-spacing:0; }
  #offer-reroll { min-height:32px; padding:4px 6px; font-size:10px; }
  #offer-panel .offer-cards { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:5px; }
  #offer-panel .offer-card { display:flex; flex-direction:column; justify-content:flex-start; gap:3px; min-width:0; height:103px; padding:5px; text-align:center; border-radius:10px; }
  #offer-panel .offer-card > .hud-icon { width:27px; height:27px; flex:0 0 27px; }
  #offer-panel .offer-card-copy { flex:0 1 auto; width:100%; }
  #offer-panel .offer-card-title { display:block; font-size:11px; line-height:1.1; }
  #offer-panel .offer-card-badge { display:none; }
  #offer-panel .offer-card-desc { display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; font-size:9px; line-height:1.15; margin-top:3px; }
  #offer-panel .offer-replace { margin-top:5px; gap:4px; }
  #offer-panel .offer-replace button { min-height:44px; flex:1; padding:4px; }

}

@media (pointer:coarse) and (max-height:500px) {
  #hud { height:68px; }
  #hud .hero-crest,#hud #hero-portrait { height:48px; }
  #hud-bubbles { top:calc(var(--edge-top) + 74px); }
  #location { display:none; }
  #status-banner { top:var(--edge-top); max-width:30%; font-size:10px; }
  /* Landscape: the loot bubble sits bottom-centre between the stick and the action cluster, bigger than portrait. */
  #loot-prompt { left:50%; transform:translateX(-50%); bottom:calc(var(--edge-bottom) + 14px); gap:4px; }
  #loot-prompt .loot-bubble { width:72px; height:72px; font-size:11px; }
  #loot-prompt .loot-bubble .hud-icon { width:30px; height:30px; }
  #loot-prompt .loot-label { max-width:220px; padding:3px 10px; font-size:10px; }
  #toast,#equip-toast { bottom:calc(var(--edge-bottom) + 112px); }
  #screen .intro { padding:12px; }
  #screen h1 { font-size:34px; }
  #screen .hint { display:none; }
  #offer-panel { top:calc(var(--edge-top) + 74px); left:calc(50% - 32px); width:min(360px,calc(100% - 320px)); max-height:190px; }
}

@media (pointer:coarse) and (max-width:360px) {
  #loot-prompt { bottom:calc(var(--edge-bottom) + 150px); }
  #loot-prompt .loot-label { max-width:140px; }
  #stick { width:72px; height:72px; flex-basis:72px; }
  #mobile .touchactions { width:228px; flex-basis:228px; }
  #mobile .touchactions .touch-strike { width:94px; height:94px; }
  #mobile .touchactions .touch-dodge { width:50px; height:50px; }
  #mobile .touchactions .touch-jump { left:58px; width:50px; height:50px; }
  #mobile #touch-skill-0 { width:56px; height:56px; right:102px; bottom:84px; }
  #mobile #touch-skill-1 { width:56px; height:56px; right:14px; bottom:106px; }
}