:root{--night: #2b3a67;--cream: #f6ebdd;--wood: #e9d3b4;--ink: #3b2f2a;--accent: #f2a49b;font-family:ui-rounded,SF Pro Rounded,system-ui,-apple-system,sans-serif;color:var(--ink);-webkit-tap-highlight-color:transparent}*{box-sizing:border-box}html,body,#root{margin:0;height:100%}body{background:var(--night);overscroll-behavior:none}button{font:inherit}.join{min-height:100%;display:flex;flex-direction:column;gap:18px;justify-content:center;max-width:420px;margin:0 auto;padding:max(24px,var(--sa-t, env(safe-area-inset-top))) 16px max(24px,var(--sa-b, env(safe-area-inset-bottom)));color:var(--cream)}.join h1{font-size:26px;margin:0 0 8px;text-align:center}.join-field{display:flex;flex-direction:column;gap:6px;font-size:15px}.join-field input{font:inherit;font-size:18px;padding:12px 14px;border-radius:14px;border:none;background:var(--cream);color:var(--ink)}.join-colors{border:none;padding:0;margin:0;display:flex;gap:12px;flex-wrap:wrap}.join-colors legend{font-size:15px;margin-bottom:8px}.swatch{width:44px;height:44px;border-radius:50%;border:3px solid transparent;cursor:pointer}.swatch.selected{border-color:var(--cream);box-shadow:0 0 0 3px var(--accent)}.join-enter{font-size:20px;font-weight:700;padding:14px;border:none;border-radius:18px;background:var(--accent);color:var(--ink);cursor:pointer}.join-enter:disabled{opacity:.6}.join-note{text-align:center;font-size:15px;margin:0;color:var(--cream)}.join-note.link{background:none;border:none;text-decoration:underline;cursor:pointer}.game{position:fixed;inset:0;touch-action:none;user-select:none;-webkit-user-select:none;--sa-t: env(safe-area-inset-top);--sa-r: env(safe-area-inset-right);--sa-b: env(safe-area-inset-bottom);--sa-l: env(safe-area-inset-left)}@media(orientation:portrait){.game.turned{inset:0 auto auto 0;width:100vh;width:100dvh;height:100vw;transform-origin:top left;transform:rotate(90deg) translateY(-100%);--sa-t: env(safe-area-inset-right);--sa-r: env(safe-area-inset-bottom);--sa-b: env(safe-area-inset-left);--sa-l: env(safe-area-inset-top)}}.hud{position:absolute;top:max(10px,var(--sa-t, env(safe-area-inset-top)));left:12px;right:12px;display:flex;flex-wrap:wrap;gap:8px;align-items:center;pointer-events:none}.chip{pointer-events:auto;background:#f6ebddeb;color:var(--ink);border-radius:999px;padding:6px 12px;font-size:13px;border:none}.chip.button{cursor:pointer;margin-left:auto}.voice-failed{background:#f7c4bd}.voice-no-mic{background:#f6dfa4}.hud-hint{width:100%;font-size:12px;color:#f6ebddcc}@media(pointer:coarse){.hud-hint{display:none}}.joystick{position:absolute;left:max(24px,var(--sa-l, env(safe-area-inset-left)));bottom:max(28px,var(--sa-b, env(safe-area-inset-bottom)));width:144px;height:144px;border-radius:50%;background:#f6ebdd40;border:2px solid rgba(246,235,221,.5);display:grid;place-items:center;touch-action:none}.joystick-knob{width:62px;height:62px;border-radius:50%;background:#f6ebdde6}@media(pointer:fine){.joystick{display:none}}.diag{position:fixed;inset:0;z-index:50;background:#141a3299;display:flex;align-items:flex-end;justify-content:center}.diag-card{width:100%;max-width:480px;max-height:92%;overflow-y:auto;background:var(--cream);color:var(--ink);border-radius:22px 22px 0 0;padding:16px 16px max(20px,var(--sa-b, env(safe-area-inset-bottom)));display:flex;flex-direction:column;gap:12px}.diag-card header{display:flex;align-items:center;justify-content:space-between}.diag-card h2{margin:0;font-size:20px}.diag-card .chip{background:#e9d3b4}.diag-card .join-note{color:var(--ink)}.diag-vpn{display:flex;gap:10px;align-items:center;font-size:16px}.diag-vpn input{width:22px;height:22px}.diag-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}.diag-rows li{display:grid;grid-template-columns:24px 1fr auto;gap:8px;font-size:15px}.diag-ms{color:#7a6a60;font-variant-numeric:tabular-nums}.diag-text{width:100%;font-size:12px;border-radius:10px;padding:8px}.chip.unmute{background:#f6dfa4;font-weight:700;margin-left:0}.join-form{display:flex;flex-direction:column;gap:14px}.join-field small{font-size:12px;opacity:.75}.form-error{margin:0;padding:10px 12px;border-radius:12px;background:#f7c4bd;color:var(--ink);font-size:14px}.tabs{display:flex;background:#f6ebdd26;border-radius:14px;padding:4px}.tab{flex:1;padding:10px;border:none;border-radius:10px;background:transparent;color:var(--cream);font-weight:600;cursor:pointer}.tab.on{background:var(--cream);color:var(--ink)}.social{padding:12px;border-radius:14px;border:none;font-size:16px;font-weight:600;cursor:pointer}.social.google{background:#fff;color:#3c4043}.social.facebook{background:#1877f2;color:#fff}.lobby{justify-content:flex-start}.lobby-head{display:flex;align-items:center;justify-content:space-between;gap:8px}.lobby-head h1{text-align:left;font-size:22px;margin:0}.lobby-actions{display:flex;gap:6px}.row{display:flex;gap:8px}.row input{flex:1;min-width:0;text-transform:uppercase;letter-spacing:2px}.join-enter.small{padding:10px 18px;font-size:16px}.lobby-list{display:flex;flex-direction:column;gap:10px}.room-card{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:14px 16px;border-radius:16px;border:none;cursor:pointer;background:#f6ebddf2;color:var(--ink);text-align:left}.room-name{font-size:17px;font-weight:700}.room-meta{font-size:13px;opacity:.75}.lobby-create{background:#f6ebdd1f;padding:14px;border-radius:16px}.toast{position:absolute;left:50%;bottom:max(170px,var(--sa-b, env(safe-area-inset-bottom)));transform:translate(-50%);max-width:calc(100% - 32px);margin:0;padding:10px 14px;border-radius:14px;background:#f6ebddf2;color:var(--ink);font-size:14px;word-break:break-all}.chip.invite{background:#b8d99a;font-weight:700}.temp-password{font-size:28px;font-weight:800;letter-spacing:3px;margin:4px 0;color:var(--cream)}.admin-search{font:inherit;font-size:16px;padding:10px 12px;border-radius:12px;border:none}.lobby h2{font-size:17px;margin:8px 0 0}.char-preview{height:320px;border-radius:20px;background:radial-gradient(circle at 50% 40%,#3a4a80,#24305a);touch-action:pan-y}.pattern-row{display:flex;background:#f6ebdd26;border-radius:14px;padding:4px}.view-toggle{position:absolute;right:max(16px,var(--sa-r, env(safe-area-inset-right)));bottom:max(36px,var(--sa-b, env(safe-area-inset-bottom)));padding:12px 16px;border-radius:999px;border:none;background:#f6ebdde6;color:var(--ink);font-weight:700;font-size:15px}.fps-hint{position:absolute;top:50%;left:0;right:0;text-align:center;transform:translateY(60px);pointer-events:none}@media(pointer:coarse){.fps-hint{display:none}}.vignette{position:absolute;inset:0;pointer-events:none;box-shadow:inset 0 0 120px 40px #dc2828e6}.vignette:after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 90px 20px #ff3c3c99;animation:pulse 1s ease-in-out infinite}@keyframes pulse{50%{opacity:0}}.pointed-count{position:absolute;top:64px;left:50%;transform:translate(-50%);margin:0;padding:6px 12px;border-radius:999px;background:#a01e1ed9;color:#fff;font-weight:700;font-size:14px;pointer-events:none}.actions{position:absolute;right:max(16px,var(--sa-r, env(safe-area-inset-right)));bottom:max(96px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 60px));display:flex;flex-direction:column;align-items:flex-end;gap:8px}.act{padding:10px 14px;border-radius:999px;border:none;background:#f6ebdde6;color:var(--ink);font-weight:700;font-size:15px}.act.on{background:#f6dfa4;box-shadow:0 0 0 2px #e8a23a}.pick-hint{position:absolute;top:100px;left:50%;transform:translate(-50%);margin:0;padding:8px 14px;border-radius:14px;background:#2b3a67d9;color:var(--cream);pointer-events:none}.gesture-panel{position:absolute;left:50%;top:96px;transform:translate(-50%);z-index:5;display:grid;grid-template-columns:repeat(3,1fr);gap:8px;padding:12px;border-radius:20px;background:#f6ebddf2;width:min(360px,calc(100% - 32px))}.gesture-btn{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;border-radius:14px;border:none;background:#fff;color:var(--ink);font-size:12px;font-weight:600}.gesture-btn span{font-size:24px}.chat-box{position:absolute;left:50%;top:96px;transform:translate(-50%);z-index:5;width:min(420px,calc(100% - 32px))}.chat-box input{width:100%;font:inherit;font-size:16px;padding:12px 16px;border-radius:999px;border:none;background:#fff;color:var(--ink)}.gesture-close{position:absolute;top:-12px;right:-12px;width:32px;height:32px;border-radius:50%;border:none;background:var(--night);color:var(--cream);font-size:20px;line-height:1}.chat-box input{-webkit-user-select:text;user-select:text}.table-pick{border:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(5,1fr);gap:6px}.table-pick legend{font-size:15px;margin-bottom:8px}.table-opt{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;border:2px solid transparent;background:#f6ebdde6;color:var(--ink);font-size:12px;cursor:pointer}.table-opt.on{border-color:var(--accent);background:#fff;font-weight:700}.ww-lobby{position:absolute;left:50%;bottom:max(24px,var(--sa-b, env(safe-area-inset-bottom)));transform:translate(-50%);display:flex;flex-direction:column;align-items:center;gap:6px;pointer-events:none}.ww-lobby button{pointer-events:auto;font-size:17px}.ww-hint{margin:0;padding:6px 12px;border-radius:12px;background:#2b3a67cc;color:var(--cream);font-size:13px;text-align:center}.ww-top{position:absolute;top:max(52px,calc(var(--sa-t, env(safe-area-inset-top)) + 44px));left:50%;transform:translate(-50%);display:flex;gap:8px;align-items:center;padding:6px 10px;border-radius:999px;background:#f6ebddeb;color:var(--ink);white-space:nowrap;z-index:3}.ww-top.night{background:#1e264ceb;color:var(--cream)}.ww-top .chip{background:#f6dfa4}.ww-phase{font-weight:800;font-size:15px}.ww-timer{font-variant-numeric:tabular-nums;font-weight:700;padding:2px 8px;border-radius:999px;background:#f2a49be6;color:var(--ink)}.ww-lines{position:absolute;top:max(100px,calc(var(--sa-t, env(safe-area-inset-top)) + 92px));left:50%;transform:translate(-50%);width:min(520px,calc(100% - 32px));list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px;pointer-events:none;z-index:2}.ww-lines li{padding:6px 12px;border-radius:12px;background:#f6ebddf0;color:var(--ink);font-size:14px;font-weight:600;text-align:center;animation:ww-in .4s ease-out}.ww-lines li.private{background:#e3cdf2;box-shadow:0 0 0 2px #9a6cc0}@keyframes ww-in{0%{opacity:0;transform:translateY(-6px)}}.ww-prompt{position:absolute;left:50%;bottom:max(24px,var(--sa-b, env(safe-area-inset-bottom)));transform:translate(-50%);width:min(440px,calc(100% - 32px));max-height:45%;overflow-y:auto;display:flex;flex-direction:column;gap:8px;padding:12px;border-radius:18px;background:#f6ebddf5;color:var(--ink);z-index:4}.ww-options{display:flex;flex-wrap:wrap;gap:6px}.ww-opt{padding:8px 12px;border-radius:999px;border:2px solid transparent;background:#fff;color:var(--ink);font-weight:600;cursor:pointer}.ww-opt.on{border-color:#c2493a;background:#f7c4bd}.ww-row{display:flex;gap:8px;align-items:center;justify-content:space-between;flex-wrap:wrap}.ww-small{font-size:12px;opacity:.8}.ww-picks{margin:0;padding-left:16px}.ww-bottom{position:absolute;left:50%;bottom:max(24px,var(--sa-b, env(safe-area-inset-bottom)));transform:translate(-50%);display:flex;gap:8px;align-items:center;z-index:3}.ww-bottom.column{flex-direction:column;width:min(420px,calc(100% - 32px))}.ww-tally{list-style:none;margin:0;padding:6px 10px;border-radius:12px;background:#f6ebddeb;font-size:13px;display:flex;flex-wrap:wrap;gap:4px 12px}.ww-stop{position:absolute;left:12px;bottom:max(170px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 150px))}.ww-setup .ww-roles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:6px}.ww-roles li{display:grid;grid-template-columns:1fr 30px 22px 30px;align-items:center;gap:4px;padding:6px 8px;border-radius:12px;background:#fff;font-size:14px}.ww-roles li.wolf{background:#f3d6d0}.ww-roles button{width:30px;height:30px;border-radius:50%;border:none;background:#e9d3b4;font-size:18px;line-height:1;cursor:pointer}.ww-count{text-align:center;font-weight:800;font-variant-numeric:tabular-nums}.ww-setup>*{flex-shrink:0}.ww-balance{position:relative;height:10px;margin:4px 0;border-radius:999px;background:linear-gradient(90deg,#c2493a,#e9d3b4 50%,#5f8a4a)}.ww-balance span{position:absolute;top:-4px;width:18px;height:18px;margin-left:-9px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px var(--ink)}.ww-range{display:flex;flex-direction:column;gap:4px;font-size:14px}.ww-range select{font:inherit;padding:6px;border-radius:10px}.ww-rules{display:flex;flex-direction:column;gap:8px}.ww-rules-toggle{align-self:flex-start}.ww-note{margin:0;padding:8px 10px;border-radius:12px;background:#f6dfa4;font-size:14px}.ww-card{width:min(340px,calc(100% - 32px));margin:auto;padding:18px;border-radius:24px;background:var(--cream);color:var(--ink);display:flex;flex-direction:column;gap:8px;text-align:center;border:6px solid #5f8a4a}.ww-card.wolves{border-color:#c2493a}.ww-card h2{margin:0;font-size:26px}.ww-card p{margin:0}.ww-team{font-weight:700;opacity:.8}.ww-card-img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:16px}.ww-card-art{width:100%;aspect-ratio:3 / 2;border-radius:16px;display:grid;place-items:center;font-size:72px;font-weight:800;color:#fff;background:radial-gradient(circle at 50% 40%,#8bb36e,#4e7a3a)}.ww-card-art.wolves{background:radial-gradient(circle at 50% 40%,#e07a6a,#8a2f25)}.ww-seen{margin:4px 0 0;padding-left:18px;text-align:left;font-size:14px}.diag:has(.ww-card){align-items:center}.ww-reveal{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}.ww-reveal li{display:flex;justify-content:space-between;padding:6px 10px;border-radius:10px;background:#fff}.ww-reveal li.dead{opacity:.6;text-decoration:line-through}.ww-log ul{margin:2px 0 6px;padding-left:18px;font-size:14px}.key{display:inline-block;min-width:18px;margin-right:6px;padding:0 4px;border-radius:5px;background:#ffffff8c;color:#8a817c;font:700 11px/18px ui-monospace,monospace;text-align:center;vertical-align:1px}@media(pointer:coarse){.key{display:none}}.use-btn{position:absolute;left:50%;bottom:max(150px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 130px));transform:translate(-50%);padding:10px 16px;border-radius:999px;border:1px solid rgba(255,255,255,.6);background:#f6f0e88c;color:var(--ink);font-weight:700;font-size:15px;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:3}.flash{position:absolute;left:50%;top:40%;transform:translate(-50%);margin:0;padding:8px 14px;border-radius:14px;background:#f6f0e8e0;color:var(--ink);font-weight:600;pointer-events:none;animation:flash-out 2.4s ease-in forwards;z-index:6}@keyframes flash-out{0%,60%{opacity:1}to{opacity:0}}.crosshair{position:absolute;left:50%;top:50%;width:8px;height:8px;margin:-4px 0 0 -4px;border-radius:50%;background:#ffffffbf;box-shadow:0 0 0 1px #00000059;pointer-events:none}@media(pointer:coarse){.crosshair{display:none}}.draw-screen{max-width:560px}.draw-frame{position:relative;width:100%;border-radius:18px;overflow:hidden;touch-action:none;box-shadow:inset 0 0 0 2px #fff3}.draw-frame.face{aspect-ratio:1;border-radius:50%}.draw-frame.shirt{aspect-ratio:2}.draw-frame canvas{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}.draw-guide{position:absolute;pointer-events:none;font-size:11px;color:#3b2f2a8c}.draw-guide.scarf{top:0;left:0;right:0;height:18%;display:grid;place-items:center;background:#3b2f2a1f;border-bottom:1px dashed rgba(59,47,42,.4)}.draw-guide.chest{top:50%;left:50%;transform:translate(-50%,-50%)}.draw-guide.back{top:50%;transform:translateY(-50%)}.draw-guide.back.left{left:6px}.draw-guide.back.right{right:6px}.draw-tools{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}.draw-tool{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;border-radius:12px;border:2px solid transparent;background:#f6ebddeb;color:var(--ink);font-size:11px;font-weight:600}.draw-tool span{font-size:20px}.draw-tool.on{border-color:var(--accent);background:#fff}.draw-colors{display:flex;flex-wrap:wrap;gap:8px}.draw-colors .swatch{width:34px;height:34px}.char-buttons{display:flex;gap:8px}.char-buttons button{flex:1}.opt-row{display:flex;flex-wrap:wrap;gap:6px}.opt-row .tab{flex:0 0 auto;padding:8px 10px;background:#f6ebdd26}.opt-row .tab.on{background:var(--cream)}.draw-frame.face{max-width:380px;margin:0 auto}.zoom-toggle{position:absolute;right:max(150px,calc(var(--sa-r, env(safe-area-inset-right)) + 134px));bottom:max(40px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 4px));padding:8px 12px;border-radius:999px;border:none;background:#f6ebddcc;color:var(--ink);font-weight:700;font-size:13px}.zoom-toggle.on{background:#f6dfa4}.tut{position:fixed;inset:0;z-index:40;pointer-events:none}.tut-ring{position:fixed;border-radius:18px;box-shadow:0 0 0 3px #f6dfa4,0 0 0 9999px #141a3273;transition:all .3s}.tut-bubble{position:fixed;transform:translate(-50%);width:min(300px,calc(100% - 32px));padding:12px 14px;border-radius:16px;background:var(--cream);color:var(--ink);pointer-events:auto;box-shadow:0 8px 24px #0000004d}.tut-bubble.down{transform:translate(-50%,-100%)}.tut-bubble.none{transform:translate(-50%,-50%)}.tut-bubble p{margin:4px 0 10px;font-size:15px;line-height:1.35}.tut-bubble.up:before,.tut-bubble.down:after{content:"";position:absolute;left:50%;margin-left:-8px;border:8px solid transparent}.tut-bubble.up:before{top:-16px;border-bottom-color:var(--cream)}.tut-bubble.down:after{bottom:-16px;border-top-color:var(--cream)}.tut-count{font-size:11px;opacity:.6}.ww-replace{position:absolute;left:12px;bottom:max(210px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 190px));display:flex;flex-direction:column;gap:6px;max-width:min(320px,calc(100% - 24px));z-index:4}.key-hint{position:absolute;left:50%;top:50%;margin-top:28px!important;transform:translate(-50%);margin:0;padding:4px 10px;border-radius:10px;background:#141a3273;color:#f0ece6d9;font-size:12px;white-space:nowrap;pointer-events:none}@media(pointer:coarse){.key-hint{display:none}}.ww-card-back{margin:auto;width:min(320px,calc(100% - 48px));padding:0;border:none;background:none;display:flex;flex-direction:column;align-items:center;gap:10px;cursor:pointer;animation:deal-in .5s ease-out}.ww-card-back img{width:100%;aspect-ratio:3 / 4;object-fit:cover;border-radius:22px;box-shadow:0 12px 32px #00000073}.ww-card-back span{color:var(--cream);font-weight:700}.diag:has(.ww-card-back){align-items:center}.ww-card.flip-in{animation:flip-in .45s ease-out}@keyframes deal-in{0%{transform:translateY(40px) rotate(-6deg);opacity:0}}@keyframes flip-in{0%{transform:perspective(800px) rotateY(90deg)}}@media(pointer:coarse){.zoom-toggle{right:max(132px,calc(var(--sa-r, env(safe-area-inset-right)) + 124px));padding:10px 12px}.zoom-toggle .label{display:none}.ww-lobby{bottom:max(186px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 186px))}.use-btn{bottom:max(236px,calc(var(--sa-b, env(safe-area-inset-bottom)) + 236px))}}