/* ── COMPONENTS ──────────────────────────────────────────────
   Buttons, HUD, dialogue bar, post-its, animations
──────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════ */
#header-title {
  font-family: var(--display);
  font-size: 1rem;
  letter-spacing: .12em;
  color: var(--amber2);
}
#header-stats {
  display: flex;
  gap: 20px;
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(200,144,58,.6);
  letter-spacing: .08em;
}

/* ═══════════════════════════════════════════════════════════
   LIBRARY SHELF COMPONENTS
═══════════════════════════════════════════════════════════ */
.shelf-label {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  color: rgba(200,144,58,.4);
  text-transform: uppercase;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
  margin-bottom: 4px;
}

/* Tome HUD buttons — the tactile spines on the shelf */
.tome-hud {
  background: var(--ink2);
  color: var(--parch);
  padding: 12px 14px;
  border-radius: 4px 12px 12px 4px;
  cursor: pointer;
  border: 1px solid var(--amber);
  text-align: left;
  box-shadow: 3px 3px 10px rgba(0,0,0,0.5);
  transition: transform 0.2s, background 0.2s;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
}
.tome-hud:hover {
  transform: translateX(-5px);
  background: var(--ink);
}
.tome-icon {
  font-size: 9px;
  color: var(--amber);
  letter-spacing: .1em;
}
.tome-name {
  color: var(--parch);
  font-family: var(--display);
  font-size: 0.82rem;
  letter-spacing: .04em;
  font-weight: 400;
}
.tome-sub {
  color: rgba(200,144,58,.5);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: .08em;
}

/* ═══════════════════════════════════════════════════════════
   SHELF BOOKS — navigation objects sitting on the upper shelf
   Positioned programmatically by scene.js positionShelfBooks()
═══════════════════════════════════════════════════════════ */
#shelf-books {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 20;
}
.shelf-book {
  position: absolute;
  border: none;
  cursor: pointer;
  border-radius: 2px 2px 1px 1px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 3px 6px;
  pointer-events: all;
  transition: transform 0.18s ease, filter 0.18s ease;
  box-shadow:
    2px 0 8px rgba(0,0,0,0.8),
    -1px 0 4px rgba(0,0,0,0.6),
    0 6px 12px rgba(0,0,0,0.7),
    inset 1px 0 0 rgba(255,255,255,0.08),
    inset -1px 0 0 rgba(0,0,0,0.5);
  /* Dark warm-brown shelf fallback — shows through PNG transparency
     instead of the browser's checkerboard pattern. JS overrides this
     with the per-book color for the no-art fallback state. */
  background-color: #2a1a0a;
}
.shelf-book::before {
  /* Spine highlight strip */
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: rgba(255,255,255,0.08);
  border-radius: 2px 0 0 0;
}
.shelf-book:hover {
  transform: translateY(-7px);
  filter: brightness(1.25);
  z-index: 21;
}
.shelf-book:active { transform: translateY(-3px); }
.book-label {
  font-family: var(--serif);
  font-size: 11px;
  color: rgba(245,222,155,0.95);
  text-align: center;
  line-height: 1.25;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9);
  pointer-events: none;
  font-style: italic;
  letter-spacing: 0.02em;
}
/* Book image (once proper spine art arrives — tall narrow PNG, no bg) */
.book-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 2px;
  display: none;
  /* no mix-blend-mode — book PNGs have backgrounds stripped via Pillow */
}
.shelf-book.has-art .book-img   { display: block; }
.shelf-book.has-art .book-label { display: none; }
/* background stays as the warm brown shelf color — transparent PNG areas show it */

/* ═══════════════════════════════════════════════════════════
   POST-IT PLACEHOLDERS
   Used in the demo to show where future content will go
═══════════════════════════════════════════════════════════ */
.postit {
  background: #f5e87a;
  color: #2a2000;
  font-family: var(--mono);
  font-size: 11px;
  line-height: 1.5;
  padding: 10px 12px;
  border-radius: 2px;
  box-shadow: 2px 3px 8px rgba(0,0,0,0.4),
              inset 0 -1px 0 rgba(0,0,0,.08);
  transform: rotate(-1.5deg);
  letter-spacing: .02em;
  cursor: default;
  transition: transform .2s;
}
.postit:nth-child(even) { transform: rotate(1deg); }
.postit:hover { transform: rotate(0deg) scale(1.03); }

/* ═══════════════════════════════════════════════════════════
   DOOR SCREEN — HANGING SIGNS
═══════════════════════════════════════════════════════════ */

.door-hang-sign {
  position: relative;
  width: min(150px, calc(50vw - 34px));
  padding: 22px 18px 18px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 11px,
      rgba(0,0,0,0.06) 11px, rgba(0,0,0,0.06) 12px
    ),
    linear-gradient(160deg, #5a3612 0%, #7a5020 35%, #6a4218 65%, #4a2e0c 100%);
  border: 2px solid #8a6030;
  border-top-color: #a07840;
  border-bottom-color: #3a2008;
  border-radius: 3px;
  box-shadow:
    4px 6px 20px rgba(0,0,0,.75),
    inset 0 1px 0 rgba(255,210,120,.1),
    inset 2px 0 0 rgba(255,255,255,.04),
    inset -2px 0 0 rgba(0,0,0,.25);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: transform .2s ease, filter .2s ease;
  transform-origin: top center;
  margin-top: 14px; /* room for the nail above */
}
/* Nail at top */
.door-hang-sign::before {
  content: '';
  position: absolute;
  top: -11px;
  left: 50%;
  transform: translateX(-50%);
  width: 10px;
  height: 10px;
  background: radial-gradient(circle at 35% 35%, #c0a060, #6a5030);
  border-radius: 50%;
  box-shadow: 0 2px 5px rgba(0,0,0,.7);
}
/* String from nail */
.door-hang-sign::after {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 8px;
  background: rgba(120,90,50,.6);
}
.door-hang-sign:hover {
  transform: translateY(-4px) rotate(-1deg);
  filter: brightness(1.2);
}
.door-hang-sign:active {
  transform: translateY(0) rotate(0deg);
}
.door-hang-sign--dim {
  filter: brightness(.45) saturate(.4);
  cursor: default;
  pointer-events: none;
}
.door-hang-sign--dim:hover { transform: none; filter: brightness(.45) saturate(.4); }

.hang-sign-icon {
  font-size: 18px;
  color: rgba(245,200,100,.7);
  line-height: 1;
}
.hang-sign-title {
  font-family: var(--display);
  font-size: 13px;
  color: rgba(245,222,155,.95);
  letter-spacing: .06em;
  text-align: center;
  line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,.8);
}
.hang-sign-sub {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(200,144,58,.55);
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   DOOR SCREEN — PARCHMENT (NEW GAME)
═══════════════════════════════════════════════════════════ */

.door-parchment {
  width: min(300px, calc(100vw - 48px));
  padding: 24px 28px;
  background:
    linear-gradient(170deg, #e8d8a8 0%, #dcc88c 40%, #e0d09c 70%, #d4bc80 100%);
  border-radius: 2px 2px 3px 3px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.7),
    inset 0 0 40px rgba(0,0,0,.08);
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
}
/* Aged edge */
.door-parchment::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  box-shadow: inset 0 0 12px rgba(100,60,0,.25);
  pointer-events: none;
}
.parchment-heading {
  font-family: var(--display);
  font-size: 14px;
  color: #3a2408;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}
.parchment-rule {
  height: 1px;
  background: rgba(100,60,0,.25);
  margin: -4px 0;
}
.parchment-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(80,40,0,.6);
}
#door-name-input {
  width: 100%;
  padding: 8px 10px;
  background: rgba(255,250,230,.6);
  border: none;
  border-bottom: 1.5px solid rgba(100,60,0,.4);
  border-radius: 0;
  color: #2a1804;
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  letter-spacing: .04em;
  outline: none;
  transition: border-color .15s;
}
#door-name-input:focus { border-bottom-color: rgba(100,60,0,.85); }
#door-name-input::placeholder {
  color: rgba(100,60,0,.3);
  font-style: italic;
}
.parchment-submit {
  margin-top: 4px;
  padding: 10px 0;
  background: rgba(80,40,0,.12);
  border: 1px solid rgba(80,40,0,.3);
  border-radius: 1px;
  color: #3a2008;
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .15s;
}
.parchment-submit:hover { background: rgba(80,40,0,.22); }

