/* ── Seasonal decorations (js/seasonal.js) ── */

.season-decor { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.season-decor .decor { position: absolute; }

/* Cobwebs in the top corners */
.decor-halloween .web { top: 0; color: rgba(255, 255, 255, 0.32); filter: drop-shadow(0 0 2px rgba(255, 255, 255, 0.2)); }
.decor-halloween .web-left { left: 0; }
.decor-halloween .web-right { right: 0; transform: scaleX(-1); }

/* Spiders dangling on threads */
.decor-halloween .spider { top: 0; display: flex; flex-direction: column; align-items: center; animation: spiderDrop 7s ease-in-out infinite; transform-origin: top center; }
.decor-halloween .spider .thread { width: 1px; height: 90px; background: rgba(255, 255, 255, 0.45); }
.decor-halloween .spider-1 { right: 70px; }
.decor-halloween .spider-2 { left: 18%; animation-duration: 9s; animation-delay: -3s; }
.decor-halloween .spider-2 .thread { height: 150px; }
@keyframes spiderDrop {
  0%, 100% { transform: translateY(-40px) rotate(0deg); }
  45% { transform: translateY(20px) rotate(3deg); }
  60% { transform: translateY(14px) rotate(-3deg); }
}

/* Pumpkin patches in the bottom corners */
.decor-halloween .patch { bottom: max(4px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 2px; filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5)); }
.decor-halloween .patch-left { left: 6px; }
.decor-halloween .patch-right { right: 6px; }
.decor-halloween .patch .small { display: inline-flex; }
.decor-halloween .jack-glow { animation: flicker 2.6s infinite; filter: drop-shadow(0 0 4px #ffb703); }
@keyframes flicker {
  0%, 100% { opacity: 1; } 8% { opacity: 0.75; } 10% { opacity: 1; } 42% { opacity: 0.88; } 44% { opacity: 1; } 70% { opacity: 0.8; } 73% { opacity: 1; }
}

/* Bats fly across the top of the home screen */
.decor-halloween .bat { top: 12%; left: -60px; animation: batFly 16s linear infinite; }
.decor-halloween .bat-2 { top: 22%; animation-delay: -6s; animation-duration: 19s; transform: scale(0.75); }
.decor-halloween .bat-3 { top: 6%; animation-delay: -11s; animation-duration: 22s; }
.decor-halloween .bat svg { animation: batBob 0.9s ease-in-out infinite; }
.decor-halloween .bat-wings { transform-origin: 30px 12px; animation: batFlap 0.25s ease-in-out infinite alternate; }
@keyframes batFly { from { left: -60px; } to { left: calc(100% + 60px); } }
@keyframes batBob { 50% { transform: translateY(10px); } }
@keyframes batFlap { from { transform: scaleY(1); } to { transform: scaleY(0.45); } }

/* A friendly ghost drifting on the home screen */
.decor-halloween .ghost { left: 4%; top: 42%; opacity: 0.55; animation: ghostFloat 6s ease-in-out infinite; }
@keyframes ghostFloat { 50% { transform: translate(12px, -18px) rotate(4deg); opacity: 0.8; } }

/* Unit / game / teacher / live screens: corners only, smaller and fainter */
html.boot-main .season-decor .home-only, html.on-live .season-decor .home-only,
html.boot-teacher .season-decor .home-only { display: none; }
html.boot-main .decor-halloween .web svg, html.on-live .decor-halloween .web svg { width: 110px; height: 110px; }
html.boot-main .decor-halloween .web, html.on-live .decor-halloween .web { color: rgba(255, 255, 255, 0.22); }
html.boot-main .decor-halloween .patch, html.on-live .decor-halloween .patch { opacity: 0.85; transform: scale(0.7); }
html.boot-main .decor-halloween .patch-left, html.on-live .decor-halloween .patch-left { transform-origin: bottom left; }
html.boot-main .decor-halloween .patch-right, html.on-live .decor-halloween .patch-right { transform-origin: bottom right; }
html.boot-main .decor-halloween .spider-1 .thread, html.on-live .decor-halloween .spider-1 .thread { height: 50px; }

@media (max-width: 600px) {
  .decor-halloween .web svg { width: 110px; height: 110px; }
  .decor-halloween .patch { transform: scale(0.75); }
  .decor-halloween .patch-left { transform-origin: bottom left; }
  .decor-halloween .patch-right { transform-origin: bottom right; }
  .decor-halloween .spider-1 { right: 34px; }
  html.boot-main .decor-halloween .patch, html.on-live .decor-halloween .patch { display: none; } /* keep phone game screens clear */
  .decor-halloween .ghost { display: none; }
  .decor-halloween .spider-2 { display: none; } /* would hang over the buttons */
}

@media (prefers-reduced-motion: reduce) {
  .season-decor *, .season-decor .decor { animation: none !important; }
  .decor-halloween .bat { display: none; }
}

/* Full moon (home only) and readable spiders on dark backgrounds */
.decor-halloween .moon { top: 9%; right: 13%; filter: drop-shadow(0 0 28px rgba(255, 230, 160, 0.55)); animation: moonGlow 5s ease-in-out infinite; }
@keyframes moonGlow { 50% { filter: drop-shadow(0 0 40px rgba(255, 230, 160, 0.75)); } }
.decor-halloween .spider svg { filter: drop-shadow(0 0 1.5px rgba(255, 255, 255, 0.55)) drop-shadow(0 0 6px rgba(168, 85, 247, 0.5)); }
@media (max-width: 600px) { .decor-halloween .moon { right: 26%; top: 3%; transform: scale(0.6); transform-origin: top right; } }

html.on-live .decor-halloween .spider { display: none; } /* would hang over the score / code chips */

/* Phones: the announcement sits where the moon and top cobwebs are — let it be readable */
@media (max-width: 600px) {
  html:has(#home-announcement[style*="flex"]) .season-decor .moon,
  html:has(#home-announcement[style*="flex"]) .season-decor .web,
  html:has(#home-announcement[style*="flex"]) .season-decor .spider { display: none; }
}

/* Teacher dashboard: keep the spider off the cards, and on phones the pumpkins too */
html.boot-teacher .decor-halloween .spider { display: none; }
@media (max-width: 600px) { html.boot-teacher .decor-halloween .patch { display: none; } }

/* ── Thanksgiving ── */
/* Leaves drifting down every screen (they sway on an inner span so fall and sway combine) */
.decor-thanksgiving .leaf { top: -60px; animation: leafFall 14s linear infinite; opacity: 0.9; }
.decor-thanksgiving .leaf-2 { animation-duration: 17s; }
.decor-thanksgiving .leaf-3 { animation-duration: 12s; }
.decor-thanksgiving .leaf-4 { animation-duration: 19s; }
.decor-thanksgiving .leaf-5 { animation-duration: 15s; }
.decor-thanksgiving .leaf-6 { animation-duration: 21s; }
.decor-thanksgiving .leaf-sway { display: inline-block; animation: leafSway 3.2s ease-in-out infinite alternate; }
@keyframes leafFall { to { transform: translateY(calc(100vh + 120px)); } }
@keyframes leafSway { from { transform: translateX(-18px) rotate(-35deg); } to { transform: translateX(18px) rotate(40deg); } }

/* Harvest piles in the bottom corners, leaves tucked in the top corners */
.decor-thanksgiving .harvest { bottom: max(4px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 0; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.3)); }
.decor-thanksgiving .harvest-left { left: 6px; }
.decor-thanksgiving .harvest-right { right: 6px; }
.decor-thanksgiving .harvest .small { display: inline-flex; margin: 0 -4px; }
.decor-thanksgiving .corner-leaves { top: -6px; display: flex; opacity: 0.85; }
.decor-thanksgiving .corner-left { left: -6px; transform: rotate(-20deg); }
.decor-thanksgiving .corner-right { right: -6px; transform: rotate(20deg); }

/* Unit, game, Live and teacher screens: smaller corner pieces so nothing covers a question */
html.boot-main .decor-thanksgiving .harvest, html.on-live .decor-thanksgiving .harvest,
html.boot-teacher .decor-thanksgiving .harvest { opacity: 0.85; transform: scale(0.65); }
html.boot-main .decor-thanksgiving .harvest-left, html.on-live .decor-thanksgiving .harvest-left,
html.boot-teacher .decor-thanksgiving .harvest-left { transform-origin: bottom left; }
html.boot-main .decor-thanksgiving .harvest-right, html.on-live .decor-thanksgiving .harvest-right,
html.boot-teacher .decor-thanksgiving .harvest-right { transform-origin: bottom right; }
html.boot-main .decor-thanksgiving .corner-leaves, html.on-live .decor-thanksgiving .corner-leaves { opacity: 0.55; transform: scale(0.75); }
@media (max-width: 600px) {
  .decor-thanksgiving .harvest { transform: scale(0.75); }
  .decor-thanksgiving .harvest-left { transform-origin: bottom left; }
  .decor-thanksgiving .harvest-right { transform-origin: bottom right; }
  html.boot-main .decor-thanksgiving .harvest, html.on-live .decor-thanksgiving .harvest,
  html.boot-teacher .decor-thanksgiving .harvest { display: none; } /* keep phone game screens clear */
  .decor-thanksgiving .leaf-4, .decor-thanksgiving .leaf-6 { display: none; }
  html:has(#home-announcement[style*="flex"]) .season-decor .corner-leaves { display: none; }
}
@media (prefers-reduced-motion: reduce) { .decor-thanksgiving .leaf { display: none; } }

/* ── Christmas ── */
/* String of lights across the top (home screen); bulbs twinkle in three groups */
.decor-christmas .lights { top: 0; left: 0; right: 0; height: 36px; }
.decor-christmas .lights-wire { position: absolute; inset: 0 0 auto 0; width: 100%; height: 18px; }
.decor-christmas .bulbs { position: absolute; inset: 0 12px auto 12px; display: flex; justify-content: space-between; align-items: flex-start; }
.decor-christmas .bulb svg { display: block; transform: rotate(var(--tilt, 0deg)); }
.decor-christmas .bulb.odd svg { --tilt: 8deg; }
.decor-christmas .bulb .glass { animation: twinkle 2.4s ease-in-out infinite; filter: drop-shadow(0 0 4px currentColor); }
.decor-christmas .bulb-1 .glass { animation-delay: -0.8s; }
.decor-christmas .bulb-2 .glass { animation-delay: -1.6s; }
@keyframes twinkle { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }

/* Snowflakes drifting down every screen */
.decor-christmas .snow { top: -30px; opacity: 0.85; animation: snowFall 13s linear infinite; }
.decor-christmas .snow-2 { animation-duration: 17s; opacity: 0.6; }
.decor-christmas .snow-3 { animation-duration: 11s; }
.decor-christmas .snow-4 { animation-duration: 19s; opacity: 0.55; }
.decor-christmas .snow-5 { animation-duration: 14s; }
.decor-christmas .snow-6 { animation-duration: 21s; opacity: 0.5; }
.decor-christmas .snow-7 { animation-duration: 12s; }
.decor-christmas .snow-8 { animation-duration: 16s; opacity: 0.7; }
.decor-christmas .snow-9 { animation-duration: 18s; opacity: 0.6; }
.decor-christmas .snow-drift { display: inline-block; animation: snowDrift 3.6s ease-in-out infinite alternate; }
@keyframes snowFall { to { transform: translateY(calc(100vh + 60px)); } }
@keyframes snowDrift { from { transform: translateX(-12px) rotate(0deg); } to { transform: translateX(12px) rotate(90deg); } }

/* Tree and presents in the bottom corners; the star glows */
.decor-christmas .xmas { bottom: max(4px, env(safe-area-inset-bottom)); display: flex; align-items: flex-end; gap: 2px; filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.4)); }
.decor-christmas .xmas-left { left: 6px; }
.decor-christmas .xmas-right { right: 6px; }
.decor-christmas .xmas .small { display: inline-flex; }
.decor-christmas .tree-star { animation: starGlow 2.2s ease-in-out infinite; filter: drop-shadow(0 0 3px #facc15); }
@keyframes starGlow { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

/* Unit, game, Live and teacher screens: smaller corners and fainter lights */
html.boot-main .decor-christmas .xmas, html.on-live .decor-christmas .xmas,
html.boot-teacher .decor-christmas .xmas { opacity: 0.85; transform: scale(0.65); }
html.boot-main .decor-christmas .xmas-left, html.on-live .decor-christmas .xmas-left,
html.boot-teacher .decor-christmas .xmas-left { transform-origin: bottom left; }
html.boot-main .decor-christmas .xmas-right, html.on-live .decor-christmas .xmas-right,
html.boot-teacher .decor-christmas .xmas-right { transform-origin: bottom right; }
@media (max-width: 600px) {
  .decor-christmas .bulb:nth-child(even) { display: none; } /* fewer, wider-spaced bulbs on phones */
  .decor-christmas .xmas { transform: scale(0.75); }
  .decor-christmas .xmas-left { transform-origin: bottom left; }
  .decor-christmas .xmas-right { transform-origin: bottom right; }
  html.boot-main .decor-christmas .xmas, html.on-live .decor-christmas .xmas,
  html.boot-teacher .decor-christmas .xmas { display: none; } /* keep phone game screens clear */
  .decor-christmas .snow-4, .decor-christmas .snow-6, .decor-christmas .snow-9 { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .decor-christmas .snow { display: none; }
  .decor-christmas .bulb .glass, .decor-christmas .tree-star { animation: none; }
}

/* ── Site-wide falling leaves and snow: lighter on unit, game and teacher screens ── */
html.boot-main .decor-thanksgiving .leaf, html.on-live .decor-thanksgiving .leaf, html.boot-teacher .decor-thanksgiving .leaf { opacity: 0.45; }
html.boot-main .decor-christmas .snow, html.on-live .decor-christmas .snow, html.boot-teacher .decor-christmas .snow { opacity: 0.5; }
html.boot-main .decor-thanksgiving .leaf-5, html.boot-main .decor-thanksgiving .leaf-6,
html.boot-main .decor-christmas .snow-7, html.boot-main .decor-christmas .snow-8, html.boot-main .decor-christmas .snow-9 { display: none; }

/* ── Christmas: a snowbank along the bottom of the screen ── */
.decor-christmas .snowbank { left: 0; right: 0; bottom: 0; height: 46px; filter: drop-shadow(0 -2px 6px rgba(255, 255, 255, 0.12)); }
.decor-christmas .snowbank svg { width: 100%; height: 100%; display: block; }
.decor-christmas .xmas { bottom: max(18px, env(safe-area-inset-bottom)); } /* standing in the snow */
html.boot-main .decor-christmas .snowbank, html.on-live .decor-christmas .snowbank, html.boot-teacher .decor-christmas .snowbank { height: 26px; }
html.boot-main .decor-christmas .xmas, html.on-live .decor-christmas .xmas, html.boot-teacher .decor-christmas .xmas { bottom: 8px; }

/* ── Christmas: the big tree on the right of wide screens (side space beside the content) ── */
.decor-christmas .big-tree { display: none; right: 18px; bottom: 14px; filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.45)); }
.decor-christmas .big-tree-svg { display: block; width: clamp(200px, 19vw, 280px); height: auto; }
.decor-christmas .tree-light { animation: twinkle 1.8s ease-in-out infinite; filter: drop-shadow(0 0 3px currentColor); }
.decor-christmas .tl-1 { animation-delay: -0.6s; }
.decor-christmas .tl-2 { animation-delay: -1.2s; }
@media (min-width: 1180px) {
  .decor-christmas .big-tree { display: block; }
  .decor-christmas .xmas-right, .decor-christmas .small-tree { display: none; } /* the big tree has them */
  html.boot-main .decor-christmas .big-tree, html.on-live .decor-christmas .big-tree, html.boot-teacher .decor-christmas .big-tree { opacity: 0.9; }
}
@media (min-width: 1180px) and (max-height: 640px) { .decor-christmas .big-tree-svg { width: 180px; } }
.decor-christmas .small-tree .big-tree-svg { width: 78px; } /* the same tree, small, in the corner on narrower screens */
@media (prefers-reduced-motion: reduce) { .decor-christmas .tree-light { animation: none; } }

/* ── Christmas: little layers of snow on top of cards and boxes ── */
[data-theme="christmas"] :is(.unit-card, .wotd-inner, .next-test, .game-hub-card, .word-display-card, .t-card) { position: relative; }
/* Snow caps: a puffy, shaded layer of snow on top of each card, rounding over both top corners and
   hanging a short drip down each side. Built from three pieces so it fits any width without
   stretching: the two ends (fixed width) on top of a lumpy middle that repeats. */
[data-theme="christmas"] :is(.unit-card, .wotd-inner, .next-test, .game-hub-card, .word-display-card, .t-card)::before {
  content: ''; position: absolute; left: -3px; right: -3px; top: -9px; height: 34px; z-index: 2; pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34' width='44' height='34'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.42' stop-color='%23fbfdff'/%3E%3Cstop offset='.66' stop-color='%23e6eef6'/%3E%3Cstop offset='1' stop-color='%23c9d6e4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url%28%23g%29' d='M44 4C30 3 18 2 10 5 4 8 1 12 1 18 1 24 2 30 6 31 10 32 11 27 11 24 12 21 16 21 22 21 30 21 36 19 44 20Z'/%3E%3Cpath d='M40 5C28 4 18 4 11 7 6 10 4 13 3.5 17' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") left top / 44px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 44 34' width='44' height='34'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.42' stop-color='%23fbfdff'/%3E%3Cstop offset='.66' stop-color='%23e6eef6'/%3E%3Cstop offset='1' stop-color='%23c9d6e4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg transform='translate%2844 0%29 scale%28-1 1%29'%3E%3Cpath fill='url%28%23g%29' d='M44 4C30 3 18 2 10 5 4 8 1 12 1 18 1 24 2 30 6 31 10 32 11 27 11 24 12 21 16 21 22 21 30 21 36 19 44 20Z'/%3E%3Cpath d='M40 5C28 4 18 4 11 7 6 10 4 13 3.5 17' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.9'/%3E%3C/g%3E%3C/svg%3E") right top / 44px 34px no-repeat,
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 34' width='120' height='34'%3E%3Cdefs%3E%3ClinearGradient id='g' gradientUnits='userSpaceOnUse' x1='0' y1='0' x2='0' y2='34'%3E%3Cstop offset='0' stop-color='%23ffffff'/%3E%3Cstop offset='.42' stop-color='%23fbfdff'/%3E%3Cstop offset='.66' stop-color='%23e6eef6'/%3E%3Cstop offset='1' stop-color='%23c9d6e4'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url%28%23g%29' d='M0 4C14 3.3 26 3.3 40 4S66 4.7 80 4 106 3.3 120 4V20C108 22 98 18 86 20S64 23 52 20 28 18 14 21 4 21 0 20Z'/%3E%3Cpath d='M6 5.3C20 4.8 32 4.8 44 5.4S70 6 84 5.4' fill='none' stroke='%23ffffff' stroke-width='1.6' stroke-linecap='round' opacity='.9'/%3E%3C/svg%3E") 0 0 / 120px 34px repeat-x;
  /* the repeating middle stays between the ends (it would show square corners behind their rounded ones) */
  padding: 0 30px; box-sizing: border-box;
  background-clip: border-box, border-box, content-box; background-origin: border-box, border-box, content-box;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, 0.28)) drop-shadow(0 0 1px rgba(120, 150, 180, 0.35));
}
/* start the lumps at a different spot on neighbouring cards so they don't line up */
[data-theme="christmas"] :is(.unit-card, .wotd-inner, .word-display-card, .t-card)::before { background-position: left top, right top, -61px 0; }
[data-theme="christmas"] .game-hub-card:nth-child(odd)::before { background-position: left top, right top, -37px 0; }
/* the iso game cards lift on hover; the snow rides along with them */
[data-theme="christmas"] .game-hub-card::before { top: -8px; }

/* Christmas countdown sits under the next-test card */
#next-test-card .next-test + .xmas-countdown { margin-top: 10px; }
.xmas-countdown-icon { background: #15803d !important; }

[data-theme="christmas"] .word-display-card { overflow: visible; } /* let its snow sit on top instead of being clipped */
.xmas-countdown .next-test-tag { letter-spacing: 1px; white-space: nowrap; }
@media (max-width: 600px) {
  .decor-christmas .snowbank { height: 28px; }
  .decor-christmas .xmas { bottom: 10px; }
}
@media (max-width: 600px) { .decor-christmas .small-tree .big-tree-svg { width: 50px; } }

/* Wide screens: the Christmas countdown sits in the top-right corner, opposite the next-test card
   (it lives in the next-test card's box, which moves into #home-corner at 1200px and up) */
#home-corner #next-test-card .xmas-countdown { position: fixed; top: 20px; right: 20px; width: 300px; margin: 0; box-sizing: border-box; }