/* POKKEY - night boutique */
.night {
  --cream: #141B2B;
  --paper: #1C2538;
  --pink: #2A3450;
  --pink-soft: #182034;
  --blush: #243049;
  --blush-deep: #2E3A56;
  --wood: #5A4332;
  --wood-light: #6E5440;
  --wood-dark: #2E2119;
  --oak-top: #6B5242;
  --oak: #4A3829;
  --oak-under: #2A1E17;
  --brass: #D6A546;
  --brass-light: #F1D68C;
  --cocoa: #F3E9D6;
  --cocoa-soft: #C2B59C;
  --coral: #E3B65F;
  --coral-ink: #F1D68C;
  --line: rgba(246, 238, 220, 0.14);
  --gold-ink: #241A12;
  --star: radial-gradient(circle at 23% 31%, rgba(255, 243, 208, 0.9) 0 1px, transparent 1.6px) 0 0 / 211px 173px,
    radial-gradient(circle at 71% 64%, rgba(241, 214, 140, 0.8) 0 1.2px, transparent 1.8px) 0 0 / 293px 241px,
    radial-gradient(circle at 48% 12%, rgba(255, 255, 255, 0.7) 0 0.8px, transparent 1.3px) 0 0 / 157px 199px;
  color-scheme: dark;
}
.theming body, .theming .site-header, .theming .section, .theming .site-footer {
  transition: background-color 0.5s var(--ease), color 0.5s var(--ease);
}

/* Theme toggle */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 1.5px solid var(--line);
  background: var(--paper);
  color: var(--cocoa);
  flex-shrink: 0;
}
.theme-toggle:hover { border-color: var(--coral); }
.theme-toggle svg { position: absolute; inset: 0; margin: auto; width: 22px; height: 22px; transition: transform 0.45s var(--ease), opacity 0.3s; }
.theme-toggle .ic-moon { opacity: 0; transform: rotate(-90deg) scale(0.6); }
.night .theme-toggle .ic-sun { opacity: 0; transform: rotate(90deg) scale(0.6); }
.night .theme-toggle .ic-moon { opacity: 1; transform: none; color: var(--brass-light); }

