/*
 * Themes. Each girl (and Sophie and Seth) picks one in the header; app.js sets
 * <html data-theme="…">. A theme sets the colours app.css uses, a heading font,
 * and art: a picture at the right of the header (--header-art), an optional
 * band under it (--header-band), a faint page pattern (--pattern), a scene at
 * the foot of the page (--footer-art) and a small mark before the name and
 * panel titles (--mark). The art is in web/art-*.svg (drawn by a script, kept
 * small) and is only decoration: nothing in it is clickable or needed.
 * Without data-theme the page is the classic look.
 */

/* ---- Hooks every theme fills in ---- */
header { position: sticky; }
header::before {
  content: ""; position: absolute; right: 0; bottom: var(--header-art-bottom, 0); top: var(--header-art-top, auto); width: min(420px, 75%); height: min(92px, 100%);
  background: var(--header-art, none) var(--header-art-position, right bottom) / contain no-repeat; opacity: var(--art-opacity, 1); pointer-events: none;
}
header::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: var(--band-height, 0);
  background: var(--header-band, none) left center / auto 100% repeat-x; pointer-events: none;
}
header .bar1, header .bar2 { position: relative; z-index: 1; }
/* Text over the header art stays readable. */
[data-theme] header .bar1 > .muted, [data-theme] header .bar1 > button.link, [data-theme] header .theme-picker {
  background: var(--chip-bg, color-mix(in srgb, var(--header-bg, var(--panel)) 82%, transparent)); border-radius: 8px; padding: 3px 8px;
}
/* The foot scene sits at the bottom of the window on short pages. */
#root { min-height: 100vh; display: flex; flex-direction: column; }
#root > main { width: 100%; }
#root::after {
  content: ""; display: block; margin-top: auto; flex-shrink: 0; height: var(--footer-height, 0);
  background: var(--footer-art, none) center bottom / auto 100% repeat-x; opacity: var(--art-opacity, 1); pointer-events: none;
}
header .brand::before, .panel > h2::before {
  content: ""; display: var(--mark-display, none); width: 0.9em; height: 0.9em; margin-right: 0.4em; vertical-align: -0.08em;
  background: var(--mark, none) center / contain no-repeat;
}
.theme-picker { font-size: 13px; padding: 4px 6px; max-width: 150px; }
.mode-toggle { font-size: 16px; line-height: 1; width: 34px; height: 30px; padding: 0; text-align: center; }
[data-theme="noodle"] header .mode-toggle { background: #3a2318; color: #f4e3c3; border-color: #6b4a32; }

/* ---- Japanese cherry tree ---- */
[data-theme="sakura"] {
  --bg: #fbf5f4; --panel: #fffdfc; --text: #2a2124; --muted: #74656a; --line: #f0dfe2;
  --accent: #a63d62; --accent-soft: #f9e3ea; --on-accent: #fff;
  --header-bg: #fffdfc;
  --font-head: "Hiragino Mincho ProN", "Yu Mincho", "Noto Serif JP", Georgia, serif;
  --radius: 14px; --shadow: 0 1px 3px rgb(166 61 98 / 0.06), 0 6px 18px rgb(166 61 98 / 0.05);
  --header-art: url("/web/art-sakura-header.svg"); --pattern: url("/web/art-sakura-pattern.svg");
  --mark: url("/web/art-sakura-mark.svg"); --mark-display: inline-block;
  --footer-height: 0;
}
/* ---- Chinese garden ---- */
[data-theme="garden"] {
  --bg: #f3f0e6; --panel: #fffdf6; --text: #1e2a25; --muted: #5f6b64; --line: #e2dccb;
  --accent: #2f6f5e; --accent-soft: #dcebe2; --on-accent: #fff;
  --header-bg: #fffdf6;
  --font-head: "Songti SC", "STSong", "Noto Serif SC", "SimSun", Georgia, serif;
  --radius: 6px; --shadow: 0 1px 2px rgb(47 111 94 / 0.07);
  --header-art: url("/web/art-garden-header.svg"); --header-band: url("/web/art-garden-band.svg"); --band-height: 9px;
  --pattern: url("/web/art-garden-pattern.svg");
  --footer-art: url("/web/art-garden-footer.svg"); --footer-height: 120px;
  --mark: url("/web/art-garden-mark.svg"); --mark-display: inline-block;
}
/* ---- Rocky Mountains ---- */
[data-theme="mountains"] {
  --bg: #eef2f5; --panel: #ffffff; --text: #1b2630; --muted: #5b6976; --line: #d9e1e8;
  --accent: #2b6384; --accent-soft: #dbe9f2; --on-accent: #fff;
  --header-bg: #ffffff;
  --font-head: "Avenir Next", "Segoe UI Semibold", "Segoe UI", system-ui, sans-serif;
  --radius: 10px; --shadow: 0 1px 3px rgb(27 38 48 / 0.06), 0 8px 20px rgb(27 38 48 / 0.04);
  --header-art: url("/web/art-mountains-header.svg");
  --footer-art: url("/web/art-mountains-footer.svg"); --footer-height: 150px;
  --mark: url("/web/art-mountains-mark.svg"); --mark-display: inline-block;
}
/* ---- Ancient Chinese noodle shop ---- */
[data-theme="noodle"] {
  --bg: #f6ecdf; --panel: #fffaf1; --text: #2b1d16; --muted: #75604f; --line: #ead7c2;
  --accent: #a8322a; --accent-soft: #f6dcd4; --on-accent: #fff;
  --header-bg: linear-gradient(180deg, #46291b, #2f1c12); --header-text: #f4e3c3;
  --nav-active-bg: rgb(217 164 65 / 0.22); --nav-active: #f2c56e; --chip-bg: rgb(47 28 18 / 0.75);
  --font-head: "Songti SC", "STSong", "Noto Serif SC", "SimSun", Georgia, serif;
  --radius: 4px; --panel-top: 3px solid #a8322a; --shadow: 0 1px 2px rgb(43 29 22 / 0.08);
  --header-art: url("/web/art-noodle-header.svg"); --header-art-position: right top; --header-art-top: 0; --header-art-bottom: auto; --header-band: url("/web/art-noodle-band.svg"); --band-height: 12px;
  --pattern: url("/web/art-noodle-pattern.svg");
  --mark: url("/web/art-noodle-mark.svg"); --mark-display: inline-block;
}
[data-theme="noodle"] header { border-bottom-color: #2f1c12; }
[data-theme="noodle"] header select { background: #3a2318; color: #f4e3c3; border-color: #6b4a32; }
[data-theme="noodle"] header button.link { color: #f2c56e; }
[data-theme="noodle"] header .muted { color: #d9c4a3; }
/* ---- Western cottage flower garden ---- */
[data-theme="cottage"] {
  --bg: #f7f4ea; --panel: #fffef8; --text: #2d2a22; --muted: #6b6656; --line: #e6e0cd;
  --accent: #4f7a3d; --accent-soft: #e2edd8; --on-accent: #fff;
  --header-bg: #fffef8;
  --font-head: Georgia, "Palatino Linotype", "Book Antiqua", serif;
  --radius: 16px; --shadow: 0 1px 3px rgb(79 122 61 / 0.07), 0 6px 16px rgb(79 122 61 / 0.05);
  --header-art: url("/web/art-cottage-header.svg"); --pattern: url("/web/art-cottage-pattern.svg");
  --footer-art: url("/web/art-cottage-footer.svg"); --footer-height: 130px;
  --mark: url("/web/art-cottage-mark.svg"); --mark-display: inline-block;
}

/* ---- Deep woods ---- */
[data-theme="woods"] {
  --bg: #eef1e8; --panel: #fbfcf7; --text: #1d261c; --muted: #5d6a58; --line: #dbe2d2;
  --accent: #3e6b3a; --accent-soft: #dde9d6; --on-accent: #fff;
  --header-bg: #fbfcf7;
  --font-head: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
  --radius: 8px; --shadow: 0 1px 3px rgb(29 38 28 / 0.07), 0 6px 16px rgb(29 38 28 / 0.04);
  --header-art: url("/web/art-woods-header.svg"); --pattern: url("/web/art-woods-pattern.svg");
  --footer-art: url("/web/art-woods-footer.svg"); --footer-height: 130px;
  --mark: url("/web/art-woods-mark.svg"); --mark-display: inline-block;
}
/* ---- Fairy pool ---- */
[data-theme="pool"] {
  --bg: #edf5f4; --panel: #fbfefd; --text: #17292a; --muted: #587072; --line: #d5e6e5;
  --accent: #23757a; --accent-soft: #d5ecec; --on-accent: #fff;
  --header-bg: #fbfefd;
  --font-head: "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --radius: 18px; --shadow: 0 1px 3px rgb(35 117 122 / 0.07), 0 8px 20px rgb(35 117 122 / 0.05);
  --header-art: url("/web/art-pool-header.svg"); --pattern: url("/web/art-pool-pattern.svg");
  --footer-art: url("/web/art-pool-footer.svg"); --footer-height: 110px;
  --mark: url("/web/art-pool-mark.svg"); --mark-display: inline-block;
}
/* ---- Cyberpunk: dark is its normal look; the light version is muted ---- */
[data-theme="cyber"] {
  --bg: #0d0b14; --panel: #161322; --text: #e9e4ff; --muted: #a59cc4; --line: #2b2540;
  --accent: #ff3fa4; --accent-soft: #3a1631; --on-accent: #1a0612;
  --header-bg: #120f1d; --header-text: #e9e4ff; --nav-active-bg: rgb(56 232 255 / 0.14); --nav-active: #38e8ff; --chip-bg: rgb(18 15 29 / 0.8);
  --font-head: Bahnschrift, "DIN Alternate", "Eurostile", "Segoe UI", system-ui, sans-serif;
  --radius: 3px; --panel-top: 2px solid #38e8ff; --shadow: 0 0 0 1px rgb(56 232 255 / 0.05), 0 6px 18px rgb(0 0 0 / 0.35);
  --header-art: url("/web/art-cyber-header.svg"); --header-band: url("/web/art-cyber-band.svg"); --band-height: 3px;
  --pattern: url("/web/art-cyber-pattern.svg");
  --footer-art: url("/web/art-cyber-footer.svg"); --footer-height: 120px;
  --mark: url("/web/art-cyber-mark.svg"); --mark-display: inline-block;
  color-scheme: dark;
}
[data-theme="cyber"] header { border-bottom-color: #2b2540; }
/* ---- Rainy day with kittens ---- */
[data-theme="rain"] {
  --bg: #eef1f5; --panel: #fdfdfe; --text: #1f2733; --muted: #5f6b7a; --line: #dce2ea;
  --accent: #3f5f8a; --accent-soft: #dde6f2; --on-accent: #fff;
  --header-bg: #fdfdfe;
  --font-head: "Nunito", "Segoe UI Rounded", "Trebuchet MS", system-ui, sans-serif;
  --radius: 14px; --shadow: 0 1px 3px rgb(31 39 51 / 0.07), 0 6px 18px rgb(31 39 51 / 0.05);
  --header-art: url("/web/art-rain-header.svg"); --header-band: url("/web/art-rain-band.svg"); --band-height: 6px;
  --pattern: url("/web/art-rain-pattern.svg");
  --mark: url("/web/art-rain-mark.svg"); --mark-display: inline-block;
}

/* ---- French coffee shop ---- */
[data-theme="cafe"] {
  --bg: #f7f1e6; --panel: #fffbf4; --text: #2b1f18; --muted: #6e5d50; --line: #eadfcd;
  --accent: #9e2b25; --accent-soft: #f5dcd6; --on-accent: #fff;
  --header-bg: #fffbf4;
  --font-head: Didot, "Bodoni MT", "Playfair Display", Georgia, serif;
  --radius: 6px; --shadow: 0 1px 3px rgb(74 47 34 / 0.08), 0 6px 16px rgb(74 47 34 / 0.05);
  --header-art: url("/web/art-cafe-header.svg"); --header-art-position: right top; --header-art-top: 0; --header-art-bottom: auto;
  --header-band: url("/web/art-cafe-band.svg"); --band-height: 5px;
  --pattern: url("/web/art-cafe-pattern.svg");
  --footer-art: url("/web/art-cafe-footer.svg"); --footer-height: 90px;
  --mark: url("/web/art-cafe-mark.svg"); --mark-display: inline-block;
}
/* ---- Japanese sweet shop ---- */
[data-theme="sweets"] {
  --bg: #fbf3f1; --panel: #fffcfa; --text: #2c2224; --muted: #73646a; --line: #f0e1df;
  --accent: #5b7f3a; --accent-soft: #e4eed8; --on-accent: #fff;
  --header-bg: #fffcfa;
  --font-head: "Hiragino Maru Gothic ProN", "Yu Gothic UI", "Meiryo", "Segoe UI", system-ui, sans-serif;
  --radius: 16px; --panel-top: 3px solid #f1b6c6; --shadow: 0 1px 3px rgb(196 93 124 / 0.07), 0 6px 18px rgb(196 93 124 / 0.05);
  --header-art: url("/web/art-sweets-header.svg"); --header-art-position: right top; --header-art-top: 0; --header-art-bottom: auto;
  --pattern: url("/web/art-sweets-pattern.svg");
  --mark: url("/web/art-sweets-mark.svg"); --mark-display: inline-block;
}
/* ---- Reptile island ---- */
[data-theme="reptile"] {
  --bg: #eef4ea; --panel: #fcfdf8; --text: #1d2a1f; --muted: #5c6d5c; --line: #d9e4d3;
  --accent: #2e7d5b; --accent-soft: #d7ece0; --on-accent: #fff;
  --header-bg: #fcfdf8;
  --font-head: "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --radius: 12px; --shadow: 0 1px 3px rgb(46 125 91 / 0.07), 0 6px 16px rgb(46 125 91 / 0.05);
  --header-art: url("/web/art-reptile-header.svg"); --pattern: url("/web/art-reptile-pattern.svg");
  --footer-art: url("/web/art-reptile-footer.svg"); --footer-height: 110px;
  --mark: url("/web/art-reptile-mark.svg"); --mark-display: inline-block;
}

/* ---- Dark versions: the device's setting (Auto), or chosen with the header button ---- */
@media (prefers-color-scheme: dark) {
  [data-theme="cafe"]:not([data-mode="light"]) {
    --bg: #1a1411; --panel: #241c17; --text: #f1e6d8; --muted: #b7a291; --line: #3b2e26;
    --accent: #e8877d; --accent-soft: #4a221e; --on-accent: #220c09; --header-bg: #241c17;
    --shadow: none; --art-opacity: 0.8;
  }
  [data-theme="sweets"]:not([data-mode="light"]) {
    --bg: #1b1618; --panel: #251e21; --text: #f2e7ea; --muted: #b7a3aa; --line: #3a2e33;
    --accent: #a9cf7f; --accent-soft: #2c3a20; --on-accent: #142008; --header-bg: #251e21;
    --panel-top: 3px solid #a85870; --shadow: none; --art-opacity: 0.85;
  }
  [data-theme="reptile"]:not([data-mode="light"]) {
    --bg: #101813; --panel: #18221b; --text: #e1ece3; --muted: #9bb0a0; --line: #2a382e;
    --accent: #6fcb9f; --accent-soft: #173a2a; --on-accent: #08200f; --header-bg: #18221b;
    --shadow: none; --art-opacity: 0.6;
  }
  [data-theme="woods"]:not([data-mode="light"]) {
    --bg: #111611; --panel: #1a211a; --text: #e2eadf; --muted: #9fae99; --line: #2c372b;
    --accent: #93c486; --accent-soft: #233a20; --on-accent: #0e1a0c; --header-bg: #1a211a;
    --shadow: none; --art-opacity: 0.5;
  }
  [data-theme="pool"]:not([data-mode="light"]) {
    --bg: #0f1919; --panel: #162323; --text: #dff0ef; --muted: #93b1b1; --line: #263938;
    --accent: #6fcfd3; --accent-soft: #163637; --on-accent: #082021; --header-bg: #162323;
    --shadow: none; --art-opacity: 0.55;
  }
  [data-theme="rain"]:not([data-mode="light"]) {
    --bg: #12161d; --panel: #1a2029; --text: #e3e9f1; --muted: #9aa7b8; --line: #2a3340;
    --accent: #8fb0dd; --accent-soft: #1f3048; --on-accent: #0c1522; --header-bg: #1a2029;
    --shadow: none; --art-opacity: 0.7;
  }
  [data-theme="sakura"]:not([data-mode="light"]) {
    --bg: #1b1518; --panel: #251d21; --text: #f1e6e9; --muted: #b39fa6; --line: #3a2d33;
    --accent: #f2a3bd; --accent-soft: #4a2633; --on-accent: #2a1018; --header-bg: #251d21;
    --shadow: none; --art-opacity: 0.85;
  }
  [data-theme="garden"]:not([data-mode="light"]) {
    --bg: #121a17; --panel: #1a2420; --text: #e3ece6; --muted: #9db0a6; --line: #2c3a34;
    --accent: #7cc4aa; --accent-soft: #1d3a31; --on-accent: #0c1a15; --header-bg: #1a2420;
    --shadow: none; --art-opacity: 0.55;
  }
  [data-theme="mountains"]:not([data-mode="light"]) {
    --bg: #10161c; --panel: #18212a; --text: #e2e9ef; --muted: #98a7b5; --line: #283541;
    --accent: #7fb6d8; --accent-soft: #1b3446; --on-accent: #0b1620; --header-bg: #18212a;
    --shadow: none; --art-opacity: 0.5;
  }
  [data-theme="noodle"]:not([data-mode="light"]) {
    --bg: #1b1310; --panel: #251a15; --text: #f1e4d6; --muted: #b59d88; --line: #3d2c23;
    --accent: #e3705f; --accent-soft: #4a221c; --on-accent: #22100c; --panel-top: 3px solid #b5332a;
    --shadow: none;
  }
  [data-theme="cottage"]:not([data-mode="light"]) {
    --bg: #171812; --panel: #20221a; --text: #ece9dc; --muted: #aaa690; --line: #34372a;
    --accent: #9cc985; --accent-soft: #2a3a22; --on-accent: #142010; --header-bg: #20221a;
    --shadow: none; --art-opacity: 0.35;
  }
}
[data-theme="sakura"][data-mode="dark"] {
    --bg: #1b1518; --panel: #251d21; --text: #f1e6e9; --muted: #b39fa6; --line: #3a2d33;
    --accent: #f2a3bd; --accent-soft: #4a2633; --on-accent: #2a1018; --header-bg: #251d21;
    --shadow: none; --art-opacity: 0.85;
  }
[data-theme="garden"][data-mode="dark"] {
    --bg: #121a17; --panel: #1a2420; --text: #e3ece6; --muted: #9db0a6; --line: #2c3a34;
    --accent: #7cc4aa; --accent-soft: #1d3a31; --on-accent: #0c1a15; --header-bg: #1a2420;
    --shadow: none; --art-opacity: 0.55;
  }
[data-theme="mountains"][data-mode="dark"] {
    --bg: #10161c; --panel: #18212a; --text: #e2e9ef; --muted: #98a7b5; --line: #283541;
    --accent: #7fb6d8; --accent-soft: #1b3446; --on-accent: #0b1620; --header-bg: #18212a;
    --shadow: none; --art-opacity: 0.5;
  }
[data-theme="noodle"][data-mode="dark"] {
    --bg: #1b1310; --panel: #251a15; --text: #f1e4d6; --muted: #b59d88; --line: #3d2c23;
    --accent: #e3705f; --accent-soft: #4a221c; --on-accent: #22100c; --panel-top: 3px solid #b5332a;
    --shadow: none;
  }
[data-theme="cottage"][data-mode="dark"] {
    --bg: #171812; --panel: #20221a; --text: #ece9dc; --muted: #aaa690; --line: #34372a;
    --accent: #9cc985; --accent-soft: #2a3a22; --on-accent: #142010; --header-bg: #20221a;
    --shadow: none; --art-opacity: 0.35;
  }

[data-theme="woods"][data-mode="dark"] {
    --bg: #111611; --panel: #1a211a; --text: #e2eadf; --muted: #9fae99; --line: #2c372b;
    --accent: #93c486; --accent-soft: #233a20; --on-accent: #0e1a0c; --header-bg: #1a211a;
    --shadow: none; --art-opacity: 0.5;
  }
[data-theme="pool"][data-mode="dark"] {
    --bg: #0f1919; --panel: #162323; --text: #dff0ef; --muted: #93b1b1; --line: #263938;
    --accent: #6fcfd3; --accent-soft: #163637; --on-accent: #082021; --header-bg: #162323;
    --shadow: none; --art-opacity: 0.55;
  }
[data-theme="rain"][data-mode="dark"] {
    --bg: #12161d; --panel: #1a2029; --text: #e3e9f1; --muted: #9aa7b8; --line: #2a3340;
    --accent: #8fb0dd; --accent-soft: #1f3048; --on-accent: #0c1522; --header-bg: #1a2029;
    --shadow: none; --art-opacity: 0.7;
  }
[data-theme="cafe"][data-mode="dark"] {
    --bg: #1a1411; --panel: #241c17; --text: #f1e6d8; --muted: #b7a291; --line: #3b2e26;
    --accent: #e8877d; --accent-soft: #4a221e; --on-accent: #220c09; --header-bg: #241c17;
    --shadow: none; --art-opacity: 0.8;
  }
[data-theme="sweets"][data-mode="dark"] {
    --bg: #1b1618; --panel: #251e21; --text: #f2e7ea; --muted: #b7a3aa; --line: #3a2e33;
    --accent: #a9cf7f; --accent-soft: #2c3a20; --on-accent: #142008; --header-bg: #251e21;
    --panel-top: 3px solid #a85870; --shadow: none; --art-opacity: 0.85;
  }
[data-theme="reptile"][data-mode="dark"] {
    --bg: #101813; --panel: #18221b; --text: #e1ece3; --muted: #9bb0a0; --line: #2a382e;
    --accent: #6fcb9f; --accent-soft: #173a2a; --on-accent: #08200f; --header-bg: #18221b;
    --shadow: none; --art-opacity: 0.6;
  }
/* Cyberpunk stays dark on Auto; its light version only when chosen with the header button. */
[data-theme="cyber"][data-mode="light"] {
    --bg: #f1eff7; --panel: #ffffff; --text: #1d1830; --muted: #625a7d; --line: #e0dcec;
    --accent: #b0136b; --accent-soft: #f6dcea; --on-accent: #fff;
    --nav-active-bg: rgb(176 19 107 / 0.1); --nav-active: #b0136b; --chip-bg: rgb(255 255 255 / 0.8);
    --panel-top: 2px solid #b0136b; --shadow: 0 1px 3px rgb(29 24 48 / 0.08); color-scheme: light;
    --header-bg: #ffffff; --header-text: #1d1830;
  }


/* Narrow screens: the header art shrinks so it never crowds the menu. */
@media (max-width: 600px) {
  header::before { width: 62%; height: min(70px, 100%); opacity: calc(var(--art-opacity, 1) * 0.6); }
  #root::after { height: calc(var(--footer-height, 0px) * 0.7); }
}