/* ==========================================================================
   VISUAL UPGRADES overlay  -  loads LAST on every page (after site.css and page CSS).
   Delete this file + scripts/upgrades.js and the two tags in each page <head> to revert.
   Numbers match the idea list (1-14).
   New infinite animations are listed in the html.paused rule at the bottom.
   ========================================================================== */

:root {
  /* 12. extra depth tokens */
  --sand-mid: #f1e6cf;
  --sunset: linear-gradient(135deg, #c4592a 0%, var(--terracotta) 45%, #8a3a15 100%);
  --sunset-soft: linear-gradient(145deg, var(--plumeria-soft) 0%, var(--sand-soft) 70%);
  --hairline: linear-gradient(160deg, rgba(255, 255, 255, .9), rgba(58, 36, 24, .08) 45%, rgba(13, 74, 87, .18));
  --wave-edge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30c120-26 240-26 360-6s240 30 360 10 240-34 360-14 240 20 360 4v36H0Z' fill='%23f7efdf'/></svg>");
  --header-bg: rgba(247, 239, 223, .94);
  --header-line: rgba(58, 36, 24, .1);
  --surface-white: #fff;
}

/* ---------- 1. Two-layer cards: paper highlight + gradient hairline ---------- */
.card, .stat, .person, .set-card, .lt-card, .question-card {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .75), var(--shadow-soft);
}
.card::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: var(--hairline);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}
.card-link:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-lift); }
/* featured variant: warm wash (home: the middle card) */
.card--featured, .features .card:nth-child(2) { background: var(--sunset-soft); }
/* soft glow behind card icon on hover */
.card-link:hover .card-icon { box-shadow: 0 0 0 6px var(--plumeria-soft), var(--shadow-soft); }

/* ---------- 2. Quiet wave edge for inner pages ---------- */
.page-hero--flat, .v-hero {
  position: relative; isolation: isolate;
  background: linear-gradient(180deg, var(--ocean-mist) 0%, transparent 90%);
  padding-bottom: clamp(3.5rem, 8vw, 5.5rem);
}
.page-hero--flat::before {
  content: ""; position: absolute; z-index: -1; right: -6%; top: -30%;
  width: clamp(200px, 30vw, 380px); aspect-ratio: 1; border-radius: 62% 38% 55% 45% / 48% 58% 42% 52%;
  background: radial-gradient(circle at 35% 35%, var(--plumeria-soft), var(--plumeria) 60%, #eaa974);
  opacity: .5; animation: drift 24s ease-in-out infinite alternate;
}
body.has-wash > main::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: clamp(28px, 5vw, 56px); z-index: 1;
  background: var(--wave-edge) center bottom / 100% 100% no-repeat; pointer-events: none;
}
/* pages with no hero (quiz, profile, settings...): a soft wash under the header */
body.has-wash > main { position: relative; }
body.has-wash > main::before {
  top: 0; bottom: auto; height: clamp(120px, 18vw, 200px); z-index: 0; transform: scaleY(-1);
  background: var(--wave-edge) center top / 100% 100% no-repeat; opacity: 0; /* wave only; wash below */
}
body.has-wash > main::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: clamp(160px, 22vw, 260px); z-index: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--ocean-mist) 0%, transparent 100%); opacity: .7;
}
body.has-wash > main > *:not([aria-hidden]) { position: relative; z-index: 1; }

/* ---------- 6. Glass header that settles on scroll ---------- */
.site-header {
  background: var(--header-bg);
  -webkit-backdrop-filter: blur(14px) saturate(1.3); backdrop-filter: blur(14px) saturate(1.3);
  border-bottom: 1px solid transparent;
  transition: box-shadow .3s var(--ease), background-color .3s;
}
.site-header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, transparent, var(--header-line) 15%, var(--plumeria) 50%, var(--header-line) 85%, transparent);
}
.site-header .wrap { transition: min-height .3s var(--ease); }
.brand svg { transition: transform .3s var(--ease), width .3s var(--ease), height .3s var(--ease); }
.brand:hover svg { transform: rotate(-6deg) scale(1.05); }
html.scrolled .site-header { box-shadow: 0 10px 30px -14px rgba(8, 52, 62, .35); }
@media (min-width: 900px) {
  html.scrolled .site-header .wrap { min-height: 54px; }
  html.scrolled .brand svg { width: 34px; height: 34px; }
}

