/* Songless v211 visual themes */
body[data-visual-theme]:not([data-visual-theme="default"]){background:var(--season-bg)!important;color:var(--season-text)!important;min-height:100vh;background-attachment:fixed!important}
body[data-visual-theme]:not([data-visual-theme="default"]) .game-card,body[data-visual-theme]:not([data-visual-theme="default"]) .history-card,body[data-visual-theme]:not([data-visual-theme="default"]) .stats-bar,body[data-visual-theme]:not([data-visual-theme="default"]) .scorebox{background:var(--season-panel)!important;border-color:var(--season-border)!important;color:var(--season-text)!important}
body[data-visual-theme]:not([data-visual-theme="default"]) .play-btn,body[data-visual-theme]:not([data-visual-theme="default"]) .actions button:not(.secondary){background:var(--season-accent)!important;color:#fff!important}
body[data-visual-theme]:not([data-visual-theme="default"]) .topbar h1{color:var(--season-text)!important;text-shadow:0 3px 20px #0005}
body[data-visual-theme="christmas"]{--season-bg:radial-gradient(ellipse at 50% 0%,#216049,#071b1d 80%);--season-panel:#102d2bf2;--season-border:#d6b76b88;--season-text:#fff9e8;--season-accent:linear-gradient(120deg,#b21f31,#df5344)}
body[data-visual-theme="halloween"]{--season-bg:radial-gradient(ellipse at 70% 0%,#44224b,#100c18 80%);--season-panel:#211627f2;--season-border:#f17a2b77;--season-text:#ffe5ca;--season-accent:linear-gradient(120deg,#eb6d13,#aa3e08)}
body[data-visual-theme="sinterklaas"]{--season-bg:radial-gradient(ellipse at 50% 0%,#e95853,#8d1029 80%);--season-panel:#fff5e9f5;--season-border:#e5b453;--season-text:#632234;--season-accent:linear-gradient(120deg,#dd263d,#f58c32)}
body[data-visual-theme="sinterklaas"] .game-card,body[data-visual-theme="sinterklaas"] .history-card{color:#632234!important}
body[data-visual-theme="colorful"]{--season-bg:linear-gradient(125deg,#3724a0,#0c8eae 45%,#e354aa);--season-panel:#1b2454f0;--season-border:#b6d7ff88;--season-text:#fff;--season-accent:linear-gradient(100deg,#ff6bb2,#ee8c35,#6d6aff)}
.seasonal-decor{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}.app-shell{position:relative;z-index:1}.seasonal-top,.seasonal-left,.seasonal-right,.seasonal-float{position:absolute;pointer-events:none}.seasonal-top{top:8px;left:50%;transform:translateX(-50%);font-size:35px;white-space:nowrap}.seasonal-left,.seasonal-right{bottom:15px;font-size:clamp(45px,7vw,95px)}.seasonal-left{left:2%}.seasonal-right{right:2%}
body[data-visual-theme="christmas"] .seasonal-top:before{content:"✨ ❄️ ⭐ ❄️ ✨"}body[data-visual-theme="christmas"] .seasonal-left:before{content:"🎄"}body[data-visual-theme="christmas"] .seasonal-right:before{content:"🎁 🎄"}
body[data-visual-theme="halloween"] .seasonal-top:before{content:"🕸️ 🦇 🌙 🦇 🕸️"}body[data-visual-theme="halloween"] .seasonal-left:before{content:"🎃"}body[data-visual-theme="halloween"] .seasonal-right:before{content:"🎃"}
body[data-visual-theme="sinterklaas"] .seasonal-top:before{content:"🎁 ⭐ 🎩 ⭐ 🎁"}body[data-visual-theme="sinterklaas"] .seasonal-left:before{content:"🍪 🎁"}body[data-visual-theme="sinterklaas"] .seasonal-right:before{content:"🎁 🍬"}
body[data-visual-theme="colorful"] .seasonal-top:before{content:"✨ 🎶 🌈 🎵 ✨"}body[data-visual-theme="colorful"] .seasonal-left:before{content:"🎧"}body[data-visual-theme="colorful"] .seasonal-right:before{content:"🎶"}
body[data-visual-theme="christmas"] .seasonal-float{inset:-100% 0 0;background-image:radial-gradient(2px 2px at 20px 30px,#fff 99%,transparent),radial-gradient(3px 3px at 90px 100px,#fff9 99%,transparent);background-size:120px 150px;animation:snowfall 17s linear infinite}
body[data-visual-theme="halloween"] .seasonal-float{top:12%;right:10%;width:95px;height:95px;border-radius:50%;background:#e8d8b455;box-shadow:0 0 60px #ecbd6644}
body[data-visual-theme="colorful"] .seasonal-float{inset:0;background:radial-gradient(circle at 15% 25%,#ffde5944,transparent 25%),radial-gradient(circle at 80% 70%,#48ffce44,transparent 25%);animation:glowfloat 10s ease-in-out infinite}
@keyframes snowfall{to{transform:translateY(50%)}}@keyframes glowfloat{to{opacity:.4;transform:scale(1.15)}}@media(prefers-reduced-motion:reduce){.seasonal-float{animation:none!important}}@media(max-width:650px){.seasonal-top{font-size:23px}.seasonal-left,.seasonal-right{font-size:40px;opacity:.65}}

/* v219: grotere, subtiel bewegende seizoensdecoraties */
body[data-visual-theme="halloween"] .seasonal-left,
body[data-visual-theme="halloween"] .seasonal-right{font-size:clamp(90px,11vw,165px)}
body[data-visual-theme="christmas"] .seasonal-left,
body[data-visual-theme="christmas"] .seasonal-right,
body[data-visual-theme="sinterklaas"] .seasonal-left,
body[data-visual-theme="sinterklaas"] .seasonal-right{font-size:clamp(70px,9vw,125px)}
body[data-visual-theme="halloween"] .seasonal-left,
body[data-visual-theme="christmas"] .seasonal-left,
body[data-visual-theme="sinterklaas"] .seasonal-left{transform-origin:bottom center;animation:seasonalSwayLeft 5.5s ease-in-out infinite}
body[data-visual-theme="halloween"] .seasonal-right,
body[data-visual-theme="christmas"] .seasonal-right,
body[data-visual-theme="sinterklaas"] .seasonal-right{transform-origin:bottom center;animation:seasonalSwayRight 6.4s ease-in-out infinite}
@keyframes seasonalSwayLeft{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-13px) rotate(3deg)}}
@keyframes seasonalSwayRight{0%,100%{transform:translateY(-5px) rotate(3deg)}50%{transform:translateY(8px) rotate(-3deg)}}
@media(max-width:650px){
body[data-visual-theme="halloween"] .seasonal-left,body[data-visual-theme="halloween"] .seasonal-right{font-size:clamp(58px,14vw,88px)}
body[data-visual-theme="christmas"] .seasonal-left,body[data-visual-theme="christmas"] .seasonal-right,body[data-visual-theme="sinterklaas"] .seasonal-left,body[data-visual-theme="sinterklaas"] .seasonal-right{font-size:clamp(45px,11vw,70px)}
}
@media(prefers-reduced-motion:reduce){.seasonal-left,.seasonal-right{animation:none!important}}

/* v220: extra Halloween slingers, webben en hangende decoraties */
.halloween-garland,.halloween-web,.halloween-hangers{display:none}
body[data-visual-theme="halloween"] .halloween-garland{display:flex;position:absolute;top:0;left:7%;right:7%;height:78px;align-items:flex-start;justify-content:space-around;gap:6px;border-top:3px solid #c98357aa;border-radius:0 0 50% 50%;filter:drop-shadow(0 4px 7px #0008)}
body[data-visual-theme="halloween"] .halloween-garland span{font-size:clamp(21px,2.5vw,37px);transform-origin:top center;animation:halloweenDangle 5.2s ease-in-out infinite;position:relative;padding-top:15px}
body[data-visual-theme="halloween"] .halloween-garland span:nth-child(even){animation-delay:-2.1s;padding-top:26px}
body[data-visual-theme="halloween"] .halloween-garland span:nth-child(3n){animation-delay:-3.3s;padding-top:38px}
body[data-visual-theme="halloween"] .halloween-web{display:block;position:absolute;top:6px;font-size:clamp(65px,9vw,125px);opacity:.75;transform-origin:top center;animation:halloweenWebSway 9s ease-in-out infinite;filter:drop-shadow(0 3px 10px #0008)}
body[data-visual-theme="halloween"] .halloween-web-left{left:-8px;animation-delay:-2s}
body[data-visual-theme="halloween"] .halloween-web-right{right:-8px;animation-delay:-5s}
body[data-visual-theme="halloween"] .halloween-hangers{display:flex;position:absolute;top:70px;left:12%;right:12%;justify-content:space-between;align-items:flex-start;opacity:.8}
body[data-visual-theme="halloween"] .halloween-hangers span{font-size:clamp(22px,3vw,41px);transform-origin:top center;animation:halloweenDangle 7s ease-in-out infinite}
body[data-visual-theme="halloween"] .halloween-hangers span:nth-child(2n){margin-top:28px;animation-delay:-3s}
body[data-visual-theme="halloween"] .halloween-hangers span:nth-child(3n){margin-top:12px;animation-delay:-5s}
body[data-visual-theme="halloween"] .seasonal-top{top:124px;font-size:27px;opacity:.75}
@keyframes halloweenDangle{0%,100%{transform:rotate(-7deg) translateY(0)}50%{transform:rotate(7deg) translateY(5px)}}
@keyframes halloweenWebSway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(4deg)}}
@media(max-width:650px){body[data-visual-theme="halloween"] .halloween-garland{left:2%;right:2%;height:58px}body[data-visual-theme="halloween"] .halloween-garland span{font-size:19px}body[data-visual-theme="halloween"] .halloween-web{font-size:60px;opacity:.55}body[data-visual-theme="halloween"] .halloween-hangers{top:55px;left:8%;right:8%}body[data-visual-theme="halloween"] .halloween-hangers span{font-size:22px}body[data-visual-theme="halloween"] .seasonal-top{top:95px;font-size:19px}}
@media(prefers-reduced-motion:reduce){.halloween-garland span,.halloween-web,.halloween-hangers span{animation:none!important}}

/* v221 Denise 27 birthday theme */
body[data-visual-theme="birthday"]{--season-bg:radial-gradient(ellipse at 45% 0%,#6a2d88 0%,#35194f 48%,#161029 100%);--season-panel:#281d45f2;--season-border:#ffb6e077;--season-text:#fff1fa;--season-accent:linear-gradient(110deg,#f26ab9,#ac70f6,#f3ae59)}
.birthday-decor{display:none}
body[data-visual-theme="birthday"] .birthday-decor{display:block;position:absolute;inset:0;pointer-events:none;overflow:hidden}
body[data-visual-theme="birthday"] .seasonal-top:before{content:"✨ 🎂 ✨"}
body[data-visual-theme="birthday"] .birthday-banner{position:absolute;top:10px;left:50%;transform:translateX(-50%);white-space:nowrap;font-weight:900;letter-spacing:.09em;color:#ffe3a5;font-size:clamp(13px,2vw,27px);text-shadow:0 3px 16px #ff7ccc88;animation:birthdayBanner 5s ease-in-out infinite}
body[data-visual-theme="birthday"] .birthday-balloon{position:absolute;top:60px;transform-origin:50% 0;animation:birthdaySway 5.5s ease-in-out infinite;filter:drop-shadow(0 8px 12px #0007)}
body[data-visual-theme="birthday"] .balloon-body{width:clamp(65px,8vw,112px);height:clamp(82px,10vw,142px);border-radius:50% 50% 46% 46%;display:flex;align-items:center;justify-content:center;font-size:clamp(25px,4vw,48px);font-weight:900;color:white;text-shadow:0 3px 7px #0006;position:relative;box-shadow:inset -15px -10px 20px #0003,inset 10px 8px 20px #fff5}
body[data-visual-theme="birthday"] .balloon-body:after{content:"";position:absolute;bottom:-9px;left:calc(50% - 8px);border-left:8px solid transparent;border-right:8px solid transparent;border-bottom:0;border-top:12px solid #f7a1cd}
body[data-visual-theme="birthday"] .balloon-string{width:1px;height:clamp(65px,10vw,125px);background:#fff9;margin:9px auto 0;transform:rotate(5deg);border-radius:50%}
body[data-visual-theme="birthday"] .balloon-one{left:2%}body[data-visual-theme="birthday"] .balloon-one .balloon-body{background:linear-gradient(130deg,#ff8ad4,#d93596)}
body[data-visual-theme="birthday"] .balloon-two{left:17%;top:105px;animation-delay:-2s}body[data-visual-theme="birthday"] .balloon-two .balloon-body{background:linear-gradient(130deg,#bd8bff,#713fcb)}
body[data-visual-theme="birthday"] .balloon-three{right:17%;top:92px;animation-delay:-3.2s}body[data-visual-theme="birthday"] .balloon-three .balloon-body{background:linear-gradient(130deg,#ffe2a4,#db9c3d)}
body[data-visual-theme="birthday"] .balloon-four{right:2%;animation-delay:-1.1s}body[data-visual-theme="birthday"] .balloon-four .balloon-body{background:linear-gradient(130deg,#ff9ecb,#bd499d)}
body[data-visual-theme="birthday"] .birthday-emote-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none}
body[data-visual-theme="birthday"] .birthday-emote-layer img{position:absolute;display:block;pointer-events:none;height:auto;will-change:transform;filter:drop-shadow(0 5px 8px #0006)}
@keyframes birthdaySway{0%,100%{transform:rotate(-6deg) translateY(0)}50%{transform:rotate(6deg) translateY(-12px)}}
@keyframes birthdayBanner{0%,100%{opacity:.85}50%{opacity:1;text-shadow:0 3px 25px #ff94d4}}
@media(max-width:650px){body[data-visual-theme="birthday"] .birthday-balloon{top:55px}body[data-visual-theme="birthday"] .balloon-two,body[data-visual-theme="birthday"] .balloon-three{display:none}body[data-visual-theme="birthday"] .birthday-banner{top:14px;max-width:80%;font-size:12px;text-align:center;white-space:normal}}
@media(prefers-reduced-motion:reduce){body[data-visual-theme="birthday"] .birthday-balloon,body[data-visual-theme="birthday"] .birthday-banner{animation:none!important}}

/* v222: keep birthday greeting readable above decorations and emotes */
body[data-visual-theme="birthday"] .seasonal-top{display:none!important}
body[data-visual-theme="birthday"] .birthday-banner{z-index:5;top:16px;box-sizing:border-box;max-width:calc(100vw - 32px);padding:10px 22px;border:1px solid rgba(255,222,166,.7);border-radius:999px;background:linear-gradient(110deg,rgba(63,22,83,.96),rgba(112,38,105,.96));box-shadow:0 7px 28px rgba(15,3,29,.6),inset 0 1px 0 rgba(255,255,255,.25);text-shadow:0 2px 4px rgba(0,0,0,.85);text-align:center;white-space:normal;line-height:1.3}
body[data-visual-theme="birthday"] .birthday-emote-layer{z-index:1}
body[data-visual-theme="birthday"] .birthday-balloon{z-index:2}
@media(max-width:650px){body[data-visual-theme="birthday"] .birthday-banner{top:12px;max-width:calc(100vw - 24px);padding:9px 12px;font-size:12px}}

/* v223: seasonal decorations begin below the full-width site notice. */
body.has-site-info-bar .seasonal-decor{top:var(--site-info-bar-height,48px)}

/* v224: angled birthday corner ribbon, away from logo and player controls */
body[data-visual-theme="birthday"] .birthday-banner{
  position:absolute;
  left:auto;
  right:-92px;
  top:61px;
  width:355px;
  max-width:none;
  padding:10px 28px;
  border-radius:3px;
  transform:rotate(34deg);
  transform-origin:center;
  font-size:clamp(12px,1.05vw,15px);
  letter-spacing:.045em;
  line-height:1.35;
  white-space:nowrap;
  animation:birthdayRibbonGlow 5s ease-in-out infinite;
  box-shadow:0 5px 18px rgba(15,3,29,.5),inset 0 1px 0 rgba(255,255,255,.25);
}
@keyframes birthdayRibbonGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.15)}}
@media(max-width:700px){
  body[data-visual-theme="birthday"] .birthday-banner{
    top:42px;right:-84px;width:280px;padding:8px 18px;font-size:11px;
    max-width:none;white-space:nowrap;
  }
}
@media(prefers-reduced-motion:reduce){body[data-visual-theme="birthday"] .birthday-banner{animation:none!important}}

/* v225: keep the complete diagonal birthday ribbon inside the viewport. */
body[data-visual-theme="birthday"] .birthday-banner {
  top: 42px;
  right: 65px;
  left: auto;
  width: 310px;
  max-width: none;
  box-sizing: border-box;
  padding: 9px 12px;
  font-size: 13px;
  letter-spacing: .015em;
  line-height: 1.3;
  white-space: nowrap;
  transform: rotate(30deg);
  transform-origin: center center;
}
@media (max-width: 700px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    top: 28px;
    right: 40px;
    width: 245px;
    padding: 7px 6px;
    font-size: 10px;
    letter-spacing: 0;
    transform: rotate(30deg);
  }
}
@media (max-width: 380px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    right: 31px;
    width: 222px;
    font-size: 9px;
  }
}

/* v226: longer birthday corner ribbon with generous breathing room for the text. */
body[data-visual-theme="birthday"] .birthday-banner {
  top: 88px;
  right: -65px;
  left: auto;
  width: 490px;
  max-width: none;
  box-sizing: border-box;
  padding: 13px 64px;
  font-size: 15px;
  font-weight: 900;
  letter-spacing: .035em;
  line-height: 1.4;
  white-space: nowrap;
  text-align: center;
  transform: rotate(30deg);
  transform-origin: center center;
}
@media (max-width: 700px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    top: 64px;
    right: -28px;
    width: 350px;
    padding: 11px 35px;
    font-size: 11px;
    letter-spacing: 0;
    transform: rotate(28deg);
  }
}
@media (max-width: 380px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    top: 59px;
    right: -22px;
    width: 330px;
    padding: 10px 26px;
    font-size: 10px;
    transform: rotate(27deg);
  }
}

/* v227: birthday ribbon stays fully in view, balloons float across the screen. */
body[data-visual-theme="birthday"] .birthday-banner{
  left:auto;right:18px;top:108px;width:min(470px,42vw);
  padding:14px 44px;font-size:clamp(12px,1.12vw,16px);
  transform:rotate(18deg);transform-origin:95% 50%;
  white-space:nowrap;z-index:8;
}
body[data-visual-theme="birthday"] .birthday-balloon-layer{
  position:absolute;inset:0;pointer-events:none;z-index:2;
}
body[data-visual-theme="birthday"] .birthday-random-balloon{
  top:auto;right:auto;bottom:auto;transform-origin:50% 0;
  animation:birthdayBalloonFloat 7s ease-in-out infinite;
  opacity:.88;
}
body[data-visual-theme="birthday"] .birthday-random-balloon .balloon-body{
  width:var(--balloon-width);height:calc(var(--balloon-width) * 1.25);
  font-size:calc(var(--balloon-width) * .42);
  background:radial-gradient(ellipse at 28% 23%,rgba(255,255,255,.48),transparent 37%),var(--balloon-color);
}
body[data-visual-theme="birthday"] .birthday-random-balloon .balloon-string{
  height:calc(var(--balloon-width) * .9);
}
@keyframes birthdayBalloonFloat{
  0%,100%{transform:translate3d(0,12px,0) rotate(-5deg)}
  50%{transform:translate3d(var(--float-x),var(--float-y),0) rotate(6deg)}
}
@media(max-width:700px){
  body[data-visual-theme="birthday"] .birthday-banner{
    top:85px;right:8px;width:min(370px,88vw);padding:11px 19px;
    font-size:clamp(9px,2.5vw,12px);letter-spacing:0;transform:rotate(12deg);
  }
}
@media(prefers-reduced-motion:reduce){body[data-visual-theme="birthday"] .birthday-random-balloon{animation:none!important}}

/* v228: give the birthday ribbon 20px more space at each end without clipping. */
body[data-visual-theme="birthday"] .birthday-banner {
  width: min(530px, calc(100vw - 76px));
  right: 30px;
  top: 108px;
  padding: 14px 54px;
  box-sizing: border-box;
  transform: rotate(13deg);
  transform-origin: 50% 50%;
  text-align: center;
  white-space: nowrap;
}
@media(max-width:700px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    width: calc(100vw - 54px);
    right: 26px;
    top: 85px;
    padding: 11px 20px;
    font-size: clamp(9px, 2.45vw, 12px);
    letter-spacing: 0;
    transform: rotate(7deg);
  }
}
@media(max-width:380px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    width: calc(100vw - 46px);
    right: 22px;
    padding: 10px 12px;
    font-size: 9px;
    transform: rotate(5deg);
  }
}

/* v229: true corner ribbon: decorative ends intentionally run beyond top/right viewport,
   while the centered greeting stays entirely visible. */
body[data-visual-theme="birthday"] .birthday-banner {
  left: auto;
  right: -76px;
  top: 76px;
  width: 610px;
  max-width: none;
  box-sizing: border-box;
  padding: 15px 70px;
  font-size: 16px;
  line-height: 1.4;
  letter-spacing: .035em;
  white-space: nowrap;
  text-align: center;
  transform: rotate(26deg);
  transform-origin: center center;
}
@media (max-width:700px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    right: -58px;
    top: 49px;
    width: 420px;
    padding: 11px 48px;
    font-size: 12px;
    letter-spacing: 0;
    transform: rotate(25deg);
  }
}
@media (max-width:420px) {
  body[data-visual-theme="birthday"] .birthday-banner {
    right: -46px;
    top: 37px;
    width: 340px;
    padding: 9px 34px;
    font-size: 10px;
    transform: rotate(24deg);
  }
}

/* v230: independent birthday ribbon and emote overlay, selectable separately from the theme. */
.birthday-effects{position:fixed;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.birthday-effects .birthday-emote-layer{position:absolute;inset:0;overflow:hidden;pointer-events:none;z-index:1}
.birthday-effects .birthday-emote-layer img{position:absolute;display:block;pointer-events:none;height:auto;will-change:transform;filter:drop-shadow(0 5px 8px #0006)}
.birthday-effects .birthday-banner{
  position:absolute;right:-76px;top:76px;left:auto;width:610px;max-width:none;
  box-sizing:border-box;padding:15px 70px;border:1px solid rgba(255,222,166,.7);
  border-radius:999px;background:linear-gradient(110deg,rgba(63,22,83,.96),rgba(112,38,105,.96));
  box-shadow:0 7px 28px rgba(15,3,29,.6),inset 0 1px 0 rgba(255,255,255,.25);
  color:#ffe3a5;font-weight:900;font-size:16px;line-height:1.4;letter-spacing:.035em;
  text-shadow:0 2px 4px rgba(0,0,0,.85);text-align:center;white-space:nowrap;
  transform:rotate(26deg);transform-origin:center center;
  animation:birthdayRibbonGlow 5s ease-in-out infinite;z-index:3;
}
body.has-site-info-bar .birthday-effects{top:var(--site-info-bar-height,48px)}
@media(max-width:700px){.birthday-effects .birthday-banner{right:-58px;top:49px;width:420px;padding:11px 48px;font-size:12px;letter-spacing:0;transform:rotate(25deg)}}
@media(max-width:420px){.birthday-effects .birthday-banner{right:-46px;top:37px;width:340px;padding:9px 34px;font-size:10px;transform:rotate(24deg)}}
@media(prefers-reduced-motion:reduce){.birthday-effects .birthday-banner{animation:none!important}}