/* Inline error */
.door-error {
  color: rgba(160,40,20,.9);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  margin-top: -6px;
}
.door-error.hidden { display: none; }

/* ═══════════════════════════════════════════════════════════
   DOOR SCREEN — PINBOARD (LOAD GAME)
═══════════════════════════════════════════════════════════ */

.door-pinboard {
  width: min(320px, calc(100vw - 40px));
  padding: 18px 20px 20px;
  background:
    repeating-linear-gradient(
      0deg,
      transparent, transparent 19px,
      rgba(0,0,0,.04) 19px, rgba(0,0,0,.04) 20px
    ),
    linear-gradient(160deg, #8b5e3c 0%, #7a5232 100%);
  border: 3px solid #6a4228;
  border-radius: 3px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.75),
    inset 0 0 20px rgba(0,0,0,.2);
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pinboard-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(245,200,100,.45);
  text-align: center;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(245,200,100,.15);
}

/* Save cards — styled as pinned name tags */
.save-card {
  width: 100%;
  display: flex;
  align-items: stretch;
  background: linear-gradient(160deg, #e8d8a4 0%, #d8c484 100%);
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 1px 2px 6px rgba(0,0,0,.5);
  transition: transform .15s, box-shadow .15s;
  cursor: pointer;
  position: relative;
}
.save-card:hover {
  transform: translateY(-2px);
  box-shadow: 2px 4px 12px rgba(0,0,0,.6);
}
/* Pin at top-left */
.save-card::before {
  content: '';
  position: absolute;
  top: -5px;
  left: 50%;
  transform: translateX(-50%);
  width: 8px;
  height: 8px;
  background: radial-gradient(circle at 35% 35%, #e05030, #801808);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,.6);
  z-index: 1;
}
.save-card-body {
  flex: 1;
  padding: 10px 14px;
  text-align: left;
  background: none;
  border: none;
  cursor: pointer;
}
.save-card-name {
  font-family: var(--display);
  font-size: 15px;
  color: #2a1804;
  letter-spacing: .03em;
  margin-bottom: 3px;
}
.save-card-meta {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(80,40,0,.55);
  letter-spacing: .08em;
}
.save-card-delete {
  flex-shrink: 0;
  padding: 0 12px;
  background: none;
  border: none;
  border-left: 1px solid rgba(80,40,0,.15);
  color: rgba(160,40,20,.4);
  font-family: var(--mono);
  font-size: 16px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  align-items: center;
}
.save-card-delete:hover {
  background: rgba(160,40,20,.15);
  color: rgba(200,50,20,.9);
}

/* ── Back link (shared) ── */
.door-btn-back {
  background: none;
  border: none;
  color: rgba(200,144,58,.4);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  padding: 4px 0;
  transition: color .15s;
}
.door-btn-back:hover { color: rgba(200,144,58,.8); }

/* ═══════════════════════════════════════════════════════════
   DIALOGUE BAR COMPONENTS
═══════════════════════════════════════════════════════════ */
#db-portrait {
  flex-shrink: 0;
  width: 110px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
  padding-bottom: 14px;
}
#db-portrait-frame {
  width: 88px;
  height: 108px;
  border-radius: 3px;
  border: 1px solid rgba(200,144,58,.35);
  background: rgba(10,8,4,.8);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
#db-speaker-name {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: rgba(200,144,58,.8);
  text-transform: uppercase;
}
#db-text-panel {
  flex: 1;
  padding: 18px 24px 20px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
#db-text {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.75;
  color: rgba(235,215,175,.95);
  min-height: 56px;
}
#db-continue {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .12em;
  color: rgba(200,144,58,.65);
  cursor: pointer;
  align-self: flex-end;
  transition: color .15s;
  user-select: none;
}
#db-continue:hover { color: rgba(200,144,58,.95); }
.db-hidden { display: none !important; }
#db-text.db-narrator {
  font-style: italic;
  color: rgba(200,180,140,.78);
  font-size: 20px;
  letter-spacing: .02em;
}

/* ═══════════════════════════════════════════════════════════
   LESSON SCREEN COMPONENTS
═══════════════════════════════════════════════════════════ */
#ls-header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 26px 10px;
  border-bottom: 1px solid rgba(200,144,58,.18);
  background: rgba(0,0,0,.2);
}
#ls-subtitle {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(200,144,58,.4);
}
#ls-title {
  font-family: var(--display);
  font-size: 18px;
  color: var(--amber2);
  letter-spacing: .04em;
}
#ls-close {
  background: none;
  border: 1px solid rgba(200,144,58,.2);
  color: rgba(200,144,58,.5);
  font-family: var(--mono);
  font-size: 12px;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 1px;
  text-transform: uppercase;
  letter-spacing: .08em;
  transition: all .15s;
}
#ls-close:hover { color: var(--amber2); border-color: rgba(200,144,58,.5); }
#ls-body {
  flex: 1;
  overflow-y: auto;
  padding: 22px 30px;
}
#ls-body::-webkit-scrollbar { width: 4px; }
#ls-body::-webkit-scrollbar-thumb { background: rgba(200,144,58,.2); }
#ls-tiers {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 20px 6px;
  border-bottom: 1px solid rgba(200,144,58,.1);
}

/* ═══════════════════════════════════════════════════════════
   GENERAL UI COMPONENTS
═══════════════════════════════════════════════════════════ */

/* Standard amber button */
.btn-amber {
  background: transparent;
  border: 1px solid var(--amber);
  color: var(--amber2);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  padding: 10px 24px;
  cursor: pointer;
  border-radius: 1px;
  transition: all .2s;
  text-transform: uppercase;
  font-weight: 400;
}
.btn-amber:hover { background: rgba(200,144,58,.12); }
.btn-amber.active { background: rgba(200,144,58,.2); }

/* Feedback states */
.feedback-correct { color: rgba(80,200,100,.9); }
.feedback-wrong   { color: rgba(200,144,58,.6); }

/* ═══════════════════════════════════════════════════════════
   ANIMATIONS
═══════════════════════════════════════════════════════════ */
.ink-bleed {
  animation: inkFade 1.2s ease-in-out forwards;
}
@keyframes inkFade {
  0%   { opacity: 0; filter: contrast(150%) brightness(50%) blur(5px); }
  100% { opacity: 1; filter: contrast(100%) brightness(100%) blur(0); }
}

@keyframes sparkle-float {
  0%   { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-40px) scale(.5); }
}

@keyframes bubble-wobble {
  0%   { transform: translateY(0px) rotate(-2deg); }
  100% { transform: translateY(-6px) rotate(2deg); }
}

/* ── SCROLLBARS (global) ── */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-thumb { background: rgba(200,144,58,.15); border-radius: 2px; }
::-webkit-scrollbar-track { background: transparent; }

/* ═══════════════════════════════════════════════════════════
   LESSON SCREEN — TIER NAVIGATION
═══════════════════════════════════════════════════════════ */
.ls-tier-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 6px 8px;
  background: none;
  border: 1px solid transparent;
  border-radius: 2px;
  cursor: default;
  transition: all .15s;
}
.ls-tier-tab.unlocked {
  cursor: pointer;
  border-color: rgba(200,144,58,.18);
}
.ls-tier-tab.unlocked:hover {
  background: rgba(200,144,58,.07);
  border-color: rgba(200,144,58,.35);
}
.ls-tier-tab.active {
  background: rgba(200,144,58,.14);
  border-color: rgba(200,144,58,.45);
}
.ls-tier-tab.locked { opacity: .3; }
.tier-num {
  font-family: var(--display);
  font-size: 14px;
  color: var(--amber2);
  line-height: 1;
}
.tier-label {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,144,58,.55);
}

