/* ===================================================================
   ESCAPE ROOM: SPLDV — stylesheet
   Palet tetap: merah=x, biru=y, kuning=konstanta, hijau=terpenuhi, abu=data gelang
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;700;900&family=Rubik:wght@400;500;700&family=Space+Mono:wght@400;700&display=swap');

:root{
  --x-color:#ff4d5e;
  --y-color:#3fa9ff;
  --k-color:#ffd23f;
  --ok-color:#33e08a;
  --recorded-color:#9aa3ad;
  --bad-color:#ff4d5e;

  --bg-0:#05070c;
  --bg-1:#0b0f18;
  --bg-2:#121826;
  --bg-3:#1a2233;
  --panel:#0e1420ee;
  --line:#2a3446;
  --text-hi:#eef2f9;
  --text-lo:#93a0b4;
  --hologram:#5ee6ff;
  --hologram-dim:#5ee6ff55;
  --hud-fade-strong: rgba(11,15,24,.93);
  --hud-fade-none: rgba(11,15,24,0);
  --line-strong: #3a4863;

  --font-display: 'Orbitron', sans-serif;
  --font-body: 'Rubik', sans-serif;
  --font-mono: 'Space Mono', monospace;

  --radius: 14px;
  --hero-overlay: rgba(5,7,12,.4);
  --hero-title-1: rgba(5,7,12,.32);
  --hero-title-2: rgba(5,7,12,.5);
  --hero-title-3: rgba(5,7,12,.82);
  --hero-title-4: rgba(5,7,12,.94);
}

:root[data-theme="light"]{
  --x-color:#e0304a;
  --y-color:#1f7fd1;
  --k-color:#c98a00;
  --ok-color:#1f9d5f;
  --recorded-color:#6b7480;
  --bad-color:#e0304a;

  --bg-0:#eef1f6;
  --bg-1:#ffffff;
  --bg-2:#f3f5f9;
  --bg-3:#e6e9f0;
  --panel:#ffffffee;
  --line:#d7dce4;
  --text-hi:#1a2233;
  --text-lo:#5b6472;
  --hologram:#0e7490;
  --hologram-dim:#0e749033;
  --hud-fade-strong: rgba(238,241,246,.93);
  --hud-fade-none: rgba(238,241,246,0);
  --line-strong: #aab2bf;
  --hero-overlay: rgba(238,241,246,.72);
  --hero-title-1: rgba(238,241,246,.3);
  --hero-title-2: rgba(238,241,246,.5);
  --hero-title-3: rgba(238,241,246,.85);
  --hero-title-4: rgba(238,241,246,.96);
}

*{box-sizing:border-box;}
html{ background:var(--bg-0); }
body{
  margin:0; padding:0; height:100%;
  /* no background here on purpose: body doesn't establish its own stacking
     context, so an opaque background here would paint OVER fixed elements
     that use a negative z-index (.bg-hero/.bg-grid/.bg-vignette), hiding
     them completely. html's background covers the same area underneath. */
  color:var(--text-hi);
  font-family:var(--font-body);
  overflow-x:hidden;
}
#app{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  position:relative;
}
h1,h2,h3,.display{ font-family:var(--font-display); letter-spacing:.02em; }
button{ font-family:var(--font-body); cursor:pointer; }
input{ font-family:var(--font-mono); }

/* ---------- background texture ---------- */
.bg-grid{
  position:fixed; inset:0; z-index:-2;
  background-image:
    linear-gradient(var(--line) 1px, transparent 1px),
    linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 44px 44px;
  opacity:.18;
  mask-image: radial-gradient(circle at 50% 30%, black, transparent 80%);
}
.bg-vignette{
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background: radial-gradient(ellipse at 50% 0%, transparent 0%, var(--bg-0) 85%);
}
.bg-hero{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(180deg, var(--hero-title-1) 0%, var(--hero-title-2) 40%, var(--hero-title-3) 78%, var(--hero-title-4) 100%),
    url('../assets/img/background.png');
  background-size: cover, cover;
  background-position: center, center 55%;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- generic layout helpers ---------- */
.screen{
  flex:1; display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  padding:32px 20px; min-height:100vh;
  animation: fadeIn .5s ease;
}
@keyframes fadeIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;} }

