:root{
  --paper:#EAECED;
  --surface:#FFFFFF;
  --surface-2:#F1F3F4;
  --ink:#101315;
  --ink-2:#4A5257;
  --ink-3:#798388;
  --line:#CBD0D3;
  --line-soft:#DFE3E5;
  --accent:#D2900F;
  --on-accent:#141007;
  --accent-soft:#F7E8C4;
  --teal:#14646C;

  --court:#C99450;
  --court-edge:#A2723A;
  --paint:#14646C;
  --paint-a:0.20;
  --c-line:#563B1D;
  --c-move:#15181A;
  --c-pass:#0B4B52;
  --c-shot:#A03F12;
  --p-fill:#131719;
  --p-text:#F6EFDF;
  --p-ring:#D2900F;
  --ball:#D9701F;
  --ball-seam:#6E3308;
  --oob:#D8CDBA;

  --brand-gold:#F5B21A;
  --brand-gold-ink:#181205;

  --shadow:0 1px 2px rgba(16,19,21,.08), 0 8px 24px -12px rgba(16,19,21,.24);
  --r:10px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#0C0D0E;
    --surface:#151719;
    --surface-2:#1D2023;
    --ink:#ECEEEF;
    --ink-2:#A6AEB2;
    --ink-3:#798287;
    --line:#2C3134;
    --line-soft:#22262A;
    --accent:#EFB020;
    --on-accent:#141007;
    --accent-soft:#38290A;
    --teal:#63BCC4;

    --court:#4A3520;
    --court-edge:#66492A;
    --paint:#63BCC4;
    --paint-a:0.16;
    --c-line:#C0A26F;
    --c-move:#F3EDE2;
    --c-pass:#83D2DA;
    --c-shot:#F09040;
    --p-fill:#F3EDE2;
    --p-text:#181205;
    --p-ring:#EFB020;
    --ball:#E88B3E;
    --ball-seam:#361904;
    --oob:#171310;

    --brand-gold:#F5B21A;
    --brand-gold-ink:#181205;

    --brand-gold:#F5B21A;
  --brand-gold-ink:#181205;

  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.75);
  }
}
:root[data-theme="dark"]{
  --paper:#0C0D0E;
  --surface:#151719;
  --surface-2:#1D2023;
  --ink:#ECEEEF;
  --ink-2:#A6AEB2;
  --ink-3:#798287;
  --line:#2C3134;
  --line-soft:#22262A;
  --accent:#EFB020;
  --on-accent:#141007;
  --accent-soft:#38290A;
  --teal:#63BCC4;

  --court:#4A3520;
  --court-edge:#66492A;
  --paint:#63BCC4;
  --paint-a:0.16;
  --c-line:#C0A26F;
  --c-move:#F3EDE2;
  --c-pass:#83D2DA;
  --c-shot:#F09040;
  --p-fill:#F3EDE2;
  --p-text:#181205;
  --p-ring:#EFB020;
  --ball:#E88B3E;
  --ball-seam:#361904;
  --oob:#171310;

  --shadow:0 1px 2px rgba(0,0,0,.45), 0 10px 28px -14px rgba(0,0,0,.75);
}

*{box-sizing:border-box}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:"IBM Plex Sans",system-ui,-apple-system,Segoe UI,sans-serif;
  font-size:15px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.wrap{max-width:1180px;margin:0 auto;padding:20px 18px 56px}

/* ---------- header ---------- */
header{
  display:flex;flex-wrap:wrap;align-items:flex-end;gap:12px 22px;
  padding-bottom:13px;border-bottom:3px solid var(--accent);
}
.brand{display:flex;flex-direction:column;gap:2px}
.club{
  display:flex;align-items:center;gap:9px;
  font-family:"Barlow Condensed",sans-serif;font-weight:600;font-size:15px;
  text-transform:uppercase;letter-spacing:.19em;color:var(--ink-2);
}
.club .mark{
  flex:none;height:40px;width:auto;display:block;
  background:#FFFFFF;border-radius:6px;padding:5px 7px;
}
h1{
  font-family:"Barlow Condensed",Impact,sans-serif;
  font-weight:700;font-size:48px;line-height:.88;letter-spacing:.005em;
  text-transform:uppercase;margin:0;
}
.tagline{
  font-family:"IBM Plex Mono",ui-monospace,monospace;
  font-size:11.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);
  margin-left:auto;text-align:right;line-height:1.7;
}
.tagline b{color:var(--ink-2);font-weight:500}

