:root{--build-id:6;--ink:#0a0c14;--ink2:#11141f;--panel:#161a28;--panel2:#1c2132;--moon:#e8e2cf;--moon-dim:#b9b6a6;--silver:#9aa6bd;--gold:#d9a441;--gold-soft:#f0cd84;--blood:#a3242a;--blood-bright:#d4474d;--line:rgba(154,166,189,.16);--line-soft:rgba(154,166,189,.08)}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}body{font-family:IBM Plex Sans Thai,sans-serif;background:radial-gradient(circle at 78% 12%,rgba(217,164,65,.1),transparent 38%),radial-gradient(circle at 15% 85%,rgba(163,36,42,.1),transparent 42%),linear-gradient(180deg,#070810 0%,var(--ink) 40%,var(--ink2) 100%);background-attachment:fixed;color:var(--moon-dim);line-height:1.7;min-height:100vh;min-height:100dvh;overflow-x:hidden;-webkit-font-smoothing:antialiased}body:before{content:"";position:fixed;top:0;right:0;bottom:0;left:0;z-index:0;pointer-events:none;opacity:.5;background-image:radial-gradient(1px 1px at 12% 22%,rgba(232,226,207,.7),transparent),radial-gradient(1px 1px at 67% 14%,rgba(232,226,207,.5),transparent),radial-gradient(1px 1px at 38% 58%,rgba(232,226,207,.4),transparent),radial-gradient(1px 1px at 88% 71%,rgba(232,226,207,.5),transparent),radial-gradient(1px 1px at 52% 88%,rgba(232,226,207,.4),transparent),radial-gradient(1px 1px at 24% 78%,rgba(232,226,207,.35),transparent),radial-gradient(1.5px 1.5px at 80% 40%,rgba(232,226,207,.6),transparent)}.wrap{position:relative;z-index:1;max-width:880px;margin:0 auto;padding:0 max(18px,env(safe-area-inset-left)) calc(70px + env(safe-area-inset-bottom))}header.hero{text-align:center;padding:56px 0 34px;position:relative}.moon{width:104px;height:104px;border-radius:50%;margin:0 auto 22px;background:radial-gradient(circle at 38% 35%,#fbf6e3,#e8e2cf 45%,#c9c3ac 72%,#9c977f);box-shadow:0 0 60px 12px #e8e2cf38,inset -14px -10px 26px #00000057;position:relative}.moon:after{content:"";position:absolute;top:0;right:0;bottom:0;left:0;border-radius:50%;background:radial-gradient(6px 6px at 60% 38%,rgba(0,0,0,.12),transparent),radial-gradient(9px 9px at 40% 62%,rgba(0,0,0,.1),transparent),radial-gradient(5px 5px at 70% 70%,rgba(0,0,0,.1),transparent)}.kicker{font-family:IBM Plex Sans Thai;letter-spacing:.32em;font-size:.7rem;font-weight:500;color:var(--gold);text-transform:uppercase;margin-bottom:14px}h1{font-family:Charm,cursive;font-weight:700;color:var(--moon);font-size:clamp(2.7rem,12vw,5.4rem);line-height:.95;text-shadow:0 2px 30px rgba(232,226,207,.18)}.hero .sub{font-family:Trirong,serif;font-style:italic;color:var(--silver);font-size:clamp(.95rem,4vw,1.25rem);margin-top:10px}section{margin-top:48px}.sec-head{display:flex;align-items:center;gap:14px;margin-bottom:22px}.sec-head .num{font-family:Trirong,serif;font-weight:800;font-size:1rem;color:var(--ink);background:var(--gold);min-width:34px;height:34px;border-radius:50%;display:grid;place-items:center;flex:none;box-shadow:0 0 18px #d9a44159}.sec-head h2{font-family:Trirong,serif;font-weight:600;color:var(--moon);font-size:clamp(1.4rem,6vw,2rem);line-height:1.15}.sec-head .line{flex:1;height:1px;background:linear-gradient(90deg,var(--line),transparent)}.lead{color:var(--moon-dim);margin-bottom:22px;font-size:1rem}.picker{display:grid;grid-template-columns:repeat(4,1fr);gap:9px;margin-bottom:18px}@media (min-width:520px){.picker{display:flex;flex-wrap:wrap;justify-content:center}}.pbtn{font-family:Trirong,serif;font-weight:600;font-size:1.15rem;color:var(--silver);background:var(--panel);border:1px solid var(--line);border-radius:14px;height:58px;cursor:pointer;transition:all .25s ease;position:relative;display:grid;place-items:center}@media (min-width:520px){.pbtn{width:58px}}.pbtn span{font-family:IBM Plex Sans Thai;font-size:.56rem;font-weight:400;letter-spacing:.08em;color:var(--moon-dim);position:absolute;bottom:6px}.pbtn:active{transform:scale(.95)}.pbtn:hover{border-color:var(--gold);color:var(--moon)}.pbtn.active{background:linear-gradient(160deg,var(--gold),#b07d1f);color:var(--ink);border-color:var(--gold-soft);box-shadow:0 8px 26px #d9a44152}.pbtn.active span{color:#0a0c14b3}.controls{display:flex;gap:11px;justify-content:center;flex-wrap:wrap;margin-bottom:24px}.ctrl{font-family:IBM Plex Sans Thai;font-weight:600;font-size:.98rem;border-radius:14px;padding:14px 22px;cursor:pointer;transition:all .2s;border:1px solid var(--line);display:inline-flex;align-items:center;justify-content:center;gap:9px;flex:1 1 auto;min-height:52px}@media (min-width:520px){.ctrl{flex:0 0 auto}}.ctrl.dice{background:linear-gradient(150deg,var(--blood),#7d1a1f);color:var(--moon);border-color:#d4474d66;box-shadow:0 8px 24px #a3242a47}.ctrl.dice:active{transform:scale(.97)}.ctrl.dice .d{display:inline-block;font-size:1.15rem}.ctrl.dice.rolling .d{animation:spin .5s ease}@keyframes spin{0%{transform:rotate(0) scale(1)}50%{transform:rotate(200deg) scale(1.3)}to{transform:rotate(360deg) scale(1)}}.ctrl.ghost{background:var(--panel);color:var(--silver)}.ctrl.ghost:hover{border-color:var(--gold);color:var(--moon)}.setup{background:linear-gradient(165deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:20px;padding:22px;animation:rise .45s ease both;box-shadow:0 24px 60px #00000073}@media (min-width:520px){.setup{padding:28px}}@keyframes rise{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}.setup-top{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;border-bottom:1px solid var(--line-soft);padding-bottom:16px;margin-bottom:20px}.setup-top .count{font-family:Charm,cursive;font-weight:700;font-size:2.2rem;color:var(--moon);line-height:1}.setup-top .count b{color:var(--gold)}.setup-top .tag{font-family:Trirong,serif;font-style:italic;font-size:.9rem;color:var(--gold-soft);border:1px solid var(--line);border-radius:30px;padding:5px 16px}.tally{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:18px}.tally .chip{font-size:.82rem;border-radius:9px;padding:6px 13px;border:1px solid var(--line-soft)}.tally .chip.evil{background:#a3242a29;color:var(--blood-bright);border-color:#a3242a59}.tally .chip.good{background:#9aa6bd1a;color:var(--silver)}.tally .chip.bal{background:#d9a4411a;color:var(--gold-soft);border-color:#d9a4414d}.roles{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}.role-pill{background:var(--panel2);border:1px solid var(--line-soft);border-radius:13px;padding:13px 15px;display:flex;align-items:center;gap:11px;animation:pop .35s ease both}@keyframes pop{0%{opacity:0;transform:scale(.92)}to{opacity:1;transform:none}}.role-pill .ic{font-size:1.5rem;line-height:1;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}.role-pill .meta{display:flex;flex-direction:column}.role-pill .meta .nm{color:var(--moon);font-weight:500;font-size:.95rem}.role-pill .meta .qt{font-size:.78rem;color:var(--silver)}.role-pill.wolf{border-color:#a3242a66;background:linear-gradient(150deg,rgba(163,36,42,.18),var(--panel2))}.role-pill.wolf .meta .nm{color:var(--blood-bright)}.tip{margin-top:20px;background:#d9a44112;border-left:3px solid var(--gold);border-radius:0 12px 12px 0;padding:13px 17px;font-size:.92rem;color:var(--moon-dim)}.tip b{color:var(--gold-soft);font-weight:600}.glossary{display:grid;grid-template-columns:1fr;gap:12px}@media (min-width:620px){.glossary{grid-template-columns:1fr 1fr}}.gcard{background:linear-gradient(160deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:16px;padding:16px 18px;transition:transform .25s,border-color .25s}.gcard:hover{transform:translateY(-3px);border-color:var(--gold)}.gcard.wolf{border-color:#a3242a59}.gcard.wolf:hover{border-color:var(--blood-bright)}.gcard .gh{display:flex;align-items:center;gap:11px;margin-bottom:7px}.gcard .gh .gi{font-size:1.7rem;line-height:1}.gcard .gh .gn{font-family:Trirong,serif;font-weight:600;font-size:1.1rem;color:var(--moon)}.gcard .gh .team{margin-left:auto;font-size:.64rem;letter-spacing:.1em;padding:3px 9px;border-radius:20px;border:1px solid var(--line);color:var(--silver);text-transform:uppercase;white-space:nowrap}.gcard.wolf .gh .gn{color:var(--blood-bright)}.gcard.wolf .gh .team{color:var(--blood-bright);border-color:#a3242a66}.gcard .gd{font-size:.9rem;color:var(--moon-dim)}.mc-intro{background:linear-gradient(150deg,rgba(163,36,42,.12),var(--panel));border:1px solid rgba(163,36,42,.28);border-radius:18px;padding:20px 22px;margin-bottom:22px}.mc-intro p{color:var(--moon-dim)}.mc-intro b{color:var(--gold-soft)}.scene{background:linear-gradient(165deg,var(--panel),var(--ink2));border:1px solid var(--line);border-radius:18px;margin-bottom:14px;overflow:hidden}.scene-head{display:flex;align-items:center;gap:13px;padding:15px 18px;cursor:pointer;background:#ffffff04;transition:background .2s;-webkit-user-select:none;user-select:none}.scene-head:hover{background:#d9a4410f}.scene-head .badge{font-size:1.3rem;width:42px;height:42px;border-radius:11px;display:grid;place-items:center;flex:none;background:var(--panel2);border:1px solid var(--line)}.scene-head .tt{flex:1;min-width:0}.scene-head .tt .lbl{font-family:IBM Plex Sans Thai;font-size:.64rem;letter-spacing:.18em;color:var(--gold);text-transform:uppercase}.scene-head .tt .nm{font-family:Trirong,serif;font-weight:600;color:var(--moon);font-size:1.12rem;line-height:1.2}.scene-head .arr{color:var(--silver);transition:transform .3s;font-size:.85rem;flex:none}.scene.open .scene-head .arr{transform:rotate(90deg)}.scene-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s ease}.scene.open .scene-body{grid-template-rows:1fr}.scene-body>.scene-inner{overflow:hidden;min-height:0}.scene-inner{padding:0 18px}.scene.open .scene-inner{padding:4px 18px 20px}.scene-inner .dir{font-size:.85rem;color:var(--silver);font-style:italic;margin:14px 0 9px}.quote{font-family:Trirong,serif;font-style:italic;color:var(--moon);font-size:1.02rem;line-height:1.65;border-left:3px solid var(--blood);padding:6px 0 6px 16px;margin:4px 0}.quote.gold{border-left-color:var(--gold)}.hype{list-style:none;display:grid;gap:12px}.hype li{background:var(--panel);border:1px solid var(--line-soft);border-radius:14px;padding:15px 18px 15px 16px;display:flex;gap:14px;align-items:flex-start;border-left:3px solid var(--gold)}.hype li .hn{font-family:Trirong,serif;font-weight:800;color:var(--gold);font-size:1.3rem;flex:none;line-height:1.2}.hype li .ht{font-size:.95rem;color:var(--moon-dim)}.hype li .ht b{color:var(--moon);font-weight:600}footer{text-align:center;margin-top:56px;padding-top:26px;border-top:1px solid var(--line-soft)}footer .howl{font-family:Charm,cursive;font-size:1.5rem;color:var(--silver)}footer .fn{font-size:.8rem;color:var(--silver);margin-top:6px;letter-spacing:.04em}@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}