:root{--md-surface: #f6f9fe;--md-surface-container-low: #f0f4fb;--md-surface-container: #e9eff8;--md-surface-container-high: #e2eaf4;--md-surface-container-highest: #dbe4f0;--md-on-surface: #191c20;--md-on-surface-variant: #43474e;--md-primary: #0c6cae;--md-on-primary: #ffffff;--md-primary-container: #cfe5ff;--md-on-primary-container: #001d34;--md-secondary-container: #d8e3f3;--md-on-secondary-container: #111c2b;--md-tertiary-container: #ffe09a;--md-on-tertiary-container: #281900;--md-gold: #b07b00;--md-outline: #73777f;--md-outline-variant: #c8cdd6;--md-error: #b3261e;--md-ok: #1f7a4d;--r-sm: 12px;--r-md: 16px;--r-lg: 24px;--r-xl: 28px;--r-2xl: 32px;--r-full: 9999px;--e1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .05);--e2: 0 4px 10px rgba(16, 24, 40, .08), 0 2px 4px rgba(16, 24, 40, .05);--e3: 0 12px 28px rgba(16, 24, 40, .12), 0 4px 8px rgba(16, 24, 40, .06);--ease: cubic-bezier(.2, 0, 0, 1);font-family:Roboto,system-ui,-apple-system,Segoe UI,sans-serif}*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}body{min-height:100vh;color:var(--md-on-surface);background:var(--md-surface);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;position:relative;overflow-x:hidden}.app{max-width:940px;margin:0 auto;padding:0 clamp(14px,4vw,24px) 56px;position:relative}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 0;margin-bottom:12px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:color-mix(in srgb,var(--md-surface) 72%,transparent)}.brand{display:flex;align-items:center;gap:11px;cursor:pointer;background:none;border:none;padding:4px;margin:-4px;border-radius:var(--r-md);font-family:inherit}.brand-mark{width:44px;height:44px;border-radius:13px;background:#fff;box-shadow:var(--e1)}.brand-name{font-weight:700;font-size:clamp(17px,4.6vw,21px);letter-spacing:.02em;line-height:1;color:var(--md-on-surface)}.brand-name span{color:var(--md-gold)}.topbar-right{margin-left:auto;display:flex;align-items:center;gap:8px}.account-wrap{position:relative}.account-chip{position:relative;isolation:isolate;display:flex;align-items:center;gap:8px;background:var(--md-surface-container-high);border:none;cursor:pointer;font-family:inherit;font-weight:500;font-size:14px;color:var(--md-on-surface);padding:5px 12px 5px 5px;border-radius:var(--r-full);transition:box-shadow .2s var(--ease)}.account-chip:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--md-primary);opacity:0;transition:opacity .2s var(--ease)}.account-chip:hover:before{opacity:.08}.account-chip:active{transform:scale(.97)}.account-chip:focus-visible{outline:none;box-shadow:0 0 0 2px var(--md-surface),0 0 0 4px var(--md-primary)}.chip-avatar{width:32px;height:32px;border-radius:var(--r-full);display:grid;place-items:center;color:#fff;font-weight:700;font-size:13px}.chip-name{max-width:120px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.chip-caret{opacity:.55;font-size:11px}.menu{position:absolute;right:0;top:calc(100% + 8px);min-width:208px;background:var(--md-surface-container-high);border-radius:var(--r-md);box-shadow:var(--e3);padding:8px;z-index:40;display:flex;flex-direction:column;gap:2px;animation:menu-in .16s var(--ease)}@keyframes menu-in{0%{opacity:0;transform:translateY(-6px) scale(.98)}to{opacity:1;transform:none}}.menu-item{position:relative;isolation:isolate;text-align:left;background:none;border:none;cursor:pointer;font:inherit;font-weight:500;color:var(--md-on-surface);padding:11px 12px;border-radius:var(--r-sm)}.menu-item:before{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--md-primary);opacity:0;transition:opacity .15s var(--ease)}.menu-item:hover:before{opacity:.09}.menu-item.danger{color:var(--md-error)}.menu-item.danger:before{background:var(--md-error)}.menu-item:disabled{opacity:.5;cursor:default}.menu-divider{height:1px;background:var(--md-outline-variant);margin:6px 4px}.btn{--btn-bg: var(--md-secondary-container);--btn-fg: var(--md-on-secondary-container);position:relative;isolation:isolate;display:inline-flex;align-items:center;justify-content:center;gap:8px;border:none;cursor:pointer;font-family:inherit;font-weight:500;font-size:15px;letter-spacing:.01em;text-decoration:none;white-space:nowrap;background:var(--btn-bg);color:var(--btn-fg);border-radius:var(--r-full);height:48px;padding:0 24px;transition:box-shadow .3s var(--ease),transform .12s var(--ease)}.btn:before{content:"";position:absolute;inset:0;border-radius:inherit;background:currentColor;opacity:0;transition:opacity .2s var(--ease)}.btn:hover:before{opacity:.08}.btn:active{transform:scale(.96)}.btn:active:before{opacity:.12}.btn:focus-visible{outline:none;box-shadow:0 0 0 2px var(--md-surface),0 0 0 4px var(--md-primary)}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.small{height:40px;padding:0 18px;font-size:14px}.btn.primary{--btn-bg: var(--md-primary);--btn-fg: var(--md-on-primary)}.btn.primary:hover{box-shadow:var(--e2)}.btn.outlined{--btn-bg: transparent;--btn-fg: var(--md-primary);border:1px solid var(--md-outline)}.btn.text{--btn-bg: transparent;--btn-fg: var(--md-primary)}.link{background:none;border:none;cursor:pointer;font:inherit;font-weight:500;color:var(--md-primary);padding:6px 4px;border-radius:var(--r-sm)}.link:hover{text-decoration:underline}.link.danger{color:var(--md-error)}.link:disabled{opacity:.5;cursor:default}.hero{position:relative;overflow:hidden;background:var(--md-surface-container-low);border-radius:var(--r-2xl);padding:clamp(26px,6vw,48px);margin-bottom:22px;box-shadow:var(--e1)}.hero h1{font-size:clamp(30px,8vw,52px);font-weight:700;line-height:1.1;letter-spacing:-.01em}.hero p{margin-top:12px;font-size:clamp(15px,3.6vw,20px);color:var(--md-on-surface-variant);max-width:48ch;line-height:1.5}.hero-cta{margin-top:22px;display:flex;gap:12px;flex-wrap:wrap}.hero-note{background:var(--md-tertiary-container);color:var(--md-on-tertiary-container);border-radius:var(--r-lg);padding:14px 18px;font-size:14px;line-height:1.5;margin-bottom:20px}.section-title{font-size:13px;text-transform:uppercase;letter-spacing:.1em;color:var(--md-on-surface-variant);font-weight:700;margin:26px 0 14px}.featured{display:grid;grid-template-columns:168px 1fr;gap:clamp(16px,4vw,28px);align-items:center;background:var(--md-surface-container);border-radius:var(--r-2xl);padding:clamp(18px,4vw,28px);box-shadow:var(--e1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}.featured:hover{box-shadow:var(--e2)}.featured .thumb{aspect-ratio:1}.featured-body h3{font-size:clamp(20px,5vw,28px);font-weight:700}.featured-body .blurb{color:var(--md-on-surface-variant);margin:8px 0 16px;line-height:1.5;font-size:15px}.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}.card{background:var(--md-surface-container);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--e1);display:flex;flex-direction:column;transition:box-shadow .3s var(--ease),transform .3s var(--ease)}.card:hover{box-shadow:var(--e2);transform:translateY(-2px)}.card .thumb{aspect-ratio:16 / 10}.card-body{padding:16px;display:flex;flex-direction:column;gap:8px}.card-body h3{font-size:18px;font-weight:700}.thumb{display:grid;place-items:center;background:var(--md-surface-container-high);border-radius:var(--r-md);text-decoration:none}.featured .thumb{border-radius:var(--r-lg)}.thumb img{width:66%;height:66%;object-fit:contain}.blurb{color:var(--md-on-surface-variant);font-size:14px;line-height:1.4}.card-actions{display:flex;gap:10px;flex-wrap:wrap;margin-top:2px}.muted{color:var(--md-on-surface-variant)}.sub-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}.sub-head h2{font-size:clamp(18px,5vw,24px);font-weight:700;flex:1}.ranks{list-style:none;display:flex;flex-direction:column;gap:6px}.rank{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;background:var(--md-surface-container);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--e1);transition:background .2s var(--ease),box-shadow .2s var(--ease)}.rank:hover{background:var(--md-surface-container-high)}.rank.you{background:var(--md-primary-container);box-shadow:inset 0 0 0 2px var(--md-primary)}.rank.podium .pos{color:var(--md-gold)}.rank .pos{text-align:center;font-weight:700;color:var(--md-on-surface-variant)}.who.linklike{background:none;border:none;padding:0;font:inherit;text-align:left;font-weight:500;color:var(--md-on-surface);cursor:pointer;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.who.linklike:hover{color:var(--md-primary);text-decoration:underline}.pts{font-weight:700;color:var(--md-primary);font-variant-numeric:tabular-nums}.pf-head{display:flex;align-items:center;gap:16px;margin-bottom:20px}.pf-avatar{width:88px;height:88px;border-radius:28px;flex-shrink:0;display:grid;place-items:center;color:#fff;font-weight:700;font-size:30px;box-shadow:var(--e2)}.pf-name{font-size:clamp(22px,6vw,30px);font-weight:700;line-height:1.1}.pf-since{color:var(--md-on-surface-variant);font-size:13px;margin-top:3px}.pf-actions{display:flex;gap:14px;margin-top:8px}.pf-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:8px}.stat{background:var(--md-surface-container);border-radius:var(--r-lg);padding:18px 12px;text-align:center;box-shadow:var(--e1)}.stat-num{font-size:clamp(20px,6vw,28px);font-weight:700;color:var(--md-primary);font-variant-numeric:tabular-nums}.stat-lbl{font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:var(--md-on-surface-variant);margin-top:2px}.recent{display:flex;gap:12px;overflow-x:auto;padding-bottom:6px}.recent-card{flex:0 0 150px;background:var(--md-surface-container);border-radius:var(--r-lg);overflow:hidden;text-decoration:none;color:inherit;box-shadow:var(--e1);transition:box-shadow .3s var(--ease),transform .3s var(--ease)}.recent-card:hover{box-shadow:var(--e2);transform:translateY(-2px)}.recent-card img{width:100%;height:88px;object-fit:contain;background:var(--md-surface-container-high);padding:10px}.recent-name{font-weight:700;font-size:14px;padding:8px 12px 0}.recent-sub{font-size:12px;color:var(--md-on-surface-variant);padding:2px 12px 12px}.pf-games{display:flex;flex-direction:column;gap:8px}.pf-game{display:grid;grid-template-columns:44px 1.4fr repeat(4,1fr);gap:8px;align-items:center;background:var(--md-surface-container);border-radius:var(--r-md);padding:12px 16px;box-shadow:var(--e1)}.pf-game-thumb{width:36px;height:36px;object-fit:contain}.pf-game-name{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pf-game-cell{font-weight:700;color:var(--md-primary);font-size:14px;font-variant-numeric:tabular-nums}.cell-lbl{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--md-on-surface-variant);font-weight:700}.foot{margin-top:40px;text-align:center;color:var(--md-on-surface-variant);font-size:13px;display:flex;gap:8px;justify-content:center}.foot .dot{opacity:.5}.toast{position:fixed;left:50%;bottom:22px;transform:translate(-50%);background:var(--md-on-surface);color:var(--md-surface);padding:13px 22px;border-radius:var(--r-full);font-weight:500;font-size:14px;box-shadow:var(--e3);z-index:50;max-width:90vw;text-align:center}.toast.ok{background:var(--md-ok);color:#fff}.toast.err{background:var(--md-error);color:#fff}@media(max-width:560px){.featured{grid-template-columns:1fr;text-align:center}.featured .thumb{max-width:200px;margin:0 auto;width:100%}.featured .card-actions{justify-content:center}.pf-game{grid-template-columns:36px 1fr 1fr 1fr;row-gap:8px}.pf-game-thumb{grid-row:span 2}.pf-game-name{grid-column:span 3}}@media(prefers-reduced-motion:reduce){*{transition-duration:.01ms!important;animation-duration:.01ms!important}.btn:active,.card:hover,.recent-card:hover{transform:none}}