:root {
  --ivory: #efe6d2;
  --coral: #c9606a;
  --rose: #b5525c;
  --wine: #3a0e14;
  --wine-deep: #23080d;
  --ochre: #c2a13c;
  --mint: #8fe3c8;
  --mint-bright: #c8fff0;
  --highlight: #f7fbff;
  --glass: rgba(247, 247, 240, 0.82);
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --panel: linear-gradient(145deg, rgba(252, 249, 241, 0.9), rgba(222, 239, 233, 0.76));
  --panel-edge: rgba(143, 227, 200, 0.9);
  --panel-shadow: 0 12px 34px rgba(26, 6, 10, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #1a0509;
  color: var(--ivory);
  font-family: 'Atkinson Hyperlegible', sans-serif;
  -webkit-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
  touch-action: none;
}

button { font-family: inherit; -webkit-tap-highlight-color: transparent; }
img { -webkit-user-drag: none; }

#stage {
  position: fixed;
  inset: 0;
  overflow: hidden;
  background: #1a0509;
}

#scene {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

#vignette {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 50% 46%, rgba(30, 5, 10, 0) 30%, rgba(30, 5, 10, 0.24) 72%, rgba(20, 4, 8, 0.72) 100%),
    linear-gradient(to bottom, rgba(36, 7, 12, 0.28), rgba(36, 7, 12, 0) 24%, rgba(36, 7, 12, 0) 72%, rgba(36, 7, 12, 0.34));
  z-index: 3;
}

#grain {
  position: absolute;
  inset: -20%;
  pointer-events: none;
  opacity: 0.05;
  z-index: 4;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.65'/%3E%3C/svg%3E");
  mix-blend-mode: overlay;
}

#flash { position: absolute; inset: 0; pointer-events: none; z-index: 60; }
#fade { position: absolute; inset: 0; pointer-events: none; z-index: 45; }
#flash { background: #fff7e8; opacity: 0; transition: opacity 0.28s ease-out; }
#flash.on { opacity: 0.94; transition: none; }
#fade { background: #040101; opacity: 1; transition: opacity 1.1s ease; }
#fade.clear { opacity: 0; }

.hud {
  position: absolute;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
body[data-phase="play"] .hud,
body[data-phase="paused"] .hud,
body[data-phase="dialogue"] .hud { opacity: 1; transform: none; }
body[data-phase="intro"] .hud { opacity: 0; }
body[data-phase="complete"] .hud { opacity: 0.18; }

/* ---------- HUD left ---------- */
.hud-left {
  position: absolute;
  top: calc(12px + var(--safe-t));
  left: calc(12px + var(--safe-l));
  width: min(294px, 47vw);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.id-card {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 11px 7px 7px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px) saturate(1.08);
}

.portrait-frame {
  width: 57px;
  height: 59px;
  flex: none;
  border-radius: 13px;
  overflow: hidden;
  border: 1.5px solid rgba(143, 227, 200, 0.95);
  background: #ece0cc;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7), 0 4px 12px rgba(48, 10, 16, 0.28);
  position: relative;
}
.portrait-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 32%;
  transform: scale(1.42);
  transform-origin: 50% 28%;
}
.portrait-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.35), transparent 55%);
  pointer-events: none;
}

.id-meta { flex: 1; min-width: 0; }
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.18em;
  color: #6b4a4f;
  line-height: 1.2;
}
.name {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px;
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: 17px;
  line-height: 1.05;
  color: #2b0d12;
  letter-spacing: 0.01em;
}
.name .tooth {
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  font-weight: 700;
  color: #2b0d12;
  background: rgba(143, 227, 200, 0.42);
  border: 1px solid rgba(62, 132, 114, 0.32);
  padding: 1px 5px;
  border-radius: 5px;
  letter-spacing: 0.03em;
}
.health { display: flex; gap: 2px; margin-top: 3px; height: 20px; align-items: center; }
.health img {
  width: 17px;
  height: 20px;
  object-fit: contain;
  filter: drop-shadow(0 2px 3px rgba(40, 8, 12, 0.28));
  transition: opacity 0.28s ease, transform 0.28s ease, filter 0.28s ease;
}
.health img.empty { opacity: 0.3; filter: grayscale(0.7) brightness(0.9); transform: scale(0.94); }

