/* R2PRO — shared stylesheet
   Dark, single-theme by choice: this is a court-side app, it commits to one look. */

[hidden]{display:none !important}

:root{
  --ink:#0B0D0F;
  --court:#171A1E;
  --court-hi:#20242A;
  --line:rgba(255,255,255,.09);
  --line-2:rgba(255,255,255,.16);
  --text:#F2F4F5;
  --muted:#9AA3AB;
  --coral:#C8F542;
  --coral-dim:rgba(200,245,66,.14);
  --ochre:#FF9F43;
  --ochre-dim:rgba(255,159,67,.14);
  --sea:#35C6D6;
  --good:#5BD98A;
  --f-display:'Anton',Impact,'Arial Narrow Bold',sans-serif;
  --f-body:'Instrument Sans',ui-sans-serif,system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --f-mono:'IBM Plex Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --r:14px;
  --r-s:9px;
}
*{box-sizing:border-box}
html{color-scheme:dark}
body{
  margin:0;background:var(--ink);color:var(--text);
  font-family:var(--f-body);font-size:15px;line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none}
:focus-visible{outline:2px solid var(--coral);outline-offset:2px;border-radius:4px}
h1,h2,h3,h4{text-wrap:balance;margin:0}
p{margin:0}
.mono{font-family:var(--f-mono)}
.eyebrow{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--muted)}
.wrap{width:100%;max-width:1140px;margin:0 auto;padding-inline:20px}

/* ---------- buttons ---------- */
.btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  padding:12px 20px;border-radius:100px;font-weight:600;font-size:14.5px;
  transition:transform .12s ease,background .15s ease,border-color .15s ease;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--coral);color:#0B0D0F}
.btn-primary:hover{background:#D6FF5C}
.btn-ghost{border:1px solid var(--line-2);color:var(--text)}
.btn-ghost:hover{border-color:var(--text)}
.btn-google{background:#fff;color:#1c1c1c}
.btn-google:hover{background:#eef1f4}
.btn-sm{padding:8px 14px;font-size:13px}
.btn[disabled]{opacity:.4;cursor:not-allowed}

/* ---------- site chrome ---------- */
.topbar{position:sticky;top:0;z-index:40;backdrop-filter:blur(12px);background:rgba(11,13,15,.86);border-bottom:1px solid var(--line)}
.topbar-in{display:flex;align-items:center;gap:18px;height:64px}
.brand{display:flex;align-items:center;gap:10px;font-family:var(--f-display);font-size:21px;letter-spacing:.04em}
.brand .r2{color:var(--coral)}
.court-glyph{width:26px;height:15px;flex:none}
.topnav{display:flex;gap:24px;margin-left:auto;font-size:14px;color:var(--muted)}
.topnav a:hover{color:var(--text)}
.topnav a.here{color:var(--text);font-weight:600}
.menu-btn{display:none;margin-left:auto;padding:8px;border:1px solid var(--line-2);border-radius:var(--r-s)}
.tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:100px;border:1px solid var(--line-2);color:var(--muted)}

footer{border-top:1px solid var(--line);padding-block:34px;color:var(--muted);font-size:13px;margin-top:auto}
.foot-in{display:flex;flex-wrap:wrap;gap:18px;justify-content:space-between;align-items:center}
.foot-nav{display:flex;flex-wrap:wrap;gap:18px}
.foot-nav a:hover{color:var(--text)}

/* ---------- page header ---------- */
.page-head{border-bottom:1px solid var(--line);padding-block:54px 44px;position:relative;overflow:hidden}
.page-head::after{
  content:"";position:absolute;top:-180px;left:50%;transform:translateX(-50%);
  width:760px;height:400px;border-radius:50%;pointer-events:none;
  background:radial-gradient(closest-side,rgba(200,245,66,.16),transparent);
}
.page-head .inner{position:relative}
.page-head h1{font-family:var(--f-display);font-size:clamp(32px,5.4vw,54px);text-transform:uppercase;margin-block:12px 14px}
.page-head p{color:var(--muted);max-width:58ch;font-size:16px}

section.band{padding-block:60px;border-bottom:1px solid var(--line)}
section.band:last-of-type{border-bottom:0}
.band-head{max-width:62ch;margin-bottom:32px}
.band-head h2{font-family:var(--f-display);font-size:clamp(26px,3.4vw,36px);text-transform:uppercase;margin-block:10px 10px}
.band-head p{color:var(--muted)}

.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ---------- home hero ---------- */
.hero{position:relative;overflow:hidden;border-bottom:1px solid var(--line)}
.hero-court{position:absolute;inset:auto -10% -30% -10%;width:120%;opacity:.16;pointer-events:none}
.hero-glow{position:absolute;top:-220px;left:50%;transform:translateX(-50%);width:900px;height:520px;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(200,245,66,.11),transparent)}
.hero-in{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:56px;align-items:center;padding-block:72px 80px}
.hero h1{font-family:var(--f-display);font-size:clamp(44px,7.2vw,82px);line-height:.92;text-transform:uppercase;margin-block:16px 20px}
.hero h1 em{font-style:normal;color:var(--coral)}
.hero-sub{color:var(--muted);font-size:17px;max-width:46ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-note{margin-top:14px;font-size:12.5px;color:var(--muted);font-family:var(--f-mono)}

.pcard{background:linear-gradient(160deg,var(--court-hi),var(--court));border:1px solid var(--line-2);border-radius:20px;padding:22px;box-shadow:0 30px 60px -30px rgba(0,0,0,.9)}
.pcard-top{display:flex;align-items:center;gap:13px}
.pcard-rows{margin-top:18px;display:grid;gap:10px}
.prow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;font-size:13.5px}
.prow span:first-child{color:var(--muted)}
.prow b{font-family:var(--f-mono);font-weight:600;font-variant-numeric:tabular-nums}
.track{height:5px;border-radius:100px;background:rgba(255,255,255,.1);overflow:hidden}
.track i{display:block;height:100%;border-radius:100px;background:var(--coral)}

.avatar{width:46px;height:46px;border-radius:50%;flex:none;display:grid;place-items:center;font-family:var(--f-display);font-size:17px;color:#0B0D0F;background:linear-gradient(140deg,var(--ochre),var(--coral))}
.avatar.sea{background:linear-gradient(140deg,var(--sea),#2E7FB8);color:#03212B}
.avatar.lg{width:64px;height:64px;font-size:23px}

.strip{border-bottom:1px solid var(--line);background:var(--court)}
.strip-in{display:flex;flex-wrap:wrap;gap:10px 34px;padding-block:18px;align-items:center}
.strip-item{display:flex;align-items:baseline;gap:9px;font-size:13px;color:var(--muted)}
.strip-item b{font-family:var(--f-display);font-size:22px;color:var(--text)}

/* feature links on the home page */
.feat{
  background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:20px;
  display:flex;flex-direction:column;gap:10px;transition:border-color .15s ease,transform .15s ease;
}
.feat:hover{border-color:var(--line-2);transform:translateY(-2px)}
.feat .ic{width:34px;height:34px;border-radius:var(--r-s);display:grid;place-items:center;background:var(--coral-dim);color:var(--coral)}
.feat h3{font-size:16px;font-weight:600}
.feat p{font-size:13.5px;color:var(--muted)}
.feat .go{font-family:var(--f-mono);font-size:12px;color:var(--coral);margin-top:auto}

/* ---------- academies ---------- */
.acad{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--court);display:flex;flex-direction:column;gap:12px}
.acad.live{border-color:rgba(200,245,66,.5);background:linear-gradient(165deg,rgba(200,245,66,.1),var(--court))}
.acad.soon{opacity:.6}
.acad.pitch{border-style:dashed;background:none}
.acad h3{font-size:16px;font-weight:600}
.acad p{font-size:13px;color:var(--muted)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--good);display:inline-block;margin-right:7px;vertical-align:middle}
.dot.off{background:var(--muted)}

.step{display:flex;gap:16px;align-items:flex-start}
.step-n{font-family:var(--f-display);font-size:34px;color:var(--coral);line-height:1;width:38px;flex:none}
.step h3{font-size:15.5px;font-weight:600;margin-bottom:5px}
.step p{font-size:13.5px;color:var(--muted)}

.prog{border:1px solid var(--line);border-radius:var(--r);padding:20px;background:var(--court);display:flex;flex-direction:column}
.prog h3{font-size:16px;font-weight:600;margin-bottom:6px}
.prog .who{font-family:var(--f-mono);font-size:11.5px;color:var(--sea);margin-bottom:8px}
.prog p{font-size:13.5px;color:var(--muted)}
.prog .price{margin-top:14px;padding-top:14px;border-top:1px solid var(--line);font-family:var(--f-mono);font-size:13px;color:var(--ochre)}

/* ---------- pricing ---------- */
.plan{border:1px solid var(--line);border-radius:var(--r);padding:22px;background:var(--court);display:flex;flex-direction:column;gap:14px}
.plan.pick{border-color:rgba(200,245,66,.5);background:linear-gradient(170deg,rgba(200,245,66,.1),var(--court))}
.plan h3{font-size:17px;font-weight:600}
.plan .amt{font-family:var(--f-display);font-size:40px;line-height:1}
.plan .amt small{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted)}
.plan ul{list-style:none;margin:0;padding:0;display:grid;gap:8px;font-size:13.5px;color:var(--muted)}
.plan li{display:flex;gap:9px;align-items:flex-start}
.plan li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--coral);flex:none;margin-top:7px}

/* ---------- coaches ---------- */
.coach{border:1px solid var(--line);border-radius:var(--r);padding:18px;background:var(--court);display:flex;flex-direction:column;gap:12px}
.coach-top{display:flex;gap:13px;align-items:center}
.coach-top h3{font-size:15.5px;font-weight:600}
.coach-role{font-size:12px;color:var(--coral);font-family:var(--f-mono);letter-spacing:.04em}
.coach p{font-size:13px;color:var(--muted)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:100px;background:rgba(255,255,255,.06);color:var(--muted);border:1px solid var(--line)}
.chip.ochre{color:var(--ochre);border-color:var(--ochre-dim);background:var(--ochre-dim)}
.chip.sea{color:var(--sea);border-color:rgba(53,198,214,.22);background:rgba(53,198,214,.1)}
.cprof{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:18px;display:flex;gap:16px}
.cprof .body{display:flex;flex-direction:column;gap:9px;min-width:0}
.cprof h3{font-size:16px;font-weight:600}

.cta-band{padding-block:72px;text-align:center;background:radial-gradient(ellipse at 50% 0%,rgba(200,245,66,.08),transparent 65%)}
.cta-band h2{font-family:var(--f-display);font-size:clamp(28px,4.6vw,48px);text-transform:uppercase;margin-bottom:14px}
.cta-band p{color:var(--muted);max-width:52ch;margin:0 auto 26px}

