:root{--ink:#0b1220;--muted:#6c7482;--line:#e7ebf2;--bg:#f4f7fb;--card:#fff;--blue:#1565f2;--blue2:#5a96ff;--shadow:0 20px 50px rgba(12,35,76,.12);--r:24px}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:var(--bg);color:var(--ink);font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif}button,input,select{font:inherit}button{cursor:pointer}
.app{max-width:540px;margin:0 auto;min-height:100vh;background:#fff;padding-bottom:88px;position:relative}.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;padding:13px 16px;background:rgba(255,255,255,.94);backdrop-filter:blur(15px);border-bottom:1px solid var(--line)}
.brand{display:flex;gap:10px;align-items:center;font-weight:950;letter-spacing:-.04em}.logo,.hero-logo{display:grid;place-items:center;color:#fff;background:linear-gradient(145deg,#2380ff,#071d4d);box-shadow:0 10px 24px rgba(21,101,242,.28)}.logo{width:35px;height:35px;border-radius:12px;font-size:13px}.brand small{display:block;color:var(--muted);font-size:10px;letter-spacing:.04em;text-transform:uppercase;margin-top:2px}.top-actions{display:flex;align-items:center;gap:8px}.xp-pill{display:flex;align-items:center;gap:6px;padding:8px 10px;border-radius:999px;background:#eff5ff;color:#1553bd;font-size:11px;font-weight:900}.xp-pill span{color:#8a96a9;font-weight:750}.iconbtn{width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:13px;font-size:20px;font-weight:900}
.prototype-label{font-size:10px;font-weight:900;letter-spacing:.1em;text-transform:uppercase;color:#8d97a7;margin:0 2px 12px}.view{display:none}.view.active{display:block}main{padding:18px 16px}.eyebrow{font-size:11px;line-height:1;font-weight:950;letter-spacing:.12em;text-transform:uppercase;color:var(--blue)}h1,h2,h3,p{margin:0}h1{font-size:31px;line-height:1.02;letter-spacing:-.055em;margin-top:6px}h2{font-size:22px;letter-spacing:-.04em}.sub{font-size:13px;color:var(--muted);margin-top:4px}.feed-head{display:flex;justify-content:space-between;align-items:end;margin-bottom:14px}.counter{font-size:11px;color:var(--muted);font-weight:850}
.challenge{display:flex;align-items:center;justify-content:space-between;gap:12px;border:1px solid #d7e6ff;background:linear-gradient(125deg,#eff6ff,#f8fbff);border-radius:18px;padding:12px 13px;margin-bottom:14px}.challenge-copy{font-size:12px;font-weight:900}.challenge-copy span{display:block;color:var(--muted);font-weight:700;margin-top:3px}.challenge-progress{min-width:62px;text-align:right;font-size:12px;font-weight:950;color:var(--blue)}.bar{height:6px;width:62px;background:#dbe8ff;border-radius:99px;overflow:hidden;margin-top:6px}.bar i{display:block;height:100%;background:var(--blue);border-radius:inherit}
.player-card{overflow:hidden;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:var(--shadow);touch-action:pan-y}.photo-wrap{aspect-ratio:4/5;background:#dbe4f1;position:relative;overflow:hidden}.photo-wrap img{width:100%;height:100%;display:block;object-fit:cover}.photo-shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35),transparent 34%,rgba(0,0,0,.28))}.sport-chip,.lock-chip{position:absolute;top:13px;padding:8px 10px;border-radius:999px;color:#fff;background:rgba(5,13,27,.68);border:1px solid rgba(255,255,255,.26);backdrop-filter:blur(8px);font-size:10px;font-weight:950;letter-spacing:.08em}.sport-chip{left:13px}.lock-chip{right:13px}.score-chip{position:absolute;right:13px;top:57px;padding:9px 11px;border-radius:15px;color:#fff;background:var(--blue);box-shadow:0 9px 22px rgba(21,101,242,.35);text-align:right}.score-chip b{display:block;font-size:21px;line-height:1}.score-chip span{display:block;font-size:9px;font-weight:850;letter-spacing:.08em;text-transform:uppercase;opacity:.85;margin-top:3px}.score-chip.locked{background:rgba(5,13,27,.74);box-shadow:none}
.player-info{padding:16px}.name-line{display:flex;justify-content:space-between;align-items:start;gap:12px}.name-line h2{font-size:23px}.upload-badge{padding:6px 8px;border-radius:9px;background:#eef8d8;color:#4e7110;font-size:10px;font-weight:950;white-space:nowrap}.gear-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:12px}.tag{display:inline-flex;align-items:center;gap:5px;padding:7px 9px;border:1px solid #dce8fb;border-radius:10px;background:#f3f7ff;color:#22579f;font-size:10px;font-weight:850}.tag strong{color:#132c55}.ratebox{margin-top:14px;padding:14px;border:1px solid var(--line);border-radius:18px;background:#fbfcfe}.rate-top{display:flex;justify-content:space-between;align-items:center;gap:10px}.rate-top label{font-size:12px;font-weight:900}.score-input{width:82px;padding:8px 9px;border:2px solid var(--blue);border-radius:12px;color:var(--blue);background:#fff;text-align:center;font-size:18px;font-weight:950;outline:none}.score-input:focus{box-shadow:0 0 0 4px rgba(21,101,242,.12)}input[type=range]{width:100%;accent-color:var(--blue);margin:14px 0 3px}.range-labels{display:flex;justify-content:space-between;color:#929baa;font-size:10px;font-weight:800}.submit-row{display:flex;gap:9px;margin-top:12px}.btn{min-height:46px;border:0;border-radius:14px;padding:12px 15px;font-weight:950}.btn.primary{flex:1;color:#fff;background:var(--blue);box-shadow:0 11px 24px rgba(21,101,242,.22)}.btn.secondary{color:var(--ink);background:#fff;border:1px solid var(--line)}.btn:disabled{cursor:not-allowed;opacity:.55}.full-width{width:100%}.hint{text-align:center;color:#98a1ae;font-size:10px;font-weight:750;margin:12px 0 2px}
.result{margin-top:14px;border:1px solid #d7e6ff;border-radius:18px;background:linear-gradient(140deg,#f5f9ff,#fff);padding:14px}.result-top{display:flex;justify-content:space-between;align-items:start;gap:10px}.result-kicker{font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--blue);font-weight:950}.result-title{font-size:18px;font-weight:950;letter-spacing:-.03em;margin-top:4px}.result-score{font-size:25px;font-weight:950;color:var(--blue)}.comparison{margin-top:12px;padding:11px 12px;border-radius:13px;background:#fff;border:1px solid var(--line);font-size:12px;font-weight:850}.comparison span{color:var(--muted);font-weight:700}.result-meta{display:flex;gap:8px;flex-wrap:wrap;margin-top:11px}.result-meta span{padding:7px 9px;border-radius:9px;background:#edf4ff;color:#1e54a8;font-size:10px;font-weight:900}.result .btn{width:100%;margin-top:12px}.empty-state{padding:18px;border:1px dashed #cad2de;border-radius:16px;color:var(--muted);text-align:center;font-size:12px}
.panel{border:1px solid var(--line);border-radius:20px;background:#fff;padding:16px;box-shadow:0 11px 30px rgba(0,0,0,.045)}.panel+.panel{margin-top:14px}.panel h2{font-size:21px}.desc{font-size:12px;line-height:1.45;color:var(--muted);margin-top:5px}.profile-hero{display:flex;gap:13px;align-items:center}.avatar{width:60px;height:60px;border-radius:19px;display:grid;place-items:center;background:linear-gradient(145deg,#2380ff,#071d4d);color:#fff;font-size:22px;font-weight:950}.level-pill{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:6px 9px;border-radius:999px;background:#eef8d8;color:#4e7110;font-size:10px;font-weight:950}.statgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:15px}.stat{padding:11px 6px;text-align:center;border:1px solid var(--line);border-radius:14px}.stat b{display:block;font-size:19px}.stat span{display:block;color:var(--muted);font-size:9px;font-weight:800;margin-top:3px}.progress-card{margin-top:14px;padding:12px;border-radius:15px;background:#f6f9fd}.progress-row{display:flex;justify-content:space-between;font-size:11px;font-weight:900}.progress-track{height:8px;background:#e0e7f0;border-radius:99px;overflow:hidden;margin-top:8px}.progress-track i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--blue),var(--blue2))}.metric-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}.metric{padding:11px 8px;border-radius:14px;border:1px solid var(--line)}.metric b{display:block;font-size:16px}.metric span{display:block;font-size:10px;color:var(--muted);font-weight:800;margin-top:4px}.submission-list{display:grid;gap:9px;margin-top:12px}.submission{display:flex;gap:10px;align-items:center;border:1px solid var(--line);border-radius:14px;padding:9px}.submission img{width:50px;height:50px;object-fit:cover;border-radius:11px}.submission b,.submission span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.submission b{font-size:12px}.submission span{font-size:10px;color:var(--muted);margin-top:4px}
.field{margin-top:14px}.field label{display:block;font-size:11px;font-weight:900;margin-bottom:7px}.field input,.field select{width:100%;padding:12px 13px;border:1px solid #d8dfe9;border-radius:12px;background:#fff;outline:none}.field input:focus,.field select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(21,101,242,.1)}.uploadbox{position:relative;margin-top:14px;padding:18px;text-align:center;border:2px dashed #bad1ff;border-radius:16px;background:#f5f9ff;overflow:hidden}.uploadbox input{position:absolute;inset:0;opacity:0;cursor:pointer}.uploadbox b{display:block;font-size:13px}.uploadbox span{display:block;color:var(--muted);font-size:11px;margin-top:4px}.preview{display:none;width:100%;max-height:330px;object-fit:cover;border-radius:14px;margin-top:12px}.gear-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}.brand-toggle{padding:10px;text-align:left;border:1px solid var(--line);border-radius:12px;background:#fff;font-size:11px;font-weight:900}.brand-toggle.selected{border-color:var(--blue);background:#edf4ff;color:#1553bd;box-shadow:0 0 0 2px rgba(21,101,242,.08)}.selected-gear{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}.selected-gear .tag button{border:0;background:transparent;padding:0;color:#22579f;font-weight:950}.status{display:none;margin-top:12px;padding:11px;border-radius:12px;font-size:11px;font-weight:850}.status.show{display:block}.status.ok{background:#eaf8ef;color:#146c35}.status.err{background:#fff0f0;color:#a42828}
.bottomnav{position:fixed;z-index:30;bottom:0;left:50%;transform:translateX(-50%);width:min(540px,100%);display:grid;grid-template-columns:repeat(3,1fr);gap:6px;padding:8px 12px calc(8px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:rgba(255,255,255,.96);backdrop-filter:blur(14px)}.navbtn{border:0;border-radius:14px;background:transparent;color:#7b8491;padding:8px 4px 7px;font-size:10px;font-weight:900}.navbtn svg{display:block;width:19px;height:19px;margin:0 auto 4px}.navbtn.active{background:#edf4ff;color:var(--blue)}.login-overlay{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:20px;background:radial-gradient(circle at 80% 10%,#1d4f9c 0,#0b1730 42%,#060c17 100%)}.login-overlay.hidden{display:none}.login-card{width:min(420px,100%);padding:23px;border-radius:28px;background:#fff;box-shadow:0 28px 90px rgba(0,0,0,.45)}.hero-logo{width:61px;height:61px;border-radius:19px;font-size:24px;font-weight:1000;margin-bottom:16px}.login-card h1{font-size:34px}.login-card p{font-size:13px;line-height:1.5;color:var(--muted);margin-top:8px}.login-card .btn{width:100%;margin-top:13px}.demo-btn{width:100%;margin-top:9px;border:1px solid #d8e3f7;border-radius:14px;background:#f4f8ff;color:#1553bd;padding:12px;font-weight:950}.tiny{margin-top:12px;color:#98a1ae;text-align:center;font-size:10px;line-height:1.4}.toast{position:fixed;z-index:120;left:50%;bottom:94px;transform:translate(-50%,15px);width:min(92%,420px);padding:12px 14px;border-radius:14px;background:#0b1220;color:#fff;box-shadow:0 15px 35px rgba(0,0,0,.25);font-size:12px;font-weight:850;opacity:0;pointer-events:none;transition:.2s ease}.toast.show{opacity:1;transform:translate(-50%,0)}
@media(min-width:700px){body{padding:24px 0}.app{min-height:calc(100vh - 48px);border-radius:30px;overflow:hidden}.topbar{border-radius:30px 30px 0 0}.bottomnav{bottom:24px;border-radius:0 0 30px 30px}}

/* Interaction polish and device-safe behavior. */
button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid rgba(21,101,242,.35);outline-offset:2px}.app{min-height:100svh;min-height:100dvh;padding-bottom:calc(104px + env(safe-area-inset-bottom))}.topbar{padding-top:calc(13px + env(safe-area-inset-top))}.iconbtn{width:48px;height:48px;display:grid;place-items:center}.icon{width:20px;height:20px;display:inline-block;vertical-align:middle;flex:0 0 auto}.btn{min-height:48px;transition:transform 120ms ease,box-shadow 180ms ease,background 180ms ease}.btn:active,.iconbtn:active,.navbtn:active,.brand-toggle:active{transform:scale(.97)}.icon-btn{width:48px;padding:0;display:grid;place-items:center}.brand-toggle{min-height:48px;transition:transform 120ms ease,border-color 180ms ease,background 180ms ease}.selected-gear .tag button{width:32px;min-height:32px;border:0;border-radius:8px;padding:5px}.navbtn{min-height:48px;transition:transform 120ms ease,background 180ms ease,color 180ms ease}.hint{font-size:11px}.player-card{touch-action:pan-y;overscroll-behavior-x:contain;transform:translate3d(var(--drag-x,0),0,0) rotate(var(--drag-rotate,0));transition:transform 220ms cubic-bezier(.2,.75,.25,1),box-shadow 180ms ease,opacity 220ms ease}.player-card.is-dragging{transition:none;box-shadow:0 25px 55px rgba(12,35,76,.18)}.player-card.swipe-left{transform:translate3d(-108%,0,0) rotate(-3deg);opacity:0}.player-card.swipe-right{transform:translate3d(108%,0,0) rotate(3deg);opacity:0}.result{animation:reveal-in 260ms ease both}.result-score{animation:score-pop 360ms 100ms ease both}.result-meta span{display:inline-flex;align-items:center;gap:5px}.toast{bottom:calc(104px + env(safe-area-inset-bottom));transition:opacity 180ms ease,transform 220ms ease}
@keyframes reveal-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes score-pop{from{opacity:.1;transform:scale(.75)}to{opacity:1;transform:scale(1)}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{scroll-behavior:auto!important;animation-duration:1ms!important;animation-iteration-count:1!important;transition-duration:1ms!important}.player-card.swipe-left,.player-card.swipe-right{transform:none;opacity:.35}}
.action-rail{display:flex;align-items:center;gap:8px;margin-top:12px}.rail-btn{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:8px 10px;border:1px solid var(--line);border-radius:11px;background:#fff;color:#4a5668;font-size:10px;font-weight:850}.rail-btn[aria-pressed=true]{border-color:#bdd3ff;background:#edf4ff;color:#1553bd}.rail-btn .icon{width:16px;height:16px}.signal-badge{margin-left:auto;padding:7px 8px;border-radius:9px;background:#fff3df;color:#9b6411;font-size:9px;font-weight:900;letter-spacing:.05em}.result-title:focus-visible{outline:3px solid rgba(21,101,242,.35);outline-offset:4px;border-radius:5px}
.trend-row{display:flex;justify-content:flex-end;margin-top:10px}.trend-row .signal-badge{margin-left:0}
.sport-filter{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:-3px 0 14px;padding:2px 1px}.sport-filter::-webkit-scrollbar{display:none}.filter-btn{min-height:44px;white-space:nowrap;border:1px solid #29415e;border-radius:11px;background:#0d1724;color:#aebdd0;padding:8px 12px;font-size:11px;font-weight:800}.filter-btn.active{background:#d6ff63;border-color:#d6ff63;color:#09111d}.filter-btn:active{transform:scale(.97)}
.selected-gear .tag button{width:44px;min-height:44px;display:grid;place-items:center}.selected-gear .tag button .icon{width:17px;height:17px}
@media(max-width:699px){.photo-wrap{height:190px;aspect-ratio:auto}main{padding-bottom:120px}.action-rail{margin-top:9px}.gear-tags{margin-top:9px}}
@media(min-width:700px){.photo-wrap{height:420px;aspect-ratio:auto}}

.login-overlay{background:linear-gradient(180deg,rgba(4,10,18,.38),#050a11 82%),url('assets/setup-gear-bench.png') center/cover}

/* DripScore visual direction: rink-night shell, ice-paper contrast, and a media-led feed. */
html,body{background:#05080d;color:#f5f7fb}body{font-family:"Avenir Next","Segoe UI",system-ui,sans-serif}.app{background:#0a1018;color:#f5f7fb;box-shadow:0 28px 90px rgba(0,0,0,.45)}.topbar{background:rgba(10,16,24,.92);border-bottom:1px solid rgba(255,255,255,.08);color:#f5f7fb}.brand small{color:#8390a4}.logo,.hero-logo{background:linear-gradient(145deg,#3c8dff,#142e62);box-shadow:0 12px 30px rgba(60,141,255,.24)}.xp-pill{background:#142337;color:#d6ff63;border:1px solid #243d5c}.xp-pill span{color:#9dadbf}.iconbtn{background:#111b29;border-color:#2a3c54;color:#fff}.prototype-label{color:#8292a8}main{background:linear-gradient(180deg,#0a1018 0,#0b131e 100%)}h1{font-weight:780;letter-spacing:-.065em}.eyebrow{color:#73a7ff;font-weight:800;letter-spacing:.1em}.counter{color:#91a0b5}.challenge{border-color:#263c59;background:linear-gradient(120deg,#101d2d,#0d1826);box-shadow:inset 0 1px 0 rgba(255,255,255,.04)}.challenge-copy{color:#f5f7fb}.challenge-copy span{color:#9aa8ba}.challenge-progress{color:#d6ff63}.bar{background:#22334a}.bar i{background:#d6ff63}.player-card{border-color:#23364f;background:#0f1825;box-shadow:0 24px 65px rgba(0,0,0,.32)}.photo-wrap{background:#101923}.photo-shade{background:linear-gradient(180deg,rgba(2,7,14,.38),transparent 36%,rgba(2,7,14,.72))}.sport-chip,.lock-chip{background:rgba(3,9,16,.74);border-color:rgba(255,255,255,.22);color:#eef5ff}.score-chip{background:#d6ff63;color:#09111d;box-shadow:0 12px 26px rgba(214,255,99,.25)}.score-chip.locked{background:rgba(5,12,21,.82);color:#dce6f4;border-color:rgba(255,255,255,.2);box-shadow:none}.player-info{background:#0f1825}.name-line h2{font-weight:760}.sub{color:#9aa8ba}.upload-badge{background:#1d3429;color:#d6ff63}.gear-tags .tag{background:#16263a;border-color:#284361;color:#b8cbed}.gear-tags .tag strong{color:#eef5ff}.action-rail{border-top:1px solid rgba(255,255,255,.08);padding-top:10px}.rail-btn{background:#111e2d;border-color:#2b405a;color:#c7d3e3}.rail-btn[aria-pressed=true]{background:#203b35;border-color:#6f9e5a;color:#d6ff63}.signal-badge{background:#332711;color:#ffc96e}.ratebox{background:#111e2d;border-color:#29415f}.rate-top label{color:#eef5ff}.score-input{background:#0a111b;border-color:#73a7ff;color:#d6ff63}.range-labels{color:#90a0b4}input[type=range]{accent-color:#d6ff63}.btn.primary{background:#d6ff63;color:#07100e;box-shadow:0 12px 24px rgba(214,255,99,.18)}.btn.primary:hover{background:#e1ff83;box-shadow:0 15px 30px rgba(214,255,99,.25)}.btn.secondary{background:#111e2d;border-color:#2b405a;color:#e4ebf6}.result{background:linear-gradient(135deg,#12243a,#101a29);border-color:#315a87}.result-kicker{color:#73a7ff}.result-title{color:#f6f8fb}.result-score{color:#d6ff63}.comparison{background:#0b141f;border-color:#2a4059;color:#f1f5fb}.comparison span{color:#9caabc}.result-meta span{background:#1a3046;color:#c7daf3}.panel{background:#101a27;border-color:#263c59;box-shadow:0 16px 38px rgba(0,0,0,.2)}.panel h2{color:#f5f7fb}.desc{color:#9aa8ba}.avatar{background:linear-gradient(145deg,#3c8dff,#142e62)}.level-pill{background:#203b35;color:#d6ff63}.stat,.metric{border-color:#263c59;background:#0d1622}.stat span,.metric span{color:#91a0b5}.progress-card{background:#0b141f}.progress-row{color:#dbe5f1}.progress-track{background:#26384f}.progress-track i{background:linear-gradient(90deg,#73a7ff,#d6ff63)}.field input,.field select{background:#0b141f;border-color:#29415e;color:#eef5ff}.field input::placeholder{color:#73849a}.field input:focus,.field select:focus{border-color:#73a7ff;box-shadow:0 0 0 3px rgba(115,167,255,.16)}.uploadbox{background:#0f1d2e;border-color:#3f6da2}.uploadbox b{color:#f2f6fb}.uploadbox span{color:#8fa0b4}.brand-toggle{background:#0d1724;border-color:#2a405b;color:#dbe5f0}.brand-toggle.selected{background:#1b3b38;border-color:#89ad62;color:#d6ff63;box-shadow:0 0 0 2px rgba(214,255,99,.1)}.selected-gear .tag{background:#1b2e43;border-color:#355676;color:#d9e7f8}.selected-gear .tag button{color:#d6ff63}.bottomnav{background:rgba(8,14,22,.97);border-top-color:#243850}.navbtn{color:#8291a5}.navbtn.active{background:#152d43;color:#d6ff63}.toast{background:#e8f0fb!important;color:#09111d;box-shadow:0 18px 40px rgba(0,0,0,.35)}.login-overlay{background:linear-gradient(180deg,rgba(4,10,18,.28),#050a11 82%),url('assets/setup-boards.png') center/cover}.login-card{background:rgba(8,15,25,.88);border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(18px);box-shadow:0 30px 100px rgba(0,0,0,.6)}.login-card h1{color:#fff}.login-card p{color:#c1ccda}.login-card .field label{color:#e8eff8}.demo-btn{background:rgba(25,45,67,.88);border-color:#3b5c81;color:#d6ff63}.tiny{color:#91a0b5}.icon{stroke-width:1.9}.result-title:focus-visible{outline-color:#d6ff63}
@media(max-width:699px){.photo-wrap{height:190px}.player-card{border-radius:20px}.player-info{padding:14px}.action-rail{margin-top:9px}.ratebox{margin-top:10px}.bottomnav{padding-bottom:calc(8px + env(safe-area-inset-bottom))}}
@media(min-width:700px){body{background:radial-gradient(circle at 50% -10%,#14283f,#05080d 62%)}.app{border:1px solid #1b314b}}

/* Flagship pass: subtract chrome, elevate the photo, and reserve surfaces for meaning. */
:root{--surface:#0a1018;--surface-raised:#0f1825;--surface-inset:#111e2d;--hairline:#263c59;--ink:#f5f7fb;--muted:#9aa8ba;--signal:#d6ff63}
.logo,.hero-logo{color:#d6ff63}.logo-mark{width:22px;height:22px;display:block}.hero-logo .logo-mark{width:30px;height:30px}.sport-filter{gap:19px;border-bottom:1px solid rgba(255,255,255,.1);padding:0 0 2px;margin-bottom:14px}.filter-btn{min-height:38px;padding:7px 0;border:0;border-radius:0;background:transparent;color:#8595aa;font-size:11px;font-weight:750}.filter-btn.active{background:transparent;color:#d6ff63;box-shadow:inset 0 -2px 0 #d6ff63}.challenge{border:0;border-radius:0;background:transparent;box-shadow:none;padding:0 0 11px;margin-bottom:10px;border-bottom:1px solid rgba(255,255,255,.08)}.challenge-copy{font-size:11px}.challenge-copy span{font-size:11px}.challenge-progress{display:flex;align-items:center;gap:8px;font-size:11px}.challenge-progress .bar{margin:0;width:54px;height:4px}.player-card{border:0;border-radius:18px;background:#0f1825;box-shadow:0 25px 60px rgba(0,0,0,.28)}.photo-wrap{height:260px}.sport-chip,.lock-chip{top:auto;bottom:13px;padding:0;background:transparent;border:0;border-radius:0;backdrop-filter:none;color:rgba(255,255,255,.9);font-size:10px;letter-spacing:.12em}.sport-chip{left:15px}.lock-chip{right:15px}.score-chip{right:15px;top:15px;padding:0;background:transparent!important;border:0;box-shadow:none!important;color:#fff;text-align:right}.score-chip b{font-size:34px;letter-spacing:-.06em}.score-chip span{font-size:9px;color:#d6ff63;letter-spacing:.12em}.score-chip.locked b{font-size:29px;color:#d6ff63}.score-chip.locked span{color:rgba(255,255,255,.78)}.player-info{padding:15px 16px 17px}.name-line h2{font-size:22px;font-weight:700}.gear-tags{gap:0;margin-top:8px}.gear-tags .tag{padding:0;border:0;background:transparent;color:#aebdd0;font-size:11px;font-weight:650}.gear-tags .tag strong{color:#d6ff63;font-weight:700}.gear-tags .tag:not(:last-child)::after{content:' / ';padding:0 6px;color:#55708e}.trend-row{margin-top:8px}.signal-badge{padding:5px 0;background:transparent;color:#e6bc69;font-size:9px;letter-spacing:.1em}.action-rail{border:0;padding:0;margin-top:8px}.rail-btn{width:44px;height:44px;min-height:44px;justify-content:center;padding:0;border:0;background:transparent;color:#9eafc2;border-radius:50%}.rail-btn[aria-pressed=true]{background:#203b35;color:#d6ff63}.rail-btn .icon{width:18px;height:18px}.ratebox{margin-top:12px;padding:14px 0 0;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent}.rate-top label{font-size:11px;color:#aebdd0}.score-input{width:75px;height:48px;padding:5px 8px;background:#0a111b;border:1px solid #4b6b93;border-radius:10px;color:#d6ff63;font-size:20px}.submit-row{gap:8px}.btn.primary{min-height:50px;background:#d6ff63;color:#07100e;box-shadow:none;border-radius:12px}.btn.secondary{min-height:50px;background:#101d2c;border-color:#2d4765;color:#e5edf7;border-radius:12px}.icon-btn{width:50px}.result{margin-top:13px;padding:14px 0 0;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent}.result-top{align-items:end}.result-title{font-size:19px}.result-score{font-size:38px}.comparison{margin-top:12px;padding:12px 0;border:0;border-bottom:1px solid rgba(255,255,255,.1);border-radius:0;background:transparent;font-size:12px}.result-meta span{padding:0;background:transparent;color:#b6cae1}.panel{background:#0f1825;border:1px solid #223852;box-shadow:none;border-radius:16px}.metric,.stat{background:#0b141f;border-color:#203650}.bottomnav{background:rgba(7,12,19,.96);border-top-color:#1b3049}.navbtn{border-radius:0;background:transparent}.navbtn.active{background:transparent;color:#d6ff63;box-shadow:inset 0 -2px 0 #d6ff63}.login-card{border-radius:22px;background:rgba(7,13,22,.82)}.login-card h1{font-weight:720}.field input,.field select{border-radius:10px}.uploadbox{border-radius:13px}.toast{background:#e8f0fb!important;color:#09111d}.score-input:focus{box-shadow:0 0 0 3px rgba(214,255,99,.14);border-color:#d6ff63}
@media(max-width:699px){.photo-wrap{height:320px}.app{padding-bottom:calc(98px + env(safe-area-inset-bottom))}.sport-filter{overflow-x:auto}.challenge{padding-bottom:9px;margin-bottom:10px}}
.result,.result-score{animation:none}
@media(max-width:699px){.login-overlay{align-items:end;padding:0}.login-card{width:100%;max-width:none;border-radius:24px 24px 0 0;padding:24px 20px calc(22px + env(safe-area-inset-bottom))}.login-card .hero-logo{margin-bottom:12px}}
.login-overlay{background:linear-gradient(180deg,rgba(4,10,18,.38),#050a11 82%),url('assets/setup-gear-bench.png') center/cover}
.result,.result-score{animation:none}.icon{stroke-linecap:round;stroke-linejoin:round}
@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-sans-latin-400-normal.woff2') format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-sans-latin-500-normal.woff2') format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/ibm-plex-sans-latin-600-normal.woff2') format('woff2')}@font-face{font-family:'IBM Plex Sans';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/ibm-plex-sans-latin-700-normal.woff2') format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/barlow-condensed-latin-500-normal.woff2') format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/barlow-condensed-latin-600-normal.woff2') format('woff2')}@font-face{font-family:'Barlow Condensed';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/barlow-condensed-latin-700-normal.woff2') format('woff2')}
body{font-family:'IBM Plex Sans',system-ui,sans-serif;font-size:15px;line-height:1.45}.brand,.btn,.navbtn,.filter-btn,.rail-btn,.challenge-copy,.level-pill,.signal-badge,.sport-chip,.lock-chip,.score-chip span,.result-kicker,.result-meta,.counter{font-family:'IBM Plex Sans',system-ui,sans-serif}.h1,h1,h2,.result-title,.score-chip b,.score-input,.result-score,.stat b,.metric b,.level-pill{font-family:'Barlow Condensed','Arial Narrow',sans-serif;font-variant-numeric:tabular-nums}h1{font-size:43px;line-height:.94;letter-spacing:-.045em;font-weight:600}h2{font-weight:600;letter-spacing:-.02em}.name-line h2{font-size:28px}.score-input{font-size:28px}.result-score{font-size:48px}.result-title{font-size:25px}.stat b,.metric b{font-size:24px}
/* Gallery detail surface */
.detail-head{display:flex;align-items:center;gap:12px;margin-bottom:16px}.detail-head .iconbtn{flex:0 0 auto}.detail-stage{position:relative;overflow:hidden;aspect-ratio:4/5;background:#0b121b;border-radius:18px;border:1px solid #273e59}.detail-stage img{display:block;width:100%;height:100%;object-fit:cover}.detail-caption{position:absolute;left:14px;right:14px;bottom:14px;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5)}.detail-caption strong{display:block;font-family:'Barlow Condensed',sans-serif;font-size:26px}.detail-caption span{display:block;color:#c5d4e6;font-size:12px;margin-top:3px}.detail-dots{display:flex;justify-content:center;gap:5px;margin:10px 0}.detail-dots i{width:6px;height:6px;border-radius:50%;background:#3b536f}.detail-dots i.active{width:22px;border-radius:10px;background:#d6ff63}.detail-thumbs{display:flex;gap:8px;overflow-x:auto;margin:0 0 14px;padding-bottom:2px}.detail-thumb{width:62px;height:62px;flex:0 0 auto;padding:0;border:1px solid #304963;border-radius:10px;overflow:hidden;background:#0c1622}.detail-thumb img{width:100%;height:100%;object-fit:cover;display:block}.detail-thumb.active{border-color:#d6ff63;box-shadow:0 0 0 2px rgba(214,255,99,.2)}.detail-actions{display:grid;grid-template-columns:48px 1fr 48px;gap:8px}.detail-actions .btn{width:100%}.detail-view{padding-bottom:16px}.detail-view .iconbtn{background:#101d2c;border-color:#29415f}.nav-hidden .bottomnav{display:none}
.brand-logo{width:15px;height:15px;object-fit:contain;filter:invert(82%) sepia(32%) saturate(744%) hue-rotate(42deg) brightness(104%);opacity:.95}.gear-tags .brand-logo{margin-left:4px}.tag span{display:inline-flex;align-items:center}
.gear-tags .tag .icon{width:14px;height:14px;margin-left:4px;color:#718aaa}
.logo,.hero-logo{background:transparent;box-shadow:none;border-radius:0;color:#d6ff63}.xp-pill{background:transparent;border:0;padding-left:0;padding-right:0;border-radius:0}.xp-pill .icon{color:#d6ff63}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
.preview-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:12px}.preview-tile{position:relative;aspect-ratio:1;border:1px solid #2d4765;border-radius:10px;overflow:hidden;background:#0b141f}.preview-tile img{width:100%;height:100%;object-fit:cover;display:block}.preview-tile button{position:absolute;top:4px;right:4px;width:28px;height:28px;border:0;border-radius:50%;background:rgba(5,12,20,.84);color:#fff;display:grid;place-items:center}.preview-tile button .icon{width:14px;height:14px}
.legacy-preview{display:none!important}
.photo-wrap{aspect-ratio:4/5;height:auto}.photo-wrap img{object-fit:contain;background:#0b121b}.gear-tags{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px}.gear-tags::-webkit-scrollbar{display:none}.gear-tags .tag{flex:0 0 auto}
.detail-stage img{object-fit:contain;background:#0b121b}