@font-face{font-family:'Playfair';src:url(f/playfair.woff2) format('woff2');font-weight:400 900;font-display:swap}
@font-face{font-family:'Atkinson';src:url(f/atkinson-bold.woff2) format('woff2');font-weight:700;font-display:swap}
:root{
  --red:#9c1c26;--red2:#c22f37;--deep:#4a0b12;--gold:#d9a93f;--gold2:#f6d77e;--cream:#fdf6e8;--cream2:#f6ead0;--ink:#2e1a14;--green:#1d6b3a;--green2:#2f8a4c;
  --u:min(1vw,1.78vh);
  --fs:calc(var(--u)*2.05);
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden;color:var(--ink);font-family:'Atkinson',system-ui,sans-serif;font-weight:700;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none}
body{background:radial-gradient(ellipse at 50% 30%,#17573a 0%,#0e3d27 55%,#082a1a 100%)}
.snow{position:fixed;inset:0;pointer-events:none;opacity:.5;background-image:radial-gradient(circle,rgba(255,255,255,.9) 0 1.5px,transparent 2px),radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.5px);background-size:120px 120px,70px 70px;background-position:0 0,35px 45px}
.hidden{display:none!important}
.screen{position:fixed;inset:0;display:none}
.screen.active{display:flex}
button{font:inherit;cursor:pointer;border:0;color:inherit}
img{-webkit-user-drag:none}
/* cream card with red border + gold inner line, like the printed cards */
.card{background:var(--cream);border:calc(var(--u)*.45) solid var(--red);border-radius:calc(var(--u)*1.2);box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2.5) rgba(0,0,0,.45),inset 0 0 0 calc(var(--u)*.45) var(--cream),inset 0 0 0 calc(var(--u)*.62) var(--gold)}
.logo{font-family:'Playfair',Georgia,serif;font-weight:900;text-transform:uppercase;line-height:.95;text-align:center;letter-spacing:.01em}
.logo .w1{color:var(--red);display:block;font-size:calc(var(--u)*7)}
.logo .w2{color:var(--green);display:block;font-size:calc(var(--u)*10.5)}
.logo.small{font-size:calc(var(--u)*4.4);white-space:nowrap}
.logo.small .w1,.logo.small .w2{display:inline;font-size:1em}
.rule{display:flex;align-items:center;gap:calc(var(--u)*1);color:var(--red);width:70%;margin:calc(var(--u)*1.2) auto;font-size:calc(var(--u)*1.6)}
.rule::before,.rule::after{content:'';flex:1;height:2px;background:linear-gradient(90deg,transparent,var(--gold))}
.rule::after{background:linear-gradient(270deg,transparent,var(--gold))}
.kicker{font-family:'Playfair',Georgia,serif;font-weight:800;color:var(--red);text-transform:uppercase;letter-spacing:.08em;font-size:calc(var(--fs)*.62)}
.kicker.sm{font-size:calc(var(--fs)*.5)}
.h2{font-family:'Playfair',Georgia,serif;font-weight:900;color:var(--red);font-size:calc(var(--fs)*1.5);text-align:center;line-height:1.1}
.row{display:flex;gap:calc(var(--u)*1.6);align-items:center;flex-wrap:wrap}
.row.center{justify-content:center}

