:root{color-scheme:dark;--surface:#161b2d;--ink:#f6f3fa;--muted:#aeb1c4;--stroke:#ffffff21;--main:#f7c878;--accent:#f27d86;--dark:#0b101a}
*{box-sizing:border-box}html{background:#0b101a;scroll-behavior:smooth}body{margin:0;color:var(--ink);font:500 15px 'DM Sans',system-ui,Segoe UI,sans-serif;min-height:100vh;overflow-x:hidden;background:radial-gradient(ellipse 58% 44% at 14% 6%,#833e5370,transparent 76%),radial-gradient(ellipse 60% 45% at 92% 80%,#50418d3b,transparent 78%),#0b101a}body[data-game=spy]{--main:#78edcf;--accent:#b1a1ff;background:radial-gradient(ellipse 53% 39% at 3% 6%,#0b847c66,transparent 76%),radial-gradient(ellipse 51% 48% at 90% 80%,#3b558877,transparent 78%),#091b24}body:before{content:'';position:fixed;inset:0;background:repeating-linear-gradient(90deg,#ffffff05 0px,#ffffff05 1px,transparent 1px,transparent 77px);opacity:.27;pointer-events:none}body:after{content:'';position:fixed;inset:-30%;background:radial-gradient(ellipse at 30% 25%,#ffcb6e15,transparent 50%),radial-gradient(ellipse at 80% 77%,#c960a619,transparent 44%);animation:drift 16s ease-in-out infinite alternate;pointer-events:none;filter:blur(35px)}body[data-game=spy]:after{background:radial-gradient(ellipse at 30% 25%,#78f9d11e,transparent 50%),radial-gradient(ellipse at 80% 77%,#91d5fd23,transparent 44%)}@keyframes drift{to{transform:translate(5%,8%) rotate(7deg)}}@keyframes float{50%{transform:translateY(-8px)}}@keyframes reveal{0%{transform:scale(.96) translateY(18px);opacity:0}100%{transform:scale(1) translateY(0);opacity:1}}@keyframes glow{50%{box-shadow:0 0 40px #f7c87844}}@keyframes sweep{to{transform:translateX(100vw)}}@keyframes fall{100%{transform:translate(var(--dx,0),100vh) rotate(620deg);opacity:0}}
header,main,footer{position:relative;z-index:1}.shell{max-width:1210px;margin:0 auto;padding:24px 24px 36px}.nav{display:flex;justify-content:space-between;align-items:center;gap:15px;margin-bottom:34px}.back{text-decoration:none;color:#d5d6e4;font-weight:800;letter-spacing:1.5px;font-size:11px;transition:color .2s}.back:hover{color:var(--main)}.brand{display:flex;align-items:center;gap:13px;font-family:'Space Grotesk',sans-serif;font-size:16px;font-weight:800;letter-spacing:-.4px}.brand-mark{width:43px;height:43px;border-radius:14px;background:#ffe1ae21;border:1px solid #ffd88e50;display:grid;place-items:center;font-size:22px}.brand strong{color:var(--main)}.live{display:flex;align-items:center;gap:8px;font-size:11px;font-weight:800;color:#a8d7bf}.live:before{content:'';width:8px;height:8px;border-radius:50%;background:#55e1ab;box-shadow:0 0 15px #55e1ab}.landing{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(320px,.9fr);align-items:center;gap:42px;min-height:75vh}.intro{padding:22px 0}.kicker{font-size:11px;letter-spacing:2.3px;font-weight:900;color:var(--main);text-transform:uppercase}.intro h1{font:900 clamp(64px,8.2vw,126px)/.87 'Space Grotesk',sans-serif;letter-spacing:-.084em;margin:24px 0 27px}.intro h1 em{font-style:normal;color:transparent;background:linear-gradient(115deg,var(--main),var(--accent));-webkit-background-clip:text;background-clip:text}.intro p{line-height:1.85;color:#c2c1ce;font-size:17px;max-width:570px}.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:27px}.chips span{padding:10px 14px;border:1px solid var(--stroke);border-radius:999px;background:#ffffff0b;color:#dad7e0;font-size:12px;font-weight:800}.create-form,.game-panel,.private-card,.side-card,.topline{border:1px solid var(--stroke);background:linear-gradient(145deg,#242338de,#101828eb);border-radius:25px;box-shadow:0 26px 70px #070a1948}.create-form{padding:30px;animation:reveal .55s both}.create-form>label,.join-grid label{display:grid;gap:10px;color:#d4d2dd;font-size:10px;font-weight:900;letter-spacing:1.7px}input,select,textarea{width:100%;background:#ffffff0c;color:#f9f8ff;border:1px solid #ffffff37;border-radius:12px;padding:15px;font:600 15px 'DM Sans',sans-serif;outline:none;transition:border-color .15s,box-shadow .15s;min-width:0}input:focus,select:focus,textarea:focus{border-color:var(--main);box-shadow:0 0 0 3px #f9dd9b22}select option{background:#192037;color:white}.join-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px;align-items:end;margin-top:14px}.or{display:flex;gap:13px;align-items:center;color:#a8a7b8;font-size:11px;font-weight:900;letter-spacing:1.7px;margin:28px 0 14px}.or:before,.or:after{content:'';height:1px;background:#ffffff23;flex:1}.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;border:1px solid transparent;border-radius:12px;padding:15px 18px;background:var(--main);color:#141521;font:900 12px 'DM Sans',sans-serif;letter-spacing:.3px;cursor:pointer;transition:transform .2s,filter .2s,background .2s;text-decoration:none;min-height:49px}.btn:hover:not(:disabled){transform:translateY(-2px);filter:brightness(1.08)}.btn:active:not(:disabled){transform:scale(.97)}.btn:disabled{opacity:.45;cursor:not-allowed}.btn.alt{background:linear-gradient(110deg,#c1a9fe,#fcabd0)}.btn.ghost{background:#ffffff0a;border-color:#ffffff38;color:#f0eaf5}.btn.small{min-height:35px;padding:9px 13px;font-size:10px}.btn.danger{background:#ef808d;color:#18111d}.fineprint{font-size:12px;color:#abaaba;line-height:1.7;margin:20px 0 0}.layout{display:grid;grid-template-columns:minmax(0,1fr) 348px;align-items:start;gap:19px}.main-col,.aside{min-width:0;display:grid;gap:17px}.topline{padding:20px 24px;display:flex;justify-content:space-between;gap:12px;align-items:center}.room-code{font:900 35px 'Space Grotesk',sans-serif;letter-spacing:5px;margin:3px 0}.timeline{display:flex;align-items:center;gap:14px;font-size:11px;font-weight:800;color:#a7aabc;padding:0 6px;letter-spacing:1.3px}.phase-tag{color:var(--main);background:#ffe1aa15;border:1px solid #f7c8784d;border-radius:999px;padding:8px 12px}.private-card,.game-panel,.side-card{padding:23px 25px}.private-card{text-align:center;background:radial-gradient(circle at 50% 10%,#a98a6630,transparent 55%),linear-gradient(145deg,#302339ef,#151925f8);animation:reveal .5s both}.private-card.spy{background:radial-gradient(circle at 50% 0%,#5ad9d933,transparent 65%),#182d39}.private-card .tiny{color:#cecbda;letter-spacing:2px;font-weight:900;font-size:10px}.role-emoji{font-size:43px;margin:9px auto;animation:float 5s ease-in-out infinite}.role-name{font:900 clamp(24px,4vw,37px) 'Space Grotesk',sans-serif;color:var(--main);margin-bottom:8px}.private-card p{color:#c7c5d1;line-height:1.65;margin:0 auto 15px;max-width:550px}.teammates{margin-top:15px;color:#f8bec2;font-size:12px}.game-panel{min-height:240px;animation:reveal .4s both}.game-panel h2{font:800 clamp(23px,4vw,34px) 'Space Grotesk',sans-serif;margin:10px 0 14px;letter-spacing:-1.3px}.game-panel h3{font-size:21px;margin:16px 0}.game-panel p{line-height:1.75;color:#c4c5d3}.game-panel .hint,.game-panel small{color:#9ea3b6;font-size:12px}.phase-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.big-timer{font:900 27px 'Space Grotesk',sans-serif;color:var(--main);font-variant-numeric:tabular-nums}.progress{height:6px;background:#ffffff19;border-radius:99px;margin:13px 0 25px;overflow:hidden}.progress i{display:block;height:100%;background:linear-gradient(100deg,var(--main),var(--accent));border-radius:99px;transition:width .65s linear}.important{padding:15px;border:1px solid #f1d39245;border-radius:14px;background:#f1c88412;color:#f9e4ba!important}.notice{margin:17px 0;padding:14px 16px;border:1px solid #81d8c35e;border-radius:13px;background:#46bb9b1b;color:#bef7e9;line-height:1.6;font-weight:700;font-size:13px}.choices{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0}.pick{font:800 14px 'DM Sans',sans-serif;border:1px solid #ffffff30;border-radius:13px;background:#ffffff0c;color:#e8e6ed;min-height:57px;padding:12px;cursor:pointer;text-align:left;display:flex;align-items:center;gap:10px;transition:.2s}.pick span{color:var(--main)}.pick:hover{border-color:var(--main);background:#ffffff1a;transform:translateY(-2px)}.intel{margin:20px 0 10px;background:#282541;border:1px solid #baa4ff63;border-radius:14px;padding:16px;color:#e8d6ff;line-height:1.6}.intel b{display:block;margin-top:4px}.side-card{padding:20px 18px}.side-head{display:flex;align-items:center;justify-content:space-between;gap:10px}.side-head h3{font:900 14px 'Space Grotesk',sans-serif;margin:0}.side-head span{font-size:10px;letter-spacing:1px;color:#a2a7ba;font-weight:900}.people{display:grid;gap:7px;margin-top:16px}.person{display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:12px;background:#ffffff09;border:1px solid #ffffff0d}.person.out{opacity:.5}.avatar{display:grid;place-items:center;width:32px;height:32px;flex-shrink:0;background:#f5d8ab20;border:1px solid #f2d39e40;border-radius:10px;color:var(--main);font-weight:900}.person .name{font-size:12px;font-weight:800;flex:1;min-width:0;overflow-wrap:anywhere}.person i,.person b{font-size:9px;font-style:normal;color:var(--main)}.person .pts{font-weight:900;font-size:12px;color:#f4d192;white-space:nowrap}.alive-dot{font-size:13px;color:#85f2b3}.chat-card{position:relative}.chat-log{height:255px;overflow-y:auto;display:flex;flex-direction:column;gap:10px;margin:18px 0;padding:5px 4px;scrollbar-width:thin}.chatline{line-height:1.5;font-size:13px;padding:8px 11px;background:#ffffff0b;border-radius:11px;overflow-wrap:anywhere}.chatline strong{color:var(--main)}.emptyline{margin:auto;color:#8d90a8;text-align:center;font-size:12px}.chat-form{display:flex;gap:6px}.chat-form input{font-size:12px;padding:12px}.chat-form .btn{padding:10px;min-height:44px}.guess-panel{border-top:1px solid #ffffff20;margin-top:20px;padding-top:20px}.guess-panel b{color:var(--main)}.guess-panel .inline{display:flex;gap:9px}.guess-panel .inline select{flex:1;min-width:0}.result{text-align:center;border-color:#f0d08e6e;animation:glow 3s infinite}.result-symbol{font-size:64px;margin:15px 0}.result h2{font-size:41px;color:var(--main)}.role-reveal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;text-align:left;margin:24px 0}.role-reveal>div{border:1px solid #ffffff24;border-radius:12px;padding:11px 14px;background:#ffffff0a}.role-reveal strong{display:block;font-size:13px}.role-reveal span{font-size:10px;color:var(--main);font-weight:800;letter-spacing:1px}.result .btn{margin-top:12px}.footer{text-align:center;font-size:10px;font-weight:900;letter-spacing:2.5px;color:#9999ad;margin-top:45px}.footer span{color:var(--main)}#toast{position:fixed;z-index:15;left:50%;bottom:20px;transform:translate(-50%,28px);background:#f7f0e5;color:#202033;border-radius:14px;padding:16px 22px;box-shadow:0 20px 60px #0007;min-width:200px;max-width:min(90vw,540px);opacity:0;transition:opacity .2s,transform .2s;pointer-events:none;text-align:center;font-weight:800;font-size:13px}#toast.show{opacity:1;transform:translate(-50%,0)}#confetti{position:fixed;z-index:11;inset:0;pointer-events:none;overflow:hidden}#confetti i{position:absolute;top:-20px;width:9px;height:16px;border-radius:3px;animation:fall 3s linear forwards}.stage-in{animation:reveal .5s both}
@media(max-width:920px){.landing{grid-template-columns:1fr;gap:14px;min-height:0}.intro{padding:10px 0}.intro h1{font-size:clamp(56px,11vw,100px)}.layout{grid-template-columns:1fr}.aside{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start}.chat-log{height:300px}}
@media(max-width:600px){.shell{padding:16px 14px 30px}.nav{margin-bottom:19px}.brand{font-size:12px}.brand-mark{width:34px;height:34px}.live{font-size:10px}.landing{gap:4px}.intro h1{font-size:62px}.intro p{font-size:14px}.create-form{padding:20px}.join-grid{grid-template-columns:1fr}.room-code{font-size:26px}.topline{padding:16px}.timeline{font-size:9px;flex-wrap:wrap}.game-panel,.private-card{padding:17px}.aside{grid-template-columns:1fr}.choices{grid-template-columns:1fr}.chat-log{height:220px}.guess-panel .inline{flex-direction:column}.role-reveal{grid-template-columns:1fr}.phase-head h2{font-size:23px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important}}
@media(max-width:600px){body[data-game=spy] .intro h1{font-size:clamp(42px,12.8vw,55px);overflow-wrap:break-word}}