:root {
  --ep-font: Inter, "Segoe UI Variable", "Segoe UI", system-ui, sans-serif;
  --ep-bg: #07100f; --ep-bg-raised: #0d1917; --ep-surface: #12211e;
  --ep-surface-2: #192c28; --ep-text: #f2f6f4; --ep-muted: #9eafa9;
  --ep-accent: #64e0ac; --ep-accent-ink: #062016; --ep-gold: #e9c86b;
  --ep-danger: #ff7878; --ep-border: rgba(255,255,255,.10);
  --ep-radius-sm: 8px; --ep-radius: 14px; --ep-radius-lg: 22px;
  --ep-space-1: 4px; --ep-space-2: 8px; --ep-space-3: 12px;
  --ep-space-4: 16px; --ep-space-5: 24px; --ep-space-6: 32px;
  --ep-shadow: 0 20px 60px rgba(0,0,0,.42); --ep-focus: 0 0 0 3px rgba(100,224,172,.3);
}
/* EPC1 — `overflow:hidden` here, and `min-height:0` on BOTH children below. A
   grid track sized `1fr` is `minmax(auto,1fr)`, and its `auto` minimum is the
   largest min-content height among the items in it — so one tall child makes the
   row taller than the fixed container and everything below the fold becomes
   unreachable instead of scrolling. Measured on the 844x390 landscape phone: the
   row resolved to 909 px inside a 390 px shell. */
.epool-shell { position:fixed; inset:0; z-index:100; display:grid; grid-template-columns:230px 1fr;
  overflow:hidden;
  color:var(--ep-text); background:radial-gradient(circle at 75% 10%,#17342d 0,transparent 42%),var(--ep-bg);
  font-family:var(--ep-font); }
.epool-shell[hidden] { display:none; }
.ep-nav { padding:var(--ep-space-5); background:rgba(5,12,11,.82); border-right:1px solid var(--ep-border);
  display:flex; flex-direction:column; gap:var(--ep-space-3); min-height:0; overflow-y:auto; }
.ep-brand { font-size:24px; font-weight:800; letter-spacing:.02em; margin-bottom:var(--ep-space-4); }
.ep-brand span { color:var(--ep-accent); }
.ep-nav button,.ep-button { min-height:44px; border:1px solid var(--ep-border); border-radius:var(--ep-radius-sm);
  background:transparent; color:var(--ep-text); padding:10px 14px; text-align:left; font:600 14px/1 var(--ep-font); }
.ep-nav button:hover,.ep-button:hover { background:var(--ep-surface-2); }
.ep-nav button[aria-current="page"],.ep-button.primary { background:var(--ep-accent); color:var(--ep-accent-ink); border-color:transparent; }
.ep-nav button:focus-visible,.ep-button:focus-visible,.epool-shell input:focus-visible,.epool-shell select:focus-visible { outline:none; box-shadow:var(--ep-focus); }
.ep-nav button:disabled { opacity:.42; cursor:not-allowed; }
.ep-account { margin-top:auto; padding:var(--ep-space-3); background:var(--ep-surface); border-radius:var(--ep-radius); }
.ep-lb-row{display:grid;grid-template-columns:42px 1fr auto;align-items:center;gap:10px;min-height:60px}
.ep-lb-row small{grid-column:2/-1;color:var(--ep-accent)}.ep-lb-promote{border-color:var(--ep-accent)}
.ep-lb-demote{box-shadow:inset 3px 0 0 var(--ep-danger)}.ep-lb-photo,.ep-lb-initials{width:40px;height:40px;border-radius:50%;object-fit:cover;display:grid;place-items:center;background:var(--ep-surface-2);font-weight:700}
.ep-ranked-profile{display:grid;place-items:center;text-align:center}
/* EPC1 — `min-height:0` is load-bearing, not tidying. A grid item's default
   `min-height:auto` makes it grow to its content, which defeats the `1fr` row and
   defeats `overflow:auto` with it: .ep-main became 909 px tall inside a 390 px
   shell on the 844x390 landscape phone, so the bottom of the shop scrolled out of
   the VIEWPORT rather than inside the panel and the Buy button of the second cue
   could not be reached at all. Found by the browser recipe on the phone case. */
.ep-main { overflow:auto; min-height:0; min-width:0; padding:clamp(20px,4vw,54px); }
.ep-view { max-width:1120px; margin:auto; }
.ep-engine-state { margin:0 0 18px; padding:10px 14px; border:1px solid rgba(233,200,107,.34);
  border-radius:var(--ep-radius-sm); background:rgba(233,200,107,.08); color:var(--ep-gold); }
.ep-engine-state.waiting { animation:ep-pulse 1.1s ease-in-out infinite alternate; }
@keyframes ep-pulse { to { opacity:.62; } }
.ep-heading { display:flex; justify-content:space-between; align-items:end; gap:16px; margin-bottom:24px; }
.ep-heading h1 { font-size:clamp(26px,4vw,46px); line-height:1; color:var(--ep-text); margin:0; }
.ep-sub { color:var(--ep-muted); margin-top:8px; }
.ep-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--ep-space-4); }
.ep-card { background:linear-gradient(145deg,var(--ep-surface),var(--ep-bg-raised)); border:1px solid var(--ep-border);
  border-radius:var(--ep-radius-lg); padding:var(--ep-space-5); box-shadow:var(--ep-shadow); }
