/* ============================================================
   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 {
  position: relative; 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; }
}

/* ---------------- 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;
}

/* ---------------- 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; }

@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; }
}