/* =========================================================
   1HP ESPORT — visual system v2
   Esports-org build: condensed heavy display type, angular
   cut plates, slanted accent bars, dense match-card grid.
   Identity stays 1HP's: "one hit point" — critical red is
   the signature, and section rules are health bars.
   Drop-in replacement. No HTML changes needed.
   ========================================================= */


:root{
  /* Deeper, colder base than v1 so the accents read hotter */
  --void:#04040A;
  --deck:#090914;
  --plate:#0F0E1E;
  --plate-2:#15132A;
  --edge:#221F3F;
  --edge-hot:#3A2E6B;

  --hp:#FF1F44;
  --hp-deep:#B00E2C;
  --hp-soft:#FF6B84;
  --cy:#00E0FF;
  --vi:#8A4DFF;
  --lime:#C6FF3D;
  --text:#F2F0FF;
  --muted:#807AA6;

  --sweep:linear-gradient(100deg,var(--hp) 0%,var(--vi) 55%,var(--cy) 100%);

  --display:'Barlow Condensed','Arial Narrow','Roboto Condensed','Helvetica Neue Condensed',sans-serif-condensed,system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;

  --shell:min(1300px,93vw);
  /* Sharper, more aggressive cut than v1's symmetric clip */
  --clip:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,22px 100%,0 calc(100% - 22px));
  --clip-sm:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
  --clip-btn:polygon(10px 0,100% 0,calc(100% - 10px) 100%,0 100%);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;background:var(--void);color:var(--text);
  font-family:var(--body);font-size:15px;line-height:1.7;
  overflow-x:hidden;-webkit-font-smoothing:antialiased;
}
body.locked{overflow:hidden}
img,video{max-width:100%;display:block}
a{color:var(--cy);text-decoration:none}
a:hover{color:#fff}
:focus-visible{outline:2px solid var(--cy);outline-offset:3px}

/* Ambient field */
body::before{
  content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(1000px 620px at 88% -10%,rgba(138,77,255,.22),transparent 60%),
    radial-gradient(760px 540px at 4% 8%,rgba(255,31,68,.18),transparent 58%),
    linear-gradient(rgba(255,255,255,.022) 1px,transparent 1px) 0 0/100% 52px,
    linear-gradient(90deg,rgba(255,255,255,.022) 1px,transparent 1px) 0 0/52px 100%;
}
body::after{
  content:'';position:fixed;inset:0;z-index:9;pointer-events:none;opacity:.28;
  background:repeating-linear-gradient(180deg,rgba(0,0,0,0) 0 2px,rgba(0,0,0,.4) 2px 3px);
  mix-blend-mode:multiply;
}
.shell{width:var(--shell);margin-inline:auto;position:relative;z-index:1}

/* ---------- Type: condensed, heavy, uppercase headlines ---------- */
h1,h2,h3,h4{
  font-family:var(--display);font-weight:800;
  text-transform:uppercase;letter-spacing:-.005em;line-height:.94;
  margin:0 0 .45em;
}
h1{font-size:clamp(3.2rem,9vw,7.5rem)}
h2{font-size:clamp(2.2rem,5vw,4rem)}
h3{font-size:clamp(1.25rem,2.2vw,1.75rem);letter-spacing:.005em}
h4{font-size:1.05rem}
p{margin:0 0 1rem;max-width:66ch}
.lede{font-size:1.1rem;color:#CFCBEA;line-height:1.65}
.muted{color:var(--muted)}
.mono{font-variant-numeric:tabular-nums;font-family:var(--display);font-weight:700;letter-spacing:.01em;font-size:1.05em}

/* =========================================================
   BOOT SCREEN
   ========================================================= */
#boot{
  position:fixed;inset:0;z-index:100;display:grid;place-items:center;
  background:radial-gradient(760px 540px at 50% 44%,rgba(255,31,68,.16),transparent 64%),var(--void);
}
#boot.done{opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
.boot-inner{width:min(620px,88vw)}
.boot-mark{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:clamp(4.5rem,17vw,10rem);line-height:.82;letter-spacing:-.03em;
  color:#fff;text-shadow:0 0 14px rgba(255,31,68,.5);
}
.boot-mark span{color:var(--hp)}
.boot-sub{
  font-family:var(--display);font-weight:700;color:var(--muted);
  letter-spacing:.4em;font-size:.78rem;margin:.5rem 0 2.4rem;text-transform:uppercase;
}
.hpbar{
  position:relative;height:20px;background:#120F26;border:1px solid var(--edge);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,11px 100%,0 calc(100% - 11px));
}
.hpbar-fill{
  position:absolute;inset:2px;width:calc(100% - 4px);transform-origin:left;
  background:linear-gradient(90deg,var(--hp-deep),var(--hp) 45%,var(--hp-soft) 78%,#fff);
  box-shadow:0 0 22px rgba(255,31,68,.95);
}
.boot-row{
  display:flex;justify-content:space-between;align-items:baseline;margin-top:.8rem;
  font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--muted);
  letter-spacing:.2em;text-transform:uppercase;
}
#boot-hp{color:var(--hp);font-size:1.9rem}
#boot-log{
  margin-top:1.8rem;min-height:1.4em;font-family:var(--display);font-weight:600;
  font-size:.95rem;color:var(--cy);letter-spacing:.14em;text-transform:uppercase;
}
.glitch{animation:glitch .16s steps(2) 5}
@keyframes glitch{
  0%{transform:translate(0)}25%{transform:translate(-4px,1px)}
  50%{transform:translate(4px,-2px)}75%{transform:translate(-2px,-1px)}100%{transform:translate(0)}
}
.boot-skip{
  position:absolute;bottom:1.8rem;right:1.8rem;background:none;
  border:1px solid var(--edge);color:var(--muted);font-family:var(--display);
  font-weight:700;font-size:.78rem;letter-spacing:.24em;padding:.55rem 1.1rem;cursor:pointer;
  clip-path:var(--clip-btn);
}
.boot-skip:hover{color:#fff;border-color:var(--hp)}

/* =========================================================
   HEADER — framed HUD bar in blue.
   Floats inside the viewport with corner brackets; numbered
   links; a live floor-status readout on the right that comes
   from the booking system rather than decorative numbers.
   ========================================================= */
:root{
  --nav-blue:#2F86FF;
  --nav-blue-hi:#5CA8FF;
  --nav-blue-deep:#0E3A7A;
  --nav-h:94px;                  /* bar height + its top margin */
}

.top{
  position:fixed;top:0;left:0;right:0;z-index:30;
  padding:12px clamp(10px,1.4vw,22px) 0;
  pointer-events:none;           /* the gutter around the bar stays clickable */
}
.topbar{
  pointer-events:auto;position:relative;
  display:flex;align-items:center;gap:1.4rem;
  height:70px;padding:0 1.3rem 0 .9rem;
  background:linear-gradient(180deg,rgba(6,10,22,.9),rgba(4,6,14,.86));
  border:1px solid rgba(47,134,255,.28);
  box-shadow:0 10px 36px rgba(0,0,0,.45),inset 0 1px 0 rgba(92,168,255,.08);
  backdrop-filter:blur(16px) saturate(1.2);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);
  transition:background .3s ease,border-color .3s ease;
}
/* hairline under the bar */
.topbar::after{
  content:'';position:absolute;left:12%;right:12%;bottom:-1px;height:1px;
  background:linear-gradient(90deg,transparent,var(--nav-blue),transparent);
  opacity:.75;
}
.top.scrolled .topbar{background:rgba(4,6,14,.95);border-color:rgba(47,134,255,.4)}

/* corner brackets */
.hud{position:absolute;width:14px;height:14px;border:2px solid var(--nav-blue);pointer-events:none}
.hud.tl{top:-5px;left:-5px;border-right:0;border-bottom:0}
.hud.tr{top:-5px;right:-5px;border-left:0;border-bottom:0}
.hud.bl{bottom:-5px;left:-5px;border-right:0;border-top:0}
.hud.br{bottom:-5px;right:-5px;border-left:0;border-top:0}

body{padding-top:var(--nav-h)}
body.is-admin{padding-top:0}
.hero{margin-top:calc(var(--nav-h) * -1);padding-top:var(--nav-h)}

