/* CODENAMES // AFTERDARK GAMING UI — overrides only, app.js class names preserved */
:root{--game-cyan:#2fe0ff;--game-pink:#ff3b5c;--game-ink:#070d16;--game-panel:rgba(10,19,31,.88);--game-line:rgba(117,163,187,.16);--game-muted:#93a8b8}
html[data-theme] body{background:#070d16;color:#e7f4fa}
html[data-theme] body:has(#app){background:radial-gradient(ellipse at 7% 12%,#10233855,transparent 37%),radial-gradient(ellipse at 93% 85%,#38112233,transparent 34%),#070d16}
/* Atmospheric layers already exist in index.html; animate them without affecting layout. */
.hud-bg{position:fixed;inset:0;pointer-events:none;overflow:hidden;opacity:.52;z-index:-1}
.hud-bg:before,.hud-bg:after{content:"";position:absolute;inset:-25%;background:radial-gradient(ellipse at 24% 28%,#2fe0ff13,transparent 31%),radial-gradient(ellipse at 78% 71%,#ff3b5c12,transparent 30%);animation:nebula-drift 28s ease-in-out infinite alternate}
.hud-bg:after{opacity:.5;animation-duration:39s;animation-direction:alternate-reverse}
.hud-stars{opacity:.55;animation:star-drift 90s linear infinite}.hud-map{opacity:.13}.hud-scan{opacity:.14}
@keyframes nebula-drift{to{transform:translate3d(3%,2%,0) scale(1.08)}}@keyframes star-drift{to{transform:translateY(-32px)}}
html[data-theme] .container{max-width:1380px}
html[data-theme] .site-header{position:sticky;top:12px;z-index:20;min-height:68px;margin:12px 0 0;padding:8px 18px;border:1px solid #77cce11c;border-radius:18px;background:#08121dcc;box-shadow:0 12px 45px #0005,inset 0 1px #ffffff08;backdrop-filter:blur(18px)}
html[data-theme] .brand-mark{border-radius:13px;box-shadow:0 0 0 1px #2fe0ff4a,0 0 22px #2fe0ff25}
html[data-theme] .brand-word{color:#f0faff;text-shadow:0 0 17px #2fe0ff35}html[data-theme] .brand-sub{color:#7898aa}
html[data-theme] .room-code,html[data-theme] .language{border:1px solid #2fe0ff45;background:#071d29;color:#9ceeff;border-radius:999px}
html[data-theme] .text-btn{color:#a4eafb;border-radius:999px;transition:background .2s,box-shadow .2s}html[data-theme] .text-btn:hover{background:#2fe0ff12;box-shadow:0 0 20px #2fe0ff19}
/* Landing hero */
html[data-theme] .hero{grid-template-columns:1.05fr .95fr;min-height:620px;gap:42px;padding:50px 0 30px}
html[data-theme] .hero-copy{max-width:590px}html[data-theme] .hero-copy .eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 14px;border:1px solid #2fe0ff42;border-radius:999px;background:#071d29bb;color:#87eaff;font:700 10px ui-monospace,monospace;letter-spacing:1.6px}
html[data-theme] .live-dot{background:var(--game-cyan);box-shadow:0 0 12px var(--game-cyan);animation:game-pulse 1.7s ease-in-out infinite}
html[data-theme] .hero h1{font-size:clamp(42px,6.2vw,82px);line-height:1.28;letter-spacing:-1px;background:linear-gradient(115deg,#f5fbff 7%,#52e8ff 50%,#ff6b86 94%);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(0 0 25px #2fe0ff30)}
html[data-theme] .hero h1 em{color:transparent;background:linear-gradient(90deg,#2fe0ff,#ff5775);background-clip:text;-webkit-background-clip:text}
html[data-theme] .hero-description{font-size:17px;color:#b2c2ce;max-width:520px;line-height:2}
html[data-theme] .hero-visual{margin:0 -15px;filter:drop-shadow(0 24px 48px #0007)}html[data-theme] .hero-visual:before{content:"";position:absolute;inset:8%;background:radial-gradient(closest-side,#2fe0ff20,#ff3b5c12 60%,transparent);filter:blur(28px);pointer-events:none}
html[data-theme] .hero-visual img{position:relative;filter:drop-shadow(0 0 26px #2fe0ff35) saturate(1.1);border:1px solid #b8f6ff1b;border-radius:24px}
html[data-theme] .visual-caption{position:relative;color:#80eaff;text-shadow:0 0 13px #2fe0ff90;letter-spacing:2.2px;font-size:10px}
html[data-theme] .entry-card{position:relative;max-width:520px;padding:28px;border-radius:20px;border:1px solid #2fe0ff3f;background:linear-gradient(145deg,#102234eF,#0a111deb 68%,#180f1ae8);box-shadow:0 22px 58px #0008,0 0 0 1px #ffffff08 inset,0 0 36px #2fe0ff12;backdrop-filter:blur(14px);overflow:hidden}
html[data-theme] .entry-card:before{content:"";position:absolute;inset:0 28% auto;height:2px;background:linear-gradient(90deg,transparent,#2fe0ff,#ff3b5c,transparent);box-shadow:0 0 20px #2fe0ff8c}
html[data-theme] .entry-heading{font-size:22px}html[data-theme] .entry-heading small{border:1px solid #2fe0ff3b;background:#2fe0ff0d;color:#69e9ff;border-radius:999px;padding:4px 10px}
html[data-theme] .entry-card .input,html[data-theme] .input{border-color:#7897a536;background:#030a12;color:#e9f8ff;border-radius:12px}html[data-theme] .entry-card .input:focus,html[data-theme] .input:focus{outline:0;border-color:#2fe0ffb0;box-shadow:0 0 0 3px #2fe0ff19,0 0 20px #2fe0ff12}
html[data-theme] .btn{border-radius:999px;transition:transform .18s,box-shadow .18s,border-color .18s,filter .18s}
html[data-theme] .btn-primary{background:linear-gradient(105deg,#19b8d4,#2fe0ff 49%,#ff3b5c);color:#04111a;border:0;font-weight:900;box-shadow:0 8px 24px #2fe0ff22}
html[data-theme] .btn-primary:hover:not(:disabled){transform:translateY(-2px);filter:saturate(1.2);box-shadow:0 10px 30px #2fe0ff45,0 0 24px #ff3b5c20}
html[data-theme] .btn-ghost{border:1px solid #2fe0ff46;background:#06141e;color:#a7edfa}html[data-theme] .btn-ghost:hover:not(:disabled){border-color:#ff3b5c88;box-shadow:0 0 20px #2fe0ff19}
html[data-theme] .entry-bottom{border-top:1px solid #ffffff13;color:#a9bbc6}html[data-theme] .entry-bottom button{color:#69e8ff}
html[data-theme] .hero-meta span{border:1px solid #ffffff16;background:#091521b5;border-radius:999px;backdrop-filter:blur(8px)}
html[data-theme] .how-section{border:0;padding:30px 0 48px;gap:16px}
html[data-theme] .section-title{color:#effaff}html[data-theme] .section-sub{color:#8ca3b1}
html[data-theme] .step{position:relative;min-height:125px;padding:22px;border:1px solid #91b1c01a;border-radius:17px;background:linear-gradient(150deg,#101d2bbb,#09121cdd);box-shadow:0 14px 30px #0004;transition:transform .22s,border-color .22s,box-shadow .22s}
html[data-theme] .step:hover{transform:translateY(-4px);border-color:#2fe0ff66;box-shadow:0 16px 34px #0006,0 0 24px #2fe0ff14}
html[data-theme] .step-number{width:42px;height:42px;color:#07141a;background:linear-gradient(135deg,#2fe0ff,#71f0ff);box-shadow:0 0 17px #2fe0ff51;font:900 17px ui-monospace,monospace}html[data-theme] .step:nth-of-type(2) .step-number{background:linear-gradient(135deg,#ff3b5c,#ff8295);box-shadow:0 0 17px #ff3b5c50}
/* Room / lobby */
html[data-theme] .room-container{max-width:1640px}html[data-theme] .room-topline{padding:18px 2px}html[data-theme] .room-breadcrumb{color:#7892a2}html[data-theme] .room-breadcrumb a{color:#62dff4}
html[data-theme] .game-layout{gap:18px}html[data-theme] .game-center{min-width:0}
html[data-theme] .team-panel,html[data-theme] .activity-panel{border-radius:18px;border:1px solid #ffffff16;background:linear-gradient(155deg,#101b29ed,#080f18ed);box-shadow:0 18px 42px #0007;overflow:hidden}
html[data-theme] .team-panel.red{border-color:#ff3b5c57;box-shadow:0 10px 34px #0007,0 0 25px #ff3b5c0c}html[data-theme] .team-panel.blue{border-color:#2fe0ff57;box-shadow:0 10px 34px #0007,0 0 25px #2fe0ff0c}
html[data-theme] .team-top{padding:18px 16px 14px;background:linear-gradient(115deg,#42101feF,#1d0d17);color:#ffd8e0;border-bottom:1px solid #ff3b5c45}
html[data-theme] .team-panel.blue .team-top{background:linear-gradient(115deg,#0e3145,#0a1a28);color:#d4f8ff;border-color:#2fe0ff42}
html[data-theme] .team-panel.red .team-score{text-shadow:0 0 16px #ff3b5c9a}html[data-theme] .team-panel.blue .team-score{text-shadow:0 0 16px #2fe0ff9a}
html[data-theme] .team-content{padding:15px}html[data-theme] .role-group+.role-group{border-color:#ffffff13}
html[data-theme] .role-label{color:#9cb3c0}html[data-theme] .member{border-radius:11px;background:#ffffff08;border:1px solid #ffffff0c}html[data-theme] .team-panel.red .avatar{border-color:#ff3b5c71;box-shadow:0 0 13px #ff3b5c25}html[data-theme] .team-panel.blue .avatar{border-color:#2fe0ff71;box-shadow:0 0 13px #2fe0ff25}
html[data-theme] .join-role{border:1px solid #2fe0ff38;border-radius:999px;background:#2fe0ff0b;color:#81eaff;transition:all .18s}html[data-theme] .join-role:hover{border-color:#2fe0ff88;box-shadow:0 0 16px #2fe0ff22}
html[data-theme] .team-active{animation:team-aura 2.4s ease-in-out infinite alternate}
html[data-theme] .board-header{padding:18px 20px;border:1px solid #2fe0ff20;border-radius:17px;background:linear-gradient(120deg,#0d1b28e8,#0a111bea);box-shadow:0 12px 35px #0006}
html[data-theme] .board-header h1{color:#effaff}html[data-theme] .phase-pill{border:1px solid #2fe0ff45;background:#071a25;color:#83eaff;border-radius:999px;padding:8px 13px}
html[data-theme] .lobby-center{position:relative;isolation:isolate;min-height:500px;padding:38px 30px;border:1px solid #2fe0ff38;border-radius:23px;background:radial-gradient(ellipse at 50% 0%,#2fe0ff0d,transparent 48%),linear-gradient(155deg,#101c2cec,#080f19f5);box-shadow:0 24px 60px #0008,0 0 42px #2fe0ff0b;overflow:hidden}
html[data-theme] .lobby-center:before{content:"";position:absolute;z-index:-1;inset:0 20% auto;height:2px;background:linear-gradient(90deg,transparent,#2fe0ff,#ff3b5c,transparent);box-shadow:0 0 24px #2fe0ff80}
html[data-theme] .lobby-center:after{content:"";position:absolute;z-index:-1;width:300px;height:300px;left:50%;top:48%;transform:translate(-50%,-50%);border:1px solid #2fe0ff0b;border-radius:50%;box-shadow:0 0 0 36px #2fe0ff06,0 0 0 76px #ff3b5c05;animation:lobby-orbit 12s linear infinite;pointer-events:none}
html[data-theme] .lobby-icon{width:82px;height:82px;border:1px solid #2fe0ff65;border-radius:24px;background:linear-gradient(145deg,#0d2a39,#111729);color:#65eaff;box-shadow:0 0 28px #2fe0ff2a,inset 0 0 24px #2fe0ff13;animation:lobby-float 3.4s ease-in-out infinite}
html[data-theme] .lobby-icon svg{color:#74eaff;filter:drop-shadow(0 0 7px #2fe0ff8a)}html[data-theme] .lobby-center h2{color:#f0fbff;text-shadow:0 0 20px #2fe0ff24}html[data-theme] .lobby-center>p{color:#a2b6c2}
html[data-theme] .invite-code{border:1px dashed #2fe0ff66;background:#06131d;color:#9defff;border-radius:12px;box-shadow:inset 0 0 25px #2fe0ff0c;text-shadow:0 0 12px #2fe0ff50}
html[data-theme] .settings-row label{color:#adc2cc}html[data-theme] .settings-row select{background-color:#07121d;color:#dbf3f7;border-color:#ffffff24}
html[data-theme] .ready-count{color:#8cecff}html[data-theme] .lobby-preview{opacity:.9;gap:7px}html[data-theme] .lobby-preview i{height:25px;border:1px solid #ffffff10;background:linear-gradient(145deg,#1a2937,#101925);box-shadow:inset 0 1px #ffffff09}
html[data-theme] .lobby-preview i:nth-child(3n){background:linear-gradient(145deg,#4a1425,#210d17);border-color:#ff3b5c40;box-shadow:0 0 13px #ff3b5c18}html[data-theme] .lobby-preview i:nth-child(4n){background:linear-gradient(145deg,#12344a,#0a1b2b);border-color:#2fe0ff40;box-shadow:0 0 13px #2fe0ff18}
html[data-theme] .activity-panel{margin-top:18px}html[data-theme] .activity-tab.active{color:#8deaff;background:#2fe0ff0e;box-shadow:inset 0 0 0 1px #2fe0ff39}
html[data-theme] .mission-note{border:1px solid #ffffff10;border-radius:13px;background:#09131dbb;color:#8ea5b3}
html[data-theme] .site-footer{border-color:#ffffff13;color:#78909e}html[data-theme] .site-footer a{color:#79dff0}
html[data-theme] .winner-banner{border:1px solid #ff3b5c55;background:linear-gradient(100deg,#2a101a,#101b27);box-shadow:0 0 28px #ff3b5c15}
html[data-theme] .winner-banner.blue{border-color:#2fe0ff55;box-shadow:0 0 28px #2fe0ff15}
@keyframes game-pulse{50%{opacity:.48;transform:scale(.78)}}@keyframes team-aura{to{box-shadow:0 10px 34px #0007,0 0 28px #2fe0ff22}}
@keyframes lobby-float{50%{transform:translateY(-5px)}}@keyframes lobby-orbit{to{transform:translate(-50%,-50%) rotate(360deg)}}
@media(max-width:900px){html[data-theme] .hero{grid-template-columns:1fr;min-height:0;padding:40px 0 22px;gap:16px}html[data-theme] .hero-copy{max-width:none}html[data-theme] .hero-visual{max-width:660px;margin:0 auto}html[data-theme] .game-layout{gap:12px}}
@media(max-width:700px){html[data-theme] .container{padding-inline:17px}html[data-theme] .site-header{top:6px;margin-top:6px;padding:7px 11px;border-radius:15px}html[data-theme] .how-section{grid-template-columns:1fr;gap:11px}html[data-theme] .step{min-height:0}html[data-theme] .hero h1{font-size:clamp(38px,11vw,58px)}html[data-theme] .entry-card{padding:22px}html[data-theme] .lobby-center{padding:30px 17px;min-height:440px}html[data-theme] .team-content{gap:10px}html[data-theme] .room-code{font-size:12px}}
@media(prefers-reduced-motion:reduce){.hud-bg:before,.hud-bg:after,.hud-stars,html[data-theme] .live-dot,html[data-theme] .team-active,html[data-theme] .lobby-icon,html[data-theme] .lobby-center:after{animation:none!important}html[data-theme] *,html[data-theme] *:before,html[data-theme] *:after{scroll-behavior:auto!important;transition-duration:.01ms!important}}