/* Tier description — plain-language explanation of what this stage is */
.ls-tier-desc {
  width: 100%;
  padding: 10px 18px 6px;
  font-family: var(--serif);
  font-size: 14px;
  font-style: italic;
  color: rgba(200,180,140,.6);
  border-top: 1px solid rgba(200,144,58,.1);
  margin-top: 2px;
}

/* ── LESSON FOOTER ── */
#ls-footer {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 30px 18px;
  border-top: 1px solid rgba(200,144,58,.1);
  background: rgba(0,0,0,.15);
}

/* ═══════════════════════════════════════════════════════════
   LESSON TASK — SHARED
═══════════════════════════════════════════════════════════ */
.ls-task {
  display: flex;
  flex-direction: column;
  gap: 22px;
}
.task-prompt {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.75;
  color: rgba(235,215,175,.92);
  max-width: 640px;
}
.examiner-prompt {
  font-size: 18px;
  border-left: 3px solid rgba(200,144,58,.35);
  padding-left: 16px;
}
.ls-result {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: .05em;
  line-height: 1.6;
  padding: 12px 16px;
  border-radius: 2px;
  max-width: 560px;
}
.ls-result.correct {
  background: rgba(60,160,80,.12);
  border: 1px solid rgba(60,160,80,.3);
  color: rgba(100,210,120,.9);
}
.ls-result.incorrect {
  background: rgba(180,60,30,.1);
  border: 1px solid rgba(180,60,30,.25);
  color: rgba(220,120,90,.9);
}
.result-hint {
  display: block;
  margin-top: 4px;
  opacity: .8;
}
.ls-hidden { display: none !important; }

/* Tier-complete screen */
.ls-tier-complete {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 60px 30px;
  text-align: center;
}
.tier-complete-title {
  font-family: var(--display);
  font-size: 22px;
  color: var(--amber2);
  letter-spacing: .08em;
}
.tier-complete-sub {
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(200,144,58,.55);
  letter-spacing: .06em;
}

/* Progress dots */
.ls-progress {
  display: flex;
  gap: 6px;
  align-items: center;
  margin-left: auto;
}
.ls-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(200,144,58,.18);
  border: 1px solid rgba(200,144,58,.3);
  transition: background .2s;
}
.ls-dot.current { background: rgba(200,144,58,.55); }
.ls-dot.done    { background: rgba(60,160,80,.7); border-color: rgba(60,160,80,.5); }

/* Submit / continue buttons */
.ls-submit-btn {
  background: transparent;
  border: 1px solid rgba(200,144,58,.4);
  color: var(--amber2);
  font-family: var(--display);
  font-size: 12px;
  letter-spacing: .14em;
  text-transform: uppercase;
  padding: 9px 22px;
  cursor: pointer;
  border-radius: 1px;
  transition: all .15s;
  white-space: nowrap;
}
.ls-submit-btn:hover {
  background: rgba(200,144,58,.1);
  border-color: rgba(200,144,58,.7);
}
.ls-continue-btn {
  border-color: rgba(60,160,80,.5);
  color: rgba(100,210,120,.9);
}
.ls-continue-btn:hover {
  background: rgba(60,160,80,.1);
  border-color: rgba(60,160,80,.8);
}

/* Inline text-style button (hide/show tray) */
.ls-text-btn {
  background: none;
  border: none;
  color: rgba(200,144,58,.45);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color .15s;
  align-self: flex-start;
}
.ls-text-btn:hover { color: rgba(200,144,58,.8); }

/* ═══════════════════════════════════════════════════════════
   SORTING TRAY (Tier 1)
═══════════════════════════════════════════════════════════ */
.tray-pile {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.tray-pile-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
  white-space: nowrap;
}
.tray-pile-dots {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  align-items: center;
}
.tray-pile-count {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(200,144,58,.5);
  white-space: nowrap;
}
.pile-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, rgba(200,144,58,.9), rgba(120,70,10,.8));
  border: 1px solid rgba(200,144,58,.4);
  box-shadow: 0 1px 3px rgba(0,0,0,.5);
  flex-shrink: 0;
}

.tray-sections {
  display: flex;
  gap: 8px;
  align-items: stretch;
}
.tray-section {
  flex: 1;
  min-width: 60px;
  min-height: 90px;
  max-width: 120px;
  border: 1.5px solid rgba(200,144,58,.3);
  border-radius: 2px;
  background: rgba(200,144,58,.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 8px 6px 6px;
  gap: 6px;
  transition: background .2s;
}
.tray-section-dots {
  flex: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  justify-content: center;
  padding: 4px;
}
.tray-section-count {
  font-family: var(--display);
  font-size: 18px;
  color: var(--amber2);
  line-height: 1;
  min-height: 22px;
}

.tray-adjuster {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tray-adj-btn {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,144,58,.4);
  background: rgba(200,144,58,.06);
  color: var(--amber2);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
  font-family: var(--mono);
}
.tray-adj-btn:hover {
  background: rgba(200,144,58,.18);
  border-color: rgba(200,144,58,.7);
}
.tray-adj-btn:active { transform: scale(.9); }
.tray-adj-val {
  font-family: var(--display);
  font-size: 28px;
  color: var(--amber2);
  min-width: 36px;
  text-align: center;
  line-height: 1;
}
.tray-adj-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  color: rgba(200,144,58,.45);
  text-transform: uppercase;
}