/* ---------- 3. Wave-fill progress + gradient ring ---------- */
.progress { box-shadow: inset 0 1px 2px rgba(58, 36, 24, .15); }
.progress > span {
  position: relative; min-width: 0;
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='16' viewBox='0 0 32 16'><path d='M0 8c4-6 8-6 12 0s8 6 12 0 6-4 8-3v11H0Z' fill='white' fill-opacity='.22'/></svg>") 0 100% / 32px 100% repeat-x,
    linear-gradient(90deg, var(--plumeria), var(--terracotta));
  animation: wavefill 3s linear infinite;
}
.progress > span::after {
  content: ""; position: absolute; right: -3px; top: 50%; width: 1.15em; height: 1.15em; min-width: 12px; min-height: 12px; transform: translateY(-50%);
  border-radius: 50%; background: #fff; border: 3px solid var(--terracotta); box-shadow: 0 2px 6px rgba(58, 36, 24, .3);
}
.progress > span[style*="width: 0%"]::after, .progress > span[style*="width:0%"]::after { display: none; }
@keyframes wavefill { to { background-position: 32px 100%, 0 0; } }
.ring .ring-value { stroke: url(#ring-grad); filter: drop-shadow(0 1px 2px rgba(165, 72, 31, .35)); }

/* ---------- 4. Numbers as design ---------- */
.stat strong, #streak-display strong {
  font-size: clamp(2rem, 1.5rem + 1.6vw, 2.6rem); font-variant-numeric: lining-nums tabular-nums; letter-spacing: -.02em;
  background: linear-gradient(180deg, var(--ocean-deep), var(--ocean)); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.stat span { text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; font-weight: 600; }
.stat-strip {
  display: grid; gap: 1rem; grid-template-columns: repeat(3, 1fr);
  width: min(100% - 2 * var(--gutter), var(--max)); margin: 0 auto; padding: clamp(1.5rem, 4vw, 2.5rem) 0 clamp(2rem, 5vw, 3.5rem);
}
.stat-strip .stat { text-align: center; align-items: center; padding: 1.1rem .75rem; }
@media (max-width: 520px) { .stat-strip { gap: .5rem; } .stat-strip .stat strong { font-size: 1.6rem; } .stat-strip .stat span { font-size: .62rem; letter-spacing: .06em; } }

/* ---------- 7. Flashcard: tilt + burst ---------- */
.device { transition: transform .25s var(--ease), box-shadow .3s; transform-style: preserve-3d; will-change: transform; }
.device::before {
  content: ""; position: absolute; inset: -10px; z-index: -1; border-radius: inherit;
  background: radial-gradient(circle at 70% 20%, rgba(243, 201, 164, .8), transparent 60%); filter: blur(18px); opacity: .7;
}
.device .face.back {
  background:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='36' height='36' viewBox='0 0 36 36'><path d='M18 4 32 18 18 32 4 18Z' fill='none' stroke='%230d4a57' stroke-opacity='.09' stroke-width='1.5'/></svg>"),
    var(--ocean-mist);
}
.burst { position: fixed; z-index: 150; width: 10px; height: 10px; border-radius: 50%; pointer-events: none; animation: burst .75s var(--ease) forwards; }
@keyframes burst { from { transform: translate(0, 0) scale(1); opacity: 1; } to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }

/* ---------- 8. Quiz feedback ---------- */
.mc-option { position: relative; overflow: hidden; }
.mc-option::after {
  content: ""; position: absolute; left: 1.5rem; top: 50%; width: 10px; height: 10px; border-radius: 50%; margin: -5px;
  background: rgba(47, 107, 58, .35); transform: scale(0); opacity: 0; pointer-events: none;
}
.mc-option[aria-checked="true"]::after { animation: ripple .6s var(--ease); }
@keyframes ripple { from { transform: scale(0); opacity: 1; } to { transform: scale(40); opacity: 0; } }
.mc-option[aria-checked="true"] .mc-key { font-size: 0; position: relative; }
.mc-option[aria-checked="true"] .mc-key::after {
  content: ""; position: absolute; left: 50%; top: 46%; width: 8px; height: 14px; border: solid var(--ocean-deep); border-width: 0 3px 3px 0;
  transform: translate(-50%, -50%) rotate(45deg); animation: pop .35s var(--spring);
}
@keyframes pop { from { transform: translate(-50%, -50%) rotate(45deg) scale(0); } }
.q-prompt { background: linear-gradient(160deg, var(--sand-deep), var(--sand-mid)); }
.dot.is-answered::before { background: linear-gradient(135deg, var(--ocean-mist), var(--sea)); }

/* ---------- 9. Learning trail: ripples, sheen, dusk ---------- */
.lt-trail { background: linear-gradient(180deg, transparent 0%, rgba(211, 230, 224, .45) 55%, rgba(143, 194, 189, .35) 100%); border-radius: var(--r-xl); }
.lt-node { position: relative; overflow: visible; }
.lt-node::before, .lt-node::after {
  content: ""; position: absolute; inset: -4px; border-radius: inherit; border: 2px solid var(--ring2, rgba(143, 194, 189, .5)); opacity: 0;
  animation: ripple-ring 4.5s ease-out infinite;
}
.lt-node::after { animation-delay: 2.2s; }
.lt-row:nth-child(even) .lt-node::before { animation-delay: .8s; }
@keyframes ripple-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.55); opacity: 0; } }
.lt-node { background-image: linear-gradient(150deg, rgba(255, 255, 255, .55), transparent 55%); background-color: var(--fill); }
.lt-card { transition: transform .35s var(--spring), box-shadow .3s; }
.lt-card:hover { transform: translateY(-50%) translateY(-4px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), var(--shadow-lift); }
.lt-bird { animation: bob 7s ease-in-out infinite alternate; }
@keyframes bob { from { transform: translate3d(0, 0, 0) rotate(-1.5deg); } to { transform: translate3d(0, -8px, 0) rotate(1.5deg); } }