/* ---------- Wordmark ---------- */
.brand{display:flex;align-items:center;gap:.75rem;color:#fff;flex:0 0 auto;min-width:0}
.brand:hover{color:#fff}
.emblem{
  width:44px;height:44px;display:grid;place-items:center;flex:0 0 auto;
  color:var(--nav-blue-hi);
  background:linear-gradient(145deg,rgba(47,134,255,.18),rgba(14,58,122,.35));
  border:1px solid rgba(47,134,255,.45);
}
.emblem svg{width:30px;height:30px}
.brand-text{display:flex;flex-direction:column;line-height:1;min-width:0}
.brand-text .wm{
  font-family:var(--display);font-weight:800;font-style:italic;
  font-size:1.5rem;letter-spacing:-.01em;color:#fff;white-space:nowrap;
}
.brand-text .wm b{color:#FF3F5C;margin:0 .06em}
.brand-text .wm i{font-style:italic;color:var(--nav-blue-hi);margin-left:.16em}
.brand-text small{
  margin-top:.32rem;font-family:var(--display);font-weight:700;font-size:.66rem;
  letter-spacing:.2em;text-transform:uppercase;color:#C9D6EE;white-space:nowrap;
}

/* ---------- Numbered links ---------- */
.nav{display:flex;align-items:center;gap:.25rem;margin:0 auto}
.nav > a{
  position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:.45rem .9rem .5rem;min-height:48px;
  color:#8C9AB8;transition:color .18s ease,background .18s ease;
}
.nav > a i{
  font-style:normal;font-family:var(--display);font-weight:600;
  font-size:.68rem;letter-spacing:.16em;color:#566488;line-height:1;margin-bottom:.28rem;
}
.nav > a span{
  font-family:var(--display);font-weight:800;font-size:.95rem;
  letter-spacing:.13em;text-transform:uppercase;line-height:1;white-space:nowrap;
}
.nav > a:hover{color:#fff}
.nav > a:hover i{color:var(--nav-blue-hi)}
.nav > a.on{
  color:#fff;
  background:linear-gradient(180deg,rgba(47,134,255,.18),rgba(47,134,255,.06));
  border:1px solid rgba(47,134,255,.35);
}
.nav > a.on i{color:var(--nav-blue-hi)}
.nav > a.on::after{
  content:'';position:absolute;left:10%;right:10%;bottom:-1px;height:2px;
  background:var(--nav-blue);box-shadow:0 0 10px rgba(47,134,255,.8);
}
.nav > a.staff-link span{color:#FFB020}

.nav-account{display:flex;align-items:center;margin-left:.6rem}
.account-chip{
  display:flex;align-items:center;gap:.5rem;padding:.3rem .75rem .3rem .3rem;
  border:1px solid rgba(47,134,255,.3);color:#E4ECFB;
  font-family:var(--display);font-weight:700;font-size:.88rem;
  letter-spacing:.06em;text-transform:uppercase;white-space:nowrap;
}
.account-chip:hover,.account-chip.on{border-color:var(--nav-blue);color:#fff}
.account-chip .avatar{width:30px;height:30px;border-radius:50%;border:1px solid rgba(47,134,255,.5)}
.nav .btn-nav{
  background:var(--nav-blue);color:#fff;white-space:nowrap;
  padding:.55rem 1.15rem;font-size:.82rem;letter-spacing:.12em;
  clip-path:polygon(8px 0,100% 0,calc(100% - 8px) 100%,0 100%);
  min-height:0;
}
.nav .btn-nav::before{display:none}
.btn-nav:hover{color:#fff;box-shadow:0 0 22px rgba(47,134,255,.55)}

/* ---------- Live floor status ---------- */
.floor-status{
  display:flex;align-items:center;gap:1rem;flex:0 0 auto;
  padding-left:1.2rem;border-left:1px solid rgba(47,134,255,.22);
}
.floor-status .pill{
  display:flex;align-items:center;gap:.5rem;padding:.38rem .8rem;
  font-family:var(--display);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.pill.is-open{color:#7CE8A3;border:1px solid rgba(124,232,163,.4);background:rgba(124,232,163,.07)}
.pill.is-closed{color:#FF6B84;border:1px solid rgba(255,107,132,.4);background:rgba(255,31,68,.07)}
.pill .dot{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.pill.is-open .dot{animation:pulse 1.6s ease-in-out infinite}
.floor-status .meta{
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:#6C7A99;white-space:nowrap;
}
.floor-status .meta b{color:var(--nav-blue-hi);font-weight:800}

/* ---------- Mobile menu button ---------- */
.navtoggle{
  display:none;margin-left:auto;width:44px;height:44px;
  background:rgba(47,134,255,.1);border:1px solid rgba(47,134,255,.4);
  cursor:pointer;flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
.navtoggle span{display:block;width:18px;height:2px;background:#E4ECFB;transition:transform .2s ease,opacity .2s ease}
.navtoggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.navtoggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.nav-floor{display:none}
.nav-floor .pill{
  display:flex;align-items:center;gap:.5rem;padding:.38rem .8rem;
  font-family:var(--display);font-weight:700;font-size:.74rem;
  letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;
}
.nav-floor .meta{
  font-family:var(--display);font-weight:600;font-size:.74rem;
  letter-spacing:.15em;text-transform:uppercase;color:#6C7A99;white-space:nowrap;
}
.nav-floor .meta b{color:var(--nav-blue-hi);font-weight:800}

/* Footer reuses the wordmark without the tagline */
.foot .brand-text small{display:none}

/* Progressive collapse: status first, then tagline, then the menu */
@media (max-width:1560px){ .floor-status .meta{display:none} .nav > a{padding:.45rem .75rem .5rem} }
@media (max-width:1400px){ .floor-status{display:none} }
@media (max-width:1250px){ .brand-text small{display:none} .nav > a{padding:.45rem .6rem .5rem} .nav > a span{letter-spacing:.09em} }
@media (max-width:1100px){
  .brand-text small{display:none}
  .navtoggle{display:flex}
  .nav{
    position:fixed;top:calc(var(--nav-h) - 4px);left:clamp(10px,1.4vw,22px);right:clamp(10px,1.4vw,22px);
    flex-direction:column;align-items:stretch;gap:0;margin:0;padding:.6rem;
    background:#050812;border:1px solid rgba(47,134,255,.35);
    box-shadow:0 20px 40px rgba(0,0,0,.5);
    max-height:calc(100vh - var(--nav-h) - 20px);overflow-y:auto;
    display:none;
  }
  .nav.open{display:flex}
  .nav > a{flex-direction:row;align-items:center;justify-content:flex-start;gap:.8rem;min-height:52px;padding:.5rem .9rem}
  .nav > a i{margin:0;min-width:2.6rem}
  .nav > a.on::after{left:0;right:auto;top:0;bottom:0;width:3px;height:auto}
  .nav-floor{
    display:flex;align-items:center;justify-content:space-between;gap:.8rem;
    margin:.5rem 0 0;padding:.8rem .4rem .2rem;border-top:1px solid rgba(47,134,255,.2);
  }
  .nav-account{margin:.5rem 0 0;padding-top:.6rem}
  .nav-account .btn-nav,.nav-account .account-chip{width:100%;justify-content:center}
}
@media (max-width:480px){
  :root{--nav-h:84px}
  .topbar{height:60px;padding:0 .7rem}
  .emblem{width:38px;height:38px}
  .emblem svg{width:26px;height:26px}
  .brand-text .wm{font-size:1.25rem}
}

/* ---------- Buttons: slanted parallelogram, esports staple ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  font-family:var(--display);font-weight:800;font-size:1rem;
  text-transform:uppercase;letter-spacing:.1em;
  padding:.85rem 1.9rem;cursor:pointer;border:1px solid transparent;
  clip-path:var(--clip-btn);position:relative;overflow:hidden;
  transition:transform .14s ease,box-shadow .22s ease,color .18s;
}
.btn:active{transform:translateY(1px)}
.btn-hp{background:var(--hp);color:#fff}
.btn-hp:hover{color:#fff;box-shadow:0 0 34px rgba(255,31,68,.7)}
/* light sweep on hover — the one hover flourish, kept to buttons only */
.btn-hp::before{
  content:'';position:absolute;inset:0;transform:translateX(-110%);
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);
  transition:transform .55s ease;
}
.btn-hp:hover::before{transform:translateX(110%)}
.btn-ghost{background:rgba(255,255,255,.02);border-color:var(--edge-hot);color:var(--text)}
.btn-ghost:hover{border-color:var(--cy);color:var(--cy);box-shadow:0 0 24px rgba(0,224,255,.22)}
.btn-cy{background:var(--cy);color:#03121A}
.btn-cy:hover{color:#03121A;box-shadow:0 0 32px rgba(0,224,255,.55)}
.btn[disabled]{opacity:.38;cursor:not-allowed}

/* =========================================================
   SECTIONS
   ========================================================= */
.band{padding:6.5rem 0;position:relative;z-index:1}
.band-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;margin-bottom:3rem}
/* Slanted accent bar to the left of every section heading */
.band-head h2{position:relative;padding-left:1.4rem}
.band-head h2::before{
  content:'';position:absolute;left:0;top:.12em;bottom:.18em;width:7px;
  background:var(--sweep);transform:skewX(-14deg);
}
.band-head p{margin:0;color:var(--muted);font-family:var(--display);font-weight:600;
  text-transform:uppercase;letter-spacing:.13em;font-size:.9rem}

.rule{height:7px;background:#120F26;position:relative;overflow:hidden}
.rule::before{
  content:'';position:absolute;inset:0;width:32%;background:var(--sweep);
  animation:sweep 5.5s linear infinite;
}
@keyframes sweep{from{transform:translateX(-100%)}to{transform:translateX(340%)}}

/* ---------- Plates ---------- */
.panel{
  background:linear-gradient(158deg,var(--plate-2),var(--deck) 62%);
  border:1px solid var(--edge);clip-path:var(--clip);
  padding:1.9rem;position:relative;
  transition:border-color .22s ease,transform .22s ease;
}
.panel:hover{border-color:var(--edge-hot);transform:translateY(-3px)}
/* Corner accent, now a diagonal chip in the gradient */
.panel .tick{
  position:absolute;top:0;left:0;width:56px;height:4px;background:var(--sweep);
}
.panel .tick::after{
  content:'';position:absolute;left:0;top:0;width:4px;height:36px;background:var(--sweep);
}

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

.tag{
  display:inline-block;font-family:var(--display);font-weight:700;font-size:.78rem;
  letter-spacing:.18em;text-transform:uppercase;padding:.3rem .85rem;
  border:1px solid var(--edge-hot);color:var(--muted);clip-path:var(--clip-btn);
}
.tag-live{color:#fff;background:var(--hp);border-color:var(--hp);animation:pulse 1.4s infinite}
.tag-open{color:var(--lime);border-color:rgba(198,255,61,.45)}
.tag-closed{color:var(--muted)}
.tag-pending{color:#FFB020;border-color:rgba(255,176,32,.5)}
.tag-confirmed{color:var(--lime);border-color:rgba(198,255,61,.5)}
.tag-cancelled,.tag-rejected{color:var(--muted);opacity:.7}
.tag-completed{color:var(--cy);border-color:rgba(0,224,255,.45)}

/* ---------- Match cards ---------- */
.card-t h3{margin:.9rem 0 .4rem}
.card-t h3 a{color:#fff}
.card-t:hover h3 a{color:var(--hp-soft)}
.card-t .meta{
  display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.2rem;
  font-family:var(--display);font-weight:600;font-size:.85rem;
  text-transform:uppercase;letter-spacing:.1em;color:var(--muted);
}
.card-t .meta span{border:1px solid var(--edge);padding:.12rem .6rem}
.card-t .prize{
  font-family:var(--display);font-weight:800;font-size:2.4rem;line-height:1;
  color:var(--lime);text-shadow:0 0 20px rgba(198,255,61,.35);
}
.slots{height:6px;background:#161230;margin-top:1.1rem;overflow:hidden}
.slots i{display:block;height:100%;background:var(--sweep);box-shadow:0 0 12px rgba(0,224,255,.6)}

.post{display:block;color:inherit;padding:0;overflow:hidden}
.post img{width:100%;height:200px;object-fit:cover;filter:saturate(1.1) contrast(1.05)}
.post .tag{margin:1.2rem 1.4rem 0}
.post h3{margin:.7rem 1.4rem .35rem;font-size:1.3rem}
.post p{margin:0 1.4rem .6rem}
.post time{display:block;margin:0 1.4rem 1.4rem;font-family:var(--display);font-weight:600;
  font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.post:hover h3{color:var(--cy)}

/* ---------- Tables / ladder ---------- */
.ladder{width:100%;border-collapse:collapse;font-size:.95rem}
.ladder th{
  text-align:left;font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);
  padding:.75rem .9rem;border-bottom:2px solid var(--edge);
}
.ladder td{padding:.85rem .9rem;border-bottom:1px solid rgba(34,31,63,.6)}
.ladder tr:hover td{background:rgba(138,77,255,.08)}
.ladder .rank{
  font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--hp);width:3.4rem;
}
.ladder tr:first-child .rank{color:var(--lime);text-shadow:0 0 16px rgba(198,255,61,.4)}

/* =========================================================
   BOOKING FLOOR
   ========================================================= */
.booking-bar{display:flex;gap:1.2rem;align-items:flex-end;flex-wrap:wrap;margin-bottom:2.2rem}
label{
  display:block;font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:.45rem;
}
input,select,textarea{
  background:#0C0A1C;border:1px solid var(--edge);color:var(--text);
  font-family:var(--body);font-size:.95rem;padding:.75rem .95rem;width:100%;
  clip-path:var(--clip-sm);
}
input:focus,select:focus,textarea:focus{border-color:var(--cy);outline:none;box-shadow:0 0 0 1px var(--cy)}
textarea{min-height:120px;resize:vertical}

.floor{overflow-x:auto;border:1px solid var(--edge);background:var(--deck)}
.floor table{border-collapse:collapse;width:100%;min-width:860px}
.floor th{
  font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.1em;
  color:var(--muted);padding:.8rem .4rem;border-bottom:2px solid var(--edge);
}
.floor td{padding:.3rem;border-bottom:1px solid rgba(34,31,63,.5);text-align:center}
.floor .rig{text-align:left;padding-left:1.1rem;min-width:210px}
.floor .rig b{font-family:var(--display);font-weight:800;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.04em;display:block;color:#fff}
.floor .rig small{color:var(--muted);font-size:.78rem}
.slot{
  width:100%;height:38px;border:1px solid rgba(0,224,255,.28);
  background:rgba(0,224,255,.07);cursor:pointer;
  font-family:var(--display);font-weight:700;font-size:.8rem;color:var(--cy);
  transition:background .14s,box-shadow .18s;
}
.slot:hover{background:rgba(0,224,255,.24)}
.slot.sel{background:var(--cy);color:#03121A;border-color:var(--cy);box-shadow:0 0 18px rgba(0,224,255,.65)}
.slot.taken{background:rgba(255,31,68,.11);border-color:rgba(255,31,68,.32);color:var(--hp);cursor:not-allowed}
.slot.past{background:#0B0918;border-color:#161230;color:#38315C;cursor:not-allowed}

/* Rate cards above the floor plan */
.rate-card{display:flex;flex-direction:column;gap:.15rem;padding:1.4rem}
.rate-card .rate{
  font-family:var(--display);font-weight:800;font-size:2.6rem;line-height:1;color:var(--lime);
}
.rate-card .rate .cur{font-size:.55em;vertical-align:.32em;margin-right:.04em}
.rate-card .rate small{font-size:.34em;color:var(--muted);font-weight:700;margin-left:.15em}
.rate-card b{font-family:var(--display);font-weight:700;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.05em;margin-top:.4rem}
.rate-card .muted{font-size:.85rem;line-height:1.4}
.floor .rig .rate-line{color:var(--lime);opacity:.85}

/* Booking cart */
.summary{position:sticky;bottom:0;margin-top:1.6rem}
.summary-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding-bottom:1rem;border-bottom:1px solid var(--edge);margin-bottom:.4rem}
.cart-row{
  display:grid;grid-template-columns:1fr 1.3fr auto auto;gap:1rem;align-items:center;
  padding:.85rem 0;border-bottom:1px solid rgba(34,31,63,.55);
}
.cart-row:last-child{border-bottom:0}
.cart-main{display:flex;flex-direction:column;gap:.1rem}
.cart-main b{font-family:var(--display);font-weight:800;font-size:1.15rem;
  text-transform:uppercase;letter-spacing:.04em}
.cart-main .muted{font-size:.85rem}
.cart-side{display:flex;flex-direction:column;gap:.3rem}
.cart-side select,.cart-side input{padding:.45rem .7rem;font-size:.88rem}
.cart-side small{font-size:.76rem}
.cart-cost{font-family:var(--display);font-weight:800;font-size:1.35rem;color:var(--lime);
  text-align:right;min-width:5rem}
.cart-x{
  background:none;border:1px solid var(--edge);color:var(--muted);
  width:32px;height:32px;cursor:pointer;font-size:.9rem;line-height:1;
}
.cart-x:hover{border-color:var(--hp);color:var(--hp)}
@media (max-width:700px){
  .cart-row{grid-template-columns:1fr auto;grid-template-areas:'main x' 'side side' 'cost cost';gap:.5rem}
  .cart-main{grid-area:main}.cart-side{grid-area:side}
  .cart-cost{grid-area:cost;text-align:left}.cart-x{grid-area:x}
}
.summary .row{display:flex;justify-content:space-between;align-items:center;gap:1.2rem;flex-wrap:wrap}
.summary .cost{font-family:var(--display);font-weight:800;font-size:2.8rem;line-height:1;color:var(--lime)}

/* =========================================================
   GALLERY
   ========================================================= */
.masonry{columns:3;column-gap:1.2rem}
.masonry figure{margin:0 0 1.2rem;break-inside:avoid;position:relative;border:1px solid var(--edge);overflow:hidden}
.masonry img,.masonry video{width:100%;transition:transform .5s ease,filter .4s ease;filter:saturate(.85) contrast(1.06)}
.masonry figure:hover img,.masonry figure:hover video{transform:scale(1.05);filter:saturate(1.3)}
.masonry figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.9rem;
  background:linear-gradient(transparent,rgba(4,4,10,.94));
  font-size:.88rem;opacity:0;transition:opacity .3s;
}
.masonry figure:hover figcaption{opacity:1}
.filters{display:flex;gap:.6rem;flex-wrap:wrap;margin-bottom:2rem}
.filters .btn{padding:.6rem 1.3rem;font-size:.9rem}

#lightbox{position:fixed;inset:0;z-index:60;background:rgba(2,2,7,.95);display:none;place-items:center;padding:3vh 3vw}
#lightbox.open{display:grid}
#lightbox img,#lightbox video{max-height:88vh;max-width:100%;border:1px solid var(--edge-hot)}
#lightbox button{
  position:absolute;top:1.5rem;right:1.7rem;background:none;border:1px solid var(--edge-hot);
  color:#fff;padding:.55rem 1.1rem;cursor:pointer;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.16em;clip-path:var(--clip-btn);
}

/* =========================================================
   PAGE HEADS, FLASH, FOOTER
   ========================================================= */
.page-head{padding:6rem 0 3rem;border-bottom:2px solid var(--edge);position:relative}
.page-head::after{content:'';position:absolute;left:0;bottom:-2px;width:180px;height:2px;background:var(--sweep)}
.page-head h1{font-size:clamp(2.8rem,6.5vw,5rem);font-style:italic}
.page-head p{color:var(--muted);max-width:62ch}

.flash{
  padding:.95rem 1.3rem;margin:1.5rem 0;border-left:4px solid var(--cy);
  background:rgba(0,224,255,.09);font-size:.94rem;clip-path:var(--clip-sm);
}
.flash.err{border-color:var(--hp);background:rgba(255,31,68,.1)}

.empty{padding:4rem 1.6rem;text-align:center;border:1px dashed var(--edge-hot);color:var(--muted)}
.empty h3{color:var(--text)}

.foot{border-top:2px solid var(--edge);padding:4rem 0 2rem;margin-top:5rem;position:relative;z-index:1}
.foot::before{content:'';position:absolute;left:0;top:-2px;width:100%;height:2px;background:var(--sweep);opacity:.35}
.foot-in{display:grid;grid-template-columns:2fr 1fr 1fr;gap:3rem}
.foot h4{font-size:.88rem;letter-spacing:.22em;color:var(--muted);margin-bottom:1rem}
.foot a{display:block;color:var(--text);font-size:.94rem;padding:.28rem 0}
.foot a:hover{color:var(--hp)}
.foot-base{
  margin-top:2.8rem;padding-top:1.5rem;border-top:1px solid var(--edge);
  display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-family:var(--display);font-weight:600;font-size:.86rem;
  text-transform:uppercase;letter-spacing:.13em;color:var(--muted);
}

.avatar{width:38px;height:38px;border-radius:50%;border:2px solid var(--edge-hot)}
.roster{display:grid;gap:.7rem}
.roster .line{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.split{display:grid;grid-template-columns:1.65fr 1fr;gap:3rem;align-items:start}
.prose h2{margin-top:2.6rem}
.prose p{color:#CFCBEA}

/* ---------- Admin panel: fixed left rail, scrolling content ---------- */
.admin-shell{
  display:grid;grid-template-columns:250px 1fr;gap:0;
  min-height:calc(100vh - var(--nav-h));position:relative;z-index:1;
}
.admin-side{
  border-right:1px solid var(--edge);background:rgba(9,9,20,.6);
  padding:2rem 0 2rem 0;display:flex;flex-direction:column;
  position:sticky;top:var(--nav-h);height:calc(100vh - var(--nav-h));
}
.admin-side-head{padding:0 1.4rem 1.4rem;border-bottom:1px solid var(--edge);margin-bottom:1rem}
.admin-side-head b{display:block;margin-top:.5rem;font-family:var(--display);font-size:1.1rem}
.side-nav{display:flex;flex-direction:column;overflow-y:auto}
.side-nav a{
  display:flex;align-items:center;justify-content:space-between;gap:.6rem;
  font-family:var(--display);font-weight:700;font-size:1.02rem;
  text-transform:uppercase;letter-spacing:.09em;color:var(--muted);
  padding:.8rem 1.4rem;border-left:3px solid transparent;
}
.side-nav a:hover{color:#fff;background:rgba(255,255,255,.03)}
.side-nav a.on{
  color:#fff;background:var(--plate);border-left-color:var(--hp);
}
.side-nav .badge{
  background:#FFB020;color:#1A1200;font-size:.72rem;font-weight:800;
  padding:.05rem .45rem;border-radius:2px;
}
.admin-side-foot{
  margin-top:auto;padding:1.2rem 1.4rem 0;border-top:1px solid var(--edge);
  display:flex;flex-direction:column;gap:.5rem;
}
.admin-main{padding:2rem 2.4rem 5rem;min-width:0}
.admin-main-head{
  display:flex;align-items:center;justify-content:space-between;gap:1.5rem;
  flex-wrap:wrap;margin-bottom:1.6rem;
}
.admin-main-head h1{font-size:clamp(2rem,3.5vw,2.8rem);margin:0}

/* Bulk action bar */
.bulkbar{
  display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  padding:.9rem 1.1rem;margin-bottom:.9rem;
  background:var(--plate);border:1px solid var(--edge);clip-path:var(--clip-sm);
}
.checkline{
  display:flex;align-items:center;gap:.55rem;margin:0;
  text-transform:none;letter-spacing:0;color:var(--text);font-size:.92rem;
  font-family:var(--body);font-weight:500;cursor:pointer;
}
.checkline input,.bulk-check{width:auto;accent-color:var(--cy);cursor:pointer;transform:scale(1.15)}
#bulk-count{font-family:var(--display);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem}

.tablewrap{overflow-x:auto;border:1px solid var(--edge);background:var(--deck)}
.tablewrap .ladder{min-width:860px}
.tablewrap .ladder th{padding-inline:1rem}
.tablewrap .ladder td{padding-inline:1rem;vertical-align:top}
.actions{display:flex;gap:.4rem;flex-wrap:wrap;align-items:center}
.btn.mini{padding:.35rem .85rem;font-size:.78rem;letter-spacing:.06em}
.inline-form{display:flex;gap:.4rem;align-items:center}
.inline-form select{width:auto;min-width:7.5rem;padding:.35rem .6rem;font-size:.85rem}
.media-tile{display:flex;flex-direction:column;gap:.35rem}
.media-tile img,.media-tile video{height:120px;width:100%;object-fit:cover;border:1px solid var(--edge)}
.media-tile small{font-size:.75rem}

@media (max-width:900px){
  .admin-shell{grid-template-columns:1fr}
  .admin-side{
    position:static;height:auto;border-right:0;border-bottom:1px solid var(--edge);
    padding:1.2rem 0;
  }
  .side-nav{flex-direction:row;overflow-x:auto;padding:0 1rem}
  .side-nav a{
    border-left:0;border-bottom:3px solid transparent;white-space:nowrap;padding:.7rem 1rem;
  }
  .side-nav a.on{border-left:0;border-bottom-color:var(--hp)}
  .admin-side-head,.admin-side-foot{padding-inline:1.4rem}
  .admin-side-foot{flex-direction:row;margin-top:1rem}
  .admin-main{padding:1.6rem 4vw 4rem}
}

details.admin-block{border:1px solid var(--edge);background:var(--deck);margin-bottom:1.1rem}
details.admin-block summary{
  padding:1.1rem 1.3rem;cursor:pointer;font-family:var(--display);font-weight:700;
  font-size:1.15rem;text-transform:uppercase;letter-spacing:.08em;
}
details.admin-block[open] summary{border-bottom:1px solid var(--edge);color:var(--cy)}
details.admin-block .body{padding:1.4rem 1.3rem}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width:1000px){
  .g3,.g4{grid-template-columns:repeat(2,1fr)}
  .split{grid-template-columns:1fr}
  .masonry{columns:2}
  .foot-in{grid-template-columns:1fr 1fr}
}
@media (max-width:700px){

  .g2,.g3,.g4{grid-template-columns:1fr}
  .masonry{columns:1}
  .band{padding:4rem 0}
  .foot-in{grid-template-columns:1fr}
  .panel{padding:1.4rem}
}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  html{scroll-behavior:auto}
  body::after{display:none}
  .panel:hover{transform:none}
}

/* =========================================================
   LIVE SCORE TICKER
   ========================================================= */
.ticker-wrap{
  border-bottom:1px solid var(--edge);background:rgba(9,9,20,.75);
  padding:.7rem 0;position:relative;z-index:1;
}
.ticker-wrap.is-empty{display:none}
.ticker{display:flex;align-items:center;gap:1.2rem;min-width:0}
.ticker-label{
  display:flex;align-items:center;gap:.5rem;flex:0 0 auto;
  font-family:var(--display);font-weight:800;font-size:.88rem;
  text-transform:uppercase;letter-spacing:.16em;color:var(--hp);
}
.ticker-label .dot{
  width:8px;height:8px;border-radius:50%;background:var(--hp);
  box-shadow:0 0 10px var(--hp);animation:pulse 1.3s ease-in-out infinite;
}
.ticker-rail{display:flex;gap:.6rem;overflow-x:auto;scrollbar-width:none;min-width:0}
.ticker-rail::-webkit-scrollbar{display:none}
.score-chip{
  flex:0 0 auto;display:flex;align-items:center;gap:.7rem;
  padding:.4rem .9rem;border:1px solid var(--edge);background:var(--plate);
  color:var(--text);clip-path:var(--clip-sm);white-space:nowrap;
}
.score-chip:hover{border-color:var(--cy);color:var(--text)}
.score-chip.on{border-color:rgba(255,31,68,.5)}
.chip-event{
  font-family:var(--display);font-weight:700;font-size:.76rem;
  text-transform:uppercase;letter-spacing:.12em;color:var(--muted);
}
.chip-teams{font-family:var(--display);font-weight:700;font-size:.95rem}
.chip-teams b{color:var(--lime);font-size:1.1em;margin:0 .1em}
.chip-detail{font-size:.78rem;color:var(--muted)}

/* =========================================================
   VIDEO REELS
   ========================================================= */
.reels{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2rem}
.reel{
  margin:0;position:relative;aspect-ratio:9/16;overflow:hidden;
  border:1px solid var(--edge);background:var(--deck);cursor:pointer;
}
.reel video{width:100%;height:100%;object-fit:cover;filter:saturate(.9)}
.reel:hover{border-color:var(--edge-hot)}
.reel-play{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:2rem;color:#fff;text-shadow:0 2px 20px rgba(0,0,0,.9);
  background:linear-gradient(transparent 40%,rgba(4,4,10,.6));
  transition:opacity .25s;pointer-events:none;
}
.reel.playing .reel-play{opacity:0}
.reel figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:.8rem;font-size:.85rem;
  background:linear-gradient(transparent,rgba(4,4,10,.94));pointer-events:none;
}
@media (max-width:1000px){.reels{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.reels{grid-template-columns:1fr 1fr;gap:.8rem}}

/* =========================================================
   SCOREBOARD (admin)
   ========================================================= */
.scoreboard{display:grid;gap:1rem}
.scorecard{background:var(--plate);border:1px solid var(--edge);clip-path:var(--clip);padding:1.2rem 1.4rem}
.scorecard.is-live{border-color:rgba(255,31,68,.55);box-shadow:0 0 24px rgba(255,31,68,.12)}
.scorecard-head{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1rem}
.scorecard-body{display:flex;align-items:center;gap:1.5rem;flex-wrap:wrap}
.scorecard-body .side{flex:1 1 220px;min-width:0}
.scorecard-body .side b{
  display:block;font-family:var(--display);font-weight:800;font-size:1.25rem;
  text-transform:uppercase;letter-spacing:.03em;margin-bottom:.5rem;
  overflow:hidden;text-overflow:ellipsis;
}
.versus{font-family:var(--display);font-weight:800;color:var(--muted);font-size:1.1rem}
.stepper{display:flex;align-items:center;gap:.4rem}
.stepper .step{
  width:40px;height:44px;background:var(--deck);border:1px solid var(--edge-hot);
  color:var(--text);font-size:1.3rem;line-height:1;cursor:pointer;
}
.stepper .step:hover{border-color:var(--cy);color:var(--cy)}
.stepper .score{
  width:82px;height:44px;text-align:center;clip-path:none;
  font-family:var(--display);font-weight:800;font-size:1.6rem;color:var(--lime);
  padding:0;
}
.scorecard-foot{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;margin-top:1rem}
.scorecard-foot .detail{flex:1 1 220px;padding:.5rem .8rem;font-size:.9rem}
.scorecard-foot .status{width:auto;min-width:8rem;padding:.5rem .8rem;font-size:.9rem}
.scorecard-foot .saved{font-size:.8rem;font-family:var(--display);letter-spacing:.06em}
.ladder .num{width:5rem;padding:.35rem .5rem;font-size:.88rem;clip-path:none;text-align:center}

/* =========================================================
   PROFILE STATS + DANGER ZONE
   ========================================================= */
.statbar{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--edge);border:1px solid var(--edge);
}
.statbar div{background:var(--deck);padding:1.1rem 1.2rem}
.statbar strong{
  display:block;font-family:var(--display);font-weight:800;font-size:2rem;
  line-height:1;color:var(--cy);
}
.statbar span{
  font-family:var(--display);font-weight:600;font-size:.78rem;
  text-transform:uppercase;letter-spacing:.14em;color:var(--muted);
}
.danger-zone{border-color:rgba(255,31,68,.35)}
.danger-zone summary{
  cursor:pointer;font-family:var(--display);font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--hp-soft);
}
.danger-zone[open] summary{margin-bottom:.4rem}
@media (max-width:700px){.statbar{grid-template-columns:1fr 1fr}}

/* ---------- Bulk uploader ---------- */
.uploader{margin-top:1.2rem;border:1px solid var(--edge);background:var(--deck);padding:1rem}
.uploader-bar{height:6px;background:#161230;overflow:hidden}
.uploader-bar i{display:block;height:100%;width:0;background:var(--sweep);transition:width .2s ease}
.uploader-list{list-style:none;margin:.8rem 0 0;padding:0;max-height:260px;overflow-y:auto}
.uploader-list li{
  display:flex;justify-content:space-between;gap:1rem;padding:.35rem 0;
  border-bottom:1px solid rgba(34,31,63,.5);font-size:.86rem;
}
.uploader-list .f{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.uploader-list .s{flex:0 0 auto;font-family:var(--display);font-weight:700;color:var(--muted)}
.uploader-list .s.good{color:var(--lime)}
.uploader-list .s.bad{color:var(--hp-soft)}

/* ---------- Player profile ---------- */
.profile-id{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap}
.profile-id h1{margin:0}
.avatar.lg{width:72px;height:72px;border-width:2px}
.prose.legal h3{
  font-size:1.15rem;margin-top:2.2rem;color:var(--cy);
  letter-spacing:.04em;
}
.prose.legal h3:first-child{margin-top:0}
.prose.legal p{font-size:.96rem}



/* =========================================================
   FLOOR MARQUEE
   Two rows sliding opposite ways. The track holds the images
   twice and animates to exactly -50%, so the second copy lands
   where the first started and the loop has no seam.
   Only transform is animated, which keeps it on the compositor.
   ========================================================= */
.marquee-band{overflow:hidden}
.marquee{
  display:flex;flex-direction:column;gap:1rem;
  /* fade the edges instead of hard-cutting at the viewport */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.marquee-row{overflow:hidden}
.marquee-track{
  display:flex;gap:1rem;width:max-content;
  animation:marquee 46s linear infinite;
  will-change:transform;
}
.marquee-row.reverse .marquee-track{
  animation-duration:58s;             /* different speed so the rows never sync */
  animation-direction:reverse;
}
@keyframes marquee{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(-50%,0,0)}
}

/* Hovering anywhere over the band slows both rows rather than
   stopping them dead, which reads as deliberate instead of broken. */
.marquee:hover .marquee-track{animation-play-state:running;animation-duration:150s}
.marquee-row.reverse:hover .marquee-track,
.marquee:hover .marquee-row.reverse .marquee-track{animation-duration:190s}

.slide{
  margin:0;flex:0 0 auto;width:clamp(240px,26vw,400px);
  aspect-ratio:16/9;overflow:hidden;position:relative;
  border:1px solid var(--edge);
  clip-path:var(--clip-sm);
  background:var(--deck);
}
.slide img{
  width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.05) contrast(1.04);
  transition:filter .4s ease,transform .6s ease;
}
.slide::after{
  /* faint neon wash so the photos sit in the palette */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(120deg,rgba(255,31,68,.14),transparent 45%,rgba(0,224,255,.12));
  mix-blend-mode:screen;opacity:.75;transition:opacity .4s ease;
}
.slide:hover img{filter:saturate(1.25) contrast(1.08);transform:scale(1.04)}
.slide:hover::after{opacity:.35}

@media (max-width:700px){
  .marquee{gap:.7rem}
  .marquee-track{gap:.7rem;animation-duration:34s}
  .marquee-row.reverse .marquee-track{animation-duration:42s}
  .slide{width:clamp(200px,62vw,300px)}
}

/* Motion-sensitive visitors get a static, scrollable strip instead */
@media (prefers-reduced-motion:reduce){
  .marquee-track{animation:none}
  .marquee-row{overflow-x:auto;scrollbar-width:none}
  .marquee-row::-webkit-scrollbar{display:none}
  .marquee-row.reverse{display:none}
}

/* =========================================================
   HERO — first-person HUD at one hit point.
   Every class is hx- prefixed: .hud, .cta and .sub already
   mean other things on this site.
   No WebGL: CSS transforms, one SVG, a few small scripts.
   ========================================================= */
.hx{position:relative;height:100vh;height:100svh;min-height:680px;overflow:hidden;isolation:isolate;cursor:none;
  padding-top:0;background:#03050C}
@media (hover:none),(pointer:coarse){.hx{cursor:auto}}

/* ---- Background: the floor as a tactical map ---- */
.hx-bg{position:absolute;inset:0;z-index:0;perspective:1500px;overflow:hidden}
.hx-bg::after{content:'';position:absolute;inset:0;z-index:2;
  background:
    linear-gradient(90deg,rgba(3,5,12,.94) 0%,rgba(3,5,12,.74) 30%,rgba(3,5,12,.18) 62%,rgba(3,5,12,.45) 100%),
    linear-gradient(0deg,rgba(3,5,12,.92) 0%,transparent 30%),
    linear-gradient(180deg,rgba(3,5,12,.75) 0%,transparent 20%)}
.hx-map3d{position:absolute;left:-10%;right:-25%;top:-12%;bottom:-30%;transform-origin:60% 55%;
  transform:rotateX(52deg) rotateZ(-14deg) scale(1.15) translate3d(12%,0,0);
  animation:hx-pan 38s ease-in-out infinite alternate}
@keyframes hx-pan{
  from{transform:rotateX(52deg) rotateZ(-14deg) scale(1.15) translate3d(12%,0,0)}
  to  {transform:rotateX(48deg) rotateZ(-8deg)  scale(1.22) translate3d(2%,-4%,0)}}
.hx-map3d svg{width:100%;height:100%;display:block}
.hx-wall{fill:none;stroke:rgba(92,168,255,.75);stroke-width:5;filter:drop-shadow(0 0 6px rgba(47,134,255,.8))}
.hx-wall.thin{stroke-width:2.4;stroke:rgba(92,168,255,.45);filter:none}
.hx-zone{font-family:var(--display);font-weight:800;font-size:30px;letter-spacing:6px;fill:rgba(92,168,255,.42)}
.hx-site{font-family:var(--display);font-weight:800;font-style:italic;font-size:190px;fill:rgba(47,134,255,.10)}
.hx-st rect{fill:rgba(47,134,255,.08);stroke:rgba(92,168,255,.55);stroke-width:2}
.hx-st text{font-family:var(--display);font-weight:700;font-size:20px;letter-spacing:2px;fill:rgba(160,200,255,.75)}
.hx-st.busy rect{fill:rgba(255,31,68,.16);stroke:rgba(255,63,92,.9);filter:drop-shadow(0 0 8px rgba(255,31,68,.7))}
.hx-st.busy text{fill:#FF8FA0}
.hx-route{fill:none;stroke:rgba(0,224,255,.55);stroke-width:3;stroke-dasharray:14 16;animation:hx-march 3s linear infinite}
.hx-route.r2{stroke:rgba(198,255,61,.45);animation-duration:4.2s}
@keyframes hx-march{to{stroke-dashoffset:-60}}
.hx-ping{fill:none;stroke:#FF3F5C;stroke-width:3;transform-box:fill-box;transform-origin:center;opacity:0;animation:hx-ping 3.6s ease-out infinite}
@keyframes hx-ping{0%{opacity:.95;transform:scale(.4)}70%,100%{opacity:0;transform:scale(3.2)}}
.hx-me circle{fill:rgba(198,255,61,.25);stroke:var(--lime);stroke-width:2}
.hx-me path{fill:var(--lime)}
.hx-me{animation:hx-me 2.2s ease-in-out infinite}
@keyframes hx-me{50%{opacity:.55}}
.hx-beam{position:absolute;top:0;bottom:0;width:22%;left:-25%;
  background:linear-gradient(90deg,transparent,rgba(47,134,255,.16),rgba(92,168,255,.28),rgba(47,134,255,.16),transparent);
  animation:hx-beam 7s linear infinite}
@keyframes hx-beam{to{left:110%}}

.hx-grain{position:absolute;inset:-50%;z-index:2;pointer-events:none;opacity:.07;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation:hx-grain 1.2s steps(6) infinite}
@keyframes hx-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}

/* The signature: low-health vignette on a two-beat heartbeat */
.hx-lowhp{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.35;
  background:radial-gradient(ellipse 70% 62% at 50% 50%,transparent 52%,rgba(255,31,68,.16) 74%,rgba(255,31,68,.55) 100%);
  animation:hx-beat 1.35s ease-out infinite}
@keyframes hx-beat{0%{opacity:.30}8%{opacity:.95}16%{opacity:.45}26%{opacity:.85}40%,100%{opacity:.30}}

/* ---- HUD layer ---- */
.hx-hud{position:absolute;inset:0;z-index:5;pointer-events:none}
.hx-hud > *{pointer-events:auto}
.hx-lab{font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.24em;text-transform:uppercase;color:#8C9AB8}
.hx-spawn{opacity:0;animation:hx-spawn .7s cubic-bezier(.2,.8,.2,1) forwards}
@keyframes hx-spawn{from{opacity:0;transform:translateY(10px);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
.hx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

.hx-plate{position:absolute;top:calc(var(--nav-h) + 12px);left:clamp(16px,2.6vw,40px);display:flex;gap:.8rem;align-items:center;animation-delay:.35s}
.hx-hex{width:52px;height:58px;display:grid;place-items:center;color:var(--hp);background:rgba(255,31,68,.1);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.hx-hex svg{width:26px;height:26px}
.hx-meter{width:220px}
.hx-row{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.hx-row .hx-lab{white-space:nowrap}
.hx-num{font-family:var(--display);font-weight:800;font-size:2.1rem;line-height:1;color:var(--hp);animation:hx-crit 1.35s ease-out infinite}
.hx-num small{font-size:.9rem;color:#8C9AB8;margin-left:.2rem}
@keyframes hx-crit{0%,40%,100%{opacity:1}8%,26%{opacity:.55}}
.hx-bar{height:8px;margin-top:.45rem;background:rgba(255,255,255,.08);position:relative;clip-path:polygon(0 0,calc(100% - 6px) 0,100% 100%,0 100%)}
.hx-bar i{position:absolute;inset:0 auto 0 0;width:3%;background:var(--hp);box-shadow:0 0 14px var(--hp)}
.hx-bar::after{content:'';position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 10%,rgba(4,4,10,.9) 10% calc(10% + 2px))}

.hx-timer{position:absolute;top:calc(var(--nav-h) + 12px);left:50%;transform:translateX(-50%);text-align:center;color:var(--text);animation-delay:.5s}
.hx-timer:hover{color:var(--text)}
.hx-timer:hover .hx-seg{border-color:rgba(47,134,255,.7)}
.hx-clock{display:flex;gap:.35rem;justify-content:center;margin-top:.35rem}
.hx-seg{min-width:52px;padding:.35rem .4rem;background:rgba(9,9,20,.72);border:1px solid rgba(47,134,255,.3);backdrop-filter:blur(6px);transition:border-color .2s}
.hx-seg b{display:block;font-family:var(--display);font-weight:800;font-size:1.7rem;line-height:1;font-variant-numeric:tabular-nums}
.hx-seg small{font-family:var(--display);font-weight:700;font-size:.58rem;letter-spacing:.2em;color:#8C9AB8}
.hx-ev{margin-top:.45rem;font-family:var(--display);font-weight:700;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-blue-hi)}

.hx-feed{position:absolute;top:calc(var(--nav-h) + 12px);right:clamp(16px,2.6vw,40px);width:340px;
  display:flex;flex-direction:column;gap:.35rem;align-items:flex-end;animation-delay:.65s}
.hx-kill{display:flex;align-items:center;gap:.55rem;padding:.38rem .7rem;background:rgba(9,9,20,.78);border:1px solid rgba(255,255,255,.08);
  font-family:var(--display);font-weight:700;font-size:.95rem;letter-spacing:.04em;white-space:nowrap;max-width:100%;
  backdrop-filter:blur(6px);opacity:0;animation:hx-killin .45s cubic-bezier(.2,.8,.2,1) forwards}
.hx-kill .w{color:var(--cy);overflow:hidden;text-overflow:ellipsis}
.hx-kill .l{color:var(--hp-soft);overflow:hidden;text-overflow:ellipsis}
.hx-kill b{color:#fff;font-variant-numeric:tabular-nums}
.hx-kill .hx-score{color:#8C9AB8;font-size:.82rem;margin-left:.2rem}
.hx-gun{width:30px;height:14px;color:#D8DCEA;flex:0 0 auto}
.hx-kill.live{border-color:rgba(255,31,68,.5)}
.hx-live{font-size:.66rem;letter-spacing:.16em;padding:.1rem .35rem;background:var(--hp);color:#fff}
@keyframes hx-killin{from{opacity:0;transform:translateX(30px)}to{opacity:1;transform:none}}

.hx-mapbox{position:absolute;right:clamp(16px,2.6vw,40px);bottom:calc(28px + env(safe-area-inset-bottom,0px));animation-delay:.8s}
.hx-radar{position:relative;width:176px;height:176px;border-radius:50%;margin-top:.45rem;overflow:hidden;
  background:radial-gradient(circle,rgba(47,134,255,.08) 0 30%,rgba(9,9,20,.8) 70%);
  border:1px solid rgba(47,134,255,.35);box-shadow:inset 0 0 30px rgba(47,134,255,.12)}
.hx-radar::before{content:'';position:absolute;inset:0;border-radius:50%;
  background:repeating-radial-gradient(circle,transparent 0 28px,rgba(47,134,255,.14) 28px 29px),
    linear-gradient(transparent calc(50% - .5px),rgba(47,134,255,.14) 0 calc(50% + .5px),transparent 0),
    linear-gradient(90deg,transparent calc(50% - .5px),rgba(47,134,255,.14) 0 calc(50% + .5px),transparent 0)}
.hx-sweep{position:absolute;inset:0;border-radius:50%;animation:hx-sweep 4s linear infinite;
  background:conic-gradient(from 0deg,rgba(47,134,255,.5),rgba(47,134,255,0) 60deg,transparent 360deg)}
@keyframes hx-sweep{to{transform:rotate(360deg)}}
.hx-blip{position:absolute;width:10px;height:10px;margin:-5px 0 0 -5px;border:1px solid rgba(92,168,255,.7);background:rgba(92,168,255,.15)}
.hx-blip.busy{background:var(--hp);border-color:var(--hp);box-shadow:0 0 10px var(--hp);animation:hx-blip 2s ease-in-out infinite}
@keyframes hx-blip{50%{opacity:.5}}
.hx-you{position:absolute;left:50%;top:50%;width:0;height:0;margin:-6px 0 0 -6px;border:6px solid transparent;border-bottom:11px solid var(--lime);border-top:0}
.hx-key{display:flex;gap:.9rem;margin-top:.5rem}
.hx-key span{display:flex;align-items:center;gap:.35rem;font-family:var(--display);font-weight:600;font-size:.7rem;letter-spacing:.14em;color:#8C9AB8}
.hx-key i{width:8px;height:8px;display:block}
.hx-key .k-busy{background:var(--hp)}
.hx-key .k-free{border:1px solid var(--nav-blue-hi)}

/* ---- Headline and calls to action ---- */
.hx-copy{position:absolute;z-index:6;left:clamp(16px,6vw,110px);top:50%;transform:translateY(-44%);max-width:min(720px,92vw)}
.hx-kicker{display:inline-flex;align-items:center;gap:.6rem;padding:.35rem .8rem;margin-bottom:1.3rem;
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.24em;text-transform:uppercase;color:var(--hp-soft);
  border:1px solid rgba(255,31,68,.4);background:rgba(255,31,68,.08);opacity:0;animation:hx-spawn .6s .15s forwards}
.hx-kicker .d{width:7px;height:7px;border-radius:50%;background:var(--hp);box-shadow:0 0 10px var(--hp);animation:hx-crit 1.35s infinite}
.hx-h1{margin:0;font-family:var(--display);font-weight:800;font-style:italic;text-transform:uppercase;
  font-size:clamp(3.6rem,10.5vw,9.5rem);line-height:.84;letter-spacing:-.025em;color:#fff;text-shadow:none}
.hx-h1 .ln{display:block;position:relative;white-space:nowrap}
.hx-h1 .ln.red{color:var(--hp);text-shadow:0 0 34px rgba(255,31,68,.35)}
.hx-h1 .ln::before,.hx-h1 .ln::after{content:attr(data-t);position:absolute;inset:0;opacity:0;pointer-events:none}
.hx-h1 .ln::before{color:var(--cy);transform:translate(-3px,0);clip-path:inset(0 0 55% 0)}
.hx-h1 .ln::after{color:var(--hp);transform:translate(3px,0);clip-path:inset(48% 0 0 0)}
.hx-h1.glitch .ln::before{animation:hx-gl1 .32s steps(2) 1}
.hx-h1.glitch .ln::after{animation:hx-gl2 .32s steps(2) 1}
@keyframes hx-gl1{0%,100%{opacity:0}30%{opacity:.85;transform:translate(-6px,-2px);clip-path:inset(8% 0 62% 0)}60%{opacity:.85;transform:translate(4px,1px);clip-path:inset(40% 0 30% 0)}}
@keyframes hx-gl2{0%,100%{opacity:0}30%{opacity:.85;transform:translate(6px,2px);clip-path:inset(58% 0 10% 0)}60%{opacity:.85;transform:translate(-4px,-1px);clip-path:inset(22% 0 50% 0)}}
.hx-sub{margin:1.5rem 0 2rem;max-width:44ch;font-size:1.08rem;line-height:1.65;color:#CFCBEA;opacity:0;animation:hx-spawn .7s 1.1s forwards}
.hx-ctas{display:flex;gap:.9rem;flex-wrap:wrap;opacity:0;animation:hx-spawn .7s 1.25s forwards}
.hx-cta{position:relative;display:inline-flex;align-items:center;gap:.7rem;min-height:52px;padding:.9rem 1.7rem;
  font-family:var(--display);font-weight:800;font-size:1.05rem;letter-spacing:.14em;text-transform:uppercase;
  clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:transform .15s ease,box-shadow .2s ease;overflow:hidden}
.hx-cta.primary{background:var(--hp);color:#fff}
.hx-cta.primary:hover{color:#fff;box-shadow:0 0 36px rgba(255,31,68,.65)}
.hx-cta.primary::after{content:'';position:absolute;inset:0;transform:translateX(-110%);background:linear-gradient(100deg,transparent,rgba(255,255,255,.4),transparent);transition:transform .55s ease}
.hx-cta.primary:hover::after{transform:translateX(110%)}
.hx-cta.ghost{color:#fff;background:rgba(47,134,255,.1);box-shadow:inset 0 0 0 1px rgba(47,134,255,.55)}
.hx-cta.ghost:hover{color:#fff;background:rgba(47,134,255,.2)}
.hx-cta kbd{font-family:var(--display);font-weight:700;font-size:.78rem;padding:.12rem .4rem;border:1px solid currentColor;opacity:.75}
.hx-cta:active{transform:translateY(1px)}

/* ---- Crosshair ---- */
.hx-xh{position:fixed;left:0;top:0;z-index:50;width:44px;height:44px;margin:-22px 0 0 -22px;pointer-events:none;opacity:0;transition:opacity .2s}
.hx-xh.on{opacity:1}
.hx-xh i{position:absolute;background:#fff;box-shadow:0 0 4px rgba(0,0,0,.9);transition:all .15s ease}
.hx-xh .t{left:21px;top:4px;width:2px;height:10px}.hx-xh .b{left:21px;bottom:4px;width:2px;height:10px}
.hx-xh .l{top:21px;left:4px;width:10px;height:2px}.hx-xh .r{top:21px;right:4px;width:10px;height:2px}
.hx-xh .c{left:20px;top:20px;width:4px;height:4px;border-radius:50%}
.hx-xh.lock i{background:var(--hp)}
.hx-xh.lock .t{top:10px}.hx-xh.lock .b{bottom:10px}.hx-xh.lock .l{left:10px}.hx-xh.lock .r{right:10px}
.hx-hit{position:fixed;z-index:51;width:34px;height:34px;margin:-17px 0 0 -17px;pointer-events:none;animation:hx-hit .32s ease-out forwards}
.hx-hit i{position:absolute;left:16px;top:3px;width:2px;height:10px;background:#fff;box-shadow:0 0 6px rgba(255,255,255,.8);transform-origin:1px 14px}
.hx-hit i:nth-child(1){transform:rotate(45deg)}.hx-hit i:nth-child(2){transform:rotate(135deg)}
.hx-hit i:nth-child(3){transform:rotate(225deg)}.hx-hit i:nth-child(4){transform:rotate(315deg)}
@keyframes hx-hit{from{opacity:1;transform:scale(.7)}to{opacity:0;transform:scale(1.35)}}
@media (hover:none),(pointer:coarse){.hx-xh,.hx-hit{display:none}}

.hx-cue{position:absolute;z-index:6;left:50%;bottom:calc(26px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.36em;color:#8C9AB8;text-align:center}
.hx-cue::after{content:'';display:block;width:2px;height:34px;margin:.6rem auto 0;background:linear-gradient(var(--hp),transparent);animation:drop 1.9s ease-in-out infinite}

/* ---- Responsive ---- */
@media (max-width:1400px){ .hx-feed{width:280px} .hx-kill{font-size:.88rem} .hx-ev{font-size:.74rem} }
@media (max-width:1240px){ .hx-mapbox{display:none} }
@media (max-width:1180px){ .hx-seg{min-width:46px} .hx-seg b{font-size:1.45rem} }
@media (max-width:1100px){ .hx-timer{display:none} }
@media (max-height:780px) and (min-width:721px){
  .hx-copy{top:calc(50% + 34px);transform:translateY(-50%)}
  .hx-h1{font-size:clamp(3.2rem,7.4vw,6.6rem)}
  .hx-kicker{margin-bottom:.9rem}
  .hx-sub{margin:1rem 0 1.4rem}
}
@media (hover:none),(pointer:coarse){ .hx-cta kbd{display:none} }
@media (max-width:720px){
  .hx{min-height:680px}
  .hx-feed{display:none}
  .hx-plate{top:calc(var(--nav-h) + 10px)}
  .hx-hex{width:44px;height:50px}
  .hx-meter{width:190px}
  .hx-row .hx-lab{letter-spacing:.16em}
  .hx-h1{font-size:clamp(3.8rem,19vw,6rem)}
  .hx-copy{top:auto;left:18px;right:18px;bottom:calc(56px + env(safe-area-inset-bottom,0px));transform:none}
  .hx-sub{font-size:1rem;margin:1.1rem 0 1.4rem}
  .hx-ctas{flex-direction:column;align-items:stretch;gap:.7rem}
  .hx-cta{justify-content:center;min-height:50px;padding:.8rem 1.3rem;font-size:.98rem}
  .hx-cue{display:none}
}
@media (max-width:720px) and (max-height:800px){
  .hx-h1{font-size:clamp(3.2rem,15.5vw,5rem)}
  .hx-kicker{margin-bottom:.8rem}
  .hx-sub{font-size:.95rem;line-height:1.55;margin:.9rem 0 1.2rem}
  .hx-cta{min-height:46px}
}
@media (prefers-reduced-motion:reduce){
  .hx-lowhp{opacity:.45}
  .hx-spawn,.hx-kicker,.hx-sub,.hx-ctas,.hx-kill{opacity:1}
  .hx-xh,.hx-hit{display:none}
  .hx{cursor:auto}
}

/* Tables scroll sideways inside their box on narrow screens instead of
   stretching the page. A table wider than the viewport used to widen the
   whole layout on phones, which pushed the fixed navbar's menu button
   off-screen. */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%}
.tablescroll > .ladder{min-width:520px}
/* Safety net: nothing may widen the page. clip, unlike hidden, creates no
   scroll container, so position:sticky keeps working. */
html,body{overflow-x:clip}

/* =========================================================
   ACCOUNT DROPDOWN — the profile chip opens every section
   of your account from anywhere on the site.
   ========================================================= */
.acct{position:relative}
.account-chip{cursor:pointer;background:transparent;font:inherit}
.account-chip .caret{color:#8C9AB8;transition:transform .2s ease;flex:0 0 auto}
.account-chip[aria-expanded="true"]{border-color:var(--nav-blue);color:#fff;background:rgba(47,134,255,.12)}
.account-chip[aria-expanded="true"] .caret{transform:rotate(180deg);color:#fff}
.avatar-letter{
  display:grid;place-items:center;width:30px;height:30px;border-radius:50%;
  background:linear-gradient(145deg,#8A4DFF,#C04BD8);color:#fff;
  font-family:var(--display);font-weight:800;font-size:.95rem;border:1px solid rgba(47,134,255,.5)
}
.acct-name{max-width:12ch;overflow:hidden;text-overflow:ellipsis}

.acct-menu{
  position:absolute;right:0;top:calc(100% + 12px);z-index:40;width:260px;
  background:#050812;border:1px solid rgba(47,134,255,.4);
  box-shadow:0 18px 44px rgba(0,0,0,.6);padding:.35rem;
  animation:acct-in .16s ease-out;
}
.acct-menu[hidden]{display:none}
/* corner accent, same language as the navbar brackets */
.acct-menu::before{content:'';position:absolute;top:-1px;left:-1px;width:14px;height:14px;
  border-top:2px solid var(--nav-blue);border-left:2px solid var(--nav-blue)}
@keyframes acct-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.acct-head{padding:.8rem .8rem .7rem;border-bottom:1px solid rgba(47,134,255,.2);margin-bottom:.3rem}
.acct-head b{display:block;font-family:var(--display);font-weight:800;font-size:1.05rem;color:#fff;
  letter-spacing:.02em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-head span{display:block;margin-top:.15rem;font-size:.78rem;color:#8C9AB8;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acct-group{display:flex;flex-direction:column;padding:.2rem 0;margin:0}
.acct-group + .acct-group{border-top:1px solid rgba(47,134,255,.14)}
.acct-group a,.acct-out{
  display:flex;align-items:center;min-height:42px;padding:.5rem .8rem;width:100%;
  font-family:var(--display);font-weight:700;font-size:.92rem;letter-spacing:.09em;text-transform:uppercase;
  color:#C4CDE2;background:none;border:0;border-left:2px solid transparent;text-align:left;cursor:pointer;
}
.acct-group a:hover,.acct-group a:focus-visible,.acct-out:hover,.acct-out:focus-visible{
  color:#fff;background:rgba(47,134,255,.12);outline:none}
.acct-group a.on{color:#fff;border-left-color:var(--nav-blue);background:rgba(47,134,255,.1)}
.acct-group a.staff{color:#FFB020}
.acct-out{color:#FF8FA0}
.acct-out:hover{color:#fff;background:rgba(255,31,68,.15)}

/* Inside the collapsed phone menu the list opens in place, full width */
@media (max-width:1100px){
  .acct{width:100%}
  .acct-menu{position:static;width:auto;margin-top:.5rem;box-shadow:none;animation:none}
  .acct-menu::before{display:none}
}

/* Profile page heading, replacing the old tab bar */
.section-title{display:flex;align-items:baseline;gap:.8rem;margin-bottom:1.8rem;
  padding-bottom:1rem;border-bottom:2px solid var(--edge)}
.section-title .crumb{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.2em;color:#566488}
.section-title h2{margin:0;font-size:clamp(1.6rem,3vw,2.2rem)}

/* ---------- Live scores: filter + team pickers ---------- */
.score-filter{display:flex;align-items:center;gap:.8rem;flex-wrap:wrap;margin-bottom:1.2rem;
  padding:.8rem 1rem;background:var(--plate);border:1px solid var(--edge)}
.score-filter label{margin:0}
.score-filter select{width:auto;min-width:16rem}
.team-pick .other{margin-top:.5rem}
.team-pick select:disabled{opacity:.6}

/* =========================================================
   CONTROL ROOM — login and error pages.
   These render inside admin/app.js, a separate Express app
   with no public navbar, so they need a self-contained shell
   rather than borrowing the site's header. Same design tokens
   (--hp, --nav-blue, --display) so it still reads as 1HP, just
   quieter and more deliberate — this is a staff tool, not the
   hero page.
   ========================================================= */
.ap-login{
  min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:6vh 4vw;position:relative;isolation:isolate;
}
.ap-login::before{
  content:'';position:fixed;inset:0;z-index:-1;
  background:
    radial-gradient(700px 480px at 15% -8%,rgba(255,31,68,.14),transparent 60%),
    radial-gradient(600px 460px at 85% 108%,rgba(47,134,255,.14),transparent 60%),
    var(--void);
}
.ap-login-card{
  position:relative;width:min(440px,100%);padding:2.6rem 2.4rem;
  background:linear-gradient(160deg,var(--plate-2),var(--deck) 62%);
  border:1px solid var(--edge);
}
/* corner brackets, same idea as the public navbar's .hud but its own
   name since this page has no navbar to inherit them from */
.hudc{position:absolute;width:14px;height:14px;border:2px solid var(--nav-blue);pointer-events:none}
.hudc.a{top:-6px;left:-6px;border-right:0;border-bottom:0}
.hudc.b{top:-6px;right:-6px;border-left:0;border-bottom:0}
.hudc.c{bottom:-6px;left:-6px;border-right:0;border-top:0}
.hudc.d{bottom:-6px;right:-6px;border-left:0;border-top:0}

.ap-login-brand{display:flex;align-items:center;gap:.85rem;margin-bottom:2.2rem}
.ap-login-brand .emblem{
  width:46px;height:46px;flex:0 0 auto;display:grid;place-items:center;color:var(--nav-blue-hi);
  background:linear-gradient(145deg,rgba(47,134,255,.18),rgba(14,58,122,.35));
  border:1px solid rgba(47,134,255,.45);
}
.ap-wm{font-family:var(--display);font-weight:800;font-style:italic;font-size:1.3rem;line-height:1;color:#fff}
.ap-wm b{color:var(--hp);margin:0 .05em}
.ap-wm i{font-style:italic;color:var(--nav-blue-hi);margin-left:.14em}
.ap-tag{
  margin-top:.3rem;font-family:var(--display);font-weight:700;font-size:.68rem;
  letter-spacing:.22em;text-transform:uppercase;color:var(--muted);
}

.ap-login-card h1{font-size:1.9rem;margin-bottom:.5rem}
.ap-login-card p.muted{margin-bottom:1.6rem;font-size:.92rem;line-height:1.55}
.ap-login-card label{display:block}
.ap-login-card input[type=email],
.ap-login-card input[type=password],
.ap-login-card input[type=text]{width:100%}

.ap-pw{position:relative}
.ap-pw input{padding-right:4.2rem}
.ap-reveal{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  background:none;border:1px solid var(--edge);color:var(--muted);
  font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;
  padding:.32rem .6rem;cursor:pointer;
}
.ap-reveal:hover,.ap-reveal[aria-pressed="true"]{color:#fff;border-color:var(--nav-blue)}

.ap-foot{margin-top:1.4rem;font-size:.8rem;color:var(--muted);line-height:1.6}
.ap-foot code{
  background:rgba(47,134,255,.1);border:1px solid rgba(47,134,255,.25);
  padding:.1rem .35rem;font-size:.85em;color:#C9D6EE;white-space:nowrap;
}
.ap-back{display:inline-block;margin-top:1rem;font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.04em}

/* Flash messages on a page with no shared header still need their box */
.ap-login .flash,.ap-flash{margin:0 0 1.2rem}
.ap-flash{position:fixed;top:1.2rem;left:50%;transform:translateX(-50%);z-index:50;width:min(600px,90vw)}

@media (max-width:480px){
  .ap-login-card{padding:2rem 1.6rem}
}

/* =========================================================
   MEMBERS — neon pink. Deliberately not the brand red (--hp):
   red already means "taken" on the floor grid, so members get
   their own colour that staff can't confuse with anything else.
   ========================================================= */
:root{
  --pink:#FF2BD6;
  --pink-soft:rgba(255,43,214,.14);
  --pink-glow:0 0 18px rgba(255,43,214,.6);
}

.tag-member{color:var(--pink);border-color:var(--pink);text-shadow:0 0 10px rgba(255,43,214,.55)}
.tag-nonmember{color:var(--muted);border-color:var(--edge-hot)}

/* Booking floor: a member's picks glow pink instead of cyan */
.floor-member .slot.sel{background:var(--pink);border-color:var(--pink);color:#1A0014;box-shadow:var(--pink-glow)}
.summary-member{border-color:rgba(255,43,214,.45)}
.summary-member .cost{color:var(--pink)}
.member-note{margin:0 0 .4rem;display:flex;align-items:center;gap:.6rem;font-size:.88rem;color:var(--muted)}
.member-note.is-member{color:var(--pink)}

/* Control room: member rows stand out at a glance */
.ladder tr.row-member td{background:var(--pink-soft)}
.ladder tr.row-member td:first-child{box-shadow:inset 4px 0 0 var(--pink)}
.ladder tr.row-member:hover td{background:rgba(255,43,214,.22)}
.ladder tr.row-member b,
.ladder tr.row-member .booker{color:var(--pink);text-shadow:0 0 12px rgba(255,43,214,.5)}
.member-legend{display:flex;gap:1.4rem;margin:.2rem 0 1rem;font-size:.82rem;color:var(--muted)}
.member-legend span{display:inline-flex;align-items:center;gap:.45rem}
.dot{display:inline-block;width:.7rem;height:.7rem;border-radius:50%}
.dot-member{background:var(--pink);box-shadow:var(--pink-glow)}
.dot-nonmember{background:transparent;border:1px solid var(--edge-hot)}

/* Edit profile: member / non-member choice as two big cards */
.profile-form{max-width:820px}
.profile-form:hover{transform:none}
.member-pick{border:0;padding:0;margin:0 0 1.6rem;display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.member-pick legend{
  grid-column:1/-1;font-family:var(--display);font-weight:800;font-size:1.35rem;
  color:var(--text);margin-bottom:.8rem;padding:0;
}
.member-opt{margin:0;text-transform:none;letter-spacing:0;cursor:pointer;display:block}
.member-opt input{position:absolute;opacity:0;pointer-events:none}
.member-card{
  display:block;padding:1.1rem 1.2rem;border:1px solid var(--edge);background:#0C0A1C;
  clip-path:var(--clip-sm);transition:border-color .18s,background .18s,box-shadow .18s;
}
.member-card b{display:block;font-family:var(--display);font-size:1.25rem;color:var(--text);letter-spacing:.04em}
.member-card small{display:block;margin-top:.3rem;font-family:var(--body);font-size:.84rem;color:var(--muted);font-weight:400}
.member-opt input:focus-visible + .member-card{outline:2px solid var(--cy);outline-offset:2px}
.member-opt input:checked + .member-card{border-color:var(--cy);background:rgba(0,224,255,.07)}
.member-opt.is-member input:checked + .member-card{border-color:var(--pink);background:var(--pink-soft);box-shadow:var(--pink-glow)}
.member-opt.is-member input:checked + .member-card b{color:var(--pink)}
.profile-fields{gap:1rem 1.4rem}
.profile-fields input[readonly]{opacity:.6;cursor:not-allowed}

/* Sign in / sign up */
.auth-band{min-height:78vh;display:grid;place-items:center;padding-top:7rem}
.auth-shell{max-width:470px;width:100%}
.auth-card{padding:2.4rem 2.4rem 2rem}
.auth-card:hover{transform:none}
.auth-switch{display:grid;grid-template-columns:1fr 1fr;border:1px solid var(--edge);margin-bottom:1.6rem}
.auth-switch a{
  text-align:center;padding:.7rem 0;font-family:var(--display);font-weight:800;font-size:1rem;
  letter-spacing:.08em;color:var(--muted);transition:color .15s,background .15s;
}
.auth-switch a:hover{color:var(--text)}
.auth-switch a.on{color:#fff;background:linear-gradient(100deg,var(--hp),var(--vi))}
.auth-title{font-size:2.1rem;margin:0 0 .3rem}
.auth-lede{margin:0 0 1rem;font-size:.95rem}
.auth-form label{margin-top:1rem}
.auth-hint{display:block;margin-top:.35rem;font-size:.78rem}
.pw-wrap{position:relative}
.pw-wrap input{padding-right:4.2rem}
.pw-toggle{
  position:absolute;right:.5rem;top:50%;transform:translateY(-50%);background:none;border:0;
  color:var(--cy);font-family:var(--display);font-weight:700;font-size:.85rem;letter-spacing:.06em;cursor:pointer;padding:.3rem .5rem;
}
.auth-agree{margin-top:1.1rem;text-transform:none;letter-spacing:0;font-family:var(--body);font-weight:400;font-size:.88rem;display:flex;gap:.6rem;align-items:flex-start}
.auth-submit{width:100%;justify-content:center;margin-top:1.4rem}
.auth-foot{font-size:.88rem;margin:1rem 0 0;text-align:center}
.auth-or{display:flex;align-items:center;gap:.9rem;margin:1.5rem 0 1.1rem;color:var(--muted);font-size:.8rem}
.auth-or::before,.auth-or::after{content:'';flex:1;height:1px;background:var(--edge)}
.auth-google{width:100%;justify-content:center;gap:.6rem}
.auth-note{font-size:.76rem;margin:.9rem 0 0;text-align:center}

@media (max-width:640px){
  .member-pick{grid-template-columns:1fr}
  .auth-card{padding:1.8rem 1.4rem}
}

/* =========================================================
   WHATSAPP BOOKING REQUESTS
   WhatsApp's own green is used only on the request button and
   its follow-ups, so it always means "this goes to WhatsApp".
   ========================================================= */
:root{ --wa:#25D366; --wa-deep:#128C7E; }

.btn-wa{
  background:var(--wa);color:#04130B;display:inline-flex;align-items:center;gap:.55rem;
  box-shadow:0 0 0 rgba(37,211,102,0);transition:background .18s,box-shadow .22s,transform .18s;
}
.btn-wa:hover{background:#34e57a;box-shadow:0 0 26px rgba(37,211,102,.45);transform:translateY(-2px)}
.btn-wa:disabled{background:var(--edge-hot);color:var(--muted);box-shadow:none;transform:none;cursor:not-allowed}
.btn-wa svg{flex:none}

.wa-fields{gap:1rem 1.2rem;margin-top:1.4rem}
.wa-fields label{margin-bottom:.4rem}

.wa-result{
  margin-top:1.3rem;padding:1.1rem 1.2rem;border-left:4px solid var(--wa);
  background:rgba(37,211,102,.08);clip-path:var(--clip-sm);font-size:.92rem;
}
.wa-result.warn{border-left-color:#FFB020;background:rgba(255,176,32,.09)}
.wa-result b{font-family:var(--display);font-size:1.05rem;letter-spacing:.04em}
.wa-result p{margin:.5rem 0 0;color:var(--muted)}
.wa-actions{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:.9rem}
.wa-preview{
  margin:.9rem 0 0;padding:.9rem 1rem;max-height:230px;overflow:auto;
  background:#0A0818;border:1px solid var(--edge);font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.78rem;line-height:1.55;color:var(--muted);white-space:pre-wrap;word-break:break-word;
}

/* Booking reference, on the player's list and in the control room */
.ref{font-size:.82rem;letter-spacing:.06em;color:var(--cy)}

/* Control room booking filters */
.book-filters{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center;margin:.8rem 0 1rem}
.chip{
  font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.1em;text-transform:uppercase;
  padding:.4rem .9rem;border:1px solid var(--edge);color:var(--muted);clip-path:var(--clip-btn);
  transition:color .16s,border-color .16s,background .16s;
}
.chip:hover{color:var(--text);border-color:var(--edge-hot)}
.chip.on{color:#03121A;background:var(--cy);border-color:var(--cy)}
.date-filter{display:flex;align-items:center;gap:.5rem;margin-left:auto}
.date-filter label{margin:0}
.date-filter input{width:auto;padding:.45rem .7rem;font-size:.85rem}

.tag-expired{color:#FFB020;border-color:rgba(255,176,32,.45)}

@media (max-width:760px){
  .wa-fields{grid-template-columns:1fr}
  .date-filter{margin-left:0;width:100%}
  .btn-wa{width:100%;justify-content:center}
}

/* The bookings table carries ten columns once the booking ID is there.
   Let it scroll sideways rather than squash times and buttons into stacks. */
.tablewrap.wide .ladder{min-width:1040px}
.tablewrap.wide .ladder td{vertical-align:middle}
.tablewrap.wide .ladder td.mono{white-space:nowrap}
.tablewrap.wide .ref{white-space:nowrap}
.tablewrap.wide .actions{display:flex;flex-wrap:wrap;gap:.4rem}
.tablewrap.wide .actions .btn{white-space:nowrap}
.tablewrap.wide .ladder th{padding-inline:.7rem}
.tablewrap.wide .ladder td{padding-inline:.7rem}
/* The status wording is long; let it use two lines instead of pushing
   the action buttons off the screen. */
.tablewrap.wide .tag{white-space:normal;line-height:1.25}

/* =========================================================
   LIVE SCORING
   ========================================================= */

/* ---- Control room: rosters inside a match card ---- */
.rosters{margin:.9rem 0 0;border-top:1px solid var(--edge);padding-top:.8rem}
.rosters>summary{
  cursor:pointer;font-family:var(--display);font-weight:700;font-size:.85rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--cy);list-style:none;
}
.rosters>summary::-webkit-details-marker{display:none}
.rosters>summary::before{content:'▸ ';transition:none}
.rosters[open]>summary::before{content:'▾ '}
.roster-body{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem;margin-top:.9rem}
/* Grid columns refuse to shrink below their content unless told to, which
   pushed the second roster off the card. */
.roster{min-width:0;overflow-x:auto}
.roster h4{
  font-family:var(--display);font-size:1rem;letter-spacing:.06em;margin:0 0 .5rem;color:var(--text);
}
.ptable{width:100%;border-collapse:collapse;font-size:.85rem}
.ptable th{
  text-align:left;font-family:var(--display);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:.3rem .35rem;font-weight:700;
}
.ptable td{padding:.3rem .35rem;border-top:1px solid var(--edge)}
.ptable .pname{white-space:nowrap;font-weight:600}
.ptable th:not(:first-child){text-align:center}
.pstat{white-space:nowrap}
.pstep{
  width:1.35rem;height:1.5rem;border:1px solid var(--edge-hot);background:#0C0A1C;color:var(--cy);
  font-size:.95rem;line-height:1;cursor:pointer;transition:background .14s,color .14s,border-color .14s;
}
.pstep:hover{background:var(--cy);color:#03121A;border-color:var(--cy)}
.pval{
  width:2.6rem;padding:.2rem .15rem;margin:0 .12rem;text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;
}
/* Chrome's number spinners eat the little space these cells have */
.pval::-webkit-outer-spin-button,.pval::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.pval{-moz-appearance:textfield}
.psaved{width:1.6rem;font-size:.75rem;color:var(--lime);text-align:center}
.psaved.err{color:var(--hp)}

/* ---- Public live page ---- */
.live-band{padding-top:7.5rem}
.live-head{display:flex;align-items:flex-start;gap:1.2rem;flex-wrap:wrap;margin-bottom:1.6rem}
.live-title{font-size:2.6rem;margin:0 0 .2rem}
.live-pulse{
  margin-left:auto;display:inline-flex;align-items:center;gap:.5rem;padding:.42rem .9rem;
  border:1px solid var(--edge-hot);font-family:var(--display);font-size:.78rem;
  letter-spacing:.1em;text-transform:uppercase;color:var(--muted);
}
.live-pulse i{width:.55rem;height:.55rem;border-radius:50%;background:var(--muted)}
.live-pulse[data-state="on"]{color:var(--lime);border-color:rgba(168,255,79,.4)}
.live-pulse[data-state="on"] i{background:var(--lime);animation:live-blip 1.6s ease-in-out infinite}
@keyframes live-blip{0%,100%{opacity:1;box-shadow:0 0 0 rgba(168,255,79,.6)}50%{opacity:.45;box-shadow:0 0 12px rgba(168,255,79,.7)}}

.live-list{display:grid;gap:1.1rem}
.live-card{
  padding:1.2rem 1.4rem;border:1px solid var(--edge);background:var(--panel);
  clip-path:var(--clip-sm);transition:border-color .2s;
}
.live-card.is-live{border-color:rgba(255,45,85,.45)}
.live-card>header{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin-bottom:.7rem;font-size:.85rem}
.live-score{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:1rem}
.live-score .team{font-family:var(--display);font-size:1.25rem;letter-spacing:.03em}
.live-score .team.right{text-align:right}
.live-score .nums{font-family:var(--display);font-size:2.1rem;letter-spacing:.04em;white-space:nowrap}
.live-score .nums b{color:var(--text)}
.live-score .nums i{color:var(--muted);font-style:normal;margin:0 .45rem}
.live-card .detail{margin:.6rem 0 0;font-size:.85rem}

.live-players{width:100%;border-collapse:collapse;margin-top:1rem;font-size:.86rem}
.live-players th{
  text-align:left;font-family:var(--display);font-size:.68rem;letter-spacing:.09em;
  text-transform:uppercase;color:var(--muted);padding:.4rem .5rem;border-bottom:1px solid var(--edge);
}
.live-players td{padding:.4rem .5rem;border-top:1px solid rgba(255,255,255,.04)}
.live-players th:not(:first-child),.live-players td:not(:first-child){text-align:right;width:3.6rem}
.live-players .pts{color:var(--lime);font-weight:700}
.live-players .side-a td:first-child{box-shadow:inset 3px 0 0 var(--cy)}
.live-players .side-b td:first-child{box-shadow:inset 3px 0 0 var(--vi)}

@media (max-width:760px){
  .roster-body{grid-template-columns:1fr}
  .live-title{font-size:2rem}
  .live-score{grid-template-columns:1fr;gap:.35rem;text-align:center}
  .live-score .team.right{text-align:center}
  .live-pulse{margin-left:0}
}

/* Public live page: one stats table per team, side by side */
.live-rosters{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;margin-top:1.1rem}
.live-roster{min-width:0;overflow-x:auto}
.live-roster h4{
  font-family:var(--display);font-size:.95rem;letter-spacing:.05em;margin:0 0 .3rem;color:var(--text);
}
.live-roster .live-players{margin-top:.2rem}
@media (max-width:760px){ .live-rosters{grid-template-columns:1fr} }

/* =========================================================
   SIGN IN / SIGN UP — Google first, then email
   ========================================================= */
.btn-google{
  background:#fff;color:#1F1F1F;border:1px solid #DADCE0;
  display:inline-flex;align-items:center;justify-content:center;gap:.7rem;
  font-family:var(--body);font-weight:600;letter-spacing:0;text-transform:none;font-size:.98rem;
  clip-path:none;border-radius:4px;transition:box-shadow .16s,background .16s,transform .16s;
}
.btn-google:hover{background:#F7F8F8;box-shadow:0 1px 10px rgba(0,0,0,.35);transform:translateY(-1px)}
.btn-google .g-mark{display:inline-flex;flex:none}
.auth-google{width:100%;margin-bottom:.7rem}

.label-row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-top:1rem}
.label-row label{margin-top:0}
.label-link{font-size:.82rem;color:var(--cy);white-space:nowrap}
.label-link:hover{text-decoration:underline}

.auth-actions{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:.6rem;
  margin-top:1.1rem;font-size:.88rem;
}
.linkbtn{
  background:none;border:0;padding:0;cursor:pointer;color:var(--cy);
  font-family:var(--body);font-size:.88rem;
}
.linkbtn:hover{text-decoration:underline}
.nowrap{white-space:nowrap}

/* The 6-digit code: big, spaced, and a number pad on phones */
.otp-input{
  width:100%;text-align:center;letter-spacing:.5em;text-indent:.5em;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:1.9rem;padding:.65rem .4rem;
}
.otp-input::placeholder{color:#2A2544;letter-spacing:.5em}

/* ---------- Responsive: phone, tablet, desktop ----------
   The auth card was fixed-width, which left it cramped on a phone and
   stranded in the corner on a tablet. */
@media (max-width:900px){
  .auth-band{padding-top:6.5rem}
}
@media (max-width:620px){
  .auth-band{padding-top:5.5rem;padding-bottom:3rem;min-height:auto}
  .auth-shell{max-width:100%;padding-left:1rem;padding-right:1rem}
  .auth-card{padding:1.5rem 1.15rem}
  .auth-title{font-size:1.6rem;line-height:1.15}
  .auth-lede{font-size:.9rem}
  .auth-switch a{font-size:.9rem;padding:.6rem 0}
  /* Anything under 16px makes iPhones zoom in when a field is tapped */
  .auth-form input{font-size:16px;padding:.7rem .8rem}
  .otp-input{font-size:1.6rem;letter-spacing:.38em;text-indent:.38em}
  .btn-google{font-size:.92rem;padding:.75rem 1rem}
  .auth-note,.auth-hint{font-size:.78rem}
}
@media (max-width:380px){
  .auth-card{padding:1.2rem .9rem}
  .otp-input{font-size:1.35rem;letter-spacing:.28em;text-indent:.28em}
  .btn-google{gap:.45rem;font-size:.86rem}
}

/* =========================================================
   PHONE LAYOUT
   The booking grid is a wide table: fine on a laptop, but on a
   phone it pushed every time slot off-screen — you saw station
   names and had to scroll sideways ~500px to reach an hour.
   Below 760px the same table is restacked as one card per
   station, with the hours wrapping underneath. No markup or
   JavaScript changes, so the booking logic is untouched.
   ========================================================= */
@media (max-width:760px){
  .floor{overflow-x:visible;border:0;background:none}
  .floor table{min-width:0;width:100%;display:block}
  .floor thead{display:none}              /* the hour row is on each chip instead */
  .floor tbody{display:block}

  /* Each station is a card; the hour chips auto-fit the width, so this
     works from a 320px phone up to a small tablet without magic numbers. */
  .floor tr{
    display:grid;grid-template-columns:repeat(auto-fill,minmax(46px,1fr));gap:.4rem;
    border:1px solid var(--edge);background:var(--deck);
    margin-bottom:.9rem;padding:.85rem .8rem;clip-path:var(--clip-sm);
  }
  .floor td{display:block;border:0;padding:0;text-align:center}

  .floor td.rig{
    grid-column:1 / -1;min-width:0;padding:0 0 .55rem;
    text-align:left;border-bottom:1px solid var(--edge);
  }
  .floor .rig b{font-size:1.15rem}
  .floor .rig small{font-size:.8rem}

  .slot{
    width:100%;height:44px;font-family:ui-monospace,Menlo,Consolas,monospace;
    font-size:.82rem;font-weight:700;
  }
  /* The hour has to be readable on the chip now that the header row is gone */
  .slot::after{content:attr(data-hour)}
  .slot.past::after{opacity:.45}
}

/* Very narrow phones: slightly smaller chips, still a comfortable target */
@media (max-width:360px){
  .floor tr{grid-template-columns:repeat(auto-fill,minmax(42px,1fr));gap:.32rem}
  .slot{height:42px;font-size:.78rem}
}

/* ---- Phone: readable text and thumb-sized targets ----
   The audit found 9–11px text and links only 16–26px tall. Apple and
   Google both put the comfortable minimum around 44px. */
@media (max-width:760px){
  /* Nothing below 12px on a phone; these are set tiny for desktop density */
  .muted, small, .auth-note, .auth-hint, figcaption,
  .card small, .tag, .chip{font-size:.8rem}
  small.muted, .auth-note, .auth-hint{font-size:.78rem}
  .eyebrow, .kicker{font-size:.72rem}
  /* Hero and countdown labels were 9–11px — legible on a monitor a foot
     away, not on a phone held at arm's length */
  .hx-lab, .count small, .count .unit{font-size:.78rem}
  .brand small{font-size:.7rem}

  /* Footer links are stacked, one per line. They must stay block-level —
     inline-block made them run together as one sentence. */
  .foot a{display:block;padding:.5rem 0;line-height:1.35}
  .foot .brand, .foot .brand a{display:inline-block;padding:0}
  /* Card titles are links too — give them a tappable band, not bigger type */
  h3 a, h2 a{display:inline-block;padding:.45rem 0}

  /* Narrow tables (registered teams, the event facts panel) were forced to
     520px, so they scrolled sideways on a phone with half the columns hidden.
     They have few columns and fit fine once that floor is lifted. */
  .tablescroll > .ladder{min-width:0}
  .tablescroll .ladder{font-size:.85rem}
  .tablescroll .ladder th, .tablescroll .ladder td{padding:.55rem .4rem}
  .tablescroll .ladder th:first-child, .tablescroll .ladder td:first-child{padding-left:.2rem}
  .tablescroll .ladder td{word-break:break-word}
  /* Status pills were splitting mid-word ("APPROV / ED") */
  .tablescroll .ladder .tag{white-space:nowrap;font-size:.68rem;padding:.2rem .4rem}

  /* The header is fixed, so jumping to a section used to hide its heading
     underneath it. */
  html{scroll-padding-top:5.5rem}
  .label-link{padding:.35rem 0}
  .auth-foot a, .auth-actions a, .linkbtn{display:inline-block;padding:.45rem .2rem}
  .pw-toggle{min-height:44px;min-width:56px}

  /* Buttons and form controls: never smaller than a fingertip */
  .btn{min-height:46px;display:inline-flex;align-items:center;justify-content:center}
  .btn.mini{min-height:40px}
  input, select, textarea{min-height:46px}
  /* 16px stops iOS zooming in when a field is tapped */
  input, select, textarea{font-size:16px}
  .cart-row input, .cart-row select{font-size:16px}
}