@font-face { font-family: 'Cinzel Decorative'; src: url(../fonts/cinzel-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }
@font-face { font-family: 'Bungee'; src: url(../fonts/bungee.woff2) format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/nunito-600.woff2) format('woff2'); font-weight: 600; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/nunito-700.woff2) format('woff2'); font-weight: 700; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/nunito-800.woff2) format('woff2'); font-weight: 800; font-display: swap; }
@font-face { font-family: 'Nunito'; src: url(../fonts/nunito-900.woff2) format('woff2'); font-weight: 900; font-display: swap; }

:root {
  --bg: #0b0a0f; --panel: #16131e; --panel2: #1f1a2b; --line: rgba(255,255,255,0.09);
  --text: #f3eff9; --muted: #aaa2bb; --faint: #756d86;
  --purple: #8b5cf6; --purple-d: #714da5; --gold: #ffc53d;
  --red: #ff4d63; --blue: #4f9bff; --green: #35c47a;
  --r: 18px; --safe-b: env(safe-area-inset-bottom, 0px); --safe-t: env(safe-area-inset-top, 0px);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
body {
  background: var(--bg); color: var(--text);
  font-family: 'Nunito', system-ui, sans-serif; font-weight: 700; font-size: 16px; line-height: 1.4;
  overscroll-behavior: none;
}
body::before {
  content: ''; position: fixed; inset: 0; z-index: -1;
  background: radial-gradient(ellipse at 50% 30%, rgba(11,10,15,0.55), rgba(11,10,15,0.94) 70%), url(../img/back.webp) center / cover no-repeat;
  filter: grayscale(1);
}
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

#app { min-height: 100%; max-width: 560px; margin: 0 auto; padding: calc(16px + var(--safe-t)) 16px calc(24px + var(--safe-b)); display: flex; flex-direction: column; }

/* ---------- type ---------- */
.h1 { font-family: 'Bungee', sans-serif; font-size: 26px; line-height: 1.1; margin: 0; letter-spacing: 0.5px; }
.h2 { font-family: 'Bungee', sans-serif; font-size: 18px; margin: 0; letter-spacing: 0.5px; }
.label { font-family: 'Bungee', sans-serif; font-size: 12px; letter-spacing: 2px; color: var(--muted); }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.script { font-size: 19px; font-weight: 800; font-style: italic; line-height: 1.45; color: #fff; }

/* ---------- wordmark ---------- */
.wm { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.wm-eyes { width: 120px; filter: drop-shadow(0 0 10px rgba(255,190,60,0.9)); }
.wm-word { position: relative; }
.wm-word span { font-family: 'Cinzel Decorative', Georgia, serif; font-weight: 900; font-size: 92px; line-height: 1; letter-spacing: 6px; color: #eeeef2; text-shadow: 0 4px 0 #050506, 0 0 30px rgba(255,255,255,0.2); }
.wm-word svg { position: absolute; inset: -6% 0 0 0; width: 100%; height: 112%; }
.wm-tag { font-family: 'Bungee', sans-serif; font-size: 13px; letter-spacing: 5px; color: #bdb8c9; }
.wm.sm .wm-word span { font-size: 54px; letter-spacing: 4px; }
.wm.sm .wm-eyes { width: 72px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 54px; padding: 0 20px; border-radius: 16px; border: 2px solid var(--line);
  background: var(--panel2); font-family: 'Bungee', sans-serif; font-size: 16px; letter-spacing: 0.5px; text-align: center;
  transition: transform .08s ease, background .15s ease;
}
.btn:active { transform: scale(0.98); }
.btn[disabled] { opacity: 0.4; pointer-events: none; }
.btn-primary { background: linear-gradient(180deg, #9d6cff, #6d3fd8); border-color: rgba(255,255,255,0.18); box-shadow: 0 6px 0 #3f2386; color: #fff; }
.btn-gold { background: linear-gradient(180deg, #ffd766, #f0a81d); color: #2a1a05; border-color: rgba(255,255,255,0.3); box-shadow: 0 6px 0 #9b6207; }
.btn-danger { background: linear-gradient(180deg, #ff6b7d, #d9263e); color: #fff; border-color: rgba(255,255,255,0.2); box-shadow: 0 6px 0 #7c0f1f; }
.btn-ghost { background: transparent; }
.btn-sm { min-height: 40px; padding: 0 14px; font-size: 13px; border-radius: 12px; }
.btn-block { width: 100%; }
.icon-btn { width: 44px; height: 44px; border-radius: 12px; border: 2px solid var(--line); background: var(--panel2); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- layout ---------- */
.stack { display: flex; flex-direction: column; gap: 12px; }
.row { display: flex; align-items: center; gap: 10px; }
.spread { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.grow { flex: 1 1 auto; min-width: 0; }
.panel { background: rgba(22,19,30,0.92); border: 2px solid var(--line); border-radius: var(--r); padding: 16px; backdrop-filter: blur(6px); }
.topbar { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
.topbar .h1 { font-size: 20px; }
.spacer { flex: 1; }
.chip { display: inline-flex; align-items: center; gap: 5px; height: 24px; padding: 0 9px; border-radius: 12px; font-family: 'Bungee', sans-serif; font-size: 10px; letter-spacing: 1px; border: 1.5px solid currentColor; white-space: nowrap; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: var(--faint); flex-shrink: 0; }
.dot.on { background: var(--green); box-shadow: 0 0 8px var(--green); }
.dot.warn { background: var(--gold); }
.dot.off { background: var(--red); }

/* ---------- home ---------- */
.home { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 28px; padding: 20px 0; }
.home .btns { display: flex; flex-direction: column; gap: 14px; }

/* ---------- inputs ---------- */
.field { display: flex; flex-direction: column; gap: 6px; }
.input { height: 56px; border-radius: 14px; border: 2px solid var(--line); background: #0f0d15; padding: 0 16px; font-size: 18px; font-weight: 800; }
.input:focus { border-color: var(--purple); outline: none; }
.input.code { font-family: 'Bungee', sans-serif; font-size: 34px; letter-spacing: 12px; text-align: center; text-transform: uppercase; height: 72px; }

/* ---------- lobby ---------- */
.roomcode { font-family: 'Bungee', sans-serif; font-size: 52px; letter-spacing: 10px; line-height: 1; color: #fff; }
.qr { background: #fff; padding: 10px; border-radius: 14px; width: 150px; height: 150px; flex-shrink: 0; }
.qr svg { width: 100%; height: 100%; display: block; }
.plist { display: flex; flex-direction: column; gap: 8px; }
.prow { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: var(--panel2); border: 2px solid var(--line); min-height: 56px; }
.prow.dead { opacity: 0.55; }
.prow .nm { font-weight: 900; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.thumb { width: 44px; height: 44px; border-radius: 12px; background: radial-gradient(circle at 50% 60%, #f2e6fb, #d9c3f2); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; flex-shrink: 0; }
.thumb img { width: 100%; height: 100%; object-fit: contain; }
.thumb.blank { background: #2a2338; color: var(--muted); align-items: center; font-family: 'Bungee', sans-serif; }
.stepper { display: flex; align-items: center; gap: 6px; }
.stepper b { width: 30px; text-align: center; font-family: 'Bungee', sans-serif; font-size: 18px; }
.total { font-family: 'Bungee', sans-serif; font-size: 14px; }
.total.ok { color: var(--green); }
.total.bad { color: var(--red); }

/* ---------- tabs ---------- */
.tabs { position: sticky; bottom: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; margin: 16px -4px 0; border-radius: 18px; background: rgba(15,13,21,0.96); border: 2px solid var(--line); }
.tab { min-height: 48px; border-radius: 12px; border: none; background: transparent; font-family: 'Bungee', sans-serif; font-size: 13px; color: var(--muted); }
.tab[aria-selected="true"] { background: var(--panel2); color: #fff; }

/* ---------- phase banners ---------- */
.phase { border-radius: 20px; padding: 16px; display: flex; align-items: center; gap: 14px; border: 2px solid var(--line); }
.phase.night { background: linear-gradient(160deg, #2c1b4d, #150c26); }
.phase.day { background: linear-gradient(160deg, #fff1c9, #ffd98a); color: #3a2405; border-color: #ffd76a; }
.phase.day .muted { color: #7a5a1c; }
.phase.lobby { background: var(--panel); }
.phase svg { flex-shrink: 0; }
.stepdots { display: flex; gap: 6px; }
.stepdots i { width: 22px; height: 6px; border-radius: 3px; background: rgba(255,255,255,0.15); }
.stepdots i.on { background: var(--gold); }

/* ---------- pickers ---------- */
.pick { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 8px; }
.pk { position: relative; min-height: 64px; padding: 10px; border-radius: 14px; border: 2px solid var(--line); background: var(--panel2); text-align: left; display: flex; flex-direction: column; justify-content: center; gap: 2px; }
.pk .nm { font-weight: 900; font-size: 16px; line-height: 1.15; word-break: break-word; }
.pk .rl { font-size: 12px; color: var(--muted); }
.pk[aria-pressed="true"] { border-color: var(--gold); background: #3a2d12; box-shadow: 0 0 0 3px rgba(255,197,61,0.25); }
.pk[disabled] { opacity: 0.35; }
.result { border-radius: 18px; padding: 16px; display: flex; align-items: center; gap: 14px; font-family: 'Bungee', sans-serif; font-size: 22px; }
.result.yes { background: rgba(255,77,99,0.15); border: 2px solid var(--red); color: #ff8b9a; }
.result.no { background: rgba(53,196,122,0.12); border: 2px solid var(--green); color: #7de2a9; }
.note { border-radius: 14px; padding: 12px 14px; background: rgba(255,197,61,0.1); border: 2px solid rgba(255,197,61,0.4); color: #ffe3a1; font-size: 15px; }
.secret { border-radius: 14px; padding: 12px 14px; background: rgba(139,92,246,0.12); border: 2px dashed rgba(139,92,246,0.5); font-size: 15px; }

/* ---------- log ---------- */
.log { display: flex; flex-direction: column; gap: 6px; }
.lg { padding: 10px 12px; border-radius: 12px; background: var(--panel2); border-left: 4px solid var(--faint); font-size: 15px; }
.lg .when { font-family: 'Bungee', sans-serif; font-size: 10px; letter-spacing: 1px; color: var(--muted); display: block; margin-bottom: 2px; }
.lg.kill { border-color: var(--red); } .lg.save { border-color: var(--green); } .lg.vote { border-color: var(--gold); }
.lg.win { border-color: var(--purple); background: #2a1f45; } .lg.secret { border-color: var(--purple); } .lg.phase { border-color: #4a4458; }

/* ---------- timer ---------- */
.timer { font-family: 'Bungee', sans-serif; font-size: 56px; line-height: 1; text-align: center; letter-spacing: 2px; }
.timer.low { color: var(--red); }

/* ---------- role card (scaled from the 638x1013 design) ---------- */
.rc { --s: 0.42; font-size: calc(var(--s) * 1px); width: 638em; height: 1013em; position: relative; overflow: hidden; border-radius: 30em; background: linear-gradient(160deg, #fbe3e8 0%, #fff4f7 45%, #fdeef3 100%); flex-shrink: 0; color: #4a2380; }
.rc::before { content: ''; position: absolute; left: -120em; top: 140em; width: 520em; height: 260em; transform: rotate(-38deg); background: repeating-linear-gradient(90deg, rgba(255,255,255,0.8) 0 3em, transparent 3em 14em); }
.rc-glow { position: absolute; left: 119em; top: 348em; width: 400em; height: 400em; border-radius: 50%; background: radial-gradient(circle, var(--glow, rgba(170,140,220,0.3)) 0%, rgba(255,255,255,0) 68%); }
.rc-ring { position: absolute; left: 144em; top: 373em; width: 350em; height: 350em; border-radius: 50%; border: 3em dashed var(--ring, rgba(113,77,165,0.22)); }
.rc-art { position: absolute; left: 38em; top: 78em; width: 562em; height: 736em; display: flex; align-items: flex-end; justify-content: center; }
.rc-art img { max-width: 500em; max-height: 480em; width: auto; height: auto; display: block; }
.rc-frame { position: absolute; left: 26em; top: 66em; width: 586em; height: 888em; border: 12em solid #714da5; border-radius: 26em; }
.rc-badge { position: absolute; left: 280em; top: 33em; width: 78em; height: 78em; border-radius: 50%; background: #fff; box-shadow: 0 0 0 8em #714da5, 0 0 0 11em rgba(255,255,255,0.9); display: flex; align-items: center; justify-content: center; }
.rc-badge svg { width: 54em; height: 54em; }
.rc-plate { position: absolute; left: 40em; top: 866em; width: 558em; height: 136em; padding: 10em; background: #fff; border-radius: 34em; box-shadow: 0 6em 16em rgba(80,40,120,0.25); }
.rc-plate > div { height: 100%; padding: 14em 16em; background: #714da5; border-radius: 26em; }
.rc-plate > div > div { height: 100%; background: linear-gradient(180deg, #e2c9fb, #c6a2ee); border: 3em solid #fff; border-radius: 18em; display: flex; align-items: center; justify-content: center; }
.rc-plate span { font-family: 'Bungee', sans-serif; font-size: 46em; line-height: 1; letter-spacing: 0.022em; color: #4a2380; text-shadow: 0 0.065em 0 #fff, 0 -0.022em 0 #fff, 0.043em 0 0 #fff, -0.043em 0 0 #fff; }

/* ---------- card back ---------- */
.cb { --s: 0.42; font-size: calc(var(--s) * 1px); width: 638em; height: 1013em; position: relative; overflow: hidden; border-radius: 30em; background: #0d0d0f; box-shadow: 0 20px 50px rgba(0,0,0,0.6); }
.cb img.bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) contrast(1.1) brightness(0.7); }
.cb::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 50%, rgba(8,8,10,0.5) 0%, rgba(8,8,10,0.3) 35%, rgba(5,5,6,0.9) 100%); }
.cb .wm { position: absolute; inset: 0; z-index: 1; justify-content: center; gap: 10em; }
.cb .wm-word span { font-size: 150em; letter-spacing: 0.067em; }
.cb .wm-eyes { width: 135em; }
.cb .wm-tag { font-size: 18em; letter-spacing: 0.44em; margin-top: 4em; }

/* ---------- reveal stage ---------- */
.stage { position: relative; align-self: center; touch-action: none; user-select: none; -webkit-user-select: none; }
.stage .face, .stage .back { position: absolute; left: 0; top: 0; }
.stage .back { z-index: 2; transition: transform .35s cubic-bezier(.2,.8,.2,1); will-change: transform; }
.stage.dragging .back { transition: none; }
.swipe-hint { display: flex; flex-direction: column; align-items: center; gap: 4px; font-family: 'Bungee', sans-serif; font-size: 13px; letter-spacing: 2px; color: var(--muted); }
.swipe-hint svg { animation: nudge 1.6s ease-in-out infinite; }
@keyframes nudge { 0%, 100% { transform: translateY(4px); opacity: .6; } 50% { transform: translateY(-4px); opacity: 1; } }
.power { transition: filter .2s ease, opacity .2s ease; }
.power.hidden { filter: blur(9px); opacity: 0.35; }

/* ---------- overlays ---------- */
.overlay { position: fixed; inset: 0; z-index: 50; background: #08070c; display: flex; flex-direction: column; padding: calc(20px + var(--safe-t)) 16px calc(20px + var(--safe-b)); overflow-y: auto; }
.overlay > .inner { max-width: 520px; width: 100%; margin: auto; display: flex; flex-direction: column; gap: 16px; }
.out-banner { background: rgba(255,77,99,0.14); border: 2px solid var(--red); border-radius: 16px; padding: 12px 14px; color: #ffb3bd; }
.toast { position: fixed; left: 50%; bottom: calc(24px + var(--safe-b)); transform: translateX(-50%); background: #2a2338; border: 2px solid var(--line); padding: 12px 18px; border-radius: 14px; z-index: 60; font-weight: 800; max-width: 90vw; }

.winner { border-radius: 22px; padding: 20px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; background: linear-gradient(160deg, #3b2464, #1a0f2e); border: 2px solid var(--purple); }
.winner img { height: 170px; }

@media (prefers-reduced-motion: reduce) { .swipe-hint svg { animation: none; } .stage .back { transition: none; } }