* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #0a0a10;
  color: #e8e6ef;
  font-family: "Courier New", ui-monospace, monospace;
  user-select: none;
  /* Keep the page rock-steady during touch play: no pull-to-refresh, no
   * rubber-band scroll, no double-tap/pinch zoom shifting the viewport. */
  overscroll-behavior: none;
  touch-action: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

#game-root {
  position: fixed;
  inset: 0;
  overflow: hidden;
  touch-action: none;
}

#view {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  image-rendering: pixelated;
  cursor: crosshair;
}

/* ---------- HUD ---------- */
#hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

.hud-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  display: flex;
  gap: 0.6rem;
  padding: 0.7rem 1rem;
  flex-wrap: wrap;
}

.hud-chip {
  background: rgba(16, 14, 26, 0.72);
  border: 1px solid rgba(233, 121, 249, 0.35);
  border-radius: 0.4rem;
  padding: 0.3rem 0.7rem;
  font-size: clamp(0.7rem, 1.6vw, 0.95rem);
  letter-spacing: 0.08em;
  color: #f0c6ff;
  text-shadow: 0 0 6px rgba(233, 121, 249, 0.4);
}
.hud-chip .no { color: #ff6b8b; }
.hud-chip .yes { color: #7dffb0; }

.hud-bottom {
  position: absolute;
  left: 1rem;
  bottom: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  width: min(38%, 22rem);
}

.bar-wrap { display: flex; align-items: center; gap: 0.5rem; }
.bar-label {
  width: 3.2rem;
  font-size: clamp(0.65rem, 1.4vw, 0.85rem);
  color: #b9a9d6;
  letter-spacing: 0.1em;
}
.bar {
  flex: 1;
  height: 0.9rem;
  background: rgba(0,0,0,0.55);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 0.5rem;
  overflow: hidden;
}
.bar-fill { height: 100%; width: 100%; transition: width 0.15s ease; }
.bar-fill.hp { background: linear-gradient(90deg, #ff5a7a, #ff9d5a); }
.bar-fill.charge { background: linear-gradient(90deg, #6ad1ff, #b76bff); }

#minimap {
  position: absolute;
  right: 0;
  bottom: 0;
  width: clamp(135px, 24vw, 285px);
  aspect-ratio: 3 / 2;
  height: auto;
  background: rgba(6, 6, 12, 0.7);
  border: 1px solid rgba(233, 121, 249, 0.3);
  border-radius: 0.4rem 0 0 0;
  image-rendering: pixelated;
}

/* ---------- Mobile-landscape HUD layout ----------
 * HP + LOAD bars pinned top-left, with the FLOOR / KEY / BOTTOMS chips stacked
 * directly beneath them (also on the left); minimap pinned top-right. Toggled
 * from app.js via the HUD_MOBILE flag; when off, the base rules above give the
 * original layout. */
#hud.hud-mobile #minimap {
  top: 0.7rem;
  right: 0.7rem;
  bottom: auto;
  left: auto;
  border-radius: 0.4rem;
}
#hud.hud-mobile .hud-bottom {
  top: 0.7rem;
  left: 0.7rem;
  bottom: auto;
  width: min(46%, 18rem);
}
#hud.hud-mobile .hud-top {
  top: 4.4rem;            /* directly beneath the two HP + LOAD bars */
  left: 0.7rem;
  right: auto;
  width: auto;
  padding: 0;
  gap: 0.4rem;
  flex-direction: column;
  align-items: flex-start;
  flex-wrap: nowrap;
}

/* Floor jump row: small numbered buttons 1-10 that restart the game on the
 * chosen floor. Pinned top-centre, out of the way of the corner HUD widgets. */
#level-jump {
  position: absolute;
  top: 0.7rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
  pointer-events: auto;
}
#level-jump button {
  pointer-events: auto;
  font-family: inherit;
  font-weight: bold;
  font-size: clamp(0.6rem, 1.4vw, 0.8rem);
  min-width: 1.7rem;
  padding: 0.25rem 0.35rem;
  color: #f0c6ff;
  background: rgba(16, 14, 26, 0.72);
  border: 1px solid rgba(233, 121, 249, 0.35);
  border-radius: 0.35rem;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease, box-shadow 0.15s ease;
}
#level-jump button:hover {
  background: rgba(46, 32, 68, 0.85);
  box-shadow: 0 0 10px rgba(183, 107, 255, 0.6);
  transform: scale(1.08);
}