/* ---------- 10/11. Type moments + divider variety ---------- */
.hero h1 { letter-spacing: -.025em; }
.hero h1 span { letter-spacing: 0; }
.device .face strong { letter-spacing: -.02em; }
.eyebrow { position: relative; padding-left: 1.6rem; }
.eyebrow::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1.1rem; height: 8px; transform: translateY(-50%);
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 8'><path d='M0 8 5.5 1 11 8l5.5-7L22 8' fill='none' stroke='%23a5481f' stroke-width='1.8' stroke-linejoin='round'/></svg>") center / contain no-repeat;
}
.proverb-band .eyebrow::before { filter: brightness(1.8); }
.dev-top .eyebrow, .stat-strip + * .eyebrow { padding-left: 1.6rem; }
.section-head .eyebrow, .center .eyebrow { padding-left: 0; }
.section-head .eyebrow::before, .center .eyebrow::before { display: none; }
/* scalloped divider replaces the wave under the features section */
.features { position: relative; }
.features::after {
  content: ""; display: block; height: 28px; margin: clamp(2rem, 5vw, 3.5rem) auto 0; width: min(100% - 2 * var(--gutter), var(--max));
  /* arcs sit 2px below the tile top so the 2.5px stroke is not clipped */
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='52' height='28' viewBox='0 0 52 28'><path d='M2 26a24 24 0 0 1 48 0' fill='none' stroke='%23a5481f' stroke-opacity='.45' stroke-width='2.5'/><path d='M12 26a14 14 0 0 1 28 0' fill='none' stroke='%232f6b6c' stroke-opacity='.5' stroke-width='2.5'/></svg>") center / 52px 28px repeat-x;
}
.about { background: linear-gradient(180deg, var(--sand) 0%, var(--sand-mid) 100%); }

/* primary button: flat terracotta fill (no gradient, no gloss) */
.btn-primary { background: var(--terracotta); border-color: transparent; }
.btn-primary:hover { background: var(--terracotta-dark); }
.btn { position: relative; overflow: hidden; }

/* ---------- 13. Empty + loading states ---------- */
.empty-state { background: var(--sunset-soft); position: relative; }
.empty-state svg { filter: drop-shadow(0 4px 0 rgba(165, 72, 31, .15)); }
.skeleton, [aria-busy="true"] {
  background: linear-gradient(100deg, var(--sand-deep) 30%, var(--sand-soft) 50%, var(--sand-deep) 70%) 0 0 / 220% 100%;
  animation: shimmer 1.6s linear infinite; border-radius: var(--r-md);
}
@keyframes shimmer { to { background-position: -220% 0; } }