.xp-card {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 15px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px) saturate(1.08);
}
.xp-card img { width: 26px; height: 26px; object-fit: contain; filter: drop-shadow(0 2px 4px rgba(40, 8, 12, 0.22)); }
.xp-meta { flex: 1; min-width: 0; }
.xp-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.16em;
  color: #5f4247;
  margin-bottom: 3px;
  display: flex;
  justify-content: space-between;
}
.xp-track {
  height: 8px;
  width: 100%;
  border-radius: 99px;
  background: rgba(58, 14, 20, 0.19);
  overflow: hidden;
  box-shadow: inset 0 1px 2px rgba(30, 6, 10, 0.25);
}
#xpfill {
  height: 100%;
  width: 0%;
  border-radius: 99px;
  background: linear-gradient(90deg, #58c9aa, #b8ffe9 70%, #f7fffd);
  box-shadow: 0 0 10px rgba(143, 227, 200, 0.7);
  position: relative;
  transition: width 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
}
#xpfill::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 20%, rgba(255, 255, 255, 0.92) 50%, transparent 80%);
  transform: translateX(-110%);
  animation: gloss 2.8s linear infinite;
  mix-blend-mode: screen;
}
.lv { text-align: center; line-height: 0.95; color: #2b0d12; min-width: 24px; }
.lv span { font-family: 'JetBrains Mono', monospace; font-size: 17px; font-weight: 700; }
.lv small { display: block; font-family: 'JetBrains Mono', monospace; font-size: 6px; letter-spacing: 0.18em; margin-top: 2px; }

/* ---------- HUD right ---------- */
.corner-tools {
  position: absolute;
  top: calc(12px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  display: flex;
  gap: 6px;
  pointer-events: auto;
  z-index: 2;
}
.round-tool {
  width: 37px;
  height: 37px;
  border-radius: 50%;
  border: 1px solid rgba(143, 227, 200, 0.9);
  background: linear-gradient(145deg, rgba(250, 248, 240, 0.82), rgba(221, 238, 231, 0.6));
  color: #3a0e14;
  box-shadow: 0 6px 16px rgba(26, 6, 10, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(10px);
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 7px;
  transition: transform 0.15s ease, background 0.2s ease;
}
.round-tool:hover { transform: translateY(-1px); background: rgba(255, 255, 255, 0.9); }
.round-tool svg { width: 100%; height: 100%; display: block; }
.round-tool.pause-tool { padding: 0; border: 0; background: none; box-shadow: none; overflow: hidden; }
.round-tool.pause-tool img { width: 100%; height: 100%; object-fit: contain; display: block; filter: drop-shadow(0 4px 10px rgba(20, 4, 8, 0.35)); }

.hud-right {
  position: absolute;
  top: calc(55px + var(--safe-t));
  right: calc(12px + var(--safe-r));
  width: min(206px, 33vw);
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.map-card {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 16px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px) saturate(1.08);
  padding: 7px 8px 6px;
}
.map-head, .map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
  color: #64464b;
}
.map-head { margin-bottom: 3px; }
.map-foot { margin-top: 3px; }
#campaignChip { color: #2b0d12; background: rgba(143, 227, 200, 0.42); padding: 1px 4px; border-radius: 4px; }
#mapState { color: #8b6a1f; }
#mapState.clean { color: #2c836c; }
.map-wrap { position: relative; width: 100%; }
.map-wrap > img { display: block; width: 100%; height: auto; filter: drop-shadow(0 5px 10px rgba(40, 8, 12, 0.22)); }
#mapDots { position: absolute; inset: 0; pointer-events: none; }
.map-dot {
  position: absolute;
  width: 7px;
  height: 7px;
  margin: 0;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: #c2a13c;
  border: 1px solid rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 7px rgba(194, 161, 60, 0.9);
  transition: background 0.35s ease, box-shadow 0.35s ease;
}
.map-dot.hero {
  width: 8px;
  height: 8px;
  background: #f7fbff;
  box-shadow: 0 0 9px rgba(247, 251, 255, 0.95), 0 0 0 2px rgba(143, 227, 200, 0.55);
}
.map-dot.clean { background: #8fe3c8; box-shadow: 0 0 8px rgba(143, 227, 200, 1); }

.quest-track {
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 14px;
  box-shadow: var(--panel-shadow);
  backdrop-filter: blur(12px) saturate(1.08);
  padding: 8px 10px;
}
.qt-head {
  display: flex;
  justify-content: space-between;
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.13em;
  color: #5f4247;
}
.qt-head #questCount { color: #2b0d12; }
#questList { list-style: none; margin: 5px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
#questList li {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  font-size: 10.5px;
  line-height: 1.22;
  color: #5b3b41;
  transition: color 0.3s ease;
}
#questList li .qdot {
  width: 8px;
  height: 8px;
  flex: none;
  margin-top: 2px;
  border-radius: 50%;
  border: 1px solid #7da395;
  background: rgba(255, 255, 255, 0.28);
}
#questList li.active { color: #2b0d12; font-weight: 700; }
#questList li.active .qdot { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 7px var(--mint); animation: qpulse 1.7s ease-in-out infinite; }
#questList li.done { color: #6c5559; }
#questList li.done span { text-decoration: line-through; text-decoration-color: rgba(44, 131, 108, 0.55); }
#questList li.done .qdot { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 6px rgba(143, 227, 200, 0.8); }

/* ---------- boss bar ---------- */
.bossbar {
  position: absolute;
  top: calc(102px + var(--safe-t));
  left: 50%;
  transform: translate(-50%, -8px);
  width: min(390px, 46vw);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.bossbar.show { opacity: 1; transform: translate(-50%, 0); }
.boss-name {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  color: #f7f0e4;
  text-shadow: 0 2px 10px rgba(26, 6, 10, 0.9);
  margin-bottom: 4px;
}
.boss-kicker { color: var(--ochre); font-size: 7px; }
.boss-tooth { color: var(--ochre); border: 1px solid rgba(194, 161, 60, 0.65); border-radius: 4px; padding: 1px 4px; }
.boss-track {
  height: 8px;
  border-radius: 99px;
  background: rgba(20, 4, 8, 0.62);
  border: 1px solid rgba(194, 161, 60, 0.7);
  overflow: hidden;
  box-shadow: 0 4px 16px rgba(20, 4, 8, 0.35);
}
#bossfill {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, #7f2c33, #c2a13c 72%, #e5cf86);
  box-shadow: 0 0 9px rgba(194, 161, 60, 0.65);
  transition: width 0.22s ease;
}

/* ---------- prompts / focus / hint ---------- */
.prompt {
  position: absolute;
  left: 50%;
  bottom: 26%;
  transform: translate(-50%, 10px);
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 9px 7px 18px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(252, 249, 241, 0.92), rgba(221, 240, 233, 0.82));
  border: 1px solid rgba(143, 227, 200, 0.95);
  box-shadow: 0 14px 36px rgba(20, 4, 8, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 4;
}
.prompt.show { opacity: 1; transform: translate(-50%, 0); animation: promptFloat 1.8s ease-in-out infinite; }
.prompt .word { font-family: 'Fraunces', serif; font-weight: 700; font-size: 23px; color: #2b0d12; letter-spacing: 0.01em; }
.prompt .key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  background: #2b0d12;
  color: var(--mint);
  padding: 6px 9px;
  border-radius: 8px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18);
}
body.touch .prompt .key { display: none; }
body.touch .prompt { padding-right: 18px; }

