/* ============ Day and night mode ============ */
/* Night is the site's original neon look. Day is a soft pastel daylight look with its own effects:
   sun rays and drifting light motes instead of stars, blur-in reveals instead of tilts, and a
   light sweep on buttons instead of neon glow. Immersive 3D rooms keep dark overlays so their
   text stays readable; their scenes switch to daylight in JS (see stage.js). */

/* Switching: a circular wipe from the toggle. */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
::view-transition-new(root) { animation: vt-reveal 0.75s cubic-bezier(.6,.1,.3,1); }
@keyframes vt-reveal { from { clip-path: circle(0 at var(--vt-x, 50%) var(--vt-y, 0)); } to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 0)); } }

/* The toggle */
.site-nav .nav-links { margin-left: auto; }
.theme-toggle { order: 5; flex: none; padding: 0; border: 0; background: none; cursor: pointer; }
.tt-track {
  position: relative; display: block; width: 58px; height: 30px; border-radius: 999px; overflow: hidden;
  background: linear-gradient(135deg, #0b0620, #2a0a3a); border: 1px solid rgba(255,255,255,0.18);
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5); transition: background 0.5s;
}
.tt-knob {
  position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: #f4f7f9; box-shadow: 0 0 10px rgba(214,222,228,0.7); transition: transform 0.5s cubic-bezier(.6,-0.3,.3,1.4), background 0.5s, box-shadow 0.5s;
}
.tt-knob svg { position: absolute; width: 15px; height: 15px; transition: opacity 0.3s, transform 0.5s; }
.tt-moon { fill: #5f6b73; }
.tt-sun { fill: #fff; stroke: #fff; opacity: 0; transform: rotate(-90deg) scale(0.5); }
.tt-star { position: absolute; width: 3px; height: 3px; border-radius: 50%; background: #fff; transition: opacity 0.4s, transform 0.5s; }
.tt-star.s1 { top: 8px; right: 12px; } .tt-star.s2 { top: 18px; right: 20px; width: 2px; height: 2px; }
.tt-cloud { position: absolute; left: 8px; bottom: 5px; width: 16px; height: 6px; border-radius: 6px; background: #fff; opacity: 0; transform: translateX(-10px); transition: 0.5s; }
.theme-toggle:hover .tt-knob { box-shadow: 0 0 16px rgba(255,255,255,0.9); }
.theme-toggle:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 999px; }
[data-theme='day'] .tt-track { background: linear-gradient(135deg, #8fd3ff, #ffc6e3); border-color: rgba(26,11,18,0.15); box-shadow: inset 0 2px 6px rgba(0,0,0,0.12); }
[data-theme='day'] .tt-knob { transform: translateX(28px); background: #ffb3dc; box-shadow: 0 0 14px #ff7ac8; }
[data-theme='day'] .tt-moon { opacity: 0; transform: rotate(90deg) scale(0.5); }
[data-theme='day'] .tt-sun { opacity: 1; transform: none; }
[data-theme='day'] .tt-star { opacity: 0; transform: translateY(8px); }
[data-theme='day'] .tt-cloud { opacity: 0.95; transform: none; }
@media (max-width: 760px) {
  .theme-toggle { order: 1; margin-left: auto; }
  .nav-toggle { order: 2; }
}

/* ---------- Day palette: warm porcelain ----------
   One base (porcelain white), one ink (deep plum), one accent per page (rose for Home and
   Martnae, deep teal for The Diamond Empire) and silver for metal. Every surface is either a
   frosted porcelain card or a framed "window" onto a 3D scene, so nothing fights for attention. */
:root[data-theme='day'] {
  --bg: #fbf6f3;
  --ink: #2a1622;
  --ink-soft: rgba(42, 22, 34, 0.84);
  --ink-faint: rgba(42, 22, 34, 0.12);
  --glass: rgba(255, 255, 255, 0.78);
  --silver: #6f7b83;
  --surface: rgba(255, 255, 255, 0.82);
  --line: rgba(42, 22, 34, 0.1);
  --soft-shadow: 0 18px 44px rgba(42, 22, 34, 0.09), 0 2px 6px rgba(42, 22, 34, 0.04);
  --blush: #c2185b;
  color-scheme: light;
}
[data-theme='day'] .theme-home, [data-theme='day'] .theme-martnae { --accent: #c2185b; --hot: #d4007f; }
[data-theme='day'] .theme-empire { --accent: #0a7f8c; --teal: #0a7f8c; }

[data-theme='day'] body { background: linear-gradient(180deg, #fdf1f5 0%, #fbf6f3 45%, #f7f0f6 100%); background-attachment: fixed; }
[data-theme='day'] .theme-empire { background: linear-gradient(180deg, #eef7f8 0%, #f8faf9 45%, #f1f5f6 100%); background-attachment: fixed; }

/* Soft sun rays in one corner and slow white light motes: day's answer to the starfield. */
[data-theme='day'] body::before {
  content: ''; position: fixed; z-index: -1; top: -45vmax; right: -45vmax; width: 110vmax; height: 110vmax; pointer-events: none;
  background: repeating-conic-gradient(from 0deg, rgba(255, 170, 205, 0.35) 0deg 3deg, transparent 3deg 14deg);
  -webkit-mask: radial-gradient(closest-side, #000, transparent); mask: radial-gradient(closest-side, #000, transparent);
  animation: rays 120s linear infinite; opacity: 0.45;
}
[data-theme='day'] body::after {
  content: ''; position: fixed; inset: -20% 0 0; z-index: -1; pointer-events: none;
  background-image: radial-gradient(circle, rgba(212, 0, 127, 0.28) 0 2px, transparent 3px), radial-gradient(circle, rgba(10, 127, 140, 0.22) 0 1.5px, transparent 2.5px);
  background-size: 190px 230px, 130px 160px; background-position: 0 0, 50px 70px;
  animation: motes 50s linear infinite;
}
@keyframes rays { to { transform: rotate(360deg); } }
@keyframes motes { to { background-position: 190px -460px, 180px -320px; } }
@media (prefers-reduced-motion: reduce) { [data-theme='day'] body::before, [data-theme='day'] body::after { animation: none; } }

/* Type: no neon halos by day, just crisp ink. */
[data-theme='day'] :is(h1, h2, h3, .eyebrow, .lead) { text-shadow: none; }
[data-theme='day'] .theme-empire .hero h1 { background: linear-gradient(180deg, #0f9aa8, #075e68); -webkit-background-clip: text; background-clip: text; color: transparent; filter: none; }
[data-theme='day'] .crown { color: #6f7b83; filter: none; }
[data-theme='day'] .hero-inner::before { background: radial-gradient(closest-side, rgba(251,246,243,0.8), rgba(251,246,243,0)); }
[data-theme='day'] .hero .lead { color: var(--ink-soft); }
[data-theme='day'] .hero .avatar { border-color: #fff; box-shadow: 0 0 0 8px rgba(255,255,255,0.8), var(--soft-shadow); }
[data-theme='day'] .sig text { stroke: #8c1d4f; stroke-opacity: 0.3; filter: drop-shadow(0 8px 16px rgba(194,24,91,0.18)); }
[data-theme='day'] #sig-ink stop:nth-child(odd) { stop-color: #8c1d4f; }
[data-theme='day'] #sig-ink stop:nth-child(even) { stop-color: #d4387f; }
[data-theme='day'] .orb-hint { color: #8c1d4f; }
[data-theme='day'] .logo-fallback { color: #c2185b; }

/* Nav, marquee, footer, socials, dock: porcelain glass. */
[data-theme='day'] .site-nav { background: linear-gradient(to bottom, rgba(251,246,243,0.92), rgba(251,246,243,0)); }
[data-theme='day'] .site-nav.scrolled { background: rgba(251, 246, 243, 0.86); box-shadow: 0 1px 0 var(--line); }
[data-theme='day'] .nav-links a[aria-current='page'] { color: #fff; }
@media (max-width: 760px) { [data-theme='day'] .nav-links { background: rgba(251,246,243,0.97); box-shadow: var(--soft-shadow); } }
[data-theme='day'] .marquee { background: rgba(255,255,255,0.6); border-color: var(--line); }
[data-theme='day'] .marquee-track span.star { color: var(--accent); }
[data-theme='day'] .site-footer { background: rgba(255,255,255,0.7); border-color: var(--line); }
[data-theme='day'] .socials a { background: #fff; border-color: var(--line); box-shadow: 0 4px 12px rgba(42,22,34,0.06); }
[data-theme='day'] .socials a:hover .icon { background: #fff; }
[data-theme='day'] :is(.room-dock, .dock) { background: rgba(255,255,255,0.85) !important; border: 1px solid var(--line) !important; box-shadow: var(--soft-shadow) !important; }
[data-theme='day'] :is(.room-dock, .dock) a { color: var(--ink); }
[data-theme='day'] :is(.room-dock, .dock) a:is(.active, [aria-current]) { color: #fff; }

/* Buttons: a sweep of light on hover instead of the neon bloom. */
[data-theme='day'] .btn { position: relative; overflow: hidden; color: #fff; }
[data-theme='day'] .btn::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,0.6) 50%, transparent 70%); transform: translateX(-120%); }
[data-theme='day'] .btn:hover::after { transform: translateX(120%); transition: transform 0.7s ease; }
[data-theme='day'] .btn:hover { box-shadow: 0 12px 26px rgba(42, 22, 34, 0.16); }
[data-theme='day'] .btn.ghost { background: #fff; color: #2a1622; border: 1px solid var(--line); }

/* Reveals: a blur-in from soft focus instead of the night tilt. */
[data-theme='day'] .reveal { transform: translateY(26px) scale(0.985); filter: blur(12px); transition: opacity 0.9s ease, transform 0.9s cubic-bezier(.2,.7,.2,1), filter 0.9s ease; }
[data-theme='day'] .reveal.in { transform: none; filter: none; }

/* Porcelain cards: every content panel that was dark glass. */
[data-theme='day'] :is(.card, .decree, .crest-face, .service, .quote-bar, .boutique, .b-door, .hub-banner, .map-tip, .book-tip,
  .directory-screen, .store-modal, .timer-chip, .status-led, .g-bay, .ew-panel, .mw-copy, .ps-status, .ps-slot, .mw-menu a,
  .k-tip, .g-tip, .toast, .modal-panel:not(.arcade-modal):not(.cert-modal), .bcard-back, .palace, .open-book .btn) {
  background: var(--surface) !important; color: var(--ink); border-color: var(--line) !important; box-shadow: var(--soft-shadow);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
[data-theme='day'] :is(.decree, .crest-face, .service, .boutique, .ew-panel, .mw-copy, .modal-panel, .bcard-back) :is(h2, h3, h4, b, strong):not(.btn *) { color: var(--ink); }
[data-theme='day'] .card { background: #fff !important; }
[data-theme='day'] .crest-face { color: var(--ink); }
[data-theme='day'] .crest-face b, [data-theme='day'] .decree h2, [data-theme='day'] .signature { color: var(--accent); }
[data-theme='day'] .service .price { color: var(--accent); }
[data-theme='day'] .service.in-quote { box-shadow: 0 0 0 2px var(--accent), var(--soft-shadow); }
[data-theme='day'] .tiers { background: rgba(42,22,34,0.05); }
[data-theme='day'] .tiers button[aria-pressed='true'], [data-theme='day'] .shelf-filters button[aria-selected='true'] { background: var(--accent); color: #fff; }
[data-theme='day'] .b-door::before { opacity: 0.6; }
[data-theme='day'] .modal-backdrop { background: rgba(251, 240, 245, 0.6); }
[data-theme='day'] .modal-close { background: #fff; color: var(--ink); border: 1px solid var(--line); }
[data-theme='day'] .bcard-row { background: rgba(194,24,91,0.06); border-color: var(--line); color: var(--ink); }
[data-theme='day'] .bcard-back-title { color: var(--accent); }

/* Inputs and chips */
[data-theme='day'] :is(.guild-tabs button, .map-legend button, .shelf-filters button, .skill-lenses button, .palace-rooms button, .reel-filters button, #reel-filters button) {
  background: #fff; color: #2a1622; border: 1px solid var(--line);
}
[data-theme='day'] .guild-tabs button[aria-selected='true'], [data-theme='day'] #reel-filters button[aria-pressed='true'] { background: var(--accent); color: #fff; border-color: transparent; }
[data-theme='day'] :is(.svc-search input, .boutique-tools input, .rr-tools input, .g-bay input, .directory-screen input[type='search'], .atelier-controls input[type='text'], .atelier-controls select, #mall-search) {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
}
[data-theme='day'] .map-legend { background: linear-gradient(rgba(255,255,255,0.85), transparent); }
[data-theme='day'] .shimmer { background: linear-gradient(100deg, #eef3f5 30%, #f8fbfc 50%, #eef3f5 70%); background-size: 200% 100%; }
[data-theme='day'] .palace-bar, [data-theme='day'] .palace-rooms { background: #f3f5f6; }
[data-theme='day'] .palace-url { background: #fff; color: var(--ink-soft); border: 1px solid var(--line); }

/* HUD chips over the 3D scenes: frosted white with ink text. */
[data-theme='day'] :is(.k-hint, .g-hint, .mw-hint, .k-hud .btn, .room-views .btn, .mall-hud-right .btn, .g-hud-right .btn, .g-turn .btn, .fridge-close, #room-hud-bar .monitor-bar, .room-hud .btn) {
  background: rgba(255,255,255,0.86) !important; color: #2a1622 !important; border: 1px solid var(--line) !important; text-shadow: none; box-shadow: 0 6px 16px rgba(42,22,34,0.1);
}
[data-theme='day'] .mw-hint { animation: none; }
[data-theme='day'] .g-tabs .b-door { background: rgba(255,255,255,0.88); }
[data-theme='day'] .g-tabs .b-door .name { color: var(--ink); }
[data-theme='day'] .g-tabs .b-door[aria-selected='true'] { background: color-mix(in srgb, var(--a) 30%, #fff); }
[data-theme='day'] .elevator, [data-theme='day'] .mall-hud-left .elevator { background: linear-gradient(145deg, rgba(255,255,255,0.92), rgba(238,241,243,0.92)); color: var(--ink); border: 1px solid var(--line); }

/* 3D scenes are framed like windows: a white mat and a soft shadow, no neon outline. */
[data-theme='day'] :is(.room3d, .mall3d, .galleria, .kitchen, .map-wrap, .reading-room, .photo-board, .world) {
  border: 6px solid #fff !important; box-shadow: var(--soft-shadow), 0 0 0 1px var(--line) !important;
}
[data-theme='day'] .world { border-width: 0 !important; border-block: 1px solid var(--line) !important; }
[data-theme='day'] .map-wrap { background: radial-gradient(ellipse at 50% 60%, #ffffff 0%, #dfeff1 70%); }
[data-theme='day'] .photo-board { background: radial-gradient(ellipse at 50% 0%, #fff 0%, #f6e7ee 70%); }
[data-theme='day'] .photo-board .polaroid { box-shadow: 0 12px 26px rgba(42,22,34,0.16); }
/* The library stays black by day too; only its frame changes. */

/* Home worlds by day */
[data-theme='day'] .mw-copy { padding: 22px; border-radius: 20px; }
[data-theme='day'] .mw-kicker { color: var(--accent); }
[data-theme='day'] .mw-sub { color: var(--ink-soft); }
[data-theme='day'] .mw-title { color: #d4007f; text-shadow: 3px 3px 0 #ffd1e6; }
[data-theme='day'] .mw-menu a { color: var(--ink); }
[data-theme='day'] .mw-menu a:hover, [data-theme='day'] .mw-menu a.hot { background: #fff !important; box-shadow: 0 0 0 2px var(--accent), var(--soft-shadow); }
[data-theme='day'] .world-martnae .ps-status.on { background: #ff3b5c !important; color: #fff; }
[data-theme='day'] .ps-slot .icon { background: var(--ink); }
[data-theme='day'] .ew-panel::after { opacity: 0.4; }
[data-theme='day'] .ew-crest { color: #6f7b83; filter: none; }
[data-theme='day'] .ew-kicker, [data-theme='day'] .ew-hint { color: #6f7b83; }
[data-theme='day'] .ew-title { background: linear-gradient(180deg, #3d464c 0%, #8e9aa2 55%, #2a3034 100%); -webkit-background-clip: text; background-clip: text; filter: none; }
[data-theme='day'] .ew-sub { color: var(--ink-soft); }
[data-theme='day'] .ew-kpis div { background: #fff; border-color: var(--line); }
[data-theme='day'] .ew-kpis dd { color: #2a3034; }
[data-theme='day'] .ew-kpis dt { color: #6f7b83; }
[data-theme='day'] .ew-cta .btn { color: #fff; background: linear-gradient(180deg, #5f6b73, #2a3034); }
[data-theme='day'] .ew-cta .btn.ghost { background: #fff; color: #2a3034; border-color: var(--line); }
[data-theme='day'] .ew-label { background: rgba(255,255,255,0.9); color: #2a3034; border-color: var(--line); }

/* Gallery frames and certificates hang on a light wall by day. */
[data-theme='day'] .g-frame { background: #fff; box-shadow: 0 0 0 1px var(--line), 0 20px 40px rgba(42,22,34,0.14); }
[data-theme='day'] .g-floor { background: radial-gradient(ellipse at center, rgba(194,24,91,0.12), transparent 70%); }
[data-theme='day'] .cert-mat { background: linear-gradient(135deg, #ffffff, #eef1f3); box-shadow: inset 0 0 0 2px #aab5bc, inset 0 0 0 5px #fff, inset 0 0 0 6px #aab5bc, 0 26px 44px rgba(42,22,34,0.16); }
[data-theme='day'] .cert-light::after { background: radial-gradient(ellipse at 50% 0%, rgba(255,255,255,0.8), transparent 70%); }

/* Surfaces that are really screens or dark objects keep light text on dark. */
[data-theme='day'] :is(.kitchen, .phone, .tablet, .tv, .dev-laptop, .watch, .arcade-modal, .cert-modal, .lightbox, .css-tv, .css-chat, .chat-screen, .vault, .reading-room, .banner, .app-info .status) {
  --ink: #fff; --ink-soft: rgba(255, 255, 255, 0.74); --ink-faint: rgba(255, 255, 255, 0.16);
}
[data-theme='day'] .kitchen .stove, [data-theme='day'] .kitchen .timers { color: #fff; }

/* The fixed background scenes render on black; by day the orb blends in as light. */
/* Background scenes multiply onto the page by day (see stage.js), so their color shows on light. */
[data-theme='day'] .theme-home { --teal: #0a8f9c; }
[data-theme='day'] .theme-home .hero .eyebrow { color: #8c1d4f; }
[data-theme='day'] .theme-home .nav-links a[aria-current='page'] { background: #fff; color: #2a1622; box-shadow: 0 0 0 1px var(--line), 0 4px 12px rgba(42,22,34,0.08); }
[data-theme='day'] .jar-label { color: #c2185b; text-shadow: none; }
[data-theme='day'] .galleria-enter { color: #0c0f11; }
[data-theme='day'] .app-info, [data-theme='day'] .app-info :is(p, span, b, strong, li, small) { color: var(--ink); }
[data-theme='day'] .app-info h3 { color: color-mix(in srgb, var(--app) 55%, #000); }
[data-theme='day'] .app-info .btn:not(.ghost) { background: color-mix(in srgb, var(--app) 55%, #000); color: #fff; }
[data-theme='day'] .mw-hint { color: #0a7f8c; background: rgba(10,127,140,0.08) !important; }
[data-theme='day'] .world-martnae .ps-status { color: #2a1622; }