.ep-card h2,.ep-card h3 { margin:0 0 10px; color:var(--ep-text); }
.ep-card p,.ep-meta { color:var(--ep-muted); }
.ep-actions { display:flex; flex-wrap:wrap; gap:8px; margin-top:16px; }
.ep-actions .ep-button { text-align:center; }
.ep-stat { font-size:30px; font-weight:800; color:var(--ep-accent); }
.ep-price { color:var(--ep-gold); font-weight:800; }
.ep-badge { display:inline-flex; padding:4px 8px; border-radius:999px; background:rgba(100,224,172,.12); color:var(--ep-accent); font-size:12px; }
.ep-form { display:grid; gap:12px; }
.ep-form label { color:var(--ep-muted); }
.epool-shell input:not([type="checkbox"]):not([type="range"]),.epool-shell select { width:100%; min-height:44px; background:var(--ep-bg); color:var(--ep-text);
  border:1px solid var(--ep-border); border-radius:var(--ep-radius-sm); padding:8px 12px; font:inherit; }
.epool-shell input[type="checkbox"] { width:20px; height:20px; min-height:0; accent-color:var(--ep-accent); vertical-align:middle; margin-right:8px; }
.epool-shell input[type="range"] { accent-color:var(--ep-accent); }
.ep-tabs { display:flex; gap:8px; margin-bottom:16px; }
.ep-muted { color:var(--ep-muted); }.ep-error { color:var(--ep-danger); }
.ep-game-tools { position:fixed; z-index:90; left:50%; bottom:16px; transform:translateX(-50%); display:flex; gap:8px;
  padding:8px; border:1px solid var(--ep-border); border-radius:999px; background:rgba(7,16,15,.88); backdrop-filter:blur(12px); }
.ep-game-tools[hidden] { display:none; }
/* EPC1 — 44 px minimum touch target (was 40 px), the same floor the rest of the
   kit uses. The strip stays one pill so the table keeps its share of the screen. */
