:root {
  color-scheme:dark;
  --ink:#f0f0ed;
  --cursor:#c93c28;
  --screen-width:min(768px,calc(100vw - 24px));
  --screen-top:28px;
  --screen-height:min(720px,calc(100dvh - 48px));
  --party-height:200px;
  --controls-height:52px;
  font-family:'MS Gothic','BIZ UDGothic','Courier New',monospace;
  background:#000;
  color:var(--ink);
}
* {box-sizing:border-box}
body {margin:0;background:#000;color:var(--ink);font-size:16px;line-height:1.5}
button,input,select {font:inherit;color:inherit}
button {position:relative;display:block;max-width:100%;min-height:32px;background:#000;border:0;padding:4px 8px 4px 28px;text-align:left;cursor:pointer;line-height:1.5;overflow-wrap:anywhere}
button:disabled {color:#777;cursor:default}
button.selected::before {content:'➜';position:absolute;left:3px;color:var(--cursor)}
button:focus-visible {outline:1px dashed #aaa;outline-offset:-1px}
input,select {background:#000;border:1px solid var(--ink);padding:5px;max-width:100%;min-width:0}
h2,h3,p,.hint,.panel-top,#monster-caption,.event-message {font-size:inherit;font-weight:normal}
h3 {margin:0 0 12px}
p {margin:8px 0;overflow-wrap:anywhere}
main {width:var(--screen-width);height:var(--screen-height);margin:var(--screen-top) auto 0}
.layout {position:relative;display:grid;grid-template-rows:minmax(0,1fr) var(--party-height) var(--controls-height);height:100%;border:2px solid var(--ink);border-radius:5px}
.heading,body>header,.vignette,#scene-title,.map-head,#map,.map-key,.portrait,.bar,.scene-bottom,.journal,#objective,aside>.panel-top,.party-spells {display:none}
.scene-panel {min-width:0;min-height:0;padding:28px 16px 12px;display:grid;grid-template-rows:minmax(0,1fr) auto;gap:8px}
.scene-panel>.panel-top,#modal-content>h2 {position:absolute;z-index:4;top:-18px;left:50%;transform:translateX(-50%);max-width:calc(100% - 16px);margin:0;background:#000;border:2px solid var(--ink);border-radius:4px;padding:3px 12px;text-align:center;white-space:nowrap}
.scene-panel>.panel-top #coords {display:none}
.viewport {position:relative;width:100%;min-height:0;min-width:0;overflow:hidden;background:#000;display:flex;align-items:center;justify-content:center}
#scene {display:block;width:100%;height:100%;object-fit:contain;image-rendering:pixelated}
.actions {width:min(100%,560px);min-height:0;max-height:140px;margin:0 auto;overflow:auto;border:2px solid var(--ink);border-radius:4px;padding:8px;scrollbar-gutter:stable}
.is-town .scene-panel {display:block;overflow:auto}
.is-town .layout {grid-template-rows:minmax(0,1fr) var(--party-height)}
.is-town .viewport {display:none}
.is-town .actions {width:min(100%,360px);margin:24px auto 0;max-height:calc(100% - 24px)}
.is-town .layout>.controls {display:none}
.is-combat .scene-panel,.is-chest .scene-panel {grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr)}
.is-combat .actions,.is-chest .actions {max-height:100%;height:100%;width:100%}
.is-exploring .layout {grid-template-rows:minmax(0,1fr)}
.is-exploring .scene-panel {position:absolute;inset:0;padding:0;display:grid;grid-template-rows:minmax(0,1fr);gap:0}
.is-exploring .viewport {width:100%;height:100%}
.is-exploring .scene-panel>.panel-top,.is-combat .scene-panel>.panel-top,.is-chest .scene-panel>.panel-top {display:none}
.is-exploring #scene {object-fit:fill}
.is-exploring .actions,.is-exploring .layout>.controls {display:none}
.is-exploring aside {position:absolute;z-index:2;left:0;right:0;bottom:0;height:var(--party-height);background:#000}
aside,.facility-party {min-height:0;min-width:0;border-top:4px double var(--ink);padding:8px 12px;overflow:auto}
.is-exploring.is-party-waiting aside {visibility:hidden}
.party-head,.member {display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1.1fr) minmax(32px,.45fr) minmax(42px,.6fr) minmax(64px,.9fr);gap:8px;align-items:baseline;font:inherit}
.party-head {margin-bottom:4px;white-space:nowrap}
.party-head>span:nth-child(3),.party-head>span:nth-child(4),.party-head>span:nth-child(5),.member>span:nth-child(3),.member>span:nth-child(4),.member>span:nth-child(5) {text-align:right}
.member {min-height:25px}
.member>span {min-width:0;overflow-wrap:anywhere}
.member.dead {color:#bbb}
.controls {min-width:0;display:flex;align-items:center;justify-content:space-between;gap:8px;padding:4px 12px}
.controls>span {min-width:0}
dialog {position:fixed;inset:var(--screen-top) auto auto 50%;transform:translateX(-50%);width:var(--screen-width);height:var(--screen-height);max-width:none;max-height:none;margin:0;padding:0;color:var(--ink);background:#000;border:2px solid var(--ink);border-radius:5px;overflow:visible;font:inherit}
dialog[open] {display:grid;grid-template-rows:minmax(0,1fr) var(--controls-height)}
dialog::backdrop {background:#000}
body:has(#modal[open]) main,body:has(#modal[open]) .opening {visibility:hidden;pointer-events:none}
#modal-content {min-height:0;min-width:0;display:grid;grid-template-rows:minmax(0,1fr)}
#modal-content.with-party {grid-template-rows:minmax(0,1fr) var(--party-height)}
.screen-body {min-height:0;min-width:0;overflow:auto;padding:28px 24px 12px;scrollbar-gutter:stable;overflow-wrap:anywhere}
.screen-back {width:max-content;margin:0 0 8px auto;border:1px solid var(--ink);border-radius:4px}
#modal[data-facility="ボルタック商店"][open] {grid-template-rows:minmax(0,1fr)}
#modal[data-facility="ボルタック商店"]>.modal-controls {display:none}
.screen-body>p,.screen-body>h3 {width:min(100%,560px);margin:8px auto}
.menu-list {width:min(100%,560px);margin:12px auto;border:2px solid var(--ink);border-radius:4px;padding:8px}
.menu-list:empty {display:none}
.menu-list button {width:100%}
.menu-list.facility-menu {width:min(100%,360px)}
.menu-list.compact-menu {width:min(100%,280px)}
#close-modal {justify-self:end;align-self:center;margin:0 12px;max-height:100%}
#close-modal[hidden] {display:none}
#modal[data-screen="camp"][open] {grid-template-rows:minmax(0,1fr)}
#modal[data-screen="camp"]>.modal-controls {display:none}
.hint {color:#aaa}
.creation {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.creation label {display:flex;align-items:center;justify-content:space-between;gap:8px}
.creation input {width:64px}
.edit-row {display:flex;gap:8px;flex-wrap:wrap;margin:10px 0}
.inventory-list {padding-left:18px}
.bad {color:#e66}
.good {color:white}
.event-message {position:absolute;z-index:3;inset:auto;left:5%;top:50%;width:90%;max-height:calc(100% - 24px);transform:translateY(-50%);display:flex;flex-direction:column;align-items:center;justify-content:center;border:2px solid var(--ink);border-radius:4px;background:#000;padding:12px;text-align:center;overflow:auto}
.event-message[data-kind="stairs"] {inset:auto;left:50%;top:50%;width:clamp(280px,48%,460px);max-width:calc(100% - 24px);max-height:calc(100% - 24px);transform:translate(-50%,-50%);padding:18px 24px}
.event-text {white-space:pre-wrap;overflow-wrap:anywhere;text-align:left;margin:0;width:100%}
.event-message[data-kind="map"],.event-message[data-kind="search"] {display:block}
.search-choices {margin:0 auto}
.event-message[data-kind="elevator"] {display:grid;grid-template-columns:4em minmax(0,1fr);gap:6px;padding:0;border:0;background:transparent;align-items:stretch;text-align:left}
.elevator-floors,.elevator-body {border:2px solid var(--ink);border-radius:4px;background:#000;padding:8px}
.elevator-floors {display:flex;flex-direction:column;justify-content:center;padding:4px}
.elevator-floors button {width:100%;padding-right:0}
.elevator-body {display:flex;flex-direction:column;justify-content:center;gap:12px;min-width:0}
.stair-choices {display:flex;flex-direction:column;align-items:flex-start;width:min(100%,12em)}
.stair-choices button {width:100%;text-align:left}
#motion-message {position:absolute;z-index:4;left:50%;top:50%;transform:translate(-50%,-50%);width:max-content;max-width:calc(100% - 24px);border:2px solid var(--ink);border-radius:4px;padding:4px 12px;background:#000;color:var(--ink);pointer-events:none;text-align:center}
.event-message[hidden],#motion-message[hidden],#monster-layer[hidden] {display:none}
#monster-layer {position:absolute;inset:0;pointer-events:none;text-align:center;background:transparent}
#monster-art-layer {position:absolute;z-index:1;left:50%;top:12%;max-width:70%;width:42%;max-height:80%;height:auto;object-fit:contain;transform:translateX(-50%);image-rendering:pixelated}
#monster-caption {position:absolute;z-index:2;left:0;right:0;top:1%;color:var(--ink)}
#monster-meter {position:absolute;z-index:2;top:9%;left:36%;width:28%;height:7px;border:1px solid var(--ink);background:#000}
#monster-meter span {display:block;height:100%;background:var(--cursor)}
.opening {position:fixed;inset:0;z-index:10;background:#000;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;font-family:'Courier New',monospace;letter-spacing:3px;font-weight:bold;overflow:auto}
.opening[hidden] {display:none}
.opening-logo {display:block;width:min(88vw,900px);height:auto;margin:0 0 26px}
.opening p {font-size:clamp(16px,3.4vw,26px);font-weight:bold;line-height:1.05;margin:8px 0}
.opening-menu {margin-top:16px}
.opening-menu button {font-size:clamp(18px,3.4vw,26px);letter-spacing:3px;padding-left:30px}
@media(max-width:540px) {
  :root {--screen-width:calc(100vw - 16px);--party-height:184px;--controls-height:64px}
  body {font-size:14px}
  .scene-panel {padding:24px 8px 8px}
  .party-head,.member {grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 28px 35px minmax(54px,.9fr);gap:4px}
  .member {min-height:24px}
  aside,.facility-party {padding:8px 6px}
  .controls {padding:4px 6px;gap:4px}
  .screen-body {padding:24px 8px 8px}
  .creation {grid-template-columns:1fr}
  .is-combat .scene-panel,.is-chest .scene-panel {grid-template-columns:minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr)}
  #modal[data-screen="camp"][open] {grid-template-rows:minmax(0,1fr) var(--controls-height)}
  #modal[data-screen="camp"]>.modal-controls {display:flex}
  .event-message[data-kind="stairs"] {width:calc(100% - 16px);padding:12px}
  button {min-height:36px}
}
@media(max-height:560px) {
  :root {--screen-top:24px;--screen-height:calc(100dvh - 36px);--party-height:120px;--controls-height:40px}
  .scene-panel {padding-top:20px}
  .is-town .actions {margin-top:0;max-height:100%}
  .screen-body {padding-top:20px}
  .controls {line-height:1.2}
  #modal[data-screen="camp"][open] {grid-template-rows:minmax(0,1fr) var(--controls-height)}
  #modal[data-screen="camp"]>.modal-controls {display:flex}
  .is-exploring aside {height:min(180px,52%);padding:4px 12px}
  .is-exploring .member {min-height:22px;line-height:1.2}
  .opening-logo {width:min(70vw,480px);max-height:40dvh;object-fit:contain;margin-bottom:8px}
  .opening-menu {margin-top:8px}
}

/* Town navigation belongs inside each menu, above the shared character table. */
#modal[data-origin="town"][open] {grid-template-rows:minmax(0,1fr)}
#modal[data-origin="town"]>.modal-controls {display:none}
.menu-list.character-choices {margin:8px auto;padding:4px}
.menu-list.character-choices button {min-height:28px;padding:2px 8px 2px 28px;line-height:1.35}
@media(max-width:540px) {
  .menu-list.character-choices button {min-height:36px;padding-top:4px;padding-bottom:4px}
}

@media(max-width:540px) {
  .party-head,.member {grid-template-columns:minmax(0,1fr) 35px 28px 35px 54px;gap:2px;line-height:1.35}
  .member {min-height:22px}
  .is-exploring aside {padding-left:6px;padding-right:6px}
}

/* Compact touch navigation overlays the scene without changing its layout. */
.dungeon-touch-controls {display:none}
@media (max-width:540px), (pointer:coarse) and (max-width:960px) {
  .is-exploring .dungeon-touch-controls:not([hidden]) {position:absolute;z-index:3;bottom:4px;left:4px;right:4px;display:flex;gap:3px;justify-content:center}
  .dungeon-touch-controls button {flex:1 1 0;min-width:0;min-height:44px;padding:3px 1px;border:1px solid var(--ink);border-radius:3px;background:#000d;text-align:center;font-size:clamp(10px,3vw,14px);line-height:1.2}
  .dungeon-touch-controls button.selected::before {content:none}
  body:has(#modal[open]) .dungeon-touch-controls {display:none!important}
}