/* ═══════════════════════════════════════════════════════════
   FRACTION VISUAL BAR
═══════════════════════════════════════════════════════════ */
.frac-visual-wrap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 480px;
}
.frac-bar-vis {
  display: grid;
  grid-template-columns: repeat(var(--total), 1fr);
  gap: 4px;
  height: 52px;
}
.frac-bar-cell {
  border-radius: 2px;
  border: 1.5px solid rgba(200,144,58,.28);
  transition: background .2s;
}
.frac-bar-cell.filled {
  background: rgba(200,144,58,.55);
  border-color: rgba(200,144,58,.6);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.frac-bar-cell.empty {
  background: rgba(200,144,58,.06);
}
.frac-bar-label {
  display: flex;
  gap: 10px;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
}
.fbar-filled { color: rgba(200,144,58,.8); }
.fbar-sep    { color: rgba(200,144,58,.25); }
.fbar-total  { color: rgba(200,144,58,.45); }

/* ═══════════════════════════════════════════════════════════
   FRACTION CHOICES (Tier 2)
═══════════════════════════════════════════════════════════ */
.ls-choices {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ls-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 14px 22px;
  background: rgba(200,144,58,.05);
  border: 1.5px solid rgba(200,144,58,.25);
  border-radius: 2px;
  cursor: pointer;
  transition: all .15s;
  min-width: 72px;
}
.ls-choice-btn:hover {
  background: rgba(200,144,58,.12);
  border-color: rgba(200,144,58,.5);
}
.ls-choice-btn.selected {
  background: rgba(200,144,58,.22);
  border-color: rgba(200,144,58,.8);
}
.choice-num {
  font-family: var(--display);
  font-size: 22px;
  color: var(--amber2);
  line-height: 1;
}
.choice-bar {
  font-size: 14px;
  color: rgba(200,144,58,.6);
  line-height: 1;
  letter-spacing: -.05em;
}
.choice-den {
  font-family: var(--display);
  font-size: 22px;
  color: rgba(200,144,58,.7);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   FRACTION WRITE INPUT (Tier 3 + Examiner)
═══════════════════════════════════════════════════════════ */
.frac-write-row {
  display: flex;
  align-items: center;
  gap: 16px;
}
.frac-write-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
  white-space: nowrap;
}
.frac-stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.frac-input {
  width: 64px;
  height: 48px;
  text-align: center;
  background: rgba(200,144,58,.06);
  border: 1.5px solid rgba(200,144,58,.3);
  border-radius: 2px;
  color: var(--amber2);
  font-family: var(--display);
  font-size: 26px;
  outline: none;
  transition: border-color .15s;
  -moz-appearance: textfield;
}
.frac-input::-webkit-inner-spin-button,
.frac-input::-webkit-outer-spin-button { -webkit-appearance: none; }
.frac-input:focus { border-color: rgba(200,144,58,.7); }
.frac-input::placeholder { color: rgba(200,144,58,.2); font-size: 22px; }
.frac-divider {
  width: 52px;
  height: 2px;
  background: rgba(200,144,58,.5);
  border-radius: 1px;
}

/* ═══════════════════════════════════════════════════════════
   EXAMINER — BRIDGE
═══════════════════════════════════════════════════════════ */
.ls-bridge-btn {
  background: none;
  border: 1px dashed rgba(200,144,58,.35);
  color: rgba(200,144,58,.55);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 8px 16px;
  cursor: pointer;
  border-radius: 1px;
  transition: all .15s;
  align-self: flex-start;
  text-transform: uppercase;
}
.ls-bridge-btn:hover {
  border-color: rgba(200,144,58,.6);
  color: rgba(200,144,58,.85);
}
.ls-bridge {
  background: rgba(200,144,58,.07);
  border: 1px solid rgba(200,144,58,.25);
  border-left: 3px solid rgba(200,144,58,.5);
  border-radius: 2px;
  padding: 14px 18px;
  font-family: var(--serif);
  font-style: italic;
  font-size: 15px;
  line-height: 1.75;
  color: rgba(235,215,175,.85);
  max-width: 540px;
}

/* ═══════════════════════════════════════════════════════════
   PANELS — SHARED CHROME
═══════════════════════════════════════════════════════════ */
.panel-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.panel-hdr {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 28px 14px;
  border-bottom: 1px solid rgba(200,144,58,.2);
  background: rgba(0,0,0,.2);
}
.panel-hdr-title {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .08em;
  color: var(--amber2);
}
.panel-hdr-close {
  background: none;
  border: 1px solid rgba(200,144,58,.2);
  color: rgba(200,144,58,.45);
  font-family: var(--mono);
  font-size: 14px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  border-radius: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .15s;
}
.panel-hdr-close:hover {
  color: var(--amber2);
  border-color: rgba(200,144,58,.5);
}
.panel-bdy {
  flex: 1;
  overflow-y: auto;
  padding: 24px 28px;
}
.panel-bdy::-webkit-scrollbar { width: 3px; }
.panel-stub {
  padding: 40px 0;
  font-family: var(--mono);
  font-size: 13px;
  color: rgba(200,144,58,.35);
  letter-spacing: .06em;
  text-align: center;
}
.panel-empty {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(200,144,58,.3);
  letter-spacing: .06em;
  padding: 30px 0;
}

/* ═══════════════════════════════════════════════════════════
   GRIMOIRE PANEL
═══════════════════════════════════════════════════════════ */

/* Empty state */
.grm-empty {
  padding: 60px 0;
  text-align: center;
}
.grm-empty-title {
  font-family: var(--display);
  font-size: 20px;
  color: rgba(200,144,58,.5);
  margin-bottom: 10px;
}
.grm-empty-sub {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(200,180,140,.3);
}

/* Grimoire panel needs flush body so sidebar bleeds to edge */
#grimoire-panel .panel-bdy {
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Layout: sidebar + main */
.grm-wrap {
  display: flex;
  height: 100%;
  gap: 0;
}
.grm-sidebar {
  flex-shrink: 0;
  width: 190px;
  border-right: 1px solid rgba(200,144,58,.15);
  padding: 12px 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow-y: auto;
}
.grm-tab {
  display: block;
  width: 100%;
  padding: 10px 16px;
  background: none;
  border: none;
  text-align: left;
  font-family: var(--serif);
  font-size: 13px;
  color: rgba(200,180,140,.5);
  cursor: pointer;
  border-left: 2px solid transparent;
  transition: all .15s;
}
.grm-tab:hover {
  color: rgba(200,180,140,.85);
  background: rgba(200,144,58,.05);
}
.grm-tab.active {
  color: var(--amber2);
  border-left-color: rgba(200,144,58,.6);
  background: rgba(200,144,58,.07);
}
.grm-main {
  flex: 1;
  overflow-y: auto;
  padding: 28px 32px;
}

/* Entry */
.grm-entry-hdr {
  margin-bottom: 24px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(200,144,58,.15);
}
.grm-entry-title {
  font-family: var(--display);
  font-size: 22px;
  color: var(--amber2);
  letter-spacing: .06em;
  margin-bottom: 4px;
}
.grm-entry-category {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,144,58,.4);
}

/* Two-column body */
.grm-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
}
.grm-col-hdr {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
  margin-bottom: 16px;
  padding-bottom: 6px;
  border-bottom: 1px solid rgba(200,144,58,.1);
}

/* Rule items */
.grm-rules {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 20px;
}
.grm-rule-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.grm-rule-term {
  font-family: var(--serif);
  font-size: 14px;
  font-weight: bold;
  color: rgba(200,180,140,.9);
}
.grm-rule-def {
  font-family: var(--serif);
  font-size: 13px;
  color: rgba(200,180,140,.6);
  line-height: 1.5;
}

/* Notes */
.grm-notes {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 12px 14px;
  background: rgba(200,144,58,.04);
  border-left: 2px solid rgba(200,144,58,.2);
}
.grm-note {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,180,140,.5);
  line-height: 1.5;
}

/* Examples */
.grm-examples {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.grm-example {
  display: flex;
  align-items: center;
  gap: 14px;
}
.grm-example-label {
  font-family: var(--serif);
  font-size: 13px;
  color: rgba(200,180,140,.6);
  font-style: italic;
}

/* Fraction bar in grimoire */
.grm-frac-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.grm-frac-bar {
  display: flex;
  gap: 3px;
}
.grm-frac-cell {
  width: 18px;
  height: 18px;
  border-radius: 2px;
  border: 1px solid rgba(200,144,58,.3);
}
.grm-frac-cell.filled {
  background: rgba(200,144,58,.55);
}
.grm-frac-cell.empty {
  background: rgba(10,8,4,.4);
}
.grm-frac-num {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  min-width: 22px;
}
.grm-n, .grm-d {
  font-family: var(--display);
  font-size: 13px;
  color: var(--amber2);
  line-height: 1;
}
.grm-slash {
  font-size: 11px;
  color: rgba(200,144,58,.4);
  line-height: 1;
}

/* ═══════════════════════════════════════════════════════════
   SNAP-COMPARE — dual tray layout
═══════════════════════════════════════════════════════════ */
.snap-compare-wrap {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0 auto 12px;
  max-width: 560px;
}
.snap-compare-side {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.snap-compare-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,144,58,.4);
}
.snap-compare-eq {
  font-family: var(--display);
  font-size: 28px;
  color: rgba(200,144,58,.3);
  align-self: center;
  padding-top: 28px;
}
.snap-compare-fraction {
  font-family: var(--display);
  font-size: 16px;
  color: rgba(200,180,140,.6);
  letter-spacing: .04em;
}
/* Left tray — static, not clickable */
.snap-comp--static {
  cursor: default;
  min-height: 90px;
  width: 100%;
  pointer-events: none;
}
.snap-comp--static:hover {
  border-color: rgba(200,144,58,.32);
  box-shadow: none;
}

