/* Shadow Play: the field is the stage. Notan tokens and local type. */
@font-face {
  font-family: "Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("./fonts/IBMPlexMono-500.woff2") format("woff2");
}
@font-face {
  font-family: "Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("./fonts/IBMPlexSans-400.woff2") format("woff2");
}

:root {
  color-scheme: light dark;
  --bg: #ffffff;
  --ink: #000000;
  --text: #111111;
  --sub: #5e5e5e;
  --done: #949494;
  --line: #d4d4d4;
  --guide: #8f8f8f;
  --frame: #1c1c1c;
  --mark: #8a8a8a;
  --band: rgba(0, 0, 0, 0.05);
  --icon: #262626;
  --scrim: rgba(255, 255, 255, 0.84);
  /* The lit paper is part of reading the puppets, not chrome. One warm
     room accent always keeps its icon, name, and explicit “You” marker. */
  --paper-center: #fae9c9;
  --paper-edge: #e7c89b;
  --stage-frame: #806344;
  --room-accent: #805323;
  --room-on-accent: #ffffff;
  --mono: "Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --sans: "Plex Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --ink: #ffffff;
    --text: #ededed;
    --sub: #a6a6a6;
    --done: #5e5e5e;
    --line: #2f2f2f;
    --guide: #6c6c6c;
    --frame: #e4e4e4;
    --mark: #7c7c7c;
    --band: rgba(255, 255, 255, 0.07);
    --icon: #dddddd;
    --scrim: rgba(0, 0, 0, 0.8);
    --paper-center: #a88056;
    --paper-edge: #795c40;
    --stage-frame: #b99569;
    --room-accent: #d7ad76;
    --room-on-accent: #000000;
  }
}


*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
button, input { font: inherit; color: inherit; }
button { touch-action: manipulation; cursor: pointer; }
.droom, .move, .ib, .door { -webkit-user-select: none; user-select: none; }
button:disabled { cursor: default; opacity: .45; }
[hidden] { display: none !important; }
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
.sr-only { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
#app { min-height: 100dvh; padding: 60px 16px 68px; display: flex; align-items: center; justify-content: center; }
.hud { position: fixed; top: max(6px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%); z-index: 5; display: flex; align-items: center; gap: 16px; min-height: 44px; font: 500 13px/1 var(--mono); letter-spacing: .02em; font-variant-numeric: tabular-nums; color: var(--sub); white-space: nowrap; }
.hud-item { display: inline-flex; gap: 6px; align-items: center; }
.hud svg { width: 14px; height: 14px; flex: none; }
.hp { display: inline-flex; gap: 10px; align-items: center; flex: none; }
.hp svg { width: 11px; height: 11px; flex: none; }
.hp-row { display: inline-flex; align-items: center; gap: 2px; }
.hp-count { min-width: 5ch; text-align: right; font-variant-numeric: tabular-nums; }
.play-area { width: 100%; display: flex; flex-direction: column; align-items: center; }
.show-title { margin: 0 0 24px; font: 500 16px/1.4 var(--mono); }
.health-status { width: min(100%, 440px); margin: 0 0 18px; color: var(--sub); font: 500 12px/1.4 var(--mono); }
.health-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; min-height: 28px; }
.health-row > span:first-child { min-width: 0; }
.stage-wrap, .health-status.dueling { width: min(100%, 760px, calc((100dvh - 400px) * 980 / 745)); }
.health-status.dueling { margin-bottom: 10px; }
.stage-wrap { margin-bottom: 16px; }
/* Only the screen has a radial falloff; all controls and sheets are flat. */
#stage { display: block; width: 100%; height: auto; overflow: hidden; border: 1px solid var(--stage-frame); background: radial-gradient(ellipse at 50% 48%, var(--paper-center) 12%, var(--paper-edge) 100%); }
.mode { width: min(100%, 560px); animation: enter .18s ease-out; }
@keyframes enter { from { opacity: 0; } to { opacity: 1; } }
h2, h3 { font: 500 13px/1.4 var(--mono); }
/* Floor progress already lives in the single status line. Keep the heading
   for the map's accessible name without repeating the visual status. */
