/* Princess Castle HUD look (2026-10-31): pearl-and-gold storybook jewelry.
   Frosted pearl pills and panels, one thin gold hairline, plum ink, rounded type. Quiet until needed.
   Rules: one radius per shape (pill or panel), one hairline, no coloured side stripes, no web-card
   titles or labels over play, meters go bare. Every HUD file builds on these tokens. */
:root {
  --hud-ink: #5b2346;
  --hud-ink-soft: rgba(91, 35, 70, 0.7);
  --hud-pearl: rgba(255, 250, 247, 0.84);
  --hud-pearl-strong: rgba(255, 250, 247, 0.95);
  --hud-pearl-press: rgba(255, 236, 245, 0.96);
  --hud-gold: #d4a64e;
  --hud-gold-line: rgba(212, 166, 78, 0.6);
  --hud-rose: #e2739f;
  --hud-rose-soft: rgba(226, 115, 159, 0.16);
  --hud-mint: #6fd3bd;
  --hud-hairline: 1px solid var(--hud-gold-line);
  --hud-shadow: 0 8px 22px rgba(91, 35, 70, 0.16);
  --hud-shadow-soft: 0 4px 12px rgba(91, 35, 70, 0.12);
  --hud-blur: blur(12px) saturate(1.15);
  --hud-radius: 20px;
  --hud-pill: 999px;
  --hud-font: ui-rounded, "SF Pro Rounded", "Arial Rounded MT Bold", "Trebuchet MS", system-ui, sans-serif;
  --hud-story-font: Georgia, "Times New Roman", serif;
  --hud-text: 600 15px/1.3 var(--hud-font);
  --hud-text-small: 600 13px/1.25 var(--hud-font);
  --hud-edge: 14px;
  --hud-tap: 48px;
}

/* ============ Castle screen ============ */

/* Corner pill: just the two buttons. The kingdom title stays for screen readers only. */
.hud {
  border: var(--hud-hairline);
  background: var(--hud-pearl);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  border-radius: var(--hud-radius);
  box-shadow: var(--hud-shadow);
  color: var(--hud-ink);
  text-shadow: none;
}
.hud h1 {
  color: var(--hud-ink);
  font: 700 16px/1.25 var(--hud-story-font);
  letter-spacing: 0.01em;
}
.hud.compact {
  min-width: 0;
  min-height: 56px;
  padding: 6px 84px 6px 6px;
  border-radius: var(--hud-pill);
}
.hud.compact h1 {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.hud-toggle,
.hud.compact .hud-toggle,
.camera-mode-btn {
  min-height: var(--hud-tap);
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl-strong) !important;
  color: var(--hud-ink) !important;
  font: 700 14px/1 var(--hud-font) !important;
  box-shadow: none !important;
}
.hud-toggle:active,
.camera-mode-btn:active {
  background: var(--hud-pearl-press) !important;
}

/* Open menu: the four status lines, the controls tip, the "Next" line and the score repeated
   the Royal Evidence Quest card and the friend portraits. One copy of each stays. */
.hud .hud-controls,
.hud .quest-line,
.hud .challenge-line,
.hud .key-line,
.hud .clue-line,
.hud .adventure-line,
.hud .score {
  display: none !important;
}
.hud.menu-open {
  padding: 14px;
}
.hud.menu-open h1 {
  margin: 4px 86px 10px 4px;
}
.hud-action-grid {
  border-top: var(--hud-hairline);
  gap: 8px;
}
.hud-action-btn {
  min-height: 52px;
  border: var(--hud-hairline);
  border-radius: 16px;
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 700 13px/1.1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}
.hud-action-btn:active {
  background: var(--hud-pearl-press);
  transform: translateY(1px);
}

/* Bottom of the screen: one family. The 1-2-3-4 quest path becomes a quiet strip of four icons
   that sits right on top of the single "next" pill; the three "other places" become small chips
   with no box and no heading. */
.station-hint,
body.castle-active-quest:not(.castle-hallway) .station-hint {
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink);
  font: 700 15px/1.25 var(--hud-font);
  text-shadow: none;
  box-shadow: var(--hud-shadow-soft);
  padding: 10px 18px;
}
.station-hint::before,
body.castle-active-quest:not(.castle-hallway) .station-hint::before {
  content: "✦";
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--hud-gold);
  font-size: 15px;
  text-transform: none;
}
body.castle-active-quest:not(.castle-hallway) .station-hint.first-move-cheer::before {
  content: "✦";
  min-width: 0;
  padding: 0;
  background: none;
  color: var(--hud-gold);
}
.castle-quest-chapters {
  gap: 4px;
  padding: 4px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: none;
  color: var(--hud-ink-soft);
  font: 700 12px/1 var(--hud-font);
}
.castle-quest-chapters i,
.castle-quest-chapters b {
  display: none;
}
.castle-quest-chapters span {
  min-height: 28px;
  padding: 3px 10px;
  gap: 4px;
  opacity: 0.7;
}
.castle-quest-chapters span.current {
  opacity: 1;
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  box-shadow: inset 0 0 0 1px var(--hud-gold);
}

