:root{--violet-title:#8f559e;--grey-sub:#887884;--pink2:#b47eff;--ink-violet:#34283d;--cream:#fff9f4;--violet3:#d9baff;--grey-soft:#94a3b8;--accent:#a05cec;--accent-strong:#8738e5;--hotpink:#e749aa;--bg:#f9f3f0;--surface:#fffaf8;--surface2:#fff;--text:#251832;--muted:#81768d;--line:#eee3ed;--shadow:0 12px 34px rgba(84,41,104,.08);--radius:19px;--sidebar:#23192e;--right:#fffbfa;--accent-gradient:linear-gradient(115deg,#a548ef,#8d53e4);--light-gradient:linear-gradient(214.38deg,#f1e5eb 0%,#f8efea 100%);--radial-gradient:radial-gradient(105.3% 76.2% at 100% 100.09%,rgba(239,225,219,.95) 0%,rgba(255,252,248,.98) 100%)}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",Arial,sans-serif;font-size:14px;color:var(--text);background:var(--bg)}button,input,select,textarea{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.55}a{color:inherit;text-decoration:none}img{max-width:100%}button:focus-visible,a:focus-visible,input:focus-visible{outline:3px solid #c38eff;outline-offset:3px}::selection{background:#cfb0f4;color:#30133e}
.app-layout{display:grid;grid-template-columns:206px minmax(0,1fr) 258px;min-height:100vh}.left-sidebar{background:linear-gradient(155deg,#271b33,#1d1627 70%);color:#f7f2ff;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:0;padding:24px 14px 22px;z-index:30}.logo{display:flex;align-items:center;gap:7px;color:#fff;font-size:16px;font-weight:900;letter-spacing:-.4px;padding:2px 7px 28px;white-space:nowrap}.logo .sparkle{color:#c99cff;font-size:20px}.compact-player{background:rgba(255,255,255,.075);border:1px solid rgba(255,255,255,.05);border-radius:12px;display:flex;align-items:center;gap:9px;padding:11px 9px;margin-bottom:40px}.mini-avatar,.avatar{background:linear-gradient(135deg,#ee60bb,#7943e6);border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;flex-shrink:0}.mini-avatar{width:33px;height:33px;font-size:11px}.compact-player b{font-size:11px;display:block}.compact-player small{color:#cbbdd6;font-size:10px;display:block;margin-top:4px}.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#49dca8;margin-right:4px;vertical-align:1px}.nav-stack{display:grid;gap:7px}.nav-link{height:40px;width:100%;border:1px solid transparent;background:transparent;border-radius:9px;display:flex;align-items:center;gap:11px;padding:0 13px;color:#dfd5e7;font-size:12px;text-align:left;font-weight:650}.nav-link svg{width:16px;height:16px;stroke-width:1.8}.nav-link:hover{background:rgba(255,255,255,.06);color:#fff}.nav-link.active{background:linear-gradient(98deg,rgba(161,111,220,.28),rgba(111,68,153,.16));border-color:rgba(209,165,255,.4);color:#fff;box-shadow:inset 2px 0 0 #bb79ff}.sidebar-footer{margin-top:auto;color:#8a7a96;font-size:10px;padding:12px 9px 0;line-height:1.6}.sidebar-footer strong{font-size:10px;color:#d0a4fa}.sidebar-mobile-close{display:none}.main-panel{min-width:0;min-height:100vh;background:var(--light-gradient);padding:26px clamp(20px,2.4vw,46px) 65px;position:relative}.main-panel:before{content:"";position:absolute;pointer-events:none;inset:0;background:radial-gradient(circle at 72% 22%,#f8ecfd80,transparent 47%);opacity:.85}.main-content{max-width:1190px;margin:0 auto;position:relative}.right-sidebar{background:var(--right);border-left:1px solid #f0e9ef;padding:20px 18px 24px;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin}.eyebrow{font-size:10px;text-transform:uppercase;letter-spacing:2.4px;font-weight:800;color:#9351b4}.page-title{margin:3px 0 4px;font-size:clamp(27px,2.1vw,35px);line-height:1.12;letter-spacing:-1.5px;font-weight:850}.page-subtitle{margin:0;color:#81768c;line-height:1.6;font-size:12px}.top-heading{display:flex;align-items:center;gap:13px;margin-bottom:15px}.title-emblem{width:46px;height:46px;display:grid;place-items:center;color:#9c54ef;background:linear-gradient(140deg,#fff,#f4e8fd);box-shadow:var(--shadow);border:1px solid #e8d6f7;border-radius:13px;font-size:26px}.top-heading-text{min-width:0}.demo-flag{margin-left:auto;background:#fff7fe;border:1px solid #ead7f0;border-radius:99px;padding:7px 10px;color:#9470a8;font-size:10px;white-space:nowrap;letter-spacing:.2px}.mobile-menu-button{display:none}.top-tabs{display:flex;width:max-content;max-width:100%;gap:0;background:rgba(255,255,255,.74);border:1px solid #f4e8ef;border-radius:12px;box-shadow:0 5px 14px rgba(84,41,104,.025);padding:5px;margin-bottom:19px;overflow:auto;scrollbar-width:none}.tab-btn{border:0;background:transparent;color:#5d4c6b;font-size:11px;padding:10px 16px;font-weight:750;border-radius:9px;white-space:nowrap}.tab-btn:not(:last-child){border-right:1px solid #f1e7f3}.tab-btn.active{background:var(--accent-gradient);color:white;border-right-color:transparent;box-shadow:0 4px 12px #9d5cff33}.tab-btn:hover:not(.active){background:#f7edf9}.hero{background:var(--radial-gradient);border:1px solid #fff;border-radius:19px;box-shadow:var(--shadow);min-height:221px;position:relative;overflow:visible;padding:26px 28px 39px;display:flex;align-items:center}.hero:before{content:"";position:absolute;inset:0;border-radius:19px;pointer-events:none;background:radial-gradient(ellipse at 85% 4%,#e9c4f358,transparent 58%)}.hero-text{width:55%;position:relative;z-index:2}.pill{display:inline-flex;align-items:center;gap:5px;border-radius:99px;padding:6px 11px;background:#f5eafa;border:1px solid #c99cff;color:#7e35d2;font-weight:760;font-size:10px;white-space:nowrap}.hero-kicker{font-size:12px;color:#6e627b;margin-top:14px}.hero-title{font-size:clamp(24px,2.3vw,33px);letter-spacing:-1.3px;line-height:1.18;font-weight:900;margin:7px 0}.hero-desc{color:#8b7a99;font-size:12px;line-height:1.5;max-width:450px;margin:0 0 17px}.hero-visual{position:absolute;right:4%;top:-13px;width:40%;height:225px;object-fit:contain;filter:drop-shadow(0 15px 15px #76578d20)}.primary-btn{background:var(--accent-gradient);border:0;color:#fff;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;gap:8px;font-size:11px;font-weight:750;padding:12px 18px;box-shadow:0 7px 15px #8c47df2c;min-height:37px}.primary-btn:hover{transform:translateY(-1px);box-shadow:0 10px 19px #8c47df3f}.ghost-btn{border:1px solid #eaddf0;background:rgba(255,255,255,.67);color:#5f4773;border-radius:9px;font-size:11px;font-weight:750;padding:10px 15px;min-height:37px}.ghost-btn:hover{border-color:#c89cee;background:#fff}.text-button{border:0;background:none;padding:7px 0;color:#a063c9;font-size:11px;font-weight:750;text-decoration:underline;text-underline-offset:3px}.hero-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.hero-stats{position:absolute;z-index:3;bottom:-17px;right:26px;display:flex;background:rgba(255,251,249,.96);padding:10px 15px;border:1px solid white;border-radius:13px;min-width:44%;box-shadow:var(--shadow);justify-content:space-around}.hero-stats .stat{display:flex;align-items:center;gap:8px;padding:1px 10px}.stat-icon{color:#5c3981;font-size:18px}.hero-stats b{display:block;font-size:14px}.hero-stats small{font-size:9px;display:block;color:#82778f}.section-bar{display:flex;align-items:end;justify-content:space-between;gap:20px;margin:44px 0 15px}.section-bar h2{margin:0;font-size:17px;letter-spacing:-.45px}.section-bar .section-kicker{font-size:11px;color:#8d73a4}.section-tools{display:flex;align-items:center;gap:11px}.search-field{display:flex;align-items:center;gap:5px;border:1px solid #efdfef;background:#fffcfc;border-radius:9px;padding:7px 10px}.search-field input{width:127px;border:0;outline:0;background:transparent;font-size:11px;color:var(--text)}.game-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:13px}.game-card{position:relative;border:1px solid #ecdbec;background:var(--surface);border-radius:12px;overflow:hidden;min-height:135px;box-shadow:0 4px 15px #7c4c8710;transition:transform .18s ease,box-shadow .18s ease;cursor:pointer}.game-card:hover{transform:translateY(-3px);box-shadow:0 13px 29px #6e328829}.card-cover{width:100%;aspect-ratio:1.78;display:block;object-fit:cover;background:#261c34}.game-card .card-overlay{position:absolute;top:0;left:0;right:0;height:calc((100cqw / 1.78));pointer-events:none}.game-card-content{position:relative;padding:10px 11px 11px;display:flex;align-items:center;justify-content:space-between;gap:7px}.game-card strong{font-size:13px;display:block}.game-card small{font-size:10px;display:block;color:#80728e;margin-top:3px}.card-launch{width:29px;height:29px;border:0;border-radius:8px;background:#f3e7f7;color:#8145ba;font-size:18px;font-weight:700;flex-shrink:0}.game-card:hover .card-launch{background:var(--accent-gradient);color:#fff}.nothing-found{padding:44px 12px;text-align:center;border:1px dashed #cca9dc;border-radius:12px;color:#796786}.vitrine-note{font-size:10px;color:#a18eaa;margin-top:30px;text-align:center}.label-chip{border-radius:6px;background:#f3e7fa;padding:4px 7px;color:#9a64b3;font-size:10px}.summary-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:18px 0}.summary-card{background:#fffbfb;border:1px solid #f0e8ef;padding:20px;border-radius:14px}.summary-card strong{display:block;font-size:24px}.summary-card span{font-size:11px;color:var(--muted)}
/* Right column mirrors the mock-up on every screen */
.profile-panel{background:linear-gradient(172deg,#fcf4fb,#fffaf6);border:1px solid #f0e4f1;border-radius:12px;padding:14px 12px 12px;box-shadow:0 4px 18px #8a52720d}.profile-head{display:flex;align-items:center;gap:9px;margin-bottom:14px}.avatar{width:30px;height:30px;font-size:10px}.avatar.big{height:42px;width:42px;font-size:15px;background:linear-gradient(135deg,#c43f91,#40257c);border:3px solid #cc9deb;box-shadow:0 0 0 3px #fff}.profile-head strong{display:block;font-size:10px}.profile-head small{font-size:9px;color:#a083a4}.right-progress-head{display:flex;justify-content:space-between;gap:5px;color:#756480;font-size:9px;margin:8px 0 5px}.progress-bar{height:5px;background:#e6dced;border-radius:99px;overflow:hidden}.progress-bar span{display:block;height:100%;width:72%;border-radius:99px;background:linear-gradient(90deg,#4e315c,#d0a3fd)}.right-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:17px}.right-stats>div{text-align:center;border-right:1px solid #efe4ec}.right-stats>div:last-child{border:0}.right-stats b{display:block;font-size:13px}.right-stats small{font-size:9px;color:var(--muted)}.right-section-title{font-size:12px;font-weight:780;margin:23px 0 11px}.connected-people{display:grid;gap:11px}.player-list-row{display:flex;align-items:center;gap:8px;min-width:0}.player-list-row .avatar{width:29px;height:29px}.player-list-row b{display:block;font-size:10px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.player-list-row small{color:#95869e;font-size:9px}.player-list-row .online-dot{position:absolute;bottom:0;right:0;border:1px solid white}.avatar-wrap{position:relative}.live-widget{margin-top:22px;background:linear-gradient(155deg,#faf0f6,#fffcfa);border-radius:12px;padding:13px 12px;box-shadow:0 4px 17px #8b517810;border:1px solid #f4e6f0}.live-widget-head{display:flex;gap:7px;align-items:center;font-size:11px;font-weight:770;margin-bottom:13px}.live-widget strong{display:block;font-size:12px}.live-widget p{margin:7px 0;font-size:10px;color:#8b7793}.live-widget .primary-btn{width:100%;font-size:10px;min-height:32px;padding:8px}.room-mini-stats{display:flex;justify-content:space-around;text-align:center;margin-top:13px}.room-mini-stats strong{font-size:14px}.room-mini-stats small{display:block;color:#9b829e;font-size:9px}.sidebar-dark-label{padding:11px 6px;margin-top:10px;color:#aa8daf;font-size:10px}
/* Details pages */
.back-title{display:flex;align-items:center;gap:12px;margin-bottom:18px}.back-btn{width:40px;height:40px;background:#fff;border:1px solid #e6d0eb;border-radius:9px;font-size:22px;color:#8c56b0;display:grid;place-items:center}.back-title .eyebrow{font-size:9px}.back-title h1{font-size:22px;margin:2px 0;letter-spacing:-.65px}.game-hero{display:grid;grid-template-columns:42% 1fr 104px;gap:15px;align-items:center;border:1px solid white;background:var(--radial-gradient);border-radius:18px;padding:19px;box-shadow:var(--shadow);min-height:210px}.game-hero-art{height:183px;width:100%;object-fit:cover;border-radius:13px}.game-hero h2{font-size:25px;margin:10px 0 5px;letter-spacing:-1px}.game-hero p{color:#83738f;font-size:12px;line-height:1.5;max-width:390px;margin:0 0 14px}.game-hero .action-set{display:flex;gap:10px;flex-wrap:wrap}.game-facts{border-left:1px solid #e8daea;display:grid;gap:21px;align-content:center;justify-content:center;padding-left:8px}.game-fact{color:#8a48d1;font-size:23px}.game-fact small{font-size:10px;color:#82768e;display:block;margin-top:2px}.room-list{display:grid;gap:10px}.room-row{display:grid;grid-template-columns:40px minmax(145px,1fr) 65px 125px 96px;align-items:center;gap:13px;border:1px solid #f2e6ee;border-radius:11px;padding:9px 12px;background:#fffcfb;box-shadow:0 3px 12px #a48ea21a}.room-row .room-icon{width:40px;height:40px;border-radius:8px;object-fit:cover}.room-row b{font-size:12px;display:block}.room-row small{font-size:10px;color:var(--muted)}.avatar-stack{display:flex}.avatar-stack .avatar{width:24px;height:24px;font-size:8px;border:2px solid #fff;margin-left:-6px}.avatar-stack .avatar:first-child{margin-left:0}.room-row .primary-btn{padding:8px 10px;min-height:32px}.room-row .secondary-room{font-weight:700;font-size:11px;color:#735486}.empty-state{border:1px dashed #d9bade;border-radius:14px;padding:42px;background:#ffffff9c;text-align:center;color:#85738f}.big-title{font-size:18px;font-weight:820;letter-spacing:-.5px}.panel{background:var(--surface);border:1px solid #f2e8f0;border-radius:17px;padding:19px;box-shadow:var(--shadow)}.leader-row{padding:11px 4px;display:grid;grid-template-columns:32px 1fr auto;gap:11px;align-items:center;border-bottom:1px solid #eee5ee}.leader-row:last-child{border:0}.leader-rank{font-weight:800;color:#a669cb}.leader-score{font-weight:800;font-size:12px;color:#873fbb}.rules-body{line-height:1.75;color:#6a6173;font-size:13px}.rules-body h3{color:var(--text)}.rules-body ul{padding-left:18px}.mode-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:13px}.mode-card{border:1px solid #f1e2eb;border-radius:12px;background:#fffaf9;padding:13px;text-align:center;cursor:pointer}.mode-card:hover{border-color:#b485e5;transform:translateY(-2px)}.mode-card img{width:100%;max-width:160px;border-radius:10px}.mode-card strong{display:block;margin-top:9px}.mode-card small{font-size:11px;color:var(--muted)}
/* Live demo boards */
.demo-board-shell{max-width:1140px;margin:auto}.board-top{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:19px}.board-pill{border:1px solid #ddc3ee;border-radius:99px;background:#fff9ff;padding:10px 14px;font-size:11px;font-weight:700;color:#8143b0}.board-card{background:radial-gradient(circle at 50% 43%,#fff9f7,#f6e9f0 75%);border:1px solid #eadbe7;border-radius:22px;min-height:415px;box-shadow:0 9px 25px #60417212;padding:22px}.board-card h2{text-align:center;font-size:16px}.card-table{width:min(520px,100%);height:325px;border:7px solid #fff8;outline:1px solid #edd9e3;border-radius:50%;margin:0 auto;position:relative;display:grid;place-items:center;background:linear-gradient(130deg,#f5e7f0,#fff7ee)}.seat{position:absolute;display:flex;align-items:center;gap:7px;font-size:10px;font-weight:700;color:#74627b}.seat .avatar{width:30px;height:30px}.seat.n{top:15px;left:45%}.seat.e{right:10px;top:45%}.seat.w{left:10px;top:45%}.seat.s{bottom:10px;left:45%}.played-cards{display:flex;gap:4px}.play-card{width:65px;height:98px;border:1px solid #e9dde5;border-radius:9px;background:white;box-shadow:0 5px 9px #8b6b8b21;display:grid;place-items:center;font-weight:800;font-size:23px;color:#833c8f;cursor:pointer;transition:transform .15s}.play-card:hover{transform:translateY(-6px)}.play-card.red{color:#e94e64}.hand{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;margin-top:16px}.hand .play-card{width:50px;height:75px;font-size:20px}.hand .play-card.selected{transform:translateY(-10px);box-shadow:0 0 0 3px #a263e8,0 12px 14px #8852a744}.board-action-row{display:flex;justify-content:center;align-items:center;gap:13px;margin:20px auto 0;flex-wrap:wrap}.codenames-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:9px;max-width:830px;margin:18px auto}.code-tile{height:68px;border:1px solid #ead8e5;border-radius:9px;background:#fffdfb;font-size:12px;font-weight:780;color:#49394f;box-shadow:0 2px 5px #ad7b9923}.code-tile.red{background:linear-gradient(145deg,#e5678e,#c72c67);color:white;border-color:#e8799e}.code-tile.blue{background:linear-gradient(145deg,#7aaeff,#296dd1);color:white;border-color:#83b8fa}.code-tile.neutral{background:#dbcbd4;color:#796b7c}.code-tile:disabled{opacity:1;cursor:default}.code-scores{display:flex;justify-content:space-between;align-items:center;gap:16px;margin:4px auto 14px;max-width:830px}.score-box{background:#fff9fa;border:1px solid #eddfeb;border-radius:10px;padding:12px 16px;font-size:12px;font-weight:800;color:#db4c7b}.score-box.blue{color:#4778ce}.hidden-role{max-width:480px;background:#fff9fc;border:1px solid #ead9e7;margin:10px auto 22px;padding:22px;text-align:center;border-radius:16px}.secret-word{font-size:40px;font-weight:900;color:#a24ac7;letter-spacing:.5px;margin:10px}.undercover-players{display:grid;grid-template-columns:repeat(5,1fr);gap:10px}.undercover-player{background:#fff9fc;border:1px solid #eedbea;border-radius:12px;text-align:center;padding:16px 7px;font-size:10px}.undercover-player .avatar{margin:0 auto 8px;height:42px;width:42px}.undercover-player b{display:block}.undercover-player small{color:green}.board-input{width:100%;padding:13px;border:1px solid #e7d6e6;border-radius:8px;color:var(--text);background:#fffdfd}.quiz-card{padding:27px 30px;background:#fff9fa;border-radius:15px;max-width:760px;margin:23px auto}.quiz-question{text-align:center;font-size:21px;font-weight:800;margin:22px auto;max-width:600px}.quiz-options{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}.quiz-option{background:#faf0f5;border:1px solid #ebd8e4;border-radius:10px;padding:16px;text-align:left;font-size:12px;color:#4a3b53}.quiz-option.selected,.quiz-option:hover{background:var(--accent-gradient);color:#fff}.wordle-grid{display:grid;grid-template-columns:repeat(5,52px);grid-template-rows:repeat(6,52px);gap:5px;justify-content:center;margin:14px auto}.wordle-tile{background:#f8f5f8;border:2px solid #e2d6e5;border-radius:6px;display:grid;place-items:center;font-size:25px;font-weight:850;text-transform:uppercase}.wordle-tile.correct{background:#43ae79;border-color:#43ae79;color:#fff}.wordle-tile.present{background:#d8ad44;border-color:#d8ad44;color:#fff}.wordle-tile.absent{background:#8c8395;border-color:#8c8395;color:white}.keyboard{display:flex;flex-wrap:wrap;justify-content:center;gap:5px;max-width:630px;margin:auto}.keyboard button{border:0;background:#e5dbe5;border-radius:5px;min-width:30px;padding:9px 6px;font-weight:770;font-size:12px}.keyboard button:hover{background:#c99de8}.bull-rows{display:grid;gap:10px;max-width:750px;margin:10px auto}.bull-row{display:flex;gap:7px;align-items:center;background:#fff7fa;padding:8px;border-radius:12px;min-height:72px}.bull-row .play-card{width:49px;height:61px;font-size:17px;flex-shrink:0;color:#9f39af}.bull-row .row-number{width:26px;text-align:center;font-size:12px;font-weight:800;color:#968099}.bull-row .placeholder{border:2px dashed #dac4dc;width:49px;height:61px;border-radius:8px}.uno-arena{position:relative;width:90%;max-width:690px;min-height:340px;margin:auto;border:2px solid #d5b5e8;border-radius:50%;display:grid;place-items:center;background:radial-gradient(ellipse,#f6e8f4,#f9eff1)}.uno-arena .uno-pile{display:flex;gap:10px}.uno-arena .seat.n{top:10px;left:45%}.uno-arena .seat.e{right:5px;top:45%}.uno-arena .seat.w{left:5px;top:45%}.daily-pick{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:0 0 18px}.daily-pick .mode-card.active{border-color:#9d4ddd;box-shadow:0 0 0 2px #b988ed}.board-message{text-align:center;color:#997cac;font-size:12px;min-height:18px;margin:10px auto}
/* Modal */
.modal-backdrop{position:fixed;inset:0;z-index:80;background:#160f27aa;display:grid;place-items:center;padding:16px;backdrop-filter:blur(5px)}.modal-card{background:var(--surface2);border:1px solid #ead2f1;padding:24px;border-radius:19px;width:min(460px,100%);box-shadow:0 26px 75px #0e0a243d;position:relative}.modal-close{position:absolute;top:12px;right:12px;width:29px;height:29px;border:0;border-radius:8px;background:#f1e7f3;font-size:19px;color:#7c528c}.modal-card h2{margin:3px 0 10px;font-size:21px}.modal-card p{font-size:12px;color:var(--muted);line-height:1.7}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.modal-demo-label{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:1px;color:#a567cf}.modal-users{display:flex;align-items:center;gap:8px;margin:16px 0}.toast{position:fixed;bottom:25px;left:50%;transform:translateX(-50%);z-index:90;background:#2b1b3f;color:#fff;padding:12px 19px;border-radius:12px;box-shadow:0 12px 45px #21152e44;font-size:12px;max-width:calc(100% - 25px)}
/* Dark palette retains the original visual grammar */
body[data-theme=dark]{--bg:#151020;--surface:#251b34;--surface2:#29203b;--text:#f8f3ff;--muted:#beb0c8;--line:#45334f;--right:#1c1628;--light-gradient:linear-gradient(145deg,#21182c,#1a1324 80%);--radial-gradient:radial-gradient(ellipse at 80% 95%,#302139,#211927 76%);--shadow:0 12px 40px #08040c42;color:#f8f3ff}
body[data-theme=dark] .main-panel:before{opacity:.22}body[data-theme=dark] .hero,body[data-theme=dark] .game-hero,body[data-theme=dark] .panel,body[data-theme=dark] .game-card,body[data-theme=dark] .profile-panel,body[data-theme=dark] .live-widget,body[data-theme=dark] .summary-card,body[data-theme=dark] .room-row,body[data-theme=dark] .mode-card,body[data-theme=dark] .modal-card{background:#271c34;border-color:#493351}body[data-theme=dark] .top-tabs,body[data-theme=dark] .hero-stats,body[data-theme=dark] .game-card-content,body[data-theme=dark] .quiz-card,body[data-theme=dark] .undercover-player,body[data-theme=dark] .hidden-role,body[data-theme=dark] .search-field,body[data-theme=dark] .score-box{background:#2a2037;border-color:#493351}body[data-theme=dark] .ghost-btn,body[data-theme=dark] .board-pill,body[data-theme=dark] .back-btn,body[data-theme=dark] .code-tile:not(.red):not(.blue):not(.neutral),body[data-theme=dark] .quiz-option:not(.selected),body[data-theme=dark] .board-input{background:#33243d;border-color:#533c60;color:#f9f4ff}body[data-theme=dark] .hero:before{opacity:.1}body[data-theme=dark] .title-emblem{background:#34223e;border-color:#50335d}body[data-theme=dark] .right-sidebar{border-color:#392842}body[data-theme=dark] .tab-btn{color:#d8cae7}body[data-theme=dark] .tab-btn.active{color:#fff}body[data-theme=dark] .tab-btn:not(.active):hover{background:#473352}body[data-theme=dark] .room-row small,body[data-theme=dark] .game-card small,body[data-theme=dark] .profile-head small,body[data-theme=dark] .page-subtitle,body[data-theme=dark] .hero-desc{color:#c4b6ca}body[data-theme=dark] .play-card{background:#382843;border-color:#65506f;color:#e6bcff}body[data-theme=dark] .play-card.red{color:#ff8599}body[data-theme=dark] .bull-row{background:#30243a}body[data-theme=dark] .card-table,body[data-theme=dark] .uno-arena,body[data-theme=dark] .board-card{background:radial-gradient(circle,#302038,#211729);border-color:#463151}body[data-theme=dark] .wordle-tile{background:#3a3044;border-color:#56475f}body[data-theme=dark] .wordle-tile.correct{background:#43ae79}body[data-theme=dark] .wordle-tile.present{background:#d8ad44}body[data-theme=dark] .wordle-tile.absent{background:#8c8395}body[data-theme=dark] .keyboard button{background:#43354d;color:#fff}body[data-theme=dark] .demo-flag{background:#38293f;color:#d7badd;border-color:#62466a}
@media (max-width:1250px){.app-layout{grid-template-columns:188px minmax(0,1fr) 218px}.right-sidebar{padding:16px 12px}.main-panel{padding:25px 22px 55px}.game-grid{gap:10px}.game-hero{grid-template-columns:38% 1fr 82px}.hero{min-height:215px}}
@media (max-width:1040px){.app-layout{grid-template-columns:180px minmax(0,1fr)}.right-sidebar{display:none}.hero-stats{min-width:40%}.game-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:730px){.app-layout{display:block}.left-sidebar{position:fixed;left:-232px;top:0;bottom:0;max-width:220px;width:220px;transition:left .2s;box-shadow:9px 0 29px #160d2540}.left-sidebar.open{left:0}.sidebar-mobile-close{display:block;position:absolute;right:8px;top:11px;width:30px;height:30px;border:0;border-radius:8px;background:#4f3461;color:#fff}.main-panel{min-height:100vh;padding:17px 15px 35px}.mobile-menu-button{display:grid;place-items:center;flex-shrink:0;width:39px;height:40px;border-radius:10px;background:#fff9;border:1px solid #e9d6ed;color:#643e82}.top-heading{gap:10px}.title-emblem{width:40px;height:40px;font-size:22px}.page-title{font-size:25px}.demo-flag{display:none}.top-tabs{width:100%;margin-bottom:14px}.tab-btn{padding:10px 12px}.hero{padding:21px 20px 72px;min-height:255px}.hero-visual{right:0;top:0;height:170px;opacity:.85;max-width:45%}.hero-text{width:70%}.hero-stats{left:16px;right:16px;min-width:0;bottom:12px;padding:8px}.hero-title{font-size:24px}.section-bar{margin:23px 0 12px;align-items:flex-start}.game-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.section-tools{gap:4px}.search-field input{max-width:95px}.game-hero{grid-template-columns:1fr;padding:14px}.game-hero-art{height:158px}.game-facts{border-left:0;border-top:1px solid #dfcde3;padding-top:15px;display:flex;justify-content:space-around}.room-row{grid-template-columns:34px minmax(80px,1fr) 65px;gap:9px}.room-row .avatar-stack{display:none}.room-row .primary-btn{grid-column:3}.room-row .room-icon{width:34px;height:34px}.undercover-players{grid-template-columns:repeat(3,1fr)}.mode-cards{grid-template-columns:1fr 1fr}.code-tile{height:52px;font-size:9px}.card-table{height:265px}.play-card{width:50px;height:79px}.wordle-grid{grid-template-columns:repeat(5,42px);grid-template-rows:repeat(6,42px)}.wordle-tile{font-size:20px}.board-card{padding:12px;min-height:340px}.board-top{flex-wrap:wrap}.quiz-card{padding:18px}.quiz-options{grid-template-columns:1fr}.daily-pick{grid-template-columns:1fr}.logo{padding-top:10px}.summary-cards{grid-template-columns:1fr}}
@media (max-width:395px){.hero-text{width:83%}.hero-visual{opacity:.26;width:50%}.section-bar{flex-wrap:wrap}.section-tools{width:100%;justify-content:flex-end}.game-card-content{padding:8px}.game-card strong{font-size:12px}.game-card small{font-size:9px}.board-card{padding:9px}.bull-row{gap:3px}.bull-row .play-card{width:38px;height:55px}.bull-row .placeholder{width:38px;height:55px}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important;animation:none!important}}