.ep-game-tools button { min-height:44px; }
body.ep-shell-open > :not(.epool-shell):not(script):not(style):not(link) { visibility:hidden !important; pointer-events:none !important; }
@media (max-width:760px) {
  .epool-shell { grid-template-columns:1fr; grid-template-rows:minmax(0,1fr) 72px; }
  .ep-main { grid-row:1; padding:20px 14px 92px; }.ep-nav { grid-row:2; padding:6px; gap:4px; border:0; border-top:1px solid var(--ep-border);
    flex-direction:row; overflow-x:auto; align-items:center; }.ep-brand,.ep-account { display:none; }
  .ep-nav button { min-width:58px; flex:1 1 0; text-align:center; padding:6px 3px; font-size:9px; line-height:1.15; white-space:normal; }
  .ep-grid { grid-template-columns:1fr; }.ep-heading { align-items:start; flex-direction:column; }
}
@media (orientation:landscape) and (max-height:560px) {
  .epool-shell { grid-template-columns:170px 1fr; grid-template-rows:minmax(0,1fr); }
  .ep-nav { grid-row:1; flex-direction:column; border-right:1px solid var(--ep-border); min-height:0; overflow-y:auto; }
  .ep-main { grid-row:1; grid-column:2; padding:16px; min-height:0; }.ep-nav button { min-width:0; width:100%; }.ep-brand { display:block; font-size:19px; }
}

/* ---- EPI7 : shop vignettes (the visual is what the player gets) ---- */
.ep-shop-card { display:flex; flex-direction:column; }
.ep-thumb { display:block; width:100%; aspect-ratio:1/1; border-radius:var(--ep-radius); overflow:hidden;
  margin-bottom:14px; background:#0b1412; border:1px solid var(--ep-border); }
.ep-thumb img { width:100%; height:100%; object-fit:contain; display:block; }
.ep-thumb-cloth img,.ep-thumb-balls img { object-fit:cover; }
.ep-thumb-swatch { aspect-ratio:1/1; }

/* ---- EPI7 : mode-selection cards (each carries its chosen visual) ---- */
.ep-mode-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:var(--ep-space-4); }
.ep-mode-card { position:relative; display:block; padding:0; border:1px solid var(--ep-border);
  border-radius:var(--ep-radius-lg); overflow:hidden; min-height:190px; cursor:pointer;
  background:var(--mode-bg,#12211e); box-shadow:var(--ep-shadow); color:var(--ep-text); text-align:left; }
.ep-mode-card:hover { transform:translateY(-2px); transition:transform .12s ease; }
.ep-mode-card:focus-visible { outline:none; box-shadow:var(--ep-focus); }
.ep-mode-media { position:absolute; inset:0; }
.ep-mode-media img { width:100%; height:100%; object-fit:cover; display:block; }
/* Bottom-anchored gradient keeps the label readable over ANY photo, PC & mobile,
   without touching the image itself. */
.ep-mode-overlay { position:absolute; inset:0; background:linear-gradient(to top,rgba(4,10,9,.92) 0,rgba(4,10,9,.55) 34%,rgba(4,10,9,.05) 66%,transparent 100%); }
.ep-mode-text { position:absolute; left:0; right:0; bottom:0; padding:16px 18px; display:flex; flex-direction:column; gap:3px; }
.ep-mode-title { font-size:22px; font-weight:800; letter-spacing:.01em; text-shadow:0 2px 10px rgba(0,0,0,.6); }
.ep-mode-sub { font-size:13px; color:#d7e5df; text-shadow:0 1px 6px rgba(0,0,0,.7); }
@media (max-width:760px) { .ep-mode-grid { grid-template-columns:1fr; } .ep-mode-card { min-height:150px; } }

/* ------------------------------------------------------------------------- */
/* EPC1 — cues and chalk.                                                    */
/*                                                                           */
/* Two jobs, one style. In the SHOP: three measured bars plus the figures, so */
/* a glance and a close reading both work. IN MATCH: a single pill at the     */
/* bottom, because the table must stay visible (>= 90 % PC, >= 75 % phone) —  */
/* the wear meter is 4 px tall and the warning is one line that only appears  */
/* when there is something to say. No panel, no dialog, nothing that covers   */
/* the cloth. Margins follow the kit: 12 px PC (--ep-space-3), 10 px phone.   */
/* Touch targets are the kit's 44 px floor.                                   */
/* ------------------------------------------------------------------------- */

/* ---- shop: the three measured bars ---- */
.ep-bars { display:grid; gap:6px; margin:0 0 var(--ep-space-3); }
.ep-bar-row { display:grid; grid-template-columns:minmax(74px,auto) 1fr minmax(52px,auto);
  align-items:center; gap:var(--ep-space-2); font-size:12px; }
.ep-bar-label { color:var(--ep-muted); }
.ep-bar { display:block; height:6px; border-radius:999px; background:rgba(255,255,255,.09);
  overflow:hidden; }
.ep-bar > i { display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--ep-accent),var(--ep-gold)); }
.ep-bar-value { color:var(--ep-text); font-variant-numeric:tabular-nums; text-align:right; font-weight:700; }

/* ---- shop: sections, and the cues you cannot buy ---- */
.ep-shop-section { margin:var(--ep-space-5) 0 var(--ep-space-3); font-size:15px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--ep-muted); }
.ep-card-earned { border-color:rgba(233,200,107,.34); }
.ep-price-earned { color:var(--ep-gold); font-weight:700; font-size:12px; line-height:1.35; }
.ep-badge-locked { background:rgba(233,200,107,.12); color:var(--ep-gold); }

