/* V08 (Claude) — in-game screen fit.
   Desktop/landscape: tall playfield in the middle, survival rails on both sides.
   Phone/portrait: near-square playfield, compact status, thumb rows. One screen, no page scroll.
   Applies only while body.in-game (any phase after the intro). Intro/landing layout is unchanged. */

html body.in-game{overflow:hidden}
html body.in-game .eyebrow,html body.in-game .field-guide,html body.in-game footer{display:none}
html body.in-game .masthead{height:44px;width:calc(100% - 24px)}
html body.in-game main{width:calc(100% - 24px);padding:0 0 8px;margin:0 auto}
html body.in-game .game.active{
  display:grid;overflow:hidden;min-height:0;
  height:calc(100svh - 52px);
  background:radial-gradient(ellipse at 50% 0,#2a2a1d,#0d1513 60%) ,#0d1513;
  border-radius:14px;
}
html body.in-game .game.active .stage{grid-area:stage;height:auto!important;min-height:0!important;border-radius:10px}
html body.in-game .game.active .hud{grid-area:hud;height:52px!important;min-height:0;padding:6px 18px;gap:22px}
html body.in-game .game.active .controls{display:contents!important}
html body.in-game .game.active .instruction{grid-area:instr}
html body.in-game .game.active .utility{grid-area:util;padding:6px 16px;min-height:0;border-top:1px solid #ffffff10;background:none}
html body.in-game .game.active .inventory-strip{grid-area:inv}
html body.in-game .game.active .action-strip{grid-area:act}

/* Path / dodge buttons float on the bottom corners of the playfield, leaving the centre for Gowoon. */
html body.in-game .game.active .choices{
  grid-area:stage;align-self:end;justify-self:stretch;z-index:7;
  display:flex;justify-content:space-between;gap:12px;margin:0 14px 14px;pointer-events:none
}
html body.in-game .game.active .choices[hidden]{display:none!important}
html body.in-game .game.active .path{
  pointer-events:auto;flex:0 1 31%;min-width:0;min-height:58px;padding:10px 14px;
  background:linear-gradient(#1c2c25e8,#101b17f0);border:1px solid #c9b07a7a;border-radius:10px;
  box-shadow:0 8px 24px #000a,inset 0 1px #ffe6a81f;backdrop-filter:blur(3px)
}
html body.in-game .game.active .path:hover:not(:disabled){background:linear-gradient(#2c4031f0,#18271ff5);border-color:#ecd08f}
html body.in-game .game.active .path[data-clue=warm]{border-color:#f1c46d;box-shadow:0 0 22px #f0be6555,0 8px 24px #000a}
html body.in-game .game.active .path[data-clue=cold]{border-color:#6fa2b3}
html body.in-game .game.active .path strong{white-space:normal;line-height:1.25}

/* The speech card sits top-left under the chapter title so it never fights the path buttons. */
html body.in-game .game.active .speech{top:78px;bottom:auto!important;left:16px!important;transform:none!important;text-align:left;
  min-width:0!important;max-width:min(330px,38%);padding:8px 13px}
html body.in-game .game.active .speech p{font-size:13px;line-height:1.45}

/* Shared rail card look (bronze-and-iron, taken from the original survival HUD). */
html body.in-game .game.active .health-stat,html body.in-game .game.active .fullness-stat,html body.in-game .game.active .digestion-stat,
html body.in-game .game.active .instruction,html body.in-game .game.active .inventory-strip,html body.in-game .game.active .action-strip{
  background:radial-gradient(ellipse at 50% 0,#4d3e2622,transparent 70%),linear-gradient(#1b1e1b,#0d1312 60%,#1a1b16);
  border:1px solid #6a5a3e;border-radius:10px;box-shadow:inset 0 1px #d6b98018,0 4px 14px #0006
}

/* ---------- Desktop / landscape ---------- */
@media (min-width:900px) and (min-aspect-ratio:1/1){
  html body.in-game .game.active{
    --rail-l:clamp(190px,14.5vw,262px);--rail-r:clamp(206px,15.5vw,282px);--gap:12px;
    --stage-h:calc(100svh - 52px - 52px - 40px - 24px);
    width:min(100%,calc(var(--rail-l) + var(--rail-r) + var(--stage-h) * 1.62 + var(--gap) * 2 + 24px));
    margin:0 auto;padding:0 12px 0;
    grid-template-columns:var(--rail-l) minmax(0,1fr) var(--rail-r);
    grid-template-rows:auto auto auto auto minmax(0,1fr) auto;
    grid-template-areas:
      "hud hud hud"
      "health stage belly"
      "digest stage inv"
      "instr stage act"
      ". stage ."
      "util util util";
    column-gap:var(--gap);row-gap:10px
  }
  html body.in-game .game.active .hud{margin:0 -12px;border-radius:0}
  html body.in-game .game.active .survival-hud{display:contents}
  html body.in-game .game.active .survival-hud:before,html body.in-game .game.active .survival-hud:after{display:none}
  html body.in-game .game.active .health-stat{grid-area:health}
  html body.in-game .game.active .fullness-stat{grid-area:belly}
  html body.in-game .game.active .digestion-stat{grid-area:digest}
  html body.in-game .game.active .health-stat,html body.in-game .game.active .fullness-stat{padding:10px 8px 8px}
  html body.in-game .game.active .portrait-plinth{width:min(150px,100%);height:150px}
  html body.in-game .game.active .digestion-stat{padding:12px 12px 10px;max-width:none}
  html body.in-game .game.active .digestive-path{grid-template-columns:34px minmax(0,1fr) 38px;gap:6px}
  html body.in-game .game.active .digestive-icon,html body.in-game .game.active .digestive-icon.gas-icon{width:100%;height:36px}
  html body.in-game .game.active .digestive-title{font-size:13px;margin-bottom:7px}
  html body.in-game .game.active .digestive-numbers b{font-size:18px}
  html body.in-game .game.active .resource-tip{font-size:9px;margin-top:8px;line-height:1.5}
  html body.in-game .game.active .instruction{max-width:none;padding:12px 14px;align-self:start}
  html body.in-game .game.active .instruction p{font-size:12px;line-height:1.55}
  html body.in-game .game.active .inventory-strip{grid-template-columns:1fr 1fr;padding:8px;gap:7px;align-self:start}
  html body.in-game .game.active .inventory-strip button{min-height:62px;padding:6px 4px;flex-direction:column;gap:3px;display:flex}
  html body.in-game .game.active .inventory-strip button>span{gap:2px;text-align:center}
  html body.in-game .game.active .inventory-strip small{font-size:8px;letter-spacing:.2px}
  html body.in-game .game.active .inventory-strip strong{font-size:11px}
  html body.in-game .game.active .inventory-strip .food-button{gap:2px}
  html body.in-game .game.active .action-strip{display:grid;grid-template-columns:1fr;gap:7px;padding:8px;align-self:start}
  html body.in-game .game.active .action-strip button{min-height:44px;font-size:12px;white-space:nowrap}
  html body.in-game .game.active .action-strip span{font-size:10px;line-height:1.45;color:#a9b3a2;padding:2px 2px 0}
  html body.in-game .game.active .utility{margin:0 -12px}
  /* Short desktop windows (1366×768, 1280×720): shrink portraits first, then hide the long tips. */
  @media (max-height:820px){
    html body.in-game .game.active .portrait-plinth{height:116px;width:min(116px,100%)}
    html body.in-game .game.active .portrait-caption strong{font-size:22px}
    html body.in-game .game.active .instruction p{font-size:11px}
    html body.in-game .game.active .resource-tip{display:none}
    html body.in-game .game.active .inventory-strip button{min-height:54px}
    html body.in-game .game.active .action-strip button{min-height:38px}
  }
  @media (max-height:700px){
    html body.in-game .game.active .portrait-plinth{height:84px;width:min(84px,100%)}
    html body.in-game .game.active .instruction{display:none}
    html body.in-game .game.active .action-strip span{display:none}
    html body.in-game .game.active .digestive-title{display:none}
  }
}

/* ---------- Phone / portrait ---------- */
@media (max-width:899px),(max-aspect-ratio:1/1){
  html body.in-game .masthead{height:40px}
  html body.in-game .preview-tag{display:none}
  html body.in-game main{width:calc(100% - 12px)}
  html body.in-game .game.active{
    height:calc(100svh - 46px);
    grid-template-columns:minmax(0,1fr);
    grid-template-rows:auto minmax(0,1fr) auto auto auto auto;
    grid-template-areas:"hud" "stage" "status" "inv" "act" "util";
    row-gap:6px;padding:0 0 4px;border-radius:12px
  }
  html body.in-game .game.active .hud{height:44px!important;padding:4px 10px;gap:10px}
  html body.in-game .game.active .hud .timer{display:flex}
  html body.in-game .game.active .hud .small-stat strong{font-size:15px}
  html body.in-game .game.active .stage{border-radius:0}
  html body.in-game .game.active .instruction{display:none}
  html body.in-game .game.active .survival-hud{grid-area:status;display:grid;grid-template-columns:70px minmax(0,1fr) 70px;gap:6px;
    padding:4px 8px!important;margin:0 6px;border-radius:10px;border:1px solid #6a5a3e}
  html body.in-game .game.active .survival-hud:before,html body.in-game .game.active .survival-hud:after{display:none}
  html body.in-game .game.active .health-stat,html body.in-game .game.active .fullness-stat,html body.in-game .game.active .digestion-stat{background:none;border:0;box-shadow:none;padding:0}
  html body.in-game .game.active .portrait-plinth{width:62px;height:62px}
  html body.in-game .game.active .portrait-caption{flex-direction:row;gap:4px}
  html body.in-game .game.active .portrait-caption strong{font-size:16px}
  html body.in-game .game.active .portrait-caption span{font-size:7px;letter-spacing:.4px}
  html body.in-game .game.active .digestion-stat{padding-top:2px!important}
  html body.in-game .game.active .digestive-path{grid-template-columns:26px minmax(0,1fr) 30px;gap:4px}
  html body.in-game .game.active .digestive-icon,html body.in-game .game.active .digestive-icon.gas-icon{width:100%;height:30px}
  html body.in-game .game.active .digestive-title{font-size:11px;margin-bottom:5px;line-height:1}
  html body.in-game .game.active .sugar-meter{height:12px;padding:2px}
  html body.in-game .game.active .digestive-numbers{margin-top:5px}
  html body.in-game .game.active .digestive-numbers b{font-size:15px}
  html body.in-game .game.active .digestive-numbers small{font-size:7px}
  html body.in-game .game.active .resource-tip{display:none}
  html body.in-game .game.active .inventory-strip{grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:5px;margin:0 6px}
  html body.in-game .game.active .inventory-strip button{min-height:50px;padding:3px 2px;display:flex;flex-direction:column;gap:1px}
  html body.in-game .game.active .inventory-strip small{display:none}
  html body.in-game .game.active .inventory-strip strong{font-size:10px;white-space:nowrap}
  html body.in-game .game.active .inventory-strip kbd{display:none}
  html body.in-game .game.active .inventory-icon{width:26px;height:26px}
  html body.in-game .game.active .action-strip{display:grid;grid-template-columns:1fr 1.25fr 1fr;gap:5px;padding:5px;margin:0 6px}
  html body.in-game .game.active .action-strip button{min-height:42px;font-size:10px;padding:4px;white-space:nowrap}
  html body.in-game .game.active .action-strip span{display:none}
  html body.in-game .game.active .utility{padding:2px 10px}
  html body.in-game .game.active .utility p{display:none}
  html body.in-game .game.active .audio{width:100%;gap:8px}
  html body.in-game .game.active .audio input{flex:1}
  html body.in-game .game.active .audio button{padding:5px 10px;min-height:30px}
  html body.in-game .game.active .choices{margin:0 8px 8px;gap:8px}
  html body.in-game .game.active .path{flex:0 1 38%;min-height:50px;padding:7px 9px;gap:7px}
  html body.in-game .game.active .path-arrow{font-size:20px}
  html body.in-game .game.active .path small{font-size:7px;margin-bottom:2px}
  html body.in-game .game.active .path strong{font-size:11px}
  html body.in-game .game.active .path kbd{display:none}
  html body.in-game .game.active .speech{top:56px;left:8px!important;max-width:46%;padding:6px 9px}
  html body.in-game .game.active .speech p{font-size:11px}
  html body.in-game .game.active .chapter{top:10px;left:10px}
  html body.in-game .game.active .chapter strong{font-size:15px}
  html body.in-game .game.active .location{top:10px;right:8px}
  html body.in-game .game.active .travel-status{top:44px;right:8px;width:118px}
  html body.in-game .game.active .encounter{top:96px;left:auto;right:8px;transform:none;width:132px;text-align:right}
  html body.in-game .game.active .comic-pop{font-size:22px;-webkit-text-stroke:3px #121614}
  html body.in-game .game.active .comic-pop.secondary{font-size:19px}
  html body.in-game main{padding-bottom:2px}
  html body.in-game .game.active{height:calc(100svh - 44px)}
}
/* Very short phones (iPhone SE class): drop the status title and tighten rows. */
@media (max-width:899px) and (max-height:700px){
  html body.in-game .game.active .digestive-title{display:none}
  html body.in-game .game.active .portrait-plinth{width:50px;height:50px}
  html body.in-game .game.active .inventory-strip button{min-height:44px}
  html body.in-game .game.active .action-strip button{min-height:38px}
}
/* Landscape phones: rails would be too short, so keep the portrait stack but let it scroll. */
@media (orientation:landscape) and (max-height:520px){
  html body.in-game{overflow:auto}
  html body.in-game .game.active{height:auto;grid-template-rows:auto 78svh auto auto auto auto}
}

/* Candy & corn inventory icons (drawn from the existing props sheet). */
.inventory-strip .food-button .inventory-icon{display:block}

/* Dodge window: the clear side lights up when a dodge will actually work. */
html body.in-game .game.active .path[data-now=true]{border-color:#a8ec7f;box-shadow:0 0 26px #9be37a99,0 8px 24px #000a;animation:dodge-now .5s ease-in-out infinite alternate}
html body.in-game .game.active .path[data-now=true] small{color:#c9f7a8}
@keyframes dodge-now{to{transform:translateY(-3px);box-shadow:0 0 38px #b5f58bcc,0 8px 24px #000a}}
@media(prefers-reduced-motion:reduce){html body.in-game .game.active .path[data-now=true]{animation:none}}

/* ---------- V08 map: hand-inked parchment ---------- */
dialog.map-dialog{width:min(560px,calc(100vw - 20px));max-height:92dvh;padding:18px 18px 14px;border:0;border-radius:6px;color:#3a2410;
  background:linear-gradient(135deg,#ecd9ae,#d8b77b 60%,#c9a265);box-shadow:0 0 0 2px #5b3a1a,0 0 0 7px #2a1a0c,0 30px 90px #000d,inset 0 0 60px #7a4a1c66}
dialog.map-dialog::backdrop{background:radial-gradient(ellipse at center,#0a0f0dcc,#000e);backdrop-filter:blur(4px)}
dialog.map-dialog header{border-bottom:2px dashed #7a5428;padding-bottom:8px}
dialog.map-dialog h2{font:400 30px/1 'Gowoon Comic',Impact,'Apple SD Gothic Neo',sans-serif;letter-spacing:1px;color:#4a2a0e;text-shadow:1px 1px 0 #f3e2b8}
dialog.map-dialog header button{background:#7b2d1a;color:#ffe6c4;border:2px solid #4a170b;border-radius:50%;width:54px;height:54px;padding:0;font:700 11px/1 Arial;box-shadow:0 3px 0 #3a1208,inset 0 2px 6px #ffffff33;transform:rotate(-8deg)}
dialog.map-dialog header button:hover{background:#9a3a22}
dialog.map-dialog p{color:#5a3a1a;font:italic 13px/1.5 Georgia,'Apple SD Gothic Neo',serif;margin:10px 2px}
dialog.map-dialog .map-scroll{height:auto;max-height:min(64dvh,620px);background:#d9bd85;border:2px solid #6b4520;border-radius:3px;box-shadow:inset 0 0 18px #5a3410aa}
dialog.map-dialog .map-foot{color:#4a2a0e;font:12px Georgia,'Apple SD Gothic Neo',serif;justify-content:center}
.map-corn path{fill:none;stroke:#7a5226;stroke-width:1.6;stroke-linecap:round;opacity:.55}
.map-corn ellipse{fill:#b8862f;opacity:.55}
.map-zone{font:700 11px 'Apple SD Gothic Neo',Georgia,serif;fill:#6a3f16;letter-spacing:.6px}
.map-zone-line{stroke:#8a6230;stroke-width:1.2;stroke-dasharray:3 6;opacity:.8}
.map-entrance{font:700 12px 'Apple SD Gothic Neo',Georgia,serif;fill:#5a3410;letter-spacing:2px}
.map-trail{fill:none;stroke:#4a2a0e;stroke-width:3.4;stroke-linecap:round;stroke-dasharray:.1 9;opacity:.9}
.map-pending{fill:none;stroke:#8a5a26;stroke-width:3;stroke-linecap:round;stroke-dasharray:.1 8;opacity:.75}
.map-node{fill:#f1dfb4;stroke:#4a2a0e;stroke-width:2}
.map-node-n{font:700 11px Georgia,serif;fill:#4a2a0e}
.map-detour{fill:#f3d9c8;stroke:#9b2a1a;stroke-width:2;stroke-dasharray:3 2}
.map-detour-q{font:700 13px Georgia,serif;fill:#9b2a1a}
.map-current{fill:#ffe9a8;stroke:#7a3d0e;stroke-width:2.5}
.map-current-icon{font-size:12px}
.map-glow{mix-blend-mode:multiply}
.map-arrow{fill:none;stroke:#9b2a1a;stroke-width:2;stroke-linecap:round}
.map-here{font:400 15px 'Gowoon Comic',Impact,'Apple SD Gothic Neo',sans-serif;fill:#9b2a1a;letter-spacing:.5px}
.map-cloud{fill:#f2ead8;opacity:.85}
.map-mist{font:700 11px 'Apple SD Gothic Neo',Georgia,serif;fill:#6d5a40;letter-spacing:1.5px}
.map-mist-q{font:400 22px 'Gowoon Comic',Impact,sans-serif;fill:#8a7556;letter-spacing:6px}
.map-exit{font:400 20px 'Gowoon Comic',Impact,sans-serif;fill:#b0306a}
@media(max-width:600px){dialog.map-dialog{padding:12px}dialog.map-dialog h2{font-size:24px}dialog.map-dialog header button{width:46px;height:46px}}