@font-face{font-family:'Cinzel';src:url(f/cinzel.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Nunito';src:url(f/nunito.woff2) format('woff2');font-weight:200 1000;font-display:swap}
:root{
  --red:#8e1b24;--red2:#b5262f;--deep:#5a0d14;--gold:#e2b54f;--gold2:#f6d77e;--cream:#fdf4e1;--ink:#3b1a10;--green:#1f6b3a;
  --u:min(1vw,1.78vh); /* 1 unit = 1% of the 16:9 box that fits the screen */
  --fs:calc(var(--u)*2.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;background:#3a0a0e;color:var(--ink);font-family:'Nunito',system-ui,sans-serif;font-weight:700;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
.bg{position:fixed;inset:0;background:#6b1a1a url(a/bg-wide.webp) center/cover no-repeat}
@media (orientation:portrait){.bg{background-image:url(a/bg-tall.webp)}:root{--u:min(1.78vw,1vh)}}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none;flex-direction:column;align-items:center;justify-content:center}
.screen.active{display:flex}
button{font:inherit;cursor:pointer;border:0;color:inherit}
.btn{font-family:'Cinzel',serif;font-weight:800;font-size:calc(var(--fs)*1.05);padding:.55em 1.2em;border-radius:999px;background:linear-gradient(#c22f37,#8e1b24);color:var(--cream);border:.12em solid var(--gold);box-shadow:0 .25em .6em rgba(0,0,0,.35),inset 0 .08em 0 rgba(255,255,255,.25);transition:transform .15s,box-shadow .15s,filter .15s;letter-spacing:.02em;text-shadow:0 2px 2px rgba(0,0,0,.35)}
.btn.big{font-size:calc(var(--fs)*1.35);padding:.5em 1.4em}
.btn.small{font-size:calc(var(--fs)*.8)}
.btn.tiny{font-size:calc(var(--fs)*.62);padding:.4em .9em}
.btn.alt{background:linear-gradient(#2f8a4c,#1f6b3a)}
.btn.ghost{background:rgba(60,10,14,.72)}
.btn.round{width:1.9em;height:1.9em;padding:0;font-size:calc(var(--fs)*1.1)}
.btn:hover{filter:brightness(1.12)}
.btn:active{transform:scale(.96)}
:focus{outline:none}
:focus-visible,.kbd :focus{outline:calc(var(--u)*.5) solid var(--gold2)!important;outline-offset:calc(var(--u)*.35);box-shadow:0 0 0 calc(var(--u)*1) rgba(246,215,126,.35),0 .3em .8em rgba(0,0,0,.4)}
.btn:focus-visible,.kbd .btn:focus{transform:scale(1.06)}
.glow{animation:glow 1.6s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 calc(var(--u)*3) var(--gold2),0 .25em .6em rgba(0,0,0,.35)}}
.row{display:flex;gap:calc(var(--u)*2);align-items:center;flex-wrap:wrap}
.center{justify-content:center}
.kicker{font-family:'Cinzel',serif;font-weight:800;color:var(--gold2);font-size:calc(var(--fs)*.9);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 2px 4px rgba(0,0,0,.6)}
.h2{font-family:'Cinzel',serif;font-weight:900;color:var(--red);font-size:calc(var(--fs)*1.8);line-height:1.1;text-align:center}
.sub{font-size:calc(var(--fs)*1.1);text-align:center;color:var(--ink)}
.label{font-family:'Cinzel',serif;font-weight:800;color:var(--red);font-size:calc(var(--fs)*.8);margin:calc(var(--u)*1) 0 calc(var(--u)*.5)}
.panel,.card{background:linear-gradient(rgba(255,250,238,.96),rgba(250,236,206,.96));border:calc(var(--u)*.45) solid var(--gold);border-radius:calc(var(--u)*2.5);box-shadow:0 calc(var(--u)*1) calc(var(--u)*4) rgba(40,5,5,.45),inset 0 0 0 calc(var(--u)*.35) rgba(142,27,36,.5)}
.foot{position:fixed;bottom:calc(var(--u)*.5);right:calc(var(--u)*1.2);font-size:calc(var(--fs)*.5);color:rgba(255,240,210,.85);text-shadow:0 1px 3px #000;z-index:50;pointer-events:none;font-family:'Cinzel',serif}

/* INTRO */
.intro video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;background:#000}
.tapLayer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*2);background:rgba(30,5,8,.35)}
.tapLayer .btn{font-size:calc(var(--fs)*1.9)}
.hint{color:var(--cream);font-size:var(--fs);text-shadow:0 2px 4px #000}
.skip{position:absolute;right:calc(var(--u)*2);bottom:calc(var(--u)*3.5);z-index:3}
.intro.titled video{opacity:0;transition:opacity .9s}
.titleLayer{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*3);padding:0 calc(var(--u)*8) calc(var(--u)*6) calc(var(--u)*36);animation:fade .9s}
.titleSanta{position:absolute;left:calc(var(--u)*4);bottom:calc(var(--u)*2);height:calc(var(--u)*50);filter:drop-shadow(0 1em 1em rgba(0,0,0,.4));transform-origin:50% 100%;animation:santaJam 1.4s ease-in-out infinite}
.titleLayer .title{background:rgba(90,13,20,.82);border:calc(var(--u)*.45) solid var(--gold);border-radius:calc(var(--u)*3);padding:.3em .6em .35em;box-shadow:0 1em 2em rgba(0,0,0,.35)}
@media (orientation:portrait){.titleLayer{justify-content:flex-start;padding:calc(var(--u)*22) calc(var(--u)*4) 0}.titleSanta{left:50%;bottom:calc(var(--u)*6);height:calc(var(--u)*42);margin-left:calc(var(--u)*-16)}}
@keyframes fade{from{opacity:0}}
.title{font-family:'Cinzel',serif;font-weight:900;color:var(--gold2);font-size:calc(var(--fs)*3.1);line-height:1;text-align:center;text-shadow:0 .05em 0 var(--deep),0 .1em .3em rgba(0,0,0,.7)}
.title span{display:block;font-size:.62em;color:var(--cream);margin-top:.15em}
.titleLayer .row{justify-content:center}
.titleLayer #btnReplay{position:absolute;bottom:calc(var(--u)*3.5);right:calc(var(--u)*2);z-index:2}

/* SETUP */
.setup .panel{width:min(94vw,calc(var(--u)*150));max-height:96vh;overflow:auto;padding:calc(var(--u)*1.8) calc(var(--u)*3.5)}
.setupGrid{display:grid;grid-template-columns:1fr 1.25fr;gap:calc(var(--u)*4);margin:0 0 calc(var(--u)*1.5)}
@media (orientation:portrait){.setupGrid{grid-template-columns:1fr;gap:0}}
.startRow{margin-top:calc(var(--u)*3);flex-wrap:nowrap}
.stepper{display:flex;align-items:center;gap:calc(var(--u)*2)}
.count{font-family:'Cinzel',serif;font-weight:900;font-size:calc(var(--fs)*1.8);color:var(--red);min-width:1.2em;text-align:center}
.teamNames{display:flex;flex-direction:column;gap:calc(var(--u)*.9);margin-top:calc(var(--u)*1.2)}
.teamNames label{display:flex;align-items:center;gap:calc(var(--u)*1)}
.dot{width:calc(var(--fs)*1);height:calc(var(--fs)*1);border-radius:50%;flex:none;border:2px solid #fff8;box-shadow:0 1px 3px #0006}
.teamNames input{flex:1;min-width:0;font:inherit;font-size:calc(var(--fs)*.9);padding:.25em .6em;border-radius:.5em;border:2px solid #c9a35a;background:#fffdf7;color:var(--ink);user-select:text;-webkit-user-select:text}
.teamNames input:focus{border-color:var(--red);outline:calc(var(--u)*.4) solid var(--gold2)}
.picks{display:flex;flex-direction:column;gap:calc(var(--u)*.7)}
.chips{display:flex;flex-wrap:wrap;gap:calc(var(--u)*.8)}
.chip{font-size:calc(var(--fs)*.78);padding:.3em .85em;border-radius:999px;background:#efe0c2;color:#7a5a3a;border:2px solid #c9a35a;text-align:left;font-weight:800}
.chip.on{background:linear-gradient(#c22f37,#8e1b24);color:var(--cream);border-color:var(--gold)}
.picks .chip::before{content:'☐ ';}
.picks .chip.on::before{content:'☑ ';}

/* GAME */
.game{justify-content:flex-start}
.board{position:fixed;z-index:6;right:calc(var(--u)*1.2);top:calc(var(--u)*1.2);width:calc(var(--u)*17);display:flex;flex-direction:column;gap:calc(var(--u)*.8)}
.team{display:flex;align-items:center;gap:.45em;width:100%;text-align:left;background:rgba(70,10,15,.9);color:var(--cream);border:calc(var(--u)*.3) solid var(--gold);border-radius:calc(var(--u)*1.4);padding:.3em .6em .3em .45em;font-size:calc(var(--fs)*.66);font-weight:800;box-shadow:0 .2em .5em rgba(0,0,0,.4);transition:transform .3s,background .3s;cursor:default}
.team .dot{width:1.2em;height:1.2em}
.team .nm{flex:1;min-width:0;line-height:1.1;overflow-wrap:anywhere;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.team .pts{font-family:'Cinzel',serif;font-weight:900;color:var(--gold2);font-size:1.3em;text-align:right}
.awarding .team{cursor:pointer;animation:askGlow 1.4s ease-in-out infinite}
.awarding .team.got{background:linear-gradient(#2f9a52,#1c6b37);border-color:#bdf5c9;animation:none}
.awarding .team.got .nm::before{content:'✔ '}
@keyframes askGlow{50%{box-shadow:0 0 calc(var(--u)*1.6) var(--gold2)}}
.team.bump{animation:bump .6s!important}
@keyframes bump{40%{transform:scale(1.12)}}
.stage{flex:1;width:100%;display:flex;padding:calc(var(--u)*3) calc(var(--u)*20) calc(var(--u)*3) calc(var(--u)*15);min-height:0;overflow-y:auto}
.stage>*{margin:auto}
.roundCard,.endCard{padding:calc(var(--u)*3) calc(var(--u)*6);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.6);max-width:calc(var(--u)*110);animation:pop .5s}
.roundCard .kicker,.endCard .kicker{color:var(--red2);text-shadow:none}
.rcIcon{font-size:calc(var(--fs)*4);line-height:1}
@keyframes pop{from{transform:scale(.85);opacity:0}}
.qWrap{width:min(100%,calc(var(--u)*120));display:flex;flex-direction:column;gap:calc(var(--u)*1.3);animation:pop .4s}
.qMeta{text-align:center;font-size:calc(var(--fs)*.72);margin-bottom:calc(var(--u)*-.4)}
.timer{position:absolute;right:calc(var(--u)*-3);top:calc(var(--u)*-3);z-index:2;display:grid;place-items:center;width:calc(var(--u)*8.5);height:calc(var(--u)*8.5);border:calc(var(--u)*.35) solid var(--gold);background:rgba(70,10,15,.88);border-radius:50%;box-shadow:0 .2em .6em rgba(0,0,0,.4)}
.timer svg{position:absolute;inset:0;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:9}
.timer .trk{stroke:rgba(255,255,255,.15)}
.timer .arc{stroke:var(--gold2);stroke-linecap:round;stroke-dasharray:276.5;transition:stroke-dashoffset 1s linear,stroke .3s}
.timer span{position:relative;font-family:'Cinzel',serif;font-weight:900;color:var(--cream);font-size:calc(var(--fs)*1.5)}
.timer.low .arc{stroke:#ff6b6b}.timer.low span{color:#ffd0d0}
.timer.paused span{opacity:.5}
.timer.off{visibility:hidden}
.qCard{position:relative;padding:calc(var(--u)*1.8) calc(var(--u)*7);min-height:calc(var(--u)*12);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:calc(var(--u)*1.5)}
.qText{font-size:calc(var(--fs)*1.45);line-height:1.25;text-align:center;color:var(--ink);font-weight:800}
.qText.quote{font-family:'Cinzel',serif;font-weight:800;font-size:calc(var(--fs)*1.6);color:var(--red)}
.answers{display:grid;grid-template-columns:1fr 1fr;gap:calc(var(--u)*1.4)}
.ans{display:flex;align-items:center;gap:.6em;text-align:left;font-size:calc(var(--fs)*1.12);font-weight:800;padding:.3em .8em;border-radius:calc(var(--u)*1.6);background:linear-gradient(#a8232c,#7a141c);color:var(--cream);border:calc(var(--u)*.35) solid var(--gold);box-shadow:0 .2em .5em rgba(0,0,0,.35);transition:all .35s;line-height:1.12;min-height:2.2em}
.ans b{flex:none;display:grid;place-items:center;width:1.7em;height:1.7em;border-radius:50%;background:var(--gold);color:var(--deep);font-family:'Cinzel',serif;font-weight:900}
.ans.picked{background:linear-gradient(#c58b1d,#93620b)}
.ans.right{background:linear-gradient(#2f9a52,#1c6b37);border-color:#bdf5c9;transform:scale(1.04);box-shadow:0 0 calc(var(--u)*2.5) rgba(140,255,170,.8)}
.ans.wrong{opacity:.6;filter:grayscale(.6) brightness(.8)}
.fact{background:rgba(31,107,58,.95);color:#f2fff4;border:calc(var(--u)*.3) solid #bfe9c9;border-radius:calc(var(--u)*1.6);padding:.35em .9em;font-size:calc(var(--fs)*.85);text-align:center;animation:pop .4s}
.award .port{display:none}
.award{flex:1;color:var(--cream);text-shadow:0 2px 4px #000;font-size:calc(var(--fs)*.8);text-align:right;font-family:'Cinzel',serif;font-weight:800}
.ctl{display:flex;align-items:center;justify-content:center;gap:calc(var(--u)*2)}
.ctl .btn{flex:none}
#btnNext{font-size:var(--fs)}
.carolBox{display:flex}
.standings{list-style:none;display:flex;flex-direction:column;gap:calc(var(--u)*.8);min-width:calc(var(--u)*55)}
.standings li{display:flex;align-items:center;gap:.6em;font-size:calc(var(--fs)*1.15);background:rgba(142,27,36,.08);border-radius:.6em;padding:.25em .7em}
.standings li .nm{flex:1}
.standings li .pts{font-family:'Cinzel',serif;font-weight:900;color:var(--red)}
.standings li .medal{width:1.4em;text-align:center}
.gameBar{position:fixed;left:calc(var(--u)*1.2);top:calc(var(--u)*1.2);display:flex;flex-direction:column;gap:calc(var(--u)*.8);z-index:5}
.santa{position:fixed;left:calc(var(--u)*1.5);bottom:calc(var(--u)*1);height:calc(var(--u)*20);z-index:4;pointer-events:none;transform-origin:50% 100%;filter:drop-shadow(0 .5em .6em rgba(0,0,0,.45));transition:transform .4s}
.santa.happy{animation:santaHop 1.3s ease-in-out}
@keyframes santaHop{0%{transform:scale(1)}15%{transform:scale(1.35) translateY(-12%) rotate(-6deg)}30%{transform:scale(1.25) translateY(0) rotate(5deg)}45%{transform:scale(1.35) translateY(-10%) rotate(-4deg)}60%{transform:scale(1.25) translateY(0) rotate(3deg)}100%{transform:scale(1)}}
.santa.sad{animation:santaSad .9s}
@keyframes santaSad{30%,70%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}

/* WIN */
.win{background:radial-gradient(ellipse at center,rgba(255,230,160,.25),rgba(40,5,8,.55))}
.confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:3}
.winInner{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*1.8);margin-left:calc(var(--u)*30)}
.winName{font-size:calc(var(--fs)*3.2);animation:pop .8s}
.win .standings{background:linear-gradient(rgba(255,250,238,.95),rgba(250,236,206,.95));border:calc(var(--u)*.4) solid var(--gold);border-radius:calc(var(--u)*2);padding:calc(var(--u)*1.5)}
.bigSanta{position:absolute;left:calc(var(--u)*3);bottom:0;height:min(78vh,calc(var(--u)*55));z-index:2;transform-origin:50% 100%;animation:santaJam 1.1s ease-in-out infinite;filter:drop-shadow(0 1em 1em rgba(0,0,0,.4))}
@keyframes santaJam{50%{transform:rotate(-3deg) scale(1.03)}}
.modal{position:fixed;inset:0;z-index:60;background:rgba(20,2,4,.6);display:flex;align-items:center;justify-content:center}
.modal .panel{padding:calc(var(--u)*3) calc(var(--u)*5);display:flex;flex-direction:column;gap:calc(var(--u)*1.5);min-width:calc(var(--u)*50)}


/* UNLOCK */
.unlockLayer{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*2) calc(var(--u)*3) calc(var(--u)*3.2) calc(var(--u)*34);background:rgba(30,5,8,.48)}
.unlockSanta{position:absolute;left:calc(var(--u)*4);bottom:calc(var(--u)*2);height:calc(var(--u)*50);filter:drop-shadow(0 1em 1em rgba(0,0,0,.4));transform-origin:50% 100%;animation:santaJam 1.4s ease-in-out infinite;pointer-events:none}
.unlockPanel{position:relative;z-index:1;width:min(92vw,calc(var(--u)*96));max-height:96vh;overflow:auto;padding:calc(var(--u)*1.8) calc(var(--u)*2.6) calc(var(--u)*1.6);display:flex;flex-direction:column;align-items:center;gap:calc(var(--u)*.85)}
.unlockPanel .kicker{color:var(--red2);text-shadow:none}
.unlockPanel .h2{font-size:calc(var(--fs)*1.4)}
.unlockPanel .sub{font-size:calc(var(--fs)*.95);max-width:28em}
#unlockCode{width:100%;text-align:center;font-family:'Cinzel',serif;font-weight:800;font-size:calc(var(--fs)*1.3);letter-spacing:.1em;text-transform:uppercase;padding:.3em .5em;border-radius:.5em;border:3px solid #c9a35a;background:#fffdf7;color:var(--ink);user-select:text;-webkit-user-select:text}
#unlockCode:focus{border-color:var(--red);outline:calc(var(--u)*.4) solid var(--gold2)}
.unlockErrSlot{min-height:calc(var(--fs)*2.4);width:100%;display:flex;align-items:center;justify-content:center}
.unlockErr{background:rgba(142,27,36,.12);color:var(--red);border:2px solid var(--red2);border-radius:calc(var(--u)*1.2);padding:.3em .7em;font-size:calc(var(--fs)*.78);text-align:center;width:100%}
.unlockPad{display:grid;grid-template-columns:repeat(8,1fr);gap:calc(var(--u)*.45);width:100%;margin-top:calc(var(--u)*.1)}
.unlockPad .key{font-family:'Cinzel',serif;font-weight:800;font-size:calc(var(--fs)*.72);padding:.22em 0;border-radius:calc(var(--u)*.6);background:#efe0c2;color:var(--ink);border:2px solid #c9a35a;min-height:1.65em}
.unlockPad .key:hover{filter:brightness(1.08)}
.unlockPad .key:active{transform:scale(.96)}
@keyframes shake{20%{transform:translateX(-8px)}40%{transform:translateX(8px)}60%{transform:translateX(-5px)}80%{transform:translateX(5px)}}
.unlockPanel.shake{animation:shake .45s}

/* PORTRAIT / PHONE */
@media (orientation:portrait){
  :root{--fs:calc(var(--u)*3)}
  .board{position:relative;right:auto;top:auto;width:100%;display:grid;grid-template-columns:repeat(3,1fr);gap:calc(var(--u)*.8);padding:calc(var(--u)*1.2) calc(var(--u)*1.2) 0}
  .board[data-n="2"],.board[data-n="4"]{grid-template-columns:repeat(2,1fr)}
  .team{font-size:calc(var(--fs)*.55);padding:.3em .45em;border-radius:calc(var(--u)*1.2);gap:.3em}
  .team .dot{width:1em;height:1em}
  .stage{padding:calc(var(--u)*4.5) calc(var(--u)*2.5) calc(var(--u)*9)}
  .award .port{display:inline}
  .answers{grid-template-columns:1fr;gap:calc(var(--u)*1)}
  .ans{font-size:calc(var(--fs)*.95);min-height:2em;padding:.3em .6em}
  .qText{font-size:calc(var(--fs)*1.15)}
  .qText.quote{font-size:calc(var(--fs)*1.3)}
  .qCard{padding:calc(var(--u)*3) calc(var(--u)*3) calc(var(--u)*2.2);min-height:0}
  .fact{font-size:calc(var(--fs)*.75)}
  .santa{height:calc(var(--u)*15);left:calc(var(--u)*.5)}
  .timer{width:calc(var(--u)*10);height:calc(var(--u)*10);right:calc(var(--u)*-1.5);top:calc(var(--u)*-4.5)}
  .timer span{font-size:calc(var(--fs)*1.1)}
  .qMeta{font-size:calc(var(--fs)*.6);text-align:left}
  .ctl{flex-direction:column;align-items:flex-end;gap:calc(var(--u)*1);padding-left:calc(var(--u)*13)}
  .award{flex:none;font-size:calc(var(--fs)*.62)}
  .award .land{display:none}
  #btnNext,#btnReveal{font-size:calc(var(--fs)*.9)}
  .roundCard,.endCard{padding:calc(var(--u)*3) calc(var(--u)*3);max-width:100%}
  .standings{min-width:0;width:100%}
  .winInner{margin:0 calc(var(--u)*3) calc(var(--u)*30)}
  .bigSanta{left:50%;transform:translateX(-50%);height:calc(var(--u)*34);animation:none}
  .title{font-size:calc(var(--fs)*2.6)}
  .unlockLayer{padding:calc(var(--u)*6) calc(var(--u)*3) calc(var(--u)*26);align-items:flex-start}
  .unlockSanta{left:50%;bottom:calc(var(--u)*3);height:calc(var(--u)*26);margin-left:calc(var(--u)*-11)}
  .unlockPad{display:none}
  .unlockPanel{width:100%;padding:calc(var(--u)*3)}
  #unlockCode{font-size:calc(var(--fs)*1.3)}
  .gameBar{top:auto;bottom:calc(var(--u)*2.6);left:auto;right:calc(var(--u)*1.2);flex-direction:row}
  .btn.tiny{font-size:calc(var(--fs)*.55)}
  .foot{font-size:calc(var(--fs)*.42)}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01s!important;transition:none!important}}
@media (orientation:portrait) and (max-height:760px){:root{--fs:calc(var(--u)*2.75)}}