:root{
  --wall:#DCE3E7;
  --wood:#E8DCC8;
  --birch:#F4F1EA;
  --ink:#2B2C2E;
  --brass:#C9A227;
  --ember:#B4574A;
  --dusk:#9FB2BC;
  --sage:#7E8F7C;
  --line:rgba(43,44,46,.14);
  --line-soft:rgba(43,44,46,.08);
  --shadow:0 10px 30px rgba(43,44,46,.10);
  --r-sm:10px;
  --r-md:16px;
  --r-lg:22px;
}

*,*::before,*::after{ box-sizing:border-box; }

html,body{ height:100%; }

body{
  margin:0;
  background:var(--birch);
  color:var(--ink);
  font-family:'IBM Plex Sans Arabic',system-ui,-apple-system,'Segoe UI',Tahoma,sans-serif;
  font-size:16px;
  line-height:1.6;
  -webkit-tap-highlight-color:transparent;
  overscroll-behavior:none;
}

button{ font-family:inherit; color:inherit; }
h1,h2,h3{ margin:0; font-weight:700; line-height:1.25; }

.grain{
  position:fixed; inset:0; z-index:95; pointer-events:none; opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}

/* ================= shell ================= */
.shell{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  height:100vh;
  height:100dvh;
}
.app{ display:flex; flex-direction:column; min-height:0; min-width:0; }

/* ================= HUD ================= */
.hud{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  padding:10px 12px;
  border-bottom:1px solid var(--line-soft);
  background:var(--birch);
  user-select:none;
}

.room-tag{
  flex:none;
  width:54px; height:54px;
  border-radius:12px;
  background:var(--brass);
  color:var(--ink);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:1px;
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  box-shadow:0 6px 16px rgba(201,162,39,.30);
}
.room-tag-label{ font-size:10px; font-weight:700; opacity:.72; line-height:1; letter-spacing:.02em; }
.room-tag-num{ font-size:21px; font-weight:800; line-height:1; font-variant-numeric:tabular-nums; }

.candle{
  display:flex; align-items:center; gap:8px;
  flex:1 1 130px; min-width:104px;
}
.flame-wrap{ display:inline-flex; transform-origin:50% 80%; }
.flame{ width:20px; height:20px; transform-origin:50% 85%; animation:flicker 1.8s ease-in-out infinite; }
.candle-track{
  position:relative; flex:1; height:8px; border-radius:999px;
  background:rgba(43,44,46,.10); overflow:hidden;
}
.candle-track i{
  position:absolute; inset-inline-start:0; top:0; bottom:0;
  width:100%; background:var(--brass); border-radius:999px;
}
.candle-track i.low{ background:var(--ember); }
.candle-time{
  font-size:12px; font-variant-numeric:tabular-nums;
  color:rgba(43,44,46,.68); min-width:42px; text-align:center;
}

.hud-actions{ display:flex; gap:6px; flex:none; }

.icon-btn{
  width:40px; height:40px; border-radius:12px;
  border:1px solid var(--line);
  background:transparent; color:var(--ink);
  display:grid; place-items:center; cursor:pointer;
  transition:background .15s ease, transform .12s ease, border-color .15s ease;
}
.icon-btn svg{ width:20px; height:20px; }
.icon-btn:hover{ background:rgba(43,44,46,.05); }
.icon-btn:active{ transform:scale(.94); }
.icon-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.icon-btn:disabled{ opacity:.4; cursor:default; }

.hud-stats{
  display:flex; gap:6px; flex:1 1 100%; justify-content:space-between;
}
.chip-stat{
  display:inline-flex; align-items:center; gap:5px;
  font-size:12px; color:rgba(43,44,46,.72);
  background:rgba(43,44,46,.05);
  border-radius:999px; padding:4px 10px;
}
.chip-stat b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ================= stage ================= */
.stage{
  flex:1; min-height:0;
  display:flex; flex-direction:column; gap:8px;
  padding:10px;
}

.stage-bar{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:rgba(43,44,46,.62);
  padding:0 4px; flex:none;
}
#sceneHint{ text-align:end; }

