/*
 * PLAYER_RESPONSIVE_V8
 * Canonical mobile viewport and landscape rules.
 * This file is copied into every game source and web release by launcher.pyw.
 */
:root{
  --player-viewport-width:100vw;
  --player-viewport-height:100vh;
  --player-safe-width:calc(var(--player-viewport-width) - env(safe-area-inset-left,0px) - env(safe-area-inset-right,0px));
  --player-safe-height:calc(var(--player-viewport-height) - env(safe-area-inset-top,0px) - env(safe-area-inset-bottom,0px));
}

@supports(height:100dvh){
  :root{--player-viewport-height:100dvh}
}

html,body,#root{
  width:var(--player-viewport-width);
  height:var(--player-viewport-height);
  min-height:0;
  overflow:hidden;
  margin:0;
}

#root{
  box-sizing:border-box;
  padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);
}

.game-shell.canvas-landscape{
  width:min(var(--player-safe-width),calc(var(--player-safe-height) * 1.7777778));
  height:auto;
  aspect-ratio:16 / 9;
  min-width:0;
  min-height:0;
}

.game-shell.canvas-portrait{
  width:min(var(--player-safe-width),calc(var(--player-safe-height) * .5625));
  height:auto;
  aspect-ratio:9 / 16;
  min-width:0;
  min-height:0;
}

/* Phone and small-tablet landscape: use the available height, not a 600px guess. */
@media (orientation:landscape) and (max-height:720px),
       (orientation:landscape) and (max-width:1024px) and (hover:none){
  #root{display:grid;place-items:center}

  .game-shell.canvas-landscape{
    width:min(var(--player-safe-width),calc(var(--player-safe-height) * 1.7777778));
    height:auto;
    margin:0;
  }

  .topbar{
    height:clamp(42px,11vh,54px);
    grid-template-columns:minmax(0,1fr) auto auto;
    gap:clamp(6px,1.5vw,14px);
    padding:3px max(10px,env(safe-area-inset-right)) 3px max(10px,env(safe-area-inset-left));
  }
  .brand{min-width:0;gap:10px}
  .brand strong{max-width:34vw;overflow:hidden;text-overflow:ellipsis;font-size:clamp(17px,3.4vh,23px);white-space:nowrap}
  .brand span,.play-scene,.chapter-rail,.objective{display:none!important}
  .stats{gap:clamp(7px,1.6vw,16px);font-size:10px;white-space:nowrap}
  .stats span{font-size:10px}.stats b{margin-left:3px;font-size:14px}
  .topbar nav{gap:5px;white-space:nowrap}
  .topbar nav button{min-height:30px;padding:4px 8px;font-size:10px}

  .dialogue-panel,
  .dialogue-panel.character-mode,
  .dialogue-panel.narration-mode{
    left:max(10px,env(safe-area-inset-left));
    right:max(10px,env(safe-area-inset-right));
    bottom:max(7px,env(safe-area-inset-bottom));
    width:auto;
    max-width:none;
    min-height:0;
    max-height:min(52%,calc(var(--player-safe-height) - 58px));
    padding:20px 14px 9px;
    overflow-y:auto;
    transform:none;
  }
  .dialogue-panel .speaker{top:-14px;left:14px;min-width:88px;padding:4px 10px;font-size:14px}
  .dialogue-panel.nameplate-right .speaker,.dialogue-panel.speaker-right .speaker{left:auto;right:14px}
  .dialogue-panel .line{min-height:0;margin:2px 3px 7px;font-size:clamp(12px,3.2vh,15px);line-height:1.5}
  .dialogue-panel .choice-list{grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:6px;margin-top:6px}
  .dialogue-panel .choice-list button{min-height:34px;padding:5px 8px;font-size:11px}

  .cover-category{top:max(12px,env(safe-area-inset-top))}
  .cover-copy{bottom:max(18px,env(safe-area-inset-bottom));width:min(540px,52vw)}
  .cover-copy.align-left{left:max(24px,calc(env(safe-area-inset-left) + 14px))}
  .cover-copy.align-right{right:max(24px,calc(env(safe-area-inset-right) + 14px))}
  .cover-copy h1{margin-bottom:12px;font-size:clamp(30px,8vh,52px)}
  .cover-copy small{margin-bottom:6px;font-size:clamp(11px,2.8vh,14px)}
  .cover-start{min-width:130px;padding:7px 17px;font-size:12px}

  .inspection-modal .inspection-card{width:min(88%,calc(100% - 32px));height:min(82%,calc(100% - 24px))}
  .inspection-return{top:max(8px,env(safe-area-inset-top));right:max(8px,env(safe-area-inset-right))}
}

@media (orientation:landscape) and (max-height:430px){
  .topbar{height:40px}
  .topbar nav button{min-height:27px;padding:3px 7px}
  .dialogue-panel,.dialogue-panel.character-mode,.dialogue-panel.narration-mode{max-height:58%;padding-top:18px}
  .dialogue-panel .line{font-size:12px;line-height:1.42}
}

/* Portrait controls share the top toolbar, clear of dialogue and continue. */
.canvas-portrait{--portrait-toolbar-height:32px}
.canvas-portrait:has(.stats [data-stat]){--portrait-toolbar-height:52px}
.canvas-portrait .topbar{height:var(--portrait-toolbar-height);grid-template-columns:minmax(0,1fr) auto;grid-template-rows:1fr;gap:3px;padding:2px 8px}
.canvas-portrait .brand{min-width:0;height:auto}
.canvas-portrait .brand strong{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:16px;line-height:1.3;padding:0}
.canvas-portrait .stats:not(:has([data-stat])){display:none}
.canvas-portrait .chapter-rail{display:none}
.canvas-portrait .topbar nav{display:flex;grid-column:2;grid-row:1;gap:4px}
.canvas-portrait .topbar nav button{display:none;min-height:24px;height:24px;padding:2px 6px;font-size:10px}
.canvas-portrait .topbar nav button[data-action="save"],
.canvas-portrait .topbar nav button[data-action="load"]{display:inline-block}
.canvas-portrait .stats{grid-column:1/3;grid-row:2}

.canvas-portrait .topbar nav .auto-play{
  position:static;
  display:inline-flex;
  flex:0 0 auto;
  height:24px;
  min-width:40px;
  padding:0 9px;
  font-size:10px;
}

/* Compact portrait typography across dialogue modes. */
.canvas-portrait .dialogue-panel .line{font-size:14px;line-height:1.6}
.canvas-portrait .dialogue-panel .speaker{font-size:14px}

/* Anchor portrait canvas at the top instead of centering letterbox space. */
#root:has(.canvas-portrait){display:grid;place-items:start center}
.game-shell.canvas-portrait{margin:0 auto}
.canvas-portrait .dialogue-panel .line{min-height:2lh}
.canvas-portrait .cover-category{display:inline-flex;align-items:center;justify-content:center;gap:8px;top:3%;max-width:90%;font-size:10px;letter-spacing:.12em;white-space:nowrap}
.canvas-portrait .cover-category::before,.canvas-portrait .cover-category::after{flex:0 0 14px;width:14px;margin:0}
.canvas-portrait .cover-copy.no-cover-title:has(small:empty){bottom:5%;width:76%;max-width:76%}
.canvas-portrait .cover-copy.no-cover-title:has(small:empty)::before{display:none}
.canvas-portrait .cover-start{display:block;width:100%;min-width:0}
.canvas-portrait .cover-screen[style*="background-image"] .cover-shade{background:linear-gradient(180deg,rgba(3,5,8,.08),transparent 42%,rgba(2,4,7,.22))}