/* ============================================================
   SANTA OLIVER — Elf Training Academy page
   ============================================================ */

.np-page { background: linear-gradient(180deg, #0c1b2e, #0f2438 40%, #123a44); }

/* ---------------- PLAYFUL HERO ---------------- */
.np-hero {
  position: relative;
  min-height: 70vh;
  min-height: 70dvh;
  display: flex; align-items: center; overflow: hidden;
  padding: 130px 0 90px; text-align: center;
}
.np-hero .starfield { z-index: 1; }
.np-hero .snow-canvas { z-index: 2; }
.np-hero .aurora { opacity: .5; z-index: 0; }
.np-hero .ph-inner { position: relative; z-index: 6; width: 100%; }
.np-hero .kicker {
  font-family: var(--mono); font-size: 13px; letter-spacing: 0.28em;
  text-transform: uppercase; color: var(--gold-200);
}
.np-hero h1 {
  font-family: var(--display); font-weight: 600;
  font-size: clamp(44px, 8vw, 96px); color: #fff; line-height: 0.96;
  text-shadow: 0 4px 30px rgba(0,0,0,0.4);
  margin: 14px 0 18px;
}
.np-hero h1 em { font-style: italic; color: var(--gold-200); }
.np-hero p {
  font-size: clamp(17px, 1.4vw, 20px); color: #d7e6ee;
  max-width: 540px; margin: 0 auto; line-height: 1.6;
}

/* countdown */
.countdown {
  display: flex; gap: 16px; justify-content: center;
  margin: 36px 0 8px; flex-wrap: wrap;
}
.cd-unit {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: var(--r-lg);
  width: 110px; padding: 18px 8px;
  backdrop-filter: blur(8px);
}
.cd-unit .n {
  font-family: var(--display); font-weight: 600; font-size: 52px;
  color: #fff; line-height: 1; font-variant-numeric: tabular-nums;
}
.cd-unit .l {
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--gold-200); margin-top: 8px;
}
.cd-foot {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: #9fb6c0;
}

/* ---------------- TOY GRID SECTION ---------------- */
.np-section { position: relative; padding: 90px 0; }
.np-section .wrap { position: relative; z-index: 3; }
.np-head { text-align: center; max-width: 620px; margin: 0 auto 50px; }
.np-head h2 {
  font-family: var(--display); font-weight: 500;
  font-size: clamp(32px, 4vw, 52px); color: #fff;
}
.np-head p { color: #b9cdd6; font-size: 17px; margin-top: 14px; }

.toy-grid {
  display: grid; grid-template-columns: repeat(12, 1fr); gap: 22px;
}
.toy {
  border-radius: var(--r-xl); padding: 30px;
  position: relative; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background: linear-gradient(165deg, rgba(255,255,255,0.12), rgba(255,255,255,0.04));
  backdrop-filter: blur(10px);
}
.toy .toy-ico {
  width: 46px; height: 46px; border-radius: 14px;
  display: grid; place-items: center; color: #fff; margin-bottom: 18px;
}
.toy h3 {
  font-family: var(--display); font-weight: 600; font-size: 28px;
  color: #fff; margin: 0 0 8px;
}
.toy p.toy-sub {
  color: #b9cdd6; font-size: 15px; line-height: 1.55; margin: 0 0 20px;
}
.toy.span7 { grid-column: span 7; }
.toy.span5 { grid-column: span 5; }
.toy.span6 { grid-column: span 6; }

/* ---------------- CANDY BUTTON ---------------- */
.btn-candy {
  font-family: var(--body); font-weight: 700; font-size: 15px;
  color: #fff; border: 0; cursor: pointer;
  padding: 14px 24px; border-radius: 999px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 10px 22px -10px rgba(158,31,32,0.7);
  min-height: 48px; display: inline-flex; align-items: center; gap: 8px;
  transition: transform .25s ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
@media (hover: hover) and (pointer: fine) {
  .btn-candy:hover { transform: translateY(-2px); }
}
.btn-candy:active { transform: translateY(1px) scale(0.98); }

/* ---------------- LETTER TO SANTA ---------------- */
.letter { display: flex; flex-direction: column; align-items: center; }

/* in-window intro (hidden in the grid card, shown full-screen) */
.letter-intro { text-align: center; max-width: 640px; margin: 2px 0 26px; }
.letter-badge {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 16px 7px 12px; border-radius: 999px;
  background: rgba(233,196,106,0.12); border: 1px solid rgba(233,196,106,0.3);
  color: #f0d894; font-family: var(--body); font-size: 12.5px; font-weight: 500;
  letter-spacing: 0.4px; text-transform: uppercase;
}
.letter-badge-dot { width: 8px; height: 8px; border-radius: 50%; background: #57c785; box-shadow: 0 0 8px #57c785; }
.letter-title {
  margin: 16px 0 8px; font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: 34px; color: #fff8ea; line-height: 1.15;
}
.letter-lead { margin: 0; color: #bcd0d8; font-family: var(--body); font-size: 16px; line-height: 1.55; }
.letter-lead em { color: #f0d894; font-style: italic; }

/* card + wax ribbon header */
.letter-cardwrap { position: relative; width: 100%; max-width: 720px; }
.letter-ribbon {
  position: relative; z-index: 2; width: max-content; margin: 0 auto -16px;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 11px 30px; border-radius: 10px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep)); color: #fff;
  font-family: var(--display); font-weight: 600; font-size: 15px;
  letter-spacing: 1.5px; text-transform: uppercase;
  box-shadow: 0 10px 22px rgba(0,0,0,0.4);
}
.letter-card {
  position: relative;
  background: linear-gradient(180deg, #faf3e2 0%, #f5ecd8 100%);
  border-radius: 20px; padding: 40px 40px 34px;
  box-shadow: 0 30px 70px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(255,255,255,0.5);
  border: 1px solid rgba(180,140,90,0.25);
}
.letter-stamp {
  position: absolute; top: 22px; right: 22px; width: 74px; height: 88px;
  border-radius: 6px; transform: rotate(4deg);
  background: repeating-linear-gradient(45deg, #f4ece0 0 6px, #efe4d2 6px 8px);
  border: 2px dashed rgba(122,86,44,0.4);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  box-shadow: 0 3px 8px rgba(0,0,0,0.12);
}
.letter-stamp-face { font-size: 26px; line-height: 1; }
.letter-stamp-cap { font-family: var(--body); font-size: 7.5px; font-weight: 600; letter-spacing: 0.5px; color: #8a5a2a; text-align: center; }
.letter-dear { font-family: var(--display); font-style: italic; font-size: 26px; color: #7c5a2e; margin: 2px 0 4px; font-weight: 500; }
.letter-openhint { font-family: var(--body); font-size: 13px; color: #a07d4c; margin-bottom: 14px; letter-spacing: 0.2px; }

/* ruled handwriting paper */
.letter textarea {
  width: 100%; resize: vertical; border: 0; outline: none; background: transparent;
  font-family: 'Caveat', cursive; font-size: 23px; line-height: 40px; color: #33475a;
  padding: 0 4px; min-height: 200px;
  background-image: repeating-linear-gradient(transparent, transparent 39px, rgba(150,110,60,0.28) 39px, rgba(150,110,60,0.28) 40px);
}
.letter textarea::placeholder { color: #b39a7a; }

/* idea chips */
.letter-ideas { margin: 16px 0 4px; align-self: stretch; }
.letter-ideas-title { font-family: var(--body); font-size: 12px; font-weight: 600; color: #9a744a; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 9px; }
.letter-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.letter-chip {
  cursor: pointer; padding: 8px 14px; border-radius: 999px;
  border: 1.5px solid rgba(150,110,60,0.35); background: rgba(255,255,255,0.55);
  color: #6d4e28; font-family: var(--body); font-size: 13px; font-weight: 500;
  transition: background .15s, border-color .15s, color .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
  .letter-chip:hover { background: rgba(192,42,32,0.10); border-color: var(--red); color: var(--red); transform: translateY(-1px); }
}
.letter-chip:active { background: rgba(192,42,32,0.10); border-color: var(--red); color: var(--red); transform: scale(0.97); }

/* excitement meter */
.letter-meter { margin: 18px 0 20px; align-self: stretch; }
.letter-meter-row { display: flex; justify-content: space-between; gap: 12px; font-family: var(--body); font-size: 11.5px; color: #9a744a; font-weight: 500; margin-bottom: 6px; }
.letter-meter-track { height: 8px; border-radius: 999px; background: rgba(120,86,44,0.15); overflow: hidden; }
.letter-meter-fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(180deg, var(--red-bright), var(--red-deep)); transition: width .3s ease; box-shadow: 0 0 10px rgba(204,43,43,0.4); }

/* name + email */
.letter-fields { display: flex; flex-direction: column; gap: 12px; align-self: stretch; }
.letter-field label { display: block; font-family: var(--body); font-size: 12px; font-weight: 600; color: #9a744a; letter-spacing: 0.4px; text-transform: uppercase; margin-bottom: 6px; }
.letter-field-opt { text-transform: none; font-weight: 400; color: #b39a78; }
.letter-field input {
  width: 100%; padding: 14px 16px; border-radius: 12px;
  border: 1.5px solid rgba(150,110,60,0.3); background: #fffdf8; color: #3a2c1a;
  font-family: var(--body); font-size: 15px; outline: none; min-height: 48px;
}
.letter-field input:focus-visible { border-color: var(--red); box-shadow: 0 0 0 3px rgba(192,42,32,0.12); }
.letter-consent { display: flex; align-items: center; gap: 8px; font-family: var(--body); font-size: 12.5px; color: #9a744a; margin: 2px 0 0; }

/* send */
.letter-send {
  margin-top: 24px; width: 100%; display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 17px 28px; border: none; border-radius: 14px; cursor: pointer;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep)); color: #fff;
  font-family: var(--body); font-weight: 600; font-size: 17px; letter-spacing: 0.3px;
  box-shadow: 0 12px 28px rgba(0,0,0,0.3), inset 0 1px 0 rgba(255,255,255,0.25);
  transition: filter .18s, transform .18s, box-shadow .18s, background .18s, opacity .18s;
}
@media (hover: hover) and (pointer: fine) {
  .letter-send:hover:not(:disabled) { filter: brightness(1.06); transform: translateY(-2px); box-shadow: 0 16px 34px rgba(0,0,0,0.34); }
}
.letter-send:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.letter-send:disabled { cursor: not-allowed; background: linear-gradient(180deg, #c9bca4, #a99a80); opacity: 0.75; }
.letter-send-sled { font-size: 19px; }

/* success overlay */
.letter-success {
  position: fixed; inset: 0; z-index: 4100; display: none;
  align-items: center; justify-content: center; overflow-y: auto;
  background: rgba(6,20,28,0.72); backdrop-filter: blur(6px); padding: 24px;
}
.letter-success.show { display: flex; }
.letter-success-card {
  max-width: 440px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto;
  text-align: center; margin: auto;
  background: linear-gradient(180deg, #fbf4e4, #f4e9d3); border-radius: 24px;
  padding: 44px 38px; border: 1px solid rgba(233,196,106,0.4);
  box-shadow: 0 30px 80px rgba(0,0,0,0.5); animation: letterPop .4s ease;
}
/* "letter on its way" courier animation, top-centre of the success card */
.letter-fly { position: relative; width: 300px; max-width: 100%; height: 92px; margin: 0 auto 6px; }
.letter-fly-env { position: absolute; left: 6px; top: 34px; font-size: 38px; filter: drop-shadow(0 5px 7px rgba(0,0,0,0.18)); animation: letterCourier 2.8s ease-in-out infinite; }
.letter-fly-dest { position: absolute; right: 4px; top: 20px; font-size: 42px; animation: letterDestBob 2.8s ease-in-out infinite; }
.letter-fly-trail { position: absolute; left: 44px; right: 48px; top: 46px; height: 34px; border-top: 2px dashed rgba(192,42,32,0.32); border-radius: 50%; transform: rotate(-6deg); }
.letter-fly-star { position: absolute; color: #e0b23c; font-size: 13px; opacity: 0; }
.letter-fly-star--1 { left: 128px; top: 12px; animation: letterSpark 2.8s ease-in-out 0.5s infinite; }
.letter-fly-star--2 { left: 198px; top: 38px; animation: letterSpark 2.8s ease-in-out 1.15s infinite; }
@keyframes letterCourier {
  0%   { transform: translate(0, 26px) rotate(-10deg) scale(1);      opacity: 0; }
  14%  { opacity: 1; }
  55%  { transform: translate(140px, -10px) rotate(6deg) scale(0.95); }
  86%  { opacity: 1; }
  100% { transform: translate(250px, 4px) rotate(16deg) scale(0.64);  opacity: 0; }
}
@keyframes letterDestBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes letterSpark { 0%, 100% { opacity: 0; transform: scale(0.6); } 50% { opacity: 1; transform: scale(1); } }

.letter-success .letter-success-title { margin: 6px 0 10px; font-family: var(--display); font-weight: 600; font-size: 28px; color: #5a3d1a; }
.letter-success .letter-success-msg { margin: 0 0 22px; color: #8a6a40; font-family: var(--body); font-size: 15px; line-height: 1.6; }
.letter-again { margin-top: 0; width: auto; border-radius: 999px; padding: 13px 26px; font-size: 15px; }
@keyframes letterPop { 0% { transform: scale(.85); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .letter-success-card { animation: none; }
  .letter-fly-env { animation: none; left: 40%; top: 18px; opacity: 1; transform: rotate(4deg); }
  .letter-fly-dest, .letter-fly-star { animation: none; }
  .letter-fly-star { opacity: 1; }
}

/* ---------------- ELF NAME GENERATOR ---------------- */
/* intro */
.elf-form { display: block; }
.elf-intro { text-align: center; animation: elfPop .5s ease both; }
.elf-intro-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 88px; height: 88px; border-radius: 26px; font-size: 44px;
  background: linear-gradient(160deg, var(--green-bright), var(--green));
  box-shadow: 0 14px 34px rgba(15,107,57,0.5), inset 0 2px 0 rgba(255,255,255,0.25);
  animation: elfFloaty 4s ease-in-out infinite;
}
.elf-hohoho { margin: 20px 0 6px; font-family: 'Mountains of Christmas', var(--display); font-weight: 700; color: #fff; font-size: 44px; line-height: 1; }
.elf-intro-sub { margin: 0 auto; max-width: 440px; color: #cfe0d8; font-family: var(--body); font-size: 18px; font-weight: 600; }

/* form card */
.elf-card {
  margin-top: 28px; padding: 24px; border-radius: 24px;
  background: rgba(18,34,44,0.72); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 24px 60px rgba(0,0,0,0.35);
}
.elf-step { display: block; color: var(--gold-200); font-family: var(--body); font-weight: 800; font-size: 13px; letter-spacing: 0.6px; text-transform: uppercase; margin: 0 0 8px 4px; }
.elf-card .elf-step + .elf-input { margin-bottom: 0; }
.elf-card #elfMonthLabel { margin-top: 20px; }
.elf-input {
  width: 100%; padding: 16px 18px; border-radius: 14px;
  border: 2px solid rgba(255,255,255,0.1); background: rgba(9,18,26,0.7);
  color: #fff; font-family: var(--body); font-size: 18px; font-weight: 700; outline: none;
}
.elf-input::placeholder { color: rgba(226,232,240,0.45); font-weight: 600; }
.elf-input:focus-visible { border-color: var(--gold-200); }
.elf-months { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.elf-month {
  padding: 11px 4px; border-radius: 12px; cursor: pointer;
  font-family: var(--body); font-weight: 800; font-size: 14px;
  border: 2px solid rgba(255,255,255,0.1); background: rgba(9,18,26,0.6);
  color: #cfe0d8; transition: all .15s;
}
@media (hover: hover) and (pointer: fine) {
  .elf-month:hover { border-color: rgba(255,255,255,0.25); }
}
.elf-month:active { border-color: rgba(255,255,255,0.25); transform: scale(0.97); }
.elf-month.is-active {
  border-color: var(--gold-200); color: #fff;
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  box-shadow: 0 6px 16px rgba(15,107,57,0.4);
}
.elf-reveal {
  width: 100%; margin-top: 22px; padding: 17px; border: none; border-radius: 16px; cursor: pointer;
  font-family: var(--body); font-weight: 900; font-size: 19px; color: #fff; letter-spacing: 0.3px;
  background: linear-gradient(100deg, #1fae5c, #0c7a42);
  box-shadow: 0 12px 30px rgba(15,107,57,0.45); transition: all .2s;
}
@media (hover: hover) and (pointer: fine) {
  .elf-reveal:hover:not(:disabled) { filter: brightness(1.05); transform: translateY(-2px); }
}
.elf-reveal:active:not(:disabled) { transform: translateY(1px) scale(0.99); }
.elf-reveal:disabled { cursor: not-allowed; background: rgba(70,90,84,0.5); box-shadow: none; opacity: 0.7; }
.elf-hint { text-align: center; margin: 12px 0 0; font-family: var(--body); font-size: 14px; font-weight: 700; color: #9fb4ab; }
.elf-hint.ready { color: #9fe3b8; }

/* result */
.elf-result { text-align: center; }
.elf-reveal-head { animation: elfPopBounce .55s cubic-bezier(.2,1.4,.4,1) both; }
.elf-eyebrow { margin: 0; color: var(--gold-200); font-family: var(--body); font-weight: 800; letter-spacing: 2px; text-transform: uppercase; font-size: 13px; }
.elf-name {
  margin: 6px 0 2px; font-family: 'Mountains of Christmas', var(--display); font-weight: 700;
  font-size: 62px; line-height: 1.05;
  background: linear-gradient(100deg, #fff, #ffe9a8 45%, #f4d47a);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 3px 10px rgba(244,212,122,0.3));
}
.elf-title { margin: 2px 0 0; color: #cfe0d8; font-family: var(--body); font-size: 17px; font-weight: 600; font-style: italic; }

/* avatar builder */
.elf-builder { margin-top: 26px; display: grid; grid-template-columns: 230px 1fr; gap: 22px; align-items: start; text-align: left; }
.elf-preview {
  padding: 16px; border-radius: 24px; text-align: center;
  background: linear-gradient(180deg, rgba(255,255,255,0.1), rgba(255,255,255,0.03));
  border: 1px solid rgba(255,255,255,0.12); box-shadow: 0 20px 50px rgba(0,0,0,0.35);
}
.elf-avatar { animation: elfFloaty 5s ease-in-out infinite; }
.elf-avatar svg { display: block; margin: 0 auto; max-width: 100%; height: auto; }
.elf-preview-cap { margin: 6px 0 0; color: #9fb4ab; font-family: var(--body); font-size: 12px; font-weight: 700; }
.elf-controls {
  padding: 18px 20px; border-radius: 24px;
  background: rgba(18,34,44,0.72); border: 1px solid rgba(255,255,255,0.08);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
}
.elf-controls-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.elf-build-title { margin: 0; color: #fff; font-family: var(--display); font-style: italic; font-weight: 600; font-size: 22px; }
.elf-surprise {
  background: linear-gradient(180deg, #f4d47a, #d9ad46); color: #3a2c07;
  font-family: var(--body); font-weight: 900; font-size: 14px; border: none; border-radius: 999px;
  padding: 9px 16px; cursor: pointer; box-shadow: 0 6px 16px rgba(217,173,70,0.3); transition: filter .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
  .elf-surprise:hover { filter: brightness(1.05); transform: translateY(-1px); }
}
.elf-surprise:active { transform: scale(0.96); }
.elf-ctrl { margin-top: 14px; }
.elf-ctrl-label { margin: 0 0 7px 2px; color: var(--gold-200); font-family: var(--body); font-weight: 800; font-size: 12px; letter-spacing: 0.5px; text-transform: uppercase; }
.elf-swatches { display: flex; flex-wrap: wrap; gap: 8px; }
.elf-swatch {
  width: 44px; min-width: 44px; height: 44px; padding: 0; border-radius: 12px; cursor: pointer;
  font-size: 17px; font-weight: 800; color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  border: 3px solid rgba(255,255,255,0.14); box-shadow: 0 3px 8px rgba(0,0,0,0.25);
  transition: all .15s;
}
.elf-swatch--glyph { width: auto; padding: 0 12px; background: rgba(9,18,26,0.6); }
.elf-swatch.is-active { border-color: var(--gold-200); box-shadow: 0 0 0 2px rgba(244,212,122,0.3), 0 6px 14px rgba(0,0,0,0.3); }
.elf-swatch--glyph.is-active { background: rgba(244,212,122,0.2); }

.elf-actions { display: flex; gap: 12px; justify-content: center; margin-top: 24px; flex-wrap: wrap; }
.elf-new {
  background: linear-gradient(180deg, var(--green-bright), var(--green)); color: #fff;
  font-family: var(--body); font-weight: 900; font-size: 16px; border: none; border-radius: 999px;
  padding: 14px 26px; cursor: pointer; box-shadow: 0 10px 26px rgba(15,107,57,0.4); transition: filter .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
  .elf-new:hover { filter: brightness(1.05); transform: translateY(-2px); }
}
.elf-new:active { transform: translateY(1px) scale(0.98); }
.elf-startover {
  background: rgba(255,255,255,0.08); color: #e2e8f0;
  font-family: var(--body); font-weight: 800; font-size: 16px;
  border: 1px solid rgba(255,255,255,0.16); border-radius: 999px; padding: 14px 26px; cursor: pointer; transition: background .15s;
}
@media (hover: hover) and (pointer: fine) {
  .elf-startover:hover { background: rgba(255,255,255,0.14); }
}
.elf-startover:active { background: rgba(255,255,255,0.14); }

@keyframes elfPop { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes elfPopBounce { 0% { transform: scale(.4) rotate(-6deg); opacity: 0; } 60% { transform: scale(1.08) rotate(2deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes elfFloaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

@media (max-width: 620px) {
  .elf-builder { grid-template-columns: 1fr; }
  .elf-preview { max-width: 260px; margin: 0 auto; }
  .elf-name { font-size: 46px; }
  .elf-hohoho { font-size: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .elf-intro, .elf-intro-ico, .elf-reveal-head, .elf-avatar { animation: none; }
}

/* ---------------- SANTA'S JOKE SHOW ---------------- */
.jokes-stage {
  /* z-index:0 makes this a stacking CONTEXT, not just a positioned box. Without
     it the stage is position:relative/z-index:auto, so its whole internal ladder
     (aurora 1 ... valance 8, bubble 9, mute 10, start 11) competes directly with
     .np-win-bar's z-index:5 in the window's stacking context — and everything
     from 6 up paints OVER the Back to Activities bar as the stage scrolls under
     it. Containing the ladder here fixes every child at once, present and
     future, rather than re-tuning individual z-indexes. overflow:hidden already
     clips these children to the stage, so nothing is lost by containing them. */
  position: relative; z-index: 0; height: 478px; margin-top: 4px;
  border-radius: 16px 16px 12px 12px; overflow: hidden;
  border: 1px solid rgba(0,0,0,0.5); box-shadow: 0 34px 80px rgba(0,0,0,0.55);
  background: linear-gradient(180deg,#0c2436 0%, #0a1c2b 42%, #0e2c24 100%);
}
.jk-aurora { position: absolute; left: -10%; width: 120%; z-index: 1; pointer-events: none; }
.jk-aurora--1 { top: -20px; height: 190px; filter: blur(36px); opacity: 0.55; background: linear-gradient(90deg,transparent,#1fae5c 25%,#2fd6c0 50%,#7bd3ff 72%,transparent); animation: jkAurora 9s ease-in-out infinite; }
.jk-aurora--2 { top: 14px; height: 140px; filter: blur(44px); opacity: 0.33; background: linear-gradient(90deg,transparent,#7b3fb0 30%,#2f6fed 60%,transparent); animation: jkAurora 12s ease-in-out infinite reverse; }
.jk-moon { position: absolute; top: 38px; right: 120px; width: 52px; height: 52px; border-radius: 50%; background: radial-gradient(circle at 35% 35%, #fff, #e6eefc 60%, #cdd9ee); box-shadow: 0 0 40px rgba(230,238,252,0.5); z-index: 1; }
.jk-stars { position: absolute; inset: 0; pointer-events: none; z-index: 1; }
.jk-star { position: absolute; border-radius: 50%; background: #fff; box-shadow: 0 0 6px rgba(255,255,255,0.8); animation: jkTwinkle 3s ease-in-out infinite; }
.jk-hills { position: absolute; bottom: 120px; left: 0; width: 100%; height: 220px; z-index: 1; }
.jk-floor { position: absolute; bottom: 0; left: 0; width: 100%; height: 190px; z-index: 2; overflow: hidden; }
.jk-floor-boards { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%) perspective(620px) rotateX(61deg); transform-origin: bottom center; width: 170%; height: 300px; background: repeating-linear-gradient(90deg,#6e4526 0 46px,#5c3a1f 46px 49px); box-shadow: inset 0 26px 50px rgba(0,0,0,0.45), inset 0 -10px 30px rgba(0,0,0,0.4); }
.jk-floor-lip { position: absolute; bottom: 0; left: 0; width: 100%; height: 40px; background: linear-gradient(180deg,#4a2e17,#331e0e); border-top: 2px solid rgba(0,0,0,0.35); box-shadow: 0 -3px 10px rgba(0,0,0,0.4); }
.jk-spot { position: absolute; left: 50%; bottom: 20px; width: 380px; height: 400px; transform: translateX(-50%); background: radial-gradient(ellipse 46% 60% at 50% 74%, rgba(244,212,122,0.5), rgba(244,212,122,0.1) 46%, transparent 70%); animation: jkSpot 5s ease-in-out infinite; pointer-events: none; z-index: 3; }
.jk-santa { position: absolute; left: 50%; bottom: 58px; z-index: 4; transform: translateX(calc(-50% - 540px)); transition: transform 4.6s cubic-bezier(.4,0,.3,1); }
.jk-santa.at-mic { transform: translateX(-50%); }
.jk-santa-inner { animation: jkFloaty 4.5s ease-in-out infinite; }
.jk-santa-inner.walking { animation: jkWalkbob 0.5s ease-in-out infinite; }
.jk-santa-inner.jolly { animation: jkJolly 0.8s ease-in-out infinite; }
.jk-santa-inner.talking { animation: jkFloaty 2.2s ease-in-out infinite; }
.jk-santa-inner svg { display: block; }
.jk-santa-img { display: block; width: 190px; height: auto; filter: drop-shadow(0 16px 20px rgba(0,0,0,0.5)); }
.jk-tree { position: absolute; left: 16%; bottom: 88px; z-index: 3; transform: scale(0.86); transform-origin: bottom; }
.jk-gifts { position: absolute; right: 17%; bottom: 86px; z-index: 3; transform: scale(0.86); transform-origin: bottom; }
.jk-tree svg, .jk-gifts svg, .jk-sleigh svg { display: block; }
.jk-sleigh { position: absolute; top: 74px; left: 0; z-index: 1; animation: jkFlyby 17s linear 2s infinite; }
.jk-santa-inner.talking .jk-mouth,
.jk-santa-inner.jolly .jk-mouth { animation: jkTalk 0.32s ease-in-out infinite; transform-box: view-box; transform-origin: 100px 122px; }
.jk-santa-inner.jolly .jk-arm { animation: jkWave 0.6s ease-in-out infinite; transform-box: view-box; transform-origin: 130px 128px; }
.jk-mic { position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%); z-index: 5; }
.jk-mic svg { display: block; }
.jk-footlights { position: absolute; left: 0; bottom: 6px; width: 100%; display: flex; justify-content: space-between; align-items: flex-end; padding: 0 60px; z-index: 6; pointer-events: none; }
.jk-bulb { position: relative; width: 22px; height: 28px; }
.jk-bulb-base { position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 20px; height: 14px; border-radius: 10px 10px 3px 3px; background: linear-gradient(180deg,#3a4250,#20262f); }
.jk-bulb-glow { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 14px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #fff6d8, #f4d47a 60%, #e0952b); box-shadow: 0 0 15px 4px rgba(244,212,122,0.65); animation: jkSpot 3.4s ease-in-out infinite; }
.jk-curtain { position: absolute; top: 0; height: 100%; width: 13%; z-index: 7; }
.jk-curtain--l { left: 0; background: repeating-linear-gradient(90deg,rgba(0,0,0,0.34) 0 7px,rgba(255,255,255,0.06) 7px 13px,transparent 13px 30px), linear-gradient(90deg,#5a0c14,#9a1b28 58%,#6e0f18); box-shadow: 14px 0 34px rgba(0,0,0,0.5); border-right: 3px solid rgba(244,212,122,0.5); }
.jk-curtain--r { right: 0; background: repeating-linear-gradient(90deg,transparent 0 17px,rgba(0,0,0,0.34) 17px 24px,rgba(255,255,255,0.06) 24px 30px), linear-gradient(90deg,#6e0f18,#9a1b28 42%,#5a0c14); box-shadow: -14px 0 34px rgba(0,0,0,0.5); border-left: 3px solid rgba(244,212,122,0.5); }
.jk-valance { position: absolute; top: 0; left: 0; width: 100%; z-index: 8; filter: drop-shadow(0 6px 10px rgba(0,0,0,0.45)); }
.jk-valance svg { display: block; }
.jk-bubblewrap { position: absolute; top: 66px; left: 50%; transform: translateX(-50%); width: 72%; z-index: 9; }
.jk-bubble {
  position: relative; max-width: 430px; margin: 0 auto;
  background: #fff; color: #182030;
  font-family: var(--body); font-weight: 800; font-size: 19px; line-height: 1.34;
  padding: 16px 24px; border-radius: 24px; text-align: center;
  border: 2px solid #efe3c0; box-shadow: 0 18px 38px rgba(0,0,0,0.45);
  animation: jkBubblePop 0.42s cubic-bezier(.2,1.5,.35,1) both;
}
/* comic speech-bubble tail: outline triangle behind, white triangle in front */
.jk-bubble::before {
  content: ""; position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  border-left: 15px solid transparent; border-right: 15px solid transparent; border-top: 18px solid #efe3c0;
}
.jk-bubble::after {
  content: ""; position: absolute; bottom: -13px; left: 50%; transform: translateX(-50%);
  border-left: 12px solid transparent; border-right: 12px solid transparent; border-top: 14px solid #fff;
}
.jk-bubble[hidden] { display: none; }
@keyframes jkBubblePop { 0% { transform: scale(0.7) translateY(8px); opacity: 0; } 100% { transform: scale(1) translateY(0); opacity: 1; } }

.jk-mute {
  position: absolute; top: 10px; right: 12px; z-index: 10;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  border: 1px solid rgba(244,212,122,0.5); background: rgba(0,0,0,0.45); color: #f4d47a;
  font-size: 17px; line-height: 1; display: grid; place-items: center;
  transition: background .15s;
}
@media (hover: hover) and (pointer: fine) {
  .jk-mute:hover { background: rgba(0,0,0,0.62); }
}
.jk-mute:active { background: rgba(0,0,0,0.62); }
.jk-mute.is-muted { color: #9fb4ab; border-color: rgba(255,255,255,0.2); }

/* "Let's Go!" start gate — sits over the drawn stage before Santa enters */
.jk-start { position: absolute; inset: 0; z-index: 11; display: grid; place-items: center; background: rgba(6,20,28,0.3); }
.jk-start[hidden] { display: none; }
.jk-start-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 18px 42px; border: none; border-radius: 999px; cursor: pointer;
  font-family: var(--body); font-weight: 900; font-size: 22px; color: #fff; letter-spacing: 0.3px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 14px 34px rgba(0,0,0,0.5), inset 0 2px 0 rgba(255,255,255,0.25), 0 0 0 4px rgba(244,212,122,0.9);
  animation: jkGoPulse 1.6s ease-in-out infinite;
}
@media (hover: hover) and (pointer: fine) {
  .jk-start-btn:hover { filter: brightness(1.06); transform: translateY(-2px); }
}
.jk-start-btn:active { filter: brightness(1.06); }
@keyframes jkGoPulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Showtime flourish: brighter, faster-pulsing lights while the entrance
   stinger plays and Santa makes his entrance. */
.jokes-stage.is-showtime .jk-spot { animation-duration: 1.3s; filter: brightness(1.35); }
.jokes-stage.is-showtime .jk-bulb-glow { animation-duration: 0.9s !important; }
.jokes-stage.is-showtime .jk-aurora--1 { animation-duration: 4.5s; opacity: 0.75; }
.jokes-stage.is-showtime .jk-aurora--2 { animation-duration: 6s; opacity: 0.5; }
@media (prefers-reduced-motion: reduce) {
  .jokes-stage.is-showtime .jk-spot,
  .jokes-stage.is-showtime .jk-aurora--1,
  .jokes-stage.is-showtime .jk-aurora--2 { animation: none; filter: none; opacity: inherit; }
}

.jokes-menu { margin-top: 26px; }
.jokes-menu-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; margin: 0 4px 14px; }
.jokes-menu-title { margin: 0; font-family: var(--display); font-style: italic; font-weight: 600; color: #fff; font-size: 24px; }
.jokes-status { margin: 0; color: #9fb4ab; font-family: var(--body); font-size: 14px; font-weight: 700; }
.jokes-deck { display: grid; gap: 10px; }
.jk-joke {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 15px 18px; border-radius: 14px; cursor: pointer;
  font-family: var(--body); font-weight: 700; font-size: 16px; transition: transform .15s, border-color .15s, background .15s, box-shadow .15s;
  border: 2px solid rgba(255,255,255,0.1); background: rgba(18,34,44,0.72); color: #cfe0d8; box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
@media (hover: hover) and (pointer: fine) {
  .jk-joke:hover:not(:disabled) { border-color: rgba(255,255,255,0.25); transform: translateY(-1px); }
}
.jk-joke:active:not(:disabled) { border-color: rgba(255,255,255,0.25); transform: scale(0.98); }
.jk-joke:disabled { cursor: default; }
.jk-joke.is-active { border-color: var(--gold-200); background: rgba(244,212,122,0.14); color: #fff; box-shadow: 0 8px 22px rgba(244,212,122,0.18); }
.jk-joke-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; font-size: 14px; background: rgba(160,31,44,0.95); color: #fff; }
.jk-joke.is-active .jk-joke-badge { background: linear-gradient(180deg,#f4d47a,#d9ad46); color: #3a2c07; }
.jk-joke-q { flex: 1; }
.jk-joke-chevron { font-size: 15px; opacity: 0.7; }
.jk-joke.entering { animation: jkPop 0.4s cubic-bezier(.2,1.4,.4,1) both; }

@keyframes jkAurora { 0%,100% { transform: translateX(-4%) scaleY(1); } 50% { transform: translateX(4%) scaleY(1.12); } }
@keyframes jkSpot { 0%,100% { opacity: 0.55; } 50% { opacity: 0.85; } }
@keyframes jkFloaty { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes jkWalkbob { 0%,100% { transform: translateY(0) rotate(-1.2deg); } 50% { transform: translateY(-6px) rotate(1.2deg); } }
@keyframes jkJolly { 0%,100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
@keyframes jkJollyShow { 0%,100% { transform: rotate(-4deg) translateY(0); } 50% { transform: rotate(4deg) translateY(-7px); } }
.jokes-stage.is-showtime .jk-santa-inner.jolly { animation: jkJollyShow 0.75s ease-in-out infinite; }

/* Entrance flourishes on Santa's image: a squash-bounce landing when he
   arrives, and two alternating "hype pop" bursts while the stinger keeps
   playing. All transform-only, no new art. */
@keyframes jkLanding { 0% { transform: scale(1); } 32% { transform: scale(1.14, 0.84); } 58% { transform: scale(0.94, 1.08); } 78% { transform: scale(1.03, 0.98); } 100% { transform: scale(1); } }
@keyframes jkHypePulse { 0% { transform: scale(1) rotate(0deg); } 30% { transform: scale(1.09) rotate(-3deg); } 60% { transform: scale(1.04) rotate(2deg); } 100% { transform: scale(1) rotate(0deg); } }
@keyframes jkHypePulseBig { 0% { transform: scale(1) rotate(0deg) translateY(0); } 30% { transform: scale(1.15) rotate(4deg) translateY(-9px); } 60% { transform: scale(1.05) rotate(-3deg) translateY(2px); } 100% { transform: scale(1) rotate(0deg) translateY(0); } }
.jk-santa-img.landing { animation: jkLanding 0.6s cubic-bezier(.3,1.6,.4,1); }
.jk-santa-img.hype { animation: jkHypePulse 0.55s ease-out; }
.jk-santa-img.hype-big { animation: jkHypePulseBig 0.6s ease-out; }

/* Mic-stand nudge, synced to each hype pop */
@keyframes jkMicNudge { 0% { transform: translateX(-50%) rotate(0deg); } 30% { transform: translateX(-50%) rotate(-8deg); } 60% { transform: translateX(-50%) rotate(5deg); } 100% { transform: translateX(-50%) rotate(0deg); } }
.jk-mic.nudge { animation: jkMicNudge 0.4s ease-out; transform-origin: 50% 100%; }

/* Confetti/spark burst overlay, triggered on arrival and each hype pop */
.jk-burst { position: absolute; inset: 0; z-index: 6; pointer-events: none; overflow: hidden; }
.jk-burst-bit { position: absolute; left: 50%; bottom: 150px; width: 7px; height: 7px; border-radius: 2px; animation: jkBurstFly 0.9s ease-out forwards; }
@keyframes jkBurstFly {
  0% { transform: translate(-50%, 0) scale(0.6) rotate(0deg); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, -60px)) scale(1) rotate(220deg); opacity: 0; }
}
@keyframes jkTwinkle { 0%,100% { opacity: 0.2; transform: scale(0.7); } 50% { opacity: 1; transform: scale(1.15); } }
@keyframes jkTalk { 0%,100% { transform: scaleY(0.5); } 50% { transform: scaleY(1.05); } }
@keyframes jkWave { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(14deg); } }
@keyframes jkPop { 0% { transform: scale(0.4) rotate(-5deg); opacity: 0; } 60% { transform: scale(1.06) rotate(1deg); } 100% { transform: scale(1) rotate(0); opacity: 1; } }
@keyframes jkFlyby { from { transform: translateX(-260px); } to { transform: translateX(980px); } }

@media (max-width: 620px) {
  .jokes-stage { height: 360px; }
  .jk-moon { right: 60px; top: 26px; width: 40px; height: 40px; }
  .jk-footlights { padding: 0 24px; }
  .jokes-menu-title { font-size: 20px; }

  /* This tier took 118px off the stage but left Santa and the bubble at their
     desktop sizes. Santa is anchored to the floor, so the shorter stage pushed
     his hat top up to exactly 66px — the bubble's top — and every joke landed
     across his face.

     Shrinking him is half of it. The other half is anchoring the bubble by its
     BOTTOM: a longer joke then grows upward into empty sky instead of downward
     over him, so no joke length can reproduce this. 246px is measured, not
     guessed — he stands 192px tall on a 50px plinth and his face starts about
     an eighth of the way down from the hat, putting the tail tip on the hat
     brim. Covering the pointed hat is fine; covering the face is not. */
  .jk-santa-img { width: 155px; }
  .jk-santa { bottom: 50px; }
  .jk-bubblewrap { top: auto; bottom: 246px; width: 80%; }
  .jk-bubble { font-size: 17px; padding: 13px 18px; }
}
/* Small phones (iPhone SE/mini, 320-380px): the 620px tier alone still
   crowds the tree/gifts/Santa/bubble into a narrow stage, so shrink further. */
@media (max-width: 380px) {
  .jokes-stage { height: 300px; }
  /* Same bottom-anchored bubble as the 620 tier, re-measured for a 161px-tall
     Santa on a 46px plinth. This tier was overlapping his face too — by less,
     because it at least shrank him, but a two-line joke still reached ~48px
     past the hat brim. */
  .jk-santa-img { width: 130px; }
  .jk-santa { bottom: 46px; }
  .jk-tree, .jk-gifts { transform: scale(0.62); }
  .jk-tree { left: 6%; bottom: 78px; }
  .jk-gifts { right: 7%; bottom: 76px; }
  .jk-bubblewrap { top: auto; bottom: 212px; width: 84%; }
  .jk-bubble { padding: 12px 16px; font-size: 16px; }
  .jk-mic { bottom: 22px; }
  .jk-mic svg { width: 36px; height: 68px; }
  .jk-footlights { padding: 0 14px; }
  .jk-moon { right: 40px; top: 18px; width: 30px; height: 30px; }
  .jk-joke { padding: 12px 14px; font-size: 14px; gap: 10px; }
  .jk-start-btn { padding: 14px 30px; font-size: 18px; }
}
/* Landscape phones (844×390 and kin): the width-keyed tiers above never fire —
   a landscape phone is "desktop" wide — so the 478px stage is taller than the
   whole viewport. Size the stage from the small viewport height, shrink the
   set to the small-phone scale, and move the bubble into the wide-open sky
   BESIDE Santa: at ~240px of stage there is no headroom left above him. */
@media (orientation: landscape) and (max-height: 500px) {
  .jokes-stage { height: min(478px, calc(100vh - 150px)); height: min(478px, calc(100dvh - 150px)); min-height: 210px; }
  .jk-santa-img { width: 130px; }
  .jk-santa { bottom: 40px; }
  .jk-tree, .jk-gifts { transform: scale(0.62); }
  .jk-tree { left: 5%; bottom: 60px; }
  .jk-gifts { right: 5%; bottom: 58px; }
  .jk-bubblewrap { top: 10px; bottom: auto; left: 6%; transform: none; width: 42%; }
  .jk-bubble { padding: 10px 14px; font-size: 15px; }
  .jk-mic { bottom: 18px; }
  .jk-mic svg { width: 36px; height: 68px; }
  .jk-moon { right: 40px; top: 12px; width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .jk-aurora, .jk-spot, .jk-santa-inner, .jk-star, .jk-bulb-glow, .jk-sleigh,
  .jk-bubble, .jk-joke.entering, .jk-start-btn,
  .jk-santa-img.hype, .jk-santa-img.hype-big, .jk-santa-img.landing,
  .jk-mic.nudge, .jk-burst-bit { animation: none; }
  .jk-santa { transition: none; }
  .jk-burst-bit { display: none; }
}

/* Joke Show sound controls use the same device-consistent SVG treatment as
   the map and Polar Post rather than platform-specific speaker emoji. */
.jk-mute svg {
  width: 24px; height: 24px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.jk-mute .ico-off { display: none; }
.jk-mute.is-muted .ico-on { display: none; }
.jk-mute.is-muted .ico-off { display: block; }
.jk-skip {
  position: absolute; top: 10px; left: 12px; z-index: 10;
  min-height: 44px; padding: 9px 15px;
  border: 1px solid rgba(244,212,122,.58); border-radius: 999px;
  color: #f4d47a; background: rgba(0,0,0,.58);
  font-family: var(--body); font-size: 14px; font-weight: 800;
  cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.jk-skip[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .jk-skip:hover { background: rgba(0,0,0,.78); }
}
.jk-skip:active { background: rgba(0,0,0,.78); }
.jk-skip:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

/* ============================================================
   BOUNDED SANTA'S JOKE SHOW
   The stage remains continuously visible. Only the joke deck
   scrolls, with portrait devices stacked and wide devices split.
   ============================================================ */
.np-win.np-win--jokes {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.np-win.np-win--jokes .np-win-bar {
  position: relative;
  top: auto;
}
.np-win.np-win--jokes .np-win-body {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}
#jokes.in-window {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: minmax(220px, 56%) minmax(0, 1fr);
  gap: clamp(8px, 1.2vw, 16px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
.np-win--jokes .jokes-stage {
  box-sizing: border-box;
  align-self: stretch;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
}
.np-win--jokes .jokes-menu {
  box-sizing: border-box;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 14px 10px 14px 14px;
  overflow: hidden;
  border: 1px solid rgba(244,212,122,.24);
  border-radius: 18px;
  background: rgba(8,22,34,.72);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05);
}
.np-win--jokes .jokes-menu-head {
  align-items: flex-start;
  margin: 0 4px 12px 0;
}
.np-win--jokes .jokes-status {
  line-height: 1.35;
}
.np-win--jokes .jokes-deck {
  min-width: 0;
  min-height: 0;
  align-content: start;
  grid-auto-rows: minmax(56px, auto);
  padding-right: 4px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #d6b553 rgba(255,255,255,.08);
  -webkit-overflow-scrolling: touch;
}
.np-win--jokes .jokes-deck::-webkit-scrollbar { width: 12px; }
.np-win--jokes .jokes-deck::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.np-win--jokes .jokes-deck::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: #d6b553;
  border: 3px solid #10283a;
  border-radius: 999px;
}
.np-win--jokes .jokes-deck:focus-visible {
  outline: 3px solid rgba(244,212,122,.78);
  outline-offset: -3px;
}
.np-win--jokes .jk-joke {
  box-sizing: border-box;
  min-height: 56px;
}

@media (min-aspect-ratio: 4 / 3) {
  #jokes.in-window {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .62fr);
    grid-template-rows: minmax(0, 1fr);
  }
  .np-win--jokes .jokes-stage {
    align-self: center;
    height: auto;
    max-height: 100%;
    aspect-ratio: 924 / 478;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .np-win.np-win--jokes .np-win-bar {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .np-win.np-win--jokes .np-win-body { padding: 7px; }
  #jokes.in-window { gap: 7px; }
  .np-win--jokes .jokes-menu {
    padding: 8px 6px 8px 10px;
    border-radius: 14px;
  }
  .np-win--jokes .jokes-menu-head { margin-bottom: 7px; }
  .np-win--jokes .jokes-menu-title { font-size: 18px; }
  .np-win--jokes .jokes-status { font-size: 12px; }
  .np-win--jokes .jk-joke {
    min-height: 44px;
    padding: 8px 10px;
  }
}

/* ---------------- HIDDEN REINDEER GAME ---------------- */
.game-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 14px; gap: 12px; flex-wrap: wrap;
}
.gh-status {
  display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap;
}
.gb-score {
  font-family: var(--mono); font-size: 13px;
  color: var(--gold-200); letter-spacing: 0.08em;
}
.gb-timer {
  font-family: var(--mono); font-size: 13px;
  color: rgba(255,255,255,0.6); letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}
.gb-timer::before { content: '⏱ '; opacity: 0.7; margin-right: 1px; }
.gb-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.gb-hint, .gb-reset {
  font-family: var(--body); font-size: 13px; font-weight: 600;
  color: #b9cdd6; background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 9px 16px; border-radius: 999px;
  cursor: pointer; min-height: 40px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s, border-color .2s;
}
.gb-hint { color: var(--gold-200); border-color: rgba(200,162,74,0.3); }
@media (hover: hover) and (pointer: fine) {
  .gb-hint:hover, .gb-reset:hover { background: rgba(255,255,255,0.16); }
}
.gb-hint:active, .gb-reset:active { background: rgba(255,255,255,0.16); }

.game-subtitle {
  font-family: var(--display); font-style: italic;
  font-size: 15px; color: var(--gold-200);
  margin: 0 0 12px; text-align: center;
  opacity: 0.9; letter-spacing: 0.02em;
}

.game-stage {
  position: relative; aspect-ratio: 3/2;
  border-radius: var(--r-md); overflow: hidden;
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: 0 12px 30px -16px rgba(0,0,0,0.6);
  background: #0d1d36;
}
.reindeer-scene { display: block; width: 100%; height: 100%; position: relative; z-index: 1; }
.game-stage .game-snow {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none; z-index: 2;
}
/* Landscape phones: a 3/2 stage at full phone width is taller than the
   viewport — you'd hunt while scrolling. Cap the height via the width (aspect
   ratio preserved, centred) and drop the subtitle so board + score fit
   together. Fullscreen mode keeps its own sizing (higher specificity). */
@media (orientation: landscape) and (max-height: 520px) {
  .game-subtitle { display: none; }
  .game-head { margin-bottom: 8px; }
  .game-stage {
    width: min(100%, calc((100vh - 160px) * 1.5));
    width: min(100%, calc((100dvh - 160px) * 1.5));
    margin-left: auto; margin-right: auto;
  }
}

/* Hidden reindeer groups inside the SVG */
.reindeer-scene .hidden-deer { cursor: pointer; outline: none; }
.reindeer-scene .hidden-deer .d-peek { transition: filter .25s; }
@media (hover: hover) and (pointer: fine) {
  .reindeer-scene .hidden-deer:hover .d-peek {
    filter: brightness(1.7) drop-shadow(0 0 5px rgba(255,255,255,0.65));
  }
}
.reindeer-scene .hidden-deer:focus-visible .d-peek {
  filter: brightness(1.7) drop-shadow(0 0 5px rgba(255,255,255,0.65));
}
.reindeer-scene .hidden-deer.hinted .d-peek {
  filter: drop-shadow(0 0 14px var(--gold-200)) brightness(2.4);
  animation: deerHintPulse 1.6s ease;
}
@keyframes deerHintPulse {
  0%, 100% { filter: brightness(1.3); }
  50% { filter: drop-shadow(0 0 18px var(--gold-200)) brightness(2.6); }
}

/* Wave: subtle "did I just see something?" twitch on a random unfound deer */
.reindeer-scene .hidden-deer.waving .d-peek {
  animation: deerWave 1.1s ease-out;
  transform-box: fill-box;
  transform-origin: center;
}
@keyframes deerWave {
  0%   { filter: brightness(1); transform: translateX(0); }
  20%  { filter: brightness(1.8) drop-shadow(0 0 6px rgba(255,255,255,0.5)); transform: translateX(2px); }
  40%  { transform: translateX(-2px); }
  60%  { filter: brightness(1.5); transform: translateX(1.5px); }
  80%  { transform: translateX(-1px); }
  100% { filter: brightness(1); transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .reindeer-scene .hidden-deer.waving .d-peek { animation: none; }
}

.reindeer-scene .hidden-deer .d-full {
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center bottom;
  transform: translateY(6px) scale(0.6);
  transition: opacity .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1);
}
.reindeer-scene .hidden-deer.found .d-peek { opacity: 0; transition: opacity .25s ease; }
.reindeer-scene .hidden-deer.found .d-full { opacity: 1; transform: translateY(0) scale(1); }
.reindeer-scene .hidden-deer.found { pointer-events: none; }

/* Animated scene parts */
.reindeer-scene .twinkle { animation: deerTwinkle 3s ease-in-out infinite; }
.reindeer-scene .twinkle.t2 { animation-delay: 0.8s; }
.reindeer-scene .twinkle.t3 { animation-delay: 1.6s; }
.reindeer-scene .twinkle.t4 { animation-delay: 2.4s; }
@keyframes deerTwinkle { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }

.reindeer-scene .cabin-glow { animation: deerCabinFlicker 4s ease-in-out infinite; }
@keyframes deerCabinFlicker {
  0%, 100% { opacity: 0.85; }
  35% { opacity: 1; }
  60% { opacity: 0.9; }
}

.reindeer-scene .rudolph-glow {
  animation: deerNoseGlow 1.8s ease-in-out infinite;
  transform-box: fill-box; transform-origin: center;
}
@keyframes deerNoseGlow {
  0%, 100% { opacity: 0.7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.4); }
}

@media (prefers-reduced-motion: reduce) {
  .reindeer-scene .twinkle,
  .reindeer-scene .cabin-glow,
  .reindeer-scene .rudolph-glow,
  .reindeer-scene .hidden-deer.hinted .d-peek { animation: none; }
}

/* Banner that pops over the scene when you find one */
.found-banner {
  position: absolute; left: 50%; bottom: 10px;
  transform: translate(-50%, 14px); z-index: 3;
  background: linear-gradient(180deg, rgba(212, 175, 84, 0.96), rgba(160, 122, 50, 0.96));
  color: var(--forest-950);
  padding: 6px 14px; border-radius: 999px;
  font-family: var(--body); font-size: 12px;
  line-height: 1.3;
  box-shadow: 0 8px 18px -6px rgba(0,0,0,0.45);
  opacity: 0; transition: opacity .35s, transform .35s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none; max-width: 78%; text-align: center;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.found-banner.show { opacity: 1; transform: translate(-50%, 0); }
.found-banner strong {
  font-family: var(--display); font-weight: 600; font-size: 14px;
  margin-right: 4px;
}

/* Portraits progress row */
.rd-portraits {
  display: grid; grid-template-columns: repeat(9, 1fr); gap: 6px;
  margin-top: 14px;
}
.rd-portrait {
  display: flex; flex-direction: column; align-items: center;
  padding: 8px 4px; border-radius: 10px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.28);
  transition: color .35s, background .35s, transform .35s, border-color .35s;
}
.rd-portrait svg { width: 22px; height: 22px; display: block; }
.rd-portrait .rd-name {
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.04em; text-transform: uppercase;
  margin-top: 4px; opacity: 0.5; line-height: 1;
}
.rd-portrait.found {
  color: var(--gold-200);
  background: rgba(200,162,74,0.16);
  border-color: rgba(200,162,74,0.5);
  transform: scale(1.05);
}
.rd-portrait.found .rd-name { opacity: 1; color: var(--gold-200); }

/* Win panel */
.game-win {
  text-align: center; color: var(--gold-200);
  font-family: var(--display); font-size: 22px;
  margin-top: 16px; display: none;
}
.game-win.show {
  display: block;
  animation: deerWinPop 0.6s cubic-bezier(.34,1.56,.64,1);
}
.game-win .win-headline { margin-bottom: 14px; line-height: 1.25; }
.game-win .win-time {
  font-family: var(--body); font-size: 15px;
  color: #d7e6ee; margin-bottom: 16px;
  font-style: normal;
}
.game-win .win-time strong {
  font-family: var(--display); font-size: 24px;
  color: var(--gold-200); margin: 0 4px;
  font-style: italic;
}
.game-win .win-time .new-best {
  display: inline-block;
  background: linear-gradient(180deg, var(--berry), var(--berry-deep));
  color: #fff;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-family: var(--body); font-weight: 700;
  font-style: normal; letter-spacing: 0.04em;
  margin-left: 8px; vertical-align: middle;
  animation: newBestPulse 0.6s ease-in-out 0.2s 3;
  box-shadow: 0 6px 14px -4px rgba(204,74,160,0.5);
}
@keyframes newBestPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.12); }
}
@keyframes deerWinPop {
  0% { transform: scale(0.7); opacity: 0; }
  100% { transform: scale(1); opacity: 1; }
}

/* ---------------- MINI ACTIVITIES ---------------- */
.mini-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 22px;
}
.mini {
  padding: 24px; border-radius: var(--r-lg); text-align: center;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.07);
}
.mini .mi { width: 36px; height: 36px; margin: 0 auto 12px; color: var(--gold-200); }
.mini h4 {
  font-family: var(--display); font-size: 20px; color: #fff; margin: 0 0 4px;
}
.mini p { font-size: 13px; color: #b9cdd6; margin: 0; }

/* ---------------- PARENT NOTE ---------------- */
.parent-note {
  text-align: center; margin-top: 50px;
  font-size: 13px; color: #8fa8b3;
  font-family: var(--mono); letter-spacing: 0.06em; line-height: 1.75;
}
.parent-note a { color: var(--gold-200); text-underline-offset: 3px; }
.letter-consent a { color: var(--red); font-weight: 700; text-underline-offset: 2px; }

/* ---------------- AUDIO TOGGLE ---------------- */
.audio-toggle {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff; font-size: 14px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s, transform .2s;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .audio-toggle:hover { background: rgba(0,0,0,0.65); transform: scale(1.06); }
}
.audio-toggle:active { background: rgba(0,0,0,0.65); transform: scale(0.94); }
.audio-toggle.muted { color: rgba(255,255,255,0.4); }

/* ---------------- EXPAND / FULLSCREEN TOGGLE ---------------- */
.expand-toggle {
  position: absolute; top: 10px; right: 56px; z-index: 4;
  width: 36px; height: 36px;
  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 50%;
  color: #fff; font-size: 16px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .2s, transform .2s;
  line-height: 1;
}
@media (hover: hover) and (pointer: fine) {
  .expand-toggle:hover { background: rgba(0,0,0,0.65); transform: scale(1.06); }
}
.expand-toggle:active { background: rgba(0,0,0,0.65); transform: scale(0.94); }

/* "Full page" inline link in the subtitle */
.game-subtitle {
  display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap;
}
.hunt-link-inline {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.08em; color: rgba(255,255,255,0.55);
  text-decoration: none; text-transform: uppercase;
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.18);
  font-style: normal;
  transition: color .2s, border-color .2s, background .2s;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
@media (hover: hover) and (pointer: fine) {
  .hunt-link-inline:hover {
    color: var(--gold-200);
    border-color: var(--gold-200);
    background: rgba(200,162,74,0.08);
  }
}
.hunt-link-inline:active {
  color: var(--gold-200);
  border-color: var(--gold-200);
  background: rgba(200,162,74,0.08);
}

/* ---------------- FULLSCREEN MODE ---------------- */
body.deer-fullscreen { overflow: hidden; }
.game-frame.is-fullscreen {
  position: fixed; inset: 0; z-index: 99999;
  background: linear-gradient(180deg, #0c1b2e 0%, #16273e 60%, #1c3a4d 100%);
  padding: max(14px, env(safe-area-inset-top)) max(14px, env(safe-area-inset-right)) max(14px, env(safe-area-inset-bottom)) max(14px, env(safe-area-inset-left));
  display: flex; flex-direction: column;
  border-radius: 0;
  animation: fsFadeIn .25s ease-out;
}
@keyframes fsFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.game-frame.is-fullscreen .game-head { margin-bottom: 8px; flex-shrink: 0; }
.game-frame.is-fullscreen .game-subtitle { margin-bottom: 10px; flex-shrink: 0; }
.game-frame.is-fullscreen .game-stage {
  aspect-ratio: 3/2;
  width: min(100%, calc((100vh - 140px) * 1.5));
  width: min(100%, calc((100dvh - 140px) * 1.5));
  max-width: 100%;
  height: auto;
  min-height: 0;
  flex: 0 0 auto;
  margin: auto;
  border-radius: 12px;
}
.game-frame.is-fullscreen .reindeer-scene {
  width: 100%; height: 100%;
}
.game-frame.is-fullscreen .hunt-link-inline { display: none; }

/* ---------------- SHOOTING STARS ---------------- */
@keyframes shootStreak {
  0%   { opacity: 0; transform: translate(0, 0); }
  10%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--ssx, 100px), var(--ssy, 50px)); }
}
.shooting-star {
  animation: shootStreak 1.4s ease-out forwards;
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.7));
  pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .shooting-star { display: none; }
}

/* ---------------- REINDEER STABLE ---------------- */
.stable {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: var(--r-md);
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
}
.stable-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 12px; gap: 12px; flex-wrap: wrap;
}
.stable-head h4 {
  font-family: var(--display); font-size: 17px; font-weight: 600;
  color: var(--gold-200); margin: 0; letter-spacing: 0.02em;
}
.stable-clear {
  font-family: var(--body); font-size: 12px; font-weight: 500;
  color: rgba(255,255,255,0.55);
  background: transparent; border: 1px solid rgba(255,255,255,0.18);
  padding: 6px 12px; border-radius: 999px;
  cursor: pointer; min-height: 32px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: color .2s, background .2s, border-color .2s;
}
@media (hover: hover) and (pointer: fine) {
  .stable-clear:hover { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
}
.stable-clear:active { color: #fff; background: rgba(255,255,255,0.08); border-color: rgba(255,255,255,0.3); }
.stable-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
  margin-bottom: 12px;
}
.stable-scene {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 12px; border-radius: 8px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
  font-family: var(--body); font-size: 12px;
  color: rgba(255,255,255,0.65);
  transition: color .3s, background .3s, border-color .3s, transform .3s;
}
.stable-scene.complete {
  color: var(--gold-200);
  background: rgba(200,162,74,0.14);
  border-color: rgba(200,162,74,0.45);
}
.stable-scene .ss-name { font-weight: 500; }
.stable-scene .ss-progress {
  font-family: var(--mono); font-size: 11px;
  letter-spacing: 0.04em;
  display: inline-flex; align-items: center; gap: 6px;
}
.stable-scene .ss-best {
  font-family: var(--mono); font-size: 10px;
  color: rgba(255,255,255,0.45);
  padding: 2px 6px; border-radius: 999px;
  background: rgba(255,255,255,0.06);
  letter-spacing: 0.02em;
}
.stable-scene.complete .ss-best {
  color: var(--gold-deep);
  background: rgba(200,162,74,0.18);
}
.stable-summary {
  text-align: center; font-size: 13px;
  color: #b9cdd6; font-family: var(--body);
  padding-top: 6px;
  border-top: 1px dashed rgba(255,255,255,0.1);
}
.stable-summary strong {
  color: var(--gold-200); font-family: var(--display); font-size: 17px;
  margin: 0 3px;
}

/* ---------------- RESPONSIVE ---------------- */
@media (max-width: 900px) {
  .toy.span7, .toy.span5, .toy.span6 { grid-column: span 12; }
  .mini-row { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .np-hero { padding: 110px 0 70px; min-height: 60vh; min-height: 60dvh; }
  .np-section { padding: 64px 0; }
  .np-head { margin: 0 auto 36px; }
  .toy { padding: 24px; }
  .toy h3 { font-size: 24px; }
  .countdown { gap: 10px; margin: 30px 0 8px; }
  .cd-unit { width: 72px; padding: 14px 4px; }
  .cd-unit .n { font-size: 34px; }
  .cd-unit .l { font-size: 9px; }
  .letter-card { padding: 28px 22px 26px; }
  .letter-title { font-size: 27px; }
  .letter-stamp { top: 16px; right: 16px; width: 60px; height: 72px; }
  .letter textarea { font-size: 21px; line-height: 36px; min-height: 176px;
    background-image: repeating-linear-gradient(transparent, transparent 35px,
      rgba(150,110,60,0.28) 35px, rgba(150,110,60,0.28) 36px); }
  .mini-row { grid-template-columns: 1fr; gap: 12px; }
  .rd-portraits { grid-template-columns: repeat(9, 1fr); gap: 4px; }
  .rd-portrait { padding: 6px 2px; }
  .rd-portrait svg { width: 18px; height: 18px; }
  /* 9-across at phone widths can't fit legible (>=10px) labels; the icon
     fill conveys progress and the found-banner announces each name. */
  .rd-portrait .rd-name { display: none; }
  .found-banner { font-size: 11px; padding: 5px 12px; bottom: 8px; max-width: 84%; }
  .found-banner strong { font-size: 12px; }
  .game-subtitle { font-size: 13px; margin-bottom: 10px; }
  .gh-status { gap: 12px; }
  .gb-timer { font-size: 12px; }
  .game-win .win-time { font-size: 13px; margin-bottom: 12px; }
  .game-win .win-time strong { font-size: 19px; }
  .game-win .win-time .new-best { font-size: 11px; padding: 3px 10px; margin-left: 6px; }
  .ss-best { font-size: 9px; padding: 2px 5px; }
  .audio-toggle { width: 40px; height: 40px; top: 8px; right: 8px; font-size: 14px; }
  .expand-toggle { width: 40px; height: 40px; top: 8px; right: 56px; font-size: 15px; }
  .hunt-link-inline { font-size: 10px; padding: 3px 10px; }
  .game-frame.is-fullscreen { padding: 10px; }
  .stable { padding: 12px 14px; margin-top: 14px; }
  .stable-head h4 { font-size: 15px; }
  .stable-grid { grid-template-columns: 1fr 1fr; gap: 6px; }
  .stable-scene { padding: 7px 10px; font-size: 12px; }
  .stable-scene .ss-progress { font-size: 10px; }
  .stable-summary { font-size: 12px; }
  .stable-summary strong { font-size: 15px; }
  .parent-note { margin-top: 36px; }
}

/* ============================================================
   STAR CALLOUT — Daily Star Hunt HUD (video-game styled)
   ============================================================ */
.star-callout {
  position: relative;
  margin: 0 0 14px;
  border: 2px solid rgba(212, 175, 84, 0.55);
  border-radius: 10px;
  background:
    linear-gradient(135deg, rgba(20,30,60,0.95) 0%, rgba(30,20,60,0.95) 50%, rgba(20,30,60,0.95) 100%);
  box-shadow:
    0 0 0 1px rgba(212, 175, 84, 0.18),
    0 0 24px rgba(212, 175, 84, 0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
  overflow: hidden;
  font-family: var(--body);
  color: #fff;
  -webkit-user-select: none; user-select: none;
}
.star-callout::before {
  content: '';
  position: absolute;
  top: 0; left: -50%;
  width: 50%; height: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,220,130,0.12) 50%, transparent 100%);
  animation: starShimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}
.star-callout::after {
  /* faint scanline texture for arcade vibe */
  content: '';
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(0deg, transparent, transparent 3px,
    rgba(255,255,255,0.025) 3px, rgba(255,255,255,0.025) 4px);
  pointer-events: none;
  z-index: 1;
}
@keyframes starShimmer {
  0%   { transform: translateX(-100%); opacity: 0; }
  20%  { opacity: 1; }
  80%  { opacity: 1; }
  100% { transform: translateX(300%); opacity: 0; }
}

.sc-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 10px;
  padding: 6px 12px;
  background: linear-gradient(90deg, rgba(212,175,84,0.18), rgba(212,175,84,0.04));
  border-bottom: 1px solid rgba(212,175,84,0.3);
  font-family: var(--mono);
}
.sc-hd-label {
  flex: 1;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.2em; text-transform: uppercase;
  color: #f0d080;
  text-shadow: 0 0 8px rgba(240,208,128,0.5);
}
.sc-hd-admin {
  display: none;
  font-size: 9px; font-weight: 700;
  letter-spacing: 0.16em;
  padding: 2px 7px;
  background: #e84545; color: #fff;
  border-radius: 3px;
  animation: starAdminPulse 1.5s ease-in-out infinite;
}
@keyframes starAdminPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,69,69,0.7); }
  50%      { box-shadow: 0 0 8px 3px rgba(232,69,69,0); }
}
.sc-hd-reroll {
  display: none;
  font-family: inherit;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: 4px 9px;
  background: rgba(212,175,84,0.22);
  color: #ffe8b0;
  border: 1px solid rgba(212,175,84,0.55);
  border-radius: 4px;
  cursor: pointer;
  min-height: 24px;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  transition: background .15s, transform .15s, box-shadow .15s;
}
@media (hover: hover) and (pointer: fine) {
  .sc-hd-reroll:hover { background: rgba(212,175,84,0.4); box-shadow: 0 0 8px rgba(212,175,84,0.4); }
}
.sc-hd-reroll:active { transform: scale(0.95); }
.star-callout[data-admin="1"] .sc-hd-admin,
.star-callout[data-admin="1"] .sc-hd-reroll { display: inline-block; }

.sc-body {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 14px;
}
.sc-portrait {
  flex: 0 0 64px;
  width: 64px; height: 64px;
  background: radial-gradient(circle at center, rgba(212,175,84,0.25) 0%, rgba(212,175,84,0) 70%);
  border: 2px solid rgba(212,175,84,0.65);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  box-shadow: 0 0 14px rgba(212,175,84,0.3), inset 0 0 14px rgba(0,0,0,0.45);
}
.sc-portrait::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 1px dashed rgba(212,175,84,0.4);
  border-radius: 50%;
  animation: starRingSpin 14s linear infinite;
  pointer-events: none;
}
@keyframes starRingSpin { to { transform: rotate(360deg); } }
.sc-portrait svg {
  width: 54px; height: 54px; display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,0.5));
}
.sc-info { flex: 1; min-width: 0; }
.sc-label {
  font-family: var(--mono);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.22em; text-transform: uppercase;
  color: rgba(240,208,128,0.85);
  margin-bottom: 3px;
}
.sc-name {
  font-family: var(--body);
  font-size: 22px; font-weight: 800;
  letter-spacing: 0.04em; text-transform: uppercase;
  color: #fff;
  text-shadow:
    0 0 14px rgba(255,220,130,0.55),
    0 0 4px rgba(255,220,130,0.8),
    0 1px 0 rgba(0,0,0,0.5);
  line-height: 1.05;
}
.sc-status {
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 10.5px; font-weight: 500;
  color: rgba(255,255,255,0.82);
  letter-spacing: 0.06em; text-transform: uppercase;
}
.sc-arrow { color: var(--gold-200); font-weight: 700; margin-right: 3px; }

/* Found-today state — green-tinged */
.star-callout[data-state="found"] {
  border-color: rgba(127, 220, 144, 0.55);
  box-shadow:
    0 0 0 1px rgba(127,220,144,0.18),
    0 0 24px rgba(127,220,144,0.18),
    inset 0 1px 0 rgba(255,255,255,0.08);
}
.star-callout[data-state="found"] .sc-header {
  background: linear-gradient(90deg, rgba(127,220,144,0.18), rgba(127,220,144,0.04));
  border-bottom-color: rgba(127,220,144,0.3);
}
.star-callout[data-state="found"] .sc-hd-label {
  color: #a0e8b4;
  text-shadow: 0 0 8px rgba(127,220,144,0.5);
}
.star-callout[data-state="found"] .sc-portrait {
  border-color: rgba(127,220,144,0.65);
  box-shadow: 0 0 14px rgba(127,220,144,0.3), inset 0 0 14px rgba(0,0,0,0.45);
  background: radial-gradient(circle at center, rgba(127,220,144,0.22) 0%, rgba(127,220,144,0) 70%);
}
.star-callout[data-state="found"] .sc-portrait::before { border-color: rgba(127,220,144,0.45); }
.star-callout[data-state="found"] .sc-name {
  text-shadow:
    0 0 14px rgba(127,220,144,0.55),
    0 0 4px rgba(127,220,144,0.8),
    0 1px 0 rgba(0,0,0,0.5);
}
.star-callout[data-state="found"] .sc-label { color: rgba(160,232,180,0.85); }

/* Hidden Star group in the SVG */
.reindeer-scene .hidden-star { cursor: pointer; outline: none; }
.reindeer-scene .hidden-star .d-peek {
  transition: filter .25s;
  transform-box: fill-box;
  transform-origin: center;
}
@media (hover: hover) and (pointer: fine) {
  .reindeer-scene .hidden-star:hover .d-peek {
    filter: brightness(1.6) drop-shadow(0 0 6px rgba(255,220,130,0.85));
  }
}
.reindeer-scene .hidden-star:focus-visible .d-peek {
  filter: brightness(1.6) drop-shadow(0 0 6px rgba(255,220,130,0.85));
}
.reindeer-scene .hidden-star.found .d-peek {
  animation: starFoundPop 1s cubic-bezier(.34,1.56,.64,1) forwards;
  filter: drop-shadow(0 0 14px rgba(255,220,130,1));
}
@keyframes starFoundPop {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.45); }
  100% { transform: scale(1.18); }
}
.reindeer-scene .hidden-star.found { pointer-events: none; }

/* Star banner variant (overrides .found-banner gold styling) */
.found-banner.star {
  background: linear-gradient(135deg, rgba(42,24,64,0.95), rgba(106,44,138,0.95) 50%, rgba(42,24,64,0.95));
  border: 2px solid var(--berry);
  box-shadow: 0 0 26px rgba(255,122,216,0.5), 0 10px 24px -8px rgba(0,0,0,0.5);
  padding: 9px 16px;
  max-width: 88%;
  border-radius: 14px;
}
.found-banner.star strong {
  color: #fff;
  font-family: var(--body);
  font-weight: 800;
  font-size: 15px;
  letter-spacing: 0.06em;
  margin: 0;
  text-shadow: 0 0 10px var(--berry), 0 0 3px var(--berry);
  vertical-align: middle;
}
.found-banner.star .star-banner-tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.18em; text-transform: uppercase;
  background: var(--berry); color: #2a0a24;
  padding: 2px 8px; border-radius: 3px;
  margin-right: 9px; vertical-align: middle;
}

/* Star burst particles */
@keyframes starSparkBurst {
  0%   { transform: translate(var(--sx), var(--sy)) scale(0); opacity: 1; }
  20%  { transform: translate(var(--sx), var(--sy)) scale(1.4); opacity: 1; }
  100% { transform: translate(calc(var(--sx) + var(--dx)), calc(var(--sy) + var(--dy))) scale(0.4); opacity: 0; }
}
.reindeer-scene .star-spark {
  animation: starSparkBurst 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
  filter: drop-shadow(0 0 4px currentColor);
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .reindeer-scene .hidden-star.found .d-peek { animation: none; transform: scale(1.18); }
  .reindeer-scene .star-spark { display: none; }
  .star-callout::before { animation: none; }
  .sc-portrait::before { animation: none; }
  .sc-hd-admin { animation: none; }
}

/* Mobile breakpoint for the star callout + banner */
@media (max-width: 620px) {
  .star-callout { margin-bottom: 12px; }
  .sc-header { padding: 5px 10px; gap: 8px; }
  .sc-hd-label { font-size: 10px; letter-spacing: 0.16em; }
  .sc-hd-reroll { font-size: 9px; padding: 3px 7px; min-height: 22px; }
  .sc-hd-admin { font-size: 8px; padding: 2px 6px; }
  .sc-body { padding: 10px 11px; gap: 11px; }
  .sc-portrait { flex-basis: 50px; width: 50px; height: 50px; }
  .sc-portrait svg { width: 42px; height: 42px; }
  .sc-label { font-size: 9px; letter-spacing: 0.18em; }
  .sc-name { font-size: 17px; letter-spacing: 0.03em; }
  .sc-status { font-size: 10px; letter-spacing: 0.04em; }
  .found-banner.star { font-size: 11px; padding: 7px 13px; max-width: 92%; border-radius: 12px; }
  .found-banner.star strong { font-size: 13px; }
  .found-banner.star .star-banner-tag { font-size: 9px; padding: 2px 6px; margin-right: 7px; letter-spacing: 0.14em; }
}

/* ===== Banner hint (subtle nudge to tap portrait) ===== */
.found-banner .banner-hint {
  display: inline-block;
  margin-left: 10px;
  font-size: 11px;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.66);
  font-weight: 400;
}
@media (max-width: 620px) {
  .found-banner .banner-hint { display: none; }
}

/* ===== Found-portrait info dot + fact popover ===== */
.rd-portrait { position: relative; cursor: default; }
.rd-portrait.found { cursor: pointer; }
.rd-portrait.found:focus-visible { outline: 2px solid #ffd84a; outline-offset: 2px; }
.rd-info-dot {
  position: absolute; top: 3px; right: 3px;
  width: 13px; height: 13px; border-radius: 50%;
  background: linear-gradient(180deg, #ffd84a, #b58b3a);
  color: #2a1810; font-size: 9px; font-weight: 700;
  font-family: Georgia, serif; font-style: italic;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: scale(0.6);
  transition: opacity .25s, transform .25s;
  pointer-events: none;
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
.rd-portrait.found .rd-info-dot { opacity: 0.88; transform: scale(1); }
@media (hover: hover) and (pointer: fine) {
  .rd-portrait.found:hover .rd-info-dot { opacity: 1; transform: scale(1.14); }
}
.rd-portrait.popover-open .rd-info-dot { opacity: 1; transform: scale(1.14) rotate(180deg); }

.rd-fact-pop {
  position: absolute; left: 50%; bottom: calc(100% + 10px);
  transform: translateX(-50%);
  min-width: 200px; max-width: 280px;
  background: linear-gradient(180deg, #fdf6e2 0%, #f6ead0 100%);
  color: #1a3a2a;
  border: 2px solid #b58b3a;
  border-radius: 10px;
  padding: 12px 28px 12px 12px;
  box-shadow: 0 8px 22px rgba(0,0,0,0.55), 0 0 0 1px rgba(255,216,74,0.4);
  z-index: 50;
  animation: rdPopIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1) both;
  text-align: left;
  white-space: normal;
}
.rd-fact-pop::after {
  content: ''; position: absolute;
  top: 100%; left: 50%; transform: translateX(-50%);
  border: 8px solid transparent;
  border-top-color: #b58b3a;
}
.rd-fact-pop::before {
  content: ''; position: absolute;
  top: 100%; left: 50%; transform: translate(-50%, -3px);
  border: 6px solid transparent;
  border-top-color: #fdf6e2;
  z-index: 1;
}
.rd-fact-name {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 14px; font-weight: 700;
  letter-spacing: 0.05em;
  color: #a02828;
  margin-bottom: 4px;
}
.rd-fact-text {
  font-size: 13px; line-height: 1.45;
  color: #2a1810;
}
.rd-fact-close {
  position: absolute; top: 4px; right: 4px;
  width: 22px; height: 22px; border-radius: 50%;
  background: rgba(26, 69, 48, 0.12);
  border: none; cursor: pointer;
  color: #1a4530; font-size: 13px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
  transition: background .2s;
}
@media (hover: hover) and (pointer: fine) {
  .rd-fact-close:hover { background: rgba(26, 69, 48, 0.28); }
}
.rd-fact-close:active { background: rgba(26, 69, 48, 0.28); }

@keyframes rdPopIn {
  0%   { opacity: 0; transform: translateX(-50%) translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .rd-fact-pop { animation: none; }
  .rd-info-dot { transition: none; }
}

/* Edge portraits — pull the popover toward the center so it doesn't clip */
.rd-portrait:first-child .rd-fact-pop { left: 0; transform: translateX(0); }
.rd-portrait:first-child .rd-fact-pop::before,
.rd-portrait:first-child .rd-fact-pop::after { left: 22px; transform: translateX(0); }
.rd-portrait:first-child .rd-fact-pop::before { transform: translate(0, -3px); }
.rd-portrait:last-child .rd-fact-pop { left: auto; right: 0; transform: translateX(0); }
.rd-portrait:last-child .rd-fact-pop::before,
.rd-portrait:last-child .rd-fact-pop::after { left: auto; right: 22px; transform: translateX(0); }
.rd-portrait:last-child .rd-fact-pop::before { transform: translate(0, -3px); }
@keyframes rdPopInEdge {
  0%   { opacity: 0; transform: translateY(8px) scale(0.85); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.rd-portrait:first-child .rd-fact-pop,
.rd-portrait:last-child  .rd-fact-pop { animation-name: rdPopInEdge; }

/* ===== Win-panel action row (Print Certificate + Play Again side-by-side) ===== */
.game-win .win-actions {
  display: flex; flex-wrap: wrap; gap: 10px;
  justify-content: center; align-items: center;
  margin-top: 6px;
}

/* Mobile: smaller popover */
@media (max-width: 620px) {
  .rd-fact-pop { min-width: 160px; max-width: 220px; padding: 10px 22px 10px 10px; }
  .rd-fact-name { font-size: 12px; }
  .rd-fact-text { font-size: 11px; line-height: 1.4; }
  .rd-info-dot { width: 11px; height: 11px; font-size: 8px; }
}


/* =====================================================================
   SANTA'S COLORING BOOK
   ===================================================================== */
.cb-frame {
  margin-top: 14px;
  background: linear-gradient(180deg, #0f2a22, #0a1f1a);
  border: 1px solid rgba(224,165,38,.28);
  border-radius: 18px;
  padding: 14px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 18px 40px rgba(0,0,0,.32);
  position: relative;
}
.cb-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-bottom: 12px;
}
.cb-pagetitle {
  font-family: "Cormorant Garamond", Georgia, serif;
  font-size: 21px; font-weight: 600; font-style: italic;
  color: #f6ecd2; line-height: 1.15; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cb-headright { display: flex; align-items: center; gap: 10px; flex: none; }
.cb-counter {
  font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: .06em;
  text-transform: uppercase; color: #cdb07a;
  background: rgba(224,165,38,.10); border: 1px solid rgba(224,165,38,.22);
  padding: 5px 9px; border-radius: 999px; white-space: nowrap;
}
.cb-expand {
  width: 36px; height: 36px; flex: none; border-radius: 10px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(224,165,38,.28);
  color: #e8c873; font-size: 16px; line-height: 1; display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
  .cb-expand:hover { background: rgba(224,165,38,.18); transform: translateY(-1px); }
}
.cb-expand:active { background: rgba(224,165,38,.18); transform: scale(0.94); }

/* ---- book stage ---- */
.cb-stage { display: flex; align-items: center; gap: 8px; }
.cb-nav {
  flex: none; width: 40px; height: 40px; border-radius: 50%; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(224,165,38,.3);
  color: #f0d79a; font-size: 24px; line-height: 1; display: grid; place-items: center;
  transition: background .15s, transform .15s;
}
@media (hover: hover) and (pointer: fine) {
  .cb-nav:hover:not(:disabled) { background: rgba(224,165,38,.2); transform: scale(1.06); }
}
.cb-nav:active:not(:disabled) { background: rgba(224,165,38,.2); transform: scale(0.94); }
.cb-nav:disabled { opacity: .3; cursor: default; }

.cb-book {
  flex: 1 1 auto; min-width: 0; position: relative;
  display: flex; justify-content: center; align-items: stretch;
  perspective: 1600px;
}
.cb-leaf--left { display: none; } /* shown only in fullscreen spread */

.cb-page {
  position: relative; width: 100%; max-width: 460px;
  aspect-ratio: 448 / 600;
  background: #fffdf8; border-radius: 10px;
  box-shadow: 0 10px 26px rgba(0,0,0,.4), 0 0 0 1px rgba(0,0,0,.06);
  overflow: hidden;
  transform-origin: left center;
  will-change: transform;
}
.cb-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%;
  display: block; cursor: crosshair; touch-action: manipulation;
  border-radius: 10px;
}
.cb-canvas[hidden] { display: none; }
.cb-cover { position: absolute; inset: 0; }
.cb-cover[hidden] { display: none; }
.cb-cover svg { width: 100%; height: 100%; display: block; }

.cb-hint {
  position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%);
  font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: .05em;
  color: #9a8048; background: rgba(255,253,248,.86);
  padding: 4px 10px; border-radius: 999px; border: 1px solid #e6d6ad;
  pointer-events: none;
}
.cb-hint[hidden] { display: none; }

/* page-turn animation */
.cb-turn-next { animation: cbTurnNext .3s ease-in both; }
.cb-turn-prev { animation: cbTurnPrev .3s ease-in both; }
@keyframes cbTurnNext {
  0%   { transform: rotateY(0deg);   filter: brightness(1); }
  45%  { transform: rotateY(-16deg); filter: brightness(.82); }
  55%  { transform: rotateY(16deg);  filter: brightness(.82); }
  100% { transform: rotateY(0deg);   filter: brightness(1); }
}
@keyframes cbTurnPrev {
  0%   { transform: rotateY(0deg);   filter: brightness(1); }
  45%  { transform: rotateY(16deg);  filter: brightness(.82); }
  55%  { transform: rotateY(-16deg); filter: brightness(.82); }
  100% { transform: rotateY(0deg);   filter: brightness(1); }
}

/* ---- tools: palette + actions ---- */
.cb-tools {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 14px;
}
.cb-palette { display: flex; flex-wrap: wrap; gap: 8px; }
.cb-swatch {
  width: 34px; height: 34px; border-radius: 50%; cursor: pointer; padding: 0;
  background: var(--sw, #fff);
  border: 2px solid rgba(255,255,255,.55);
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
  transition: transform .12s;
}
@media (hover: hover) and (pointer: fine) {
  .cb-swatch:hover { transform: scale(1.12); }
}
.cb-swatch:active { transform: scale(0.95); }
.cb-swatch.is-active {
  border-color: #ffe9a8;
  box-shadow: 0 0 0 2px #0a1f1a, 0 0 0 4px #e8c873, 0 2px 6px rgba(0,0,0,.3);
  transform: scale(1.12);
}
.cb-actions { display: flex; gap: 8px; }
.cb-btn {
  font-family: "Mulish", system-ui, sans-serif; font-size: 13px; font-weight: 600;
  color: #f0e4c6; cursor: pointer;
  background: rgba(255,255,255,.07); border: 1px solid rgba(224,165,38,.28);
  padding: 8px 14px; border-radius: 10px; transition: background .15s;
}
@media (hover: hover) and (pointer: fine) {
  .cb-btn:hover { background: rgba(224,165,38,.18); }
}
.cb-btn:active { background: rgba(224,165,38,.18); }

.cb-downloads { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.cb-dl {
  flex: 1 1 auto; min-width: 150px;
  font-family: "Mulish", system-ui, sans-serif; font-size: 13px; font-weight: 700;
  cursor: pointer; padding: 11px 14px; border-radius: 12px; border: none;
  color: #0a1f14; background: linear-gradient(180deg, #f1d27a, #d6a64a);
  box-shadow: 0 6px 16px rgba(0,0,0,.28); transition: transform .15s, filter .15s;
}
.cb-dl:nth-child(2) { color: #fff; background: linear-gradient(180deg, #3aa14b, #1e6b2c); }
@media (hover: hover) and (pointer: fine) {
  .cb-dl:hover { transform: translateY(-1px); filter: brightness(1.05); }
}
.cb-dl:active:not(:disabled) { transform: translateY(1px); filter: brightness(1.05); }
.cb-dl:disabled { opacity: .45; cursor: default; transform: none; filter: none; }

/* ---- fullscreen spread ---- */
body.cb-noscroll { overflow: hidden; }
.cb-frame.cb-fs {
  position: fixed; inset: 0; z-index: 4000; margin: 0; border-radius: 0;
  padding: clamp(14px, 4vw, 40px);
  display: flex; flex-direction: column;
  background: radial-gradient(120% 90% at 50% 0%, #14342a, #081512 70%);
  overflow: auto;
}
.cb-frame.cb-fs .cb-stage { flex: 1 1 auto; }
.cb-frame.cb-fs .cb-page { max-width: min(70vh * 0.747, 92vw); }
.cb-frame.cb-fs .cb-book { gap: 0; }
.cb-close {
  position: fixed; top: 16px; right: 18px; z-index: 4001;
  width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  background: rgba(0,0,0,.4); border: 1px solid rgba(224,165,38,.4);
  color: #f0d79a; font-size: 26px; line-height: 1; display: grid; place-items: center;
}
@media (hover: hover) and (pointer: fine) {
  .cb-close:hover { background: rgba(224,165,38,.25); }
}
.cb-close:active { background: rgba(224,165,38,.25); }

/* open-book facing page on wide fullscreen */
@media (min-width: 860px) {
  .cb-frame.cb-fs .cb-leaf--left {
    display: block; width: 100%; max-width: min(70vh * 0.747, 44vw);
    aspect-ratio: 448 / 600;
    background:
      repeating-linear-gradient(180deg, rgba(0,0,0,.015) 0 22px, rgba(0,0,0,0) 22px 44px),
      #fbf6ea;
    border-radius: 10px 4px 4px 10px;
    box-shadow: inset -16px 0 26px -18px rgba(0,0,0,.5), 0 10px 26px rgba(0,0,0,.4);
    position: relative;
  }
  .cb-frame.cb-fs .cb-leaf--left::after {
    content: "✦"; position: absolute; inset: 0; display: grid; place-items: center;
    color: #e3d3aa; font-size: 40px;
  }
  .cb-frame.cb-fs .cb-page { border-radius: 4px 10px 10px 4px; }
  .cb-frame.cb-fs .cb-book {
    box-shadow: 0 30px 60px rgba(0,0,0,.5);
    border-radius: 10px;
  }
}

/* ---- mobile ---- */
@media (max-width: 620px) {
  .cb-pagetitle { font-size: 17px; }
  .cb-nav { width: 40px; height: 40px; font-size: 20px; }
  .cb-swatch { width: 36px; height: 36px; }
  .cb-tools { flex-direction: column; align-items: stretch; }
  .cb-actions { justify-content: center; }
  .cb-dl { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cb-turn-next, .cb-turn-prev { animation: none; }
  .cb-expand, .cb-nav, .cb-swatch, .cb-dl { transition: none; }
}

/* =====================================================================
   COLORING BOOK — fullscreen control panel (contents index + tools)
   The left leaf becomes a panel in fullscreen: palette on top, a
   scrollable 35-page contents index in the middle, downloads at the
   bottom. Collapsed / non-fullscreen layout is unchanged (leaf hidden).
   ===================================================================== */
.cb-frame.cb-fs .cb-book { flex-direction: column; align-items: center; gap: 16px; }
.cb-frame.cb-fs .cb-page { order: -1; border-radius: 12px; }
.cb-frame.cb-fs .cb-leaf--left {
  display: flex; flex-direction: column; gap: 12px;
  width: 100%; max-width: min(70vh * 0.747, 92vw);
  aspect-ratio: auto; background: none; box-shadow: none;
  border-radius: 0; padding: 0; position: relative;
}
.cb-frame.cb-fs .cb-leaf--left::after { content: none; }
.cb-frame.cb-fs .cb-leaf--left .cb-tools {
  margin-top: 0; flex-direction: column; align-items: stretch; gap: 10px;
}
.cb-frame.cb-fs .cb-leaf--left .cb-palette { justify-content: center; }
.cb-frame.cb-fs .cb-leaf--left .cb-actions { justify-content: center; }
.cb-frame.cb-fs .cb-leaf--left .cb-downloads { margin-top: 0; }

.cb-index {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  align-content: start; overflow: auto; padding: 6px;
  background: rgba(0,0,0,.18); border: 1px solid rgba(224,165,38,.18);
  border-radius: 12px; -webkit-overflow-scrolling: touch;
}
.cb-idx-tile {
  position: relative; padding: 0; cursor: pointer; aspect-ratio: 448 / 600;
  border: 2px solid rgba(255,255,255,.14); border-radius: 8px; overflow: hidden;
  background: #fbf6ea; transition: transform .12s, border-color .12s, box-shadow .12s;
}
.cb-idx-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
@media (hover: hover) and (pointer: fine) {
  .cb-idx-tile:hover { transform: translateY(-2px); border-color: rgba(224,165,38,.55); }
}
.cb-idx-tile:active { transform: scale(0.97); border-color: rgba(224,165,38,.55); }
.cb-idx-tile.is-current { border-color: #ffe9a8; box-shadow: 0 0 0 2px #e8c873; }
.cb-idx-num {
  position: absolute; left: 4px; bottom: 4px;
  font-family: "JetBrains Mono", monospace; font-size: 10px; font-weight: 700;
  color: #fff; background: rgba(0,0,0,.55); padding: 1px 6px; border-radius: 999px;
}

@media (min-width: 860px) {
  .cb-frame.cb-fs .cb-book { flex-direction: row; align-items: stretch; justify-content: center; gap: 22px; box-shadow: none; }
  .cb-frame.cb-fs .cb-page { order: 0; max-width: min(72vh * 0.747, 56vw); }
  .cb-frame.cb-fs .cb-leaf--left { order: 0; width: clamp(280px, 32vw, 420px); max-width: none; }
  .cb-frame.cb-fs .cb-index { flex: 1 1 auto; min-height: 0; grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1200px) {
  .cb-frame.cb-fs .cb-leaf--left .cb-index { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   ACTIVITY WINDOWS  (added v15)
   The North Pole toy grid becomes a launcher: each activity
   collapses to a tappable tile and opens in its own full-screen
   "window" with a Back button (mobile + desktop). Matching
   module lives in north-pole.js (v24).
   ============================================================ */

/* --- Launcher tiles --- */
.toy.is-launchable { cursor: pointer; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
@media (hover: hover) and (pointer: fine) {
  .toy-grid .toy.is-launchable:hover {
    transform: translateY(-3px);
    border-color: rgba(255,255,255,0.30);
    box-shadow: 0 20px 44px -24px rgba(0,0,0,0.75);
  }
}
.toy-grid .toy.is-launchable:focus-within {
  transform: translateY(-3px);
  border-color: rgba(255,255,255,0.30);
  box-shadow: 0 20px 44px -24px rgba(0,0,0,0.75);
}
.toy-grid .toy.is-launchable:active {
  transform: scale(0.98);
  border-color: rgba(255,255,255,0.30);
}

/* While a launchable tile sits in the grid, hide its heavy body — the
   activity itself lives in the full-screen window. Scoped to .toy-grid
   so the SAME node shows again once relocated into .np-win-body. */
.toy-grid .toy.is-launchable .letter,
.toy-grid .toy.is-launchable .letter-success,
.toy-grid .toy.is-launchable .elf-form,
.toy-grid .toy.is-launchable .elf-result,
.toy-grid .toy.is-launchable .game-frame,
.toy-grid .toy.is-launchable .rd-portraits,
.toy-grid .toy.is-launchable .stable,
.toy-grid .toy.is-launchable .game-win,
.toy-grid .toy.is-launchable .cb-frame,
.toy-grid .toy.is-launchable .jokes-stage,
.toy-grid .toy.is-launchable .jokes-menu { display: none !important; }

.toy-grid .toy.is-launchable p.toy-sub { margin-bottom: 18px; }

/* "Open" affordance */
.toy-open {
  font-family: var(--mono); font-weight: 600; font-size: 12px;
  letter-spacing: 0.14em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--gold-200); background: rgba(227,200,120,0.08);
  border: 1px solid rgba(227,200,120,0.35);
  padding: 11px 20px; border-radius: 999px; cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: background .18s ease, border-color .18s ease, color .18s ease;
}
@media (hover: hover) and (pointer: fine) {
  .toy-grid .toy.is-launchable:hover .toy-open {
    background: rgba(227,200,120,0.18); border-color: var(--gold-200); color: var(--gold-300);
  }
}
.toy-grid .toy.is-launchable:focus-within .toy-open {
  background: rgba(227,200,120,0.18); border-color: var(--gold-200); color: var(--gold-300);
}
.toy-grid .toy.is-launchable:active .toy-open {
  background: rgba(227,200,120,0.18); border-color: var(--gold-200); color: var(--gold-300);
}
.toy-open:focus-visible { outline: 2px solid var(--gold-200); outline-offset: 3px; }

/* --- The full-screen activity window --- */
.np-win {
  position: fixed; inset: 0; z-index: 100000;
  background: linear-gradient(180deg, #0c1b2e, #0f2438 40%, #123a44);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.np-win.is-open {
  opacity: 1; visibility: visible; transform: none;
  transition: opacity .22s ease, transform .22s ease;
}
body.np-win-open { overflow: hidden; }

.np-win-bar {
  position: sticky; top: 0; z-index: 5;
  display: flex; align-items: center; gap: 16px;
  padding: 12px 18px;
  /* No-op today (viewport-fit is "auto", so iOS already keeps content clear
     of notches/Dynamic Island) but costs nothing and covers us if that ever
     changes, plus honors gesture-nav insets some Android browsers report. */
  padding-top: max(12px, env(safe-area-inset-top));
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  background: rgba(9,17,28,0.85); backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.np-win-back {
  font-family: var(--body); font-weight: 700; font-size: 15px;
  display: inline-flex; align-items: center; gap: 9px;
  color: #10233a; background: linear-gradient(180deg, var(--gold-200), var(--gold));
  border: 0; border-radius: 999px; padding: 12px 22px; min-height: 46px;
  cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent;
  box-shadow: 0 12px 24px -14px rgba(0,0,0,0.65);
  transition: filter .18s ease, transform .05s ease;
}
@media (hover: hover) and (pointer: fine) {
  .np-win-back:hover { filter: brightness(1.06); }
}
.np-win-back:active { transform: translateY(1px); }
.np-win-back:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.np-win-back .bk-arrow { font-size: 19px; line-height: 1; margin-top: -1px; }

.np-win-title {
  font-family: var(--display); font-style: italic; font-weight: 600;
  font-size: clamp(20px, 3.4vw, 30px); color: #fff;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}

/* Fullscreen toggle: last in the bar, pushed to the far edge. Quiet until
   hovered so it never competes with "Back to Activities". */
.np-win-fs {
  margin-left: auto; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; border-radius: 50%;
  font-size: 20px; line-height: 1; color: #fff;
  background: rgba(246,239,223,0.12); border: 1px solid rgba(246,239,223,0.25);
  cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: filter .18s ease, transform .05s ease;
}
.np-win-fs[hidden] { display: none; }
@media (hover: hover) and (pointer: fine) {
  .np-win-fs:hover { filter: brightness(1.35); }
}
.np-win-fs:active { transform: translateY(1px); }
.np-win-fs:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.np-win-fs.is-on { background: rgba(246,239,223,0.22); }

.np-win-body { max-width: 960px; margin: 0 auto; padding: 26px 18px 90px; }

/* Relocated activity fills the window — strip the card chrome */
.np-win .toy.in-window {
  background: none; border: 0; backdrop-filter: none;
  padding: 0; overflow: visible; border-radius: 0;
}
.np-win .toy.in-window > h3 { display: none; }
.np-win .toy.in-window .toy-open { display: none; }
.np-win .toy.in-window .toy-ico { margin-bottom: 14px; }
.np-win .toy.in-window p.toy-sub { font-size: 16px; margin-bottom: 22px; }

/* The Elf Name Generator says everything twice. Its own intro directly below
   carries a bigger elf icon, "Ho Ho Ho!", and a fuller version of the same
   sentence — so the card's green star and blurb are pure duplication, and on a
   phone they push the name field and the month grid down the screen for
   nothing.

   Hidden rather than deleted, the same way snowman.css and polar-post.css do
   it, and for the same two reasons: north-pole.js reads the h3 for the window
   title, and it inserts the Open button relative to p.toy-sub — so both nodes
   have to stay in the DOM. .elf-intro carries no top margin, so removing the
   pair above it closes the gap cleanly rather than leaving a hole. */
#elf.in-window > .toy-ico,
#elf.in-window > p.toy-sub { display: none; }

/* Santa's Joke Show opened in a window led with the red microphone badge and
   "Pick a joke and watch Santa tell it on stage!" above the stage itself. The
   window bar already names the activity, the stage is self-evident, and on a
   phone that header pushed the curtain down the screen for no gain.

   Same hide-don't-delete rule as #elf and #letter above: the launcher card in
   grid/list view still needs the icon and the subtitle, and north-pole.js
   inserts the Open button relative to p.toy-sub, so both nodes must stay in
   the DOM. */
#jokes.in-window > .toy-ico,
#jokes.in-window > p.toy-sub { display: none; }

/* Letter to Santa had four headers stacked before the actual letter: the red
   envelope, the card blurb, a "Direct line to the North Pole" pill, and a lead
   paragraph — none of which the child needs in order to write. The title is
   the one line worth keeping, so everything else goes and it carries the
   header alone.

   Sized fluidly so it holds ONE line. At 34px the sentence runs about 600px,
   which is fine in a 960px window and hopeless on a 375px phone, where the
   body is only ~347px wide. The vw term scales it down to fit; the floor keeps
   it readable, and the cap stops it ballooning on a desktop where the window
   body is capped at 960px but the viewport is not. If it ever does run out of
   room it wraps rather than overflowing, which is the safe direction.

   Same hide-don't-delete rule as #elf above: north-pole.js needs the h3 and
   p.toy-sub nodes to stay. */
#letter.in-window > .toy-ico,
#letter.in-window > p.toy-sub,
#letter.in-window .letter-badge,
#letter.in-window .letter-lead { display: none; }
#letter.in-window .letter-intro { margin: 0 0 16px; }
#letter.in-window .letter-title {
  margin: 0;
  font-size: clamp(17px, 5.2vw, 34px);
  line-height: 1.2;
  text-wrap: balance;
}

@media (max-width: 620px) {
  .np-win-bar { padding: 10px 12px; gap: 12px; }
  .np-win-back { padding: 11px 16px; font-size: 14px; min-height: 44px; }
  .np-win-fs { width: 44px; height: 44px; font-size: 18px; }
  .np-win-body { padding: 18px 14px 72px; }
}

/* Full-width span for the 'More North Pole Fun' card — .span12 never had a grid-column rule, which only surfaced once the tiles collapsed. */
.toy.span12 { grid-column: 1 / -1; }

/* ============================================================
   CHAT WITH SANTA  (v17)
   A North Pole activity: chat bubbles + streaming replies from
   the same-origin /api/santa/chat backend. Opens in the launcher
   window like the other activities.
   ============================================================ */
.toy-grid .toy.is-launchable .chat-frame { display: none !important; }

/* --- Holiday chat window (v18): festive frame, Santa avatar, gentle snow --- */
.chat-frame {
  display: flex; flex-direction: column;
  height: min(70vh, 600px);
  height: min(70dvh, 600px);
  position: relative; isolation: isolate;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(224,70,60,0.12), transparent 60%),
    linear-gradient(180deg, var(--forest-850), var(--forest-950));
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--shadow-soft), inset 0 1px 0 rgba(246,239,223,0.05);
}

/* gentle snow drifting behind the conversation */
.chat-frame::after {
  content: ""; position: absolute; top: -6%; left: 0; right: 0; bottom: -6%;
  z-index: 0; pointer-events: none; opacity: 0.55;
  background-image:
    radial-gradient(2px 2px at 20% 10%, rgba(255,255,255,0.55), transparent),
    radial-gradient(2px 2px at 72% 20%, rgba(255,255,255,0.40), transparent),
    radial-gradient(1.5px 1.5px at 42% 42%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 86% 62%, rgba(255,255,255,0.35), transparent),
    radial-gradient(2px 2px at 14% 76%, rgba(255,255,255,0.45), transparent),
    radial-gradient(1.5px 1.5px at 60% 88%, rgba(255,255,255,0.40), transparent);
  animation: chatsnow 16s ease-in-out infinite alternate;
}
@keyframes chatsnow {
  from { transform: translateY(-3%); }
  to   { transform: translateY(3%); }
}

/* festive header with Santa's avatar */
.chat-header {
  position: relative; z-index: 2;
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px 15px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  border-bottom: 2px solid rgba(246,239,223,0.9);
}
.chat-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 8px; z-index: 2;
  background: radial-gradient(circle at 50% 0, var(--cream) 5px, transparent 5.5px) repeat-x;
  background-size: 14px 8px;
}
.chat-avatar {
  flex: 0 0 auto; border-radius: 50%; overflow: hidden;
  background: radial-gradient(circle at 50% 32%, #21402f, #0d1b13);
  border: 2px solid var(--gold-200);
  box-shadow: 0 0 0 2px rgba(158,31,32,0.35), var(--glow-gold);
  display: grid; place-items: center;
}
.chat-avatar svg, .chat-avatar img { width: 100%; height: 100%; display: block; object-fit: cover; }
.chat-avatar--lg { width: 46px; height: 46px; }
.chat-avatar--sm { width: 34px; height: 34px; box-shadow: 0 0 0 2px rgba(158,31,32,0.3); }
.chat-headmeta { display: flex; flex-direction: column; line-height: 1.2; }
.chat-name {
  font-family: var(--display); font-weight: 600; font-size: 20px; color: #fff;
  letter-spacing: 0.01em;
}
.chat-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--body); font-size: 12px; color: rgba(246,239,223,0.85);
}
.chat-status-dot {
  width: 8px; height: 8px; border-radius: 50%; background: #7ff0a8;
  box-shadow: 0 0 8px #7ff0a8; animation: chatpulse 2.2s ease-in-out infinite;
}
@keyframes chatpulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Santa voice mute/unmute toggle */
.chat-voice {
  margin-left: auto; flex: 0 0 auto;
  width: 38px; height: 38px; display: grid; place-items: center;
  color: #fff; background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(246,239,223,0.55); border-radius: 50%;
  cursor: pointer; transition: background .15s ease, opacity .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .chat-voice:hover { background: rgba(255,255,255,0.26); }
}
.chat-voice:active { background: rgba(255,255,255,0.26); }
.chat-voice:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(246,239,223,0.55); }
.chat-voice svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.chat-voice .ico-off { display: none; }
.chat-voice.is-off { opacity: 0.72; }
.chat-voice.is-off .ico-on { display: none; }
.chat-voice.is-off .ico-off { display: block; }
.chat-voice.is-speaking { animation: chatvoicepulse 1.1s ease-in-out infinite; }
@keyframes chatvoicepulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(246,239,223,0.0); } 50% { box-shadow: 0 0 0 4px rgba(246,239,223,0.35); } }

.chat-log {
  position: relative; z-index: 1;
  flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
  padding: 18px 16px; display: flex; flex-direction: column; gap: 14px;
}

/* message rows: santa (avatar + bubble, left) / kid (bubble, right) */
.chat-row { display: flex; align-items: flex-end; gap: 9px; max-width: 90%; }
.chat-row--santa { align-self: flex-start; }
.chat-row--kid   { align-self: flex-end; }

.chat-msg {
  padding: 12px 16px; border-radius: 18px;
  font-family: var(--body); font-size: 15.5px; line-height: 1.5;
  white-space: pre-wrap; overflow-wrap: anywhere;
}
.chat-msg--santa {
  color: #fff; border-bottom-left-radius: 6px;
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  box-shadow: 0 6px 18px -10px rgba(158,31,32,0.9);
}
.chat-msg--kid {
  color: var(--ink); border-bottom-right-radius: 6px;
  background: linear-gradient(180deg, #ffffff, var(--cream));
  box-shadow: 0 6px 16px -12px rgba(0,0,0,0.6);
}

.chat-msg.is-typing { display: inline-flex; gap: 5px; align-items: center; padding: 14px 16px; }
.chat-msg.is-typing .dot {
  width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,0.9);
  animation: chatdot 1.2s infinite ease-in-out;
}
.chat-msg.is-typing .dot:nth-child(2) { animation-delay: .2s; }
.chat-msg.is-typing .dot:nth-child(3) { animation-delay: .4s; }
.chat-msg--santa.is-writing::after {
  content: ""; display: inline-block; width: 2px; height: 1.05em;
  margin-left: 2px; vertical-align: -2px; border-radius: 1px;
  background: rgba(255,255,255,0.85);
  animation: chatcaret 0.9s steps(1) infinite;
}
@keyframes chatcaret { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } }
@keyframes chatdot {
  0%, 60%, 100% { transform: translateY(0); opacity: .5; }
  30% { transform: translateY(-4px); opacity: 1; }
}

.chat-suggests {
  position: relative; z-index: 2;
  display: flex; flex-wrap: wrap; gap: 8px; padding: 0 16px 12px;
}
.chat-chip {
  font-family: var(--body); font-size: 13.5px; font-weight: 600; color: var(--forest-900);
  background: linear-gradient(180deg, var(--gold-300), var(--gold-200));
  border: 1px solid var(--gold); border-radius: 999px;
  padding: 9px 15px; cursor: pointer;
  box-shadow: 0 4px 12px -8px rgba(200,162,74,0.9);
  transition: transform .12s ease, filter .15s ease;
}
@media (hover: hover) and (pointer: fine) {
  .chat-chip:hover { filter: brightness(1.05); transform: translateY(-1px); }
}
.chat-chip:active { transform: scale(0.97); filter: brightness(1.05); }

.chat-input {
  position: relative; z-index: 2;
  display: flex; gap: 10px; padding: 12px 14px;
  border-top: 1px solid var(--hairline-soft);
  background: rgba(9,17,12,0.55);
}
.chat-input input {
  flex: 1 1 auto; font-family: var(--body); font-size: 16px; color: #fff;
  background: rgba(246,239,223,0.10); border: 1px solid rgba(246,239,223,0.20);
  border-radius: 999px; padding: 12px 18px; outline: none;
}
.chat-input input::placeholder { color: rgba(246,239,223,0.5); }
.chat-input input:focus { border-color: var(--gold-200); box-shadow: 0 0 0 3px rgba(227,200,120,0.18); }
.chat-input input:disabled { opacity: .6; }
.chat-input button {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; border-radius: 50%; border: 0; cursor: pointer; color: #fff;
  background: linear-gradient(180deg, var(--green-bright), var(--green));
  box-shadow: 0 4px 14px -6px rgba(23,107,67,0.9);
  transition: filter .15s ease, transform .12s ease;
}
@media (hover: hover) and (pointer: fine) {
  .chat-input button:hover { filter: brightness(1.08); }
}
.chat-input button:active { transform: scale(0.94); }
.chat-input button:disabled { opacity: .5; cursor: default; }

/* Microphone (push-to-talk). Higher specificity than `.chat-input button`
   so the mic reads as neutral until it's actively listening. */
.chat-input .chat-mic {
  position: relative;
  background: rgba(246,239,223,0.12);
  border: 1px solid rgba(246,239,223,0.25);
  box-shadow: none; color: #fff;
}
/* Waiting for more words before sending: a gold ring drains over exactly the
   silence window the script picked (--wait-ms), so the countdown to Santa
   answering is visible and every further word visibly restarts it. */
.chat-input .chat-mic.is-waiting::after {
  content: ''; position: absolute; inset: -5px;
  border-radius: 50%; border: 2px solid var(--gold-200, #e3c878);
  animation: micwait var(--wait-ms, 3500ms) linear forwards;
  pointer-events: none;
}
@keyframes micwait {
  from { transform: scale(1); opacity: .85; }
  to   { transform: scale(0.62); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chat-input .chat-mic.is-waiting::after { animation: none; opacity: .7; }
}
@media (hover: hover) and (pointer: fine) {
  .chat-input .chat-mic:hover { filter: brightness(1.15); }
}
/* Hands-free engaged but mic not actively hearing (Santa is talking):
   steady green ring so the user knows tapping again turns it off. */
.chat-input .chat-mic.hands-free {
  border-color: transparent;
  background: linear-gradient(180deg, #2e8b57, #1f6b41);
  box-shadow: 0 0 0 2px rgba(46,139,87,0.45);
}
/* Actively listening wins over the steady hands-free ring. */
.chat-input .chat-mic.is-listening {
  background: linear-gradient(180deg, var(--red-bright), var(--red-deep));
  border-color: transparent; animation: micpulse 1.15s ease-in-out infinite;
}
@keyframes micpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(204,43,43,0.55); }
  50% { box-shadow: 0 0 0 7px rgba(204,43,43,0); }
}
@media (prefers-reduced-motion: reduce) {
  .chat-input .chat-mic.is-listening { animation: none; }
}

@media (max-width: 620px) {
  .chat-frame { height: min(74vh, 560px); height: min(74dvh, 560px); }
  .chat-row { max-width: 94%; }
  .chat-name { font-size: 18px; }
  .chat-avatar--lg { width: 42px; height: 42px; }
  .chat-avatar--sm { width: 30px; height: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  .chat-frame::after, .chat-status-dot, .chat-msg.is-typing .dot, .chat-msg--santa.is-writing::after { animation: none; }
}

/* ============================================================
   BOUNDED ELF NAME GENERATOR
   The active form or customization rail may scroll when necessary, but the
   activity window, generated identity, avatar and primary actions stay put.
   ============================================================ */
.elf-form[hidden],
.elf-result[hidden] {
  display: none !important;
}

.np-win.np-win--elf {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.np-win.np-win--elf .np-win-bar {
  position: relative;
  top: auto;
}
.np-win.np-win--elf .np-win-body {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}
#elf.in-window {
  height: 100%;
  min-height: 0;
  overflow: hidden;
}
.np-win--elf .elf-form,
.np-win--elf .elf-result {
  box-sizing: border-box;
  height: 100%;
  min-height: 0;
}
.np-win--elf .elf-form:not([hidden]) {
  display: grid;
  grid-template-columns: minmax(190px, .6fr) minmax(0, 1.4fr);
  gap: clamp(14px, 2.4vw, 30px);
  align-items: center;
}
.np-win--elf .elf-intro {
  min-width: 0;
}
.np-win--elf .elf-card {
  box-sizing: border-box;
  min-height: 0;
  max-height: 100%;
  margin: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(244, 212, 122, .82) rgba(255, 255, 255, .08);
}
.np-win--elf .elf-card::-webkit-scrollbar,
.np-win--elf .elf-controls::-webkit-scrollbar {
  width: 12px;
}
.np-win--elf .elf-card::-webkit-scrollbar-track,
.np-win--elf .elf-controls::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
}
.np-win--elf .elf-card::-webkit-scrollbar-thumb,
.np-win--elf .elf-controls::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: rgba(244, 212, 122, .82);
  border: 3px solid rgba(18, 34, 44, .82);
  border-radius: 999px;
}

.np-win--elf .elf-result:not([hidden]) {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr) auto;
  gap: clamp(8px, 1.5vh, 14px);
}
.np-win--elf .elf-reveal-head {
  min-width: 0;
}
.np-win--elf .elf-name {
  font-size: clamp(36px, 5vw, 62px);
  overflow-wrap: anywhere;
}
.np-win--elf .elf-builder {
  height: 100%;
  min-height: 0;
  margin: 0;
  grid-template-columns: minmax(210px, .55fr) minmax(0, 1.45fr);
  gap: clamp(12px, 2vw, 22px);
  align-items: stretch;
}
.np-win--elf .elf-preview {
  box-sizing: border-box;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.np-win--elf .elf-avatar {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.np-win--elf .elf-avatar svg {
  width: min(100%, 230px);
  max-height: 100%;
}
.np-win--elf .elf-controls {
  box-sizing: border-box;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(244, 212, 122, .82) rgba(255, 255, 255, .08);
}
.np-win--elf .elf-surprise,
.np-win--elf .elf-new,
.np-win--elf .elf-startover {
  min-height: 44px;
}
.np-win--elf .elf-actions {
  flex: 0 0 auto;
  margin: 0;
}

@media (max-width: 699px) and (orientation: portrait) {
  .np-win.np-win--elf .np-win-body {
    padding: 8px 10px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .np-win--elf .elf-form:not([hidden]) {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: auto minmax(0, 1fr);
    gap: 8px;
    align-items: stretch;
  }
  .np-win--elf .elf-intro {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    column-gap: 12px;
    align-items: center;
    text-align: left;
  }
  .np-win--elf .elf-intro-ico {
    grid-row: 1 / span 2;
    width: 58px;
    height: 58px;
    border-radius: 18px;
    font-size: 30px;
  }
  .np-win--elf .elf-hohoho {
    align-self: end;
    margin: 0 0 2px;
    font-size: 30px;
  }
  .np-win--elf .elf-intro-sub {
    align-self: start;
    margin: 0;
    max-width: none;
    font-size: 13px;
    line-height: 1.25;
  }
  .np-win--elf .elf-card {
    padding: 12px;
    border-radius: 18px;
  }
  .np-win--elf .elf-months {
    gap: 6px;
  }
  .np-win--elf .elf-month {
    min-height: 44px;
    padding: 8px 3px;
  }
  .np-win--elf .elf-input {
    min-height: 44px;
    padding: 10px 12px;
  }
  .np-win--elf .elf-card #elfMonthLabel {
    margin-top: 12px;
  }
  .np-win--elf .elf-reveal {
    min-height: 44px;
    margin-top: 12px;
    padding: 10px;
  }
  .np-win--elf .elf-hint {
    margin-top: 7px;
    font-size: 12px;
  }
  .np-win--elf .elf-result:not([hidden]) {
    gap: 8px;
  }
  .np-win--elf .elf-eyebrow {
    font-size: 11px;
  }
  .np-win--elf .elf-name {
    margin-top: 2px;
    font-size: clamp(32px, 10vw, 46px);
  }
  .np-win--elf .elf-title {
    font-size: 14px;
  }
  .np-win--elf .elf-builder {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: minmax(132px, 27dvh) minmax(0, 1fr);
    gap: 8px;
  }
  .np-win--elf .elf-preview {
    display: grid;
    grid-template-columns: minmax(100px, 1fr) minmax(92px, auto);
    padding: 8px 12px;
    border-radius: 18px;
  }
  .np-win--elf .elf-avatar svg {
    width: auto;
    max-width: 100%;
    max-height: min(156px, 25dvh);
  }
  .np-win--elf .elf-preview-cap {
    margin: 0;
    text-align: left;
  }
  .np-win--elf .elf-controls {
    padding: 12px;
    border-radius: 18px;
  }
  .np-win--elf .elf-controls-head {
    margin-bottom: 2px;
  }
  .np-win--elf .elf-build-title {
    font-size: 19px;
  }
  .np-win--elf .elf-surprise {
    padding: 8px 12px;
  }
  .np-win--elf .elf-ctrl {
    margin-top: 10px;
  }
  .np-win--elf .elf-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
  }
  .np-win--elf .elf-new,
  .np-win--elf .elf-startover {
    min-width: 0;
    padding: 9px 10px;
    font-size: 14px;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .np-win.np-win--elf .np-win-bar {
    padding-top: max(6px, env(safe-area-inset-top));
    padding-bottom: 6px;
  }
  .np-win.np-win--elf .np-win-body {
    padding: 6px 8px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .np-win--elf .elf-form:not([hidden]) {
    grid-template-columns: minmax(150px, .45fr) minmax(0, 1.55fr);
    gap: 8px;
  }
  .np-win--elf .elf-intro-ico {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    font-size: 28px;
  }
  .np-win--elf .elf-hohoho {
    margin: 8px 0 3px;
    font-size: 28px;
  }
  .np-win--elf .elf-intro-sub {
    font-size: 13px;
    line-height: 1.25;
  }
  .np-win--elf .elf-card {
    padding: 10px 12px;
    border-radius: 16px;
  }
  .np-win--elf .elf-input {
    min-height: 44px;
    padding: 8px 10px;
  }
  .np-win--elf .elf-card #elfMonthLabel {
    margin-top: 7px;
  }
  .np-win--elf .elf-months {
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 4px 6px;
  }
  .np-win--elf .elf-month {
    min-height: 44px;
    padding: 5px 2px;
  }
  .np-win--elf .elf-reveal {
    min-height: 44px;
    margin-top: 8px;
    padding: 8px;
  }
  .np-win--elf .elf-hint {
    margin-top: 5px;
    font-size: 12px;
  }
  .np-win--elf .elf-result:not([hidden]) {
    gap: 6px;
  }
  .np-win--elf .elf-reveal-head {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .np-win--elf .elf-eyebrow,
  .np-win--elf .elf-name,
  .np-win--elf .elf-title {
    margin: 0;
  }
  .np-win--elf .elf-eyebrow {
    font-size: 10px;
  }
  .np-win--elf .elf-name {
    font-size: clamp(28px, 5vw, 40px);
  }
  .np-win--elf .elf-title {
    font-size: 13px;
  }
  .np-win--elf .elf-builder {
    grid-template-columns: minmax(160px, .5fr) minmax(0, 1.5fr);
    gap: 8px;
  }
  .np-win--elf .elf-preview {
    padding: 6px;
    border-radius: 16px;
  }
  .np-win--elf .elf-avatar svg {
    width: auto;
    max-height: 128px;
  }
  .np-win--elf .elf-preview-cap {
    margin-top: 2px;
  }
  .np-win--elf .elf-controls {
    padding: 8px 10px;
    border-radius: 16px;
  }
  .np-win--elf .elf-controls-head {
    margin-bottom: 0;
  }
  .np-win--elf .elf-build-title {
    font-size: 18px;
  }
  .np-win--elf .elf-surprise {
    padding: 7px 12px;
  }
  .np-win--elf .elf-ctrl {
    margin-top: 8px;
  }
  .np-win--elf .elf-ctrl-label {
    margin-bottom: 4px;
  }
  .np-win--elf .elf-swatches {
    gap: 6px;
  }
  .np-win--elf .elf-actions {
    gap: 8px;
  }
  .np-win--elf .elf-new,
  .np-win--elf .elf-startover {
    min-height: 44px;
    padding: 8px 18px;
    font-size: 14px;
  }
}

/* ============================================================
   BOUNDED HIDDEN REINDEER HUNT
   The board and primary controls remain visible. Only the progress rail
   scrolls, regardless of whether the panes stack or sit side by side.
   ============================================================ */
.np-win.np-win--reindeer {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.np-win.np-win--reindeer .np-win-bar {
  position: relative;
  top: auto;
}
.np-win.np-win--reindeer .np-win-body {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}
#reindeer.in-window {
  height: 100%;
  padding: 0;
  overflow: hidden;
}
#reindeer.in-window > .toy-ico,
#reindeer.in-window > p.toy-sub {
  display: none;
}

.np-win--reindeer #huntFrame,
.hunt-page-main #huntFrame,
#huntFrame.game-frame.is-fullscreen {
  box-sizing: border-box;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  grid-template-areas:
    "head"
    "subtitle"
    "stage"
    "star"
    "progress";
  gap: 7px;
  width: 100%;
  max-width: 1500px;
  min-width: 0;
  min-height: 0;
  margin: 0 auto;
  overflow: hidden;
}
.np-win--reindeer #huntFrame {
  height: 100%;
}
.hunt-page-main #huntFrame {
  height: clamp(500px, calc(100dvh - 270px), 740px);
}

#huntFrame .star-callout {
  grid-area: star;
  align-self: stretch;
  min-width: 0;
  margin: 0;
}
#huntFrame .game-head {
  box-sizing: border-box;
  grid-area: head;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  margin: 0;
  padding-inline: 2px 6px;
  gap: 8px;
}
#huntFrame .gh-status {
  min-width: 0;
  gap: 10px;
}
#huntFrame .gb-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 160px;
  max-width: 100%;
  gap: 6px;
}
#huntFrame .gb-hint,
#huntFrame .gb-reset {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 8px 5px;
  white-space: nowrap;
}
#huntFrame .game-subtitle {
  grid-area: subtitle;
  display: block;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#huntFrame .game-stage {
  grid-area: stage;
  align-self: center;
  justify-self: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  aspect-ratio: 3 / 2;
}
#huntFrame .audio-toggle,
#huntFrame .expand-toggle {
  width: 44px;
  height: 44px;
}
#huntFrame .audio-toggle {
  top: 10px;
  right: 10px;
}
#huntFrame .expand-toggle {
  top: 10px;
  right: 62px;
}
#huntFrame .hunt-progress {
  grid-area: progress;
  min-width: 0;
  min-height: 0;
  padding: 0 8px 10px 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #c8a24a rgba(255,255,255,0.1);
  -webkit-overflow-scrolling: touch;
}
#huntFrame .hunt-progress::-webkit-scrollbar {
  width: 12px;
}
#huntFrame .hunt-progress::-webkit-scrollbar-track {
  background: rgba(255,255,255,0.08);
  border-radius: 999px;
}
#huntFrame .hunt-progress::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: #c8a24a;
  border: 3px solid #173044;
  border-radius: 999px;
}
#huntFrame .hunt-progress:focus-visible {
  outline: 3px solid rgba(227,200,120,0.75);
  outline-offset: -3px;
}
#huntFrame .rd-portraits {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
  margin: 0;
}
#huntFrame .rd-portrait {
  box-sizing: border-box;
  min-width: 0;
  min-height: 50px;
  padding: 7px 3px;
}
#huntFrame .rd-portrait .rd-name {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#huntFrame .stable {
  margin-top: 10px;
  padding: 12px;
}
#huntFrame .stable-head {
  position: sticky;
  top: 0;
  z-index: 2;
  margin: -4px -4px 10px;
  padding: 4px;
  background: #173044;
  border-radius: 8px;
}
#huntFrame .stable-clear {
  min-height: 44px;
}
#huntFrame .stable-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}
#huntFrame .stable-scene {
  min-width: 0;
  padding: 8px 9px;
}
#huntFrame .game-win.show {
  position: absolute;
  inset: clamp(8px, 2vw, 22px);
  z-index: 8;
  display: grid;
  place-content: center;
  padding: 24px;
  overflow-y: auto;
  border: 1px solid rgba(227,200,120,0.5);
  border-radius: 18px;
  background: rgba(12,27,46,0.97);
  box-shadow: 0 24px 70px rgba(0,0,0,0.65);
}

@media (max-width: 699px) and (orientation: portrait) {
  #huntFrame .sc-header {
    padding: 4px 9px;
  }
  #huntFrame .sc-body {
    gap: 9px;
    padding: 6px 9px;
  }
  #huntFrame .sc-portrait {
    flex-basis: 42px;
    width: 42px;
    height: 42px;
  }
  #huntFrame .sc-portrait svg {
    width: 36px;
    height: 36px;
  }
  #huntFrame .sc-name {
    font-size: 15px;
  }
  #huntFrame .sc-status {
    margin-top: 2px;
    font-size: 9px;
  }
  #huntFrame .rd-portrait {
    min-height: 48px;
  }
}

@media (max-width: 360px) and (orientation: portrait) {
  #huntFrame .gh-status {
    display: grid;
    gap: 2px;
  }
}

@media (orientation: landscape), (min-width: 700px) {
  .np-win--reindeer #huntFrame,
  .hunt-page-main #huntFrame,
  #huntFrame.game-frame.is-fullscreen {
    grid-template-columns: minmax(0, 1.7fr) minmax(280px, .72fr);
    grid-template-rows: auto auto minmax(0, 1fr);
    grid-template-areas:
      "head star"
      "subtitle star"
      "stage progress";
    column-gap: clamp(10px, 1.5vw, 20px);
    row-gap: 7px;
  }
  #huntFrame .game-stage {
    width: min(100%, calc((100dvh - 170px) * 1.5));
  }
}

@media (min-width: 700px) and (min-height: 561px) {
  .hunt-page-main #huntFrame .game-stage {
    width: min(100%, calc((100dvh - 395px) * 1.5));
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .np-win.np-win--reindeer .np-win-bar {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .np-win.np-win--reindeer .np-win-body {
    padding: 7px;
  }
  #huntFrame .game-subtitle {
    display: none;
  }
  #huntFrame .game-stage {
    width: min(100%, calc((100dvh - 150px) * 1.5));
  }
  #huntFrame .star-callout {
    max-height: 82px;
  }
  #huntFrame .sc-header {
    padding: 3px 8px;
  }
  #huntFrame .sc-body {
    gap: 8px;
    padding: 4px 8px;
  }
  #huntFrame .sc-portrait {
    flex-basis: 38px;
    width: 38px;
    height: 38px;
  }
  #huntFrame .sc-portrait svg {
    width: 32px;
    height: 32px;
  }
  #huntFrame .sc-name {
    font-size: 14px;
  }
  #huntFrame .sc-status {
    margin-top: 1px;
    font-size: 8.5px;
  }
  .hunt-page-main .hunt-intro {
    display: none;
  }
  .hunt-page-main #huntFrame {
    height: calc(100dvh - 104px);
    min-height: 260px;
  }
}

#huntFrame.game-frame.is-fullscreen {
  inset: 0;
  height: 100dvh;
  max-width: none;
  padding: max(10px, env(safe-area-inset-top))
           max(10px, env(safe-area-inset-right))
           max(10px, env(safe-area-inset-bottom))
           max(10px, env(safe-area-inset-left));
}
#huntFrame.game-frame.is-fullscreen .game-stage {
  width: min(100%, calc((100dvh - 150px) * 1.5));
  height: auto;
}

/* ============================================================
   COLORING BOOK - bounded responsive workspace
   The page and primary navigation stay visible. Only the compact
   pages-and-crayons panel scrolls on every device shape.
   ============================================================ */
.np-win.np-win--coloring {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  overflow: hidden;
}
.np-win.np-win--coloring .np-win-bar {
  position: relative;
  top: auto;
}
.np-win.np-win--coloring .np-win-body {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}
#coloring.in-window {
  height: 100%;
  min-height: 0;
  padding: 0;
  overflow: hidden;
}
#coloring.in-window > .toy-ico,
#coloring.in-window > p.toy-sub {
  display: none;
}

