/* Shared seasonal surfaces. Decorations and motion are CSS only. */
.seasonal-art { display:none; pointer-events:none; }
[data-theme="halloween"] { --accent:#ffad58; --accent-soft:#ffc778; --surface:#201529; --surface-deep:#120d1b; --button-start:#a74708; --button-end:#763608; --halo:#e7803533; --sky:#402449; --sky-secondary:#3a1b1a; }
[data-theme="easter"] {
  --bg1:#121023; --bg2:#211b35; --card:#282039; --text:#faf5ff; --sub:#d4c9e8; --border:#655578;
  --red:#79549d; --red-bright:#d8b5ff; --red-dark:#49355f; --green:#aae3bd; --amber:#ffe3a0; --gold:#ffe3a0;
  --accent:#d8b5ff; --accent-soft:#b5edcd; --surface:#292139; --surface-deep:#191324;
  --button-start:#775198; --button-end:#50376b; --halo:#c0a1eb33; --sky:#3b2c50; --glow-red:#c0a1eb33; color-scheme:dark;
}
[data-theme="christmas"] {
  --bg1:#081914; --bg2:#10291f; --card:#183027; --text:#fff8e9; --sub:#c7dbd0; --border:#466555;
  --red:#aa3445; --red-bright:#ffc87b; --red-dark:#652436; --green:#91dbb0; --amber:#ffe0a1; --gold:#ffe0a1;
  --accent:#ffd08b; --accent-soft:#9ce0b8; --surface:#193329; --surface-deep:#0c2019;
  --button-start:#aa3445; --button-end:#652436; --halo:#efc77626; --sky:#214738; --glow-red:#efc77626; color-scheme:dark;
}
[data-theme="valentines"] {
  --bg1:#200e1b; --bg2:#321625; --card:#3b1b2c; --text:#fff1f6; --sub:#eac4d4; --border:#82516a;
  --red:#b23666; --red-bright:#ffb0cf; --red-dark:#70234c; --green:#bbe3c6; --amber:#ffd9ad; --gold:#ffd9ad;
  --accent:#ffadcd; --accent-soft:#ffdbb5; --surface:#3c1c30; --surface-deep:#27111f;
  --button-start:#a83363; --button-end:#70234c; --halo:#ff92be2b; --sky:#602741; --glow-red:#ff92be2b; color-scheme:dark;
}
[data-seasonal="true"] .site-backdrop { background:radial-gradient(ellipse at 8% 0,var(--sky),transparent 65%),radial-gradient(ellipse at 100% 65%,var(--sky-secondary,var(--surface)),transparent 60%),var(--bg1); }
[data-seasonal="true"] #app, [data-seasonal="true"] #login-screen { position:relative; z-index:1; }
[data-seasonal="true"] .header {
  padding-top:104px; border-color:var(--accent); background:radial-gradient(ellipse at 50% 0,var(--sky),transparent 75%),var(--surface-deep);
  box-shadow:0 14px 38px #0006,inset 0 1px 0 var(--halo);
}
[data-seasonal="true"] .header h1 { color:var(--text); text-shadow:3px 3px var(--surface-deep),0 0 24px var(--halo); }
[data-seasonal="true"] .header .subtitle { color:var(--accent); }
[data-seasonal="true"] .header-bullets { background:var(--surface-deep); border-color:var(--border); }
[data-seasonal="true"] .header-bullet-item { color:var(--text); }
[data-seasonal="true"] .header-bullet-item::marker { color:var(--accent); }
[data-seasonal="true"] :is(.hour-card,.admin-card,.ref-card-container,.status-panel,.day-picker,.login-card) {
  background:linear-gradient(145deg,var(--surface),var(--surface-deep)); border-color:var(--border);
  box-shadow:0 8px 24px #0003,inset 0 1px 0 var(--halo);
}
[data-seasonal="true"] :is(.settings-bar,.nav-bar,.ref-card,#modal-box) { background:var(--surface-deep); border-color:var(--border); }
[data-seasonal="true"] :is(.admin-field,.ref-card-container select,.claim-form select) { background:var(--surface-deep); border-color:var(--border); }
[data-seasonal="true"] .admin-card > h3 { color:var(--accent); }
[data-seasonal="true"] .slot { background:var(--surface-deep); }
[data-seasonal="true"] .slot.open { border-color:var(--border); }
[data-seasonal="true"] .slot.filled { border-color:var(--green); }
[data-seasonal="true"] .btn { background:var(--surface); border-color:var(--border); transition:background .18s,border-color .18s,box-shadow .18s; }
[data-seasonal="true"] :is(.btn-primary,.nav-btn.active) {
  color:#fff; border-color:var(--accent); background:linear-gradient(135deg,var(--button-start),var(--button-end));
  box-shadow:inset 0 1px 0 #ffffff33,0 3px 12px var(--halo);
}
[data-seasonal="true"] .btn-green { background:#254432; color:#e0ffe9; border-color:#77bd90; }
[data-seasonal="true"] .btn-danger { background:transparent; border-color:#cb7892; color:#ffb8c8; }
[data-seasonal="true"] .hour-card.bonus-hour { border-color:var(--gold); box-shadow:inset 0 0 0 1px var(--halo),0 0 20px var(--halo); animation:none; }
@media (hover:hover) {
  [data-seasonal="true"] :is(.btn,.nav-btn):hover:not(:disabled) { border-color:var(--accent); box-shadow:0 0 16px var(--halo),inset 0 1px 0 #ffffff26; }
  [data-seasonal="true"] .slot.open:hover { border-color:var(--accent); }
}
/* Decorative edging stays static and never crosses text or hit targets. */
[data-seasonal="true"] .hour-card::before { content:""; position:absolute; inset:0 18px auto; height:2px; background:linear-gradient(90deg,transparent,var(--accent),var(--accent-soft),transparent); pointer-events:none; }
[data-theme="halloween"] .nav-bar { border-color:#b16b30; box-shadow:0 0 18px #e7803517; }
[data-theme="halloween"] .hour-card { border-color:#7d4c35; }
[data-theme="halloween"] .btn-primary { background:repeating-linear-gradient(135deg,#ffffff07 0 8px,transparent 8px 16px),linear-gradient(135deg,var(--button-start),var(--button-end)); }
[data-theme="christmas"] { --card-frame:repeating-linear-gradient(120deg,#b34853 0 8px,#f4e4c1 8px 16px,#5b9d76 16px 24px); }
[data-theme="easter"] { --card-frame:repeating-linear-gradient(135deg,#c9a3eb 0 10px,#b4e1c5 10px 20px,#ffe0a5 20px 30px); }
/* Layered backgrounds follow the real rounded border on all four sides. */
:is([data-theme="christmas"],[data-theme="easter"]) .hour-card,
:is([data-theme="christmas"],[data-theme="easter"]) .hour-card.bonus-hour {
  border:2px solid transparent;
  background:linear-gradient(145deg,var(--surface),var(--surface-deep)) padding-box,var(--card-frame) border-box;
}
:is([data-theme="christmas"],[data-theme="easter"]) .hour-card::before { display:none; }
[data-theme="valentines"] .hour-card::before { background:linear-gradient(90deg,transparent,#e69caf,#ffe3b7,#e69caf,transparent); }

/* All decorative sets exist in the DOM: switching themes needs no rerender. */
.seasonal-art { position:absolute; inset:0 0 auto; height:96px; overflow:hidden; }
[data-theme="easter"] .easter-art, [data-theme="christmas"] .christmas-art, [data-theme="valentines"] .valentines-art { display:block; }

/* Easter: painted eggs, daisies and a bunny with soft, hinged ears. */
.easter-egg { position:absolute; top:31px; width:34px; height:46px; border-radius:52% 52% 46% 46% / 65% 65% 36% 36%; background:repeating-linear-gradient(25deg,#b497dc 0 10px,#f7ddaa 10px 15px,#93cfba 15px 24px); box-shadow:inset -7px -3px 0 #3c225526; }
.egg-left { left:calc(17% - 17px); }.egg-right { right:calc(17% - 17px); background:repeating-linear-gradient(-25deg,#efb6cb 0 9px,#eae0fb 9px 14px,#c7abe4 14px 24px); }
.bunny { position:absolute; top:45px; left:calc(50% - 24px); width:48px; height:37px; background:#fcf0e0; border-radius:48%; }
.bunny .ear { position:absolute; bottom:28px; width:15px; height:37px; background:linear-gradient(90deg,#fcf0e0 0 28%,#e9b5c8 29% 71%,#fcf0e0 72%); border-radius:60% 60% 35% 35%; transform-origin:50% 100%; }
.ear-left { left:6px; transform:rotate(-10deg); }.ear-right { right:6px; transform:rotate(10deg); }
.bunny::before { content:""; position:absolute; top:13px; left:12px; width:5px; height:6px; border-radius:50%; background:#4c365a; box-shadow:19px 0 #4c365a; }
.bunny::after { content:""; position:absolute; top:23px; left:21px; width:7px; height:5px; background:#d68ca8; border-radius:50% 50% 60% 60%; }
.bunny b { position:absolute; top:23px; left:6px; width:8px; height:4px; border-radius:50%; background:#f3cbd8; box-shadow:28px 0 #f3cbd8; }
.spring-flower { position:absolute; top:47px; width:12px; height:12px; border-radius:50%; background:#ffd88a; box-shadow:0 -9px #f8eaff,9px 0 #f8eaff,0 9px #f8eaff,-9px 0 #f8eaff; }
.flower-left { left:32%; }.flower-right { right:32%; }
[data-theme="easter"] .easter-egg { animation:egg-rock 7s ease-in-out infinite; transform-origin:50% 95%; }
[data-theme="easter"] .egg-right { animation-delay:-3.5s; }
[data-theme="easter"] .bunny { animation:bunny-bob 6s ease-in-out infinite; }
[data-theme="easter"] .ear-right { animation:bunny-ear 8s ease-in-out infinite; }
[data-theme="easter"] .spring-flower { animation:flower-turn 18s linear infinite; }

/* Christmas: a garland of lights, a wrapped gift and a swinging ornament. */
.fairy-lights { position:absolute; left:6%; right:6%; top:5px; height:18px; display:flex; justify-content:space-between; border-top:1px solid #98bca0; border-radius:50%; }
.fairy-lights i { width:7px; height:10px; margin-top:3px; background:#ffd389; border-radius:40% 40% 50% 50%; box-shadow:0 0 10px #ffd38966; }
.fairy-lights i:nth-child(3n) { background:#ed8b96; box-shadow:0 0 10px #ed8b9666; }
.fairy-lights i:nth-child(3n + 2) { background:#9bdeb6; box-shadow:0 0 10px #9bdeb666; }
.gift { position:absolute; top:44px; left:calc(22% - 21px); width:42px; height:34px; border-radius:3px; background:linear-gradient(90deg,transparent 41%,#ffdfa1 42% 58%,transparent 59%),linear-gradient(0deg,#b74558 65%,#ffdfa1 66% 79%,#b74558 80%); box-shadow:inset -5px -4px #73213833; }
.gift::before,.gift::after { content:""; position:absolute; top:-11px; width:17px; height:10px; border:3px solid #ffdfa1; border-radius:70% 70% 0; }
.gift::before { left:4px; transform:rotate(18deg); }.gift::after { right:4px; transform:rotate(-18deg) scaleX(-1); }
.fir-tree { position:absolute; top:27px; left:calc(50% - 30px); width:60px; height:58px; }
.fir-tree::before { content:""; position:absolute; inset:6px 0 6px; background:radial-gradient(circle at 50% 25%,#f3c66a 0 2px,transparent 3px),radial-gradient(circle at 38% 65%,#e17f8e 0 3px,transparent 4px),radial-gradient(circle at 66% 83%,#ffd98c 0 2px,transparent 3px),linear-gradient(90deg,#70bd8e,#378164); clip-path:polygon(50% 0,76% 35%,65% 35%,90% 65%,77% 65%,100% 100%,0 100%,23% 65%,10% 65%,35% 35%,24% 35%); }
.fir-tree::after { content:""; position:absolute; top:-4px; left:23px; width:15px; height:15px; background:#ffe4a8; clip-path:polygon(50% 0,62% 35%,100% 38%,72% 61%,80% 100%,50% 77%,20% 100%,28% 61%,0 38%,38% 35%); }
.fir-tree i { position:absolute; bottom:0; left:27px; width:7px; height:8px; background:#deb785; }
.bauble { position:absolute; top:43px; right:calc(22% - 17px); width:34px; height:36px; border-radius:50%; background:linear-gradient(0deg,transparent 40%,#ffdfa5 41% 50%,transparent 51%),radial-gradient(circle at 30% 28%,#eac0c6 0 5%,#c96575 20%,#943b52 80%); }
.bauble::before { content:""; position:absolute; width:1px; height:24px; top:-24px; left:17px; background:#f4d598; }
.bauble::after { content:""; position:absolute; top:-4px; left:12px; width:11px; height:6px; border-radius:3px 3px 0 0; background:#f4d598; }
[data-theme="christmas"] .fairy-lights i { animation:holiday-twinkle 4s ease-in-out infinite alternate; }
[data-theme="christmas"] .fairy-lights i:nth-child(even) { animation-delay:-2s; }
[data-theme="christmas"] .bauble { transform-origin:50% -24px; animation:spider-sway 8s ease-in-out infinite; }
[data-theme="christmas"] .gift { transform-origin:50% 100%; animation:egg-rock 8s ease-in-out infinite; }
[data-theme="christmas"] .fir-tree::after { animation:holiday-twinkle 5s ease-in-out infinite alternate; }

/* Valentine's Day: floating hearts, a sealed letter and little gold sparkles. */
.love-heart { position:absolute; top:39px; width:26px; height:26px; background:#ec92b3; transform:rotate(-45deg); border-radius:4px; }
.love-heart::before,.love-heart::after { content:""; position:absolute; width:26px; height:26px; border-radius:50%; background:inherit; }
.love-heart::before { top:-13px; left:0; }.love-heart::after { left:13px; top:0; }
.heart-left { left:calc(23% - 13px); }.heart-right { right:calc(23% - 13px); background:#f1b4c3; }
.love-envelope { position:absolute; top:37px; left:calc(50% - 28px); width:56px; height:38px; border:2px solid #f6cbbd; border-radius:4px; background:linear-gradient(32deg,#eaa8b4 49%,transparent 50%),linear-gradient(-32deg,#f5c8cf 49%,#fff0df 50%); }
.love-envelope::before { content:""; position:absolute; inset:0; background:#fce6d5; clip-path:polygon(0 0,100% 0,50% 66%); }
.love-envelope i { position:absolute; top:19px; left:22px; width:10px; height:10px; border-radius:50%; background:#b3436c; box-shadow:0 1px 3px #76345155; }
.love-spark { position:absolute; top:51px; width:14px; height:18px; background:#ffe1ac; clip-path:polygon(50% 0,62% 38%,100% 50%,62% 62%,50% 100%,38% 62%,0 50%,38% 38%); }
.spark-left { left:9%; }.spark-right { right:9%; }
[data-theme="valentines"] .love-heart { animation:heart-float 7s ease-in-out infinite; }
[data-theme="valentines"] .heart-right { animation-delay:-3.5s; }
[data-theme="valentines"] .love-envelope { animation:bunny-bob 8s ease-in-out infinite; }
[data-theme="valentines"] .love-spark { animation:holiday-twinkle 5s ease-in-out infinite alternate; }

/* The atmosphere lives outside #app, so polling doesn't restart its motion. */
[data-seasonal="true"] .seasonal-atmosphere { display:block; position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none; }
[data-seasonal="true"] .seasonal-atmosphere::before { content:""; position:absolute; inset:-12%; opacity:.3; background:radial-gradient(ellipse at 10% 75%,var(--halo),transparent 44%),radial-gradient(ellipse at 85% 20%,var(--halo),transparent 40%); animation:halloween-mist 28s ease-in-out infinite alternate; }
[data-seasonal="true"] .seasonal-atmosphere span { position:absolute; left:8%; bottom:-12px; width:5px; height:5px; border-radius:50%; background:var(--accent); box-shadow:0 0 10px var(--halo); opacity:0; animation:halloween-ember 22s linear infinite; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(2) { left:26%; animation-duration:28s; animation-delay:-12s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(3) { left:48%; animation-duration:24s; animation-delay:-6s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(4) { left:69%; animation-duration:30s; animation-delay:-23s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(5) { left:85%; animation-duration:26s; animation-delay:-17s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(6) { left:95%; animation-duration:32s; animation-delay:-4s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(7) { left:18%; animation-duration:25s; animation-delay:-19s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(8) { left:38%; animation-duration:31s; animation-delay:-9s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(9) { left:61%; animation-duration:23s; animation-delay:-15s; }
[data-seasonal="true"] .seasonal-atmosphere span:nth-child(10) { left:78%; animation-duration:29s; animation-delay:-21s; }
[data-theme="easter"] .seasonal-atmosphere span { width:9px; height:13px; border-radius:80% 20% 80% 20%; background:#eec4dc; animation-name:petal-fall; top:-20px; bottom:auto; }
[data-theme="christmas"] .seasonal-atmosphere span { width:5px; height:5px; background:#e3f8ed; animation-name:snow-fall; top:-20px; bottom:auto; }
[data-theme="valentines"] .seasonal-atmosphere span { width:12px; height:12px; border-radius:0; background:#efa9c7; clip-path:polygon(50% 23%,62% 8%,84% 8%,100% 27%,100% 46%,50% 100%,0 46%,0 27%,16% 8%,38% 8%); }
@keyframes egg-rock { 0%,100% { transform:rotate(-6deg); } 50% { transform:rotate(6deg); } }
@keyframes bunny-bob { 0%,100% { transform:translateY(2px); } 50% { transform:translateY(-5px); } }
@keyframes bunny-ear { 0%,60%,100% { transform:rotate(10deg); } 72%,85% { transform:rotate(22deg); } 78%,92% { transform:rotate(4deg); } }
@keyframes flower-turn { to { transform:rotate(360deg); } }
@keyframes holiday-twinkle { from { opacity:.45; } to { opacity:1; } }
@keyframes heart-float { 0%,100% { transform:translateY(3px) rotate(-50deg); } 50% { transform:translateY(-5px) rotate(-40deg); } }
@keyframes snow-fall { 0% { transform:translate(0,0); opacity:0; } 15%,80% { opacity:.55; } 100% { transform:translate(36px,110vh); opacity:0; } }
@keyframes petal-fall { 0% { transform:translate(0,0) rotate(0deg); opacity:0; } 15%,80% { opacity:.45; } 100% { transform:translate(-32px,110vh) rotate(160deg); opacity:0; } }
@media (max-width:600px) {
  [data-seasonal="true"] .header { padding-top:100px; }
  [data-seasonal="true"] .header .subtitle { letter-spacing:2px; font-size:.78rem; }
  [data-seasonal="true"] .seasonal-atmosphere::before, [data-seasonal="true"] .seasonal-atmosphere span:nth-child(even) { display:none; }
  .spring-flower { width:9px; height:9px; transform:scale(.8); }
}
@media (prefers-reduced-motion:reduce) {
  [data-seasonal="true"] .seasonal-art *, [data-seasonal="true"] .seasonal-art *::before, [data-seasonal="true"] .seasonal-art *::after { animation:none !important; }
  [data-seasonal="true"] .seasonal-atmosphere { display:none; }
  [data-seasonal="true"] :is(.btn,.nav-btn) { transition:none; }
}