/* Same look as alexv.site: its fonts (self-hosted), colours, hairlines and big condensed headings. */
@font-face{font-family:"Bricolage Display";src:url(/fonts/display.woff2) format("woff2");font-weight:200 800;font-stretch:75% 100%;font-display:swap}
@font-face{font-family:"Bricolage Text";src:url(/fonts/text.woff2) format("woff2");font-weight:200 800;font-display:swap}
:root{--bg:#0a111e;--fg:#eaeef6;--mut:#8995ab;--line:#1c2840;--edge:#3a4a6c;--panel:#121c30;--acc:#86a2ff;--acc-ink:#0a111e;
  --floor:#16233d;--floor2:#111b30;--court-ln:#d8deea;--net:#eaeef6;--opp:#3a4a6c;--ok:#35d0a0;--bad:#ff6b8b;
  --s:#86a2ff;--o:#ff6b8b;--h:#35d0a0;--m:#ffc247;--l:#c77dff;--ink:#0a111e;--ball:#ffd36b}
@media (prefers-color-scheme:light){:root{--bg:#f1f2ee;--fg:#0c1424;--mut:#5a6579;--line:#d4d8d0;--edge:#8d9488;--panel:#e4e6df;--acc:#2447e0;--acc-ink:#fff;
  --floor:#e2c9a4;--floor2:#d8bd95;--court-ln:#fff;--net:#0c1424;--opp:#a7ad9f;--ok:#0b7a55;--bad:#c2234a;--s:#5b7cff;--o:#f0557a;--h:#1fb889;--m:#f2ad1c;--l:#a95cf0;--ball:#ffcf40}}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font:17px/1.6 "Bricolage Text",system-ui,sans-serif;-webkit-tap-highlight-color:transparent}
main{max-width:1180px;margin:0 auto;padding:0 20px 80px}
a{color:var(--acc)}
:focus-visible{outline:2px solid var(--acc);outline-offset:3px;border-radius:3px}
button{font:inherit;color:inherit;cursor:pointer}
@keyframes fade{from{opacity:0;transform:translateY(10px)}}
@media (prefers-reduced-motion:reduce){*{animation:none!important;scroll-behavior:auto!important}}

.hero{padding:6vh 0 4vh;animation:fade .7s ease-out both}
.back{color:var(--mut);text-decoration:none;font-size:.95rem}.back:hover{color:var(--acc)}
h1{font:800 clamp(3.6rem,12vw,9.5rem)/.86 "Bricolage Display",system-ui,sans-serif;font-stretch:75%;letter-spacing:-.035em;margin:.35em 0 .3em -.03em;hyphens:manual}
.lede{max-width:44em;color:var(--mut);font-size:1.1rem;margin:0 0 1.4rem}.lede b{color:var(--fg)}
.jump{display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;border-top:1px solid var(--line);padding-top:1rem}
.jump a{text-decoration:none;color:var(--fg);font-weight:600}.jump a:hover{color:var(--acc)}

/* the live court */
.tool{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"court controls" "court explain";grid-template-rows:auto 1fr;gap:0 2.4rem;align-items:start;border-top:1px solid var(--line);padding-top:2rem;scroll-margin-top:10px}
.courtwrap{grid-area:court;position:sticky;top:12px}.controls{grid-area:controls;min-width:0}.explain{grid-area:explain;min-width:0}
#court{display:block;width:100%;max-height:calc(100vh - 90px);touch-action:none;user-select:none;-webkit-user-select:none}
.floor.us{fill:var(--floor)}.floor.them{fill:var(--floor2)}
.ln{stroke:var(--court-ln);stroke-width:.07;opacity:.85}
.net{stroke:var(--net);stroke-width:.16;stroke-dasharray:.16 .1}.post{fill:var(--net)}
.lbl{font:600 .3px "Bricolage Text",system-ui,sans-serif;fill:var(--mut)}.lbl.side{font-weight:700}
.znum{font:800 .95px "Bricolage Display",system-ui,sans-serif;font-stretch:75%;fill:var(--fg);opacity:.13;text-anchor:middle}
.pl circle{stroke:var(--bg);stroke-width:.07}
.pl text{font:700 .34px "Bricolage Text",system-ui,sans-serif;text-anchor:middle;fill:var(--ink);pointer-events:none}
.pl.s circle{fill:var(--s)}.pl.o circle{fill:var(--o)}.pl.h circle{fill:var(--h)}.pl.m circle{fill:var(--m)}.pl.l circle{fill:var(--l)}
.pl.bench{opacity:.4}
.draggable .pl:not(.bench){cursor:grab}.pl.drag{cursor:grabbing}.pl.drag circle{stroke:var(--fg);stroke-width:.1}
.opp circle{fill:var(--opp);stroke:var(--bg);stroke-width:.06}
.ball{fill:var(--ball);stroke:#7a5a00;stroke-width:.04}.shadow{fill:#000}
.ov line{stroke-width:.07;stroke-linecap:round}.ov .ok{stroke:var(--ok);opacity:.7}.ov .bad{stroke:var(--bad);stroke-width:.12}.ov .side{stroke-dasharray:.18 .12}
.legend{list-style:none;padding:0;margin:.8rem 0 0;display:flex;flex-wrap:wrap;gap:.3rem 1rem;color:var(--mut);font-size:.88rem}
.legend li{display:flex;align-items:center;gap:.4rem}

.tabs{display:flex;border-bottom:1px solid var(--line);gap:.2rem;overflow-x:auto}
.tabs button{background:none;border:0;border-bottom:2px solid transparent;padding:.55rem .9rem;font-weight:600;color:var(--mut);white-space:nowrap;margin-bottom:-1px}
.tabs button[aria-selected=true]{color:var(--fg);border-bottom-color:var(--acc)}.tabs button:hover{color:var(--fg)}
.rotrow{display:flex;align-items:center;gap:.8rem;margin:1rem 0 .2rem;color:var(--mut);font-size:.92rem}
.rots{display:flex;gap:.35rem}
.rots button{width:40px;height:40px;border-radius:50%;border:1px solid var(--edge);background:none;font-weight:700;font-variant-numeric:tabular-nums}
.rots button[aria-pressed=true]{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}
.bar{display:flex;flex-wrap:wrap;align-items:center;gap:.6rem 1rem;margin:.9rem 0 .2rem}
.hint{color:var(--mut);font-size:.9rem}
.primary,.ghost{padding:.55rem 1.1rem;border-radius:6px;border:1px solid var(--edge);background:none;font-weight:600;min-height:44px}
.primary{background:var(--acc);border-color:var(--acc);color:var(--acc-ink)}.ghost:hover{border-color:var(--acc);color:var(--acc)}
button:disabled{opacity:.4;cursor:default}
.small{min-height:34px;padding:.3rem .8rem;font-size:.88rem}
.seg{display:inline-flex;border:1px solid var(--edge);border-radius:6px;overflow:hidden}
.seg button{background:none;border:0;padding:.5rem .9rem;font-weight:600;min-height:42px;color:var(--mut)}
.seg button[aria-pressed=true]{background:var(--panel);color:var(--fg)}
.steps{display:flex;gap:.4rem}
#title{font:800 clamp(1.7rem,3.4vw,2.4rem)/1.05 "Bricolage Display",system-ui,sans-serif;font-stretch:80%;margin:1.3rem 0 .6rem;letter-spacing:-.01em}
.stepn{font:600 .95rem "Bricolage Text",system-ui,sans-serif;color:var(--mut);vertical-align:middle;margin-right:.3rem;font-variant-numeric:tabular-nums}
#text{margin:0 0 1rem;max-width:40em}
.legal{border-left:3px solid var(--ok);padding:.5rem .8rem;margin:0 0 .8rem;background:var(--panel);border-radius:0 6px 6px 0;font-size:.95rem}
.legal.no{border-left-color:var(--bad)}.legal.no b:first-child{color:var(--bad)}.legal.yes b:first-child{color:var(--ok)}
#reset{display:none}.explain:has(#legal:not([hidden])) #reset{display:inline-block;margin-bottom:.6rem}
.notes{list-style:none;padding:0;margin:.4rem 0 0;border-top:1px solid var(--line)}
.notes li{display:grid;grid-template-columns:3.4rem 1fr;gap:.8rem;padding:.75rem 0;border-bottom:1px solid var(--line);animation:fade .45s ease-out both}
.notes li:nth-child(2){animation-delay:.04s}.notes li:nth-child(3){animation-delay:.08s}.notes li:nth-child(4){animation-delay:.12s}.notes li:nth-child(5){animation-delay:.16s}.notes li:nth-child(6){animation-delay:.2s}
.notes em{font-style:normal;color:var(--mut)}.rule{display:block;color:var(--mut);font-size:.9rem;margin-top:.2rem}
.tag{display:inline-block;min-width:2.6em;text-align:center;padding:.05rem .35rem;border-radius:99px;font:700 .78rem/1.5 "Bricolage Text",system-ui,sans-serif;color:var(--ink);vertical-align:.08em}
.tag.s{background:var(--s)}.tag.o{background:var(--o)}.tag.h{background:var(--h)}.tag.m{background:var(--m)}.tag.l{background:var(--l)}
.notes .tag{justify-self:start;align-self:start;margin-top:.15rem}

/* reading */
.learn{border-top:1px solid var(--line);margin-top:4rem;padding-top:1rem;display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:0 3rem}
.learn article{padding:1.4rem 0;border-bottom:1px solid var(--line);animation:fade .7s ease-out both}
.learn h2{font:800 clamp(1.6rem,3vw,2.1rem)/1.05 "Bricolage Display",system-ui,sans-serif;font-stretch:80%;margin:0 0 .7rem}
.learn p,.learn li,.learn dd{color:var(--fg)}.learn p{margin:.6rem 0}
.learn ul{padding-left:1.2rem}
.roles dt,.gloss dt{font-weight:700;margin-top:.9rem}.roles dd,.gloss dd{margin:.2rem 0 0;color:var(--mut)!important}
.gloss{display:grid;grid-template-columns:max-content 1fr;gap:.35rem 1rem}.gloss dt{margin:0}.gloss dd{margin:0}
.fine{grid-column:1/-1;color:var(--mut);font-size:.9rem;margin-top:1.4rem}

@media (max-width:860px){
  .tool{grid-template-columns:1fr;grid-template-areas:"controls" "court" "explain";gap:.8rem}
  .courtwrap{position:static}
  #court{max-height:62vh;max-width:520px;margin:0 auto} /* buttons above, court below: both on screen while stepping through a rally */
  .legend{font-size:.8rem;gap:.2rem .8rem;margin-top:.4rem}
  .legend{justify-content:center}
  .gloss{grid-template-columns:1fr}.gloss dt{margin-top:.6rem}
}