.np-win--coloring .cb-frame {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(96px, 25dvh);
  grid-template-areas:
    "head"
    "stage"
    "panel";
  gap: clamp(7px, 1.2vw, 14px);
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: clamp(8px, 1.2vw, 14px);
  overflow: hidden;
}
.np-win--coloring .cb-head {
  grid-area: head;
  min-width: 0;
  min-height: 44px;
  margin: 0;
}
.np-win--coloring .cb-headright {
  min-height: 44px;
}
.np-win--coloring .cb-stage {
  position: relative;
  grid-area: stage;
  display: flex;
  justify-content: center;
  min-width: 0;
  min-height: 0;
  gap: 0;
  overflow: hidden;
}
.np-win--coloring .cb-book {
  flex: 0 1 auto;
  width: auto;
  height: 100%;
  max-width: 100%;
  min-width: 0;
  min-height: 0;
  aspect-ratio: 448 / 600;
  align-items: center;
}
.np-win--coloring .cb-page {
  width: 100%;
  height: 100%;
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 448 / 600;
}
.np-win--coloring .cb-nav {
  position: absolute;
  top: 50%;
  z-index: 3;
  width: 44px;
  height: 44px;
  transform: translateY(-50%);
  background: rgba(8,21,18,.86);
  box-shadow: 0 6px 18px rgba(0,0,0,.32);
}
.np-win--coloring .cb-nav:active:not(:disabled) {
  transform: translateY(-50%) scale(.94);
}
.np-win--coloring .cb-prev { left: 4px; }
.np-win--coloring .cb-next { right: 4px; }