/* Hero: the shop after closing */
.night .hero {
  background:
    radial-gradient(60% 40% at 50% 0%, rgba(241, 214, 140, 0.12), transparent 70%),
    linear-gradient(180deg, #1B2438, var(--pink-soft));
}
.night .awning::before {
  background:
    linear-gradient(180deg, rgba(255, 255, 255, 0.08), transparent 38%, rgba(0, 0, 0, 0.25)),
    repeating-linear-gradient(90deg, #22304A 0 48px, #B98F46 48px 96px);
}
.night .shop-sign {
  background: linear-gradient(180deg, #232E45, #1A2336);
  box-shadow: inset 0 0 0 3px #232E45, inset 0 0 0 4px rgba(214, 165, 70, 0.7), 0 0 22px 2px rgba(241, 214, 140, 0.28);
  color: var(--brass-light);
}
.night .window { background: linear-gradient(180deg, #5E4636, var(--oak) 70%); box-shadow: inset 0 1px #7A5E48, 0 0 0 1px rgba(0, 0, 0, 0.4), 0 20px 40px -24px rgba(0, 0, 0, 0.7); }
.night .window-glass {
  background:
    radial-gradient(55% 45% at 50% 0%, rgba(241, 214, 140, 0.16), transparent 75%),
    var(--star),
    linear-gradient(180deg, #22304A, #161E30);
  box-shadow: inset 0 0 0 1px rgba(214, 165, 70, 0.55), inset 0 12px 20px -16px #00000099;
}
.night .window-glass { isolation: isolate; }
.night .window-glass::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: var(--star);
  background-position: 97px 61px, 143px 19px, 31px 113px;
  animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity: 0.15; } to { opacity: 0.9; } }
.night .sill { filter: brightness(0.6) saturate(0.8); }
.night .hero-title { color: #F6EBD2; text-shadow: 0 0 28px rgba(241, 214, 140, 0.18); }
.night .plush img { filter: drop-shadow(0 0 22px rgba(241, 214, 140, 0.35)) drop-shadow(0 14px 18px rgba(0, 0, 0, 0.35)); }

/* Sections */
.night .paper::before { opacity: 0.4; }
.night .btn-coral { color: var(--gold-ink); background: linear-gradient(120deg, #E3B65F, #F1D68C 55%, #D6A546); }
.night .btn-coral:hover { background: #F1D68C; }
.night .btn-line:hover { color: var(--gold-ink); }
.night .cta-box { background: radial-gradient(circle at 50% 18%, rgba(241, 214, 140, 0.16), transparent 42%), var(--paper); box-shadow: inset 0 0 0 1px rgba(214, 165, 70, 0.35), 0 12px 28px -22px #000; }
.night .faq details { border-bottom-color: var(--line); }
.night .scene, .night .desk-card { background: var(--paper); border-color: rgba(214, 165, 70, 0.3); }
.night .desk-card { box-shadow: inset 0 0 0 3px var(--paper), inset 0 0 0 4px rgba(214, 165, 70, 0.22), 0 12px 24px -18px #000; }
.night .desk { background: var(--cream); }

/* Shelf: a lit vitrine */
.night .cell {
  background: radial-gradient(70% 60% at 50% 0%, rgba(255, 214, 140, 0.28), transparent 75%), linear-gradient(180deg, #243049, #1A2336);
  box-shadow: 0 0 0 1px var(--brass), 0 0 0 3px #2A1E17, inset 0 10px 18px -12px #000000AA;
}
.night .shelf { background: linear-gradient(180deg, #5E4636, var(--oak) 85%); box-shadow: inset 0 1px #7A5E48, 0 0 0 1px rgba(0, 0, 0, 0.45), 0 30px 46px -30px #000; }
.night .shelf::after { background: linear-gradient(180deg, var(--oak-under), #1A120D); }
.night .case-crest { background: linear-gradient(180deg, #232E45, #1A2336); box-shadow: inset 0 0 0 3px #232E45, inset 0 0 0 4px rgba(214, 165, 70, 0.6), 0 0 18px rgba(241, 214, 140, 0.2); color: var(--brass-light); }
.night .shelf-row { background: linear-gradient(180deg, #1E283C, #161E30); box-shadow: 0 0 0 1px var(--brass), 0 0 0 3px #2A1E17, inset 0 10px 18px -12px #000000AA; }
.night .shelf-row::before { background: #F1D68C; box-shadow: 0 3px 14px rgba(241, 214, 140, 0.5); }
.night .char::before { background: linear-gradient(#3A4660, #232E45); box-shadow: 0 4px 5px #00000055; }
.night .plaque { color: var(--gold-ink); background: linear-gradient(120deg, #E9CF98, #F1D68C 52%, #D9B878); }
.night .plaque small { color: #5A4330; }
.night .plaque::before { background: linear-gradient(180deg, #FFF4D5, #F1D68C); }

/* Diagram, quote rule and tag strings: warm light lines on navy */
.night .xsec-labels, .night .xsec-labels text { fill: var(--cocoa); }
.night .xsec-labels text[fill] { fill: var(--cocoa-soft); }
.night .xsec-labels text[font-weight="800"] { fill: var(--brass-light); }
.night .xsec svg g[stroke="#6E4E3F"] { stroke: rgba(241, 214, 140, 0.7); }
.night .xsec svg g[fill="#6E4E3F"] { fill: var(--brass-light); }
.night .tags::before, .night .tag::before { background: var(--brass); }
.night .paper::before { box-shadow: inset 0 0 0 2px var(--brass); }
.night .facts div { border-left-color: var(--brass); }

/* Pet card stays a physical card: day palette inside */
.night .pet-card {
  --cream: #F8F0E3;
  --paper: #FFF9F0;
  --pink-soft: #FBE4DF;
  --brass: #B68A54;
  --brass-light: #E6CA99;
  --cocoa: #4A2C20;
  --cocoa-soft: #6E4E3F;
  --coral: #E8806B;
  --coral-ink: #A8432D;
  --line: rgba(74, 44, 32, 0.14);
  color-scheme: light;
}
.night .pet-card::backdrop { background: rgb(10 14 24 / 0.6); }

@media (prefers-reduced-motion: reduce) {
  .night .window-glass::before { animation: none; opacity: 0.5; }
  .theme-toggle svg { transition: none; }
}
/* The phone mirrors the real app, so it keeps day colors */
.night .screen {
  --cream: #F8F0E3;
  --paper: #FFF9F0;
  --pink: #F5CFC8;
  --pink-soft: #FBE4DF;
  --blush: #F4DED5;
  --blush-deep: #E8C7BA;
  --brass: #B68A54;
  --brass-light: #E6CA99;
  --cocoa: #4A2C20;
  --cocoa-soft: #6E4E3F;
  --coral: #E8806B;
  --coral-ink: #A8432D;
  --line: rgba(74, 44, 32, 0.14);
  color-scheme: light;
}