/* Original vector scenery keeps the existing blue and yellow workspace identity. */
:root {
  --scene-tint: #89bfe3;
  --scene-sky: #121f3a;
  --scene-horizon: #213f61;
  --scene-cloud: #a7c7e2;
  --scene-ground: #547e8a;
}
:root[data-theme="light"] {
  --scene-sky: #dbeeff;
  --scene-horizon: #f1f8ff;
  --scene-cloud: #ffffff;
  --scene-ground: #badbd5;
}
:root[data-background="spring"] { --scene-tint: #ecb1a6; --scene-horizon: #42304c; --scene-ground: #946c79; }
:root[data-background="dragon-boat"] { --scene-tint: #a5d7c1; --scene-horizon: #1a454c; --scene-ground: #4e8984; }
:root[data-background="mid-autumn"] { --scene-tint: #ead29b; --scene-horizon: #363658; --scene-ground: #7e789e; }
:root[data-background="halloween"] { --scene-tint: #c1acdf; --scene-horizon: #3c3154; --scene-ground: #7c7096; }
:root[data-background="christmas"] { --scene-tint: #acd9cb; --scene-horizon: #23464d; --scene-ground: #88adaa; }
:root[data-background="new-year"] { --scene-tint: #d6bfdc; --scene-horizon: #343253; --scene-ground: #8b7a9d; }
:root[data-theme="light"][data-background="spring"] { --scene-sky: #fae7de; --scene-horizon: #fff7ee; --scene-ground: #ecd0cc; }
:root[data-theme="light"][data-background="dragon-boat"] { --scene-sky: #ddf1e7; --scene-horizon: #f2fcf7; --scene-ground: #b7dacf; }
:root[data-theme="light"][data-background="mid-autumn"] { --scene-sky: #eee8fc; --scene-horizon: #fff8e8; --scene-ground: #d8cde4; }
:root[data-theme="light"][data-background="halloween"] { --scene-sky: #eee4f7; --scene-horizon: #fff4e9; --scene-ground: #d6c4e2; }
:root[data-theme="light"][data-background="christmas"] { --scene-sky: #e1f0f0; --scene-horizon: #f8fbfa; --scene-ground: #c4dcda; }
:root[data-theme="light"][data-background="new-year"] { --scene-sky: #eae7fb; --scene-horizon: #fcf7ee; --scene-ground: #d9d0e5; }
body { background: linear-gradient(155deg, var(--scene-sky), var(--scene-horizon)); background-attachment: fixed; }
.app-shell { position: relative; z-index: 1; }
.seasonal-backdrop { position: fixed; z-index: 0; inset: 0; overflow: hidden; pointer-events: none; user-select: none; color: var(--scene-tint); }
.seasonal-backdrop__glow { position: absolute; inset: 0; background: radial-gradient(ellipse at 89% 19%, color-mix(in srgb, var(--scene-tint) 13%, transparent), transparent 42%); }
.seasonal-sky { position: absolute; top: 4.5rem; right: 1vw; width: clamp(260px, 30vw, 440px); opacity: .45; }
.seasonal-sky__sun { display: none; }
.seasonal-sky__cloud { fill: var(--scene-cloud); opacity: .13; }
:root[data-theme="light"] .seasonal-sky { opacity: .85; }
:root[data-theme="light"] .seasonal-sky__sun { display: initial; }
:root[data-theme="light"] .seasonal-sky__moon { display: none; }
:root[data-theme="light"] .seasonal-sky__cloud { opacity: .9; }
.seasonal-backdrop__art { position: absolute; right: -3rem; bottom: 2rem; width: clamp(330px, 36vw, 600px); height: auto; opacity: .2; }
:root[data-theme="light"] .seasonal-backdrop__art { opacity: .33; }
.seasonal-backdrop__hills { position: absolute; left: -10%; right: -10%; bottom: -12rem; height: 22rem; border-radius: 55% 90% 0 0; background: var(--scene-ground); opacity: .1; transform: rotate(-5deg); }
.seasonal-backdrop__hills::before { position: absolute; inset: -2rem -10% 0 22%; content: ""; border: 1px solid var(--scene-tint); border-radius: 75% 100% 0 0; transform: rotate(12deg); }
/* Ground the controls on calm, opaque surfaces and keep the illustrations at the edges. */
.sidebar { border-right-width: 2px; box-shadow: 1px 0 0 var(--line), 8px 0 24px rgba(8, 24, 45, .12); }
.page-header h2 { text-shadow: none; }
.glass-card, .page-guide { box-shadow: 0 3px 0 var(--game-border), 0 10px 26px rgba(5, 20, 40, .12); }
.seasonal-sidebar { position: relative; flex: 0 0 auto; margin: 22px 5px 0; padding: 0 10px 14px; text-align: center; border: 1px solid color-mix(in srgb, var(--scene-tint) 32%, transparent); border-radius: 18px; background: linear-gradient(150deg, color-mix(in srgb, var(--scene-tint) 12%, var(--surface)), var(--surface)); pointer-events: none; }
.seasonal-sidebar img { display: block; width: min(100%, 240px); height: auto; margin: -3px auto -8px; }
.seasonal-sidebar p { display: flex; justify-content: center; align-items: center; gap: 7px; margin: 0; color: var(--text); font-size: var(--font-size-support); font-weight: 750; }
.seasonal-sidebar__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--scene-tint); }
.seasonal-sidebar small { display: block; margin-top: 3px; color: var(--text-faint); font-size: var(--font-size-min); }
.seasonal-sidebar + .sidebar__footer { padding-top: 16px; }
.auth-page { position: relative; z-index: 1; background: transparent; }
.auth-panel { background: color-mix(in srgb, var(--surface) 97%, transparent); }
.auth-visual, :root[data-theme="light"] .auth-visual { background: transparent; border-left: 1px solid var(--line); }
.auth-visual::after { display: none; }
.auth-grid { opacity: .035; }
.auth-visual__content { color: var(--text); background: color-mix(in srgb, var(--surface) 94%, transparent); border: 2px solid var(--game-border); box-shadow: 0 4px 0 var(--game-border), 0 20px 44px rgba(5, 20, 40, .12); text-shadow: none; }
.auth-visual__content p { color: var(--text-soft); }
.auth-visual__content .eyebrow { color: var(--accent); }
.auth-visual__content h2 { font-size: clamp(2rem, 3.6vw, calc(var(--font-size-display) * .8)); line-height: 1.22; text-wrap: pretty; }
.auth-seasonal-scene { width: min(100%, 440px); margin: -35px auto 16px; }
.auth-seasonal-scene img { display: block; width: 100%; height: auto; filter: drop-shadow(0 12px 24px rgba(5, 20, 40, .08)); }
.auth-point { background: var(--surface-muted); border-color: var(--line); }
.auth-point strong { color: var(--accent); }
.auth-point span { color: var(--text-soft); }
@media (max-height: 880px) and (min-width: 1101px) {
  .seasonal-sidebar img { width: 140px; }
  .seasonal-sidebar { margin-top: 12px; padding-bottom: 10px; }
  .seasonal-sidebar small { display: none; }
}
@media (max-height: 700px) { .seasonal-sidebar { display: none; } }
@media (max-width: 1100px) {
  .seasonal-sky { top: 4rem; right: -65px; width: 260px; }
  .seasonal-backdrop__art { right: -90px; bottom: calc(var(--mobile-nav-height) + 10px); width: 330px; opacity: .12; }
  :root[data-theme="light"] .seasonal-backdrop__art { opacity: .2; }
}
@media (prefers-reduced-motion: reduce) {
  .seasonal-backdrop *, .seasonal-sidebar *, .auth-seasonal-scene * { animation: none !important; transition: none !important; }
}
@media (forced-colors: active) { .seasonal-backdrop, .seasonal-sidebar, .auth-seasonal-scene { display: none; } }
@media print { .seasonal-backdrop, .seasonal-sidebar, .auth-seasonal-scene { display: none !important; } body { background: white; } }