/* Layout: one-screen app. Portrait = HUD / map / log / pad stacked; landscape = map left, pad right.
   Single dark "cave by lantern-light" look, so colors are fixed (no light theme). */
:root {
  --void: #0d1017;      /* unexplored rock */
  --panel: #171b25;     /* HUD & control surfaces */
  --panel-2: #222838;   /* raised buttons */
  --line: #333b50;      /* hairlines */
  --text: #ece6d6;      /* warm paper white */
  --muted: #9a9fb0;
  --lamp: #f2b84b;      /* lantern amber accent */
  --hp: #e0625a;
  --heal: #7fd47a;
  --font-pixel: "DotGothic16", "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic", monospace;
  --font-ui: system-ui, -apple-system, "Hiragino Sans", "Noto Sans JP", sans-serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--void);
  color: var(--text);
  font-family: var(--font-pixel);
  font-size: 15px;
  overscroll-behavior: none;
  -webkit-user-select: none; user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}
html { padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); }

#app {
  height: 100%;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  grid-template-columns: minmax(0, 1fr);
  gap: 8px;
  padding-block: 8px;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
  max-width: 720px;
  margin: 0 auto;
  position: relative;
}

/* ---------- HUD ---------- */
#hud {
  display: flex; align-items: center; gap: 8px;
  font-variant-numeric: tabular-nums;
  min-width: 0;
}
.hud-chip {
  background: var(--panel); border: 1px solid var(--line); border-radius: 4px;
  padding: 2px 8px; white-space: nowrap; font-size: 14px;
}
#hud-floor { color: var(--lamp); }
#hud-extra { color: var(--lamp); }
#hud-extra.low { color: #ff9f5a; border-color: #7a4a2a; }
#hud-extra.out { color: #fff; background: #5a1f24; border-color: var(--hp); }
#hud-extra.flash { animation: flash .9s ease-out 2; }
@keyframes flash { 50% { background: #6b3a1a; } }
#hud-hp { flex: 1; display: flex; align-items: center; gap: 6px; min-width: 0; }
.hud-label { color: var(--muted); font-size: 13px; }
#hp-bar {
  flex: 1; height: 10px; min-width: 40px;
  background: #2a1d22; border: 1px solid #4a2b30; border-radius: 2px; overflow: hidden;
}
#hp-fill { display: block; height: 100%; width: 100%; background: var(--hp); transition: width .15s; }
#hp-fill.ok { background: #d9a441; }
#hp-fill.full { background: var(--heal); }
#hp-text { white-space: nowrap; font-size: 14px; }

/* ---------- map ---------- */
#stage { position: relative; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
#map {
  flex: 1; min-height: 0; width: 100%;
  display: block;
  background: var(--void);
  border: 1px solid var(--line); border-radius: 6px;
  image-rendering: pixelated;
  touch-action: none;
}
#log {
  list-style: none; margin: 0; padding: 6px 10px;
  height: calc(3 * 1.45em + 12px);
  overflow: hidden;
  background: var(--panel); border: 1px solid var(--line); border-radius: 6px;
  font-size: 14px; line-height: 1.45;
  display: flex; flex-direction: column; justify-content: flex-end;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
  mask-image: linear-gradient(to bottom, transparent 0, #000 14px);
}
#log li { color: var(--muted); flex: none; }
#log li.new { color: var(--text); }