.focus-pill {
  position: absolute;
  left: 50%;
  bottom: calc(15% + var(--safe-b));
  transform: translate(-50%, 8px);
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(26, 7, 12, 0.62);
  border: 1px solid rgba(143, 227, 200, 0.45);
  color: #f7f0e4;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.12em;
  opacity: 0;
  transition: opacity 0.25s ease, transform 0.25s ease;
  backdrop-filter: blur(8px);
  pointer-events: none;
  white-space: nowrap;
}
.focus-pill.show { opacity: 1; transform: translate(-50%, 0); }

.keyhint {
  position: absolute;
  left: 50%;
  bottom: calc(9px + var(--safe-b));
  transform: translateX(-50%);
  display: flex;
  gap: 13px;
  align-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.09em;
  color: rgba(247, 240, 228, 0.72);
  text-shadow: 0 2px 10px rgba(26, 6, 10, 0.95);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0.9;
  transition: opacity 0.5s ease;
}
.keyhint b { color: var(--mint); font-weight: 700; }
body.touch .keyhint { display: none; }

/* ---------- touch controls ---------- */
.touch-ui { position: absolute; inset: 0; pointer-events: none; display: none; z-index: 6; }
body.touch .touch-ui { display: block; }
body[data-phase="title"] .touch-ui,
body[data-phase="intro"] .touch-ui,
body[data-phase="complete"] .touch-ui { display: none !important; }

.joy-base {
  position: absolute;
  left: calc(17px + var(--safe-l));
  bottom: calc(17px + var(--safe-b));
  width: 109px;
  height: 109px;
  opacity: 0.42;
  transition: opacity 0.16s ease;
  pointer-events: none;
}
.joy-base.active { opacity: 0.88; }
.joy-base img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 6px 14px rgba(20, 4, 8, 0.4)); }
.joy-knob {
  position: absolute;
  width: 54px;
  height: 54px;
  left: calc(17px + var(--safe-l) + 27px);
  bottom: calc(17px + var(--safe-b) + 27px);
  opacity: 0.5;
  pointer-events: none;
  transition: opacity 0.16s ease;
}
.joy-knob.active { opacity: 0.95; }
.joy-knob img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 4px 10px rgba(20, 4, 8, 0.42)); }

.touch-btn {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  pointer-events: auto;
  touch-action: none;
  transition: transform 0.08s ease, filter 0.2s ease, opacity 0.2s ease;
}
.touch-btn img { display: block; width: 100%; height: 100%; filter: drop-shadow(0 8px 18px rgba(20, 4, 8, 0.42)); }
.touch-btn span {
  position: absolute;
  left: 50%;
  bottom: -15px;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7px;
  letter-spacing: 0.2em;
  color: rgba(247, 240, 228, 0.85);
  text-shadow: 0 2px 8px #1a0509;
}
.touch-btn:active { transform: scale(0.93); }

.scrub-btn { right: calc(15px + var(--safe-r)); bottom: calc(20px + var(--safe-b)); width: 102px; height: 102px; }
.dash-btn { right: calc(124px + var(--safe-r)); bottom: calc(31px + var(--safe-b)); width: 63px; height: 63px; }
.dash-btn.cooling { opacity: 0.45; filter: saturate(0.4); }
.interact-btn {
  right: calc(112px + var(--safe-r));
  bottom: calc(108px + var(--safe-b));
  width: 68px;
  height: 68px;
  opacity: 0;
  pointer-events: none;
  transform: scale(0.8);
}
.interact-btn.show { opacity: 1; pointer-events: auto; transform: none; }
.scrub-btn.pulse { animation: scrubPulse 1.15s ease-in-out infinite; }