/* ================= scene ================= */
.scene{
  position:relative;
  flex:1; min-height:210px;
  width:100%; max-width:1080px; margin-inline:auto;
  border-radius:var(--r-lg);
  overflow:hidden;
  background:var(--wall);
  border:1px solid var(--line);
  box-shadow:var(--shadow);
  user-select:none;
  isolation:isolate;
}
.scene.enter{ animation:sceneIn .38s ease-out; }

.wall{ position:absolute; inset:0 0 32% 0; background:var(--wall); }
.floor{
  position:absolute; inset:68% 0 0 0;
  background:var(--wood);
}
.floor::before{
  content:''; position:absolute; inset:0;
  background-image:repeating-linear-gradient(90deg, rgba(43,44,46,.07) 0 1px, transparent 1px 58px);
  opacity:.85;
}
.baseboard{
  position:absolute; left:0; right:0; top:68%;
  transform:translateY(-100%);
  height:9px;
  background:var(--birch);
  border-top:1px solid rgba(43,44,46,.22);
  border-bottom:1px solid rgba(43,44,46,.10);
}

.window{
  position:absolute; left:5.5%; top:8%;
  width:17%; aspect-ratio:3/4;
  border:2px solid rgba(43,44,46,.5);
  border-radius:4px;
  overflow:hidden;
  background:var(--dusk);
  box-shadow:0 0 0 4px rgba(244,241,234,.9);
}
.window-glass{
  position:absolute; inset:0;
  background:linear-gradient(180deg,#B9CAD2 0%, #9FB2BC 100%);
  opacity:.9;
}
.window-fog{
  position:absolute; inset:-40% -60%;
  background:radial-gradient(60% 50% at 40% 50%, rgba(244,241,234,.55), rgba(244,241,234,0) 70%);
  animation:fogDrift 22s linear infinite;
}
.window-bar-v{ position:absolute; left:50%; top:0; bottom:0; width:2px; background:rgba(43,44,46,.45); transform:translateX(-50%); }
.window-bar-h{ position:absolute; top:50%; left:0; right:0; height:2px; background:rgba(43,44,46,.45); transform:translateY(-50%); }

.sunpatch{
  position:absolute; left:9%; top:70%;
  width:30%; height:22%;
  background:rgba(244,241,234,.55);
  transform:skewX(-20deg);
  border-radius:8px;
  filter:blur(3px);
  z-index:1;
}

/* ---------- door ---------- */
.door{
  position:absolute;
  left:33.5%; width:33%;
  top:16%; height:72%;
  z-index:2;
}
.door-casing{
  position:absolute; inset:-12px -12px 0 -12px;
  background:var(--birch);
  border:1px solid rgba(43,44,46,.22);
  border-radius:12px 12px 0 0;
  box-shadow:0 12px 26px rgba(43,44,46,.14);
}
.door-leaf{
  position:absolute; inset:0;
  background:#3A3B3D;
  border-radius:6px 6px 2px 2px;
  box-shadow:inset 0 0 0 3px rgba(244,241,234,.10), inset 0 -40px 60px rgba(0,0,0,.18);
  transition:box-shadow .4s ease;
}
.door-leaf::before{
  content:''; position:absolute; inset:7% 9%;
  border:1px solid rgba(244,241,234,.16);
  border-radius:4px;
}
.door-leaf::after{
  content:''; position:absolute; left:50%; top:8%; bottom:8%; width:1px;
  background:rgba(244,241,234,.10);
}
.door.unlocked .door-leaf{
  box-shadow:inset 0 0 0 3px rgba(201,162,39,.55), inset 0 -40px 60px rgba(0,0,0,.14);
}
.door-locks{
  position:absolute; top:11%; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; gap:min(14px,2.2vh);
  z-index:3;
}
.lock{
  display:block;
  width:18px; height:18px; border-radius:50%;
  border:2px solid var(--brass);
  background:rgba(201,162,39,.12);
  opacity:.55;
  transition:background .3s ease, opacity .3s ease, box-shadow .3s ease;
}
.lock.on{
  background:var(--brass);
  opacity:1;
  box-shadow:0 0 0 5px rgba(201,162,39,.18);
}
.lock.pop{ animation:lockPop .55s cubic-bezier(.34,1.56,.64,1); }

.door-exit{
  position:absolute; left:50%; bottom:14%; transform:translateX(-50%);
  padding:11px 26px; min-height:46px;
  border:none; border-radius:999px;
  background:var(--brass); color:var(--ink);
  font-weight:700; font-size:15px;
  cursor:pointer;
  box-shadow:0 8px 22px rgba(201,162,39,.42);
  animation:breathe 2.4s ease-in-out infinite;
  z-index:4;
}
.door-exit[hidden]{ display:none; }
.door-exit:active{ transform:translateX(-50%) scale(.95); }
.door-exit:focus-visible{ outline:2px solid var(--birch); outline-offset:3px; }

/* ---------- objects ---------- */
.obj{
  position:absolute;
  background:none; border:0; padding:0; margin:0;
  cursor:pointer;
  transform-origin:50% 100%;
  transition:transform .18s ease, filter .18s ease;
  z-index:3;
}
.obj .sprite{ display:block; width:100%; height:auto; filter:drop-shadow(0 12px 14px rgba(43,44,46,.12)); }
.obj:hover{ transform:translateY(-3px); }
.obj:active{ transform:translateY(-1px) scale(.99); }
.obj:focus-visible{ outline:2px solid var(--brass); outline-offset:8px; border-radius:10px; }
.obj.solved .sprite{ opacity:.5; filter:none; }
.obj.solved{ cursor:default; }
.obj-pin{
  position:absolute; top:-4px; inset-inline-end:-4px;
  width:12px; height:12px; border-radius:50%;
  background:var(--brass);
  box-shadow:0 0 0 4px rgba(201,162,39,.16);
  animation:pinPulse 2.6s ease-in-out infinite;
}
.obj.solved .obj-pin{
  background:transparent; border:2px solid var(--brass);
  box-shadow:none; animation:none;
}
.obj-label{
  position:absolute; left:50%; bottom:-20px; transform:translateX(-50%);
  white-space:nowrap; font-size:11px; font-weight:500;
  background:rgba(244,241,234,.94);
  color:rgba(43,44,46,.8);
  padding:1px 9px; border-radius:999px;
  opacity:0; transition:opacity .15s ease;
  pointer-events:none;
}
.obj:hover .obj-label,.obj:focus-visible .obj-label{ opacity:1; }

/* ---------- cat ---------- */
.cat-btn{
  position:absolute; left:56%; bottom:9%; width:10%;
  background:none; border:0; padding:0; cursor:pointer;
  z-index:4;
}
.cat-host{ display:block; transform-origin:50% 100%; animation:catBob 4.4s ease-in-out infinite; }
.cat-svg{ display:block; width:100%; height:auto; filter:drop-shadow(0 8px 10px rgba(43,44,46,.14)); }
.cat-tail{ transform-origin:82% 92%; animation:tailSway 3.6s ease-in-out infinite; }
.cat-btn:focus-visible{ outline:2px solid var(--brass); outline-offset:6px; border-radius:10px; }
.cat-btn.is-speak .cat-host{ animation:catSpeak .5s ease-in-out 2; }
.cat-btn.is-approve .cat-host{ animation:catApprove .7s cubic-bezier(.34,1.56,.64,1); }
.cat-btn.is-deny .cat-host{ animation:catDeny .5s ease-out; }
.cat-btn.is-expire .cat-host{ animation:catExpire 1.1s ease-in forwards; }

/* ---------- atmosphere ---------- */
.dust{ position:absolute; inset:0; z-index:5; pointer-events:none; }
.dust i{
  position:absolute; width:2px; height:2px; border-radius:50%;
  background:rgba(43,44,46,.22);
  animation:floatUp 16s linear infinite;
}
.dusk{
  position:absolute; inset:0; z-index:6; pointer-events:none;
  opacity:0;
  mix-blend-mode:multiply;
  background:radial-gradient(125% 120% at 78% 6%, rgba(159,178,188,0) 8%, rgba(159,178,188,.82) 58%, rgba(107,128,141,1) 100%);
}

/* ================= notebook ================= */
.notebook{
  position:fixed; top:0; bottom:0; right:0;
  width:min(88vw,340px);
  z-index:60;
  background:var(--birch);
  border-inline-start:1px solid var(--line);
  box-shadow:-16px 0 44px rgba(43,44,46,.18);
  transform:translateX(101%);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
  display:flex; flex-direction:column;
  user-select:none;
  overflow:hidden;
}
.notebook.open{ transform:translateX(0); }

.nb-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 12px;
  border-bottom:1px solid var(--line-soft);
}
.nb-cat{ width:36px; flex:none; display:block; }
.nb-titles h2{ font-size:16px; }
.nb-titles p{ margin:0; font-size:12px; color:rgba(43,44,46,.6); }
.nb-close{ margin-inline-start:auto; }

