@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;600;700;800&family=Hanken+Grotesk:wght@400;500;700&family=Space+Grotesk:wght@500;700&display=swap";:root{--moonlight:#e8d9c4;--night-primary:#5932e6;--night-primary-text:#8b73f0;--blood-accent:#d32f2f;--forest-dark:#100d1e;--surface:#19162e;--surface-alt:#211e3b;--success-villager:#4caf50;--color-text-primary:#fff;--color-text-muted:#b5b3c4;--color-text-faint:#7f7c96;--color-background-surface:var(--surface);--color-error:#ff5252;--color-success:var(--success-villager);--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}*{box-sizing:border-box}:focus-visible{outline:2px solid var(--moonlight);outline-offset:3px}html,body,#root{height:100%;margin:0}body{background:var(--forest-dark);color:var(--color-text-primary);font-family:Hanken Grotesk,system-ui,-apple-system,sans-serif}h1,h2,h3,h4,h5,h6{font-family:Plus Jakarta Sans,sans-serif}button,input{font-family:inherit}a{color:inherit}a:focus-visible,button:focus-visible,input:focus-visible{outline:2.5px solid var(--moonlight);outline-offset:2px}.page{flex-direction:column;min-height:100%;display:flex}.page-content{flex-direction:column;flex:1;width:100%;max-width:480px;margin:0 auto;padding:24px;display:flex}.appbar{justify-content:space-between;align-items:center;padding:16px 24px;display:flex}.appbar h1{margin:0;font-size:18px}.card{background:var(--surface);border-radius:16px;margin-bottom:12px;padding:16px}.btn{cursor:pointer;background:var(--night-primary);color:#fff;border:none;border-radius:12px;justify-content:center;align-items:center;gap:8px;padding:12px 20px;font-size:15px;font-weight:600;transition:opacity .15s;display:inline-flex}.btn:disabled{opacity:.4;cursor:not-allowed}.btn-outline{border:1.5px solid var(--night-primary-text);color:var(--night-primary-text);background:0 0}.btn-destructive{background:var(--blood-accent)}.btn-block{width:100%}.field{flex-direction:column;gap:6px;margin-bottom:16px;display:flex}.field label{color:var(--color-text-muted);font-size:13px}.field input{background:var(--surface-alt);color:#fff;border:none;border-radius:10px;padding:12px 14px;font-size:15px}.field-error{color:var(--color-error);font-size:12px}.error-text{color:var(--color-error);text-align:center}.ingame-container{width:100%;max-width:100%}.ingame-content{flex-direction:column;gap:16px;width:100%;display:flex}.ingame-main-panel{flex-direction:column;min-height:340px;display:flex}.video-section{flex:1;min-height:0}.ingame-side-panel{border-top:1px solid #ffffff14;flex-direction:column;min-height:240px;display:flex}@media (width>=768px){.ingame-container{height:100%;overflow:hidden}.ingame-content{flex-direction:row;gap:24px;max-width:1200px;height:calc(100vh - 80px);margin:0 auto;padding:0 24px 24px;overflow:hidden}.ingame-main-panel{flex:6;gap:16px;height:100%;overflow:hidden}.ingame-side-panel{border-top:none;border-left:1px solid #ffffff14;flex:4;height:100%;padding-left:24px;overflow:hidden}}.glass-panel{-webkit-backdrop-filter:blur(20px);background:#19162e66;border:1px solid #e8d9c426}.moonlight-glow{box-shadow:0 0 20px #5932e666}.custom-scrollbar::-webkit-scrollbar{width:4px;height:4px}.custom-scrollbar::-webkit-scrollbar-track{background:0 0}.custom-scrollbar::-webkit-scrollbar-thumb{background:#c9beff33;border-radius:10px}.custom-scrollbar::-webkit-scrollbar-thumb:hover{background:#c9beff66}.split-layout{flex-direction:column;width:100%;min-height:100vh;display:flex}.split-left{background:radial-gradient(circle,#1b163d 0%,#100d1e 100%);display:none;position:relative;overflow:hidden}.split-right{flex:1;justify-content:center;align-items:center;padding:24px;display:flex}@media (width>=1024px){.split-layout{flex-direction:row}.split-left{border-right:1px solid #ffffff1a;flex-direction:column;flex:1.1;justify-content:center;align-items:center;display:flex}.split-right{flex:.9}.md-hidden{display:none}}.app-shell{flex-direction:column;width:100%;min-height:100vh;display:flex}.app-sidebar{border-width:0 0 1px;border-radius:0;flex-direction:row;align-items:center;gap:8px;padding:12px 16px;display:flex;overflow-x:auto}.app-sidebar-brand{color:var(--color-text-primary);white-space:nowrap;align-items:center;gap:8px;padding-right:12px;font-family:Plus Jakarta Sans,sans-serif;font-size:16px;font-weight:700;display:flex}.app-sidebar-nav{flex-direction:row;flex:1;gap:4px;display:flex}.app-sidebar-footer{flex-direction:row;gap:4px;display:flex}.app-sidebar-link{white-space:nowrap;color:var(--color-text-muted);cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:8px;padding:8px 12px;font-size:13px;font-weight:600;text-decoration:none;transition:background .15s,color .15s;display:flex}.app-sidebar-link:hover{color:var(--color-text-primary);background:#ffffff0f}.app-sidebar-link.active{color:var(--night-primary-text);background:#5932e626}.app-sidebar-logout:hover{color:var(--color-error)}.app-shell-body{flex-direction:column;flex:1;min-width:0;display:flex}.app-shell-topbar{justify-content:space-between;align-items:center;gap:12px;height:56px;padding:16px 24px;display:flex}.app-shell-topbar-actions{align-items:center;gap:12px;display:flex}.app-shell-topbar h1{color:var(--color-text-primary);margin:0;font-size:18px;font-weight:700}.app-shell-content{flex:1;min-width:0}@media (width>=900px){.app-shell{flex-direction:row}.app-sidebar{border-width:0 1px 0 0;flex-direction:column;flex-shrink:0;align-items:stretch;width:240px;height:100vh;padding:24px 16px;position:sticky;top:0;overflow-x:visible}.app-sidebar-brand{border-bottom:1px solid #ffffff1a;margin-bottom:12px;padding:0 8px 20px;font-size:18px}.app-sidebar-nav{flex-direction:column;gap:4px}.app-sidebar-footer{border-top:1px solid #ffffff1a;flex-direction:column;gap:4px;margin-top:auto;padding-top:12px}.app-shell-topbar{-webkit-backdrop-filter:blur(20px);z-index:10;background:#1411231a;border-bottom:1px solid #ffffff1a;height:64px;padding:16px 32px;position:sticky;top:0}}.player-avatar{text-align:center;flex-direction:column;align-items:center;display:flex}.player-avatar-circle-wrap{position:relative}.player-avatar-circle{background-color:var(--night-primary);color:#fff;background-position:50%;background-size:cover;border:1.5px solid #ffffff26;border-radius:50%;justify-content:center;align-items:center;font-weight:700;transition:opacity .25s;display:flex}.player-avatar-circle.speaking{border:3px solid #4ade80}.player-avatar-dead{color:#ff5252e6;justify-content:center;align-items:center;display:flex;position:absolute;inset:0}.player-avatar-host{color:#fbbf24;font-size:14px;position:absolute;top:-4px;right:-4px}.player-avatar-ready{color:#fff;background:#22c55e;border-radius:50%;justify-content:center;align-items:center;width:16px;height:16px;font-size:10px;display:flex;position:absolute;bottom:-2px;right:-2px}.player-avatar-name{color:#ffffffb3;white-space:nowrap;text-overflow:ellipsis;max-width:100%;margin-top:6px;font-size:12px;overflow:hidden}.player-avatar-not-ready{color:#ffffff59;font-size:10px}.role-card-grid{grid-template-columns:repeat(auto-fit,minmax(88px,1fr));gap:16px;max-width:600px;margin:0 auto;padding:24px;display:grid}.role-card{aspect-ratio:.7;perspective:1000px;cursor:default;background:0 0;border:none;padding:0;transition:transform .2s}.role-card.mine{cursor:pointer}.role-card.mine:hover{transform:translateY(-4px)}.role-card-inner{width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.175,.885,.32,1.275);position:relative}.role-card.flipped .role-card-inner{transform:rotateY(180deg)}.role-card-face{backface-visibility:hidden;color:#fff;text-align:center;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:8px;padding:12px;display:flex;position:absolute;inset:0}.role-card-back{background:linear-gradient(135deg,#19162e,#211e3b);border:1.5px solid #e8d9c426}.role-card.mine .role-card-back{border:2px solid var(--moonlight);box-shadow:0 0 15px #e8d9c440}.role-card-front{background:linear-gradient(135deg,#1e1b4b,#312e81);border:1.5px solid #ffffff26;transform:rotateY(180deg)}.role-card-werewolf{box-shadow:0 0 20px #d32f2f80;border:2px solid var(--blood-accent)!important;background:linear-gradient(135deg,#7f1d1d,#b91c1c)!important}.role-card-seer{box-shadow:0 0 20px #8b73f080;border:2px solid var(--night-primary-text)!important;background:linear-gradient(135deg,#3b0764,#6b21a8)!important}.role-card-guard{box-shadow:0 0 20px #0ea5e980;background:linear-gradient(135deg,#0c4a6e,#0369a1)!important;border:2px solid #0ea5e9!important}.role-card-witch{box-shadow:0 0 20px #d946ef80;background:linear-gradient(135deg,#581c87,#701a75)!important;border:2px solid #d946ef!important}.role-card-hunter{box-shadow:0 0 20px #f9731680;background:linear-gradient(135deg,#7c2d12,#9a3412)!important;border:2px solid #f97316!important}.role-card-villager{box-shadow:0 0 20px #4caf5080;border:2px solid var(--color-success)!important;background:linear-gradient(135deg,#064e3b,#047857)!important}@keyframes shimmer{0%{background-position:-200% 0}to{background-position:200% 0}}.skeleton{background:linear-gradient(90deg, var(--surface) 25%, var(--surface-alt) 50%, var(--surface) 75%);background-size:200% 100%;border-radius:8px;animation:1.6s linear infinite shimmer}.skeleton-container{flex-direction:column;gap:16px;width:100%;max-width:1000px;height:100%;margin:0 auto;padding:16px;display:flex}.skeleton-header{width:100%;height:60px}.skeleton-video-grid{grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:12px;height:240px;display:grid}.skeleton-video-card{border-radius:12px;height:100%}.skeleton-chat{border-radius:16px;flex:1;min-height:150px}.skeleton-actions{gap:12px;height:50px;display:flex}.skeleton-btn{border-radius:12px;flex:1;height:100%}.ai-chat-empty{height:100%;color:var(--text-faint);text-align:center;justify-content:center;align-items:center;padding:24px;display:flex}.ai-chat-display{height:100%;padding:8px 12px;overflow-y:auto}.narration-bubble{color:#fbbf24;background:#3a2e5c;border:1px solid #fbbf2466;border-radius:12px;align-items:flex-start;gap:8px;margin:6px 0;padding:10px 14px;font-size:13px;font-style:italic;display:flex}.narration-icon{flex-shrink:0}.chat-bubble-row{margin:4px 0;display:flex}.chat-bubble-row.me{justify-content:flex-end}.chat-bubble-row.other{justify-content:flex-start}.chat-bubble{background:var(--surface-alt);color:#fff;border-radius:12px;max-width:280px;padding:8px 12px}.chat-bubble.me{background:var(--night-primary)}.chat-bubble-sender{color:#ffffff8a;margin-bottom:2px;font-size:11px}.video-feed-empty{height:100%;color:var(--color-text-faint);justify-content:center;align-items:center;display:flex}.video-feed-grid{place-content:start center;gap:var(--video-gap,8px);grid-template-columns:repeat(auto-fit,minmax(100px,160px));grid-auto-rows:min-content;height:100%;padding:8px;display:grid;overflow-y:auto}.video-tile{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);aspect-ratio:.85;background:#19162e4d;border:1.5px solid #ffffff14;border-radius:12px;transition:border-color .2s,box-shadow .2s,filter .3s,opacity .3s;position:relative;overflow:hidden}.video-tile.speaking{border:2px solid var(--moonlight);box-shadow:0 0 15px #e8d9c466}.video-tile.dead{filter:grayscale();opacity:.4;border-color:#ffffff08}.video-tile video{object-fit:cover;width:100%;height:100%}.video-tile-placeholder{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.video-tile-label{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);color:#fff;z-index:2;background:#100d1eb3;border:1px solid #ffffff1a;border-radius:6px;padding:2px 6px;font-size:11px;font-weight:500;position:absolute;bottom:6px;left:6px}.video-tile-dead-overlay{color:var(--color-error);z-index:1;pointer-events:none;background:#100d1e66;justify-content:center;align-items:center;font-size:32px;display:flex;position:absolute;inset:0}