/* ---------- 5. Scroll-linked polish (progressive: only where supported) ---------- */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .hero .blob-sun, .hero .blob-sea, .hero .blob-leaf {
      animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 90vh;
    }
    .hero .blob-sea { --py: -60px; } .hero .blob-sun { --py: 90px; } .hero .blob-leaf { --py: -120px; }
    .waves .w1, .waves .w2, .waves .w3 { translate: 0 0; }
    .page-hero--flat::before { animation: parallax linear both; animation-timeline: scroll(root); animation-range: 0 60vh; --py: 60px; }
  }
}
@keyframes parallax { to { translate: 0 var(--py, 60px); } }

/* ---------- 14. Night theme (token swap) + toggle ---------- */
.theme-toggle {
  position: fixed; left: 16px; bottom: 16px; z-index: 90; width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; border: 1.5px solid var(--ocean); background: var(--sand-soft); color: var(--ocean-deep);
  transition: background-color .2s;
}
.theme-toggle:hover { background: #fff; }
.theme-toggle svg { width: 22px; height: 22px; }
.theme-toggle .sun { display: none; }
html[data-theme="night"] .theme-toggle .sun { display: block; }
html[data-theme="night"] .theme-toggle .moon { display: none; }
body:has(.fullscreen) .theme-toggle { display: none; }

html[data-theme="night"] {
  color-scheme: dark;
  --sand: #0c1f26; --sand-soft: #12303a; --sand-deep: #1a3d49; --sand-mid: #153038;
  --ocean: #4fa6b5; --ocean-deep: #e4f0ec; --ocean-mist: #1d4652; --ocean-mist-deep: #265563; --sea: #3f8a8a; --sea-ink: #8cd0c9;
  --koa: #efe6d6; --koa-soft: #c3b8a6;
  --terracotta: #e07a45; --terracotta-dark: #f0a070;
  --plumeria: #f3c9a4; --plumeria-soft: #3b2a22; --leaf: #9bbb7a; --leaf-soft: #27381f;
  --danger: #ff8a80; --danger-soft: #3d1d1b; --success: #8ed39b;
  --shadow-soft: 0 2px 6px rgba(0, 0, 0, .3), 0 14px 34px -10px rgba(0, 0, 0, .55);
  --shadow-lift: 0 4px 10px rgba(0, 0, 0, .35), 0 24px 44px -12px rgba(0, 0, 0, .65);
  --header-bg: rgba(12, 31, 38, .88); --header-line: rgba(255, 255, 255, .1);
  --surface-white: #0f2830;
  --sunset: linear-gradient(135deg, #e07a45, #b8532a);
  --sunset-soft: linear-gradient(145deg, #2a2a2a 0%, var(--sand-soft) 80%);
  --hairline: linear-gradient(160deg, rgba(255, 255, 255, .22), rgba(255, 255, 255, .04) 45%, rgba(79, 166, 181, .25));
  --wave-edge: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 60' preserveAspectRatio='none'><path d='M0 30c120-26 240-26 360-6s240 30 360 10 240-34 360-14 240 20 360 4v36H0Z' fill='%230c1f26'/></svg>");
}
html[data-theme="night"] body::before { opacity: .08; mix-blend-mode: screen; }
html[data-theme="night"] .card, html[data-theme="night"] .stat, html[data-theme="night"] .person,
html[data-theme="night"] .set-card, html[data-theme="night"] .lt-card, html[data-theme="night"] .question-card { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), var(--shadow-soft); }
html[data-theme="night"] .input, html[data-theme="night"] .select, html[data-theme="night"] .textarea,
html[data-theme="night"] .mc-option { background: var(--surface-white); color: var(--koa); border-color: rgba(228, 240, 236, .3); }
html[data-theme="night"] .mc-option[aria-checked="true"] { background: var(--ocean); color: #06161b; }
html[data-theme="night"] .mc-option[aria-checked="true"] .mc-key { background: #06161b; color: #fff; }
html[data-theme="night"] .site-nav a[aria-current="page"], html[data-theme="night"] .chip[aria-pressed="true"],
html[data-theme="night"] .tabs [aria-selected="true"], html[data-theme="night"] .tabs [aria-pressed="true"], html[data-theme="night"] .badge-solid { background: var(--ocean); color: #06161b; }
html[data-theme="night"] .btn-primary { color: #fff; }
html[data-theme="night"] .btn-quiet { color: var(--ocean-deep); border-color: var(--ocean); }
html[data-theme="night"] .site-footer, html[data-theme="night"] .contact-card { background: #07151a; color: #cfe0db; }
html[data-theme="night"] .site-footer nav a, html[data-theme="night"] .contact-card h3, html[data-theme="night"] .email a { color: #fff; }
html[data-theme="night"] .proverb-band { background: #0f3a45; }
html[data-theme="night"] .hero > .divider { --divider-fill: #0f3a45; }
html[data-theme="night"] .proverb-band .divider { --divider-fill: var(--sand); }
html[data-theme="night"] .page-hero--flat, html[data-theme="night"] .v-hero { background: linear-gradient(180deg, #123a46 0%, transparent 90%); }
html[data-theme="night"] .device .face.front, html[data-theme="night"] .device .done { background: var(--sand-soft); }
html[data-theme="night"] .device .face { border-color: var(--ocean); }
html[data-theme="night"] .device .ans.yes { color: #fff; }
html[data-theme="night"] .waves .w1 path { fill: #5c3d2e; fill-opacity: .55; }
html[data-theme="night"] .waves .w2 path { fill: #1f5a63; fill-opacity: .8; }
html[data-theme="night"] .waves .w3 path { fill: var(--sand-deep); }
html[data-theme="night"] .blob-sun { opacity: .35; filter: saturate(.7) blur(2px); }
html[data-theme="night"] .blob-sea { opacity: .3; }
html[data-theme="night"] .blob-leaf { opacity: .2; }
html[data-theme="night"] .page-hero--flat::before { opacity: .22; }
html[data-theme="night"] .about { background: linear-gradient(180deg, var(--sand) 0%, #0a1a20 100%); }
html[data-theme="night"] .story { background: var(--ocean-mist); }
html[data-theme="night"] .lt-trail { background: linear-gradient(180deg, transparent, rgba(29, 70, 82, .5)); }
html[data-theme="night"] .lt-node { color: #0c1f26; }
html[data-theme="night"] .lt-ga { --fill: #e0a37a; --ring: #5c3d2e; --ring2: rgba(243, 201, 164, .25); --c: #0c1f26; }
html[data-theme="night"] .lt-gb { --fill: #7cc0c0; --ring: #1f5a63; --ring2: rgba(143, 194, 189, .25); --c: #0c1f26; }
html[data-theme="night"] .lt-bird { color: var(--ocean-deep); }
html[data-theme="night"] .features .card-icon, html[data-theme="night"] .card-icon { background: #f7efdf; }
html[data-theme="night"] .pause-anim, html[data-theme="night"] .theme-toggle, html[data-theme="night"] .nav-more-panel, html[data-theme="night"] .begin-bar { background: var(--sand-soft); color: var(--ocean-deep); }
html[data-theme="night"] .stat strong, html[data-theme="night"] #streak-display strong { background: linear-gradient(180deg, #fff, var(--sea-ink)); -webkit-background-clip: text; background-clip: text; }
html[data-theme="night"] .progress > span::after { background: var(--sand-soft); }
html[data-theme="night"] svg[viewBox="0 0 24 24"][aria-hidden="true"], html[data-theme="night"] .nav-account::before { filter: none; }
html[data-theme="night"] .card::after { opacity: .8; }

/* ---------- motion hygiene ---------- */
html.paused .page-hero--flat::before, html.paused .progress > span, html.paused .skeleton, html.paused .lt-node::before, html.paused .lt-node::after, html.paused .lt-bird { animation-play-state: paused !important; }
@media (prefers-reduced-motion: reduce) {
  .device, .site-header, .brand svg, .theme-toggle { transition: none !important; }
  .lt-card:hover { transform: translateY(-50%); }
  .burst { display: none; }
  .lt-node::before, .lt-node::after { display: none; }
}
@media print { .theme-toggle { display: none !important; } }

/* ---------- 14b. Night: practice pages (flashcards + writing) ---------- */
/* The koa planks end in var(--koa), which is a LIGHT cream in night, so they faded to beige. Pin the wood to dark browns. */
html[data-theme="night"] #card-container #card .card-face.front,
html[data-theme="night"] #word-container {
  background:
    radial-gradient(circle at 35% 30%, #b79c7c, #4a392c) 14px 12px / 12px 12px no-repeat,
    radial-gradient(circle at 35% 30%, #b79c7c, #4a392c) calc(100% - 14px) 12px / 12px 12px no-repeat,
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #34211a, #1f130d);
  border-color: #0d0705; color: #f6dcc0;
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, .06), inset 0 -6px 0 rgba(0, 0, 0, .4), 0 16px 26px -10px rgba(0, 0, 0, .7);
}
html[data-theme="night"] #word-container {
  background:
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .035) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .18) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #34211a, #1f130d);
}
html[data-theme="night"] #card-container #card .card-face.back {
  background:
    radial-gradient(circle at 35% 30%, #b79c7c, #4a392c) 14px 12px / 12px 12px no-repeat,
    radial-gradient(circle at 35% 30%, #b79c7c, #4a392c) calc(100% - 14px) 12px / 12px 12px no-repeat,
    repeating-linear-gradient(92deg, rgba(255, 255, 255, .04) 0 2px, transparent 2px 9px),
    repeating-linear-gradient(88deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 16px),
    linear-gradient(180deg, #5a3b29, #46301f);
  color: #fbe6d2;
}
html[data-theme="night"] #word-container #hint-display, html[data-theme="night"] #word-container * { color: inherit; }
html[data-theme="night"] #word-container .word-prompt, html[data-theme="night"] #word-container { color: #f6dcc0; }
html[data-theme="night"] #card-container #card:hover .card-face.front { filter: brightness(1.12); }

/* cream pills, inputs, tiles and icon buttons -> deep teal surfaces */
html[data-theme="night"] #card-container #tally-bar .tally,
html[data-theme="night"] .streak,
html[data-theme="night"] #card-container #progress-bar-container,
html[data-theme="night"] #progress-bar-container,
html[data-theme="night"] #word-input,
html[data-theme="night"] #hint-button,
html[data-theme="night"] #card-container #grade-buttons button,
html[data-theme="night"] #card-container #summary-actions button,
html[data-theme="night"] #card-container #card-options button,
html[data-theme="night"] #word-options button {
  background-color: #14323b; color: var(--koa); border-color: rgba(228, 240, 236, .35);
}
html[data-theme="night"] #card-container #progress-bar-container, html[data-theme="night"] #progress-bar-container { background-color: #0a1a20; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .5); }
html[data-theme="night"] #word-input { color: var(--koa); }
html[data-theme="night"] #word-input::placeholder { color: var(--koa-soft); }
html[data-theme="night"] #card-container #card-options button:hover:not(:disabled),
html[data-theme="night"] #word-options button:hover:not(:disabled),
html[data-theme="night"] #hint-button:hover:not(:disabled),
html[data-theme="night"] #card-container #summary-actions button:hover { background-color: #1d4652; }
/* dark line icons -> light silhouettes so they read on the dark buttons */
html[data-theme="night"] #card-container #card-options button img,
html[data-theme="night"] #word-options button img { filter: brightness(0) invert(.88); }
/* grade buttons keep saturated fills with white text (night tokens are pastel) */
html[data-theme="night"] #card-container #grade-buttons #grade-correct { background-color: #2f7a45; color: #fff; border-color: #17432a; }
html[data-theme="night"] #card-container #grade-buttons #grade-incorrect { background-color: #b2382d; color: #fff; border-color: #5c1a14; }
html[data-theme="night"] #answer-row .hk-toggle { background: #1d4652; color: var(--koa); border-color: rgba(228, 240, 236, .35); }
html[data-theme="night"] #answer-row .hk-popup { background: #0f2830; border-color: rgba(228, 240, 236, .25); }
html[data-theme="night"] #answer-row .hk-key { background: #1d4652; color: var(--koa); }

/* home flashcard demo card: flat deep surface, quiet warm glow (no pasty gradient) */
html[data-theme="night"] .device { background: #14292f; border-color: rgba(255, 255, 255, .08); }
html[data-theme="night"] .device::before { background: radial-gradient(circle at 70% 15%, rgba(224, 122, 69, .22), transparent 62%); opacity: .8; }
html[data-theme="night"] .device .face.front { background: linear-gradient(180deg, #34211a, #1f130d); border-color: #4fa6b5; }
html[data-theme="night"] .device .face.front strong { color: #f6dcc0; }
html[data-theme="night"] .device .face.front small { color: #f0a070; }
html[data-theme="night"] .device .face.front em { color: #c9b9a4; }
html[data-theme="night"] .device .face.back { background-color: #1d4652; }
html[data-theme="night"] .device .ans:not(.yes) { color: var(--koa); }

/* 14c. night fixes: wood-plank text pinned light (it used --plumeria-soft, which is dark in night); icons keep their shapes */
html[data-theme="night"] #word-container #word { color: #f6dcc0; }
html[data-theme="night"] #word-container #hint-display { color: #f3c9a4; }
html[data-theme="night"] #card-container #card .card-face.front { color: #f6dcc0; }
html[data-theme="night"] #card-container #card .card-face.back { color: #fbe6d2; }
html[data-theme="night"] #card-container #card-options button img,
html[data-theme="night"] #word-options button img { filter: invert(.9) hue-rotate(180deg); }

/* more breathing room under the proverb text: the wave divider eats the bottom padding */
.proverb-band { padding-bottom: clamp(6.25rem, 12.5vw, 10rem); }

/* ---------- Home: drifting blobs + words in the tan area below the proverb band ---------- */
.home-lower { position: relative; isolation: isolate; overflow: hidden; background: linear-gradient(180deg, var(--sand) 0%, var(--sand-mid) 100%); }
.home-lower .about { background: none; }
.home-lower .hl-b1 { width: clamp(200px, 30vw, 400px); left: -10%; top: 4%; }
.home-lower .hl-b2 { width: clamp(180px, 26vw, 340px); right: -9%; top: 22%; }
.home-lower .hl-b3 { width: clamp(80px, 12vw, 150px); left: 8%; top: 46%; }
.home-lower .hl-b4 { width: clamp(180px, 28vw, 360px); left: -8%; bottom: 8%; }
.home-lower .hl-b5 { width: clamp(150px, 22vw, 280px); right: -6%; bottom: 2%; }
.home-lower .floaters span { opacity: .22; }
.home-lower .hl-f1 { font-size: 2.2rem; right: 8%; top: 6%; }
.home-lower .hl-f2 { font-size: 1.7rem; left: 6%; top: 24%; color: var(--terracotta); animation-delay: -4s; animation-duration: 17s; }
.home-lower .hl-f3 { font-size: 2rem; right: 14%; top: 42%; animation-delay: -8s; animation-duration: 19s; }
.home-lower .hl-f4 { font-size: 1.6rem; left: 44%; top: 62%; color: var(--terracotta); animation-delay: -2s; }
.home-lower .hl-f5 { font-size: 2.1rem; left: 4%; bottom: 22%; animation-delay: -10s; animation-duration: 16s; }
.home-lower .hl-f6 { font-size: 1.8rem; right: 6%; bottom: 10%; color: var(--terracotta); animation-delay: -6s; animation-duration: 18s; }
@media (max-width: 899px) { .home-lower .hl-f3, .home-lower .hl-f4 { display: none; } .home-lower .hl-f2 { left: auto; right: 6%; } }
html[data-theme="night"] .home-lower { background: linear-gradient(180deg, var(--sand) 0%, #0a1a20 100%); }
html[data-theme="night"] .home-lower .about { background: none; }

/* ---------- Circles throughout: page-wide drifting blobs, nothing clipped at the hero edge ---------- */
.page-hero--flat, .v-hero { overflow: visible; }
body { position: relative; }
.page-deco { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.page-deco .blob { z-index: 0; }
.page-deco .pd1 { width: clamp(200px, 28vw, 380px); right: -9%; top: 300px; }
.page-deco .pd2 { width: clamp(170px, 24vw, 320px); left: -9%; top: 860px; }
.page-deco .pd3 { width: clamp(80px, 11vw, 140px); right: 10%; top: 1250px; }
.page-deco .pd4 { width: clamp(190px, 26vw, 340px); right: -8%; top: 1700px; }
.page-deco .pd5 { width: clamp(160px, 22vw, 300px); left: -8%; top: 2300px; }
.page-deco .pd6 { width: clamp(90px, 12vw, 150px); left: 12%; top: 2750px; }
.page-deco .pd7 { width: clamp(180px, 26vw, 330px); right: -7%; top: 3250px; }
.page-deco .blob { opacity: .5; }
html[data-theme="night"] .page-deco .blob { opacity: .2; }
@media (max-width: 720px) { .page-deco .blob { opacity: .35; } }

.page-hero--flat::after { content: none; }

/* map lock icons follow the list's night colours (targets 1-2 orange, 3-5 blue) */
html[data-theme="night"] #view-map .tg[data-state="locked"][data-k="1"]::before,
html[data-theme="night"] #view-map .tg[data-state="locked"][data-k="2"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1f26' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); background-color: #e0a37a; }
html[data-theme="night"] #view-map .tg[data-state="locked"][data-k="3"]::before,
html[data-theme="night"] #view-map .tg[data-state="locked"][data-k="4"]::before,
html[data-theme="night"] #view-map .tg[data-state="locked"][data-k="5"]::before { background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c1f26' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='11' width='14' height='9' rx='2'/><path d='M8 11V8a4 4 0 0 1 8 0v3'/></svg>"); background-color: #7cc0c0; }

/* spaced repetition (night): caught-up block */
html[data-theme="night"] #caught-up { background-color: #14323b; border-color: rgba(228, 240, 236, .2); color: var(--koa); }
html[data-theme="night"] #caught-up h2 { color: var(--koa); }
html[data-theme="night"] #study-full-set { background-color: #14323b; color: var(--koa); border-color: rgba(228, 240, 236, .35); }
html[data-theme="night"] #study-full-set:hover { background-color: #1d4652; }
/* "Review missed" (writing panel; flashcards button is covered by the #summary-actions rules above) */
html[data-theme="night"] #review-missed-panel { background-color: #14323b; border-color: rgba(228, 240, 236, .2); color: var(--koa); }
html[data-theme="night"] #review-missed { background-color: #14323b; color: var(--koa); border-color: rgba(228, 240, 236, .35); }
html[data-theme="night"] #review-missed:hover { background-color: #1d4652; }
html[data-theme="night"] #card-container #review-missed-note { color: var(--koa); }

/* spaced repetition switch (night) */
html[data-theme="night"] :is(#card-options, #word-options) #spaced-repetition-button.sr-switch { background-color: #14323b; color: var(--koa); border-color: rgba(228, 240, 236, .35); }
html[data-theme="night"] :is(#card-options, #word-options) #spaced-repetition-button.sr-switch[aria-checked="true"] { background-color: #2b7482; color: #fff; border-color: rgba(228, 240, 236, .55); }
html[data-theme="night"] :is(#card-options, #word-options) #spaced-repetition-button.sr-switch[role="switch"]:hover:not(:disabled) { background-color: #1d4652; }
html[data-theme="night"] :is(#card-options, #word-options) #spaced-repetition-button.sr-switch[role="switch"][aria-checked="true"]:hover:not(:disabled) { background-color: #348a9a; }
html[data-theme="night"] :is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-thumb { background-color: #e4f0ec; border-color: rgba(228, 240, 236, .55); }
html[data-theme="night"] :is(#card-options, #word-options) #spaced-repetition-button.sr-switch .sw-thumb img { filter: none; }

/* Night: profile spaced-repetition section and the practice-page mode badge */
html[data-theme="night"] .sr-stat, html[data-theme="night"] .sr-set, html[data-theme="night"] .sr-empty { border-color: rgba(228, 240, 236, .22); }
html[data-theme="night"] .sr-count { background: #1d4652; color: #e4f0ec; }
html[data-theme="night"] .sr-count.is-due { background: #e4f0ec; color: #06161b; }
html[data-theme="night"] .sr-set:hover { background: #1d4652; }
html[data-theme="night"] .mode-badge { border-color: rgba(228, 240, 236, .55); color: #e4f0ec; }
html[data-theme="night"] .mode-badge.is-counts { background: #2b7482; color: #fff; border-color: rgba(228, 240, 236, .55); }
html[data-theme="night"] .mode-badge.is-practice { background: transparent; color: #e4f0ec; }
html[data-theme="night"] .mode-badge.is-neutral { background: #14323b; }