:root{--ink:#17123b;--paper:#fff8e8;--orange:#ff6839;--green:#69e4a1;--purple:#8967ff;--yellow:#ffd64e}*{box-sizing:border-box}[hidden]{display:none!important}body{margin:0;color:var(--ink);background:radial-gradient(circle at 5% 0,#fff0a4,transparent 38rem),var(--paper);font:600 15px/1.5 system-ui,sans-serif}header{max-width:1000px;margin:auto;display:flex;align-items:center;justify-content:space-between;padding:20px;gap:10px}a{color:inherit}button,input{font:inherit;color:inherit}button,a.primary,a.secondary{cursor:pointer}button:disabled{opacity:.5;cursor:default}.brand{font-size:1.5rem;font-weight:1000;text-decoration:none}.brand span{display:block;font-size:.55rem;letter-spacing:.15em}nav{display:flex;gap:10px}nav a{font-size:.7rem;font-weight:950;text-decoration:none}main{max-width:860px;margin:auto;padding:10px 20px 50px}h1{font-size:clamp(2.5rem,7vw,4.5rem);line-height:1.03;letter-spacing:-.06em;margin:12px 0 20px}h2{font-size:1.2rem;margin:0 0 12px}p{margin:10px 0 18px}.eyebrow{font-size:.65rem;letter-spacing:.15em;font-weight:1000}.card{border:2px solid var(--ink);border-radius:17px;background:#fff;padding:20px;margin:18px 0;box-shadow:4px 5px 0 var(--ink)}.primary,.secondary{display:inline-block;text-align:center;border:2px solid var(--ink);border-radius:9px;padding:12px 16px;text-decoration:none;font-size:.75rem;font-weight:950;background:var(--orange)}.secondary{background:var(--yellow)}.muted{font-size:.76rem;color:#5b5674}.identity{display:flex;align-items:center;gap:15px}.identity>div:nth-child(2){flex:1;min-width:0}.identity h1{font-size:2.4rem;overflow-wrap:anywhere;margin:6px 0}.identity p{margin:4px 0}.identity #avatar{display:grid;place-items:center;flex-shrink:0;width:64px;height:64px;border:2px solid var(--ink);border-radius:50%;background:var(--purple);color:white;font-size:1.5rem;font-weight:1000}summary{font-size:.8rem;font-weight:950;cursor:pointer}details p{margin-top:15px}form{display:flex;align-items:end;gap:10px;margin:17px 0;flex-wrap:wrap}label{display:grid;gap:6px;flex:1;min-width:160px;font-size:.65rem;font-weight:950}input{width:100%;min-height:43px;border:2px solid var(--ink);border-radius:8px;padding:8px;background:var(--paper);font-size:.9rem}.heading{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap}.heading h2{margin:0}.sport-tabs{display:flex;gap:8px;margin-top:25px}.sport-tabs button{flex:1;border:2px solid var(--ink);border-radius:10px;padding:10px;background:#fff;font-weight:950}.sport-tabs button[aria-pressed=true]{background:var(--purple);color:#fff}.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:10px}.stats>div{padding:15px;border:2px solid var(--ink);border-radius:12px;background:var(--green)}.stats b,.stats small{display:block}.stats b{font-size:1.6rem}.stats small{font-size:.6rem}.friend-row,.history-row{display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid #d3ccdf;padding:15px 0}.friend-row>div:first-child,.history-row>div{flex:1;min-width:0}.friend-row b,.friend-row small,.history-row b,.history-row small{display:block;overflow-wrap:anywhere}.friend-row small,.history-row small{font-size:.7rem;color:#5b5674}.friend-row .actions{display:flex;gap:6px;flex-wrap:wrap}.friend-row button{padding:8px;font-size:.65rem}.history-row>a{font-size:.7rem;font-weight:950}.outcome{font-size:.7rem;font-weight:950;padding:6px;border-radius:6px;background:#eee9ff}.outcome.win{background:var(--green)}#status{font-size:.8rem}#status:empty{display:none}#rival-card{background:#fff0a4}
@media(max-width:600px){header{padding:14px 12px}main{padding:8px 12px 35px}.card{padding:15px}.identity{gap:9px;flex-wrap:wrap}.identity h1{font-size:1.8rem}.identity #avatar{width:48px;height:48px;font-size:1rem}.identity #logout{padding:8px;font-size:.6rem}.stats{gap:6px}.stats>div{padding:10px}.stats b{font-size:1.3rem}.friend-row{align-items:flex-start;flex-wrap:wrap}.friend-row .actions{width:100%}form button{min-height:43px}.heading>.secondary{width:100%}nav{gap:7px}nav a{font-size:.6rem}.history-row{gap:7px}.history-row .outcome{font-size:.55rem}.history-row>a{font-size:.6rem}}