:root{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--bg-color:#0f172a;--panel-bg:#1e293bbd;--surface-strong:#0f172adb;--surface-soft:#334155e0;--surface-hover:#475569eb;--surface-border:#ffffff1a;--accent-color:#3b82f6;--accent-strong:#2563eb;--text-main:#f8fafc;--text-muted:#94a3b8;--font-family:"Outfit", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;--c1:#3b82f6;--c2:#10b981;--c3:#ef4444;--c4:#8b5cf6;--c5:#f59e0b;--c6:#06b6d4;--c7:#000;--c8:#64748b}*{box-sizing:border-box}.sr-only{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}html,body{min-height:100%}body{font-family:var(--font-family);color:var(--text-main);background:var(--bg-color);background-image:radial-gradient(circle at 100% 0,#1e1b4b,#0f172a 60%);margin:0}body.app-body{min-height:100vh}a,button,input,select{font:inherit}a{color:inherit}button,select{-webkit-user-select:none;user-select:none}.page-shell{width:min(1120px,100% - 32px);margin:0 auto;padding:32px 0 44px}.surface{background:var(--panel-bg);border:1px solid var(--surface-border);-webkit-backdrop-filter:blur(14px);border-radius:20px;box-shadow:0 25px 50px -12px #0000007a}.eyebrow{color:#93c5fd;letter-spacing:.12em;text-transform:uppercase;margin:0;font-size:.9rem;font-weight:700}.button{cursor:pointer;border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;min-height:46px;padding:0 20px;text-decoration:none;transition:transform .2s,background .2s,border-color .2s,color .2s;display:inline-flex}.button:hover{transform:translateY(-1px)}.button-primary{color:#fff;background:var(--accent-color)}.button-primary:hover{background:var(--accent-strong)}.button-secondary{color:var(--text-main);background:var(--surface-soft);border-color:var(--surface-border)}.button-secondary:hover{background:var(--surface-hover);border-color:#ffffff2e}.button-text{min-height:0;color:var(--text-muted);background:0 0;border:0;padding:0}.button-text:hover{color:var(--text-main)}.site-footer{flex-wrap:wrap;justify-content:center;gap:14px;margin-top:18px;padding:0 8px;display:flex}.site-footer a{color:#cbd5e1;font-size:.95rem;text-decoration:none}.site-footer a:hover{color:#fff;text-decoration:underline}@media (width<=640px){.page-shell{width:min(100% - 20px,1120px);padding:20px 0 36px}.button{width:100%}.site-footer{gap:10px;margin-top:14px}}.account-bar{justify-content:flex-end;align-items:center;gap:10px;min-height:40px;display:flex}.account-bar:empty{display:none}.account-chip{background:var(--surface-soft);border:1px solid var(--surface-border);cursor:pointer;color:var(--text-main);border-radius:999px;align-items:center;gap:10px;padding:6px 10px 6px 6px;display:inline-flex}.account-chip:hover{background:var(--surface-hover)}.account-loading{cursor:progress;pointer-events:none;min-width:118px}.account-loading .account-avatar,.account-loading .account-name{color:#0000;background:linear-gradient(90deg, var(--surface-soft), var(--surface-hover), var(--surface-soft));background-size:180% 100%;animation:1.2s ease-in-out infinite arcade-loading}.account-avatar{background:var(--accent-color);color:#fff;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;font-size:.85rem;font-weight:700;display:inline-flex;overflow:hidden}.account-avatar img{object-fit:cover;width:100%;height:100%}.account-name{text-overflow:ellipsis;white-space:nowrap;max-width:140px;font-size:.92rem;font-weight:600;overflow:hidden}.account-menu{background:var(--surface-strong);border:1px solid var(--surface-border);z-index:40;border-radius:12px;min-width:180px;padding:6px;position:absolute;top:calc(100% + 8px);right:0;box-shadow:0 20px 40px -16px #0009}.account-menu-wrap{position:relative}.account-menu button,.account-menu .account-menu-link{text-align:left;width:100%;color:var(--text-main);cursor:pointer;background:0 0;border:0;border-radius:8px;padding:9px 12px;text-decoration:none;display:block}.account-menu button:hover,.account-menu .account-menu-link:hover{background:var(--surface-hover)}.account-signin-btn{color:#fff;background:var(--accent-color);cursor:pointer;border:1px solid #0000;border-radius:10px;min-height:40px;padding:0 16px;font-weight:600}.account-signin-btn:hover{background:var(--accent-strong)}.friend-request-card{z-index:60;background:var(--surface-strong);border:1px solid var(--surface-border);border-radius:14px;align-items:flex-start;gap:12px;width:min(320px,100vw - 32px);padding:14px 14px 14px 16px;animation:.24s ease-out friend-request-in;display:flex;position:fixed;bottom:16px;left:16px;box-shadow:0 20px 40px -16px #0009}.game-invite-card{bottom:132px}@keyframes friend-request-in{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.friend-request-icon{font-size:1.4rem;line-height:1.3}.friend-request-body{flex:1;min-width:0}.friend-request-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:0 0 2px;font-size:.72rem;font-weight:700}.friend-request-text{color:var(--text-main);margin:0 0 8px;font-size:.92rem}.friend-request-action{background:var(--accent-color);color:#fff;border-radius:8px;padding:7px 12px;font-size:.86rem;font-weight:700;text-decoration:none;display:inline-block}.friend-request-action:hover{background:var(--accent-strong)}.friend-request-close{color:var(--text-muted);cursor:pointer;background:0 0;border:0;flex:none;font-size:1.3rem;line-height:1}.friend-request-close:hover{color:var(--text-main)}.auth-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#020617a8;justify-content:center;align-items:center;padding:16px;display:flex;position:fixed;inset:0}.auth-modal{background:var(--surface-strong);border:1px solid var(--surface-border);border-radius:18px;width:min(420px,100%);padding:24px;box-shadow:0 30px 60px -20px #000000b3}.auth-modal h2{margin:0 0 4px;font-size:1.35rem}.auth-modal .auth-sub{color:var(--text-muted);margin:0 0 18px;font-size:.92rem}.auth-tabs{background:var(--surface-soft);border-radius:12px;gap:6px;margin-bottom:16px;padding:4px;display:flex}.auth-tab{color:var(--text-muted);cursor:pointer;background:0 0;border:0;border-radius:8px;flex:1;padding:8px;font-size:.9rem;font-weight:600}.auth-tab[aria-selected=true]{background:var(--accent-color);color:#fff}.auth-field{margin-bottom:12px;display:block}.auth-field span{color:var(--text-muted);margin-bottom:6px;font-size:.85rem;display:block}.auth-input{border:1px solid var(--surface-border);background:var(--bg-color);width:100%;color:var(--text-main);border-radius:10px;padding:11px 12px}.auth-input:focus{outline:2px solid var(--accent-color);outline-offset:1px}.auth-hint{color:var(--text-muted);margin:6px 0 0;font-size:.8rem;line-height:1.35}.auth-actions{flex-direction:column;gap:10px;margin-top:6px;display:flex}.auth-submit{color:#fff;background:var(--accent-color);cursor:pointer;border:0;border-radius:10px;width:100%;min-height:46px;font-weight:700}.auth-submit:hover{background:var(--accent-strong)}.auth-submit:disabled{opacity:.6;cursor:progress}.auth-google{border:1px solid var(--surface-border);color:#1f2937;cursor:pointer;background:#fff;border-radius:10px;justify-content:center;align-items:center;gap:10px;width:100%;min-height:46px;font-weight:600;display:inline-flex}.auth-google:hover{background:#f3f4f6}.auth-divider{color:var(--text-muted);align-items:center;gap:10px;margin:16px 0;font-size:.82rem;display:flex}.auth-divider:before,.auth-divider:after{content:"";background:var(--surface-border);flex:1;height:1px}.auth-toggle{text-align:center;color:var(--text-muted);margin-top:14px;font-size:.9rem}.auth-toggle button{color:#93c5fd;cursor:pointer;font:inherit;background:0 0;border:0}.auth-message{border-radius:8px;margin:10px 0 0;padding:10px 12px;font-size:.88rem}.auth-message.error{color:#fca5a5;background:#ef444424}.auth-message.info{color:#6ee7b7;background:#10b98124}.auth-close{float:right;color:var(--text-muted);cursor:pointer;background:0 0;border:0;font-size:1.4rem;line-height:1}.profile-card{background:var(--panel-bg);border:1px solid var(--surface-border);border-radius:16px;margin-top:20px;padding:22px}.profile-identity{align-items:center;gap:16px;margin-bottom:20px;display:flex}.profile-avatar{background:var(--accent-color);color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:64px;height:64px;font-size:1.6rem;font-weight:800;display:inline-flex;overflow:hidden}.profile-avatar img{object-fit:cover;width:100%;height:100%}.profile-title{margin:0 0 2px;font-size:1.25rem}.profile-sub{color:var(--text-muted);margin:0 0 4px;font-size:.9rem}.profile-card .auth-input:disabled{opacity:.6;cursor:not-allowed}.profile-username-value,.profile-username-button{border:1px solid var(--surface-border);background:var(--surface-soft);min-height:42px;color:var(--text-main);border-radius:10px;align-items:center;padding:0 12px;font-weight:700;display:inline-flex}.profile-username-button{cursor:pointer}.profile-username-button:hover{background:var(--surface-hover)}.profile-signedout{text-align:center}.profile-signedout h2{margin:0 0 6px}.profile-signedout .auth-submit{margin-top:14px;max-width:220px;margin-inline:auto}.friends-card{gap:4px;display:grid}.friend-add-form{margin-bottom:6px}.friends-list{gap:8px;display:grid}.friend-row{border:1px solid var(--surface-border);background:var(--surface-soft);border-radius:12px;justify-content:space-between;align-items:center;gap:12px;padding:10px;display:flex}.friend-identity{align-items:center;gap:8px;min-width:0;display:flex}.friend-avatar{background:var(--accent-color);color:#fff;border-radius:50%;flex:none;justify-content:center;align-items:center;width:34px;height:34px;font-size:.9rem;font-weight:800;display:inline-flex;overflow:hidden}.friend-avatar img{object-fit:cover;width:100%;height:100%}.friend-name,.friend-username{text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.friend-name{font-weight:700}.friend-username{color:var(--text-muted);font-size:.86rem}.friend-actions{flex:none;gap:8px;display:flex}.friend-action{color:#fff;background:var(--accent-color);cursor:pointer;border:0;border-radius:8px;min-height:34px;padding:0 12px;font-weight:700}.friend-action.secondary{border:1px solid var(--surface-border);color:var(--text-main);background:0 0}.friend-action:hover{background:var(--accent-strong)}.friend-action.secondary:hover{background:var(--surface-hover)}.friend-action:disabled{opacity:.65;cursor:progress}@media (width<=520px){.friend-row{flex-direction:column;align-items:stretch}.friend-actions{width:100%}.friend-action{flex:1}}#stats-panel:empty{display:none}.stats-panel{background:var(--panel-bg);border:1px solid var(--surface-border);border-radius:16px;margin-top:20px;padding:18px}.stats-panel:empty{display:none}.stats-loading{gap:10px;display:grid}.stats-loading-line{background:linear-gradient(90deg, var(--surface-soft), var(--surface-hover), var(--surface-soft));background-size:180% 100%;border-radius:999px;width:100%;height:14px;animation:1.2s ease-in-out infinite arcade-loading;display:block}.stats-loading-title{width:42%;height:18px}.stats-loading-short{width:68%}@keyframes arcade-loading{0%{background-position:100% 0}to{background-position:-100% 0}}.stats-panel h3{margin:0 0 4px;font-size:1.1rem}.stats-panel .stats-hint{color:var(--text-muted);margin:0 0 14px;font-size:.88rem}.stats-grid{grid-template-columns:repeat(auto-fit,minmax(90px,1fr));gap:10px;margin-bottom:16px;display:grid}.stat-tile{background:var(--surface-soft);border:1px solid var(--surface-border);text-align:center;border-radius:12px;padding:12px}.stat-tile .stat-value{font-size:1.3rem;font-weight:800;display:block}.stat-tile .stat-label{color:var(--text-muted);text-transform:uppercase;letter-spacing:.06em;margin-top:2px;font-size:.78rem;display:block}.stats-section-title{letter-spacing:.08em;text-transform:uppercase;color:var(--text-muted);margin:14px 0 8px;font-size:.82rem;font-weight:700}.stats-table{border-collapse:collapse;width:100%;font-size:.9rem}.stats-table th,.stats-table td{text-align:left;border-bottom:1px solid var(--surface-border);padding:7px 8px}.stats-table th{color:var(--text-muted);font-size:.8rem;font-weight:600}.stats-table td.num,.stats-table th.num{text-align:right;font-variant-numeric:tabular-nums}.stats-empty{color:var(--text-muted);padding:6px 0;font-size:.9rem}.stats-signedout{color:var(--text-muted);font-size:.92rem}
