:root,[data-time=night]{--bg: #121829;--bg-glow: #1f2a4a;--panel: #1b2338;--ink: #eef0f7;--muted: #98a2bf;--line: #2c3757;--accent: #f2c14e;--on-accent: #121829;--blood: #e0574a;--pick: #3a2f1b;--village-art: url(/wolf/village-night.jpg)}[data-time=day]{--bg: #f4ecdc;--bg-glow: #fff8e6;--panel: #fffaf0;--ink: #2b2418;--muted: #7d7058;--line: #e3d6bb;--accent: #c7861d;--on-accent: #fffaf0;--blood: #b8352b;--pick: #f6e3bd;--village-art: url(/wolf/village-day.webp)}*{box-sizing:border-box}body{margin:0;min-height:100dvh;background:radial-gradient(circle at 80% 0,var(--bg-glow),transparent 55%) var(--bg);color:var(--ink);font-family:Sarabun,system-ui,sans-serif;font-synthesis:none;transition:background-color .8s,color .8s}button,input{font:inherit;color:inherit}button{cursor:pointer;-webkit-tap-highlight-color:transparent}:focus-visible{outline:3px solid var(--accent);outline-offset:3px}a{color:inherit;text-decoration:none}[hidden]{display:none!important}h1,h2,.room-code{font-family:Taviraj,serif}h2{margin:0;font-size:28px;line-height:1.2}.topbar{display:flex;justify-content:space-between;max-width:480px;margin:0 auto;padding:14px 16px;font-size:14px;color:var(--muted)}.topbar b{color:var(--ink);letter-spacing:.1em}main{max-width:480px;margin:0 auto;padding:0 16px 48px}section{display:grid;gap:14px}.label{margin:0;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--muted)}.hint{margin:0;text-align:center;font-size:14px;color:var(--muted)}.small{font-size:14px;color:var(--muted)}.hero{padding:28px 4px 8px}.hero--cover{padding:0;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:var(--panel);box-shadow:0 16px 32px -24px #070b16}.cover-art{display:block;width:100%;height:auto;aspect-ratio:2.1;object-fit:cover;object-position:center 10%;border-bottom:1px solid var(--line)}.hero-copy{padding:16px clamp(14px,4vw,24px) 20px;background:linear-gradient(145deg,var(--bg-glow),var(--panel))}.hero-copy .label{color:var(--accent)}.hero h1{margin:4px 0 6px;font-size:clamp(34px,10.5vw,56px);font-weight:800;line-height:1.22}.lead{max-width:42ch;margin:0;font-size:17px;line-height:1.6;text-wrap:pretty}.card{display:grid;gap:12px;padding:18px;border:1px solid var(--line);border-radius:16px;background:var(--panel)}.card p{margin:0}label{display:grid;gap:6px;font-size:15px;font-weight:600}input{width:100%;padding:12px 14px;border:1.5px solid var(--line);border-radius:10px;background:var(--bg);font-size:17px}#code{font-size:22px;letter-spacing:.3em;text-transform:uppercase}.btn{display:block;width:100%;padding:14px 18px;border:0;border-radius:12px;background:var(--accent);color:var(--on-accent);font-size:17px;font-weight:700;transition:transform .15s,opacity .15s}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn--ghost{border:1.5px solid var(--line);background:transparent;color:var(--ink)}.link{justify-self:center;padding:8px;border:0;background:none;color:var(--muted);font-size:15px;text-decoration:underline}.or{margin:0;text-align:center;font-size:14px;color:var(--muted)}.error{margin:0;color:var(--blood);font-size:15px}.rules summary{font-weight:700;cursor:pointer}.rules ol{display:grid;gap:8px;margin:0;padding-left:20px;line-height:1.6}.invite{justify-items:center;text-align:center}.room-code{margin:0;padding-left:.2em;font-size:54px;font-weight:800;line-height:1;letter-spacing:.2em}.qr svg{display:block;width:180px;height:180px;border-radius:8px}.list{display:grid;margin:0;padding:0;list-style:none}.list li{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 2px;border-bottom:1px solid var(--line);font-size:17px}.list li:last-child{border-bottom:0}.list em{font-size:14px;font-style:normal;color:var(--muted)}.list .out{color:var(--muted)}.badge,.tag{padding:2px 8px;border-radius:99px;font-size:12px;font-weight:700}.badge{background:var(--accent);color:var(--on-accent)}.tag{border:1px solid var(--line);color:var(--muted)}.kick{width:36px;height:36px;margin-left:auto;border:0;border-radius:50%;background:transparent;color:var(--muted)}.list--pick{gap:8px}.list--pick li{padding:0;border:0}.list--pick button{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;width:100%;padding:13px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--panel);font-size:17px;text-align:left}.list--pick button:disabled{opacity:.45;cursor:not-allowed}.list--pick .picked{border-color:var(--accent);background:var(--pick);box-shadow:inset 0 0 0 1.5px var(--accent)}.list--pick .tag{margin-left:auto}.turn-heading:before,.verdict:before{content:"";display:block;height:clamp(76px,23vw,108px);margin-bottom:12px;border:1px solid var(--line);border-radius:12px;background:var(--panel) var(--village-art) center 34% / cover no-repeat}.news{margin:4px 0 0;font-size:20px;line-height:1.5}.envelope{border:1px solid var(--line);border-radius:16px;background:var(--panel);overflow:hidden}.envelope-flap{width:100%;padding:28px 16px;border:0;background:repeating-linear-gradient(-45deg,transparent 0 14px,color-mix(in srgb,var(--accent) 7%,transparent) 14px 28px);font-size:18px;font-weight:700}.envelope-flap[aria-expanded=true]{padding-block:14px}.envelope-body{display:grid;gap:10px;padding:10px 18px 20px}.envelope-body p{margin:0;line-height:1.55}.role-heading{display:flex;align-items:center;gap:12px}.role-portrait{display:block;flex:none;width:76px;height:76px;border:1px solid var(--line);border-radius:12px;background:var(--bg);object-fit:cover}.role-name{margin-top:2px;font-size:clamp(28px,9vw,36px);font-weight:800;line-height:1.1}.role-name--wolf{color:var(--blood)}.prompt{margin-top:6px!important;font-size:18px;font-weight:700}.seen{margin:0;padding-left:18px;font-size:15px;line-height:1.7}.ghost{text-align:center;border-style:dashed}.verdict{padding:0 0 8px}.verdict h2{margin:4px 0 8px;font-size:46px;font-weight:800}.verdict p{margin:0;font-size:17px}.timeline{display:grid;gap:6px;margin:0;padding-left:20px;line-height:1.55}.host-only{display:grid;gap:6px}.toast{position:fixed;bottom:24px;left:50%;max-width:calc(100% - 32px);margin:0;padding:12px 18px;border-radius:12px;background:var(--ink);color:var(--bg);font-size:15px;transform:translate(-50%)}@media(min-width:800px){body:has([data-screen=home]:not([hidden]))>:is(main,.topbar){max-width:960px}[data-screen=home]{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);grid-template-rows:auto 1fr;gap:14px 24px;align-items:start;padding-top:16px}.hero--cover{grid-row:span 2}.cover-art{aspect-ratio:1.85}}