/* Theme tokens and intentional day / evening compositions. */
:root {
  color-scheme: light;
  --surface-raised: #fff;
  --header: #fff9fbf5;
  --accent-warm: #925d32;
  --button-ink: #fff;
  --button-hover: #a7164b;
  --toggle-track: #f1e3eb;
  --toggle-selected: #fff;
  --toggle-ink: #46112d;
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --paper: #160d17;
  --surface: #241522;
  --surface-raised: #2b1928;
  --ink: #fff2f7;
  --muted: #c8afbf;
  --rose: #f3a2c2;
  --berry: #321b30;
  --blush: #332032;
  --soft: #201320;
  --line: #54364c;
  --shadow: 0 20px 55px #06020745;
  --focus: #e8caa0;
  --scroll-thumb: #87617c;
  --scroll-track: #160d17;
  --scroll-hover: #bf8aa8;
  --scroll-active: #f3a2c2;
  --header: #160d17f5;
  --accent-warm: #e8caa0;
  --button-ink: #28121f;
  --button-hover: #ffc1d9;
  --toggle-track: #2f1e2d;
  --toggle-selected: #f3a2c2;
  --toggle-ink: #28121f;
}
.site-header { background: var(--header); border-color: var(--line); }
.header-inner { gap: 22px; }
.desktop-nav { gap: 22px; }
.header-controls { display: flex; align-items: center; gap: 16px; flex-shrink: 0; }
.theme-toggle {
  position: relative;
  isolation: isolate;
  display: inline-grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  width: 150px;
  min-height: 44px;
  padding: 4px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--toggle-track);
  color: var(--muted);
  font-size: .75rem;
  font-weight: 600;
  line-height: 1;
  flex-shrink: 0;
}
.theme-toggle:before {
  content: '';
  position: absolute;
  z-index: -1;
  left: 4px;
  top: 4px;
  bottom: 4px;
  width: calc(50% - 4px);
  border-radius: 999px;
  background: var(--toggle-selected);
  box-shadow: 0 2px 6px #38102612;
  transition: transform .25s ease, background .25s ease;
}
.theme-choice { display: flex; align-items: center; justify-content: center; gap: 7px; min-height: 34px; }
.theme-choice-light { color: var(--toggle-ink); }
.theme-toggle[aria-pressed="true"]:before { transform: translateX(100%); }
.theme-toggle[aria-pressed="true"] .theme-choice-light { color: var(--muted); }
.theme-toggle[aria-pressed="true"] .theme-choice-dark { color: var(--toggle-ink); }
.theme-sun { width: 11px; height: 11px; border: 1.5px solid currentColor; border-radius: 50%; box-shadow: 0 -6px 0 -4px currentColor, 0 6px 0 -4px currentColor, 6px 0 0 -4px currentColor, -6px 0 0 -4px currentColor, 4px 4px 0 -4px currentColor, -4px -4px 0 -4px currentColor, 4px -4px 0 -4px currentColor, -4px 4px 0 -4px currentColor; margin: 3px; }
.theme-moon { width: 15px; height: 15px; border-radius: 50%; box-shadow: inset 5px -3px 0 0 currentColor; transform: rotate(-15deg); margin: 1px; }
.button { color: var(--button-ink); }
.button:hover { color: var(--button-ink); background: var(--button-hover); }
.button.light { background: var(--surface); color: var(--ink); }
.button.light:hover { background: var(--blush); color: var(--ink); }
.floating-music, .related-link, .directory-card, .game-tile, .gallery-item {
  background: var(--surface);
  border-color: var(--line);
}
.image-tag, .detail-photo-label { background: var(--surface); color: var(--ink); border: 1px solid var(--line); }
.card-icon { border-color: var(--line); }
.site-footer { background: var(--surface); }
.dialog-close { background: var(--surface-raised); color: var(--ink); }
.mobile-menu nav { background: var(--surface); color: var(--ink); }

