/* Hushfox layout: big, readable party screens for a phone passed around a room. Colours: plum night + fox orange.
   (c) 2026 CyberMax. All rights reserved. */
:root{--acc:#FF7A2F;--acc-ink:#1C1530;--fox:#FF7A2F;--night:#1C1530;--night2:#2B2048;--cream:#FFF3E6}
.headline h1 .num{color:var(--muted);font-weight:700;font-size:.62em}
.tag{margin:0 0 10px}
.stage{position:relative;margin-top:8px;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);background:radial-gradient(120% 90% at 50% 0%,#3A2A63 0%,var(--night) 62%);color:var(--cream);min-height:clamp(520px,calc(100svh - 150px),860px);display:flex;flex-direction:column}
.scr{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:20px 16px 22px;text-align:center;animation:pop .28s cubic-bezier(.2,1.3,.4,1)}
.scr.top{justify-content:flex-start}
@keyframes pop{0%{opacity:0;transform:translateY(10px) scale(.98)}100%{opacity:1;transform:none}}
.logo{font:900 clamp(46px,13vw,76px)/1 system-ui,sans-serif;letter-spacing:-.03em;margin:0;color:#fff;text-shadow:0 4px 0 #C2541C,0 12px 30px rgba(0,0,0,.45)}
.logo i{color:var(--fox);font-style:normal}
.fox{width:min(150px,36vw);height:auto;filter:drop-shadow(0 10px 20px rgba(0,0,0,.4))}
.fox.sm{width:72px}
.lead{margin:0;font-size:clamp(17px,4.6vw,21px);font-weight:700;color:#F3E9FF;max-width:30ch}
.small{font-size:14px}.muted2{color:#C9BEDF}
.big{display:flex;flex-direction:column;align-items:flex-start;gap:2px;width:min(420px,100%);text-align:left;background:rgba(255,255,255,.08);border:2px solid rgba(255,255,255,.18);color:#fff;border-radius:18px;padding:14px 16px;font:inherit;cursor:pointer;touch-action:manipulation}
.big b{font-size:21px}.big span{font-size:14px;color:#D8CCEE}.big:hover{background:rgba(255,255,255,.14)}
.big.hot{background:linear-gradient(135deg,#FF9A4D,#FF6A2A);border-color:transparent;color:var(--night)}.big.hot span{color:#3B2410}
.go{min-height:64px;font-size:22px;padding:12px 38px;border-radius:18px;box-shadow:0 6px 0 #B9461A;width:min(420px,100%)}
.go:active{transform:translateY(3px);box-shadow:0 3px 0 #B9461A}
.lnk{background:none;border:0;color:#D8CCEE;font:inherit;text-decoration:underline;cursor:pointer;padding:8px;min-height:40px}
.stage .btn.ghost{color:#fff;border-color:rgba(255,255,255,.3)}
.stage .chip{background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.25)}
.stage .chip[aria-pressed=true]{background:var(--fox);color:var(--night);border-color:var(--fox)}
.stage .chip.lock{opacity:.7;border-style:dashed}
.field{width:min(420px,100%);text-align:left}
.field label{display:block;font-weight:800;margin:6px 0 4px;font-size:15px}
.names{list-style:none;margin:0;padding:0;display:grid;gap:6px;width:min(420px,100%)}
.names li{display:flex;gap:6px;align-items:center}
.inp{flex:1;min-height:48px;border-radius:12px;border:2px solid rgba(255,255,255,.22);background:rgba(0,0,0,.25);color:#fff;font:inherit;font-size:18px;padding:8px 12px;width:100%}
.inp:focus{outline:3px solid var(--fox);outline-offset:1px}
.inp.code{text-transform:uppercase;letter-spacing:.3em;font-weight:900;font-size:26px;text-align:center}
.x{min-width:48px;min-height:48px;border-radius:12px;border:0;background:rgba(255,255,255,.1);color:#fff;font-size:20px;cursor:pointer}
.card{width:min(420px,100%);border-radius:26px;padding:26px 18px;background:var(--cream);color:var(--night);box-shadow:0 14px 40px rgba(0,0,0,.45);transform-style:preserve-3d}
.card.foxcard{background:linear-gradient(160deg,#FF9A4D,#E8571C);color:#1C1530}
.card .k{margin:0;font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.12em;opacity:.7}
.card .w{margin:6px 0 0;font:900 clamp(34px,10vw,58px)/1.05 system-ui,sans-serif;letter-spacing:-.02em;word-break:break-word}
.card .c{margin:10px 0 0;font-size:18px;font-weight:700}
.card.hidden .w,.card.hidden .c{filter:blur(14px);user-select:none}
.flip{animation:flip .5s ease}
@keyframes flip{0%{transform:rotateY(90deg)}100%{transform:none}}
.timer{position:relative;width:min(200px,50vw);aspect-ratio:1}
.timer svg{width:100%;height:100%;transform:rotate(-90deg)}
.timer circle{fill:none;stroke-width:14}.timer .bg{stroke:rgba(255,255,255,.12)}.timer .fg{stroke:var(--fox);stroke-linecap:round;transition:stroke-dashoffset .2s linear}
.timer b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font:900 clamp(48px,14vw,72px)/1 system-ui,sans-serif;font-variant-numeric:tabular-nums}
.timer.hurry .fg{stroke:#FF4D4D}.timer.hurry b{animation:beat .5s ease-in-out infinite}
@keyframes beat{50%{transform:scale(1.08)}}
.cat{margin:0;font:900 clamp(26px,7.5vw,40px)/1.1 system-ui,sans-serif}
.twist{width:min(420px,100%);border-radius:18px;padding:12px 14px;background:#FFE36B;color:#1C1530;font-weight:800;font-size:clamp(17px,4.8vw,21px);display:flex;gap:10px;align-items:center;text-align:left;box-shadow:0 8px 24px rgba(0,0,0,.35)}
.twist i{font-style:normal;font-size:34px}
.twist.wait{background:rgba(255,255,255,.08);color:#D8CCEE;font-weight:700;box-shadow:none;border:2px dashed rgba(255,255,255,.2)}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px;width:min(460px,100%)}
.pick{min-height:60px;border-radius:16px;border:2px solid rgba(255,255,255,.22);background:rgba(255,255,255,.08);color:#fff;font:inherit;font-weight:800;font-size:clamp(17px,4.6vw,20px);cursor:pointer;padding:8px;touch-action:manipulation;word-break:break-word}
.pick:hover{background:rgba(255,255,255,.16)}.pick.on{background:var(--fox);color:var(--night);border-color:var(--fox)}
.pick.good{background:#2FD3A0;color:#0B2A20;border-color:#2FD3A0}.pick.bad{background:#FF5C5C;color:#2A0B0B;border-color:#FF5C5C}
.pick small{display:block;font-size:12px;font-weight:600;opacity:.8}
.board{list-style:none;margin:0;padding:0;width:min(420px,100%);display:grid;gap:6px}
.board li{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.08);border-radius:14px;padding:10px 14px;font-weight:700;font-size:18px}
.board li b{margin-left:auto;font-size:22px;font-variant-numeric:tabular-nums}.board li.win{background:linear-gradient(90deg,rgba(255,122,47,.45),rgba(255,122,47,.12))}
.board li .d{color:#2FD3A0;font-size:15px}.board li .off{opacity:.5}
.out{margin:0;font:900 clamp(30px,9vw,48px)/1.05 system-ui,sans-serif}
.emoji{font-size:34px;letter-spacing:4px;margin:0}
.code-big{font:900 clamp(54px,17vw,92px)/1 system-ui,sans-serif;letter-spacing:.14em;margin:0;color:#FFE36B}
.banner{width:min(420px,100%);border-radius:14px;padding:8px 12px;background:rgba(255,227,107,.15);border:1.5px solid #FFE36B;color:#FFF3C4;font-weight:700;font-size:15px}
.net{position:absolute;top:8px;left:50%;transform:translateX(-50%);background:#FF5C5C;color:#2A0B0B;font-weight:800;border-radius:999px;padding:4px 12px;font-size:13px;z-index:5}
.hunt-bar{width:min(460px,100%);height:12px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.hunt-bar i{display:block;height:100%;background:var(--fox);transition:width .2s linear}
.dots{display:flex;gap:6px;justify-content:center}.dots i{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.2)}.dots i.ok{background:#2FD3A0}.dots i.no{background:#FF5C5C}.dots i.now{background:#FFE36B}
.stage .lv-head,.stage .lv-world h3,.stage .lv-note,.stage .lv-twists{color:#E9DEFB}
.stage .lvmap{width:min(460px,100%);text-align:left}
.stage .fp-after{background:rgba(255,255,255,.08);border-radius:16px;padding:10px 14px;text-align:left;width:min(460px,100%)}
.under{justify-content:space-between;margin-top:10px}
.packs{display:grid;gap:6px;width:min(420px,100%)}
.pack{display:flex;gap:10px;align-items:center;text-align:left;border-radius:14px;border:2px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#fff;font:inherit;padding:8px 12px;cursor:pointer;min-height:52px}
.pack[aria-pressed=true]{border-color:var(--fox);background:rgba(255,122,47,.22)}.pack i{font-style:normal;font-size:24px}.pack b{display:block}.pack span{font-size:13px;color:#D8CCEE}.pack em{margin-left:auto;font-style:normal;font-size:12px;font-weight:800;color:#FFE36B;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.scr,.flip,.timer.hurry b{animation:none}}