/* ═══════════════════════════════════════════════════════════
   EQUIV-WRITE — fraction equation input
═══════════════════════════════════════════════════════════ */
.equiv-source-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  margin: 20px 0;
}
.equiv-frac {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.equiv-n, .equiv-d {
  font-family: var(--display);
  font-size: 28px;
  color: var(--amber2);
  line-height: 1;
  min-width: 36px;
  text-align: center;
}
.equiv-line {
  display: block;
  width: 36px;
  height: 2px;
  background: rgba(200,144,58,.55);
}
.equiv-equals {
  font-family: var(--display);
  font-size: 28px;
  color: rgba(200,144,58,.35);
}
.equiv-input {
  font-family: var(--display);
  font-size: 28px;
  width: 56px;
  text-align: center;
}

/* ═══════════════════════════════════════════════════════════
   CHAPTERS PANEL — CHAPTER CARDS
═══════════════════════════════════════════════════════════ */
.ch-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ch-card {
  background: rgba(200,144,58,.05);
  border: 1px solid rgba(200,144,58,.2);
  border-radius: 2px;
  padding: 18px 22px;
  cursor: pointer;
  transition: all .15s;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ch-card:hover {
  background: rgba(200,144,58,.1);
  border-color: rgba(200,144,58,.45);
  transform: translateX(3px);
}
.ch-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ch-subtitle {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
}
.ch-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 10px;
}
.ch-badge--done {
  background: rgba(60,160,80,.15);
  border: 1px solid rgba(60,160,80,.35);
  color: rgba(100,210,120,.8);
}
.ch-badge--progress {
  background: rgba(200,144,58,.12);
  border: 1px solid rgba(200,144,58,.3);
  color: rgba(200,144,58,.75);
}
.ch-title {
  font-family: var(--display);
  font-size: 16px;
  color: var(--parch);
  letter-spacing: .03em;
}
.ch-desc {
  font-family: var(--mono);
  font-size: 12px;
  color: rgba(200,144,58,.45);
  letter-spacing: .04em;
  line-height: 1.5;
}
.ch-pips {
  display: flex;
  gap: 5px;
  margin-top: 4px;
}
.ch-pip {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: 1.5px solid rgba(200,144,58,.3);
  background: rgba(200,144,58,.06);
}
.ch-pip--done { background: rgba(60,160,80,.6); border-color: rgba(60,160,80,.4); }
.ch-pip--next { background: rgba(200,144,58,.35); border-color: rgba(200,144,58,.6); }
.ch-pip--locked { opacity: .35; }

/* ═══════════════════════════════════════════════════════════
   SNAP MECHANIC — Tier 1 & 2
   Gem pile + compartment tray
═══════════════════════════════════════════════════════════ */

.snap-instruction {
  font-family: var(--serif);
  font-size: 20px;
  line-height: 1.65;
  color: rgba(235,215,175,.85);
}

/* Pile of moonstones waiting to be placed */
.snap-pile {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  padding: 18px 20px;
  background: rgba(200,144,58,.05);
  border: 1px solid rgba(200,144,58,.2);
  border-radius: 3px;
  min-height: 68px;
  max-width: 520px;
  align-items: center;
  align-content: flex-start;
}

/* Individual gem — color driven by --gem-color set per reagent */
.snap-gem {
  display: inline-block;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%,
    #ffffff 0%,
    var(--gem-color, #b8c4e8) 50%,
    var(--gem-color, #7080b8) 100%
  );
  border: 1px solid rgba(255,255,255,.25);
  box-shadow:
    0 2px 6px rgba(0,0,0,.55),
    0 0 8px color-mix(in srgb, var(--gem-color, #7080b8) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.4);
  flex-shrink: 0;
  transition: opacity .15s, transform .15s;
}

/* Gem already moved to a compartment — fades in pile */
.snap-gem.used {
  opacity: .12;
  pointer-events: none;
}

/* Gem sitting inside a compartment — clickable to return */
.snap-gem.placed {
  cursor: pointer;
  width: 24px;
  height: 24px;
  box-shadow:
    0 1px 4px rgba(0,0,0,.5),
    0 0 6px rgba(140,160,240,.2);
}
.snap-gem.placed:hover {
  transform: scale(1.18);
  box-shadow:
    0 2px 6px rgba(0,0,0,.6),
    0 0 10px rgba(200,120,50,.45);
}

/* Down-arrow between pile and tray */
.snap-arrow {
  font-size: 24px;
  color: rgba(200,144,58,.35);
  text-align: left;
  line-height: 1;
  padding-left: 20px;
  user-select: none;
}

/* Row of compartments */
.snap-sections {
  display: flex;
  gap: 10px;
  align-items: stretch;
  max-width: 520px;
}

/* One compartment — click to receive a gem */
.snap-comp {
  flex: 1;
  min-width: 80px;
  max-width: 160px;
  min-height: 100px;
  border: 2px solid rgba(200,144,58,.32);
  border-radius: 3px;
  background-color: rgba(10,8,4,.35);
  background-image: url('../assets/reagents/compartment.png');
  background-size: cover;
  background-position: center;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-content: center;
  justify-content: center;
  padding: 12px 10px;
  cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.snap-comp:hover {
  border-color: rgba(200,144,58,.55);
  box-shadow: 0 0 10px rgba(200,144,58,.15);
}
.snap-comp:active { box-shadow: 0 0 14px rgba(200,144,58,.22); }

/* Compartment is equal — flash green */
.snap-comp.snap-equal {
  border-color: rgba(60,180,90,.65);
  box-shadow: 0 0 14px rgba(60,180,90,.35), inset 0 0 20px rgba(60,180,90,.08);
  cursor: default;
}

/* Reagent illustration above the pile */
.snap-reagent-display {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  margin-bottom: 10px;
}
.snap-reagent-img {
  max-width: 200px;
  max-height: 160px;
  width: auto;
  height: auto;
  object-fit: contain;
  mix-blend-mode: screen;
  border-radius: 4px;
  image-rendering: auto;
}
.snap-reagent-caption {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .04em;
  color: rgba(200,180,140,.4);
  font-style: italic;
}

/* Reset + hint row */
.snap-hint-row {
  display: flex;
  align-items: center;
  gap: 16px;
  max-width: 520px;
}
.snap-click-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,144,58,.32);
  letter-spacing: .06em;
}
.ls-reset-btn {
  flex-shrink: 0;
  background: none;
  border: 1px solid rgba(200,144,58,.22);
  color: rgba(200,144,58,.5);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  padding: 5px 13px;
  cursor: pointer;
  border-radius: 1px;
  transition: all .15s;
  white-space: nowrap;
}
.ls-reset-btn:hover {
  border-color: rgba(200,144,58,.5);
  color: rgba(200,144,58,.85);
}


/* ═══════════════════════════════════════════════════════════
   COMPARE-TAP
   Side-by-side fraction bar comparison with choice buttons.
═══════════════════════════════════════════════════════════ */
.compare-trays {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  justify-content: center;
  margin: 20px 0 16px;
}
.compare-side {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 14px 18px;
  border-radius: 4px;
  border: 2px solid transparent;
  transition: border-color .15s, background .15s;
  min-width: 80px;
}
.compare-side:hover {
  border-color: rgba(200,144,58,.35);
  background: rgba(200,144,58,.05);
}
.compare-side-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(200,180,140,.45);
}
.compare-frac-label {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.5rem;
  color: rgba(200,180,140,.85);
  line-height: 1;
}
.compare-frac-slash {
  margin: 0 1px;
  opacity: .6;
}

.compare-btns {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}
.ls-choice-btn {
  padding: 9px 22px;
  font-family: var(--font-serif, Georgia, serif);
  font-size: .95rem;
  background: rgba(200,144,58,.07);
  border: 1px solid rgba(200,144,58,.28);
  color: rgba(200,180,140,.8);
  border-radius: 3px;
  cursor: pointer;
  transition: background .15s, border-color .15s, color .15s;
  letter-spacing: .02em;
}
.ls-choice-btn:hover {
  background: rgba(200,144,58,.18);
  border-color: rgba(200,144,58,.55);
  color: rgba(220,200,160,1);
}


/* ═══════════════════════════════════════════════════════════
   PERCENT BAR — pbar-compare and percent-write
═══════════════════════════════════════════════════════════ */
.pbar-wrap {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 14px 0;
}
.pbar-row-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,180,140,.38);
}
.pbar-row {
  display: flex;
  gap: 4px;
  align-items: center;
}
.pbar-cell {
  width: 36px;
  height: 28px;
  border-radius: 3px;
  border: 1.5px solid rgba(200,144,58,.25);
  background: transparent;
  cursor: pointer;
  transition: background .1s, border-color .1s;
  flex-shrink: 0;
}
.pbar-cell.filled {
  background: rgba(200,144,58,.55);
  border-color: rgba(200,144,58,.7);
}
.pbar-cell--ref {
  cursor: default;
}
.pbar-cell:hover:not(.pbar-cell--ref) {
  border-color: rgba(200,144,58,.6);
  background: rgba(200,144,58,.15);
}
.pbar-label {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 1.4rem;
  color: rgba(200,144,58,.85);
  margin-top: 4px;
  letter-spacing: .04em;
}
.pbar-scale {
  font-family: var(--mono);
  font-size: 9px;
  color: rgba(200,180,140,.3);
  letter-spacing: .04em;
  margin-top: 4px;
}


