/* =======================================================
   DEPARTMENT OF MISPLACED MISSIVES — styles.css
   Welcome to Snuggleton! Bright pastels, bouncy borders,
   polka dots, and absolutely no sharp corners... right?
   ======================================================= */

:root {
  /* Snuggleton Pastels & Brights — 60-30-10 structure */
  /* 60% ROOM BG — sky blue (the world) */
  --bg-sky:         #A1E2F9;
  --bg-sky-deep:    #5FA8D0;       /* header band, chrome contrast */
  --bg-sky-soft:    #D4EEF9;       /* gentler accents, tray tints */

  /* 30% WORKSPACE — pink desk surfaces */
  --desk-top:       #FFB6C1;       /* Bubblegum pink desk */
  --desk-edge:      #FF69B4;       /* Hot pink trim */
  --desk-soft:      #FFE4E9;       /* gentler pink for area backgrounds */

  /* PAPER (letter surfaces — reads as content, not "world") */
  --paper:          #FFFFFF;
  --paper-aged:     #FFFDF0;
  --paper-deeper:   #FFE4E1;

  /* Vibrant Inks — darkened slightly for readability */
  --ink:            #3C0F70;       /* Deep purple (stronger) */
  --ink-faded:      #7B1FA2;       /* Violet (darker for contrast) */
  --ink-red:        #E91E63;       /* Pink but not neon — easier on eyes */
  --ink-blue:       #0097A7;       /* Teal-cyan (darker for contrast) */

  /* 10% ACCENTS — yellow + hot pink + greens */
  --brass:          #FFEB3B;       /* Banana Yellow */
  --brass-lit:      #FFF176;
  --brass-dark:     #FBC02D;

  /* The Anomaly (Barnaby's Box) — the cosmic horror breaks all rules */
  --anomaly-grey:   #CCCCCC;
  --anomaly-dark:   #222222;
  --anomaly-blood:  #8B0000;

  /* Functional Outcomes */
  --danger:         #EF5350;
  --ok:             #66BB6A;
  --hold:           #FFAB40;

  /* Back-compat aliases for later CSS that uses these */
  --sage-deep:      #388E3C;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  font-family: 'Delius', cursive; /* Bouncy, handwritten feel */
  color: var(--ink);
  background: var(--bg-sky);
  overflow: hidden;
}

/* Whimsical Sunbeam Vignette */
#vignette {
  position: fixed; inset: 0;
  pointer-events: none;
  background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.4) 0%, transparent 60%);
  z-index: 100;
}

/* =========================================================
   APP LAYOUT
   ========================================================= */
#app {
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  height: 100vh;
  background: 
    radial-gradient(circle at 80% 20%, rgba(255,255,255,0.3), transparent 40%),
    var(--bg-sky);
}

/* ------------- HEADER ------------- */
.office-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 28px 12px;
  background: linear-gradient(180deg, var(--bg-sky-deep) 0%, #4891C1 100%);
  border-bottom: 6px solid var(--desk-edge);
  border-radius: 0 0 24px 24px;
  box-shadow: 0 4px 16px rgba(95, 168, 208, 0.4);
}

.brand { display: flex; align-items: center; gap: 14px; }
.seal {
  font-size: 32px; color: var(--brass-lit);
  text-shadow: 0 2px 0 var(--brass-dark);
  animation: spinSlow 8s linear infinite;
}
@keyframes spinSlow { 100% { transform: rotate(360deg); } }

.brand-text h1 {
  font-family: 'Fredoka', sans-serif;
  font-size: 26px; font-weight: 600;
  color: #FFFFFF;
  text-shadow: 2px 2px 0 var(--desk-edge), 3px 3px 0 rgba(60,30,80,0.25);
}
.subtitle {
  font-family: 'Delius', cursive;
  font-size: 14px;
  color: #FFFFFF;
  opacity: 0.92;
  font-weight: bold;
  text-shadow: 1px 1px 0 rgba(0,0,0,0.15);
}

.header-right { display: flex; align-items: center; gap: 18px; }

.help-btn {
  font-family: 'Chewy', cursive;
  font-size: 20px;
  color: var(--bg-sky-deep);
  background: #FFF;
  border: 3px solid var(--bg-sky-deep);
  width: 38px;
  height: 38px;
  border-radius: 50%;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--bg-sky-deep);
  transition: all 0.1s;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  line-height: 1;
}
.help-btn:hover {
  background: var(--bg-sky-soft);
}
.help-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--bg-sky-deep);
}

.day-indicator {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 18px;
  border: 3px solid var(--brass);
  border-radius: 20px;
  background: #FFF;
  box-shadow: inset 0 -3px 0 var(--brass-dark);
}
.day-indicator .label {
  font-size: 10px; font-weight: bold;
  color: var(--desk-edge); text-transform: uppercase;
}
.day-indicator #day-number {
  font-family: 'Fredoka', sans-serif;
  font-size: 24px; color: var(--ink);
  line-height: 1;
}

.day-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px; 
  color: var(--ink);
  background: var(--brass);
  border: none;
  padding: 12px 20px;
  border-radius: 24px;
  cursor: pointer;
  box-shadow: 0 4px 0 var(--brass-dark), 0 8px 10px rgba(0,0,0,0.1);
  transition: all 0.1s;
}
.day-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0px 0 var(--brass-dark), 0 2px 4px rgba(0,0,0,0.1);
}

/* ------------- MAIN 3-COLUMN LAYOUT ------------- */
.office {
  display: grid;
  grid-template-columns: 240px 1fr 260px;
  gap: 16px;
  padding: 16px;
  overflow: hidden;
  min-height: 0;
}

/* Divider between In-Chute and Out-Chute (now stacked in one pane) */
.pane-divider {
  height: 2px;
  margin: 14px -14px;
  background: linear-gradient(90deg, transparent 0%, rgba(0, 188, 212, 0.3) 20%, rgba(0, 188, 212, 0.3) 80%, transparent 100%);
  flex-shrink: 0;
}
.pane-header-out {
  margin-top: 0;
}
.intray-pane .intray {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
}
.intray-pane .outtray {
  flex: 1 1 auto;
  min-height: 80px;
  overflow-y: auto;
  max-height: 40%;
}

.desk-pane {
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow: hidden;
  min-height: 0;
}

.pane {
  background: rgba(255, 255, 255, 0.6);
  border: 4px solid #FFFFFF;
  border-radius: 24px;
  padding: 14px;
  display: flex; flex-direction: column;
  overflow: hidden;
  min-height: 0;
  box-shadow: 0 8px 24px rgba(0, 188, 212, 0.2);
  backdrop-filter: blur(8px);
}

.pane-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 3px dashed var(--desk-top);
}
.pane-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600; font-size: 18px;
  color: var(--ink-red);
}

/* =========================================================
   IN-TRAY & OUT-TRAY — Bouncy Envelopes
   ========================================================= */
.intray, .outtray {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
  padding: 4px 2px 16px;
}

.intray::-webkit-scrollbar, .outtray::-webkit-scrollbar { width: 8px; }
.intray::-webkit-scrollbar-thumb, .outtray::-webkit-scrollbar-thumb { 
  background: var(--desk-top); border-radius: 4px; 
}

.tray-envelope {
  position: relative;
  background: var(--paper);
  border: 3px solid #EEE;
  border-radius: 12px;
  padding: 10px 12px 10px 14px;
  cursor: pointer;
  box-shadow: 0 4px 0 #DDD;
  transition: transform 0.1s;
  transform: rotate(var(--r, -2deg));
}
.tray-envelope:nth-child(2n) { --r: 3deg; }
.tray-envelope:nth-child(3n) { --r: -1deg; }
.tray-envelope:hover {
  transform: rotate(0) translateY(-4px);
  border-color: var(--bg-sky);
  box-shadow: 0 8px 0 var(--bg-sky);
}
.tray-to { color: var(--ink); font-size: 14px; font-weight: bold; }
.tray-from { color: var(--ink-faded); font-size: 11px; }

/* =========================================================
   DESK — Bubblegum Pink Surface
   ========================================================= */
.desk-surface {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  background: var(--desk-top);
  border: 6px solid var(--desk-edge);
  border-radius: 32px;
  padding: 22px;
  overflow-y: auto;
  box-shadow: inset 0 8px 24px rgba(255, 20, 147, 0.3);
}

.desk {
  display: flex;
  flex-wrap: nowrap;
  gap: 32px;
  justify-content: center;
  min-height: 100%;
  align-items: center;
  max-width: 100%;
  margin: 0 auto;
  position: relative;           /* lets .match-float absolutely-position between items */
  transition: gap 0.3s ease;
}

/* When only ONE letter is on the desk, let it bloom — larger, truly centered */
.desk:has(.desk-letter:only-child) .desk-letter {
  flex: 0 1 480px;
  max-width: 480px;
  min-width: 360px;
}

/* When the player is already in focus (flipping book pages, opening letters, etc.)
   we suppress the pop-in animations on all floating chrome so it doesn't flash
   on every re-render. Animations only play when first entering focus. */
body.focus-settled .desk-letter,
body.focus-settled .desk-book,
body.focus-settled .focus-toolrail,
body.focus-settled .focus-outcomes,
body.focus-settled .compare-banner-focus,
body.focus-settled #redirect-picker {
  animation: none !important;
}

/* ============================================================ */
/* HYPER-FOCUS MODE — the focused letter (or book) becomes
   the world. Tools float directly next to it as a small rail.
   Everything else dims heavily behind a blur.
   ========================================================= */

/* Full-viewport dim + blur when focusing */
body.letter-focused::before {
  content: '';
  position: fixed;
  inset: 0;
  background: rgba(20, 10, 40, 0.62);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 900;
  animation: focus-dim-in 0.3s ease-out forwards;
  pointer-events: none;
}
@keyframes focus-dim-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* Invisible dismiss layer that captures background clicks */
body.letter-focused .focus-dismiss-layer {
  position: fixed;
  inset: 0;
  z-index: 905;
  cursor: pointer;
}

/* The focused letter: LIFTED above the dim, sized dramatically large.
   Uses position:fixed so it visually detaches from the desk entirely. */
body.letter-focused.focus-single .desk-letter {
  position: fixed !important;
  top: 50%;
  left: 50%;
  flex: none !important;
  width: min(720px, 56vw) !important;
  max-width: 720px !important;
  min-width: 380px !important;
  max-height: 88vh;
  overflow-y: auto;
  transform: translate(-50%, -50%) rotate(-1.5deg) !important;
  z-index: 920;
  padding: 44px 48px;
  font-size: 20px;
  box-shadow:
    0 24px 0 rgba(255, 150, 200, 0.5),
    0 40px 80px rgba(20, 10, 40, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.95);
  animation: focus-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Scale the key mail-face text larger inside focus (addresses + postmark + id) */
body.letter-focused.focus-single .desk-letter .letter-sender,
body.letter-focused.focus-single .desk-letter .letter-recipient {
  font-size: 26px;
  line-height: 1.3;
}
body.letter-focused.focus-single .desk-letter .letter-postmark {
  font-size: 16px;
}
body.letter-focused.focus-single .desk-letter .letter-id {
  font-size: 14px;
}
body.letter-focused.focus-single .desk-letter .addr-name {
  font-size: 1.15em;
}
body.letter-focused.focus-single .desk-letter .inline-interior-text,
body.letter-focused.focus-single .desk-letter .inner-opened-text {
  font-size: 17px;
  line-height: 1.5;
}
@keyframes focus-pop-in {
  0%   { transform: translate(-50%, -50%) scale(0.5) rotate(-10deg); opacity: 0; }
  60%  { transform: translate(-50%, -50%) scale(1.06) rotate(-1.5deg); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(1) rotate(-1.5deg); opacity: 1; }
}

/* Similar treatment for a focused book (Rolodex / Ledger alone on the desk) */
body.letter-focused.focus-single .desk-book {
  position: fixed !important;
  top: 50%;
  left: 50%;
  flex: none !important;
  width: min(720px, 56vw) !important;
  max-width: 720px !important;
  min-width: 380px !important;
  max-height: 88vh;
  overflow-y: auto;
  transform: translate(-50%, -50%) rotate(-0.5deg) !important;
  z-index: 920;
  box-shadow:
    0 24px 0 rgba(255, 150, 200, 0.5),
    0 40px 80px rgba(20, 10, 40, 0.7),
    0 0 0 4px rgba(255, 255, 255, 0.95);
  animation: focus-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* Two items in focus (compare) — side-by-side centered layout */
body.letter-focused.focus-compare .desk-letter,
body.letter-focused.focus-compare .desk-book {
  position: fixed !important;
  top: 50%;
  flex: none !important;
  width: min(480px, 34vw) !important;
  max-width: 480px !important;
  min-width: 340px !important;
  max-height: 88vh;
  overflow-y: auto;
  z-index: 920;
  padding: 28px 30px;
  box-shadow:
    0 20px 0 rgba(255, 150, 200, 0.5),
    0 32px 60px rgba(20, 10, 40, 0.65),
    0 0 0 3px rgba(255, 255, 255, 0.95);
  animation: focus-pop-in 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
/* Scale mail content in compare too, but less aggressively */
body.letter-focused.focus-compare .desk-letter .letter-sender,
body.letter-focused.focus-compare .desk-letter .letter-recipient {
  font-size: 20px;
  line-height: 1.25;
}
body.letter-focused.focus-compare .desk-letter .inline-interior-text,
body.letter-focused.focus-compare .desk-letter .inner-opened-text {
  font-size: 15px;
  line-height: 1.45;
}
/* First item (letter or book) — left, tighter against center */
body.letter-focused.focus-compare .desk > *:nth-child(1) {
  left: calc(50% - 40px);
  transform: translate(-100%, -50%) rotate(-2deg) !important;
}
/* Second item — right, tighter against center */
body.letter-focused.focus-compare .desk > *:nth-child(2) {
  left: calc(50% + 40px);
  transform: translate(0%, -50%) rotate(2deg) !important;
}

/* Floating tool rail — anchored just to the right of the focused letter */
.focus-toolrail {
  position: fixed;
  top: 50%;
  left: calc(50% + min(720px, 56vw) / 2 + 20px);
  transform: translateY(-50%);
  z-index: 925;
  display: flex;
  flex-direction: column;
  gap: 10px;
  animation: focus-pop-in-side 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
  max-height: 88vh;
  overflow-y: auto;
  padding: 4px;
}
@keyframes focus-pop-in-side {
  from { opacity: 0; transform: translateY(-50%) translateX(-20px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.focus-tool {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 180px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.96);
  border: 2px solid rgba(0, 188, 212, 0.55);
  border-radius: 14px;
  cursor: pointer;
  font-family: 'Delius', cursive;
  text-align: left;
  transition: all 0.15s ease;
  box-shadow: 0 3px 0 rgba(0, 188, 212, 0.4), 0 6px 18px rgba(20, 10, 40, 0.45);
}
.focus-tool:hover {
  transform: translateX(3px) translateY(-1px);
  background: #fff;
  box-shadow: 0 4px 0 rgba(0, 188, 212, 0.55), 0 8px 22px rgba(20, 10, 40, 0.55);
}
.focus-tool:active {
  transform: translateX(3px) translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 188, 212, 0.4);
}
.focus-tool.armed {
  background: #FFE680;
  border-color: #FFB700;
  box-shadow: 0 4px 0 #FFA000, 0 0 0 3px rgba(255, 183, 0, 0.4), 0 8px 22px rgba(20, 10, 40, 0.5);
  animation: rail-armed-pulse 1.2s ease-in-out infinite;
}
.focus-tool-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
}
.focus-tool-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.focus-tool-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 12px;
  color: var(--ink);
  line-height: 1.15;
}
.focus-tool-desc {
  font-family: 'Delius', cursive;
  font-size: 10px;
  color: var(--ink-faded);
  line-height: 1.15;
  opacity: 0.85;
}

/* Small separator between groups */
.focus-tool-sep {
  height: 1px;
  background: rgba(255, 255, 255, 0.25);
  margin: 4px 8px;
}
.focus-tool-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.8);
  padding: 2px 4px;
  text-align: center;
}

