/* لایه‌ی سه‌بعدی — از forward-generate-3d/style.css
   همه چیز زیر #sceneLayer محدود شده تا با اسلایدهای دوبعدی تداخل نکند.
   قواعد body/nav/hint حذف شده‌اند؛ shell.css و deck.css آن‌ها را دارند. */

#sceneLayer { position: fixed; inset: 0; z-index: 1; }
#sceneLayer[hidden] { display: none; }

#scene { position: absolute; inset: 0; }
#scene canvas { display: block; }
/* CSS2DRenderer overlay */
#scene > div { pointer-events: none; }

/* ---- 3D labels ---- */
#sceneLayer .lbl {
  /* left/top anchor the absolute element at the overlay origin — without this,
     dir="rtl" pushes the static position to the right edge (off-screen) */
  left: 0;
  top: 0;
  direction: rtl;
  pointer-events: none;
  text-align: center;
  line-height: 1.15;
  white-space: nowrap;
  text-shadow: 0 1px 4px #000c;
}
#sceneLayer .lbl .ch {
  font-size: 16px; font-weight: 700; color: #fff; display: block;
  /* crisp dark outline so the character stays legible on any cube colour */
  text-shadow: 0 0 2px #000, 0 0 4px #000, 0 1px 2px #000e;
}
#sceneLayer .lbl .id {
  font-family: 'Courier New', monospace; font-size: 9px; font-weight: 700;
  color: #d6d0ff; display: block; direction: ltr; text-shadow: 0 1px 2px #000;
}
#sceneLayer .lbl.dim { opacity: .38; }
#sceneLayer .lbl.small .ch { font-size: 11px; }
#sceneLayer .lbl.small .id { font-size: 7px; }
/* NOTE: on-cube labels (a token's character/id, a cell's numeric value) are no longer DOM —
   they're depth-tested sprites drawn inside the WebGL scene (see charSprite/valSprite in
   scene.js), so cubes in front correctly occlude them. The .ch/.id rules above still style
   the free-floating header/axis labels that remain CSS2D. */
#sceneLayer .lbl.rowlab { font-size: 12px; color: #9090b8; direction: rtl; }
#sceneLayer .lbl.badge3d {
  font-family: 'Courier New', monospace; font-size: 12px; color: #c8c0ff;
  background: #16162899; border: 1px solid #323260; border-radius: 6px;
  padding: 2px 8px; direction: ltr;
}
#sceneLayer .lbl.big {
  font-size: 17px; font-weight: 700; color: #fff;
  background: #7c6ee033; border: 1px solid #7c6ee0; border-radius: 8px;
  padding: 4px 14px; direction: rtl;
}
#sceneLayer .lbl.loss {
  font-family: 'Courier New', monospace; font-size: 15px; font-weight: 700;
  color: #ffd060; direction: ltr;
}
#sceneLayer .lbl.pct {
  font-family: 'Courier New', monospace; font-size: 10px; color: #d8d0ff; direction: ltr;
}

/* ---- top bar (act pill + step title + shape badge) ---- */
#topbar {
  position: absolute; top: 52px; left: 0; right: 0;
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  pointer-events: none; z-index: 10;
}
#topbar .pill {
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
  color: #7c6ee0; background: #7c6ee022;
  padding: 3px 14px; border-radius: 99px; margin: 0;
}
#topbar h1 { font-size: 1.25rem; font-weight: 700; color: #fff; text-align: center; margin: 0; }
#shapeBadge {
  font-family: 'Courier New', monospace; font-size: .85rem; color: #ffd060;
  direction: ltr; min-height: 1.3em; transition: transform .25s;
}
#shapeBadge.pulse { transform: scale(1.25); }

/* ---- code panel ---- */
#codePanel {
  position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
  width: 348px; max-height: 58vh; overflow: auto;
  background: #12121fd9; border: 1px solid #282848; border-radius: 12px;
  padding: 12px 0 12px; z-index: 10;
  backdrop-filter: blur(6px);
}
#codeTitle {
  font-family: 'Courier New', monospace; font-size: .68rem; color: #44446a;
  padding: 0 14px 8px; border-bottom: 1px solid #1e1e38; margin-bottom: 6px;
}
#codeLines { font-family: 'Courier New', monospace; font-size: .72rem; line-height: 1.75; }
#codeLines .ln {
  padding: 0 14px; color: #7878a8; white-space: pre;
  border-left: 3px solid transparent;
  transition: background .3s, color .3s;
}
#codeLines .ln.hl { background: #7c6ee02e; color: #fff; border-left-color: #7c6ee0; }
#codeLines .ln.sep { color: #303052; }
#codeLines .kw { color: #c792ea; }
#codeLines .fn { color: #82aaff; }
#codeLines .cm { color: #4a4a70; }

/* ---- narration ---- */
#narration {
  position: absolute; right: 16px; bottom: 82px;
  width: min(430px, 42vw);
  background: #12121fd9; border: 1px solid #282848; border-radius: 12px;
  padding: 16px 18px; z-index: 10;
  font-size: .9rem; line-height: 1.95; color: #b8b4dd;
  backdrop-filter: blur(6px);
  direction: rtl; text-align: right;
}
#narration strong { color: #fff; font-weight: 700; }
#narration code {
  color: #a48cff; font-family: 'Courier New', monospace;
  font-size: .82em; direction: ltr; display: inline-block;
  background: #1a1a30; padding: 0 5px; border-radius: 4px;
}
#narration .num { color: #ffd060; font-family: 'Courier New', monospace; direction: ltr; display: inline-block; }

/* ---- generate HUD ---- */
#tokenHUD {
  position: absolute; top: 148px; right: 20px; z-index: 10;
  font-family: 'Courier New', monospace; font-size: .85rem; color: #2bcc6b;
  background: #12121fd9; border: 1px solid #2bcc6b44; border-radius: 10px;
  padding: 8px 16px; direction: ltr; display: none;
}
#readout {
  position: absolute; bottom: 82px; left: 50%; transform: translateX(-50%);
  max-width: 46vw; z-index: 10;
  background: #12121fd9; border: 1px solid #282848; border-radius: 10px;
  padding: 8px 18px; display: none;
  font-size: 1.05rem; color: #e8e4ff; letter-spacing: .5px;
  direction: rtl; text-align: right; white-space: pre-wrap; line-height: 1.8;
}
#readout .new { color: #2bcc6b; }
#readout .cur { border-bottom: 2px solid #ffd060; }


/* اسکلتِ بارگذاری تا وقتی three.js از شبکه برسد */
#sceneLoading {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  z-index: 12; text-align: center; direction: rtl;
  color: #9090b8; font-size: .92rem; line-height: 1.95;
  background: #12121fd9; border: 1px solid #282848; border-radius: 12px;
  padding: 18px 26px; max-width: 420px;
}
#sceneLoading[hidden] { display: none; }