.cb-panel {
  grid-area: panel;
  box-sizing: border-box;
  min-width: 0;
  min-height: 0;
  padding: 2px 10px 10px 2px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #d6a64a rgba(255,255,255,.08);
  -webkit-overflow-scrolling: touch;
}
.cb-panel::-webkit-scrollbar { width: 12px; }
.cb-panel::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}
.cb-panel::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: #d6a64a;
  border: 3px solid #0f2a22;
  border-radius: 999px;
}
.cb-panel:focus-visible {
  outline: 3px solid rgba(232,200,115,.78);
  outline-offset: -3px;
}
.cb-picker {
  display: grid;
  gap: 6px;
  margin-bottom: 10px;
}
.cb-picker label {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: #e8c873;
}
.cb-picker select {
  box-sizing: border-box;
  width: 100%;
  min-height: 44px;
  padding: 9px 38px 9px 12px;
  border: 1px solid rgba(224,165,38,.38);
  border-radius: 10px;
  color: #f6ecd2;
  background: #16372d;
  font-family: "Mulish", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 700;
}
.cb-picker select:focus-visible {
  outline: 3px solid #e8c873;
  outline-offset: 2px;
}
.np-win--coloring .cb-tools {
  margin-top: 0;
  align-items: flex-start;
  gap: 10px;
}
.np-win--coloring .cb-frame.is-cover .cb-tools {
  display: none;
}
.np-win--coloring .cb-palette {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(44px, 1fr));
  width: 100%;
  gap: 8px;
  justify-items: center;
}
.np-win--coloring .cb-swatch {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
}
.np-win--coloring .cb-actions {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  width: 100%;
  gap: 8px;
}
.np-win--coloring .cb-btn {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
}
.np-win--coloring .cb-downloads {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}
.np-win--coloring .cb-dl {
  box-sizing: border-box;
  min-width: 0;
  min-height: 44px;
  padding: 9px 10px;
}

