/* ═══════════════════════════════════════════════════════════════
   theme.css — "Puzzle Night / Puzzle Day"
   One look for the whole site, taken from Magic Path: a deep starry
   night (dark) and a bright lavender day (light), gold–rose–violet
   highlights, rounded friendly type. Loaded after common.css and
   navbar.css; it only re-colours and re-styles — no layout changes.
   Follows the device's light/dark setting, like the rest of the site.
   ═══════════════════════════════════════════════════════════════ */
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@500;600;700&family=Nunito:wght@400;600;700;800&display=swap');

/* ── DAY (light) ── */
:root {
  --page:    #f4f1ff;
  --surface: #ffffff;
  --panel:   #ece7ff;
  --panel2:  #e0d8fb;
  --panel3:  #d0c5f5;

  --ink:  #1c1538;
  --ink2: #3e3566;
  --ink3: #6a6094;

  --border:  rgba(60,40,140,0.13);
  --border2: rgba(60,40,140,0.28);

  --accent:       #6c4fd6;
  --accent-light: #efe9ff;
  --accent-mid:   #9a82ea;
  --accent-dark:  #4f34b4;

  --red: #c42d55; --red-light: #ffeef3; --red-mid: #e0708e;
  --amber: #9a5b00; --amber-light: #fff4e0; --amber-mid: #c98a1e;
  --blue: #2f58c9; --blue-light: #ecf1ff; --blue-mid: #5b7fe0;
  --purple: #7a3fc8; --purple-light: #f4ecff; --purple-mid: #a070e0;
  --green: #0e8a64; --green-light: #e3f7ef; --green-mid: #3fb98e;
  --gold: #a87000; --gold-light: #fff5d9;

  --hl-solved: #e3f7ef;  --hl-solved-border: #0e8a64;
  --hl-cage: #fff4e0;    --hl-cage-border: #c98a1e;
  --hl-row-col: #ecf1ff; --hl-row-col-border: #5b7fe0;
  --hl-elim: #ffeef3;    --hl-elim-border: #e0708e;
  --hl-try: #f4ecff;     --hl-try-border: #a070e0;

  --cage-0: rgba(108,79,214,0.13);  --cage-1: rgba(47,88,201,0.13);  --cage-2: rgba(232,110,60,0.14);
  --cage-3: rgba(214,51,108,0.12);  --cage-4: rgba(14,138,100,0.13); --cage-5: rgba(201,138,30,0.15);
  --cage-6: rgba(176,60,200,0.12);  --cage-7: rgba(0,150,170,0.13);  --cage-8: rgba(120,90,40,0.13);
  --cage-9: rgba(80,170,60,0.13);   --cage-10: rgba(200,70,70,0.12); --cage-11: rgba(70,70,210,0.12);

  --board-bg: #fbfaff; --board-line: #8a7fb8; --node-empty: #eee9ff;
  --btn-bg: #ece7ff; --btn-bg-hover: #ddd3fb;
  --combo: #4f34b4; --combo-light: #efe9ff; --combo-mid: #9a82ea; --combo-border: #cbbcf3;
  --cream: #f4f1ff; --cream2: #ece7ff; --cream3: #e0d8fb;

  /* theme-only tokens */
  --night:   #0f0c1a;
  --night2:  #1a1530;
  --glow-a:  #ffd166;   /* gold  */
  --glow-b:  #ff6b9d;   /* rose  */
  --glow-c:  #b07ef8;   /* violet */
  --teal:    #06d6a0;
  --sky:     radial-gradient(1200px 600px at 10% -10%, rgba(176,126,248,.22), transparent 60%),
             radial-gradient(900px 500px at 100% 0%, rgba(255,107,157,.14), transparent 60%),
             radial-gradient(900px 700px at 50% 110%, rgba(255,209,102,.16), transparent 60%),
             #f4f1ff;
  --card-shadow: 0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -18px rgba(60,30,140,.45);
  --title-grad: linear-gradient(120deg, #ffd166 0%, #ff6b9d 45%, #b07ef8 100%);
}

/* ── NIGHT (dark) ── */
@media (prefers-color-scheme: dark) {
  :root {
    --page:    #0f0c1a;
    --surface: #1d1832;
    --panel:   #251f40;
    --panel2:  #2d2650;
    --panel3:  #3a3166;

    --ink:  #f0ecff;
    --ink2: #c3b9ea;
    --ink3: #8d82bd;

    --border:  rgba(255,255,255,0.09);
    --border2: rgba(255,255,255,0.20);

    --accent:       #a585ff;
    --accent-light: #231a44;
    --accent-mid:   #7c5cbf;
    --accent-dark:  #d4c3ff;

    --red: #ff7b9c; --red-light: #2a1020; --red-mid: #d0507a;
    --amber: #ffc25c; --amber-light: #2a1e08; --amber-mid: #d09a30;
    --blue: #7fa6ff; --blue-light: #121a38; --blue-mid: #5a7fe0;
    --purple: #c49cff; --purple-light: #22163e; --purple-mid: #9a70e0;
    --green: #3fe0b0; --green-light: #0b2620; --green-mid: #20b088;
    --gold: #ffd166; --gold-light: #2a2208;

    --hl-solved: #0d2a24;  --hl-solved-border: #3fe0b0;
    --hl-cage: #2a1e08;    --hl-cage-border: #ffc25c;
    --hl-row-col: #141c3c; --hl-row-col-border: #7fa6ff;
    --hl-elim: #2c0f1e;    --hl-elim-border: #ff7b9c;
    --hl-try: #24173f;     --hl-try-border: #c49cff;

    --cage-0: rgba(165,133,255,0.18); --cage-1: rgba(127,166,255,0.17); --cage-2: rgba(255,150,90,0.17);
    --cage-3: rgba(255,107,157,0.16); --cage-4: rgba(63,224,176,0.15); --cage-5: rgba(255,209,102,0.16);
    --cage-6: rgba(210,120,255,0.16); --cage-7: rgba(60,210,230,0.15); --cage-8: rgba(200,160,100,0.15);
    --cage-9: rgba(120,220,100,0.15); --cage-10: rgba(255,110,110,0.15); --cage-11: rgba(120,120,255,0.16);

    --tiger: #ffb347; --tiger-dark: #d08a20; --tiger-light: #2a1e08; --tiger-glow: rgba(255,179,71,.30);
    --lamb: #8fb4ff; --lamb-dark: #5a7fe0; --lamb-light: #141c3c; --lamb-glow: rgba(143,180,255,.30);

    --board-bg: #17132b; --board-line: #4a4078; --node-empty: #251f40;
    --btn-bg: #251f40; --btn-bg-hover: #2f2852;
    --combo: #a585ff; --combo-light: #1d1636; --combo-mid: #7c5cbf; --combo-border: #3d3270;
    --cream: #0f0c1a; --cream2: #251f40; --cream3: #2d2650;

    --sky: radial-gradient(1100px 600px at 15% -10%, rgba(124,92,191,.35), transparent 60%),
           radial-gradient(900px 600px at 100% 10%, rgba(255,107,157,.12), transparent 60%),
           radial-gradient(1000px 700px at 50% 120%, rgba(6,214,160,.10), transparent 60%),
           linear-gradient(180deg, #0f0c1a 0%, #141029 100%);
    --card-shadow: 0 1px 0 rgba(255,255,255,.05) inset, 0 14px 40px -20px rgba(0,0,0,.8);
  }
}

/* ═══════════════════ base ═══════════════════ */
html { background: var(--page); }
body {
  font-family: 'Nunito', system-ui, sans-serif;
  background: var(--sky);
  background-attachment: fixed;
  color: var(--ink);
}
/* a quiet field of stars (night) / sparkles (day) behind everything */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(255,255,255,.75), transparent 60%),
    radial-gradient(1.2px 1.2px at 28% 72%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.6px 1.6px at 47% 32%, rgba(255,230,170,.7), transparent 60%),
    radial-gradient(1.1px 1.1px at 63% 84%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.5px 1.5px at 78% 22%, rgba(255,190,220,.65), transparent 60%),
    radial-gradient(1.2px 1.2px at 89% 58%, rgba(255,255,255,.55), transparent 60%),
    radial-gradient(1.3px 1.3px at 6% 52%, rgba(200,180,255,.6), transparent 60%),
    radial-gradient(1.1px 1.1px at 36% 8%, rgba(255,255,255,.5), transparent 60%),
    radial-gradient(1.4px 1.4px at 55% 60%, rgba(255,255,255,.45), transparent 60%),
    radial-gradient(1.2px 1.2px at 94% 90%, rgba(255,230,170,.55), transparent 60%);
  background-size: 640px 640px;
  opacity: 0; animation: ps-twinkle 7s ease-in-out infinite alternate;
}
@media (prefers-color-scheme: dark) { body::before { opacity: .9; } }
@keyframes ps-twinkle { from { filter: brightness(.7); } to { filter: brightness(1.25); } }
@media (prefers-reduced-motion: reduce) { body::before { animation: none; } }