/* Graphics-toggle icon row: sits directly under the floor-jump row and mirrors
 * its button sizing so the two rows read as a matched pair. Each icon shows the
 * on/off state of one debug toggle (T / Y / U / I) and clicking flips it. */
#toggle-row {
  position: absolute;
  top: 2.9rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 0.3rem;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 90%;
  pointer-events: auto;
}
#toggle-row button {
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
  font-family: inherit;
  font-weight: bold;
  font-size: clamp(0.6rem, 1.4vw, 0.8rem);
  line-height: 1;
  min-width: 1.7rem;
  padding: 0.25rem 0.35rem;
  border-radius: 0.35rem;
  cursor: pointer;
  transition: transform 0.1s ease, background 0.15s ease,
              box-shadow 0.15s ease, opacity 0.15s ease, filter 0.15s ease;
}
#toggle-row button .tg-key {
  font-size: 0.75em;
  opacity: 0.85;
}
/* ON: bright, accented, glowing. */
#toggle-row button.on {
  color: #d7ffe0;
  background: rgba(20, 40, 26, 0.78);
  border: 1px solid rgba(96, 233, 141, 0.6);
  box-shadow: 0 0 8px rgba(70, 220, 120, 0.35);
  opacity: 1;
}
/* OFF: dimmed, desaturated, no glow. */
#toggle-row button.off {
  color: #9a8ea6;
  background: rgba(16, 14, 26, 0.72);
  border: 1px solid rgba(120, 110, 130, 0.3);
  box-shadow: none;
  opacity: 0.55;
  filter: grayscale(0.8);
}
#toggle-row button:hover {
  transform: scale(1.08);
}

#toast {
  position: absolute;
  top: 22%;
  left: 50%;
  transform: translateX(-50%);
  font-size: clamp(1rem, 3.2vw, 2rem);
  font-weight: bold;
  letter-spacing: 0.06em;
  color: #ffe;
  text-shadow: 0 0 12px rgba(233,121,249,0.9), 0 2px 4px #000;
  opacity: 0;
  transition: opacity 0.3s ease;
  text-align: center;
  white-space: nowrap;
}
#toast.show { opacity: 1; }

/* ---------- Overlays ---------- */
.overlay {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 50% 40%, rgba(40,20,60,0.75), rgba(6,6,12,0.94));
  backdrop-filter: blur(3px);
}
.overlay.hidden { display: none; }

/* Two-pane start overlay: the original intro card on the left, the collapsible
 * "bestiary" of new content on the right. Wraps to a stack on narrow screens. */
.ov-panes {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
  max-width: min(96%, 62rem);
  max-height: 94vh;
}

.ov-card {
  text-align: center;
  max-width: min(90%, 40rem);
  max-height: 92vh;
  overflow-y: auto;
  padding: clamp(1.2rem, 4vw, 2.5rem);
  background: rgba(14, 12, 22, 0.9);
  border: 1px solid rgba(233, 121, 249, 0.35);
  border-radius: 1rem;
  box-shadow: 0 0 40px rgba(120, 40, 200, 0.35);
}