/* ═══════════════════════════════════════════════════════════
   BLUEPRINT DOTS — ratio Tier 1 visual target guide
═══════════════════════════════════════════════════════════ */
.snap-blueprint {
  display: flex;
  gap: 16px;
  justify-content: center;
  margin-bottom: 6px;
}
.blueprint-group {
  display: flex;
  gap: 5px;
  align-items: center;
  min-width: 60px;
  justify-content: center;
}
.blueprint-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(200,144,58,.35);
  border: 1px solid rgba(200,144,58,.5);
}


/* ═══════════════════════════════════════════════════════════
   RATIO-WRITE
   Two number inputs with a colon between them.
═══════════════════════════════════════════════════════════ */
.ratio-write-row {
  display: flex;
  align-items: center;
  gap: 16px;
  margin: 20px 0;
}
.ratio-write-label {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  color: rgba(200,180,140,.5);
  text-transform: uppercase;
}
.ratio-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}
.ratio-colon {
  font-family: var(--font-serif, Georgia, serif);
  font-size: 2rem;
  color: rgba(200,144,58,.7);
  line-height: 1;
}
.ratio-input {
  width: 56px;
  text-align: center;
}
.ratio-visual-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,180,140,.45);
  letter-spacing: .05em;
  margin-top: 8px;
}


/* ═══════════════════════════════════════════════════════════
   PAPERWORK PANEL — contract list + contract runner
═══════════════════════════════════════════════════════════ */

/* ── Back button in runner header ── */
.pw-back-btn {
  background: none;
  border: none;
  color: rgba(200,144,58,.5);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .06em;
  padding: 0;
  white-space: nowrap;
  transition: color .15s;
}
.pw-back-btn:hover { color: var(--amber2); }

/* ── Contract list ── */
.pw-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pw-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: rgba(200,144,58,.05);
  border: 1px solid rgba(200,144,58,.2);
  border-radius: 2px;
  padding: 14px;
  transition: background .15s, border-color .15s;
}
.pw-card--available:hover {
  background: rgba(200,144,58,.1);
  border-color: rgba(200,144,58,.4);
}
.pw-card--locked { opacity: .45; }
.pw-card--done   { border-color: rgba(60,160,80,.25); }
.pw-card-portrait {
  width: 52px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}
.pw-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pw-card-top {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pw-card-subtitle {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
}
.pw-badge {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .08em;
  padding: 2px 7px;
  border-radius: 8px;
}
.pw-badge--open   { background: rgba(200,144,58,.12); border: 1px solid rgba(200,144,58,.3);  color: rgba(200,144,58,.8); }
.pw-badge--done   { background: rgba(60,160,80,.15);  border: 1px solid rgba(60,160,80,.35);  color: rgba(100,210,120,.85); }
.pw-badge--locked { background: rgba(80,80,80,.15);   border: 1px solid rgba(100,100,100,.25); color: rgba(140,130,110,.5); }
.pw-card-title {
  font-family: var(--display);
  font-size: 15px;
  color: var(--parch);
  letter-spacing: .03em;
}
.pw-card-reward {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,144,58,.4);
  letter-spacing: .04em;
  margin-bottom: 6px;
}
.pw-start-btn {
  align-self: flex-start;
  background: rgba(200,144,58,.12);
  border: 1px solid rgba(200,144,58,.3);
  color: rgba(200,144,58,.85);
  padding: 5px 14px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  transition: background .15s;
}
.pw-start-btn:hover { background: rgba(200,144,58,.22); }
.pw-start-btn--done { opacity: .7; }

/* ── Runner: NPC bar ── */
.pw-npc-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 14px;
  border-bottom: 1px solid rgba(200,144,58,.15);
  margin-bottom: 18px;
}
.pw-portrait-wrap {
  width: 52px;
  height: 62px;
  flex-shrink: 0;
  border-radius: 2px;
  overflow: hidden;
}
.pw-portrait-svg { display: block; }
.pw-npc-info { flex: 1; }
.pw-npc-name {
  font-family: var(--display);
  font-size: 14px;
  color: var(--parch);
  letter-spacing: .04em;
}
.pw-npc-role {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .06em;
  color: rgba(200,144,58,.45);
  margin-top: 2px;
}
.pw-npc-progress {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  color: rgba(200,144,58,.35);
  white-space: nowrap;
}

/* ── Runner: Dialogue ── */
.pw-dialogue {
  background: rgba(200,144,58,.04);
  border: 1px solid rgba(200,144,58,.15);
  border-radius: 2px;
  padding: 20px 22px 16px;
}
.pw-dialogue-text {
  font-family: var(--serif);
  font-size: 17px;
  font-style: italic;
  color: rgba(200,180,140,.88);
  line-height: 1.65;
  margin-bottom: 10px;
}
.pw-dialogue-aside {
  font-family: var(--serif);
  font-size: 13px;
  color: rgba(200,144,58,.48);
  font-style: italic;
  margin-bottom: 14px;
  padding-left: 10px;
  border-left: 2px solid rgba(200,144,58,.2);
}
.pw-continue-btn {
  background: none;
  border: 1px solid rgba(200,144,58,.2);
  color: rgba(200,144,58,.5);
  cursor: pointer;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .1em;
  padding: 5px 14px;
  border-radius: 1px;
  display: block;
  margin-left: auto;
  transition: color .15s, border-color .15s;
}
.pw-continue-btn:hover {
  color: var(--amber2);
  border-color: rgba(200,144,58,.5);
}

/* ── Runner: Problem ── */
.pw-problem {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.pw-problem-prompt {
  font-family: var(--mono);
  font-size: 14px;
  letter-spacing: .03em;
  color: rgba(200,180,140,.82);
  line-height: 1.65;
  padding: 16px 18px;
  background: rgba(0,0,0,.2);
  border: 1px solid rgba(200,144,58,.15);
  border-radius: 2px;
}
.pw-hint {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,180,140,.55);
  letter-spacing: .04em;
  display: none;
}
.pw-hint--visible {
  display: block;
  background: rgba(200,144,58,.06);
  border: 1px solid rgba(200,144,58,.18);
  padding: 8px 12px;
  border-radius: 2px;
}
.pw-problem-input {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
}