.card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:var(--radius);
  padding:28px;
  backdrop-filter: blur(6px);
  box-shadow: 0 20px 60px #000a;
}

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:var(--bg-3); color:var(--text-hi);
  border:1px solid var(--line); border-radius:10px;
  padding:12px 22px; font-size:15px; font-weight:600;
  transition:.15s; user-select:none;
}
.btn:hover{ border-color:var(--hologram); box-shadow:0 0 0 3px var(--hologram-dim); transform:translateY(-1px); }
.btn:active{ transform:translateY(0); }
.btn-primary{ background:linear-gradient(135deg,#1c6fb0,#144a7a); border-color:#2a86d1; color:#f4f9ff; }
.btn-primary:hover{ box-shadow:0 0 0 3px #2a86d155, 0 0 24px #2a86d155; }
.btn-ok{ background:linear-gradient(135deg,#1f9d5f,#146b40); border-color:#2fbf77; color:#f0fff6; }
.btn-warn{ background:linear-gradient(135deg,#9d6a1f,#6b4a14); border-color:#d19a2a; color:#fff8ec; }
.btn-ghost{ background:transparent; }
.btn:disabled{ opacity:.35; cursor:not-allowed; transform:none; box-shadow:none; }
.btn-sm{ padding:7px 14px; font-size:13px; }

.pill{
  display:inline-block; padding:3px 10px; border-radius:999px;
  font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border:1px solid var(--line); color:var(--text-lo);
}

/* ---------- TITLE SCREEN ---------- */
.title-screen{ text-align:center; gap:18px; display:flex; flex-direction:column; align-items:center; }
.title-logo{
  font-size:clamp(26px,5vw,48px); font-weight:900;
  text-transform:uppercase; white-space:pre-line;
  background:linear-gradient(135deg, var(--x-color), var(--hologram) 50%, var(--y-color));
  -webkit-background-clip:text; background-clip:text; color:transparent;
  text-shadow:0 0 60px #5ee6ff33;
  margin:0; max-width:680px; line-height:1.18;
}
.title-sub{ color:var(--text-lo); font-size:16px; margin-top:2px; letter-spacing:.12em; text-transform:uppercase; font-weight:600; }
.title-tagline{ color:var(--text-hi); font-size:14.5px; line-height:1.55; opacity:.88; }
.title-actions{ display:flex; gap:14px; margin-top:18px; flex-wrap:wrap; justify-content:center; }

/* ---------- FORM (setup) ---------- */
.form-screen .card{ width:min(560px,92vw); }
.field{ margin-bottom:18px; }
.field label{ display:block; font-size:13px; color:var(--text-lo); margin-bottom:6px; font-weight:600;}
.field input[type=text]{
  width:100%; padding:11px 14px; border-radius:8px; border:1px solid var(--line);
  background:var(--bg-1); color:var(--text-hi); font-size:15px;
}
.field input:focus{ outline:none; border-color:var(--hologram); }
.role-row{ display:flex; gap:10px; align-items:center; margin-bottom:8px;}
.role-row .role-tag{ width:110px; font-size:12px; color:var(--text-lo); font-weight:700;}
.diff-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:10px; }
.diff-card{
  border:1px solid var(--line); border-radius:10px; padding:14px 10px; text-align:center;
  cursor:pointer; transition:.15s; background:var(--bg-1);
}
.diff-card b{ display:block; font-family:var(--font-display); font-size:15px; margin-bottom:4px;}
.diff-card small{ color:var(--text-lo); font-size:11px; }
.diff-card.selected{ border-color:var(--hologram); box-shadow:0 0 0 3px var(--hologram-dim); background:var(--bg-2);}

/* ---------- HUD ---------- */
.hud{
  position:fixed; top:0; left:0; right:0; z-index:50;
  display:flex; align-items:center; justify-content:space-between;
  padding:10px 22px; background:linear-gradient(var(--hud-fade-strong), var(--hud-fade-none));
  font-family:var(--font-mono); font-size:13px;
}
.hud-left, .hud-right{ display:flex; align-items:center; gap:14px; }
.hud-chapter{ color:var(--text-lo); }
.hud-chapter b{ color:var(--text-hi); }
.lives{ display:flex; gap:4px; }
.life-dot{ width:14px; height:14px; border-radius:3px; background:var(--x-color); box-shadow:0 0 8px #ff4d5e88; transform:rotate(45deg); }
.life-dot.lost{ background:transparent; border:1px solid var(--line); box-shadow:none; }
.timer{
  padding:4px 12px; border-radius:6px; border:1px solid var(--line); background:var(--bg-2);
  font-weight:700; min-width:64px; text-align:center;
}
.timer.low{ color:var(--x-color); border-color:var(--x-color); animation:pulse 1s infinite; }
.timer.off{ color:var(--text-lo); }
@keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.4;} }

.wristband-btn{
  display:flex; align-items:center; gap:8px; padding:7px 14px;
  border-radius:999px; border:1px solid var(--recorded-color); background:#9aa3ad14;
  color:var(--recorded-color); font-weight:700; font-size:12px;
}
.wristband-btn .dot{ width:8px; height:8px; border-radius:50%; background:var(--recorded-color); }
.wristband-btn.has-new .dot{ background:var(--ok-color); box-shadow:0 0 8px var(--ok-color); animation:pulse 1.2s infinite;}

/* ---------- ROOM / CHAPTER SCREEN ---------- */
.room{
  min-height:100vh; width:100%; padding:84px 20px 40px;
  display:flex; flex-direction:column; align-items:center; gap:22px;
}
.room-header{ text-align:center; max-width:720px; }
.room-kicker{ color:var(--text-lo); font-size:12px; letter-spacing:.15em; text-transform:uppercase; }
.room-title{ font-size:clamp(22px,3.6vw,34px); margin:6px 0 4px; }
.room-focus{ color:var(--hologram); font-size:14px; }

.puzzle-track{ display:flex; gap:10px; align-items:center; margin:6px 0 4px; }
.puzzle-step{
  width:34px; height:34px; border-radius:50%; border:1px solid var(--line);
  display:flex; align-items:center; justify-content:center; font-family:var(--font-mono); font-size:13px;
  color:var(--text-lo); background:var(--bg-1);
}
.puzzle-step.active{ border-color:var(--hologram); color:var(--hologram); box-shadow:0 0 0 4px var(--hologram-dim); }
.puzzle-step.done{ border-color:var(--ok-color); color:var(--ok-color); background:#33e08a14; }
.puzzle-track .line{ width:26px; height:1px; background:var(--line); }

/* puzzle panel = "Layar Pemain" */
.puzzle-panel{ width:min(880px,94vw); display:flex; flex-direction:column; gap:18px; }

.instr-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:1px;
  background:var(--line); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;
}
.instr-cell{ background:var(--panel); padding:14px 16px; }
.instr-cell .lbl{ font-size:10px; letter-spacing:.12em; color:var(--hologram); font-weight:700; margin-bottom:6px; }
.instr-cell .val{ font-size:13.5px; color:var(--text-hi); line-height:1.45; }
@media (max-width: 760px){ .instr-grid{ grid-template-columns:1fr 1fr; } }

.stage{
  background:radial-gradient(ellipse at 50% -10%, var(--bg-3), var(--bg-1) 70%);
  border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; min-height:500px; /* fixed footprint so every puzzle's card is the
    same size on screen — small puzzles just sit centered in the same box instead
    of shrinking the whole card around themselves */
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  position:relative; overflow:hidden;
}
@media (max-width:700px){ .stage{ min-height:400px; } }
.stage::before{
  content:""; position:absolute; inset:0;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size:30px 30px; opacity:.12; pointer-events:none;
}
.stage-inner{ position:relative; z-index:1; width:100%; display:flex; flex-direction:column; align-items:center; gap:16px;}

.feedback-msg{
  font-size:15px; padding:12px 18px; border-radius:8px; text-align:center; max-width:720px;
  border:1px solid var(--line); background:var(--bg-1); color:var(--text-lo);
  align-self:center; /* .game-card got much wider than this box's max-width — without
    this it sat stuck to the left edge instead of centered under the stage */
}
.feedback-msg.ok{ color:var(--ok-color); border-color:var(--ok-color); background:#33e08a10; }
.feedback-msg.bad{ color:var(--bad-color); border-color:var(--bad-color); background:#ff4d5e10; }
.feedback-msg.warn{ color:var(--k-color); border-color:var(--k-color); background:#ffd23f10; }

.answer-row{ display:flex; gap:10px; align-items:center; justify-content:center; flex-wrap:wrap; }
.answer-input{
  padding:12px 14px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--bg-0); color:var(--hologram); font-size:18px; text-align:center;
  width:120px;
}
.answer-input:focus{ outline:none; border-color:var(--hologram); box-shadow:0 0 0 3px var(--hologram-dim); }
.answer-input.unit-wide{ width:220px; text-align:left; }
.answer-label{ font-size:12px; color:var(--text-lo); }
.letter-auto-badge{
  font-family:var(--font-mono); font-size:15px; color:var(--text-lo); font-style:italic;
  padding:8px 16px; border-radius:8px; border:1px solid var(--line); background:var(--bg-1);
}
.letter-auto-badge.assigned{
  color:var(--hologram); font-style:normal; font-weight:800; border-color:var(--hologram);
  background:var(--bg-2); box-shadow:0 0 0 3px var(--hologram-dim);
}
.answer-group{ display:flex; flex-direction:column; gap:4px; align-items:center; }

/* ---------- keypad — turns bare number entry into a pressable console ---------- */
.keypad{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.keypad-unit{ font-size:10px; color:var(--text-lo); text-transform:uppercase; letter-spacing:.08em; }
.keypad-display{
  width:150px; padding:10px 12px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--bg-0); color:var(--hologram); font-family:var(--font-mono); font-size:20px;
  text-align:center; letter-spacing:.03em;
}
.keypad-display.placeholder{ color:var(--text-lo); }
.keypad-grid{ display:grid; grid-template-columns:repeat(3,44px); gap:6px; }
.keypad-btn{
  width:44px; height:40px; border-radius:8px; border:1px solid var(--line-strong);
  background:var(--bg-2); color:var(--text-hi); font-family:var(--font-mono); font-size:16px; font-weight:700;
  transition:.12s;
}
.keypad-btn:hover{ border-color:var(--hologram); background:var(--bg-3); }
.keypad-btn:active{ transform:scale(.94); }
.keypad-btn.keypad-fn{ color:var(--hologram); }

.hint-bar{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.hint-box{
  width:min(640px,92vw); font-size:13px; color:var(--text-lo);
  background:var(--bg-1); border:1px dashed var(--line); border-radius:8px; padding:10px 14px;
}

/* ---------- vending machine (equationFill w/ Saldo/Total cabinet) ---------- */
.vending-row{ display:flex; gap:22px; flex-wrap:wrap; justify-content:center; }
.vending-machine{
  display:flex; flex-direction:column; align-items:center; gap:12px; width:220px;
  padding:18px 16px; border-radius:16px; border:3px solid var(--line-strong);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow:0 8px 18px #0006, inset 0 0 0 1px rgba(255,255,255,.03);
}
.vending-header{ display:flex; align-items:center; gap:8px; }
.vending-icon{ font-size:22px; }
.vending-title{ font-weight:800; font-size:14px; color:var(--text-hi); }
.vending-saldo, .vending-total{
  font-family:var(--font-mono); font-weight:800; font-size:15px; color:var(--hologram);
  text-shadow:0 0 10px var(--hologram-dim);
}
.vending-tickets{ display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; padding:6px 0; min-height:100px; }
.vending-ticket{
  width:38px; height:92px; border-radius:8px; position:relative;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.28), 0 3px 6px #0005;
}
.vending-ticket::before{
  content:""; position:absolute; left:50%; top:10px; bottom:10px; width:0;
  border-left:2px dashed rgba(255,255,255,.4); transform:translateX(-50%);
}
.vending-slot-wrap{ display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; }
.vending-slot{
  width:100%; display:flex; justify-content:center; padding:8px;
  background:var(--bg-0); border-radius:8px; box-shadow:inset 0 0 10px #0008, inset 0 0 0 1px var(--line);
}
.vending-slot-input{
  width:90px; text-align:center; background:transparent; border:none; padding:6px;
  color:var(--hologram); font-size:18px;
}
.vending-slot-input:focus{ outline:none; }

/* ---------- kiosk / Mesin Kasir (multiInput recall puzzles) ---------- */
.kiosk{
  display:flex; flex-direction:column; align-items:center; gap:12px; width:min(340px,92vw);
  padding:18px 16px; border-radius:16px; border:2px solid var(--line-strong);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow:0 8px 18px #0006, inset 0 0 0 1px rgba(255,255,255,.03);
}
.kiosk-header{ display:flex; align-items:center; gap:8px; }
.kiosk-icon{ font-size:20px; }
.kiosk-title{ font-weight:800; font-size:14px; color:var(--text-hi); }
.kiosk-receipt{
  width:100%; background:var(--bg-0); border-radius:8px 8px 0 0; padding:12px 14px;
  box-shadow:inset 0 0 10px #0008, inset 0 0 0 1px var(--line);
  font-family:var(--font-mono); font-size:12.5px; color:var(--hologram);
  display:flex; flex-direction:column; gap:6px;
}
.kiosk-receipt::after{
  content:""; display:block; height:8px; margin:0 -14px -12px;
  background:
    linear-gradient(135deg, var(--bg-1) 25%, transparent 25%) 0 0/10px 10px,
    linear-gradient(225deg, var(--bg-1) 25%, transparent 25%) 0 0/10px 10px;
  background-color: var(--bg-0);
}
.kiosk-receipt-line{ text-align:center; text-shadow:0 0 10px var(--hologram-dim); }
.kiosk-receipt-line.muted{ color:var(--text-lo); font-style:italic; text-shadow:none; }

.kiosk-ticket-row{ display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.kiosk-ticket{
  display:flex; flex-direction:column; align-items:center; gap:4px; width:78px; padding:10px 6px;
  border-radius:10px; border:2px solid var(--line-strong); background:var(--bg-0);
  cursor:pointer; user-select:none; transition:.15s;
  box-shadow:0 3px 6px #0004;
}
.kiosk-ticket:hover{ transform:translateY(-2px); box-shadow:0 5px 10px #0006; }
.kiosk-ticket:active{ transform:translateY(0); }
.kiosk-ticket-icon{ font-size:18px; }
.kiosk-ticket-label{ font-size:10.5px; color:var(--text-lo); text-align:center; }
.kiosk-ticket-val{ font-family:var(--font-mono); font-weight:800; font-size:15px; color:var(--text-hi); }
.kiosk-ticket.scanned{
  opacity:.35; cursor:default; transform:scale(.92);
  box-shadow:inset 0 0 0 2px var(--ok-color);
}
.kiosk-ticket.scanned::after{ content:"✓ masuk kasir"; font-size:9px; color:var(--ok-color); }
.kiosk-hint{ font-size:11px; color:var(--text-lo); text-align:center; }
.kiosk-total{
  font-family:var(--font-mono); font-weight:800; font-size:16px; color:var(--hologram);
  text-shadow:0 0 10px var(--hologram-dim); transition:transform .15s;
}
.kiosk-total.bump{ transform:scale(1.15); }

/* ---------- reactor panel (multiInput w/ cfg.exchange) ---------- */
.reactor-panel{
  display:flex; flex-direction:column; align-items:center; gap:14px; width:min(360px,92vw);
  padding:18px 16px; border-radius:16px; border:1px solid var(--line-strong);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow:0 8px 18px #0006, inset 0 0 0 1px rgba(255,255,255,.03);
}
.reactor-header{ display:flex; align-items:center; gap:8px; }
.reactor-icon{ font-size:20px; }
.reactor-title{ font-weight:800; font-size:14px; color:var(--text-hi); }
.reactor-items{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap; justify-content:center;
  padding:14px; background:var(--bg-0); border-radius:8px; box-shadow:inset 0 0 10px #0008, inset 0 0 0 1px var(--line);
  width:100%;
}
.reactor-item-group{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; }
.reactor-icon-item{ font-size:22px; transition:transform .3s, opacity .3s; display:inline-block; }
.reactor-icon-item.poof{ transform:scale(1.6) rotate(15deg); opacity:0; }
.reactor-icon-item.new-coin{ animation:reactorPop .35s ease; }
@keyframes reactorPop{ from{ transform:scale(0); opacity:0; } to{ transform:scale(1); opacity:1; } }
.reactor-total{ font-family:var(--font-mono); font-weight:800; font-size:17px; color:var(--k-color); }
.reactor-swap-btn{ font-size:13px; }
.reactor-swap-btn:disabled{ opacity:.7; }
.gold-coin{
  display:inline-flex; align-items:center; justify-content:center; flex-shrink:0;
  width:24px; height:24px; border-radius:50%; transition:transform .3s, opacity .3s;
  background:radial-gradient(circle at 32% 28%, #fff6cf, #ffd23f 45%, #b8860b 100%);
  box-shadow: inset 0 0 0 2px #8a6100, inset 1px 1px 2px #fff9dd99, 0 2px 3px #0006;
}
.gold-coin.lg{ width:34px; height:34px; }
.gold-coin.new-coin{ animation:reactorPop .35s ease; }
.gold-coin-stack{ display:inline-flex; align-items:center; gap:6px; }
.gold-coin-stack .gold-count{ font-family:var(--font-mono); font-weight:800; color:var(--k-color); }

/* holographic math tag */
.mathline{ font-family:var(--font-mono); font-size:17px; color:var(--hologram); text-shadow:0 0 12px var(--hologram-dim); }
.mathline .x{ color:var(--x-color); }
.mathline .y{ color:var(--y-color); }
.mathline .k{ color:var(--k-color); }
.mathline .ok{ color:var(--ok-color); }

/* ---------- SCALE component ---------- */
.scale{ display:flex; flex-direction:column; align-items:center; gap:10px; }
.scale-beam-wrap{ position:relative; width:480px; max-width:94vw; height:230px; }
.scale-base{
  position:absolute; left:50%; bottom:0; width:150px; height:14px; transform:translateX(-50%);
  background:linear-gradient(180deg, var(--line-strong), var(--bg-3)); border-radius:6px; box-shadow:0 3px 6px #0006;
}
.scale-pole{
  position:absolute; left:50%; bottom:14px; width:14px; height:130px; transform:translateX(-50%);
  background:linear-gradient(90deg, var(--bg-3), var(--line-strong) 45%, var(--bg-3)); border-radius:5px 5px 0 0;
  box-shadow:0 2px 6px #0006;
}
.scale-fulcrum{
  position:absolute; left:50%; bottom:142px; width:0; height:0; transform:translateX(-50%);
  border-left:14px solid transparent; border-right:14px solid transparent; border-bottom:16px solid var(--line-strong);
  filter:drop-shadow(0 2px 2px #0005);
}
.scale-beam{
  position:absolute; left:50%; top:82px; width:420px; height:9px; background:linear-gradient(180deg, var(--text-lo), var(--line-strong));
  border-radius:4px; transform-origin:center center; transition:transform .4s ease; box-shadow:0 2px 4px #0005;
}
.scale-pan{
  position:absolute; top:131px; width:150px; min-height:74px; border:1px solid var(--line);
  border-radius:12px 12px 16px 16px; background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  display:flex; flex-wrap:wrap; align-content:center; justify-content:center; align-items:center; gap:6px; padding:10px;
  transition: top .4s ease; box-shadow:inset 0 2px 4px #0006, 0 6px 14px #0006;
}
.scale-pan::before{
  content:""; position:absolute; top:-40px; left:50%; width:2px; height:40px;
  background:var(--line-strong); transform:translateX(-50%);
}
.scale-pan.left{ left:0; }
.scale-pan.right{ right:0; }
.scale-item{
  width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:13px; font-weight:800; color:#111; cursor:pointer;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 3px #0004;
}
.scale-item.remove::after{ content:"×"; }
.scale-item.stack{
  width:58px; height:58px; border-radius:50%; flex-direction:column; gap:1px;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -4px 0 rgba(0,0,0,.2), 0 2px 4px #0004;
}
.scale-item.stack .stack-icon{ font-size:16px; line-height:1; }
.scale-item.stack .stack-count{ font-size:13px; font-weight:800; line-height:1; }
.scale-status{ font-size:13px; color:var(--text-lo); }
.scale-status.balanced{ color:var(--ok-color); }

.chip-row{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:10px 14px;
  border:1px solid var(--line); border-radius:10px; background:var(--bg-1); cursor:pointer; user-select:none;
  transition:.15s; min-width:78px;
}
.chip:hover{ border-color:var(--hologram); }
.chip .icon{ width:30px; height:30px; border-radius:6px; }
.chip .lab{ font-size:11px; color:var(--text-lo); }
.chip:active{ transform:scale(.96); }

/* ---------- cargo zone (dragWeightSum) ---------- */
.cargo-zone{
  display:flex; flex-direction:column; gap:14px; width:min(420px,92vw);
  padding:22px 24px; border-radius:16px; border:1px solid var(--line-strong);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow:0 8px 18px #0006, inset 0 0 0 1px rgba(255,255,255,.03);
}
.cargo-zone-header{ display:flex; align-items:center; gap:8px; }
.cargo-zone-icon{ font-size:20px; }
.cargo-zone-title{ font-weight:800; font-size:16px; color:var(--text-hi); }
.cargo-total{
  font-family:var(--font-mono); font-size:19px; font-weight:800; color:var(--hologram);
  text-shadow:0 0 12px var(--hologram-dim); text-align:center; padding:12px;
  background:var(--bg-0); border-radius:8px; box-shadow:inset 0 0 10px #0008, inset 0 0 0 1px var(--line);
}
.cargo-total .k{ color:var(--k-color); text-shadow:none; }
.cargo-item-icon{
  width:40px; height:40px; border-radius:8px; display:flex; align-items:center; justify-content:center;
  font-size:19px; flex-shrink:0; box-shadow:inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.2);
}
.cargo-add-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }
.cargo-add-chip{
  display:flex; flex-direction:column; align-items:center; gap:6px; padding:12px 16px;
  border-radius:12px; border:1px solid var(--line); background:var(--bg-0);
  cursor:pointer; user-select:none; transition:.15s; min-width:92px;
}
.cargo-add-chip:hover{ border-color:var(--hologram); transform:translateY(-2px); }
.cargo-add-chip:active{ transform:translateY(0) scale(.96); }
.cargo-add-row.locked .cargo-add-chip{ opacity:.35; cursor:default; pointer-events:none; }
.cargo-add-label{ font-weight:700; font-size:12.5px; color:var(--text-hi); }
.cargo-add-weight{ font-size:11px; color:var(--text-lo); }
.cargo-hold-label{ font-size:11.5px; color:var(--text-lo); text-align:center; }
.cargo-hold{
  display:flex; gap:8px; flex-wrap:wrap; justify-content:center; align-content:flex-start;
  min-height:52px; padding:10px; border-radius:10px; background:var(--bg-0); border:1px dashed var(--line);
}
.cargo-hold-item{
  width:34px; height:34px; border-radius:7px; display:flex; align-items:center; justify-content:center;
  font-size:15px; cursor:pointer; transition:.12s;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -3px 0 rgba(0,0,0,.2), 0 2px 3px #0004;
}
.cargo-hold-item:hover{ transform:scale(1.08); }
.cargo-hold-item:active{ transform:scale(.92); }
.cargo-hold.locked .cargo-hold-item{ cursor:default; opacity:.6; }
.cargo-hold-empty{ font-size:12px; color:var(--text-lo); font-style:italic; align-self:center; }

/* ---------- combo lock — an actual padlock: shackle + body, digit "tumblers" ---------- */
.lock-hint{ font-size:14px; color:var(--text-lo); text-align:center; max-width:440px; margin-bottom:8px; }
.lock{
  display:flex; gap:22px; padding:34px 32px 26px; margin-top:30px; position:relative;
  border-radius:16px; background:linear-gradient(180deg, var(--bg-2), var(--bg-1));
  border:2px solid var(--line-strong); box-shadow:0 10px 24px #0007, inset 0 0 0 1px #ffffff08;
}
.lock::before{
  /* padlock shackle, straddling the top edge of the lock body */
  content:""; position:absolute; left:50%; top:-34px; transform:translateX(-50%);
  width:74px; height:48px; border:11px solid var(--line-strong); border-bottom:none;
  border-radius:37px 37px 0 0; box-shadow:0 -2px 4px #0005;
}
.lock-group{
  display:flex; gap:6px; padding:14px 12px; border:1px solid var(--line); border-radius:12px;
  background:var(--bg-0); flex-direction:column; align-items:center;
}
.lock-group .lock-color{ font-size:13px; font-weight:800; letter-spacing:.1em; margin-bottom:8px; }
.lock-digits{ display:flex; gap:8px; }
.lock-digit{
  width:56px; height:70px; background:var(--bg-0); border:2px solid var(--line-strong); border-radius:8px;
  text-align:center; font-size:32px; font-weight:800; color:var(--hologram); font-family:var(--font-mono);
  box-shadow:inset 0 2px 5px #0008; caret-color:var(--hologram);
}
.lock-digit::placeholder{ color:var(--line-strong); opacity:1; }
.lock-digit:focus{ outline:none; border-color:var(--hologram); box-shadow:inset 0 2px 5px #0008, 0 0 0 3px var(--hologram-dim); }

/* ---------- locker weigh-in visual (multiInput fields with `visual`) ----------
   A literal school/gym-locker cabinet: vent slats, a name plate, a handle
   bar, a side latch, and one colored weight badge per unit — then a plain
   keyboard-typable input right under it (no on-screen numpad needed). */
.locker-visual-row{ display:flex; gap:32px; flex-wrap:wrap; justify-content:center; }
.locker-visual-panel{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.locker-frame{
  position:relative; width:190px; padding:20px 16px 22px;
  border-radius:14px; background:linear-gradient(180deg, #ddd6c4, #cac2ac);
  border:1px solid #a89f89; box-shadow:0 10px 20px #0007, inset 0 0 0 1px #ffffff40;
  display:flex; flex-direction:column; align-items:center; gap:14px;
  opacity:0; transform:translateY(8px); animation:lockerFrameIn .4s ease forwards;
}
@keyframes lockerFrameIn{ to{ opacity:1; transform:none; } }
.locker-vents{ position:relative; width:100%; display:flex; flex-direction:column; gap:7px; }
.locker-vent-bar{ height:11px; border-radius:2px; background:#33332f; width:100%; }
.locker-nameplate{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  background:#15151a; color:#fff; font-weight:800; font-size:13px; white-space:nowrap;
  padding:6px 14px; border-radius:4px; box-shadow:0 2px 4px #0006;
}
.locker-handle-bar{ width:58%; height:5px; border-radius:3px; background:#8f8a78; margin-top:-6px; }
.locker-side-handle{
  position:absolute; left:-9px; top:50%; transform:translateY(-50%);
  width:15px; height:48px; border-radius:4px; background:#8f8a78; box-shadow:0 2px 3px #0005;
}
.locker-badges{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center; max-width:160px; }
.locker-badge{
  width:56px; height:56px; border-radius:10px; display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:13px; color:#0b0f18;
  box-shadow:0 3px 6px #0004, inset 0 0 0 1px rgba(0,0,0,.15);
  opacity:0; animation:lockerBadgePop .3s ease forwards;
}
@keyframes lockerBadgePop{ from{ opacity:0; transform:scale(.5); } to{ opacity:1; transform:none; } }
.locker-answer-row{
  display:flex; align-items:center; gap:8px; background:var(--bg-1); border:1px solid var(--line);
  border-radius:10px; padding:8px 14px;
}
.locker-answer-icon{ font-size:16px; }
.locker-answer-input{
  width:90px; border:none; background:transparent; color:var(--text-hi); font-family:var(--font-mono);
  font-size:18px; font-weight:800; text-align:center; outline:none;
}
.locker-answer-input::placeholder{ color:var(--text-lo); font-weight:400; }

/* ---------- liquid tank ---------- */
.tank-wrap{ display:flex; align-items:flex-end; gap:26px; }
.tank{ width:70px; height:180px; border:2px solid var(--line-strong); border-radius:0 0 10px 10px; position:relative; overflow:hidden; background:var(--bg-1); }
.tank-fill{ position:absolute; bottom:0; left:0; right:0; background:linear-gradient(#5ee6ffaa, #2a86d1aa); transition:height .35s ease; }
.tank-label{ text-align:center; font-size:11px; color:var(--text-lo); margin-top:6px; }
.lever-btns{ display:flex; flex-direction:column; gap:12px; }
.lever-unit{
  display:flex; align-items:center; gap:14px; padding:10px 18px 10px 14px; border-radius:12px;
  border:1px solid var(--line-strong); background:var(--bg-1); cursor:pointer; user-select:none;
  transition:background .15s, transform .1s;
}
.lever-unit:hover{ background:var(--bg-2); }
.lever-unit:active{ transform:scale(.98); }
.lever-unit.locked{ opacity:.4; cursor:default; }
.lever-track{
  position:relative; width:22px; height:58px; border-radius:11px; background:var(--bg-0); flex-shrink:0;
  box-shadow:inset 0 0 6px #0008, inset 0 0 0 1px var(--line);
}
.lever-handle{
  position:absolute; left:50%; top:4px; width:26px; height:26px; border-radius:50%;
  transform:translateX(-50%); transition:top .18s cubic-bezier(.34,1.56,.64,1);
  box-shadow:0 3px 6px #0006, inset 0 0 0 2px rgba(255,255,255,.3);
}
.lever-unit.pulled .lever-handle{ top:28px; }
.lever-info{ display:flex; flex-direction:column; gap:2px; }
.lever-name{ font-weight:800; font-size:13.5px; color:var(--text-hi); }
.lever-amt{ font-size:11.5px; color:var(--text-lo); font-family:var(--font-mono); }

/* ---------- points board (grid) ---------- */
.board-wrap{ display:flex; gap:24px; align-items:flex-start; flex-wrap:wrap; justify-content:center; }
.board{ position:relative; width:280px; height:280px; background:var(--bg-1); border:1px solid var(--line); border-radius:10px; }
.board svg{ position:absolute; inset:0; }
.board-axis-label{ position:absolute; font-size:10px; color:var(--text-lo); }

/* ---------- lever indicator bars ---------- */
.lever-panel{ display:flex; gap:34px; align-items:center; flex-wrap:wrap; justify-content:center; }
.lever-col{ display:flex; flex-direction:column; align-items:center; gap:8px; }
.lever-track{ width:38px; height:180px; background:var(--bg-1); border:1px solid var(--line); border-radius:20px; position:relative; }
.lever-thumb{ position:absolute; left:2px; width:32px; height:32px; border-radius:50%; background:var(--hologram); box-shadow:0 0 10px var(--hologram-dim); cursor:grab; transition:top .1s; }
.lever-val{ font-family:var(--font-mono); font-size:16px; }
.indicator-bar{
  width:220px; padding:10px 14px; border-radius:8px; border:1px solid var(--line); background:var(--bg-1);
  display:flex; justify-content:space-between; align-items:center; font-family:var(--font-mono); font-size:13px;
}
.indicator-bar.green{ border-color:var(--ok-color); box-shadow:0 0 12px #33e08a33; }
.indicator-bar.red{ border-color:var(--bad-color); }
.led{ width:12px; height:12px; border-radius:50%; background:var(--bad-color); }
.led.on{ background:var(--ok-color); box-shadow:0 0 8px var(--ok-color); }

/* ---------- exchange machine ---------- */
.machine{ display:flex; align-items:center; gap:20px; }
.machine-box{
  width:120px; height:110px; border:1px solid var(--line); border-radius:10px; background:var(--bg-1);
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:5px; padding:8px; font-size:34px;
}
.machine-box .gold-coin{ width:26px; height:26px; }
.machine-arrow{ font-size:24px; color:var(--hologram); }

/* ---------- mirror gate ---------- */
.gate-wrap{ display:flex; align-items:center; gap:14px; justify-content:center; flex-wrap:wrap; }
.gate-portal{
  width:6px; height:100px; background:linear-gradient(var(--hologram), var(--y-color));
  box-shadow:0 0 20px var(--hologram); border-radius:3px; position:relative;
}
.gate-term{
  padding:10px 16px; border:1px solid var(--line); border-radius:8px; background:var(--bg-1); cursor:grab;
  font-family:var(--font-mono); font-size:16px; user-select:none; touch-action:none;
}
.gate-term:hover{ border-color:var(--hologram); box-shadow:0 0 0 3px var(--hologram-dim); }
.gate-term.grabbing{ cursor:grabbing; border-color:var(--hologram); box-shadow:0 0 14px var(--hologram); z-index:5; position:relative; }
.gate-term.dragging{ opacity:.4; }
.gate-portal.active-glow{ box-shadow:0 0 34px var(--hologram); }
.gate-fallback-btn{
  font-size:11px; color:var(--text-lo); text-decoration:underline; cursor:pointer; opacity:.6;
}
.gate-fallback-btn:hover{ opacity:1; }
.drop-zone{ min-width:100px; min-height:44px; border:1px dashed var(--line); border-radius:8px; display:flex; align-items:center; justify-content:center; padding:6px; }
.drop-zone.hover{ border-color:var(--hologram); background:var(--hologram-dim); }

/* ---------- tablet device (equationFill w/ transitionAnimation) ---------- */
.tablet-device{
  width:min(480px,92vw); padding:14px; border-radius:20px; border:3px solid var(--line-strong);
  background:linear-gradient(180deg, var(--bg-2), var(--bg-1)); box-shadow:0 10px 22px #0007, inset 0 0 0 1px rgba(255,255,255,.03);
}
.tablet-header{ display:flex; align-items:center; gap:8px; padding:0 4px 12px; }
.tablet-dot{ width:8px; height:8px; border-radius:50%; background:var(--ok-color); box-shadow:0 0 6px var(--ok-color); }
.tablet-title{ font-weight:800; font-size:13px; color:var(--text-hi); letter-spacing:.02em; }
.tablet-screen{
  display:flex; flex-direction:column; align-items:center; gap:16px; padding:28px 20px;
  border-radius:12px; background:var(--bg-0); box-shadow:inset 0 0 14px #000a, inset 0 0 0 1px var(--line);
}
.tablet-reveal{
  font-family:var(--font-mono); font-size:20px; color:var(--hologram); text-shadow:0 0 14px var(--hologram-dim);
  text-align:center;
}

/* ---------- eraser / cross-out terms ---------- */
.equation-row{ display:flex; gap:8px; align-items:center; font-family:var(--font-mono); font-size:17px; justify-content:center; flex-wrap:wrap;}
.eq-icon-tag{ display:inline-flex; align-items:center; gap:6px; }
.eq-icon-badge{
  width:26px; height:26px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center;
  font-size:14px; box-shadow: inset 0 0 0 1px rgba(0,0,0,.25), inset 0 -2px 0 rgba(0,0,0,.2);
}

/* ---------- Nota (paper receipt) — equationFill w/ cfg.receipts ---------- */
/* deliberately literal paper tones, not the dark UI palette — a receipt
   reads as an actual object dropped into the scene, same idea as the
   locker cabinet / vending tickets elsewhere using real-world colors. */
.nota-row{ display:flex; gap:34px; flex-wrap:wrap; justify-content:center; margin:6px 0 16px; }
.nota-card{
  width:236px; padding:18px 18px 24px; background:#f6f1e3; color:#332e22;
  box-shadow:0 12px 22px #0008, 0 1px 0 #fff6 inset; display:flex; flex-direction:column; gap:11px;
  position:relative; font-family:var(--font-mono); transform:rotate(-1.4deg);
}
.nota-row .nota-card:nth-child(2){ transform:rotate(1.4deg); }
.nota-header{
  text-align:center; font-weight:800; font-size:13.5px; color:#332e22; letter-spacing:.03em;
  border-bottom:1px dashed #33291f66; padding-bottom:9px;
}
.nota-items{ display:flex; flex-direction:column; gap:6px; }
.nota-item-row{ display:flex; justify-content:space-between; gap:8px; font-size:12px; color:#5a5240; }
.nota-total-row{
  display:flex; justify-content:space-between; font-weight:800; font-size:13px; color:#221e15;
  border-top:1px dashed #33291f66; padding-top:9px;
}
.nota-eq-row{ font-size:14px; gap:3px; flex-wrap:nowrap; justify-content:center; }
.nota-eq-row .mathline{ color:#221e15; text-shadow:none; }
.nota-eq-row .answer-input{
  font-size:13px; width:36px !important; padding:5px 3px !important; flex-shrink:0;
  background:#fffdf7; color:#221e15; border:1px solid #33291f55;
}
.nota-eq-row .answer-input:focus{ border-color:#8a6d2b; box-shadow:0 0 0 3px #d8bd6a55; }
.nota-card::before, .nota-card::after{
  content:""; position:absolute; left:0; right:0; height:9px;
  background:
    linear-gradient(135deg, #f6f1e3 25%, transparent 25%) 0 0/10px 10px,
    linear-gradient(225deg, #f6f1e3 25%, transparent 25%) 0 0/10px 10px;
  background-color: var(--panel);
}
.nota-card::after{ bottom:-9px; }
.nota-card::before{ top:-9px; transform:rotate(180deg); }
.term{ padding:6px 10px; border-radius:6px; cursor:pointer; border:1px solid transparent; }
.term:hover{ border-color:var(--hologram); }
.term.crossed{ text-decoration:line-through; opacity:.3; cursor:default; }
.term.crossed:hover{ border-color:transparent; }

/* ---------- UV room (uvReveal) ---------- */
.uv-room{
  width:min(420px,92vw); border-radius:14px; border:2px solid var(--line-strong);
  overflow:hidden; background:linear-gradient(180deg, #171b28, #0c0e15); box-shadow:0 10px 24px #0008;
}
.uv-zone{
  padding:22px 20px; text-align:center; cursor:pointer; transition:background .15s;
  border-bottom:1px dashed var(--line);
}
.uv-zone:last-child{ border-bottom:none; }
.uv-zone:hover:not(.revealed){ background:rgba(255,255,255,.04); }
.uv-zone.revealed{ cursor:default; }
.uv-zone-icon{ font-size:24px; margin-bottom:6px; filter:grayscale(.4) brightness(.8); }
.uv-zone-label{ font-size:13px; color:var(--text-lo); transition:opacity .2s; }
.uv-zone.revealed .uv-zone-label{ opacity:.45; }
.uv-zone-reveal{
  display:none; margin-top:10px; font-family:var(--font-mono); font-size:14.5px;
  color:#c9a6ff; text-shadow:0 0 12px #b388ffcc, 0 0 26px #b388ff66;
}
.uv-zone.revealed .uv-zone-reveal{ display:block; animation:uvGlow .5s ease; }
@keyframes uvGlow{ from{ opacity:0; filter:blur(5px); } to{ opacity:1; filter:blur(0); } }

/* ---------- rack / clone ---------- */
.rack{ display:flex; flex-direction:column; gap:8px; align-items:center; padding:14px; border:1px solid var(--line); border-radius:10px; background:var(--bg-1); min-width:220px; }
.rack-bottles{ display:flex; gap:4px; flex-wrap:wrap; justify-content:center; min-height:30px; }
.bottle{ width:16px; height:26px; border-radius:3px 3px 6px 6px; }
.rack-track{ position:relative; width:100%; height:170px; }
.rack-slot{ position:absolute; left:0; right:0; transition: transform .5s ease; }

/* ---------- laser grid ---------- */
.laser-wrap{ display:flex; gap:22px; align-items:flex-start; flex-wrap:wrap; justify-content:center; }
.grid-board{ position:relative; width:320px; height:320px; background:#060a12; border:1px solid var(--line-strong); border-radius:10px; }
.grid-board svg{ position:absolute; inset:0; width:100%; height:100%; }
.grid-point{ position:absolute; width:16px; height:16px; margin:-8px; border-radius:50%; background:#141b28; border:1px solid #3a4863; cursor:pointer; }
.grid-point:hover{ border-color:var(--hologram); }
.grid-point.marked{ background:var(--hologram); box-shadow:0 0 8px var(--hologram); }
.grid-coord-tag{ position:absolute; font-size:9px; color:#93a0b4; transform:translate(-50%,-140%); font-family:var(--font-mono); pointer-events:none;}

/* ---------- wire cut ---------- */
.wire-grid{ display:flex; gap:16px; flex-wrap:wrap; justify-content:center; }
.wire-card{ width:220px; border:1px solid var(--line); border-radius:10px; padding:14px; background:var(--bg-1); text-align:center; }
.wire-card .wire-title{ font-weight:800; margin-bottom:8px; }
.wire-card.red .wire-title{ color:var(--x-color); }
.wire-card.green .wire-title{ color:var(--ok-color); }
.wire-card.blue .wire-title{ color:var(--y-color); }
.wire-card.cut{ opacity:.4; }

/* ---------- radar / cost race (stepped slider w/ bars) ---------- */
.race-wrap{ display:flex; flex-direction:column; gap:20px; align-items:center; width:100%; max-width:520px; }
.race-track-outer{ width:100%; }
.race-bars{ display:flex; gap:40px; align-items:flex-end; height:180px; }
.race-bar-col{ display:flex; flex-direction:column; align-items:center; gap:6px; justify-content:flex-end; height:100%; }
.race-bar{ width:50px; border-radius:6px 6px 0 0; transition:height .3s ease; }
.stepped-slider{ width:100%; }

/* ---------- wristband modal ---------- */
.modal-backdrop{ position:fixed; inset:0; background:#000a; z-index:100; display:flex; align-items:center; justify-content:center; padding:20px; }
.wristband-modal{ width:min(520px,94vw); max-height:80vh; overflow:auto; }
.wristband-entry{ padding:10px 0; border-bottom:1px solid var(--line); font-size:13px; }
.wristband-entry:last-child{ border-bottom:none; }
.wristband-entry .rec-chapter{ color:var(--recorded-color); font-size:11px; text-transform:uppercase; letter-spacing:.08em; }
.wristband-entry .rec-val{ font-family:var(--font-mono); color:var(--text-hi); margin-top:2px; }

/* ---------- toast ---------- */
#toast-layer{ position:fixed; top:70px; left:50%; transform:translateX(-50%); z-index:200; display:flex; flex-direction:column; gap:8px; align-items:center; }
.toast{
  background:var(--bg-2); border:1px solid var(--recorded-color); color:var(--text-hi);
  padding:12px 20px; border-radius:10px; font-size:13px; box-shadow:0 10px 30px #000a;
  animation: toastIn .3s ease, toastOut .4s ease 2.6s forwards;
  text-align:center; max-width:360px;
}
@keyframes toastIn{ from{opacity:0; transform:translateY(-10px);} to{opacity:1; transform:none;} }
@keyframes toastOut{ to{opacity:0; transform:translateY(-10px);} }

/* ---------- ghost hand ---------- */
.ghost-hand{ font-size:40px; opacity:.85; animation: floatHand 1.6s ease-in-out infinite; }
@keyframes floatHand{ 0%,100%{ transform:translateY(0);} 50%{ transform:translateY(-8px);} }

/* ---------- final report ---------- */
.report-grid{ display:grid; grid-template-columns:1fr 1fr; gap:14px; width:min(720px,92vw); }
.report-card{ background:var(--bg-1); border:1px solid var(--line); border-radius:10px; padding:16px; }
.report-card .num{ font-family:var(--font-display); font-size:26px; color:var(--hologram); }
.report-card .lab{ font-size:12px; color:var(--text-lo); }
@media (max-width:600px){ .report-grid{ grid-template-columns:1fr; } }

/* team role badges */
.roles-summary{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; font-size:12px; color:var(--text-lo); }

/* drag ghost */
.dragging-ghost{ position:fixed; pointer-events:none; z-index:300; opacity:.85; }

/* misc */
.center-col{ display:flex; flex-direction:column; align-items:center; gap:14px; }
.small{ font-size:12px; color:var(--text-lo); }
.link-btn{ background:none; border:none; color:var(--hologram); text-decoration:underline; cursor:pointer; font-size:13px;}

/* ===================================================================
   REDESIGN ADDITIONS — narrative layout, diegetic tags, modals,
   settings, theming, fullscreen-friendly widths
   =================================================================== */

/* corner / icon buttons */
.corner-btn{ position:fixed; top:18px; right:18px; z-index:40; }
.icon-btn{ padding:8px 11px; font-size:15px; }

/* HUD: team name instead of "Bab N" */
.hud-team{ color:var(--text-hi); font-weight:700; letter-spacing:.04em; }

/* single game-card layout: game on top, its own info directly below it */
.room{ min-height:100vh; width:100%; padding:88px 24px 48px; display:flex; flex-direction:column; align-items:center; gap:14px; }
.room-header-compact{ text-align:center; }
.room-header-compact .room-title{ margin:4px 0 0; font-size:24px; }
.game-card{
  width:min(1440px, 88vw);
  display:flex; flex-direction:column; gap:16px;
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:26px; box-shadow:0 20px 60px #000a;
}
.card-divider{ height:1px; background:var(--line); margin:2px 0; }
@media (max-width: 700px){
  .room{ padding-top:76px; }
  .game-card{ padding:18px; }
}

/* narrative box replacing the 4-slot worksheet (legacy — kept for reference,
   the narrative is now shown as a popup, see .narrative-modal below) */
.narrative-box{
  background:var(--panel); border:1px solid var(--line); border-left:3px solid var(--hologram);
  border-radius:10px; padding:16px 18px; font-size:14.5px; line-height:1.6; color:var(--text-hi);
}

/* top row of the puzzle card: buttons that reopen the instruction and
   hint popups on demand — kept out of the card's main flow so the stage
   below gets that vertical space instead of a permanent hint bar. */
.puzzle-top-actions{ display:flex; gap:10px; flex-wrap:wrap; }
.narrative-recall-btn, .hint-recall-btn{ border-left:3px solid var(--hologram); border-radius:8px; }
.hint-recall-btn{ border-left-color:var(--k-color); }
@media (max-width: 480px){
  .puzzle-top-actions{ flex-wrap:nowrap; gap:6px; }
  .puzzle-top-actions .btn{ flex:1; min-width:0; padding:9px 6px; font-size:11.5px; gap:4px; white-space:nowrap; }
}

/* hint popup — sized up to match the rest of the enlarged UI; scoped so
   it doesn't touch .small/.btn-sm/.hint-box used generically elsewhere. */
.hint-modal{ width:min(600px,90vw); text-align:left; }
.hint-modal #hintPoolLabel{ font-size:16px; line-height:1.6; }
.hint-modal .hint-bar{ gap:12px; margin-top:18px !important; }
.hint-modal .hint-bar button{ font-size:16px; padding:11px 20px; }
.hint-modal .hint-box{ font-size:17px; line-height:1.65; padding:16px 18px; margin-top:16px; width:100%; }

/* narrative popup — the puzzle's "soal/perintah", typed out on first entry.
   Same width formula as .game-card so the popup and the puzzle screen
   underneath share one footprint, vertically centered in the viewport
   like every other modal (matching the card's own top-anchored spot made
   it feel pinned/off-center against all the empty space below it). */
.narrative-modal{ width:min(1440px,88vw); max-height:82vh; overflow-y:auto; text-align:left; }
.narrative-modal-title{
  font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.1em;
  text-transform:uppercase; color:var(--hologram); margin-bottom:14px;
}
.narrative-modal-text{ font-size:20px; line-height:1.75; color:var(--text-hi); white-space:pre-line; min-height:90px; }
.narrative-modal-hint{ margin-top:20px; text-align:center; color:var(--text-lo); font-size:13.5px; animation:pulse 1.6s infinite; }

/* diegetic given-fact tags */
.givens-strip{ display:flex; flex-direction:column; gap:8px; }
.given-tag{
  display:inline-flex; align-items:center; gap:6px; width:fit-content; max-width:100%;
  background:var(--bg-2); border:1px solid var(--line); border-radius:8px;
  padding:7px 12px; font-family:var(--font-mono); font-size:12.5px; color:var(--hologram);
}

/* settings screen toggles */
.settings-toggle-row{ display:flex; flex-direction:column; gap:10px; }
.toggle-switch{ display:flex; align-items:center; justify-content:space-between; gap:12px; }
.toggle-label{ font-size:14px; color:var(--text-hi); }
.toggle-pill{ width:46px; height:26px; border-radius:999px; background:var(--bg-3); border:1px solid var(--line); position:relative; cursor:pointer; transition:.2s; flex-shrink:0; }
.toggle-pill.on{ background:var(--hologram); border-color:var(--hologram); }
.toggle-knob{ position:absolute; top:2px; left:2px; width:20px; height:20px; border-radius:50%; background:#fff; transition:.2s; box-shadow:0 1px 3px #0006; }
.toggle-pill.on .toggle-knob{ left:22px; }

/* result modal (correct / wrong / game over) */
.result-modal{ width:min(420px,90vw); text-align:center; display:flex; flex-direction:column; align-items:center; }
.result-icon{ font-size:46px; line-height:1; margin-bottom:6px; }
.result-title{ font-family:var(--font-display); font-size:19px; margin-bottom:6px; }
.result-modal.ok .result-title{ color:var(--ok-color); }
.result-modal.bad .result-title{ color:var(--bad-color); }
.result-modal.dead .result-title{ color:var(--k-color); }
.result-message{ font-size:14px; color:var(--text-lo); line-height:1.5; }
.result-ritual{
  margin-top:10px; font-size:12.5px; color:var(--recorded-color);
  background:#9aa3ad14; border:1px solid var(--recorded-color); border-radius:8px; padding:8px 12px;
}

/* scale "?" unknown mark — visibly bigger/heavier than a single known unit, so its
   relative weight is read from its size, never from a printed number */
.scale-item.unknown{
  width:60px !important; height:60px !important;
  font-size:26px !important; font-weight:800; color:#fff;
  box-shadow: 0 3px 0 #0006, inset 0 0 0 2px #ffffff33;
}

/* widen core containers so wide/laptop screens aren't mostly empty */
.card{ width:auto; }
.form-screen .card{ width:min(600px,92vw); }
.wristband-modal{ width:min(560px,94vw); }
.settings-modal{ width:min(460px,92vw); max-height:88vh; overflow:auto; }
.report-grid{ width:min(820px,92vw); }
.narrative-modal{ width:min(1440px,88vw); }

/* ---------- phase-intro cutscene — fixed dark regardless of page theme,
   like a movie scene, so it never inherits a light-mode contrast bug ---------- */
.cutscene{
  position:fixed; inset:0; z-index:90; background-color:#05070c;
  background-image:
    linear-gradient(180deg, rgba(5,7,12,.4) 0%, rgba(5,7,12,.5) 50%, rgba(5,7,12,.58) 100%),
    url('../assets/img/background.png');
  background-size: cover, cover;
  background-position: center, center 55%;
  background-repeat: no-repeat, no-repeat;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:40px 24px; cursor:pointer; overflow:hidden;
}
.cutscene-skip{
  position:absolute; top:20px; right:20px; z-index:3; background:rgba(5,7,12,.5); border:1px solid #2a3446;
  color:#93a0b4; padding:8px 16px; border-radius:8px; font-size:13px; cursor:pointer;
}
.cutscene-skip:hover{ border-color:#5ee6ff; color:#5ee6ff; }
.cutscene-char{
  position:absolute; bottom:0; height:52vh; max-height:520px; width:auto;
  object-fit:contain; z-index:1; pointer-events:none;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.55));
  transition:opacity .5s ease, filter .5s ease, transform .5s ease;
}
.cutscene-char.sindo{ left:1%; }
.cutscene-char.sumbi{ right:1%; }
.cutscene-char.dim{ opacity:.4; filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)) grayscale(.65) brightness(.6); transform:translateY(1%) scale(.96); }
.cutscene-char.active{ opacity:1; transform:translateY(0) scale(1); }
.cutscene-box{
  position:relative; z-index:2;
  width:min(680px,92vw); min-height:180px; display:flex; flex-direction:column; justify-content:center; gap:8px;
  background:rgba(5,7,12,.6); border-radius:14px; padding:18px 22px; backdrop-filter:blur(3px);
  box-shadow:0 10px 40px rgba(0,0,0,.4);
}
.cutscene-video-wrap{
  position:relative; z-index:2; display:none; align-items:center; justify-content:center;
  width:min(880px,94vw);
}
.cutscene-video{
  width:100%; max-height:78vh; border-radius:16px; background:#000;
  box-shadow:0 20px 60px rgba(0,0,0,.6), 0 0 0 1px rgba(255,255,255,.08);
}
.cutscene-speaker{ font-family:var(--font-display); font-weight:800; font-size:15px; letter-spacing:.04em; display:none; }
.cutscene-speaker.sindo{ color:#5ee6ff; }
.cutscene-speaker.sumbi{ color:#ff9f43; }
.cutscene-action{ color:#93a0b4; font-size:12.5px; font-style:normal; display:none; }
.cutscene-text{ color:#eef2f9; font-size:17px; line-height:1.65; white-space:pre-line; }
.cutscene-text.cutscene-scene{ color:#c3ccd8; font-size:14.5px; text-align:center; }
.cutscene-text.cutscene-instruction{
  color:#ffe9a8; background:#ffd23f1f; border:1px solid #c98a00; border-radius:10px;
  padding:16px 18px; font-size:14.5px;
}
.cutscene-hint{ position:relative; z-index:2; margin-top:22px; text-align:center; color:#93a0b4; font-size:12.5px; animation:pulse 1.6s infinite; }
.cutscene-next-btn{ margin-top:22px; }

/* scene-line effects: sells the stage direction as something happening,
   not just a caption. Toggled on/off as a given line plays. */
.cutscene-effect-layer{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.cutscene-fx-flicker{
  position:absolute; inset:0;
  background:radial-gradient(ellipse at 50% 35%, rgba(255,40,40,.4), transparent 65%);
  opacity:0; animation:cutsceneFlicker 2.2s ease-in-out infinite;
}
@keyframes cutsceneFlicker{
  0%,17%,19%,52%,54%,100%{ opacity:0; }
  18%,53%{ opacity:1; }
  60%{ opacity:.5; }
  62%{ opacity:.15; }
}
.cutscene.fx-shake{ animation:cutsceneShake .6s ease; }
@keyframes cutsceneShake{
  0%,100%{ transform:translate(0,0); }
  15%{ transform:translate(-7px,2px); }
  30%{ transform:translate(6px,-2px); }
  45%{ transform:translate(-5px,1px); }
  60%{ transform:translate(4px,-1px); }
  75%{ transform:translate(-2px,1px); }
}
.cutscene-fx-laser{ position:absolute; inset:0; }
.cutscene-fx-laser .beam{
  position:absolute; left:0; height:3px; width:0%; border-radius:2px;
  box-shadow:0 0 16px 2px currentColor; animation:cutsceneLaserGrow 1.4s ease-out forwards;
}
.cutscene-fx-laser .beam.red{ top:42%; color:#ff4d5e; background:#ff4d5e; animation-delay:.1s; }
.cutscene-fx-laser .beam.blue{ top:60%; color:#3fa9ff; background:#3fa9ff; animation-delay:.6s; }
@keyframes cutsceneLaserGrow{ from{ width:0%; opacity:.2; } to{ width:100%; opacity:.9; } }
.cutscene-fx-fog{
  position:absolute; inset:-10% -20%; opacity:.5;
  background:
    radial-gradient(ellipse 40% 30% at 20% 70%, rgba(220,228,235,.5), transparent 70%),
    radial-gradient(ellipse 35% 25% at 75% 80%, rgba(220,228,235,.4), transparent 70%);
  animation:cutsceneFogDrift 9s ease-in-out infinite alternate;
}
@keyframes cutsceneFogDrift{ from{ transform:translateX(-3%); } to{ transform:translateX(3%); } }

/* ---------- uniform game backdrop for content-dense screens ---------- */
.bg-hero-uniform{
  position:fixed; inset:0; z-index:-3; pointer-events:none;
  background-image:
    linear-gradient(var(--hero-overlay), var(--hero-overlay)),
    url('../assets/img/background.png');
  background-size: cover, cover;
  background-position: center, center 55%;
  background-repeat: no-repeat, no-repeat;
}

/* ---------- corner controls: settings + context back, top-right, every screen ---------- */
.corner-controls{
  position:fixed; top:16px; right:16px; z-index:95;
  display:flex; gap:8px;
}

/* ---------- title logo badge ---------- */
.title-badge{
  width:min(280px, 70vw); height:auto; object-fit:contain;
  margin-bottom:2px;
  filter:
    drop-shadow(1px 0 0 #fff)
    drop-shadow(-1px 0 0 #fff)
    drop-shadow(0 1px 0 #fff)
    drop-shadow(0 -1px 0 #fff)
    drop-shadow(0 10px 28px #000a);
}