@media (min-width: 521px) {
  body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations {
    bottom: max(18px, calc(env(safe-area-inset-bottom, 0px) + 18px));
  }
  body.castle-active-quest:not(.castle-hallway) .station-hint {
    bottom: max(78px, calc(env(safe-area-inset-bottom, 0px) + 78px));
  }
  body.castle-active-quest .castle-quest-chapters {
    bottom: max(130px, calc(env(safe-area-inset-bottom, 0px) + 130px));
  }
}
body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations {
  display: flex;
  gap: 8px;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations .castle-secondary-kicker {
  display: none !important;
}
body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations > button {
  width: auto !important;
  height: 44px !important;
  min-height: 44px !important;
  padding: 6px 14px 6px 10px !important;
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink) !important;
  font: 700 13px/1 var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
}
body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations .ll-trigger-icon,
body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations .ptt-trigger-icon,
body.castle-active-quest:not(.castle-hallway) #castle-secondary-destinations #bt-trigger .bt-sprite {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px;
}

/* Toasts */
.dust-toast {
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl-strong) !important;
  color: var(--hud-ink) !important;
  font: 700 15px/1.2 var(--hud-font) !important;
  box-shadow: var(--hud-shadow) !important;
  text-shadow: none !important;
}

/* ============ Mini-game frame (every game) ============ */

/* Back and Help: small pearl pills in the top-left corner. */
.mini-game-close,
.mini-guidance-toggle {
  min-height: 44px;
  padding: 0 16px;
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink) !important;
  font: 700 14px/1 var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
  text-shadow: none !important;
}
.mini-game-close:active,
.mini-guidance-toggle:active {
  background: var(--hud-pearl-press) !important;
}

/* Progress: a bare count with a little star (the skill name lives in Grown-up notes). */
.mini-game-progress {
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink) !important;
  font: 700 15px/1.2 var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
  text-shadow: none !important;
  letter-spacing: 0.01em;
}
.mini-game-progress[data-compact="count"] {
  font-variant-numeric: tabular-nums;
}

/* The world name was shown three times (help panel, intro splash, this corner tag). */
.mini-game-board::after {
  content: none !important;
  display: none !important;
}

.mini-game-feedback {
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl-strong) !important;
  color: var(--hud-ink) !important;
  font: 700 15px/1.25 var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
  text-shadow: none !important;
}

/* Help panel (opened on purpose): a soft pearl page, no stripes. */
.mini-game-guidance-panel {
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-radius) !important;
  background: var(--hud-pearl-strong) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink) !important;
  box-shadow: var(--hud-shadow) !important;
}
.mini-game-guidance-panel .mini-game-kicker {
  display: none !important;
}