/* ================= APP ================= */
.appbar{position:sticky;top:0;z-index:50;background:rgba(11,13,15,.92);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.appbar-in{display:flex;align-items:center;gap:14px;height:62px;padding-inline:20px;max-width:1240px;margin:0 auto}
.switcher{position:relative;margin-left:6px}
.switch-btn{display:flex;align-items:center;gap:9px;padding:7px 12px;border-radius:100px;border:1px solid var(--line-2);font-size:13px}
.switch-btn:hover{border-color:var(--text)}
.switch-menu{position:absolute;top:calc(100% + 8px);left:0;width:252px;background:var(--court-hi);border:1px solid var(--line-2);border-radius:var(--r);padding:6px;box-shadow:0 24px 50px -20px rgba(0,0,0,.9)}
.switch-menu button{display:block;width:100%;text-align:left;padding:10px 12px;border-radius:var(--r-s);font-size:13.5px}
.switch-menu button:hover{background:rgba(255,255,255,.07)}
.switch-menu .sub{display:block;font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.pts-chip{margin-left:auto;display:flex;align-items:center;gap:8px;padding:7px 14px;border-radius:100px;background:var(--ochre-dim);border:1px solid rgba(255,159,67,.3);color:var(--ochre);font-family:var(--f-mono);font-weight:600;font-size:13.5px;font-variant-numeric:tabular-nums}

.shell{display:grid;grid-template-columns:216px 1fr;max-width:1240px;margin:0 auto}
.side{border-right:1px solid var(--line);padding:20px 14px;position:sticky;top:62px;height:calc(100vh - 62px)}
.side nav{display:flex;flex-direction:column;gap:3px}
.navbtn{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:var(--r-s);font-size:14px;color:var(--muted);width:100%;text-align:left}
.navbtn:hover{background:rgba(255,255,255,.05);color:var(--text)}
.navbtn.active{background:var(--coral-dim);color:var(--coral);font-weight:600}
.navbtn svg{flex:none}
.side-foot{position:absolute;bottom:20px;left:14px;right:14px;font-size:11.5px;color:var(--muted);font-family:var(--f-mono);line-height:1.5}
.main{padding:28px 24px 110px;min-width:0}
.view{display:none}
.view.on{display:block}
.view-head{margin-bottom:22px}
.view-head h2{font-family:var(--f-display);font-size:30px;text-transform:uppercase}
.view-head p{color:var(--muted);font-size:14px;margin-top:4px}

.card{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:18px}
.card-hd{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.card-hd h3{font-size:14px;font-weight:600}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.tile{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:16px;position:relative;overflow:hidden}
.tile .lab{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.tile .val{font-family:var(--f-display);font-size:38px;margin-top:8px;display:flex;align-items:baseline;gap:6px;line-height:.9}
.tile .val small{font-family:var(--f-body);font-size:13px;font-weight:500;color:var(--muted)}
.tile .delta{margin-top:8px;font-size:12px;font-family:var(--f-mono);color:var(--good)}
.tile::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--sea)}
.tile.pts::after{background:var(--ochre)}
.tile.rate::after{background:var(--coral)}
.tile.streak::after{background:var(--good)}

.next{background:linear-gradient(150deg,rgba(200,245,66,.16),var(--court) 60%);border:1px solid rgba(200,245,66,.3);border-radius:var(--r);padding:20px;display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.next .when{font-family:var(--f-display);font-size:26px;text-transform:uppercase}
.next .meta{color:var(--muted);font-size:13.5px;margin-top:4px}

.feed{display:flex;flex-direction:column}
.fitem{display:flex;gap:12px;align-items:flex-start;padding:11px 0;border-bottom:1px solid var(--line)}
.fitem:last-child{border-bottom:0;padding-bottom:0}
.fdot{width:8px;height:8px;border-radius:50%;margin-top:7px;flex:none;background:var(--sea)}
.fdot.o{background:var(--ochre)}
.fdot.g{background:var(--good)}
.fitem .t{font-size:13.5px}
.fitem .d{font-size:11.5px;color:var(--muted);font-family:var(--f-mono);margin-top:2px}
.fitem .amt{margin-left:auto;font-family:var(--f-mono);font-size:13px;color:var(--ochre);white-space:nowrap;font-weight:600}
.fitem .amt.neg{color:var(--muted)}

.skills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.skill{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.skill-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.skill-name{font-size:14.5px;font-weight:600}
.skill-es{font-family:var(--f-mono);font-size:11px;color:var(--muted);margin-top:2px}
.skill-score{font-family:var(--f-display);font-size:28px;line-height:1}
.skill-score small{font-family:var(--f-body);font-size:12px;color:var(--muted);font-weight:500}
.skill .track{margin-top:13px}
.skill .track i{background:linear-gradient(90deg,var(--sea),var(--coral))}
.skill-foot{display:flex;justify-content:space-between;gap:10px;margin-top:10px;font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.up{color:var(--good)}

.two{display:grid;grid-template-columns:1.05fr .95fr;gap:16px}
.note{border-left:2px solid var(--coral);padding:2px 0 2px 14px;margin-bottom:14px}
.note p{font-size:13.5px}
.note .by{font-size:11.5px;color:var(--muted);font-family:var(--f-mono);margin-top:5px}

.balance{background:linear-gradient(150deg,rgba(255,159,67,.18),var(--court) 62%);border:1px solid rgba(255,159,67,.32);border-radius:var(--r);padding:24px;display:flex;flex-wrap:wrap;gap:20px;align-items:center;justify-content:space-between}
.balance .big{font-family:var(--f-display);font-size:62px;line-height:.9;color:var(--ochre)}
.balance .lab{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.earn{display:flex;flex-wrap:wrap;gap:8px}

.shop{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.item{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:15px;display:flex;flex-direction:column;gap:9px}
.item .ico{font-size:26px;line-height:1}
.item h4{font-size:14px;font-weight:600}
.item .sub{font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.item .cost{font-family:var(--f-mono);font-weight:600;color:var(--ochre);font-size:14px;margin-top:auto}
.item button{width:100%;border:1px solid var(--line-2);border-radius:100px;padding:8px;font-size:12.5px;font-weight:600}
.item button:hover:not([disabled]){background:var(--ochre);color:#2B1B00;border-color:var(--ochre)}

.filters{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:16px}
.fbtn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;padding:7px 13px;border-radius:100px;border:1px solid var(--line);color:var(--muted)}
.fbtn.on{background:var(--coral);border-color:var(--coral);color:#0B0D0F;font-weight:600}
.drills{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.drill{background:var(--court);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column}
.thumb{height:112px;position:relative;display:grid;place-items:center;border-bottom:1px solid var(--line)}
.thumb .play{width:42px;height:42px;border-radius:50%;background:rgba(11,13,15,.6);border:1px solid rgba(255,255,255,.35);display:grid;place-items:center}
.thumb .dur{position:absolute;right:9px;bottom:9px;font-family:var(--f-mono);font-size:11px;background:rgba(11,13,15,.78);padding:3px 7px;border-radius:5px}
.drill-body{padding:14px;display:flex;flex-direction:column;gap:9px;flex:1}
.drill h4{font-size:14.5px;font-weight:600}
.drill .by{font-size:11.5px;color:var(--muted);font-family:var(--f-mono)}
.drill .done{margin-top:auto;border:1px solid var(--line-2);border-radius:100px;padding:8px;font-size:12.5px;font-weight:600}
.drill .done:hover{border-color:var(--good);color:var(--good)}
.drill.complete{opacity:.62}
.drill.complete .done{background:rgba(91,217,138,.14);border-color:rgba(91,217,138,.4);color:var(--good)}
.upload{border:1.5px dashed var(--line-2);border-radius:var(--r);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:26px;text-align:center;color:var(--muted);min-height:220px}
.upload:hover{border-color:var(--coral);color:var(--coral)}

.cgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:14px}

.tabbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:rgba(11,13,15,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);padding:7px 6px calc(7px + env(safe-area-inset-bottom))}
.tabbar nav{display:flex;justify-content:space-around}
.tabbtn{display:flex;flex-direction:column;align-items:center;gap:3px;padding:5px 8px;color:var(--muted);font-size:10px;font-family:var(--f-mono)}
.tabbtn.active{color:var(--coral)}

.toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:99;background:var(--court-hi);border:1px solid var(--line-2);border-radius:100px;padding:11px 20px;font-size:13.5px;box-shadow:0 20px 40px -16px rgba(0,0,0,.9);opacity:0;pointer-events:none;transition:opacity .2s ease,transform .2s ease}
.toast.show{opacity:1;transform:translate(-50%,0)}
.proto{position:fixed;right:14px;top:74px;z-index:70;font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);border:1px solid var(--line);background:rgba(11,13,15,.8);padding:5px 10px;border-radius:100px}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

@media (max-width:1000px){
  .hero-in{grid-template-columns:1fr;gap:40px;padding-block:52px 60px}
  .g4{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .skills{grid-template-columns:repeat(2,1fr)}
  .drills{grid-template-columns:repeat(2,1fr)}
  .shop{grid-template-columns:repeat(3,1fr)}
  .two{grid-template-columns:1fr}
  .shell{grid-template-columns:1fr}
  .side{display:none}
  .tabbar{display:block}
  .main{padding:22px 18px 96px}
}
@media (max-width:680px){
  .topnav{display:none}
  .topnav.open{display:flex;position:absolute;top:64px;left:0;right:0;flex-direction:column;gap:0;background:var(--court);border-bottom:1px solid var(--line);padding:8px 20px 16px}
  .topnav.open a{padding:10px 0;border-bottom:1px solid var(--line)}
  .menu-btn{display:block}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .skills,.drills,.cgrid{grid-template-columns:1fr}
  .shop{grid-template-columns:repeat(2,1fr)}
  .tiles{grid-template-columns:repeat(2,1fr)}
  .balance .big{font-size:48px}
  .view-head h2{font-size:24px}
  .cprof{flex-direction:column}
  .page-head{padding-block:38px 32px}
}

/* ---------- skill profile carousel (radar <-> body map) ---------- */
.pcarousel{position:relative}
.pslides{
  display:flex;overflow-x:auto;scroll-snap-type:x mandatory;
  scrollbar-width:none;-ms-overflow-style:none;-webkit-overflow-scrolling:touch;
}
.pslides::-webkit-scrollbar{display:none}
.pslide{flex:0 0 100%;min-width:0;scroll-snap-align:center}
.pseg{display:flex;gap:3px;padding:3px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.04)}
.pseg button{
  padding:5px 11px;border-radius:100px;font-family:var(--f-mono);
  font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.pseg button:hover{color:var(--text)}
.pseg button.on{background:var(--coral);color:#0B0D0F;font-weight:600}
.pfoot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line);
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);
}
.scale{display:flex;gap:10px;flex-wrap:wrap}
.scale span{display:flex;align-items:center;gap:5px}
.scale i{width:8px;height:8px;border-radius:2px;display:block}
.swipe{display:flex;align-items:center;gap:6px;white-space:nowrap}
@media (max-width:680px){ .pfoot{flex-direction:column;align-items:flex-start;gap:8px} }

/* ---------- body map slide: a pose per shot ---------- */
.bmap{
  display:grid;grid-template-columns:minmax(140px,1fr) minmax(176px,.95fr);
  gap:14px;align-items:center;padding:4px 2px;
}
.bstage{display:flex;flex-direction:column;gap:6px;min-width:0}
.bfig svg{width:100%;height:auto;display:block;max-height:280px;margin:0 auto}
.bcap{text-align:center}
.bcap .bk{font-family:var(--f-display);font-size:21px;text-transform:uppercase;letter-spacing:.01em}
.bcap .be{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);margin-top:2px}
.bcap .bv{font-family:var(--f-display);font-size:34px;line-height:1;margin-top:6px}
.bcap .bv small{font-family:var(--f-body);font-size:12px;font-weight:500;color:var(--muted)}

.blist{display:flex;flex-direction:column;gap:1px;min-width:0}
.brow{
  display:grid;grid-template-columns:9px 1fr auto;gap:10px;align-items:center;
  padding:6px 9px;border-radius:var(--r-s);text-align:left;width:100%;
  border:1px solid transparent;transition:background .14s ease,border-color .14s ease;
}
.brow:hover{background:rgba(255,255,255,.06)}
.brow.on{background:rgba(255,255,255,.07);border-color:var(--line-2)}
.bd{width:9px;height:9px;border-radius:50%}
.bn{font-size:13px;font-weight:500;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.bn small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);font-weight:400}
.bs{font-family:var(--f-display);font-size:19px;font-variant-numeric:tabular-nums;line-height:1}
.pslide{display:flex;align-items:center}
.pslide > *{width:100%}
@media (max-width:560px){
  .bmap{grid-template-columns:1fr;gap:10px}
  .bfig svg{max-height:220px}
}

/* ============================================================
   v2 — schedule, squad, coach tools, kantine, modal, language
   ============================================================ */

html{scroll-behavior:smooth}
.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--coral);color:#0B0D0F;padding:10px 16px;border-radius:0 0 10px 0;font-weight:600}
.skip:focus{left:0}
.muted{color:var(--muted);font-size:13.5px}
.small{font-size:12.5px}
.coral{color:var(--coral)}
.stack{margin-top:18px}
.stack-col{display:flex;flex-direction:column;gap:16px}
.track.tall{height:8px}
.empty{color:var(--muted);font-size:13px;padding:10px 0}
.row-btns{display:flex;gap:8px;flex-wrap:wrap;margin-top:2px}
.cbio{font-size:13px;color:var(--muted)}
.link-btn{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);text-decoration:underline;text-underline-offset:3px;padding:6px 0}
.link-btn:hover{color:var(--text)}
.skill-foot .down{color:#FF5A5A}

/* app chrome */
.app-body{padding-bottom:env(safe-area-inset-bottom)}
.proto{top:auto;bottom:calc(76px + env(safe-area-inset-bottom));right:12px;max-width:62vw;text-align:right;line-height:1.5;text-transform:none;letter-spacing:.02em;font-size:9.5px}
.netbar{position:sticky;top:0;z-index:60;background:var(--ochre);color:#2A1B03;font-size:12.5px;font-weight:600;padding:7px 16px;text-align:center}
.appbar-in{gap:10px}
.seg{display:flex;gap:2px;padding:3px;border:1px solid var(--line);border-radius:100px;background:rgba(255,255,255,.04)}
.seg button{padding:6px 12px;border-radius:100px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.seg button:hover{color:var(--text)}
.seg button.on{background:var(--coral);color:#0B0D0F;font-weight:600}
.roles{margin-left:auto}
.langpick{display:flex;gap:4px;margin-bottom:12px}
.langpick button{padding:4px 8px;border-radius:6px;border:1px solid var(--line);font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.langpick button.on{background:var(--coral-dim);border-color:rgba(200,245,66,.45);color:var(--coral)}
.signout{color:var(--coral);text-decoration:underline;display:inline-block;margin-top:6px}
.side-foot{position:absolute;bottom:18px;left:14px;right:14px}

/* dashboard extras */
.next{margin-bottom:16px}
.next-act{display:flex;gap:10px;flex-wrap:wrap}
.tiles{margin-bottom:16px}
.goal{display:flex;align-items:center;gap:14px;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
.ring-txt b{font-family:var(--f-display);font-size:22px;display:block;line-height:1}
.ring-txt span{font-size:12.5px;color:var(--muted)}
.goal svg{flex:none}

/* schedule */
.sessions{display:flex;flex-direction:column;gap:12px}
.sess{display:grid;grid-template-columns:84px 1fr auto;gap:16px;align-items:center;background:var(--court);border:1px solid var(--line);border-left:3px solid var(--line-2);border-radius:var(--r);padding:16px 18px}
.sess.in{border-left-color:var(--good);background:linear-gradient(100deg,rgba(91,217,138,.09),var(--court) 40%)}
.sess.out{opacity:.55;border-left-color:var(--muted)}
.sess-when{display:flex;flex-direction:column;gap:2px}
.sess-when b{font-family:var(--f-display);font-size:17px;text-transform:uppercase;line-height:1.1}
.sess-when span{font-family:var(--f-mono);font-size:15px;color:var(--coral)}
.sess-body{min-width:0;display:flex;flex-direction:column;gap:6px}
.sess-body h4{font-size:15px;font-weight:600}
.sess-meta{font-family:var(--f-mono);font-size:11.5px;color:var(--muted)}
.sess-body p{font-size:13px;color:var(--muted)}
.sess-act{display:flex;flex-direction:column;gap:7px;align-items:stretch;text-align:center}

/* squad standings */
.standings{display:flex;flex-direction:column}
.rank{display:grid;grid-template-columns:26px 30px 1fr auto auto;gap:12px;align-items:center;padding:10px 0;border-bottom:1px solid var(--line)}
.rank:last-child{border-bottom:0}
.rank.me{background:linear-gradient(90deg,var(--coral-dim),transparent);margin-inline:-18px;padding-inline:18px;border-radius:var(--r-s)}
.rank .pos{font-family:var(--f-display);font-size:18px;color:var(--muted);text-align:center}
.rank.me .pos{color:var(--coral)}
.avatar.sm{width:30px;height:30px;font-size:11px}
.rank .who{font-size:13.5px;display:flex;flex-direction:column;line-height:1.3;min-width:0}
.rank .who em{font-style:normal;color:var(--coral);font-family:var(--f-mono);font-size:11px;text-transform:uppercase}
.rank .who small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.rank .fire{font-family:var(--f-mono);font-size:12px;color:var(--muted)}
.rank .pt{font-family:var(--f-mono);font-weight:600;font-size:14px;color:var(--ochre);font-variant-numeric:tabular-nums}

.badges{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.badge{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:5px;align-items:flex-start}
.badge .bi{font-size:24px;line-height:1}
.badge b{font-size:13.5px;font-weight:600}
.badge small{font-size:11.5px;color:var(--muted);line-height:1.4}
.badge.off{opacity:.42;border-style:dashed}
.badge.off .bi{filter:grayscale(1)}

/* coach tools */
.roster{display:flex;flex-direction:column;gap:4px}
.rrow{display:grid;grid-template-columns:30px 1fr auto;gap:12px;align-items:center;text-align:left;padding:8px 10px;border-radius:var(--r-s);border:1px solid transparent;width:100%}
.rrow:hover{background:rgba(255,255,255,.05)}
.rrow.on{background:rgba(91,217,138,.1);border-color:rgba(91,217,138,.35)}
.rrow .who{font-size:13.5px;display:flex;flex-direction:column;line-height:1.3}
.rrow .who small{font-family:var(--f-mono);font-size:10.5px;color:var(--muted)}
.rrow .state{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.rrow.on .state{color:var(--good)}

.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}
.field > span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.field input,.field select{
  background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);
  color:var(--text);font:inherit;font-size:14px;padding:10px 12px;width:100%;
}
.field input:focus,.field select:focus{border-color:var(--coral);outline:none}
.field-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.field.range span b{font-family:var(--f-mono);color:var(--coral);font-size:14px}
.field input[type=range]{padding:0;background:none;border:0;accent-color:var(--coral)}

/* kantine staff */
.bar-card{max-width:460px}
.codein{font-family:var(--f-mono);font-size:30px!important;letter-spacing:.28em;text-align:center;text-transform:uppercase}
.verdict{margin-top:16px;border-radius:var(--r);padding:16px;display:flex;flex-direction:column;gap:6px;border:1px solid var(--line-2)}
.verdict b{font-family:var(--f-display);font-size:20px;text-transform:uppercase}
.verdict span{font-size:13px;color:var(--muted)}
.verdict .big{font-size:17px;color:var(--text);font-weight:600}
.verdict.good{background:rgba(91,217,138,.1);border-color:rgba(91,217,138,.4)}
.verdict.good b{color:var(--good)}
.verdict.warn{background:var(--ochre-dim);border-color:rgba(255,159,67,.4)}
.verdict.warn b{color:var(--ochre)}
.verdict.bad{background:rgba(255,90,90,.1);border-color:rgba(255,90,90,.4)}
.verdict.bad b{color:#FF5A5A;font-size:15px;text-transform:none;font-family:var(--f-body)}
.verdict .btn{margin-top:8px}

/* modal with the kantine code */
.modal[hidden]{display:none}
.modal{position:fixed;inset:0;z-index:90;background:rgba(5,12,20,.72);backdrop-filter:blur(6px);display:grid;place-items:center;padding:20px;animation:fade .18s ease}
.sheet{position:relative;width:100%;max-width:360px;background:var(--court-hi);border:1px solid var(--line-2);border-radius:20px;padding:26px 22px;box-shadow:0 40px 80px -30px #000;animation:pop .22s cubic-bezier(.2,.9,.3,1.2)}
.sheet-x{position:absolute;top:10px;right:14px;font-size:26px;line-height:1;color:var(--muted)}
.sheet-x:hover{color:var(--text)}
@keyframes fade{from{opacity:0}}
@keyframes pop{from{opacity:0;transform:translateY(14px) scale(.97)}}
.code-wrap{text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px}
.code-wrap h3{font-family:var(--f-display);font-size:24px;text-transform:uppercase}
.qr{width:190px;padding:10px;background:#fff;border-radius:12px}
.qr svg{display:block;width:100%;height:auto}
.code-big{font-family:var(--f-mono);font-size:30px;font-weight:600;letter-spacing:.28em;padding-left:.28em;color:var(--ochre)}
.code-exp{font-family:var(--f-mono);font-size:12px;color:var(--sea)}
.code-exp.dead{color:#FF5A5A}
.code-note{font-size:12.5px;color:var(--muted)}

/* upload tile is a button now */
.upload{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;text-align:center;color:var(--muted);border:1px dashed var(--line-2);border-radius:var(--r);padding:22px;min-height:150px;width:100%}
.upload:hover{border-color:var(--coral);color:var(--text)}
.ul-t{font-weight:600;font-size:13.5px}
.ul-s{font-size:12px;max-width:24ch}

/* install prompt */
.installbar{position:fixed;left:12px;right:12px;bottom:calc(78px + env(safe-area-inset-bottom));z-index:80;display:flex;align-items:center;gap:10px;background:var(--court-hi);border:1px solid var(--line-2);border-radius:100px;padding:8px 10px 8px 18px;font-size:13px;box-shadow:0 20px 40px -20px #000}
.installbar span{margin-right:auto}

@media (max-width:900px){
  .roles{order:3;margin-left:0}
  .appbar-in{flex-wrap:wrap;height:auto;padding-block:10px;gap:8px}
  .switcher{order:4}
  .badges{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:680px){
  .sess{grid-template-columns:64px 1fr;gap:12px}
  .sess-act{grid-column:1 / -1;flex-direction:row;flex-wrap:wrap}
  .sess-act .btn{flex:1}
  .field-row{grid-template-columns:1fr}
  .rank{grid-template-columns:22px 28px 1fr auto;gap:9px}
  .rank .fire{display:none}
  .installbar{border-radius:14px;flex-wrap:wrap}
}

/* pricing controls */
.pricebar{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-bottom:22px}
.pricebar .seg button{font-size:11px}
.plan .amt-val{font-variant-numeric:tabular-nums}

/* ============================================================
   Court-side additions: scanning, live codes, the bar queue,
   the next action card, and the phone-first behaviour that makes
   all of it usable one-handed on a wet phone.
   ============================================================ */

/* ---------- body lock while a sheet is open (iOS safe) ---------- */
body.locked{position:fixed;left:0;right:0;width:100%;overflow:hidden}

/* ---------- toast gains an action ---------- */
.toast{display:flex;align-items:center;gap:14px}
.toast-act{font-family:var(--f-mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--ochre);padding:2px 2px;min-height:auto}
.toast-act:hover{color:#ffd47a}

/* ---------- do this next ---------- */
.nba{
  display:grid;grid-template-columns:1fr auto;align-items:center;gap:4px 14px;
  width:100%;text-align:left;margin-top:14px;padding:16px 18px;
  background:linear-gradient(120deg,var(--coral-dim),rgba(53,198,214,.10));
  border:1px solid rgba(200,245,66,.34);border-radius:var(--r);
  transition:border-color .18s ease,transform .18s ease;
}
.nba:hover{border-color:var(--coral)}
.nba:active{transform:translateY(1px)}
.nba-eye{grid-column:1;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral)}
.nba-t{grid-column:1;font-weight:600;font-size:15.5px}
.nba-s{grid-column:1;font-size:13px;color:var(--muted)}
.nba-arrow{grid-column:2;grid-row:1/4;color:var(--coral);flex:none}

/* ---------- the live code the player still has to spend ---------- */
.livecode{margin-bottom:14px}
.lc-in{
  display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:14px 16px;border-radius:var(--r);
  background:var(--ochre-dim);border:1px solid rgba(255,159,67,.36);
}
.lc-item{font-weight:600;font-size:15px;margin-top:2px}
.lc-meta{font-family:var(--f-mono);font-size:12.5px;color:var(--ochre)}
.lc-meta b{letter-spacing:.2em}

/* ---------- tappable history rows ---------- */
.fitem.tap{width:100%;text-align:left;border-radius:var(--r-s);transition:background .16s ease}
.fitem.tap:hover{background:rgba(255,255,255,.045)}
.fitem.tap:active{background:rgba(255,255,255,.08)}

/* ---------- scanning ---------- */
.btn-scan{display:flex;align-items:center;justify-content:center;gap:10px;width:100%;padding:15px}
.or{display:flex;align-items:center;gap:12px;margin:16px 0 4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.or::before,.or::after{content:"";flex:1;height:1px;background:var(--line)}

.scanwrap{position:relative;margin-bottom:14px;border-radius:var(--r);overflow:hidden;background:#000;aspect-ratio:4/3;max-width:100%}
.scanwrap video{width:100%;height:100%;object-fit:cover;display:block}
.scanframe{position:absolute;inset:16% 14%;pointer-events:none}
.scanframe i{position:absolute;width:30px;height:30px;border:3px solid var(--coral);border-radius:5px}
.scanframe i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.scanframe i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.scanframe i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.scanframe i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.scanbar{position:absolute;top:10px;right:10px;display:flex;gap:8px}
.scanbar .btn{background:rgba(11,13,15,.72);backdrop-filter:blur(6px)}
.scanbar .btn.on{background:var(--ochre);color:#2A1B00;border-color:var(--ochre)}
.scanhint{position:absolute;left:0;right:0;bottom:0;margin:0;padding:10px 14px;font-size:12.5px;text-align:center;color:var(--text);background:linear-gradient(to top,rgba(5,12,20,.9),transparent)}

/* ---------- codes waiting at the bar ---------- */
.queue{display:flex;flex-direction:column;gap:8px}
.qrow{
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:14px;
  width:100%;text-align:left;padding:12px 14px;min-height:56px;
  background:var(--court-hi);border:1px solid var(--line);border-radius:var(--r-s);
  transition:border-color .16s ease;
}
.qrow:hover{border-color:var(--sea)}
.qrow:active{transform:translateY(1px)}
.qcode{font-family:var(--f-mono);font-weight:600;font-size:16px;letter-spacing:.18em;color:var(--ochre)}
.qrow .who{display:flex;flex-direction:column;font-size:14px}
.qrow .who small{color:var(--muted);font-size:12px}
.qleft{font-family:var(--f-mono);font-size:13px;color:var(--sea)}

/* ---------- roster tools ---------- */
.roster-tools{display:flex;gap:8px;margin-bottom:12px}
.find{
  flex:1;min-width:0;padding:11px 13px;font:inherit;font-size:14px;
  background:var(--ink);color:var(--text);
  border:1px solid var(--line-2);border-radius:var(--r-s);
}
.find:focus{border-color:var(--coral);outline:none}
.find::-webkit-search-cancel-button{filter:invert(.6)}

/* ---------- phone-first ---------- */
@media (max-width:680px){
  /* the dialog becomes a sheet that comes up from the thumb, not a box in the middle */
  .modal{place-items:end center;padding:0}
  .sheet{
    max-width:none;border-radius:22px 22px 0 0;
    padding:26px 20px calc(26px + env(safe-area-inset-bottom));
    animation:sheetUp .24s cubic-bezier(.2,.9,.3,1.05);
  }
  @keyframes sheetUp{from{transform:translateY(100%)}}

  .lc-in{align-items:stretch;flex-direction:column}
  .lc-in .btn{width:100%}
  .roster-tools{flex-wrap:wrap}
  .find{flex-basis:100%}
  .scanwrap{aspect-ratio:3/4}

  /* nothing important should hide behind the tab bar */
  .main{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
}

/* thumbs are not mouse pointers */
@media (pointer:coarse){
  .btn,.tabbtn,.navbtn,.rrow,.qrow,.fbtn,.fitem.tap{min-height:44px}
  .tabbtn{padding-block:8px}
}

@media (prefers-reduced-motion:reduce){
  .nba:active,.qrow:active,.btn:active{transform:none}
}

/* ---------- the More sheet, so no screen is stranded on a phone ---------- */
.more-wrap .eyebrow{margin-bottom:14px}
.more-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.more-btn{
  display:flex;flex-direction:column;align-items:flex-start;gap:8px;
  padding:14px;min-height:74px;text-align:left;font-size:13.5px;font-weight:500;
  background:var(--court-hi);border:1px solid var(--line);border-radius:var(--r-s);
}
.more-btn:hover{border-color:var(--coral)}
.more-btn svg{color:var(--coral)}

/* ---------- a skill card you can open ---------- */
.skill.tap{width:100%;text-align:left;position:relative;transition:border-color .16s ease,transform .16s ease}
.skill.tap:hover{border-color:var(--coral)}
.skill.tap:active{transform:translateY(1px)}
.skill-cue{
  display:flex;align-items:center;gap:4px;margin-top:10px;
  font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);transition:color .16s ease;
}
.skill.tap:hover .skill-cue{color:var(--coral)}

/* The toast was pointer-events:none in both states, so the Undo button inside it
   could never be tapped. It also sat under the tab bar on a phone. */
.toast.show{pointer-events:auto}
@media (max-width:680px){
  .toast{
    left:12px;right:12px;transform:translateY(20px);
    bottom:calc(84px + env(safe-area-inset-bottom));
    justify-content:space-between;
  }
  .toast.show{transform:translateY(0)}
}

/* ===== sales pages: pricing, states, registration ===== */
.founder{display:flex;gap:14px;align-items:flex-start;padding:16px 18px;margin-bottom:22px;border:1px solid var(--ochre-dim);border-radius:var(--r);background:linear-gradient(120deg,rgba(255,159,67,.09),transparent 70%)}
.founder p{margin:0;font-size:14px;color:var(--muted)}
.founder b{color:var(--text)}
.plan .who{font-family:var(--f-mono);font-size:11.5px;color:var(--sea);margin-top:-8px}
.plan .save{font-family:var(--f-mono);font-size:11.5px;color:var(--good);margin-top:-6px}
.plan li.excl{color:var(--ochre)}
.plan li.excl::before{background:var(--ochre)}
.plan .btn{margin-top:auto;justify-content:center}
.plans .plan ul{margin-bottom:6px}

.statebar{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-bottom:14px}
.statecount{display:flex;align-items:baseline;gap:9px;color:var(--muted);font-size:14px}
.statecount b{font-family:var(--f-display);font-size:40px;color:var(--good);line-height:1}
.statebar .find{max-width:320px}
.legend{display:flex;gap:18px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.legend span{display:flex;align-items:center;gap:7px}
.sdot{width:9px;height:9px;border-radius:50%;flex:none;display:inline-block}
.sdot.open{background:var(--good);box-shadow:0 0 0 4px rgba(91,217,138,.14)}
.sdot.talks{background:var(--ochre)}
.sdot.taken{background:#FF5A5A}
.states{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.st{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-s);background:var(--court);min-height:58px}
.st-n{display:flex;flex-direction:column;flex:1;min-width:0}
.st-n b{font-weight:600;font-size:14.5px}
.st-n span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.st.open .st-n span{color:var(--good)}
.st.taken{opacity:.55}

.reg{display:grid;grid-template-columns:1.4fr .8fr;gap:22px;align-items:start}
.regform{display:flex;flex-direction:column}
.regform .btn{justify-content:center;margin-top:6px;width:100%}
.field textarea{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:14px;padding:10px 12px;width:100%;resize:vertical}
.field textarea:focus{border-color:var(--coral);outline:none}
.statemsg,.planmsg{margin:-4px 0 12px;font-size:13px;color:var(--muted)}
.statemsg.open{color:var(--good)}
.statemsg.talks{color:var(--ochre)}
.statemsg.taken{color:#FF5A5A}
.planmsg:empty{display:none}
.formerr{margin:0 0 10px;padding:10px 12px;border-radius:var(--r-s);background:var(--coral-dim);color:var(--coral);font-size:13.5px}
.btn-wa{background:#25D366;color:#062B14}
.btn-wa:hover{background:#3be07b}
.regside{display:grid;gap:14px}
.next-steps{margin:8px 0 0;padding-left:18px;color:var(--muted);font-size:13.5px;display:grid;gap:8px}

@media (max-width:1000px){
  .states{grid-template-columns:repeat(2,1fr)}
  .reg{grid-template-columns:1fr}
}
@media (max-width:680px){
  .states{grid-template-columns:1fr}
  .statebar .find{max-width:none;flex-basis:100%}
  .field-row{grid-template-columns:1fr;gap:0}
  .field input,.field select,.field textarea{font-size:16px}
}
.brand,.topbar .btn-sm{white-space:nowrap}
@media (max-width:420px){
  .topbar-in{gap:10px}
  .topbar .brand{font-size:19px;gap:7px}
  .topbar .court-glyph{display:none}
  .st{min-height:0;padding:9px 12px}
  .st .btn-sm{padding:6px 12px}
}
.logo-glyph{width:17px;height:26px;flex:none}
@media (max-width:420px){ .topbar .logo-glyph{display:block;width:14px;height:21px} }
.countrypick{margin:0;min-width:240px}
.statebar{align-items:flex-end}
.statebar .find{height:44px}
.statecount{margin-bottom:12px}
@media (max-width:680px){ .countrypick{min-width:0;flex-basis:100%} }

/* ===== plan cards: each tier has its own color, the picked one lights up ===== */
.plans{align-items:stretch}
.tier{--pc:#C8F542;position:relative;cursor:pointer;border-color:var(--line);background:var(--court);transition:border-color .2s,box-shadow .2s,transform .2s,background .2s}
.tier::before{content:"";position:absolute;left:18px;right:18px;top:0;height:3px;border-radius:0 0 3px 3px;background:var(--pc);opacity:.75}
.tier:hover{border-color:color-mix(in srgb,var(--pc) 45%,transparent)}
.tier:focus-visible{outline:2px solid var(--pc);outline-offset:3px}
.tier h3{color:var(--pc)}
.tier .who{color:var(--muted)}
.tier .plan-hd{display:flex;align-items:center;justify-content:space-between;gap:8px}
.tier .tag.pc{color:var(--pc);border-color:color-mix(in srgb,var(--pc) 45%,transparent)}
.tier li::before{background:var(--pc)}
.tier li.excl{color:var(--text);font-weight:600}
.tier li.excl::before{background:var(--pc);box-shadow:0 0 0 3px color-mix(in srgb,var(--pc) 25%,transparent)}
.tier .plan-cta{border:1px solid color-mix(in srgb,var(--pc) 55%,transparent);color:var(--text);justify-content:center}
.tier.on{border-color:var(--pc);background:linear-gradient(170deg,color-mix(in srgb,var(--pc) 16%,transparent),var(--court) 55%);box-shadow:0 0 0 1px var(--pc),0 18px 40px -18px color-mix(in srgb,var(--pc) 55%,transparent);transform:translateY(-3px)}
.tier.on::before{opacity:1}
.tier.on .amt{color:var(--pc)}
.tier.on .plan-cta{background:var(--pc);color:#0B0D0F;border-color:var(--pc);font-weight:600}
.tier.top{background:linear-gradient(170deg,rgba(242,201,76,.07),var(--court) 45%)}
.tier.top .amt small{color:var(--muted)}
.soon{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;padding:2px 6px;border-radius:100px;border:1px solid var(--line-2);color:var(--muted);white-space:nowrap;vertical-align:1px}
@media (prefers-reduced-motion:reduce){.tier.on{transform:none}}
.langwrap{display:inline-flex;align-items:center;gap:6px;color:var(--muted)}
.langwrap select{background:transparent;color:var(--text);border:1px solid var(--line-2);border-radius:100px;padding:5px 10px;font:inherit;font-size:13px}
.langwrap select option{background:var(--court);color:var(--text)}
@media (max-width:680px){ .topnav.open .langwrap{padding:12px 0} .langwrap select{font-size:16px} }
.more-lang{flex-wrap:wrap;margin:18px 0 0;justify-content:center}
.more-lang button{min-width:44px;min-height:36px}
/* ---------- shot silhouettes ---------- */
.shotwrap{position:relative;width:100%;height:280px;display:flex;align-items:flex-end;justify-content:center}
@media (max-width:680px){ .shotwrap{height:220px} }
.shotimg{
  width:100%;height:100%;
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center bottom;mask-position:center bottom;
}
.shotshadow{
  position:absolute;left:50%;bottom:2px;transform:translateX(-50%);
  width:56%;height:9px;border-radius:50%;
  background:radial-gradient(ellipse at center, rgba(0,0,0,.45), rgba(0,0,0,0) 70%);
}
/* demo note: a thin strip at the very top that scrolls away, never over the content */
.proto{position:static!important;max-width:none!important;display:block;text-align:center!important;border:0;border-bottom:1px solid var(--line);border-radius:0;background:rgba(200,245,66,.06);color:var(--muted);padding:6px 14px!important;font-size:10.5px!important;letter-spacing:.06em!important;line-height:1.4;text-transform:none!important}
/* breathing room between the "do this next" card and the score tiles */
.nba{margin-bottom:16px}

/* ===== sign in gate: the account decides the role, there is no switch ===== */
body.gated{overflow:hidden}
.gate{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:24px;
  background:radial-gradient(1200px 600px at 50% -10%,rgba(200,245,66,.08),transparent 60%),var(--ink)}
.gate-card{width:100%;max-width:380px;text-align:center;background:var(--court);border:1px solid var(--line);border-radius:20px;
  padding:32px 26px calc(26px + env(safe-area-inset-bottom));box-shadow:0 40px 80px -30px #000}
.gate-brand{display:flex;align-items:center;justify-content:center;gap:10px;font-family:var(--f-display);font-size:30px;text-transform:uppercase;margin-bottom:10px}
.gate-brand .logo-glyph{width:22px;height:33px}
.gate-sub{color:var(--muted);font-size:14px;margin-bottom:22px}
.gate-card .field{text-align:left}
.gate-go{width:100%;margin-top:4px;justify-content:center}
.gate-demo{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.gate-demo .btn{min-height:44px}
.gate-note{margin-top:18px;font-family:var(--f-mono);font-size:10.5px;line-height:1.6;color:var(--muted)}
.roletag{font-family:var(--f-mono);font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--coral);
  border:1px solid rgba(200,245,66,.4);border-radius:100px;padding:5px 11px;white-space:nowrap}
.roletag[hidden]{display:none}
.appbar .roletag{margin-left:auto}
.appbar .roletag:not([hidden]) ~ .pts-chip{margin-left:0}
.signout{background:none;border:0;padding:0;color:var(--coral);text-decoration:underline;cursor:pointer;font:inherit;font-size:12px}
.acc{display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px}
.acc .avatar.lg{margin-bottom:8px}
.acc h3{font-family:var(--f-display);font-size:22px;text-transform:uppercase}
.acc-mail{font-family:var(--f-mono);font-size:12px;color:var(--muted);margin-bottom:6px}
.acc .more-lang{margin:14px 0}
button.avatar{border:0;cursor:pointer}
.gate-brand .r2{color:var(--coral)}
.legal{max-width:720px}
.legal h2{font-family:var(--f-display);font-size:22px;text-transform:uppercase;margin:28px 0 8px}
.legal p,.legal li{color:var(--muted);font-size:15px}
.legal b{color:var(--text)}
.legal ul{padding-left:18px;display:grid;gap:6px}
.gate-card .btn-google{width:100%;justify-content:center;gap:10px;min-height:48px}
.gate-emailtoggle{display:block;margin:10px auto 4px;font-size:13px}
#gateForm{margin-top:14px}
.gate-msg{margin:0 0 10px;padding:9px 12px;border-radius:var(--r-s);background:rgba(255,90,90,.12);color:#FF8A8A;font-size:13px;text-align:left}
.gate-msg.ok{background:rgba(91,217,138,.12);color:var(--good)}
.gate-links{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:10px}
.gate-links .link-btn{font-size:12.5px}
.gate-noclub{display:grid;gap:12px;color:var(--muted);font-size:14px}
.gate-noclub p{margin:0}
.field textarea{width:100%}

/* ===== club admin and platform panel ===== */
.amain{padding-block:28px 80px;display:grid;gap:18px}
.ahead h1{font-family:var(--f-display);font-size:clamp(28px,5vw,44px);text-transform:uppercase;line-height:1}
.who-mail{margin-left:auto;font-family:var(--f-mono);font-size:11px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:28vw}
.topbar .roletag{margin-left:4px}
.kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.kpi{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:16px}
.kpi b{display:block;font-family:var(--f-display);font-size:30px;line-height:1;color:var(--coral)}
.kpi span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.slipping:empty{display:none}
.slipping h3{font-size:13px;color:#FF8A8A;margin-bottom:8px}
.slipping .chip{margin:0 6px 6px 0}
.atabs{display:flex;gap:4px;overflow-x:auto;border-bottom:1px solid var(--line);padding-bottom:0}
.atabs button{padding:10px 14px;font-weight:600;font-size:14px;color:var(--muted);border-bottom:2px solid transparent;white-space:nowrap;min-height:44px}
.atabs button.on{color:var(--text);border-bottom-color:var(--coral)}
.apanel{display:grid;gap:14px}
.astack{display:grid;gap:10px}
.aform{display:grid;gap:2px}
.aform .btn{justify-self:start;margin-top:6px}
.alist{display:grid;gap:8px}
.arow{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:12px 14px;background:var(--court);border:1px solid var(--line);border-radius:var(--r-s)}
.arow-main{display:flex;flex-direction:column;flex:1 1 220px;min-width:0}
.arow-main b{font-weight:600}
.arow-main small{color:var(--muted);font-size:12.5px}
.arow-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:12.5px;color:var(--muted)}
.arow-ctl select,.arow-ctl input{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:13px;padding:7px 9px;min-height:36px}
.arow-ctl input.lvl{width:72px}
.link-btn.danger{color:#FF8A8A}
.ochre{color:var(--ochre)}
.tog{display:inline-flex;gap:6px;align-items:center}
.field input[type=color]{height:44px;padding:4px}
@media (max-width:680px){
  .kpis{grid-template-columns:repeat(2,1fr)}
  .who-mail{display:none}
  .topbar .roletag{display:none}
}

/* ---------- coach screens ---------- */
.view-head-row{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;flex-wrap:wrap}
.view-head-row .btn{flex:none}
#addPlayerCard{margin-bottom:16px}
.pl-find{width:100%;margin-bottom:10px}
.pl-groups{overflow-x:auto;width:max-content;max-width:100%;margin-bottom:14px;scrollbar-width:none}
.pl-groups button{white-space:nowrap}
.pl-list{display:grid;gap:8px}
.pl-row{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:12px 14px;background:var(--court);border:1px solid var(--line);border-radius:var(--r);min-height:64px}
.pl-row:hover{border-color:rgba(200,245,66,.35)}
.pl-row .who{flex:1;min-width:0;font-weight:600;font-size:15px;overflow:hidden;text-overflow:ellipsis}
.pl-row .who small{display:block;font-weight:400;font-size:12px;color:var(--muted);margin-top:2px}
.pl-lv{text-align:right;line-height:1.1}
.pl-lv b{display:block;font-family:var(--f-display);font-size:20px;color:var(--coral)}
.pl-lv small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}
.pl-go{font-size:22px;color:var(--muted);margin-left:2px}

.psheet{text-align:left}
.ps-head{display:flex;align-items:center;gap:14px;margin-bottom:16px;padding-right:30px}
.ps-head h3{font-size:20px;margin:0}
.ps-stats{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:8px;margin-bottom:18px}
.ps-stat{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:var(--r-s);padding:10px 12px}
.ps-stat small{display:block;font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.ps-stat b{font-family:var(--f-display);font-size:22px}
.ps-level{display:flex;align-items:center;gap:8px}
.ps-level b{color:var(--coral);min-width:46px;text-align:center}
.ps-step{width:30px;height:30px;border-radius:50%;border:1px solid var(--line);font-size:18px;line-height:1;display:grid;place-items:center}
.ps-step:active{background:var(--coral);color:#0B0D0F}
.ps-eb{margin:4px 0 8px}
.ps-skills{display:grid;gap:4px;margin-bottom:12px}
.ps-skill{display:grid;grid-template-columns:96px 1fr 34px 34px;align-items:center;gap:10px;width:100%;text-align:left;padding:9px 10px;border-radius:var(--r-s);border:1px solid transparent;font-size:13.5px}
.ps-skill .track{height:6px}
.ps-skill .track i{background:linear-gradient(90deg,var(--sea),var(--coral))}
.ps-skill b{font-family:var(--f-display);font-size:16px;text-align:right}
.ps-skill em{font-style:normal;font-family:var(--f-mono);font-size:11px;text-align:right}
.ps-skill em.down{color:#FF8A8A}
.ps-skill.on{border-color:rgba(200,245,66,.5);background:var(--coral-dim)}
.ps-rate{display:grid;gap:10px;padding:14px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--line);margin-bottom:18px}
.ps-rate-hd{display:flex;justify-content:space-between;align-items:baseline}
.ps-score{font-family:var(--f-display);font-size:30px;color:var(--coral)}
.ps-rate input[type=range]{width:100%;accent-color:var(--coral)}
.ps-rate textarea{width:100%;resize:vertical}
.ps-rate .btn{justify-content:center}
.ps-note{padding:10px 0;border-top:1px solid var(--line)}
.ps-note p{margin:0 0 4px;font-size:14px}
.ps-note small{color:var(--muted);font-family:var(--f-mono);font-size:11px}

.csess .cs-fill{display:flex;align-items:center;gap:10px;margin-top:10px}
.csess .cs-fill .track{flex:1;max-width:180px;height:6px}
.csess .cs-fill small{color:var(--muted);font-size:12px}
.cs-names{margin-top:10px;font-size:13px;color:var(--text);line-height:1.5}
.cd-row{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.cd-row:first-child{border-top:0}
.cd-row b{display:block;font-size:14.5px}
.cd-row small{color:var(--muted);font-size:12px}
.ps-rate textarea{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:16px;padding:10px 12px}
.ps-rate textarea:focus{border-color:var(--coral);outline:none}
@media (max-width:420px){ .ps-skill{grid-template-columns:84px 1fr 30px 30px;gap:8px} .ps-stats{grid-template-columns:1.4fr 1fr 1fr} }
.sheet{max-height:calc(100dvh - 40px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.sheet:has(.psheet){max-width:460px}
@media (max-width:560px){ .modal:has(.psheet){padding:10px} .sheet:has(.psheet){max-height:calc(100dvh - 20px);padding:22px 16px} }

/* ---------- notifications bell ---------- */
.bell{position:relative;width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1px solid var(--line);color:var(--text);flex:none}
.bell-n{position:absolute;top:-3px;right:-3px;min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:var(--coral);color:#0B0D0F;font-size:10.5px;font-weight:700;display:grid;place-items:center;font-family:var(--f-mono)}
.bell-sheet{text-align:left}
.bell-sheet h3{margin:0 0 12px;font-size:20px}
.nrow{display:grid;grid-template-columns:34px 1fr auto;gap:12px;align-items:start;width:100%;text-align:left;padding:12px 6px;border-top:1px solid var(--line)}
.nrow:first-of-type{border-top:0}
.nrow.new{background:var(--coral-dim);border-radius:var(--r-s);border-top-color:transparent}
.nic{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:rgba(255,255,255,.06);color:var(--coral);font-size:15px}
.nbody b{display:block;font-size:14px}
.nbody small{display:block;color:var(--muted);font-size:12.5px;margin-top:2px;line-height:1.4}
.nago{font-family:var(--f-mono);font-size:10.5px;color:var(--muted);white-space:nowrap;padding-top:3px}
.push-on{width:100%;justify-content:center;margin-top:14px}

/* ---------- install bar ---------- */
.install-bar{position:sticky;top:0;z-index:55;display:flex;align-items:center;gap:10px;padding:9px 14px;background:var(--court-hi);border-bottom:1px solid var(--line);font-size:13.5px}
.install-bar span{flex:1}
.install-x{font-size:22px;line-height:1;color:var(--muted);padding:0 4px}
.ios-help{text-align:left}
.ios-help h3{margin:0 0 12px}
.ios-help ol{margin:0;padding-left:20px;display:grid;gap:10px;font-size:14.5px}
.ios-share{display:inline-grid;place-items:center;vertical-align:middle;color:var(--sea)}

/* ---------- goals ---------- */
.stack-b{margin-bottom:18px}
.fgoal{position:relative;padding:12px 0;border-top:1px solid var(--line)}
.fgoal:first-child{border-top:0;padding-top:4px}
.fgoal-hd{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px;font-size:14.5px;padding-right:22px}
.fgoal-hd span{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.fgoal-hd span b{color:var(--coral)}
.fgoal .track{height:7px}
.fgoal .track i{background:linear-gradient(90deg,var(--sea),var(--coral))}
.fgoal small{display:block;margin-top:6px;font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.fgoal.done .fgoal-hd span{color:var(--good)}
.fgoal.done .track i{background:var(--good)}
.fgoal-x{position:absolute;right:0;top:8px;font-size:20px;color:var(--muted);line-height:1;padding:2px 4px}
.ps-goals{margin-bottom:10px}
.ps-goalform{display:grid;gap:8px;margin-bottom:10px}
.ps-report{display:flex;justify-content:center;margin-top:16px}
#psGoalNew{margin-bottom:8px}

/* ---------- progress chart ---------- */
.lv-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.hist{text-align:left}
.hist-hd{display:flex;justify-content:space-between;align-items:flex-end;gap:10px;margin:4px 0 2px;padding-right:26px}
.hist-hd h3{margin:0;font-size:24px}
.hist-now{font-family:var(--f-display);font-size:40px;color:var(--coral);line-height:1}
.hist-now small{font-family:var(--f-body);font-size:13px;color:var(--muted)}
.lchart{width:100%;height:auto;display:block;margin:12px 0 2px}
.lc-grid{stroke:rgba(255,255,255,.07);stroke-width:1}
.lc-ax{fill:var(--muted);font-size:9px;font-family:var(--f-mono)}
.lc-line{fill:none;stroke:var(--coral);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.lc-dot{fill:var(--ink);stroke:var(--coral);stroke-width:2}
.lc-dot.vid{fill:var(--sea);stroke:var(--sea)}
.lc-goal{stroke:var(--ochre);stroke-width:1.5;stroke-dasharray:5 4}
.lc-goal-t{fill:var(--ochre);font-size:10px;font-family:var(--f-mono)}
.lc-dates{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--muted);margin-bottom:12px}
.hist .fgoal{border-top:0;margin-bottom:6px}
.hist-vid,.clipbox{margin:10px 0}
.hist-vid video,.clipbox video{width:100%;border-radius:var(--r-s);background:#000;margin-top:6px;max-height:60vh}
.hist-list{margin:6px 0 14px}
.hl-row{display:grid;grid-template-columns:1fr auto 44px;gap:10px;align-items:center;padding:8px 0;border-top:1px solid var(--line);font-size:13.5px}
.hl-row b{text-align:right;font-family:var(--f-display);font-size:17px}
.clip-dot{color:var(--sea);font-size:10px;vertical-align:middle}

/* ---------- video attach ---------- */
.clip-btn{display:flex;align-items:center;gap:10px;padding:11px 12px;border:1px dashed var(--line-2);border-radius:var(--r-s);color:var(--muted);font-size:13.5px;cursor:pointer}
.clip-btn input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.clip-btn.on{border-style:solid;border-color:var(--sea);color:var(--sea)}
.clip-btn span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- group rating ---------- */
.gr-open{width:100%;justify-content:center;margin-top:14px;min-height:50px}
.grate{text-align:left}
.grate h3{margin:4px 0 2px;font-size:22px}
.gr-skills{display:flex;gap:6px;overflow-x:auto;padding:12px 0;margin:0 -4px;scrollbar-width:none}
.gr-skills button{flex:none;padding:8px 12px;border-radius:100px;border:1px solid var(--line);font-size:13px;white-space:nowrap}
.gr-skills button.on{background:var(--coral);border-color:var(--coral);color:#0B0D0F;font-weight:600}
.gr-list{display:grid;gap:2px;margin-bottom:14px}
.gr-row{display:grid;grid-template-columns:minmax(80px,1fr) 1.4fr 34px 24px;gap:10px;align-items:center;padding:10px 6px;border-radius:var(--r-s)}
.gr-row .who{font-size:14px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gr-row input{width:100%;accent-color:var(--muted)}
.gr-row b{font-family:var(--f-display);font-size:17px;text-align:right;color:var(--muted)}
.gr-row.set{background:var(--coral-dim)}
.gr-row.set input{accent-color:var(--coral)}
.gr-row.set b{color:var(--coral)}
.gr-skip{font-size:18px;color:var(--muted);line-height:1}
.gr-save{width:100%;justify-content:center;position:sticky;bottom:0}
.gr-hint{margin-top:8px;text-align:center}

/* ---------- share card ---------- */
.share-prev{display:grid;gap:12px}
.share-prev img{width:100%;border-radius:var(--r-s)}
.share-prev .btn{justify-content:center}
.lvup{text-align:center;display:grid;gap:10px;justify-items:center}
.lvup-n{font-family:var(--f-display);font-size:84px;line-height:1;color:var(--coral)}
.gsi{display:flex;justify-content:center;min-height:0}
.gsi:not(:empty){min-height:44px;margin-bottom:4px}
.gsi,.gsi iframe{color-scheme:light}

/* ---------- voice ratings ---------- */
.gr-btns{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.gr-btns .gr-open{margin-top:0}
.row-btns{display:flex;gap:8px;flex-wrap:wrap}
.voice{text-align:left;display:grid;gap:12px}
.voice h3{margin:0;font-size:22px}
.vo-mic{display:flex;flex-direction:column;align-items:center;gap:8px;width:120px;height:120px;margin:4px auto;border-radius:50%;justify-content:center;background:var(--coral);color:#0B0D0F;font-weight:700;font-size:13px;box-shadow:0 0 0 0 rgba(200,245,66,.5)}
.vo-mic.on{background:#FF5A5A;color:#fff;animation:vopulse 1.4s ease-out infinite}
@keyframes vopulse{0%{box-shadow:0 0 0 0 rgba(255,90,90,.5)}100%{box-shadow:0 0 0 22px rgba(255,90,90,0)}}
.voice textarea{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:16px;padding:10px 12px;resize:vertical}
.vo-list{display:grid;gap:10px}
.vo-p{padding:12px;border-radius:var(--r-s);background:rgba(255,255,255,.04);border:1px solid var(--line);display:grid;gap:8px}
.vo-row{display:grid;grid-template-columns:1fr 76px 24px;gap:8px;align-items:center}
.vo-row select,.vo-row input{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:16px;padding:8px 10px;width:100%}
.vo-note{display:grid;grid-template-columns:auto 1fr;gap:4px 8px;font-size:13px;color:var(--muted);align-items:start}
.vo-note span{grid-column:2;color:var(--text);font-size:13.5px;line-height:1.4}
.vo-save{width:100%;justify-content:center}

/* ---------- passport ---------- */
.pp-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.pp-qr{width:132px;height:132px;background:#fff;border-radius:12px;padding:8px;flex:none}
.pp-qr svg{width:100%;height:100%;display:block}
.pp-info{flex:1;min-width:200px}
.pp-code{font-family:var(--f-mono);font-size:22px;letter-spacing:.12em;color:var(--coral)}

/* ---------- matches ---------- */
.m-tabs{margin-bottom:16px;width:max-content}
.m-body{display:grid;gap:12px}
.mcard{background:var(--court);border:1px solid var(--line);border-radius:var(--r);padding:16px;display:grid;gap:12px}
.mcard.mine{border-color:rgba(200,245,66,.4)}
.mcard.played{opacity:.85}
.mc-hd{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.mc-hd b{display:block;font-size:15.5px}
.mc-hd small{display:block;color:var(--muted);font-size:12.5px;margin-top:3px}
.mc-slots{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.ms-p{display:flex;flex-direction:column;align-items:center;gap:5px;font-size:12px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ms-p i{font-style:normal;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(140deg,var(--sea),#2E7FB8);color:#03212B;font-family:var(--f-display);font-size:15px}
.ms-p.me i{background:linear-gradient(140deg,var(--ochre),var(--coral));color:#0B0D0F}
.ms-p.empty i{background:none;border:1.5px dashed var(--line-2);color:var(--muted)}
.ms-p.empty{color:var(--muted)}
.ms-p.t1 i{box-shadow:0 0 0 2px var(--coral)}
.ms-p.t2 i{box-shadow:0 0 0 2px var(--sea)}
.mc-act{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.mc-act small{font-size:12px}
.m-eb{margin-top:10px}
.mpost,.mres{text-align:left;display:grid;gap:10px}
.mpost h3,.mres h3{margin:0 0 4px}
.mr-pick{display:grid;gap:6px}
.mr-opt{display:flex;gap:10px;align-items:center;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-s);font-size:14.5px}
.mr-opt:has(input:checked){border-color:var(--coral);background:var(--coral-dim)}
table.ladder{width:100%;border-collapse:collapse;font-size:14px}
.ladder th{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);text-align:left;padding:6px 6px;font-weight:500}
.ladder td{padding:10px 6px;border-top:1px solid var(--line)}
.ladder td small{display:block;color:var(--muted);font-family:var(--f-mono);font-size:11px}
.ladder tr.me td{background:var(--coral-dim)}
.ladder td:nth-child(n+3),.ladder th:nth-child(n+3){text-align:right;font-variant-numeric:tabular-nums}

/* ---------- club vs club ---------- */
.cr-stat{text-align:right;min-width:62px;line-height:1.1}
.cr-stat b{display:block;font-family:var(--f-display);font-size:18px}
.cr-stat small{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
#ranksBody .rank{grid-template-columns:28px 1fr auto auto}
.chip.danger{color:#FF8A8A;border-color:rgba(255,90,90,.3);background:rgba(255,90,90,.1)}
.danger-text{color:#FF8A8A}
.bill-price{font-size:15px;margin:4px 0 10px}
.bill-price b{font-family:var(--f-display);font-size:30px;color:var(--coral);margin-right:4px}
.pp-buttons{max-width:380px;margin-top:10px;background:#fff;border-radius:14px;padding:12px}
.bill-change{margin-top:16px}

/* ---------- sales pipeline ---------- */
.lead-tabs{overflow-x:auto;max-width:100%;width:max-content;margin-bottom:12px;scrollbar-width:none}
.lead-tabs button{white-space:nowrap}
.arow.lead.due{border-color:rgba(255,159,67,.5)}
.lead-note{font-style:italic}
.lead-admin{width:100%;margin-top:8px;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:14px;padding:8px 10px;resize:vertical}
.lead-fu{display:flex;flex-direction:column;gap:2px;font-size:11px;color:var(--muted)}
.lead-fu.due span{color:var(--ochre);font-weight:600}
.lead-fu input{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);padding:6px 8px;font:inherit;font-size:13px}

/* ---------- join, paste, demo ---------- */
.join-row{display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.join-qr{width:150px;height:150px;background:#fff;border-radius:12px;padding:8px;flex:none}
.join-qr svg{width:100%;height:100%;display:block}
.join-code{font-family:var(--f-mono);font-size:26px;letter-spacing:.16em;color:var(--coral)}
.paste{width:100%;background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);font:inherit;font-size:15px;padding:10px 12px;resize:vertical;margin:8px 0}
.paste-go{display:flex;align-items:flex-end;justify-content:flex-end;gap:10px;flex-wrap:wrap}
.mono{font-family:var(--f-mono);font-size:12px}
.demo-bar{background:var(--coral-dim);border:1px solid rgba(200,245,66,.4);color:var(--text);border-radius:var(--r-s);padding:10px 14px;font-size:13.5px;margin:16px 0}

/* ---------- challenges ---------- */
.chal-list{display:grid;gap:12px}
.chal{display:grid;gap:7px}
.chal-hd{display:flex;justify-content:space-between;font-size:14.5px}
.chal-hd span{font-family:var(--f-mono);font-size:12.5px;color:var(--muted)}
.chal .track{height:7px}
.chal.ready .track i{background:var(--coral)}
.chal.claimed .track i{background:var(--good)}
.chal .btn{justify-self:start}
.chal small.good{color:var(--good);font-family:var(--f-mono);font-size:12px}

/* ---------- club feed ---------- */
.feed-list{display:grid}
.fitem{display:grid;grid-template-columns:32px 1fr;gap:12px;padding:12px 0;border-top:1px solid var(--line)}
.fitem:first-child{border-top:0;padding-top:2px}
.fbody p{margin:0;font-size:14.5px;line-height:1.4}
.fbody small{color:var(--muted);font-family:var(--f-mono);font-size:11px}
.cheers{display:flex;gap:6px;margin-top:8px}
.cheer{padding:5px 10px;border-radius:100px;border:1px solid var(--line);font-size:15px;line-height:1;display:flex;align-items:center;gap:4px}
.cheer b{font-size:12px;font-family:var(--f-mono);color:var(--muted)}
.cheer.on{border-color:var(--coral);background:var(--coral-dim)}

/* ---------- lessons ---------- */
.lrow{display:grid;grid-template-columns:74px 1fr auto;gap:12px;align-items:center;padding:12px 0;border-top:1px solid var(--line)}
.lrow:first-child{border-top:0}
.lwhen b{display:block;font-size:13px}
.lwhen span{font-family:var(--f-mono);font-size:12px;color:var(--coral)}
.lbody b{display:block;font-size:14.5px}
.lbody small{color:var(--muted);font-size:12.5px}
.lact{display:flex;flex-direction:column;align-items:flex-end;gap:4px}

/* ---------- wrapped ---------- */
.wrapped{text-align:left;display:grid;gap:12px}
.wrapped h3{margin:0;font-size:24px}
.w-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.w-big{background:rgba(255,255,255,.05);border:1px solid var(--line);border-radius:var(--r);padding:14px}
.w-big b{display:block;font-family:var(--f-display);font-size:38px;line-height:1}
.w-big b span{font-size:20px;color:var(--muted)}
.w-big small{display:block;color:var(--muted);font-size:12.5px;margin-top:6px}
.w-big.hl b{color:var(--coral)}
.wrapped .btn{justify-content:center}

/* ---------- join gate ---------- */
.gate-join{margin:-8px 0 16px;padding:12px;border-radius:var(--r-s);background:var(--coral-dim);border:1px solid rgba(200,245,66,.35);display:grid;gap:2px}
.gate-join b{font-size:18px}
.gate-join small{color:var(--muted)}
.logo-row{display:flex;gap:16px;align-items:center;margin-bottom:14px}
.logo-prev{width:84px;height:84px;border-radius:16px;background:#fff;display:grid;place-items:center;flex:none;overflow:hidden;padding:8px}
.logo-prev img{max-width:100%;max-height:100%;object-fit:contain}
.logo-prev span{font-family:var(--f-display);font-size:26px;color:#0B0D0F}
.logo-pick{position:relative;overflow:hidden;cursor:pointer;margin-top:6px}
.logo-pick input{position:absolute;inset:0;opacity:0;cursor:pointer}
.cheer.share{margin-left:auto;font-size:12.5px;font-weight:600;color:var(--coral);border-color:rgba(200,245,66,.35)}
.fgoal-share{font-size:12.5px;margin-top:6px}

/* ---------- player card ---------- */
.pcard-wrap{display:flex;flex-direction:column;align-items:center;gap:12px}
.pcard{--a:#E0A06A;--b:#7A4A26;width:280px;padding:7px;border-radius:24px;background:linear-gradient(150deg,var(--a),var(--b));box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pcard.t-silver{--a:#E8EEF2;--b:#8C99A3}
.pcard.t-gold{--a:#FFE58A;--b:#C99A2E}
.pcard.t-volt{--a:#C8F542;--b:#35C6D6}
.pcard.f-ice{background:linear-gradient(150deg,#BDF6FF,#35C6D6)}
.pcard.f-sunset{background:linear-gradient(150deg,#FFB86B,#FF5A7A)}
.pcard.f-gold{background:linear-gradient(150deg,#FFF3B0,#C99A2E,#FFE58A)}
.pcard.f-neon{background:linear-gradient(150deg,#C8F542,#35C6D6,#B48CFF,#C8F542);background-size:300% 300%;animation:neon 6s ease infinite;box-shadow:0 0 30px rgba(200,245,66,.35)}
@keyframes neon{0%{background-position:0 50%}50%{background-position:100% 50%}100%{background-position:0 50%}}
@media (prefers-reduced-motion:reduce){.pcard.f-neon{animation:none}}
.pc-in{border-radius:18px;background:linear-gradient(180deg,#1C2126,#0E1114);padding:18px 18px 14px;text-align:center}
.pc-top{display:flex;justify-content:space-between;align-items:flex-start}
.pc-ovr{text-align:left;line-height:1}
.pc-ovr b{display:block;font-family:var(--f-display);font-size:54px;color:var(--a)}
.pcard[class*="f-"] .pc-ovr b{color:var(--a)}
.pc-ovr small{font-family:var(--f-mono);font-size:11px;color:var(--muted);letter-spacing:.1em}
.pc-club{width:54px;height:54px;border-radius:12px;background:#fff;display:grid;place-items:center;overflow:hidden;padding:5px}
.pc-club img{max-width:100%;max-height:100%;object-fit:contain}
.pc-club span{font-family:var(--f-display);font-size:18px;color:#0B0D0F}
.pc-name{font-size:22px;font-weight:700;margin-top:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pc-lv{font-family:var(--f-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-top:4px}
.pc-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px 18px;margin:16px 6px 12px;text-align:left}
.pc-stats div{display:flex;align-items:baseline;gap:8px;border-bottom:1px solid var(--line);padding-bottom:4px}
.pc-stats b{font-family:var(--f-display);font-size:24px;min-width:32px}
.pc-stats small{font-family:var(--f-mono);font-size:11px;color:var(--muted)}
.pc-foot{font-family:var(--f-display);font-size:13px;letter-spacing:.06em;color:var(--muted)}
.pc-foot span{color:var(--coral)}
.pc-actions{display:flex;gap:8px}

/* ---------- style shop ---------- */
.cs-eb{margin:12px 0 8px}
.cs-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
.cs-item{display:grid;gap:8px;justify-items:start;padding:12px;border-radius:var(--r);background:rgba(255,255,255,.04);border:1px solid var(--line)}
.cs-item.on{border-color:var(--coral);background:var(--coral-dim)}
.cs-item b{font-size:13.5px}
.cs-sw{width:44px;height:44px;border-radius:12px;display:grid;place-items:center}
.cs-emoji{background:rgba(255,255,255,.08);font-size:24px}

/* ---------- friends, rivals, compare ---------- */
.frow{display:grid;grid-template-columns:32px 1fr auto;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.frow:first-child{border-top:0}
.frow .who{font-weight:600;font-size:14.5px;min-width:0;overflow:hidden;text-overflow:ellipsis}
.frow .who small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.frow.req{background:var(--coral-dim);border-radius:var(--r-s);padding:10px;border-top-color:transparent}
.fr-act{display:flex;gap:6px;align-items:center}
.fr-addbtn{margin-top:12px}
.fadd{text-align:left;display:grid;gap:10px}
.fadd h3{margin:0}
.rival{display:grid;grid-template-columns:32px 1fr 90px 50px;gap:12px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.rival:first-child{border-top:0}
.rival .who{font-weight:600;font-size:14px}
.rival .who small{display:block;font-weight:400;font-size:12px;color:var(--muted)}
.rv-bar{height:7px;border-radius:4px;background:rgba(255,90,90,.35);overflow:hidden}
.rv-bar i{display:block;height:100%;background:var(--coral)}
.rv-sc{font-family:var(--f-display);font-size:20px;text-align:right}
.m-bar{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-bottom:16px}
.m-bar .m-tabs{margin-bottom:0}
.cmp{text-align:left;display:grid;gap:10px}
.cmp h3{margin:0;font-size:22px}
.cmp-legend{display:flex;gap:16px;font-size:13px}
.cmp-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:middle}
.cmp-legend .a::before{background:var(--coral)}
.cmp-legend .b::before{background:var(--sea)}
.rd{width:100%;max-width:320px;margin:0 auto;display:block}
.rd-ring{fill:none;stroke:rgba(255,255,255,.09)}
.rd-a{fill:rgba(200,245,66,.22);stroke:var(--coral);stroke-width:2}
.rd-b{fill:rgba(53,198,214,.18);stroke:var(--sea);stroke-width:2}
.rd-lab{fill:var(--muted);font-size:11px;font-family:var(--f-mono)}
.cmp-h2h{text-align:center;padding:10px;border-radius:var(--r-s);background:rgba(255,255,255,.04)}
.cmp-h2h b{display:block;font-family:var(--f-display);font-size:30px}
.cmp-h2h small{color:var(--muted)}
.cmp-row{display:grid;grid-template-columns:50px 1fr 50px;gap:10px;align-items:center;padding:7px 0;border-top:1px solid var(--line);font-size:14px;text-align:center}
.cmp-row b{font-family:var(--f-display);font-size:18px;color:var(--muted)}
.cmp-row b.up{color:var(--coral)}
.fcard{display:flex;flex-direction:column;align-items:center;gap:14px}

/* ---------- scoreboard ---------- */
.sboard{display:grid;gap:12px}
.sb-top{display:flex;justify-content:space-between;align-items:center;gap:10px;padding-right:28px}
.sb-sets{display:flex;gap:8px;align-items:center;font-family:var(--f-mono);font-size:14px}
.sb-sets span{padding:3px 8px;border-radius:6px;background:rgba(255,255,255,.07)}
.sb-gp{font-size:12.5px;color:var(--muted);display:flex;gap:6px;align-items:center}
.sb-sides{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.sb-side{border-radius:20px;padding:22px 10px;min-height:46vh;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;border:1px solid var(--line);background:rgba(255,255,255,.04);user-select:none;-webkit-user-select:none;touch-action:manipulation}
.sb-side.s0{background:linear-gradient(180deg,rgba(200,245,66,.16),rgba(200,245,66,.04));border-color:rgba(200,245,66,.35)}
.sb-side.s1{background:linear-gradient(180deg,rgba(53,198,214,.16),rgba(53,198,214,.04));border-color:rgba(53,198,214,.35)}
.sb-side:active{transform:scale(.98)}
.sb-side small{font-family:var(--f-mono);font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.sb-side b{font-family:var(--f-display);font-size:96px;line-height:1}
.sb-side em{font-style:normal;font-family:var(--f-mono);font-size:14px}
.sb-side.won{box-shadow:0 0 0 3px var(--coral)}
.sb-bottom{display:flex;justify-content:space-between;align-items:center}
.sb-bottom select{background:rgba(255,255,255,.05);border:1px solid var(--line-2);border-radius:var(--r-s);color:var(--text);padding:8px 10px;font:inherit;font-size:14px}
.sb-done{display:grid;gap:8px;justify-items:center;text-align:center}
.sb-done b{font-family:var(--f-display);font-size:30px;color:var(--coral)}
.sb-done span{font-family:var(--f-mono);font-size:18px}
body.sb-open .sheet{max-width:560px}

/* ---------- drill timer ---------- */
.drill-btns{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dtbtn{padding:7px 12px;border-radius:100px;border:1px solid var(--line-2);font-size:12.5px;font-weight:600}
.thumb[data-drillvid]{cursor:pointer}
.dtimer{display:grid;gap:14px;justify-items:center;text-align:center}
.dt-ring{--p:100;width:220px;height:220px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(var(--coral) calc(var(--p) * 1%), rgba(255,255,255,.08) 0)}
.ph-rest .dt-ring{background:conic-gradient(var(--sea) calc(var(--p) * 1%), rgba(255,255,255,.08) 0)}
.dt-ring > div{width:188px;height:188px;border-radius:50%;background:var(--court-hi);display:grid;place-content:center}
.dt-ring b{font-family:var(--f-display);font-size:72px;line-height:1}
.dt-ring small{font-family:var(--f-mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.dt-round{font-family:var(--f-mono);font-size:13px;color:var(--muted)}
.dt-set{width:100%}
.dt-btns{justify-content:center}
.regdone{display:grid;gap:14px;justify-items:start;padding:36px;border-radius:var(--r);background:var(--court);border:1px solid rgba(200,245,66,.4)}
.regdone-ic{width:56px;height:56px;border-radius:50%;background:var(--coral);color:#0B0D0F;display:grid;place-items:center;font-size:28px;font-weight:700}
.regdone h2{margin:0;font-family:var(--f-display);font-size:34px;text-transform:uppercase}
.regdone p{margin:0}

/* ============================================================
   Compact pass: tighter, cleaner screens on phones
   ============================================================ */
.pslides{align-items:flex-start;transition:height .25s ease}
.pslide{align-items:flex-start}
.notes-more{margin-top:4px}
#notesList.collapsed .note:nth-child(n+2){display:none}
.vback{display:inline-flex;align-items:center;gap:6px;margin:0 0 10px -4px;padding:6px 10px 6px 6px;border-radius:100px;font-size:13.5px;font-weight:600;color:var(--muted);border:1px solid var(--line)}
.vback:hover{color:var(--text)}
.vback svg{width:16px;height:16px}

@media (max-width:680px){
  .main{padding:16px 14px 104px}
  .view-head{margin-bottom:14px}
  .view-head h2{font-size:24px}
  .view-head p{font-size:13px;line-height:1.4}
  .card{padding:14px}
  .card-hd{margin-bottom:10px}
  .card-hd h3{font-size:15px}
  .stack{margin-top:12px}
  .stack-b{margin-bottom:12px}
  .two{gap:12px}
  .tiles{gap:8px;margin-bottom:12px}
  .tile{padding:12px}
  .tile .val{font-size:24px}

  /* shots: a tidy 2-column grid instead of nine tall cards */
  .skills{grid-template-columns:1fr 1fr;gap:8px}
  .skill{padding:11px 12px}
  .skill-es,.skill-cue{display:none}
  .skill-name{font-size:13px}
  .skill-score{font-size:22px}
  .skill-score small{font-size:10px}
  .skill .track{margin-top:8px}
  .skill-foot{margin-top:6px;font-size:10.5px}
  .skill-foot span:last-child{display:none}

  /* radar and body map fit the screen */
  #radar svg{max-height:260px;width:100%}
  .bmap{grid-template-columns:120px 1fr;gap:10px;align-items:start}
  .bfig svg{max-height:200px}
  .bcap .bk{font-size:16px}
  .bcap .bv{font-size:24px}
  .brow{padding:4px 6px}
  .bn{font-size:12px}
  .bs{font-size:16px}

  .pcard{width:240px}
  .pc-ovr b{font-size:44px}
  .pc-name{font-size:19px;margin-top:10px}
  .pc-stats{margin:12px 4px 10px;gap:6px 14px}
  .pc-stats b{font-size:20px}
  .note{margin-bottom:10px}
  .note p{font-size:13.5px}
  .fgoal{padding:9px 0}
  .lv-actions{gap:6px;margin-top:12px}
  .lv-actions .btn{padding:8px 12px}
  .chal-list{gap:9px}
  .sess{padding:12px 14px}
  .feed .fitem{padding:8px 0}
  .pp-qr{width:96px;height:96px}
}