/* Familio Games Christmas Family Feud: display-only visual theme. */
:root{--feud-blue:#8b1726;--feud-blue-dark:#400914;--feud-blue-lite:#af3140;--feud-gold:#f5ca65;--led-blue:#f5ca65;--led-dim:#176b46;--led-dark:#390d1b;}
html,body{background:#400914!important;}
#feudStage{position:relative;isolation:isolate;background:#400914;}
.stage{background:
  radial-gradient(circle at 12px 12px,rgba(245,202,101,.33) 2px,transparent 3px) 0 0/28px 28px,
  radial-gradient(circle at 12px 12px,rgba(33,132,85,.36) 2px,transparent 3px) 14px 14px/28px 28px,
  radial-gradient(ellipse at 50% 45%,#a51f34 0%,#701222 55%,#380916 100%)!important;}
.oval{background:radial-gradient(ellipse,#9f2035 0%,#671121 58%,#330716 100%)!important;
 box-shadow:0 0 0 14px #f5ca65,0 0 0 24px #512614,0 0 55px rgba(245,202,101,.25)!important;}
.oval::before{background:
 radial-gradient(circle at 12px 12px,#f5ca65 2px,transparent 3px) 0 0/28px 28px,
 radial-gradient(circle at 12px 12px,#248a59 2px,transparent 3px) 14px 14px/28px 28px,
 radial-gradient(circle at 12px 12px,#420b19 4px,transparent 4px) center/84px 84px!important;}
.question-banner,.round-banner,.score-pylon{background:linear-gradient(180deg,#ad263a,#470914)!important;border-color:#f5ca65!important;
 box-shadow:0 0 0 5px #562612 inset,0 0 25px rgba(245,202,101,.22)!important;text-shadow:0 2px 0 #390915!important;}
.board{background:radial-gradient(ellipse at 50% 45%,#a5263c,#621121 75%,#3b0917)!important;
 border-color:#f5ca65!important;box-shadow:0 0 0 8px #572914 inset,0 0 35px rgba(245,202,101,.24)!important;}
/* Option A: bright snowy-white *unrevealed* tiles, red numbering. */
.slot{background:linear-gradient(180deg,#fffaf0,#efe5d3)!important;border-color:#f5ca65!important;
 box-shadow:inset 0 3px 0 #fff,0 4px 9px rgba(37,4,14,.25)!important;}
.placeholder{background:linear-gradient(180deg,#fffdf8,#f2e9d8)!important;border:3px solid #fff!important;
 box-shadow:inset 0 0 0 2px rgba(142,29,47,.14)!important;}
.bubble{background:linear-gradient(180deg,#a72b40,#6c0f22)!important;border:3px solid #f5ca65!important;
 color:#fff!important;text-shadow:0 2px 0 #3c0616!important;box-shadow:0 3px 10px rgba(67,5,18,.28)!important;}
/* Concealed answer tiles deliberately have no decorative icons. */
/* Revealed answers retain high-contrast dark-red field + white text. */
.slot.revealed{background:linear-gradient(180deg,#8c1b30,#560b1b)!important;border-color:#f5ca65!important;
 box-shadow:inset 0 2px 0 #ba3b4c,0 0 0 2px #f5ca65!important;}
.answer{color:#fffaf0!important;text-shadow:0 2px 0 #2c0610!important;}
.points{background:#4c0c1e!important;border-color:#f5ca65!important;color:#fff9ef!important;}
.mini-x{background:#5b1323!important;border-color:#f5ca65!important;}
.mini-x i{color:#fff5db!important;}
#sound-toggle{color:#f5ca65!important;}
.christmas-decor{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;}
.christmas-decor img{position:absolute;user-select:none;-webkit-user-drag:none;object-fit:contain;}
/* Premium composition: detailed evergreen framing, consolidated corner vignettes.
   The middle 80% and score pylons stay unobstructed. */
.christmas-garland{width:clamp(205px,19vw,330px);top:-18px;opacity:.98;
 filter:drop-shadow(0 7px 10px rgba(13,1,8,.44));}
.garland-left{left:-20px;transform:rotate(-3deg)}
.garland-right{right:-20px;transform:scaleX(-1) rotate(-3deg)}
.christmas-vignette{bottom:-18px;filter:drop-shadow(0 9px 10px rgba(16,1,9,.32));}
.winter-left{left:-8px;width:clamp(170px,17vw,296px)}
.winter-right{right:-10px;width:clamp(175px,18vw,315px)}
/* The answer board and scores have visual priority. */
/* Santa is outside the interaction layer, animated locally only when a flyby is active. */
.santa-flyby{position:absolute;left:0;top:0;width:clamp(190px,26vw,410px);height:auto;z-index:90;
 pointer-events:none;opacity:0;transform:translate(-150% ,78vh);will-change:transform,opacity;}
.santa-flyby img{display:block;width:100%;height:auto;filter:drop-shadow(0 8px 7px rgba(44,2,14,.4));}
.santa-flyby.is-flying.route-low-lr{animation:santaLowLR 8.5s linear both;}
.santa-flyby.is-flying.route-low-rl{animation:santaLowRL 8.5s linear both;}
.santa-flyby.is-flying.route-low-rl img{transform:scaleX(-1);}
.santa-flyby.is-flying.route-diagonal{animation:santaDiagonal 8.5s ease-in-out both;}
@keyframes santaLowLR{0%{opacity:0;transform:translate(-18vw,77vh)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(112vw,75vh)}}
@keyframes santaLowRL{0%{opacity:0;transform:translate(112vw,76vh)}8%{opacity:1}90%{opacity:1}100%{opacity:0;transform:translate(-20vw,79vh)}}
@keyframes santaDiagonal{0%{opacity:0;transform:translate(105vw,67vh) scale(.9)}12%{opacity:1}82%{opacity:1}100%{opacity:0;transform:translate(66vw,-18vh) scale(.6)}}
/* Premium white-and-gold present strike; intentionally isolated from the rest of the display. */
.strikes{z-index:120!important;}
.christmas-strike{position:relative;width:calc(400px * var(--display-scale));height:calc(400px * var(--display-scale));
  display:block;isolation:isolate;animation:christmasGiftEnter .24s ease-out both;
  filter:drop-shadow(0 12px 20px rgba(18,0,8,.42));}
.christmas-gift-aura{position:absolute;inset:11%;border-radius:50%;z-index:0;
  background:radial-gradient(ellipse,rgba(255,250,222,.35) 0%,rgba(253,207,98,.18) 44%,transparent 73%);
  animation:christmasGiftGlow 2.4s ease-out both;}
.christmas-gift-interior{position:absolute;left:23%;top:34%;width:54%;height:37%;z-index:1;
  background:radial-gradient(ellipse at 50% 75%,rgba(255,243,189,.96),rgba(247,195,61,.43) 48%,transparent 78%);
  opacity:0;animation:christmasInteriorGlow 1.35s ease-out .4s both;}
.christmas-gift-body{position:absolute;left:16%;top:42%;width:68%;height:48%;z-index:3;
  user-select:none;pointer-events:none;filter:drop-shadow(0 12px 9px rgba(26,6,8,.35));}
.christmas-gift-lid{position:absolute;left:12%;top:16%;width:76%;height:40%;z-index:6;
  user-select:none;pointer-events:none;transform-origin:22% 85%;
  animation:christmasLidLift 1.05s cubic-bezier(.18,.76,.26,1) .37s both;
  filter:drop-shadow(0 7px 5px rgba(40,13,6,.26));}
/* Christmas strike uses the same bold framed-X language as Halloween/regular Feud. */
.christmas-gift-x{position:absolute;left:17%;top:13%;width:66%;height:66%;z-index:5;
  display:flex;align-items:center;justify-content:center;box-sizing:border-box;
  border-radius:calc(22px * var(--display-scale));
  border:calc(8px * var(--display-scale)) solid #f3c760;
  background:radial-gradient(circle at 48% 35%,#8d1b2b 0%,#4c0718 78%);
  box-shadow:inset 0 0 0 calc(4px * var(--display-scale)) #3d0712,
    0 0 0 calc(3px * var(--display-scale)) rgba(255,250,232,.9),
    0 calc(11px * var(--display-scale)) calc(24px * var(--display-scale)) rgba(16,0,7,.55),
    0 0 calc(40px * var(--display-scale)) rgba(255,196,73,.42);
  opacity:0;animation:christmasXPop 1.5s cubic-bezier(.2,1,.35,1) .66s both;}
.christmas-gift-x i{font-size:calc(225px * var(--display-scale));line-height:1;
  color:#ff333b;filter:drop-shadow(0 7px 0 #650d1d) drop-shadow(0 0 8px rgba(255,66,74,.48));}
.christmas-gift-spark{position:absolute;left:50%;top:47%;z-index:7;opacity:0;
  color:#fff8de;text-shadow:0 0 10px #ffe196,0 0 17px #ffc950;
  font-size:calc(38px * var(--display-scale));animation:christmasGiftSpark .95s ease-out .78s both;}
.spark-one{--tx:-138px;--ty:-101px}.spark-two{--tx:138px;--ty:-85px;animation-delay:.88s}
.spark-three{--tx:-132px;--ty:98px;animation-delay:.95s}.spark-four{--tx:132px;--ty:97px;animation-delay:.82s}
@keyframes christmasGiftEnter{from{transform:scale(.83);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes christmasGiftGlow{0%{opacity:0;transform:scale(.65)}28%{opacity:1;transform:scale(1)}100%{opacity:.62}}
@keyframes christmasInteriorGlow{0%{opacity:0;transform:scale(.5)}45%{opacity:1}100%{opacity:.58;transform:scale(1.15)}}
@keyframes christmasLidLift{0%,16%{transform:translate(0,0) rotate(0)}70%{transform:translate(-12%,-80%) rotate(-8deg)}100%{transform:translate(-15%,-85%) rotate(-10deg)}}
@keyframes christmasXPop{0%,13%{transform:translateY(58px) scale(.30);opacity:0}36%{transform:translateY(-19px) scale(1.06);opacity:1}
  52%,83%{transform:translateY(-13px) scale(1);opacity:1}100%{transform:translateY(-17px) scale(1.02);opacity:0}}
@keyframes christmasGiftSpark{0%{opacity:0;transform:translate(0,0) scale(.3)}20%{opacity:1}100%{opacity:0;transform:translate(var(--tx),var(--ty)) rotate(95deg) scale(.9)}}
@media(max-width:1000px){.christmas-garland{width:210px}.christmas-vignette{width:155px;opacity:.78}.santa-flyby{width:clamp(140px,25vw,260px)}}
@media(prefers-reduced-motion:reduce){.santa-flyby{display:none}.christmas-strike *, .christmas-strike{animation-duration:.01ms!important;animation-delay:0ms!important}}