#dungeon h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.moves { display: flex; justify-content: center; gap: 24px; margin: 0 0 4px; }
.move { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; width: 72px; min-height: 64px; padding: 8px 4px; border: 0; background: none; color: var(--ink); }
.move svg { width: 32px; height: 32px; }
.move b { font: 500 13px/1 var(--mono); }
.move kbd { font: 500 10px/1 var(--mono); color: var(--sub); }
.move[aria-pressed="true"] svg { stroke-width: 2.5; }
.tell, .outcome { text-align: center; font: 400 14px/1.5 var(--sans); margin: 0 0 4px; overflow-wrap: anywhere; }
.tell { min-height: 3em; }
.flicker { font-weight: 600; }
.flicker::before { content: ' ['; }
.flicker::after { content: ']'; }
.outcome { min-height: 3em; }
.good, .bad { font-weight: 600; }
.seen { display: flex; justify-content: center; align-items: baseline; gap: 8px; color: var(--sub); font: 500 11px/1.5 var(--mono); }
.seen > span { flex: none; }
.seen ol { display: flex; min-width: 0; gap: 12px; margin: 0; padding: 3px 0 6px; list-style: none; overflow-x: auto; white-space: nowrap; color: var(--text); }
.seen .sep { color: var(--sub); }
.dmap { position: relative; width: min(calc(100% * var(--map-scale, 1)), calc(440px * var(--map-scale, 1)), calc((100dvh - 320px) * var(--map-scale, 1))); aspect-ratio: 1; margin: auto; }
.dmap-doors { position: absolute; inset: 0; width: 100%; height: 100%; }
.dmap-doors line { stroke: var(--guide); stroke-width: 1; stroke-dasharray: 2 4; }
.dmap-doors line.walked { stroke: var(--ink); stroke-dasharray: none; }
.droom { position: absolute; width: calc(100% * 100 / 368); aspect-ratio: 1; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 4px; border: 1px solid var(--line); background: var(--bg); color: var(--text); padding: 5px; }
.droom svg { width: 28px; height: 28px; flex: none; color: var(--ink); }
.droom b { font: 500 10px/1.2 var(--mono); }
.droom small { font: 400 10px/1.25 var(--sans); color: var(--sub); }
.droom.reach { border: 1.5px solid var(--ink); }
.droom.here { border-color: var(--room-accent); background: var(--room-accent); color: var(--room-on-accent); }
.droom.here svg, .droom.here small { color: var(--room-on-accent); }
.droom.here small { font: 500 10px/1.2 var(--mono); }
.droom.done svg { color: var(--sub); }
.droom.done::after { content: '✓'; position: absolute; right: 5px; bottom: 3px; font: 600 14px/1 var(--sans); color: var(--ink); }
.droom.route-next { outline: 2px solid var(--ink); outline-offset: 4px; }
.droom.route-next::before { content: '→'; position: absolute; top: 3px; right: 5px; font: 500 17px/1 var(--mono); color: var(--ink); transform: rotate(var(--route-angle, 0rad)); }
.droom.dark { border-style: dashed; }
.droom[aria-disabled="true"] { cursor: default; }
.room-note { min-height: 3em; margin: 18px 0 8px; font: 400 14px/1.5 var(--sans); text-align: center; }
.room-actions { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 44px; }
.room-actions small { color: var(--sub); }
#charms h2 { margin: 0 0 22px; }
.door { display: flex; flex-direction: column; gap: 6px; width: 100%; min-height: 80px; padding: 18px 0; text-align: left; border: 0; border-top: 1px solid var(--line); background: none; }
.door b { font: 600 16px/1.3 var(--sans); }
.door small { color: var(--sub); font: 400 14px/1.5 var(--sans); }
#end { max-height: calc(100dvh - 140px); overflow-y: auto; padding: 3px 6px 8px; font: 400 14px/1.5 var(--sans); }
#end h2 { font-size: 16px; }
.score-line { display: grid; gap: 6px; font: 500 13px/1.5 var(--mono); margin: 18px 0; }
.score-line > span { display: flex; justify-content: space-between; border-bottom: 1px solid var(--line); padding-bottom: 6px; }
.hall-form { display: flex; flex-wrap: wrap; gap: 10px; margin: 18px 0; }
.hall-form label { width: 100%; }
.hall-form input { min-width: 0; width: 150px; min-height: 44px; background: var(--bg); border: 1px solid var(--frame); padding: 8px; }
.hall-list { padding: 0 0 0 24px; margin: 12px 0 18px; font-size: 13px; }
.hall-list li { position: relative; padding: 8px 5ch 8px 0; border-bottom: 1px solid var(--line); }
.hall-list li > span { display: inline-block; }
.h-name { width: 100%; overflow-wrap: anywhere; }
.h-score { position: absolute; right: 0; top: 8px; font: 500 13px/1.5 var(--mono); }
.h-what { display: block !important; color: var(--sub); font-size: 12px; }
.hall-list .mine { font-weight: 700; }
.hall-list .mine::marker { content: '> '; }
.hall-list .empty { list-style: none; margin-left: -24px; color: var(--sub); }
.charm-list { list-style: none; padding: 0; margin: 0; }
.charm-list li { padding: 10px 0; border-bottom: 1px solid var(--line); }
.charm-list b, .charm-list span { display: block; }
.charm-list span { color: var(--sub); font-size: 13px; }
.bar {
  position: fixed;
  left: max(6px, env(safe-area-inset-left));
  right: max(6px, env(safe-area-inset-right));
  bottom: max(6px, env(safe-area-inset-bottom));
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  pointer-events: none;
}
.group { display: flex; gap: 2px; pointer-events: auto; }
.ib {
  appearance: none;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: none;
  color: var(--icon);
  cursor: pointer;
  touch-action: manipulation;
  transition: opacity 0.15s;
}
.ib svg { width: 24px; height: 24px; }
.ib:active { opacity: .7; }
.ib[aria-disabled="true"] { opacity: 0.32; cursor: default; }
.ib:focus-visible,
.hud-lvl:focus-visible,
.lv:focus-visible,
.pill:focus-visible,
.sheet-x:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}
@media (hover: hover) {
  .ib:hover:not([aria-disabled="true"]) { background: var(--band); }
}

