:root {
  --steel: #16120e;
  --sand: #c4a06a;
  --brass: #c4a574;
  --brass-d: #8a6a3e;
  --cyan: #3ecfff;
  --gold: #e8c040;
  --ink: #efe6d8;
  --dim: #9a9184;
  --water: #2a8aaa;
  --fail: #e07050;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font-family: "Source Sans 3", "Segoe UI", sans-serif;
  background:
    radial-gradient(900px 500px at 50% -10%, #3a2a1c 0%, transparent 55%),
    var(--steel);
  color: var(--ink);
  overflow: hidden;
}
.shell {
  display: grid;
  grid-template-rows: auto 1fr auto;
  height: 100%;
  padding: 10px;
  gap: 8px;
}
.hud, .dock {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 14px;
  background: linear-gradient(#2a241c, #16120e);
  border: 1px solid var(--brass-d);
  border-radius: 10px;
  box-shadow: inset 0 1px 0 #c4a57433, 0 8px 24px #0008;
}
.brand {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: Cinzel, Palatino, serif;
  letter-spacing: 0.12em;
  color: var(--brass);
  text-decoration: none;
}
.brand img { width: 28px; height: 28px; border-radius: 6px; }
.title { font-family: Cinzel, Palatino, serif; }
.title small {
  display: block;
  color: var(--dim);
  font-family: "Source Sans 3", sans-serif;
  letter-spacing: 0.08em;
  font-size: 0.75rem;
}
.grow { flex: 1; }
a { color: var(--brass); text-decoration: none; letter-spacing: 0.12em; }
button, select, input {
  font: inherit;
  color: var(--ink);
  background: #2a241c;
  border: 1px solid var(--brass-d);
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
}
button:hover { border-color: var(--brass); color: var(--brass); }
button.primary {
  background: #e8c47a;
  color: #1a120c;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 700;
  padding: 12px 22px;
  border: 1px solid #c4a574;
  cursor: pointer;
}
button.primary:hover { background: #f2d9a0; color: #1a120c; border-color: #efe6d8; }
#view-wrap {
  position: relative;
  border: 2px solid var(--brass-d);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 0 0 4px #0c0c0e;
  background: #1a1410;
}
#view { width: 100%; height: 100%; display: block; touch-action: none; filter: none; }
#parser-line {
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: 10px;
  padding: 6px 10px;
  background: #120e0ccc;
  border: 1px solid var(--brass-d);
  border-radius: 6px;
  color: var(--brass);
  font-family: "Source Sans 3", monospace;
  letter-spacing: 0.04em;
  pointer-events: none;
}
#parser-line[hidden] { display: none !important; }
.status {
  position: absolute;
  left: 50%;
  top: 14px;
  transform: translateX(-50%);
  pointer-events: none;
  letter-spacing: 0.08em;
  font-size: 0.85rem;
  color: var(--sand);
  text-shadow: 0 1px 8px #000;
  max-width: 80%;
  text-align: center;
}
.keys { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; min-height: 26px; }
.keyico {
  display: inline-flex;
  width: 22px;
  height: 22px;
  filter: drop-shadow(0 1px 1px #000a);
}
.keyico svg { display: block; width: 22px; height: 22px; }
.keyico.selected { outline: 2px solid var(--brass); outline-offset: 1px; border-radius: 4px; }
#hp-wrap { letter-spacing: 0.08em; color: var(--fail); }
#hp-wrap b { color: var(--fail); }
.keychip {
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: 1px solid var(--brass-d);
  border-radius: 99px;
  padding: 2px 8px;
}
.keychip.blue { color: var(--cyan); border-color: var(--cyan); }
.keychip.gold { color: var(--gold); border-color: var(--gold); }
.keychip.red { color: var(--fail); border-color: var(--fail); }
.keychip.used { opacity: 0.55; }
.keychip.gear { color: #7dcea0; border-color: #7dcea0; }
.keychip.green { color: #3ee07a; border-color: #3ee07a; }
.keychip.purple { color: #c86bff; border-color: #c86bff; }
.missions {
  margin: 10px 0 0;
  padding: 0;
  list-style: none;
  color: var(--dim);
  font-size: 0.85rem;
}
.missions li { margin: 4px 0; letter-spacing: 0.04em; line-height: 1.45; }
.missions li.done { color: #7dcea0; }
.missions small { color: var(--dim); margin-left: 6px; font-size: 0.75rem; opacity: 0.8; }
#mode-tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--dim);
}
.breath {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
}
.breath span {
  font-size: 0.68rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--dim);
}
.breath-track {
  flex: 1;
  height: 8px;
  background: #0c1014;
  border: 1px solid var(--brass-d);
  border-radius: 99px;
  overflow: hidden;
}
#breath-bar {
  display: block;
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--water), #7ecfe0);
}
.breath.low #breath-bar { background: var(--fail); }
.modal {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  background: #120e0acc;
  padding: 16px;
  overflow: auto;
  pointer-events: auto;
}
.modal[hidden] { display: none !important; }
.panel {
  background: #1c1814;
  border: 1px solid var(--brass);
  border-radius: 12px;
  padding: 22px 24px;
  max-width: 520px;
  width: min(520px, 94vw);
  box-shadow: 0 16px 40px #000a, inset 0 1px 0 #c4a57433;
}
.panel h2 {
  font-family: Cinzel, Palatino, serif;
  margin: 0 0 8px;
  color: var(--brass);
  font-weight: 600;
}
.panel p { color: var(--dim); line-height: 1.45; }
.panel img.card {
  width: 100%;
  border-radius: 10px;
  border: 1px solid #3a3428;
  display: block;
  margin-bottom: 12px;
}
.panel.map-panel {
  max-width: 980px;
  width: min(980px, 96vw);
}
.map-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 12px;
  align-items: stretch;
  margin-top: 8px;
}
#map-view {
  width: 100%;
  height: auto;
  background: #120e0c;
  border: 1px solid var(--brass-d);
  border-radius: 8px;
  cursor: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32'%3E%3Ccircle cx='12' cy='12' r='7.5' fill='%23efe6d822' stroke='%23c4a574' stroke-width='2.4'/%3E%3Ccircle cx='12' cy='12' r='4.2' fill='none' stroke='%238a6a3e' stroke-width='1'/%3E%3Cline x1='17.8' y1='17.8' x2='27' y2='27' stroke='%23c4a574' stroke-width='3.2' stroke-linecap='round'/%3E%3C/svg%3E") 12 12, zoom-in;
}
.map-zoom-wrap {
  border: 1px solid var(--brass-d);
  border-radius: 8px;
  background: #120e0c;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 0;
}
.map-zoom-label {
  padding: 6px 10px 0;
  color: var(--brass);
  font-size: 0.75rem;
  letter-spacing: 0.08em;
}
#map-zoom { width: 100%; height: auto; display: block; flex: 1; }
.mode-toggle {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 3px;
  border: 1px solid var(--brass-d);
  border-radius: 10px;
  background: #14100c;
}
.mode-toggle button[aria-pressed="true"] {
  background: #e8c47a;
  color: #1a120c;
  border-color: #c4a574;
  font-weight: 700;
}
.mode-toggle button[aria-pressed="true"]::after { content: " · on"; }
.mode-toggle button[aria-pressed="false"]::after { content: " · off"; opacity: 0.7; }
@media (max-width: 720px) {
  .map-layout { grid-template-columns: 1fr; }
}
@media (min-width: 821px) {
  .shell { grid-template-rows: auto 1fr; }
  .dock { display: none; }
}
.kicker {
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--dim);
  font-size: 0.72rem;
}
.row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; align-items: center; }
.hint { font-size: 0.78rem; opacity: 0.75; }
.stat b { color: var(--cyan); font-variant-numeric: tabular-nums; }
.pad { display: flex; gap: 4px; }
.pad button { min-width: 48px; height: 40px; touch-action: none; }
#file-hint {
  position: fixed; inset: 0; background: #121418; color: #efe6d8;
  place-items: center; padding: 24px; z-index: 99; text-align: center;
  font-family: sans-serif;
}
@media (max-width: 800px) {
  .dock .hint { display: none; }
}