/* ---------- markers ---------- */
#markers { position: absolute; inset: 0; pointer-events: none; z-index: 5; }
.marker {
  position: absolute;
  transform: translate(-50%, -100%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  opacity: 0;
  transition: opacity 0.3s ease;
  will-change: left, top;
}
.marker.show { opacity: 1; }
.marker .tag {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  color: #2b0d12;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(208, 246, 235, 0.92));
  border: 1px solid rgba(143, 227, 200, 0.95);
  border-radius: 999px;
  padding: 4px 8px;
  white-space: nowrap;
  box-shadow: 0 5px 16px rgba(20, 4, 8, 0.35), 0 0 16px rgba(143, 227, 200, 0.4);
}
.marker .stem { width: 1px; height: 18px; background: linear-gradient(to bottom, var(--mint), transparent); }
.marker .gem {
  width: 10px;
  height: 10px;
  background: var(--mint);
  transform: rotate(45deg);
  box-shadow: 0 0 12px var(--mint);
  border-radius: 2px;
}
.marker.enemy .tag { border-color: rgba(194, 161, 60, 0.95); box-shadow: 0 5px 16px rgba(20, 4, 8, 0.35), 0 0 16px rgba(194, 161, 60, 0.45); }
.marker.enemy .gem { background: var(--ochre); box-shadow: 0 0 12px var(--ochre); }
.marker.enemy .stem { background: linear-gradient(to bottom, var(--ochre), transparent); }
.marker.locked { opacity: 0 !important; }
.marker.future .tag { color: #6b5559; border-color: rgba(143, 227, 200, 0.55); background: rgba(244, 245, 236, 0.82); }

/* ---------- toasts & floaters ---------- */
#toastStack {
  position: absolute;
  left: 50%;
  top: calc(70px + var(--safe-t));
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  z-index: 8;
  pointer-events: none;
  width: min(420px, 82vw);
}
.toast {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border-radius: 999px;
  background: linear-gradient(145deg, rgba(252, 249, 241, 0.92), rgba(219, 240, 232, 0.82));
  border: 1px solid rgba(143, 227, 200, 0.9);
  box-shadow: 0 10px 28px rgba(20, 4, 8, 0.35);
  color: #2b0d12;
  font-size: 11px;
  line-height: 1.2;
  text-align: center;
  animation: toastIn 0.32s cubic-bezier(0.2, 0.9, 0.2, 1);
  backdrop-filter: blur(10px);
}
.toast .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); flex: none; }
.toast.enemy .dot { background: var(--ochre); box-shadow: 0 0 8px var(--ochre); }
.toast.out { animation: toastOut 0.32s ease forwards; }