/* Fraction inputs */
.pw-fraction-inputs {
  display: flex;
  align-items: center;
  gap: 14px;
}
.pw-frac-input-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.pw-num-input {
  width: 58px;
  text-align: center;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(200,144,58,.3);
  border-radius: 2px;
  color: var(--parch);
  font-family: var(--display);
  font-size: 1.3rem;
  padding: 7px 4px;
  -moz-appearance: textfield;
}
.pw-num-input::-webkit-outer-spin-button,
.pw-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.pw-num-input:focus { outline: 1px solid rgba(200,144,58,.6); }
.pw-frac-bar {
  width: 58px;
  height: 2px;
  background: rgba(200,144,58,.4);
}
.pw-den-fixed {
  font-family: var(--display);
  font-size: 1.3rem;
  color: rgba(200,180,140,.7);
  text-align: center;
  min-width: 58px;
}
.pw-submit-btn {
  background: rgba(200,144,58,.12);
  border: 1px solid rgba(200,144,58,.3);
  color: rgba(200,144,58,.85);
  padding: 8px 26px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .1em;
  transition: background .15s;
}
.pw-submit-btn:hover { background: rgba(200,144,58,.22); }

/* Compare-choice buttons */
.pw-choice-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
}
.pw-choice-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 18px 30px;
  background: rgba(200,144,58,.06);
  border: 1px solid rgba(200,144,58,.25);
  border-radius: 2px;
  cursor: pointer;
  color: var(--parch);
  transition: background .15s, border-color .15s;
  min-width: 100px;
}
.pw-choice-btn:hover {
  background: rgba(200,144,58,.15);
  border-color: rgba(200,144,58,.5);
}
.pw-choice-btn--correct {
  background: rgba(60,160,80,.15) !important;
  border-color: rgba(60,160,80,.4) !important;
}
.pw-choice-btn--wrong {
  background: rgba(180,60,60,.12) !important;
  border-color: rgba(180,60,60,.35) !important;
}
.pw-choice-frac {
  font-family: var(--display);
  font-size: 1.7rem;
  letter-spacing: .04em;
  line-height: 1;
}
.pw-choice-sub {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  color: rgba(200,144,58,.5);
  text-transform: uppercase;
}
.pw-feedback {
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .04em;
  min-height: 1.4em;
  text-align: center;
}
.pw-feedback--wrong { color: rgba(220,120,80,.9); }

/* ── Runner: Reward ── */
.pw-reward {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 0;
}
.pw-reward-icon {
  font-size: 2rem;
  color: rgba(200,144,58,.6);
}
.pw-reward-title {
  font-family: var(--display);
  font-size: 18px;
  color: var(--amber2);
  letter-spacing: .06em;
}
.pw-reward-item {
  text-align: center;
  background: rgba(200,144,58,.06);
  border: 1px solid rgba(200,144,58,.2);
  border-radius: 2px;
  padding: 16px 28px;
  max-width: 340px;
  width: 100%;
}
.pw-reward-label {
  font-family: var(--serif);
  font-size: 15px;
  color: var(--parch);
  margin-bottom: 6px;
}
.pw-reward-desc {
  font-family: var(--serif);
  font-size: 13px;
  color: rgba(200,144,58,.55);
  font-style: italic;
}
.pw-reward-btn {
  background: rgba(200,144,58,.12);
  border: 1px solid rgba(200,144,58,.3);
  color: rgba(200,144,58,.85);
  padding: 8px 22px;
  border-radius: 2px;
  cursor: pointer;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .08em;
  margin-top: 8px;
  transition: background .15s;
}
.pw-reward-btn:hover { background: rgba(200,144,58,.22); }


/* ═══════════════════════════════════════════════════════════
   FIDGET — VESICLE FERN (bubble wrap plant)
   Positioned absolute in #scene via hud.js.
═══════════════════════════════════════════════════════════ */

#fidget-plant {
  position: absolute;
  z-index: 10;
  display: none;   /* shown by updateFidgets() when unlocked */
}

/* ── Pop animation ── */
@keyframes bubble-pop {
  0%   { transform: scale(1);    opacity: 1; }
  18%  { transform: scale(1.20); opacity: 1; }   /* quick inflate before burst */
  45%  { transform: scale(0.08); opacity: 0.6; } /* rapid collapse */
  62%  { transform: scale(0.13); opacity: 0.4; } /* slight bounce */
  100% { transform: scale(0.12); opacity: 0.28; }/* deflated resting state */
}

/* ── Grow-back animation (after reinflateAll) ── */
@keyframes bubble-grow {
  0%   { transform: scale(0.12); opacity: 0.28; }
  55%  { transform: scale(1.10); opacity: 0.95; } /* slight overshoot */
  100% { transform: scale(1);    opacity: 1; }
}

/* ── Bubble group ── */
.fid-bub {
  cursor: pointer;
  transform-box: fill-box;
  transform-origin: center;
}
.fid-bub.popped {
  animation: bubble-pop 0.32s ease-out forwards;
  cursor: default;
  pointer-events: none;
}
.fid-bub.growing {
  animation: bubble-grow 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ── Transparent hit-target circle (sits on top of bubble PNG) ── */
.fid-hit {
  fill:   transparent;
  stroke: none;
  cursor: pointer;
}

/* ── Legacy SVG bubble styles — kept in case of PNG fallback ── */
.fid-outer {
  fill: rgba(138, 212, 163, 0.86);
  stroke: rgba(95, 168, 120, 0.5);
  stroke-width: 0.6;
  transition: fill 0.12s ease;
}
.fid-bub:not(.popped):hover .fid-outer {
  fill: rgba(168, 235, 190, 0.95);
}
.fid-shine {
  fill: rgba(218, 255, 234, 0.58);
  pointer-events: none;
}

/* ── Stem, pot, soil ── */
.fid-stem {
  stroke: rgba(72, 115, 68, 0.72);
  stroke-width: 1.4;
  fill: none;
  stroke-linecap: round;
}
.fid-pot {
  fill: #7e5c42;
  stroke: #5c3e28;
  stroke-width: 1;
}
.fid-rim {
  fill: #8e6a50;
  stroke: #6a4830;
  stroke-width: 0.8;
}
.fid-soil {
  fill: #3a2814;
}


/* ═══════════════════════════════════════════════════════════
   THE CODEX PANEL
═══════════════════════════════════════════════════════════ */

/* Body / scroll area */
.cdx-bdy {
  display: flex;
  flex-direction: column;
  padding: 0;
  gap: 0;
}

/* Tab strip */
.cdx-tabs {
  display: flex;
  gap: 2px;
  padding: 12px 20px 0;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.cdx-tab {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 6px 14px 8px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.cdx-tab:hover  { color: var(--amber); }
.cdx-tab.active {
  color: var(--amber2);
  border-bottom-color: var(--amber);
}

/* Pane visibility */
.cdx-pane {
  display: none;
  overflow-y: auto;
  padding: 24px 24px 32px;
  flex: 1;
}
.cdx-pane--active { display: block; }

/* Settings sections */
.cdx-section {
  margin-bottom: 28px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}
.cdx-section:last-child { border-bottom: none; }
.cdx-section-hdr {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--amber);
  margin-bottom: 14px;
}

/* Toggle rows */
.cdx-toggle-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 6px 0;
}
.cdx-toggle-label {
  font-family: var(--serif);
  font-size: 14px;
  color: var(--parch);
  cursor: pointer;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.cdx-toggle-desc {
  font-family: var(--mono);
  font-size: 11px;
  color: rgba(200,144,58,.45);
  letter-spacing: .04em;
}

/* Toggle switch */
.cdx-switch {
  position: relative;
  display: inline-block;
  width: 36px;
  height: 20px;
  flex-shrink: 0;
  margin-top: 2px;
}
.cdx-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}
.cdx-slider-thumb {
  position: absolute;
  inset: 0;
  background: rgba(200,144,58,.2);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: background .2s;
}
.cdx-slider-thumb::before {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  left: 3px;
  top: 2px;
  background: rgba(200,144,58,.5);
  border-radius: 50%;
  transition: transform .2s, background .2s;
}
.cdx-switch input:checked + .cdx-slider-thumb {
  background: rgba(200,144,58,.35);
  border-color: var(--amber);
}
.cdx-switch input:checked + .cdx-slider-thumb::before {
  transform: translateX(16px);
  background: var(--amber2);
}
.cdx-switch input:focus-visible + .cdx-slider-thumb {
  outline: 2px solid var(--amber2);
  outline-offset: 2px;
}

/* Volume sliders */
.cdx-vol-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 2px 0 8px 0;
}
.cdx-vol-label {
  font-family: var(--mono);
  font-size: 10px;
  color: rgba(200,144,58,.35);
  letter-spacing: .06em;
  text-transform: uppercase;
  width: 120px;
  flex-shrink: 0;
}
.cdx-vol-slider {
  flex: 1;
  height: 3px;
  appearance: none;
  background: rgba(200,144,58,.2);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}