.nb-body{ padding:14px; overflow-y:auto; -webkit-overflow-scrolling:touch; flex:1; }
.nb-block{ padding:12px 0; border-bottom:1px dashed var(--line-soft); }
.nb-block:last-child{ border-bottom:0; }
.nb-block h3{ font-size:12px; letter-spacing:.04em; color:rgba(43,44,46,.55); margin-bottom:8px; font-weight:600; }
.nb-line{ margin:4px 0; font-size:13px; color:rgba(43,44,46,.72); display:flex; justify-content:space-between; gap:8px; }
.nb-line b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.nb-hint{ margin:0 0 10px; font-size:12.5px; line-height:1.6; color:rgba(43,44,46,.68); }

.nb-rooms{ display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.nb-room{
  display:grid; place-items:center;
  aspect-ratio:1; border-radius:8px;
  font-size:12px; font-weight:600;
  background:rgba(43,44,46,.05); color:rgba(43,44,46,.45);
  font-variant-numeric:tabular-nums;
}
.nb-room.done{ background:var(--brass); color:var(--ink); }
.nb-room.now{ background:transparent; border:2px solid var(--brass); color:var(--ink); }

.nb-locks{ display:flex; gap:8px; margin-bottom:10px; }
.nb-locks i{
  width:16px; height:16px; border-radius:50%;
  border:2px solid var(--brass); opacity:.5;
}
.nb-locks i.on{ background:var(--brass); opacity:1; }

/* ================= buttons ================= */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:46px; padding:11px 20px;
  border-radius:999px; border:1.5px solid transparent;
  font-size:15px; font-weight:600;
  cursor:pointer; transition:transform .12s ease, background .16s ease, border-color .16s ease, opacity .16s ease;
  user-select:none;
}
.btn:active{ transform:scale(.97); }
.btn:focus-visible{ outline:2px solid var(--brass); outline-offset:3px; }
.btn-primary{ background:var(--ink); color:var(--birch); }
.btn-primary:hover{ background:#3c3d40; }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ background:rgba(43,44,46,.05); }
.btn-ghost:disabled{ opacity:.4; cursor:default; }
.btn-sm{ min-height:40px; padding:8px 16px; font-size:13.5px; }
.btn-lg{ min-height:54px; padding:14px 28px; font-size:16.5px; width:100%; }
.x-btn{
  width:36px; height:36px; border-radius:10px;
  border:1px solid var(--line); background:transparent;
  display:grid; place-items:center; cursor:pointer; font-size:15px;
}
.x-btn:hover{ background:rgba(43,44,46,.05); }

/* ================= overlays ================= */
.overlay{
  position:fixed; inset:0; z-index:70;
  display:grid; place-items:center;
  padding:16px;
  background:rgba(43,44,46,.55);
  -webkit-backdrop-filter:blur(7px);
  backdrop-filter:blur(7px);
  overflow-y:auto;
  user-select:none;
}
.overlay[hidden]{ display:none !important; }

.card{
  width:100%; max-width:520px;
  background:var(--birch);
  border:1px solid rgba(43,44,46,.14);
  border-radius:var(--r-lg);
  box-shadow:0 26px 60px rgba(43,44,46,.30);
  padding:22px;
  animation:cardIn .28s cubic-bezier(.34,1.3,.64,1);
}
.card-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px; }
.card-head h2{ font-size:18px; }
.mini-card{ max-width:420px; text-align:center; }
.mini-card h2{ font-size:20px; margin-bottom:6px; }
.muted{ color:rgba(43,44,46,.66); font-size:14px; margin:6px 0 16px; }
.row-actions{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; }
.eyebrow{
  margin:0 0 6px; font-size:11.5px; font-weight:600;
  letter-spacing:.06em; color:rgba(43,44,46,.55);
}