.ov-card h1 {
  font-size: clamp(1.8rem, 6vw, 3.4rem);
  letter-spacing: 0.06em;
  color: #ffd9ff;
  text-shadow: 0 0 18px rgba(233,121,249,0.7);
  margin-bottom: 0.6rem;
}
.ov-card h1 span { color: #7dffb0; }

.ov-card .tag {
  color: #c9bce0;
  font-size: clamp(0.85rem, 2.2vw, 1.1rem);
  margin-bottom: 1rem;
}
.ov-card .obj {
  color: #a99cc4;
  font-size: clamp(0.75rem, 1.9vw, 0.95rem);
  margin: 1rem 0;
  line-height: 1.5;
}
.ov-card .obj b { color: #f0c6ff; }

.ctrls {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 1.2rem;
  margin: 0.8rem auto;
  max-width: 26rem;
  font-size: clamp(0.75rem, 1.9vw, 0.95rem);
  color: #cdbfe6;
}
.ctrls b { color: #7dffb0; }

/* Touch devices see the twin-stick hint instead of the keyboard grid. */
.ctrls-touch { display: none; }
@media (pointer: coarse) {
  .ctrls:not(.ctrls-touch) { display: none; }
  .ctrls-touch { display: grid; }
}

/* Short (landscape / mobile) viewports: shrink the banner so the whole card,
 * button included, fits without the page itself ever scrolling. */
@media (max-height: 560px) {
  .ov-card { padding: clamp(0.7rem, 3vh, 1.4rem) clamp(1rem, 4vw, 2rem); }
  .ov-card h1 { font-size: clamp(1.4rem, 7vh, 2.4rem); margin-bottom: 0.3rem; }
  .ov-card .tag { font-size: clamp(0.75rem, 3.2vh, 1rem); margin-bottom: 0.5rem; }
  .ov-card .obj { margin: 0.5rem 0; line-height: 1.35; }
  .ctrls { margin: 0.5rem auto; gap: 0.25rem 1.2rem; }
  #start-btn, #msg-btn { margin-top: 0.5rem; padding: 0.5rem 1.5rem; }
  .ov-card .mini { margin-top: 0.5rem; }
}

#start-btn, #msg-btn {
  pointer-events: auto;
  margin-top: 0.8rem;
  padding: 0.7rem 1.8rem;
  font-family: inherit;
  font-size: clamp(0.9rem, 2.4vw, 1.2rem);
  letter-spacing: 0.1em;
  color: #12061a;
  background: linear-gradient(90deg, #f0abfc, #b76bff);
  border: none;
  border-radius: 0.6rem;
  cursor: pointer;
  font-weight: bold;
  transition: transform 0.1s ease, box-shadow 0.15s ease;
  box-shadow: 0 0 20px rgba(183, 107, 255, 0.5);
}
#start-btn:hover, #msg-btn:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(183, 107, 255, 0.8); }

.ov-card .mini {
  margin-top: 0.9rem;
  color: #6f6488;
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
}

.ov-card .dl-link {
  pointer-events: auto;
  display: inline-block;
  margin-top: 0.55rem;
  color: #c9a8ff;
  text-decoration: none;
  font-size: clamp(0.65rem, 1.5vw, 0.82rem);
  letter-spacing: 0.04em;
  border-bottom: 1px dotted rgba(183, 107, 255, 0.5);
  transition: color 0.15s ease, border-color 0.15s ease;
}
.ov-card .dl-link:hover {
  color: #f0abfc;
  border-bottom-color: #f0abfc;
}

/* ---------- Mobile touch joysticks ----------
 * Two thumb sticks pinned to the lower corners: left = strafe + tap to squirt /
 * open door, right = move forward/back + turn. Each stick sits at 40% opacity
 * while idle and brightens to 75% while it is actively being dragged. Injected
 * and shown from app.js only when a coarse-pointer (touch) device is detected. */
#touch-controls {
  position: absolute;
  inset: 0;
  z-index: 8;
  pointer-events: none;
  display: none;
}
#touch-controls.on { display: block; }

.sc-joy {
  position: absolute;
  bottom: 6vh;
  width: clamp(6.5rem, 26vw, 11rem);
  height: clamp(6.5rem, 26vw, 11rem);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, rgba(46,32,68,0.55), rgba(16,14,26,0.5));
  border: 2px solid rgba(233, 121, 249, 0.4);
  opacity: 0.4;
  transition: opacity 0.15s ease;
  pointer-events: auto;
  touch-action: none;
}
.sc-joy.active { opacity: 0.75; }
#joy-left  { left: 4vw; }
#joy-right { right: 4vw; }

.sc-knob {
  position: absolute;
  left: 50%; top: 50%;
  width: 44%; height: 44%;
  margin-left: -22%; margin-top: -22%;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, rgba(240,171,252,0.95), rgba(120,60,180,0.85));
  box-shadow: 0 0 14px rgba(183,107,255,0.6);
  will-change: transform;
}
.sc-joy .sc-label {
  position: absolute;
  left: 0; right: 0; top: -1.3rem;
  text-align: center;
  font-size: clamp(0.55rem, 1.6vw, 0.72rem);
  letter-spacing: 0.06em;
  color: #b9a9d6;
  text-shadow: 0 1px 3px #000;
}