/* Floating outcome bar — anchored just below the letter */
.focus-outcomes {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 925;
  background: #FFF;
  border: 4px solid var(--bg-sky-soft);
  border-radius: 24px;
  padding: 12px 16px;
  box-shadow: 0 8px 24px rgba(20, 10, 40, 0.5);
  animation: focus-pop-in-bottom 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: center;
  max-width: 92vw;
}
@keyframes focus-pop-in-bottom {
  from { opacity: 0; transform: translateX(-50%) translateY(20px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* When focused: the desk-surface stays structurally present but visually vanishes
   (its pink background / border fade). The letter inside is position:fixed so it
   escapes the surface visually. We CANNOT use opacity:0 on the surface itself
   because opacity cascades to fixed-positioned children. */
body.letter-focused .desk-surface {
  background: transparent;
  border-color: transparent;
  box-shadow: none;
  pointer-events: none;
  transition: background 0.25s ease, border-color 0.25s ease;
}
/* The focused letter/book ARE descendants of .desk-surface, so pointer-events:none
   cascades into them. Re-enable pointer-events on the fixed-positioned item. */
body.letter-focused .desk-surface .desk-letter,
body.letter-focused .desk-surface .desk-book {
  pointer-events: auto;
}
body.letter-focused .desk-empty {
  opacity: 0;
  transition: opacity 0.2s ease;
}
body.letter-focused .outcomes-bar {
  opacity: 0;
  pointer-events: none;
}

/* Hide the right rail tools pane when focused — tools are now floating */
body.letter-focused .rightrail-pane {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}

/* Intray pane: dimmed during focus, but letters REMAIN CLICKABLE so the
   player can quickly switch focus without having to dismiss first.
   We lift the pane above the dismiss-layer (z-index 905) and re-enable
   pointer-events on its letter elements so clicks land on them — not on
   the dismiss-layer below. */
body.letter-focused .intray-pane {
  opacity: 0.32;
  filter: saturate(0.6);
  pointer-events: none;              /* pane itself ignores clicks */
  position: relative;
  z-index: 910;                       /* above dismiss-layer (905) */
  transition: all 0.3s ease;
}
body.letter-focused .intray-pane:hover {
  opacity: 0.85;                      /* pop to legibility on hover */
  filter: none;
}
body.letter-focused .intray-pane .tray-envelope {
  pointer-events: auto;               /* letters catch clicks */
  cursor: pointer;
}
body.letter-focused.compare-mode .intray-pane {
  z-index: 930;
  opacity: 1;
  filter: none;
  pointer-events: auto;
  box-shadow: 0 0 40px rgba(233, 30, 99, 0.4), 0 0 0 3px rgba(233, 30, 99, 0.5);
}

/* In compare mode, soften the dim so the tray is readable */
body.letter-focused.compare-mode::before {
  background: rgba(20, 10, 40, 0.35);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

/* Office-header dims but stays clickable (End Day must remain usable).
   Toolbar and pile footer fade fully back. */
body.letter-focused .office-header {
  opacity: 0.7;
}
body.letter-focused .toolbar-row,
body.letter-focused .pile-status {
  opacity: 0.35;
  pointer-events: none;
}

/* In focus-compare (2 items) mode, hide any leftover floating tool rail */
body.letter-focused.focus-compare .focus-toolrail {
  opacity: 0;
  pointer-events: none;
}

/* Banner across top during compare pick */
.compare-banner-focus {
  position: fixed;
  top: 80px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 940;
  background: #FFE1EC;
  color: #AD1457;
  border: 2px solid #E91E63;
  border-radius: 24px;
  padding: 10px 22px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 14px;
  box-shadow: 0 6px 20px rgba(233, 30, 99, 0.5);
  white-space: nowrap;
  animation: focus-pop-in-bottom 0.3s ease-out backwards;
}
.compare-banner-focus button {
  margin-left: 12px;
  background: transparent;
  border: 1px solid #AD1457;
  color: #AD1457;
  border-radius: 14px;
  padding: 3px 12px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.compare-banner-focus button:hover {
  background: #AD1457;
  color: #FFE1EC;
}

body.letter-focused.focus-compare .focus-outcomes {
  display: none;
}

/* Redirect picker during focus — elevated above the dim, docked adjacent to
   the (left-shifted) letter so they read as a pair */
body.letter-focused #redirect-picker:not(.hidden) {
  position: fixed !important;
  top: 50%;
  left: calc(50% + 40px);
  right: auto;
  bottom: auto;
  width: min(320px, 26vw);
  max-height: 80vh;
  transform: translateY(-50%);
  z-index: 940;
  box-shadow: 0 16px 48px rgba(20, 10, 40, 0.6), -6px 8px 24px rgba(0,0,0,0.22);
  animation: focus-pop-in-side 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* When redirect picker is open in focus mode, push letter left so the two
   sit shoulder-to-shoulder */
body.letter-focused.focus-single:has(#redirect-picker:not(.hidden)) .desk-letter {
  left: calc(50% - 40px);
  width: min(560px, 42vw);
  transform: translate(-100%, -50%) rotate(-1.5deg) !important;
}
/* And hide the floating tool rail while picking (redirect replaces it temporarily) */
body.letter-focused:has(#redirect-picker:not(.hidden)) .focus-toolrail {
  opacity: 0;
  pointer-events: none;
}

/* Match pill in focus compare mode — appended directly to body, centered
   horizontally but raised above the content so it doesn't cover rolodex text */
body.letter-focused.focus-compare > .match-float {
  position: fixed;
  top: 14%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 935;
}

.desk-empty {
  margin: auto;
  text-align: center;
  font-family: 'Fredoka', sans-serif;
  color: var(--ink);
  font-size: 20px;
  font-weight: 600;
  text-shadow: 0 2px 0 rgba(255,255,255,0.7);
  padding: 40px;
}
.desk-empty-sub {
  font-family: 'Delius', cursive;
  font-weight: normal;
  font-size: 15px;
  color: var(--ink-faded);
  margin-top: 10px;
}

/* ---- Open envelope card (The letters) ---- */
.desk-letter {
  position: relative;
  flex: 1 1 380px;
  min-width: 320px;
  max-width: 440px;
  min-height: 360px;
  background: var(--paper);
  border: 4px solid #EEE;
  border-radius: 16px;
  padding: 20px 22px;
  box-shadow: 0 8px 0 #DDD, 0 16px 24px rgba(0,0,0,0.1);
  transition: transform 0.15s, box-shadow 0.15s;
  cursor: pointer;
}
.desk-letter.selected {
  border-color: var(--brass);
  box-shadow: 0 12px 0 var(--brass-dark), 0 20px 30px rgba(0,0,0,0.15);
  transform: translateY(-8px);
}

/* --- WHIMSICAL ENVELOPE STYLES (Polka dots, stripes, etc.) --- */
.desk-letter.env-manila {
  background-color: #FFF0F5;
  background-image: radial-gradient(var(--desk-top) 15%, transparent 15%);
  background-size: 20px 20px;
}
.desk-letter.env-pastel-pink {
  background: repeating-linear-gradient(45deg, #FFE4E1, #FFE4E1 10px, #FFF 10px, #FFF 20px);
}
.desk-letter.env-pastel-blue {
  background: repeating-linear-gradient(-45deg, #E0F7FA, #E0F7FA 15px, #FFF 15px, #FFF 30px);
}
.desk-letter.env-package {
  background: #FFF9C4;
  border: 4px dashed var(--brass-dark);
}

/* =========================================================
   THE ANOMALY (L008, L015, L035, L036)
   Overrides all whimsy with stark, terrifying geometry.
   ========================================================= */
.desk-letter.haunted, 
.desk-letter.env-mourning {
  background: var(--anomaly-grey) !important;
  border: 2px solid var(--anomaly-dark) !important;
  border-radius: 0 !important; /* NO ROUND CORNERS */
  box-shadow: 10px 10px 0 var(--anomaly-dark) !important;
  color: var(--anomaly-dark) !important;
  font-family: 'Courier New', Courier, monospace !important;
}
.desk-letter.haunted *, 
.desk-letter.env-mourning * {
  font-family: 'Courier New', Courier, monospace !important;
  color: var(--anomaly-dark) !important;
}
.desk-letter.haunted .letter-postmark, 
.desk-letter.env-mourning .letter-postmark {
  border-radius: 0 !important;
  border-color: var(--anomaly-dark) !important;
}
.tray-envelope.haunted,
.tray-envelope.env-mourning {
  background: var(--anomaly-grey) !important;
  border: 2px solid var(--anomaly-dark) !important;
  border-radius: 0 !important;
  transform: rotate(0) !important; /* Perfect rigid alignment */
  box-shadow: 4px 4px 0 var(--anomaly-dark) !important;
}
/* Cold blood anomaly */
.desk-mark-blood {
  position: absolute; top: 10px; right: 10px;
  width: 50px; height: 50px;
  background: var(--anomaly-blood);
  border-radius: 0; /* Blocky blood */
  opacity: 0.9;
}

/* =========================================================
   TYPOGRAPHY & HANDWRITING
   ========================================================= */
.addr-name { font-size: 18px; font-weight: bold; margin-bottom: 2px; }
.addr-line { font-size: 15px; line-height: 1.4; }

.hand-copperplate { font-family: 'Delius', cursive; font-size: 16px; color: var(--ink-blue); }
.hand-shaky { font-family: 'Kalam', cursive; font-size: 17px; color: var(--ink-faded); }
.hand-hurried { font-family: 'Kalam', cursive; font-weight: bold; font-size: 18px; color: var(--ink-red); }
.hand-careful { font-family: 'Delius', cursive; color: var(--ink); }
.hand-child { font-family: 'Chewy', cursive; font-size: 20px; color: #4CAF50; letter-spacing: 1px; }
.hand-rage { font-family: 'Fredoka', sans-serif; font-size: 18px; color: #FF5722; text-transform: uppercase; }
/* The Anomaly Font */
.hand-typed { font-family: 'Courier New', monospace !important; font-weight: bold; color: var(--anomaly-dark) !important; letter-spacing: 0; }

/* =========================================================
   STAMPS (Whoosh! Boing!)
   ========================================================= */
.stamp {
  position: absolute; top: 40%; left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  text-align: center;
  font-family: 'Chewy', cursive;
  font-size: 32px;
  color: var(--ink-red);
  border: 5px dashed var(--ink-red);
  border-radius: 14px;
  padding: 8px 18px;
  background: rgba(255, 255, 255, 0.55);
  z-index: 10;
  pointer-events: none;
}

/* =========================================================
   TOOLS & TOOLBAR
   ========================================================= */
.toolbar-row {
  background: #FFF;
  border-bottom: 4px solid #EEE;
  padding: 10px 18px;
  border-radius: 20px;
  margin: 10px 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.toolbar-inner { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; }

/* Legacy tool button styling — scoped to pre-refactor locations only.
   Right-rail tools are styled via .rail-tool (see bottom of file). */
.toolbar-inner .tool,
.toolbar-inner .book-shelf-btn {
  background: #FFF;
  border: 3px solid var(--bg-sky-deep);
  border-radius: 16px;
  padding: 8px 16px;
  font-family: 'Fredoka', sans-serif;
  color: var(--ink);
  cursor: grab;
  box-shadow: 0 4px 0 var(--bg-sky-deep);
  transition: all 0.1s;
}
.toolbar-inner .tool:hover,
.toolbar-inner .book-shelf-btn:hover {
  background: var(--bg-sky-soft);
  border-color: var(--ink-blue);
}
.toolbar-inner .tool:active,
.toolbar-inner .book-shelf-btn:active {
  transform: translateY(4px); box-shadow: 0 0 0 var(--bg-sky-deep);
}
.toolbar-inner .tool.armed {
  background: var(--brass); border-color: var(--brass-dark); box-shadow: 0 4px 0 var(--brass-dark);
}
.toolbar-inner .tool-icon,
.toolbar-inner .book-icon { font-size: 20px; }

/* =========================================================
   BOOKS (Rolodex & Ledger)
   ========================================================= */
.desk-book {
  background: #FFFDE7;
  border: 4px solid var(--brass-dark);
  border-left: 16px solid var(--desk-edge);
  border-radius: 8px 24px 24px 8px;
  padding: 18px 22px;
  box-shadow: 0 8px 0 var(--brass-dark);
  font-family: 'Delius', cursive;
}
.book-desk-title { font-family: 'Fredoka', sans-serif; font-size: 24px; color: var(--ink-red); }
.book-row:hover { background: #FFF9C4; border-radius: 8px; }

/* =========================================================
   MATCH BUTTON
   ========================================================= */
.match-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  color: #FFF;
  background: #B0BEC5;
  border: none;
  border-radius: 24px;
  padding: 11px 28px;
  box-shadow: 0 6px 0 #90A4AE;
  transition: all 0.1s;
  white-space: nowrap;
  min-width: 160px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.match-count {
  font-weight: normal;
  opacity: 0.85;
  font-size: 14px;
  white-space: nowrap;
}
.match-btn.enabled {
  background: var(--ok);
  box-shadow: 0 6px 0 #00C853;
  cursor: pointer;
  animation: bounceButton 2s infinite;
}
.match-btn.enabled:active {
  transform: translateY(6px); box-shadow: 0 0 0 #00C853;
}
@keyframes bounceButton {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

/* =========================================================
   OUTCOMES BAR (The 5 Stamps)
   ========================================================= */
.outcomes-bar {
  background: #FFF;
  border: 4px solid var(--bg-sky-soft);
  border-radius: 24px;
  padding: 12px 20px;
  flex-shrink: 0;
}
.outcomes-buttons {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.outcome-slot {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
  border-radius: 16px;
  padding: 10px 18px;
  cursor: pointer;
  border: 3px solid;
  transition: all 0.1s;
  display: flex; align-items: center; gap: 6px;
  white-space: nowrap;
}
.outcome-slot:active { transform: translateY(4px); }
.outcome-slot[data-outcome="deliver"] {
  background: #C8E6C9; border-color: var(--ok);
  box-shadow: 0 4px 0 var(--ok);
}
.outcome-slot[data-outcome="deliver"]:active { box-shadow: 0 0 0 var(--ok); }
.outcome-slot[data-outcome="redirect"] {
  background: var(--bg-sky-soft); border-color: var(--bg-sky-deep);
  box-shadow: 0 4px 0 var(--bg-sky-deep);
}
.outcome-slot[data-outcome="redirect"]:active { box-shadow: 0 0 0 var(--bg-sky-deep); }
.outcome-slot[data-outcome="return"] {
  background: var(--brass-lit); border-color: var(--brass-dark);
  box-shadow: 0 4px 0 var(--brass-dark);
}
.outcome-slot[data-outcome="return"]:active { box-shadow: 0 0 0 var(--brass-dark); }
.outcome-slot[data-outcome="destroy"] {
  background: #FFCDD2; border-color: var(--danger);
  box-shadow: 0 4px 0 var(--danger);
}
.outcome-slot[data-outcome="destroy"]:active { box-shadow: 0 0 0 var(--danger); }
.outcome-slot[data-outcome="archive"] {
  background: var(--desk-soft); border-color: var(--desk-edge);
  box-shadow: 0 4px 0 var(--desk-edge);
}
.outcome-slot[data-outcome="archive"]:active { box-shadow: 0 0 0 var(--desk-edge); }
.outcome-slot:hover { filter: brightness(1.05); }

/* =========================================================
   START SCREEN & DAY SUMMARY (Ledger)
   ========================================================= */
.start-card, .ledger-card {
  background: #FFF;
  border: 6px solid var(--desk-top);
  border-radius: 28px;
  padding: 32px 36px 28px;
  box-shadow: 0 12px 0 var(--desk-edge), 0 24px 40px rgba(0,0,0,0.2);
  text-align: center;
}

/* ---- Start card header ---- */
.start-head {
  padding-bottom: 16px;
  margin-bottom: 18px;
  border-bottom: 3px dashed var(--desk-top);
}
.start-eyebrow {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 6px;
}
.start-title, .ledger-day {
  font-family: 'Fredoka', sans-serif;
  font-size: 32px;
  font-weight: 600;
  color: var(--ink-red);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---- Lede paragraph ---- */
.start-lede {
  font-family: 'Delius', cursive;
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  max-width: 540px;
  margin: 0 auto 22px;
}

/* ---- 2-column orientation grid ---- */
.start-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 16px;
  margin-bottom: 20px;
  text-align: left;
}
.start-cell {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  background: rgba(255,253,231,0.7);
  border: 2px solid var(--brass);
  border-radius: 12px;
  border-left: 5px solid var(--brass-dark);
}
.start-icon {
  font-size: 22px;
  line-height: 1;
  flex-shrink: 0;
  margin-top: 1px;
}
.start-cell-text {
  flex: 1;
  min-width: 0;
}
.start-cell-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink-red);
  margin-bottom: 2px;
  letter-spacing: 0.02em;
}
.start-cell-body {
  font-family: 'Delius', cursive;
  font-size: 12px;
  line-height: 1.35;
  color: var(--ink);
  opacity: 0.85;
}

/* ---- Footer (sig + begin button, same row) ---- */
.start-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding-top: 16px;
  border-top: 3px dashed var(--desk-top);
}
.start-sig {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faded);
}

.start-begin, .ledger-continue {
  font-family: 'Fredoka', sans-serif;
  font-size: 17px;
  font-weight: 600;
  background: var(--brass);
  color: var(--ink);
  border: 3px solid var(--brass-dark);
  padding: 12px 24px;
  border-radius: 24px;
  box-shadow: 0 5px 0 var(--brass-dark);
  cursor: pointer;
  transition: all 0.1s;
  white-space: nowrap;
}
.start-begin:hover, .ledger-continue:hover {
  background: var(--brass-lit);
}
.start-begin:active, .ledger-continue:active {
  transform: translateY(5px); box-shadow: 0 0 0 var(--brass-dark);
}

/* =========================================================
   HIGHLIGHTS AND INTERACTION
   ========================================================= */
.aspect {
  border-radius: 8px;
  padding: 2px 6px;
  margin: 0 -6px;
  transition: all 0.1s;
}
.aspect:hover { background: rgba(255, 235, 59, 0.4); outline: 2px dashed var(--brass-dark); }
.aspect.highlighted {
  background: var(--brass);
  outline: 3px solid var(--brass-dark);
  box-shadow: 0 0 10px var(--brass);
}

/* Explicit clickable affordance for matching handwriting — solves the
   problem where the hand aspect was a wrapping parent that could never
   be clicked (its children's stopPropagation swallowed every event). */
.hand-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 4px 10px 4px 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 500;
  color: var(--ink-muted, #8a7a5e);
  background: rgba(255, 235, 200, 0.5);
  border: 1.5px dashed var(--brass-dark, #b89244);
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s ease;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.hand-chip:hover {
  background: rgba(255, 215, 100, 0.7);
  border-style: solid;
  color: var(--ink-dark, #3e2f1a);
  transform: translateY(-1px);
}
.hand-chip.highlighted {
  background: var(--brass);
  border: 2px solid var(--brass-dark);
  color: #2a1a0a;
  box-shadow: 0 0 10px var(--brass);
}
.hand-chip-icon { font-size: 13px; transform: rotate(-15deg); }
body.baddleton-mode .hand-chip {
  background: rgba(80, 20, 20, 0.4);
  border-color: #8b3a1f;
  color: #c97a5c;
}
body.baddleton-mode .hand-chip:hover {
  background: rgba(229, 57, 53, 0.3);
  color: #E8DCC0;
}
body.baddleton-mode .hand-chip.highlighted {
  background: var(--ink-red, #E53935);
  color: #fff;
  border-color: #FFA000;
}

/* Paws/Claw modal — centered tutorial dialog that forces dismissal.
   Used for critical instructions that the corner bubble misses. */
.paws-modal-overlay {
  position: fixed; inset: 0; z-index: 2600;
  background: rgba(0, 0, 0, 0.55);
  display: flex; align-items: center; justify-content: center;
  animation: pmOverlayIn 0.2s ease;
  padding: 24px;
}
@keyframes pmOverlayIn { from { opacity: 0; } to { opacity: 1; } }

.paws-modal-card {
  background: #FFF8E7;
  border: 4px solid var(--brass, #DDA651);
  border-radius: 22px;
  box-shadow: 0 16px 0 var(--brass-dark, #b89244), 0 40px 80px rgba(0,0,0,0.4);
  max-width: 520px;
  width: 100%;
  padding: 28px 32px 24px;
  position: relative;
  animation: pmCardIn 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes pmCardIn {
  from { opacity: 0; transform: translateY(12px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.paws-modal-card.baddleton {
  background: #1f1418;
  border-color: #8b3a1f;
  box-shadow: 0 16px 0 #4a1618, 0 40px 80px rgba(0,0,0,0.6);
  color: #E8DCC0;
}
.paws-modal-head {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 14px;
  margin-bottom: 16px;
  border-bottom: 2px dashed var(--brass-dark, #b89244);
}
.paws-modal-card.baddleton .paws-modal-head { border-bottom-color: #4a1618; }
.paws-modal-avatar {
  font-size: 44px;
  line-height: 1;
  width: 64px; height: 64px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brass, #FFCB5C);
  border-radius: 50%;
  flex-shrink: 0;
}
.paws-modal-card.baddleton .paws-modal-avatar { background: #2a1a1e; border: 2px solid #E53935; }
.paws-modal-name {
  font-family: 'Chewy', 'Fredoka', sans-serif;
  font-size: 26px;
  color: var(--accent-pink, #E63946);
}
.paws-modal-card.baddleton .paws-modal-name { color: #E53935; }
.paws-modal-body {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  line-height: 1.55;
  color: #3e2f1a;
  margin-bottom: 22px;
  white-space: pre-line;
}
.paws-modal-card.baddleton .paws-modal-body { color: #E8DCC0; }
.paws-modal-ok {
  background: var(--accent-pink, #E63946);
  color: #FFF;
  border: none;
  padding: 12px 28px;
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 0 #B32030;
  transition: transform 0.1s;
  display: block;
  margin: 0 auto;
}
.paws-modal-ok:hover { transform: translateY(-1px); }
.paws-modal-ok:active { transform: translateY(2px); box-shadow: 0 1px 0 #B32030; }
.paws-modal-card.baddleton .paws-modal-ok {
  background: #FFA000;
  color: #1f1418;
  box-shadow: 0 4px 0 #B36E00;
}
.paws-modal-card.baddleton .paws-modal-ok:active { box-shadow: 0 1px 0 #B36E00; }

/* Post-it note: a small yellow sticky on the corner of the letter explaining
   why this one landed in the department. Data-driven via L.postit. */
.postit {
  position: absolute;
  top: -8px;
  right: 28px;
  width: 130px;
  min-height: 90px;
  background: linear-gradient(180deg, #FFF9A3 0%, #FFE95C 100%);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.25), 0 0 0 1px rgba(0, 0, 0, 0.06);
  padding: 18px 10px 10px;
  font-family: 'Caveat', 'Kalam', 'Comic Sans MS', cursive;
  font-size: 13px;
  line-height: 1.3;
  color: #3e2f0a;
  transform: rotate(3.5deg);
  z-index: 4;
  border-radius: 2px;
  pointer-events: auto;
  transition: transform 0.2s;
}
.postit:hover {
  transform: rotate(3.5deg) translateY(-2px) scale(1.03);
  z-index: 5;
}
.postit-tape {
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%) rotate(-4deg);
  width: 54px;
  height: 14px;
  background: rgba(200, 180, 120, 0.45);
  border-left: 1px dashed rgba(100, 80, 40, 0.2);
  border-right: 1px dashed rgba(100, 80, 40, 0.2);
}
.postit-text {
  display: block;
  word-break: break-word;
}
body.baddleton-mode .postit {
  background: linear-gradient(180deg, #FFC166 0%, #E88C2E 100%);
  color: #1f1418;
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(0, 0, 0, 0.3);
}
body.baddleton-mode .postit-tape { background: rgba(229, 57, 53, 0.35); }
/* =========================================================
   UTILITIES & OVERLAYS (The Missing Links!)
   ========================================================= */
.hidden { display: none !important; }

.start-screen, .day-summary {
  position: fixed; inset: 0; z-index: 1000;
  display: flex; align-items: center; justify-content: center;
}

.start-backdrop, .ledger-backdrop {
  position: absolute; inset: 0;
  background: rgba(161, 226, 249, 0.85); /* Sky blue tint */
  backdrop-filter: blur(8px);
}

.start-card, .ledger-card {
  position: relative; z-index: 10;
  max-width: 640px;
  max-height: 90vh;
  overflow-y: auto;
}

/* =========================================================
   TOAST NOTIFICATIONS
   ========================================================= */
.toast {
  position: fixed;
  top: -100px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--ink); color: #FFF;
  font-family: 'Fredoka', sans-serif; font-size: 16px;
  padding: 12px 24px; border-radius: 24px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.2);
  transition: top 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  z-index: 2000; pointer-events: none;
}
.toast.show { top: 140px; }  /* clears office-header + toolbar-row; never covers outcome buttons */

/* When audit banner is visible at top, slide toast further down to avoid overlap */
body.audit-active .toast.show { top: 210px; }

/* Focus mode also uses top-positioning (already the case, kept for override specificity) */
body.letter-focused .toast { top: -100px; }
body.letter-focused .toast.show { top: 140px; }

/* =========================================================
   DESK LETTER SPECIFICS & INTERIORS
   ========================================================= */
.letter-id {
  position: absolute; top: 12px; left: 16px;
  font-family: 'Fredoka', sans-serif; font-size: 12px; color: #999;
}

.letter-mini-btn {
  position: absolute; top: 12px; right: 16px;
  background: #EEE; border: none; padding: 4px 10px;
  border-radius: 12px; font-family: 'Fredoka', sans-serif; font-size: 11px;
  color: var(--ink); cursor: pointer; transition: all 0.1s;
}
.letter-mini-btn:hover { background: var(--brass); }

.letter-postmark {
  text-align: right;
  margin-bottom: 24px; margin-top: 10px;
  font-family: 'Delius', cursive; color: var(--ink-faded);
  font-size: 14px;
  border: 2px dashed var(--ink-faded);
  display: inline-block; padding: 6px 12px; border-radius: 50%;
  float: right; transform: rotate(5deg);
}

.letter-sender { margin-bottom: 30px; padding-top: 10px; }
.letter-recipient { margin-left: 40px; margin-bottom: 20px; }

.obscured { background: #CCC; color: transparent; border-radius: 4px; user-select: none; }
.restored { color: var(--ink-red); font-weight: bold; }
.typeable-field { background: rgba(0, 188, 212, 0.2); border-bottom: 2px dashed var(--ink-blue); cursor: text; }

/* Opened / Peeked Contents */
.interior-object, .inline-interior, .inner-sealed, .inner-opened, .peek-block {
  background: rgba(255, 255, 255, 0.7);
  border: 3px dashed var(--bg-sky);
  border-radius: 16px;
  padding: 16px; margin-top: 16px;
  font-family: 'Kalam', cursive;
}
.peek-tag, .object-tag, .inline-interior-tag, .inner-sealed-tag, .inner-opened-tag {
  font-family: 'Fredoka', sans-serif; font-size: 12px; color: var(--ink-blue);
  text-transform: uppercase; margin-bottom: 8px;
}
.case-notes {
  margin-top: 16px; padding-top: 16px; border-top: 2px solid #EEE;
  font-family: 'Fredoka', sans-serif; font-size: 13px; color: var(--ink-faded);
}

/* =========================================================
   TRAY BADGES & MARKS
   ========================================================= */
.tray-new-badge {
  position: absolute; top: -6px; right: -6px;
  background: var(--ink-red); color: #FFF; font-family: 'Fredoka', sans-serif;
  font-size: 10px; padding: 2px 6px; border-radius: 8px; transform: rotate(10deg);
}
.tray-postmark { font-size: 10px; color: #888; margin-bottom: 4px; }
.tray-mark-pill { display: inline-block; font-size: 9px; padding: 2px 4px; border-radius: 4px; margin-bottom: 4px; margin-right: 4px; font-weight: bold; text-transform: uppercase; }
.tray-mark-pill.urgent { background: #FFCDD2; color: #D32F2F; }
.tray-mark-pill.private { background: #E1BEE7; color: #7B1FA2; }

/* Desk Marks */
.desk-marks-strip { display: flex; gap: 8px; margin-bottom: 10px; margin-top: 20px; }
.desk-mark { background: #FFCDD2; color: #D32F2F; padding: 4px 8px; border-radius: 6px; font-family: 'Fredoka', sans-serif; font-size: 12px; font-weight: bold; }
.desk-mark-wax { width: 30px; height: 30px; background: #222; border-radius: 50%; box-shadow: inset 0 0 10px #000; }

/* =========================================================
   REDIRECT PICKER — narrow right-docked panel with pagination
   so the underlying letter stays visible on the left.
   ========================================================= */
.redirect-picker {
  position: absolute;
  right: 16px;
  top: 16px;
  bottom: 16px;
  width: 300px;
  z-index: 500;
  background: rgba(255,255,255,0.98);
  border: 4px solid var(--brass);
  border-radius: 20px;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: -6px 8px 24px rgba(0,0,0,0.22);
}
.rp-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 14px;
  background: var(--brass);
  border-bottom: 3px solid var(--brass-dark);
}
.rp-title { font-family: 'Fredoka', sans-serif; font-size: 15px; font-weight: 600; color: var(--ink); }
.rp-close {
  background: #FFF; border: 2px solid var(--brass-dark);
  color: var(--ink);
  font-size: 12px;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer; padding: 0;
  display: flex; align-items: center; justify-content: center;
  transition: transform 0.15s;
}
.rp-close:hover { transform: rotate(90deg); background: #FFF9C4; }
.rp-body {
  flex: 1;
  overflow-y: auto;
  padding: 10px 12px;
  display: block;
  min-height: 0;
}
.rp-empty {
  font-family: 'Delius', cursive;
  font-style: italic;
  color: var(--ink-faded);
  text-align: center;
  padding: 40px 10px;
}
.rp-group-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-red);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 2px dashed var(--desk-top);
  font-weight: 600;
}
.rp-choice {
  display: block; width: 100%; text-align: left; background: #FFF;
  border: 2px solid #EEE; padding: 8px 10px; border-radius: 10px; margin-bottom: 6px;
  cursor: pointer; transition: all 0.1s;
  font-family: inherit;
}
.rp-choice:hover { border-color: var(--brass); background: #FFFDE7; }
.rp-choice.recommended { border-color: var(--ok); background: #E8F5E9; }
.rp-name {
  font-family: 'Delius', cursive;
  font-weight: bold;
  font-size: 14px;
  color: var(--ink);
  line-height: 1.2;
}
.rp-addr {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  color: var(--ink-faded);
  margin-top: 2px;
}

/* Pager at the bottom of the picker */
.rp-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  border-top: 2px dashed var(--desk-top);
  flex-shrink: 0;
}
.rp-page-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: #FFF;
  border: 2px solid var(--brass);
  color: var(--ink);
  padding: 5px 10px;
  border-radius: 12px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--brass-dark);
  transition: all 0.1s;
  letter-spacing: 0.04em;
}
.rp-page-btn:hover:not(:disabled) {
  background: var(--brass-lit);
}
.rp-page-btn:active:not(:disabled) {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--brass-dark);
}
.rp-page-btn:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 0 3px 0 #BBB;
  border-color: #CCC;
}
.rp-page-count {
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: var(--ink-faded);
  font-style: italic;
}

.rp-foot {
  padding: 8px 12px;
  text-align: center;
  font-size: 10px;
  font-family: 'Delius', cursive;
  font-style: italic;
  color: var(--ink-faded);
  background: rgba(255,253,231,0.6);
  border-top: 2px solid rgba(251,192,45,0.35);
  flex-shrink: 0;
}

/* =========================================================
   PILE STATUS (Footer tracking)
   ========================================================= */
.pile-status {
  display: flex; justify-content: space-around;
  background: #FFF; padding: 10px;
  border-top: 4px solid var(--desk-top);
}
.pile-group { display: flex; align-items: center; gap: 8px; font-family: 'Fredoka', sans-serif; }
.pile-group .count { background: var(--desk-edge); color: #FFF; padding: 2px 8px; border-radius: 10px; font-weight: bold; }
.pile-label { color: var(--ink); font-size: 14px; }
/* =============================================================
   ============================================================
   POLISH PASS — Branch 14 edition
   Everything below this line was added to port missing
   visual systems onto the Snuggleton palette:
     - Peek block (Glow-Worm Jar reveal structure)
     - Annotation panels (Hint & Ask Manager)
     - Directory & Obituary rendering on the desk
     - Return stamp (pre-returned letters)
     - Day summary ledger overlay
     - Tutorial card on the desk
     - Obfuscation effects (juice, lollipop, jam, etc.)
     - Missing envelope variants (haunted-foxed, package-small, buttercup, sage)
     - Opt-in Anomaly-mode hook (body.anomaly-active — used later)
   ============================================================
   ============================================================ */

/* =============================================================
   GLOW-WORM JAR — structured peek reveal
   The jar shows Opening / A line within / Signature
   in three labeled rows beneath the address.
   ============================================================ */
.peek-block {
  margin: 14px 0 6px;
  padding: 12px 16px 12px;
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,255,190,0.6) 0%, transparent 55%),
    linear-gradient(175deg, #FFFACD 0%, #FFF59D 100%);
  border: 3px solid var(--brass);
  border-left: 5px solid var(--brass-dark);
  border-radius: 14px;
  position: relative;
  font-family: 'Delius', cursive;
  color: var(--ink);
  box-shadow: 0 4px 0 var(--brass-dark), inset 0 0 24px rgba(255,235,59,0.22);
  overflow: hidden;
}
.peek-block::before {
  /* Glow-worm glyph that pulses like a jar of fireflies */
  content: '🐛';
  position: absolute;
  top: 8px; right: 10px;
  font-size: 16px;
  opacity: 0.85;
  animation: glowWormPulse 1.4s ease-in-out infinite;
}
@keyframes glowWormPulse {
  0%, 100% { text-shadow: 0 0 6px rgba(255,235,59,0.7); opacity: 0.85; }
  50%      { text-shadow: 0 0 14px rgba(255,245,120,0.95); opacity: 1; }
}
.peek-tag {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-red);
  margin-bottom: 8px;
  font-weight: 600;
}
.peek-row {
  display: flex;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 2px dotted rgba(251,192,45,0.5);
  align-items: baseline;
}
.peek-row:last-of-type { border-bottom: 0; padding-bottom: 2px; }
.peek-row-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-red);
  opacity: 0.85;
  white-space: nowrap;
  min-width: 90px;
  font-weight: 600;
}
.peek-row-text {
  font-family: 'Delius', cursive;
  font-size: 14px;
  line-height: 1.4;
  color: var(--ink);
  flex: 1;
}
.peek-hint {
  margin-top: 10px;
  padding-top: 8px;
  border-top: 2px dashed rgba(251,192,45,0.4);
  font-size: 11px;
  font-style: italic;
  color: var(--ink-faded);
  line-height: 1.4;
}

/* Glow-Worm Jar armed state — flickering firefly glow on the tool icon */
.tool[data-tool="candle"].armed .tool-icon {
  animation: jarFlicker 0.9s ease-in-out infinite;
  text-shadow: 0 0 10px rgba(255,235,59,0.9);
}
@keyframes jarFlicker {
  0%, 100% { text-shadow: 0 0 10px rgba(255,235,59,0.9); opacity: 1; }
  30%      { text-shadow: 0 0 5px rgba(255,235,59,0.6); opacity: 0.85; }
  60%      { text-shadow: 0 0 16px rgba(255,245,120,1); opacity: 1; }
}

/* =============================================================
   ANNOTATION PANELS — Hint & Ask Manager
   Persistent notes that attach to a letter on the desk.
   ============================================================ */
.annotation-panel {
  margin: 12px 0 6px;
  padding: 12px 14px 12px;
  border-radius: 14px;
  position: relative;
  font-family: 'Delius', cursive;
  color: var(--ink);
  animation: annotPop 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes annotPop {
  0% { opacity: 0; transform: translateY(-4px) scale(0.98); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.annotation-hint {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,253,231,0.8) 0%, transparent 60%),
    linear-gradient(175deg, #FFFDE7 0%, #FFF59D 100%);
  border: 3px solid var(--brass);
  border-left: 5px solid var(--brass-dark);
  box-shadow: 0 4px 0 var(--brass-dark);
}
.annotation-manager {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(225,245,254,0.7) 0%, transparent 60%),
    linear-gradient(175deg, #E1F5FE 0%, #B3E5FC 100%);
  border: 3px solid var(--ink-blue);
  border-left: 5px solid #0097A7;
  box-shadow: 0 4px 0 #0097A7;
  color: #004D5C;
}
.annotation-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 8px;
  margin-bottom: 8px;
  border-bottom: 2px dotted rgba(251,192,45,0.5);
}
.annotation-manager .annotation-head {
  border-bottom-color: rgba(0,151,167,0.4);
}
.annotation-kind {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-red);
  font-weight: 600;
}
.annotation-manager .annotation-kind { color: #00838F; }
.annotation-close {
  background: #FFF;
  border: 2px solid var(--brass-dark);
  color: var(--ink);
  border-radius: 50%;
  width: 22px; height: 22px;
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: all 0.15s;
  padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.annotation-close:hover {
  background: var(--brass);
  transform: rotate(90deg);
}
.annotation-manager .annotation-close { border-color: #0097A7; }
.annotation-manager .annotation-close:hover { background: var(--ink-blue); color: #FFF; }
.annotation-body {
  font-size: 14px;
  line-height: 1.55;
  color: inherit;
}

/* Armed state on the advice buttons */
.manager-btn.armed {
  background: var(--ink-blue);
  color: #FFF;
  border-color: #0097A7;
  box-shadow: 0 0 0 4px rgba(0,151,167,0.25), 0 4px 0 #00838F;
}

/* =============================================================
   ROLODEX (Directory) RENDERING ON DESK
   ============================================================ */
.book-desk-body .dir-city {
  margin-bottom: 10px;
}
.book-desk-body .dir-city-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-red);
  margin-bottom: 4px;
  padding: 4px 8px;
  background: rgba(255,105,180,0.12);
  border-radius: 8px;
  border-bottom: 2px dashed var(--desk-top);
  font-weight: 600;
}
.book-desk-body .dir-city-name.uncatalogued {
  color: var(--ink-faded);
  background: rgba(255,255,255,0.4);
  font-style: italic;
  border-bottom-color: #BBB;
}

.dir-row {
  display: flex;
  gap: 10px;
  align-items: baseline;
  font-family: 'Delius', cursive;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 13px;
}
.dir-row:hover {
  background: #FFF9C4 !important;
}
.dir-name {
  min-width: 130px;
  color: var(--ink);
  font-weight: bold;
}
.dir-addr {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  color: var(--ink-faded);
}

/* =============================================================
   FLOATED AWAY LEDGER RENDERING ON DESK
   ============================================================ */
.obit-row {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 10px;
  margin-bottom: 8px;
  background: rgba(225,245,254,0.5);
  border-left: 4px solid var(--ink-blue);
}
.obit-row:hover {
  background: #E1F5FE !important;
}
.obit-name {
  font-family: 'Fredoka', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.obit-date {
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: var(--ink-faded);
  font-style: italic;
}
.obit-notice {
  font-family: 'Delius', cursive;
  font-size: 12px;
  color: var(--ink);
  margin-top: 3px;
  line-height: 1.4;
}

/* Book shelf pulled onto desk — container */
.desk-book {
  flex: 1 1 380px;
  min-width: 320px;
  max-width: 440px;
  min-height: 200px;
  max-height: 600px;
  background: var(--paper);
  border: 4px solid var(--brass-dark);
  border-radius: 16px;
  padding: 14px 18px;
  box-shadow: 0 8px 0 #b8842a, 0 16px 24px rgba(0,0,0,0.1);
  position: relative;
  display: flex;
  flex-direction: column;
}
.desk-book.selected {
  border-color: var(--brass);
  box-shadow: 0 12px 0 var(--brass-dark), 0 20px 30px rgba(0,0,0,0.15);
  transform: translateY(-8px);
}
.desk-book .letter-id {
  position: absolute; top: 10px; left: 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  color: var(--ink-faded);
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.desk-book .back-to-tray {
  position: absolute; top: 10px; right: 14px;
}
.book-desk-title {
  text-align: center;
  margin-bottom: 12px;
  margin-top: 18px;
  border-bottom: 3px dashed var(--desk-top);
  padding-bottom: 8px;
}
.book-desk-body {
  flex: 1;
  overflow-y: auto;
  padding: 4px 2px;
}
.book-desk-body::-webkit-scrollbar { width: 8px; }
.book-desk-body::-webkit-scrollbar-thumb { background: var(--desk-top); border-radius: 4px; }

/* =============================================================
   RETURN STAMP — pre-returned letters (L050-L053)
   Diagonal red stamp reading "NO MARY HERE" or similar.
   Designed to be VISIBLE but not obscure the text beneath —
   translucent background, smaller font, positioned near the
   recipient field (which is the reason for the return).
   ============================================================ */
.return-stamp {
  position: absolute;
  top: 22%; left: 12%;
  right: 12%;
  transform: rotate(-8deg);
  z-index: 5;
  pointer-events: none;
  text-align: center;
  background: rgba(255,228,225,0.35);
  border: 2px dashed var(--ink-red);
  border-radius: 6px;
  padding: 4px 10px 6px;
}
.return-stamp-text {
  font-family: 'Chewy', cursive;
  font-size: 15px;
  letter-spacing: 0.08em;
  color: var(--ink-red);
  text-transform: uppercase;
  line-height: 1.1;
  text-shadow:
    1px 1px 0 rgba(255,255,255,0.95),
    -1px -1px 0 rgba(255,255,255,0.95),
    1px -1px 0 rgba(255,255,255,0.95),
    -1px 1px 0 rgba(255,255,255,0.95);
  opacity: 0.9;
}
.return-stamp-sub {
  font-family: 'Delius', cursive;
  font-size: 9px;
  color: var(--ink-red);
  font-style: italic;
  opacity: 0.7;
  margin-top: 2px;
}

/* Pre-returned marker below address */
.letter-return-note {
  font-family: 'Delius', cursive;
  font-size: 11px;
  font-style: italic;
  color: var(--ink-red);
  margin-top: 6px;
  opacity: 0.85;
}

/* =============================================================
   DAY SUMMARY LEDGER — end-of-day overlay card
   ============================================================ */
.ledger-star {
  font-family: 'Chewy', cursive;
  font-size: 32px;
  color: var(--brass-dark);
  margin-bottom: 4px;
  text-align: center;
}
.ledger-header {
  padding-bottom: 14px;
  margin-bottom: 14px;
  border-bottom: 3px dashed var(--desk-top);
  text-align: center;
}
.ledger-kicker {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 14px;
  color: var(--ink-faded);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.ledger-sub {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 12px;
  color: var(--ink-faded);
  margin-top: 6px;
}
.ledger-flavor {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 15px;
  color: var(--ink);
  line-height: 1.5;
  margin-bottom: 20px;
  padding: 0 10px;
  text-align: center;
}
.ledger-list {
  text-align: left;
  margin: 0 auto 20px;
  max-width: 340px;
  padding: 14px 18px;
  background: rgba(255,253,231,0.8);
  border-radius: 12px;
  border: 2px solid var(--brass);
}
.ledger-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: 'Delius', cursive;
  font-size: 14px;
  color: var(--ink);
  padding: 4px 0;
  border-bottom: 1px dotted rgba(251,192,45,0.5);
}
.ledger-row:last-child { border-bottom: 0; }
.ledger-label { opacity: 0.85; }
.ledger-count {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 16px;
  color: var(--ink);
  min-width: 32px;
  text-align: right;
}
.ledger-row.bounced .ledger-count   { color: var(--ink-red); }
.ledger-row.destroyed .ledger-count { color: var(--danger); }
.ledger-row.delivered .ledger-count { color: var(--sage-deep, #388E3C); }
.ledger-empty {
  font-style: italic;
  text-align: center;
  color: var(--ink-faded);
  padding: 10px 0;
}
.ledger-tomorrow {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 13px;
  color: var(--ink-faded);
  margin-bottom: 20px;
  text-align: center;
}

/* =============================================================
   TUTORIAL CARD on the desk — teaching moments
   ============================================================ */
.tut-lamp {
  position: absolute;
  top: 12px; left: 14px;
  font-size: 22px;
  color: var(--brass);
  text-shadow: 0 0 10px rgba(255,235,59,0.5);
  animation: tutLampTwinkle 1.8s ease-in-out infinite;
}
@keyframes tutLampTwinkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
  50%      { transform: scale(1.15) rotate(10deg); opacity: 0.85; }
}
.tut-body {
  padding: 8px 6px 4px 40px;
}
.tut-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--ink-red);
  margin-bottom: 6px;
  letter-spacing: 0.04em;
}
.tut-text {
  font-family: 'Delius', cursive;
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink);
}

/* A letter with a tutorial card gets a cheerful yellow left rail */
.desk-letter.has-tutorial {
  border-left-width: 8px;
  border-left-color: var(--brass);
}

/* =============================================================
   TRAY ISSUE DOTS — small coloured marks on a tray envelope
   showing "this one has something going on"
   ============================================================ */
.tray-issues {
  display: flex;
  gap: 3px;
  margin-top: 4px;
}
.tray-issue-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ink-red);
  box-shadow: 0 0 4px rgba(255,20,147,0.5);
}

/* =============================================================
   REDIRECT PICKER — polish missing bits
   ============================================================ */
.rp-group { padding: 4px; }
.rp-rec-dot {
  display: inline-block;
  margin-left: 6px;
  color: var(--brass-dark);
  font-size: 14px;
  font-weight: bold;
  animation: recDotPulse 1.2s ease-in-out infinite;
}
@keyframes recDotPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.7; transform: scale(1.2); }
}

/* =============================================================
   OBFUSCATION EFFECTS
   Existing: water-damage, partial-smudge, faded-ink
   New whimsy-appropriate: juice-spill, lollipop, jam-smear,
   bubblegum, crumbs, glitter-dust, crayon-scribble
   ============================================================ */

/* --- Water damage (the envelope got rained on) --- */
.desk-letter.water-damage {
  filter: saturate(0.9);
}
.desk-letter.water-damage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(100,150,200,0.18) 0%, transparent 25%),
    radial-gradient(ellipse at 70% 60%, rgba(100,150,200,0.15) 0%, transparent 20%),
    radial-gradient(ellipse at 50% 80%, rgba(100,150,200,0.1) 0%, transparent 25%);
  pointer-events: none;
  border-radius: inherit;
  z-index: 1;
}
.tray-envelope.water-damage {
  filter: saturate(0.85);
  background-image:
    radial-gradient(ellipse at 30% 50%, rgba(100,150,200,0.2) 0%, transparent 35%);
}

/* --- Juice spill (purple/orange sticky wash) --- */
.desk-letter.juice-spill::after {
  content: '';
  position: absolute;
  top: 30%; left: 8%;
  width: 48%; height: 38%;
  background:
    radial-gradient(ellipse at 30% 40%, rgba(156,39,176,0.32) 0%, transparent 50%),
    radial-gradient(ellipse at 60% 55%, rgba(156,39,176,0.24) 0%, transparent 45%),
    radial-gradient(ellipse at 20% 70%, rgba(156,39,176,0.18) 0%, transparent 40%);
  border-radius: 40% 60% 50% 30%;
  transform: rotate(-6deg);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}
.tray-envelope.juice-spill {
  background-image: radial-gradient(ellipse at 40% 50%, rgba(156,39,176,0.25), transparent 55%);
}

/* --- Lollipop stuck to the address --- */
.desk-letter.lollipop::after {
  content: '';
  position: absolute;
  top: 40%; left: 30%;
  width: 44px; height: 44px;
  background:
    radial-gradient(circle at 35% 35%, #FFF 0%, var(--desk-edge) 8%, var(--ink-red) 30%, #FFF 33%, var(--desk-edge) 42%, var(--ink-red) 55%, #FFF 60%, var(--brass) 75%);
  border-radius: 50%;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25), inset -2px -2px 4px rgba(0,0,0,0.15);
  transform: rotate(-12deg);
  pointer-events: none;
  z-index: 2;
}
.desk-letter.lollipop::before {
  /* the stick */
  content: '';
  position: absolute;
  top: 58%; left: 46%;
  width: 3px; height: 28px;
  background: #FFF;
  border: 1px solid #BBB;
  transform: rotate(20deg);
  transform-origin: top center;
  pointer-events: none;
  z-index: 1;
}
.tray-envelope.lollipop::before {
  content: '🍭';
  position: absolute;
  top: 4px; right: 6px;
  font-size: 20px;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.2));
  transform: rotate(-8deg);
}

/* --- Jam smear (red sticky horizontal streak) --- */
.desk-letter.jam-smear::after {
  content: '';
  position: absolute;
  top: 44%; left: 0;
  right: 10%;
  height: 22px;
  background:
    linear-gradient(90deg,
      rgba(211,47,47,0.7) 0%,
      rgba(211,47,47,0.5) 30%,
      rgba(211,47,47,0.3) 65%,
      transparent 100%);
  border-radius: 2px 30% 60% 4px;
  transform: rotate(-3deg);
  pointer-events: none;
  z-index: 2;
  box-shadow: inset 0 -2px 4px rgba(100,20,20,0.2);
}

/* --- Bubblegum stuck to the envelope --- */
.desk-letter.bubblegum::after {
  content: '';
  position: absolute;
  top: 35%; left: 50%;
  width: 50px; height: 38px;
  background:
    radial-gradient(ellipse at 35% 30%, rgba(255,255,255,0.5) 0%, transparent 25%),
    radial-gradient(ellipse at 50% 50%, var(--desk-edge) 0%, var(--desk-top) 70%, transparent 100%);
  border-radius: 55% 40% 60% 50%;
  transform: rotate(8deg);
  pointer-events: none;
  z-index: 2;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset -2px -3px 5px rgba(0,0,0,0.1);
}

/* --- Crumbs (small dots of old toast, scattered) --- */
.desk-letter.crumbs::after {
  content: '';
  position: absolute;
  top: 36%; left: 20%;
  width: 55%; height: 25%;
  background-image:
    radial-gradient(circle at 10% 20%, #C68642 2px, transparent 3px),
    radial-gradient(circle at 30% 45%, #A0522D 1.5px, transparent 2.5px),
    radial-gradient(circle at 50% 70%, #C68642 2px, transparent 3px),
    radial-gradient(circle at 70% 25%, #8B4513 1.5px, transparent 2.5px),
    radial-gradient(circle at 85% 55%, #C68642 2px, transparent 3px),
    radial-gradient(circle at 20% 75%, #A0522D 1.5px, transparent 2.5px),
    radial-gradient(circle at 60% 85%, #8B4513 2px, transparent 3px);
  pointer-events: none;
  z-index: 2;
}

/* --- Glitter dust (sparkly scatter — Edith Sparkle-Toes classic) --- */
.desk-letter.glitter-dust::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 15% 20%, rgba(233,30,99,0.85) 1px, transparent 2px),
    radial-gradient(circle at 45% 15%, rgba(255,235,59,0.85) 1.5px, transparent 2.5px),
    radial-gradient(circle at 70% 30%, rgba(0,188,212,0.8) 1px, transparent 2px),
    radial-gradient(circle at 85% 55%, rgba(233,30,99,0.8) 1.5px, transparent 2.5px),
    radial-gradient(circle at 25% 60%, rgba(255,235,59,0.85) 1px, transparent 2px),
    radial-gradient(circle at 55% 75%, rgba(0,188,212,0.75) 1.5px, transparent 2.5px),
    radial-gradient(circle at 10% 85%, rgba(233,30,99,0.8) 1px, transparent 2px),
    radial-gradient(circle at 75% 90%, rgba(255,235,59,0.85) 1.5px, transparent 2.5px);
  pointer-events: none;
  z-index: 1;
  border-radius: inherit;
}

/* --- Crayon scribble (child hand drew over the address) --- */
.desk-letter.crayon-scribble::after {
  content: '';
  position: absolute;
  top: 35%; left: 12%;
  width: 50%; height: 28%;
  background-image:
    repeating-linear-gradient(45deg,
      rgba(76,175,80,0.35) 0px,
      rgba(76,175,80,0.35) 3px,
      transparent 3px,
      transparent 8px),
    repeating-linear-gradient(-45deg,
      rgba(255,87,34,0.3) 0px,
      rgba(255,87,34,0.3) 3px,
      transparent 3px,
      transparent 9px);
  border-radius: 8px 30% 8px 20%;
  transform: rotate(-3deg);
  pointer-events: none;
  z-index: 2;
  mix-blend-mode: multiply;
}

/* Partial smudge — a single field obscured (kept simple, uses .obscured) */
.desk-letter.partial-smudge .obscured {
  background: linear-gradient(90deg, #CCC 0%, #EEE 50%, #CCC 100%);
  filter: blur(0.5px);
}

/* Faded ink — used for CAPTCHA mode, text stays present but blurred */
.typeable-field {
  display: inline-block;
  filter: blur(2.4px) contrast(0.8);
  padding: 0 3px;
  color: var(--ink);
  transition: filter 0.18s;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.typeable-field:hover {
  filter: blur(1.2px) contrast(0.9);
  background: rgba(255,235,59,0.35);
}
.typeable-field.solved {
  filter: none;
  background: rgba(76,175,80,0.25);
  color: var(--sage-deep, #388E3C);
  font-weight: 600;
}

/* =============================================================
   MISSING ENVELOPE VARIANTS
   ============================================================ */

/* Haunted (foxed paper — the 1923-letter-from-the-past feel) */
.desk-letter.env-haunted:not(.haunted) {
  background:
    /* brown spots */
    radial-gradient(ellipse at 20% 30%, rgba(130,85,50,0.25) 0%, transparent 5%),
    radial-gradient(ellipse at 75% 20%, rgba(110,65,35,0.25) 0%, transparent 4%),
    radial-gradient(ellipse at 35% 70%, rgba(100,65,40,0.2) 0%, transparent 6%),
    radial-gradient(ellipse at 85% 80%, rgba(90,55,30,0.22) 0%, transparent 4%),
    /* water stain top edge */
    linear-gradient(180deg, rgba(110,75,40,0.25) 0%, transparent 10%),
    /* aged cream */
    linear-gradient(175deg, #F0E0B8 0%, #E0C890 60%, #C8A860 100%);
  border-color: #8B6F3F;
  filter: sepia(0.2);
}

/* Package-small (parcel variant for small objects like photographs) */
.desk-letter.env-package-small {
  background: #FFF9C4;
  border: 3px dashed var(--brass-dark);
  border-radius: 12px;
}
.desk-letter.env-package-small::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0; left: 40%;
  width: 18px;
  background:
    repeating-linear-gradient(90deg,
      rgba(200,150,80,0.5) 0px,
      rgba(200,150,80,0.5) 3px,
      transparent 3px, transparent 6px);
  pointer-events: none;
}

/* Buttercup (sunny yellow — cheerful letters) */
.desk-letter.env-buttercup {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(255,253,231,0.7) 0%, transparent 55%),
    linear-gradient(175deg, #FFFDE7 0%, var(--brass) 70%, var(--brass-dark) 100%);
  border-color: var(--brass-dark);
}

/* Sage (herbal green — garden-club / pastoral) */
.desk-letter.env-sage {
  background:
    radial-gradient(ellipse at 20% 10%, rgba(232,245,233,0.6) 0%, transparent 55%),
    linear-gradient(175deg, #E8F5E9 0%, #A5D6A7 70%, #66BB6A 100%);
  border-color: #388E3C;
}

/* =============================================================
   CAPTCHA POPUP — for faded-ink typing puzzles
   ============================================================ */
/* =============================================================
   CAPTCHA POPUP — floats near the clicked typeable field
   (engine positions via inline style from the click's bounding
   rect). It is NOT a full-screen modal.
   ============================================================ */
.captcha-popup {
  /* position: fixed; left/top come from engine inline style */
  background: #FFF;
  border: 3px solid var(--brass);
  border-radius: 16px;
  padding: 14px 16px 12px;
  width: 280px;
  box-shadow: 0 8px 0 var(--brass-dark), 0 16px 30px rgba(0,0,0,0.25);
  z-index: 950;  /* above focused letter (920) and its dismiss layer (905) */
  animation: captchaPop 0.22s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
@keyframes captchaPop {
  0%   { opacity: 0; transform: translateY(-6px) scale(0.96); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.captcha-title {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-red);
  font-weight: 600;
  margin-bottom: 8px;
  text-align: center;
}
.captcha-sample {
  font-family: 'Delius', cursive;
  font-size: 22px;
  text-align: center;
  color: var(--ink);
  background: rgba(255,249,196,0.7);
  border: 2px solid var(--brass);
  border-radius: 8px;
  padding: 10px 6px;
  filter: blur(2.4px) contrast(0.8);
  letter-spacing: 0.05em;
  margin-bottom: 10px;
  user-select: none;
}
.captcha-help {
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: var(--ink-faded);
  font-style: italic;
  line-height: 1.35;
  margin-bottom: 10px;
  text-align: center;
}
.captcha-input {
  width: 100%;
  font-family: 'Delius', cursive;
  font-size: 15px;
  padding: 8px 12px;
  border: 2px solid var(--brass-dark);
  border-radius: 10px;
  background: #FFF;
  color: var(--ink);
  margin-bottom: 10px;
  outline: none;
  box-sizing: border-box;
}
.captcha-input:focus {
  border-color: var(--ink-red);
  box-shadow: 0 0 0 3px rgba(233,30,99,0.18);
}
.captcha-row {
  display: flex;
  justify-content: space-between;
  gap: 8px;
}
.captcha-submit, .captcha-cancel {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 16px;
  border: 2px solid;
  cursor: pointer;
  transition: all 0.1s;
  flex: 1;
}
.captcha-submit {
  background: var(--brass);
  border-color: var(--brass-dark);
  color: var(--ink);
  box-shadow: 0 3px 0 var(--brass-dark);
}
.captcha-submit:hover { background: var(--brass-lit); }
.captcha-submit:active { transform: translateY(3px); box-shadow: 0 0 0 var(--brass-dark); }
.captcha-cancel {
  background: #FFF;
  border-color: #BBB;
  color: var(--ink-faded);
  box-shadow: 0 3px 0 #BBB;
}
.captcha-cancel:hover { background: #F5F5F5; }
.captcha-cancel:active { transform: translateY(3px); box-shadow: 0 0 0 #BBB; }

/* =============================================================
   HINT BUTTON — polish for both Hint and Ask Manager
   ============================================================ */
.hint-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  padding: 8px 14px;
  border-radius: 20px;
  background: #FFF;
  border: 3px solid var(--brass);
  color: var(--ink);
  cursor: pointer;
  box-shadow: 0 4px 0 var(--brass-dark);
  transition: all 0.1s;
}
.hint-btn:active {
  transform: translateY(4px);
  box-shadow: 0 0 0 var(--brass-dark);
}
.hint-btn.armed {
  background: var(--brass);
  box-shadow: 0 0 0 4px rgba(255,235,59,0.35), 0 4px 0 var(--brass-dark);
}

/* =============================================================
   ANOMALY MODE — the opt-in cosmic horror flag
   When body.anomaly-active is set, the game begins to "corner"
   itself. For now, it's only a hook — the Anomaly letter-level
   overrides already exist on specific letters. This rule lets
   us later expand the corruption to the whole UI when toggled.
   ============================================================ */
body.anomaly-active .pane,
body.anomaly-active .desk-surface,
body.anomaly-active .outcomes-bar {
  /* placeholder — when anomaly mode triggers, corners soften off */
  transition: border-radius 1s ease-in-out;
}
/* When the anomaly is "winning" — set stronger corruption later */
body.anomaly-winning .pane,
body.anomaly-winning .desk-surface,
body.anomaly-winning .outcomes-bar {
  border-radius: 0 !important;
  filter: saturate(0.7);
}

/* =============================================================
   BOOK PAGER — Prev / Next for Rolodex & Ledger
   ============================================================ */
.book-pager {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px 4px;
  margin-top: 8px;
  border-top: 2px dashed rgba(251,192,45,0.5);
  flex-shrink: 0;
}
.book-page-btn {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  background: #FFF;
  border: 2px solid var(--brass);
  color: var(--ink);
  padding: 6px 12px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 3px 0 var(--brass-dark);
  transition: all 0.1s;
  letter-spacing: 0.04em;
}
.book-page-btn:hover:not(.disabled) {
  background: var(--brass-lit);
}
.book-page-btn:active:not(.disabled) {
  transform: translateY(3px);
  box-shadow: 0 0 0 var(--brass-dark);
}
.book-page-btn.disabled {
  opacity: 0.35;
  cursor: not-allowed;
  box-shadow: 0 3px 0 #BBB;
  border-color: #CCC;
}
.book-page-count {
  font-family: 'Delius', cursive;
  font-size: 12px;
  color: var(--ink-faded);
  font-style: italic;
}

/* Uncatalogued page in Rolodex — matches the inline style the old
   render used, but with proper class. */
.dir-city-name.uncatalogued {
  color: var(--ink-faded);
  font-style: italic;
  background: rgba(255,255,255,0.4);
  border-bottom-color: #BBB;
}
.dir-row-uncatalogued {
  font-style: italic;
  color: var(--ink-faded);
  padding: 12px 12px 14px;
  cursor: default;
  font-family: 'Delius', cursive;
  font-size: 13px;
  line-height: 1.45;
}
.uncat-town {
  font-family: 'Chewy', cursive;
  font-style: normal;
  font-size: 20px;
  color: var(--ink);
  letter-spacing: 2px;
  opacity: 0.8;
  margin-bottom: 4px;
}
.uncat-sub {
  font-size: 12px;
  margin-bottom: 10px;
  opacity: 0.85;
}
.uncat-note {
  font-size: 11px;
  font-style: normal;
  font-family: 'Delius', cursive;
  color: var(--ink-faded);
  background: rgba(0,0,0,0.04);
  padding: 8px 10px;
  border-left: 2px solid rgba(0,0,0,0.1);
  line-height: 1.5;
}

/* =============================================================
   OUT-TRAY ENVELOPES — stamped letters waiting for day-end
   Each shows an angled stamp indicating its outcome (colored
   per action), with a slight rotation for an "in the pile" feel.
   ============================================================ */
.outtray-envelope {
  position: relative;
  background: var(--paper);
  border: 3px solid #E5E5E5;
  border-left: 6px solid #CCC;
  border-radius: 10px;
  padding: 10px 12px 12px 14px;
  margin-bottom: 10px;
  cursor: pointer;
  transform: rotate(-1.5deg);
  box-shadow: 0 4px 0 #D8D8D8;
  transition: transform 0.15s, box-shadow 0.15s;
  overflow: hidden;
}
.outtray-envelope:nth-child(2n) { transform: rotate(1.5deg); }
.outtray-envelope:nth-child(3n) { transform: rotate(-0.5deg); }
.outtray-envelope:nth-child(4n) { transform: rotate(1deg); }
.outtray-envelope:hover {
  transform: rotate(0) translateY(-2px);
  box-shadow: 0 6px 0 #D8D8D8;
  border-color: var(--brass);
}

.outtray-to {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.2;
  padding-right: 72px;
}
.outtray-from {
  font-family: 'Delius', cursive;
  font-size: 10px;
  color: var(--ink-faded);
  margin-top: 2px;
  padding-right: 72px;
  opacity: 0.85;
}
.outtray-pull {
  font-family: 'Delius', cursive;
  font-size: 9px;
  color: var(--ink-faded);
  font-style: italic;
  margin-top: 6px;
  opacity: 0.55;
}

.outtray-stamp {
  position: absolute;
  top: 10px; right: -12px;
  transform: rotate(8deg);
  font-family: 'Chewy', cursive;
  font-size: 10px;
  letter-spacing: 0.08em;
  padding: 3px 16px 4px;
  border: 2px dashed;
  border-radius: 6px;
  background: rgba(255,255,255,0.9);
  text-transform: uppercase;
  white-space: nowrap;
  max-width: 92px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Per-outcome color accents */
.outtray-envelope.stamped-deliver  { border-left-color: var(--ok); }
.outtray-envelope.stamped-deliver  .outtray-stamp  { color: #2E7D32; border-color: var(--ok); }

.outtray-envelope.stamped-redirect { border-left-color: var(--bg-sky-deep); }
.outtray-envelope.stamped-redirect .outtray-stamp  { color: var(--bg-sky-deep); border-color: var(--bg-sky-deep); }

.outtray-envelope.stamped-return   { border-left-color: var(--brass-dark); }
.outtray-envelope.stamped-return   .outtray-stamp  { color: var(--brass-dark); border-color: var(--brass-dark); }

.outtray-envelope.stamped-destroy  { border-left-color: var(--danger); }
.outtray-envelope.stamped-destroy  .outtray-stamp  { color: var(--danger); border-color: var(--danger); }

.outtray-envelope.stamped-archive  { border-left-color: var(--desk-edge); }
.outtray-envelope.stamped-archive  .outtray-stamp  { color: var(--desk-edge); border-color: var(--desk-edge); }

/* ============================================================ */
/* THE HAUNT — full UI takeover when L035 is misstamped         */
/* ============================================================ */

/* ---------- Global takeover (body.anomaly-active) ---------- */
body.anomaly-active {
  /* Corners lose their roundness across the entire UI.
     Saturation drops. Colors cool.                          */
  --ink: #1a1a22;
  --ink-faded: #3a3a44;
  --ink-red: #55555c;
  --ink-blue: #3a3a44;
  --paper: #d8d6cf;
  --paper-shadow: #a8a49a;
  --paper-edge: #8a867c;
  --bg-sky: #b8b4a8;
  --bg-sky-deep: #8a867c;
  --bg-sky-soft: #c8c4b8;
  --accent-pink: #6e5a62;
  --accent-yellow: #a89870;
  filter: saturate(0.55) contrast(1.05);
  transition: filter 1.4s ease;
}
body.anomaly-active * {
  border-radius: 0 !important;
  transition: border-radius 0.8s ease, background-color 0.8s ease;
}
body.anomaly-active .app-header h1 {
  letter-spacing: 2px;
  font-family: 'Courier New', monospace;
}
body.anomaly-active .intray-pane,
body.anomaly-active .outtray-pane,
body.anomaly-active .desk-pane {
  box-shadow: 0 0 0 1px #666 inset, 0 3px 0 #444;
}
body.anomaly-active .pane-title {
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}

/* Transient easing-back when the haunt is solved */
body.anomaly-restoring {
  animation: anomaly-restore 2.2s ease-out;
}
@keyframes anomaly-restore {
  0%   { filter: saturate(0.55); }
  40%  { filter: saturate(1.25) brightness(1.08); }
  100% { filter: saturate(1) brightness(1); }
}
body.anomaly-restoring * {
  transition: border-radius 1.8s ease, background-color 1.8s ease, color 1.8s ease;
}

/* ---------- Haunt letter styling ---------- */
body.anomaly-active .desk-letter {
  background: #e8e4d6;
  border: 1px solid #5a5a60;
  box-shadow: 0 2px 0 #7a766c, 0 4px 14px rgba(0,0,0,0.25);
  font-family: 'Courier New', monospace;
}
body.anomaly-active .inline-interior {
  background: #e2dcc8;
  border-left: 3px solid #4a4a52;
  font-family: 'Courier New', monospace;
  color: #2a2a32;
  letter-spacing: 0.4px;
}
body.anomaly-active .inline-interior-tag {
  color: #4a4a52;
  font-family: 'Courier New', monospace;
  text-transform: uppercase;
}

/* ---------- Sealed haunt letter (before Crab opens it) ---------- */
.haunt-sealed {
  margin-top: 12px;
  padding: 12px 14px;
  background: #1a1a22;
  border: 1px dashed #555;
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: 'Courier New', monospace;
}
.haunt-sealed-seal {
  font-size: 28px;
  color: #a83a3a;
  line-height: 1;
  flex-shrink: 0;
}
.haunt-sealed-text {
  font-size: 11px;
  color: #d8d2c0;
  letter-spacing: 0.5px;
  line-height: 1.4;
}

/* ---------- Scrap cutout on haunt letters (compact) ---------- */
.haunt-scrap-tray {
  margin-top: 10px;
  padding: 10px 12px;
  background: repeating-linear-gradient(
    45deg,
    #d8d2c0 0 8px,
    #cec7b4 8px 16px
  );
  border: 1px dashed #7a766a;
  border-radius: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-family: 'Courier New', monospace;
}
.haunt-scrap-tag {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #555;
  flex: 1;
  line-height: 1.3;
}
.haunt-scrap {
  width: 54px;
  height: 54px;
  background: #f4ead4;
  border: 1px solid #3a3a42;
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #3a3a42,
    0 2px 0 #2a2a32,
    0 4px 10px rgba(0,0,0,0.35);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
  padding: 0;
}
.haunt-scrap:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #3a3a42,
    0 4px 0 #2a2a32,
    0 7px 14px rgba(0,0,0,0.4);
}
.haunt-scrap:active {
  transform: translateY(1px);
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #3a3a42,
    0 1px 0 #2a2a32;
}
.haunt-scrap-glyph {
  font-size: 32px;
  font-weight: 900;
  color: #1a1a22;
  letter-spacing: 0;
  line-height: 1;
}
.haunt-scrap-hint {
  font-size: 9px;
  letter-spacing: 1px;
  color: #666;
  font-style: italic;
  text-align: right;
  flex-shrink: 0;
}
.haunt-scrap-tray.collected {
  opacity: 0.55;
  background: #c8c2b0;
}
.haunt-scrap-cut {
  font-size: 32px;
  color: #6a665c;
}

/* ---------- Assembly letter: 9 slots (compact) ---------- */
.haunt-assembly {
  margin-top: 12px;
  padding: 10px 12px 12px;
  background: #1a1a22;
  border: 1px solid #000;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.6), 0 2px 0 #000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.haunt-assembly-label {
  font-family: 'Courier New', monospace;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b8b4a8;
}
.haunt-slots {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  justify-content: center;
}
.haunt-slot {
  width: 32px;
  height: 42px;
  background: #2a2a32;
  border: 1px dashed #666;
  position: relative;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Courier New', monospace;
  transition: background 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.haunt-slot:hover:not(.filled) {
  background: #3a3a42;
  border-color: #999;
}
.haunt-slot.filled {
  background: #f4ead4;
  border: 1px solid #1a1a22;
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #1a1a22;
}
.haunt-slot.filled:hover {
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #1a1a22,
    0 0 6px rgba(255, 80, 80, 0.45);
}
.haunt-slot-glyph {
  font-size: 20px;
  font-weight: 900;
  color: #1a1a22;
  line-height: 1;
}
.haunt-slot-num {
  position: absolute;
  bottom: 1px;
  right: 2px;
  font-size: 7px;
  color: #666;
}
.haunt-slot.filled .haunt-slot-num {
  color: #999;
}
.haunt-slot.shaking {
  animation: slot-shake 0.38s ease-in-out;
  border-color: #a83a3a;
}
@keyframes slot-shake {
  0%, 100% { transform: translateX(0); }
  20% { transform: translateX(-4px) rotate(-1deg); }
  40% { transform: translateX(4px) rotate(1deg); }
  60% { transform: translateX(-3px) rotate(-0.5deg); }
  80% { transform: translateX(3px) rotate(0.5deg); }
}

/* ---------- Strip rail: compact single line ---------- */
.haunt-strip-rail {
  padding: 6px 12px;
  background: linear-gradient(to bottom, #26262e, #1a1a22);
  border-top: 1px solid #000;
  border-bottom: 1px solid #000;
  box-shadow: inset 0 0 20px rgba(0,0,0,0.5);
  font-family: 'Courier New', monospace;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
  position: relative;
  z-index: 10;
}
/* In focus mode, the strip rail must clear the dim backdrop and the focused
   letter so the player can see and click scrap tiles while assembling. */
body.letter-focused .haunt-strip-rail {
  position: fixed;
  left: 50%;
  bottom: 160px;                              /* sits above the outcomes bar */
  transform: translateX(-50%);
  z-index: 940;                               /* above focused letter (920) */
  min-width: min(720px, 92vw);
  max-width: 92vw;
  border-radius: 10px;
  border: 2px solid #000;
  box-shadow: 0 8px 24px rgba(0,0,0,0.7), inset 0 0 20px rgba(0,0,0,0.5);
}
.haunt-strip-rail.hidden { display: none; }
.haunt-strip-label {
  font-size: 9px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #b8b4a8;
  flex-shrink: 0;
  max-width: 70px;
  line-height: 1.2;
}
.haunt-strip-scraps {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  flex: 1;
  min-height: 34px;
  align-items: center;
}
.haunt-strip-empty {
  color: #888;
  font-style: italic;
  font-size: 10px;
  letter-spacing: 0.5px;
}
.haunt-strip-scrap {
  width: 30px;
  height: 38px;
  background: #f4ead4;
  border: 1px solid #1a1a22;
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #1a1a22,
    0 2px 0 #0a0a12;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.haunt-strip-scrap:hover {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 2px #f4ead4,
    inset 0 0 0 3px #1a1a22,
    0 3px 0 #0a0a12,
    0 0 8px rgba(255, 220, 120, 0.4);
}
.haunt-strip-scrap.selected {
  background: #ffe680;
  box-shadow:
    inset 0 0 0 2px #ffe680,
    inset 0 0 0 3px #1a1a22,
    0 2px 0 #0a0a12,
    0 0 12px rgba(255, 220, 80, 0.9);
  animation: strip-pulse 1.2s ease-in-out infinite;
}
@keyframes strip-pulse {
  0%, 100% { box-shadow:
    inset 0 0 0 2px #ffe680,
    inset 0 0 0 3px #1a1a22,
    0 2px 0 #0a0a12,
    0 0 8px rgba(255, 220, 80, 0.6); }
  50% { box-shadow:
    inset 0 0 0 2px #ffe680,
    inset 0 0 0 3px #1a1a22,
    0 2px 0 #0a0a12,
    0 0 16px rgba(255, 220, 80, 1); }
}
.haunt-strip-glyph {
  font-size: 18px;
  font-weight: 900;
  color: #1a1a22;
  line-height: 1;
}
.haunt-strip-hint {
  font-size: 9px;
  letter-spacing: 0.5px;
  color: #888;
  font-style: italic;
  flex-shrink: 0;
  max-width: 110px;
  line-height: 1.2;
  text-align: right;
}

/* ---------- Submit button (compact) ---------- */
.haunt-submit-bar {
  padding: 8px 12px;
  background: #1a1a22;
  border-top: 1px solid #000;
  display: flex;
  justify-content: center;
  flex-shrink: 0;
}
.haunt-submit-bar.hidden { display: none; }
.outcomes-bar.hidden { display: none; }
.haunt-submit-btn {
  background: #2a2a32;
  border: 1px solid #555;
  color: #888;
  font-family: 'Courier New', monospace;
  padding: 8px 24px;
  cursor: not-allowed;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  letter-spacing: 3px;
  transition: all 0.3s ease;
}
.haunt-submit-btn.ready {
  background: linear-gradient(to bottom, #3a3a42, #1a1a22);
  border: 1px solid #ffe680;
  color: #ffe680;
  cursor: pointer;
  box-shadow: 0 0 16px rgba(255, 220, 80, 0.5);
  animation: submit-pulse 1.8s ease-in-out infinite;
}
@keyframes submit-pulse {
  0%, 100% { box-shadow: 0 0 16px rgba(255, 220, 80, 0.4); }
  50% { box-shadow: 0 0 28px rgba(255, 220, 80, 0.8); }
}
.haunt-submit-btn.ready:hover {
  transform: translateY(-1px);
  box-shadow: 0 0 32px rgba(255, 220, 80, 1);
}
.haunt-submit-word {
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}
.haunt-submit-sub {
  font-size: 9px;
  letter-spacing: 2px;
  opacity: 0.7;
  text-transform: uppercase;
}

/* ---------- Day-summary haunted variant ---------- */
.ledger-card.haunted {
  background: #1a1a22;
  color: #d8d2c0;
  border: 1px solid #000;
  border-radius: 0;
  font-family: 'Courier New', monospace;
  box-shadow: 0 0 40px rgba(0,0,0,0.9);
}
.ledger-card.haunted .ledger-star {
  color: #a83a3a;
  font-size: 36px;
  font-family: 'Courier New', monospace;
}
.ledger-card.haunted .ledger-kicker { color: #888; letter-spacing: 4px; }
.ledger-card.haunted .ledger-day {
  color: #a83a3a;
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  font-weight: 900;
}
.ledger-card.haunted .ledger-sub { color: #999; font-style: italic; }
.ledger-card.haunted .ledger-flavor {
  color: #d8d2c0;
  font-style: normal;
  background: #2a2a32;
  border-left: 3px solid #a83a3a;
  padding: 12px;
}
.ledger-card.haunted .ledger-tomorrow {
  color: #d8d2c0;
  background: #2a2a32;
  border: 1px solid #555;
}
.ledger-card.haunted .ledger-continue {
  background: linear-gradient(to bottom, #3a3a42, #1a1a22);
  color: #ffe680;
  border: 1px solid #ffe680;
  font-family: 'Courier New', monospace;
  letter-spacing: 3px;
  box-shadow: 0 0 20px rgba(255, 220, 80, 0.4);
}
.ledger-card.haunted .ledger-continue:hover {
  box-shadow: 0 0 32px rgba(255, 220, 80, 0.8);
  transform: translateY(-1px);
}

/* ============================================================ */
/* RIGHT-RAIL PANE — tools + shelf + compare + back              */
/* ============================================================ */

.rightrail-pane {
  padding: 14px;
  gap: 0;
}

.rightrail-pane .pane-header {
  margin-bottom: 10px;
  padding-bottom: 6px;
}

.rail-group {
  margin-bottom: 14px;
  flex-shrink: 0;
}
.rail-group:last-child { margin-bottom: 0; }

.rail-group-label {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--ink-faded);
  margin-bottom: 6px;
  padding-left: 2px;
  opacity: 0.7;
}

/* Pack tool/book/action buttons tight and compact in the rail */
.rail-tool,
.rail-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  margin-bottom: 6px;
  background: rgba(255, 255, 255, 0.7);
  border: 2px solid rgba(0, 188, 212, 0.35);
  border-radius: 12px;
  cursor: pointer;
  font-family: 'Delius', cursive;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 2px 0 rgba(0, 188, 212, 0.2);
}
.rail-tool:last-child,
.rail-action:last-child { margin-bottom: 0; }

.rail-tool:hover,
.rail-action:hover {
  transform: translateY(-1px);
  background: rgba(255, 255, 255, 0.95);
  box-shadow: 0 3px 0 rgba(0, 188, 212, 0.35);
}
.rail-tool:active,
.rail-action:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 rgba(0, 188, 212, 0.2);
}

.rail-tool .tool-icon,
.rail-tool .book-icon,
.rail-action-icon {
  font-size: 24px;
  line-height: 1;
  flex-shrink: 0;
}

.rail-tool .tool-text,
.rail-tool .book-text,
.rail-action-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.rail-tool .tool-name,
.rail-tool .book-name,
.rail-action-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.15;
}
.rail-tool .tool-desc,
.rail-tool .book-desc,
.rail-action-desc {
  font-family: 'Delius', cursive;
  font-size: 10px;
  color: var(--ink-faded);
  line-height: 1.2;
  opacity: 0.9;
}

/* Armed tool */
.rail-tool.armed {
  background: #FFE680;
  border-color: #FFB700;
  box-shadow: 0 3px 0 #FFA000, 0 0 0 3px rgba(255, 183, 0, 0.25);
  animation: rail-armed-pulse 1.2s ease-in-out infinite;
}
@keyframes rail-armed-pulse {
  0%, 100% { box-shadow: 0 3px 0 #FFA000, 0 0 0 3px rgba(255, 183, 0, 0.25); }
  50% { box-shadow: 0 3px 0 #FFA000, 0 0 0 5px rgba(255, 183, 0, 0.45); }
}

/* Book in use (on desk) */
.book-shelf-btn.on-desk {
  background: linear-gradient(to bottom, rgba(255, 245, 210, 0.95), rgba(255, 235, 180, 0.95));
  border-color: #FFB700;
  box-shadow: 0 3px 0 #FFA000;
}

/* Compare action */
#compare-btn {
  border-color: rgba(233, 30, 99, 0.4);
  box-shadow: 0 2px 0 rgba(233, 30, 99, 0.25);
}
#compare-btn:hover {
  border-color: rgba(233, 30, 99, 0.7);
  box-shadow: 0 3px 0 rgba(233, 30, 99, 0.4);
}
#compare-btn.active {
  background: #FFE1EC;
  border-color: #E91E63;
  box-shadow: 0 3px 0 #AD1457, 0 0 0 3px rgba(233, 30, 99, 0.25);
}

/* Back action */
.rail-action-back {
  border-color: rgba(97, 97, 97, 0.35);
  box-shadow: 0 2px 0 rgba(97, 97, 97, 0.25);
}
.rail-action-back:hover {
  border-color: rgba(97, 97, 97, 0.6);
}

/* Disabled state for rail actions/tools when no letter focused */
.rail-tool.disabled,
.rail-action.disabled {
  opacity: 0.35;
  pointer-events: none;
  filter: grayscale(0.6);
}

/* ============================================================ */
/* MATCH BUTTON — now floats between the two desk items          */
/* ============================================================ */

.match-float {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 15;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 14px;
  background: linear-gradient(to bottom, #FFE680, #FFD23F);
  color: #3C0F70;
  border: 2px solid #E91E63;
  padding: 8px 16px;
  border-radius: 100px;
  cursor: not-allowed;
  box-shadow: 0 3px 0 #AD1457, 0 5px 14px rgba(233, 30, 99, 0.35);
  letter-spacing: 0.02em;
  white-space: nowrap;
  opacity: 0.5;
  transition: all 0.2s ease;
}
.match-float.enabled {
  cursor: pointer;
  opacity: 1;
  animation: match-float-pulse 1.6s ease-in-out infinite;
}
.match-float.enabled:hover {
  transform: translate(-50%, -55%);
  box-shadow: 0 5px 0 #AD1457, 0 8px 20px rgba(233, 30, 99, 0.55);
}
@keyframes match-float-pulse {
  0%, 100% { box-shadow: 0 3px 0 #AD1457, 0 5px 14px rgba(233, 30, 99, 0.35); }
  50% { box-shadow: 0 3px 0 #AD1457, 0 6px 20px rgba(233, 30, 99, 0.6); }
}

/* ============================================================ */
/* COMPARE MODE — inbox letters glow clickable                   */
/* ============================================================ */

body.compare-mode .intray-pane .intray-letter {
  cursor: pointer;
  animation: compare-ready-pulse 1.4s ease-in-out infinite;
}
body.compare-mode .intray-pane .intray-letter:hover {
  transform: translateY(-3px) scale(1.03);
  box-shadow: 0 6px 16px rgba(233, 30, 99, 0.4);
}
@keyframes compare-ready-pulse {
  0%, 100% { box-shadow: 0 2px 6px rgba(0,0,0,0.15); }
  50% { box-shadow: 0 2px 6px rgba(0,0,0,0.15), 0 0 0 3px rgba(233, 30, 99, 0.35); }
}

/* Banner across top of desk when in compare mode */
.compare-banner {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 10;
  background: #FFE1EC;
  color: #AD1457;
  border: 2px solid #E91E63;
  border-radius: 20px;
  padding: 6px 16px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 13px;
  box-shadow: 0 3px 8px rgba(233, 30, 99, 0.3);
  white-space: nowrap;
}
.compare-banner button {
  margin-left: 10px;
  background: transparent;
  border: 1px solid #AD1457;
  color: #AD1457;
  border-radius: 12px;
  padding: 2px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  cursor: pointer;
}
.compare-banner button:hover {
  background: #AD1457;
  color: #FFE1EC;
}

/* ============================================================ */
/* FOCUS LETTER POP-IN animation                                 */
/* ============================================================ */

@keyframes pop-onto-desk {
  0% {
    transform: scale(0.3) rotate(-8deg);
    opacity: 0;
  }
  60% {
    transform: scale(1.08) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: scale(1) rotate(-1.5deg);
    opacity: 1;
  }
}
.desk-letter.pop-in {
  animation: pop-onto-desk 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

/* ============================================================ */
/* STAMP SLAM + FLY-OUT animations                                */
/* Triggered by .stamping + .stamping-{outcome} + .flying-out    */
/* ============================================================ */

/* The letter wobbles in anticipation, then a colored flash SLAMS the center */
.desk-letter.stamping {
  position: relative;
  animation: stamp-wobble 0.28s ease-out forwards;
  z-index: 30;
}
@keyframes stamp-wobble {
  0%   { transform: rotate(-1.5deg) scale(1); }
  30%  { transform: rotate(-3deg)   scale(1.02); }
  60%  { transform: rotate(1deg)    scale(0.98); }
  100% { transform: rotate(-1.5deg) scale(1); }
}

/* The stamp itself — a giant colored word slammed across the letter */
.desk-letter.stamping::after {
  content: '';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Chewy', cursive;
  font-size: 52px;
  letter-spacing: 4px;
  font-weight: 900;
  pointer-events: none;
  z-index: 50;
  opacity: 0;
  animation: stamp-slam 0.28s cubic-bezier(0.2, 1.8, 0.4, 1) forwards;
  text-shadow: 2px 2px 0 rgba(0,0,0,0.3);
}
@keyframes stamp-slam {
  0%   { opacity: 0; transform: scale(3) rotate(-15deg); }
  40%  { opacity: 1; transform: scale(0.9) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.05) rotate(-8deg); }
  100% { opacity: 1; transform: scale(1) rotate(-8deg); }
}
.desk-letter.stamping-deliver::after  { content: 'DELIVER!';    color: #00C853; }
.desk-letter.stamping-return::after   { content: 'BOING!';      color: #FFB300; }
.desk-letter.stamping-destroy::after  { content: 'MUNCH!';      color: #E91E63; }
.desk-letter.stamping-archive::after  { content: 'FILED';       color: #607D8B; }
.desk-letter.stamping-redirect::after { content: 'REDIRECT →';  color: #7B1FA2; font-size: 40px; }

/* A subtle color flash behind the stamp word */
.desk-letter.stamping::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 40;
  opacity: 0;
  animation: stamp-flash 0.28s ease-out forwards;
}
@keyframes stamp-flash {
  0%   { opacity: 0; }
  30%  { opacity: 0.55; }
  100% { opacity: 0; }
}
.desk-letter.stamping-deliver::before  { background: rgba(0, 200, 83, 0.35); }
.desk-letter.stamping-return::before   { background: rgba(255, 179, 0, 0.35); }
.desk-letter.stamping-destroy::before  { background: rgba(233, 30, 99, 0.4); }
.desk-letter.stamping-archive::before  { background: rgba(96, 125, 139, 0.3); }
.desk-letter.stamping-redirect::before { background: rgba(123, 31, 162, 0.35); }

/* Then the letter arcs off to the left toward the Out-Chute */
.desk-letter.flying-out {
  animation: stamp-fly-out 0.3s ease-in forwards !important;
  pointer-events: none;
}
@keyframes stamp-fly-out {
  0%   { transform: translateX(0) translateY(0) rotate(-1.5deg) scale(1); opacity: 1; }
  100% { transform: translateX(-380px) translateY(120px) rotate(-28deg) scale(0.35); opacity: 0; }
}

/* ============================================================ */
/* Glow-Worm peek: dims over ~1.5s before fully going dark       */
/* ============================================================ */
.peek-block.peek-fading {
  animation: peek-dim 1.5s ease-out forwards;
}
@keyframes peek-dim {
  0%   { opacity: 1; filter: brightness(1) saturate(1); }
  40%  { opacity: 0.85; filter: brightness(0.88) saturate(0.75); }
  70%  { opacity: 0.55; filter: brightness(0.7) saturate(0.5); }
  100% { opacity: 0.2; filter: brightness(0.5) saturate(0.3); }
}
/* While fading, worms flicker more erratically — jar is giving up */
.peek-block.peek-fading::before {
  animation: glow-worm-dying 0.35s ease-in-out infinite;
}
@keyframes glow-worm-dying {
  0%, 100% { text-shadow: 0 0 3px rgba(255,235,59,0.4); opacity: 0.6; }
  40%      { text-shadow: none;                           opacity: 0.25; }
  60%      { text-shadow: 0 0 8px rgba(255,245,120,0.7);  opacity: 0.8; }
}
.peek-block.peek-fading .peek-hint {
  color: #B71C1C;
  font-style: italic;
  font-weight: 500;
}

/* ============================================================ */
/* SNUGGLETON TRUST METER — the citywide progress indicator that
   lives in the office header. Starts at 50 (Trusted). Gains and
   losses come from stamp correctness, tool use, and haunt arcs.  */
/* ============================================================ */
.trust-meter {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 320px;
  max-width: 420px;
  flex: 1 1 340px;
  padding: 8px 14px;
  background: rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 255, 255, 0.35);
  border-radius: 16px;
  box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.25), 0 2px 8px rgba(20, 10, 40, 0.15);
  margin: 0 24px;
}
.trust-meter-top {
  display: flex;
  align-items: baseline;
  gap: 10px;
  font-family: 'Fredoka', sans-serif;
}
.trust-label {
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
}
.trust-tier {
  font-size: 14px;
  font-weight: 600;
  color: #FFF;
  flex: 1;
  text-align: center;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.25);
}
.trust-value {
  font-family: 'Chewy', cursive;
  font-size: 16px;
  color: #FFD54F;
  min-width: 28px;
  text-align: right;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
}
.trust-meter-track {
  position: relative;
  height: 12px;
  background: rgba(20, 10, 40, 0.35);
  border-radius: 999px;
  overflow: hidden;
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
}
.trust-meter-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #FF6B6B 0%, #FFD54F 30%, #81C784 65%, #4FC3F7 100%);
  background-size: 320% 100%;
  background-position: 50% 0%;     /* repositioned by JS via fill width */
  transition: width 0.7s cubic-bezier(0.22, 1, 0.36, 1), background-position 0.7s ease;
  box-shadow: 0 0 8px rgba(255, 235, 120, 0.4);
}
/* Tier-based color shift */
.trust-meter.tier-ice      .trust-meter-fill { background-position:   0% 0%; }   /* red */
.trust-meter.tier-probate  .trust-meter-fill { background-position:  25% 0%; }   /* red-yellow */
.trust-meter.tier-trusted  .trust-meter-fill { background-position:  50% 0%; }   /* yellow-green */
.trust-meter.tier-wellreg  .trust-meter-fill { background-position:  75% 0%; }   /* green */
.trust-meter.tier-beloved  .trust-meter-fill { background-position: 100% 0%; }   /* blue */

/* Tier-based tier-label glow */
.trust-meter.tier-ice      .trust-tier { color: #FFCDD2; }
.trust-meter.tier-probate  .trust-tier { color: #FFF59D; }
.trust-meter.tier-trusted  .trust-tier { color: #FFFFFF; }
.trust-meter.tier-wellreg  .trust-tier { color: #A5D6A7; }
.trust-meter.tier-beloved  .trust-tier { color: #90CAF9; text-shadow: 0 0 8px rgba(144, 202, 249, 0.8); }

.trust-meter-pip {
  position: absolute;
  top: 2px;
  bottom: 2px;
  width: 2px;
  background: rgba(255, 255, 255, 0.35);
  border-radius: 1px;
  pointer-events: none;
}

/* Pulse when trust changes */
.trust-meter.flash-up .trust-meter-fill {
  animation: trust-flash-up 0.7s ease-out;
}
.trust-meter.flash-down .trust-meter-fill {
  animation: trust-flash-down 0.7s ease-out;
}
@keyframes trust-flash-up {
  0%   { box-shadow: 0 0 8px rgba(255, 235, 120, 0.4); }
  40%  { box-shadow: 0 0 24px rgba(129, 199, 132, 0.95), 0 0 8px rgba(255, 255, 255, 0.6); }
  100% { box-shadow: 0 0 8px rgba(255, 235, 120, 0.4); }
}
@keyframes trust-flash-down {
  0%   { box-shadow: 0 0 8px rgba(255, 235, 120, 0.4); }
  40%  { box-shadow: 0 0 24px rgba(255, 107, 107, 0.95), 0 0 8px rgba(255, 255, 255, 0.6); }
  100% { box-shadow: 0 0 8px rgba(255, 235, 120, 0.4); }
}

/* Responsive: on narrow screens shrink the meter */
@media (max-width: 980px) {
  .trust-meter { min-width: 220px; margin: 0 12px; }
  .trust-label { display: none; }
}

/* ============================================================ */
/* POSTMASTER PAWS — SPEECH BUBBLE                                */
/* Slides in from the right, sits for a few seconds, fades out.  */
/* Sits above the focus dim (z-index 900) but below toasts (2000) */
/* ============================================================ */
.paws-bubble {
  position: fixed;
  right: 24px;
  bottom: 24px;
  max-width: 340px;
  min-width: 240px;
  display: flex;
  gap: 12px;
  padding: 14px 18px 14px 14px;
  background: linear-gradient(170deg, #FFFDF5 0%, #FFF3E0 100%);
  border: 3px solid #6A1B9A;
  border-radius: 22px;
  box-shadow:
    0 10px 0 #4A148C,
    0 18px 40px rgba(20, 10, 40, 0.55);
  z-index: 1500;
  opacity: 0;
  transform: translateX(60px) translateY(8px) scale(0.92);
  transition: opacity 0.26s ease-out, transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1);
  font-family: 'Delius', cursive;
  pointer-events: none;
}
.paws-bubble.show {
  opacity: 1;
  transform: translateX(0) translateY(0) scale(1);
}
.paws-bubble.leaving {
  opacity: 0;
  transform: translateX(40px) translateY(4px) scale(0.95);
  transition: opacity 0.22s ease-in, transform 0.22s ease-in;
}

/* Speech tail pointing down-right (toward the "offscreen" Paws) */
.paws-bubble::after {
  content: '';
  position: absolute;
  right: 36px;
  bottom: -14px;
  width: 22px;
  height: 14px;
  background: linear-gradient(170deg, #FFFDF5 0%, #FFF3E0 100%);
  border-right: 3px solid #6A1B9A;
  border-bottom: 3px solid #6A1B9A;
  border-bottom-right-radius: 8px;
  transform: rotate(45deg) skew(-8deg, -8deg);
  box-shadow: 4px 4px 0 -1px #4A148C;
}

.paws-avatar {
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  background: radial-gradient(circle at 35% 30%, #FFE082 0%, #FFB74D 70%, #F57C00 100%);
  border: 2px solid #E65100;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 2px 0 #BF360C, inset 0 2px 4px rgba(255, 255, 255, 0.4);
  animation: paws-avatar-bob 2.4s ease-in-out infinite;
}
@keyframes paws-avatar-bob {
  0%, 100% { transform: translateY(0) rotate(-3deg); }
  50%      { transform: translateY(-2px) rotate(3deg); }
}

.paws-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex: 1;
}
.paws-name {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6A1B9A;
  line-height: 1;
}
.paws-text {
  font-family: 'Delius', cursive;
  font-size: 14.5px;
  line-height: 1.35;
  color: var(--ink);
}

/* When Paws is speaking WITH a focused letter, keep the bubble from overlapping
   the outcomes bar which sits centered at bottom:24px. Move it up a bit. */
body.letter-focused .paws-bubble {
  bottom: 108px;    /* above the floating outcomes bar */
}

@media (max-width: 700px) {
  .paws-bubble { right: 12px; bottom: 12px; max-width: calc(100vw - 24px); }
  body.letter-focused .paws-bubble { bottom: 98px; }
}

/* ============================================================ */
/* Trust meter: projected-delta badge + ghost marker              */
/* ============================================================ */
.trust-projected {
  display: none;
  font-family: 'Chewy', cursive;
  font-size: 13px;
  padding: 2px 8px;
  border-radius: 999px;
  margin-right: 4px;
  background: rgba(0, 0, 0, 0.25);
  color: #FFF;
  text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3);
  transition: background 0.3s ease;
}
.trust-projected.visible  { display: inline-block; }
.trust-projected.positive { background: rgba(76, 175, 80, 0.85); }
.trust-projected.negative { background: rgba(239, 83, 80, 0.9); }

/* Ghost marker on the track — shows where trust will land post-commit */
.trust-meter-ghost {
  position: absolute;
  top: -3px;
  bottom: -3px;
  width: 3px;
  left: 50%;
  background: rgba(255, 255, 255, 0.9);
  border-radius: 2px;
  opacity: 0;
  transition: left 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s ease, background 0.25s ease;
  pointer-events: none;
  box-shadow: 0 0 8px rgba(255, 255, 255, 0.8);
}
.trust-meter-ghost.visible  { opacity: 0.9; }
.trust-meter-ghost.positive { background: #A5D6A7; box-shadow: 0 0 10px rgba(165, 214, 167, 0.95); }
.trust-meter-ghost.negative { background: #EF9A9A; box-shadow: 0 0 10px rgba(239, 154, 154, 0.95); }

/* ============================================================ */
/* Trust ledger block — lives inside the day-summary card         */
/* ============================================================ */
.trust-ledger {
  margin: 16px 0 12px;
  padding: 12px 16px;
  background: rgba(255, 243, 224, 0.7);
  border: 2px solid rgba(106, 27, 154, 0.2);
  border-radius: 14px;
}
.trust-ledger.trust-up {
  border-color: rgba(76, 175, 80, 0.55);
  background: linear-gradient(170deg, rgba(200, 230, 201, 0.5) 0%, rgba(255, 253, 245, 0.85) 100%);
}
.trust-ledger.trust-down {
  border-color: rgba(239, 83, 80, 0.55);
  background: linear-gradient(170deg, rgba(255, 205, 210, 0.45) 0%, rgba(255, 253, 245, 0.85) 100%);
}
.trust-ledger.haunted {
  background: rgba(40, 20, 60, 0.55);
  border-color: rgba(200, 180, 220, 0.3);
  color: #E1D4EE;
}

.trust-ledger-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px dashed rgba(106, 27, 154, 0.2);
}
.trust-ledger-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #6A1B9A;
  flex: 1;
}
.trust-ledger.haunted .trust-ledger-title { color: #C4A6E0; }
.trust-ledger-total {
  font-family: 'Chewy', cursive;
  font-size: 22px;
  color: var(--ink);
}
.trust-ledger.trust-up   .trust-ledger-total { color: #2E7D32; }
.trust-ledger.trust-down .trust-ledger-total { color: #C62828; }
.trust-ledger-now {
  font-family: 'Delius', cursive;
  font-size: 12px;
  color: var(--ink-faded);
}
.trust-ledger.haunted .trust-ledger-now { color: #B0A0C4; }

.trust-ledger-rows {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-family: 'Delius', cursive;
  font-size: 12.5px;
}
.trust-ledger-row {
  display: grid;
  grid-template-columns: 60px 1fr 48px;
  gap: 8px;
  align-items: baseline;
  padding: 3px 4px;
  border-radius: 6px;
}
.trust-ledger-row:hover { background: rgba(255, 255, 255, 0.4); }
.tl-id {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 11px;
  color: var(--ink-faded);
  letter-spacing: 0.04em;
}
.tl-what {
  color: var(--ink);
}
.trust-ledger.haunted .tl-what { color: #E1D4EE; }
.tl-delta {
  font-family: 'Chewy', cursive;
  font-size: 14px;
  text-align: right;
  color: var(--ink-faded);
}
.tl-delta.tl-pos { color: #2E7D32; }
.tl-delta.tl-neg { color: #C62828; }
.trust-ledger.haunted .tl-delta.tl-pos { color: #A5D6A7; }
.trust-ledger.haunted .tl-delta.tl-neg { color: #EF9A9A; }

/* ============================================================ */
/* INTRAY CAPACITY STATES + OVERFLOW FOOTER                       */
/* ============================================================ */

/* Nearly full: counter glows soft amber */
.intray-pane.near-capacity #intray-count {
  color: #F57C00;
  font-weight: 600;
  text-shadow: 0 0 8px rgba(245, 124, 0, 0.35);
}

/* At capacity: counter pulses red, pane border intensifies */
.intray-pane.at-capacity {
  box-shadow: 0 0 0 2px rgba(229, 57, 53, 0.45), 0 4px 14px rgba(229, 57, 53, 0.25);
}
.intray-pane.at-capacity #intray-count {
  color: #C62828;
  font-weight: 700;
  animation: intray-cap-pulse 1.8s ease-in-out infinite;
}
.intray-pane.at-capacity #intray-count::after {
  content: ' / 5';
  opacity: 0.7;
  font-size: 0.85em;
  font-weight: 400;
}
@keyframes intray-cap-pulse {
  0%, 100% { text-shadow: 0 0 6px rgba(229, 57, 53, 0.4); }
  50%      { text-shadow: 0 0 12px rgba(229, 57, 53, 0.9); }
}

/* Has overflow: the "pane" gets a subtle amber left-edge glow
   to hint that mail is stacking up off-screen */
.intray-pane.has-overflow {
  position: relative;
}
.intray-pane.has-overflow::after {
  content: '';
  position: absolute;
  left: -3px;
  top: 10%;
  bottom: 10%;
  width: 4px;
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(255, 152, 0, 0.6) 40%,
    rgba(255, 152, 0, 0.6) 60%,
    transparent 100%);
  border-radius: 4px;
  animation: overflow-edge-pulse 2.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes overflow-edge-pulse {
  0%, 100% { opacity: 0.4; }
  50%      { opacity: 0.9; }
}

/* The footer that sits below the last visible letter, explaining
   that more mail is waiting to slide in */
.tray-overflow-footer {
  margin-top: 12px;
  padding: 10px 12px;
  background: linear-gradient(170deg, #FFF8E1 0%, #FFECB3 100%);
  border: 2px dashed #FFB300;
  border-radius: 12px;
  font-family: 'Delius', cursive;
  animation: overflow-footer-bob 2.8s ease-in-out infinite;
}
@keyframes overflow-footer-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-2px); }
}
.tray-overflow-line {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 500;
  color: #E65100;
  font-size: 13px;
}
.tray-overflow-icon {
  font-size: 18px;
  animation: overflow-icon-spin 3.2s linear infinite;
  display: inline-block;
}
@keyframes overflow-icon-spin {
  0%   { transform: rotate(0deg); }
  40%  { transform: rotate(180deg); }
  60%  { transform: rotate(180deg); }
  100% { transform: rotate(360deg); }
}
.tray-overflow-sub {
  font-size: 11px;
  color: var(--ink-faded);
  font-style: italic;
  margin-top: 2px;
}

/* ============================================================ */
/* ENDING SCREENS — four tonal variations                         */
/* ============================================================ */
.ending-screen {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  animation: ending-fade-in 0.8s ease-out forwards;
}
.ending-screen.hidden { display: none; }
@keyframes ending-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.ending-backdrop {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at center, rgba(20, 10, 40, 0.85) 0%, rgba(10, 5, 30, 0.96) 100%);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 0;
}

.ending-card {
  position: relative;
  z-index: 1;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 52px 48px 44px;
  border-radius: 28px;
  text-align: center;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 0 4px rgba(255, 255, 255, 0.15);
  animation: ending-card-rise 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s backwards;
}
@keyframes ending-card-rise {
  from { opacity: 0; transform: translateY(36px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ending-kicker {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.7;
  margin-bottom: 12px;
}
.ending-title {
  font-family: 'Chewy', cursive;
  font-size: 52px;
  letter-spacing: 0.04em;
  margin: 0 0 6px;
  line-height: 1;
  text-shadow: 0 3px 0 rgba(0, 0, 0, 0.15);
}
.ending-subtitle {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 17px;
  margin-bottom: 28px;
  opacity: 0.88;
}

.ending-stats {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 0 auto 28px;
  padding: 14px 20px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.18);
}
.ending-stat { display: flex; flex-direction: column; gap: 2px; min-width: 80px; }
.ending-stat-label {
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  opacity: 0.55;
}
.ending-stat-value {
  font-family: 'Chewy', cursive;
  font-size: 20px;
}

.ending-flavor {
  text-align: left;
  margin: 0 auto 32px;
  max-width: 520px;
}
.ending-para {
  font-family: 'Delius', cursive;
  font-size: 15px;
  line-height: 1.6;
  margin: 0 0 14px;
}

.ending-continue {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 500;
  padding: 14px 36px;
  border-radius: 999px;
  border: none;
  cursor: pointer;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.ending-continue:hover { transform: translateY(-2px); }
.ending-continue:active { transform: translateY(1px); }

/* --- Fired: greys + cold red --- */
.end-fired {
  background: linear-gradient(170deg, #37474F 0%, #263238 100%);
  color: #ECEFF1;
}
.end-fired .ending-title { color: #FFCDD2; }
.end-fired .ending-kicker { color: #B0BEC5; }
.end-fired .ending-continue {
  background: #B71C1C;
  color: #FFEBEE;
  box-shadow: 0 4px 0 #7F0000;
}
.end-fired .ending-continue:hover { background: #C62828; box-shadow: 0 6px 0 #7F0000; }

/* --- Promoted: celebratory gold/pink --- */
.end-promoted {
  background: linear-gradient(170deg, #FFF3E0 0%, #FFCCBC 100%);
  color: #4A148C;
}
.end-promoted .ending-title {
  color: #AD1457;
  text-shadow: 0 3px 0 #FFF, 0 6px 0 rgba(173, 20, 87, 0.25);
}
.end-promoted .ending-kicker { color: #6A1B9A; }
.end-promoted .ending-stats { background: rgba(106, 27, 154, 0.08); border-color: rgba(106, 27, 154, 0.2); }
.end-promoted .ending-stat-label { color: rgba(74, 20, 140, 0.6); }
.end-promoted .ending-continue {
  background: linear-gradient(170deg, #FFD54F 0%, #FFA726 100%);
  color: #4A148C;
  box-shadow: 0 4px 0 #E65100;
}
.end-promoted .ending-continue:hover { box-shadow: 0 6px 0 #E65100; }

/* --- Good: warm cream + sage --- */
.end-good {
  background: linear-gradient(170deg, #FFFDE7 0%, #DCEDC8 100%);
  color: #33691E;
}
.end-good .ending-title { color: #2E7D32; text-shadow: 0 3px 0 #FFF; }
.end-good .ending-kicker { color: #558B2F; }
.end-good .ending-stats { background: rgba(46, 125, 50, 0.08); border-color: rgba(46, 125, 50, 0.2); }
.end-good .ending-stat-label { color: rgba(51, 105, 30, 0.6); }
.end-good .ending-continue {
  background: #66BB6A;
  color: #FFF;
  box-shadow: 0 4px 0 #2E7D32;
}
.end-good .ending-continue:hover { background: #4CAF50; box-shadow: 0 6px 0 #2E7D32; }

/* --- Good-plus (haunt solved): adds a gentle halo --- */
.end-good-plus {
  box-shadow:
    0 24px 80px rgba(0, 0, 0, 0.6),
    0 0 0 4px rgba(255, 235, 120, 0.5),
    0 0 60px rgba(255, 235, 120, 0.3);
}
.end-good-plus .ending-title {
  animation: good-plus-glow 3s ease-in-out infinite;
}
@keyframes good-plus-glow {
  0%, 100% { text-shadow: 0 3px 0 #FFF, 0 0 0 rgba(255, 235, 120, 0); }
  50%      { text-shadow: 0 3px 0 #FFF, 0 0 22px rgba(255, 235, 120, 0.75); }
}

/* --- Melancholy: muted blue-purple --- */
.end-melancholy {
  background: linear-gradient(170deg, #37474F 0%, #455A64 60%, #546E7A 100%);
  color: #CFD8DC;
}
.end-melancholy .ending-title { color: #B0BEC5; }
.end-melancholy .ending-kicker { color: #90A4AE; }
.end-melancholy .ending-stats { background: rgba(207, 216, 220, 0.06); border-color: rgba(207, 216, 220, 0.14); }
.end-melancholy .ending-stat-label { color: rgba(207, 216, 220, 0.5); }
.end-melancholy .ending-continue {
  background: #455A64;
  color: #ECEFF1;
  border: 1px solid #78909C;
  box-shadow: 0 4px 0 #263238;
}
.end-melancholy .ending-continue:hover { background: #546E7A; box-shadow: 0 6px 0 #263238; }
.end-melancholy .ending-title {
  animation: melancholy-drift 6s ease-in-out infinite;
}
@keyframes melancholy-drift {
  0%, 100% { letter-spacing: 0.04em; }
  50%      { letter-spacing: 0.10em; opacity: 0.85; }
}

/* Lock interactions once game has ended */
body.game-ended .intray-pane,
body.game-ended .desk-pane,
body.game-ended .rightrail-pane,
body.game-ended .outcomes-bar,
body.game-ended .toolbar-row,
body.game-ended .office-header {
  pointer-events: none;
  opacity: 0.3;
  filter: saturate(0.5);
}

/* Day indicator "of 14" suffix */
.day-max {
  display: inline-block;
  font-family: 'Delius', cursive;
  font-size: 11px;
  color: var(--ink-faded);
  margin-left: 4px;
  opacity: 0.75;
}

@media (max-width: 640px) {
  .ending-card { padding: 36px 24px 30px; }
  .ending-title { font-size: 36px; }
}

/* ============================================================ */
/* DIRECTIVES — running objectives panel + intro proclamation     */
/* ============================================================ */
.directive-panel {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 24px 12px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.directive-panel.hidden { display: none; }

.directive-row {
  flex: 1 1 300px;
  min-width: 260px;
  max-width: 480px;
  padding: 8px 14px 10px;
  background: linear-gradient(170deg, rgba(255, 253, 245, 0.9) 0%, rgba(255, 243, 224, 0.88) 100%);
  border: 2px solid rgba(106, 27, 154, 0.25);
  border-radius: 14px;
  box-shadow: 0 2px 6px rgba(20, 10, 40, 0.15);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.directive-row.directive-done {
  border-color: rgba(76, 175, 80, 0.55);
  background: linear-gradient(170deg, rgba(200, 230, 201, 0.7) 0%, rgba(255, 253, 245, 0.88) 100%);
  box-shadow: 0 2px 10px rgba(76, 175, 80, 0.35);
}
.directive-row-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 6px;
}
.directive-row-title {
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 13px;
  color: #4A148C;
  letter-spacing: 0.02em;
}
.directive-row.directive-done .directive-row-title { color: #1B5E20; }
.directive-row-progress {
  font-family: 'Delius', cursive;
  font-size: 11.5px;
  color: var(--ink-faded);
  font-style: italic;
}
.directive-row.directive-done .directive-row-progress {
  color: #2E7D32;
  font-style: normal;
  font-weight: 500;
}
.directive-row.directive-done .directive-row-progress::before {
  content: '✓ ';
  font-weight: 700;
}

.directive-bar-track {
  height: 6px;
  background: rgba(106, 27, 154, 0.14);
  border-radius: 999px;
  overflow: hidden;
}
.directive-bar-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #BA68C8 0%, #AB47BC 100%);
  transition: width 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 0 6px rgba(186, 104, 200, 0.6);
}
.directive-row.directive-done .directive-bar-fill {
  background: linear-gradient(90deg, #81C784 0%, #66BB6A 100%);
  box-shadow: 0 0 8px rgba(129, 199, 132, 0.7);
}

/* --- Directive intro proclamation modal --- */
.directive-intro {
  position: fixed;
  inset: 0;
  z-index: 2800;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(20, 10, 40, 0.72);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: directive-intro-fade 0.4s ease-out forwards;
  padding: 24px;
}
@keyframes directive-intro-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.directive-intro-card {
  max-width: 520px;
  width: 100%;
  padding: 36px 40px 28px;
  background: linear-gradient(170deg, #FFFDF5 0%, #FFF3E0 60%, #FFE0B2 100%);
  border: 3px solid #6A1B9A;
  border-radius: 22px;
  box-shadow:
    0 10px 0 #4A148C,
    0 24px 48px rgba(20, 10, 40, 0.5);
  text-align: center;
  animation: directive-intro-pop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s backwards;
}
@keyframes directive-intro-pop {
  from { opacity: 0; transform: translateY(24px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.directive-intro-kicker {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #AD1457;
  margin-bottom: 8px;
}
.directive-intro-title {
  font-family: 'Chewy', cursive;
  font-size: 32px;
  color: #4A148C;
  text-shadow: 0 2px 0 #FFF, 0 4px 0 rgba(74, 20, 140, 0.2);
  line-height: 1.1;
  margin-bottom: 10px;
}
.directive-intro-tagline {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 15px;
  color: #6A1B9A;
  margin-bottom: 18px;
  padding-bottom: 16px;
  border-bottom: 1px dashed rgba(106, 27, 154, 0.35);
}
.directive-intro-para {
  font-family: 'Delius', cursive;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  margin: 0 0 12px;
  text-align: left;
}
.directive-intro-dismiss {
  margin-top: 20px;
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 14px;
  padding: 10px 28px;
  background: linear-gradient(170deg, #BA68C8 0%, #8E24AA 100%);
  color: #FFF;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 4px 0 #4A148C;
  transition: transform 0.14s ease, box-shadow 0.14s ease;
}
.directive-intro-dismiss:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 #4A148C;
}
.directive-intro-dismiss:active {
  transform: translateY(1px);
  box-shadow: 0 2px 0 #4A148C;
}

/* ============================================================ */
/* GLOW-WORM PEEK-THROUGH — ghost text briefly visible through    */
/* the sealed envelope face, then fades                           */
/* ============================================================ */
.peek-ghost-overlay {
  position: absolute;
  inset: 16px 14px;                           /* slight inset inside envelope */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding: 10px 14px;
  pointer-events: none;
  z-index: 5;
  background: radial-gradient(
    ellipse at 35% 45%,
    rgba(255, 236, 139, 0.18) 0%,
    rgba(255, 215, 0, 0.09) 30%,
    rgba(255, 215, 0, 0.02) 65%,
    transparent 85%);
  border-radius: 8px;
  animation: peek-ghost-in 0.32s ease-out forwards;
  filter: blur(1.4px);
}
.peek-ghost-overlay.peek-fading {
  animation: peek-ghost-out 0.4s ease-in forwards;
}
@keyframes peek-ghost-in {
  from { opacity: 0; filter: blur(6px); }
  to   { opacity: 0.95; filter: blur(1.4px); }
}
@keyframes peek-ghost-out {
  from { opacity: 0.95; filter: blur(1.4px); }
  to   { opacity: 0; filter: blur(6px); }
}
.peek-ghost-text {
  font-family: 'Delius', cursive;
  font-size: 11px;
  line-height: 1.35;
  color: rgba(80, 40, 20, 0.7);
  white-space: pre-wrap;
  overflow: hidden;
  max-height: 100%;
  text-shadow:
    0 0 6px rgba(255, 236, 139, 0.9),
    0 0 3px rgba(255, 215, 0, 0.7);
  /* Slightly jittery mirror-ish look — the reader is "seeing through" backwards */
  transform: skewY(-0.3deg);
}
/* In focus mode, the envelope is bigger, so the ghost text can be bigger too */
body.letter-focused .peek-ghost-overlay {
  inset: 24px 22px;
  padding: 16px 20px;
  filter: blur(1.6px);
  border-radius: 12px;
}
body.letter-focused .peek-ghost-overlay.peek-fading {
  filter: blur(6px);
}
body.letter-focused .peek-ghost-text {
  font-size: 15px;
  line-height: 1.5;
}

/* Legacy .peek-block styles retained below — unused now but kept for safety.
   Previously structured peek-block is replaced by the ghost overlay above. */

/* ============================================================ */
/* PROMOTION CELEBRATION — confetti, trophy sash, festive tint   */
/* ============================================================ */

.promotion-confetti {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 3500;
  overflow: hidden;
}
.promotion-confetti-piece {
  position: absolute;
  top: -20px;
  width: 12px;
  height: 18px;
  border-radius: 2px;
  animation-name: confetti-fall;
  animation-timing-function: linear;
  animation-fill-mode: forwards;
  opacity: 0.95;
  will-change: transform, opacity;
}
@keyframes confetti-fall {
  0%   { transform: translateY(-20px) rotate(0deg); opacity: 1; }
  85%  { opacity: 1; }
  100% { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* Acting Postmaster sash — persistent trophy chip pinned to the corner
   after the player accepts promotion. Stays until the run ends. */
.acting-sash {
  position: fixed;
  top: 14px;
  right: 14px;
  z-index: 1800;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 8px 10px;
  background: linear-gradient(170deg, #FFD54F 0%, #FFA726 100%);
  color: #4A148C;
  border: 2px solid #6A1B9A;
  border-radius: 999px;
  box-shadow: 0 4px 0 #4A148C, 0 8px 20px rgba(74, 20, 140, 0.35);
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.04em;
  animation: sash-wiggle 4s ease-in-out infinite;
}
.acting-sash-trophy {
  font-size: 22px;
  animation: trophy-sparkle 2.2s ease-in-out infinite;
}
.acting-sash-label { text-transform: uppercase; }
@keyframes sash-wiggle {
  0%, 100% { transform: rotate(-2deg); }
  50%      { transform: rotate(2deg); }
}
@keyframes trophy-sparkle {
  0%, 100% { transform: scale(1); filter: drop-shadow(0 0 0 rgba(255, 235, 59, 0)); }
  50%      { transform: scale(1.15); filter: drop-shadow(0 0 12px rgba(255, 235, 59, 0.9)); }
}

/* Subtle festive tint on the whole office after promotion */
body.acting-postmaster .office-header {
  background-image: linear-gradient(90deg, rgba(255, 213, 79, 0.08) 0%, transparent 50%, rgba(255, 213, 79, 0.08) 100%);
}
body.acting-postmaster .trust-meter-bar {
  box-shadow: 0 0 0 2px rgba(255, 193, 7, 0.35), 0 0 16px rgba(255, 193, 7, 0.22);
}

/* "Congratulations" mark pill — appears on thank-you mail envelopes */
.tray-mark-pill.congratulations {
  background: linear-gradient(170deg, #FFD54F 0%, #FFA726 100%);
  color: #4A148C;
  border-color: #6A1B9A;
  font-weight: 600;
  letter-spacing: 0.08em;
}

/* ============================================================ */
/* X-RAY GOGGLES BADGE — floating charge indicator               */
/* ============================================================ */
.xray-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 1600;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  background: linear-gradient(170deg, #26323A 0%, #141C22 100%);
  color: #B2EBF2;
  border: 2px solid #00BCD4;
  border-radius: 999px;
  box-shadow:
    0 0 0 2px rgba(0, 188, 212, 0.25),
    0 0 24px rgba(0, 188, 212, 0.35),
    0 4px 12px rgba(0, 0, 0, 0.4);
  font-family: 'Fredoka', sans-serif;
  font-weight: 500;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  animation: xray-hover 3.2s ease-in-out infinite;
}
@keyframes xray-hover {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
.xray-badge-icon {
  font-size: 18px;
  filter: drop-shadow(0 0 4px rgba(0, 188, 212, 0.8));
}
.xray-badge-charges {
  font-family: 'Chewy', cursive;
  font-size: 18px;
  color: #FFF;
  padding: 0 8px;
  min-width: 26px;
  text-align: center;
  background: rgba(0, 188, 212, 0.28);
  border-radius: 999px;
  text-shadow: 0 0 6px rgba(0, 188, 212, 0.7);
}
.xray-badge.flash {
  animation: xray-flash 0.9s ease-out;
}
@keyframes xray-flash {
  0%   { box-shadow: 0 0 0 0 rgba(0, 188, 212, 1.0), 0 0 40px rgba(0, 188, 212, 0.9), 0 4px 12px rgba(0, 0, 0, 0.4); transform: scale(1); }
  30%  { box-shadow: 0 0 0 12px rgba(0, 188, 212, 0), 0 0 60px rgba(0, 188, 212, 1), 0 4px 12px rgba(0, 0, 0, 0.4); transform: scale(1.12); }
  100% { box-shadow: 0 0 0 2px rgba(0, 188, 212, 0.25), 0 0 24px rgba(0, 188, 212, 0.35), 0 4px 12px rgba(0, 0, 0, 0.4); transform: scale(1); }
}

/* Damaged-letter envelope visual — ragged sooty look in tray + desk */
.tray-mark-pill.damaged {
  background: linear-gradient(170deg, #4E342E 0%, #262020 100%);
  color: #FFCCBC;
  border-color: #BF360C;
}
.tray-envelope.env-damaged,
.desk-letter.env-damaged {
  background-color: #EFE3D4;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(50, 30, 15, 0.35) 0%, transparent 18%),
    radial-gradient(circle at 80% 20%, rgba(50, 30, 15, 0.30) 0%, transparent 22%),
    radial-gradient(circle at 15% 85%, rgba(50, 30, 15, 0.25) 0%, transparent 26%),
    radial-gradient(circle at 88% 78%, rgba(50, 30, 15, 0.28) 0%, transparent 20%);
  border-style: dashed;
  border-color: #6D4C41;
}

/* X-Ray peek-through: slight cyan tint instead of warm yellow */
.peek-ghost-overlay.xray-mode {
  background: radial-gradient(
    ellipse at 50% 40%,
    rgba(100, 210, 255, 0.22) 0%,
    rgba(0, 188, 212, 0.10) 35%,
    rgba(0, 188, 212, 0.02) 70%,
    transparent 90%);
}
.peek-ghost-overlay.xray-mode .peek-ghost-text {
  color: rgba(20, 60, 80, 0.75);
  text-shadow:
    0 0 6px rgba(100, 210, 255, 0.9),
    0 0 3px rgba(0, 188, 212, 0.7);
}

/* ============================================================ */
/* MODE PICKER — realm choice on start screen                     */
/* ============================================================ */
.mode-picker-card { max-width: 820px; }
.mode-picker-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 20px 0 14px;
}
@media (max-width: 640px) {
  .mode-picker-grid { grid-template-columns: 1fr; }
}
.mode-picker-option {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 20px 22px;
  border-radius: 18px;
  border: 3px solid;
  cursor: pointer;
  font-family: 'Delius', cursive;
  text-align: left;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.mode-picker-option:hover {
  transform: translateY(-4px);
}
.mode-picker-option.mode-snuggleton {
  background: linear-gradient(170deg, #FFFDF5 0%, #FFF3E0 100%);
  border-color: #6A1B9A;
  color: #4A148C;
  box-shadow: 0 8px 0 #4A148C;
}
.mode-picker-option.mode-snuggleton:hover {
  box-shadow: 0 12px 0 #4A148C;
}
.mode-picker-option.mode-baddleton {
  background: linear-gradient(170deg, #2b2126 0%, #1a1014 100%);
  border-color: #B71C1C;
  color: #FFCDD2;
  box-shadow: 0 8px 0 #3E1012;
}
.mode-picker-option.mode-baddleton:hover {
  box-shadow: 0 12px 0 #3E1012;
}
.mode-picker-emoji {
  font-size: 42px;
  line-height: 1;
  margin-bottom: 4px;
}
.mode-picker-name {
  font-family: 'Chewy', cursive;
  font-size: 28px;
  letter-spacing: 0.04em;
}
.mode-picker-tagline {
  font-style: italic;
  font-size: 14px;
  line-height: 1.4;
  opacity: 0.92;
  margin-bottom: 8px;
}
.mode-picker-bullets {
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: 13px;
  line-height: 1.55;
}
.mode-picker-bullets li::before {
  content: '— ';
  opacity: 0.6;
}
.mode-picker-footnote {
  font-size: 11px;
  opacity: 0.65;
  text-align: center;
  font-style: italic;
  margin-top: 4px;
}
.start-actions { display: flex; gap: 10px; align-items: center; }
.start-back {
  font-family: 'Delius', cursive;
  font-size: 13px;
  padding: 8px 14px;
  background: transparent;
  color: inherit;
  border: 1px dashed currentColor;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.7;
}
.start-back:hover { opacity: 1; }

/* ============================================================ */
/* BADDLETON MODE — dark theme override                           */
/* ============================================================ */
body.baddleton-mode {
  background: linear-gradient(170deg, #1a1014 0%, #0e0709 100%) fixed;
  color: #E0D0C8;
}
body.baddleton-mode .office-header {
  background: linear-gradient(180deg, #2b2126 0%, #1a1014 100%);
  border-bottom: 1px solid #3E1012;
}
body.baddleton-mode .brand {
  color: #EF9A9A;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.4);
}
body.baddleton-mode .brand::before {
  content: '\ud83e\udd80 ';
}
body.baddleton-mode .intray-pane,
body.baddleton-mode .desk-pane,
body.baddleton-mode .rightrail-pane {
  background: #261a1f;
  border-color: #3E1012;
  color: #E0D0C8;
}
body.baddleton-mode .desk-surface {
  background: repeating-linear-gradient(
    45deg,
    #2b2126 0 12px,
    #231a1f 12px 24px);
}
body.baddleton-mode .tray-envelope,
body.baddleton-mode .desk-letter {
  background-color: #E8DCC8;
  border-color: #6D4C41;
  color: #2B1F1A;
}
body.baddleton-mode .outcomes-bar {
  background: linear-gradient(180deg, #2b2126 0%, #1a1014 100%);
  border-top: 1px solid #3E1012;
}
body.baddleton-mode .outcome-slot {
  background: #3E1012;
  color: #FFCDD2;
  border-color: #6D1B1F;
}
body.baddleton-mode .outcome-slot:hover {
  background: #B71C1C;
  color: #FFF;
}
/* Trust meter: pivot to red-to-green for Claw's Approval */
body.baddleton-mode .trust-meter {
  background: #1a1014;
  border-color: #3E1012;
}
body.baddleton-mode .trust-meter-track {
  background: #3E1012;
}
body.baddleton-mode .trust-meter-fill {
  background: linear-gradient(90deg, #B71C1C 0%, #F57C00 50%, #FFA000 100%);
}
body.baddleton-mode .trust-label { color: #EF9A9A; }
body.baddleton-mode #trust-tier { color: #FFCDD2; }
body.baddleton-mode #trust-value { color: #FFF; }
/* Paws bubble — in Baddleton mode becomes Mr. Claw (dark) */
body.baddleton-mode .paws-bubble {
  background: linear-gradient(170deg, #2b2126 0%, #1a1014 100%);
  border-color: #B71C1C;
  color: #FFCDD2;
}
body.baddleton-mode .paws-name { color: #EF5350; }
body.baddleton-mode .paws-text { color: #E0D0C8; }
body.baddleton-mode .paws-avatar {
  background: #3E1012;
  filter: drop-shadow(0 0 6px rgba(183, 28, 28, 0.5));
}
/* Directive panel — red-tinted */
body.baddleton-mode .directive-row {
  background: linear-gradient(170deg, rgba(50, 20, 26, 0.9) 0%, rgba(38, 15, 18, 0.88) 100%);
  border-color: rgba(183, 28, 28, 0.55);
  color: #FFCDD2;
}
body.baddleton-mode .directive-row-title { color: #FF8A80; }
body.baddleton-mode .directive-bar-fill {
  background: linear-gradient(90deg, #EF5350 0%, #B71C1C 100%);
}
/* Toolbar */
body.baddleton-mode .toolbar-row {
  background: #1a1014;
  border-bottom: 1px solid #3E1012;
}
body.baddleton-mode .toolbar-label { color: #EF9A9A; }
body.baddleton-mode .hint-btn {
  background: #3E1012;
  color: #FFCDD2;
  border-color: #6D1B1F;
}

/* ============================================================ */
/* AUDIT PENDING BANNER — pulses blood red                        */
/* ============================================================ */
.audit-banner {
  position: fixed;
  top: 70px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2100;  /* above toasts (2000) so persistent state wins over transient */
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px 10px 16px;
  background: linear-gradient(170deg, #B71C1C 0%, #7F0000 100%);
  color: #FFEBEE;
  border: 2px solid #3E1012;
  border-radius: 999px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  letter-spacing: 0.05em;
  box-shadow:
    0 0 0 2px rgba(255, 205, 210, 0.15),
    0 0 24px rgba(183, 28, 28, 0.6),
    0 6px 18px rgba(0, 0, 0, 0.4);
  animation: audit-banner-pulse 1.4s ease-in-out infinite;
}
@keyframes audit-banner-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(255, 205, 210, 0.15), 0 0 24px rgba(183, 28, 28, 0.6), 0 6px 18px rgba(0, 0, 0, 0.4); }
  50%      { box-shadow: 0 0 0 2px rgba(255, 205, 210, 0.35), 0 0 44px rgba(239, 83, 80, 0.9), 0 6px 18px rgba(0, 0, 0, 0.4); }
}
.audit-banner-icon {
  font-size: 20px;
  animation: audit-icon-flash 0.9s ease-in-out infinite;
}
@keyframes audit-icon-flash {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1; filter: drop-shadow(0 0 6px rgba(255, 235, 59, 0.9)); }
}
.audit-banner-text strong {
  letter-spacing: 0.12em;
  margin-right: 4px;
}

/* ============================================================ */
/* CROSS-REALM ENDING SWAP BUTTON                                 */
/* ============================================================ */
.ending-actions {
  display: flex;
  flex-direction: column;
  gap: 14px;
  align-items: center;
}
.ending-crossrealm {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px dashed rgba(255, 255, 255, 0.25);
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}
.ending-crossrealm-tagline {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 13px;
  opacity: 0.75;
  text-align: center;
}
.ending-swap {
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  padding: 8px 20px;
  background: transparent;
  color: inherit;
  border: 1.5px dashed currentColor;
  border-radius: 999px;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.ending-swap:hover {
  opacity: 1;
  transform: translateY(-2px);
}

/* ============================================================ */
/* BADDLETON MODE — DEEP VISUAL OVERHAUL                          */
/* Override everything that's still cheerful-pink from the       */
/* Snuggleton palette. Aims for sooty industrial / grim.          */
/* ============================================================ */

/* Desk surface — etched metal, not striped candy */
body.baddleton-mode .desk-surface {
  background:
    repeating-linear-gradient(135deg,
      rgba(0, 0, 0, 0.22) 0 2px,
      transparent 2px 8px),
    linear-gradient(170deg, #1f1418 0%, #140a0d 100%);
  border: 2px solid #4a1618;
  border-radius: 14px;
  box-shadow:
    inset 0 0 60px rgba(0, 0, 0, 0.6),
    inset 0 0 0 1px rgba(183, 28, 28, 0.3);
}
/* The pink glow ring around the desk — now blood red */
body.baddleton-mode .desk-pane {
  background: #140a0d;
  border: 2px solid #3E1012;
  box-shadow:
    0 0 0 3px rgba(183, 28, 28, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.5);
}

/* Empty-desk message text — dusty amber, not cheerful pink */
body.baddleton-mode .desk-empty-hint,
body.baddleton-mode .desk-surface-empty,
body.baddleton-mode .desk-surface .empty-hint {
  color: #9E6B48 !important;
}
body.baddleton-mode .desk-surface p,
body.baddleton-mode .desk-surface div:not(.desk-letter) {
  color: #B48A6A;
}

/* Toolbar and header pink accents → smoldering red */
body.baddleton-mode .office-header {
  background: linear-gradient(180deg, #1f1418 0%, #0c0508 100%);
  border-bottom: 2px solid #4a1618;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
body.baddleton-mode .brand h1 {
  color: #E53935;
  text-shadow: 0 2px 0 #000, 0 0 20px rgba(229, 57, 53, 0.4);
  font-family: 'Chewy', cursive;
}
body.baddleton-mode .subtitle {
  color: #B48A6A;
  font-style: italic;
}
body.baddleton-mode .brand::before { content: none; }  /* suppress the emoji prefix we added earlier */

/* Intray pane — dark cabinet with red accent */
body.baddleton-mode .intray-pane {
  background: linear-gradient(170deg, #1f1418 0%, #140a0d 100%);
  border: 2px solid #3E1012;
}
body.baddleton-mode .intray-pane h2,
body.baddleton-mode .intray-pane .section-title,
body.baddleton-mode .pane-title,
body.baddleton-mode .rightrail-pane h2 {
  color: #E53935 !important;
  text-shadow: 0 1px 0 #000;
  font-family: 'Chewy', cursive;
  letter-spacing: 0.04em;
}
body.baddleton-mode .intray-count,
body.baddleton-mode #intray-count {
  color: #B48A6A;
}

/* Right rail (Tools) pane */
body.baddleton-mode .rightrail-pane {
  background: linear-gradient(170deg, #1f1418 0%, #140a0d 100%);
  border: 2px solid #3E1012;
}
body.baddleton-mode .rightrail-pane .section-label,
body.baddleton-mode .rightrail-pane .tool-group-label {
  color: #9E6B48;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  font-size: 10px;
}
body.baddleton-mode .tool-button,
body.baddleton-mode .shelf-book,
body.baddleton-mode .rightrail-action,
body.baddleton-mode .tool-card {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  border: 1px solid #4a1618;
  color: #E8D6C8;
}
body.baddleton-mode .tool-button:hover,
body.baddleton-mode .shelf-book:hover,
body.baddleton-mode .rightrail-action:hover,
body.baddleton-mode .tool-card:hover {
  background: linear-gradient(170deg, #3a2028 0%, #241418 100%);
  border-color: #B71C1C;
  box-shadow: 0 0 18px rgba(183, 28, 28, 0.35);
}
body.baddleton-mode .tool-name,
body.baddleton-mode .shelf-book-title { color: #EF9A9A; }
body.baddleton-mode .tool-desc,
body.baddleton-mode .shelf-book-desc { color: #B48A6A; }

/* Outcome buttons — each stamp gets an industrial color */
body.baddleton-mode .outcome-slot {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  color: #E8D6C8;
  border: 2px solid #4a1618;
  font-family: 'Fredoka', sans-serif;
  letter-spacing: 0.03em;
  transition: transform 0.15s, box-shadow 0.15s, background 0.15s;
}
body.baddleton-mode .outcome-slot:hover {
  transform: translateY(-2px);
  background: linear-gradient(170deg, #3a2028 0%, #241418 100%);
}
/* Per-outcome colored edges */
body.baddleton-mode .outcome-slot[data-outcome="deliver"]  { box-shadow: inset 0 -3px 0 #689F38; }
body.baddleton-mode .outcome-slot[data-outcome="deliver"]:hover  { box-shadow: inset 0 -3px 0 #689F38, 0 0 18px rgba(104, 159, 56, 0.35); }
body.baddleton-mode .outcome-slot[data-outcome="redirect"] { box-shadow: inset 0 -3px 0 #FB8C00; }
body.baddleton-mode .outcome-slot[data-outcome="redirect"]:hover { box-shadow: inset 0 -3px 0 #FB8C00, 0 0 18px rgba(251, 140, 0, 0.35); }
body.baddleton-mode .outcome-slot[data-outcome="return"]   { box-shadow: inset 0 -3px 0 #546E7A; }
body.baddleton-mode .outcome-slot[data-outcome="return"]:hover   { box-shadow: inset 0 -3px 0 #546E7A, 0 0 18px rgba(84, 110, 122, 0.35); }
body.baddleton-mode .outcome-slot[data-outcome="destroy"]  { box-shadow: inset 0 -3px 0 #D32F2F; background: linear-gradient(170deg, #3A1519 0%, #24090B 100%); }
body.baddleton-mode .outcome-slot[data-outcome="destroy"]:hover  { box-shadow: inset 0 -3px 0 #D32F2F, 0 0 24px rgba(211, 47, 47, 0.55); }
body.baddleton-mode .outcome-slot[data-outcome="archive"]  { box-shadow: inset 0 -3px 0 #5E35B1; }
body.baddleton-mode .outcome-slot[data-outcome="archive"]:hover  { box-shadow: inset 0 -3px 0 #5E35B1, 0 0 18px rgba(94, 53, 177, 0.35); }

/* Pile-count footer */
body.baddleton-mode .pile-strip,
body.baddleton-mode .outcomes-tallies,
body.baddleton-mode .piles-row {
  background: linear-gradient(180deg, #1a1014 0%, #0c0508 100%);
  border-top: 1px solid #4a1618;
}
body.baddleton-mode .pile-group {
  color: #B48A6A;
}
body.baddleton-mode .pile-group .count {
  background: #4a1618;
  color: #FFCDD2;
  border: 1px solid #B71C1C;
}
body.baddleton-mode .pile-label { color: #B48A6A; }

/* Tray envelope — ivory with singed edges */
body.baddleton-mode .tray-envelope {
  background-color: #E8DCC0;
  border: 1px solid #8B6F4A;
  color: #2B1F1A;
  box-shadow: 0 2px 0 rgba(0, 0, 0, 0.4), inset 0 0 14px rgba(120, 60, 30, 0.15);
}
body.baddleton-mode .tray-envelope .tray-to { color: #1B0E12; font-weight: 600; }
body.baddleton-mode .tray-envelope .tray-from { color: #5D3D2A; }
body.baddleton-mode .tray-envelope .tray-postmark {
  color: #6D4C41;
  background: rgba(109, 76, 65, 0.12);
}
body.baddleton-mode .tray-envelope.new-arrival .tray-new-badge {
  background: #B71C1C;
  color: #FFEBEE;
  border: 1px solid #7F0000;
}
/* Urgent pill in Baddleton — black on red */
body.baddleton-mode .tray-mark-pill.urgent {
  background: #B71C1C;
  color: #FFEBEE;
  border-color: #7F0000;
}
body.baddleton-mode .tray-mark-pill.private {
  background: #1a1014;
  color: #FFA000;
  border-color: #5D4037;
}

/* Hint & Ask Manager buttons — Baddleton rename via CSS label swap */
body.baddleton-mode .hint-btn {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  color: #E8D6C8;
  border: 1px solid #4a1618;
}
body.baddleton-mode .hint-btn:hover {
  background: linear-gradient(170deg, #3a2028 0%, #241418 100%);
  border-color: #B71C1C;
}
body.baddleton-mode .hint-btn.armed {
  background: linear-gradient(170deg, #5D1519 0%, #3A0D10 100%);
  box-shadow: 0 0 18px rgba(211, 47, 47, 0.55);
}

/* Day indicator and close-out button */
body.baddleton-mode .day-indicator {
  background: #1a1014;
  border: 2px solid #4a1618;
  color: #E53935;
}
body.baddleton-mode #day-number {
  color: #FFA000;
  text-shadow: 0 0 8px rgba(255, 160, 0, 0.5);
}
body.baddleton-mode .day-max { color: #9E6B48; }
body.baddleton-mode .day-btn {
  background: linear-gradient(170deg, #FFA000 0%, #E65100 100%);
  color: #0c0508;
  border: 2px solid #3E2723;
  box-shadow: 0 3px 0 #3E2723;
}
body.baddleton-mode .day-btn:hover {
  background: linear-gradient(170deg, #FFB300 0%, #F57C00 100%);
  box-shadow: 0 5px 0 #3E2723;
}

/* Help button */
body.baddleton-mode .help-btn {
  background: #2a1a1f;
  color: #E53935;
  border: 2px solid #4a1618;
}

/* Stamp-on-letter outcome colors — override cheerful brights */
body.baddleton-mode .desk-letter.stamping-deliver  { box-shadow: inset 0 0 60px rgba(104, 159, 56, 0.7); }
body.baddleton-mode .desk-letter.stamping-redirect { box-shadow: inset 0 0 60px rgba(251, 140, 0, 0.7); }
body.baddleton-mode .desk-letter.stamping-return   { box-shadow: inset 0 0 60px rgba(84, 110, 122, 0.7); }
body.baddleton-mode .desk-letter.stamping-destroy  { box-shadow: inset 0 0 80px rgba(211, 47, 47, 0.85); filter: saturate(1.3); }
body.baddleton-mode .desk-letter.stamping-archive  { box-shadow: inset 0 0 60px rgba(94, 53, 177, 0.7); }

/* Bottom footer "Out-Chute" stamp block — green → muted green */
body.baddleton-mode .outtray-item .outtray-stamp {
  background: #2a1a1f;
  color: #FFCDD2;
  border: 1px dashed #B71C1C;
}

/* Session user hash (top-left tiny thing) — dustier */
body.baddleton-mode .user-hash,
body.baddleton-mode .session-id {
  color: #6D4C41 !important;
  opacity: 0.6;
}

/* Xray/goggles badge keeps its cyan — intentional contrast */

/* ============================================================ */
/* BADDLETON — START-SCREEN DARK VARIANT + LEGIBILITY PASS        */
/* ============================================================ */

/* --- Start screen welcome card (image 1 issue) --- */
.start-card.baddleton-start {
  background: linear-gradient(170deg, #1f1418 0%, #0e0709 100%);
  color: #E8D6C8;
  border: 3px solid #4a1618;
  box-shadow: 0 10px 0 #3E1012, 0 24px 48px rgba(0,0,0,0.7);
}
.start-card.baddleton-start .start-eyebrow {
  color: #FFA000;
  letter-spacing: 0.18em;
}
.start-card.baddleton-start .start-title {
  color: #E53935;
  text-shadow: 0 3px 0 #000, 0 0 24px rgba(229, 57, 53, 0.5);
}
.start-card.baddleton-start .start-lede {
  color: #E8D6C8;
}
.start-card.baddleton-start .start-lede em {
  color: #FFA000;
  font-style: italic;
}
.start-card.baddleton-start .start-cell {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  border: 1px solid #4a1618;
}
.start-card.baddleton-start .start-cell-title {
  color: #EF5350;
}
.start-card.baddleton-start .start-cell-body {
  color: #B48A6A;
}
.start-card.baddleton-start .start-icon {
  filter: drop-shadow(0 0 6px rgba(229, 57, 53, 0.45));
}
.start-card.baddleton-start .start-head,
.start-card.baddleton-start .start-foot {
  border-color: rgba(229, 57, 53, 0.25);   /* override pink dashed dividers */
}
.start-card.baddleton-start hr,
.start-card.baddleton-start .start-head::after,
.start-card.baddleton-start .start-foot::before {
  border-color: rgba(229, 57, 53, 0.25) !important;
}
.start-card.baddleton-start .start-sig {
  color: #B48A6A;
  font-style: italic;
}
.start-card.baddleton-start .start-back {
  color: #E8D6C8;
  border-color: #6D4C41;
}
.start-card.baddleton-start .start-back:hover {
  background: rgba(229, 57, 53, 0.15);
  border-color: #E53935;
}
.start-card.baddleton-start .start-begin.start-begin-baddleton,
.start-card.baddleton-start .start-begin {
  background: linear-gradient(170deg, #FFA000 0%, #E65100 100%);
  color: #0c0508;
  border: 2px solid #3E2723;
  box-shadow: 0 4px 0 #3E2723;
  font-weight: 600;
}
.start-card.baddleton-start .start-begin:hover {
  background: linear-gradient(170deg, #FFB300 0%, #F57C00 100%);
  box-shadow: 0 6px 0 #3E2723;
}
/* Bottom pink shadow on start card becomes red in baddleton */
body.baddleton-mode .start-card {
  /* When start-card is shown in Baddleton but WITHOUT baddleton-start class
     (e.g., on first load before swap), still darken the drop shadow */
  box-shadow: 0 10px 0 #3E1012, 0 24px 48px rgba(0,0,0,0.7);
}

/* --- Desk empty message (image 2) — warm amber, readable --- */
body.baddleton-mode .desk-empty {
  color: #FFA000 !important;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.5);
}
body.baddleton-mode .desk-empty-sub {
  color: #B48A6A !important;
}

/* --- Out-chute empty message --- */
body.baddleton-mode .outtray .empty-hint,
body.baddleton-mode .outtray-empty,
body.baddleton-mode .empty-hint {
  color: #9E6B48 !important;
  font-style: italic;
}

/* --- Tools pane: descriptions too faded when tool isn't armed --- */
body.baddleton-mode .tool-card .tool-desc,
body.baddleton-mode .shelf-book .shelf-book-desc,
body.baddleton-mode .tool-button .tool-desc {
  color: #B48A6A !important;
  opacity: 0.9;
}
body.baddleton-mode .tool-card.disabled,
body.baddleton-mode .tool-card[disabled],
body.baddleton-mode .tool-button.disabled {
  opacity: 0.55;
}
/* Tools on the desk: light up their names clearly */
body.baddleton-mode .tool-card .tool-name,
body.baddleton-mode .tool-button .tool-name,
body.baddleton-mode .shelf-book .shelf-book-title {
  color: #EF9A9A !important;
  font-weight: 500;
}

/* --- Section labels (ON YOUR DESK, ON THE SHELF, ACTIONS) --- */
body.baddleton-mode .rightrail-pane .section-label,
body.baddleton-mode .rail-section-label,
body.baddleton-mode .shelf-section-label,
body.baddleton-mode .tools-section-title {
  color: #B71C1C !important;
  letter-spacing: 0.18em;
  font-weight: 600;
}

/* --- Session hash at top left --- */
body.baddleton-mode #session-id,
body.baddleton-mode .session-id,
body.baddleton-mode .user-hash,
body.baddleton-mode [class*="session"] {
  color: #6D4C41 !important;
  opacity: 0.65;
}

/* --- Pink bottom border of the main-viewport frame --- */
body.baddleton-mode .app-frame,
body.baddleton-mode .app-container,
body.baddleton-mode main,
body.baddleton-mode .main-wrap {
  border-color: #4a1618 !important;
}
body.baddleton-mode::after {
  /* Whatever renders the bottom sky-blue/pink gradient tag */
  background: transparent !important;
}

/* --- In-Chute pink left-edge bar that appears on the tray --- */
body.baddleton-mode .intray-pane .tray-envelope,
body.baddleton-mode .tray-letters .tray-envelope {
  border-left-color: transparent;
}
body.baddleton-mode .intray-pane::before,
body.baddleton-mode .intray::before {
  background: transparent !important;
}
/* The pink progress-strip at bottom of the In-Chute */
body.baddleton-mode .tray-capacity-bar,
body.baddleton-mode .intray-capacity {
  background: rgba(183, 28, 28, 0.25) !important;
  border-color: #4a1618 !important;
}
body.baddleton-mode .tray-capacity-bar-fill,
body.baddleton-mode .intray-capacity-fill {
  background: linear-gradient(90deg, #E53935 0%, #FFA000 100%) !important;
}

/* --- Out-Chute title styling matches In-Chute --- */
body.baddleton-mode .outtray-pane .pane-title,
body.baddleton-mode #outtray-title {
  color: #E53935 !important;
}

/* --- Trust meter: "Trusted" tier name should read "Favoured" in Baddleton
   (that's a text change, not CSS — documented for later) --- */

/* --- Letter counts (e.g. "3 letters") --- */
body.baddleton-mode .intray-count,
body.baddleton-mode #intray-count,
body.baddleton-mode .out-chute-count {
  color: #B48A6A !important;
}

/* --- Borders around desk area (the pink frame visible in screenshots) --- */
body.baddleton-mode .desk-pane,
body.baddleton-mode .desk-viewport {
  border-color: #4a1618 !important;
  box-shadow:
    0 0 0 3px rgba(183, 28, 28, 0.35),
    inset 0 0 40px rgba(0, 0, 0, 0.5) !important;
}

/* --- Help button in header ring color --- */
body.baddleton-mode #help-btn {
  background: #1a1014;
  color: #E53935;
  border: 2px solid #4a1618;
}

/* --- Day badge "DAY 1 of 14" yellow pill --- */
body.baddleton-mode .day-indicator {
  background: #1a1014;
  border: 2px solid #4a1618;
  color: #E53935;
  box-shadow: 0 0 0 1px rgba(255, 160, 0, 0.3);
}

/* --- Bottom footer strip (where the pile counts live) — ensure no pink leak --- */
body.baddleton-mode .footer-strip,
body.baddleton-mode .pile-strip,
body.baddleton-mode .tally-strip,
body.baddleton-mode .piles-row {
  background: linear-gradient(180deg, #0c0508 0%, #060203 100%) !important;
  border-top: 2px solid #4a1618 !important;
}

/* --- The bottom-most sky-blue/pink bar visible in screenshots --- */
body.baddleton-mode .app-bottom-stripe,
body.baddleton-mode .bottom-accent,
body.baddleton-mode footer,
body.baddleton-mode html {
  background-color: #0c0508 !important;
}

/* Fallback — any element with class containing "pink" or inline pink-ish styles,
   override in baddleton-mode */
body.baddleton-mode [class*="pink"] {
  background-color: #2a1a1f !important;
}

/* Override #app's sky-blue radial gradient in Baddleton mode */
body.baddleton-mode #app {
  background:
    radial-gradient(circle at 80% 20%, rgba(229, 57, 53, 0.08), transparent 40%),
    radial-gradient(circle at 20% 80%, rgba(255, 160, 0, 0.05), transparent 40%),
    linear-gradient(170deg, #1a1014 0%, #0c0508 100%) !important;
}
body.baddleton-mode #vignette {
  background: radial-gradient(circle at 50% 0%, rgba(229, 57, 53, 0.08) 0%, transparent 60%) !important;
}
/* Sky-blue body background → sooty */
body.baddleton-mode,
body.baddleton-mode html {
  background: #0c0508 !important;
}

/* ============================================================ */
/* BADDLETON — CSS CUSTOM PROPERTIES OVERRIDE                     */
/* Cascade fix: redefine the root tokens so everything that uses   */
/* --desk-top / --desk-edge / --ink-red / --bg-sky automatically   */
/* picks up Baddleton-appropriate colors without selector surgery. */
/* ============================================================ */
body.baddleton-mode {
  --bg-sky:         #0c0508;
  --bg-sky-deep:    #1a1014;
  --bg-sky-soft:    #2a1a1f;
  --desk-top:       #1f1418;
  --desk-edge:      #4a1618;
  --desk-soft:      #2a1a1f;
  --paper:          #E8DCC0;
  --paper-aged:     #E8DCC0;
  --paper-deeper:   #D4C19A;
  --ink-red:        #E53935;
  --brass:          #FFA000;
  --brass-lit:      #FFB300;
}

/* ============================================================ */
/* BADDLETON — FOCUS MODE (letter open) overrides                 */
/* ============================================================ */

/* Focus tool rail (right side when letter focused) */
body.baddleton-mode .focus-toolrail {
  background: transparent;
}
body.baddleton-mode .focus-tool-label {
  color: #B71C1C;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 10px;
  font-weight: 600;
  font-family: 'Fredoka', sans-serif;
}
body.baddleton-mode .focus-tool {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  border: 1.5px solid #4a1618;
  color: #E8D6C8;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5);
}
body.baddleton-mode .focus-tool:hover {
  background: linear-gradient(170deg, #3a2028 0%, #241418 100%);
  border-color: #B71C1C;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 18px rgba(183, 28, 28, 0.4);
  transform: translateY(-2px);
}
body.baddleton-mode .focus-tool-icon {
  filter: drop-shadow(0 0 4px rgba(229, 57, 53, 0.4));
}
body.baddleton-mode .focus-tool-name {
  color: #EF9A9A;
  font-weight: 500;
}
body.baddleton-mode .focus-tool-desc {
  color: #B48A6A;
}
body.baddleton-mode .focus-tool.armed,
body.baddleton-mode .focus-tool.active {
  background: linear-gradient(170deg, #5D1519 0%, #3A0D10 100%);
  border-color: #E53935;
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.5), 0 0 24px rgba(229, 57, 53, 0.5);
}
body.baddleton-mode .focus-tool.armed .focus-tool-name {
  color: #FFA000;
}

/* Focus outcomes bar */
body.baddleton-mode .focus-outcomes {
  background: linear-gradient(180deg, rgba(26, 16, 20, 0.95) 0%, rgba(12, 5, 8, 0.98) 100%);
  border: 2px solid #4a1618;
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.6), inset 0 1px 0 rgba(229, 57, 53, 0.2);
  backdrop-filter: blur(6px);
}
body.baddleton-mode .focus-outcomes .outcome-slot {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  color: #E8D6C8;
  border: 2px solid #4a1618;
}
body.baddleton-mode .focus-outcomes .outcome-slot[data-outcome="destroy"] {
  background: linear-gradient(170deg, #3A1519 0%, #24090B 100%);
}
body.baddleton-mode .focus-outcomes .outcome-slot:hover {
  background: linear-gradient(170deg, #3a2028 0%, #241418 100%);
  transform: translateY(-2px);
}
body.baddleton-mode .focus-outcomes .outcome-slot[data-outcome="destroy"]:hover {
  background: linear-gradient(170deg, #5A2025 0%, #3A1015 100%);
  box-shadow: 0 0 24px rgba(211, 47, 47, 0.55);
}

/* Back-to-Chute button (top-right of focused letter) */
body.baddleton-mode .focus-back-chute,
body.baddleton-mode .letter-focus-close,
body.baddleton-mode [class*="back-to-chute"] {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  color: #E8D6C8;
  border: 1.5px solid #4a1618;
}
body.baddleton-mode .focus-back-chute:hover,
body.baddleton-mode .letter-focus-close:hover {
  border-color: #B71C1C;
  box-shadow: 0 0 12px rgba(183, 28, 28, 0.4);
}

/* Rail group labels in the persistent right rail */
body.baddleton-mode .rail-group-label {
  color: #B71C1C;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
}
body.baddleton-mode .rail-tool,
body.baddleton-mode .rail-action {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  border: 1.5px solid #4a1618;
  color: #E8D6C8;
}
body.baddleton-mode .rail-tool:hover,
body.baddleton-mode .rail-action:hover {
  background: linear-gradient(170deg, #3a2028 0%, #241418 100%);
  border-color: #B71C1C;
}
body.baddleton-mode .tool-name,
body.baddleton-mode .book-name,
body.baddleton-mode .rail-action-name {
  color: #EF9A9A;
  font-weight: 500;
}
body.baddleton-mode .tool-desc,
body.baddleton-mode .book-desc,
body.baddleton-mode .rail-action-desc {
  color: #B48A6A;
}
body.baddleton-mode .rail-tool.armed,
body.baddleton-mode .rail-action.armed {
  background: linear-gradient(170deg, #5D1519 0%, #3A0D10 100%);
  border-color: #E53935;
  box-shadow: 0 0 20px rgba(229, 57, 53, 0.45);
}

/* ============================================================ */
/* AUDIT LOCKDOWN — letter-based audit enforcement                */
/* When body.audit-active is set, all non-destroy outcome buttons   */
/* are disabled and the active audit letter is highlighted.        */
/* ============================================================ */

/* Dim and disable all outcome buttons except destroy */
body.audit-active .outcome-slot:not([data-outcome="destroy"]),
body.audit-active .focus-outcomes .outcome-slot:not([data-outcome="destroy"]) {
  opacity: 0.25;
  pointer-events: none;
  filter: grayscale(0.6);
  cursor: not-allowed;
}
/* The destroy button in audit mode: pulse red to draw the eye */
body.audit-active .outcome-slot[data-outcome="destroy"],
body.audit-active .focus-outcomes .outcome-slot[data-outcome="destroy"] {
  animation: audit-destroy-pulse 1.3s ease-in-out infinite;
  box-shadow: inset 0 -3px 0 #D32F2F, 0 0 30px rgba(211, 47, 47, 0.7) !important;
  position: relative;
}
body.audit-active .outcome-slot[data-outcome="destroy"]::after {
  content: 'REQUIRED';
  position: absolute;
  top: -10px;
  right: -6px;
  background: #B71C1C;
  color: #FFEBEE;
  font-family: 'Fredoka', sans-serif;
  font-size: 9px;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  border-radius: 999px;
  border: 1px solid #7F0000;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
  pointer-events: none;
}
@keyframes audit-destroy-pulse {
  0%, 100% { box-shadow: inset 0 -3px 0 #D32F2F, 0 0 20px rgba(211, 47, 47, 0.5); }
  50%      { box-shadow: inset 0 -3px 0 #D32F2F, 0 0 44px rgba(239, 83, 80, 0.95); }
}

/* Lock the focus tool rail actions that would let you escape the audit */
body.audit-active .focus-tool[data-action="back"],
body.audit-active .focus-tool[data-action="compare"],
body.audit-active .rail-tool[data-action="back"],
body.audit-active #compare-btn,
body.audit-active .focus-back-chute,
body.audit-active .letter-focus-close {
  opacity: 0.3 !important;
  pointer-events: none !important;
  cursor: not-allowed !important;
  filter: grayscale(0.7);
}
/* Hint and Ask Boss stay enabled — Mr. Claw allows consultation */

/* Audit letter itself: red pulsing border + "UNDER AUDIT" label */
body.audit-active .desk-letter.audit-letter,
body.audit-focused .desk-letter {
  animation: audit-letter-pulse 2s ease-in-out infinite;
  position: relative;
}
body.audit-focused .desk-letter::before {
  content: 'MR. CLAW\u2019S AUDIT';
  position: absolute;
  top: 12px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: linear-gradient(170deg, #B71C1C 0%, #7F0000 100%);
  color: #FFEBEE;
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  letter-spacing: 0.18em;
  padding: 6px 16px;
  border-radius: 4px;
  border: 2px solid #3E1012;
  box-shadow:
    0 4px 0 #3E1012,
    0 0 24px rgba(211, 47, 47, 0.6);
  z-index: 10;
  pointer-events: none;
}
@keyframes audit-letter-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.5), 0 10px 30px rgba(0, 0, 0, 0.6); }
  50%      { box-shadow: 0 0 0 4px rgba(239, 83, 80, 0.85), 0 10px 40px rgba(211, 47, 47, 0.6); }
}

/* Audit banner — wider, multi-line, letter-specific */
body.baddleton-mode .audit-banner {
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 12px 20px;
  max-width: 520px;
  text-align: left;
  border-radius: 14px;
}
.audit-banner-row {
  display: flex;
  align-items: center;
  gap: 10px;
}
.audit-banner-title { font-size: 13px; letter-spacing: 0.06em; }
.audit-banner-body {
  font-family: 'Delius', cursive;
  font-style: italic;
  font-size: 13px;
  line-height: 1.45;
  color: #FFEBEE;
  opacity: 0.95;
  letter-spacing: 0;
}
.audit-banner-foot {
  font-size: 11px;
  opacity: 0.8;
  letter-spacing: 0.04em;
  border-top: 1px dashed rgba(255, 235, 238, 0.3);
  padding-top: 6px;
  margin-top: 2px;
}

/* Also disable the close-out-day button to reinforce the block */
body.audit-active #day-btn,
body.audit-active .day-btn {
  opacity: 0.5;
  filter: grayscale(0.4);
  cursor: not-allowed;
}

/* ============================================================ */
/* BADDLETON — END-OF-DAY SUMMARY CARD                            */
/* Override the cream-and-flower Snuggleton theming on the        */
/* end-of-day ledger card.                                        */
/* ============================================================ */
body.baddleton-mode .ledger-card {
  background: linear-gradient(170deg, #1f1418 0%, #0e0709 100%);
  border: 3px solid #4a1618;
  box-shadow: 0 10px 0 #3E1012, 0 24px 48px rgba(0,0,0,0.7);
  color: #E8D6C8;
}
body.baddleton-mode .ledger-star {
  color: #E53935;
  filter: drop-shadow(0 0 10px rgba(229, 57, 53, 0.5));
  font-size: 36px;
}
body.baddleton-mode .ledger-kicker {
  color: #B48A6A;
  letter-spacing: 0.3em;
  font-style: italic;
}
body.baddleton-mode .ledger-day,
body.baddleton-mode .ledger-card h2,
body.baddleton-mode .ledger-card h1 {
  color: #E53935;
  text-shadow: 0 2px 0 #000, 0 0 24px rgba(229, 57, 53, 0.4);
  font-family: 'Chewy', cursive;
}
body.baddleton-mode .ledger-sub {
  color: #B48A6A;
  font-style: italic;
}
body.baddleton-mode .ledger-flavor {
  color: #E8D6C8;
  font-style: italic;
}
/* Tally list (the munched/delivered/etc rows inside the ledger) */
body.baddleton-mode .ledger-list {
  background: linear-gradient(170deg, #2a1a1f 0%, #1a1014 100%);
  border: 2px solid #4a1618;
  border-radius: 12px;
  padding: 6px 14px;
}
body.baddleton-mode .ledger-row {
  border-bottom-color: rgba(229, 57, 53, 0.2);
  color: #E8D6C8;
}
body.baddleton-mode .ledger-label { color: #E8D6C8; opacity: 0.95; }
body.baddleton-mode .ledger-count { color: #FFA000; font-weight: 600; }
body.baddleton-mode .ledger-row.destroyed .ledger-count { color: #EF5350; }
body.baddleton-mode .ledger-row.delivered .ledger-count { color: #8BC34A; }
body.baddleton-mode .ledger-row.bounced .ledger-count { color: #FFA000; }
body.baddleton-mode .ledger-empty {
  color: #9E6B48;
  font-style: italic;
}
body.baddleton-mode .ledger-tomorrow {
  color: #B48A6A;
  font-style: italic;
  border-top: 1px dashed rgba(229, 57, 53, 0.25);
}

/* Trust-ledger block inside the day summary */
body.baddleton-mode .trust-ledger {
  background: linear-gradient(170deg, rgba(42, 26, 31, 0.9) 0%, rgba(26, 16, 20, 0.95) 100%);
  border: 2px solid #4a1618;
  border-radius: 12px;
  color: #E8D6C8;
}
body.baddleton-mode .trust-ledger-title,
body.baddleton-mode .trust-ledger h3,
body.baddleton-mode .trust-ledger h4 {
  color: #B71C1C;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 11px;
  font-weight: 600;
  font-family: 'Fredoka', sans-serif;
}
body.baddleton-mode .trust-ledger .trust-ledger-delta,
body.baddleton-mode .trust-ledger .trust-delta-total {
  color: #E53935;
  font-size: 28px;
  font-weight: 700;
}
body.baddleton-mode .trust-ledger .trust-ledger-arrow {
  color: #B48A6A;
}
body.baddleton-mode .trust-ledger .trust-ledger-final,
body.baddleton-mode .trust-ledger .trust-ledger-tier {
  color: #FFA000;
}
body.baddleton-mode .trust-ledger .trust-ledger-item,
body.baddleton-mode .trust-ledger .trust-item-label {
  color: #E8D6C8;
}
body.baddleton-mode .trust-ledger .trust-item-id,
body.baddleton-mode .trust-ledger [class*="letter-id"] {
  color: #EF5350;
}
body.baddleton-mode .trust-ledger .trust-item-value {
  color: #FFA000;
  font-weight: 600;
}
/* The +3 / -7 numbers in the ledger rows */
body.baddleton-mode .trust-ledger .trust-item-value.positive,
body.baddleton-mode .trust-ledger [class*="positive"] {
  color: #8BC34A !important;
}
body.baddleton-mode .trust-ledger .trust-item-value.negative,
body.baddleton-mode .trust-ledger [class*="negative"] {
  color: #EF5350 !important;
}
body.baddleton-mode .trust-ledger .perfect-day,
body.baddleton-mode .trust-ledger [class*="perfect"] {
  color: #FFA000;
}
body.baddleton-mode .trust-ledger .overflow,
body.baddleton-mode .trust-ledger [class*="overflow"] {
  color: #EF5350;
  font-style: italic;
}

/* Continue button (Begin Day X / Close the chute / etc) */
body.baddleton-mode .ledger-continue,
body.baddleton-mode .day-summary-continue,
body.baddleton-mode .ledger-card button:not(.start-back) {
  background: linear-gradient(170deg, #FFA000 0%, #E65100 100%);
  color: #0c0508;
  border: 2px solid #3E2723;
  box-shadow: 0 4px 0 #3E2723;
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
}
body.baddleton-mode .ledger-continue:hover,
body.baddleton-mode .day-summary-continue:hover {
  background: linear-gradient(170deg, #FFB300 0%, #F57C00 100%);
  box-shadow: 0 6px 0 #3E2723;
}

/* Outgoing-letters strip at the bottom ("LB006 headed for the Muncher...")
   this renders as a pill with dark purple — keep legible in baddleton */
body.baddleton-mode .outgoing-strip,
body.baddleton-mode .outgoing-item,
body.baddleton-mode .day-summary-outgoing {
  background: linear-gradient(170deg, #3E1012 0%, #1a1014 100%);
  color: #FFCDD2;
  border: 1px solid #7F0000;
}

/* Ledger-backdrop dim fallback is the body bg now */
body.baddleton-mode .ledger-backdrop {
  background: rgba(12, 5, 8, 0.85);
}

/* Haunted variant of the card (should not fire in baddleton, but safety) */
body.baddleton-mode .ledger-card.haunted {
  background: linear-gradient(170deg, #2a1014 0%, #0e0306 100%);
  border-color: #7F0000;
}

/* =========================================================
   HIDDEN WIKI — revealed by clicking "Branch 14" x5
   ========================================================= */
.wiki-overlay {
  position: fixed; inset: 0; z-index: 3200;
  background: rgba(20, 15, 10, 0.82);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 32px 20px;
  overflow-y: auto;
  animation: pmOverlayIn 0.3s ease;
}
.wiki-card {
  background: #FFFBEE;
  color: #2d1f0a;
  max-width: 780px;
  width: 100%;
  padding: 36px 42px 28px;
  border-radius: 8px;
  border: 1px solid #8a6a3e;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
  font-family: 'Fredoka', 'Georgia', serif;
  position: relative;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(150, 100, 60, 0.07) 28px, rgba(150, 100, 60, 0.07) 29px);
}
.wiki-overlay.baddleton .wiki-card {
  background: #1a0d10;
  color: #E8DCC0;
  border-color: #4a1618;
  background-image:
    repeating-linear-gradient(0deg, transparent, transparent 28px, rgba(229, 57, 53, 0.05) 28px, rgba(229, 57, 53, 0.05) 29px);
}
.wiki-close {
  position: absolute;
  top: 12px; right: 14px;
  background: transparent;
  border: none;
  font-size: 32px;
  line-height: 1;
  cursor: pointer;
  color: #8a6a3e;
  padding: 4px 10px;
  border-radius: 50%;
}
.wiki-close:hover { background: rgba(150, 100, 60, 0.15); color: #2d1f0a; }
.wiki-overlay.baddleton .wiki-close { color: #8b3a1f; }
.wiki-overlay.baddleton .wiki-close:hover { background: rgba(229, 57, 53, 0.15); color: #E53935; }

.wiki-header {
  border-bottom: 2px double #8a6a3e;
  padding-bottom: 18px;
  margin-bottom: 24px;
}
.wiki-overlay.baddleton .wiki-header { border-bottom-color: #4a1618; }
.wiki-kicker {
  font-size: 11px;
  letter-spacing: 0.24em;
  color: #8a6a3e;
  margin-bottom: 6px;
  text-transform: uppercase;
}
.wiki-overlay.baddleton .wiki-kicker { color: #E53935; }
.wiki-title {
  font-family: 'Chewy', 'Georgia', serif;
  font-size: 32px;
  margin: 0 0 8px;
  color: #6B2626;
}
.wiki-overlay.baddleton .wiki-title { color: #E53935; }
.wiki-sub {
  font-style: italic;
  font-size: 13px;
  color: #8a6a3e;
}
.wiki-overlay.baddleton .wiki-sub { color: #c97a5c; }

.wiki-sec {
  margin-bottom: 26px;
}
.wiki-sec h2 {
  font-family: 'Chewy', 'Georgia', serif;
  font-size: 22px;
  margin: 18px 0 8px;
  color: #6B2626;
  border-bottom: 1px solid rgba(138, 106, 62, 0.3);
  padding-bottom: 4px;
}
.wiki-overlay.baddleton .wiki-sec h2 {
  color: #FFA000;
  border-bottom-color: rgba(229, 57, 53, 0.3);
}
.wiki-sec h3 {
  font-family: 'Fredoka', sans-serif;
  font-size: 16px;
  font-weight: 600;
  margin: 12px 0 4px;
  color: #8a3e2a;
}
.wiki-overlay.baddleton .wiki-sec h3 { color: #E88C2E; }
.wiki-sec p, .wiki-sec li {
  font-size: 14.5px;
  line-height: 1.6;
  margin-bottom: 10px;
}
.wiki-sec ul {
  padding-left: 22px;
  margin-bottom: 14px;
}
.wiki-sec ul li {
  margin-bottom: 6px;
}
.wiki-sec strong { color: #6B2626; }
.wiki-overlay.baddleton .wiki-sec strong { color: #FFA000; }
.wiki-meta {
  border-top: 1px dashed rgba(138, 106, 62, 0.4);
  padding-top: 18px;
  font-size: 13px;
  opacity: 0.85;
}
.wiki-overlay.baddleton .wiki-meta { border-top-color: rgba(229, 57, 53, 0.3); }
.wiki-footer {
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid rgba(138, 106, 62, 0.3);
  font-size: 12px;
  color: #8a6a3e;
  text-align: center;
  font-style: italic;
}
.wiki-overlay.baddleton .wiki-footer {
  border-top-color: rgba(229, 57, 53, 0.2);
  color: #c97a5c;
}

/* =========================================================
   MESSAGE-IN-A-BOTTLE — L059 and friends
   ========================================================= */
.interior-bottle {
  margin: 14px 0;
  padding: 16px 18px;
  background: linear-gradient(180deg, #E8F4F8 0%, #C4DDE6 100%);
  border: 2px solid #6b8f9c;
  border-radius: 12px;
  box-shadow: inset 0 2px 8px rgba(107, 143, 156, 0.3);
  position: relative;
}
.interior-bottle::before {
  /* A little wave pattern on the top edge */
  content: '';
  position: absolute;
  top: -1px; left: 10px; right: 10px;
  height: 6px;
  background:
    radial-gradient(circle at 4px 6px, transparent 3px, #6b8f9c 3px, #6b8f9c 4px, transparent 4px)
    repeat-x;
  background-size: 8px 6px;
  opacity: 0.4;
}
.bottle-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding-bottom: 10px;
  border-bottom: 1px dashed rgba(107, 143, 156, 0.5);
}
.bottle-icon { font-size: 28px; }
.bottle-title {
  flex: 1;
  font-family: 'Chewy', 'Fredoka', serif;
  font-size: 18px;
  color: #2d4a52;
}
.bottle-progress {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2d4a52;
  background: rgba(255, 255, 255, 0.6);
  padding: 3px 10px;
  border-radius: 999px;
  border: 1px solid rgba(107, 143, 156, 0.4);
}
.bottle-intro {
  font-style: italic;
  color: #3e5a62;
  margin-bottom: 12px;
  font-size: 13px;
}
.bottle-notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bottle-note {
  background: #FFFDF5;
  border: 1.5px solid #8a7a5e;
  border-radius: 6px;
  padding: 10px 12px;
  transition: all 0.2s;
  font-family: 'Caveat', 'Kalam', cursive;
  box-shadow: 1px 2px 4px rgba(0,0,0,0.08);
}
.bottle-note.routed {
  opacity: 0.65;
  background: #F0E8D5;
}
.bottle-note-from {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px dotted rgba(138, 122, 94, 0.4);
}
.bottle-note-label {
  font-weight: 600;
  color: #8a7a5e;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.bottle-note-recipient {
  font-weight: 600;
  color: #3e2f1a;
  font-size: 13px;
}
.bottle-note-town {
  color: #8a7a5e;
  font-style: italic;
  font-size: 11px;
  margin-left: auto;
}
.bottle-note-text {
  font-size: 14px;
  line-height: 1.4;
  color: #3e2f1a;
  padding: 4px 0 8px;
}
.bottle-note-routed-to {
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  color: #4a7c3a;
  padding: 4px 0;
}
.bottle-note-routed-to em {
  font-weight: 600;
  font-style: normal;
}
.bottle-route-btn {
  display: block;
  margin: 6px 0 2px auto;
  background: var(--accent-pink, #E63946);
  color: #FFF;
  border: none;
  padding: 6px 14px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  cursor: pointer;
  box-shadow: 0 2px 0 #B32030;
  transition: transform 0.1s;
}
.bottle-route-btn:hover { transform: translateY(-1px); }
.bottle-route-btn:active { transform: translateY(1px); box-shadow: 0 1px 0 #B32030; }
.bottle-complete, .bottle-remaining {
  margin-top: 12px;
  padding: 8px 10px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  text-align: center;
  border-radius: 6px;
}
.bottle-complete {
  background: rgba(74, 124, 58, 0.15);
  color: #2d5a1a;
  border: 1px dashed rgba(74, 124, 58, 0.4);
}
.bottle-remaining {
  background: rgba(255, 193, 102, 0.2);
  color: #8a5a10;
  border: 1px dashed rgba(255, 193, 102, 0.6);
}

/* Baddleton theming */
body.baddleton-mode .interior-bottle {
  background: linear-gradient(180deg, #2a1a22 0%, #1a0d14 100%);
  border-color: #4a1618;
}
body.baddleton-mode .bottle-title { color: #FFA000; }
body.baddleton-mode .bottle-progress {
  background: rgba(0,0,0,0.4);
  color: #E8DCC0;
  border-color: #4a1618;
}
body.baddleton-mode .bottle-intro { color: #c97a5c; }
body.baddleton-mode .bottle-note {
  background: #1f1418;
  border-color: #4a1618;
  color: #E8DCC0;
}
body.baddleton-mode .bottle-note-text,
body.baddleton-mode .bottle-note-recipient { color: #E8DCC0; }
body.baddleton-mode .bottle-note-label { color: #c97a5c; }
body.baddleton-mode .bottle-route-btn {
  background: #FFA000;
  color: #1f1418;
  box-shadow: 0 2px 0 #B36E00;
}
body.baddleton-mode .bottle-route-btn:active { box-shadow: 0 1px 0 #B36E00; }

/* =========================================================
   BLANK-FIELD CAPTCHA — Spangolini-style cross-reference puzzles
   ========================================================= */
.typeable-field.blank-field {
  display: inline-block;
  min-width: 80px;
  padding: 1px 8px;
  border-bottom: 2px dashed var(--brass-dark, #b89244);
  color: transparent;
  background: rgba(255, 255, 200, 0.25);
  text-align: center;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.2em;
  cursor: pointer;
  position: relative;
  transition: all 0.15s;
  vertical-align: baseline;
}
.typeable-field.blank-field::before {
  content: '___';
  position: absolute;
  left: 0; right: 0;
  top: 50%;
  transform: translateY(-50%);
  color: var(--brass-dark, #b89244);
  letter-spacing: 0.3em;
  opacity: 0.5;
}
.typeable-field.blank-field:hover {
  background: rgba(255, 235, 100, 0.4);
  border-bottom-color: var(--accent-pink, #E63946);
}
.typeable-field.blank-field:hover::before {
  color: var(--accent-pink, #E63946);
  opacity: 0.8;
}
body.baddleton-mode .typeable-field.blank-field {
  border-bottom-color: #8b3a1f;
  background: rgba(80, 20, 20, 0.2);
}
body.baddleton-mode .typeable-field.blank-field::before {
  color: #8b3a1f;
}
body.baddleton-mode .typeable-field.blank-field:hover {
  background: rgba(229, 57, 53, 0.25);
  border-bottom-color: #FFA000;
}

.captcha-sample.blank-sample {
  color: #b89244;
  letter-spacing: 0.3em;
  opacity: 0.6;
}

/* =========================================================
   CHUTE TABS — In-Chute vs Archive Drawer
   ========================================================= */
.chute-tabs {
  display: flex;
  gap: 4px;
  padding: 4px 4px 0;
  border-bottom: 2px solid var(--brass-dark, #b89244);
  margin-bottom: 4px;
}
.chute-tab {
  flex: 1;
  background: transparent;
  border: 2px solid transparent;
  border-bottom: none;
  border-radius: 8px 8px 0 0;
  padding: 6px 8px;
  font-family: 'Fredoka', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--ink-muted, #8a7a5e);
  cursor: pointer;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all 0.15s;
  position: relative;
  line-height: 1.2;
}
.chute-tab:hover {
  background: rgba(255, 220, 150, 0.25);
  color: var(--ink-dark, #3e2f1a);
}
.chute-tab.active {
  background: var(--paper, #FFFBEE);
  border-color: var(--brass-dark, #b89244);
  color: var(--ink-dark, #3e2f1a);
  margin-bottom: -2px;
}
.chute-tab-icon { font-size: 14px; line-height: 1; }
.chute-tab-label {
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-size: 10px;
  white-space: nowrap;
}
.chute-tab-badge {
  background: var(--accent-pink, #E63946);
  color: #FFF;
  font-size: 9px;
  font-weight: 700;
  padding: 0 6px;
  border-radius: 999px;
  min-width: 18px;
  line-height: 1.6;
  text-align: center;
}
.chute-tab.active .chute-tab-badge {
  background: var(--brass-dark, #b89244);
}
.chute-tab:not(.active) .chute-tab-badge {
  opacity: 0.75;
}
body.baddleton-mode .chute-tabs {
  border-bottom-color: #4a1618;
}
body.baddleton-mode .chute-tab {
  color: #c97a5c;
}
body.baddleton-mode .chute-tab:hover {
  background: rgba(229, 57, 53, 0.15);
  color: #E8DCC0;
}
body.baddleton-mode .chute-tab.active {
  background: #1f1418;
  border-color: #4a1618;
  color: #E8DCC0;
}
body.baddleton-mode .chute-tab-badge {
  background: #E53935;
}

.archive-envelope {
  position: relative;
  opacity: 0.85;
  transition: opacity 0.15s, transform 0.15s;
}
.archive-envelope:hover {
  opacity: 1;
  transform: translateY(-2px);
}
.archive-badge {
  position: absolute;
  top: 4px; left: 4px;
  background: rgba(138, 122, 94, 0.9);
  color: #FFF;
  font-family: 'Fredoka', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 2px 7px;
  border-radius: 3px;
  transform: rotate(-4deg);
  pointer-events: none;
  z-index: 2;
}
body.baddleton-mode .archive-badge {
  background: rgba(229, 57, 53, 0.85);
}
.archive-hint {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  color: var(--ink-muted, #8a7a5e);
  padding: 6px 10px;
  font-style: italic;
  text-align: center;
  border-bottom: 1px dashed rgba(138, 122, 94, 0.3);
  margin-bottom: 6px;
}
.archive-empty {
  padding: 24px 12px;
  text-align: center;
  line-height: 1.5;
}
.archive-empty small {
  opacity: 0.7;
  font-size: 11px;
}

/* Archive action buttons — pull vs un-file */
.archive-actions {
  display: flex;
  gap: 4px;
  margin-top: 6px;
  justify-content: space-between;
}
.archive-action-btn {
  flex: 1;
  padding: 4px 6px;
  border: 1px solid var(--brass-dark, #b89244);
  border-radius: 4px;
  background: rgba(255, 251, 238, 0.85);
  color: #3e2f1a;
  font-family: 'Fredoka', sans-serif;
  font-size: 10px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.12s;
  letter-spacing: 0.02em;
}
.archive-action-btn:hover {
  background: var(--brass, #FFCB5C);
  border-color: var(--accent-pink, #E63946);
  transform: translateY(-1px);
}
.archive-action-btn.archive-unfile {
  color: #8a4a2a;
  border-color: #c97a5c;
  background: rgba(255, 230, 210, 0.7);
}
.archive-action-btn.archive-unfile:hover {
  background: rgba(255, 180, 130, 0.9);
  color: #3e2f1a;
}
body.baddleton-mode .archive-action-btn {
  background: #2a1a1e;
  color: #E8DCC0;
  border-color: #4a1618;
}
body.baddleton-mode .archive-action-btn:hover {
  background: #3a1f24;
  border-color: #E53935;
}
body.baddleton-mode .archive-action-btn.archive-unfile {
  color: #FFA000;
  border-color: #8b3a1f;
}

/* Archive group banner — shows puzzle-arc progress at the top of the drawer */
.archive-group-banner {
  padding: 10px 12px;
  border-radius: 8px;
  margin-bottom: 10px;
  border-left: 4px solid;
  background: linear-gradient(90deg, rgba(255,235,200,0.6), rgba(255,251,238,0.9));
}
.archive-group-banner.spangolini-banner {
  border-left-color: #9c4bb6;
  background: linear-gradient(90deg, rgba(230,200,240,0.6), rgba(255,251,238,0.9));
}
.archive-group-head {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Chewy', 'Fredoka', sans-serif;
  font-size: 14px;
  color: #3e2f1a;
  margin-bottom: 2px;
}
.archive-group-icon { font-size: 16px; }
.archive-group-title { flex: 1; }
.archive-group-progress {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  font-weight: 700;
  background: rgba(156, 75, 182, 0.25);
  color: #6a2a82;
  padding: 2px 8px;
  border-radius: 999px;
}
.archive-group-sub {
  font-family: 'Fredoka', sans-serif;
  font-size: 11px;
  color: var(--ink-muted, #8a7a5e);
  font-style: italic;
}

/* Per-card progress chip in archive view */
.archive-letter-progress {
  position: absolute;
  top: 4px; right: 4px;
  font-family: 'Fredoka', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 7px;
  border-radius: 3px;
  background: rgba(156, 75, 182, 0.25);
  color: #6a2a82;
  z-index: 2;
  pointer-events: none;
}
.archive-letter-progress.complete {
  background: rgba(74, 124, 58, 0.85);
  color: #FFF;
}
.archive-letter-progress.agent {
  background: rgba(40, 40, 60, 0.8);
  color: #FFD87A;
}
.archive-letter-progress.directive {
  background: rgba(69, 97, 127, 0.85);
  color: #FFF;
}
.archive-spangolini {
  border-color: #9c4bb6 !important;
}
body.baddleton-mode .archive-group-banner.spangolini-banner {
  background: linear-gradient(90deg, rgba(80, 40, 100, 0.3), rgba(30, 15, 20, 0.7));
  border-left-color: #c97acc;
}
body.baddleton-mode .archive-group-title { color: #E8DCC0; }
body.baddleton-mode .archive-group-progress {
  background: rgba(200, 120, 220, 0.3);
  color: #E8B8EE;
}
body.baddleton-mode .archive-group-sub { color: #c97a5c; }
body.baddleton-mode .archive-letter-progress {
  background: rgba(200, 120, 220, 0.3);
  color: #E8B8EE;
}
body.baddleton-mode .archive-letter-progress.complete {
  background: #4a7c3a;
  color: #FFF;
}

/* Decline-promotion secondary button — appears below the primary "accept"
   button on the promoted ending only. Styled as a softer, quieter choice
   so it reads as an alternate path rather than equal-weight. */
.ending-decline {
  display: block;
  margin: 10px auto 0;
  background: transparent;
  color: var(--ink-muted, #8a7a5e);
  border: 2px dashed rgba(138, 122, 94, 0.45);
  padding: 10px 18px;
  font-family: 'Fredoka', sans-serif;
  font-size: 13px;
  font-weight: 500;
  border-radius: 999px;
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.01em;
  max-width: 380px;
}
.ending-decline:hover {
  color: var(--ink-dark, #3e2f1a);
  border-color: var(--accent-pink, #E63946);
  border-style: solid;
  background: rgba(255, 220, 150, 0.2);
  transform: translateY(-1px);
}
.ending-decline:active { transform: translateY(1px); }

body.baddleton-mode .ending-decline {
  color: #c97a5c;
  border-color: rgba(201, 122, 92, 0.5);
}
body.baddleton-mode .ending-decline:hover {
  color: #E8DCC0;
  border-color: #FFA000;
  background: rgba(229, 57, 53, 0.12);
}