/* ---------- play switcher ---------- */
.chooser{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;
  margin:16px 0 20px;
}
.chooser label{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.selwrap{position:relative;display:inline-flex;align-items:center}
.selwrap::after{
  content:"";position:absolute;right:14px;pointer-events:none;
  border:5px solid transparent;border-top-color:var(--accent);margin-top:4px;
}
select#playsel{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--ink);color:var(--paper);
  border:1px solid var(--ink);border-radius:8px;
  padding:9px 40px 10px 14px;min-width:250px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:22px;
  line-height:1.1;text-transform:uppercase;letter-spacing:.03em;
}
select#playsel option{
  font-family:"IBM Plex Sans",sans-serif;font-size:14px;font-weight:400;
  text-transform:none;letter-spacing:0;color:var(--ink);background:var(--surface);
}
.kindtag{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--on-accent);background:var(--accent);
  padding:4px 9px;border-radius:99px;
}

/* ---------- layout ---------- */
.grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:start}
@media (max-width:880px){.grid{grid-template-columns:1fr}}

.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
.courtwrap{padding:10px 10px 0}
svg.court{display:block;width:100%;height:auto}

/* ---------- transport ---------- */
.transport{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding:12px 14px;border-top:1px solid var(--line-soft);margin-top:8px;
}
button.tb{
  appearance:none;cursor:pointer;font:inherit;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  width:40px;height:38px;display:grid;place-items:center;
  transition:background .15s,border-color .15s;
}
button.tb:hover:not(:disabled){border-color:var(--ink-3)}
button.tb:disabled{opacity:.35;cursor:not-allowed}
button.tb svg{width:16px;height:16px;fill:currentColor}
button.tb.primary{
  width:auto;padding:0 18px;gap:8px;grid-auto-flow:column;
  background:var(--ink);border-color:var(--ink);color:var(--paper);
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;
  text-transform:uppercase;letter-spacing:.05em;
}
.counter{
  font-family:"IBM Plex Mono",monospace;font-size:12px;letter-spacing:.06em;
  color:var(--ink-3);margin-left:2px;font-variant-numeric:tabular-nums;
}
.counter b{color:var(--ink);font-weight:500}
.spd{display:flex;align-items:center;gap:9px;margin-left:auto}
.spd .toggle{padding-right:14px;margin-right:2px;border-right:1px solid var(--line-soft)}
.spd label{font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3)}
.spd input[type=range]{width:104px;accent-color:var(--accent)}
.spd output{font-family:"IBM Plex Mono",monospace;font-size:11.5px;color:var(--ink-2);width:30px;font-variant-numeric:tabular-nums}
.toggle{display:flex;align-items:center;gap:6px;font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--ink-2);cursor:pointer}
.toggle input{accent-color:var(--accent);width:14px;height:14px}

/* ---------- caption ---------- */
.caption{
  padding:14px 16px 16px;border-top:1px solid var(--line-soft);
  display:flex;gap:12px;align-items:flex-start;min-height:74px;
}
.capnum{
  flex:none;width:30px;height:30px;border-radius:50%;
  background:var(--accent);color:var(--on-accent);
  display:grid;place-items:center;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:17px;
  font-variant-numeric:tabular-nums;
}
.capnum.start{background:var(--ink-3)}
.captext{font-size:15.5px;line-height:1.45;max-width:56ch}