/* ---------- Bestiary pane (start overlay, second pane) ---------- */
.bestiary-card {
  text-align: left;
  flex: 1 1 20rem;
  max-width: min(90%, 22rem);
  padding: clamp(0.9rem, 3vw, 1.4rem);
}

.bestiary summary {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  list-style: none;
  color: #f0c6ff;
  font-size: clamp(0.85rem, 2.1vw, 1.05rem);
  letter-spacing: 0.06em;
  text-shadow: 0 0 8px rgba(233, 121, 249, 0.4);
  padding: 0.15rem 0;
}
.bestiary summary::-webkit-details-marker { display: none; }
.bestiary .best-caret {
  color: #7dffb0;
  font-size: 0.75em;
  transition: transform 0.15s ease;
}
.bestiary[open] .best-caret { transform: rotate(90deg); }

.bestiary .best-sub {
  color: #9a8ea6;
  font-size: clamp(0.65rem, 1.5vw, 0.8rem);
  margin: 0.5rem 0 0.7rem;
  line-height: 1.4;
}

/* When open, keep the pane compact — its own list scrolls internally so the
 * overlay never grows past the viewport. */
.bestiary[open] {
  max-height: 82vh;
  display: flex;
  flex-direction: column;
}
.bestiary-grid {
  overflow-y: auto;
  padding-right: 0.3rem;
}

.best-theme {
  color: #b9a9d6;
  font-size: clamp(0.62rem, 1.4vw, 0.75rem);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin: 0.7rem 0 0.35rem;
  border-bottom: 1px solid rgba(233, 121, 249, 0.18);
  padding-bottom: 0.2rem;
}
.best-theme:first-child { margin-top: 0; }

.best-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.4rem 0.6rem;
}

/* Little "shared clutter" caption under a zone heading. */
.best-note {
  color: #7f7496;
  font-size: clamp(0.58rem, 1.3vw, 0.7rem);
  font-style: italic;
  margin: -0.15rem 0 0.35rem;
}

/* The wee separator between a zone's existing content and its NEW additions. */
.best-div {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.5rem 0 0.4rem;
}
.best-div::before,
.best-div::after {
  content: "";
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(125, 255, 176, 0.45), transparent);
}
.best-div span {
  color: #7dffb0;
  font-size: clamp(0.55rem, 1.2vw, 0.68rem);
  letter-spacing: 0.22em;
  text-shadow: 0 0 6px rgba(125, 255, 176, 0.4);
}

.best-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.3rem 0.4rem;
  background: rgba(30, 22, 44, 0.55);
  border: 1px solid rgba(233, 121, 249, 0.18);
  border-radius: 0.45rem;
}
.best-pic {
  font-size: clamp(1.1rem, 3.2vw, 1.5rem);
  line-height: 1;
  filter: drop-shadow(0 1px 2px #000);
}
.best-text { display: flex; flex-direction: column; gap: 0.05rem; min-width: 0; }
.best-name {
  color: #e8e0f2;
  font-size: clamp(0.66rem, 1.5vw, 0.82rem);
  letter-spacing: 0.02em;
}
.best-kind {
  color: #7f7496;
  font-size: clamp(0.55rem, 1.2vw, 0.68rem);
  letter-spacing: 0.04em;
}