:root { color-scheme: dark; }
* { box-sizing: border-box; }
body { font-family: Inter, system-ui, sans-serif; background: #080d1a; color: #e2e8f0; }
body::before { content: ''; position: fixed; inset: 0; pointer-events: none; background: radial-gradient(circle at 15% -10%, rgba(245,158,11,.15), transparent 32rem), radial-gradient(circle at 90% 20%, rgba(124,58,237,.13), transparent 28rem); z-index: -1; }
h1,h2,h3,.brand { font-family: 'Space Grotesk', Inter, sans-serif; }
.site-nav { background: rgba(8,13,26,.78); border-bottom: 1px solid rgba(148,163,184,.12); backdrop-filter: blur(18px); position: sticky; top: 0; z-index: 20; }
.brand { display:flex; align-items:center; gap:.65rem; font-weight:700; letter-spacing:.03em; color:#f8fafc; white-space:nowrap; }.brand b { color:#fbbf24; }.brand-mark { display:grid; place-items:center; width:2rem; height:2rem; border-radius:.65rem; color:#111827; background:linear-gradient(135deg,#fde68a,#f59e0b); box-shadow:0 0 20px rgba(245,158,11,.3); }
.nav-link { padding:.55rem .8rem; color:#94a3b8; font-weight:600; font-size:.875rem; border-radius:.6rem; transition:.2s; }.nav-link:hover,.nav-link-active { color:#f8fafc; background:rgba(148,163,184,.11); }
.panel { background:rgba(15,23,42,.82); border:1px solid rgba(148,163,184,.14); box-shadow:0 18px 50px rgba(0,0,0,.24); border-radius:1.25rem; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:.5rem; border-radius:.75rem; padding:.72rem 1rem; font-weight:700; transition:transform .18s, background .18s, border-color .18s; }.button:hover { transform:translateY(-1px); }.button-primary { color:#111827; background:linear-gradient(135deg,#fcd34d,#f59e0b); box-shadow:0 8px 22px rgba(245,158,11,.18); }.button-primary:hover { background:linear-gradient(135deg,#fde68a,#f59e0b); }.button-success { background:#34d399; color:#052e20; }.button-danger { color:#fca5a5; border:1px solid rgba(248,113,113,.28); background:rgba(239,68,68,.08); }.button-ghost { color:#cbd5e1; border:1px solid rgba(148,163,184,.16); background:rgba(15,23,42,.45); }.button-ghost:hover { background:rgba(51,65,85,.65); }
.field { width:100%; padding:.8rem .95rem; background:rgba(15,23,42,.78); border:1px solid #334155; border-radius:.75rem; color:#f8fafc; outline:none; transition:.2s; }.field:focus { border-color:#fbbf24; box-shadow:0 0 0 3px rgba(251,191,36,.14); }.field::placeholder { color:#64748b; }
.label { display:block; margin-bottom:.45rem; color:#94a3b8; text-transform:uppercase; font-size:.7rem; letter-spacing:.09em; font-weight:800; }
.badge { display:inline-flex; align-items:center; border-radius:999px; padding:.3rem .65rem; font-size:.7rem; font-weight:800; letter-spacing:.04em; }.badge-open { background:rgba(52,211,153,.11); color:#6ee7b7; border:1px solid rgba(52,211,153,.22); }.badge-progress { background:rgba(96,165,250,.11); color:#93c5fd; border:1px solid rgba(96,165,250,.22); }.badge-mode { background:rgba(251,191,36,.1); color:#fcd34d; border:1px solid rgba(251,191,36,.2); }
.notice { border-radius:.85rem; padding:.9rem 1rem; font-size:.875rem; }.notice-error { border:1px solid rgba(248,113,113,.32); background:rgba(239,68,68,.1); color:#fecaca; }.notice-success { border:1px solid rgba(52,211,153,.28); background:rgba(16,185,129,.1); color:#a7f3d0; }
.tournament-card { position:relative; overflow:hidden; }.tournament-card::after { content:''; position:absolute; height:7rem; width:7rem; right:-3rem; top:-3rem; border-radius:50%; background:rgba(251,191,36,.08); }.tournament-card:hover { border-color:rgba(251,191,36,.38); transform:translateY(-3px); }.progress-track { height:.42rem; background:#1e293b; border-radius:99px; overflow:hidden; }.progress-fill { height:100%; background:linear-gradient(90deg,#f59e0b,#fde68a); border-radius:inherit; }
.animate-in { animation: rise .42s ease both; } @keyframes rise { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:translateY(0); } }
@media (max-width:640px) { .site-nav .h-18 { height:4rem; } }
.emoji-icon { display:inline-grid; place-items:center; width:2.25rem; height:2.25rem; border-radius:.75rem; background:rgba(251,191,36,.1); flex:0 0 auto; }
.player-panel-hero{position:relative;overflow:hidden;background:linear-gradient(118deg,rgba(15,23,42,.98),rgba(31,25,44,.88));border-color:rgba(251,191,36,.22)}.player-panel-orb{position:absolute;width:21rem;height:21rem;border-radius:50%;right:-9rem;top:-12rem;background:radial-gradient(circle,rgba(251,191,36,.18),transparent 67%)}.player-panel-avatar{width:4.1rem;height:4.1rem;display:grid;place-items:center;position:relative;overflow:hidden;flex:0 0 auto;border-radius:1.2rem;background:linear-gradient(135deg,#fde68a,#f59e0b);color:#111827;font-family:'Space Grotesk',Inter,sans-serif;font-size:1.25rem;font-weight:900;box-shadow:0 10px 24px rgba(0,0,0,.28)}.player-panel-avatar img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.player-panel-avatar.has-image span{display:none}.player-panel-count{display:inline-grid;place-items:center;min-width:1.15rem;height:1.15rem;padding:0 .25rem;border-radius:999px;background:#111827;color:#fde68a;font-size:.65rem}.player-panel-stat{min-height:6.55rem;display:flex;flex-direction:column;justify-content:center;padding:1rem 1.1rem;border:1px solid rgba(148,163,184,.14);border-radius:1rem;background:rgba(15,23,42,.73)}.player-panel-stat strong{color:#fff;font:700 1.7rem/1 'Space Grotesk',Inter,sans-serif}.player-panel-stat span{margin-top:.55rem;color:#94a3b8;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.player-panel-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:1rem;padding:1.35rem 1.5rem;border-bottom:1px solid rgba(148,163,184,.13)}.player-panel-section-head h2{margin-top:.55rem;color:#f8fafc;font-size:1.2rem;font-weight:800}.player-panel-section-head p{margin-top:.18rem;color:#64748b;font-size:.76rem}.player-panel-link{color:#fbbf24;font-size:.74rem;font-weight:800;white-space:nowrap}.player-panel-link:hover{color:#fde68a}.player-panel-row{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1rem 1.5rem;transition:background .18s}.player-panel-row:hover,.player-panel-group:hover,.player-panel-request:hover{background:rgba(148,163,184,.055)}.player-panel-row b,.player-panel-group b,.player-panel-request b{display:block;color:#e2e8f0;font-size:.86rem}.player-panel-row small,.player-panel-group small,.player-panel-request small{display:block;margin-top:.28rem;color:#64748b;font-size:.72rem}.player-panel-empty{padding:2rem 1.5rem;color:#94a3b8;font-size:.85rem}.player-panel-group{display:flex;align-items:center;gap:.8rem;padding:1rem 1.5rem;transition:background .18s}.player-panel-group-mark{display:grid;place-items:center;width:2.4rem;height:2.4rem;flex:0 0 auto;border-radius:.8rem;background:rgba(251,191,36,.1);color:#fcd34d;font-size:.7rem;font-weight:900}.player-panel-request{display:flex;align-items:flex-start;gap:.7rem;padding:1rem 1.5rem;transition:background .18s}.player-panel-request-dot{width:.55rem;height:.55rem;flex:0 0 auto;margin-top:.32rem;border-radius:50%;background:#fbbf24;box-shadow:0 0 0 4px rgba(251,191,36,.11)}.player-panel-request-wait{background:#60a5fa;box-shadow:0 0 0 4px rgba(96,165,250,.1)}.player-panel-quick{display:flex;min-height:5.4rem;flex-direction:column;justify-content:center;padding:1rem;border:1px solid rgba(148,163,184,.14);border-radius:1rem;background:rgba(15,23,42,.73);transition:.18s}.player-panel-quick:hover{border-color:rgba(251,191,36,.35);transform:translateY(-2px)}.player-panel-quick span{color:#64748b;font-size:.68rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}.player-panel-quick b{margin-top:.45rem;color:#f8fafc;font-size:.8rem}@media(max-width:640px){.player-panel-section-head{align-items:flex-start;flex-direction:column;padding:1.2rem}.player-panel-row,.player-panel-group,.player-panel-request{padding:1rem 1.2rem}.player-panel-stat{min-height:5.8rem;padding:.85rem}.player-panel-stat strong{font-size:1.42rem}.player-panel-stat span{font-size:.6rem}}
.profile-hero { overflow:hidden; position:relative; }
.profile-cover { height:8.5rem; background:linear-gradient(118deg,rgba(245,158,11,.92),rgba(124,58,237,.8) 54%,rgba(14,116,144,.78)); position:relative; }
.profile-cover::before,.profile-cover::after { content:''; position:absolute; border:1px solid rgba(255,255,255,.17); border-radius:999px; }
.profile-cover::before { width:13rem; height:13rem; right:5%; top:-8.5rem; }.profile-cover::after { width:7rem; height:7rem; left:43%; bottom:-4.8rem; }
.profile-hero-content { position:relative; display:flex; align-items:flex-end; gap:1.25rem; padding:0 1.5rem 1.65rem; margin-top:-2.9rem; }
.profile-avatar { flex:0 0 auto; overflow:hidden; display:grid; place-items:center; border:4px solid #0f172a; border-radius:50%; background:linear-gradient(135deg,#fcd34d,#a855f7); color:#111827; box-shadow:0 12px 30px rgba(0,0,0,.3); }
.profile-avatar-large { width:7.15rem; height:7.15rem; font-weight:900; font-size:1.65rem; }
.profile-avatar img { width:100%; height:100%; object-fit:cover; background:#172033; }
.profile-avatar.has-image .profile-avatar-initials { display:none; }.profile-avatar.avatar-fallback .profile-avatar-initials { display:grid; }.profile-avatar.avatar-fallback { background:linear-gradient(135deg,#fcd34d,#a855f7); }
.profile-identity { min-width:0; padding-bottom:.05rem; }.profile-identity h1 { line-height:1.05; }.profile-bio { max-width:42rem; color:#aebdd2; font-size:.925rem; line-height:1.6; margin-top:.6rem; }
.profile-role { display:inline-flex; align-items:center; padding:.3rem .58rem; border-radius:999px; font-size:.68rem; font-weight:800; text-transform:uppercase; letter-spacing:.07em; border:1px solid rgba(148,163,184,.2); background:rgba(148,163,184,.1); color:#cbd5e1; }.profile-role-influencer { color:#e9d5ff; border-color:rgba(168,85,247,.32); background:rgba(168,85,247,.12); }.profile-role-admin { color:#fcd34d; border-color:rgba(251,191,36,.32); background:rgba(251,191,36,.1); }
.social-link { display:inline-flex; align-items:center; gap:.42rem; padding:.52rem .7rem; border:1px solid rgba(251,191,36,.29); border-radius:.65rem; color:#fcd34d; background:rgba(251,191,36,.07); font-size:.8rem; font-weight:800; transition:.18s; }.social-link:hover { transform:translateY(-1px); background:rgba(251,191,36,.14); }.social-link-muted { border-color:rgba(148,163,184,.2); color:#cbd5e1; background:rgba(148,163,184,.06); }
.profile-stats { }.profile-stat { min-height:6.6rem; display:flex; flex-direction:column; justify-content:center; padding:1rem 1.15rem; border:1px solid rgba(148,163,184,.14); border-radius:1rem; background:rgba(15,23,42,.72); }.profile-stat strong { color:#fff; font-size:1.7rem; line-height:1; font-family:'Space Grotesk',Inter,sans-serif; }.profile-stat span { color:#94a3b8; font-size:.72rem; font-weight:700; margin-top:.52rem; text-transform:uppercase; letter-spacing:.055em; }
.profile-badges { display:grid; gap:.65rem; }.profile-badge { display:flex; align-items:flex-start; gap:.65rem; padding:.72rem; border:1px solid rgba(148,163,184,.13); border-radius:.8rem; background:rgba(30,41,59,.38); }.profile-badge b { display:block; color:#e2e8f0; font-size:.82rem; }.profile-badge small { display:block; color:#94a3b8; line-height:1.35; margin-top:.13rem; font-size:.7rem; }.profile-badge-dot { width:.62rem; height:.62rem; flex:0 0 auto; border-radius:50%; background:#94a3b8; margin-top:.26rem; box-shadow:0 0 0 4px rgba(148,163,184,.09); }.profile-badge-champion .profile-badge-dot { background:#fbbf24; box-shadow:0 0 0 4px rgba(251,191,36,.12); }.profile-badge-top-player .profile-badge-dot { background:#60a5fa; box-shadow:0 0 0 4px rgba(96,165,250,.12); }.profile-badge-influencer .profile-badge-dot { background:#c084fc; box-shadow:0 0 0 4px rgba(192,132,252,.12); }.profile-badge-organizer .profile-badge-dot { background:#34d399; box-shadow:0 0 0 4px rgba(52,211,153,.12); }
.profile-edit-mark { display:grid; place-items:center; flex:0 0 auto; width:2.25rem; height:2.25rem; border-radius:.7rem; color:#0f172a; background:linear-gradient(135deg,#fde68a,#f59e0b); font-family:'Space Grotesk',Inter,sans-serif; font-weight:900; }.profile-textarea { resize:vertical; min-height:7rem; line-height:1.5; }.profile-field-help { margin-top:.42rem; color:#64748b; font-size:.72rem; line-height:1.4; }.profile-public-note { display:flex; flex-direction:column; align-items:flex-start; justify-content:center; }
@media (max-width:640px) { .profile-cover { height:6.7rem; }.profile-hero-content { display:block; padding:0 1.1rem 1.3rem; margin-top:-2.45rem; }.profile-avatar-large { width:6.15rem; height:6.15rem; font-size:1.4rem; }.profile-identity { margin-top:.8rem; }.profile-identity h1 { font-size:1.8rem; }.profile-stat { min-height:5.8rem; padding:.85rem .9rem; }.profile-stat strong { font-size:1.4rem; }.profile-stat span { font-size:.63rem; } }
.bracket-scroll { overflow-x:auto; padding-bottom:1rem; }.bracket-board { min-width:max-content; display:flex; align-items:stretch; gap:2rem; }.bracket-round { width:17rem; }.bracket-round h3 { color:#fbbf24; font-size:.8rem; text-transform:uppercase; letter-spacing:.08em; margin:0 0 .85rem .25rem; }.bracket-matches { display:flex; flex-direction:column; gap:1rem; justify-content:space-around; height:calc(100% - 2rem); }.bracket-match { width:17rem; padding:.75rem; border:1px solid rgba(148,163,184,.17); background:rgba(15,23,42,.9); border-radius:.85rem; position:relative; }.bracket-round:not(:last-child) .bracket-match::after { content:''; position:absolute; right:-2rem; top:50%; width:2rem; border-top:1px solid rgba(148,163,184,.3); }.bracket-match-label { display:flex; justify-content:space-between; color:#64748b; font-size:.68rem; margin-bottom:.55rem; }.bracket-match-label span { color:#6ee7b7; }.bracket-player { display:flex; justify-content:space-between; gap:.75rem; padding:.45rem .55rem; background:rgba(30,41,59,.65); color:#cbd5e1; font-size:.8rem; }.bracket-player:first-of-type { border-radius:.5rem .5rem 0 0; border-bottom:1px solid rgba(148,163,184,.1); }.bracket-player:nth-of-type(2) { border-radius:0 0 .5rem .5rem; }.bracket-player b { max-width:12rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }.bracket-winner { color:#f8fafc; background:rgba(245,158,11,.18); }.bracket-result { display:grid; grid-template-columns:1fr 1fr auto; gap:.35rem; margin-top:.65rem; }.bracket-result .field { min-width:0; padding:.42rem; font-size:.75rem; text-align:center; }.bracket-result .button { padding:.42rem .6rem; font-size:.72rem; }