:root{--primary:#6d4aff;--primary2:#8b5cf6;--accent:#ffb224;--success:#29d18b;--danger:#ff4e72;--ink:#16152b;--muted:#74718d;--card:rgba(255,255,255,.92);--line:#e9e6f5;--shadow:0 24px 70px rgba(39,24,90,.16);font-family:Inter,ui-rounded,"SF Pro Rounded",system-ui,sans-serif;color:var(--ink)}*{box-sizing:border-box}body{margin:0;min-height:100vh;background:linear-gradient(145deg,#f4f0ff,#fff8e8 55%,#eafff7);overflow-x:hidden}button,input,select{font:inherit}.orb{position:fixed;border-radius:50%;filter:blur(4px);opacity:.3;pointer-events:none}.orb.one{width:420px;height:420px;background:#9d79ff;top:-180px;left:-140px}.orb.two{width:360px;height:360px;background:#ffcf58;right:-150px;bottom:-130px}.shell{width:min(1160px,calc(100% - 32px));margin:auto;padding:28px 0 60px;position:relative}.brand{display:flex;align-items:center;gap:12px;margin-bottom:32px}.brand-mark{width:52px;height:52px;border-radius:17px;display:grid;place-items:center;background:linear-gradient(135deg,var(--primary),#9a67ff);color:#fff;font-weight:950;box-shadow:0 10px 28px #6d4aff55;transform:rotate(-5deg)}.brand h1{margin:0;font-size:24px;line-height:1}.brand h1 span{color:var(--primary)}.brand p{margin:5px 0 0;color:var(--muted);font-size:12px}.brand .icon-btn{margin-left:auto}.grid{display:grid;grid-template-columns:1.05fr .95fr;gap:24px}.card{background:var(--card);border:1px solid #fff;border-radius:28px;box-shadow:var(--shadow);backdrop-filter:blur(14px)}.hero{padding:58px;min-height:580px;display:flex;flex-direction:column;justify-content:center;background:linear-gradient(145deg,rgba(39,25,91,.96),rgba(100,66,226,.94));color:#fff;overflow:hidden;position:relative}.hero:after{content:"A B C";position:absolute;font-size:110px;font-weight:950;opacity:.06;transform:rotate(-16deg);right:-20px;bottom:35px}.eyebrow{font-size:11px;font-weight:900;letter-spacing:.14em;color:var(--primary)}.hero .eyebrow{color:#f8c64e}.hero h2{font-size:clamp(44px,6vw,75px);line-height:.96;margin:25px 0}.hero h2 em{color:#ffcf58;font-style:normal}.hero p{max-width:440px;line-height:1.7;color:#dcd5ff}.stats{display:flex;gap:22px;margin-top:45px}.stats b{font-size:13px}.setup-card{padding:36px}.setup-card h2,.modal h2{font-size:27px;margin:0 0 24px}label{display:grid;gap:8px;font-size:13px;font-weight:800;margin-bottom:18px}input,select{width:100%;border:2px solid var(--line);background:#faf9ff;padding:14px;border-radius:14px;outline:none;color:var(--ink)}input:focus,select:focus{border-color:var(--primary);box-shadow:0 0 0 4px #6d4aff18}fieldset{border:0;padding:0;margin:0 0 20px}legend{font-size:13px;font-weight:800;margin-bottom:10px}.avatars{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;max-height:245px;overflow:auto;padding:3px}.avatar{border:2px solid transparent;border-radius:15px;background:#f4f1fc;padding:7px 3px;cursor:pointer}.avatar span{display:block;font-size:28px}.avatar small{font-size:8px;color:var(--muted)}.avatar:hover,.avatar.selected{border-color:var(--primary);background:#eee8ff;transform:translateY(-2px)}.btn{border:0;border-radius:15px;padding:16px 20px;font-weight:950;cursor:pointer;width:100%;letter-spacing:.04em}.btn.primary{background:linear-gradient(135deg,var(--primary),var(--primary2));color:#fff;box-shadow:0 11px 24px #6d4aff48}.btn:hover{transform:translateY(-2px)}.hidden{display:none!important}.actions{display:grid;grid-template-columns:1fr 1fr;gap:18px}.action{padding:25px;text-align:left;border:0;cursor:pointer;display:grid;grid-template-columns:auto 1fr;column-gap:15px}.action>span{font-size:34px;grid-row:1/3}.action b{font-size:20px}.action small{color:var(--muted)}.section-title{display:flex;align-items:end;justify-content:space-between;margin:38px 4px 16px}.section-title h2{margin:4px 0}.icon-btn{border:1px solid var(--line);background:#fff;width:44px;height:44px;border-radius:14px;cursor:pointer}.room-list{display:grid;gap:12px}.room{padding:18px 22px;display:flex;align-items:center;gap:18px}.room .room-icon{font-size:28px}.room-info{flex:1}.room-info b{display:block;font-size:17px}.room-info small{color:var(--muted)}.room .btn{width:auto;padding:11px 18px}.empty{text-align:center;padding:50px;color:var(--muted)}dialog{border:0;border-radius:25px;padding:0;box-shadow:var(--shadow);width:min(520px,calc(100% - 24px))}dialog::backdrop{background:#18102caa;backdrop-filter:blur(6px)}.modal{padding:30px}.close{float:right;border:0;background:#f2effa;border-radius:10px;font-size:25px;cursor:pointer}.row{display:grid;grid-template-columns:1fr 1fr;gap:12px}.code-input{text-transform:uppercase;letter-spacing:.3em;font-size:24px;text-align:center}.lobby-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}.lobby-head h2{margin:3px 0}.code{margin-left:auto;border:0;background:#1f193d;color:#fff;padding:12px 18px;border-radius:13px;font-weight:900;letter-spacing:.15em}.lobby-grid{display:grid;grid-template-columns:1fr 340px;gap:20px}.lobby-grid>.card{padding:25px}.players{display:grid;gap:10px}.player{display:flex;align-items:center;gap:13px;background:#f8f6fd;border-radius:17px;padding:12px}.player .face{font-size:30px}.player b{flex:1}.badge{font-size:11px;font-weight:900;padding:6px 9px;border-radius:20px;background:#e8e4f4;color:var(--muted)}.badge.ready{background:#d9f9eb;color:#14734e}.rules-line{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--line);font-size:13px}.rules .btn{margin-top:25px}#toast{position:fixed;right:20px;bottom:20px;background:#201a38;color:#fff;padding:14px 18px;border-radius:13px;box-shadow:var(--shadow);transform:translateY(100px);opacity:0;transition:.25s;z-index:20}#toast.show{transform:none;opacity:1}.offline{position:fixed;top:12px;left:50%;transform:translateX(-50%);background:#ffdf73;padding:9px 18px;border-radius:20px;font-weight:800;z-index:20}@media(max-width:800px){.grid,.lobby-grid{grid-template-columns:1fr}.hero{min-height:340px;padding:35px}.hero h2{font-size:48px}.hero p{margin-top:0}.setup-card{padding:25px}.avatars{grid-template-columns:repeat(4,1fr)}.actions{grid-template-columns:1fr}.room{align-items:flex-start;flex-wrap:wrap}.room .btn{width:100%}.rules{order:-1}}@media(max-width:380px){.shell{width:min(100% - 20px,1160px)}.avatars{grid-template-columns:repeat(3,1fr)}.hero{padding:25px}.hero h2{font-size:40px}.row{grid-template-columns:1fr}}