/* ── variables ───────────────────────────────────────── */
:root {
  --bg: #05060b;
  --bg-soft: #0c1019;
  --ink: #d8ffe4;
  --cyan: #00e5ff;
  --acid: #c9ff3e;
  --red: #ff395a;
  --gold: #f0a500;
  --line: rgba(0, 229, 255, 0.3);
  --panel: rgba(7, 12, 21, 0.72);
}

body.skin-default {
  --bg: #05060b; --bg-soft: #0c1019; --ink: #d8ffe4;
  --cyan: #00e5ff; --acid: #c9ff3e; --red: #ff395a;
  --line: rgba(0, 229, 255, 0.3); --panel: rgba(7, 12, 21, 0.72);
}
body.skin-poker {
  --bg: #070103; --bg-soft: #1a0508; --ink: #fff2f6;
  --cyan: #ffffff; --acid: #ff415f; --red: #ff2f4d;
  --line: rgba(255, 255, 255, 0.34); --panel: rgba(20, 5, 9, 0.78);
}
body.skin-underwater {
  --bg: #04121a; --bg-soft: #0a2634; --ink: #dcfdff;
  --cyan: #7deaff; --acid: #9dfff6; --red: #29d6d8;
  --line: rgba(125, 234, 255, 0.4); --panel: rgba(5, 30, 42, 0.74);
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background:
    radial-gradient(circle at 15% 15%, rgba(201, 255, 62, 0.16), transparent 40%),
    radial-gradient(circle at 85% 80%, rgba(255, 57, 90, 0.2), transparent 45%),
    linear-gradient(135deg, var(--bg) 0%, #03040a 100%);
  color: var(--ink);
  font-family: 'Space Mono', monospace;
}
body.skin-poker {
  background:
    radial-gradient(circle at 18% 14%, rgba(255, 255, 255, 0.12), transparent 36%),
    radial-gradient(circle at 84% 78%, rgba(255, 47, 77, 0.26), transparent 48%),
    linear-gradient(145deg, #070103 0%, #120407 58%, #070103 100%);
}
body.skin-underwater {
  background:
    radial-gradient(circle at 20% 12%, rgba(157, 255, 246, 0.2), transparent 40%),
    radial-gradient(circle at 82% 82%, rgba(65, 212, 255, 0.2), transparent 48%),
    linear-gradient(165deg, #021017 0%, #062231 58%, #041821 100%);
}

/* ── ambient layers ──────────────────────────────────── */
.crt-noise, .scanlines {
  position: fixed; inset: 0; pointer-events: none; z-index: 4;
}
.chroma-split, .sigil-stream {
  position: fixed; inset: 0; pointer-events: none; z-index: 3;
}
.crt-noise {
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.75' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E");
}
.scanlines {
  background: repeating-linear-gradient(to bottom,
    rgba(255,255,255,0.04) 0, rgba(255,255,255,0.04) 1px,
    transparent 2px, transparent 4px);
  opacity: 0.12;
  mix-blend-mode: soft-light;
}
body.skin-underwater .scanlines {
  background: repeating-linear-gradient(to bottom,
    rgba(157,255,246,0.06) 0, rgba(157,255,246,0.06) 2px,
    transparent 3px, transparent 7px);
  opacity: 0.14;
}
.sigil-stream {
  display: grid;
  place-items: center;
  font-family: 'Orbitron', sans-serif;
  letter-spacing: 0.18em;
  font-size: clamp(0.9rem, 2vw, 1.5rem);
  color: rgba(255,255,255,0.82);
  text-transform: uppercase;
}
body.skin-underwater .sigil-stream { color: rgba(157,255,246,0.84); text-shadow: 0 0 14px rgba(125,234,255,0.28); }
.chroma { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0; }
.chroma.cyan { background: radial-gradient(circle at 40% 60%, rgba(0,229,255,0.18), transparent 56%); }
.chroma.red  { background: radial-gradient(circle at 60% 40%, rgba(255,57,90,0.16), transparent 58%); }
body.skin-poker .chroma.cyan { background: radial-gradient(circle at 40% 60%, rgba(255,255,255,0.16), transparent 56%); }
body.skin-poker .chroma.red  { background: radial-gradient(circle at 60% 40%, rgba(255,47,77,0.22), transparent 58%); }
body.skin-underwater .chroma.cyan { background: radial-gradient(circle at 40% 60%, rgba(125,234,255,0.2), transparent 56%); }
body.skin-underwater .chroma.red  { background: radial-gradient(circle at 60% 40%, rgba(41,214,216,0.22), transparent 58%); }

/* ── glitch/burst/ritual states ──────────────────────── */
body.glitch { animation: glitch-jump 0.2s steps(2) infinite; }
body.glitch .chroma.cyan { animation: chroma-cyan 180ms steps(2) infinite; opacity: 0.42; }
body.glitch .chroma.red  { animation: chroma-red  120ms steps(2) infinite; opacity: 0.36; }
body.glitch .scanlines   { opacity: 0.24; }
body.glitch .hud, body.glitch .node-panel, body.glitch .controls { filter: contrast(1.12) saturate(1.2); }

body.burst .hud, body.burst .node-panel, body.burst .controls { transform: translateX(1px); }
body.burst .chroma.cyan, body.burst .chroma.red { opacity: 0.5; }

body.ritual .hud, body.ritual .node-panel {
  border-color: rgba(201,255,62,0.72);
  box-shadow: 0 0 44px rgba(201,255,62,0.2);
}

body.solved-flash { animation: solved 480ms ease-out 1; }

body.entry-armed .hud, body.entry-armed .node-panel, body.entry-armed .controls {
  border-color: rgba(0,229,255,0.6);
  box-shadow: 0 0 34px rgba(0,229,255,0.2);
}
body.entry-armed .controls span, body.entry-armed .controls button {
  border-color: rgba(0,229,255,0.78);
  color: rgba(224,255,255,0.98);
}
body.entry-armed .chroma.cyan { animation: chroma-cyan 220ms steps(2) infinite; opacity: 0.34; }
body.entry-armed .chroma.red  { animation: chroma-red  190ms steps(2) infinite; opacity: 0.22; }

body.skin-poker.entry-armed .hud,
body.skin-poker.entry-armed .node-panel,
body.skin-poker.entry-armed .controls {
  border-color: rgba(255,255,255,0.7);
  box-shadow: 0 0 38px rgba(255,255,255,0.16);
}
body.skin-underwater.entry-armed .hud,
body.skin-underwater.entry-armed .node-panel,
body.skin-underwater.entry-armed .controls {
  border-color: rgba(125,234,255,0.76);
  box-shadow: 0 0 36px rgba(44,203,224,0.24);
}

/* ── node tier activation responses ─────────────────── */
body.node-tier1 #node-panel {
  border-color: rgba(0,229,255,0.88);
  box-shadow: 0 0 22px rgba(0,229,255,0.42), inset 0 0 10px rgba(0,229,255,0.07);
  transition: none;
}
body.node-tier2 #node-panel {
  border-color: rgba(255,111,132,0.92);
  box-shadow: 0 0 36px rgba(255,111,132,0.52), inset 0 0 16px rgba(255,111,132,0.1);
  transition: none;
}
body.node-tier2 .hud { transform: translateX(-1px) skewX(0.2deg); }
body.node-tier2 .chroma.cyan { opacity: 0.22; }
body.node-tier2 .chroma.red  { opacity: 0.2; }
body.node-tier3 #node-panel {
  border-color: rgba(255,255,255,0.96);
  box-shadow: 0 0 52px rgba(255,255,255,0.32), inset 0 0 22px rgba(255,255,255,0.07);
  transition: none;
}
body.node-tier3 .hud  { transform: translateX(2px) skewX(-0.5deg); }
body.node-tier3 .chroma.cyan { opacity: 0.32; }
body.node-tier3 .chroma.red  { opacity: 0.28; }
body.node-tier3 .scanlines   { opacity: 0.22; }
body.node-tier3 .controls    { letter-spacing: 0.25em; }

