/* ─── LIGHT MODE RAW RGB VALUES (for rgba() usage across game CSS) ─── */
:root {
  --ht-ink-raw: 42, 42, 40;
  --ht-bg-raw:  236, 234, 224;
}

/* ─── DARK MODE VARIABLES ─── */
html[data-theme="dark"] {
  --ht-bg:          #1C1C1A;
  --ht-ink:         #ECEAE0;
  --ht-ink-mid:     #B8B6AC;
  --ht-accent:      #6B8AFF;
  --ht-accent-sage: #9BC1BC;
  --ht-ink-raw:     236, 234, 224;
  --ht-bg-raw:      28, 28, 26;
  /* Legacy aliases */
  --brand-blue:     #6B8AFF;
  --text-cream:     #1C1C1A;
  --bg-dark:        #ECEAE0;
  --border:         rgba(236, 234, 224, 0.3);
  --shadow:         2px 2px 0 rgba(236, 234, 224, 0.15);
  scrollbar-color:  var(--ht-ink) var(--ht-bg);
}

/* ─── DARK MODE COMPONENT OVERRIDES ─── */

/* Hardcoded rgba(236,234,224,...) used as bg color — flip to dark bg */
html[data-theme="dark"] .card:hover p {
  color: rgba(var(--ht-bg-raw), 0.75);
}
html[data-theme="dark"] .nav-card:hover p {
  color: rgba(var(--ht-bg-raw), 0.7);
}

/* Card thumbnail blend mode — multiply on dark bg makes images invisible */
html[data-theme="dark"] .card-thumb img {
  mix-blend-mode: normal;
}
html[data-theme="dark"] .card:hover .card-thumb img {
  filter: grayscale(1) contrast(1.4);
}

/* Resources page dot pattern samples — hardcoded hex colours */
html[data-theme="dark"] .dot-sm-bg {
  background-image: radial-gradient(circle, #ECEAE0 1px, transparent 1px) !important;
  background-color: #1C1C1A !important;
}
html[data-theme="dark"] .dot-md-bg {
  background-image: radial-gradient(circle, #ECEAE0 2.2px, transparent 2.2px) !important;
  background-color: #1C1C1A !important;
}
html[data-theme="dark"] .dot-lg-bg {
  background-image: radial-gradient(circle, #ECEAE0 4.5px, transparent 4.5px) !important;
  background-color: #1C1C1A !important;
}

/* Resources page section header dot strip */
html[data-theme="dark"] .resource-section-header {
  background-image: radial-gradient(circle, var(--ht-ink) 1px, transparent 1px) !important;
  background-color: var(--ht-bg) !important;
}

/* Crypto empire — the game CSS has a second :root block with hardcoded light colours.
   Override all skin vars when in dark mode on the crypto-empire page. */
html[data-theme="dark"] body.crypto-empire {
  --bg-primary:     #1C1C1A;
  --bg-secondary:   rgba(var(--ht-ink-raw), 0.05);
  --bg-tertiary:    rgba(var(--ht-ink-raw), 0.08);
  --text-primary:   #ECEAE0;
  --text-secondary: rgba(var(--ht-ink-raw), 0.65);
  --border-color:   rgba(var(--ht-ink-raw), 0.2);
  --card-bg:        rgba(var(--ht-ink-raw), 0.04);
  --glass-bg:       rgba(var(--ht-ink-raw), 0.04);
  --glass-border:   rgba(var(--ht-ink-raw), 0.2);
  --success:        #4ade80;
  --warning:        #fbbf24;
  --danger:         #ff8787;
}

/* Higher-or-lower movie budget inline CSS overrides */
html[data-theme="dark"] .modal-overlay {
  background: rgba(var(--ht-bg-raw), 0.96) !important;
}
html[data-theme="dark"] .movie-card {
  background: rgba(var(--ht-ink-raw), 0.08) !important;
}

/* ─── THEME TOGGLE BUTTON ─── */
.nav-toggle-wrap {
  display: flex;
  align-items: center;
  padding: 0 16px;
  height: 100%;
  border-left: 1px solid var(--ht-ink);
  flex-shrink: 0;
  transition: border-color 0.4s;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 30px;
  cursor: pointer;
}

.switch #theme-toggle-input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: var(--ht-accent);
  transition: 0.4s;
  z-index: 0;
  overflow: hidden;
}

.sun-moon {
  position: absolute;
  height: 22px;
  width: 22px;
  left: 4px;
  bottom: 4px;
  background-color: #FDE68A;
  transition: 0.4s;
}

#theme-toggle-input:checked + .slider {
  background-color: #1C1C1A;
}

#theme-toggle-input:focus + .slider {
  box-shadow: 0 0 0 3px var(--ht-accent);
}