@media (orientation: landscape), (min-width: 700px) {
  .np-win--coloring .cb-frame {
    grid-template-columns: minmax(0, 1.65fr) minmax(260px, .65fr);
    grid-template-rows: auto minmax(0, 1fr);
    grid-template-areas:
      "stage head"
      "stage panel";
  }
  .np-win--coloring .cb-stage {
    align-self: stretch;
  }
}

@media (orientation: landscape) and (max-height: 560px) {
  .np-win.np-win--coloring .np-win-bar {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .np-win.np-win--coloring .np-win-body {
    padding: 7px;
  }
  .np-win--coloring .cb-frame {
    gap: 7px;
    padding: 7px;
  }
  .np-win--coloring .cb-pagetitle { font-size: 16px; }
  .np-win--coloring .cb-headright { gap: 5px; }
}

@media (max-width: 430px) and (orientation: portrait) {
  .np-win--coloring .cb-frame {
    grid-template-rows: auto minmax(0, 1fr) minmax(92px, 23dvh);
  }
  .np-win--coloring .cb-pagetitle { font-size: 16px; }
  .np-win--coloring .cb-counter { padding-inline: 7px; }
  .np-win--coloring .cb-downloads { grid-template-columns: minmax(0, 1fr); }
}

/* ============================================================
   BOUNDED SANTA CHAT
   The conversation owns vertical scrolling while the header, starter rail,
   and growing composer stay visible. VisualViewport variables keep the
   workspace above software keyboards.
   ============================================================ */
.np-win.np-win--chat {
  top: var(--np-visible-top, 0px);
  bottom: auto;
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--np-visible-height, 100dvh);
  max-height: var(--np-visible-height, 100dvh);
  overflow: hidden;
}
.np-win.np-win--chat .np-win-bar {
  position: relative;
  top: auto;
}
.np-win.np-win--chat .np-win-body {
  box-sizing: border-box;
  width: 100%;
  max-width: 1180px;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}
