/* ============ Northwoods After Dark — design system ============ */
:root{
  --night:#0d1b2a; --night2:#152736; --panel:#1b3247; --panel2:#22405a;
  --amber:#f2b13d; --amber-dk:#b97e14;
  --ember:#e0653f; --ember-dk:#a83c1e;
  --pine:#2e7d5b; --pine-dk:#1b5e42;
  --lake:#3a86c8; --lake-dk:#20567f;
  --plum:#8d5bd4; --plum-dk:#5f34a0;
  --cream:#f5ead1; --mist:#9db4c0; --ink:#0d1b2a;
  --shadow:0 .5vmin 0 rgba(0,0,0,.35);
  --radius:2.6vmin;
  font-size:16px;
}
*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}
html,body{margin:0;padding:0;}
html{background:#0d1b2a;}
body{
  position:fixed; inset:0; overflow:hidden;
  width:100vw; height:100dvh;
  font-family:ui-rounded,"SF Pro Rounded",-apple-system,system-ui,sans-serif;
  background:
    radial-gradient(ellipse at 20% -10%, #24425e 0%, transparent 55%),
    radial-gradient(ellipse at 85% 110%, #14283a 0%, transparent 60%),
    linear-gradient(180deg,#0d1b2a 0%, #11243a 60%, #0b1622 100%);
  color:var(--cream);
  user-select:none; -webkit-user-select:none;
  touch-action:manipulation;
  overscroll-behavior:none;
}
button{font-family:inherit; color:inherit; border:none; background:none; cursor:pointer;}
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible{outline:.55vmin solid var(--amber); outline-offset:.4vmin; box-shadow:0 0 0 .95vmin rgba(0,0,0,.5);}
h1,h2,h3,p{margin:0;}

/* ---------- screens ---------- */
.screen{position:fixed; inset:0; display:none; flex-direction:column; padding:env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);}
.screen.on{display:flex;}

#rotate-note{display:none;}
@media (orientation:portrait){
  #rotate-note{display:flex; position:fixed; inset:0; z-index:999; background:var(--night); align-items:center; justify-content:center; text-align:center; color:var(--cream);}
  .rotate-phone{font-size:18vmin; animation:rotatePhone 1.6s ease-in-out infinite;}
  .rotate-inner h2{font-size:7vmin; margin:2vmin 0 1vmin;}
  .rotate-inner p{font-size:4vmin; opacity:.7;}
}
@keyframes rotatePhone{0%,20%{transform:rotate(0)}60%,100%{transform:rotate(90deg)}}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:1.5vmin;
  background:var(--panel); color:var(--cream);
  border-radius:var(--radius);
  padding:2.2vmin 4vmin;
  font-size:4vmin; font-weight:800;
  box-shadow:var(--shadow);
  border-bottom:.8vmin solid rgba(0,0,0,.45);
  transition:transform .06s ease;
}
.btn:active{transform:translateY(.5vmin); border-bottom-width:.25vmin;}
.btn-huge{font-size:6vmin; padding:3vmin 7vmin; border-radius:4vmin;}
.btn-amber{background:var(--amber); border-bottom-color:var(--amber-dk); color:var(--ink);}
.btn-ember{background:var(--ember); border-bottom-color:var(--ember-dk); color:#fff;}
.btn-pine{background:var(--pine); border-bottom-color:var(--pine-dk); color:#fff;}
.btn-lake{background:var(--lake); border-bottom-color:var(--lake-dk); color:#fff;}
.btn-plum{background:var(--plum); border-bottom-color:var(--plum-dk); color:#fff;}
.btn-ghost{background:rgba(245,234,209,.1); box-shadow:none; border-bottom-color:transparent;}
.btn:disabled{opacity:.35; pointer-events:none;}

.chip-btn{
  background:rgba(245,234,209,.12); border-radius:99px;
  padding:1.2vmin 2.8vmin; font-size:2.8vmin; font-weight:800; color:var(--cream);
  box-shadow:var(--shadow); border-bottom:.4vmin solid rgba(0,0,0,.4);
}
.chip-btn:active{transform:translateY(.3vmin);}

/* ---------- splash ---------- */
#scr-splash{
  align-items:center; justify-content:center;
  background:
    linear-gradient(90deg,rgba(6,13,20,.34),rgba(13,27,42,.72)),
    url("../assets/splash-after-dark.webp") center/cover no-repeat;
}
.splash-stars{position:absolute; inset:0; pointer-events:none; overflow:hidden;}
.splash-stars .st{position:absolute; background:#fff; border-radius:50%; opacity:.8; animation:twinkle 3s ease-in-out infinite;}
@keyframes twinkle{0%,100%{opacity:.15}50%{opacity:.9}}
.splash-card{position:relative; text-align:center; background:rgba(13,27,42,.76); padding:4vmin 8vmin 4.5vmin; border-radius:4vmin; box-shadow:0 1.2vmin 0 rgba(0,0,0,.45); max-width:82vw; border:.3vmin solid rgba(242,177,61,.42); backdrop-filter:blur(6px);}
.splash-logo{font-size:9vmin; line-height:1.2;}
.splash-title{font-size:7.5vmin; letter-spacing:-.1vmin; color:var(--amber); font-family:ui-serif,Georgia,serif;}
.splash-sub{font-size:3.4vmin; color:var(--mist); margin:.8vmin 0 2.8vmin;}
.splash-hint{font-size:2.5vmin; color:var(--mist); margin-top:2.4vmin;}

/* ---------- menu ---------- */
#scr-menu{
  gap:1.6vmin; padding-top:max(2vmin, env(safe-area-inset-top));
  background:
    linear-gradient(180deg,rgba(13,27,42,.74),rgba(6,13,20,.82)),
    url("../assets/splash-after-dark.webp") center/cover no-repeat;
}
.menu-head{display:flex; align-items:center; justify-content:space-between; padding:1vmin 3vmin 0;}
.menu-title{font-size:5vmin; color:var(--amber); font-family:ui-serif,Georgia,serif;}
.menu-actions{display:flex; gap:1.4vmin;}
.menu-grid{
  flex:1; display:grid; gap:2vmin; padding:1vmin 3vmin 3vmin;
  grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,1fr);
  min-height:0;
}
.menu-tile{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1vmin;
  background:linear-gradient(160deg,var(--panel),var(--night2));
  border-radius:var(--radius);
  box-shadow:var(--shadow); border:.25vmin solid rgba(242,177,61,.22); border-bottom:.8vmin solid rgba(0,0,0,.45);
  padding:1.2vmin; min-height:0; position:relative; overflow:hidden;
  transition:transform .06s ease;
}
.menu-tile::before{content:""; position:absolute; inset:0; background-image:var(--tile-art); background-size:cover; background-position:center; transform:scale(1.02);}
.menu-tile::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(13,27,42,.02),rgba(13,27,42,.36) 48%,rgba(6,13,20,.78));}
.menu-tile:active{transform:scale(.96);}
.menu-tile .t-emoji,.menu-tile .t-name,.menu-tile .t-ages{position:relative; z-index:1;}
.menu-tile .t-emoji{font-size:4.4vmin; line-height:1; background:rgba(13,27,42,.72); width:7vmin; height:7vmin; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 .35vmin .9vmin rgba(0,0,0,.45); border:.2vmin solid rgba(242,177,61,.36);}
.menu-tile .t-name{font-size:3vmin; font-weight:900; text-align:center; line-height:1.12; color:var(--cream); text-shadow:0 .4vmin .9vmin rgba(0,0,0,.72);}
.menu-tile .t-ages{font-size:1.9vmin; font-weight:800; color:var(--night); background:rgba(242,177,61,.9); border-radius:99px; padding:.35vmin 1.6vmin;}

/* ---------- game shell ---------- */
.game-topbar{position:absolute; top:max(1.2vmin, env(safe-area-inset-top)); left:1.2vmin; right:1.2vmin; display:flex; align-items:center; gap:2vmin; z-index:50; pointer-events:none;}
.game-topbar .game-title{font-size:3vmin; font-weight:900; color:var(--mist); background:rgba(13,27,42,.7); padding:.6vmin 2vmin; border-radius:99px;}
.home-btn{
  pointer-events:auto; position:relative; width:7vmin; height:7vmin; border-radius:50%;
  background:rgba(27,50,71,.9); font-size:3.4vmin; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:center;
}
.hold-ring{position:absolute; inset:0; transform:rotate(-90deg);}
.hold-ring circle{fill:none; stroke:var(--amber); stroke-width:3; stroke-linecap:round; stroke-dasharray:107; stroke-dashoffset:107;}
.game-root{flex:1; display:flex; flex-direction:column; min-height:0;}

.g-center{flex:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2.4vmin; text-align:center; padding:4vmin; min-height:0;}
.g-mega{font-size:18vmin; line-height:1;}
.g-big{font-size:11vmin; line-height:1;}
.g-h1{font-size:6.5vmin; font-weight:900; line-height:1.15; color:var(--cream);}
.g-h2{font-size:4.4vmin; font-weight:800; color:var(--cream);}
.g-sub{font-size:3vmin; color:var(--mist); font-weight:700; line-height:1.4;}
.g-row{display:flex; gap:2vmin; align-items:center; justify-content:center; flex-wrap:wrap;}
.g-card{background:var(--panel); border-radius:var(--radius); box-shadow:var(--shadow); padding:3vmin 4.5vmin; border:.25vmin solid rgba(242,177,61,.18);}
.g-gold{color:var(--amber);}

/* ---------- sub screens ---------- */
.sub-head{display:flex; align-items:center; justify-content:space-between; padding:2vmin 3vmin 1vmin;}
.sub-head h1{font-size:4.6vmin; color:var(--amber); font-family:ui-serif,Georgia,serif;}
.scores-list{flex:1; overflow-y:auto; padding:1vmin 6vmin; display:flex; flex-direction:column; gap:1.6vmin;}
.score-row{display:flex; align-items:center; gap:3vmin; background:var(--panel); border-radius:var(--radius); padding:1.6vmin 3vmin; box-shadow:var(--shadow);}
.score-row .s-rank{font-size:4.2vmin; width:7vmin; text-align:center;}
.score-row .s-emoji{font-size:5.5vmin;}
.score-row .s-name{flex:1; font-size:4vmin; font-weight:900;}
.score-row .s-pts{font-size:4vmin; font-weight:900; color:var(--amber);}
.score-row .s-del{font-size:3vmin; opacity:.4; padding:1vmin;}
.scores-foot{text-align:center; font-size:2.5vmin; color:var(--mist); padding:1.5vmin;}

.settings-list{flex:1; overflow-y:auto; padding:1vmin 8vmin 3vmin; display:flex; flex-direction:column; gap:1.6vmin;}
.set-row{display:flex; align-items:center; justify-content:space-between; gap:3vmin; background:var(--panel); border-radius:var(--radius); padding:2vmin 3.4vmin; box-shadow:var(--shadow);}
.set-row .set-label{font-size:3.2vmin; font-weight:800;}
.set-row .set-note{font-size:2.2vmin; color:var(--mist); font-weight:600;}
.set-row select,.set-row input[type=range]{font-size:3vmin; max-width:40vw;}
.toggle{width:9.5vmin; height:5.4vmin; border-radius:99px; background:#33475c; position:relative; transition:background .15s;}
.toggle.on{background:var(--pine);}
.toggle::after{content:""; position:absolute; top:.55vmin; left:.55vmin; width:4.3vmin; height:4.3vmin; border-radius:50%; background:#fff; transition:left .15s; box-shadow:0 .3vmin .6vmin rgba(0,0,0,.4);}
.toggle.on::after{left:4.6vmin;}

.help-body{flex:1; overflow-y:auto; padding:1vmin 8vmin 4vmin; display:flex; flex-direction:column; gap:1.8vmin;}
.help-card{background:var(--panel); border-radius:var(--radius); padding:2.4vmin 3.4vmin; box-shadow:var(--shadow);}
.help-card h3{font-size:3.4vmin; margin-bottom:.8vmin; color:var(--amber);}
.help-card p{font-size:2.8vmin; color:var(--mist); font-weight:600; line-height:1.45;}

/* ---------- overlays / shared widgets ---------- */
.overlay{position:fixed; inset:0; z-index:200; display:flex; align-items:center; justify-content:center; flex-direction:column; gap:2vmin; background:rgba(6,13,20,.75); backdrop-filter:blur(4px);}
.overlay .ov-num{font-size:34vmin; font-weight:900; color:var(--amber); text-shadow:0 1.5vmin 0 rgba(0,0,0,.4); animation:popIn .5s ease both;}
.overlay .ov-text{font-size:9vmin; font-weight:900; color:var(--cream); text-align:center; padding:0 6vmin;}
.banner{
  position:fixed; z-index:210; left:50%; top:50%; transform:translate(-50%,-50%);
  background:var(--panel); border-radius:4vmin; padding:3.5vmin 7vmin; text-align:center;
  box-shadow:0 1.5vmin 0 rgba(0,0,0,.45); animation:popIn .35s ease both; border:.3vmin solid rgba(242,177,61,.4);
}
.banner .b-emoji{font-size:12vmin; line-height:1.1;}
.banner .b-text{font-size:5vmin; font-weight:900; color:var(--cream);}

.modal-wrap{position:fixed; inset:0; z-index:300; display:flex; align-items:center; justify-content:center; background:rgba(6,13,20,.8); backdrop-filter:blur(4px);}
.modal{background:var(--panel); border-radius:3.5vmin; padding:3.5vmin 4.5vmin; max-width:84vw; max-height:84dvh; overflow-y:auto; box-shadow:0 1.5vmin 0 rgba(0,0,0,.45); display:flex; flex-direction:column; gap:2.2vmin; border:.3vmin solid rgba(242,177,61,.3);}
.modal h2{font-size:4.4vmin; color:var(--cream);}
.modal .modal-btns{display:flex; gap:2vmin; justify-content:center; flex-wrap:wrap;}
.modal input[type=text],.modal input[type=number]{font-family:inherit; font-size:4vmin; font-weight:700; padding:1.6vmin 2.4vmin; border-radius:2vmin; border:.4vmin solid #33475c; width:100%; background:var(--night2); color:var(--cream);}

.roster-bar{display:flex; gap:1.6vmin; align-items:center; justify-content:center; flex-wrap:wrap; padding:1vmin 2vmin;}
.roster-chip{display:flex; align-items:center; gap:1vmin; background:var(--panel2); border-radius:99px; padding:1vmin 2.6vmin; font-size:3.2vmin; font-weight:900; box-shadow:var(--shadow); border-bottom:.4vmin solid rgba(0,0,0,.4); color:var(--cream);}
.roster-chip:active{transform:translateY(.3vmin);}
.roster-chip .rc-e{font-size:4vmin;}
.roster-chip.sel{background:var(--amber); color:var(--ink);}

.tring{position:relative; display:flex; align-items:center; justify-content:center;}
.tring svg{transform:rotate(-90deg); display:block;}
.tring .tr-bg{fill:none; stroke:rgba(255,255,255,.12); stroke-width:8;}
.tring .tr-fg{fill:none; stroke:var(--amber); stroke-width:8; stroke-linecap:round; transition:stroke .2s;}
.tring .tr-label{position:absolute; font-size:6vmin; font-weight:900; color:var(--cream);}
.tring.tr-low .tr-fg{stroke:var(--ember);}
.tring.tr-low .tr-label{color:var(--ember); animation:pulse .5s ease infinite;}

.confetti{position:fixed; z-index:400; top:-6vmin; border-radius:.6vmin; pointer-events:none; animation:confFall linear both;}
@keyframes confFall{to{transform:translateY(115dvh) rotate(720deg);}}
.flash-red{animation:flashRed .5s ease 4;}
@keyframes flashRed{0%,100%{background:transparent}50%{background:rgba(224,101,63,.4)}}
.explode-bg{position:fixed; inset:0; z-index:180; background:radial-gradient(circle at 50% 55%, #f2b13d, #e0653f 50%, #7a1f1f 85%); animation:popIn .18s ease both;}

@keyframes popIn{from{transform:scale(.35); opacity:0}60%{transform:scale(1.12)}to{transform:scale(1); opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.1)}}
@keyframes wiggle{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@keyframes shake{0%,100%{transform:translateX(0)}20%{transform:translateX(-2vmin)}40%{transform:translateX(2vmin)}60%{transform:translateX(-1.4vmin)}80%{transform:translateX(1.4vmin)}}
.anim-pop{animation:popIn .4s ease both;}
.anim-pulse{animation:pulse 1s ease infinite;}
.anim-wiggle{animation:wiggle .6s ease infinite;}
.anim-shake{animation:shake .45s ease;}

/* ---------- trivia ---------- */
.tt-teams{display:flex; gap:2vmin; justify-content:center; flex-wrap:wrap;}
.tt-team{display:flex; flex-direction:column; align-items:center; gap:.6vmin; background:var(--panel); border-radius:var(--radius); padding:1.6vmin 3.4vmin; box-shadow:var(--shadow); border-bottom:.6vmin solid rgba(0,0,0,.4);}
.tt-team .tm-name{font-size:3vmin; font-weight:900;}
.tt-team .tm-pts{font-size:4.6vmin; font-weight:900; color:var(--amber);}
.tt-team.sel{outline:.5vmin solid var(--amber);}
.tt-q{font-size:5.2vmin; font-weight:800; line-height:1.35; max-width:86vw;}
.tt-a{font-size:5.6vmin; font-weight:900; color:var(--amber);}
.tt-cat{display:grid; grid-template-columns:repeat(4,1fr); gap:1.8vmin; width:min(150vmin,92vw);}
.tt-cat .btn{flex-direction:column; gap:.6vmin; font-size:3vmin; padding:2.4vmin 1vmin;}
.tt-cat .btn small{font-size:2vmin; opacity:.7;}

/* ---------- hot seat ---------- */
.hs-word{font-size:11vmin; font-weight:900; color:var(--amber); text-align:center; line-height:1.1; padding:0 4vmin;}
.hs-mode{font-size:3.4vmin; font-weight:900; color:var(--night); background:var(--cream); padding:.8vmin 3vmin; border-radius:99px;}

/* ---------- word hunt ---------- */
.wh-grid{display:grid; gap:1.2vmin; margin:0 auto;}
.wh-cell{background:var(--cream); color:var(--ink); border-radius:1.6vmin; display:flex; align-items:center; justify-content:center; font-weight:900; box-shadow:inset 0 -0.6vmin 0 rgba(0,0,0,.15); font-family:ui-serif,Georgia,serif;}
.wh-score-row{display:flex; align-items:center; gap:2vmin; background:var(--panel); border-radius:var(--radius); padding:1.4vmin 3vmin;}
.wh-score-row .ws-name{flex:1; font-size:3.6vmin; font-weight:900;}
.wh-score-row .ws-pts{font-size:4vmin; font-weight:900; color:var(--amber); min-width:10vmin; text-align:right;}
.wh-chip{background:var(--panel2); border-radius:99px; padding:.9vmin 2.4vmin; font-size:3vmin; font-weight:900;}
.wh-chip:active{background:var(--amber); color:var(--ink);}

/* ---------- categories ---------- */
.cat-list{display:grid; grid-template-columns:1fr 1fr; gap:1.2vmin 4vmin; text-align:left; font-size:3.4vmin; font-weight:800; max-width:88vw;}
.cat-list .ci{display:flex; gap:1.6vmin; align-items:baseline;}
.cat-list .ci b{color:var(--amber); font-size:3vmin;}
.cat-letter{font-size:16vmin; font-weight:900; color:var(--ink); background:var(--cream); width:22vmin; height:22vmin; border-radius:3vmin; display:flex; align-items:center; justify-content:center; font-family:ui-serif,Georgia,serif; box-shadow:var(--shadow);}

/* ---------- malarkey ---------- */
.mk-opt{display:flex; align-items:center; gap:2.4vmin; background:var(--panel); border-radius:var(--radius); padding:1.8vmin 3vmin; width:min(130vmin,90vw); text-align:left; box-shadow:var(--shadow); border-bottom:.5vmin solid rgba(0,0,0,.4);}
.mk-opt .mo-letter{font-size:4.6vmin; font-weight:900; color:var(--night); background:var(--amber); border-radius:50%; width:7vmin; height:7vmin; display:flex; align-items:center; justify-content:center; flex-shrink:0;}
.mk-opt .mo-text{font-size:3.6vmin; font-weight:800; line-height:1.3;}
.mk-opt.truth{outline:.6vmin solid var(--pine); background:#1d3d31;}
.mk-opt .mo-tag{margin-left:auto; font-size:2.4vmin; color:var(--mist); font-weight:700; flex-shrink:0;}

/* ---------- mindmeld dial ---------- */
.mm-dial-wrap{position:relative; width:min(80vmin,88vw); margin:0 auto;}
.mm-dial-wrap svg{width:100%; display:block; touch-action:none;}
.mm-score-band{font-weight:900;}

/* ---------- werewolf ---------- */
.ww-night{background:radial-gradient(circle at 50% 20%, #1a2c48 0%, #05080f 70%);}
.ww-legend{display:flex; flex-direction:column; gap:1.2vmin; text-align:left; font-size:3.2vmin; font-weight:800;}
.ww-legend .wl{display:flex; align-items:center; gap:2vmin; background:var(--panel); border-radius:2vmin; padding:1.2vmin 2.6vmin;}
.ww-legend .wl .card{font-size:4vmin; color:var(--amber); font-family:ui-serif,Georgia,serif; min-width:11vmin;}

/* ---------- long shot ---------- */
.ls-board{display:flex; flex-direction:column; gap:1.2vmin; width:min(120vmin,88vw);}
.ls-guess{display:flex; align-items:center; gap:2.4vmin; background:var(--panel); border-radius:2vmin; padding:1.4vmin 3vmin; box-shadow:var(--shadow);}
.ls-guess .lg-num{font-size:4.4vmin; font-weight:900; color:var(--amber); min-width:22vmin; text-align:right; font-variant-numeric:tabular-nums;}
.ls-guess .lg-name{font-size:3.4vmin; font-weight:800; color:var(--mist);}
.ls-guess.winner{outline:.6vmin solid var(--pine); background:#1d3d31;}
.ls-reveal{font-size:13vmin; font-weight:900; color:var(--amber); font-variant-numeric:tabular-nums;}

::-webkit-scrollbar{width:0; height:0;}