:root { color-scheme: dark; --ink:#f8f4ff; --muted:#a89fbe; --panel:#211a3a; --line:#ffffff1c; --lime:#d8ff58; --pink:#ff6fae; --cyan:#71e5ff; --danger:#ff785f; }
* { box-sizing:border-box; }
html,body { min-height:100%; }
body { margin:0; background:radial-gradient(circle at 12% 0,#43255e 0,transparent 38%),radial-gradient(circle at 88% 100%,#133e55 0,transparent 34%),#100d20; color:var(--ink); font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif; }
button,input { font:inherit; }
button { color:inherit; cursor:pointer; }
.hidden { display:none!important; }
.coop-shell { width:min(1180px,100%); min-height:100vh; margin:auto; padding:max(14px,env(safe-area-inset-top)) max(14px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(14px,env(safe-area-inset-left)); }
.coop-header { min-height:54px; display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:16px; }
.back-link { color:var(--muted); text-decoration:none; font-size:12px; font-weight:700; }
.coop-brand { text-align:center; line-height:1; }.coop-brand b { display:block; letter-spacing:.08em; }.coop-brand span { color:var(--pink); font-size:10px; letter-spacing:.12em; text-transform:uppercase; }
.network { justify-self:end; display:flex; align-items:center; gap:7px; color:var(--muted); font-size:11px; }.network i { width:8px;height:8px;border-radius:50%;background:#716981;box-shadow:0 0 0 4px #7169811c; }.network[data-state="online"] i { background:var(--lime);box-shadow:0 0 0 4px #d8ff5820; }.network[data-state="connecting"] i { background:#ffd667; animation:pulse 1s infinite; }
@keyframes pulse { 50% { opacity:.35; } }
.panel { min-height:calc(100vh - 86px); border:1px solid var(--line); border-radius:30px; background:linear-gradient(145deg,#211a3ae8,#17122bf4); box-shadow:0 28px 80px #0007,inset 0 1px #ffffff17; padding:clamp(24px,5vw,68px); }
.connect-panel { display:grid; align-content:center; }.kicker { color:var(--lime); font-size:11px; font-weight:900; letter-spacing:.18em; }.panel h1 { margin:10px 0 12px; font-size:clamp(50px,8vw,100px); line-height:.88; letter-spacing:-.065em; }.panel h1 span { color:var(--pink); }.intro { max-width:570px; color:#d0c8e0; font-size:clamp(14px,2vw,18px); line-height:1.5; }
.connect-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:14px; margin-top:25px; }.join-card { position:relative; display:grid; gap:12px; padding:22px; border:1px solid var(--line); border-radius:22px; background:#ffffff08; }.step { position:absolute;top:18px;right:20px;color:#ffffff28;font-size:28px;font-weight:900; }.join-card h2 { margin:0 0 3px; font-size:22px; }.join-card label { display:grid;gap:5px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.1em; }.join-card input { width:100%;padding:12px 14px;border:1px solid #ffffff20;border-radius:12px;outline:0;color:var(--ink);background:#0f0c1c80; }.join-card input:focus { border-color:var(--cyan);box-shadow:0 0 0 3px #71e5ff18; }.code-input { text-transform:uppercase;letter-spacing:.25em;font-weight:900; }.primary,.secondary,.ready-button { min-height:47px;padding:12px 22px;border-radius:999px;font-weight:850; }.primary { border:0;color:#17122b;background:var(--lime);box-shadow:0 9px 28px #d8ff5822; }.secondary { border:1px solid #ffffff2c;background:#ffffff0b; }.form-error { min-height:20px;color:#ff9e91;font-weight:700;font-size:12px; }
.lobby-panel { display:grid;grid-template-rows:auto 1fr auto auto;gap:24px; }.lobby-head { display:grid;grid-template-columns:.7fr 1.3fr;gap:25px;align-items:end; }.lobby-title h1 { font-size:clamp(44px,7vw,78px); }.lobby-title p { max-width:530px;color:var(--muted);line-height:1.5; }.room-code { display:grid;margin-top:10px;padding:0;border:0;background:none;text-align:left; }.room-code span { color:var(--cyan);font-size:clamp(45px,8vw,80px);font-weight:900;letter-spacing:.14em; }.room-code small { color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em; }.crew-card { align-self:center;border:1px solid var(--line);border-radius:22px;overflow:hidden;background:#ffffff07; }.crew-heading { display:flex;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line);color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.12em; }.players-list { display:grid;grid-template-columns:repeat(2,1fr); }.player-row { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--line); }.player-row:nth-child(odd){border-right:1px solid var(--line)}.player-token { width:38px;height:38px;display:grid;place-items:center;border:2px solid currentColor;border-radius:13px;font-weight:900; }.player-row strong,.player-row small { display:block; }.player-row small { color:var(--muted);font-size:10px; }.state-pill { padding:6px 9px;border-radius:999px;color:#8f87a2;background:#ffffff0a;font-size:9px;font-weight:850;text-transform:uppercase; }.state-pill.ready { color:var(--lime);background:#d8ff5812; }.state-pill.offline { color:#ff9e91; }.lobby-actions { display:flex;gap:10px;justify-content:flex-end; }.ready-button { display:flex;align-items:center;justify-content:space-between;gap:30px;border:1px solid #ffffff25;background:#ffffff0b; }.ready-button i { width:25px;height:25px;display:grid;place-items:center;border-radius:50%;background:#ffffff12;font-style:normal; }.ready-button.active { border-color:var(--lime); }.ready-button.active i { color:#17122b;background:var(--lime); }.danger-quiet { margin-right:auto; }.lobby-note { margin:0;min-height:18px;color:var(--muted);font-size:12px;text-align:center; }
.game-layout { min-height:calc(100vh - 86px);display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:12px; }.game-main,.crew-sidebar { border:1px solid var(--line);border-radius:25px;background:#17122be8;box-shadow:0 24px 65px #0006; }.game-main { min-width:0;display:grid;grid-template-rows:auto minmax(0,1fr) auto;padding:12px; }.hud { display:flex;justify-content:center;gap:clamp(22px,8vw,80px);padding:5px;text-align:center; }.hud span { display:block;color:var(--muted);font-size:8px;text-transform:uppercase;letter-spacing:.12em; }.hud strong { font-size:18px;font-variant-numeric:tabular-nums; }.hud i { font-style:normal; }.coop-canvas-wrap { position:relative;min-height:0;overflow:hidden;border:1px solid var(--line);border-radius:18px;background:#17122b;touch-action:none; }.coop-canvas-wrap canvas { display:block;width:100%;height:100%; }.meters { display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:10px 6px 1px; }.meters label { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:9px;color:var(--muted);font-size:9px;text-transform:uppercase; }.meters progress { width:100%;height:8px;border:0;border-radius:8px;overflow:hidden; }.meters progress::-webkit-progress-bar { background:#ffffff12; }.meters progress::-webkit-progress-value { background:var(--cyan); }.meters progress.heat::-webkit-progress-value { background:var(--pink); }.meters b { min-width:32px;color:var(--ink);font-variant-numeric:tabular-nums; }
.crew-sidebar { display:flex;flex-direction:column;padding:15px; }.sidebar-head { display:flex;justify-content:space-between;padding:4px 2px 12px;color:var(--muted);font-size:10px;text-transform:uppercase;letter-spacing:.12em; }.sidebar-head b { color:var(--cyan);letter-spacing:.16em; }.game-players { display:grid;gap:7px; }.game-player { display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:8px;padding:9px;border:1px solid var(--line);border-radius:12px;background:#ffffff07;font-size:11px; }.game-player i { width:22px;height:22px;display:grid;place-items:center;border:2px solid currentColor;border-radius:7px;font-style:normal; }.game-player small { color:var(--muted); }.objective { margin:14px 0;padding:13px;border-left:2px solid var(--lime);background:#d8ff5809; }.objective span { color:var(--lime);font-size:9px;font-weight:900;text-transform:uppercase;letter-spacing:.12em; }.objective p { margin:5px 0 0;color:#c7bfd8;font-size:11px;line-height:1.4; }.ping-wheel { display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:auto; }.ping-wheel button { min-height:48px;display:grid;place-items:center;border:1px solid var(--line);border-radius:11px;background:#ffffff07;color:var(--cyan);font-weight:900; }.ping-wheel span { display:block;color:var(--muted);font-size:7px;font-weight:700;text-transform:uppercase; }.text-button { margin-top:10px;border:0;background:none;color:#8e859f;font-size:10px; }
.incident-banner { position:absolute;top:12px;left:50%;translate:-50% 0;z-index:3;width:min(390px,calc(100% - 24px));display:grid;grid-template-columns:1fr auto;gap:3px 12px;padding:10px 14px;border:1px solid #ff6fae55;border-radius:13px;background:#30182ce8;box-shadow:0 10px 30px #0006; }.incident-banner b { color:var(--pink); }.incident-banner span { color:#d5ccdf;font-size:10px; }.incident-banner progress { grid-column:1/-1;width:100%;height:5px;accent-color:var(--lime); }.action-button { position:absolute;right:14px;bottom:14px;z-index:3;width:92px;height:92px;border:2px solid var(--lime);border-radius:50%;color:#17122b;background:#d8ff58dd;box-shadow:0 10px 35px #d8ff5833; }.action-button span,.action-button small { display:block; }.action-button span { font-weight:900; }.action-button small { font-size:8px; }.action-button.active { transform:scale(.94);filter:brightness(1.15); }.ping-toast,.global-toast { opacity:0;pointer-events:none; }.ping-toast.show { position:absolute;left:50%;top:74px;translate:-50% 0;z-index:4;padding:8px 13px;border-radius:999px;color:#17122b;background:var(--cyan);font-size:11px;font-weight:900;animation:toast 3s both; }.global-toast.show { position:fixed;z-index:20;left:50%;bottom:24px;translate:-50% 0;padding:10px 15px;border-radius:999px;color:#17122b;background:var(--lime);font-size:12px;font-weight:850;animation:toast 3s both; }.global-toast.error { background:#ff9e91; } @keyframes toast { 0%,100%{opacity:0;transform:translateY(8px)} 12%,85%{opacity:1;transform:none} }
.result-panel { display:grid;place-content:center;text-align:center; }.result-panel h1 { font-size:clamp(48px,8vw,92px); }.result-panel>p { color:var(--muted); }.result-stats { display:flex;justify-content:center;gap:clamp(30px,8vw,90px);margin:25px 0; }.result-stats span,.result-stats strong { display:block; }.result-stats span { color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.12em; }.result-stats strong { color:var(--lime);font-size:35px; }.result-players { display:flex;justify-content:center;flex-wrap:wrap;gap:8px; }.result-player { padding:10px 13px;border:1px solid var(--line);border-radius:12px;background:#ffffff07;font-size:11px; }.result-player b { display:block; }.result-player span { color:var(--muted);font-size:9px; }.result-actions { display:flex;justify-content:center;gap:10px;margin-top:25px; }
@media(max-width:760px){.coop-header{grid-template-columns:auto 1fr auto}.coop-brand{text-align:left}.coop-brand b{font-size:12px}.coop-brand span{font-size:7px}.back-link{font-size:0}.back-link span{font-size:20px}.network span{display:none}.panel{min-height:calc(100vh - 78px);padding:22px;border-radius:20px}.connect-grid{grid-template-columns:1fr}.connect-panel{align-content:start}.connect-panel h1{font-size:56px}.lobby-head{grid-template-columns:1fr}.lobby-title h1{font-size:48px}.players-list{grid-template-columns:1fr}.player-row:nth-child(odd){border-right:0}.lobby-actions{flex-wrap:wrap}.danger-quiet{order:3;width:100%;margin:0}.game-layout{grid-template-columns:1fr;min-height:calc(100vh - 75px)}.game-main{min-height:68vh}.crew-sidebar{min-height:215px}.game-players{grid-template-columns:repeat(2,1fr)}.objective{display:none}.ping-wheel{margin-top:12px;grid-template-columns:repeat(5,1fr)}.action-button{width:78px;height:78px}.meters{grid-template-columns:1fr}.result-stats{gap:23px}.result-stats strong{font-size:27px}}
@media(max-height:650px) and (min-width:761px){.coop-shell{padding-top:7px}.coop-header{min-height:42px}.game-layout{min-height:calc(100vh - 56px)}.panel{min-height:calc(100vh - 56px);padding:25px}.panel h1{font-size:58px}.connect-grid{margin-top:12px}.join-card{padding:15px}.join-card input{padding:8px 11px}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}