/* ═══════════ STAMP RALLY THEME ═══════════
   Warm paper, a lacquer-dark scoreboard, gold for anything ranked, and one
   red that only ever means "this is the result". Serif for names and numbers,
   a plain sans for everything you read at speed. */
*{font-variant-numeric:tabular-nums}
:root{--icon1:#31291F;--icon2:#191510}
.appbar{position:relative;border-bottom:1.5px solid var(--ink);background:rgba(240,231,219,.88)}
.appbar::after{content:"";position:absolute;left:50%;transform:translateX(-50%);bottom:-4.5px;
  width:104px;height:3px;background:var(--gold)}
.logo h1{font-family:var(--display);font-weight:900;font-size:24px;letter-spacing:-.012em;
  text-transform:none;line-height:.94}
.logo h1 em{font-family:var(--mono);font-size:7.5px;font-weight:700;letter-spacing:.34em;
  text-transform:uppercase;color:var(--gold);margin-top:4px}
.evbtn{background:transparent;border:1.5px solid var(--line);color:var(--ink)}
.evbtn span{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.02em;text-transform:none}
.evbtn em{font-family:var(--mono);letter-spacing:.1em;color:var(--dim);opacity:1}
.label{font-family:var(--mono);font-weight:700;letter-spacing:.2em;color:var(--ink2)}

/* names read as text, not as a scoreboard font */
.c-name{font-family:var(--body);font-weight:700;font-size:17px;letter-spacing:0;text-transform:none}
.c-name small{font-family:var(--mono);font-size:8.5px;letter-spacing:.07em;text-transform:uppercase;margin-top:4px}
.court-no,.vacant strong,.team .nm,.evrow .d b,.mline .tm,.chip,.pk-chip,.pt-chip,.slot{
  font-family:var(--body);font-weight:700;letter-spacing:.01em;text-transform:none}
.seat{font-family:var(--body);font-weight:800;letter-spacing:.01em;text-transform:none}
.sheet h3,.hero h2,.bigcard h2{font-family:var(--display);font-weight:900;letter-spacing:-.012em;text-transform:none}
.mark{font-family:var(--body);font-weight:800}

/* the scoreboard */
.tablecard{background:var(--board);border:1px solid #3B332B}
.thead{background:transparent;border-bottom:1px solid rgba(246,239,227,.16);color:#9C8F7E}
.trow{border-top:1px solid rgba(246,239,227,.09)}
.trow .c-name{color:#F6EFE3}
.trow .c-name small{color:#948877}
.trow .c-rank{font-family:var(--display);font-weight:700;font-size:16px;color:var(--gold)}
.trow .c-num{color:#F6EFE3}
.trow .c-num.sub{color:#948877}
.c-num.pts{font-family:var(--display);font-weight:700;font-size:19px;color:var(--gold)}
.trow.top1{background:rgba(201,150,47,.11)}
.trow.top1 .c-name,.trow.top1 .c-num.pts{color:var(--gold-lit)}
.trow.tap:active{background:rgba(246,239,227,.07)}
.up{color:#8FBF52} .down{color:#E0705C}

/* lacquer cards */
.hero,.bigcard{background:linear-gradient(152deg,#312A22,#1A1611)}
.hero::after,.bigcard::after{background:radial-gradient(circle,rgba(201,150,47,.16),transparent 68%)}
.hero .cap,.bigcard .cap{color:var(--gold);font-weight:700;letter-spacing:.24em}
.hero h2,.bigcard h2{color:#F8F2E7}
.hero .stats b,.bigcard .mini b{font-family:var(--display);font-weight:700;color:var(--gold-lit);font-size:22px}
.bigcard .mini div{background:rgba(246,239,227,.08)}
.bigcard .go{background:var(--stamp);color:#FBF3E6;font-family:var(--body);font-weight:800;
  letter-spacing:.11em;box-shadow:0 3px 0 #7E211C}
/* the hanko: the leader's points get stamped */
.hero .stats div:first-child b{display:inline-flex;align-items:center;justify-content:center;
  min-width:60px;height:60px;padding:0 6px;border-radius:50%;border:2.5px solid #D9564A;
  color:#EE8375;transform:rotate(-7deg);background:rgba(217,86,74,.1)}

/* buttons */
.btn{font-family:var(--body);font-weight:800;font-size:13.5px;letter-spacing:.11em}
.btn-primary{background:var(--stamp);color:#FBF3E6;box-shadow:0 3px 0 #7E211C}
.btn-primary:active{background:#8E231E;box-shadow:0 1px 0 #7E211C}
.btn-primary:disabled{background:transparent;color:var(--dim);box-shadow:none;border:1.5px solid var(--line)}
.btn-solid{background:var(--violet-soft);color:var(--stamp)}
.btn-outline{border:1.5px solid var(--line);background:transparent}
.logbtn,.sharebtn{background:transparent;border:1.5px dashed var(--line);box-shadow:none;
  font-family:var(--body);font-weight:800;letter-spacing:.11em;color:var(--ink2)}
.sharebtn{color:var(--stamp)}
.seg{background:var(--sunk);border:1px solid var(--line);border-radius:9px;padding:3px}
.seg button{font-family:var(--body);font-weight:700;font-size:13px;letter-spacing:.07em;border-radius:6px}
.seg button[aria-pressed="true"]{background:var(--card);border:1px solid var(--line)}
.seg.mini button{font-family:var(--mono);font-weight:700;font-size:10.5px}

/* court in pickle green, cream lines */
.court{border-radius:6px}
.chip.due{background:var(--stamp);color:#FBF3E6}
.chip.due b,.chip.due u{color:rgba(251,243,230,.8)}
.meter i{background:linear-gradient(90deg,var(--gold),var(--stamp))}
.pill{background:rgba(201,150,47,.16);color:#8A6413;font-family:var(--mono);font-weight:700}
.toast{background:var(--board)} .toast b{color:var(--gold-lit)}
.tabs{background:rgba(240,231,219,.94);border-top:1.5px solid var(--ink)}
.tabs button{font-family:var(--mono);font-weight:700}
.tabs button[aria-current="true"]{color:var(--stamp)}
.tile svg{stroke:var(--stamp)} .tile:nth-child(2) svg{stroke:var(--gold)} .tile:nth-child(3) svg{stroke:#4F7E22}
.tile span{font-family:var(--mono);font-weight:700}
.mrow .res.w,.form i.w{background:#5B8F28} .mrow .res.l,.form i.l{background:var(--stamp)}
.mline.win{background:rgba(201,150,47,.13)}
.mline.win .tm,.mline.win .pt{color:#8A6413}
body::before{background:
  radial-gradient(60% 40% at 6% -4%, rgba(201,150,47,.20), transparent 62%),
  radial-gradient(46% 34% at 98% 3%, rgba(176,48,42,.13), transparent 64%),
  radial-gradient(70% 44% at 50% 104%, rgba(79,126,34,.13), transparent 66%)}

/* labels and figures on a tracked sans, not a typewriter */
.label,.cap,.when,.evmeta span,.datechip em,.datechip i,.evwin,.mtop,.mtag,.mno,
.c-name small,.thead,.pill,.timer .t,.chip b,.chip u,.tabs button,.pgrid span,
.evmini .d span,.mhead,.readout,.note,.hero .stats span,.bigcard .mini span,
.nowchip,.mline .tm em,.form em,.pt-chip b,.tally,.appstat,.sub,.tip,.blank{
  font-family:var(--body)!important;font-weight:600}
.label{letter-spacing:.22em}
.hero .cap,.bigcard .cap{letter-spacing:.26em;font-weight:800}
.when,.evmeta span{letter-spacing:.12em}
.pgrid b,.hero .stats b,.bigcard .mini b,.evmini .r,.timer .t,.mline .pt,.datechip b,
.c-num,.c-num.pts,.stepper .val,.slot i{font-family:var(--display);font-weight:700}
.evcard.live .spine{background:linear-gradient(180deg,var(--gold),#9A6C18)}
.evcard.live .datechip{background:rgba(201,150,47,.16)}
.evcard.live .datechip b{color:#8A6413}
.nowchip{background:var(--stamp)}
.evgo.on{background:rgba(176,48,42,.1);color:var(--stamp)}
.mline.win::before{background:linear-gradient(180deg,var(--gold),#9A6C18)}
.mline.win .tm,.mline.win .pt{color:#8A6413}
.mtag.nailbiter{background:rgba(176,48,42,.12);color:var(--stamp)}

/* ═══════════ RANKED, AND A COURT THAT LOOKS LIKE A COURT ═══════════ */

/* ─── the switch that decides what a round is worth ─── */
.modesw{display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:5px;margin-bottom:9px;
  background:var(--sunk);border:1.5px solid var(--line);border-radius:15px}
.modesw button{border:0;border-radius:11px;padding:11px 8px 10px;background:transparent;
  cursor:pointer;display:flex;flex-direction:column;gap:3px;align-items:center;transition:.16s}
.modesw button b{font-family:var(--body);font-size:14px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--ink2)}
.modesw button em{font-family:var(--body);font-style:normal;font-size:9px;font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--dim)}
.modesw button[aria-pressed="true"]{background:var(--card);box-shadow:0 1px 3px rgba(16,24,40,.16)}
.modesw button[aria-pressed="true"] b{color:var(--ink)}
.modesw.on button[aria-pressed="true"]{background:var(--stamp);box-shadow:0 3px 0 #7E211C}
.modesw.on button[aria-pressed="true"] b{color:#FBF3E6}
.modesw.on button[aria-pressed="true"] em{color:rgba(251,243,230,.72)}
.modenote{margin:0 3px 17px}

/* ─── nobody should ever wonder whether a game counted ─── */
.rkbadge,.cabadge{font-family:var(--body);font-size:8px;font-weight:800;letter-spacing:.17em;
  text-transform:uppercase;padding:4px 8px;border-radius:20px;flex:none;line-height:1}
.rkbadge{background:var(--stamp);color:#FBF3E6}
.cabadge{background:var(--sunk);color:var(--dim);border:1px solid var(--line)}
.readout.stake{padding-top:6px}
.readout.stake u{text-decoration:none;color:#4F7E22;font-weight:700}
.mtag.rkd{background:var(--stamp);color:#FBF3E6}
.mcard.rkd{box-shadow:inset 3px 0 0 var(--stamp),var(--sh-s)}
.sheetmode{display:grid;grid-template-columns:1fr 1fr;gap:5px;padding:4px;margin-bottom:15px;
  background:var(--sunk);border:1.5px solid var(--line);border-radius:12px}
.sheetmode button{border:0;background:transparent;border-radius:9px;padding:9px;cursor:pointer;
  font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim)}
.sheetmode button[aria-pressed="true"]{background:var(--card);color:var(--ink);
  box-shadow:0 1px 3px rgba(16,24,40,.14)}
.sheetmode.on button[aria-pressed="true"]{background:var(--stamp);color:#FBF3E6}

/* ─── tiers and par ─── */
.boardseg{margin-bottom:9px}
.boardnote{margin:0 3px 17px;line-height:1.6}
.tierdot{display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;
  position:relative;top:1px;box-shadow:0 0 0 1.5px rgba(255,255,255,.45)}
.tierdot.big{width:17px;height:17px;flex:none;top:0;margin:0;
  box-shadow:0 0 0 2px rgba(255,255,255,.6),0 1px 3px rgba(0,0,0,.2)}
.tierline{font-family:var(--body);font-size:11px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:rgba(255,255,255,.88);margin-top:7px}
.par.hot{color:#8FCB4E;font-weight:700}
.par.cold{color:#E28A80;font-weight:700}
em.unpl{font-style:normal;color:#948877;font-weight:600}

/* RP runs to four digits where points ran to three, so the hanko needs room and
   its caption needs to sit under the circle rather than under the box. */
.hero .stats{flex-wrap:wrap;gap:15px 18px}
.hero .stats div:first-child{display:flex;flex-direction:column;align-items:center;gap:5px}
.hero .stats div:first-child b{font-size:19px}

/* ─── the ladder card on a profile ─── */
.ladder{background:var(--sunk);border:1.5px solid var(--line);border-radius:16px;
  padding:14px;margin-bottom:16px}
.lrow{display:flex;align-items:center;gap:11px}
.lname{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--body);
  font-size:15px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink);line-height:1.1}
.lname em{font-family:var(--body);font-style:normal;font-size:9.5px;font-weight:600;
  letter-spacing:.09em;text-transform:uppercase;color:var(--dim);margin-top:4px}
.lrp{font-family:var(--display);font-size:27px;font-weight:700;color:var(--ink);
  line-height:1;display:flex;align-items:baseline;gap:4px;flex:none}
.lrp em{font-family:var(--body);font-style:normal;font-size:8.5px;font-weight:800;
  letter-spacing:.16em;color:var(--dim)}
.lbar{height:6px;border-radius:3px;background:rgba(0,0,0,.10);margin:12px 0 13px;overflow:hidden}
.lbar i{display:block;height:100%;border-radius:3px;transition:width .3s}
.lgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;text-align:center}
.lgrid b{display:block;font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink)}
.lgrid span{font-family:var(--body);font-size:8px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--dim);display:block;margin-top:2px}
.lgrid div:last-child b{font-family:var(--body);font-size:10px;font-weight:800;
  letter-spacing:0;text-transform:none;line-height:1.25}
.lnote{font-size:11.5px;line-height:1.65;color:var(--ink2);margin:12px 0 0}

/* ─── the court, drawn to the real thing ───
   44 by 20 feet, kitchen 7 feet back from the net — 31.8% of each half, which
   is what the 32% below is. The apron is the run-off you actually get at a
   club, so this reads as a court seen from above rather than three green boxes
   in a row. Lines in cream, not white: white would be the only pure white on
   the page and it fights everything else. */
.court{aspect-ratio:2.2/1;padding:10px;border-radius:9px;overflow:hidden;
  background:linear-gradient(150deg,#3F6A1C 0%,#355A16 58%,#2E4E12 100%);
  box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),0 2px 5px rgba(20,40,10,.16)}
.court::before{content:'';position:absolute;inset:10px;border-radius:2px;z-index:0;
  background:linear-gradient(150deg,#5E9A2C 0%,#4C7F20 60%,#43701A 100%);
  box-shadow:inset 0 0 34px rgba(0,32,10,.26)}
.rail{inset:10px;border:2.5px solid rgba(247,241,229,.92);border-radius:2px;z-index:3}
.nvz{background:linear-gradient(150deg,rgba(24,58,14,.40),rgba(20,48,12,.50))}
.side.a .nvz{border-left:2.5px solid rgba(247,241,229,.92)}
.side.b .nvz{border-right:2.5px solid rgba(247,241,229,.92)}
.ctr{height:2.5px;background:rgba(247,241,229,.92);transform:translateY(-1.25px)}
/* a net you can actually see: mesh band across the middle, posts standing
   proud of the sidelines the way they do on a real court */
.netpost{width:10px;flex:none;z-index:5;position:relative;align-self:stretch;
  background:repeating-linear-gradient(0deg,rgba(250,246,238,.82) 0 1px,transparent 1px 3.5px),
             repeating-linear-gradient(90deg,rgba(250,246,238,.5) 0 1px,transparent 1px 3.5px),
             rgba(16,38,12,.5);
  box-shadow:0 0 0 1px rgba(0,0,0,.22),0 0 10px rgba(0,25,8,.3)}
.netpost::before,.netpost::after{content:'';position:absolute;left:50%;width:7px;height:7px;
  border-radius:50%;background:#2A2620;transform:translateX(-50%);
  box-shadow:0 0 0 2px rgba(247,241,229,.75)}
.netpost::before{top:-8px} .netpost::after{bottom:-8px}
/* The kitchen is 32% of one half of the court, but a percentage padding on
   .side resolves against the COURT's width, not the side's — so the old 32%
   was eating twice the room it should and folding every name in half. The
   width of one half is (100% - the net)/2, so the kitchen is 16% of the court
   less half the net. Stated that way it stays right at any screen size. */
.side.a{padding-right:calc(16% - 1.6px)}
.side.b{padding-left:calc(16% - 1.6px)}
.side{padding-bottom:15px}
.seat{z-index:4;padding:3px 6px;font-size:clamp(12px,4.1vw,19px);
  /* break between words, and only inside one if a single name truly cannot fit */
  word-break:normal;overflow-wrap:break-word;hyphens:none;
  text-shadow:0 1px 7px rgba(0,28,8,.7),0 0 2px rgba(0,28,8,.5)}
.seat i{opacity:.8;letter-spacing:.06em}
.hint-tap{z-index:4;bottom:3px;color:rgba(255,255,255,.58);white-space:nowrap}
.side.a .hint-tap,.side.b .hint-tap{padding:0}
/* each seat is its own box, so a player's colour bar sits under their own name
   instead of both of them landing in the same spot at the foot of the side */
.seat{position:relative}
.seatline{bottom:1px;width:26%;height:2.5px;opacity:.9}
.side:active{background:rgba(255,255,255,.16)}
.vacant{aspect-ratio:2.2/1}


/* ═══════════ CLUB, EVENTS, PICTURES ═══════════ */

/* ─── the club's own mark ─── */
.clubmark{display:block;width:38px;height:38px;border-radius:10px;background-size:cover;
  background-position:center;box-shadow:0 1px 3px rgba(16,24,40,.22)}
.clubrow{display:flex;gap:12px;align-items:stretch;margin-bottom:10px}
.clublogo{position:relative;flex:none;width:78px;height:78px;border-radius:16px;padding:0;
  border:1.5px dashed var(--line);background:var(--sunk);cursor:pointer;overflow:visible}
.clublogo #logoPrev{display:block;width:100%;height:100%;border-radius:15px;
  background-size:cover;background-position:center}
.clublogo #logoPrev.has{box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.clublogo .cam{position:absolute;right:-5px;bottom:-5px;width:26px;height:26px;border-radius:50%;
  background:var(--stamp);display:flex;align-items:center;justify-content:center}
.clublogo .cam svg{width:14px;height:14px;stroke:#FBF3E6;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.clubfields{flex:1;display:flex;flex-wrap:wrap;gap:8px;align-content:center}
.clubfields .fld{flex:1 1 100%;margin:0}
.clubfields .fld.cur{flex:0 0 62px;text-align:center}
.clubfields .fld{margin:0}
.linkbtn{background:none;border:0;padding:0;cursor:pointer;font-family:var(--body);
  font-size:11.5px;font-weight:700;color:var(--stamp);text-decoration:underline;
  text-underline-offset:2px}
.linkbtn.wide{display:block;width:100%;text-align:center;margin-top:14px;padding:10px}

/* ─── an event says what it is ─── */
.cap .dot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-right:6px;
  position:relative;top:0}
.bigcard.st-live .cap .dot{animation:pulse 1.7s ease-in-out infinite}
/* the lift-everything-above-the-picture rule below is deliberately kept off the
   picture itself, or it would knock it out of absolute positioning and collapse
   it to nothing */
.bigcard .herocover{position:absolute;inset:0;background-size:cover;
  background-position:center;z-index:0}
/* the picture carries the card, the wash only buys back enough contrast for the
   white text sitting on top of it */
/* the base card puts a 190px decorative disc in this pseudo-element, and inset
   alone does not undo a width, a height or a 50% radius, so the wash was
   inheriting a circle. All four are reset here on purpose. */
.bigcard.hascover::after{content:'';position:absolute;inset:0;z-index:0;
  width:auto;height:auto;border-radius:0;
  background:linear-gradient(180deg,rgba(20,11,8,.34) 0%,rgba(20,11,8,.62) 34%,
             rgba(20,11,8,.86) 68%,rgba(20,11,8,.95) 100%)}
/* the little stat boxes are see-through by design, which is fine on a flat card
   and unreadable over a photograph, so they get a floor of their own */
.bigcard.hascover .mini div{background:rgba(16,9,6,.46)}
.bigcard.hascover h2,.bigcard.hascover .when,.bigcard.hascover .cap{
  text-shadow:0 1px 10px rgba(12,6,4,.7)}
.bigcard.hascover>*:not(.herocover){position:relative;z-index:1}
.bigcard .when.soonline{opacity:.8;margin-top:14px}
.endev{display:block;width:100%;margin-top:9px;padding:11px;border:0;border-radius:12px;
  background:rgba(246,239,227,.12);color:#F3E9DA;cursor:pointer;font-family:var(--body);
  font-size:11px;font-weight:800;letter-spacing:.15em;text-transform:uppercase}
.endev:active{background:rgba(246,239,227,.2)}
.evgroup{margin:22px 0 8px}
.stchip{margin-left:auto;flex:none;align-self:flex-start;font-family:var(--body);font-size:8px;
  font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:#FBF3E6;
  padding:4px 8px;border-radius:20px;line-height:1}
.evcard.st-done{opacity:.86}
.evcover{flex:none;width:52px;height:52px;border-radius:10px;background-size:cover;
  background-position:center;box-shadow:0 1px 3px rgba(16,24,40,.18)}
.shotcount{margin-left:auto;font-family:var(--body);font-style:normal;font-size:9px;
  font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}

/* ─── pictures from the night ─── */
.shots{display:flex;gap:8px;overflow-x:auto;padding:2px 2px 4px;margin:12px 0 4px;
  scroll-snap-type:x proximity;-webkit-overflow-scrolling:touch}
.shots::-webkit-scrollbar{display:none}
.shot{flex:none;width:94px;height:94px;border:0;border-radius:13px;padding:0;cursor:pointer;
  background-size:cover;background-position:center;scroll-snap-align:start;
  box-shadow:0 1px 3px rgba(16,24,40,.16)}
.shot:active{transform:scale(.97)}
.coverbtn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;height:120px;
  border:1.5px dashed var(--line);border-radius:14px;background:var(--sunk);cursor:pointer;
  background-size:cover;background-position:center;font-family:var(--body);font-size:11px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.coverbtn svg{width:20px;height:20px;stroke:var(--dim);fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.coverbtn.has{border-style:solid;border-color:transparent}
.coverswap{background:rgba(20,14,10,.62);color:#F6EFE3;padding:7px 13px;border-radius:20px}
.editshots{display:flex;flex-wrap:wrap;gap:8px}
.eshot{position:relative;width:66px;height:66px;border-radius:11px;background-size:cover;
  background-position:center;flex:none;box-shadow:0 1px 3px rgba(16,24,40,.16)}
.eshot button{position:absolute;top:-5px;right:-5px;width:21px;height:21px;border:0;padding:0;
  border-radius:50%;background:var(--stamp);cursor:pointer;display:flex;align-items:center;
  justify-content:center}
.eshot button svg{width:11px;height:11px;stroke:#FBF3E6;fill:none;stroke-width:2.6;
  stroke-linecap:round}
.eshot.add{border:1.5px dashed var(--line);background:var(--sunk);cursor:pointer;display:flex;
  align-items:center;justify-content:center;box-shadow:none}
.eshot.add svg{width:20px;height:20px;stroke:var(--dim);fill:none;stroke-width:2;
  stroke-linecap:round}

/* ─── the full size viewer ─── */
.galview{position:fixed;inset:0;z-index:80;background:#15100C;display:flex;
  flex-direction:column}
.galx{position:absolute;top:14px;right:14px;z-index:2;width:38px;height:38px;border:0;padding:0;
  border-radius:50%;background:rgba(246,239,227,.16);cursor:pointer;display:flex;
  align-items:center;justify-content:center}
.galx svg{width:17px;height:17px;stroke:#F6EFE3;fill:none;stroke-width:2.2;stroke-linecap:round}
.galstrip{flex:1;display:flex;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch}
.galstrip::-webkit-scrollbar{display:none}
.galslide{flex:none;width:100%;height:100%;scroll-snap-align:center;display:flex;
  align-items:center;justify-content:center;padding:16px}
.galslide img{max-width:100%;max-height:100%;border-radius:10px;object-fit:contain}
.galfoot{flex:none;display:flex;flex-direction:column;align-items:center;gap:10px;
  padding:12px 16px calc(20px + env(safe-area-inset-bottom))}
.galfoot span#galcap{font-family:var(--body);font-size:11px;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:rgba(246,239,227,.72)}
.galdots{display:flex;gap:6px}
.galdots i{width:6px;height:6px;border-radius:50%;background:rgba(246,239,227,.3);transition:.2s}
.galdots i.on{background:var(--gold);width:18px;border-radius:3px}

/* ─── profile history ─── */
.evmini.tap{width:100%;border:0;cursor:pointer;text-align:left;font:inherit}
.evmini .stdot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:6px;
  position:relative;top:-1px}
.mrow.rkd{box-shadow:inset 2px 0 0 var(--stamp)}
.minirk{display:inline-block;font-family:var(--body);font-style:normal;font-size:7.5px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:#FBF3E6;
  background:var(--stamp);padding:2px 6px;border-radius:20px;margin-right:6px;
  position:relative;top:-1px}
/* casual says so too, quietly: red stays reserved for ranked */
.minirk.cas{background:transparent;color:var(--pine);
  box-shadow:inset 0 0 0 1px rgba(32,57,42,.4)}
.bandtag{color:var(--dim);letter-spacing:.06em}
.trow .bandtag{color:#7E7365}


/* ═══════════ THE EVENT CARD, AS A SCORECARD STUB ═══════════
   The thing every app of this kind ships is a rounded box with a soft shadow, a
   boxed date badge and a filled button across the bottom. This is the opposite
   on purpose: a print card. Ink hairlines instead of blur, a hard offset shadow
   instead of a soft one, a perforated stub down the left with the date set
   vertically, and a bottom bar that is a rule and a chevron rather than a slab
   of colour. The corners are 4px, not 16px, because paper does not have 16px
   corners.
*/
.evc{position:relative;display:grid;grid-template-columns:36px 1fr;
  grid-template-rows:auto auto;background:var(--card);
  border:1.5px solid rgba(30,27,23,.15);border-radius:4px;overflow:hidden;
  margin-bottom:14px;box-shadow:3px 3px 0 rgba(30,27,23,.07)}
.evc.hascover{grid-template-columns:36px 1fr 86px}
.evc.st-live{border-color:var(--ink);box-shadow:4px 4px 0 rgba(176,48,42,.22)}
.evc.st-done{background:linear-gradient(180deg,var(--card),var(--page))}

/* the stub */
.evc-rail{grid-column:1;grid-row:1;display:flex;align-items:center;justify-content:center;
  background:var(--sunk);border-right:1.5px dashed rgba(30,27,23,.22)}
.evc-rail span{writing-mode:vertical-rl;transform:rotate(180deg);white-space:nowrap;
  font-family:var(--mono);font-size:9px;font-weight:700;letter-spacing:.3em;
  text-transform:uppercase;color:var(--ink2);padding:12px 0}
.evc.st-live .evc-rail{background:var(--stamp);border-right-color:rgba(30,27,23,.3)}
.evc.st-live .evc-rail span{color:#FBF3E6}
.evc.st-soon .evc-rail{background:rgba(166,116,27,.16)}

.evc-shot{grid-column:3;grid-row:1;background-size:cover;background-position:center;
  border-left:1.5px solid rgba(30,27,23,.12)}

.evc-body{grid-column:2;grid-row:1;padding:13px 13px 12px;min-width:0}
.evc-head{display:flex;align-items:flex-start;gap:8px;margin-bottom:11px}
.evc-name{flex:1;min-width:0}
/* sentence case on a serif, not shouted caps: the name is a name, not a label */
.evc-name b{display:block;font-family:var(--display);font-size:21px;font-weight:700;
  letter-spacing:-.012em;line-height:1.04;color:var(--ink);text-transform:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evc-name i{display:block;font-family:var(--body);font-style:normal;font-size:8.5px;
  font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);
  margin-top:5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.evc-st{flex:none;display:flex;align-items:center;gap:5px;padding-top:4px;
  font-family:var(--body);font-size:8px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ink2)}
.evc-st i{width:6px;height:6px;border-radius:50%;flex:none}
.evc.st-live .evc-st i{animation:pulse 1.7s ease-in-out infinite}
.evc-edit{flex:none;width:24px;height:24px;border:0;padding:0;background:transparent;
  cursor:pointer;display:flex;align-items:center;justify-content:center;border-radius:3px;
  color:var(--dim)}
.evc-edit svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.evc-edit:active{background:var(--sunk)}

/* the figures, ruled like a scorecard */
.evc-figs{display:flex;border-top:1px solid rgba(30,27,23,.11);
  border-bottom:1px solid rgba(30,27,23,.11);margin-bottom:11px}
.evc-figs span{flex:1;min-width:0;padding:8px 3px;text-align:center;
  border-left:1px solid rgba(30,27,23,.08)}
.evc-figs span:first-child{border-left:0;text-align:left;padding-left:0}
.evc-figs b{display:block;font-family:var(--display);font-size:17px;font-weight:700;
  color:var(--ink);line-height:1;white-space:nowrap}
.evc-figs i{display:block;font-family:var(--body);font-style:normal;font-size:7px;
  font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-top:4px}

/* who finished where */
.evc-pod{display:flex;gap:6px;margin-bottom:10px}
.pod{flex:1;min-width:0;display:flex;align-items:center;gap:5px;padding:5px 7px;
  border-radius:3px;background:var(--sunk)}
.pod.r1{flex:1.7;background:rgba(201,150,47,.16)}
.pod em{flex:none;font-family:var(--display);font-style:normal;font-size:12px;font-weight:700;
  color:var(--dim);line-height:1}
.pod.r1 em{color:#8A6413;font-size:14px}
.pod .mark{flex:none}
.pod u{flex:1;min-width:0;text-decoration:none;font-family:var(--body);font-size:11px;
  font-weight:700;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pod s{flex:none;text-decoration:none;font-family:var(--mono);font-size:9px;color:var(--dim)}
.pod:not(.r1) s{display:none}
.pod:not(.r1) .mark{display:none}

/* the honours */
.evc-aw{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.evc-aw li{position:relative;display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;
  padding-left:11px;line-height:1.4}
.evc-aw li::before{content:'';position:absolute;left:0;top:5px;width:4px;height:4px;
  background:var(--gold);transform:rotate(45deg)}
.evc-aw i{flex:none;font-family:var(--body);font-style:normal;font-size:7px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:var(--dim)}
.evc-aw b{font-family:var(--body);font-weight:700;font-size:11.5px;color:var(--ink)}
.evc-aw span{font-family:var(--body);font-size:10.5px;color:var(--dim)}
.evc-shots{margin:9px 0 0;font-family:var(--body);font-size:8.5px;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}

/* a rule and a chevron, not a slab */
.evc-go{grid-column:1/-1;grid-row:2;display:flex;align-items:center;
  justify-content:space-between;width:100%;padding:12px 14px;background:transparent;border:0;
  border-top:1.5px dashed rgba(30,27,23,.2);cursor:pointer;font-family:var(--body);
  font-size:10px;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--ink2)}
.evc.st-live .evc-go,.evc.sel .evc-go{color:var(--stamp)}
.evc-go svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round}
.evc-go:active{background:rgba(30,27,23,.05)}

/* ─── a mode per court ─── */
.ctmode{display:inline-flex;gap:2px;padding:2px;border-radius:8px;background:var(--sunk);
  border:1px solid var(--line)}
.ctmode button{border:0;background:transparent;border-radius:6px;padding:5px 9px;cursor:pointer;
  font-family:var(--body);font-size:9px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim);line-height:1}
.ctmode button[aria-pressed="true"]{background:var(--card);color:var(--ink);
  box-shadow:0 1px 2px rgba(16,24,40,.16)}
.ctmode.on{background:rgba(176,48,42,.12);border-color:rgba(176,48,42,.3)}
.ctmode.on button[aria-pressed="true"]{background:var(--stamp);color:#FBF3E6;box-shadow:none}
.modenote{margin:0 3px 15px}
.modenote b{color:var(--ink);font-weight:800;letter-spacing:.03em}

/* ─── deuce ─── */
.deuce{display:flex;align-items:baseline;gap:9px;margin:0 0 13px;padding:9px 12px;
  border-radius:10px;background:rgba(176,48,42,.10);border:1px solid rgba(176,48,42,.24)}
.deuce b{flex:none;font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.18em;
  text-transform:uppercase;color:var(--stamp)}
.deuce span{font-family:var(--body);font-size:11px;color:var(--ink2)}


/* ─── the kitty ─── */
.feetop{display:flex;gap:9px;flex-wrap:wrap}
.feefld{flex:1;min-width:120px;display:flex;flex-direction:column;gap:5px}
.feefld.wide{flex:1.6;min-width:150px}
.feefld span{font-family:var(--body);font-size:8px;font-weight:800;letter-spacing:.15em;
  text-transform:uppercase;color:var(--dim)}
.feefld .fld{margin:0}
.feepay{display:flex;gap:11px;align-items:stretch}
.feeqr{flex:none;width:92px;height:92px;border:1.5px dashed var(--line);border-radius:12px;
  background:var(--sunk);background-size:cover;background-position:center;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  font-family:var(--body);font-size:8.5px;font-weight:800;letter-spacing:.13em;
  text-transform:uppercase;color:var(--dim)}
.feeqr.has{border-style:solid;border-color:rgba(30,27,23,.14)}
.feeqr svg{width:24px;height:24px;stroke:var(--dim);fill:none;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.feepayd{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px;justify-content:center}
.feepayd .fld{margin:0}
.feepayd .linkbtn{text-align:left}
.feebar{height:7px;border-radius:4px;background:var(--sunk);overflow:hidden;margin:18px 0 9px}
.feebar i{display:block;height:100%;border-radius:4px;transition:width .3s;
  background:linear-gradient(90deg,var(--gold),#5B8F28)}
.feesum{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.feesum b{font-family:var(--display);font-size:24px;font-weight:700;color:var(--ink);line-height:1}
.feesum span{font-family:var(--body);font-size:11px;font-weight:600;color:var(--dim)}
.note.warn{color:var(--stamp)}

.duelist{display:flex;flex-direction:column;gap:6px}
.duerow{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:11px;
  background:var(--sunk);border:1px solid transparent}
.duerow.paid{background:rgba(91,143,40,.10);border-color:rgba(91,143,40,.26)}
.duen{flex:1;min-width:0;display:flex;flex-direction:column;font-family:var(--body);
  font-size:13px;font-weight:700;color:var(--ink);line-height:1.15;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.duen em{font-family:var(--body);font-style:normal;font-size:8.5px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim);margin-top:3px}
.dueamt{flex:none;border:0;background:transparent;cursor:pointer;padding:4px 2px;
  font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);
  text-decoration:underline;text-decoration-style:dotted;text-underline-offset:3px}
.duerow.paid .dueamt{color:#41681A}
.duetick{flex:none;width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);
  background:var(--card);cursor:pointer;display:flex;align-items:center;justify-content:center}
.duetick svg{width:15px;height:15px;stroke:var(--line);fill:none;stroke-width:2.8;
  stroke-linecap:round;stroke-linejoin:round}
.duetick.on{background:#5B8F28;border-color:#5B8F28}
.duetick.on svg{stroke:#fff}
.feeedit{margin-top:14px;padding:13px;border-radius:13px;background:var(--violet-soft);
  border:1px solid rgba(176,48,42,.2)}
.feeedit b{font-family:var(--body);font-size:13px;font-weight:800;color:var(--ink)}
.feeedit p{margin:5px 0 10px;font-size:11.5px;line-height:1.5;color:var(--ink2)}
.feeedit .fld{margin:0}

/* the money line on an event card */
.evc-fee{position:relative;display:block;width:100%;text-align:left;margin-top:11px;
  padding:9px 11px 8px;border:1px solid rgba(30,27,23,.12);border-radius:4px;
  background:var(--sunk);cursor:pointer;overflow:hidden}
.evc-fee.clear{background:rgba(91,143,40,.12);border-color:rgba(91,143,40,.26)}
.evc-feebar{position:absolute;left:0;right:0;bottom:0;height:3px;background:rgba(30,27,23,.08)}
.evc-feebar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),#5B8F28)}
.evc-fee b{font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink);
  margin-right:6px}
.evc-fee span{font-family:var(--body);font-size:10px;font-weight:700;letter-spacing:.08em;
  text-transform:uppercase;color:var(--dim)}
.endev.kitty{background:rgba(201,150,47,.2);color:#F6E7C6}


/* ═══════════ CLUBHOUSE PASS ═══════════
   The stamp-rally look was warm but it read craft-fair, not club. This layer
   sits over it and trades every loud device for a quiet one: the mascot for a
   crest, boxed stat chips for one ruled line of figures, bouncing 3D buttons
   for flat ink on cream, purple glow shadows for none at all, and shouting
   letterspaced caps for a serif speaking at normal volume. Red now means one
   thing only: ranked. Everything else that used to be red is pine green.
   The test applied throughout: would this look at home in a Wimbledon
   programme. If not, it went.
*/
:root{
  --page:#F3EEE2; --card:#FBF8F0; --sunk:#EBE3D2;
  --line:#DCD2BC; --line2:#E7DECC;
  --pine:#20392A; --pine-d:#15271C; --pine-soft:#E4E9E0;
  --violet:#20392A; --violet-d:#15271C; --violet-soft:#E4E9E0;
  --gold:#A8842C; --gold-lit:#C9A64B;
  --board:#191712;
  --sh-s:0 1px 2px rgba(23,21,15,.05);
  --sh:0 1px 2px rgba(23,21,15,.05),0 10px 26px -18px rgba(23,21,15,.3);
  --sh-lift:0 2px 6px rgba(23,21,15,.07),0 16px 36px -20px rgba(23,21,15,.32);
}
.appbar{background:rgba(243,238,226,.92);border-bottom:1px solid var(--line)}
.appbar::after{width:72px;height:2px;background:var(--gold)}
.logo h1 em{color:var(--gold)}

/* ─── the hero, as a programme cover ─── */
.hero,.bigcard{background:linear-gradient(168deg,#24402E 0%,#1B3023 55%,#152619 100%);
  border-radius:14px;box-shadow:var(--sh-lift);padding:24px 22px 20px}
.hero::after,.bigcard::after{display:none}
.bigcard.hascover::after{display:block}
.heropk{display:none}
/* a single gold hairline frame instead of decorative circles */
.hero::before,.bigcard::before{content:'';position:absolute;inset:7px;border-radius:9px;
  border:1px solid rgba(201,166,75,.28);pointer-events:none;z-index:1;
  width:auto;height:auto;background:none}
.bigcard.hascover::before{border-color:rgba(244,239,230,.2)}
.hero .cap,.bigcard .cap{font-family:var(--body);font-weight:700;font-size:9px;
  letter-spacing:.3em;color:var(--gold-lit)}
.hero h2,.bigcard h2{text-transform:none;letter-spacing:-.015em;max-width:none;
  font-size:clamp(30px,8.4vw,40px);line-height:1.02;color:#F7F3E8;margin-top:10px}
.bigcard .when{font-family:var(--body);font-size:12px;letter-spacing:.01em;
  text-transform:none;color:rgba(247,243,232,.62);margin-top:8px}

/* figures as one ruled line, not four boxes */
.bigcard .mini{gap:0;margin-top:20px;border-top:1px solid rgba(247,243,232,.16)}
.bigcard .mini div{background:transparent;border-radius:0;text-align:left;
  padding:13px 12px 2px 12px;border-left:1px solid rgba(247,243,232,.12)}
.bigcard .mini div:first-child{border-left:0;padding-left:0}
.bigcard .mini b{font-family:var(--display);font-weight:700;font-size:21px;color:#F7F3E8}
.bigcard .mini span{font-size:7.5px;letter-spacing:.18em;color:rgba(247,243,232,.48)}
.hero .stats{gap:0;margin-top:20px;border-top:1px solid rgba(247,243,232,.16);flex-wrap:nowrap}
.hero .stats div{flex:1;padding:13px 12px 0 12px;border-left:1px solid rgba(247,243,232,.12)}
.hero .stats div:first-child{border-left:0;padding-left:0;display:block}
.hero .stats div:first-child b{display:block;min-width:0;height:auto;padding:0;
  border:0;border-radius:0;transform:none;background:transparent}
.hero .stats b,.bigcard .mini b{font-size:21px}
.hero .stats div:first-child b{color:var(--gold-lit)}
.hero .stats span{font-family:var(--body);font-size:7.5px;letter-spacing:.18em;
  color:rgba(247,243,232,.48)}
.tierline{color:rgba(247,243,232,.75);font-weight:700;letter-spacing:.14em}

/* one cream action, everything else a quiet row */
.hero .go,.bigcard .go{background:#F5F0E2;color:var(--pine);box-shadow:none;
  border-radius:10px;font-size:12.5px;letter-spacing:.14em;margin-top:20px;padding:15px}
.bigcard .go:active,.hero .go:active{transform:none;filter:brightness(.95)}
.heroacts{display:flex;gap:8px;margin-top:8px}
.endev{flex:1;margin-top:0;background:transparent;border:1px solid rgba(247,243,232,.22);
  border-radius:10px;color:rgba(247,243,232,.8);font-size:9.5px;letter-spacing:.14em;
  padding:11px 8px}
.endev:active{background:rgba(247,243,232,.08)}
.endev.kitty{background:transparent;border-color:rgba(201,166,75,.4);color:#D9BE79}

/* ─── buttons stop bouncing ─── */
.btn-primary{background:var(--pine);color:#F5F0E2;box-shadow:0 1px 2px rgba(21,39,28,.35);
  border-radius:11px}
.btn-solid{background:var(--pine-soft);color:var(--pine)}
.modesw.on button[aria-pressed="true"]{box-shadow:none}
.sheetmode.on button[aria-pressed="true"]{box-shadow:none}
.bigcard .go svg{stroke-width:2.2}
.tabs button[aria-current="true"]{color:var(--pine)}
.logbtn,.sharebtn{background:var(--card);border:1px solid var(--line);box-shadow:none;
  border-radius:11px;color:var(--ink2)}
.tile{background:var(--card);border:1px solid var(--line);box-shadow:none;border-radius:11px}
.tile svg,.tile:nth-child(2) svg,.tile:nth-child(3) svg{stroke:var(--pine)}
.tile span{color:var(--ink2);letter-spacing:.17em;font-size:8.5px}

/* ─── event card: programme entry, not sticker ─── */
.evc{border:1px solid rgba(23,21,15,.16);border-radius:7px;box-shadow:var(--sh-s)}
.evc.st-live{border-color:rgba(23,21,15,.32);box-shadow:var(--sh)}
.evc-rail{background:var(--sunk);border-right:1px solid rgba(23,21,15,.1)}
.evc-rail span{color:#877C63;letter-spacing:.26em}
.evc.st-live .evc-rail{background:var(--pine);border-right-color:transparent}
.evc.st-live .evc-rail span{color:#E9E2CF}
.evc.st-soon .evc-rail{background:rgba(168,132,44,.13)}
.evc-name b{white-space:normal;font-size:20px}
.evc-figs{border-color:rgba(23,21,15,.1)}
.evc-figs span{border-left-color:rgba(23,21,15,.07)}
.pod.r1{background:rgba(168,132,44,.13)}
.pod.r1 em{color:var(--gold)}
.evc-aw li::before{background:var(--gold)}
.evc-go{border-top:1px solid rgba(23,21,15,.1);letter-spacing:.16em}
.evc.st-live .evc-go,.evc.sel .evc-go{color:var(--pine)}
.evc-fee{border-radius:7px}
.evc-fee b{font-size:15px}

/* ─── the courts screen keeps its greens, loses its noise ─── */
.readout.stake u{color:#3F6B2A}
.evgo.on{background:var(--pine-soft);color:var(--pine)}

/* the money bar earns gold, not a traffic light */
.feebar i,.evc-feebar i{background:linear-gradient(90deg,#A8842C,#3F6B2A)}

/* scoreboard: keep the dark board, straighten the stamp */
.tablecard{background:var(--board);border-color:#2E2A21}
.trow .c-rank{color:var(--gold-lit)}
[hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ─── the player card ─── */
.phead{gap:15px;margin-bottom:18px}
.phead .who b{font-size:29px;letter-spacing:-.015em;text-transform:none;line-height:1.02}
.phead .who .standing{display:block;font-family:var(--body);font-weight:800;font-size:9px;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:6px 0 3px}
.phead .who .standing .tdot{display:inline-block;width:7px;height:7px;border-radius:50%;
  margin-right:5px;box-shadow:0 0 0 1.5px rgba(255,255,255,.5)}
.phead .who span{font-family:var(--body);font-size:11px;letter-spacing:.02em;color:var(--dim)}
.photobtn .cam{background:var(--pine)}
.ladder{background:linear-gradient(165deg,#24402E,#182B1F);border:0;border-radius:13px;
  position:relative;overflow:hidden}
.ladder::before{content:'';position:absolute;inset:6px;border-radius:8px;
  border:1px solid rgba(201,166,75,.26);pointer-events:none}
.lname{color:#F5F0E2}
.lname em{color:rgba(245,240,226,.55)}
.lrp{color:#F5F0E2}
.lrp em{color:rgba(245,240,226,.5)}
.lbar{background:rgba(0,0,0,.3)}
.lgrid b{color:#F5F0E2}
.lgrid span{color:rgba(245,240,226,.48)}
.lnote{color:rgba(245,240,226,.68)}
/* figures as a ruled line here too, not six biscuit tiles */
.pgrid{grid-template-columns:repeat(3,1fr);gap:0;background:transparent;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2px 0 10px}
.pgrid div{background:transparent;border-radius:0;text-align:left;padding:11px 12px 0;
  border-left:1px solid var(--line2)}
.pgrid div:nth-child(3n+1){border-left:0;padding-left:0}
.pgrid div:nth-child(n+4){margin-top:6px}
.pgrid b{font-family:var(--display);font-weight:700;font-size:19px;color:var(--ink)}
.pgrid span{font-family:var(--body);font-weight:800;font-size:7px;letter-spacing:.16em}

/* ─── on deck ─── */
#ondeck{margin-top:14px;background:var(--card);border:1px solid var(--line);
  border-radius:11px;padding:14px 15px 13px;box-shadow:var(--sh-s)}
.deckhead{display:flex;align-items:baseline;gap:8px;font-family:var(--body);font-weight:800;
  font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--pine);
  margin-bottom:9px}
.deckhead em{font-style:normal;font-weight:700;font-size:8px;letter-spacing:.14em;
  color:var(--dim)}
.deckvs{font-family:var(--display);font-size:17px;font-weight:700;color:var(--ink);
  line-height:1.35}
.deckvs em{font-style:italic;font-family:var(--display);font-weight:400;font-size:14px;
  color:var(--gold);margin:0 7px}
.decknote{display:block;margin-top:7px;font-family:var(--body);font-size:10px;
  letter-spacing:.04em;color:var(--dim)}

/* ─── the banner crop window ─── */
.cropstage.wide{width:min(92vw,86vh);aspect-ratio:16/9;border-radius:14px}

/* ═══════════ EVERY OTHER ROOM ═══════════
   The home screen got the programme-cover treatment; these are the same
   decisions applied to the rest of the app. One idea per screen: History is a
   stack of match slips, Rankings is the dark board with faces, Players is a
   club register. Numbers in the serif, labels tiny and quiet, and nothing in
   a coloured pill unless it means ranked.
*/

/* ─── the top bar knows you ─── */
.mebtn{border:0;background:transparent;padding:0;margin-left:auto;margin-right:10px;
  cursor:pointer;line-height:0}
.mebtn .mark{width:30px;height:30px;font-size:11px;
  box-shadow:0 0 0 2px var(--page),0 0 0 3.5px var(--gold)}
.appbar .evbtn{margin-left:0}
.mebtn[hidden]+#evbtn{margin-left:auto}

/* ─── home tiles: words, not clip-art ─── */
.tile{flex-direction:row;justify-content:center;gap:8px;padding:15px 8px}
.tile svg{display:none}
.tile span{font-size:9px;letter-spacing:.2em;color:var(--ink)}
.tile .mark{width:22px;height:22px;font-size:9px;flex:none}
.tile.metile{border-color:rgba(168,132,44,.5)}

/* ─── history: match slips ─── */
.hstats{display:flex;gap:0;background:transparent;border-radius:0;box-shadow:none;
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:2px 0 12px;margin-bottom:22px}
.hstats div{flex:1;background:transparent;border-radius:0;padding:11px 12px 0;text-align:left;
  border-left:1px solid var(--line2)}
.hstats div:first-child{border-left:0;padding-left:0}
.hstats b{font-family:var(--display);font-weight:700;font-size:20px;color:var(--ink)}
.hstats span{font-family:var(--body);font-weight:800;font-size:7px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim)}
.mcard{background:var(--card);border:1px solid rgba(23,21,15,.14);border-radius:7px;
  box-shadow:var(--sh-s);padding:0 0 4px}
.mcard.rkd{box-shadow:inset 3px 0 0 var(--stamp),var(--sh-s)}
.mtop{padding:11px 13px 8px;border-bottom:1px solid var(--line2)}
.mtop .mno{font-family:var(--display);font-weight:700;font-size:13px;color:var(--gold);
  background:transparent;width:auto;height:auto}
.mtop span{font-family:var(--body);font-size:9px;letter-spacing:.12em;color:var(--dim)}
/* the verdict is a whispered aside, not a badge */
.mtag{background:transparent!important;color:var(--dim)!important;padding:0;
  font-family:var(--display);font-style:italic;font-weight:400;font-size:11.5px;
  letter-spacing:.02em;text-transform:none}
.mtag.rkd{background:var(--stamp)!important;color:#FBF3E6!important;
  font-family:var(--body);font-style:normal;font-weight:800;font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;padding:4px 8px;border-radius:3px}
.mtag.cas{color:var(--pine)!important;
  font-family:var(--body);font-style:normal;font-weight:800;font-size:8px;
  letter-spacing:.16em;text-transform:uppercase;padding:3px 7px;border-radius:3px;
  box-shadow:inset 0 0 0 1px rgba(32,57,42,.35)}
.mline .tm{font-size:13.5px}
.mline .tm em{font-size:9px;letter-spacing:.08em}
.mline .pt{font-family:var(--display);font-weight:700;font-size:19px}
.mline.win .pt{color:var(--pine)}
.mline.win::before{background:var(--gold)}
.mline.win .tm{color:var(--ink)}

/* ─── rankings: the board gets faces ─── */
.trow{padding-top:13px;padding-bottom:13px}
.trow .mark.s34{width:40px;height:40px;font-size:13px}
.trow.top1 .mark.s34{box-shadow:0 0 0 2px var(--board),0 0 0 3.5px var(--gold-lit)}
.trow .c-name{font-size:16px}
.c-rank.medal{background:transparent;color:var(--gold-lit)}
.trow.top1 .c-num.pts{font-family:var(--display);color:var(--gold-lit);font-size:19px}
.seg.mini,.seg{border-radius:11px}

/* ─── players: a club register ─── */
.rostercard{background:var(--card);border:1px solid rgba(23,21,15,.14);border-radius:9px;
  box-shadow:var(--sh-s);padding:2px 13px}
.rosterrow{border-top:1px solid var(--line2);padding:12px 0;gap:11px}
.rosterrow:first-child{border-top:0}
.rosterrow .mark{width:38px;height:38px;font-size:13px}
.rosterrow .d b{font-size:14.5px}
.rosterrow .d span{font-family:var(--body);font-size:10px;letter-spacing:.02em}
.youchip{display:inline-block;font-style:normal;font-family:var(--body);font-weight:800;
  font-size:7.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border:1px solid rgba(168,132,44,.45);border-radius:3px;padding:1.5px 5px;
  margin-left:7px;position:relative;top:-1.5px}
.stepin{border:0;border-bottom:1.5px solid var(--line);border-radius:0;background:transparent;
  font-family:var(--display);font-weight:700;font-size:15px;width:52px;text-align:center}
.tog{border-radius:5px;font-size:8.5px;letter-spacing:.14em}

/* ─── claiming a profile ─── */
.melink{display:block;width:100%;text-align:left;margin:2px 0 6px;padding:12px 14px;
  border:1px dashed rgba(168,132,44,.55);border-radius:9px;background:transparent;
  cursor:pointer;font-family:var(--body);font-size:11.5px;line-height:1.5;color:var(--ink2)}
.melink b{color:var(--ink)}
.melink.on{border-style:solid;background:rgba(168,132,44,.08)}

/* ─── the end of the typewriter ───
   Space Mono was doing the labels, and Space Mono is what makes a page read
   like a code editor. Every label that leaned on it falls back to Karla, and
   the home tiles stop shouting entirely: serif, sentence case, like the
   contents page of a programme. The one mono survivor is the countdown timer,
   where clock digits genuinely want a fixed width.
*/
:root{--mono:"Karla",system-ui,-apple-system,sans-serif}
.timer .t{font-family:"Space Mono",ui-monospace,monospace}
.tile{padding:16px 8px}
.tile span{font-family:var(--display);font-size:16.5px;font-weight:700;
  letter-spacing:-.012em;text-transform:none;color:var(--ink)}
.tile .mark{width:24px;height:24px;font-size:10px}
.logo h1 em{font-family:var(--body);font-weight:800;letter-spacing:.3em;font-size:7.5px}
.label{font-family:var(--body);font-weight:800;letter-spacing:.18em;font-size:9px}
.tabs button{font-family:var(--body);font-weight:800;letter-spacing:.14em}

/* ─── the clubhouse door ───
   The first thing anyone sees, member or not, so it carries the brand alone:
   the wordmark on deep pine, one field, one button. The artwork keeps its own
   cream tile, sitting on the green like a card on a table. */
#gate{position:fixed;inset:0;z-index:400;display:flex;align-items:center;
  justify-content:center;padding:24px;
  background:
    radial-gradient(120% 90% at 50% 0%,rgba(201,166,75,.10),transparent 55%),
    linear-gradient(170deg,#24402E 0%,#1B3023 55%,#13241A 100%);
  opacity:1;transition:opacity .4s}
#gate.open{opacity:0;pointer-events:none}
.ginner{width:min(92vw,380px);display:flex;flex-direction:column;align-items:center}
.gmark{width:min(66vw,252px);height:auto;border-radius:24px;
  box-shadow:0 8px 24px rgba(0,0,0,.35),0 30px 70px -30px rgba(0,0,0,.5)}
.gcard{width:100%;margin-top:26px;text-align:center}
.glead{margin:0 0 14px;font-family:var(--display);font-size:19px;font-weight:700;
  color:#F6F0E2;line-height:1.35}
.gnote{margin:12px 0 0;font-family:var(--body);font-size:11.5px;line-height:1.6;
  color:rgba(246,240,226,.55)}
.gnote b{color:rgba(246,240,226,.85)}
.gfld{width:100%;padding:14px 16px;border-radius:12px;border:1px solid rgba(246,240,226,.25);
  background:rgba(0,0,0,.22);color:#F6F0E2;font-family:var(--body);font-size:15px;
  text-align:center;outline:none}
.gfld:focus{border-color:var(--gold-lit)}
.gfld::placeholder{color:rgba(246,240,226,.35)}
.gbtn{width:100%;margin-top:10px;padding:15px;border:0;border-radius:12px;cursor:pointer;
  background:#F5F0E2;color:#20392A;font-family:var(--body);font-weight:800;
  font-size:12px;letter-spacing:.15em;text-transform:uppercase}
.gbtn:active{filter:brightness(.95)}
.gbtn:disabled{opacity:.6}
.glink{margin-top:16px;border:0;background:none;cursor:pointer;font-family:var(--body);
  font-size:11.5px;font-weight:700;color:var(--gold-lit);text-decoration:underline;
  text-underline-offset:3px}

/* ─── the profile tab ─── */
.tabs button[data-view="me"] .mark{width:23px;height:23px;font-size:9px;margin-bottom:3px}
.tabs button.has-face .mark{box-shadow:0 0 0 1.5px var(--page),0 0 0 3px var(--gold)}

/* ─── the account card ─── */
#acct{margin-bottom:30px}
.acctcard{background:var(--card);border:1px solid rgba(23,21,15,.14);border-radius:11px;
  padding:13px 14px;box-shadow:var(--sh-s)}
.acctrow{display:flex;align-items:center;gap:10px}
.acctwho{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.acctwho b{font-family:var(--body);font-size:13px;font-weight:700;color:var(--ink);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acctwho span{font-family:var(--body);font-size:8.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold)}
.acctinv{display:flex;gap:8px;margin-top:12px}
.acctinv .logbtn{margin:0;padding:11px 8px;font-size:11px}
.acctcard .note{margin:10px 0 0}
#acctStatus{color:var(--pine);font-weight:700}

/* ─── what each role sees ───
   The owner shapes the club, organisers run the nights, players watch a live
   club. The server enforces all of it; these rules just stop the interface
   offering buttons that would bounce. */
body:not(.role-owner) .ownerzone{display:none}
body.role-player .runzone{display:none}
body.role-player .courtstep,
body.role-player #editbar,
body.role-player #draw,
body.role-player #logPast,
body.role-player .card-foot,
body.role-player .ctmode,
body.role-player #homeNew,
body.role-player .endev:not(.kitty),
body.role-player .evc-edit,
body.role-player .hint-tap,
body.role-player #rsScores,
body.role-player #rsRatings,
body.role-player .runonly,
body.role-player .stepin,
body.role-player .rosterrow .tog,
body.role-player .mtop .ed{display:none!important}
body.role-player .modenote{display:none}

/* ─── the invite sheet ─── */
#invsheet{position:fixed;inset:0;z-index:300;display:flex;align-items:center;
  justify-content:center;padding:22px;background:rgba(19,26,20,.66)}
.invcard{width:min(92vw,360px);background:var(--card);border-radius:18px;
  padding:22px 20px;text-align:center;box-shadow:var(--sh-lift)}
.invcard h3{margin:0 0 4px;font-family:var(--display);font-size:22px;font-weight:700;
  color:var(--ink)}
.invcard .sub{margin:0 0 16px;font-family:var(--body);font-size:11px;color:var(--dim)}
.invqr{width:200px;height:200px;border-radius:12px;background:#fff;padding:10px;
  box-shadow:0 1px 3px rgba(23,21,15,.18)}
.invlink{margin:14px 0 4px;font-family:var(--body);font-size:10.5px;color:var(--ink2);
  word-break:break-all;line-height:1.5}
.invrow{display:flex;gap:8px;margin-top:14px}
.invrow .btn{flex:1;font-size:11px;padding:13px 8px}
.invclose{margin-top:14px;border:0;background:none;cursor:pointer;font-family:var(--body);
  font-size:11.5px;font-weight:700;color:var(--dim);text-decoration:underline;
  text-underline-offset:3px}

/* ─── members list (owner) ─── */
.memrow{display:flex;align-items:center;gap:9px;padding:10px 0;border-top:1px solid var(--line2)}
.memrow b{flex:1;min-width:0;font-family:var(--body);font-size:12px;font-weight:700;
  color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.memrow em{font-style:normal;font-family:var(--body);font-size:8px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.memrow .tog{flex:none}

/* ─── queue intent on the bench ───
   Tap a waiting chip to walk a player through either, ranked, casual. The
   ranked queue wears the ranked red, casual wears pine, either stays plain. */
.chip.q-ranked{box-shadow:inset 0 0 0 1.5px rgba(176,48,42,.55)}
.chip.q-ranked u{background:var(--stamp);color:#FBF3E6}
.chip.q-casual{box-shadow:inset 0 0 0 1.5px rgba(32,57,42,.45)}
.chip.q-casual u{background:var(--pine);color:#F5F0E2}
/* A player may tap exactly one chip: their own, which wears a gold thread. */
body.role-player .chip:not(.mine){pointer-events:none}
.chip.mine{outline:2px solid var(--gold);outline-offset:1.5px}

/* The read-only court-mode badge players see where organisers get the switch. */
.ctbadge{font-family:var(--body);font-size:8.5px;font-weight:800;letter-spacing:.16em;
  text-transform:uppercase;padding:4px 9px 3px;border-radius:3px;
  border:1px solid rgba(32,57,42,.35);color:var(--pine)}
.ctbadge.rk{border-color:var(--stamp);background:var(--stamp);color:#FBF3E6}

/* ─── the standings poster screen ─── */
.sharepad{max-width:560px}
.sharebar{align-items:flex-start;margin-bottom:18px}
.shtitle{display:flex;flex-direction:column;gap:4px;
  font-family:var(--display);font-size:21px;font-weight:700;color:var(--ink)}
.shtitle em{font-style:normal;font-family:var(--body);font-size:11px;
  font-weight:500;color:var(--dim);letter-spacing:.02em}
/* the poster sits like a print on the desk: hairline ink, hard offset shadow */
.shotwrap{border:1.5px solid var(--ink);border-radius:5px;
  box-shadow:7px 7px 0 rgba(23,21,15,.12);background:var(--card)}
.shotload{font-family:var(--body);font-size:12px;font-weight:600;
  letter-spacing:.05em;color:var(--dim)}

/* ─── the owner's periscope pill ─── */
#viewpill{position:fixed;left:50%;transform:translateX(-50%);bottom:78px;z-index:250;
  display:flex;flex-direction:column;align-items:center;gap:2px;
  border:0;border-radius:100px;padding:9px 18px;cursor:pointer;
  background:var(--ink);color:#F5F0E2;font-family:var(--body);font-weight:800;
  font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;
  box-shadow:0 4px 14px rgba(23,21,15,.35)}
#viewpill b{font-weight:700;font-size:8px;letter-spacing:.16em;color:var(--gold-lit)}

.cropstage.square{border-radius:16px}

/* ═══════════ THE STANDINGS SHEET, FROM CHALKBOARD TO PRINT ═══════════
   The hero board above stays pine and gold; the list below it now reads like
   the poster it exports to: ink on paper, hairline rules, Playfair figures,
   the leader carrying the only wash of gold. */
.tablecard{background:var(--card);border:1.5px solid rgba(23,21,15,.6);
  border-radius:5px;box-shadow:6px 6px 0 rgba(23,21,15,.10);overflow:hidden}
.thead{background:transparent;border-bottom:1.5px solid rgba(23,21,15,.55);
  color:var(--dim)}
.trow{border-top:1px solid rgba(23,21,15,.12)}
.trow .c-name{color:var(--ink)}
.trow .c-name small{color:var(--dim)}
.trow .c-rank{font-family:var(--display);font-weight:700;font-size:17px;color:var(--dim)}
.trow .c-rank.medal{background:transparent;color:var(--gold)}
.trow .c-num{color:#4E4839}
.trow .c-num.sub{color:var(--dim)}
.c-num.pts{color:var(--ink);font-size:19px}
.trow.top1{background:rgba(168,132,44,.10);box-shadow:inset 4px 0 0 var(--gold)}
.trow.top1 .c-name,.trow.top1 .c-num.pts,.trow.top1 .c-rank{color:var(--gold)}
.trow.top1 .c-name{color:var(--ink)}
.trow.top1 .mark.s34{box-shadow:0 0 0 2px var(--card),0 0 0 3.5px var(--gold)}
.trow .bandtag{color:var(--dim)}
.trow.tap:active{background:rgba(23,21,15,.05)}

/* ═══════════ THE MATCH RECORD, AS A STACK OF SCORECARD STUBS ═══════════ */
.mcard{background:var(--card);border:1.5px solid rgba(23,21,15,.5);
  border-radius:5px;box-shadow:4px 4px 0 rgba(23,21,15,.08)}
.mcard.rkd{box-shadow:inset 3px 0 0 var(--stamp),4px 4px 0 rgba(23,21,15,.08)}
.mtop{padding:10px 14px 9px;border-bottom:1.5px solid rgba(23,21,15,.4)}
.mtop .mno{font-size:15px}
.mline .tm{font-size:14px}
.mline .pt{font-size:22px}
.mline.win .pt{color:var(--pine)}

/* ═══════════ NEXT ON COURT ═══════════
   The card a sitting player reads from across the room. When it is YOUR game,
   it says so in your own line, and the card wears a gold thread. */
#ondeck.yours{border:1.5px solid var(--gold);
  box-shadow:4px 4px 0 rgba(168,132,44,.18)}
.deckyou{margin:2px 0 10px;padding:10px 12px;border-radius:4px;
  background:rgba(168,132,44,.12);box-shadow:inset 3px 0 0 var(--gold)}
.deckyou b{display:block;font-family:var(--display);font-size:16px;
  font-weight:700;color:var(--ink)}
.deckyou em{display:block;margin-top:2px;font-style:normal;
  font-family:var(--body);font-size:11px;font-weight:600;color:#6B6252}
.dside{display:inline-flex;align-items:center;gap:5px}
.dside .mark{flex:none}
.dtag{display:inline-block;font-style:normal;font-family:var(--body);
  font-size:7.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
  color:#FBF3E6;background:var(--stamp);padding:2px 6px;border-radius:20px;
  margin-right:5px;position:relative;top:-1px}

/* ═══════════ TWO QUEUES, NOT ONE CROWD ═══════════ */
#bench.grouped{display:block}
#bench.grouped .qgroup{margin-bottom:12px}
#bench.grouped .qgroup:last-child{margin-bottom:0}
#bench.grouped .chips{display:flex;flex-wrap:wrap;gap:7px}
.qlab{display:block;margin:0 0 6px;font-family:var(--body);font-size:8px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.qlab.rk{color:var(--stamp)}
.qlab.cs{color:var(--pine)}

/* ═══════════ THE PROFILE OPENS ON A BOARD ═══════════
   A profile deserves an entrance: the same pine board the top player gets,
   with the face large, the name in Playfair ivory, and the tier worn as a
   quiet gold-ringed chip. Everything below it stays paper. */
#psheet .phead{background:linear-gradient(160deg,var(--pine),var(--pine-d));
  border-radius:10px;padding:20px 18px;margin-bottom:16px;align-items:center;
  box-shadow:0 2px 10px rgba(21,39,28,.25)}
#psheet .phead .mark{width:92px;height:92px;font-size:31px;
  box-shadow:0 0 0 3px rgba(244,239,230,.28)}
#psheet .phead .who b{font-family:var(--display);font-size:27px;font-weight:700;
  color:#F4EFE6;line-height:1.1}
#psheet .phead .who>span{color:rgba(233,238,230,.78)}
#psheet .phead .standing{display:inline-flex;align-items:center;gap:6px;
  width:max-content;margin:7px 0 5px;padding:5px 12px 4px;
  border:1px solid rgba(201,166,75,.65);border-radius:30px;
  font-family:var(--body);font-size:8.5px;font-weight:800;
  letter-spacing:.15em;text-transform:uppercase;color:#EFE9DA}
#psheet .phead .photobtn .cam{background:var(--gold);color:#20160A}

/* medal discs on the standings, worn only by the top three */
.trow .c-rank.medal{display:inline-flex;align-items:center;justify-content:center;
  width:27px;height:27px;border-radius:50%;font-size:13.5px;padding:0}
.trow .c-rank.medal.m1{background:var(--gold);color:#FCF7EA}
.trow .c-rank.medal.m2{background:#9E958A;color:#FCF7EA}
.trow .c-rank.medal.m3{background:#A97B4F;color:#FCF7EA}

/* ═══════════ HOME KNOWS WHO YOU ARE ═══════════ */
.homegreet{margin:2px 2px 14px}
.homegreet b{display:block;font-family:var(--display);font-size:27px;
  font-weight:700;color:var(--ink);line-height:1.15}
.homegreet>span{display:block;margin-top:3px;font-family:var(--body);
  font-size:9px;font-weight:800;letter-spacing:.16em;text-transform:uppercase;
  color:var(--dim)}
/* the greeting word lives in its own span so the clock can keep it honest;
   it must dress exactly like the rest of the headline */
.homegreet b span{font:inherit;color:inherit;display:inline}
/* how far away the next night is, worn on the hero */
.soonchip{margin-left:auto;font-family:var(--body);font-size:9px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#20160A;
  background:var(--gold-lit);padding:4px 10px 3px;border-radius:3px}
/* your own line on the home page: face, record, one tap to your profile */
.mystrip{display:flex;align-items:center;gap:10px;width:100%;margin-top:12px;
  padding:11px 12px;border:1.5px solid rgba(23,21,15,.5);border-radius:5px;
  background:var(--card);cursor:pointer;text-align:left;font:inherit;
  box-shadow:3px 3px 0 rgba(23,21,15,.08)}
.mystrip .mark{flex:none;width:36px;height:36px}
.mystrip>span{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.mystrip b{font-family:var(--body);font-size:8px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mystrip em{font-style:normal;font-family:var(--display);font-size:15px;
  font-weight:700;color:var(--ink)}
.mystrip svg{flex:none;width:16px;height:16px;stroke:var(--dim);fill:none;
  stroke-width:2;stroke-linecap:round}
/* the gate's bad-invite note */
.gbad{color:#E8B4AE!important;font-weight:700}

/* ═══════════ COVERS LIE DOWN ═══════════
   The event photo runs the full width of the card as a landscape banner,
   the way the 16:9 crop always intended, instead of a squeezed side column. */
.evc.hascover{grid-template-columns:36px 1fr;grid-template-rows:150px auto auto}
.evc.hascover .evc-shot{grid-column:1/-1;grid-row:1;width:100%;height:150px;
  border-bottom:1.5px solid rgba(30,27,23,.35)}
.evc.hascover .evc-rail{grid-row:2}
.evc.hascover .evc-body{grid-column:2;grid-row:2}
.evc.hascover .evc-go{grid-row:3}

/* A FINISHED night wears its photo as the whole card, behind a pine dusk —
   the treatment the home hero gets, brought to the cards. */
.evc.st-done.hascover{grid-template-rows:auto auto;position:relative;
  border-color:rgba(20,34,25,.9)}
.evc.st-done.hascover .evc-shot{grid-column:1/-1;grid-row:1/3;height:100%;
  border-bottom:0;z-index:0}
.evc.st-done.hascover::after{content:'';position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(14,22,16,.45),rgba(14,22,16,.9));
  pointer-events:none}
.evc.st-done.hascover .evc-rail{grid-row:1;z-index:2;background:transparent;
  border-right:1px solid rgba(244,239,230,.18)}
.evc.st-done.hascover .evc-rail span{color:rgba(239,233,218,.85)}
.evc.st-done.hascover .evc-body{grid-column:2;grid-row:1;position:relative;z-index:2}
.evc.st-done.hascover .evc-go{grid-row:2;position:relative;z-index:2;
  color:#F4EFE6;border-top:1px solid rgba(244,239,230,.2)}
.evc.st-done.hascover .evc-name b{color:#F4EFE6}
.evc.st-done.hascover .evc-name i,
.evc.st-done.hascover .evc-st{color:rgba(233,238,230,.75)}
.evc.st-done.hascover .evc-edit{color:rgba(233,238,230,.85)}
.evc.st-done.hascover .evc-figs{border-color:rgba(244,239,230,.22)}
.evc.st-done.hascover .evc-figs span{border-color:rgba(244,239,230,.14)}
.evc.st-done.hascover .evc-figs b{color:#F4EFE6}
.evc.st-done.hascover .evc-figs i{color:rgba(233,238,230,.6)}
.evc.st-done.hascover .evc-pod .pod{background:rgba(244,239,230,.16)}
.evc.st-done.hascover .evc-pod .pod u{color:#F4EFE6}
.evc.st-done.hascover .evc-pod .pod s{color:rgba(233,238,230,.72)}
.evc.st-done.hascover .evc-pod .pod em{color:var(--gold-lit)}
.evc.st-done.hascover .evc-aw li{color:rgba(233,238,230,.85)}
.evc.st-done.hascover .evc-aw li i{color:var(--gold-lit)}
.evc.st-done.hascover .evc-aw li b{color:#F4EFE6}
.evc.st-done.hascover .evc-aw li span{color:rgba(233,238,230,.7)}
.evc.st-done.hascover .evc-shots{color:rgba(233,238,230,.7)}

/* the podium chips speak one language: Playfair number, Karla name, aligned */
.evc-pod .pod{align-items:center}
.evc-pod .pod em{font-family:var(--display);font-style:normal;font-weight:700;
  font-size:16px;line-height:1;color:var(--gold);position:relative;top:1px}
.evc-pod .pod u{font-family:var(--body);font-weight:700;font-size:12px;
  text-decoration:none}
.evc-pod .pod s{font-family:var(--body);font-weight:600;font-size:10px;
  text-decoration:none}
/* ═══ the night report, at a size worth reading ═══ */
.hstats b{font-size:26px}
.hstats span{font-size:8px}
.hongrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:16px}
.honor{border:1.5px solid rgba(23,21,15,.4);border-radius:6px;background:var(--card);
  padding:12px 12px 10px;box-shadow:3px 3px 0 rgba(23,21,15,.08)}
.honor i{display:block;font-style:normal;font-family:var(--body);font-size:8px;
  font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  margin-bottom:4px}
.honor b{display:block;font-family:var(--display);font-size:21px;font-weight:700;
  color:var(--ink);line-height:1.15}
.honor span{display:block;font-family:var(--body);font-size:11px;font-weight:600;
  color:var(--dim);margin-top:2px}
.hpod{margin-bottom:16px;gap:8px}
.hpod .pod{flex:1;justify-content:center;padding:12px 8px;border-radius:6px}
.hpod .pod em{font-size:19px}
.hpod .pod u{font-size:13px}
.hpod .pod s{font-size:11px}
.hshots{margin-bottom:16px}

/* ═══════════ TIER BADGES ═══════════
   A placed player's face wears its tier: the ring in the tier's metal, and a
   small starred medal pinned to the shoulder. */
.mark{position:relative}
/* the crest rides the shoulder of the ring, drawn not dotted */
.tbadge{position:absolute;right:-8px;bottom:-8px;width:18px;height:21px;
  display:block;pointer-events:none}
.tbadge svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 1px 1.6px rgba(18,24,17,.5))}
.mark.s72 .tbadge,.mark.s92 .tbadge{width:28px;height:32.5px;right:-9px;bottom:-9px}

/* ═══════════ THE COUNTDOWN ═══════════
   Big Playfair numerals on the pine board, the seconds in gold — the next
   night announcing itself from across the room. */
.cdown{display:flex;align-items:baseline;gap:8px;margin:2px 0 14px}
.cdown span{display:flex;flex-direction:column;align-items:center;gap:1px}
.cdown b{font-family:var(--display);font-size:44px;font-weight:600;
  color:#F4EFE6;line-height:1;
  font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
.cdown .sec b{color:var(--gold-lit)}
.cdown i{font-style:normal;font-family:var(--body);font-size:8px;font-weight:800;
  letter-spacing:.2em;text-transform:uppercase;color:rgba(233,238,230,.6)}
.cdown u{text-decoration:none;font-family:var(--body);font-size:30px;font-weight:800;
  color:rgba(244,239,230,.35);position:relative;top:-3px}

/* ═══════════ COUNT ME IN ═══════════ */
.joinrow{display:flex;align-items:center;gap:12px;margin:2px 0 12px}
.capwrap{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.capbar{display:block;height:5px;border-radius:3px;background:rgba(127,127,110,.25);
  overflow:hidden}
.capbar i{display:block;height:100%;background:var(--gold);border-radius:3px}
.capline{font-family:var(--body);font-size:10px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
.joinbtn{flex:none;border:0;border-radius:6px;background:var(--pine);color:#F4EFE6;
  padding:12px 18px;font-family:var(--body);font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.joinbtn.out{background:transparent;border:1.5px solid rgba(23,21,15,.45);
  color:var(--ink2)}
.joinbtn[disabled]{opacity:.5;cursor:default}
/* on the pine hero the same row wears ivory */
.herojoin .capline{color:rgba(233,238,230,.75)}
.herojoin .capbar{background:rgba(244,239,230,.2)}
.herojoin .joinbtn{background:var(--gold);color:#20160A}
.herojoin .joinbtn.out{background:transparent;border:1.5px solid rgba(244,239,230,.5);
  color:#F4EFE6}

/* the standings sub-line, big enough to actually read */
.trow .c-name small{font-size:10px;letter-spacing:.04em}

/* the casual title, worn lightly on the hero board */
#psheet .phead .standing.ctl{border-color:rgba(244,239,230,.35);
  color:rgba(239,233,218,.85);margin-top:0}

/* who is coming: overlapping faces with a count */
.evc-going{display:flex;align-items:center;margin:2px 0 10px}
.evc-going .mark{margin-right:-7px;box-shadow:0 0 0 2px var(--card)}
.evc-going b{margin-left:15px;font-family:var(--body);font-size:9px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.herogoing{display:flex;align-items:center;margin:6px 0 16px}
.herogoing .mark{margin-right:-7px;box-shadow:0 0 0 2px var(--pine)}
.herogoing b{margin-left:15px;font-family:var(--body);font-size:9.5px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:#E9EEE6}

/* the who-is-in picker on the event editor */
.gogrid{display:flex;flex-wrap:wrap;gap:8px}
.gopick{display:flex;flex-direction:column;align-items:center;gap:4px;width:60px;
  padding:8px 2px 6px;border:1.5px solid rgba(23,21,15,.25);border-radius:6px;
  background:var(--card);cursor:pointer;opacity:.5;font:inherit}
.gopick.on{opacity:1;border-color:var(--pine);box-shadow:inset 0 0 0 1px var(--pine)}
.gopick span{font-family:var(--body);font-size:9px;font-weight:700;color:var(--ink)}
.hrep{margin-bottom:8px}

/* ═══════════ THE STICKY GRAB BAR STOPS BEING A BAR ═══════════
   It used to be an opaque card strip that floated over the sheet mid-scroll.
   Now only the handle line and the close button remain. */
.sheet .grab{background:transparent;pointer-events:none}
.sheet .grab::after{background:rgba(23,21,15,.25)}
.sheet .grab .sheetx{pointer-events:auto;background:var(--card);
  border:1px solid rgba(23,21,15,.22);box-shadow:0 2px 8px rgba(23,21,15,.18)}
#psheet .phead .who{display:flex;flex-direction:column;gap:3px}

/* ═══════════ MY QUEUE ═══════════
   The choice lives on a slim strip up top; the standing lives on a pine
   board that cannot be missed — and turns gold-edged when it is your game. */
#myqpick{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.mqp-lab{flex:none;font-family:var(--body);font-size:9px;font-weight:800;
  letter-spacing:.16em;text-transform:uppercase;color:var(--dim)}
.mqpseg{flex:1;margin:0}
.mqpseg button{font-size:11px!important;padding:11px 4px!important}

.myqcard{display:flex;align-items:center;gap:12px;
  border-radius:8px;background:linear-gradient(160deg,var(--pine),var(--pine-d));
  padding:14px;box-shadow:0 2px 10px rgba(21,39,28,.3);margin-bottom:14px;
  color:#F4EFE6}
.myqcard.hot{box-shadow:0 0 0 2px var(--gold),0 2px 12px rgba(21,39,28,.35)}
.myqcard .mark{flex:none;box-shadow:0 0 0 2px rgba(244,239,230,.3)}
.myqline{flex:1;min-width:130px}
.myqline b{display:block;font-family:var(--display);font-size:18px;font-weight:700;
  color:#F4EFE6;line-height:1.2}
.myqcard.hot .myqline b{color:var(--gold-lit)}
.myqline em{display:block;font-style:normal;font-family:var(--body);font-size:11px;
  font-weight:700;color:rgba(233,238,230,.75);margin-top:2px}
.myqhold{flex:none;border:1.5px solid rgba(244,239,230,.45);border-radius:5px;
  background:transparent;padding:11px 12px;font-family:var(--body);font-size:10px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#F4EFE6;
  cursor:pointer}
.myqhold.on{background:var(--gold);border-color:var(--gold);color:#20160A}

/* the next-up bar: rides above the tabs on every screen until dismissed */
#nextbar{position:fixed;left:12px;right:12px;bottom:calc(72px + env(safe-area-inset-bottom));
  z-index:240;display:flex;align-items:center;gap:12px;
  background:linear-gradient(160deg,var(--pine),var(--pine-d));
  border-radius:8px;padding:12px 14px;box-shadow:0 6px 18px rgba(15,24,18,.4),
  0 0 0 2px var(--gold);animation:up .28s cubic-bezier(.2,.9,.3,1)}
#nextbar span{flex:1;min-width:0}
#nextbar b{display:block;font-family:var(--display);font-size:16px;font-weight:700;
  color:var(--gold-lit)}
#nextbar em{display:block;font-style:normal;font-family:var(--body);font-size:10.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(233,238,230,.8);margin-top:1px}
#nextbar button{flex:none;width:32px;height:32px;border:0;border-radius:50%;
  background:rgba(244,239,230,.15);color:#F4EFE6;display:flex;align-items:center;
  justify-content:center;cursor:pointer}
#nextbar button svg{width:14px;height:14px;stroke:currentColor;fill:none;
  stroke-width:2.4;stroke-linecap:round}

/* the waiting area, decluttered: one card, plain rows, no diagnostics noise */
#bench.grouped{background:var(--card);border:1.5px solid rgba(23,21,15,.35);
  border-radius:6px;padding:12px}
body.role-player #fairness{display:none}

/* the queue reads at arm's length */
.chip{font-size:13.5px}
.chip b{font-size:9px}
.chip u{font-size:10px}
.qlab{font-size:9.5px}
.chip.hold{opacity:.45}
.chip.hold u{background:transparent;color:var(--dim)}
.deckskip{display:inline-block;margin-top:9px;border:1.5px solid rgba(23,21,15,.35);
  border-radius:5px;background:var(--card);padding:8px 12px;font-family:var(--body);
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--ink2);cursor:pointer}

/* the round headers the match record reads in */
.rhead{margin:18px 2px 8px;font-family:var(--body);font-size:8px;font-weight:800;
  letter-spacing:.18em;text-transform:uppercase;color:var(--dim)}
#hlist .rhead:first-child{margin-top:0}

/* ═══════════ ONE RAIL FOR THE JOIN LINE ═══════════
   The going faces ride the join row itself; the venue stays in the when-line
   where it already lives. */
.joinrow .jfaces{display:flex;flex:none;align-items:center;margin-right:8px}
.joinrow .jfaces .mark{margin-right:-7px}
.joinrow .jfaces .mark:last-child{margin-right:5px}
.herojoin .jfaces .mark{box-shadow:0 0 0 2px var(--pine-d)}

/* money must read on the dusk cards: ivory ink on its own dark pane */
.evc.st-done.hascover .evc-fee{background:rgba(14,22,16,.5);
  border-color:rgba(244,239,230,.25)}
.evc.st-done.hascover .evc-fee.clear{background:rgba(91,143,40,.3);
  border-color:rgba(170,205,130,.45)}
.evc.st-done.hascover .evc-fee b{color:#F4EFE6}
.evc.st-done.hascover .evc-fee span{color:rgba(236,240,232,.85)}
.evc.st-done.hascover .evc-feebar{background:rgba(244,239,230,.18)}

/* ═══════════ THE TROPHY CABINET ═══════════
   Badge discs are pine coins with a gold line icon: the crest's language, not
   an emoji in a circle. Locked ones are dashed ghosts so the wall shows what
   is still out there. */
.abadge{display:inline-flex;align-items:center;justify-content:center;flex:none;
  width:28px;height:28px;background:none;box-shadow:none;border-radius:0}
.abadge svg{width:24px;height:24px;fill:none;stroke:#A8842C;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.abadge.s{width:17px;height:17px}
.abadge.s svg{width:15px;height:15px;stroke-width:2}
.abadge.lk{background:none;box-shadow:none}
.abadge.lk svg{stroke:rgba(23,21,15,.35)}
.ashelf{display:flex;align-items:center;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.abmore{border:0;background:none;cursor:pointer;font-family:var(--body);
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--gold);padding:8px 2px;text-decoration:underline;
  text-underline-offset:3px}
.abrow{display:inline-flex;gap:3px;margin-left:7px;vertical-align:2px}
.cabh{font-family:var(--display);font-size:24px;margin:4px 0 6px}
.tierrow{display:flex;align-items:center;gap:12px;padding:9px 4px;
  border-bottom:1px solid rgba(23,21,15,.1)}
.tierrow.on{background:rgba(201,150,47,.12);border-radius:6px;padding:9px 10px;
  border-bottom-color:transparent}
.tierrow .d{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.tierrow .d b{font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--ink)}
.tierrow .d span{font-size:11px;color:var(--dim)}
.tierrow .pt{font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--dim)}
.tierrow.on .pt{color:var(--gold)}
.ringdemo{position:relative;flex:none;width:34px;height:34px;border-radius:50%;
  background:var(--sunk)}
.ringdemo i{position:absolute;right:-4px;bottom:-4px;width:15px;height:15px;
  border-radius:50%;display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 0 2px #F3EEE2}
.ringdemo i svg{width:9px;height:9px;fill:#FDF8EE}
.agrid{display:grid;grid-template-columns:1fr;gap:8px}
@media(min-width:520px){.agrid{grid-template-columns:1fr 1fr}}
.acard{display:flex;gap:11px;align-items:center;padding:10px 11px;
  border:1px solid rgba(23,21,15,.16);border-radius:6px}
.acard.lk{opacity:.6;border-style:dashed}
.acard .d{min-width:0;display:flex;flex-direction:column;gap:1px}
.acard .d b{font-family:var(--display);font-size:14.5px;font-weight:700}
.acard .d span{font-size:11px;color:var(--dim);line-height:1.35}
.cablink{display:block;margin:10px auto 0;border:0;background:none;cursor:pointer;
  font-family:var(--body);font-size:10px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold);text-decoration:underline;
  text-underline-offset:3px;padding:8px}

/* moments on the score sheet: ernes and ATPs, tapped as they happen */
.moments{margin:12px 0 2px;padding:10px 12px;border:1px solid rgba(23,21,15,.16);
  border-radius:6px}
.momlab,.momnote{display:block;font-style:normal;font-family:var(--body);
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim)}
.momlab{margin-bottom:8px}
.momnote{margin-top:7px;font-weight:600;letter-spacing:.05em;
  text-transform:none;font-size:10.5px}
.momrow{display:flex;align-items:center;gap:8px;padding:4px 0}
.momrow>span{flex:1;min-width:0;font-family:var(--display);font-size:14px;
  font-weight:700}
.momchip{border:1.5px solid rgba(23,21,15,.3);border-radius:15px;background:none;
  cursor:pointer;font-family:var(--body);font-size:9.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#4E4839;
  padding:6px 12px;display:inline-flex;align-items:center;gap:6px}
.momchip.on{border-color:var(--pine);background:var(--pine);color:#F4EFE6}
.momchip b{font-family:var(--display);font-size:12px;color:var(--gold-lit)}

/* ═══════════ THE DUEL BOARD ═══════════
   The next matchup reads like a fixture card: one team a row, faces first,
   names in Playfair, the ampersand quiet, the vs a gold rule. */
.duel{display:flex;flex-direction:column;gap:2px;margin-top:2px}
.drow{display:flex;align-items:center;padding:4px 0;min-width:0}
.drow .mark{flex:none}
.drow .mark+.mark{margin-left:-9px}
.drow b{margin-left:10px;font-family:var(--display);font-size:19px;font-weight:700;
  color:var(--ink);line-height:1.2;min-width:0;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.drow b .amp{font-style:normal;font-family:var(--body);font-weight:600;
  font-size:13px;color:var(--dim);padding:0 2px}
.dmid{display:flex;align-items:center;gap:10px;margin:1px 0}
.dmid i{flex:1;height:1px;background:rgba(23,21,15,.16)}
.dmid em{font-style:normal;font-family:var(--body);font-size:9px;font-weight:800;
  letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.stepin{margin-left:10px;font-style:normal;font-family:var(--body);font-size:10px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--dim)}
.deckyou .eta{font-weight:800;color:var(--ink)}
#nextbar .eta{color:var(--gold-lit)}

/* ═══════════ QUEUE CARDS ═══════════
   A queue entry is a person, so it shows a face: seal number, avatar with
   their metal ring, name, and the small truth underneath. */
#bench .chips,#bench.grouped .chips{display:grid;grid-template-columns:1fr 1fr;gap:8px}
#bench .chip{display:flex;align-items:center;gap:9px;margin:0;
  padding:9px 10px;border-radius:8px;background:var(--card);
  border:1px solid rgba(23,21,15,.16);text-align:left;
  font-family:var(--display);font-size:15px;font-weight:700;color:var(--ink)}
#bench .chip u{flex:none;width:20px;height:20px;border-radius:50%;
  display:inline-flex;align-items:center;justify-content:center;
  background:rgba(23,21,15,.08);color:#4E4839;font-size:10.5px;
  font-style:normal;text-decoration:none}
#bench .chip .mark{flex:none}
#bench .chip .qn{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;
  overflow:hidden}
#bench .chip .qn b{font-family:var(--body);font-size:8.5px;font-weight:700;
  letter-spacing:.07em;text-transform:uppercase;color:var(--dim);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#bench .chip.q-ranked{box-shadow:inset 0 0 0 1.5px rgba(176,48,42,.4)}
#bench .chip.q-ranked u{background:var(--stamp);color:#FBF3E6}
#bench .chip.q-casual{box-shadow:inset 0 0 0 1.5px rgba(32,57,42,.35)}
#bench .chip.q-casual u{background:var(--pine);color:#F5F0E2}
#bench .chip.due{background:rgba(168,132,44,.14);border-color:rgba(168,132,44,.5);
  color:var(--ink)}
#bench .chip.due u{background:var(--gold);color:#FBF3E6}
#bench .chip.due .qn b{color:var(--dim)}
@media(max-width:390px){#bench .chips,#bench.grouped .chips{grid-template-columns:1fr}}

/* the cabinet's crest column */
.embig{flex:none;width:30px;height:35px}
.embig svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 1.5px 2px rgba(18,24,17,.35))}

/* the podium numeral matches the clock: lining figures, dead level */
.evc-pod .pod em{font-variant-numeric:lining-nums tabular-nums;top:0;
  line-height:1;display:inline-flex;align-items:center;font-weight:600}

/* a win is solid green, a loss is a hollow stamp: unmistakable at a glance */
.mrow .res.w,.form i.w{background:#3F7A2B;color:#F2F6EA}
.mrow .res.l,.form i.l{background:transparent;color:#6B6252;
  box-shadow:inset 0 0 0 1.5px rgba(23,21,15,.35)}

/* three metal stars set into the crown of the big profile frame */
.tstars{position:absolute;top:-13px;left:50%;transform:translateX(-50%);
  width:58%;pointer-events:none}
.tstars svg{width:100%;height:auto;display:block;fill:currentColor;
  filter:drop-shadow(0 1px 1px rgba(18,24,17,.4))}

/* the crest and the star garland hang OFF the ring - the frame must not
   clip its own decorations. The photo itself stays round via border-radius,
   so nothing else escapes. */
.mark{overflow:visible}
/* on the big profile frame the camera owns bottom-right; the crest takes the
   other shoulder and the stars the crown */
.mark.s72 .tbadge,.mark.s92 .tbadge{right:auto;left:-8px;bottom:-8px}

/* ═══════════ THE OWNER'S HAND ═══════════
   Seven metals on a shelf; one tap pins a crest on a player. */
.metalpick{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:4px}
.mp{width:46px;height:52px;border:1.5px solid rgba(23,21,15,.22);border-radius:6px;
  background:none;cursor:pointer;padding:6px;display:flex;align-items:center;
  justify-content:center}
.mp svg{width:26px;height:30.5px;display:block}
.mp.on{border-color:var(--gold);box-shadow:inset 0 0 0 1.5px var(--gold);
  background:rgba(201,150,47,.12)}
.mp.clear{width:auto;padding:6px 13px;font-family:var(--body);font-size:9.5px;
  font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#4E4839}

/* ═══════════ THE LADDER CARD, SET STRAIGHT ═══════════
   The crest speaks for the metal (a dashed ghost shield while unplaced),
   the figures sit on one baseline, and the bar has a visible track. */
.lemb{flex:none;width:34px;height:39.5px}
.lemb svg{width:100%;height:100%;display:block;
  filter:drop-shadow(0 1.5px 2px rgba(10,16,12,.4))}
.lrp u{text-decoration:none;font-size:55%;opacity:.7;font-style:normal}
.ladder .lbar{background:rgba(244,239,230,.16)}
.ladder .lgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:2px}
.ladder .lgrid div{display:flex;flex-direction:column;align-items:center;gap:4px}
.ladder .lgrid b{font-family:var(--display);font-size:20px;font-weight:700;
  line-height:1;font-variant-numeric:lining-nums tabular-nums}
.ladder .lgrid span{font-family:var(--body);font-size:8.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;white-space:nowrap}
/* the badge shelf leads with a rosette, never a lonely pictogram */
.rosette{flex:none;width:24px;height:24px}
.rosette svg{width:100%;height:100%;display:block;fill:none;stroke:#A8842C;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ashelf-ics{display:inline-flex;gap:6px;align-items:center}

/* ═══════════ PARTNERSHIPS AS CARDS ═══════════ */
.pgrid2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.pcard{display:flex;align-items:center;gap:9px;padding:9px 10px;
  border:1px solid rgba(23,21,15,.16);border-radius:8px}
.pcard.fresh{opacity:.55;border-style:dashed}
.pcard .mark{flex:none}
.pcard .d{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.pcard .d b{font-family:var(--display);font-size:14px;font-weight:700;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pcard .d span{font-size:10px;color:var(--dim);white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.pcard .pwr{flex:none;font-family:var(--display);font-size:15px;font-weight:700;
  color:var(--gold)}
/* one event at a time, picked from a shelf */
.evsel{width:100%;margin:-2px 0 10px;padding:11px 12px;
  border:1.5px solid rgba(23,21,15,.25);border-radius:6px;background:var(--card);
  font-family:var(--body);font-size:12px;font-weight:700;color:var(--ink)}

/* ═══════════ ONE LANGUAGE FOR FIGURES ═══════════
   Every number in the app wears the clock's numerals: lining height,
   tabular width, uniform. No storybook digits on stats, ever. */
body{font-variant-numeric:lining-nums tabular-nums}

/* grantable badge cards invite the organiser's tap */
.acard.grantable{cursor:pointer}
.acard.grantable:active{background:rgba(201,150,47,.1)}

/* ═══════════ THE RANKED LEDGER ═══════════ */
.rl{margin:0 0 18px}
.rlrow{display:flex;align-items:center;gap:11px;padding:10px 2px;
  border-bottom:1px solid rgba(23,21,15,.1)}
.rlrow .mark{flex:none}
.rlrow .d{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px}
.rlrow .d b{font-family:var(--display);font-size:15.5px;font-weight:700;
  color:var(--ink)}
.rlrow .d span{font-size:10.5px;color:var(--dim)}
.rlg{flex:none;display:flex;flex-direction:column;align-items:flex-end;gap:1px;
  font-family:var(--display);font-size:19px;font-weight:700;color:var(--dim)}
.rlg.up{color:#3F6B2A}
.rlg.down{color:var(--stamp)}
.rlg em{font-style:normal;font-family:var(--body);font-size:8px;font-weight:800;
  letter-spacing:.14em;text-transform:uppercase;color:var(--dim)}
.shseg{margin:0 0 12px}

/* figures everywhere weigh what the clock weighs */
.pgrid div b,.ladder .lgrid b,#hstats b,.pcard .pwr,.rlg,.lrp,
.evc-figs span b,.bigcard .mini b,.hpod .pod em,.honor b{font-weight:600}

/* ═══════════ NO STRAY NUMBER FONTS ═══════════
   Scores in match history, the rankings columns and the top-player card
   all speak the clock's numerals now. */
.mrow .sc{font-family:var(--display);font-weight:600;font-size:16.5px;
  font-variant-numeric:lining-nums tabular-nums}
.mrow .sc small{font-family:var(--body);font-weight:700}
.c-num{font-family:var(--display);font-weight:600}
.c-num.pts,.trow.top1 .c-num.pts{font-weight:600}
.hero .stats b{font-family:var(--display);font-weight:600;
  font-variant-numeric:lining-nums tabular-nums}
.stepper .val{font-weight:600}