/* intro */
.intro-card{ text-align:center; max-width:470px; }
.intro-art{ display:flex; align-items:flex-end; justify-content:center; gap:10px; height:112px; margin-bottom:8px; }
.intro-ghost{ display:block; height:112px; }
.intro-ghost svg{ height:100%; width:auto; display:block; }
.intro-cat{ display:block; height:60px; }
.intro-cat svg{ height:100%; width:auto; display:block; }
.intro-title{
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  font-size:36px; font-weight:800; letter-spacing:-.01em;
  margin:2px 0 8px;
}
.brass-num{
  display:inline-grid; place-items:center;
  min-width:64px; padding:0 8px;
  background:var(--brass); color:var(--ink);
  border-radius:14px;
}
.intro-sub{ margin:0 0 16px; font-size:14.5px; line-height:1.7; color:rgba(43,44,46,.72); }
.intro-rules{
  list-style:none; margin:0 0 18px; padding:0;
  display:grid; gap:8px; text-align:start;
}
.intro-rules li{
  display:flex; align-items:flex-start; gap:10px;
  font-size:13.5px; color:rgba(43,44,46,.78);
  background:rgba(43,44,46,.04);
  border-radius:12px; padding:9px 12px;
}
.intro-rules i{
  flex:none; width:22px; height:22px; border-radius:50%;
  background:var(--brass); color:var(--ink);
  display:grid; place-items:center;
  font-style:normal; font-size:11.5px; font-weight:700;
}
.intro-best{ margin:12px 0 0; font-size:12.5px; color:rgba(43,44,46,.6); }