/* ---------- rail ---------- */
.rail{display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px 18px;box-shadow:var(--shadow)}
.card h2{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.11em;color:var(--ink-2);
  margin:0 0 12px;padding-bottom:8px;border-bottom:1px solid var(--line-soft);
}
.summary{margin:0 0 4px;color:var(--ink-2);font-size:14.5px}

ol.steps{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ol.steps li{margin:0}
ol.steps button{
  appearance:none;cursor:pointer;width:100%;text-align:left;font:inherit;color:var(--ink-2);
  background:none;border:0;border-left:2px solid var(--line-soft);
  padding:8px 10px 8px 12px;display:flex;gap:11px;align-items:flex-start;
  transition:color .15s,border-color .15s,background .15s;
}
ol.steps button:hover{background:var(--surface-2);color:var(--ink)}
ol.steps .n{
  flex:none;font-family:"IBM Plex Mono",monospace;font-size:11px;
  color:var(--ink-3);padding-top:3px;font-variant-numeric:tabular-nums;
}
ol.steps button[aria-current="step"]{
  color:var(--ink);border-left-color:var(--accent);background:var(--accent-soft);
}
ol.steps button[aria-current="step"] .n{color:var(--accent)}

ul.keys{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px}
ul.keys li{display:flex;gap:10px;font-size:14.5px;color:var(--ink-2);line-height:1.45}
ul.keys li::before{
  content:"";flex:none;width:7px;height:7px;margin-top:7px;
  background:var(--teal);transform:rotate(45deg);
}

.legend{display:grid;grid-template-columns:1fr 1fr;gap:10px 14px}
.lg{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}
.lg svg{flex:none}
.roster{display:flex;flex-wrap:wrap;gap:7px;margin-top:14px;padding-top:13px;border-top:1px solid var(--line-soft)}
.rp{
  display:flex;align-items:center;gap:6px;font-size:12.5px;color:var(--ink-2);
  background:var(--surface-2);border-radius:99px;padding:3px 10px 3px 4px;
}
.rp i{
  width:19px;height:19px;border-radius:50%;border:1.5px solid var(--ink);color:var(--ink);
  display:grid;place-items:center;font-style:normal;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:13px;
}
footer{margin-top:26px;font-size:12.5px;color:var(--ink-3);max-width:70ch}
footer code{font-family:"IBM Plex Mono",monospace;font-size:11.5px;background:var(--surface-2);padding:1px 5px;border-radius:4px;color:var(--ink-2)}

:where(button,input,a):focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:520px){
  h1{font-size:34px}
  .tagline b{display:none}
  .tagline{margin-left:0;text-align:left;width:100%}
  .transport{gap:6px;padding:10px}
  .spd{margin-left:0;width:100%;justify-content:space-between}
}
html{color-scheme:light dark}
img{max-width:100%}
[hidden]{display:none!important}


/* ---------- home: the play index ---------- */
.brand{text-decoration:none;color:inherit}
a.brand:hover h1{color:var(--accent)}
h1{transition:color .15s}

.lede{
  margin:18px 0 20px;color:var(--ink-2);font-size:16px;max-width:60ch;
}
#playgrid{display:flex;flex-direction:column;gap:26px}
.group{display:flex;flex-direction:column;gap:12px}
.grouphead{
  display:flex;align-items:baseline;gap:10px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:15px;
  text-transform:uppercase;letter-spacing:.13em;color:var(--ink-2);
  padding-bottom:7px;border-bottom:1px solid var(--line);
}
.grouphead .count{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  color:var(--ink-3);font-weight:400;
}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:16px}
.playcard{
  display:flex;flex-direction:column;text-decoration:none;color:inherit;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;box-shadow:var(--shadow);
  transition:border-color .15s,transform .12s,box-shadow .15s;
}
.playcard:hover{
  border-color:var(--accent);transform:translateY(-2px);
  box-shadow:0 2px 4px rgba(16,19,21,.10), 0 14px 30px -14px rgba(16,19,21,.35);
}
.playcard .mini{display:block;width:100%;height:auto;border-bottom:1px solid var(--line-soft)}
.playcard .body{padding:12px 14px 14px;display:flex;flex-direction:column;gap:5px;flex:1}
.playcard .pname{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:25px;
  line-height:1;text-transform:uppercase;letter-spacing:.02em;
}
.playcard .psum{font-size:13.5px;line-height:1.4;color:var(--ink-2);flex:1}
.playcard .pmeta{
  font-family:"IBM Plex Mono",monospace;font-size:10px;letter-spacing:.09em;
  text-transform:uppercase;color:var(--ink-3);padding-top:2px;
}