#floaters { position: absolute; inset: 0; pointer-events: none; z-index: 7; }
.xp-chip {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 700;
  color: #2b0d12;
  background: linear-gradient(180deg, #ffffff, #c8ffe9);
  border: 1px solid rgba(143, 227, 200, 1);
  border-radius: 999px;
  padding: 3px 7px;
  box-shadow: 0 4px 14px rgba(20, 4, 8, 0.3), 0 0 14px rgba(143, 227, 200, 0.65);
  will-change: transform, opacity;
  white-space: nowrap;
}
.dmg-float {
  position: absolute;
  font-family: 'JetBrains Mono', monospace;
  font-size: 14px;
  font-weight: 700;
  color: #f7fbff;
  text-shadow: 0 2px 8px rgba(26, 6, 10, 0.9), 0 0 12px rgba(143, 227, 200, 0.7);
  will-change: transform, opacity;
}

/* ---------- dialogue ---------- */
.dialogue {
  position: absolute;
  left: 50%;
  bottom: calc(20px + var(--safe-b));
  transform: translate(-50%, 12px);
  width: min(660px, 92vw);
  display: flex;
  gap: 12px;
  align-items: stretch;
  padding: 10px 12px 10px 10px;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 18px;
  box-shadow: 0 20px 48px rgba(20, 4, 8, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(16px) saturate(1.1);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease, transform 0.3s ease;
  z-index: 30;
}
.dialogue.show { opacity: 1; transform: translate(-50%, 0); pointer-events: auto; }
.dialogue-portrait {
  width: 94px;
  flex: none;
  border-radius: 13px;
  overflow: hidden;
  border: 1.5px solid rgba(143, 227, 200, 0.9);
  background: #e9ddc9;
  box-shadow: 0 5px 16px rgba(40, 8, 12, 0.25);
}
.dialogue-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); }
.dialogue-body { flex: 1; min-width: 0; color: #3a0e14; display: flex; flex-direction: column; }
.dialogue-name {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: #2b0d12;
  display: flex;
  gap: 8px;
  align-items: baseline;
}
.dialogue-name span { font-size: 6.5px; color: #7a5a5e; letter-spacing: 0.13em; }
.dialogue-body p { margin: 5px 0 8px; font-size: 12.5px; line-height: 1.38; }
.mini-cta {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.13em;
  color: #2b0d12;
  background: rgba(143, 227, 200, 0.48);
  border: 1px solid rgba(60, 119, 103, 0.42);
  border-radius: 7px;
  padding: 7px 10px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.2s ease, transform 0.15s ease;
}
.mini-cta:hover { background: rgba(143, 227, 200, 0.8); transform: translateY(-1px); }
.mini-cta span { font-size: 7px; background: #2b0d12; color: var(--mint); padding: 2px 4px; border-radius: 4px; margin-left: 5px; }

/* ---------- modal & panels ---------- */
.modal {
  position: absolute;
  touch-action: pan-y;
  inset: 0;
  z-index: 55;
  display: grid;
  place-items: center;
  padding: 14px;
  background: rgba(20, 4, 8, 0.55);
  backdrop-filter: blur(7px) saturate(0.9);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.modal.show { opacity: 1; pointer-events: auto; }
.panel {
  position: relative;
  touch-action: pan-y;
  width: min(720px, 94vw);
  max-height: 92vh;
  overflow: auto;
  background: var(--panel);
  border: 1px solid var(--panel-edge);
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(10, 2, 5, 0.62), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  color: var(--wine);
  padding: 22px 24px;
  backdrop-filter: blur(20px) saturate(1.12);
  scrollbar-width: thin;
}
.panel-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; margin-bottom: 12px; }
.kicker { font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.2em; color: #7a5a5e; text-transform: uppercase; }
.panel h2, .complete-panel h2 {
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(24px, 3.6vw, 38px);
  line-height: 0.98;
  letter-spacing: -0.01em;
  color: #2b0d12;
  margin: 5px 0 0;
}
.close-btn {
  width: 32px;
  height: 32px;
  flex: none;
  border-radius: 50%;
  border: 1px solid rgba(60, 119, 103, 0.4);
  background: rgba(255, 255, 255, 0.48);
  color: #3a0e14;
  font-size: 19px;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
  padding: 0 0 2px;
  transition: background 0.2s ease;
}
.close-btn:hover { background: rgba(255, 255, 255, 0.9); }
.panel-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; font-family: 'JetBrains Mono', monospace; font-size: 8px; letter-spacing: 0.12em; color: #6b4a4f; }

.controls-panel { width: min(760px, 94vw); }
.controls-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.control-col h3 { font-family: 'Fraunces', serif; font-size: 19px; margin: 0 0 7px; color: #2b0d12; }
.control-col p { margin: 0 0 6px; font-size: 12px; line-height: 1.4; color: #53353b; }
.control-col b { font-family: 'JetBrains Mono', monospace; font-size: 10px; background: rgba(58, 14, 20, 0.1); border: 1px solid rgba(58, 14, 20, 0.14); border-radius: 4px; padding: 1px 4px; color: #2b0d12; }
.controls-note { margin-top: 16px; padding-top: 12px; border-top: 1px solid rgba(58, 14, 20, 0.14); font-family: 'Fraunces', serif; font-style: italic; font-size: 15px; color: #6d4a4f; }

.log-panel {
  width: min(790px, 96vw);
  padding: 0;
  background: none;
  border: 0;
  box-shadow: none;
  overflow: visible;
}
.log-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  filter: drop-shadow(0 28px 60px rgba(10, 2, 5, 0.5));
  pointer-events: none;
}
.log-content {
  position: relative;
  padding: 26px 38px 20px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
}
.log-scroll { overflow: auto; scrollbar-width: thin; padding-right: 5px; flex: 1; min-height: 0; }
.log-section { margin-bottom: 16px; }
.section-title {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.15em;
  color: #6b4a4f;
  border-bottom: 1px solid rgba(58, 14, 20, 0.14);
  padding-bottom: 4px;
  margin-bottom: 8px;
}
.section-title span { font-size: 7px; letter-spacing: 0.1em; color: #8a6a6e; }
.log-quests { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.log-quests li { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; line-height: 1.3; color: #53353b; }
.log-quests li .qdot { width: 9px; height: 9px; border-radius: 50%; border: 1px solid #7da395; margin-top: 3px; flex: none; }
.log-quests li.active { color: #2b0d12; font-weight: 700; }
.log-quests li.active .qdot { background: var(--mint); border-color: var(--mint); box-shadow: 0 0 7px var(--mint); }
.log-quests li.done { color: #6c5559; }
.log-quests li.done span { text-decoration: line-through; }
.log-quests li.done .qdot { background: var(--mint); border-color: var(--mint); }
.log-copy { margin: 0 0 10px; font-size: 11.5px; line-height: 1.45; color: #62454a; }

.campaign { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px; }
.arch-block { border: 1px solid rgba(58, 14, 20, 0.12); border-radius: 10px; padding: 7px 8px; background: rgba(255, 255, 255, 0.22); }
.arch-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 6.5px;
  letter-spacing: 0.14em;
  color: #7a5a5e;
  margin-bottom: 5px;
  display: flex;
  justify-content: space-between;
}
.arch-row { display: flex; gap: 3px; flex-wrap: nowrap; }
.tooth-cell {
  flex: 1;
  min-width: 0;
  height: 22px;
  border-radius: 42% 42% 26% 26% / 32% 32% 46% 46%;
  border: 1px solid rgba(58, 14, 20, 0.2);
  background: rgba(239, 230, 210, 0.55);
  display: grid;
  place-items: center;
  font-family: 'JetBrains Mono', monospace;
  font-size: 6.5px;
  color: #6b4a4f;
  position: relative;
}
.tooth-cell.current {
  background: linear-gradient(180deg, #ffffff, #bff6e6);
  border-color: #2c836c;
  color: #2b0d12;
  font-weight: 700;
  box-shadow: 0 0 0 2px rgba(143, 227, 200, 0.38), 0 0 12px rgba(143, 227, 200, 0.6);
}
.tooth-cell.done {
  background: linear-gradient(180deg, #e8fff7, #8fe3c8);
  border-color: #2c836c;
  color: #1d5d4e;
  font-weight: 700;
}
.tooth-cell.future { opacity: 0.55; }
.tooth-cell.planned::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: repeating-linear-gradient(135deg, transparent 0 4px, rgba(58, 14, 20, 0.06) 4px 5px);
}

/* pause */
.pause-panel { width: min(520px, 92vw); text-align: left; }
.pause-panel h2 { margin-bottom: 6px; }
.pause-copy { margin: 0 0 16px; font-size: 12.5px; color: #62454a; }
.pause-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.pause-actions .cta.small { margin-right: 4px; }
.pause-actions .mini-cta { align-self: auto; }
.mini-cta.danger { background: rgba(201, 96, 106, 0.2); border-color: rgba(138, 40, 52, 0.4); }
.mini-cta.danger:hover { background: rgba(201, 96, 106, 0.36); }
.pause-meta {
  display: flex;
  justify-content: space-between;
  margin-top: 18px;
  padding-top: 12px;
  border-top: 1px solid rgba(58, 14, 20, 0.14);
  font-family: 'JetBrains Mono', monospace;
  font-size: 7.5px;
  letter-spacing: 0.12em;
  color: #7a5a5e;
}

/* level up */
.level-up {
  position: absolute;
  inset: 0;
  z-index: 35;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.35s ease, transform 0.35s cubic-bezier(0.2, 0.9, 0.2, 1);
}
.level-up.show { opacity: 1; transform: none; }
.level-up-badge { position: relative; width: min(250px, 42vw); aspect-ratio: 1; }
.level-up-badge img { width: 100%; height: 100%; display: block; filter: drop-shadow(0 20px 50px rgba(20, 4, 8, 0.6)) drop-shadow(0 0 26px rgba(143, 227, 200, 0.5)); }
.level-up-num {
  position: absolute;
  left: 50%;
  top: 46%;
  transform: translate(-50%, -50%);
  font-family: 'Fraunces', serif;
  font-weight: 900;
  font-size: clamp(56px, 9vw, 96px);
  color: #3a0e14;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(255, 255, 255, 0.45), 0 8px 22px rgba(58, 14, 20, 0.22);
}
.level-up-copy { text-align: center; text-shadow: 0 2px 16px rgba(20, 4, 8, 0.8); }
.level-up-copy .kicker { color: var(--mint); text-shadow: 0 2px 10px rgba(20, 4, 8, 0.9); }
.level-up-copy h2 { font-family: 'Fraunces', serif; font-size: clamp(26px, 4vw, 40px); font-weight: 900; color: #f7fbff; margin: 3px 0 2px; }
.level-up-copy p { margin: 0; font-family: 'JetBrains Mono', monospace; font-size: 9px; letter-spacing: 0.18em; color: var(--mint); }

/* complete */
.complete-modal { background: rgba(18, 3, 7, 0.62); }
.complete-panel {
  width: min(700px, 95vw);
  background: linear-gradient(150deg, rgba(251, 248, 240, 0.95), rgba(218, 240, 232, 0.86));
}
.complete-top { text-align: center; }
.complete-sub { font-family: 'Fraunces', serif; font-style: italic; font-size: 16px; color: #6d4a4f; margin: 4px 0 14px; }
.complete-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 12px;
}
.complete-stats > div {
  background: rgba(255, 255, 255, 0.36);
  border: 1px solid rgba(58, 14, 20, 0.12);
  border-radius: 9px;
  padding: 7px 8px;
  text-align: center;
}
.stat-label { display: block; font-family: 'JetBrains Mono', monospace; font-size: 6.5px; letter-spacing: 0.14em; color: #7a5a5e; margin-bottom: 3px; }
.stat-value { font-family: 'JetBrains Mono', monospace; font-size: 20px; font-weight: 700; color: #2b0d12; }
.next-tooth {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 11px;
  background: rgba(143, 227, 200, 0.2);
  border: 1px solid rgba(44, 131, 108, 0.36);
  margin-bottom: 12px;
}
.next-tooth > div { display: flex; flex-direction: column; gap: 2px; }
.next-tooth strong { font-family: 'Fraunces', serif; font-size: 22px; line-height: 1; color: #2b0d12; }
.next-tooth > div > span:last-child { font-size: 10.5px; color: #5e4449; }
.coming { font-family: 'JetBrains Mono', monospace; font-size: 6.5px; letter-spacing: 0.12em; color: #7a5a5e; text-align: right; max-width: 110px; }
.complete-actions { display: flex; gap: 8px; align-items: center; justify-content: center; margin-top: 14px; flex-wrap: wrap; }
.complete-foot { text-align: center; margin-top: 12px; font-family: 'JetBrains Mono', monospace; font-size: 7px; letter-spacing: 0.18em; color: #7a5a5e; }

.cta {
  font-family: 'Fraunces', serif;
  font-weight: 700;
  font-size: clamp(16px, 1.6vw, 21px);
  letter-spacing: 0.035em;
  padding: 13px 30px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.8);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.97), rgba(210, 242, 232, 0.92));
  color: #2b0d12;
  box-shadow: 0 16px 36px rgba(20, 4, 8, 0.42), inset 0 1px 0 #fff;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
  white-space: nowrap;
}
.cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 22px 44px rgba(20, 4, 8, 0.46), inset 0 1px 0 #fff; }
.cta:disabled { opacity: 0.55; cursor: default; }
.cta.small { font-size: 14px; padding: 10px 20px; }
.cta .key {
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.1em;
  background: #2b0d12;
  color: var(--mint);
  padding: 3px 6px;
  border-radius: 5px;
  margin-left: 8px;
  vertical-align: 2px;
}
.text-btn {
  border: 0;
  background: none;
  color: rgba(247, 240, 228, 0.82);
  font-family: 'JetBrains Mono', monospace;
  font-size: 8px;
  letter-spacing: 0.16em;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  display: block;
  margin: 4px auto 7px;
  padding: 6px;
}
.text-btn:hover { color: var(--mint); }

/* ---------- title ---------- */
.title-screen {
  position: absolute;
  inset: 0;
  z-index: 50;
  overflow: hidden;
  background: #120507;
  transition: opacity 0.9s ease;
}
.title-screen.hidden { opacity: 0; pointer-events: none; }
.title-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.02);
  filter: saturate(1.04) contrast(1.03) brightness(0.97);
  transition: transform 1.25s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1.25s ease, opacity 1.25s ease;
}
.title-screen.diving .title-bg { transform: scale(1.55); filter: saturate(1.1) brightness(1.75) blur(2px); opacity: 0.15; }
.title-scrim {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 50% 52%, rgba(20, 4, 8, 0) 30%, rgba(20, 4, 8, 0.25) 74%, rgba(20, 4, 8, 0.72) 100%),
    linear-gradient(to bottom, rgba(24, 4, 8, 0.55), rgba(24, 4, 8, 0) 28%, rgba(24, 4, 8, 0) 52%, rgba(24, 4, 8, 0.78) 94%);
  pointer-events: none;
}
.title-content {
  position: absolute;
  inset: 0;
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.title-screen.diving .title-content { opacity: 0; transform: translateY(-2vh); }
.title-top {
  position: absolute;
  left: 50%;
  top: clamp(10px, 3.4vh, 42px);
  transform: translateX(-50%);
  width: min(93vw, 900px);
  text-align: center;
  z-index: 3;
}
.title-mark {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(7px, 0.9vw, 10px);
  letter-spacing: 0.3em;
  color: rgba(247, 240, 228, 0.8);
  text-transform: uppercase;
  text-shadow: 0 2px 12px rgba(20, 4, 8, 0.8);
}
.title-lettering {
  width: min(71vw, 620px);
  max-height: 27vh;
  object-fit: contain;
  display: block;
  margin: clamp(2px, 0.8vh, 10px) auto 0;
  filter: drop-shadow(0 16px 32px rgba(20, 4, 8, 0.62)) drop-shadow(0 0 18px rgba(255, 255, 255, 0.14));
}
.title-tag {
  font-family: 'Fraunces', serif;
  font-weight: 600;
  font-size: clamp(14px, 1.9vw, 24px);
  color: #fff5e6;
  margin: 0.3em 0 0;
  text-shadow: 0 3px 20px rgba(20, 4, 8, 0.85);
}
.title-sub {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(7px, 0.85vw, 10px);
  letter-spacing: 0.2em;
  color: var(--mint);
  margin-top: 0.9em;
  text-shadow: 0 2px 12px rgba(20, 4, 8, 0.9);
}
.title-stage { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.title-hero {
  position: absolute;
  left: 50%;
  bottom: clamp(112px, 16vh, 188px);
  transform: translateX(-50%);
  height: min(45vh, 420px);
  filter: drop-shadow(0 26px 30px rgba(20, 4, 8, 0.55));
  animation: heroBob 4.4s ease-in-out infinite;
}
.title-hero img { height: 100%; width: auto; display: block; }
.title-mite {
  position: absolute;
  right: clamp(10px, 12vw, 230px);
  bottom: clamp(124px, 19vh, 214px);
  height: min(13vh, 112px);
  filter: drop-shadow(0 14px 20px rgba(20, 4, 8, 0.55));
  animation: miteSkitter 3.1s ease-in-out infinite;
}
.title-mite img { height: 100%; width: auto; display: block; }
.title-brute {
  position: absolute;
  right: clamp(-16px, 1.4vw, 50px);
  top: clamp(66px, 16vh, 190px);
  height: min(30vh, 310px);
  opacity: 0.9;
  filter: drop-shadow(0 24px 30px rgba(20, 4, 8, 0.55)) saturate(0.96);
  z-index: -1;
}
.title-bottom {
  position: absolute;
  left: 50%;
  bottom: calc(12px + var(--safe-b));
  transform: translateX(-50%);
  width: min(94vw, 640px);
  text-align: center;
  z-index: 4;
}
.title-badges { display: flex; justify-content: center; flex-wrap: wrap; gap: 5px; margin-bottom: 9px; }
.chip {
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(7px, 0.8vw, 9px);
  letter-spacing: 0.11em;
  color: #f7f0e4;
  background: rgba(29, 8, 12, 0.45);
  border: 1px solid rgba(143, 227, 200, 0.4);
  border-radius: 999px;
  padding: 4px 9px;
  backdrop-filter: blur(7px);
  text-shadow: 0 1px 6px rgba(20, 4, 8, 0.8);
  white-space: nowrap;
}
.chip em { font-style: normal; color: var(--mint); margin-right: 3px; }
.title-controls {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 8px;
  font-family: 'JetBrains Mono', monospace;
  font-size: clamp(7px, 0.8vw, 9px);
  letter-spacing: 0.06em;
  color: rgba(247, 240, 228, 0.74);
  text-shadow: 0 2px 10px rgba(20, 4, 8, 0.9);
}
.title-controls b { color: var(--mint); font-weight: 700; }
body.touch .title-controls { display: none; }
.title-loading {
  position: absolute;
  bottom: calc(4px + var(--safe-b));
  left: 50%;
  transform: translateX(-50%);
  font-family: 'JetBrains Mono', monospace;
  font-size: 6px;
  letter-spacing: 0.22em;
  color: rgba(247, 240, 228, 0.42);
  animation: breathe 1.7s ease-in-out infinite;
  pointer-events: none;
}
.title-loading.done { opacity: 0; transition: opacity 0.4s ease; }

/* ---------- animation ---------- */
@keyframes gloss { 0% { transform: translateX(-110%); } 55% { transform: translateX(210%); } 100% { transform: translateX(210%); } }
@keyframes qpulse { 0%, 100% { box-shadow: 0 0 4px var(--mint); } 50% { box-shadow: 0 0 12px var(--mint); } }
@keyframes promptFloat { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -4px); } }
@keyframes scrubPulse { 0%, 100% { transform: scale(1); filter: drop-shadow(0 8px 18px rgba(20, 4, 8, 0.42)) drop-shadow(0 0 0 rgba(143, 227, 200, 0)); } 50% { transform: scale(1.06); filter: drop-shadow(0 8px 18px rgba(20, 4, 8, 0.42)) drop-shadow(0 0 18px rgba(143, 227, 200, 0.9)); } }
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px) scale(0.96); } to { opacity: 1; transform: none; } }
@keyframes toastOut { to { opacity: 0; transform: translateY(-6px) scale(0.98); } }
@keyframes heroBob { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, -7px); } }
@keyframes miteSkitter { 0%, 100% { transform: translate(0, 0) rotate(-1deg); } 45% { transform: translate(-10px, 2px) rotate(1.5deg); } 70% { transform: translate(4px, -2px) rotate(-0.5deg); } }
@keyframes breathe { 0%, 100% { opacity: 0.42; } 50% { opacity: 0.88; } }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .hud-left { width: min(270px, 51vw); }
  .hud-right { width: min(178px, 31vw); }
  .keyhint { gap: 9px; font-size: 7px; }
  .quest-track { padding: 7px 8px; }
}

@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  body.boss-fight .hud-right { display: none; }
  .hud-left { width: min(240px, 60vw); gap: 5px; }
  .portrait-frame { width: 46px; height: 48px; }
  .name { font-size: 15px; }
  .eyebrow { font-size: 6px; }
  .health { height: 16px; }
  .health img { width: 14px; height: 16px; }
  .xp-card img { width: 21px; height: 21px; }
  .xp-label { font-size: 6px; }
  .hud-right { width: min(132px, 34vw); top: calc(52px + var(--safe-t)); gap: 5px; }
  .map-head, .map-foot { font-size: 5.5px; }
  .map-foot { display: none; }
  .qt-head { font-size: 5.8px; }
  #questList li { font-size: 9px; gap: 4px; }
  #questList li .qdot { width: 6px; height: 6px; margin-top: 2px; }
  .round-tool { width: 32px; height: 32px; padding: 6px; }
  .bossbar { top: calc(100px + var(--safe-t)); width: min(300px, 66vw); }
  .boss-name { font-size: 7px; }
  .prompt { bottom: 30%; padding: 5px 7px 5px 14px; }
  .prompt .word { font-size: 18px; }
  .focus-pill { bottom: calc(22% + var(--safe-b)); font-size: 6.5px; }
  .toast { font-size: 9.5px; padding: 6px 11px; }
  .controls-grid { grid-template-columns: 1fr; gap: 8px; }
  .panel { padding: 16px 16px; border-radius: 18px; }
  .log-content { padding: 20px 26px 16px; max-height: 90vh; }
  .campaign { grid-template-columns: 1fr; gap: 6px; }
  .dialogue { gap: 8px; padding: 8px; }
  .dialogue-portrait { width: 68px; }
  .dialogue-body p { font-size: 11px; margin: 4px 0 6px; }
  .next-tooth { flex-direction: column; align-items: flex-start; }
  .coming { text-align: left; max-width: none; }
  .complete-stats .stat-value { font-size: 16px; }
  .scrim { }
  .level-up-num { font-size: 62px; }
  .title-hero { height: 34vh; bottom: 15vh; }
  .title-mite { height: 9vh; right: 5vw; bottom: 18vh; }
  .title-brute { height: 22vh; top: 11vh; right: -9vw; opacity: 0.65; }
  .title-lettering { width: 84vw; max-height: 20vh; }
  .title-tag { font-size: 15px; }
  .title-sub { font-size: 6.5px; letter-spacing: 0.15em; }
  .title-mark { font-size: 6.5px; letter-spacing: 0.2em; }
  .title-badges { gap: 4px; margin-bottom: 7px; }
  .chip { font-size: 6px; padding: 3px 6px; }
  .cta { font-size: 15px; padding: 11px 24px; }
  .title-bottom { bottom: calc(8px + var(--safe-b)); }
  .title-controls { display: none; }
  .panel h2, .complete-panel h2 { font-size: 26px; }
  .level-up-badge { width: min(200px, 52vw); }
  .level-up-copy h2 { font-size: 28px; }
}

@media (max-height: 520px) {
  .title-hero { height: 38vh; bottom: 14vh; }
  .title-mite { height: 10vh; bottom: 17vh; }
  .title-brute { height: 23vh; top: 10vh; }
  .title-top { top: 6px; }
  .title-lettering { width: 48vw; max-height: 20vh; }
  .title-sub { display: none; }
  .title-badges { margin-bottom: 4px; }
  .title-controls { display: none; }
  .id-card { padding: 5px 8px 5px 5px; }
  .portrait-frame { width: 42px; height: 44px; }
  .xp-card { padding: 4px 8px; }
  .hud-right { top: calc(50px + var(--safe-t)); width: min(148px, 27vw); }
  .toast { padding: 5px 10px; }
  .keyhint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .title-hero, .title-mite, .prompt.show, .title-loading, #xpfill::after, .scrub-btn.pulse { animation: none !important; }
}