.logo-z{color:#f59e0b;font-weight:900}.logo-k{color:#7c3aed;font-weight:900}.btn-primary{background:var(--primary);color:#fff;border:none;border-radius:8px;padding:10px 20px;font-size:15px;font-weight:600;transition:background .2s}.btn-primary:hover:not(:disabled){background:var(--primary-hover)}.btn-primary:disabled{opacity:.5;cursor:not-allowed}.btn-secondary{background:transparent;color:var(--primary);border:2px solid var(--primary);border-radius:8px;padding:8px 18px;font-size:14px;font-weight:600;transition:all .2s}.btn-secondary:hover:not(:disabled){background:var(--primary);color:#fff}.btn-secondary:disabled{opacity:.4;cursor:not-allowed}.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border);border-radius:8px;padding:8px 16px;font-size:14px;transition:all .2s}.btn-ghost:hover{color:var(--text);border-color:var(--text-muted)}.auth-page{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at 30% 40%,#1a0a3a,#0f0f1a 70%)}.auth-page-stack{display:flex;flex-direction:column;align-items:center;gap:20px;width:100%;max-width:400px}.auth-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px 36px;width:100%;max-width:400px;box-shadow:0 20px 60px #00000080;position:relative;overflow:hidden}.auth-logo{font-size:36px;font-weight:900;text-align:center;margin-bottom:4px;letter-spacing:-1px}.auth-tagline{text-align:center;color:var(--text-muted);font-size:13px;margin-bottom:28px}.auth-tabs{display:flex;gap:4px;background:var(--bg);border-radius:8px;padding:4px;margin-bottom:24px}.auth-tabs button{flex:1;padding:8px;border:none;border-radius:6px;background:transparent;color:var(--text-muted);font-weight:600;font-size:14px;transition:all .2s}.auth-tabs button.active{background:var(--primary);color:#fff}.auth-form{display:flex;flex-direction:column;gap:12px}.auth-form input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:12px 14px;color:var(--text);font-size:15px;transition:border-color .2s}.auth-form input:focus{outline:none;border-color:var(--primary)}.password-field{position:relative;display:flex;align-items:center}.password-field input{width:100%;padding-right:42px}.pw-toggle{position:absolute;right:10px;background:none;border:none;padding:4px;color:var(--text-muted);cursor:pointer;display:flex;align-items:center;border-radius:4px;transition:color .15s}.pw-toggle:hover{color:var(--text)}.auth-error{background:#3a1a1a;color:#ff6b6b;border-radius:6px;padding:10px 14px;font-size:14px;border-left:3px solid #ff6b6b}.auth-shapes{display:flex;justify-content:center;gap:12px;margin-top:24px;font-size:20px}.deco-shape{animation:float 3s ease-in-out infinite;display:inline-block}@keyframes float{0%,to{transform:translateY(0)}50%{transform:translateY(-6px)}}.lobby-page{min-height:100vh;display:flex;flex-direction:column}.lobby-header{display:flex;align-items:center;justify-content:space-between;padding:16px 24px;padding-top:max(16px,env(safe-area-inset-top));padding-left:max(24px,env(safe-area-inset-left));padding-right:max(24px,env(safe-area-inset-right));background:var(--surface);border-bottom:1px solid var(--border)}.logo-small{font-size:24px;font-weight:900;letter-spacing:-.5px}.header-right{display:flex;align-items:center;gap:12px}.username-badge{color:var(--text-muted);font-size:14px}.lobby-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);background:var(--surface);padding:0 24px}.lobby-tabs button{padding:14px 20px;border:none;border-bottom:2px solid transparent;background:transparent;color:var(--text-muted);font-size:14px;font-weight:600;transition:all .2s;margin-bottom:-1px}.lobby-tabs button.active{color:var(--primary);border-bottom-color:var(--primary)}.lobby-tabs button:hover:not(.active){color:var(--text)}.lobby-content{flex:1;padding:24px;max-width:800px;width:100%;margin:0 auto}.lobby-actions{margin-bottom:20px;display:flex;justify-content:center}.lobby-demo-wrap{display:flex;justify-content:center;margin-bottom:24px}.rooms-list{display:flex;flex-direction:column;gap:10px}.room-card{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:16px 20px;transition:border-color .2s}.room-card:hover{border-color:var(--primary)}.room-id{font-weight:700;font-size:16px;display:flex;align-items:center;gap:6px}.room-host-badge{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;padding:2px 6px;border-radius:10px;background:#7c3aed33;color:var(--primary);border:1px solid rgba(124,58,237,.4)}.btn-danger{color:#ff6b6b!important;border-color:#e5393566!important}.btn-danger:hover{background:#e539351f!important;border-color:#ff6b6b!important}.room-players{color:var(--text-muted);font-size:13px;margin-top:4px;display:block}.error-state{background:#e539351a;border:1px solid var(--ruby);border-radius:8px;padding:12px 16px;color:#ff6b6b;font-size:13px;margin-bottom:12px}.empty-state{text-align:center;color:var(--text-muted);padding:60px 20px;font-size:15px}.my-stats{margin-bottom:24px}.my-stats h3{margin-bottom:12px}.stats-grid{display:flex;gap:12px}.stat{flex:1;background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:12px;text-align:center}.stat span{display:block;font-size:24px;font-weight:700;color:var(--primary)}.stat{font-size:12px;color:var(--text-muted)}.leaderboard-table{width:100%;border-collapse:collapse;font-size:14px}.leaderboard-table th{text-align:left;padding:10px 12px;background:var(--surface);color:var(--text-muted);font-weight:600;border-bottom:1px solid var(--border)}.leaderboard-table td{padding:10px 12px;border-bottom:1px solid var(--border)}.leaderboard-table tr.highlight{background:#7c3aed1a}.leaderboard-table tr:hover{background:#ffffff08}.how-to-play h2{margin-bottom:20px;font-size:24px}.how-to-play h3{margin:20px 0 8px;color:var(--accent)}.how-to-play p,.how-to-play li{color:var(--text-muted);line-height:1.6;font-size:15px}.how-to-play ul{padding-left:20px}.how-to-play li{margin-bottom:6px}.how-to-play strong{color:var(--text)}.shape-legend{display:flex;gap:16px;flex-wrap:wrap;margin:12px 0}.shape-item{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:28px}.shape-item small{font-size:11px;color:var(--text-muted)}.game-page{position:fixed;top:0;left:0;width:100%;height:100dvh;display:flex;flex-direction:column;background:var(--bg);overflow:hidden;overscroll-behavior:none;touch-action:none}.mob-header,.mob-status,.mob-actions,.mob-pregame{display:none}.mob-hidden{display:none!important}.game-body{display:flex;flex-direction:row;flex:1;min-height:0}.game-sidebar{width:210px;min-width:210px;background:var(--surface);border-right:1px solid var(--border);display:flex;flex-direction:column;padding:12px 10px;gap:8px;overflow-y:auto}.sidebar-logo-row{display:flex;align-items:center;justify-content:space-between;padding-bottom:10px;border-bottom:1px solid var(--border)}.sidebar-logo{font-size:18px;font-weight:900}.players-panel{display:flex;flex-direction:column;gap:6px}.player-row{background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:8px 10px;transition:all .2s}.player-row.active-turn{border-color:var(--accent);background:#f59e0b14}.player-row.me{border-color:var(--primary)}.player-name{font-size:12px;font-weight:600;display:flex;align-items:center;gap:4px}.turn-arrow{color:var(--accent);font-size:10px}.player-score{font-size:16px;font-weight:700;color:var(--accent)}.hand-size{font-size:11px;color:var(--text-muted)}.bag-count{font-size:12px;color:var(--text-muted);padding:6px 8px;background:var(--bg);border-radius:6px;border:1px solid var(--border)}.last-msg{font-size:11px;color:var(--jade);padding:6px 8px;background:#43a0471a;border-radius:6px;border-left:3px solid var(--jade)}.move-error{font-size:11px;color:#ff6b6b;padding:6px 8px;background:#e539351a;border-radius:6px;border-left:3px solid var(--ruby)}.game-actions{display:flex;flex-direction:column;gap:6px}.swap-hint{font-size:11px;color:var(--text-muted)}.waiting-msg{font-size:12px;color:var(--text-muted);text-align:center;padding:8px 0}.bot-thinking,.mob-wait.bot-thinking{font-size:11px;color:var(--accent);padding:6px 8px;background:#f59e0b1a;border-radius:6px;border-left:3px solid var(--accent);animation:bot-thinking-pulse 1.4s ease-in-out infinite}@keyframes bot-thinking-pulse{0%,to{opacity:1}50%{opacity:.55}}.board-viewport{flex:1;min-height:0;position:relative;overflow:hidden}.board-world{position:relative;background:radial-gradient(ellipse at 30% 30%,rgba(124,58,237,.07) 0%,transparent 60%),repeating-linear-gradient(0deg,transparent,transparent 55px,rgba(255,255,255,.025) 55px,rgba(255,255,255,.025) 56px),repeating-linear-gradient(90deg,transparent,transparent 55px,rgba(255,255,255,.025) 55px,rgba(255,255,255,.025) 56px),var(--bg)}.board-cell-wrapper{position:absolute;display:flex;align-items:center;justify-content:center}.staged-cell{z-index:2;cursor:pointer}.kwerzo-tile.highlighted{border-color:#fbbf24!important;box-shadow:0 0 0 3px #fbbf24d9,0 0 14px #fbbf2473!important}.kwerzo-demo{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:16px 20px 14px;width:100%;max-width:400px;box-shadow:0 12px 36px #00000059}.kwerzo-demo-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}.kwerzo-demo-title{font-size:13px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em}.kwerzo-demo-turn{font-size:12px;font-weight:600;color:var(--primary);background:#7c3aed1f;border-radius:999px;padding:3px 10px}.kwerzo-demo-board{position:relative;margin:0 auto;background:radial-gradient(ellipse at 30% 30%,rgba(124,58,237,.07) 0%,transparent 60%),var(--bg);border-radius:8px;border:1px solid var(--border)}.kwerzo-demo-cell{position:absolute;box-sizing:border-box;border:1px solid rgba(255,255,255,.04)}.kwerzo-demo-tile-wrap{position:absolute;display:flex;align-items:center;justify-content:center}.kwerzo-demo-score{position:absolute;top:6px;right:6px;background:#7c3aedeb;color:#fff;font-weight:800;font-size:13px;padding:4px 10px;border-radius:999px;animation:demo-score-pop .4s ease-out;white-space:nowrap}.kwerzo-demo-score.kwerzo{background:linear-gradient(135deg,#f59e0b,#e91e63);font-size:14px}@keyframes demo-score-pop{0%{transform:scale(.4) translateY(6px);opacity:0}60%{transform:scale(1.15);opacity:1}to{transform:scale(1);opacity:1}}.kwerzo-demo-caption{margin-top:12px;font-size:12.5px;color:var(--text-muted);text-align:center;min-height:32px;line-height:1.4}.tile-reveal{animation:tile-pop-in .28s ease-out}@keyframes tile-pop-in{0%{transform:scale(.3);opacity:0}60%{transform:scale(1.12);opacity:1}to{transform:scale(1);opacity:1}}.drop-target{position:absolute;border:2px dashed rgba(124,58,237,.45);border-radius:8px;background:#7c3aed0f;transition:background .15s;cursor:pointer;z-index:1;box-sizing:border-box}.drop-target:hover,.drop-target:active{background:#7c3aed2e;border-color:var(--primary)}.board-controls{position:absolute;bottom:14px;right:14px;z-index:20;display:flex;flex-direction:column;gap:4px}.board-ctrl-btn{width:38px;height:38px;background:var(--surface);border:1.5px solid var(--border);border-radius:10px;font-size:18px;font-weight:700;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 8px #0000002e;transition:background .15s,color .15s;line-height:1;-webkit-user-select:none;user-select:none}.board-ctrl-btn:hover{background:var(--primary);color:#fff;border-color:var(--primary)}.board-ctrl-btn:active{opacity:.75}.tile-tray{flex-shrink:0;display:flex;flex-direction:row;align-items:center;gap:6px;padding:8px 12px;background:var(--surface);border-top:1px solid var(--border);overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-height:68px;touch-action:none}.tile-tray::-webkit-scrollbar{display:none}.tray-empty{font-size:12px;color:var(--text-muted);white-space:nowrap}.hand-slot{flex-shrink:0;border-radius:8px;border:2px solid transparent;transition:border-color .15s,transform .1s;cursor:pointer;touch-action:none}.hand-slot:active{transform:scale(.93)}.hand-slot.used{opacity:.3;cursor:not-allowed}.hand-slot.swap-selected{border-color:var(--accent);background:#f59e0b1f}.hand-slot.selected-slot{border-color:var(--primary)}.hand-slot.dragging-tile{opacity:.4;transform:scale(.9)}@media(max-width:1023px){.game-sidebar{display:none}.mob-header{display:flex;flex-direction:column;flex-shrink:0;gap:6px;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));background:var(--surface);border-bottom:1px solid var(--border);z-index:10}.mob-header-top{display:flex;align-items:center;justify-content:space-between}.mob-header-right{display:flex;align-items:center;gap:10px}.mob-logo{font-size:18px;font-weight:900;letter-spacing:-.5px}.mob-scores{display:flex;flex-wrap:wrap;gap:6px}.mob-score-chip{white-space:nowrap;font-size:12px;color:var(--text-muted);background:var(--bg);border-radius:20px;padding:3px 8px;border:1px solid var(--border)}.mob-score-chip.active{background:#f59e0b26;border-color:var(--accent);color:var(--accent);font-weight:700}.mob-bag{font-size:12px;color:var(--text-muted)}.mob-leave-btn{flex-shrink:0;width:34px;height:34px;background:transparent;border:1px solid var(--border);border-radius:8px;color:var(--text-muted);font-size:15px;cursor:pointer;display:flex;align-items:center;justify-content:center}.mob-status{display:flex;flex-shrink:0;align-items:center;min-height:32px;padding:4px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));background:var(--surface);border-top:1px solid var(--border);font-size:12px;gap:8px}.mob-ok{color:var(--jade);font-weight:600}.mob-err{color:#ff6b6b;font-weight:600}.mob-wait{color:var(--text-muted)}.mob-actions{display:flex;flex-shrink:0;flex-direction:row;align-items:center;flex-wrap:wrap;gap:6px;padding:6px 10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(6px,env(safe-area-inset-bottom));background:var(--surface);border-top:1px solid var(--border);overflow:hidden}.tile-tray{padding:10px 12px;gap:8px;overflow-x:visible}@media(orientation:landscape)and (max-height:500px){.mob-header{flex-direction:row;align-items:center;padding:4px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right));padding-top:max(4px,env(safe-area-inset-top));gap:10px}.mob-header-top{flex:1;min-width:0}.mob-scores{flex:2;justify-content:center;flex-wrap:nowrap;overflow-x:auto;gap:4px}.mob-score-chip{font-size:11px;padding:2px 6px}.mob-status{min-height:24px;padding:2px 12px;padding-left:max(12px,env(safe-area-inset-left));padding-right:max(12px,env(safe-area-inset-right))}.mob-actions{padding:4px 10px;padding-left:max(10px,env(safe-area-inset-left));padding-right:max(10px,env(safe-area-inset-right));padding-bottom:max(4px,env(safe-area-inset-bottom))}.tile-tray{padding:5px 12px}}.pregame-active .game-body,.pregame-active .mob-status,.pregame-active .mob-actions,.pregame-active .tile-tray{display:none}.pregame-active .mob-pregame{flex:1}.mob-pregame{display:flex;flex-direction:column;flex:1;min-height:0;overflow-y:auto;padding:24px 20px 20px;background:var(--bg);gap:12px}.mob-pregame-title{font-size:18px;font-weight:700;color:var(--text);text-align:center;margin-bottom:4px}.mob-pregame-roomid{color:var(--primary);letter-spacing:2px}.mob-pregame-players{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:12px}.mob-pregame-player{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:var(--text);padding:6px 2px;border-bottom:1px solid var(--border)}.mob-pregame-player:last-child{border-bottom:none}.mob-pregame-pname{flex:1}.mob-pregame-empty{color:var(--text-muted);font-weight:400;font-style:italic;font-size:13px}.mob-pregame-section-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;color:var(--text-muted);margin-top:4px}}.kwerzo-tile{display:flex;align-items:center;justify-content:center;background:var(--surface2);border:2px solid var(--border);border-radius:8px;transition:transform .1s,box-shadow .1s,border-color .1s;-webkit-user-select:none;user-select:none}.kwerzo-tile.selected{border-color:var(--primary);box-shadow:0 0 0 3px #7c3aed4d;transform:scale(1.08)}.kwerzo-tile.staged{border-color:var(--accent);box-shadow:0 0 12px #f59e0b4d;background:#f59e0b14}.kwerzo-tile.tile-ghost{opacity:.35}.turn-overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:50;display:flex;align-items:center;justify-content:center;background:#00000059;cursor:pointer}.turn-overlay-msg{background:#0f0f1aed;border:1px solid rgba(124,58,237,.6);color:#fff;padding:24px 32px;border-radius:20px;box-shadow:0 8px 32px #00000080;display:flex;flex-direction:column;gap:10px;min-width:220px;max-width:320px;text-align:center}.turn-overlay-title{font-size:26px;font-weight:800;color:var(--accent);letter-spacing:-.5px}.turn-overlay-tap-hint{font-size:12px;color:var(--text-muted);opacity:.7;margin-top:2px;letter-spacing:.2px}.turn-overlay-last{font-size:14px;color:var(--text-muted);font-weight:500}.turn-overlay-tiles{display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--border);padding-top:10px;margin-top:2px}.turn-overlay-tiles-label{font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--text-muted);margin-bottom:4px}.turn-overlay-tile-row{display:flex;justify-content:space-between;font-size:13px;font-weight:600;color:var(--text)}.game-over-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:16px;background:radial-gradient(ellipse at center,#1a0a3a,#0f0f1a 70%)}.game-over-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;width:100%;max-width:420px;text-align:center}.game-over-card h2{font-size:32px;margin-bottom:28px}.final-scores{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}.score-row{display:flex;align-items:center;gap:12px;padding:14px 16px;background:var(--bg);border-radius:8px;border:1px solid var(--border)}.score-row.winner{border-color:var(--accent);background:#f59e0b14}.rank{width:28px;height:28px;border-radius:50%;background:var(--border);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700}.score-row.winner .rank{background:var(--accent);color:var(--bg)}.pname{flex:1;text-align:left;font-weight:600}.pscore{font-size:18px;font-weight:700;color:var(--accent)}.crown{font-size:20px}.btn-sm{padding:6px 12px!important;font-size:13px!important}.add-bot-row{display:flex;gap:6px;align-items:center}.bot-diff-select{flex:1;padding:6px 8px;border-radius:8px;border:1.5px solid var(--border);background:var(--bg);color:var(--text);font-size:12px;cursor:pointer}.player-row .bot-badge{font-size:9px;font-weight:700;padding:1px 5px;border-radius:10px;margin-left:4px;text-transform:uppercase;letter-spacing:.4px}.bot-badge.easy{background:#d4edda;color:#276749}.bot-badge.medium{background:#fff3cd;color:#856404}.bot-badge.hard{background:#f8d7da;color:#842029}.board-viewport{-webkit-user-select:none;-webkit-touch-callout:none;touch-action:none;overscroll-behavior:none;contain:layout}.friends-panel{display:flex;flex-direction:column;gap:24px}.friends-search{display:flex;flex-direction:column;gap:8px}.friends-search input{width:100%;padding:12px 14px;border-radius:8px;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:14px}.friends-search input:focus{outline:none;border-color:var(--primary)}.friends-search-status{color:var(--text-muted);font-size:13px}.friends-search-results{display:flex;flex-direction:column;gap:8px;margin-top:4px}.friends-section h3{font-size:15px;margin:0 0 12px;color:var(--text)}.friends-online-count{color:var(--text-muted);font-weight:400;font-size:13px}.friend-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:12px 16px;margin-bottom:8px;gap:12px}.friend-name{display:flex;align-items:center;gap:8px;font-weight:600;font-size:14px}.friend-status{font-weight:400;font-size:12px;color:var(--text-muted);margin-left:6px}.friend-tag{font-size:12px;color:var(--text-muted);font-style:italic}.presence-dot{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--text-muted);flex-shrink:0}.presence-dot.online{background:#43a047;box-shadow:0 0 6px #43a047b3}.presence-dot.offline{background:#555}.invite-friend-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}.invite-empty-msg{font-size:12px;color:var(--text-muted)}.invite-status{font-size:12px;color:var(--text-muted);white-space:nowrap}.invite-status-error{color:#ff6b6b}.add-players-panel{display:flex;flex-direction:column;gap:8px}.add-players-hint{font-size:12px;color:var(--text-muted)}.add-players-list{display:flex;flex-direction:column;gap:6px}.add-players-row{display:flex;align-items:center;justify-content:space-between;background:var(--surface);border:1px solid var(--border);border-radius:10px;padding:8px 12px;gap:10px}.add-players-name{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.add-players-tag{font-size:11px;font-weight:400;font-style:italic;color:var(--text-muted)}.add-players-plus{flex-shrink:0;width:28px;height:28px;border-radius:50%;border:none;background:var(--primary);color:#fff;font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:opacity .15s,transform .1s}.add-players-plus:hover:not(:disabled){transform:scale(1.08)}.add-players-plus:disabled{background:var(--border);color:var(--text-muted);cursor:not-allowed}.notif-center{position:relative;z-index:1000;display:inline-flex;align-items:center}.notif-bell{position:relative;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:18px;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 2px 10px #00000040}.notif-bell:hover{border-color:var(--primary)}.notif-badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;border-radius:9px;background:var(--ruby, #e53935);color:#fff;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1}.notif-panel{position:absolute;top:48px;right:-8px;width:320px;max-width:min(320px,calc(100vw - 24px));max-height:70vh;overflow-y:auto;background:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:0 8px 30px #0006;padding:8px}.notif-panel-header{display:flex;align-items:center;justify-content:space-between;font-weight:700;font-size:14px;padding:6px 8px 10px}.notif-clear{background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer}.notif-clear:hover{color:var(--text)}.notif-empty{text-align:center;color:var(--text-muted);font-size:13px;padding:24px 12px}.notif-item{background:var(--bg);border:1px solid var(--border);border-radius:10px;padding:10px 12px;margin-bottom:8px}.notif-item:last-child{margin-bottom:0}.notif-item-title{font-weight:700;font-size:13px;margin-bottom:2px}.notif-item-msg{font-size:12.5px;color:var(--text-muted);line-height:1.4}.notif-actions{display:flex;gap:8px;margin-top:10px}.notif-actions button{flex:1;padding:6px 10px;font-size:12px}.notif-dismiss{margin-top:8px;background:none;border:none;color:var(--text-muted);font-size:12px;cursor:pointer;text-decoration:underline;padding:0}.notif-dismiss:hover{color:var(--text)}.notif-item.notif-game_invite{border-color:#7c3aed66}.notif-item.notif-friend_request{border-color:#43a04766}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}:root{--bg: #0f0f1a;--surface: #1a1a2e;--surface2: #16213e;--border: #2a2a4a;--text: #e8e8f0;--text-muted: #8888aa;--primary: #7c3aed;--primary-hover: #6d28d9;--accent: #f59e0b;--ruby: #F5F5F5;--amber: #FB8C00;--jade: #43A047;--sapphire: #1E88E5;--amethyst: #8E24AA;--coral: #E91E63}html,body,#root{height:100%}body{font-family:Segoe UI,system-ui,sans-serif;background:var(--bg);color:var(--text)}button{font-family:inherit;cursor:pointer}input{font-family:inherit}