/* Arcade Express — « néon festif » Christmas theme (public/js/themes/noel.js; theme.js sets <html data-theme="noel">).
   Red, fir green and gold neon on a deep night blue, with snow. Recolours the site (home, lobby, HUD, panels,
   results) and styles the decorations; the games keep the neon palette (.game-host, style.css). */

:root[data-theme="noel"] {
  --bg: #071027;
  --bg-2: #0b1838;
  --surface: rgba(20, 38, 76, 0.74);
  --surface-solid: #142a52;
  --surface-2: rgba(235, 245, 255, 0.05);
  --input-bg: #08142e;
  --border: rgba(130, 200, 255, 0.17);
  --border-strong: rgba(43, 255, 136, 0.36);
  --grid: rgba(120, 180, 255, 0.07);

  --text: #f2f6ff;
  --muted: #a9b7d8;
  --faint: #8d9cc4;   /* ≥ 4.5:1 (WCAG AA) on --bg, cards and overlays */

  --accent: #ff3b5c;      /* Christmas red */
  --accent-2: #18b865;    /* fir green */
  --accent-3: #ffd23f;    /* gold */
  --success: #3dff9a;
  --danger: #ff6b6b;
  --warning: #ffb84d;

  --accent-soft: rgba(255, 59, 92, 0.13);
  --magenta-soft: rgba(43, 255, 136, 0.13);
  --accent-end: #ff8a3d;
  --on-accent: #2a0610;
  --glow-mid: #0e8a4a;

  --festive-font: 'Mountains of Christmas', var(--font-display);
}

:root[data-theme="noel"] body {
  background:
    radial-gradient(1100px 620px at 8% -12%, rgba(40, 110, 255, 0.28), transparent 60%),
    radial-gradient(900px 560px at 108% 8%, rgba(255, 59, 92, 0.12), transparent 60%),
    radial-gradient(900px 600px at 50% 120%, rgba(43, 255, 136, 0.08), transparent 60%),
    var(--bg);
  background-attachment: fixed;
}

/* ---------- Site components (never used inside the games) ---------- */

