/* Words and Guff: Christmas looks (14 Oct 2026; 1-31 December, xmas.js). Everything here ignores taps and
   leaves every letter and score readable. */

/* ---------- falling snow, over the whole page ---------- */
.xsnow { position: fixed; inset: 0; z-index: 30; pointer-events: none; overflow: hidden; }
.xsnow::before, .xsnow::after {
  content: ""; position: absolute; left: 0; right: 0; top: -320px; bottom: 0;
  background-image:
    radial-gradient(circle at 23px 41px, #fff 0 2.5px, rgba(170,190,215,.55) 2.6px 3.6px, transparent 3.7px),
    radial-gradient(circle at 117px 13px, #fff 0 1.6px, rgba(170,190,215,.5) 1.7px 2.5px, transparent 2.6px),
    radial-gradient(circle at 171px 121px, #fff 0 2px, rgba(170,190,215,.5) 2.1px 3px, transparent 3.1px),
    radial-gradient(circle at 63px 151px, #fff 0 1.4px, rgba(170,190,215,.45) 1.5px 2.3px, transparent 2.4px),
    radial-gradient(circle at 141px 83px, #fff 0 2.8px, rgba(170,190,215,.55) 2.9px 3.9px, transparent 4px);
  background-size: 200px 160px;
  animation: xfall 14s linear infinite; opacity: .75;
}
.xsnow::after { background-size: 320px 320px; animation-duration: 24s; opacity: .5; transform: translateX(60px); left: -60px; }
@keyframes xfall { from { transform: translate(0, 0); } to { transform: translate(40px, 320px); } }

/* ---------- fairy lights along the top of the board ---------- */
.xlights {
  position: relative; z-index: 3; height: 22px; margin: 0 2px -4px; pointer-events: none;
  background:
    radial-gradient(ellipse 4px 6px at 7px 13px, #E53935 0 96%, transparent 100%),
    radial-gradient(ellipse 4px 6px at 21px 15px, #FDD835 0 96%, transparent 100%),
    radial-gradient(ellipse 4px 6px at 35px 13px, #43A047 0 96%, transparent 100%),
    radial-gradient(ellipse 4px 6px at 49px 15px, #1E88E5 0 96%, transparent 100%),
    radial-gradient(ellipse 30px 6px at 14px 2px, transparent 0 80%, #2E4A2E 82% 92%, transparent 95%),
    radial-gradient(ellipse 30px 6px at 42px 2px, transparent 0 80%, #2E4A2E 82% 92%, transparent 95%);
  background-size: 56px 22px; background-repeat: repeat-x;
  filter: drop-shadow(0 0 3px rgba(255,220,120,.55));
}
.xlights::after {     /* a second set of bulbs, lit and unlit in turn: the twinkle */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 4px 6px at 7px 13px, #FFCDD2 0 60%, transparent 100%),
    radial-gradient(ellipse 4px 6px at 35px 13px, #C8E6C9 0 60%, transparent 100%);
  background-size: 56px 22px; background-repeat: repeat-x;
  filter: drop-shadow(0 0 5px #fff); animation: xtwinkle 1.6s steps(1) infinite;
}
.xlights::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 4px 6px at 21px 15px, #FFF9C4 0 60%, transparent 100%),
    radial-gradient(ellipse 4px 6px at 49px 15px, #BBDEFB 0 60%, transparent 100%);
  background-size: 56px 22px; background-repeat: repeat-x;
  filter: drop-shadow(0 0 5px #fff); animation: xtwinkle 1.6s steps(1) .8s infinite;
}
@keyframes xtwinkle { 0% { opacity: 1; } 50% { opacity: 0; } }

/* ---------- a snowdrift on the bottom of the frame ---------- */
.xdrift {
  height: 14px; margin: -2px 0 0; pointer-events: none; position: relative; z-index: 2;
  background:
    radial-gradient(ellipse 22px 10px at 18px 2px, #fff 0 95%, transparent 100%),
    radial-gradient(ellipse 30px 12px at 58px 1px, #fff 0 95%, transparent 100%),
    radial-gradient(ellipse 18px 9px at 96px 2px, #fff 0 95%, transparent 100%);
  background-size: 120px 14px; background-repeat: repeat-x;
  filter: drop-shadow(0 2px 1px rgba(120,150,190,.45));
}

/* ---------- a snow cap on every tile, board and rack (thin: the letter stays clear) ---------- */
body.xmas.in-game .gameboard .sq.tile::before, body.xmas.in-game .rtile:not(.used)::before {
  content: ""; position: absolute; left: -1px; right: -1px; top: -1px; height: 16%; pointer-events: none; z-index: 1;
  border-radius: 3px 3px 40% 40% / 3px 3px 100% 100%;
  background:
    radial-gradient(ellipse 28% 100% at 18% 100%, #fff 0 95%, transparent 100%),
    radial-gradient(ellipse 30% 110% at 62% 100%, #fff 0 95%, transparent 100%),
    linear-gradient(#fff, #fff) top / 100% 55% no-repeat;
  filter: drop-shadow(0 1px 0 rgba(120,150,190,.5));
}
body.xmas.in-game .rtile:not(.used)::before { height: 13%; border-radius: 6px 6px 40% 40% / 6px 6px 100% 100%; }

/* ---------- GuffBot's Santa hat, on the centre square while it is empty ---------- */
body.xmas.in-game .gameboard .sq.centre { overflow: visible; z-index: 2; }
body.xmas.in-game .gameboard .sq.centre::after {
  content: ""; position: absolute; width: 62%; height: 52%; left: 30%; top: -24%; pointer-events: none;
  background:
    radial-gradient(circle at 86% 16%, #fff 0 15%, transparent 16%),
    linear-gradient(to bottom, transparent 78%, #fff 78%),
    linear-gradient(160deg, #E53935, #B71C1C);
  clip-path: polygon(0 100%, 100% 100%, 100% 0, 66% 2%, 30% 30%);
  transform: rotate(14deg); filter: drop-shadow(0 1px 1px rgba(0,0,0,.35));
}

/* ---------- the Play screen's line ---------- */
.xmasline { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; padding: 8px 12px; border-radius: 12px; font-size: .9rem; font-weight: 600;
  background: linear-gradient(90deg, #FCE8E6, #E6F4EA); border: 1px solid #E8B4B0; }
.xmasline.off { background: var(--card); border-color: var(--line); color: var(--muted); font-weight: 500; }

@media (prefers-reduced-motion: reduce) {
  .xsnow::before, .xsnow::after, .xlights::before, .xlights::after { animation: none; }
}