#chat.in-window {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  min-height: 0;
  opacity: 1;
  transform: none;
  overflow: hidden;
}
.np-win--chat #chat.in-window .chat-frame {
  width: 100%;
  height: 100%;
  max-height: none;
  min-height: 0;
}
.np-win--chat .chat-frame::after {
  inset: 0;
}
.np-win--chat .chat-frame,
.np-win--chat .chat-header,
.np-win--chat .chat-log,
.np-win--chat .chat-suggests,
.np-win--chat .chat-input {
  min-width: 0;
}
.np-win--chat .chat-header,
.np-win--chat .chat-suggests,
.np-win--chat .chat-input {
  flex: 0 0 auto;
}
.np-win--chat .chat-headmeta {
  flex: 1 1 auto;
  min-width: 0;
}
.np-win--chat .chat-status {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.np-win--chat .chat-voice {
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  margin-left: 0;
}
.np-win--chat .chat-log {
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: rgba(227, 200, 120, .82) rgba(255, 255, 255, .08);
}
.np-win--chat .chat-log::-webkit-scrollbar {
  width: 12px;
}
.np-win--chat .chat-log::-webkit-scrollbar-track {
  background: rgba(255, 255, 255, .08);
  border-radius: 999px;
}
.np-win--chat .chat-log::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: rgba(227, 200, 120, .82);
  border: 3px solid #10241a;
  border-radius: 999px;
}
.np-win--chat .chat-log:focus-visible {
  outline: 3px solid rgba(227, 200, 120, .82);
  outline-offset: -3px;
}
.np-win--chat .chat-suggests {
  flex-wrap: nowrap;
  min-width: 0;
  padding: 0 14px 10px;
  overflow-x: auto;
  overflow-y: hidden;
  overscroll-behavior-x: contain;
  touch-action: pan-x;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.np-win--chat .chat-suggests::-webkit-scrollbar {
  display: none;
}
.np-win--chat .chat-chip {
  box-sizing: border-box;
  flex: 0 0 auto;
  min-height: 44px;
  white-space: nowrap;
}
.np-win--chat .chat-input {
  align-items: flex-end;
}
.np-win--chat .chat-input textarea {
  box-sizing: border-box;
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  min-height: 48px;
  max-height: min(112px, 24dvh);
  margin: 0;
  padding: 12px 18px;
  resize: none;
  overflow-x: hidden;
  overflow-y: auto;
  border: 1px solid rgba(246, 239, 223, .20);
  border-radius: 24px;
  outline: none;
  color: #fff;
  background: rgba(246, 239, 223, .10);
  font-family: var(--body);
  font-size: 16px;
  line-height: 1.4;
}
.np-win--chat .chat-input textarea::placeholder {
  color: rgba(246, 239, 223, .5);
}
.np-win--chat .chat-input textarea:focus {
  border-color: var(--gold-200);
  box-shadow: 0 0 0 3px rgba(227, 200, 120, .18);
}
.np-win--chat .chat-input textarea:disabled {
  opacity: .6;
}
.np-win--chat .chat-input button {
  width: 48px;
  height: 48px;
  min-width: 48px;
  min-height: 48px;
}

@media (max-width: 620px) {
  .np-win.np-win--chat .np-win-body {
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .np-win--chat .chat-frame {
    border-radius: 18px;
  }
  .np-win--chat .chat-header {
    gap: 9px;
    padding: 9px 10px 11px;
  }
  .np-win--chat .chat-avatar--lg {
    width: 40px;
    height: 40px;
  }
  .np-win--chat .chat-name {
    font-size: 18px;
  }
  .np-win--chat .chat-status {
    font-size: 11px;
  }
  .np-win--chat .chat-log {
    padding: 12px 10px;
    gap: 10px;
  }
  .np-win--chat .chat-row {
    max-width: 96%;
    min-width: 0;
  }
  .np-win--chat .chat-msg {
    min-width: 0;
    max-width: 100%;
    padding: 10px 12px;
    font-size: 15px;
  }
  .np-win--chat .chat-suggests {
    gap: 7px;
    padding: 0 10px 8px;
  }
  .np-win--chat .chat-chip {
    padding: 8px 12px;
    font-size: 13px;
  }
  .np-win--chat .chat-input {
    gap: 6px;
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .np-win--chat .chat-input textarea {
    min-height: 44px;
    max-height: min(96px, 24dvh);
    padding: 10px 13px;
  }
  .np-win--chat .chat-input button {
    width: 44px;
    height: 44px;
    min-width: 44px;
    min-height: 44px;
  }
}

@media (max-height: 560px) and (min-aspect-ratio: 4 / 3) {
  .np-win.np-win--chat .np-win-bar {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .np-win.np-win--chat .np-win-body {
    padding: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
  .np-win--chat .chat-header {
    padding-top: 6px;
    padding-bottom: 8px;
  }
  .np-win--chat .chat-avatar--lg {
    width: 36px;
    height: 36px;
  }
  .np-win--chat .chat-suggests {
    padding-bottom: 6px;
  }
  .np-win--chat .chat-input {
    padding-top: 6px;
    padding-bottom: max(6px, env(safe-area-inset-bottom));
  }
}

/* ============================================================
   BOUNDED LETTERS TO SANTA
   The activity window never becomes a second page. Portrait and compact
   screens use one contained letter scroll; roomy screens split writing from
   delivery details. The visual viewport variable follows software keyboards.
   ============================================================ */
.np-win.np-win--letter {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  height: var(--np-visible-height, 100dvh);
  max-height: var(--np-visible-height, 100dvh);
  overflow: hidden;
}
.np-win.np-win--letter .np-win-bar {
  position: relative;
  top: auto;
}
.np-win.np-win--letter .np-win-body {
  box-sizing: border-box;
  width: 100%;
  max-width: none;
  min-height: 0;
  padding: clamp(8px, 1.4vw, 18px);
  padding-bottom: max(clamp(8px, 1.4vw, 18px), env(safe-area-inset-bottom));
  overflow: hidden;
}
#letter.in-window {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  min-height: 0;
  max-width: none;
  opacity: 1;
  transform: none;
  overflow: hidden;
}
.np-win--letter #letter.in-window .letter-intro {
  display: none;
}
.np-win--letter .letter {
  flex: 1 1 auto;
  align-items: stretch;
  width: 100%;
  min-height: 0;
  overflow: hidden;
}
.np-win--letter .letter-cardwrap {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  width: 100%;
  max-width: 1180px;
  min-height: 0;
  margin: 0 auto;
}
.np-win--letter .letter-ribbon {
  flex: 0 0 auto;
}
.np-win--letter .letter-card {
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  flex: 1 1 auto;
  min-width: 0;
  min-height: 0;
  padding: 0;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  touch-action: pan-y;
  scrollbar-gutter: stable;
  scrollbar-width: auto;
  scrollbar-color: #b98a31 rgba(112, 78, 36, .12);
  -webkit-overflow-scrolling: touch;
}
.np-win--letter .letter-card::-webkit-scrollbar,
.np-win--letter .letter-compose::-webkit-scrollbar,
.np-win--letter .letter-controls::-webkit-scrollbar {
  width: 12px;
}
.np-win--letter .letter-card::-webkit-scrollbar-track,
.np-win--letter .letter-compose::-webkit-scrollbar-track,
.np-win--letter .letter-controls::-webkit-scrollbar-track {
  background: rgba(112, 78, 36, .12);
  border-radius: 999px;
}
.np-win--letter .letter-card::-webkit-scrollbar-thumb,
.np-win--letter .letter-compose::-webkit-scrollbar-thumb,
.np-win--letter .letter-controls::-webkit-scrollbar-thumb {
  min-height: 44px;
  background: #b98a31;
  border: 3px solid #f5ecd8;
  border-radius: 999px;
}
.np-win--letter .letter-card:focus-visible,
.np-win--letter .letter-compose:focus-visible,
.np-win--letter .letter-controls:focus-visible {
  outline: 3px solid #b98a31;
  outline-offset: -3px;
}
.np-win--letter .letter-compose,
.np-win--letter .letter-controls {
  box-sizing: border-box;
  min-width: 0;
  padding: clamp(22px, 3.2vw, 38px);
}
.np-win--letter .letter-compose {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 340px;
  padding-top: clamp(32px, 4vw, 42px);
}
.np-win--letter .letter-controls {
  padding-top: clamp(18px, 2.5vw, 30px);
  border-top: 1px solid rgba(150, 110, 60, .24);
  background: rgba(255, 255, 255, .2);
}
.np-win--letter .letter textarea {
  flex: 1 1 auto;
  min-height: 210px;
  resize: none;
}
.np-win--letter .letter-ideas {
  margin-top: 0;
}
.np-win--letter .letter-chip {
  box-sizing: border-box;
  min-height: 44px;
}
.np-win--letter .letter-field input,
.np-win--letter .letter-send {
  min-height: 48px;
}
.letter-error {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(171, 39, 45, .35);
  border-radius: 12px;
  color: #7d2027;
  background: rgba(171, 39, 45, .08);
  font-family: var(--body);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.4;
}
.letter-error[hidden] {
  display: none;
}

@media (min-width: 760px) and (min-aspect-ratio: 4 / 3) {
  .np-win--letter .letter-card {
    grid-template-columns: minmax(0, 1.45fr) minmax(300px, .75fr);
    overflow: hidden;
  }
  .np-win--letter .letter-compose,
  .np-win--letter .letter-controls {
    min-height: 0;
    overflow-x: hidden;
    overflow-y: auto;
    overscroll-behavior: contain;
    touch-action: pan-y;
    scrollbar-gutter: stable;
    scrollbar-width: auto;
  }
  .np-win--letter .letter-compose {
    border-right: 1px solid rgba(150, 110, 60, .24);
  }
  .np-win--letter .letter-controls {
    border-top: 0;
  }
}

@media (max-width: 620px) {
  .np-win.np-win--letter .np-win-body {
    padding: 8px;
    padding-bottom: max(8px, env(safe-area-inset-bottom));
  }
  .np-win--letter .letter-cardwrap {
    border-radius: 16px;
  }
  .np-win--letter .letter-ribbon {
    margin-bottom: -13px;
    padding: 9px 20px;
    font-size: 12px;
  }
  .np-win--letter .letter-compose,
  .np-win--letter .letter-controls {
    padding: 20px 14px 16px;
  }
  .np-win--letter .letter-compose {
    min-height: min(330px, 52dvh);
    padding-top: 30px;
  }
  .np-win--letter .letter-stamp {
    top: 18px;
    right: 14px;
    transform: rotate(3deg) scale(.82);
    transform-origin: top right;
  }
  .np-win--letter .letter-dear {
    padding-right: 78px;
    font-size: 23px;
  }
  .np-win--letter .letter-openhint {
    padding-right: 72px;
    font-size: 12px;
  }
  .np-win--letter .letter textarea {
    min-height: 190px;
    font-size: 21px;
    line-height: 36px;
    background-image: repeating-linear-gradient(transparent, transparent 35px, rgba(150,110,60,.28) 35px, rgba(150,110,60,.28) 36px);
  }
  .np-win--letter .letter-chips {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .np-win--letter .letter-chip {
    min-width: 0;
    padding: 8px 10px;
    border-radius: 13px;
    line-height: 1.25;
  }
  .np-win--letter .letter-fields {
    grid-template-columns: minmax(0, 1fr);
  }
  .np-win--letter .letter-success {
    padding: 12px;
  }
  .np-win--letter .letter-success-card {
    max-height: calc(var(--np-visible-height, 100dvh) - 24px);
    padding: 30px 22px;
  }
}

@media (max-height: 560px) and (min-aspect-ratio: 4 / 3) {
  .np-win.np-win--letter .np-win-bar {
    padding-top: 7px;
    padding-bottom: 7px;
  }
  .np-win.np-win--letter .np-win-body {
    padding: 7px;
  }
  .np-win--letter .letter-ribbon {
    margin-bottom: -12px;
    padding-block: 8px;
  }
  .np-win--letter .letter-compose,
  .np-win--letter .letter-controls {
    padding: 20px 16px 14px;
  }
  .np-win--letter .letter-compose {
    padding-top: 28px;
  }
  .np-win--letter .letter textarea {
    min-height: 140px;
  }
}