:root {
  color-scheme:dark;
  --bg:#0b1017;
  --panel:#111923;
  --line:#25303a;
  --text:#e0e7eb;
  --muted:#89959f;
  --accent:#d8a56c;
  --accent-hi:#f0bf88;
  --mono:ui-monospace,SFMono-Regular,Consolas,monospace;
}
* {
  box-sizing:border-box;
}
body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:Inter,ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  font-size:13px;
  line-height:1.5;
}
button,input,select {
  font:inherit;
}
button {
  cursor:pointer;
}
/* Game panels and controls are touch surfaces, not selectable page text. */
#stage {
  -webkit-user-select:none;
  user-select:none;
  -webkit-touch-callout:none;
}
#stage :is(input, textarea, [contenteditable="true"], [contenteditable=""], [contenteditable="plaintext-only"]) {
  -webkit-user-select:text;
  user-select:text;
  -webkit-touch-callout:default;
}
button:focus-visible,input:focus-visible,select:focus-visible,a:focus-visible {
  outline:2px solid var(--accent-hi);
  outline-offset:4px;
}
button {
  transition:background .15s,border-color .15s,transform .15s;
}
button:active {
  transform:translateY(1px);
}
svg {
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  flex:none;
}
.app {
  max-width:1540px;
  margin:0 auto;
  padding:29px 36px 22px;
}
.masthead {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding-bottom:24px;
  border-bottom:1px solid var(--line);
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
}
.mark {
  width:36px;
  height:39px;
  color:var(--accent);
  padding:3px;
  stroke-width:1.2;
}
.eyebrow,.label,.tiny {
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:1.55px;
  text-transform:uppercase;
}
.eyebrow {
  color:var(--accent);
  margin-bottom:2px;
}
.brand-name {
  font-size:15px;
  letter-spacing:.45px;
  font-weight:550;
}
.header-meta {
  color:var(--muted);
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:.8px;
}
.intro {
  display:flex;
  justify-content:space-between;
  align-items:end;
  gap:20px;
  padding:29px 0 23px;
}
.intro h1 {
  font-size:30px;
  letter-spacing:-.9px;
  font-weight:500;
  margin:0 0 5px;
}
.intro p {
  margin:0;
  color:var(--muted);
  font-size:13px;
}
.button {
  background:#17212b;
  border:1px solid #34414c;
  color:var(--text);
  border-radius:5px;
  padding:10px 13px;
  display:inline-flex;
  gap:9px;
  align-items:center;
  justify-content:center;
  white-space:nowrap;
}
.button:hover {
  background:#21303c;
  border-color:#576572;
}
.button.primary {
  background:var(--accent);
  border-color:var(--accent);
  color:#211c16;
  font-weight:650;
  padding:12px 14px;
  width:100%;
  margin-top:12px;
}
.button.primary:hover {
  background:var(--accent-hi);
  border-color:var(--accent-hi);
}
.layout {
  display:grid;
  grid-template-columns:minmax(0,1fr) 272px;
  gap:23px;
  align-items:start;
}
.viewer {
  min-width:0;
}
.scene-frame {
  border:1px solid #34404b;
  border-radius:7px;
  overflow:hidden;
  background:#04080e;
  box-shadow:0 20px 60px #0003;
}
.frame-top,.frame-bottom {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:11px 15px;
  background:#111923;
  min-height:40px;
}
.frame-top .label {
  color:#a9b4bc;
  font-size:9px;
}
.seed-label {
  font:10px var(--mono);
  color:#c8aa88;
  max-width:230px;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stage {
  position:relative;
  aspect-ratio:8/5;
  overflow:hidden;
  background:#02050b;
}
#scene {
  display:block;
  width:100%;
  height:100%;
  image-rendering:pixelated;
  image-rendering:crisp-edges;
  cursor:crosshair;
  touch-action:manipulation;
}
.stage::after {
  position:absolute;
  inset:0;
  pointer-events:none;
  content:"";
  box-shadow:inset 0 0 0 1px #ffffff04;
}
.frame-bottom {
  padding:7px 12px;
  color:#92a0ab;
  font:10px var(--mono);
}
.live-dot {
  display:inline-block;
  width:5px;
  height:5px;
  border-radius:100%;
  background:#96b3a1;
  margin-right:7px;
  vertical-align:1px;
}
.frame-actions {
  display:flex;
  gap:4px;
  align-items:center;
}
.icon-btn {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:29px;
  height:27px;
  border:1px solid transparent;
  background:transparent;
  color:#98a6b2;
  border-radius:3px;
}
.icon-btn:hover {
  color:#eee;
  border-color:#40505f;
  background:#1c2936;
}
.icon-btn svg {
  width:15px;
  height:15px;
}
.hint {
  display:flex;
  gap:9px;
  align-items:flex-start;
  margin:15px 1px 0;
  font-size:11px;
  color:#82919d;
}
.hint svg {
  width:14px;
  height:14px;
  margin-top:2px;
  color:#b0997e;
}
.specs {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:20px;
  margin-top:27px;
  padding-top:20px;
  border-top:1px solid var(--line);
}
.spec {
  display:flex;
  gap:11px;
  align-items:flex-start;
}
.spec-num {
  font:10px var(--mono);
  color:#8a7056;
  padding-top:3px;
}
.spec-title {
  font-size:11px;
  color:#bcc6cd;
  margin-bottom:4px;
}
.spec-desc {
  font-size:10px;
  color:#768792;
  line-height:1.6;
}
.controls {
  border:1px solid var(--line);
  border-radius:6px;
  padding:18px 18px 16px;
  background:#101720;
}
.panel-title {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:21px;
}
.panel-title .label {
  font-size:10px;
  color:#c0c9d0;
}
.text-btn {
  padding:0;
  background:transparent;
  border:0;
  color:#8d9ca8;
  font-size:10px;
}
.text-btn:hover {
  color:var(--accent);
}
label.field {
  display:block;
  margin-bottom:8px;
  color:#aebac3;
  font-size:11px;
}
.seed-row {
  display:flex;
  gap:6px;
}
.seed-row input {
  min-width:0;
  width:100%;
  font:11px var(--mono);
  letter-spacing:.4px;
}
.input,select {
  height:36px;
  background:#0b121b;
  border:1px solid #2d3a46;
  border-radius:4px;
  color:#c8d2da;
  padding:0 10px;
  width:100%;
}
input.input:hover,select:hover {
  border-color:#516070;
}
.seed-row button {
  height:36px;
  min-width:36px;
  border:1px solid #2d3a46;
  border-radius:4px;
  background:#18222d;
  color:#c4cdd3;
  display:flex;
  align-items:center;
  justify-content:center;
}
.section {
  border-top:1px solid var(--line);
  padding-top:17px;
  margin-top:19px;
}
.section-head {
  font:9px var(--mono);
  letter-spacing:1.4px;
  color:#7d8d9a;
  margin-bottom:16px;
}
.control-row {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:11px;
  color:#b8c3cb;
  margin-top:17px;
  margin-bottom:6px;
}
.control-row:first-of-type {
  margin-top:0;
}
.value {
  font:10px var(--mono);
  color:var(--accent);
  min-width:37px;
  text-align:right;
}
input[type=range] {
  appearance:none;
  -webkit-appearance:none;
  width:100%;
  height:3px;
  display:block;
  background:#33404b;
  margin:10px 0 18px;
  cursor:pointer;
  border-radius:2px;
}
input[type=range]::-webkit-slider-thumb {
  appearance:none;
  -webkit-appearance:none;
  width:10px;
  height:10px;
  border-radius:2px;
  background:var(--accent);
  border:2px solid #101720;
  box-shadow:0 0 0 1px var(--accent);
}
input[type=range]::-moz-range-thumb {
  width:7px;
  height:7px;
  border-radius:1px;
  background:var(--accent);
  border:1px solid var(--accent);
}
.toggle-row {
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  font-size:11px;
  color:#b8c3cb;
  margin-top:12px;
}
.switch {
  appearance:none;
  -webkit-appearance:none;
  width:27px;
  height:15px;
  border-radius:9px;
  background:#34414d;
  position:relative;
  cursor:pointer;
  margin:0;
  border:1px solid #4a5864;
  flex:none;
}
.switch:after {
  content:"";
  width:9px;
  height:9px;
  left:2px;
  top:2px;
  border-radius:50%;
  background:#8796a2;
  position:absolute;
  transition:transform .15s;
}
.switch:checked {
  background:#785b3e;
  border-color:#b38a5e;
}
.switch:checked:after {
  background:#f2c694;
  transform:translateX(11px);
}
.render-row {
  margin-top:19px;
}
.render-row select {
  font-size:11px;
}
.footer {
  display:flex;
  justify-content:space-between;
  gap:18px;
  color:#657784;
  font:9px var(--mono);
  letter-spacing:.25px;
  margin-top:27px;
  padding-top:16px;
  border-top:1px solid var(--line);
}
kbd {
  font:9px var(--mono);
  color:#9eabb4;
  border:1px solid #34424f;
  border-radius:3px;
  padding:2px 4px;
  margin-right:4px;
}
.key-gap {
  margin-left:12px;
}
#toast {
  position:fixed;
  bottom:26px;
  left:50%;
  transform:translate(-50%,12px);
  opacity:0;
  pointer-events:none;
  border:1px solid #62513e;
  background:#20201f;
  color:#ead3b7;
  border-radius:5px;
  padding:11px 18px;
  transition:opacity .2s,transform .2s;
  font-size:12px;
  z-index:20;
}
#toast.show {
  opacity:1;
  transform:translate(-50%,0);
}
.stage:fullscreen {
  display:flex;
  align-items:center;
  justify-content:center;
  background:#000;
  width:100vw;
  height:100vh;
  aspect-ratio:auto;
}
.stage:fullscreen #scene {
  width:min(100vw,160vh);
  height:min(62.5vw,100vh);
  max-width:none;
  max-height:none;
  aspect-ratio:8/5;
  object-fit:contain;
}
noscript {
  display:block;
  padding:24px;
  background:#432621;
  color:white;
}
@media(min-width:1500px) {
  .intro h1 {
    font-size:34px;
  }
  .layout {
    grid-template-columns:minmax(0,1fr) 288px;
  }
  .controls {
    padding:21px;
  }
}
@media(max-width:1050px) {
  .app {
    padding:20px;
  }
  .layout {
    grid-template-columns:minmax(0,1fr) 246px;
    gap:16px;
  }
  .controls {
    padding:15px;
  }
  .specs {
    gap:12px;
  }
  .spec {
    gap:6px;
  }
  .header-meta {
    display:none;
  }
}
@media(max-width:780px) {
  .app {
    padding:16px;
  }
  .masthead {
    padding-bottom:18px;
  }
  .intro {
    padding:23px 0 18px;
  }
  .intro h1 {
    font-size:26px;
  }
  .intro p {
    max-width:250px;
    font-size:12px;
  }
  .intro .button {
    font-size:11px;
    padding:9px;
  }
  .layout {
    grid-template-columns:1fr;
  }
  .controls {
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 23px;
    padding:19px;
  }
  .panel-title {
    grid-column:1/-1;
    margin-bottom:16px;
  }
  .seed-controls {
    grid-column:1;
  }
  .composition-controls {
    grid-column:2;
    grid-row:2;
  }
  .atmosphere-controls {
    grid-column:1;
    grid-row:3;
  }
  .render-controls {
    grid-column:2;
    grid-row:3;
  }
  .composition-controls.section {
    border:0;
    padding:0;
    margin:0;
  }
  .specs {
    margin:20px 0 6px;
    padding-top:16px;
  }
  .footer {
    margin-top:19px;
    line-height:2;
  }
  .key-gap {
    margin-left:5px;
  }
}
@media(max-width:460px) {
  .header-meta {
    display:none;
  }
  .intro {
    align-items:center;
  }
  .intro h1 {
    font-size:23px;
  }
  .intro p {
    font-size:11px;
    max-width:205px;
  }
  .intro .button span {
    display:none;
  }
  .intro .button {
    padding:10px;
  }
  .frame-top,.frame-bottom {
    padding-left:10px;
    padding-right:10px;
  }
  .frame-bottom {
    font-size:8px;
  }
  .spec-desc {
    font-size:9px;
  }
  .spec-num {
    display:none;
  }
  .controls {
    gap:0 17px;
    padding:16px;
  }
  .control-row,label.field,.toggle-row {
    font-size:10px;
  }
  .section-head {
    font-size:8px;
    letter-spacing:.8px;
  }
  .footer {
    display:block;
  }
  .footer>div+div {
    margin-top:8px;
  }
  .seed-label {
    max-width:160px;
  }
}

  
#scene{cursor:grab;touch-action:none;image-rendering:pixelated}output{font:10px var(--mono);color:var(--accent)}.app{max-width:1600px}.intro{padding-top:25px;padding-bottom:22px}.intro h1{font-weight:500;letter-spacing:-1px;font-size:34px;margin-bottom:4px}.intro p{color:#89959f;max-width:none}.edition{font-family:var(--mono);font-size:10px;letter-spacing:2px;color:var(--accent);border:1px solid #534333;padding:4px 8px;margin-left:13px;vertical-align:middle}.stage{position:relative;aspect-ratio:8/5;background:#05090f;overflow:hidden;touch-action:none;cursor:grab}.stage:active{cursor:grabbing}.stage #scene{display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}.stage:fullscreen{display:flex;align-items:center;justify-content:center;aspect-ratio:auto;cursor:grab}.stage:fullscreen #scene{width:min(100vw,160vh);height:min(100vh,62.5vw);object-fit:contain}.loading{position:absolute;inset:0;background:rgba(5,10,17,.94);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;z-index:20}.loading[hidden]{display:none}.loading small{font:10px var(--mono);letter-spacing:1px;color:#94a3b0}.loading strong{font-weight:400;color:#d5b18c;letter-spacing:1px}.loading-track{height:2px;width:210px;background:#242d32}.loading-bar{height:100%;width:0;background:var(--accent);transition:width .2s}.stage-hud{position:absolute;top:15px;left:16px;right:16px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none;color:#c6cacc;text-shadow:0 2px 8px #000}.zone-name{font:10px var(--mono);letter-spacing:2px;color:#d9c4a9}.zone-small{font:8px var(--mono);letter-spacing:1px;color:#7e8b96;margin-top:5px}.hud-tag{font:8px var(--mono);letter-spacing:1px;padding:4px 7px;border:1px solid #59606366;color:#8d9da7;background:#08101955}.portal-hint{position:absolute;bottom:25px;left:50%;transform:translateX(-50%);font-size:11px;padding:8px 12px;border:1px solid #a5825677;border-radius:3px;background:#0b1017eb;color:#e3c29d;cursor:pointer;white-space:nowrap;max-width:90%;text-overflow:ellipsis;overflow:hidden}.portal-hint[hidden]{display:none}.portal-hint kbd{margin-right:7px}.atlas{border:1px solid var(--line);border-top:0;background:#0d151e;padding:15px 16px 12px}.atlas-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;font:9px var(--mono);letter-spacing:1.4px;color:#7f929f}.atlas-head button{font:9px var(--mono);padding:0;border:none;background:none;color:var(--accent);letter-spacing:0}.map-wrap{position:relative;height:58px;cursor:crosshair;touch-action:none}.map-wrap canvas{width:100%;height:58px;display:block;image-rendering:pixelated}.atlas-caption{display:flex;justify-content:space-between;color:#596c7c;font:8px var(--mono);margin-top:6px}.route{display:flex;gap:5px;margin:13px 0 2px;flex-wrap:wrap}.route button{border:1px solid #2c353e;border-radius:3px;background:#121b23;color:#98a5af;font-size:10px;padding:7px 9px}.route button:hover,.route button.active{background:#24262a;color:#e4be8d;border-color:#64503b}.route .route-number{color:#685845;margin-right:6px;font-family:var(--mono);font-size:9px}.hint{font-size:11px;line-height:1.7;margin-top:13px}.hint kbd{font-size:9px}.explore-bar{display:flex;gap:8px;align-items:center;margin-top:12px}.explore-bar .tool-label{font:9px var(--mono);color:#697987;margin-right:auto}.mode-btn{background:#0f171f;border:1px solid #2a343e;border-radius:3px;color:#8c9dab;font-size:10px;padding:6px 10px}.mode-btn.active{color:#ddbc94;border-color:#67523b;background:#25221f}.touch-controls{display:flex;gap:6px;margin-left:auto}.touch-controls button{background:#151f29;border:1px solid #303e4a;border-radius:3px;color:#b9c8cf;min-width:34px;height:29px;touch-action:none;font:12px var(--mono)}.touch-controls button:active{background:#484033}.touch-controls .interact{font-size:10px;min-width:46px;color:#e1b87f}.controls .section{margin-top:17px;padding-top:15px}.controls .section-head{margin-bottom:10px}.controls{padding:19px}.controls .button.primary{margin-top:10px}.controls .control-row{margin-top:12px}.help-note{font-size:10px;line-height:1.75;color:#6d7d89;margin:9px 0 0}.export-row{display:flex;gap:7px}.export-row button{font-size:10px;padding:7px 9px;flex:1;justify-content:center}.specs{margin-top:19px;margin-bottom:0}.footer{margin-top:22px}.room-select{margin-top:7px}.back-btn{width:100%;text-align:left;padding:7px 9px;border:1px solid #35332f;border-radius:3px;background:#25221e;color:#d3b68d;font-size:10px;margin-bottom:9px}.controls input[type=range]{margin-bottom:0}.frame-bottom{min-height:43px}.gen-busy button:not(#pause){cursor:wait}.scene-frame{border-bottom-left-radius:0;border-bottom-right-radius:0}.avatar-note{font:9px var(--mono);color:#71858b}.key-gap{margin-left:15px}#seedTag{max-width:245px}.frame-top .label{font-size:9px}.header-meta{font-size:9px}.panel-title{margin-bottom:15px}.composition-controls select{margin-bottom:4px}.room-indicator{font-size:9px;color:#697d8d}
@media(max-width:1050px){.app{padding:20px}.controls{padding:14px}.route button{font-size:9px;padding:6px}.intro h1{font-size:30px}.hint{font-size:10px}.header-meta{display:none}.touch-controls button{min-width:29px}}
@media(max-width:780px){.controls{display:block;padding:20px}.intro p{max-width:360px}.intro h1{font-size:29px}.controls{display:grid;grid-template-columns:1fr 1fr;gap:18px 25px}.panel-title{grid-column:1/-1;margin-bottom:0}.controls .section{margin:0;padding:0;border:0}.seed-controls{grid-column:1;grid-row:2}.composition-controls{grid-column:2;grid-row:2}.atmosphere-controls{grid-column:1;grid-row:3}.render-controls{grid-column:2;grid-row:3}.explore-bar{flex-wrap:wrap}.explore-bar .tool-label{display:none}.stage-hud{top:10px;left:10px;right:10px}.zone-name{font-size:8px}.zone-small{font-size:7px}.hud-tag{font-size:7px}.atlas{padding:12px}.portal-hint{font-size:10px;bottom:12px;padding:5px 9px}.hint{margin-bottom:18px}.footer{font-size:8px}.edition{font-size:8px;letter-spacing:1px}.intro p{font-size:11px}}
@media(max-width:460px){.app{padding:13px}.intro{padding-top:21px}.intro h1{font-size:26px}.intro p{max-width:235px;font-size:10px}.edition{margin-left:5px}.frame-top{padding:9px}.atlas-head{font-size:8px}.stage-hud{top:8px;left:8px}.hud-tag{display:none}.route{gap:5px}.route button{font-size:9px;padding:6px 8px}.route-number{display:none}.touch-controls{gap:4px}.touch-controls button{min-width:29px}.mode-btn{font-size:9px;padding:6px 8px}.explore-bar{gap:5px}.controls{padding:15px;gap:17px}.footer .key-gap{margin-left:9px}.hint{font-size:10px}.atlas-caption{font-size:7px}.spec-title{font-size:10px}#genTime{display:none}}
@media(prefers-reduced-motion:reduce){*{transition:none!important;scroll-behavior:auto!important}}
/* NOCTURNE IV — distinct, keyboard-first game mode. */
.intro-actions{display:flex;align-items:center;gap:9px}.play-button{background:#d7a470;border-color:#e1b781;color:#201c17;font-weight:650;padding:12px 19px;box-shadow:0 3px 18px #d7a4700b}.play-button:hover{background:#efbd84;border-color:#efbd84}.play-button svg{fill:currentColor;stroke:none;width:13px}.play-button:disabled{opacity:.55;cursor:wait}.game-ui,.game-touch{display:none}.pause-screen[hidden]{display:none!important}.pause-screen{position:absolute;inset:0;z-index:60;background:#050a10d9;display:flex;align-items:center;justify-content:center;padding:22px;cursor:default;backdrop-filter:blur(3px)}.pause-card{width:min(420px,100%);border:1px solid #64523d;background:linear-gradient(140deg,#192029,#10161d);padding:32px;box-shadow:0 25px 100px #000a;text-align:left}.pause-card .eyebrow{font-size:9px;letter-spacing:3px}.pause-card h2{font-size:30px;letter-spacing:-1px;font-weight:450;margin:14px 0 9px}.pause-card p{font-size:12px;color:#9aa6ae;line-height:1.8;margin:0 0 20px}.pause-card .button{width:100%;margin-top:8px;padding:12px}.pause-card .primary{margin-top:0}.pause-meta{font:9px var(--mono);color:#778690;border-top:1px solid #2b353b;padding-top:18px;margin-top:18px;line-height:1.9}.game-mode{overflow:hidden;overscroll-behavior:none;background:#03070c}.game-mode .app{padding:0;max-width:none}.game-mode .masthead,.game-mode .intro,.game-mode .controls,.game-mode .frame-top,.game-mode .frame-bottom,.game-mode .atlas,.game-mode .explore-bar,.game-mode .hint,.game-mode .specs,.game-mode .footer{display:none}.game-mode .layout{display:block}.game-mode .scene-frame{border:0;border-radius:0;box-shadow:none;overflow:visible}.game-mode .stage{position:fixed;inset:0;width:100vw;height:100vh;height:100dvh;aspect-ratio:auto;z-index:30;cursor:default;background:#03070a;display:flex;align-items:center;justify-content:center}.game-mode .stage #scene{width:min(100vw,160vh);height:min(62.5vw,100vh);width:min(100vw,160dvh);height:min(62.5vw,100dvh);flex:none;object-fit:contain;cursor:default!important;outline:none}.game-mode .stage:after{box-shadow:inset 0 0 80px #0005}.game-mode .stage-hud{left:max(26px,env(safe-area-inset-left));right:max(26px,env(safe-area-inset-right));top:max(24px,env(safe-area-inset-top));z-index:33}.game-mode .zone-name{font-size:11px;letter-spacing:2.8px}.game-mode .zone-small{font-size:9px;color:#b1bcb8;margin-top:8px}.game-mode .hud-tag{display:none}.game-mode .game-ui{display:flex;position:absolute;z-index:34}.game-top-actions{right:max(24px,env(safe-area-inset-right));top:max(20px,env(safe-area-inset-top));gap:8px}.game-top-actions button{border:1px solid #6d624d88;border-radius:3px;background:#0a121ad9;color:#d6b58a;padding:9px 12px;font:10px var(--mono);letter-spacing:.3px}.game-top-actions button:hover{background:#293039}.game-top-actions kbd{color:#b9a78e}.game-bottom{left:26px;right:26px;bottom:max(19px,env(safe-area-inset-bottom));align-items:center;justify-content:space-between;gap:15px;pointer-events:none;text-shadow:0 1px 5px #000}.game-bottom .game-brand{font:10px var(--mono);letter-spacing:3px;color:#bfb5a2}.game-bottom .game-brand small{display:block;letter-spacing:1.3px;font:8px var(--mono);color:#87928f;margin-top:6px}.game-key-hints{font:10px var(--mono);color:#b5b8ae}.game-key-hints kbd{color:#d9c4a5;background:#091017b0;border-color:#65706766;font-size:10px;margin-right:3px}.game-mode .portal-hint{z-index:35;bottom:73px;font-size:12px;padding:9px 15px;background:#0b1017e8;max-width:85%}.game-mode .portal-hint[hidden]{display:none}.game-mode #toast{z-index:90;bottom:83px}.game-mode .loading{z-index:55}.game-touch{position:absolute;z-index:40;left:20px;right:20px;bottom:max(25px,env(safe-area-inset-bottom));align-items:flex-end;justify-content:space-between;gap:15px;pointer-events:none}.game-touch .touch-group{display:flex;gap:10px;align-items:center}.game-touch button{pointer-events:auto;user-select:none;-webkit-user-select:none;touch-action:none;display:flex;align-items:center;justify-content:center;width:55px;height:55px;border:1px solid #85765b99;border-radius:7px;background:#111c27cf;color:#dfc29c;font:19px var(--mono);box-shadow:0 4px 20px #0004}.game-touch button:active,.game-touch button.held{background:#65523bbd;border-color:#d4b482}.game-touch button:disabled{opacity:.3}.game-touch .touch-text{font-size:11px;width:49px}.game-touch .touch-group .touch-run{width:42px;font-size:9px}.game-touch .touch-jump{font-size:24px}.game-mode.paused .game-top-actions,.game-mode.paused .game-touch,.game-mode.paused .portal-hint{visibility:hidden}.game-mode.paused .stage-hud,.game-mode.paused .game-bottom{opacity:.32}
@media(max-width:780px){.intro-actions{flex-direction:column;gap:7px;align-items:stretch}.intro .play-button{padding:10px 13px;font-size:12px}.intro .play-button span{display:inline}.intro .intro-actions #export{padding:6px 9px;font-size:10px}.intro .intro-actions #export span{display:inline}.intro .intro-actions #export svg{width:12px;height:12px}.intro h1{font-size:27px}.pause-card{padding:24px}.game-mode .stage-hud{left:15px;top:18px}.game-mode .zone-name{font-size:9px;letter-spacing:1.5px;max-width:180px}.game-mode .zone-small{font-size:7px;max-width:185px}.game-top-actions{right:13px;top:13px;gap:5px}.game-top-actions button{font-size:9px;padding:8px}.game-top-actions kbd{display:none}.game-key-hints{display:none}}
@media(pointer:coarse),(max-width:820px){.game-mode .game-touch{display:flex}.game-mode .game-bottom{bottom:93px;left:20px}.game-bottom .game-brand{font-size:8px}.game-bottom .game-brand small{font-size:7px}.game-key-hints{display:none}.game-mode .portal-hint{bottom:143px;font-size:11px;padding:8px 12px}.game-mode #toast{bottom:169px}.game-mode .game-top-actions button{min-height:38px}}
@media(max-height:500px) and (orientation:landscape){.game-touch{bottom:13px;left:13px;right:13px}.game-touch button{width:43px;height:43px}.game-touch .touch-group{gap:7px}.game-mode .game-bottom{display:none}.game-mode .portal-hint{bottom:12px;max-width:40%}.game-mode .stage-hud{top:12px}.game-top-actions{top:10px}.game-mode .zone-small{margin-top:4px}.pause-card{width:430px;padding:16px 24px}.pause-card h2{font-size:23px;margin:6px 0}.pause-card p{margin-bottom:8px;font-size:11px}.pause-card .button{padding:8px;margin-top:5px}.pause-meta{font-size:8px;padding-top:9px;margin-top:9px}.game-mode #toast{bottom:68px}}

/* Preserve touch controls on rotation and on hybrid touch/mouse devices. */
.game-mode.touch-device .game-touch{display:flex}.game-mode.touch-device .game-key-hints{display:none}.game-mode.touch-device .game-bottom{bottom:93px;left:20px}.game-mode.touch-device .portal-hint{bottom:143px}.game-mode.touch-device #toast{bottom:169px}.game-rotate{display:none}
@media(max-height:500px) and (orientation:landscape){.game-mode.touch-device .game-bottom{display:none}.game-mode.touch-device .portal-hint{bottom:12px}.game-mode.touch-device #toast{bottom:68px}}
@media(max-width:600px) and (orientation:portrait){.game-mode.touch-device .game-rotate{display:block;position:absolute;top:calc(50% + 31.25vw + 22px);left:20px;right:20px;text-align:center;font:9px var(--mono);letter-spacing:.1px;color:#71837e;pointer-events:none}}

/* IV / Miecz i kości. The generator stays a peaceful, editable background. */
.combat-hud{display:none;position:absolute;top:91px;left:max(26px,env(safe-area-inset-left));z-index:34;width:232px;padding:12px 13px 10px;border:1px solid #84725160;background:linear-gradient(105deg,#10191dec,#111d239c);box-shadow:0 9px 30px #0004;pointer-events:none}
.game-mode .combat-hud{display:block}.vital-head{display:flex;justify-content:space-between;align-items:center;font:9px var(--mono);letter-spacing:1.7px;color:#c6b798;margin-bottom:8px}.vital-head strong{font-size:10px;letter-spacing:1px;color:#ede1c7;font-weight:500}.hp-meter{height:8px;background:#342525;box-shadow:0 0 0 1px #6b594844,inset 0 0 4px #0009;position:relative}.hp-meter:after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(10% - 1px),#111b2140 calc(10% - 1px),#111b2140 10%);pointer-events:none}#hpFill{height:100%;width:100%;background:linear-gradient(0deg,#753f38,#bf8067);box-shadow:inset 0 1px #d2a38760;transition:width .14s ease-out}.low-health #hpFill{background:#c66553}.vital-foot{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:8px}.vital-foot button{font:9px var(--mono);letter-spacing:.3px;background:none;border:0;color:#d6c798;padding:0;pointer-events:auto;touch-action:manipulation}.vital-foot button:disabled{color:#8a9483;cursor:default}.vital-foot .muted{font-size:8px}.vital-foot kbd{font-size:8px;margin-left:3px;color:#b9b298}.flask-symbol{color:#c9d9aa}#killCount{color:#a5aea6;font:8px var(--mono);letter-spacing:.4px}.fight-status{border-top:1px solid #86745433;margin-top:9px;padding-top:7px;font:7px var(--mono);letter-spacing:1.6px;color:#a1afa5}.game-mode.paused .combat-hud{opacity:.3}.game-mode.defeated #pauseTitle{color:#d2b58e}.game-mode.defeated .pause-card{border-color:#9a664d}.game-mode.defeated .pause-screen{background:#0b0e12b8}
.game-touch .touch-actions{display:grid;grid-template-columns:repeat(3,46px);gap:7px}.game-touch .touch-actions button{height:44px;width:46px;font-size:9px;letter-spacing:.3px}.game-touch .touch-actions .touch-attack{grid-column:2/4;width:99px;background:#573f2bcc;border-color:#bf9263a0;font-size:11px}.game-touch .touch-actions .touch-block{grid-column:1;grid-row:2}.game-touch .touch-actions .touch-jump{grid-column:2;font-size:11px;background:#2e4541d9}.game-touch .touch-actions .touch-text{grid-column:3;font-size:8px}.game-touch .touch-actions button.held{background:#ad855480;border-color:#e4c99b}.game-touch .touch-directions{display:grid;grid-template-columns:repeat(3,48px);gap:7px}.game-touch .touch-directions button{width:48px;height:44px}.game-touch .touch-directions .touch-up{grid-column:2;grid-row:1;font-size:9px;line-height:1.4}.game-touch .touch-directions #gameLeft{grid-column:1;grid-row:2}.game-touch .touch-directions #gameRight{grid-column:2;grid-row:2}.game-touch .touch-directions #gameSprint{grid-column:3;grid-row:2;font-size:8px}
@media(max-width:780px){.combat-hud{left:15px;top:69px;width:205px;padding:9px 11px}.vital-head{font-size:8px;margin-bottom:6px}.fight-status{font-size:6px}.game-mode .zone-small{max-width:240px}.game-mode .game-bottom{display:none}}
@media(max-height:500px) and (orientation:landscape){.combat-hud{top:58px;left:15px;padding:8px 10px;width:192px}.fight-status{display:none}.hp-meter{height:6px}.vital-head{margin-bottom:5px;font-size:8px}.vital-foot{margin-top:6px}.game-touch{bottom:12px}.game-touch .touch-actions button,.game-touch .touch-directions button{height:37px}.game-touch .touch-actions,.game-touch .touch-directions{gap:5px}.game-touch .touch-actions .touch-attack{width:97px}.game-mode .portal-hint{bottom:12px;max-width:36%;font-size:10px}.game-mode.touch-device .portal-hint{bottom:12px}.pause-card{max-height:95dvh;overflow:auto}}
@media(max-width:380px){.game-touch{left:10px;right:10px}.game-touch .touch-directions{grid-template-columns:repeat(3,42px)}.game-touch .touch-directions button{width:42px}.combat-hud{width:193px}}


/* IV.1 / Keyboard and mouse configuration. */
#pauseMain[hidden],#bindingsPane[hidden],#bindingCancel[hidden]{display:none!important}
.pause-card{max-height:calc(100dvh - 36px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#74644b #111923}
.pause-card.editing-bindings{width:min(620px,100%);padding:25px 30px}
#bindingsTitle{font-size:26px;margin:9px 0 6px}
#bindingsPane .binding-help{font-size:11px;line-height:1.7;margin:0 0 13px;color:#a0abb0}
#bindingsGrid{display:grid;grid-template-columns:minmax(120px,1.45fr) minmax(84px,1fr) minmax(84px,1fr);gap:5px 9px;align-items:center}
.binding-column{font:8px var(--mono);letter-spacing:1.5px;color:#89968f;margin-bottom:5px}
.binding-column:not(:first-child){text-align:center}
.binding-action{font-size:12px;color:#cfcec2;line-height:1.25;padding:6px 0}
.binding-key{min-width:0;min-height:32px;padding:6px 8px;border:1px solid #454c49;border-radius:3px;background:#151f25;color:#d2c1a1;font:11px var(--mono);text-align:center}
.binding-key:hover{border-color:#bc9769;background:#253039}
.binding-key.listening{border-color:#e3bd89;color:#f4dab8;background:#594730}
.binding-fixed{font:11px var(--mono);text-align:center;color:#a5afa5;padding:8px}
.binding-fixed-note{font:9px var(--mono);text-align:center;color:#74827f}
#bindingsNotice{font-size:11px;line-height:1.5;min-height:33px;margin:13px 0 8px;color:#d9b789}
#bindingCancel{border:0;background:transparent;color:#e4bf8c;font-size:11px;text-decoration:underline;text-underline-offset:3px;padding:3px 0 10px}
.binding-actions{display:flex;gap:10px}
.binding-actions .button{margin-top:0;white-space:normal;min-height:38px;padding:9px 12px;font-size:11px}
#bindingsPane .binding-footer{color:#7e908e;font-size:10px;line-height:1.6;margin:11px 0 0}
#pauseKeyHints kbd{font-size:9px;color:#b8b3a3;padding:0 3px}
.game-bottom .game-key-hints{line-height:1.9;text-align:right}
@media(max-width:520px){.pause-card.editing-bindings{padding:18px 15px}#bindingsGrid{grid-template-columns:minmax(108px,1.25fr) minmax(73px,1fr) minmax(73px,1fr);gap:4px 6px}.binding-action{font-size:11px}.binding-key{font-size:10px}.binding-column{letter-spacing:.5px;font-size:7px}.binding-actions{gap:7px}#bindingsTitle{font-size:23px}}
@media(max-height:500px){.pause-card.editing-bindings{padding:15px 22px}.binding-key{min-height:30px}.pause-card{max-height:calc(100dvh - 20px)}.pause-screen{padding:10px}}


/* LAST LANTERN / campaign-only shell */
body{background:#050a0e;overflow:hidden}.app{padding:0;max-width:none}.scene-frame{border:0;border-radius:0}.stage{width:100vw;height:100dvh}.game-mode .stage{z-index:1}.story-hidden{display:none!important}[hidden]{display:none!important}
#loading{z-index:140;background:rgba(6,13,18,.92)}#toast{z-index:145;max-width:calc(100vw - 30px);text-align:center;white-space:normal;font-size:11px;line-height:1.6}
.story-screen{position:absolute;inset:0;z-index:80;display:flex;align-items:center;padding:clamp(25px,7vw,100px);background:linear-gradient(90deg,rgba(4,11,16,.96) 0%,rgba(5,12,18,.86) 35%,rgba(5,13,20,.34) 80%);overflow:auto}
.title-content{max-width:540px}.story-kicker{font:10px var(--mono);letter-spacing:3.5px;color:#b9a581;text-transform:uppercase}.story-title{font:clamp(42px,6.6vw,85px)/.97 Georgia,serif;font-weight:400;letter-spacing:-2.5px;margin:25px 0 22px;color:#e4ddc9}.story-title em{font-style:normal;color:#bfa676}.story-lead{font-size:15px;line-height:1.9;color:#a9b6b3;max-width:400px;margin:0 0 23px}.title-rule{height:1px;width:76px;background:#977b50;margin:24px 0}.story-meta{font:9px/1.9 var(--mono);letter-spacing:1.3px;color:#81918c}.title-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}.story-button{background:#b8a079;border:1px solid #c9b28a;color:#142024;min-height:44px;padding:12px 21px;font-size:12px;letter-spacing:.25px}.story-button:hover{background:#d2bd97}.story-button.secondary{background:#14232ce0;color:#c8c9b6;border-color:#536054}.story-button.secondary:hover{background:#253640}.story-button:disabled{opacity:.45;cursor:wait}.title-minor{display:flex;gap:20px;margin-top:18px}.title-minor button{background:none;border:0;padding:0;color:#96a69b;font-size:10px;text-decoration:underline;text-underline-offset:4px}.title-footer{margin-top:35px;font:9px var(--mono);color:#6e817e;line-height:1.8}.title-footer span{color:#a8b39e}#menuStatus{margin-top:14px;font-size:12px;line-height:1.6;color:#d3b58b}#continueMeta{display:block;margin-top:14px;font:10px var(--mono);color:#9aaba3}#newConfirm{border:1px solid #8c7352;padding:16px;margin-top:16px;background:#14212a;max-width:390px}#newConfirm p{margin:0 0 13px;color:#c9beaa;font-size:12px}#newConfirm button{margin-right:8px;font-size:11px;min-height:35px;padding:8px 12px}
.title-open .stage-hud,.title-open .combat-hud,.title-open .game-ui,.title-open .game-touch,.title-open .portal-hint,.title-open #questHUD,.title-open #bossHUD,.title-open .game-rotate{display:none!important}.title-open .stage::after{box-shadow:none}.title-open #scene{filter:saturate(.8)}
#questHUD{position:absolute;z-index:34;right:26px;top:86px;width:272px;padding:12px 14px;background:linear-gradient(110deg,#101b21e6,#101c23aa);border:1px solid #6a796148;pointer-events:none}#questChapter{font:8px var(--mono);letter-spacing:1.3px;color:#a9b699;text-transform:uppercase}#questTitle{font-size:12px;line-height:1.6;font-weight:450;color:#e0d6bb;margin:6px 0}#questDirection{font:9px var(--mono);line-height:1.6;color:#96ada8}.quest-track{height:2px;background:#263a3a;margin-top:10px}#questProgress{height:100%;background:#a9aa79;transition:width .4s}#saveStatus{font:7px var(--mono);color:#7d918c;letter-spacing:.6px;margin-top:8px}.game-mode .game-bottom .game-brand small{font-size:8px}.combat-hud{top:86px;width:214px}.game-mode .zone-small{letter-spacing:1px}.game-top-actions{gap:7px}.game-top-actions button{font-size:9px}.game-mode .game-key-hints{font-size:9px}.game-mode .portal-hint{font-size:11px;bottom:72px;max-width:75vw}
#bossHUD{position:absolute;left:50%;top:30px;transform:translateX(-50%);width:min(370px,34vw);z-index:36;pointer-events:none;text-align:center;padding:10px 13px 8px;background:#0b151bc9;border:1px solid #846e475c}#bossName{font:11px Georgia,serif;color:#d9c4a1;letter-spacing:.7px}.boss-track{height:5px;background:#32292b;margin:8px 0 6px}#bossHealth{background:#b08e61;height:100%;transition:width .10s}#bossValue{font:7px var(--mono);color:#9daa9f;float:right}#bossState{font:7px var(--mono);letter-spacing:1px;color:#b4bca7;display:block}#chapterToast{position:absolute;z-index:37;left:50%;top:39%;transform:translate(-50%,-50%);font:22px Georgia,serif;letter-spacing:1px;text-align:center;color:#e4d8b9;padding:22px 38px;background:linear-gradient(90deg,transparent,#0c191de0,transparent);opacity:0;transition:opacity 1s;pointer-events:none;min-width:380px}#chapterToast.visible{opacity:1}
.story-modal{position:absolute;inset:0;z-index:85;background:linear-gradient(0deg,rgba(3,9,13,.83),rgba(5,12,17,.12));display:flex;align-items:flex-end;justify-content:center;padding:26px}.story-dialog{width:min(890px,94vw);max-height:calc(100dvh - 50px);overflow:auto;border:1px solid #8a795d;background:linear-gradient(110deg,#152229f7,#111b22fa);box-shadow:0 24px 120px #0009;padding:22px 28px 18px}.speaker-head{display:grid;grid-template-columns:62px 1fr auto;align-items:center;gap:16px}.speaker-head canvas{width:62px;height:62px;image-rendering:pixelated;border:1px solid #666d5559}.speaker-head h2{font:26px Georgia,serif;font-weight:400;margin:0 0 5px;color:#dcc9a7}.speaker-head small{font:8px var(--mono);letter-spacing:1.3px;color:#9aafa6;text-transform:uppercase}#dialoguePage{font:10px var(--mono);color:#819a92}#dialogueText{font-size:15px;line-height:1.85;color:#d4d4c5;margin:20px 0 16px;white-space:pre-line;min-height:75px}.dialogue-actions{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:8px}.dialogue-actions .story-button{min-height:36px;padding:8px 18px}#dialogueSkip,#dialogueClose{background:none;border:0;font:10px var(--mono);color:#869b92;padding:8px 0}#dialogueSkip:hover,#dialogueClose:hover{color:#d4c299}.dialogue-navigation{display:flex;gap:20px;align-items:center}.dialogue-keys{font:9px var(--mono);color:#6d8983}#dialogueChoices{display:flex;gap:9px;flex-wrap:wrap}.story-choice{padding:11px 17px;border:1px solid #88917288;background:#203139;color:#dfd8ba;font-size:12px;line-height:1.6}.story-choice:hover{background:#3e4b40;border-color:#c4b988}#dialogueHint{margin:8px 0;font-size:12px;line-height:1.6;color:#d0b786}.dialogue-open .game-touch,.journal-open .game-touch,.ending-open .game-touch{display:none!important}.dialogue-open #portalHint,.journal-open #portalHint,.ending-open #portalHint{display:none!important}.dialogue-open #questHUD,.dialogue-open .combat-hud,.journal-open #questHUD,.journal-open .combat-hud{opacity:.35}.dialogue-open #chapterToast{opacity:0}
.journal-modal{position:absolute;inset:0;z-index:95;background:#030a10dc;backdrop-filter:blur(3px);padding:30px;display:flex;align-items:center;justify-content:center}.journal-paper{background:#132129;border:1px solid #79806c75;width:min(920px,94vw);max-height:calc(100dvh - 55px);overflow:auto;padding:28px 34px;scrollbar-width:thin;scrollbar-color:#697a64 #10202a}.journal-top{display:flex;align-items:center;justify-content:space-between;gap:16px}.journal-paper h2{font:32px Georgia,serif;font-weight:400;margin:8px 0 21px;color:#dfd7be}.journal-paper h3{font:17px Georgia,serif;font-weight:400;margin:25px 0 13px;color:#c0b690}.journal-paper p{font-size:13px;line-height:1.9;color:#b7c1b8}.journal-paper summary{font-size:12px;color:#d0c5a4;cursor:pointer;padding:13px 0;line-height:1.6}.journal-paper details{border-top:1px solid #384a4890}.journal-paper details p{font-size:12px;margin:14px 0}.journal-current{padding:17px 20px;background:#203039;border-left:2px solid #b3a779}.journal-current h3{margin:0 0 8px;color:#e1d6b3}.journal-current p{margin:0}.journal-inventory{font:10px/1.9 var(--mono);color:#a2b2a0;padding:13px 0;border-bottom:1px solid #334a4766}.journal-grid{display:grid;grid-template-columns:1fr 250px;gap:28px}.journal-grid aside p{font-size:11px;line-height:1.85}.journal-grid aside b{font-weight:500;color:#c1c4ac}.journal-small{font:9px/1.7 var(--mono);color:#899b8d}
#endingOverlay{z-index:92;justify-content:center;text-align:center;background:linear-gradient(0deg,#14272bea,#101f2bf0)}.ending-content{max-width:670px;margin:auto}.ending-content h1{font:clamp(37px,5vw,64px) Georgia,serif;font-weight:400;letter-spacing:-1.5px;color:#e7dcc1;margin:20px 0}.ending-content p{font-size:14px;line-height:1.95;color:#b7c7bb}.ending-content .title-actions{justify-content:center}.ending-content .story-kicker{color:#b3b891}#endingStats{font:9px/1.8 var(--mono);color:#92a79b;margin:24px 0}
.game-mode.paused #questHUD,.game-mode.paused #bossHUD{opacity:.3}.pause-card{background:linear-gradient(120deg,#17252c,#101d25)}#pauseMain .story-save-note{font-size:10px;line-height:1.7;color:#859d94;margin:15px 0 0}
@media(max-width:800px){#questHUD{top:76px;right:16px;width:231px;padding:9px 11px}#questTitle{font-size:11px}#questChapter{font-size:7px}#questDirection{font-size:8px}.combat-hud{top:76px;width:198px}#bossHUD{top:185px;width:270px}.journal-grid{grid-template-columns:1fr}.journal-paper{padding:22px}.story-dialog{padding:18px 22px}#dialogueText{font-size:14px}.story-title{font-size:65px}.title-content{max-width:460px}}
@media(max-height:520px) and (orientation:landscape){.story-screen{padding:23px 45px}.story-title{font-size:48px;margin:13px 0}.story-lead{font-size:12px;line-height:1.7;max-width:355px;margin-bottom:8px}.title-rule{margin:12px 0}.title-actions{margin-top:13px}.title-footer{margin-top:13px}.title-minor{margin-top:12px}.story-button{min-height:35px;padding:9px 15px}.story-kicker{font-size:8px}#questHUD{top:56px;right:14px;width:200px}#questTitle{font-size:10px;line-height:1.4}#questChapter{font-size:6px}#questDirection{font-size:7px}#saveStatus{display:none}.combat-hud{top:56px;left:14px;width:185px}#bossHUD{top:17px;left:50%;width:230px;max-width:29vw;padding:6px 8px}#bossName{font-size:9px}#bossState{font-size:6px;letter-spacing:0}#bossValue{font-size:6px}.game-mode .stage-hud{top:12px}.game-mode .zone-name{font-size:8px;max-width:210px}.game-mode .zone-small{font-size:7px;margin-top:4px;max-width:210px}.story-dialog{padding:14px 22px;max-height:calc(100dvh - 24px);width:min(740px,94vw)}.story-modal{padding:12px}.speaker-head{grid-template-columns:43px 1fr auto;gap:12px}.speaker-head canvas{width:43px;height:43px}.speaker-head h2{font-size:22px}.speaker-head small{font-size:7px}#dialogueText{font-size:13px;line-height:1.7;margin:12px 0;min-height:42px}.dialogue-actions{margin-top:4px}.journal-modal{padding:12px}.journal-paper{max-height:calc(100dvh - 24px)}#chapterToast{font-size:18px;min-width:300px}.title-meta{font-size:8px}.game-top-actions button{padding:7px 8px;font-size:8px}}
@media(max-width:520px) and (orientation:portrait){.story-screen{padding:27px}.story-title{font-size:59px;margin:24px 0 18px}.story-lead{font-size:13px;line-height:1.8}.title-rule{margin:18px 0}.story-meta{font-size:8px}.title-actions{gap:8px}.story-button{padding:11px 15px;font-size:11px}.title-footer{margin-top:27px;font-size:8px}.title-minor{gap:14px}.title-minor button{font-size:9px}.game-mode .stage-hud{top:58px;left:12px;right:12px}.game-mode .zone-name{font-size:8px}.game-mode .zone-small{display:none}.game-top-actions{right:12px;top:13px}.game-top-actions button{font-size:8px;padding:9px}.combat-hud{top:82px;left:12px;width:calc(50vw - 18px);padding:8px}.vital-head{font-size:7px}.vital-head strong{font-size:8px}.vital-foot button{font-size:7px}#killCount{font-size:6px}.fight-status{font-size:6px;letter-spacing:.7px}#questHUD{top:82px;right:12px;width:calc(50vw - 18px);padding:8px}#questChapter{font-size:6px;letter-spacing:.4px}#questTitle{font-size:10px;line-height:1.4}#questDirection{font-size:7px}#saveStatus{display:none}#bossHUD{top:198px;max-width:85vw;width:290px}.story-modal{padding:10px;align-items:center}.story-dialog{width:100%;padding:16px;max-height:calc(100dvh - 24px)}.speaker-head{grid-template-columns:46px 1fr auto;gap:10px}.speaker-head canvas{width:46px;height:46px}.speaker-head h2{font-size:23px}.speaker-head small{font-size:6px;line-height:1.8}.dialogue-keys{display:none}#dialogueText{font-size:14px;line-height:1.8}.story-choice{font-size:11px;width:100%;text-align:left}.journal-modal{padding:10px}.journal-paper{padding:18px;width:100%;max-height:calc(100dvh - 20px)}.journal-paper h2{font-size:28px}.journal-top{align-items:flex-start}.journal-top button{padding:8px 12px}.journal-current{padding:13px}.journal-paper h3{font-size:16px}#chapterToast{font-size:20px;min-width:290px;max-width:92vw;top:45%}.ending-content h1{font-size:39px}.ending-content p{font-size:12px;line-height:1.8}}
.dialogue-open #toast,.journal-open #toast,.ending-open #toast{display:none!important}
/* Notifications never cover the traveller or dialogue text. */
.game-mode #toast,.game-mode.touch-device #toast{top:108px;bottom:auto;max-width:min(470px,calc(100vw - 515px));font-size:10px;line-height:1.7;padding:10px 15px}
#bossName{font-size:13px}
@media(max-width:900px){.game-mode #toast,.game-mode.touch-device #toast{top:157px;max-width:min(390px,calc(100vw - 80px))}}
@media(max-height:520px) and (orientation:landscape){.game-mode #toast,.game-mode.touch-device #toast{top:112px;max-width:calc(100vw - 450px);font-size:8px;padding:7px 10px}#bossName{font-size:10px}}
@media(max-width:520px) and (orientation:portrait){.game-mode #toast,.game-mode.touch-device #toast{top:calc(50% + 31.25vw + 18px);max-width:calc(100vw - 32px);font-size:10px}#bossName{font-size:12px}}

/* QUIET ADAPTIVE SCORE — independent preferences, no gameplay key changes. */
#musicHUD{display:inline-flex;align-items:center;justify-content:center;min-width:34px;padding:8px}
#musicHUD svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.5}
#musicHUD .speaker-off{display:none}#musicHUD.music-muted .speaker-waves{display:none}#musicHUD.music-muted .speaker-off{display:block}
.music-modal{position:absolute;inset:0;z-index:135;background:#050e14d9;backdrop-filter:blur(5px);display:flex;align-items:center;justify-content:center;padding:24px;cursor:default}
.music-paper{width:min(490px,100%);max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;padding:30px 33px;background:linear-gradient(130deg,#1b2a30,#101d25);border:1px solid #6f705c;box-shadow:0 28px 100px #0008}
.music-paper h2{font:32px Georgia,serif;letter-spacing:-.6px;font-weight:400;color:#e1d5ba;margin:17px 0 12px}
.music-paper p{font-size:12px;line-height:1.85;color:#aebdb4;margin:0 0 21px}
.music-toggle-row{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:23px 0 28px}
.music-toggle-row span{font-size:12px;color:#d4cdb8}
.music-toggle-row button{padding:9px 14px;min-height:38px;font-size:11px}
.music-volume-label{display:flex;justify-content:space-between;align-items:center;font-size:12px;color:#c7c8b5;margin-bottom:10px}
.music-volume-label output{font:14px var(--mono);color:#e0c69e}
#musicVolume,#sfxVolume{appearance:none;-webkit-appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;accent-color:#c0ab80;cursor:pointer;touch-action:pan-y}
#musicVolume::-webkit-slider-runnable-track,#sfxVolume::-webkit-slider-runnable-track{height:4px;background:linear-gradient(90deg,#506663,#b4a176);border-radius:4px}
#musicVolume::-webkit-slider-thumb,#sfxVolume::-webkit-slider-thumb{appearance:none;-webkit-appearance:none;width:18px;height:18px;border-radius:50%;background:#ddc49a;border:2px solid #243c40;margin-top:-7px;box-shadow:0 0 0 3px #cdbb9720}
#musicVolume::-moz-range-track,#sfxVolume::-moz-range-track{height:4px;border-radius:4px;background:#637a70}
#musicVolume::-moz-range-thumb,#sfxVolume::-moz-range-thumb{width:15px;height:15px;border-radius:50%;border:2px solid #243c40;background:#ddc49a}
.music-volume-hints{display:flex;justify-content:space-between;font:8px var(--mono);color:#789086;letter-spacing:.5px;margin:6px 0 23px}
.music-now{padding:16px 0;border-top:1px solid #59706350;border-bottom:1px solid #59706350}
#musicNow{font:8px/1.8 var(--mono);letter-spacing:.8px;color:#c0b591;text-transform:uppercase}
#musicStatus{font-size:10px;line-height:1.7;color:#9baea4;margin:7px 0 0;min-height:17px}
.music-actions{display:flex;gap:9px;justify-content:space-between;margin-top:24px}.music-actions button{font-size:11px;padding:10px 17px;min-height:40px}
.music-paper .music-foot{font:9px/1.85 var(--mono);color:#7d978d;margin:19px 0 0}
.music-open .game-touch,.music-open #portalHint{visibility:hidden!important}
@media(max-width:520px){.music-modal{padding:15px}.music-paper{padding:23px;max-height:calc(100dvh - 30px)}.music-paper h2{font-size:30px}.music-actions button{padding:10px 12px;font-size:10px}#musicHUD{min-width:30px;padding:7px}}
@media(max-height:520px) and (orientation:landscape){.music-modal{padding:12px}.music-paper{width:590px;padding:20px 27px;max-height:calc(100dvh - 24px)}.music-paper h2{font-size:25px;margin:10px 0}.music-paper p{font-size:11px;margin-bottom:10px}.music-toggle-row{margin:12px 0 14px}.music-volume-hints{margin-bottom:12px}.music-now{padding:9px 0}.music-actions{margin-top:13px}.music-paper .music-foot{margin-top:12px}}

/* The sound mixer remains scrollable and usable on short mobile screens. */
.sfx-settings{margin:22px 0;border-top:1px solid #59706350;padding-top:4px}.sfx-settings .music-toggle-row{margin:16px 0}.sfx-settings #sfxStatus{font:10px/1.6 var(--mono);margin:12px 0;color:#97aca4}#sfxTest{font-size:10px;padding:8px 11px;min-height:34px}

.music-paper{max-height:calc(100dvh - 28px)}.music-paper .music-volume-hints{flex-wrap:wrap;gap:6px}.binding-fixed-note{line-height:1.4}
@media(min-width:950px){.music-paper{width:520px;padding:23px 29px}.music-paper h2{font-size:29px;margin-top:9px}.music-paper p{margin-bottom:12px}.music-toggle-row{margin:15px 0}.music-volume-hints{margin-bottom:15px}.music-actions{margin-top:17px}.music-paper .music-foot{margin-top:13px}}
@media(max-height:520px) and (orientation:landscape){.music-paper{width:610px}.sfx-settings{margin:12px 0}.music-paper h2{font-size:24px}.game-key-hints{font-size:9px}}
.music-open #toast,.game-mode.paused #toast{visibility:hidden!important}

/* ── HUD: język ekranu tytułowego zamiast ramek ─────────────────────────
   Panele w grze leżą na pixel-arcie, więc pudełka z obwódką czytały się jak
   overlay debugowy. Zostaje sama typografia z cieniem — tak jak .stage-hud,
   które działało dobrze od początku. */
.game-mode .combat-hud,
.game-mode #questHUD {
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
  text-shadow: 0 1px 4px #000, 0 0 14px #000c;
}
.game-mode #questHUD {
  width: 300px;
  text-align: right;
}
.game-mode .vital-head {
  font: 9px var(--mono);
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: #b9a581;
  align-items: baseline;
  margin-bottom: 9px;
}
.game-mode .vital-head strong {
  font: 400 12px var(--mono);
  letter-spacing: 1.4px;
  color: #e4ddc9;
}
.game-mode #questChapter {
  font: 9px var(--mono);
  letter-spacing: 3.4px;
  color: #b9a581;
}
.game-mode #questTitle {
  font: 400 19px/1.25 Georgia, serif;
  letter-spacing: -0.3px;
  color: #e4ddc9;
  margin: 9px 0 7px;
}
.game-mode #questDirection {
  font: 9px var(--mono);
  letter-spacing: 0.6px;
  color: #9db3ad;
}
.game-mode .quest-track {
  height: 1px;
  background: #ffffff1f;
  margin-top: 12px;
}
.game-mode #questProgress {
  background: #c8b088;
}
.game-mode #killCount,
.game-mode .fight-status {
  letter-spacing: 2.2px;
  color: #93a79d;
}
.game-mode .fight-status {
  border-top: 0;
  margin-top: 7px;
  padding-top: 0;
}

/* Pasek zdrowia w krokach 4 px siada w tej samej siatce, co piksele sceny. */
.game-mode .hp-meter {
  height: 11px;
  padding: 1px;
  background: #1d1414;
  border: 1px solid #7b6450;
  box-shadow: none;
}
.game-mode #hpFill {
  background: linear-gradient(180deg, #d9926f 0 45%, #92483a 45%);
  box-shadow: none;
  transition: width 0.12s linear;
}
.game-mode .hp-meter::after {
  content: "";
  position: absolute;
  inset: 1px;
  pointer-events: none;
  background: repeating-linear-gradient(
    90deg,
    transparent 0 3px,
    #120b0b 3px 4px
  );
}

/* ── Menu pauzy: trzy grupy zamiast ośmiu równych przycisków ──────────── */
.pause-group {
  margin-top: 20px;
  padding-top: 13px;
  border-top: 1px solid #2b353b;
}
.pause-group h3 {
  font: 9px var(--mono);
  letter-spacing: 3.2px;
  text-transform: uppercase;
  color: #8e9aa1;
  font-weight: 400;
  margin: 0 0 4px;
}
.pause-card .button.danger {
  color: #d99b8b;
  border-color: #6d4438;
}
.pause-card .button.danger:hover {
  background: #3a221c;
  border-color: #9a5a48;
  color: #f0bfb1;
}

/* ── Dziennik ─────────────────────────────────────────────────────────── */
.journal-grid.log-empty {
  grid-template-columns: 1fr;
}
.journal-grid.log-empty > section {
  order: 2;
}
.journal-inventory {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 16px;
  line-height: 1.6;
}
.inv-item {
  border: 1px solid #4a5d55;
  padding: 3px 8px;
  color: #c3d0bd;
}
.inv-count {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.pips {
  display: inline-flex;
  gap: 4px;
}
.pips i {
  width: 7px;
  height: 7px;
  border: 1px solid #5f7268;
  background: none;
}
.pips i.on {
  background: #b3a779;
  border-color: #b3a779;
}

/* HUD trzyma się krawędzi obrazu, nie okna: --gx/--gy to letterbox wokół
   zatrzaśniętej na całkowitą skalę kanwy (ustawiane w fitScene). */
.game-mode .stage-hud,
.game-mode .game-bottom,
.game-mode .game-touch {
  padding-left: var(--gx, 0px);
  padding-right: var(--gx, 0px);
}
.game-mode .stage-hud,
.game-mode .combat-hud {
  translate: var(--gx, 0px) var(--gy, 0px);
}
.game-mode .stage-hud {
  translate: 0 var(--gy, 0px);
}
.game-mode .game-top-actions,
.game-mode #questHUD {
  translate: calc(-1 * var(--gx, 0px)) var(--gy, 0px);
}
.game-mode #bossHUD {
  translate: 0 var(--gy, 0px);
}
.game-mode .game-bottom,
.game-mode .game-touch,
.game-mode .portal-hint,
.game-mode #toast {
  translate: 0 calc(-1 * var(--gy, 0px));
}

/* Unik: wolne pole nad BLOKIEM w siatce akcji dotykowych. */
.game-touch .touch-actions .touch-dodge{grid-column:1;grid-row:1;background:#2b3a48d9;font-size:9px}

/* Wybór poziomu trudności na ekranie tytułowym. */
/* Difficulty: a brass rail with a lantern flame for a thumb. --pos is the
   filled share of the rail; --i on a tick is its index along four stops. */
.difficulty-pick{display:block;margin-top:16px;max-width:400px;font:9px var(--mono);letter-spacing:1.3px;color:#81918c;--pos:0%}
.difficulty-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.difficulty-head b{font:15px var(--book);font-weight:400;letter-spacing:.3px;color:#efd7a3}
.difficulty-rail{position:relative}
.difficulty-rail input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:30px;margin:0;background:transparent;cursor:pointer;touch-action:pan-y}
.difficulty-rail input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#e0bb76 0,#b3935a var(--pos),#3a4137 var(--pos),#262c28 100%);box-shadow:0 0 8px #c9a05a2e}
.difficulty-rail input::-moz-range-track{height:3px;border-radius:2px;background:linear-gradient(90deg,#e0bb76 0,#b3935a var(--pos),#3a4137 var(--pos),#262c28 100%);box-shadow:0 0 8px #c9a05a2e}
.difficulty-rail input::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:18px;height:18px;margin-top:-7.5px;border-radius:50%;border:1px solid #f1d9a3;background:radial-gradient(circle at 50% 38%,#fff4cc,#f2ba5c 42%,#9c6a28 72%,#3b2a14 100%);box-shadow:0 0 0 3px #0d1517,0 0 10px 3px #f0b85a66,0 0 24px 8px #e0952e33}
.difficulty-rail input::-moz-range-thumb{width:18px;height:18px;border-radius:50%;border:1px solid #f1d9a3;background:radial-gradient(circle at 50% 38%,#fff4cc,#f2ba5c 42%,#9c6a28 72%,#3b2a14 100%);box-shadow:0 0 0 3px #0d1517,0 0 10px 3px #f0b85a66,0 0 24px 8px #e0952e33}
.difficulty-rail input:focus-visible{outline:none}
.difficulty-rail input:focus-visible::-webkit-slider-thumb{box-shadow:0 0 0 3px #0d1517,0 0 0 5px #e6c58b,0 0 24px 8px #e0952e55}
.difficulty-rail input:focus-visible::-moz-range-thumb{box-shadow:0 0 0 3px #0d1517,0 0 0 5px #e6c58b,0 0 24px 8px #e0952e55}
.difficulty-ticks{position:relative;display:flex;justify-content:space-between;height:24px;margin:-6px 0 8px}
.difficulty-ticks button{position:relative;background:none;border:0;padding:8px 0 0;font:11px var(--book);letter-spacing:.2px;color:#8f9787;cursor:pointer;min-height:0}
.difficulty-ticks button::before{content:"";position:absolute;top:-2px;left:50%;width:5px;height:5px;transform:translateX(-50%) rotate(45deg);background:#4a4d3c;border:1px solid #7b6b46}
.difficulty-ticks button:first-child::before{left:9px;transform:rotate(45deg)}
.difficulty-ticks button:last-child::before{left:auto;right:9px;transform:rotate(45deg)}
.difficulty-ticks button.active{color:#efd7a3}
.difficulty-ticks button:hover{color:#f0dfba}
.difficulty-ticks button.active::before{background:#d1ad6a;border-color:#efd7a3}
#difficultyDesc{margin:9px 0 0;max-width:400px;font-size:11px;line-height:1.7;color:#9aaba3}
.journal-inventory .inv-item.perk{border-color:#a48c5c;color:#e3cf9c}
@media(max-height:520px) and (orientation:landscape){.difficulty-pick{margin-top:8px}#difficultyDesc{display:none}}
.difficulty-pick[data-level="nightmare"] .difficulty-rail input::-webkit-slider-thumb{background:radial-gradient(circle at 50% 38%,#ffe9d6,#e9863f 42%,#7a2f18 72%,#2a120c 100%);box-shadow:0 0 0 3px #0d1517,0 0 12px 4px #e05a2e66,0 0 26px 9px #c0341c33}
.difficulty-pick[data-level="nightmare"] .difficulty-rail input::-moz-range-thumb{background:radial-gradient(circle at 50% 38%,#ffe9d6,#e9863f 42%,#7a2f18 72%,#2a120c 100%);box-shadow:0 0 0 3px #0d1517,0 0 12px 4px #e05a2e66,0 0 26px 9px #c0341c33}
.difficulty-pick[data-level="nightmare"] .difficulty-head b{color:#f0b08c}

/* Hand-painted cutouts are composed at 2x logical game resolution. */
#scene, .stage canvas#scene, #speakerPortrait { image-rendering: auto; }

/* The same aged brass and ink as the castle: bookplates, not app cards. */
:root {
  --book: Georgia, "Palatino Linotype", serif;
  --brass: #b99a61;
  --ivory: #e3d5b5;
}
.story-screen {
  background: linear-gradient(90deg,#060e10f5,#091315d9 36%,#09131528 85%),
    radial-gradient(ellipse at 14% 48%,#8b66361f,transparent 65%);
  align-items: safe center;
}
.title-content { margin-block: auto; padding-block: 12px; }
.story-kicker,.pause-card .eyebrow,.pause-group h3 {
  font-family: var(--book);
  letter-spacing: 2.8px;
  color: var(--brass);
}
.story-title { text-shadow: 0 3px 28px #0008; }
.story-title em { color: #cbb07b; }
.story-lead { font: 17px/1.8 var(--book); color: #c6c8b9; }
.title-rule {
  position: relative;
  width: 190px;
  background: linear-gradient(90deg,#bfa16a, #bfa16a40,transparent);
}
.title-rule::before {
  content: "✧";
  position: absolute;
  top: -13px;
  left: 70px;
  color: #d5b67c;
  font-size: 18px;
  background: #0c1416;
  padding: 0 9px;
}
.story-meta,.title-footer,#continueMeta {
  font-family: var(--book);
  letter-spacing: 1px;
}
.title-minor { flex-wrap: wrap; row-gap: 12px; }
.title-minor button { font-family: var(--book); font-size: 12px; color: #b4b7a5; }
.title-minor #installGame { color: #e3c893; min-height: 44px; }
#installGame[hidden], .install-help[hidden] { display: none; }
.install-help {
  max-width: 460px;
  margin: 12px 0 0;
  padding: 10px 14px;
  border-left: 1px solid #b3935370;
  background: #091315c9;
  color: #d9cfb7;
  font: 13px/1.65 var(--book);
}
.install-dialog {
  width: min(760px, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: clamp(24px, 5vw, 44px);
  overflow-y: auto;
  border: 1px solid #b89b63;
  background: radial-gradient(ellipse at top left, #403a243d, transparent 65%), #0b1518;
  color: #e3d5b5;
  box-shadow: 0 24px 100px #000b, inset 0 0 0 5px #b3935312;
}
.install-dialog[open] { display: flex; align-items: flex-start; gap: 28px; }
.install-dialog::backdrop { background: #02090de0; backdrop-filter: blur(6px); }
.install-icon { width: 96px; height: 96px; flex: none; margin-top: 16px; }
.install-content { min-width: 0; flex: 1; }
.install-dialog .story-kicker { font-size: 10px; letter-spacing: 2px; }
.install-dialog h2 { margin: 14px 0; font: 40px/1.1 var(--book); color: #e3c893; }
#installDescription { margin: 0; font: 17px/1.7 var(--book); color: #c6c8b9; }
.install-dialog .install-help { max-width: none; margin-top: 20px; }
.install-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.install-actions button { min-height: 48px; padding: 12px 18px; font-size: 16px; }
.install-preference { display: flex; align-items: center; gap: 10px; min-height: 44px; margin-top: 18px; color: #c6c8b9; font: 14px/1.5 var(--book); cursor: pointer; }
.install-preference input { flex: none; width: 18px; height: 18px; margin: 0; accent-color: #cbb07b; }
.install-dialog :focus-visible { outline: 2px solid #e3c893; outline-offset: 4px; }
.update-notice {
  position: absolute; z-index: 95; bottom: max(12px, env(safe-area-inset-bottom));
  left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 32px);
  padding: 10px 16px; border: 1px solid #897146; background: #091315ed;
  color: #e3d5b5; font: 13px/1.5 var(--book); text-align: center; pointer-events: none;
}
.update-notice[hidden] { display: none; }
@media (max-width: 560px) and (orientation: portrait) {
  .install-dialog[open] { display: block; }
  .install-icon { display: block; width: 80px; height: 80px; margin: 0 auto 20px; }
  .install-dialog h2 { font-size: 34px; }
  .install-actions { flex-direction: column; }
}
@media (max-height: 540px) and (orientation: landscape) {
  .install-dialog { padding: 20px 24px; }
  .install-dialog[open] { gap: 20px; }
  .install-icon { width: 64px; height: 64px; margin-top: 8px; }
  .install-dialog h2 { font-size: 30px; margin: 8px 0; }
  #installDescription { font-size: 14px; line-height: 1.5; }
  .install-dialog .install-help { margin-top: 12px; }
  .install-actions { margin-top: 16px; gap: 8px; }
  .install-preference { margin-top: 8px; }
  .install-actions button { padding: 8px 14px; min-height: 44px; font-size: 14px; }
}
.title-footer { color: #a2a895; }
.story-button,.button,.story-choice,.binding-key {
  border-radius: 0;
  font-family: var(--book);
  background: linear-gradient(110deg,#413721,#22271f);
  border-color: #897146;
  color: var(--ivory);
  box-shadow: inset 0 0 0 3px #080e103d,inset 0 1px #ddc18a25;
}
.story-button { font-size: 15px; letter-spacing: .5px; }
.story-button:hover,.button:hover,.story-choice:hover,.binding-key:hover {
  background: linear-gradient(110deg,#574728,#303b2e);
  border-color: #d6b779;
  color: #fae9bf;
}
.story-button.secondary { background: linear-gradient(110deg,#24281fd9,#111d1ac9); border-color: #776b49; }
.story-button.secondary:hover { background: #353c2b; }
.title-actions { gap: 12px 24px; }
.title-actions .story-button {
  position: relative;
  background: linear-gradient(90deg,#ad87442b,transparent);
  border: 0;
  border-block: 1px solid #b393534f;
  padding: 13px 24px 13px 31px;
  min-width: 215px;
  text-align: left;
  font: 21px var(--book);
  color: #e3c893;
  box-shadow: none;
}
.title-actions .story-button::before {
  content: "✧";
  position: absolute;
  left: 6px;
  color: #b6985e;
}
.title-actions .story-button:hover { background: linear-gradient(90deg,#cbaa5147,transparent); color: #fff0cf; }
.difficulty-head span { font-family: var(--book); }
#difficultyDesc { color: #b6bba9; }

.pause-screen,.journal-modal,.music-modal {
  background: radial-gradient(ellipse at center,#1c28266b,#03090bdd);
  backdrop-filter: blur(5px);
}
.pause-card,.story-dialog,.journal-paper,.music-paper {
  border: 14px solid transparent;
  border-image: url('./assets/ui/antique-frame.svg') 30 / 22px / 0 stretch;
  background:
    repeating-linear-gradient(104deg,#c5aa7603 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 20% 0,#70613b25,transparent 64%),
    linear-gradient(115deg,#1b251f,#0e1919 72%,#1b221a);
  box-shadow: 0 24px 100px #000b,inset 0 0 45px #0007;
  scrollbar-color: #81714c #14201c;
}
.pause-card { width: min(460px,100%); padding: 23px 29px; }
.pause-card h2 { font: 32px/1.15 var(--book); color: var(--ivory); letter-spacing: -.5px; }
.pause-card p,.music-paper p { color: #b8beac; }
.pause-group { border-color: #a68a4738; margin-top: 17px; padding-top: 12px; }
.pause-group h3 { font-size: 10px; margin-bottom: 7px; }
.pause-card .pause-group .button {
  justify-content: flex-start;
  width: 100%;
  border: 0;
  border-left: 1px solid #90764745;
  background: none;
  box-shadow: none;
  color: #d1cfb8;
  font-size: 15px;
  margin-top: 2px;
  padding: 8px 13px;
  white-space: normal;
  text-align: left;
}
.pause-card .pause-group .button:hover {
  border-color: #d1ae6c;
  background: linear-gradient(90deg,#b4944b24,transparent);
  color: #ffe6b2;
}
.pause-card .pause-group .button.danger { color: #c69a80; }
/* The pause menu carries the same brass rail, indented like its buttons. */
.pause-card .pause-difficulty { grid-column: 1 / -1; max-width: none; margin: 4px 0 6px; padding: 6px 13px 0; border-left: 1px solid #90764745; }
.pause-card .pause-difficulty .difficulty-head { margin-bottom: 2px; }
.pause-card .pause-difficulty .difficulty-head span { font: 9px var(--mono); letter-spacing: 1.3px; text-transform: uppercase; color: #8e9aa1; }
.pause-card .pause-difficulty .difficulty-head b { font-size: 15px; }
.pause-card .pause-difficulty .difficulty-desc { margin: 0; max-width: none; font: 12px/1.55 var(--book); letter-spacing: 0; color: #b6bba9; }
.pause-card .pause-difficulty .difficulty-slider:disabled { opacity: .45; cursor: default; }
.pause-card .button.primary {
  background: linear-gradient(105deg,#6f5631,#343a27);
  border-color: #b3965b;
  color: #f4e2b9;
  font: 17px var(--book);
}
.pause-card .button.primary:hover { background: #675834; }
.pause-meta { color: #a1ab98; border-color: #a68a4738; }
.story-dialog { padding: 20px 25px 16px; }
.speaker-head canvas { border-radius: 50% 50% 30% 30%; border-color: #aa8d52; background: #0c1716; }
#dialogueText { font: 17px/1.85 var(--book); color: #e0ddc8; }
.speaker-head small { color: #b4b49c; }
.journal-paper { background-color: #1c271f; }
.journal-current { background: linear-gradient(90deg,#b49a5020,transparent); border-color: #b49a50; }
.journal-paper summary { font-family: var(--book); font-size: 15px; }
.inv-item { border: 0; border-bottom: 1px solid #88764b; padding-inline: 2px; }
.pips i { transform: rotate(45deg); width: 6px; height: 6px; }
.music-paper h2 { color: var(--ivory); }
.binding-key { background: #202a20; border-color: #766342; }
.binding-key.listening { background: #65512b; color: #fff0ca; border-color: #ead096; }
.game-top-actions button {
  background: linear-gradient(180deg,#111d18d9,#0c1513a6);
  border: 0;
  border-bottom: 1px solid #b99a616b;
  border-radius: 0;
  color: #dac69f;
  font: 13px var(--book);
  text-shadow: 0 2px 5px #000;
}
.game-top-actions button:hover { background: #4b432bbd; }
.game-top-actions kbd,.game-key-hints kbd,.vital-foot kbd {
  border: 0;
  border-bottom: 1px solid #a48b5766;
  border-radius: 0;
  background: none;
}
.game-mode .zone-name,.game-mode .vital-head,.game-mode #questChapter { font-family: var(--book); }
.game-mode .hp-meter {
  height: 9px;
  border-color: #aa8d5b;
  border-radius: 50% / 25%;
  background: #291b19;
  box-shadow: 0 0 8px #0009;
}
.game-mode .hp-meter::after { background: linear-gradient(180deg,#ffdeac25,transparent 50%,#0005); }
.game-mode #hpFill { background: linear-gradient(90deg,#63372f,#b2674b,#d59b66); }
.game-mode.low-health #hpFill { background: #be503d; }
.game-mode .portal-hint,#toast {
  border-radius: 0;
  background: linear-gradient(90deg,#101c18eb,#283326ed,#101c18eb);
  border: 1px solid #a98f564f;
  border-block-color: #c3a66999;
  color: #e6d5ac;
  font-family: var(--book);
}
#bossHUD { background: linear-gradient(90deg,transparent,#111b18cf,transparent); border: 0; }
.boss-track { border-block: 1px solid #a88852; }
.game-touch button { border-radius: 12px 3px; border-color: #a18a568c; background: #17251be0; }
@media(max-width:520px) {
  .pause-card,.pause-card.editing-bindings,.music-paper,.journal-paper,.story-dialog {
    border-width: 10px;
    border-image-width: 17px;
    padding: 17px 14px;
  }
  .title-actions .story-button { font-size: 19px; min-width: 190px; }
  .story-lead { font-size: 15px; }
  .game-top-actions button { font-size: 11px; }
  .game-mode #questHUD { width: calc(50vw - 18px); }
  .game-mode #questTitle { font-size: 14px; }
  .game-mode #questChapter { font-size: 8px; letter-spacing: 1px; }
  .game-mode .vital-head { font-size: 8px; letter-spacing: 1px; }
  .game-mode .vital-head strong { font-size: 9px; }
  #dialogueText { font-size: 15px; }
  .binding-actions { flex-wrap: wrap; }
}
@media(max-height:600px) {
  .story-screen { align-items: flex-start; }
  .title-content { padding-block: 0; }
  .pause-card h2 { font-size: 26px; }
  .pause-card .pause-group .button { padding-block: 7px; }
}

/* Mobile game: preserve the whole 8:5 scene, using the spare space for controls. */
@media (max-width: 600px) and (orientation: portrait) {
  .title-open .stage #scene {
    width: 100vw !important;
    height: 100dvh !important;
    object-fit: cover;
  }
  .game-mode:not(.title-open) .stage-hud,
  .game-mode:not(.title-open) .combat-hud,
  .game-mode:not(.title-open) #questHUD,
  .game-mode:not(.title-open) .game-top-actions,
  .game-mode:not(.title-open) #bossHUD,
  .game-mode:not(.title-open) .game-touch,
  .game-mode:not(.title-open) .portal-hint,
  .game-mode:not(.title-open) #toast {
    translate: none;
  }
  .game-mode:not(.title-open) .stage-hud {
    top: max(61px, calc(env(safe-area-inset-top) + 52px));
    left: 12px;
    right: 12px;
    padding-inline: 0;
  }
  .game-mode:not(.title-open) .game-top-actions {
    top: max(11px, env(safe-area-inset-top));
    right: 12px;
  }
  .game-mode:not(.title-open) .combat-hud,
  .game-mode:not(.title-open) #questHUD {
    top: max(91px, calc(env(safe-area-inset-top) + 82px));
    width: calc(50vw - 18px);
  }
  .game-mode:not(.title-open) .combat-hud { left: 12px; }
  .game-mode:not(.title-open) #questHUD { right: 12px; }
  .game-mode:not(.title-open) #bossHUD {
    top: max(190px, calc(env(safe-area-inset-top) + 175px));
  }
  .game-mode:not(.title-open) .game-touch {
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    bottom: max(17px, env(safe-area-inset-bottom));
    padding-inline: 0;
  }
  .game-mode:not(.title-open) .portal-hint {
    top: calc(50% + 31.25vw - 42px);
    bottom: auto;
  }
  .game-mode:not(.title-open) #toast {
    top: calc(50% + 31.25vw + 15px);
    bottom: auto;
  }
  .game-mode:has(#toast.show) .game-rotate { visibility: hidden; }
}

/* Landscape phones put the touch pads in the letterbox at each side. */
@media (max-height: 520px) and (orientation: landscape) {
  .game-mode #questHUD { width: 195px; }
  .story-screen { padding: 12px max(16px, env(safe-area-inset-left)); }
  .title-content { max-width: min(480px, 62vw); }
  .story-title { font-size: clamp(34px, 10vh, 45px); margin: 6px 0 8px; }
  .story-lead { font-size: 12px; line-height: 1.4; margin-bottom: 6px; }
  .title-rule { margin: 10px 0; }
  .story-meta { font-size: 8px; line-height: 1.5; }
  .difficulty-pick { margin-top: 6px; }
  .difficulty-ticks button { font-size: 10px; }
  .title-actions { margin-top: 8px; gap: 8px; }
  .title-actions .story-button {
    min-width: 0;
    min-height: 34px;
    padding: 6px 8px 6px 24px;
    font-size: 14px;
  }
  #continueMeta { margin-top: 5px; font-size: 8px; }
  .title-minor { margin-top: 7px; gap: 12px; }
  .title-minor button { font-size: 9px; }
  .title-footer { margin-top: 8px; font-size: 7px; }
  .game-mode.touch-device .game-touch {
    left: max(8px, env(safe-area-inset-left));
    right: max(8px, env(safe-area-inset-right));
    bottom: max(12px, env(safe-area-inset-bottom));
    padding-inline: 0;
    translate: none;
  }
  .game-mode.touch-device .game-touch .touch-directions,
  .game-mode.touch-device .game-touch .touch-actions {
    grid-template-columns: repeat(2, 44px);
    gap: 4px;
  }
  .game-mode.touch-device .game-touch button,
  .game-mode.touch-device .game-touch .touch-actions button,
  .game-mode.touch-device .game-touch .touch-directions button,
  .game-mode.touch-device .game-touch .touch-group .touch-run {
    width: 44px;
    height: 42px;
  }
  .game-mode.touch-device .game-touch .touch-directions .touch-up {
    grid-column: 1;
    grid-row: 1;
  }
  .game-mode.touch-device .game-touch .touch-directions #gameSprint {
    grid-column: 2;
    grid-row: 1;
  }
  .game-mode.touch-device .game-touch .touch-directions #gameLeft {
    grid-column: 1;
    grid-row: 2;
  }
  .game-mode.touch-device .game-touch .touch-directions #gameRight {
    grid-column: 2;
    grid-row: 2;
  }
  .game-mode.touch-device .game-touch .touch-actions .touch-dodge {
    grid-column: 1;
    grid-row: 1;
  }
  .game-mode.touch-device .game-touch .touch-actions .touch-jump {
    grid-column: 2;
    grid-row: 1;
  }
  .game-mode.touch-device .game-touch .touch-actions .touch-block {
    grid-column: 1;
    grid-row: 2;
  }
  .game-mode.touch-device .game-touch .touch-actions .touch-text {
    grid-column: 2;
    grid-row: 2;
  }
  .game-mode.touch-device .game-touch .touch-actions .touch-attack {
    grid-column: 1 / 3;
    grid-row: 3;
    width: 92px;
  }
  .game-mode.touch-device .portal-hint {
    bottom: 15px;
    max-width: 48%;
  }
}

/* Runa's equipment and backpack, on the journal's antique paper. */
.inventory-modal {
  position: absolute; inset: 0; z-index: 130; display: grid; place-items: center;
  padding: 24px; cursor: default; touch-action: auto;
  background: radial-gradient(ellipse at center,#1c282680,#03090bed);
  backdrop-filter: blur(5px);
}
.inventory-modal[hidden], .inventory-modal [hidden] { display: none !important; }
.inventory-paper {
  width: min(900px,100%); max-height: calc(100dvh - 48px); overflow: hidden;
  display: flex; flex-direction: column;
  padding: 22px 28px 16px; border: 14px solid transparent;
  border-image: url('./assets/ui/antique-frame.svg') 30 / 22px / 0 stretch;
  background: repeating-linear-gradient(104deg,#c5aa7603 0 1px,transparent 1px 5px),
    radial-gradient(ellipse at 20% 0,#70613b25,transparent 64%),
    linear-gradient(115deg,#1b251f,#0e1919 72%,#1b221a);
  box-shadow: 0 24px 100px #000b,inset 0 0 45px #0007;
  scrollbar-color: #81714c #14201c; color: #c7c9b5;
}
.inventory-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 15px; flex-shrink: 0; }
.inventory-header h2 { font: 32px/1.15 var(--book); color: var(--ivory); margin: 6px 0; }
.inventory-header p { margin: 6px 0 20px; font: 13px/1.5 var(--book); color: #a3ae9b; }
.inventory-header button { min-height: 40px; padding: 9px 12px; }
.inventory-layout { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(0,1fr); gap: 26px; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
.inventory-items { min-width: 0; }
.inventory-section-title { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; margin-bottom: 10px; }
.inventory-section-title h3, .inventory-ammo h3 { font: 17px var(--book); margin: 0; color: #cdbb91; }
.inventory-section-title span { font: 11px var(--book); color: #97a18e; }
.equipment-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.weapon-grid { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: 6px; max-height: 284px; overflow-y: auto; scrollbar-width: thin; padding: 3px; margin: -3px; }
.weapon-slot {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 0; min-height: 92px; padding: 7px 4px; border: 1px solid #7e704159; border-radius: 0;
  color: #d5ceb3; background: radial-gradient(ellipse at center,#81734517,#02090838);
}
button.weapon-slot:hover { border-color: #c9aa6c; background-color: #93815114; }
.weapon-slot[aria-pressed="true"] { border-color: #c9aa6c; box-shadow: inset 0 0 20px #a9814520; }
.weapon-slot:focus-visible { outline: 2px solid #ecd09a; outline-offset: 1px; }
.weapon-slot canvas { width: 100%; height: 48px; object-fit: contain; image-rendering: auto; }
.weapon-slot-name { display: block; font: 12px/1.25 var(--book); margin-top: 4px; text-align: center; overflow-wrap: anywhere; }
.equipment-grid .weapon-slot { min-height: 120px; border-color: #ae935d70; }
.equipment-grid .weapon-slot canvas { height: 56px; }
.slot-label { font: 9px/1.3 var(--mono); color: #bda671; margin-bottom: 6px; }
.empty-slot { border-color: #7e70412b; background: #02090822; color: #78806e; }
.equipment-grid .empty-slot { border-color: #7e704140; }
.empty-mark { font: 24px var(--book); color: #82775250; }
.equipment-grid .empty-mark { display: grid; place-items: center; flex: 1; }
.empty-slot .weapon-slot-name { font-style: italic; }
.amulet-icon { display: grid; place-items: center; flex-shrink: 0; width: 100%; height: 48px; }
.amulet-icon::before { content: ""; width: 22px; height: 28px; border: 2px solid #b69859; border-radius: 40% 40% 48% 48%; background: radial-gradient(ellipse at 35% 25%,#bfc8a3,#4c796f 40%,#152f2c 75%); box-shadow: 0 -6px 0 -3px #c0a574, 0 3px 12px #0008, inset 0 0 0 2px #283c32; }
.inventory-backpack { margin-top: 20px; }
.inventory-note { font: 12px/1.5 var(--book); color: #9da791; margin: 10px 0 0; }
.inventory-ammo { border-top: 1px solid #8b784638; padding-top: 12px; margin-top: 14px; }
.inventory-ammo h3 { font-size: 14px; margin-bottom: 8px; }
#arrowChoices { display: flex; flex-wrap: wrap; gap: 6px; }
#arrowChoices button { min-height: 40px; padding: 6px 10px; font: 12px var(--book); }
#arrowChoices button[aria-pressed="true"] { border-color: #d1b273; color: #f0d8a3; box-shadow: inset 0 0 15px #c4964826; }
.weapon-detail { border-left: 1px solid #8b78464d; padding-left: 25px; min-width: 0; }
.item-detail-content { min-width: 0; }
#weaponNotesToggle { display: none; }
.weapon-detail #weaponPreview { width: 100%; height: 130px; object-fit: contain; image-rendering: auto; }
.weapon-detail #amuletPreview { height: 130px; }
.weapon-detail #amuletPreview::before { width: 42px; height: 52px; }
#weaponType { font: 10px var(--mono); color: #a99d7a; margin: 8px 0; }
.weapon-detail h3 { font: 25px/1.15 var(--book); color: #e1cf9e; margin: 7px 0 10px; }
.weapon-detail p { font: 13px/1.6 var(--book); margin: 10px 0; }
.weapon-stats { margin: 14px 0; }
.weapon-stats > div { display: flex; justify-content: space-between; gap: 12px; padding: 6px 0; border-bottom: 1px solid #a68c5130; }
.weapon-stats dt { font: 12px var(--book); color: #9fa993; }
.weapon-stats dd { margin: 0; font: 13px var(--mono); color: #e0cfab; }
#weaponRule { color: #b7bb9d; font-size: 12px; }
.weapon-detail .weapon-trait { color: #d8c697; font-size: 12.5px; border-left: 2px solid #b8924e; padding-left: 9px; }
.weapon-trait strong { color: #f0d9a0; font-weight: 600; }
#amuletCost { color: #e0a58a; }
#equipWeapon { width: 100%; margin-top: 7px; min-height: 44px; }
#equipWeapon:disabled { opacity: .6; cursor: default; }
.inventory-footer { display: flex; align-items: center; flex-wrap: wrap; flex-shrink: 0; gap: 8px 14px; border-top: 1px solid #83713f50; padding-top: 12px; margin-top: 18px; font: 11px/1.5 var(--book); color: #949f8a; }
.inventory-footer button { min-height: 40px; padding: 7px 14px; }
#inventoryNotice { color: #d3bd88; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.inventory-open .game-touch, .inventory-open #toast { visibility: hidden; }
@media (min-width:651px) and (min-height:541px) {
  .inventory-paper { height: min(760px,calc(100dvh - 48px)); }
  .inventory-layout { flex: 1; grid-template-rows: minmax(0,1fr); overflow: hidden; }
  .inventory-items { display: flex; flex-direction: column; min-height: 0; }
  .inventory-items > section:first-child, .inventory-ammo, .inventory-note { flex-shrink: 0; }
  .inventory-backpack { display: flex; flex-direction: column; flex: 1; min-height: 0; }
  .inventory-backpack .inventory-section-title { flex-shrink: 0; }
  .weapon-grid { flex: 1; min-height: 0; max-height: none; grid-auto-rows: 96px; align-content: start; }
  .weapon-detail { display: flex; flex-direction: column; min-height: 0; }
  .item-detail-content { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; overscroll-behavior: contain; }
  #equipWeapon { flex-shrink: 0; }
}
@media (max-height:700px) and (min-width:651px) {
  .inventory-modal { padding: 10px; }
  .inventory-paper { padding: 12px 22px; max-height: calc(100dvh - 20px); }
  .inventory-header .story-kicker { display: none; }
  .inventory-header h2 { font-size: 26px; }
  .inventory-header p { margin-bottom: 12px; }
  .equipment-grid .weapon-slot { min-height: 96px; }
  .equipment-grid .weapon-slot canvas { height: 40px; }
  .weapon-grid { grid-auto-rows: 82px; }
  .weapon-slot { min-height: 78px; padding: 4px; }
  .weapon-slot canvas { height: 36px; }
  .weapon-slot-name { font-size: 11px; }
  .weapon-detail #weaponPreview, .weapon-detail #amuletPreview { height: 68px; }
  .weapon-detail h3 { font-size: 23px; }
  .weapon-detail p { font-size: 12px; margin: 7px 0; }
  .weapon-stats { margin: 9px 0; }
  .weapon-stats > div { padding: 4px 0; }
  .inventory-backpack { margin-top: 14px; }
  .inventory-footer { margin-top: 12px; }
}
@media (max-width:650px) {
  .inventory-modal { padding: 8px; }
  .inventory-paper { padding: 12px; max-height: calc(100dvh - 16px); border-width: 9px; }
  .inventory-header { gap: 8px; }
  .inventory-header .story-kicker { font-size: 8px; }
  .inventory-header h2 { font-size: 27px; }
  .inventory-header p { font-size: 11px; margin-bottom: 14px; }
  .inventory-header button { font-size: 11px; padding: 7px; }
  .inventory-layout { grid-template-columns: 1fr; gap: 18px; }
  .inventory-section-title h3 { font-size: 16px; }
  .equipment-grid .weapon-slot { min-height: 110px; }
  .weapon-grid { max-height: 198px; }
  .weapon-slot-name { font-size: 11px; }
  .inventory-backpack { margin-top: 16px; }
  .weapon-detail { border-left: 0; border-top: 1px solid #8b78464d; padding: 14px 0 0; }
  .item-detail-content { display: grid; grid-template-columns: 72px minmax(0,1fr); column-gap: 12px; }
  .weapon-detail #weaponPreview, .weapon-detail #amuletPreview { grid-column: 1; grid-row: 1 / 3; width: 72px; height: 64px; }
  #weaponType { grid-column: 2; align-self: end; font-size: 9px; margin: 0; }
  .weapon-detail h3 { grid-column: 2; font-size: 23px; margin: 3px 0 0; }
  .item-detail-content > :is(p,dl,details) { grid-column: 1 / -1; }
  .weapon-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 4px 0; }
  .weapon-stats > div { flex-direction: column; gap: 4px; }
  .weapon-stats dt { font-size: 11px; }
  .weapon-stats dd { font-size: 11px; }
  .inventory-footer > span:not(#inventoryNotice) { display: none; }
}
@media (max-height:540px) and (orientation:landscape) {
  .inventory-modal { padding: max(8px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(8px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left)); }
  .inventory-paper { width: min(960px,100%); height: 100%; max-height: 100%; padding: 8px 16px; border-width: 9px; border-image-width: 16px; }
  .inventory-header { align-items: center; margin-bottom: 8px; }
  .inventory-header > div { display: flex; flex-wrap: wrap; align-items: baseline; gap: 3px 16px; }
  .inventory-header .story-kicker { display: none; }
  .inventory-header h2 { font-size: 23px; margin: 0; }
  .inventory-header p { font-size: 11px; margin: 0; }
  .inventory-header button { flex-shrink: 0; font-size: 12px; }
  .inventory-layout { flex: 1; grid-template-columns: minmax(0,1.3fr) minmax(0,1fr); grid-template-rows: minmax(0,1fr); gap: 18px; overflow: hidden; }
  .inventory-items { display: flex; flex-direction: column; min-height: 0; }
  .inventory-items > section:first-child { flex-shrink: 0; }
  .inventory-items > section:first-child .inventory-section-title { display: none; }
  .inventory-section-title { margin-bottom: 5px; }
  .inventory-section-title h3 { font-size: 14px; }
  .inventory-section-title span { font-size: 10px; }
  .equipment-grid .weapon-slot { min-height: 74px; padding: 4px; }
  .equipment-grid .weapon-slot canvas { height: 30px; }
  .slot-label { font-size: 8px; margin-bottom: 2px; }
  .weapon-slot-name { font-size: 11px; margin-top: 2px; }
  .equipment-grid .amulet-icon { height: 30px; }
  .inventory-backpack { display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 10px; }
  .inventory-backpack .inventory-section-title { flex-shrink: 0; }
  .weapon-grid { flex: 1; min-height: 0; max-height: none; grid-template-columns: repeat(6,minmax(0,1fr)); grid-auto-rows: 48px; gap: 4px; align-content: start; }
  .weapon-grid > .empty-slot:nth-child(n+7) { display: none; }
  .weapon-grid .weapon-slot canvas, .weapon-grid .amulet-icon { height: 24px; }
  .weapon-grid .amulet-icon::before { width: 15px; height: 19px; }
  .weapon-grid .weapon-slot-name { font-size: 10px; line-height: 1.1; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .weapon-slot { min-height: 0; padding: 4px; }
  .weapon-slot canvas, .weapon-slot .amulet-icon { height: 32px; }
  .inventory-note { display: none; }
  .inventory-ammo { flex-shrink: 0; padding-top: 6px; margin-top: 8px; }
  .inventory-ammo h3 { display: none; }
  #arrowChoices button { flex: 1; padding: 5px 7px; }
  .weapon-detail { display: flex; flex-direction: column; min-height: 0; border-top: 0; border-left: 1px solid #8b78464d; padding: 0 0 0 16px; }
  .item-detail-content { display: grid; grid-template-columns: 60px minmax(0,1fr); column-gap: 10px; flex: 1; min-height: 0; overflow-y: auto; align-content: start; scrollbar-width: thin; overscroll-behavior: contain; }
  .weapon-detail #weaponPreview, .weapon-detail #amuletPreview { grid-column: 1; grid-row: 1 / 3; width: 60px; height: 54px; }
  .weapon-detail #amuletPreview::before { width: 28px; height: 35px; }
  #weaponType { grid-column: 2; align-self: end; font-size: 9px; margin: 0; }
  .weapon-detail h3 { grid-column: 2; align-self: start; font-size: 21px; margin: 3px 0 0; }
  .item-detail-content > :is(p,dl,details) { grid-column: 1 / -1; }
  #weaponNotesToggle { display: list-item; min-height: 32px; padding: 6px 0; color: #b9ad88; font: 12px/1.5 var(--book); cursor: pointer; }
  .weapon-detail .weapon-trait { font-size: 11.5px; line-height: 1.4; margin: 5px 0; }
  .weapon-detail p { font-size: 12px; line-height: 1.5; margin: 6px 0; }
  .weapon-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; margin: 2px 0 4px; }
  .weapon-stats > div { flex-direction: column; gap: 3px; padding: 3px 0; }
  .weapon-stats dt, .weapon-stats dd { font-size: 11px; }
  #equipWeapon { flex-shrink: 0; margin-top: 8px; }
  .inventory-footer { min-height: 22px; margin-top: 7px; padding-top: 6px; }
  #inventoryCloseBottom { display: none; }
}
@media (max-width:699px) and (orientation:landscape) {
  .weapon-grid { grid-template-columns: repeat(5,minmax(0,1fr)); }
}


/* Contextual input stays legible without covering the adventure with controls. */
.game-mode .stage #scene[data-pointer-action="interact"] { cursor: pointer !important; }
.game-mode .stage #scene[data-pointer-action="attack"] { cursor: crosshair !important; }
.mouse-hints { display: none; }
[data-input-mode="mouse"] .mouse-hints { display: inline; }
[data-input-mode="mouse"] .keyboard-hints { display: none; }
[data-input-mode="touch"] .game-top-actions kbd,
[data-input-mode="touch"] #healButton kbd { display: none; }
.game-touch .touch-directions { grid-template-columns: repeat(2, 50px); }
.game-touch .touch-directions .touch-up { grid-column: 1; grid-row: 1; }
.game-touch .touch-directions #gameSprint { grid-column: 2; grid-row: 1; }
.game-touch button,
.game-touch .touch-directions button,
.game-touch .touch-group .touch-run { min-width: 44px; min-height: 44px; }
.game-touch .touch-actions .touch-text { padding: 2px; font-size: 8px; }
.game-touch #gameSprint[aria-pressed="true"] { background: #65523bbd; border-color: #d4b482; }
.game-mode.touch-device .game-top-actions button,
.game-mode.touch-device #healButton,
.game-mode.touch-device #portalHint { min-height: 44px; }
.game-mode.touch-device .game-top-actions button { min-width: 44px; }
.game-mode.touch-device #musicHUD { min-width: 44px; }
.game-mode.touch-device #healButton { padding: 8px 3px; }
.touch-device :is(.story-dialog, .journal-paper, .inventory-paper, .pause-card, .music-paper) button {
  min-height: 44px;
  min-width: 44px;
}
[data-input-mode="touch"] .dialogue-keys { display: none; }
@media (max-width: 600px) and (orientation: portrait) {
  .game-touch .touch-actions button { height: 50px; }
  .game-touch .touch-directions button,
  .game-touch .touch-directions .touch-run { width: 50px; height: 50px; }
  .game-mode:not(.title-open) .portal-hint { top: calc(50% + 31.25vw + 8px); }
  .game-mode:not(.title-open) #toast { top: calc(50% + 31.25vw + 60px); }
  .game-mode.touch-device .game-rotate { top: calc(50% + 31.25vw + 62px); }
}
@media (max-width: 360px) {
  .game-mode .game-top-actions { left: 8px; right: 8px; gap: 4px; justify-content: flex-end; }
  .game-mode .game-top-actions button { font-size: 10px; padding: 6px 4px; }
}
@media (max-height: 520px) and (orientation: landscape) {
  .game-mode.touch-device .portal-hint { bottom: max(3px, env(safe-area-inset-bottom)); }
}

/* One left thumb controls direction, stairs and running; the right chooses an action. */
.game-touch .touch-group.touch-directions { display: flex; flex-direction: column; gap: 6px; }
.game-mode .game-touch .touch-directions #gameMove {
  position: relative; width: 112px; height: 112px; padding: 0; border-radius: 50%;
  border: 1px solid #ac955b9c;
  background: radial-gradient(circle, #243329dd 0 38%, #16221bef 40% 63%, #66533191 65% 67%, #13221bc9 69%);
  box-shadow: inset 0 0 14px #0009, 0 4px 20px #0005;
}
#gameMove.held { border-color: #dfc07c; }
.stick-knob {
  position: absolute; width: 36px; height: 36px; top: 50%; left: 50%; margin: -18px;
  translate: var(--stick-x, 0px) var(--stick-y, 0px);
  border: 1px solid #d8bb77b3; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #a58e59, #56492f 80%);
  box-shadow: 0 3px 9px #0008; pointer-events: none;
}
.stick-north { position: absolute; top: 12px; width: 100%; font: 8px var(--mono); pointer-events: none; }
.stick-arrows { position: absolute; left: 11px; right: 11px; display: flex; justify-content: space-between; font-size: 15px; pointer-events: none; }
.stick-status { width: 112px; text-align: center; font: 8px/1.3 var(--mono); color: #d8c293; text-shadow: 0 1px 4px #000; pointer-events: none; }
/* ── Overlays that fit the screen ───────────────────────────────────────
   No menu should be a long scroll. Landscape screens (phones included, with
   ~300–430 px of height) get fixed frames with two columns or a sidebar;
   dense content is split into sub-pages (data-pages / data-pane, see
   js/ui/pages.js). Only a single long list or text may scroll — inside its
   pane, never the whole window. */
.page-tabs { display: flex; flex-wrap: wrap; gap: 3px 6px; }
.page-tabs [hidden] { display: none !important; }
.page-tabs button {
  display: flex; align-items: center; gap: 7px;
  min-height: 36px; padding: 6px 10px; margin: 0;
  border: 0; border-bottom: 1px solid #776b4959; border-radius: 0;
  background: none; box-shadow: none;
  color: #adae9c; font: 13px/1.2 var(--book); text-align: left; white-space: nowrap;
}
.page-tabs button::before { content: "◇"; font-size: 9px; color: #94805a; }
.page-tabs button:hover { color: #f0dfba; background: #b4944b14; }
.page-tabs button[aria-selected="true"] {
  color: #f1dcaa; border-color: #c9aa6c;
  background: linear-gradient(90deg, #b4944b30, transparent);
}
.page-tabs button[aria-selected="true"]::before { content: "◆"; color: #d1ad6a; }
[data-pages] [data-pane]:not(.page-active) { display: none !important; }
/* Side quests get their own tab only where the goal page has no room for them. */
.journal-paper .page-tabs [data-page="side"] { display: none; }
[data-input-mode="touch"] #pauseKeyHints { display: none; }

/* The title art is a backdrop: it covers the screen at any proportions. */
.title-open .stage #scene { width: 100vw !important; height: 100dvh !important; object-fit: cover; }

/* Key bindings: the help pane replaces the list. */
#bindingsPane[data-active-page="help"] #bindingsGrid { display: none; }
#bindingsPane :is(.binding-help, .binding-footer) { font: 13px/1.7 var(--book); color: #b8beac; }
#bindingsPane .page-tabs { margin: 12px 0 10px; }

/* Sound: a heading row with the two pages. */
.music-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 16px; }
.music-head h2 { margin-bottom: 0; }
.music-paper .music-intro { margin: 16px 0 12px; }
.music-paper .music-foot { margin: 0; }

/* Journal. */
.journal-grid, .journal-grid.log-empty, .journal-grid aside { display: contents; }
.journal-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding-right: 6px; scrollbar-width: thin; }
.journal-body h3:first-child { margin-top: 0; }
.journal-paper .page-tabs { margin: 0 0 14px; }
#journalSide p { margin: 0 0 8px; }
#journalBestiary, .journal-tips { columns: 2 200px; column-gap: 28px; }
#journalBestiary p, .journal-tips p { margin: 0 0 12px; break-inside: avoid; }
.journal-tips h3 { column-span: all; }
/* Conversations: a shelf of names; the open one becomes its own page. */
#journalLog { display: flex; flex-wrap: wrap; gap: 6px; }
#journalLog > p { margin: 0; }
#journalLog details { border: 1px solid #776b4959; background: #b4944b0d; }
.journal-paper #journalLog summary { list-style: none; padding: 9px 11px; min-height: 36px; line-height: 1.3; }
#journalLog summary::-webkit-details-marker { display: none; }
#journalLog summary::before { content: "◇"; margin-right: 7px; font-size: 9px; color: #94805a; }
#journalLog summary:hover { background: #b4944b1f; }
#journalLog details:not([open]) .log-role { display: none; }
#journalLog:has(details[open]) details:not([open]) { display: none; }
#journalLog details[open] { flex: 1 1 100%; border: 0; background: none; }
.journal-paper #journalLog details[open] summary { padding: 0 0 8px; border-bottom: 1px solid #a68c5140; font-size: 16px; }
#journalLog details[open] summary::before { content: "←"; font-size: 14px; color: #d1ad6a; }
#journalLog details[open] p { margin: 10px 0; }

/* Portrait: one column, the sub-pages as a row of tabs. */
@media (orientation: portrait) {
  .journal-paper, .music-paper, .pause-card.editing-bindings { display: flex; flex-direction: column; }
  .journal-body { flex: 1; }
  .pause-card.editing-bindings #bindingsPane:not([hidden]) { display: flex; flex-direction: column; min-height: 0; flex: 1; }
  #bindingsGrid { flex: 0 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; }
  .music-columns { flex: 0 1 auto; min-height: 0; overflow-y: auto; }
}

@media (orientation: landscape) {
  /* Pause: story and resume on the left, every option visible on the right. */
  .pause-card { width: min(720px, 100%); }
  #pauseMain {
    display: grid; column-gap: 24px;
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
    grid-template-rows: 1fr auto;
    grid-template-areas: "intro options" "meta options";
  }
  .pause-intro { grid-area: intro; }
  .pause-options { grid-area: options; }
  .pause-meta { grid-area: meta; }
  .pause-group { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; }
  .pause-group:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
  .pause-group h3 { grid-column: 1 / -1; margin: 0; }
  .pause-card .pause-group .button { margin: 0; line-height: 1.25; }

  /* Key bindings: groups as sub-pages, the list beside the actions. */
  .pause-card.editing-bindings { width: min(780px, 100%); display: flex; flex-direction: column; }
  #bindingsPane:not([hidden]) {
    flex: 1; min-height: 0; display: grid; column-gap: 24px;
    grid-template-columns: minmax(170px, 31%) minmax(0, 1fr);
    grid-template-rows: auto auto auto auto 1fr;
  }
  .bindings-head { grid-column: 1; grid-row: 1; }
  #bindingsPane .page-tabs { grid-column: 1; grid-row: 2; display: grid; grid-template-columns: 1fr 1fr; }
  #bindingsPane .page-tabs button { padding-inline: 6px; }
  #bindingsNotice { grid-column: 1; grid-row: 3; min-height: 0; }
  #bindingCancel { grid-column: 1; grid-row: 4; justify-self: start; }
  .binding-actions { grid-column: 1; grid-row: 5; align-self: end; flex-direction: column; }
  #bindingsGrid {
    grid-column: 2; grid-row: 1 / -1; min-height: 0; overflow-y: auto; overscroll-behavior: contain;
    align-content: start; padding-right: 4px;
  }
  #bindingsPane :is(.binding-help, .binding-footer) { grid-column: 2; align-self: start; }
  #bindingsPane .binding-help { grid-row: 1; margin: 4px 0 0; }
  #bindingsPane .binding-footer { grid-row: 2 / -1; margin: 12px 0 0; }

  /* Sound: music and effects side by side, credits on their own page. */
  .music-paper { width: min(760px, 100%); display: flex; flex-direction: column; overflow: hidden; }
  .music-head { flex: none; }
  .music-columns { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; flex: 0 1 auto; min-height: 0; overflow-y: auto; }
  .sfx-settings { margin: 0; padding: 0; border: 0; }
  .music-now { border-bottom: 0; }
  #sfxTest { width: 100%; }
  .music-actions { order: 9; flex: none; }
  .music-paper .music-foot { min-height: 0; overflow-y: auto; }

  /* Journal: header and sections in a sidebar, one page of content beside. */
  .journal-paper {
    width: min(920px, 100%); overflow: hidden;
    display: grid; column-gap: 24px;
    grid-template-columns: 172px minmax(0, 1fr);
    grid-template-rows: auto auto 1fr;
  }
  .journal-top { display: contents; }
  .journal-top > div { grid-column: 1; grid-row: 1; }
  #journalClose { grid-column: 1; grid-row: 3; align-self: end; justify-self: stretch; }
  .journal-paper .page-tabs { grid-column: 1; grid-row: 2; flex-direction: column; flex-wrap: nowrap; gap: 2px; margin: 12px 0; }
  .journal-body { grid-column: 2; grid-row: 1 / -1; }
  .journal-paper[data-active-page="goal"] .journal-body {
    display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 24px; align-content: start;
  }
  .journal-paper[data-active-page="goal"] .journal-inventory { border-bottom: 0; margin-bottom: 0; }
}

/* Landscape screens with room to spare: the same layouts, at reading size. */
@media (orientation: landscape) and (min-height: 541px) {
  .pause-card { width: min(880px, 100%); padding: 24px 32px; }
  #pauseMain { grid-template-columns: minmax(0, .85fr) minmax(0, 1.3fr); column-gap: 32px; }
  .pause-card p { margin-bottom: 18px; }
  .pause-group { gap: 4px 10px; }
  .pause-group h3 { margin-bottom: 4px; }
  .pause-card .pause-group .button { min-height: 46px; padding: 6px 13px; }
  .pause-card.editing-bindings { width: min(900px, 100%); padding: 24px 32px; }
  /* Tall enough for the longest group, so switching tabs does not resize the card. */
  #bindingsPane:not([hidden]) { min-height: 360px; }
  .binding-actions .button, .binding-actions .button.primary { min-height: 44px; font-size: 15px; }
  #bindingsGrid .binding-key { min-height: 38px; }
  .binding-actions { gap: 8px; }
  .music-paper { width: min(840px, 100%); padding: 26px 34px; }
  .music-columns { gap: 44px; margin-top: 14px; }
  .music-actions { margin-top: 20px; }
  .journal-paper { width: min(1000px, 100%); height: min(680px, calc(100dvh - 60px)); padding: 26px 32px; grid-template-columns: 210px minmax(0, 1fr); column-gap: 34px; }
  .journal-paper h2 { font-size: 28px; }
  .journal-paper .page-tabs button { min-height: 44px; font-size: 15px; }
  .journal-paper p, .journal-grid aside p { font-size: 14px; line-height: 1.75; }
  #journalSide p { font-size: 13px; line-height: 1.6; }
  .journal-paper #journalLog summary { font-size: 15px; }
  #journalClose { min-height: 44px; }
}

@media (max-height: 540px) and (orientation: landscape) {
  /* One frame for every paper: thinner brass, tighter margins. */
  .pause-screen, .journal-modal, .music-modal { padding: 8px; }
  .pause-card, .pause-card.editing-bindings, .journal-paper, .music-paper {
    max-height: calc(100dvh - 16px);
    border-width: 10px; border-image-width: 16px;
    padding: 10px 18px;
  }
  .pause-card h2, .journal-paper h2, .music-paper h2 {
    font: 23px/1.1 var(--book); letter-spacing: -.3px; margin: 3px 0 0;
  }
  .story-kicker, .pause-card .eyebrow { font-size: 8px; letter-spacing: 2.2px; }

  .pause-card:not(.editing-bindings) { width: min(900px,100%); overflow: hidden; }
  #pauseMain { grid-template-columns: minmax(180px,.8fr) minmax(0,1.5fr); column-gap: 20px; }
  #pauseKeyHints { display: none; }
  .pause-meta { font-size: 10px; line-height: 1.5; margin-top: 8px; padding-top: 7px; }
  .pause-card p { font-size: 11.5px; line-height: 1.6; margin: 6px 0 10px; }
  .pause-card .button.primary { padding: 8px 12px; min-height: 44px; font-size: 16px; }
  .pause-group { margin-top: 8px; padding-top: 7px; }
  .pause-group h3 { font-size: 9px; }
  .pause-card .pause-group .button { min-height: clamp(36px, 12.2dvh, 44px); padding: 4px 10px; font-size: 13px; line-height: 1.2; }

  .pause-card.editing-bindings { width: min(780px, 100%); height: calc(100dvh - 16px); }
  #bindingsTitle { font-size: 23px; margin: 3px 0 0; }
  #bindingsPane .page-tabs { margin: 8px 0 4px; }
  #bindingsPane .page-tabs button { padding-block: 4px; font-size: 12px; }
  #bindingsNotice { margin: 4px 0; font-size: 10.5px; line-height: 1.45; }
  #bindingCancel { padding: 0 0 6px; }
  .binding-actions { gap: 5px; }
  .binding-actions .button, .binding-actions .button.primary { min-height: 40px; padding: 6px 10px; font-size: 14px; }
  #bindingsGrid { gap: 4px 8px; }
  #bindingsGrid .binding-key { min-height: clamp(30px, 10dvh, 38px); padding: 3px 6px; }
  .binding-action { font-size: 11.5px; padding: 2px 0; }

  .music-columns { gap: 26px; margin-top: 10px; }
  .music-paper .music-toggle-row, .sfx-settings .music-toggle-row { margin: 0 0 6px; }
  .music-toggle-row button { min-height: 38px; padding: 6px 12px; }
  .music-volume-label { margin-bottom: 0; }
  .music-paper .music-volume-hints { margin: 2px 0 6px; }
  .music-now { padding: 6px 0 0; }
  #musicStatus { min-height: 0; margin-top: 3px; }
  #sfxTest { min-height: 38px; }
  .sfx-settings #sfxStatus { margin: 5px 0 0; font-size: 9px; }
  .music-actions { margin-top: 10px; }
  .music-actions button { min-height: 40px; padding: 6px 14px; }
  .music-paper .music-intro { margin: 10px 0 6px; font-size: 13px; line-height: 1.7; }
  .music-paper .music-foot { font-size: 9.5px; }

  .journal-paper { height: calc(100dvh - 16px); column-gap: 22px; }
  .journal-paper h2 { font-size: 22px; }
  #journalClose { min-height: 40px; padding: 6px 10px; font-size: 13px; }
  .journal-paper h3 { font-size: 16px; margin: 0 0 8px; }
  .journal-current { padding: 10px 14px; }
  .journal-current h3 { margin-bottom: 4px; }
  .journal-paper p, .journal-grid aside p { font-size: 12.5px; line-height: 1.65; }
  #journalSide p { margin: 0 0 7px; font-size: 12px; line-height: 1.5; }
  .journal-inventory { padding: 9px 0 10px; margin-bottom: 12px; }
  .journal-paper #journalLog summary { font-size: 13px; min-height: 32px; padding: 7px 10px; }
  .journal-paper .page-tabs [data-page="side"] { display: flex; }
  .journal-paper .tab-more, .journal-paper .pane-title, .journal-side h3 { display: none; }
  .journal-paper[data-active-page="goal"] .journal-side { display: none !important; }
  .journal-paper[data-active-page="goal"] .journal-body { display: block; }
  .journal-paper .page-tabs { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 4px; margin: 8px 0; }
  .journal-paper .page-tabs button { min-height: 40px; padding: 5px; font-size: 12px; justify-content: center; text-align: center; white-space: normal; overflow-wrap: anywhere; }
  .journal-paper .page-tabs button::before { display: none; }
  #journalSide, #journalDungeons { columns: 2 190px; column-gap: 22px; }
  #journalSide > p, #journalDungeons > p { break-inside: avoid; }
  #journalDungeons > h3 { column-span: all; }
  #journalDungeons .story-button { min-height: 40px; padding: 5px 10px; margin-top: 4px; font-size: 12px; }
  #journalBestiary p { font-size: 12px; line-height: 1.55; }
  #journalBestiary, .journal-tips { columns: 2 180px; column-gap: 26px; }
  #journalBestiary p, .journal-tips p { margin: 0 0 10px; }

  /* Dialogue: the speaker in a narrow column, so the text needs fewer lines
     and the upper half of the scene (and who is talking) stays visible. */
  .story-modal { padding: 8px; }
  .story-dialog {
    width: min(820px, 100%); max-height: calc(100dvh - 16px);
    display: grid; grid-template-columns: 112px minmax(0, 1fr); column-gap: 20px; align-content: start;
    border-width: 10px; border-image-width: 16px; padding: 10px 18px;
  }
  .speaker-head { grid-column: 1; grid-row: 1 / span 4; display: flex; flex-direction: column; align-items: flex-start; gap: 5px; }
  .speaker-head canvas { width: 54px; height: 54px; }
  .speaker-head h2 { font-size: 19px; line-height: 1.15; margin: 0 0 3px; }
  .speaker-head small { display: block; font-size: 7.5px; line-height: 1.5; letter-spacing: 1px; }
  #dialoguePage { font-size: 9px; }
  .story-dialog > :not(.speaker-head) { grid-column: 2; }
  #dialogueText { font-size: 14.5px; line-height: 1.6; margin: 2px 0 6px; min-height: 0; }
  #dialogueChoices { gap: 6px; }
  .story-choice { padding: 6px 12px; min-height: 40px; font-size: 12.5px; line-height: 1.35; }
  #dialogueHint { margin: 4px 0; font-size: 11.5px; }
  .dialogue-actions { margin-top: 2px; }
  .dialogue-actions .story-button { min-height: 40px; padding: 6px 16px; font-size: 14px; }

  /* Ending: the verdict and actions on the left, the epilogue on the right. */
  #endingOverlay { padding: 14px max(22px, 5vw); }
  .ending-content {
    max-width: 880px; display: grid; column-gap: 34px; text-align: left; align-items: start;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  }
  .ending-content > * { grid-column: 1; }
  .ending-content h1 { font-size: clamp(28px, 9dvh, 40px); margin: 8px 0 10px; }
  .ending-content #endingText { grid-column: 2; grid-row: 1 / 3; align-self: end; margin: 0 0 10px; }
  .ending-content #endingAfter { grid-column: 2; grid-row: 3 / 7; margin: 0; }
  .ending-content p { font-size: 13px; line-height: 1.7; }
  #endingStats { margin: 0 0 10px; font-size: 8.5px; line-height: 1.7; }
  .ending-content .title-actions { justify-content: flex-start; margin-top: 4px; }
  .ending-content .title-footer { margin-top: 10px; }

  /* Title: the confirmation replaces the menu instead of pushing it below the fold. */
  #newConfirm { margin-top: 10px; padding: 12px 14px; }
  #newConfirm button { margin-top: 4px; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 700px) {
  .journal-paper[data-active-page="goal"] .journal-body { display: block; }
}
@media (max-height: 540px) and (orientation: landscape) and (max-width: 620px) {
  .journal-paper { grid-template-columns: 136px minmax(0, 1fr); column-gap: 16px; }
  .journal-paper .page-tabs button { padding-inline: 6px; font-size: 12px; }
}
@media (max-height: 400px) and (orientation: landscape) {
  .title-footer { display: none; }
  .story-lead { line-height: 1.35; }
  .title-rule { margin: 8px 0; }
  #menuStatus { margin-top: 6px; }
}

/* The smallest landscape phones (≈320 px high): trim decoration, never content. */
@media (max-height: 350px) and (orientation: landscape) {
  .pause-card, .pause-card.editing-bindings, .journal-paper, .music-paper, .inventory-paper, .story-dialog { padding: 8px 14px; }
  [data-pages] .page-tabs button { min-height: 36px; padding-block: 3px; }
  .journal-paper .page-tabs { margin: 6px 0; }
  .journal-paper .page-tabs button { min-height: 32px; }
  #journalClose { min-height: 36px; }
  .journal-paper h2, .pause-card h2, .music-paper h2, .inventory-header h2, #bindingsTitle { font-size: 20px; }
  .story-meta { display: none; }
  .story-title { font-size: 32px; }
  .music-paper .music-volume-hints { display: none; }
  .music-columns { margin-top: 6px; }
  .weapon-slot-name { font-size: 10.5px; }
  .weapon-detail p { font-size: 11.5px; margin: 4px 0; }
  .weapon-detail #weaponPreview { height: 50px; }
  #bindingsPane :is(.binding-help, .binding-footer) { font-size: 12px; line-height: 1.55; }
  #dialogueText { font-size: 13.5px; line-height: 1.55; }
  .ending-content p { font-size: 12px; line-height: 1.6; }
}

/* In-game HUD on landscape phones: one line per label, so the corners stay
   small and the middle of the scene belongs to the game. */
@media (max-height: 540px) and (orientation: landscape) {
  .game-mode #questChapter { letter-spacing: 1.8px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .game-mode #questTitle { font-size: 16px; margin: 5px 0 4px; }
  .game-mode .quest-track { margin-top: 8px; }
}
@media (max-height: 350px) and (orientation: landscape) {
  .game-mode #questHUD { width: 170px; }
  .game-mode #questTitle { font-size: 14px; }
  .game-mode.touch-device .game-top-actions button { min-height: 38px; padding: 5px 8px; font-size: 12px; }
  .game-mode.touch-device #musicHUD { min-width: 38px; }
  .game-mode .combat-hud, .game-mode #questHUD { top: 52px; }
}
/* The atlas stays in view; only the selected realm's long notes scroll. */
.world-map-modal { position:absolute; inset:0; z-index:150; padding:clamp(8px,2vw,24px); background:rgba(5,12,17,.86); display:flex; align-items:center; justify-content:center; touch-action:auto; backdrop-filter:blur(5px); }
.world-map-modal[hidden] { display:none; }
body.title-open #toast,body.title-open #chapterToast,
body:has(#worldMapOverlay:not([hidden])) #toast,
body:has(#worldMapOverlay:not([hidden])) #chapterToast { visibility:hidden; }
.world-map-paper { width:min(1100px,100%); height:min(650px,100%); overflow:hidden; display:flex; flex-direction:column; padding:clamp(12px,2vw,22px); color:#ddd5b9; background:radial-gradient(ellipse at 20% 0,#70613b25,transparent 64%),linear-gradient(115deg,#1d2b28,#0e1b1f); border:12px solid transparent; border-image:url('./assets/ui/antique-frame.svg') 30 / 20px / 0 stretch; box-shadow:0 24px 100px #000b,inset 0 0 45px #0007; }
.world-map-paper header { display:flex; flex-shrink:0; gap:12px; justify-content:space-between; align-items:flex-start; }
#worldMapClose { flex-shrink:0; white-space:nowrap; min-height:44px; font-size:13px; padding:10px 14px; }
.world-map-paper h2 { font:clamp(26px,3vw,38px)/1.15 var(--book); margin:4px 0; color:var(--ivory); }
.world-map-paper small,.world-map-paper footer { color:#aaa88b; font:10px/1.5 var(--book); letter-spacing:.04em; }
.world-map-paper p { font:13px/1.5 var(--book); margin:8px 0; }
.world-map-paper footer { flex-shrink:0; padding-top:10px; border-top:1px solid #9b84452e; }
.world-map-layout { flex:1; min-height:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(220px,.42fr); gap:24px; margin:16px 0; }
.world-map-grid { min-height:0; display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); grid-template-rows:repeat(4,minmax(0,1fr)); gap:8px; padding:3px; }
.world-map-cell { position:relative; min-width:0; min-height:44px; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; padding:6px; border:1px solid #81714b38; border-radius:0; color:#718078; background:#08131640; font:12px/1.25 var(--book); }
.world-map-cell.discovered { color:#ddd0aa; border-color:#8f8056; background:radial-gradient(ellipse,#6b75412b,#20312d); }
.world-map-cell.current { box-shadow:inset 0 0 24px #bba56330; border-color:#d3b575; }
.world-map-cell.selected { outline:2px solid #d0ae65; outline-offset:1px; }
.world-map-cell:focus-visible { outline:2px solid #f3d997; }
.world-map-name { overflow-wrap:anywhere; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; overflow:hidden; }
.world-map-cell:not(.discovered) .world-map-name,.world-map-cell small:empty { display:none; }
.world-map-symbol { font-size:27px; line-height:1; }
.world-map-cell small { font:10px/1 var(--book); color:#bea46f; }
.map-link { position:absolute; background:#ad9d76; opacity:.75; pointer-events:none; }
.map-link.east,.map-link.west { width:10px; height:1px; top:50%; }
.map-link.east { right:-10px; }.map-link.west { left:-10px; }
.map-link.north,.map-link.south { height:10px; width:1px; left:50%; }.map-link.north { top:-10px; }.map-link.south { bottom:-10px; }
.world-map-layout aside { min-width:0; min-height:0; display:flex; flex-direction:column; border-left:1px solid #73684a66; padding-left:22px; }
.world-map-layout h3 { flex-shrink:0; font:23px/1.15 var(--book); margin:0 0 6px; color:var(--ivory); }
.world-map-scroll { flex:1; min-height:0; overflow-y:auto; scrollbar-width:thin; scrollbar-color:#81714c #14201c; overscroll-behavior:contain; padding-right:5px; }
.world-map-layout ul { padding:0; margin:12px 0; list-style:none; font:13px/1.7 var(--book); }
.world-map-layout li { padding:4px 0; border-bottom:1px solid #9b84451c; }
.world-map-actions { flex-shrink:0; display:flex; flex-wrap:wrap; gap:6px; padding-top:10px; }
.world-map-actions:not(:has(button:not([hidden]))) { display:none; }
.world-map-actions .story-button { flex:1 0 100%; min-height:44px; font-size:13px; padding:9px 12px; }
.world-map-rumours summary { min-height:44px; display:list-item; align-content:center; cursor:pointer; color:#bba979; font:13px/1.5 var(--book); padding:10px 0; }
.world-map-rumours summary:focus-visible { outline:2px solid #e6c58b; outline-offset:-2px; }
#worldMapQuests { white-space:pre-line; color:#c0ba9d; }
#worldMapNotice:empty { display:none; }
@media (max-width:700px) and (orientation:portrait) {
  .world-map-modal { padding:max(6px,env(safe-area-inset-top)) max(6px,env(safe-area-inset-right)) max(6px,env(safe-area-inset-bottom)) max(6px,env(safe-area-inset-left)); }
  .world-map-paper { height:100%; padding:12px; border-width:8px; }
  .world-map-layout { grid-template-columns:1fr; grid-template-rows:minmax(200px,1.1fr) minmax(0,1fr); gap:14px; margin:10px 0; }
  .world-map-layout aside { border-left:0; border-top:1px solid #73684a66; padding:12px 0 0; }
  .world-map-cell { font-size:10px; gap:3px; padding:3px 1px; }
  .world-map-name { overflow-wrap:normal; hyphens:auto; }
  .world-map-symbol { font-size:23px; }
  .world-map-grid { gap:6px; }
  .world-map-layout h3 { font-size:22px; }
  .world-map-actions .story-button { flex-basis:calc(50% - 6px); font-size:12px; }
  .world-map-paper footer { font-size:10px; padding-top:8px; }
}
@media (max-height:540px) and (orientation:landscape) {
  .world-map-modal { padding:max(5px,env(safe-area-inset-top)) max(10px,env(safe-area-inset-right)) max(5px,env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-left)); }
  .world-map-paper { height:100%; border-width:6px; padding:10px 14px; }
  .world-map-paper header { align-items:center; }
  .world-map-paper header > div { display:flex; align-items:baseline; flex-wrap:wrap; gap:4px 16px; }
  #worldMapMode { display:none; }
  .world-map-paper h2 { font-size:26px; margin:0; }
  #worldMapCount { font-size:11px; margin:0; }
  .world-map-layout { gap:18px; margin:8px 0; grid-template-columns:minmax(0,1fr) minmax(200px,.5fr); }
  .world-map-cell { font-size:10px; line-height:1.1; padding:2px; gap:2px; }
  .world-map-symbol { font-size:16px; }
  .world-map-cell small { font-size:9px; }
  .world-map-grid { gap:5px; }
  .world-map-layout aside { padding-left:16px; }
  .world-map-layout h3 { font-size:21px; }
  .world-map-paper footer { font-size:10px; padding-top:6px; }
  .world-map-actions { padding-top:6px; }
}
@media (max-height:350px) and (orientation:landscape), (max-width:350px) and (orientation:portrait) {
  .world-map-name { display:none; }
  .world-map-symbol { font-size:24px; }
}

/* Language is chosen before entering the world; names remain stable during play. */
.language-pick{display:flex;align-items:center;justify-content:flex-start;flex-wrap:wrap;gap:6px 12px;margin:10px 0;color:var(--muted,#b5a98e);font-size:12px;max-width:460px}
.language-pick select{width:auto;font:inherit;color:#ecdbb5;background:#1b221f;border:1px solid #70664f;border-radius:3px;padding:7px 24px 7px 10px;min-height:34px;cursor:pointer}
.language-pick small{flex-basis:100%;font-size:10px;line-height:1.4;opacity:.8}
.language-pick select:focus-visible{outline:2px solid #e6c58b;outline-offset:3px}
@media(max-height:500px) and (orientation:landscape){.language-pick{margin:5px 0;gap:3px 10px}}

/* A quiet title page: play first, optional settings on a separate fold. */
#fpsCounter { margin-top: 5px; font: 10px/1.3 var(--mono); color: #dfd7be; font-variant-numeric: tabular-nums; }
.fps-limit { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; color: #dfd7be; font: 13px/1.4 var(--book); }
.fps-limit > span { white-space: nowrap; }
.fps-limit select { width: auto; min-width: 0; min-height: 44px; padding: 6px 10px; font: inherit; color: #dfd7be; background: #14232c; border: 1px solid #536054; }
.title-options-body > .fps-limit { margin: 12px 0; }
.pause-group > .fps-limit { padding: 0 10px; }
#mainMenu { padding:clamp(24px,5dvh,64px) clamp(24px,6vw,100px); }
#mainMenu .title-content { width:min(520px,100%); max-width:none; max-height:100%; padding:0; margin-block:auto; display:grid; grid-template-rows:auto minmax(0,1fr); gap:22px; }
.title-intro,.title-menu { min-width:0; min-height:0; }
.title-menu { overflow-y:auto; scrollbar-width:thin; scrollbar-color:#81714c #14201c; overscroll-behavior:contain; padding:2px; }
#mainMenu .story-title { font-size:clamp(48px,6vw,78px); margin:20px 0; }
#mainMenu .story-lead { font-size:16px; line-height:1.65; margin-bottom:0; }
#mainMenu .title-rule { margin:22px 0 18px; }
#mainMenu .title-rule::before { top:-9px; line-height:18px; }
#mainMenu .story-meta { font-size:9px; line-height:1.7; }
#mainMenu .title-actions { display:grid; gap:8px; margin:0; }
#mainMenu .title-actions .story-button { width:100%; min-width:0; min-height:50px; padding:12px 20px 12px 32px; font-size:21px; }
#mainMenu .title-actions:has(#startContinue:not([hidden])) #startNew,
#mainMenu #startNextEvening { font-size:16px; min-height:44px; padding-block:9px; }
#mainMenu #continueMeta { margin:10px 0 6px; font-size:11px; line-height:1.5; letter-spacing:.5px; }
.title-options { border-bottom:1px solid #b3935340; }
.title-options summary { min-height:44px; padding:12px 0; cursor:pointer; font:14px/1.4 var(--book); color:#c8bd9c; }
.title-options summary:focus-visible { outline:2px solid #e6c58b; outline-offset:-2px; }
.title-options[open] summary { color:#ebd3a1; }
.title-options-body { max-height:min(310px,40dvh); overflow-y:auto; scrollbar-width:thin; overscroll-behavior:contain; padding:0 6px 12px 0; }
#mainMenu .difficulty-pick { margin:0; }
#mainMenu .difficulty-head span { font-size:11px; letter-spacing:1px; }
#mainMenu .difficulty-head b { font-size:17px; }
#mainMenu .difficulty-rail input { height:44px; }
#mainMenu .difficulty-rail input::-webkit-slider-thumb { margin-top:-9.5px; width:22px; height:22px; }
#mainMenu .difficulty-rail input::-moz-range-thumb { width:22px; height:22px; }
#mainMenu .difficulty-ticks button:first-child::before { left:11px; }
#mainMenu .difficulty-ticks button:last-child::before { right:11px; }
#mainMenu .difficulty-ticks button { font-size:13px; min-height:30px; }
#mainMenu #difficultyDesc { display:block; font-size:12px; line-height:1.5; margin:5px 0 18px; }
#mainMenu .language-pick { margin:12px 0; gap:6px 12px; font-size:13px; }
#mainMenu .language-pick select { min-height:44px; }
#mainMenu .language-pick small { font-size:11px; line-height:1.5; }
#mainMenu .title-minor { margin:10px 0 0; gap:2px 18px; }
#mainMenu .title-minor button { min-height:44px; font-size:13px; text-align:left; }
#mainMenu .title-install { margin-top:4px; }
#mainMenu .title-install:has(#installGame[hidden]) { display:none; }
#mainMenu .title-footer { margin-top:16px; font-size:9px; }
#mainMenu #menuStatus:empty { display:none; }
#mainMenu #newConfirm { max-width:none; margin:0; }
#mainMenu #newConfirm p { font:14px/1.6 var(--book); }
#mainMenu #newConfirm button { min-height:44px; font-size:14px; }
#mainMenu .title-menu:has(#newConfirm:not([hidden])) > :not(#newConfirm,#menuStatus) { display:none; }
@media (max-width:700px) and (orientation:portrait) {
  #mainMenu { padding:max(24px,env(safe-area-inset-top)) max(22px,env(safe-area-inset-right)) max(20px,env(safe-area-inset-bottom)) max(22px,env(safe-area-inset-left)); }
  #mainMenu .title-content { gap:16px; }
  #mainMenu .story-kicker { font-size:9px; letter-spacing:2px; line-height:1.7; }
  #mainMenu .story-title { font-size:clamp(42px,14vw,58px); margin:16px 0; }
  #mainMenu .story-lead { font-size:14px; }
  #mainMenu .title-rule { margin:18px 0 14px; }
  #mainMenu .title-actions .story-button { font-size:20px; }
}
@media (max-height:700px) and (orientation:portrait) {
  #mainMenu .story-meta,#mainMenu .title-footer { display:none; }
  #mainMenu .story-title { font-size:42px; margin:12px 0; }
  #mainMenu .title-rule { margin:14px 0 12px; }
  #mainMenu .title-content { gap:14px; }
}
@media (max-height:540px) and (orientation:landscape) {
  #mainMenu { padding:max(16px,env(safe-area-inset-top)) max(24px,env(safe-area-inset-right)) max(16px,env(safe-area-inset-bottom)) max(24px,env(safe-area-inset-left)); background:linear-gradient(90deg,#060e10ed,#091315d9 55%,#09131580); }
  #mainMenu .title-content { width:min(980px,100%); height:100%; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); gap:clamp(22px,5vw,52px); align-items:center; }
  #mainMenu .title-intro { max-height:100%; overflow-y:auto; scrollbar-width:thin; }
  #mainMenu .story-kicker { font-size:9px; letter-spacing:2px; line-height:1.6; }
  #mainMenu .story-title { font-size:clamp(38px,13dvh,56px); margin:16px 0; }
  #mainMenu .story-lead { font-size:14px; line-height:1.5; }
  #mainMenu .title-rule { margin:18px 0 12px; }
  #mainMenu .story-meta,#mainMenu .title-footer { display:none; }
  #mainMenu .title-menu { max-height:100%; border-left:1px solid #b3935340; padding-left:24px; }
  #mainMenu .title-actions .story-button { min-height:48px; font-size:19px; padding-block:11px; }
  #mainMenu .title-actions:has(#startContinue:not([hidden])) #startNew,
  #mainMenu #startNextEvening { min-height:44px; font-size:15px; padding-block:9px; }
  #mainMenu .title-options-body { max-height:34dvh; }
}
@media (max-height:350px) and (orientation:landscape) {
  #mainMenu .title-menu { padding-left:16px; }
  #mainMenu .title-actions { gap:4px; }
  #mainMenu .title-actions .story-button { font-size:18px; min-height:44px; padding:8px 9px 8px 26px; }
  #mainMenu #continueMeta { margin:6px 0 2px; }
  #mainMenu .title-install { margin-top:0; }
}

/* A gamepad replaces the on-screen touch buttons. */
.game-mode.touch-device[data-input-mode="gamepad"] .game-touch { display: none; }

/* Flare readiness on the lantern button: a warm edge when oil and time allow. */
#gameLantern[data-flare="ready"] { box-shadow: inset 0 -2px 0 #d9a55a80; }
#gameLantern[data-flare="cooling"] { box-shadow: inset 0 -2px 0 #6d5a3c60; }

/* Kronika wyprawy: value tiles in the journal and on the dawn screen. */
.chronicle-group h4 { font: 10px/1.6 var(--mono); letter-spacing: .12em; text-transform: uppercase; color: #9fae98; margin: 14px 0 8px; font-weight: 400; }
.chronicle { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: 8px; margin: 0; }
.chronicle > div { display: flex; flex-direction: column-reverse; gap: 3px; padding: 9px 11px; background: #1c2d34; border: 1px solid #3a4d4a80; }
.chronicle dt { font: 9.5px/1.4 var(--mono); color: #8fa196; }
.chronicle dd { margin: 0; font: 17px/1.2 Georgia, serif; color: #e2d6b4; }
#endingStats { text-align: left; width: 100%; }
#endingStats .chronicle { grid-template-columns: repeat(auto-fill, minmax(98px, 1fr)); gap: 6px; }
#endingStats .chronicle > div { background: #172a31cc; padding: 6px 9px; }
#endingStats .chronicle dd { font-size: 14px; }
#endingStats .chronicle-group h4 { margin: 10px 0 6px; }
@media (max-height:540px) and (orientation:landscape) {
  #journalChronicle { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 20px; }
  #journalChronicle .chronicle-group h4 { margin: 0 0 8px; }
  #journalChronicle .chronicle { display: block; }
  #journalChronicle .chronicle > div { flex-direction: row; justify-content: space-between; gap: 12px; padding: 5px 0; border: 0; border-bottom: 1px solid #a68c5130; background: none; }
  #journalChronicle .chronicle dt { font: 11px/1.4 var(--book); }
  #journalChronicle .chronicle dd { font-size: 12px; text-align: right; }
}

/* Inventory number keys and the local F9 location picker. */
.weapon-slot { position: relative; }
.weapon-shortcut {
  position: absolute; top: 5px; right: 6px; min-width: 18px; padding: 1px 3px;
  border: 1px solid #b9955b88; background: #1b251fe6; color: #edcf94;
  font: 11px/1.2 var(--mono); text-align: center;
}
.dev-travel-paper { width: min(940px,100%); height: min(760px,calc(100dvh - 48px)); }
.dev-travel-paper .inventory-header p { margin-bottom: 12px; }
.dev-travel-search-row { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.dev-travel-search-row input {
  flex: 1; min-width: 0; min-height: 43px; padding: 10px 13px;
  border: 1px solid #8b784680; border-radius: 0; outline: none;
  color: #ecdfc3; background: #091514; font: 14px/1.4 var(--book);
}
.dev-travel-search-row input:focus-visible { border-color: #e3bf77; box-shadow: 0 0 0 2px #e3bf7740; }
.dev-travel-search-row span { flex-shrink: 0; color: #aab39c; font: 11px var(--mono); }
.dev-travel-list { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-right: 5px; }
.dev-travel-group { margin-bottom: 20px; }
.dev-travel-group h3 { margin: 0 0 8px; color: #cfb57f; font: 15px/1.4 var(--book); }
.dev-travel-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 7px; }
.dev-travel-place {
  display: flex; flex-direction: column; align-items: flex-start; gap: 4px;
  min-width: 0; min-height: 54px; padding: 8px 10px;
  border: 1px solid #7e704159; border-radius: 0; cursor: pointer;
  color: #e1d7bb; background: #15211e; text-align: left; font: 13px/1.3 var(--book);
}
.dev-travel-place:hover, .dev-travel-place:focus-visible { border-color: #dfb873; background: #273329; outline: none; }
.dev-travel-place small { max-width: 100%; overflow-wrap: anywhere; color: #9eaa9a; font: 10px/1.3 var(--mono); }
.dev-travel-empty { color: #aab39c; font: 14px var(--book); }
.dev-travel-open .game-touch, .dev-travel-open #toast { visibility: hidden; }
@media (max-width:650px) {
  .dev-travel-paper { height: calc(100dvh - 16px); max-height: calc(100dvh - 16px); }
  .dev-travel-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media (max-width:420px) { .dev-travel-grid { grid-template-columns: 1fr; } }
@media (max-height:540px) and (orientation:landscape) {
  .dev-travel-paper { height: 100%; max-height: 100%; }
  .dev-travel-search-row { margin-bottom: 8px; }
  .dev-travel-search-row input { min-height: 36px; padding: 6px 9px; }
}