/* Evening edition: cinematic framing and a different editorial rhythm. */
:root[data-theme="dark"] .hero-photo {
  border-radius: 24px 150px 24px 24px;
  box-shadow: 0 0 0 1px #b9859c4d, 0 24px 65px #06020755;
}
:root[data-theme="dark"] .hero-photo > img,
:root[data-theme="dark"] .editorial-image > img,
:root[data-theme="dark"] .detail-photo > img {
  filter: saturate(.86) brightness(.91);
}
:root[data-theme="dark"] .hero-sticker {
  background: var(--accent-warm);
  color: #281b20;
  border-color: #e8caa0;
  transform: rotate(-9deg);
  box-shadow: 0 8px 28px #06020738;
}
:root[data-theme="dark"] .hero-sticker em { color: #713148; }
:root[data-theme="dark"] .hero-copy .eyebrow,
:root[data-theme="dark"] .small-label { color: var(--accent-warm); }
:root[data-theme="dark"] .floating-music { background: var(--surface-raised); border-radius: 10px 24px 24px 24px; }
:root[data-theme="dark"] .possibilities { background: var(--surface); }
:root[data-theme="dark"] .experience-card { border-radius: 18px 18px 60px 18px; }
:root[data-theme="dark"] .rose-card {
  background: linear-gradient(145deg, #47273f, #2a1a2a);
  border: 1px solid #765269;
}
:root[data-theme="dark"] .rose-card .card-icon { color: var(--accent-warm); border-color: #9a7283; }
:root[data-theme="dark"] .editorial-image { border-radius: 100px 18px 18px 18px; }
:root[data-theme="dark"] .detail-photo { border-radius: 24px 110px 24px 24px; box-shadow: 0 0 0 1px #b9859c4d; }
:root[data-theme="dark"] .icon-box { border: 1px solid #68455d; background: #382237; }
:root[data-theme="dark"] .directory-card { border-radius: 12px 12px 36px 12px; }
:root[data-theme="dark"] .directory-card:hover,
:root[data-theme="dark"] .related-link:hover { background: #301d2e; border-color: #a47391; }
:root[data-theme="dark"] .category-nav a { background: var(--surface); border-color: var(--line); }
:root[data-theme="dark"] .category-nav a:hover { background: var(--blush); }
:root[data-theme="dark"] .game-tile:nth-child(3n + 2) .game-symbol { background: #2c2540; color: #c7ade8; }
:root[data-theme="dark"] .game-tile:nth-child(3n) .game-symbol { background: #3c2b28; color: #e8caa0; }
:root[data-theme="dark"] .closing { background: #2d192b; border-block: 1px solid var(--line); }
:root[data-theme="dark"] .closing em { color: var(--accent-warm); }
:root[data-theme="dark"] .closing .button.light { background: var(--accent-warm); color: #28121f; }
:root[data-theme="dark"] .closing .button.light:hover { background: #f5dabb; color: #28121f; }
:root[data-theme="dark"] .gallery-item { border-radius: 14px 14px 30px 14px; }
:root[data-theme="dark"] .photo-dialog { border: 1px solid var(--line); }
:root[data-theme="dark"] ::selection { background: #f3a2c2; color: #28121f; }

@media (min-width: 961px) {
  :root[data-theme="dark"] .home-hero { grid-template-columns: 1fr 1fr; grid-template-areas: 'art copy'; gap: 68px; }
  :root[data-theme="dark"] .hero-copy { grid-area: copy; }
  :root[data-theme="dark"] .hero-art { grid-area: art; }
  :root[data-theme="dark"] .hero-sticker { left: -15px; right: auto; }
  :root[data-theme="dark"] .floating-music { left: auto; right: -26px; }
  :root[data-theme="dark"] .experience-grid { grid-template-columns: .92fr 1.16fr .92fr; }
  :root[data-theme="dark"] .rose-card { padding: 38px; }
  :root[data-theme="dark"] .split-section { grid-template-columns: 1fr 1fr; gap: 85px; }
  :root[data-theme="dark"] .split-section .editorial-copy { grid-column: 1; grid-row: 1; }
  :root[data-theme="dark"] .split-section .editorial-image { grid-column: 2; grid-row: 1; }
  :root[data-theme="dark"] .detail-hero { grid-template-columns: .92fr 1.08fr; gap: 75px; }
  :root[data-theme="dark"] .detail-hero > div:first-child { grid-column: 2; grid-row: 1; }
  :root[data-theme="dark"] .detail-photo { grid-column: 1; grid-row: 1; }
}
@media (max-width: 1280px) { .header-cta { display: none; } }
@media (max-width: 960px) {
  .header-inner { position: relative; }
  .desktop-nav { display: none; }
  .header-controls { margin-left: auto; }
  .mobile-menu { display: block; }
  .mobile-menu summary { display: flex; align-items: center; gap: 12px; list-style: none; min-height: 44px; font-size: .8rem; font-weight: 600; }
  .mobile-menu summary::-webkit-details-marker { display: none; }
  .menu-lines { width: 19px; height: 12px; border-block: 1.5px solid currentColor; position: relative; }
  .menu-lines:after { content: ''; position: absolute; inset-inline: 0; top: 4px; border-top: 1.5px solid currentColor; }
  .mobile-menu nav { position: absolute; top: calc(100% - 1px); left: 0; right: 0; padding: 18px 22px; border: 1px solid var(--line); border-radius: 0 0 18px 18px; box-shadow: var(--shadow); max-height: 75vh; overflow-y: auto; z-index: 30; }
  .mobile-menu nav a { display: flex; align-items: center; min-height: 48px; border-bottom: 1px solid var(--line); font-size: .9rem; }
  .mobile-menu nav a:last-child { border: 0; }
  :root[data-theme="dark"] .hero-photo { border-radius: 22px 110px 22px 22px; }
}
@media (max-width: 550px) {
  .header-inner { gap: 10px; }
  .header-controls { gap: 14px; }
  .theme-toggle { width: 88px; }
  .theme-choice-label { display: none; }
  .mobile-menu summary { width: 44px; justify-content: center; }
  .mobile-menu summary > span:first-child { display: none; }
  :root[data-theme="dark"] .hero-photo { border-radius: 20px 100px 20px 20px; }
  :root[data-theme="dark"] .hero-sticker { right: 8px; top: -8px; }
  :root[data-theme="dark"] .floating-music { left: 12px; bottom: 3px; }
}
@media (max-width: 360px) {
  .header-controls { gap: 8px; }
  .header-inner .brand { font-size: 1.8rem; }
  .header-inner .brand img { width: 34px; height: 34px; }
}
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) {
  .theme-toggle:before { transition: none; }
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}
@media (forced-colors: active) {
  .theme-toggle { border: 1px solid ButtonText; color: ButtonText; }
  .theme-toggle:before { background: Highlight; box-shadow: none; forced-color-adjust: none; }
  .theme-choice-light, .theme-toggle[aria-pressed="true"] .theme-choice-dark { color: HighlightText; forced-color-adjust: none; }
  .theme-toggle[aria-pressed="true"] .theme-choice-light { color: ButtonText; }
}