.backlink{
  display:inline-flex;align-items:center;gap:4px;text-decoration:none;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.backlink:hover{color:var(--accent)}
.backlink svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2.4;
  stroke-linecap:round;stroke-linejoin:round}

/* ---------- auth ---------- */
.authcard{
  max-width:400px;margin:56px auto 0;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);padding:28px 28px 24px;
}
.authtitle{
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:30px;
  line-height:1;text-transform:uppercase;letter-spacing:.03em;margin:0 0 8px;
}
.authlede{margin:0 0 20px;color:var(--ink-2);font-size:14.5px;line-height:1.5}
#authform{display:flex;flex-direction:column;gap:14px}
.field{display:flex;flex-direction:column;gap:5px}
.field span{
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--ink-3);
}
.field input{
  font:inherit;font-size:15px;color:var(--ink);
  background:var(--surface-2);border:1px solid var(--line);border-radius:8px;
  padding:10px 12px;
}
.field input:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.authbtn{
  appearance:none;cursor:pointer;width:100%;margin-top:4px;
  background:var(--ink);color:var(--paper);border:1px solid var(--ink);border-radius:8px;
  padding:11px 16px;
  font-family:"Barlow Condensed",sans-serif;font-weight:700;font-size:19px;
  text-transform:uppercase;letter-spacing:.05em;
  transition:background .15s,opacity .15s;
}
.authbtn:hover{opacity:.88}
.authbtn:disabled{opacity:.45;cursor:not-allowed}
.authbtn.ghost{background:none;color:var(--ink)}
.authmsg{
  margin:0;font-size:13.5px;line-height:1.45;padding:9px 11px;border-radius:7px;
  background:var(--accent-soft);color:var(--ink);border-left:3px solid var(--accent);
}
.authmsg.bad{border-left-color:#C0392B}
.authalt{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:16px;padding-top:14px;border-top:1px solid var(--line-soft);
}
.linkbtn{
  appearance:none;background:none;border:0;cursor:pointer;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.linkbtn:hover{color:var(--accent)}
.signout{
  appearance:none;cursor:pointer;display:block;margin-top:6px;margin-left:auto;
  background:none;border:0;padding:0;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.08em;
  text-transform:uppercase;color:var(--ink-3);
}
.signout:hover{color:var(--accent)}
@media (max-width:520px){ .authcard{margin-top:28px;padding:22px 20px 20px} .signout{margin-left:0} }

/* ---------- team switcher ---------- */
.teamswitch{display:block;margin-top:6px;text-align:right}
.teamswitch select{
  appearance:none;-webkit-appearance:none;cursor:pointer;
  background:var(--surface);color:var(--ink);
  border:1px solid var(--line);border-radius:6px;padding:4px 24px 4px 9px;
  font-family:"IBM Plex Mono",monospace;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;
  background-image:linear-gradient(45deg,transparent 50%,var(--accent) 50%),
                   linear-gradient(135deg,var(--accent) 50%,transparent 50%);
  background-position:calc(100% - 13px) 52%, calc(100% - 9px) 52%;
  background-size:4px 4px, 4px 4px;background-repeat:no-repeat;
}
.teamswitch select:hover{border-color:var(--ink-3)}
@media (max-width:520px){ .teamswitch{text-align:left} }