/* buttons */
.btn{font-family:'Playfair',Georgia,serif;font-weight:800;font-size:var(--fs);padding:.45em 1.1em;border-radius:999px;background:linear-gradient(#cf3540,#931a24);color:#fff8ea;border:.11em solid var(--gold);box-shadow:0 .2em .5em rgba(0,0,0,.35),inset 0 .08em 0 rgba(255,255,255,.3);transition:transform .15s,filter .15s,box-shadow .15s;text-shadow:0 2px 2px rgba(0,0,0,.35);white-space:nowrap;line-height:1.15}
.btn.big{font-size:calc(var(--fs)*1.3)}
.btn.alt{background:linear-gradient(#36975a,#1b5e33)}
.btn.gold{background:linear-gradient(#ffe08a,#d39a2a);color:#6a1018;text-shadow:0 1px 0 rgba(255,255,255,.5);border-color:var(--red)}
.btn.ghost{background:linear-gradient(#7a5a3c,#4f3824)}
.btn.on{background:linear-gradient(#36975a,#1b5e33);box-shadow:0 0 0 .12em var(--gold2),0 .2em .5em rgba(0,0,0,.35)}
.btn:hover{filter:brightness(1.1)}
.btn:active{transform:scale(.96)}
.btn:disabled{filter:grayscale(.8) brightness(.85);cursor:default;opacity:.6}
:focus{outline:none}
:focus-visible,.kbd :focus{outline:calc(var(--u)*.55) solid #ffcf3d!important;outline-offset:calc(var(--u)*.35);box-shadow:0 0 0 calc(var(--u)*1.1) rgba(255,207,61,.4),0 .3em .8em rgba(0,0,0,.4)!important}
.btn:focus-visible,.kbd .btn:focus{transform:scale(1.07)}
.glow{animation:glow 1.8s ease-in-out infinite}
@keyframes glow{50%{box-shadow:0 0 calc(var(--u)*2.6) var(--gold2),0 .2em .5em rgba(0,0,0,.35)}}
.foot{position:fixed;bottom:2px;right:calc(var(--u)*1.2);font-family:'Playfair',serif;font-size:calc(var(--fs)*.36);color:rgba(255,245,220,.6);pointer-events:none;z-index:5}

/* TITLE */
#sTitle{align-items:center;justify-content:center}
.titleCard{padding:calc(var(--u)*3.5) calc(var(--u)*6);text-align:center;max-width:94vw}
.sub{font-family:'Playfair',serif;font-weight:700;font-style:italic;color:var(--ink);font-size:calc(var(--fs)*1.05)}
.titleIcons{display:flex;justify-content:center;gap:calc(var(--u)*1.2);margin:calc(var(--u)*2) 0}
.titleIcons img{width:calc(var(--u)*7);height:calc(var(--u)*7);object-fit:contain;filter:drop-shadow(0 3px 4px rgba(0,0,0,.2))}
.titleBtns{display:flex;gap:calc(var(--u)*2);justify-content:center;align-items:center;flex-wrap:wrap;margin-top:calc(var(--u)*1)}
.tip{margin-top:calc(var(--u)*2);font-size:calc(var(--fs)*.7);color:#6b4a3a}

/* GAME (landscape) */
#sGame{gap:calc(var(--u)*1.5);padding:calc(var(--u)*1.5);align-items:stretch}
.left{flex:0 0 44%;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:calc(var(--u)*1.6) calc(var(--u)*1.5) calc(var(--u)*2.2);min-height:0}
.wheelWrap{flex:1;min-height:0;width:100%;display:flex;align-items:center;justify-content:center;padding:calc(var(--u)*1) 0}
.wheelBox{position:relative;height:100%;max-height:calc(var(--u)*38);aspect-ratio:1/1;max-width:100%}
.wheel{position:absolute;inset:0;border-radius:50%;will-change:transform;box-shadow:0 calc(var(--u)*.6) calc(var(--u)*2) rgba(0,0,0,.35)}
.wheel svg{width:100%;height:100%;display:block}
.pointer{position:absolute;left:50%;top:-4%;width:9%;transform:translateX(-50%);transform-origin:50% 25%;filter:drop-shadow(0 3px 3px rgba(0,0,0,.4));z-index:2}
.pointer.tick{animation:tick .09s ease-out}
@keyframes tick{50%{transform:translateX(-50%) rotate(-14deg)}}
.hub{position:absolute;left:50%;top:50%;width:15%;height:15%;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle at 35% 30%,#e04450,#8e1620);border:calc(var(--u)*.4) solid var(--gold);display:flex;align-items:center;justify-content:center;color:var(--gold2);font-size:calc(var(--u)*3.2);box-shadow:0 3px 8px rgba(0,0,0,.45);z-index:2}
.btn.spin{font-size:calc(var(--fs)*1.45);padding:.35em 1.6em;letter-spacing:.06em}

.right{flex:1;display:flex;flex-direction:column;padding:calc(var(--u)*1.8) calc(var(--u)*2);min-width:0;min-height:0}
.lastRow{display:flex;align-items:center;gap:calc(var(--u)*1.6);padding-bottom:calc(var(--u)*1.1);border-bottom:2px solid rgba(217,169,63,.6)}
.lastPic{flex:0 0 auto;width:calc(var(--u)*9);height:calc(var(--u)*9);border-radius:calc(var(--u)*1);background:#fff;border:calc(var(--u)*.3) solid var(--gold);display:flex;align-items:center;justify-content:center;box-shadow:inset 0 0 calc(var(--u)*1) rgba(217,169,63,.3)}
.lastPic img{width:88%;height:88%;object-fit:contain}
#lastEmpty{font-family:'Playfair',serif;font-weight:900;color:var(--gold);font-size:calc(var(--u)*6)}
.lastInfo{flex:1;min-width:0}
.lastInfo .kicker{white-space:nowrap}
.lastName{font-family:'Playfair',Georgia,serif;font-weight:900;color:var(--green);font-size:calc(var(--fs)*1.2);white-space:nowrap;line-height:1.05;margin:.08em 0 .12em}
.lastName.wait{font-size:calc(var(--fs)*1.05);color:#6b4a3a}
.count{font-size:calc(var(--fs)*.72);color:var(--ink);white-space:nowrap}
.recentBox{flex:0 0 auto;text-align:center}
.recent{display:flex;gap:calc(var(--u)*.5);margin-top:calc(var(--u)*.4);min-height:calc(var(--u)*3.6)}
.recent img{width:calc(var(--u)*3.3);height:calc(var(--u)*3.3);object-fit:contain;background:#fff;border-radius:calc(var(--u)*.5);border:2px solid rgba(217,169,63,.6);padding:2px}
.boardHead{display:flex;justify-content:space-between;align-items:baseline;margin:calc(var(--u)*.6) 0 calc(var(--u)*.4)}
.board{flex:1;min-height:0;display:grid;grid-template-columns:repeat(5,1fr);grid-template-rows:repeat(5,1fr);gap:calc(var(--u)*.55)}
.cell{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;background:#fff;border:2px solid #e6d6b4;border-radius:calc(var(--u)*.7);padding:calc(var(--u)*.3);min-height:0;overflow:hidden;transition:all .5s}
.cell img{flex:1 1 0;min-height:0;height:0;width:100%;object-fit:contain;filter:grayscale(1) opacity(.28);transition:filter .5s}
.cell span{font-size:calc(var(--u)*1.2);line-height:1.02;text-align:center;color:#9a8b7c;margin-top:.15em;overflow-wrap:anywhere}
.cell.on{background:#fffdf3;border-color:var(--gold);box-shadow:0 0 0 2px var(--gold) inset}
.cell.on img{filter:none}
.cell.on span{color:var(--ink)}
.cell.on::after{content:'✓';position:absolute;top:calc(var(--u)*.25);right:calc(var(--u)*.35);width:calc(var(--u)*1.9);height:calc(var(--u)*1.9);border-radius:50%;background:var(--green);color:#fff;font-size:calc(var(--u)*1.3);display:flex;align-items:center;justify-content:center}
.cell.new{animation:newcell 1.2s ease-in-out 3;border-color:var(--red)}
@keyframes newcell{50%{transform:scale(1.08);box-shadow:0 0 calc(var(--u)*2) var(--gold2)}}
.ctrls{display:flex;gap:calc(var(--u)*1);flex-wrap:nowrap!important;justify-content:center;margin-top:calc(var(--u)*1.2);flex-wrap:wrap}
.ctrls .btn{font-size:calc(var(--fs)*.72);padding:.4em .85em}

/* overlays */
.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(10,25,15,.72);padding:calc(var(--u)*2)}
.revealCard{max-width:92vw;text-align:center;padding:calc(var(--u)*2.4) calc(var(--u)*5);animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
@keyframes pop{0%{transform:scale(.4);opacity:0}100%{transform:none;opacity:1}}
.revImg{display:block;margin:calc(var(--u)*1) auto;width:calc(var(--u)*30);height:calc(var(--u)*30);object-fit:contain;filter:drop-shadow(0 6px 10px rgba(0,0,0,.25));animation:wob 1.6s ease-in-out .5s 2}
@keyframes wob{25%{transform:rotate(-4deg) scale(1.03)}75%{transform:rotate(4deg) scale(1.03)}}
.revName{font-family:'Playfair',Georgia,serif;font-weight:900;color:var(--green);font-size:calc(var(--u)*6.4);line-height:1;margin-bottom:calc(var(--u)*1.8)}
#confetti{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.winCard{position:relative;text-align:center;padding:calc(var(--u)*3) calc(var(--u)*6);animation:pop .5s cubic-bezier(.2,1.5,.4,1)}
.winTitle{font-family:'Playfair',Georgia,serif;font-weight:900;font-size:calc(var(--u)*15);line-height:1;color:var(--red);text-shadow:0 .04em 0 var(--gold),0 .08em .15em rgba(0,0,0,.3);animation:bounce 1s ease-in-out infinite}
@keyframes bounce{50%{transform:scale(1.06)}}
.winSub{font-family:'Playfair',serif;font-weight:800;color:var(--green);font-size:calc(var(--fs)*1.3);margin:calc(var(--u)*.8) 0}
.winTip{font-size:calc(var(--fs)*.75);color:#6b4a3a;margin-bottom:calc(var(--u)*2)}
.confirmCard{text-align:center;padding:calc(var(--u)*3) calc(var(--u)*5)}
.confTxt{font-size:calc(var(--fs)*.85);margin:calc(var(--u)*1.2) 0 calc(var(--u)*2.2)}

/* PORTRAIT (phones) */
@media (orientation:portrait){
  :root{--u:min(1.85vw,1.05vh);--fs:calc(var(--u)*2.7)}
  .logo .w1{font-size:calc(var(--u)*9)}
  .logo .w2{font-size:calc(var(--u)*13)}
  .titleCard{padding:calc(var(--u)*5) calc(var(--u)*4)}
  .titleIcons img{width:calc(var(--u)*8.5);height:calc(var(--u)*8.5)}
  #sGame{flex-direction:column;overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;padding:calc(var(--u)*2);gap:calc(var(--u)*2)}
  .left,.right{min-width:0}
  .left{flex:0 0 auto;padding:calc(var(--u)*2.5) calc(var(--u)*2) calc(var(--u)*3)}
  .logo.small{font-size:calc(var(--u)*7.4);white-space:normal}
  .logo.small .w1,.logo.small .w2{display:block}
  .logo.small .w2{font-size:1.3em}
  .wheelWrap{flex:0 0 auto;padding:calc(var(--u)*3) 0 calc(var(--u)*2)}
  .wheelBox{width:min(84vw,52vh);height:auto;max-height:none}
  .hub{font-size:calc(var(--u)*4.5)}
  .right{flex:0 0 auto;padding:calc(var(--u)*2.5) calc(var(--u)*2.2)}
  .lastRow{flex-wrap:wrap;order:-2}
  .lastName{white-space:normal;font-size:calc(var(--fs)*1.3)}
  .recent img{width:calc(var(--u)*7);height:calc(var(--u)*7)}
  .lastPic{width:calc(var(--u)*15);height:calc(var(--u)*15)}
  .recentBox{flex-basis:100%;display:flex;align-items:center;gap:calc(var(--u)*1.5);text-align:left}
  .recent{margin-top:0;min-height:calc(var(--u)*7)}
  .recent img{width:calc(var(--u)*7);height:calc(var(--u)*7)}
  .board{flex:0 0 auto;grid-template-columns:repeat(3,1fr);grid-template-rows:none;grid-auto-rows:calc(var(--u)*22)}
  .cell span{font-size:calc(var(--u)*2.05)}
  .cell{padding:2px}
  .cell.on::after{width:calc(var(--u)*2.8);height:calc(var(--u)*2.8);font-size:calc(var(--u)*2)}
  .ctrls{order:-1;display:grid!important;grid-template-columns:1fr 1fr;margin:calc(var(--u)*1.5) 0 calc(var(--u)*1.5)}
  .ctrls .btn{font-size:calc(var(--fs)*.9);padding:.5em .4em}
  .revealCard,.winCard,.confirmCard{padding:calc(var(--u)*4) calc(var(--u)*3);width:100%}
  .revImg{width:calc(var(--u)*42);height:calc(var(--u)*42)}
  .revName{font-size:calc(var(--u)*7.2)}
  .winTitle{font-size:calc(var(--u)*17)}
  .foot{display:none}
}
@media (prefers-reduced-motion:reduce){.glow,.winTitle,.revImg,.cell.new{animation:none}}
.bulb0{fill:#fff6c8}.bulb1{fill:#f6d77e}
.spinning .bulb0{animation:tw .3s steps(1) infinite}.spinning .bulb1{animation:tw .3s steps(1) infinite reverse}
@keyframes tw{50%{fill:#c22f37}}