/* 3D games: caption, pad and buttons in the same family. */
.mini3d-modal .mini3d-clue {
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-pill) !important;
  background: var(--hud-pearl) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink) !important;
  font: 700 16px/1.3 var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
  text-shadow: none !important;
}
.mini3d-clue small {
  font: 600 13px/1.3 var(--hud-font);
  color: var(--hud-ink-soft);
}
.mini3d-controls button,
.mini3d-outcome button,
.mini3d-promise {
  border: var(--hud-hairline) !important;
  background: var(--hud-pearl) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink) !important;
  font: 700 15px/1 var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
  text-shadow: none !important;
}
.mini3d-controls button:active {
  background: var(--hud-pearl-press) !important;
}
.mini3d-pad button {
  border-radius: 16px !important;
}
/* The one primary action keeps its plum fill so a child can find it. */
.mini3d-actions [data-jump] {
  border: 1px solid rgba(255, 255, 255, 0.5) !important;
  border-radius: var(--hud-pill) !important;
  background: linear-gradient(180deg, #9a4f7e, #7d3a65) !important;
  color: #fffaf7 !important;
  box-shadow: 0 6px 16px rgba(91, 35, 70, 0.28) !important;
}
.mini3d-actions [data-jump]:active {
  background: #7d3a65 !important;
}
.mini3d-actions [data-glow] {
  border-radius: var(--hud-pill) !important;
}
.hud-sr-only {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Phones: with the title hidden, the corner pill is one short row (Map view + Menu). */
@media (max-width: 520px) {
  .hud.compact:has(.camera-mode-btn) {
    display: flex !important;
    align-items: center;
    width: auto;
    min-height: 56px;
    padding: 6px 84px 6px 6px;
  }
  .hud.compact .camera-mode-btn {
    margin: 0;
  }
}
@media (max-width: 420px) {
  .castle-quest-chapters {
    top: max(82px, calc(env(safe-area-inset-top, 0px) + 82px));
  }
}
/* A bare count needs only a small pill, top-right, centred text, on every screen size. */
body .mini-game-modal .mini-game-progress[data-compact="count"],
body.mini-game-page-open .mini-game-modal .mini-game-progress[data-compact="count"] {
  left: auto !important;
  width: auto !important;
  min-width: 72px;
  max-width: none !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  line-height: 42px !important;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}
/* Empty feedback line takes no space; tone comes from the text colour, not a box. */
.mini-game-feedback:empty {
  display: none !important;
}
.mini-game-feedback {
  color: #a33a4e !important;
}
.mini-game-feedback.good {
  color: #23824a !important;
}
/* The game window itself is not a control; it needs no focus ring around the whole screen. */
.mini-game-modal:focus,
.mini-game-modal:focus-visible {
  outline: none;
}

/* ============ Sparkle Kitchen (3D) recipe book ============ */
/* The picker is the game, so it stays; it just fits its content now, sits over the scene like a
   storybook page, and drops the second copy of the treat count (the top-right pill has it). */
.sparkle3d-book {
  bottom: auto !important;
  max-height: calc(100% - 110px);
  padding: 20px 22px !important;
  border: var(--hud-hairline) !important;
  border-radius: var(--hud-radius) !important;
  background: var(--hud-pearl-strong) !important;
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  box-shadow: var(--hud-shadow) !important;
  color: var(--hud-ink) !important;
}
.sparkle3d-book-head p {
  display: none !important;
}
.sparkle3d-book-head h3,
.sparkle3d-book > h3 {
  margin: 0 0 14px !important;
  font: 700 22px/1.2 var(--hud-story-font) !important;
  color: var(--hud-ink) !important;
}
.sparkle3d-recipes button {
  border: var(--hud-hairline) !important;
  border-radius: 16px !important;
  background: rgba(255, 255, 255, 0.86) !important;
  color: var(--hud-ink) !important;
  font-family: var(--hud-font) !important;
  box-shadow: var(--hud-shadow-soft) !important;
}
.sparkle3d-recipes button:disabled {
  background: rgba(255, 255, 255, 0.5) !important;
  box-shadow: none !important;
}
.sparkle3d-recipes button:disabled {
  opacity: 0.6;
}

/* Loose places (after the first moon key), outdoors: one family with the rest of the HUD.
   On phones they become small chips above the move pad and the jump button instead of covering
   the middle of the screen, and the Time Chimes tower no longer sits on top of the jump button. */
body:not(.castle-active-quest):not(.castle-hallway) #ll-trigger,
body:not(.castle-active-quest):not(.castle-hallway) #ptt-trigger-btn {
  min-height: 48px;
  padding: 6px 16px 6px 12px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl);
  -webkit-backdrop-filter: var(--hud-blur);
  backdrop-filter: var(--hud-blur);
  color: var(--hud-ink);
  font: 700 14px/1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}
body:not(.castle-active-quest):not(.castle-hallway) #bt-trigger .bt-label {
  padding: 5px 10px;
  border: var(--hud-hairline);
  border-radius: var(--hud-pill);
  background: var(--hud-pearl-strong);
  color: var(--hud-ink);
  font: 700 12px/1 var(--hud-font);
  box-shadow: var(--hud-shadow-soft);
}
@media (max-width: 520px) {
  body:not(.castle-active-quest):not(.castle-hallway) #ll-trigger {
    left: 12px;
    bottom: max(188px, calc(env(safe-area-inset-bottom, 0px) + 188px));
    min-height: 44px;
    font-size: 13px;
  }
  body:not(.castle-active-quest):not(.castle-hallway) #ptt-trigger-btn {
    right: 12px;
    bottom: max(188px, calc(env(safe-area-inset-bottom, 0px) + 188px));
    min-height: 44px;
    font-size: 13px;
  }
  body:not(.castle-active-quest):not(.castle-hallway) #bt-trigger {
    top: auto;
    right: 12px;
    bottom: max(238px, calc(env(safe-area-inset-bottom, 0px) + 238px));
    transform: none;
    min-width: 0;
    min-height: 44px;
    padding: 2px 12px 2px 4px;
    flex-direction: row;
    gap: 6px;
    border: var(--hud-hairline);
    border-radius: var(--hud-pill);
    background: var(--hud-pearl);
    -webkit-backdrop-filter: var(--hud-blur);
    backdrop-filter: var(--hud-blur);
    box-shadow: var(--hud-shadow-soft);
  }
  body:not(.castle-active-quest):not(.castle-hallway) #bt-trigger:active {
    transform: scale(0.94);
  }
  body:not(.castle-active-quest):not(.castle-hallway) #bt-trigger .bt-sprite {
    width: 40px;
    height: 40px;
  }
  body:not(.castle-active-quest):not(.castle-hallway) #bt-trigger .bt-label {
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
    font-size: 13px;
  }
}

/* Castle guidance never shows through a mini-game. */
body.mini-game-page-open .castle-quest-chapters,
body.mini-game-page-open .station-hint,
body.mini-game-page-open .moon-key-route-overlay {
  visibility: hidden !important;
}