body.skin-poker.node-tier1 #node-panel { border-color: rgba(255,255,255,0.92); box-shadow: 0 0 24px rgba(255,255,255,0.32), inset 0 0 10px rgba(255,255,255,0.09); }
body.skin-poker.node-tier2 #node-panel { border-color: rgba(255,47,77,0.94); box-shadow: 0 0 36px rgba(255,47,77,0.52), inset 0 0 16px rgba(255,47,77,0.12); }
body.skin-poker.node-tier3 #node-panel { border-color: rgba(255,255,255,0.96); box-shadow: 0 0 54px rgba(255,255,255,0.3), inset 0 0 22px rgba(255,47,77,0.2); }
body.skin-underwater.node-tier1 #node-panel { border-color: rgba(125,234,255,0.92); box-shadow: 0 0 24px rgba(125,234,255,0.34), inset 0 0 10px rgba(125,234,255,0.08); }
body.skin-underwater.node-tier2 #node-panel { border-color: rgba(95,231,216,0.94); box-shadow: 0 0 36px rgba(95,231,216,0.44), inset 0 0 16px rgba(95,231,216,0.12); }
body.skin-underwater.node-tier3 #node-panel { border-color: rgba(236,255,255,0.96); box-shadow: 0 0 54px rgba(157,255,246,0.34), inset 0 0 22px rgba(125,234,255,0.14); }