/* question */
.q-card{ max-width:560px; }
.q-head{ display:flex; align-items:center; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
.chip{
  display:inline-flex; align-items:center;
  font-size:11.5px; font-weight:600;
  background:rgba(201,162,39,.20);
  color:#6b570f;
  border:1px solid rgba(201,162,39,.45);
  border-radius:999px; padding:3px 11px;
}
.q-obj{
  font-size:12px; color:rgba(43,44,46,.6);
  border-radius:999px; padding:3px 11px;
  background:rgba(43,44,46,.05);
}
.q-text{ font-size:18px; font-weight:600; line-height:1.65; margin:0 0 16px; }
.q-opts{ display:grid; gap:9px; }
.q-opt{
  display:flex; align-items:center; gap:10px;
  min-height:54px; padding:12px 14px;
  border:1.5px solid var(--line);
  border-radius:14px;
  background:rgba(255,255,255,.45);
  font-size:15.5px; text-align:start; cursor:pointer;
  transition:border-color .15s ease, background .15s ease, transform .12s ease, opacity .2s ease;
}
.q-opt:hover:not(:disabled){ border-color:rgba(43,44,46,.35); background:rgba(255,255,255,.8); }
.q-opt:active:not(:disabled){ transform:scale(.99); }
.q-opt:focus-visible{ outline:2px solid var(--brass); outline-offset:2px; }
.q-opt:disabled{ cursor:default; }
.q-opt .opt-letter{
  flex:none; width:26px; height:26px; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(43,44,46,.07);
  font-size:12.5px; font-weight:700;
}
.q-opt.ok{ border-color:var(--brass); background:rgba(201,162,39,.16); }
.q-opt.ok .opt-letter{ background:var(--brass); }
.q-opt.bad{ border-color:var(--ember); background:rgba(180,87,74,.12); color:#8d3f34; }
.q-opt.bad .opt-letter{ background:var(--ember); color:var(--birch); }
.q-opt.dim{ opacity:.32; }
.q-feed{ min-height:22px; margin:10px 0 0; font-size:13.5px; font-weight:500; }
.q-feed.ok{ color:#7d6410; }
.q-feed.bad{ color:#8d3f34; }
.q-foot{ display:flex; gap:8px; justify-content:space-between; margin-top:12px; }

/* transition */
.trans-card{ max-width:440px; text-align:center; }
.trans-ghost{ height:104px; display:flex; justify-content:center; margin-bottom:6px; }
.trans-ghost svg{ height:100%; width:auto; }
.trans-num{
  display:grid; place-items:center;
  width:74px; height:74px; margin:0 auto 12px;
  background:var(--brass); color:var(--ink);
  border-radius:16px;
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  font-size:30px; font-weight:800;
  box-shadow:0 10px 24px rgba(201,162,39,.34);
  font-variant-numeric:tabular-nums;
}
.trans-title{ font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif; font-size:26px; font-weight:800; margin-bottom:6px; }
.trans-sub{ font-size:14px; line-height:1.7; color:rgba(43,44,46,.7); margin:0 0 6px; }
.trans-gain{ font-size:13px; color:#7d6410; margin:0 0 16px; font-weight:600; }
.trans-card .btn{ width:100%; }

/* end */
.end-card{ max-width:480px; text-align:center; }
.end-card h2{ font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif; font-size:26px; margin-bottom:4px; }
.score-big{
  font-family:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  font-size:52px; font-weight:800; line-height:1.1;
  color:var(--ink); margin:6px 0 2px;
  font-variant-numeric:tabular-nums;
}
.score-unit{ font-size:13px; color:rgba(43,44,46,.6); margin-bottom:14px; }
.score-lines{ display:grid; gap:6px; margin:14px 0 16px; text-align:start; }
.score-lines div{
  display:flex; justify-content:space-between; gap:10px;
  font-size:13.5px; color:rgba(43,44,46,.72);
  padding:7px 12px; border-radius:10px; background:rgba(43,44,46,.045);
}
.score-lines b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.end-actions{ display:grid; gap:9px; }
.end-actions .btn{ width:100%; }
.end-note{ font-size:12px; color:rgba(43,44,46,.55); margin-top:12px; }

/* board */
.board-card{ max-width:460px; }
.board-list{ display:grid; gap:6px; margin:10px 0; }
.board-row{
  display:flex; align-items:center; gap:10px;
  padding:9px 12px; border-radius:12px;
  background:rgba(43,44,46,.05);
  font-size:14px;
}
.board-row.me{ background:rgba(201,162,39,.20); }
.board-row .rank{
  width:26px; height:26px; border-radius:8px; flex:none;
  display:grid; place-items:center;
  background:rgba(43,44,46,.08);
  font-size:12px; font-weight:700;
}
.board-row .handle{ flex:1; color:rgba(43,44,46,.85); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.board-row .pts{ font-weight:700; font-variant-numeric:tabular-nums; }
.board-note{ font-size:11.5px; color:rgba(43,44,46,.55); margin:8px 0 0; line-height:1.6; }

/* toast */
.toast{
  position:fixed; left:50%; bottom:22px; transform:translateX(-50%);
  z-index:92;
  max-width:min(92vw,420px);
  background:var(--ink); color:var(--birch);
  padding:11px 20px; border-radius:999px;
  font-size:13.5px; text-align:center;
  box-shadow:0 14px 34px rgba(43,44,46,.35);
  animation:toastIn .26s cubic-bezier(.34,1.4,.64,1);
}
.toast[hidden]{ display:none !important; }

.scrim{ position:fixed; inset:0; z-index:55; background:rgba(43,44,46,.4); }
.scrim[hidden]{ display:none !important; }

/* ================= animations ================= */
@keyframes flicker{
  0%,100%{ transform:scale(1) rotate(-1deg); opacity:1; }
  45%{ transform:scale(1.08) rotate(2deg); opacity:.92; }
  70%{ transform:scale(.96) rotate(-2deg); opacity:1; }
}
@keyframes fogDrift{
  0%{ transform:translateX(-8%); }
  50%{ transform:translateX(8%); }
  100%{ transform:translateX(-8%); }
}
@keyframes pinPulse{
  0%,100%{ box-shadow:0 0 0 3px rgba(201,162,39,.16); }
  50%{ box-shadow:0 0 0 7px rgba(201,162,39,.06); }
}
@keyframes lockPop{
  0%{ transform:scale(.6); }
  60%{ transform:scale(1.25); }
  100%{ transform:scale(1); }
}
@keyframes breathe{
  0%,100%{ box-shadow:0 8px 22px rgba(201,162,39,.38); }
  50%{ box-shadow:0 8px 30px rgba(201,162,39,.66); }
}
@keyframes floatUp{
  0%{ transform:translateY(6px); opacity:0; }
  20%{ opacity:1; }
  80%{ opacity:1; }
  100%{ transform:translateY(-70px); opacity:0; }
}
@keyframes catBob{
  0%,100%{ transform:translateY(0) scaleY(1); }
  50%{ transform:translateY(-2px) scaleY(1.02); }
}
@keyframes tailSway{
  0%,100%{ transform:rotate(-7deg); }
  50%{ transform:rotate(9deg); }
}
@keyframes catSpeak{
  0%,100%{ transform:translateY(0); }
  25%{ transform:translateY(-4px) rotate(-2deg); }
  75%{ transform:translateY(-2px) rotate(2deg); }
}
@keyframes catApprove{
  0%{ transform:translateY(0) scaleY(1); }
  40%{ transform:translateY(-8px) scaleY(1.06); }
  100%{ transform:translateY(0) scaleY(1); }
}
@keyframes catDeny{
  0%{ transform:translateX(0); }
  35%{ transform:translateX(-10px) rotate(-4deg); }
  70%{ transform:translateX(6px); }
  100%{ transform:translateX(0); }
}
@keyframes catExpire{
  0%{ opacity:1; transform:translateY(0); }
  100%{ opacity:0; transform:translateY(18px) scale(.9); }
}
@keyframes sceneIn{
  0%{ opacity:.4; transform:scale(.985); }
  100%{ opacity:1; transform:scale(1); }
}
@keyframes cardIn{
  0%{ opacity:0; transform:translateY(14px) scale(.97); }
  100%{ opacity:1; transform:translateY(0) scale(1); }
}
@keyframes toastIn{
  0%{ opacity:0; transform:translateX(-50%) translateY(10px); }
  100%{ opacity:1; transform:translateX(-50%) translateY(0); }
}

/* ================= responsive ================= */
@media (min-width:720px){
  .hud{ gap:14px; padding:12px 18px; }
  .hud-stats{ flex:0 0 auto; order:0; justify-content:flex-start; }
  .room-tag{ width:58px; height:58px; }
  .room-tag-num{ font-size:23px; }
  .candle{ flex:1 1 180px; max-width:320px; }
  .stage{ padding:12px 18px 14px; }
  .q-opts{ grid-template-columns:1fr 1fr; }
  .stage-bar{ font-size:13px; }
}

@media (min-width:1024px){
  .shell{ grid-template-columns:minmax(0,1fr) 320px; }
  .notebook{
    position:static; transform:none; width:auto;
    box-shadow:none; border-inline-start:1px solid var(--line-soft);
    z-index:auto;
  }
  .nb-close{ display:none; }
  .scrim{ display:none !important; }
  .scene{ min-height:280px; }
}

@media (max-height:520px){
  .stage-bar{ display:none; }
  .scene{ min-height:150px; }
  .intro-art{ height:74px; }
  .intro-ghost{ height:74px; }
  .intro-cat{ height:40px; }
  .intro-title{ font-size:28px; }
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}