/* ---- in match: the equipment strip ---- */
.ep-chalk-button.needs { border-color:rgba(233,200,107,.55); color:var(--ep-gold); }
.ep-wear { display:flex; flex-direction:column; justify-content:center; gap:3px;
  padding:0 var(--ep-space-3) 0 var(--ep-space-2); max-width:44ch; font-size:12px; }
.ep-wear-line { display:flex; align-items:center; gap:6px; color:var(--ep-muted);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ep-wear-line b { color:var(--ep-text); font-weight:700; }
.ep-wear-sep { opacity:.45; }
.ep-wear-meter { display:block; height:4px; border-radius:999px; background:rgba(255,255,255,.12); overflow:hidden; }
.ep-wear-meter > i { display:block; height:100%; border-radius:999px; background:var(--ep-accent);
  transition:width .18s linear; }
.ep-wear-meter[data-level="half"] > i { background:var(--ep-gold); }
.ep-wear-meter[data-level="low"]  > i { background:#f0a44a; }
.ep-wear-meter[data-level="bare"] > i { background:var(--ep-danger); }
.ep-wear-meter[data-level="bare"] { background:rgba(255,120,120,.28); }
.ep-wear-warn { font-size:11px; line-height:1.3; font-weight:600; color:var(--ep-gold);
  white-space:normal; }
.ep-wear-warn[data-level="danger"] { color:var(--ep-danger); }
.ep-wear-warn[hidden] { display:none; }

@media (max-width:760px) {
  /* 10 px margins on a phone, and the strip may take a second line for the
     warning — still far less than a quarter of the screen. */
  .ep-game-tools { bottom:10px; left:10px; right:10px; transform:none;
    border-radius:var(--ep-radius-lg); justify-content:flex-start; padding:var(--ep-space-2); }
  .ep-wear { max-width:none; flex:1 1 auto; min-width:0; padding-right:var(--ep-space-2); }
  .ep-bar-row { grid-template-columns:minmax(64px,auto) 1fr minmax(46px,auto); font-size:11px; }
}

/* EPC1 — short landscape screens (the 844x390 phone case).
   A shop card with a square vignette is ~700 px tall, i.e. nearly twice the
   screen, so reading one cue means scrolling past it. Cap the vignette and
   tighten the card so a whole card — specs, price and button — fits in one
   screenful. The content is unchanged; only the picture gives up height. */
@media (orientation:landscape) and (max-height:560px) {
  .ep-thumb { aspect-ratio:auto; height:96px; margin-bottom:10px; }
  .ep-shop-card { padding:var(--ep-space-3); }
  .ep-shop-card h3 { margin-bottom:6px; font-size:15px; }
  .ep-shop-card p { font-size:11px; line-height:1.35; margin:0 0 8px; }
  .ep-bars { gap:4px; margin-bottom:8px; }
  .ep-shop-section { margin:var(--ep-space-3) 0 var(--ep-space-2); font-size:13px; }
  .ep-grid { gap:var(--ep-space-3); }
}