/* ── keyframes ───────────────────────────────────────── */
@keyframes glitch-jump {
  0%   { transform: translate(0,0); }
  25%  { transform: translate(-1px,1px); }
  50%  { transform: translate(1px,-1px); }
  75%  { transform: translate(-1px,-1px); }
  100% { transform: translate(0,0); }
}
@keyframes chroma-cyan { 0% { transform: translateX(-3px); } 50% { transform: translateX(2px); } 100% { transform: translateX(-1px); } }
@keyframes chroma-red  { 0% { transform: translateX(3px); } 50% { transform: translateX(-2px); } 100% { transform: translateX(1px); } }
@keyframes solved {
  0%   { filter: brightness(1.6) saturate(1.4); }
  100% { filter: none; }
}
@keyframes target-ping {
  0%   { color: inherit; text-shadow: none; }
  30%  { color: var(--cyan); text-shadow: 0 0 10px rgba(0,229,255,0.9); }
  70%  { color: var(--cyan); text-shadow: 0 0 10px rgba(0,229,255,0.9); }
  100% { color: inherit; text-shadow: none; }
}
@keyframes panel-in {
  from { opacity: 0; transform: translateX(10px); }
  to   { opacity: 1; transform: none; }
}

/* ── canvas ──────────────────────────────────────────── */
#scene-canvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  display: block; cursor: grab;
}
#scene-canvas:active { cursor: grabbing; }

/* ── HUD ─────────────────────────────────────────────── */
.hud {
  position: fixed;
  top: clamp(12px, 3vw, 34px);
  left: clamp(14px, 3vw, 42px);
  z-index: 5;
  max-width: min(480px, 44vw);
  padding: clamp(14px, 2vw, 22px);
  background: var(--panel);
  border: 1px solid rgba(0,229,255,0.28);
  box-shadow: 0 0 0 1px rgba(201,255,62,0.14) inset, 0 0 40px rgba(0,229,255,0.12);
  backdrop-filter: blur(6px);
}
.hud-kicker {
  margin: 0; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--acid); font-size: 0.66rem;
}
.hud h1 {
  margin: 10px 0 10px;
  font-family: 'Orbitron', sans-serif;
  font-size: clamp(1.2rem, 3.2vw, 2.6rem);
  letter-spacing: 0.07em; line-height: 1; text-transform: uppercase;
  text-shadow: 0 0 8px rgba(0,229,255,0.45), 0 0 24px rgba(201,255,62,0.25);
}
.hud-copy { margin: 0; font-size: clamp(0.78rem, 1.1vw, 0.95rem); line-height: 1.5; opacity: 0.9; }