h1, h2, h3, .about-title, .seo-h1, .seo-h2, .seo-section-h2 {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}

/* ═══════════════════ header + nav ═══════════════════ */
header {
  background: linear-gradient(135deg, #0f0c1a 0%, #1f1840 55%, #2b1f55 100%) !important;
  border-bottom: 1px solid rgba(176,126,248,.25);
  box-shadow: 0 10px 30px -18px rgba(124,92,191,.9);
}
.header-title {
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
  font-weight: 700 !important;
  font-size: 23px !important;
  background: var(--title-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent !important;
}
.header-title em { font-style: normal; -webkit-text-fill-color: transparent; color: transparent; }
.header-sub { color: #b9aee6 !important; font-family: 'Nunito', sans-serif; font-weight: 700; letter-spacing: .12em; }

/* ═══════════════════ surfaces & controls ═══════════════════ */
.about-section, .ps-faq details, .ps-rel a, .ps-cards a, .ps-toc, .ps-rules li, .ps-table-wrap,
.game-card, .tool-card, .cat-card, .feature, .help-card, .setup-card, .card, .panel {
  border-radius: 16px;
  box-shadow: var(--card-shadow);
}
.ps-rel a, .ps-cards a, .game-card, .tool-card, .cat-card { transition: transform .15s ease, box-shadow .15s ease, border-color .15s; }
.ps-rel a:hover, .ps-cards a:hover, .game-card:hover, .tool-card:hover, .cat-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--card-shadow), 0 0 0 1px var(--accent), 0 12px 30px -14px var(--accent);
}

/* primary actions get the Magic Path treatment */
.start-btn, .btn-primary, .ps-btn.go, .game-play-btn, .gen-btn, .solve-btn, .cta-primary {
  background: linear-gradient(135deg, #7c5cbf 0%, #b07ef8 100%) !important;
  border-color: transparent !important; color: #fff !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 22px -10px rgba(124,92,191,.9);
  font-family: 'Fredoka', 'Nunito', sans-serif !important; font-weight: 600 !important; letter-spacing: .02em;
}
.start-btn:hover, .btn-primary:hover, .ps-btn.go:hover, .game-play-btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.setup-opt, .menu-btn { border-radius: 10px !important; font-family: 'Nunito', sans-serif !important; font-weight: 700 !important; }
.setup-opt.active {
  background: linear-gradient(135deg, #7c5cbf, #b07ef8) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 6px 16px -8px rgba(124,92,191,.9);
}

/* help pages */
.ps-page h1 em, .ps-lede em { font-style: normal; background: var(--title-grad); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.ps-rules li::before { background: linear-gradient(135deg, #7c5cbf, #b07ef8) !important; border-radius: 8px !important; }
.ps-example { border-left-color: var(--glow-a) !important; }
.ps-foot { border-top-color: rgba(176,126,248,.25) !important; }
.ps-foot h2 { font-family: 'Fredoka', sans-serif !important; letter-spacing: .08em !important; color: var(--accent) !important; }

/* ═══════════════════ type: friendly text, digits stay DM Mono ═══════════════════ */
/* inherited text inside puzzle grids keeps the old digit font */
:where(td, th, svg text:not([font-family])) { font-family: 'DM Mono', 'Courier New', monospace; }
:where(.ps-page, .ps-guide, .ps-foot, .about-section, .seo-section) :where(td, th) { font-family: inherit; }
.ps-table, .ps-table :where(td, th) { font-family: 'DM Mono', monospace; }
h1 em, h2 em, h3 em, .header-title em { font-style: normal; }

/* UI labels, chips and buttons move to the friendly faces */
.chip, .ctrl-btn, .complete-btn, .side-head, .generating, .badge, .phase-tab, .step-btn,
.btn, .g-pill, .game-tagline, .breadcrumb, .pg-hero-eyebrow, .section-label, .menu-btn,
.setup-label, .setup-opt, .status-bar, .play-again-btn, .ps-crumbs, .ps-chips a, .ps-toc b,
.nav-dropdown a, .hint-btn, .mode-btn, .tab-btn, .tab, .diff-btn, .size-btn, .action-btn {
  font-family: 'Nunito', system-ui, sans-serif !important;
  font-weight: 700;
  letter-spacing: .02em;
}
.side-head, .section-label, .pg-hero-eyebrow, .nav-col-label, .ps-toc b, .setup-label {
  font-family: 'Fredoka', 'Nunito', sans-serif !important;
  font-weight: 600 !important;
  letter-spacing: .12em !important;
}
.chip, .g-pill, .badge { border-radius: 999px !important; }

/* ═══════════════════ accent fills become the violet glow ═══════════════════ */
:root {
  --accent-grad: linear-gradient(135deg, #6c4fd6 0%, #9563ee 100%);
  --accent-grad-hover: linear-gradient(135deg, #5b3fc4 0%, #8452e0 100%);
}
@media (prefers-color-scheme: dark) {
  :root {
    --accent-grad: linear-gradient(135deg, #6d4fc4 0%, #9a6cf0 100%);
    --accent-grad-hover: linear-gradient(135deg, #7d5fd4 0%, #a97cff 100%);
  }
}
.btn.primary, .play-again-btn { border-color: transparent !important; color: #fff !important; box-shadow: 0 8px 22px -12px rgba(124,92,191,.9); border-radius: 12px !important; }

/* ═══════════════════ small finishing touches ═══════════════════ */
::selection { background: rgba(176,126,248,.35); }
:focus-visible { outline: 2px solid var(--glow-a); outline-offset: 2px; }
.ps-guide { border-top-color: rgba(176,126,248,.25) !important; }
.ps-faq summary::after { color: var(--glow-b) !important; }
.t-btn, .npcnt, .nchip-n { font-family: 'DM Mono', 'Courier New', monospace !important; }
/* "how to use" banners on the calculators: a night card in both modes */
.welcome-banner {
  background: radial-gradient(500px 200px at 100% 0%, rgba(255,107,157,.18), transparent 70%), linear-gradient(135deg, #1f1840 0%, #2b1f55 100%) !important;
  border: 1px solid rgba(176,126,248,.30); box-shadow: var(--card-shadow);
}
.welcome-title { color: #fff !important; font-family: 'Fredoka', 'Nunito', sans-serif !important; font-weight: 600 !important; }
.welcome-step-text { color: #d6ccf7 !important; }
/* the big "Generate Puzzle" buttons keep each puzzle's own colour, with a glossy finish */
button[style*="width:100%;padding:14px"]:not([style*="accent-grad"]) {
  background-image: linear-gradient(135deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%, rgba(0,0,0,.10) 100%) !important;
  border-radius: 14px !important;
  font-family: 'Fredoka', 'Nunito', sans-serif !important; font-weight: 600 !important; letter-spacing: .03em;
  box-shadow: 0 10px 24px -12px rgba(40,20,90,.8), 0 1px 0 rgba(255,255,255,.25) inset;
  transition: transform .15s ease, filter .15s ease;
}
button[style*="width:100%;padding:14px"]:hover { transform: translateY(-1px); filter: brightness(1.07); }
/* selected tabs and size buttons glow violet instead of solid ink */
.phase-tab.active, .size-btn.active, .btn.active {
  background: var(--accent-grad) !important; color: #fff !important; border-color: transparent !important;
  box-shadow: 0 6px 16px -8px rgba(124,92,191,.9);
}
button[style*="width:100%;padding:14px"][style*="accent-grad"] { border-radius: 14px !important; font-family: 'Fredoka', 'Nunito', sans-serif !important; font-weight: 600 !important; box-shadow: 0 10px 24px -12px rgba(124,92,191,.9); }

/* ═══════════════════ shaded cells and pearls ═══════════════════
   Black is black in both modes: Hitori/Nurikabe shaded cells and
   Pearl Path's black pearls stay dark at night, white pearls stay light. */
:root {
  --shade: #1c1538; --shade-ink: #ffffff; --shade-hover: #2d2650;
  --pearl-w: #ffffff; --pearl-w-edge: #1c1538;
  --pearl-b: #1c1538; --pearl-b-edge: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --shade: #050409; --shade-ink: #8d82bd; --shade-hover: #110d20;
    --pearl-w: #f0ecff; --pearl-w-edge: #c3b9ea;
    --pearl-b: #050409; --pearl-b-edge: #c3b9ea;
  }
  .hitori-tbl td.shaded, .nuri-tbl td.river, .hitori-grid td.shaded, .nuri-grid td.river {
    box-shadow: inset 0 0 0 1px rgba(176,126,248,.22);
  }
}

/* ═══════════════════ printing: the puzzle on white paper ═══════════════════ */
@media print {
  html, body { background: #fff !important; color: #000 !important; }
  body::before { display: none !important; }
  header, .site-nav, #nav-placeholder, .nav-dropdown, .nav-overlay, .ps-guide, .ps-foot, .ctrl-bar, .welcome-banner, .cov { display: none !important; }
  * { box-shadow: none !important; text-shadow: none !important; }
}
.sh.steps-head > span:first-child { white-space: nowrap; }