.cdx-vol-slider::-webkit-slider-thumb {
  appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  border: none;
}
.cdx-vol-slider::-moz-range-thumb {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--amber);
  cursor: pointer;
  border: none;
}

/* Text size buttons */
.cdx-text-sizes {
  display: flex;
  gap: 4px;
}
.cdx-size-btn {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(200,144,58,.45);
  background: none;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 10px;
  cursor: pointer;
  transition: color .2s, border-color .2s, background .2s;
}
.cdx-size-btn:hover  { color: var(--amber); border-color: var(--amber); }
.cdx-size-btn.active {
  color: var(--ink);
  background: var(--amber);
  border-color: var(--amber);
}

/* Post-it placeholders */
.cdx-postit {
  display: inline-block;
  background: #c8b860;
  color: #1c1608;
  border-radius: 2px;
  padding: 10px 14px;
  margin: 8px 0;
  max-width: 340px;
  box-shadow: 2px 3px 8px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.12) inset;
  transform: rotate(-0.6deg);
  font-family: var(--serif);
}
.cdx-postit:nth-child(odd)  { transform: rotate( 0.5deg); background: #c8b860; }
.cdx-postit:nth-child(even) { transform: rotate(-0.8deg); background: #bab050; }
.cdx-postit-label {
  font-family: var(--display);
  font-size: 10px;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(28,22,8,.6);
  margin-bottom: 5px;
}
.cdx-postit-text {
  font-size: 12px;
  line-height: 1.55;
  color: rgba(28,22,8,.88);
}

/* Action buttons */
.cdx-btn-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.cdx-btn {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--parch);
  background: none;
  border: 1px solid var(--border2);
  border-radius: 3px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background .2s, border-color .2s;
}
.cdx-btn:hover {
  background: rgba(200,144,58,.12);
  border-color: var(--amber);
}

/* Progress summary */
.cdx-progress-area { margin-top: 12px; }
.cdx-hidden        { display: none; }
.cdx-prog-wrap {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 16px;
}
.cdx-prog-hdr {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .08em;
  color: var(--amber);
  margin-bottom: 12px;
}
.cdx-prog-table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--serif);
  font-size: 13px;
  color: var(--parch);
}
.cdx-prog-table th {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(200,144,58,.5);
  text-align: left;
  padding: 4px 8px 8px;
  border-bottom: 1px solid var(--border);
}
.cdx-prog-table td {
  padding: 5px 8px;
  border-bottom: 1px solid rgba(200,144,58,.1);
  vertical-align: top;
}
.cdx-prog-table tr:last-child td { border-bottom: none; }
.cdx-prog-ch     { color: var(--parch); }
.cdx-prog-tiers  { font-family: var(--mono); font-size: 12px; color: rgba(200,144,58,.55); }
.cdx-prog-status { font-family: var(--mono); font-size: 11px; color: rgba(200,144,58,.45); }

/* ── About pane ── */
.cdx-about {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.7;
  color: var(--parch);
  max-width: 620px;
}
.cdx-about p { margin: 0 0 1em; }
.cdx-about-heading {
  font-family: var(--display);
  font-size: 18px;
  letter-spacing: .06em;
  color: var(--amber2);
  margin-bottom: 1em;
}
.cdx-about-emphasis {
  font-style: italic;
  color: var(--amber2);
}
.cdx-about-world {
  padding-bottom: 24px;
  margin-bottom: 24px;
  border-bottom: 1px solid var(--border);
}
.cdx-about-outside {
  background: rgba(200,144,58,.04);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 20px 24px;
  margin-bottom: 24px;
}
.cdx-door-ajar {
  text-align: center;
  color: rgba(200,144,58,.3);
  font-size: 18px;
  margin-bottom: 12px;
  letter-spacing: .3em;
}
.cdx-about-from {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(200,144,58,.5);
  margin-bottom: 1.2em;
}
.cdx-about-sig {
  font-style: italic;
  color: rgba(200,144,58,.6);
  margin-top: 1.5em;
}
.cdx-about-return {
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

/* ── What's Coming corkboard ── */
.cdx-cork {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 18px;
  padding: 4px 0;
}
.cdx-pin {
  border-radius: 2px;
  padding: 14px 16px;
  font-family: var(--serif);
  font-size: 13px;
  line-height: 1.55;
  box-shadow: 2px 3px 10px rgba(0,0,0,.4);
  position: relative;
}
.cdx-pin p { margin: 0; color: inherit; opacity: .85; }
.cdx-pin-hdr {
  font-family: var(--display);
  font-size: 11px;
  letter-spacing: .1em;
  margin-bottom: 8px;
}
/* Ptoughneigh — warm parchment, heavier pen */
.cdx-pin--pt {
  background: #d4c494;
  color: #1c1008;
  transform: rotate(-0.4deg);
}
.cdx-pin--pt .cdx-pin-hdr { color: #5a3010; }
/* Agnes — warmer, rounder */
.cdx-pin--ag {
  background: #c8d4a8;
  color: #101808;
  transform: rotate(0.6deg);
}
.cdx-pin--ag .cdx-pin-hdr { color: #2a4018; }
/* Stone — very neat, slightly aggrieved, cooler white */
.cdx-pin--st {
  background: #d8dce8;
  color: #101018;
  transform: rotate(-0.2deg);
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: .04em;
}
.cdx-pin--st .cdx-pin-hdr { color: #303050; }
/* Hisstopher — just a paw print, small */
.cdx-pin--hiss {
  background: #d4c494;
  color: #1c1008;
  transform: rotate(1.2deg);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  max-width: 80px;
}
.cdx-pin-paw { font-size: 28px; }

/* ── Credits pane ── */
.cdx-credits {
  font-family: var(--serif);
  font-size: 15px;
  line-height: 1.75;
  color: var(--parch);
  max-width: 580px;
}
.cdx-credits p { margin: 0 0 1em; }
.cdx-credits-title {
  font-family: var(--display);
  font-size: 17px;
  letter-spacing: .05em;
  color: var(--amber2);
  margin-bottom: 1em;
}
.cdx-credits-poc {
  font-style: italic;
  font-size: 16px;
  color: var(--amber2);
}
.cdx-credits-ack {
  font-size: 14px;
  color: rgba(242,232,208,.65);
  line-height: 1.7;
}
.cdx-credits-hiss {
  font-style: italic;
  font-size: 13px;
  color: rgba(200,144,58,.5);
  margin-top: 1.5em;
}
.cdx-credits-rule {
  border: none;
  border-top: 1px solid var(--border);
  margin: 20px 0;
}
.cdx-email {
  color: var(--amber2);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.cdx-email:hover { color: var(--amber3); }