.theme-picker{position:relative;z-index:80;padding:9px 20px;text-align:right;background:var(--surface,#fff8f5);color:var(--ink,#542b3a);font:14px system-ui;border-bottom:1px solid var(--line,#edd4dd)}.theme-picker summary{cursor:pointer;display:inline-block;padding:6px 8px}.theme-options{display:flex;justify-content:flex-end;align-items:center;flex-wrap:wrap;gap:12px;padding:12px 0}.theme-options select,.theme-options button{font:14px system-ui;padding:10px;border-radius:12px;border:1px solid var(--line,#ddc6ce);background:var(--surface,#fff9f5);color:var(--ink,#542b3a)}.theme-options label{display:flex;gap:8px;align-items:center}.theme-options small{flex-basis:100%;font-size:12px}.theme-options input{accent-color:var(--red,#ac426d)}
:root[data-theme=cafe]{--bg:#f3ebe5;--surface:#fffbf5;--surface-sunk:#eadfd5;--ink:#51372d;--muted:#876b5b;--red:#9b594b;--red-deep:#754237;--pink:#d9ad99;--petal:#ead5c9;--line:#ddc9b9;--line-strong:#c7a893}
:root[data-theme=cabin]{--bg:#faf0df;--surface:#fff8e9;--surface-sunk:#edddc2;--ink:#553c2b;--muted:#89664a;--red:#ab5735;--red-deep:#7d3d24;--pink:#d7a66f;--petal:#f2d1a7;--line:#ddc29c;--line-strong:#c7a37a}
:root[data-theme=picnic]{--bg:#f1f7e9;--surface:#fffff4;--surface-sunk:#e3edd8;--ink:#344c3d;--muted:#647d61;--red:#9e446d;--red-deep:#71304e;--pink:#e3a1bc;--petal:#f2d0de;--line:#c9d8b9;--line-strong:#a8bf98}
:root[data-theme=stars]{--bg:#202439;--surface:#30364f;--surface-sunk:#282e45;--ink:#f7e9f4;--muted:#d1bfd9;--red:#ed9cc7;--red-deep:#bc6fa1;--pink:#9e89b4;--petal:#494462;--line:#62617c;--line-strong:#8c7d9f}
:root:not([data-theme=classic]) body,:root:not([data-theme=classic]) .garden-app{background:var(--bg);color:var(--ink)}:root:not([data-theme=classic]) .garden-header,:root:not([data-theme=classic]) .garden-app .card,:root:not([data-theme=classic]) .ln-panel,:root:not([data-theme=classic]) .ln-header{background:var(--surface);border-color:var(--line);color:var(--ink)}:root:not([data-theme=classic]) .garden-app h1,:root:not([data-theme=classic]) .garden-app h2,:root:not([data-theme=classic]) .garden-app h3,:root:not([data-theme=classic]) .ln-panel h2{color:var(--ink)}
:root[data-theme=stars] .garden-app .fine,:root[data-theme=stars] .garden-app .intro,:root[data-theme=stars] .garden-app .eyebrow,:root[data-theme=stars] .garden-app .quest p,:root[data-theme=stars] .garden-app .adventure p,:root[data-theme=stars] .garden-app .level-caption,:root[data-theme=stars] .garden-app .bond-row span,:root[data-theme=stars] .ln-help{color:var(--muted)}:root[data-theme=stars] .garden-app button,:root[data-theme=stars] .garden-app input,:root[data-theme=stars] .garden-app select{color:#48394b}:root[data-theme=stars] .garden-header a,:root[data-theme=stars] .ln-header a{color:var(--ink)}:root[data-theme=stars] .date-cards article,:root[data-theme=stars] .bowl-scores span,:root[data-theme=stars] .draw-deck{color:#633849}:root[data-theme=stars] .primary{color:#35223a}:root[data-theme=stars] .garden-app .pet-meadow,:root[data-theme=stars] .garden-app .garden-field{color:#41533f}:root[data-theme=stars] .garden-app .quest strong,:root[data-theme=stars] .garden-app .adventure strong{color:var(--ink)}
@media(max-width:600px){.theme-picker{padding:8px 12px}.theme-options{justify-content:flex-start}.theme-options select{max-width:100%}}
/* Keep controls and panels readable when the surrounding page is dark. */
:root[data-theme=stars] .card,:root[data-theme=stars] .turnbar,:root[data-theme=stars] dialog{background:var(--surface);color:var(--ink)}
:root[data-theme=stars] button,:root[data-theme=stars] input:not([type=range]):not([type=color]),:root[data-theme=stars] select{background-color:var(--surface);color:var(--ink)}
:root[data-theme=stars] button:hover{background-color:var(--petal)}
:root[data-theme=stars] button.primary{background:var(--red);color:#35223a}
:root[data-theme=stars] header a.icon{color:var(--ink);background:transparent}
:root[data-theme=stars] .date-cards{color:#633849}
.theme-options select{width:auto;min-width:190px}
:root[data-theme=stars] body>header,:root[data-theme=stars] .mobile-tabs{background:var(--surface);color:var(--ink);border-color:var(--line)}
/* Scenery lives behind the app: controls, notes and boards stay unobstructed. */
body{isolation:isolate}.theme-world{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--bg)}.theme-world>*{position:absolute}.theme-world canvas{inset:0;width:100%;height:100%}.theme-world .world-caption{bottom:20px;left:24px;font:italic 13px Georgia;letter-spacing:.06em;color:var(--muted);opacity:.7}.world-glow{inset:0}.world-window,.world-moon,.world-lamp,.world-hearth,.world-cup,.world-hills,.world-constellation{display:none}
.theme-picker{background:color-mix(in srgb,var(--surface) 94%,transparent);backdrop-filter:blur(14px)}.theme-current{font-size:12px;font-weight:400;opacity:.7;margin-left:12px}.theme-options{align-items:end;gap:18px;text-align:left;max-width:1200px;margin:auto}.theme-options>label{display:grid;gap:8px;font-size:11px;letter-spacing:.1em;text-transform:uppercase}.theme-options input{width:130px}.theme-options small{letter-spacing:0;text-transform:none}.theme-options button{min-height:44px}
:root:not([data-theme=classic]) .garden-app{background:transparent}
:root:not([data-theme=classic]) .card,:root:not([data-theme=classic]) .ln-panel{background:color-mix(in srgb,var(--surface) 96%,transparent);border-color:var(--line);box-shadow:0 16px 50px #1c172211}
:root:not([data-theme=classic]) header{background:color-mix(in srgb,var(--surface) 94%,transparent);border-color:var(--line);backdrop-filter:blur(12px)}
:root[data-theme=cafe]{--bg:#bcbdb3;--surface:#fff6e8;--surface-sunk:#eee0ca;--ink:#43352c;--muted:#70614f;--red:#936244;--line:#d2baa0;--petal:#ebd5b9}
[data-theme=cafe] .theme-world{background:linear-gradient(90deg,#827f72 0%,#b8c3c1 24%,#d5d7c8 50%,#a1b5b9 78%,#777769)}
[data-theme=cafe] .world-glow{background:radial-gradient(ellipse at 7% 20%,#ffcb7970,transparent 35%),linear-gradient(0deg,#5a423990,transparent 40%)}
[data-theme=cafe] .world-window{display:block;inset:6% 5% 10%;border:18px solid #554237;border-radius:100px 100px 0 0;box-shadow:inset 0 0 45px #202a3460,0 0 0 5px #b98e68;background:repeating-linear-gradient(90deg,transparent 0,transparent calc(33.333% - 6px),#5d4736 calc(33.333% - 6px),#5d4736 33.333%)}
[data-theme=cafe] .world-window:after{content:'';position:absolute;inset:48% 0 auto;height:10px;background:#5d4736}
[data-theme=cafe] .world-lamp{display:block;left:6%;top:0;height:140px;width:2px;background:#4b3930}
[data-theme=cafe] .world-lamp:after{content:'';position:absolute;bottom:-20px;left:-40px;width:82px;height:35px;border-radius:50% 50% 8% 8%;background:#714d30;box-shadow:0 25px 60px 25px #ffd79270}
[data-theme=cafe] .world-cup{display:block;bottom:5%;right:4%;width:74px;height:55px;border-radius:8px 8px 35px 35px;background:#ffedce;box-shadow:0 10px 0 -3px #c2a583}
.world-cup:after{content:'';position:absolute;right:-19px;top:5px;width:22px;height:26px;border:6px solid #ffedce;border-radius:50%}.world-cup i{position:absolute;left:20px;bottom:65px;width:10px;height:40px;border-left:2px solid #fff7df80;border-radius:50%;animation:theme-steam 5s ease-in-out infinite}.world-cup i:nth-child(2){left:38px;animation-delay:-2s}.world-cup i:nth-child(3){left:52px;animation-delay:-3s}
[data-theme=cafe] .card,[data-theme=cafe] .date-cards article{border-radius:15px;box-shadow:0 8px 0 -4px #74523830,0 18px 45px #3b29211c}
:root[data-theme=cabin]{--bg:#ead3b0;--surface:#fff5de;--line:#caa779;--ink:#4b3428;--red:#a4532e}
[data-theme=cabin] .theme-world{background:repeating-linear-gradient(0deg,#81533314 0 2px,transparent 2px 120px),linear-gradient(125deg,#a37750,#e6c68e 45%,#ba8351)}
[data-theme=cabin] .world-landscape{inset:0;background:linear-gradient(155deg,transparent 65%,#573f3330 66%),repeating-linear-gradient(90deg,#593a2220 0 1px,transparent 1px 120px)}
[data-theme=cabin] .world-glow{background:radial-gradient(ellipse at 90% 95%,#ffbb4c90,transparent 55%);animation:hearth-glow 6s ease-in-out infinite alternate}
[data-theme=cabin] .world-hearth{display:block;bottom:-10px;right:2%;width:150px;height:180px;border:24px solid #795640;border-bottom:0;border-radius:80px 80px 0 0;background:radial-gradient(ellipse at bottom,#ffd581 0,#dd702c 25%,#39251d 65%);box-shadow:0 0 0 8px #b68d69}
[data-theme=cabin] .card{border-radius:12px;border-bottom:4px solid #cba67c}
:root[data-theme=stars]{--bg:#11172e;--surface:#242c48;--surface-sunk:#1b233d;--line:#556286;--muted:#c5c9e0;--ink:#f5efff}
[data-theme=stars] .theme-world{background:radial-gradient(ellipse at 70% 25%,#463969 0,transparent 45%),linear-gradient(#10142a,#1d3451)}
[data-theme=stars] .world-glow{background:radial-gradient(ellipse at 0% 65%,#23597860,transparent 45%),radial-gradient(ellipse at 100% 90%,#62458d50,transparent 40%)}
[data-theme=stars] .world-moon{display:block;right:5%;top:17%;width:92px;height:92px;border-radius:50%;box-shadow:inset 21px -9px #f6e6c2,0 0 50px #fff0cf12;transform:rotate(-20deg)}
[data-theme=stars] .world-constellation{display:block;left:-15%;top:25%;width:120px;height:1px;background:linear-gradient(90deg,transparent,#fff2d9);transform:rotate(-25deg);animation:shooting-star 19s ease-in infinite}
[data-theme=stars] .card,[data-theme=stars] .ln-panel{box-shadow:0 0 0 1px #c4b9ff0a,0 18px 55px #080d2433}
[data-theme=stars] .world-caption{color:#d9d6eb}
[data-theme=picnic] .theme-world{background:linear-gradient(#d9edf1 0%,#edf4da 55%,#d0dfaa)}
[data-theme=picnic] .world-glow{background:radial-gradient(circle at 12% 17%,#fff9ce 0, #fff5c550 7%,transparent 25%)}
[data-theme=picnic] .world-hills{display:block;left:-15%;right:-15%;height:35%;bottom:-12%;background:#90b27a;border-radius:50% 60% 0 0;transform:rotate(-4deg);box-shadow:100px -30px 0 #b3c995}
[data-theme=picnic] .card{background:linear-gradient(#fffdf3ed,#fffdf3ed),repeating-conic-gradient(#d68ea6 0% 25%,transparent 0% 50%) 0/24px 24px;border:2px solid #c4d4ac;border-radius:28px}
[data-theme=picnic] .theme-picker{border-bottom:5px solid #d7a9b770}
[data-theme=classic] .world-glow{background:radial-gradient(ellipse at 0 50%,#f9d8e540,transparent 50%)}
html[data-theme]:not([data-theme=classic]) body{background:transparent}
@keyframes theme-steam{0%,100%{opacity:0;transform:translateY(6px) scaleX(.8)}45%{opacity:.7}90%{opacity:0;transform:translateY(-28px) scaleX(1.3)}}
@keyframes hearth-glow{from{opacity:.55}to{opacity:.9}}
@keyframes shooting-star{0%,83%{opacity:0;transform:translate(0,0) rotate(-25deg)}84%{opacity:.8}92%,100%{opacity:0;transform:translate(130vw,-20vh) rotate(-25deg)}}
@media(max-width:600px){.theme-current{display:block;margin:4px 0 0}.theme-options{display:grid;grid-template-columns:1fr 1fr}.theme-options>label:first-child,.theme-options small{grid-column:1/-1}.theme-options select{width:100%;min-width:0;max-width:100%}.theme-options input{width:100%}.theme-world .world-caption{display:none}[data-theme=cafe] .world-window{inset:4% 2% 4%;border-width:9px}[data-theme=stars] .world-moon{width:60px;height:60px}.theme-picker{backdrop-filter:none}}
@media(prefers-reduced-motion:reduce){.theme-world *{animation:none!important}}
html[data-theme]{background:var(--bg)}
.roulette-options{align-items:end}.roulette-options>button{min-height:49px}
:root:not([data-theme=classic]) header a.icon{color:var(--ink);background:transparent}
:root:is([data-theme=cafe],[data-theme=cabin],[data-theme=picnic]) .game{background:color-mix(in srgb,var(--surface) 94%,transparent);border:1px solid var(--line);border-radius:26px;padding:22px;min-width:0}
:root:is([data-theme=cafe],[data-theme=cabin],[data-theme=picnic]) .menu-heading{background:color-mix(in srgb,var(--surface) 94%,transparent);border-radius:28px;padding:28px 12px}
@media(max-width:600px){:root:is([data-theme=cafe],[data-theme=cabin],[data-theme=picnic]) .game{padding:12px}}

/* The scene settings as a dialog rather than a bar across the top. */
dialog.theme-picker{position:fixed;inset:auto;z-index:2000;width:min(560px,calc(100vw - 24px));max-height:calc(100dvh - 32px);overflow:auto;margin:auto;padding:18px 20px;border:1px solid var(--line,#edd4dd);border-radius:22px;text-align:left;box-shadow:0 24px 60px rgba(60,20,40,.28);backdrop-filter:none}
dialog.theme-picker::backdrop{background:rgba(40,18,30,.35);backdrop-filter:blur(3px)}
dialog.theme-picker[open]{display:block}
.theme-head{display:flex;align-items:center;gap:10px;font:17px Georgia,serif}
.theme-head .theme-current{margin:0 auto 0 0;font:13px system-ui;opacity:.7}
.theme-close{border:0;background:none;font-size:26px;line-height:1;cursor:pointer;color:inherit;padding:4px 8px}
dialog.theme-picker .theme-options{display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:14px 0 0;max-width:none}
dialog.theme-picker .theme-options>label:first-child,dialog.theme-picker .theme-options small{grid-column:1/-1}
dialog.theme-picker .theme-options select,dialog.theme-picker .theme-options input{width:100%}
.scene-fab{position:fixed;left:14px;bottom:calc(14px + env(safe-area-inset-bottom));z-index:60;width:44px;height:44px;border-radius:50%;border:1px solid var(--line,#edd4dd);background:var(--surface,#fff8f5);color:var(--ink,#542b3a);font-size:18px;box-shadow:0 6px 18px rgba(60,20,40,.18);cursor:pointer}
@media(max-width:600px){dialog.theme-picker .theme-options{grid-template-columns:1fr}}
/* Halloween night: pumpkin orange and witchy purple on warm parchment (offered in October). */
:root[data-theme=halloween]{--bg:#f6e8d6;--surface:#fff7ec;--surface-sunk:#efdcc4;--ink:#3b2a3f;--muted:#76607a;--red:#d8661c;--red-deep:#8a3b10;--pink:#b58ad6;--petal:#f2d6bd;--line:#e3c6a4;--line-strong:#c99d74}
:root[data-theme=halloween] body{background:radial-gradient(120% 80% at 50% -10%,#fde4c4 0%,#f6e8d6 45%,#ecd9ea 100%) fixed}
:root[data-theme=halloween] button.primary{background:linear-gradient(180deg,#f08a2c,#d8661c);color:#fff}
:root[data-theme=halloween] .brand::after{content:" 🎃";font-size:.8em}