#banner {
  position: absolute; left: 0; right: 0; top: 38%;
  text-align: center; font-size: 40px; letter-spacing: .15em; color: var(--lamp);
  text-shadow: 0 2px 0 #000, 0 0 18px rgba(242, 184, 75, .45);
  pointer-events: none; opacity: 0;
}
#banner.show { animation: banner 1.4s ease-out forwards; }
@keyframes banner { 0% { opacity: 0; transform: translateY(8px); } 15%, 70% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* ---------- controls ---------- */
#controls {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 12px;
  align-items: stretch;
}
#pad {
  display: grid;
  grid-template-columns: repeat(3, var(--key, 62px));
  grid-template-rows: repeat(3, var(--key, 62px));
  gap: 6px;
}
button {
  font: inherit; color: var(--text);
  background: var(--panel-2);
  border: 1px solid var(--line);
  border-bottom-width: 3px;
  border-radius: 8px;
  touch-action: manipulation;
  cursor: pointer;
}
button:active, button.pressed { transform: translateY(2px); border-bottom-width: 1px; background: #2c3346; }
button:focus-visible { outline: 2px solid var(--lamp); outline-offset: 2px; }
button:disabled { opacity: .45; }
.dir { font-size: 24px; line-height: 1; padding: 0; }
.dir.wait { font-size: 13px; color: var(--muted); }
#side { display: grid; grid-auto-rows: 1fr; gap: 6px; }
#controls { --side-font: 15px; }
.side-btn { font-size: 16px; padding: 4px 6px; }
.side-btn.glow { border-color: var(--lamp); color: var(--lamp); }

/* ---------- sheets & screens ---------- */
.sheet, .screen {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(8, 10, 15, .72);
  z-index: 20;
}
.sheet-card, .screen-card {
  width: min(100%, 420px);
  max-height: 100%; overflow: auto;
  background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.sheet-card h2 { margin: 0; font-size: 18px; font-weight: normal; color: var(--lamp); }
#sheet-body { display: flex; flex-direction: column; gap: 6px; font-size: 15px; }
#sheet-body .item-row { display: flex; gap: 6px; align-items: stretch; }
.item-info { flex: 1; min-width: 0; display: flex; align-items: center; gap: 10px; text-align: left; padding: 8px 10px; }
.item-icon { width: 30px; height: 30px; image-rendering: pixelated; flex: none; }
.item-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.item-text small { color: var(--muted); font-family: var(--font-ui); font-size: 12px; }
.item-verb { flex: none; min-width: 84px; padding: 8px 10px; color: var(--lamp); }
#btn-resume { padding: 12px; font-size: 16px; }
#sheet-body .desc { color: var(--muted); font-family: var(--font-ui); font-size: 14px; line-height: 1.6; margin: 0; }
#sheet-actions { display: flex; gap: 8px; flex-wrap: wrap; }
#sheet-actions button { flex: 1; padding: 12px; font-size: 16px; min-width: 100px; }
button.primary { background: var(--lamp); color: #23170a; border-color: #b27f22; }

.screen { background: radial-gradient(ellipse at 50% 35%, rgba(242, 184, 75, .14), transparent 60%), var(--void); }
.screen h1 { font-size: clamp(32px, 10vw, 44px); }
.screen-card { background: transparent; border: none; gap: 16px; }
.eyebrow { margin: 0; color: var(--lamp); letter-spacing: .2em; font-size: 13px; }
.screen h1 { margin: 0; font-size: 44px; font-weight: normal; letter-spacing: .08em; text-wrap: balance; }
.rules { margin: 0; padding-left: 1.2em; font-family: var(--font-ui); line-height: 1.75; color: var(--text); font-size: 15px; }
.screen .primary { padding: 14px; font-size: 18px; }
.hint { margin: 0; color: var(--muted); font-family: var(--font-ui); font-size: 12px; line-height: 1.6; }
.score { margin: 0; font-size: 24px; color: var(--lamp); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-variant-numeric: tabular-nums; }
.score span { font-size: 13px; color: #23170a; background: var(--lamp); padding: 2px 8px; border-radius: 3px; }
.stat-grid { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; font-variant-numeric: tabular-nums; margin: 0; }
.stat-grid dt { color: var(--muted); }
.stat-grid dd { margin: 0; text-align: right; }

/* ---------- landscape / desktop ---------- */
@media (orientation: landscape) and (min-width: 640px) {
  #app {
    max-width: 1100px;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto minmax(0, 1fr);
  }
  #hud { grid-column: 1 / -1; }
  #controls { grid-template-columns: auto; grid-template-rows: auto auto; align-content: end; }
  #side { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 44px; }
}
@media (max-height: 640px) and (orientation: portrait) {
  #pad { --key: 54px; }
}
@media (prefers-reduced-motion: reduce) {
  #hp-fill { transition: none; }
  #banner.show { animation-duration: .01s; opacity: 1; }
  #hud-extra.flash { animation: none; }
}