/* ---------- sheets ---------- */
dialog.sheet {
  width: min(23rem, calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  padding: 0;
  border: 1px solid var(--frame);
  border-radius: 6px;
  background: var(--bg);
  color: var(--text);
  overflow: auto;
}
dialog.sheet::backdrop { background: var(--scrim); }
.sheet-in {
  position: relative;
  padding: 22px 22px 20px;
  font: 400 14px/1.55 var(--sans);
}
.sheet h2 {
  margin: 0 0 14px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}
.sheet h3 {
  margin: 18px 0 10px;
  font: 500 12px/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--sub);
}
.sheet p { margin: 0 0 12px; }
.sheet h2:focus { outline: none; }
.sheet-x {
  position: absolute;
  top: 6px; right: 6px;
  width: 44px; height: 44px;
  display: grid; place-items: center;
  padding: 0; border: 0; border-radius: 6px;
  background: none;
  color: var(--icon);
  cursor: pointer;
}
.sheet-x svg { width: 20px; height: 20px; }

.sheet-foot { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 4px 16px; margin-top: 20px; padding-top: 8px; border-top: 1px solid var(--frame); }
.foot-btn { appearance: none; background: none; border: 0; padding: 0; min-height: 44px; display: inline-flex; align-items: center; color: var(--sub); font: 400 12px/1.2 var(--mono); letter-spacing: 0.03em; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.foot-btn[data-armed="true"] { color: var(--text); font-weight: 500; }
.foot-btn:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }


/* Same sheet/chrome patterns as Notan; no rounded button cards. */
.ib, .sheet-x, dialog.sheet { border-radius: 0; }
.pill, .btn { appearance: none; min-height: 44px; padding: 8px 18px; border: 1px solid var(--frame); border-radius: 0; background: none; color: var(--text); font: 500 12px/1.4 var(--mono); cursor: pointer; }
.sheet ul { padding-left: 18px; }
.sheet .charm-list { padding-left: 0; }
.sheet .triangle { font: 500 12px/1.8 var(--mono); }
.sheet h2 { padding-right: 24px; }
.sheet li { margin-bottom: 6px; }
.flame { transform-origin: 0 -32px; }
.flame.gutter { animation: gutter .35s steps(2) infinite; }
@keyframes gutter { 0% { transform: scale(.6,1.3) skewX(18deg); } 50% { transform: scale(1.2,.5) skewX(-22deg); } 100% { transform: scale(.8,1.1); } }
@media (max-width: 600px) { .dmap, .health-status:not(.dueling) { max-width: calc(340px * var(--map-scale, 1)); } .tell, .outcome { min-height: 4.5em; } .hp svg { width: 9px; height: 9px; } .hp-row { gap: 1.5px; } .health-row { gap: 8px; } }
@media (max-height: 700px) { .stage-wrap, .health-status.dueling { width: min(100%, 520px, calc((100dvh - 400px) * 980 / 745)); } .moves { margin: 4px 0 8px; } .tell, .outcome { margin-bottom: 6px; font-size: 13px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } .flame.gutter { transform: scale(.6,1.2) skewX(18deg); } }
@media (forced-colors: active) { :root { --bg: Canvas; --ink: CanvasText; --text: CanvasText; --sub: CanvasText; --line: GrayText; --guide: GrayText; --done: GrayText; --frame: CanvasText; --icon: ButtonText; --room-accent: Highlight; --room-on-accent: HighlightText; } #stage, .droom, .hp { forced-color-adjust: none; } #stage { background: #ffffff; border-color: CanvasText; } }

/* Zoom and short landscape screens may scroll rather than shrink the game away. */
@media (max-height: 600px) { #app { align-items: flex-start; } .stage-wrap, .health-status.dueling { width: min(100%, 520px); } .dmap { width: min(calc(100% * var(--map-scale, 1)), calc(340px * var(--map-scale, 1))); } }
/* Reflow health at narrow/zoomed widths without discarding its label or value. */
@media (max-width: 359px) { .hp-row { display: none; } }
.howto-start { margin: 0 0 16px; }
.sheet summary { cursor: pointer; min-height: 44px; padding: 10px 0; }