body.skin-poker .hud { border-color: rgba(255,255,255,0.46); box-shadow: 0 0 0 1px rgba(255,47,77,0.22) inset, 0 0 44px rgba(255,47,77,0.22); }
body.skin-poker .hud-kicker { color: #ff95a6; }
body.skin-poker .hud h1 { text-shadow: 0 0 8px rgba(255,255,255,0.52), 0 0 24px rgba(255,47,77,0.28); }
body.skin-underwater .hud { border-color: rgba(125,234,255,0.52); box-shadow: 0 0 0 1px rgba(157,255,246,0.2) inset, 0 0 44px rgba(44,203,224,0.24); }
body.skin-underwater .hud-kicker { color: #9dfff6; }
body.skin-underwater .hud h1 { text-shadow: 0 0 8px rgba(125,234,255,0.52), 0 0 26px rgba(157,255,246,0.28); }

/* ── node / puzzle panel ─────────────────────────────── */
.node-panel {
  position: fixed;
  right: clamp(14px, 3vw, 42px);
  top: clamp(14px, 5vh, 72px);
  width: min(340px, calc(100vw - 28px));
  max-height: calc(100vh - 130px);
  overflow-y: auto;
  z-index: 5;
  padding: 16px;
  background: var(--panel);
  border: 1px solid rgba(255,57,90,0.35);
  box-shadow: 0 0 35px rgba(255,57,90,0.12);
  backdrop-filter: blur(6px);
}
.panel-label {
  margin: 0; font-size: 0.68rem; letter-spacing: 0.15em; color: var(--red);
}
.node-panel h2 {
  margin: 8px 0 12px;
  font-family: 'Orbitron', sans-serif;
  text-transform: uppercase;
  font-size: 1.05rem;
}
.node-panel p {
  margin: 0; font-size: 0.86rem; line-height: 1.5;
  overflow-wrap: break-word; word-break: break-all;
}

body.skin-poker .node-panel { border-color: rgba(255,255,255,0.42); box-shadow: 0 0 40px rgba(255,47,77,0.18); }
body.skin-poker .panel-label { color: #ff4c66; }
body.skin-underwater .node-panel { border-color: rgba(125,234,255,0.48); box-shadow: 0 0 38px rgba(44,203,224,0.22); }
body.skin-underwater .panel-label { color: #7deaff; }

/* ── gate UI sections ────────────────────────────────── */
.gate-ui { display: none; animation: panel-in 260ms ease-out; }
.gate-ui.active { display: block; }
.gate-ui-msg {
  font-size: 0.84rem; line-height: 1.55; opacity: 0.78;
  margin: 4px 0; word-break: normal;
}
.gate-solved-msg {
  font-family: 'Orbitron', sans-serif; font-size: 0.72rem;
  letter-spacing: 0.18em; color: var(--acid);
  text-shadow: 0 0 10px rgba(201,255,62,0.5);
  margin: 0 0 10px;
}
.stage-prompt {
  margin: 0 0 12px; font-size: 0.86rem; line-height: 1.55;
  opacity: 0.92; word-break: normal;
}
.riddle-body { font-style: italic; line-height: 1.7; letter-spacing: 0.02em; margin-bottom: 14px; }
.stage-hint {
  margin: 12px 0 0; font-size: 0.74rem; letter-spacing: 0.04em;
  color: rgba(201,255,62,0.78);
}
body.mode-hard [data-easy] { display: none; }
.stage-feedback {
  margin: 10px 0 0; font-size: 0.82rem; min-height: 1.2em; letter-spacing: 0.06em;
}
.stage-feedback.bad  { color: var(--red); }
.stage-feedback.good { color: var(--acid); }

/* ── answer forms & buttons ──────────────────────────── */
.answer-form {
  display: flex; gap: 6px; justify-content: center; margin-top: 10px; flex-wrap: wrap;
}
.answer-form input {
  background: rgba(0,0,0,0.5);
  border: 1px solid rgba(0,229,255,0.4);
  color: var(--ink);
  font-family: 'Orbitron', sans-serif;
  font-size: 1rem;
  letter-spacing: 0.18em;
  padding: 8px 12px;
  text-align: center;
  text-transform: uppercase;
  width: clamp(120px, 50%, 200px);
}
.answer-form input:focus { outline: none; border-color: var(--acid); box-shadow: 0 0 12px rgba(201,255,62,0.3); }
.answer-form button, .ghost-btn {
  background: rgba(0,229,255,0.1);
  color: var(--ink);
  border: 1px solid rgba(0,229,255,0.5);
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  padding: 8px 12px;
  cursor: pointer;
  text-transform: uppercase;
}
.answer-form button:hover, .ghost-btn:hover { background: rgba(0,229,255,0.18); }
.ghost-btn.big   { font-size: 0.88rem; padding: 12px 18px; }
.ghost-btn.small { font-size: 0.64rem; padding: 5px 8px; }
.ghost-btn.danger { border-color: rgba(255,57,90,0.6); color: #ffd6dd; }
.ghost-btn.danger:hover { background: rgba(255,57,90,0.2); }

/* ── Gate 01 — static field ──────────────────────────── */
.static-field {
  font-family: 'Space Mono', monospace;
  font-size: 0.72rem;
  line-height: 1.5;
  letter-spacing: 0.02em;
  color: rgba(216,255,228,0.42);
  user-select: none;
  height: 152px;
  overflow: hidden;
  position: relative;
  text-align: left;
  padding: 5px 8px;
  border: 1px dashed rgba(0,229,255,0.18);
  cursor: crosshair;
}
.static-field .ch { display: inline-block; }
.static-field .ch.target.ping { animation: target-ping 900ms ease-in-out 1; }
.static-field .ch.target.revealed { color: var(--cyan); font-weight: 700; }
body.mode-hard .static-field .ch.target.revealed { color: rgba(216,255,228,0.42); font-weight: 400; }
.static-field .ch.target.revealed:hover { text-shadow: 0 0 6px rgba(0,229,255,0.6); }

/* ── Gate 02 — cipher ────────────────────────────────── */
.cipher-text {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.7rem;
  letter-spacing: 0.36em;
  margin: 14px 0;
  color: var(--cyan);
  text-shadow: 0 0 14px rgba(0,229,255,0.45);
  text-align: center;
}

/* ── Gate 03 — sequence pads ─────────────────────────── */
.seq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
  width: min(220px, 80%);
  margin: 8px auto;
  aspect-ratio: 1 / 1;
}
.seq-pad {
  border: 1px solid rgba(0,229,255,0.4);
  background: rgba(6,10,18,0.7);
  cursor: pointer;
  transition: background 80ms, box-shadow 80ms;
}
.seq-pad[data-pad="0"] { border-color: rgba(0,229,255,0.65); }
.seq-pad[data-pad="1"] { border-color: rgba(255,57,90,0.65); }
.seq-pad[data-pad="2"] { border-color: rgba(201,255,62,0.65); }
.seq-pad[data-pad="3"] { border-color: rgba(240,165,0,0.65); }
.seq-pad.lit[data-pad="0"] { background: rgba(0,229,255,0.55); box-shadow: 0 0 28px rgba(0,229,255,0.5); }
.seq-pad.lit[data-pad="1"] { background: rgba(255,57,90,0.55); box-shadow: 0 0 28px rgba(255,57,90,0.5); }
.seq-pad.lit[data-pad="2"] { background: rgba(201,255,62,0.55); box-shadow: 0 0 28px rgba(201,255,62,0.5); }
.seq-pad.lit[data-pad="3"] { background: rgba(240,165,0,0.55); box-shadow: 0 0 28px rgba(240,165,0,0.5); }
.seq-controls { display: flex; gap: 10px; align-items: center; justify-content: center; margin-top: 10px; flex-wrap: wrap; }
.seq-status { font-size: 0.7rem; letter-spacing: 0.14em; color: rgba(216,255,228,0.6); }

/* ── Gate 04 — pulse vis ─────────────────────────────── */
.pulse-vis {
  height: 50px; margin: 10px auto;
  display: flex; gap: 8px; justify-content: center; align-items: center;
}
.pulse-vis .dot {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(0,229,255,0.18);
  border: 1px solid rgba(0,229,255,0.38);
  transition: all 120ms;
}
.pulse-vis .dot.on {
  background: var(--cyan);
  box-shadow: 0 0 18px rgba(0,229,255,0.7);
  transform: scale(1.3);
}
body.mode-hard .pulse-vis { opacity: 0; pointer-events: none; }

/* ── Gate 06 — apex display ──────────────────────────── */
.apex-display { display: flex; gap: 6px; justify-content: center; margin: 12px 0; flex-wrap: wrap; }
.apex-cell {
  display: inline-grid; place-items: center;
  width: 38px; height: 46px;
  font-family: 'Orbitron', sans-serif; font-size: 1.1rem;
  border: 1px solid rgba(0,229,255,0.5);
  background: rgba(6,10,18,0.6);
  color: var(--cyan);
  text-shadow: 0 0 10px rgba(0,229,255,0.45);
}
body.mode-hard .apex-cell { color: rgba(216,255,228,0.28); text-shadow: none; }

/* ── fragment inventory ──────────────────────────────── */
.inventory {
  position: fixed;
  left: clamp(14px, 3vw, 42px);
  bottom: 70px;
  z-index: 5;
  padding: 10px 14px;
  background: var(--panel);
  border: 1px solid rgba(255,57,90,0.4);
  box-shadow: 0 0 30px rgba(255,57,90,0.12);
}
.inv-label { margin: 0 0 6px; font-size: 0.6rem; letter-spacing: 0.18em; color: var(--red); }
.inv-slots { display: flex; gap: 6px; }
.inv-slot {
  display: inline-grid; place-items: center;
  width: 26px; height: 26px;
  font-family: 'Orbitron', sans-serif; font-weight: 700;
  border: 1px solid rgba(255,57,90,0.28);
  color: rgba(216,255,228,0.32);
  background: rgba(8,12,18,0.6);
}
.inv-slot.filled { border-color: var(--acid); color: var(--acid); text-shadow: 0 0 8px rgba(201,255,62,0.6); }

/* ── reward overlay ──────────────────────────────────── */
.reward-phrase {
  font-family: 'Orbitron', sans-serif;
  font-size: 1.4rem;
  letter-spacing: 0.28em;
  color: var(--gold);
  text-shadow: 0 0 18px rgba(240,165,0,0.5);
  margin: 14px 0 22px;
  word-break: break-all;
}

/* ── secret/reward overlay ───────────────────────────── */
.secret {
  position: fixed; inset: 0; z-index: 8;
  display: none; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(2,4,8,0.92);
}
.secret.active { display: flex; }
.secret-box {
  width: min(480px, 100%);
  border: 1px solid rgba(201,255,62,0.66);
  padding: 22px;
  background: linear-gradient(145deg, rgba(7,12,21,0.95), rgba(5,8,15,0.95));
  box-shadow: 0 0 46px rgba(201,255,62,0.18);
  text-align: center;
}
.secret-label { margin: 0; font-size: 0.7rem; color: var(--acid); letter-spacing: 0.15em; }
.secret-box h2 { margin: 8px 0; font-family: 'Orbitron', sans-serif; }
.secret-box p { margin: 0 0 16px; word-break: normal; }
.secret-box button {
  border: 1px solid rgba(0,229,255,0.5);
  background: rgba(0,229,255,0.12);
  color: var(--ink); padding: 8px 18px;
  font-family: inherit; font-size: 0.8rem; cursor: pointer; letter-spacing: 0.12em;
}
body.skin-underwater .secret-box { border-color: rgba(125,234,255,0.74); box-shadow: 0 0 50px rgba(44,203,224,0.26); background: linear-gradient(145deg, rgba(5,30,42,0.96), rgba(3,21,31,0.96)); }
body.skin-underwater .secret-label { color: #9dfff6; }
body.skin-underwater .secret-box button { border-color: rgba(125,234,255,0.62); background: rgba(125,234,255,0.14); }
body.skin-poker .secret-box { border-color: rgba(255,255,255,0.74); box-shadow: 0 0 50px rgba(255,47,77,0.24); }
body.skin-poker .secret-label { color: #ff9aac; }
body.skin-poker .secret-box button { border-color: rgba(255,255,255,0.62); background: rgba(255,47,77,0.14); }

/* ── footer controls ─────────────────────────────────── */
.controls {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 16px; z-index: 5;
  display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
  width: min(92vw, 640px);
}
.controls span, .controls button, .pill {
  border: 1px solid var(--line);
  background: rgba(6,11,20,0.68);
  padding: 6px 10px;
  font-size: 0.66rem; letter-spacing: 0.14em;
  font-family: inherit; color: inherit; cursor: default;
}
#mute-btn { cursor: pointer; }
body.skin-poker .controls span, body.skin-poker .controls button {
  background: rgba(28,7,11,0.72); border-color: rgba(255,255,255,0.44);
}
body.skin-underwater .controls span, body.skin-underwater .controls button {
  background: rgba(5,36,49,0.7); border-color: rgba(125,234,255,0.46);
}

/* ── admin trigger ───────────────────────────────────── */
#admin-trigger {
  position: fixed; right: 4px; bottom: 4px;
  width: 10px; height: 10px; z-index: 9;
  padding: 0; border: 0;
  background: rgba(255,255,255,0.08); cursor: pointer;
}
#admin-trigger:hover { background: rgba(255,57,90,0.6); }

/* ── admin panel ─────────────────────────────────────── */
.admin-panel {
  position: fixed; inset: 0; z-index: 11;
  background: rgba(2,4,8,0.86);
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.admin-panel.open { display: flex; }
.admin-inner {
  width: min(440px, 100%);
  background: rgba(8,12,20,0.96);
  border: 1px solid rgba(255,57,90,0.5);
  box-shadow: 0 0 60px rgba(255,57,90,0.18);
  padding: 18px;
}
.admin-header {
  display: flex; justify-content: space-between; align-items: center;
  font-family: 'Orbitron', sans-serif; letter-spacing: 0.2em; font-size: 0.82rem;
  color: var(--red); margin-bottom: 14px;
}
.admin-header button { background: transparent; border: 0; color: var(--ink); font-size: 1.4rem; cursor: pointer; }
.admin-row {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 12px; font-size: 0.8rem; letter-spacing: 0.08em;
}
.admin-row label { color: rgba(216,255,228,0.7); letter-spacing: 0.14em; font-size: 0.72rem; }
.admin-toggle { display: flex; border: 1px solid rgba(0,229,255,0.4); }
.admin-toggle button {
  background: transparent; color: var(--ink); border: 0;
  padding: 6px 12px; font-family: 'Space Mono', monospace; font-size: 0.7rem; cursor: pointer;
}
.admin-toggle button.active { background: rgba(0,229,255,0.18); color: var(--cyan); }
#admin-jump {
  background: rgba(0,0,0,0.5); color: var(--ink);
  border: 1px solid rgba(0,229,255,0.4);
  padding: 6px 8px; font-family: inherit; font-size: 0.74rem;
}
.admin-hint { margin: 14px 0 0; font-size: 0.66rem; color: rgba(216,255,228,0.42); letter-spacing: 0.14em; }

/* ── responsive ──────────────────────────────────────── */
@media (max-width: 860px) {
  .hud { max-width: calc(100vw - 28px); }
  .node-panel { right: 14px; top: auto; bottom: 130px; max-height: 46vh; width: calc(100vw - 28px); }
  .inventory { left: 14px; right: 14px; bottom: 70px; width: auto; }
  .controls { width: calc(100vw - 20px); bottom: 8px; }
}