:root[data-theme="noel"] .title-display {
  font-family: var(--festive-font);
  font-weight: 700;
  font-size: clamp(50px, 11vw, 98px);
  letter-spacing: .02em;
  background: linear-gradient(180deg, #fff 8%, #ffd0d8 30%, var(--accent) 58%, #c4123a 90%);
  -webkit-background-clip: text;
  background-clip: text;
  filter: drop-shadow(0 0 20px rgba(255, 59, 92, .45));
}
:root[data-theme="noel"] .logo-badge {
  background: linear-gradient(135deg, #10284f, #1c3f86 55%, #2a5bc0);
  box-shadow: 0 14px 40px -12px var(--accent), 0 0 0 1px rgba(43, 255, 136, .3) inset;
  font-size: 48px;
}
/* White text on the green glow button. */
:root[data-theme="noel"] .btn-glow {
  background: linear-gradient(135deg, #12a35a, var(--glow-mid) 60%, #0b6e3b);
  box-shadow: 0 10px 34px -10px #2bff88, 0 0 0 1px rgba(255, 255, 255, .1) inset;
}

:root[data-theme="noel"] .room-code { text-shadow: 0 0 22px rgba(255, 210, 63, .45); }

:root[data-theme="noel"] .player-row.me,
:root[data-theme="noel"] .score-row.me,
:root[data-theme="noel"] .final-ranking li.me { box-shadow: inset 0 0 0 1px rgba(255, 59, 92, .45); }
:root[data-theme="noel"] .game-card.selected {
  background: linear-gradient(160deg, rgba(255, 59, 92, .18), rgba(43, 255, 136, .1));
}
:root[data-theme="noel"] .toggle.on .toggle-track { box-shadow: 0 0 14px rgba(255, 59, 92, .55); }
:root[data-theme="noel"] .preset-btn.on { box-shadow: 0 0 14px rgba(255, 59, 92, .5); }
:root[data-theme="noel"] .chat-msg.mine .chat-text { color: #ffe0e6; }

:root[data-theme="noel"] .hud { background: rgba(10, 20, 46, .88); }
:root[data-theme="noel"] .hud-timer { text-shadow: 0 0 18px rgba(255, 210, 63, .55); }
/* The game board itself: the neon look of style.css, made opaque so the decorations stay out of it. */
:root[data-theme="noel"] .stage {
  background: radial-gradient(ellipse at 50% 30%, rgba(60, 80, 200, .18), transparent 70%), #050818;
}

:root[data-theme="noel"] .overlay-card,
:root[data-theme="noel"] .countdown-card { background: rgba(16, 32, 66, .93); }
:root[data-theme="noel"] .overlay-card,
:root[data-theme="noel"] .confirm-card { box-shadow: var(--shadow), 0 0 60px -18px rgba(255, 59, 92, .5); }
:root[data-theme="noel"] .overlay-roundEnd { background: rgba(7, 16, 39, .86); }
:root[data-theme="noel"] .overlay-matchEnd { background: rgba(7, 16, 39, .95); }
:root[data-theme="noel"] .confirm-dialog::backdrop { background: rgba(7, 16, 39, .8); }
:root[data-theme="noel"] .countdown-number {
  text-shadow: 0 0 30px rgba(255, 210, 63, .6), 0 0 80px rgba(255, 59, 92, .4);
}
:root[data-theme="noel"] .overlay-matchEnd .overlay-title {
  font-family: var(--festive-font);
  font-weight: 700;
  font-size: clamp(34px, 5vw, 52px);
  color: var(--accent);
  text-shadow: 0 0 20px rgba(255, 59, 92, .5);
}

/* Snow resting on the top edge of the cards and of the big buttons, outside the games. */
:root[data-theme="noel"] .view:not(.game-view) :is(.card, .btn:not(.btn-sm, .btn-ghost)) { position: relative; }
:root[data-theme="noel"] .view:not(.game-view) :is(.card, .btn:not(.btn-sm, .btn-ghost))::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: -12px;
  left: 6px;
  right: 6px;
  height: 19px;
  pointer-events: none;
  /* A drift of snow (vector, so its edges stay smooth): mounds on top, thinning out at both ends, a wavy underside
     with a couple of drips. */
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop offset='.45' stop-color='%23f7fbff'/%3E%3Cstop offset='1' stop-color='%23cfe4ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23s)' d='M0 15C4 11 10 8 20 8C28 4 40 3 50 6C60 2 76 1 88 5C100 2 116 3 126 6C138 2 156 3 166 7C178 5 192 8 200 15C194 17 186 16 178 17C170 18 164 16 156 17C150 17.5 148 22 145 22.5C142 23 140 19 136 17.6C120 18.5 104 16.5 88 17.5C74 18.5 60 16.5 48 17.4C44 17.6 43 23 39.5 23C36 23 36 18 32 17.6C22 17 10 18 0 15Z'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
  filter: drop-shadow(0 1px 1.5px rgba(120, 180, 255, .45));
}
/* The cards are wider: more mounds, so that they don't stretch. */
:root[data-theme="noel"] .view:not(.game-view) .card::before {
  top: -13px;
  left: 10px;
  right: 10px;
  height: 21px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 400 24' preserveAspectRatio='none'%3E%3Cdefs%3E%3ClinearGradient id='s' x2='0' y2='1'%3E%3Cstop offset='.45' stop-color='%23f7fbff'/%3E%3Cstop offset='1' stop-color='%23cfe4ff'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath fill='url(%23s)' d='M0 16C6 12 14 9 26 9C36 4 54 3 66 7C80 3 100 2 114 6C128 3 146 4 156 7C170 2 192 2 206 6C220 3 238 4 250 7C264 3 284 2 298 6C312 3 332 4 344 7C358 4 376 6 386 9C394 11 398 13 400 16C392 18 380 17 368 18C356 19 348 17 336 17.6C330 18 328 23 324.5 23.2C321 23.4 320 19 316 18C296 19 270 17 250 18C232 19 214 17 196 17.8C190 18 189 22.5 185.5 22.8C182 23 181 19 177 18C150 19 120 17 96 18C84 18.5 74 17 66 17.6C61 18 60 22 57 22.3C54 22.5 53 18.6 49 18C32 17 14 19 0 16Z'/%3E%3C/svg%3E");
}

/* A Santa hat on each podium step. */
:root[data-theme="noel"] .podium-deco { top: -20px; font-size: 34px; }

/* ---------- Decorations (theme.js layers) ---------- */

.xm-star {
  position: absolute;
  top: 8vh;
  right: 11vw;
  font-size: clamp(44px, 5vw, 72px);
  filter: drop-shadow(0 0 18px rgba(255, 210, 63, .7));
  animation: xm-shine 4s ease-in-out infinite;
}

.xm-snow i {
  position: absolute;
  top: -12px;
  left: var(--x);
  width: var(--size);
  height: var(--size);
  border-radius: 50%;
  background: #fff;
  opacity: var(--alpha);
  box-shadow: 0 0 6px rgba(200, 230, 255, .8);
  animation: xm-fall var(--dur) linear var(--delay) infinite;
}

/* A snowy ground along the bottom edge, the corner scenes standing on it. */
.xm-ground {
  position: absolute;
  left: -5vw;
  right: -5vw;
  bottom: -2vh;
  height: 9vh;
  background:
    radial-gradient(40% 70% at 12% 100%, #e6f2ff 60%, transparent 61%),
    radial-gradient(35% 60% at 88% 100%, #e6f2ff 60%, transparent 61%),
    radial-gradient(30% 40% at 50% 100%, rgba(230, 242, 255, .7) 60%, transparent 61%);
  opacity: .22;
}

.xm-corner {
  position: absolute;
  bottom: 1vh;
  display: flex;
  align-items: flex-end;
  gap: .05em;
  font-size: clamp(56px, 7.5vw, 104px);
}
.xm-corner-left { left: 2vw; }
.xm-corner-right { right: 3vw; flex-direction: row-reverse; }
.xm-prop { display: block; }
.xm-small { font-size: .62em; }
.xm-tiny { font-size: .45em; }
.xm-snowman { font-size: .95em; }
.xm-cane { transform: rotate(-12deg); }
.xm-corner .xm-prop:first-child .icon { animation: xm-twinkle 3.6s ease-in-out infinite; }

/* Garland of bulbs along the top edge: a sagging wire per bulb, the bulbs twinkling in turn. */
.xm-garland {
  position: absolute;
  top: -4px;
  left: 0;
  right: 0;
  display: flex;
}
.xm-garland span {
  position: relative;
  flex: 1;
  height: 18px;
  border-bottom: 2px solid #1f6b43;
  border-radius: 0 0 50% 50%;
}
.xm-garland span::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -9px;
  width: 7px;
  height: 10px;
  margin-left: -3.5px;
  border-radius: 45% 45% 50% 50% / 40% 40% 60% 60%;
  --c: #ff3b5c;
  background: var(--c);
  box-shadow: 0 0 10px 2px var(--c);
  animation: xm-blink 2.4s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.37s);
}
.xm-garland span:nth-child(4n + 2)::after { --c: #2bff88; }
.xm-garland span:nth-child(4n + 3)::after { --c: #ffd23f; }
.xm-garland span:nth-child(4n)::after { --c: #7fe3ff; }

.xm-holly { position: absolute; top: -8px; font-size: clamp(50px, 6vw, 84px); line-height: 0; opacity: .85; }
.xm-holly-left { left: -16px; transform: rotate(-30deg); }
.xm-holly-right { right: -16px; transform: rotate(30deg); }

/* A bauble swinging on its ribbon, hung from the garland. */
.xm-bauble {
  position: absolute;
  top: 0;
  left: clamp(70px, 9vw, 130px);
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 40px;
  transform-origin: 50% 0;
  animation: xm-sway 5s ease-in-out infinite;
}
.xm-ribbon {
  width: 2px;
  height: min(16vh, 130px);
  margin: 0 0 -.1em .14em;
  background: linear-gradient(#ffd23f, #c99a1a);
}

.xm-sleigh-ride { display: block; animation: xm-bob 1.4s ease-in-out infinite; }
.xm-sleigh.rtl .xm-sleigh-ride .icon { transform: scaleX(-1); }
.xm-sleigh .icon { filter: drop-shadow(0 0 8px rgba(255, 210, 63, .35)); }

.xm-shooting {
  position: absolute;
  top: var(--top);
  left: var(--x);
  width: 140px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .9));
  box-shadow: 0 0 8px rgba(255, 240, 200, .8);
  opacity: 0;
  animation: xm-shoot-ltr 1.3s ease-out both;
}
.xm-shooting.rtl { animation-name: xm-shoot-rtl; background: linear-gradient(270deg, transparent, rgba(255, 255, 255, .9)); }

/* Game view: holly only over the HUD corners, no bauble coming down over the game, no garland over the HUD. */
body:has(.game-view) .xm-holly { font-size: clamp(48px, 5vw, 72px); opacity: .6; }
body:has(.game-view) :is(.xm-bauble, .xm-garland) { display: none; }
@media (max-width: 760px) {
  .xm-holly { font-size: 64px; }
  .xm-star { font-size: 40px; top: 14px; right: 96px; }
  .xm-bauble { display: none; }
}

/* Gifts, candy canes and stars falling through the final results (theme.js, resultsBurst). */
:root[data-theme="noel"] .theme-burst-item {
  top: -100px;
  animation: xm-drop 3.6s cubic-bezier(.45, .05, .6, 1) var(--delay) forwards;
}

@keyframes xm-fall {
  from { transform: translate(0, 0); }
  to { transform: translate(var(--drift), 106vh); }
}
@keyframes xm-shine {
  0%, 100% { transform: scale(1) rotate(0deg); filter: drop-shadow(0 0 14px rgba(255, 210, 63, .55)); }
  50% { transform: scale(1.08) rotate(8deg); filter: drop-shadow(0 0 26px rgba(255, 210, 63, .9)); }
}
@keyframes xm-twinkle {
  0%, 100% { filter: brightness(1); }
  50% { filter: brightness(1.25) drop-shadow(0 0 10px rgba(255, 210, 63, .5)); }
}
@keyframes xm-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: .35; box-shadow: 0 0 3px 0 var(--c); }
}
@keyframes xm-sway {
  0%, 100% { transform: rotate(-6deg); }
  50% { transform: rotate(6deg); }
}
@keyframes xm-bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
@keyframes xm-shoot-ltr {
  0% { transform: translate(0, 0) rotate(18deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(30vw, 10vh) rotate(18deg); opacity: 0; }
}
@keyframes xm-shoot-rtl {
  0% { transform: translate(0, 0) rotate(-18deg); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(-30vw, 10vh) rotate(-18deg); opacity: 0; }
}
@keyframes xm-drop {
  0% { transform: translate(0, 0) rotate(-20deg) scale(.8); opacity: 0; }
  12% { opacity: 1; }
  80% { opacity: .9; }
  100% { transform: translate(var(--sway), 115vh) rotate(25deg) scale(1); opacity: 0; }
}