#theme-toggle-input:checked + .slider .sun-moon {
  transform: translateX(30px);
  background-color: #ECEAE0;
  animation: jf-rotate-center 0.6s ease-in-out both;
}

.moon-dot {
  opacity: 0;
  transition: 0.4s;
  fill: #9BC1BC;
}

#theme-toggle-input:checked + .slider .sun-moon .moon-dot {
  opacity: 1;
}

.slider.round {
  border-radius: 30px;
}

.slider.round .sun-moon {
  border-radius: 50%;
}

/* Moon craters */
#moon-dot-1 {
  left: 10px;
  top: 3px;
  position: absolute;
  width: 5px;
  height: 5px;
  z-index: 4;
}

#moon-dot-2 {
  left: 2px;
  top: 9px;
  position: absolute;
  width: 9px;
  height: 9px;
  z-index: 4;
}

#moon-dot-3 {
  left: 14px;
  top: 16px;
  position: absolute;
  width: 3px;
  height: 3px;
  z-index: 4;
}

/* Sun rays */
#light-ray-1 {
  left: -8px;
  top: -8px;
  position: absolute;
  width: 40px;
  height: 40px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-2 {
  left: -50%;
  top: -50%;
  position: absolute;
  width: 50px;
  height: 50px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

#light-ray-3 {
  left: -18px;
  top: -18px;
  position: absolute;
  width: 56px;
  height: 56px;
  z-index: -1;
  fill: white;
  opacity: 10%;
}

/* Clouds */
.cloud-light {
  position: absolute;
  fill: #ECEAE0;
  animation-name: jf-cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
}

/* PERF: the cloud drift + star twinkle are decorative loops that otherwise run
   forever inside the sticky nav on every page, keeping the compositor from
   ever idling. Pause them unless the toggle is actually being looked at
   (hovered or keyboard-focused). */
.cloud-light,
.cloud-dark,
.star {
  animation-play-state: paused;
}
.switch:hover .cloud-light,
.switch:hover .cloud-dark,
.switch:hover .star,
.nav-toggle-wrap:focus-within .cloud-light,
.nav-toggle-wrap:focus-within .cloud-dark,
.nav-toggle-wrap:focus-within .star {
  animation-play-state: running;
}
@media (prefers-reduced-motion: reduce) {
  .cloud-light, .cloud-dark, .star { animation: none; }
}

.cloud-dark {
  position: absolute;
  fill: #B8B6AC;
  animation-name: jf-cloud-move;
  animation-duration: 6s;
  animation-iteration-count: infinite;
  animation-delay: 1s;
}

#cloud-1 { left: 28px; top: 13px; width: 36px; }
#cloud-2 { left: 42px; top: 8px;  width: 18px; }
#cloud-3 { left: 16px; top: 20px; width: 28px; }
#cloud-4 { left: 34px; top: 16px; width: 36px; }
#cloud-5 { left: 46px; top: 12px; width: 18px; }
#cloud-6 { left: 20px; top: 22px; width: 28px; }

@keyframes jf-cloud-move {
  0%   { transform: translateX(0px); }
  40%  { transform: translateX(4px); }
  80%  { transform: translateX(-4px); }
  100% { transform: translateX(0px); }
}

/* Stars (night mode) */
.stars {
  transform: translateY(-32px);
  opacity: 0;
  transition: 0.4s;
}

.star {
  fill: #ECEAE0;
  position: absolute;
  transition: 0.4s;
  animation-name: jf-star-twinkle;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

#theme-toggle-input:checked + .slider .stars {
  transform: translateY(0);
  opacity: 1;
}

#star-1 { width: 18px; top: 2px;  left: 3px;  animation-delay: 0.3s; }
#star-2 { width: 6px;  top: 14px; left: 3px;  }
#star-3 { width: 10px; top: 18px; left: 10px; animation-delay: 0.6s; }
#star-4 { width: 16px; top: 0px;  left: 18px; animation-delay: 1.3s; }

@keyframes jf-star-twinkle {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.2); }
  80%  { transform: scale(0.8); }
  100% { transform: scale(1); }
}

@keyframes jf-rotate-center {
  0%   { transform: translateX(30px) rotate(0deg); }
  100% { transform: translateX(30px) rotate(360deg); }
}

/* Accessible label */
.switch[aria-label] {
  cursor: pointer;
}

@media (max-width: 480px) {
  .nav-toggle-wrap { padding: 0 12px; }
  .switch { width: 50px; height: 26px; }
  .sun-moon { width: 18px; height: 18px; left: 4px; bottom: 4px; }
  #theme-toggle-input:checked + .slider .sun-moon { transform: translateX(24px); }
  @keyframes jf-rotate-center {
    0%   { transform: translateX(24px) rotate(0deg); }
    100% { transform: translateX(24px) rotate(360deg); }
  }
}