/* ══════════════════════════════════════════════════════════════════════
   lb11-polish.css — UI polish layer. Loaded AFTER lb11-pro.css on every
   page, so nothing in the working stylesheets had to be rewritten.
   Covers: contrast, small-phone layout, the race-lane finish line,
   first-visit guidance, share UI, and iOS / Android safe areas.
   ══════════════════════════════════════════════════════════════════════ */

/* ── 1. CONTRAST ───────────────────────────────────────────────────────
   The Arena (blue) skin painted near-black ink on a mid-blue foil, which
   is what made chips and buttons hard to read. Deepen the blue so white
   ink clears AA, and keep every other skin untouched.                   */
html[data-skin="arena"]{
  --lp-foil:linear-gradient(115deg,#4D97FF 0%,#2D6FE0 46%,#1B4FB8 100%);
  --lp-gold-ink:#FFFFFF;
}
html[data-skin="arena"][data-theme="light"]{
  --lp-foil:linear-gradient(115deg,#2E6FE6 0%,#1F5FE0 46%,#123C97 100%);
  --lp-gold-ink:#FFFFFF;
}
/* Same for the purple skin, where white reads better than the dark ink. */
html[data-skin="cosmic"]{ --lp-gold-ink:#FFFFFF; }

.lp-btn.gold,.lp-tag.gold,.lp-steps i,.st-done .tick{ color:var(--lp-gold-ink); }
/* Gold-text links on light backgrounds were washing out on the lighter skins. */
html[data-theme="light"] .lp-eyebrow,
html[data-theme="light"] .lp-sec-h a{ color:var(--lp-gold-deep,var(--lp-gold-text)); }

/* Shop quick-add and pill chips: a visible edge in every skin/theme. */
.lb-pills button,.lp-chips button{ border:1px solid var(--lp-line-2); }
.lb-pills button[aria-pressed="true"],.lp-chips button[aria-pressed="true"]{
  background:var(--lp-foil); color:var(--lp-gold-ink); border-color:transparent; }

/* ── 2. RACE LANES: a finish line that looks like a finish line ───────── */
.lp-track{ height:18px; overflow:visible; }
.lp-track .fin{
  right:-4px; top:-10px; bottom:-10px; width:16px; border-radius:4px;
  border:1px solid rgba(0,0,0,.55);
  box-shadow:0 2px 10px rgba(0,0,0,.35), inset 0 0 0 1px rgba(255,255,255,.35);
  opacity:1;
}
/* Flag pole + pennant above the tape — reads as "finish" at a glance. */
.lp-track .fin::before{
  content:""; position:absolute; left:50%; top:-13px; width:2px; height:13px;
  border-radius:2px; background:var(--lp-ink-3); opacity:.75;
}
.lp-track .fin::after{
  content:""; position:absolute; left:calc(50% + 2px); top:-13px;
  width:11px; height:8px; background:var(--lp-gold);
  clip-path:polygon(0 0,100% 0,70% 50%,100% 100%,0 100%);
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
/* Cleared: the tape lights up green and gives one soft pulse. */
.lp-lane.done .fin{
  box-shadow:0 0 0 2px rgba(34,197,110,.45),0 4px 16px rgba(34,197,110,.45),inset 0 0 0 1px rgba(255,255,255,.4);
  animation:lbFinPop .7s var(--lp-ease,ease) 1;
}
.lp-lane.done .fin::after{ background:var(--lp-green-hi,#6EE7A0); }
.lp-lane.stop .fin{ opacity:.45; filter:grayscale(1); }
@keyframes lbFinPop{ 0%{transform:scale(1)} 45%{transform:scale(1.18)} 100%{transform:scale(1)} }
/* Ball gets a short motion trail so the lane reads as movement, not a dot. */
.lp-track .ball{ z-index:2; box-shadow:0 2px 8px rgba(0,0,0,.45),0 0 0 3px rgba(255,255,255,.08); }
.lp-lane.done .ball{ box-shadow:0 2px 10px rgba(0,0,0,.45),0 0 0 4px rgba(34,197,110,.25); }

/* Readable numbers: on the dark hero panel the "current score" was dark
   ink on a dark surface, so it disappeared. */
.lp-hero-art .lp-lane-foot b,
.lp-hero-art .lp-lane-foot .lp-num{ color:var(--lp-on-night,#fff); }
.lp-lane-foot b{ font-size:13.5px; letter-spacing:.01em; }
.lp-lane-foot{ font-size:11.5px; align-items:baseline; }
.lp-lane-foot>span:last-child{ text-align:right; }

/* Names: wrap to a second line instead of being cut off mid-word. */
.lp-lane-top{ align-items:flex-start; gap:10px; }
.lp-lane-top b{ white-space:normal; overflow-wrap:anywhere; line-height:1.25; }
.lp-lane-top .who{ flex:1 1 auto; align-items:flex-start; }
.lp-lane-top .no{ margin-top:1px; }
.lp-lane-top .pick{ flex:0 0 auto; padding-top:2px; }
@media (max-width:360px){
  .lp-lane{ padding:12px 13px 11px; }
  .lp-lane-top b{ font-size:13px; }
  .lp-lane-foot{ font-size:11px; }
}

/* ── 3. SMALL PHONES (≤380px): header, ticker, hero ───────────────────── */
@media (max-width:420px){
  .lp-wrap{ --lp-gut:13px; }
  .lp-top-row{ height:56px; gap:8px; }
  /* height only — the logo is 3:2; setting both dimensions squashed it */
  .lp-brand img{ height:34px; width:auto; }
  .lp-brand b{ font-size:15px; letter-spacing:.01em; }
  .lp-top-right{ gap:6px; }
  .lp-chip{ height:38px; padding:0 10px; }
  .lp-chip b{ font-size:13px; }
  .lp-icon-btn{ width:36px; height:36px; }
  .lp-btn.sm{ padding:8px 12px; font-size:12.5px; }
  /* The trust ticker scrolls sideways instead of wrapping into a block. */
  .lp-strip .lp-wrap{
    justify-content:flex-start; gap:8px; height:28px; font-size:10px;
    overflow-x:auto; white-space:nowrap; scrollbar-width:none;
    -webkit-overflow-scrolling:touch; mask-image:linear-gradient(90deg,#000 88%,transparent);
  }
  .lp-strip .lp-wrap::-webkit-scrollbar{ display:none; }
  .lp-strip span{ flex:0 0 auto; }
  .lp-hero{ padding:22px 16px; gap:18px; }
  .lp-hero h1{ font-size:clamp(28px,9vw,38px); }
}
/* On the narrowest phones the header's own right-hand cluster needs ~260px,
   so the logo scales down proportionally rather than being squashed square. */
@media (max-width:360px){
  .lp-brand img{ height:23px; }
}
/* The header must fit a 360px phone without the account button falling off. */
@media (max-width:430px){
  .lp-brand{ min-width:0; flex:0 1 auto; overflow:hidden; max-width:42vw; }
  .lp-brand>div{ min-width:0; overflow:hidden; }
  /* no `display` here — lb11-pro.css hides the wordmark below 560px by design */
  .lp-brand b{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .lp-brand span{ display:none; }
  .lp-top-right{ gap:5px; min-width:0; }
  /* Narrower, not scaled. transform:scale() shrank the rendered tap target
     below the CSS height, so the language switch measured 29px instead of
     the 34px it declares. Trimming padding and min-width fits the same
     space with the hit area intact. */
  .lp-lang button,.lp-lang a{ padding:0 7px; font-size:11px; min-width:32px; }
  .lp-skinbox,.lp-icon-btn{ width:34px; height:34px; }
  .lb-signin,.lp-btn.gold.sm{ padding:8px 11px; font-size:12px; }
  #lpAcct{ display:none; }                 /* Sign in / the user menu already covers this */
  .lb-user[hidden]~#lpAcct{ display:grid; }
}
/* Below 380px the wordmark goes and the logo carries the brand, so the
   Sign in button and the account menu always stay reachable. */
@media (max-width:380px){
  .lp-brand{ max-width:none; flex:0 0 auto; }
  .lp-brand>div{ display:none; }
  .lp-top-right{ gap:4px; }
}
/* 320px, signed in: the account button keeps the avatar and drops the name,
   so the menu never falls off the right edge on the smallest phones. */
@media (max-width:400px){
  .lb-user{ min-width:0; }
  .lb-user-btn{ padding:4px; gap:4px; }
  .lb-user-name{ display:none; }
  .lb-user-av{ width:30px; height:30px; flex:0 0 30px; }
  .lb-user-menu{ right:0; left:auto; max-width:min(260px,calc(100vw - 20px)); }
}
@media (max-width:360px){
  /* Keep the points value visible but compact — information is not dropped. */
  .lp-chip.gold.plain{ padding:0 8px; height:34px; }
  .lp-chip.gold b{ font-size:12px; }
  .lp-top-row{ gap:8px; }
}
@media (max-width:340px){
  .lp-lang button,.lp-lang a{ padding:0 5px; font-size:10.5px; min-width:30px; }
  .lp-skinbox,.lp-icon-btn{ width:32px; height:32px; }
  .lb-signin,.lp-btn.gold.sm{ padding:7px 9px; font-size:11.5px; }
}
/* Orders list: on a phone the status + Remove move under the product text
   instead of being squeezed off the left edge. */
@media (max-width:560px){
  .st-orders .st-order{ grid-template-columns:48px minmax(0,1fr); grid-template-areas:"img txt" "state state"; row-gap:10px; padding:12px; }
  .st-orders .st-order>img{ grid-area:img; width:48px; height:48px; }
  .st-orders .st-order>div{ grid-area:txt; min-width:0; }
  .st-orders .st-order>.st-ostate{ grid-area:state; display:flex; flex-direction:row; align-items:center; justify-content:space-between; width:100%; gap:10px; }
  .st-orders .st-order .st-status{ white-space:nowrap; }
  .st-orders-tools{ justify-content:stretch; }
  .st-orders-tools .st-clear{ width:100%; padding:10px 14px; }
}

/* Nothing should ever push the page sideways. */
html,body{ max-width:100%; overflow-x:hidden; }
.lp-wrap,.lp-main{ min-width:0; }

/* ── 4. iOS / ANDROID ─────────────────────────────────────────────────── */
/* 16px stops iOS Safari zooming in when a field gets focus. */
input,select,textarea{ font-size:max(16px,1em); }
/* Real viewport height on mobile browsers with a collapsing toolbar. */
@supports (height:100dvh){ .lp-fullh{ min-height:100dvh; } }
/* Keep fixed bars clear of the home indicator / gesture bar. */
.lp-top{ padding-top:env(safe-area-inset-top); }
.lp-dock,.lp-slip.dock,.lb-dock{ padding-bottom:calc(10px + env(safe-area-inset-bottom)); }
.lp-main{ padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
/* Touch targets and tap highlight. */
button,.lp-btn,a.lp-btn{ -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
.lp-btn,.lp-icon-btn,.lb-pills button{ min-height:40px; }

/* ── 5. EMPTY / OFFLINE STATES ────────────────────────────────────────── */
/* "No match yet" should look designed, not broken. */
.lb-nomatch{
  text-align:center; padding:34px 22px 28px; display:grid; gap:12px; justify-items:center;
  border:1px solid var(--lp-line); border-radius:20px;
  background:radial-gradient(120% 100% at 50% 0%,rgba(var(--lp-acc-rgb),.12),transparent 70%),var(--lp-surface);
}
.lb-nomatch .ic{
  width:56px; height:56px; border-radius:50%; display:grid; place-items:center;
  background:var(--lp-foil); color:var(--lp-gold-ink);
  box-shadow:0 14px 34px -10px rgba(var(--lp-acc-rgb),.55);
}
.lb-nomatch .ic svg{ width:26px; height:26px; }
.lb-nomatch b{ font:800 22px/1.15 var(--lp-head); text-transform:uppercase; }
.lb-nomatch p{ margin:0; max-width:46ch; color:var(--lp-ink-2); font-size:14px; line-height:1.6; }
.lb-nomatch-steps{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:2px; }
.lb-nomatch-steps div{
  display:flex; align-items:center; gap:8px; padding:8px 13px; border-radius:99px;
  background:var(--lp-surface-2); border:1px solid var(--lp-line);
  font:700 12.5px var(--lp-font); color:var(--lp-ink-2);
}
.lb-nomatch-steps i{
  width:20px; height:20px; border-radius:50%; display:grid; place-items:center; font-style:normal;
  background:var(--lp-foil); color:var(--lp-gold-ink); font:800 10.5px var(--lp-font); flex:0 0 20px;
}
.lb-nomatch-cta{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; margin-top:4px; }
.lb-offline{ border-color:rgba(224,65,58,.45); background:rgba(224,65,58,.06); margin-bottom:16px; }
.lb-offline b{ display:block; font:800 16px var(--lp-head); }

/* Home: the live-data notice as guidance instead of an error. */
.lb-guide{
  display:grid; gap:14px; justify-items:center; text-align:center;
  padding:30px 22px; border-radius:20px; border:1px solid var(--lp-line);
  background:radial-gradient(120% 100% at 50% 0%,rgba(var(--lp-acc-rgb),.10),transparent 70%),var(--lp-surface);
}
.lb-guide b{ font:800 21px/1.15 var(--lp-head); text-transform:uppercase; }
.lb-guide p{ margin:0; max-width:48ch; color:var(--lp-ink-2); font-size:14px; line-height:1.6; }
.lb-guide .lb-guide-cta{ display:flex; flex-wrap:wrap; gap:9px; justify-content:center; }

/* ── 6. SHARE ─────────────────────────────────────────────────────────── */
.lb-share{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  padding:10px 16px; border-radius:99px; border:1px solid var(--lp-line-2);
  background:var(--lp-surface-2); color:var(--lp-ink);
  font:800 13px var(--lp-font); transition:.16s;
}
.lb-share:hover,.lb-share:focus-visible{ border-color:var(--lp-gold); color:var(--lp-gold-text); transform:translateY(-1px); }
.lb-share svg{ width:16px; height:16px; }
.lb-share.ok{ color:var(--lp-green-hi); border-color:var(--lp-green-hi); }

/* ── 7. FIRST-VISIT GUIDE ─────────────────────────────────────────────── */
.lb-fv{ position:fixed; inset:0; z-index:140; display:grid; place-items:center; padding:18px;
  background:rgba(0,0,0,.72); backdrop-filter:blur(4px); animation:lbFvIn .22s ease; }
.lb-fv-card{
  width:min(440px,100%); max-height:88vh; overflow:auto; border-radius:22px; padding:26px 22px 20px;
  background:var(--lp-surface); border:1px solid var(--lp-line); text-align:center;
  box-shadow:0 30px 80px -20px rgba(0,0,0,.7);
  padding-bottom:calc(20px + env(safe-area-inset-bottom));
}
.lb-fv-card h2{ margin:10px 0 4px; font:800 26px/1.1 var(--lp-head); text-transform:uppercase; }
.lb-fv-card>p{ margin:0 0 16px; color:var(--lp-ink-2); font-size:14px; line-height:1.6; }
.lb-fv-steps{ display:grid; gap:10px; text-align:left; margin-bottom:18px; }
.lb-fv-steps div{ display:flex; gap:12px; align-items:flex-start; padding:12px 14px; border-radius:14px;
  background:var(--lp-surface-2); border:1px solid var(--lp-line); }
.lb-fv-steps i{ flex:0 0 26px; width:26px; height:26px; border-radius:9px; display:grid; place-items:center;
  font-style:normal; background:var(--lp-foil); color:var(--lp-gold-ink); font:800 12px var(--lp-font); }
.lb-fv-steps b{ display:block; font:800 14px var(--lp-font); margin-bottom:1px; }
.lb-fv-steps small{ display:block; color:var(--lp-ink-3); font:600 12.5px/1.45 var(--lp-font); }
.lb-fv-cta{ display:grid; gap:9px; }
.lb-fv-skip{ background:none; border:0; color:var(--lp-ink-3); font:700 12.5px var(--lp-font); cursor:pointer; padding:6px; }
@keyframes lbFvIn{ from{opacity:0} }

@media (prefers-reduced-motion:reduce){
  .lb-fv,.lp-lane.done .fin{ animation:none; }
  .lb-share:hover{ transform:none; }
}


/* ══════════════════════════════════════════════════════════════════════
   R3 — Home daily banner. Uses the supplied crowd photograph.
   Colours come from the existing --brass / --card tokens on index.php, so
   it follows every dashboard theme.
   ══════════════════════════════════════════════════════════════════════ */
.lb-daily{
  position:relative; isolation:isolate; overflow:hidden;
  border-radius:var(--radius,20px); border:1px solid var(--line,rgba(255,255,255,.1));
  background:var(--card,#12151d);
  min-height:168px; display:flex; align-items:center;
}
.lb-daily-photo{position:absolute; inset:0; z-index:-1; overflow:hidden;
  background:#0d1017 url('../arena/cheer-blur.jpg') center/cover no-repeat}
.lb-daily-photo.off{display:none}
.lb-daily-photo img{width:100%; height:100%; object-fit:cover; object-position:50% 38%; opacity:.85; filter:saturate(1.08) contrast(1.04)}
.lb-daily-photo::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, rgba(8,10,16,.94) 0%, rgba(8,10,16,.80) 38%, rgba(8,10,16,.18) 72%, rgba(8,10,16,.34) 100%);
}
.lb-daily-in{position:relative; display:flex; align-items:center; gap:clamp(14px,3vw,30px);
  flex-wrap:wrap; width:100%; padding:clamp(20px,3vw,28px) clamp(18px,3vw,30px)}
.lb-daily-copy{flex:1 1 320px; min-width:0}
.lb-daily-eyebrow{display:inline-block; font:800 10.5px/1 Inter,sans-serif; letter-spacing:.2em;
  text-transform:uppercase; color:var(--brass-2,#f4d876); margin-bottom:9px}
.lb-daily h2{margin:0 0 7px; font:800 clamp(21px,3vw,30px)/1.12 var(--lp-head,Inter),sans-serif;
  color:#fff; text-shadow:0 2px 14px rgba(0,0,0,.6)}
.lb-daily p{margin:0; font:600 13.5px/1.6 Inter,sans-serif; color:#cfd8e6; max-width:52ch;
  text-shadow:0 1px 10px rgba(0,0,0,.55)}
.lb-daily-cta{display:flex; gap:9px; flex-wrap:wrap; flex:0 0 auto}
.lb-daily-cta .btn{white-space:nowrap}
@media (max-width:760px){
  .lb-daily{min-height:0}
  .lb-daily-photo img{object-position:50% 32%; opacity:.7}
  .lb-daily-photo::after{background:linear-gradient(to bottom, rgba(8,10,16,.48) 0%, rgba(8,10,16,.84) 58%, rgba(8,10,16,.95) 100%)}
  .lb-daily-in{flex-direction:column; align-items:stretch; text-align:left}
  .lb-daily-cta{width:100%}
  .lb-daily-cta .btn{flex:1 1 0; min-width:0; justify-content:center}
}
@media (prefers-reduced-motion:no-preference){
  .lb-daily-photo img{animation:lbDailyIn 1s ease both}
}
@keyframes lbDailyIn{from{opacity:0;transform:scale(1.05)}}

/* ── Notification bell in the shared header (lb11-bell.js) ───────────────
   The slot existed on every page but only index.php ever filled it. These
   rules style the shared bell; index.php's own bell keeps its own styling. */
.lb-bell-slot{position:relative; display:inline-flex; align-items:center}
.lb-bell-btn{
  position:relative; display:grid; place-items:center; width:38px; height:38px;
  border-radius:12px; cursor:pointer; color:var(--lp-ink,#e8eefc);
  background:var(--lp-card-2,rgba(255,255,255,.06));
  border:1px solid var(--lp-line,rgba(140,192,255,.22));
  transition:background .16s ease, border-color .16s ease;
}
.lb-bell-btn:hover{background:var(--lp-card-3,rgba(255,255,255,.1))}
.lb-bell-btn svg{width:19px; height:19px}
.lb-bell-badge{
  position:absolute; top:-5px; right:-5px; min-width:17px; height:17px; padding:0 4px;
  border-radius:999px; display:grid; place-items:center;
  font:800 10.5px/1 var(--lp-font-b,Manrope),sans-serif;
  background:#E0393E; color:#fff; border:2px solid var(--lp-bg,#0a0e18);
}
.lb-bell-panel{
  position:absolute; top:calc(100% + 10px); right:0; z-index:60;
  width:min(330px,calc(100vw - 28px)); max-height:min(420px,70vh); overflow:auto;
  border-radius:16px; padding:6px;
  background:var(--lp-card,#0e1526); border:1px solid var(--lp-line,rgba(140,192,255,.24));
  box-shadow:0 24px 60px -24px rgba(0,0,0,.85);
}
.lb-bell-row{display:flex; gap:10px; padding:10px 11px; border-radius:11px; align-items:flex-start}
.lb-bell-row + .lb-bell-row{border-top:1px solid var(--lp-line,rgba(140,192,255,.14))}
.lb-bell-row.is-unread{background:rgba(61,139,255,.1)}
.lb-bell-ico{flex:0 0 auto; font-size:16px; line-height:1.3}
.lb-bell-row b{display:block; font:800 12.5px/1.35 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink,#e8eefc)}
.lb-bell-row small{display:block; margin-top:2px; font:600 11.5px/1.45 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink-3,#8fa3c6)}
.lb-bell-row time{display:block; margin-top:3px; font:700 10.5px/1 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink-3,#8fa3c6); opacity:.85}
.lb-bell-empty{padding:26px 16px; text-align:center;
  font:600 12.5px/1.6 var(--lp-font-b,Manrope),sans-serif; color:var(--lp-ink-3,#8fa3c6)}
@media (max-width:460px){ .lb-bell-panel{right:-56px} }

/* ── Touch targets on phones ─────────────────────────────────────────────
   Audit at 320–428px found the brand link at 23px, the language toggles at
   26–28px and the primary CTAs at 30px. Only the brand link actually fails
   WCAG 2.2 AA (24x24), but none of them are comfortable to hit on a phone.
   Minimum heights only — nothing here changes the visual size of the logo,
   the type or the button fills, so the layout is unmoved. */
@media (max-width:428px){
  .lp-brand{ min-height:36px; display:inline-flex; align-items:center }
  .lp-lang button, .lp-lang a{ min-height:34px; min-width:34px }
  .lp-icon-btn{ min-width:36px; min-height:36px }
  /* index.php already sets .btn{min-height:44px} under @media (pointer:coarse);
     this covers the shared pages that do not carry that rule. */
  .lp-btn{ min-height:36px }
  .lb-bell-btn{ min-width:38px; min-height:38px }
}

/* ══════════════════════════════════════════════════════════════════════
   Permanently-dark surfaces need text that does not follow the theme.

   Both the notification dropdown and the site footer are deliberately deep
   navy in BOTH themes, but their text colours were `var(--ink)` and
   `var(--ink-dim)`, which flip to near-black in light mode. Measured on the
   light theme: footer links 2.04, notification title 1.16, body 1.67 —
   against a 4.5 requirement. Dark theme was already fine (10.78 / 13.88 /
   8.45) and is left exactly as it was.

   These rules set local tokens on the dark surface itself, so the text is
   light regardless of theme. No background, spacing, font or layout value
   is changed — only colour.
   ══════════════════════════════════════════════════════════════════════ */

/* ── Notification dropdown (index.php) ───────────────────────────────── */
.notif-panel{
  --nf-title: #EEF3FF;          /* near-white  */
  --nf-body:  #B4C0DB;          /* light blue-grey */
  --nf-muted: #8FA3C6;          /* readable muted */
  --nf-line:  rgba(140,192,255,.18);
  --nf-accent:#5FA2FF;          /* electric blue */
}
.notif-panel .notif-head b{ color:var(--nf-title) }
.notif-panel .notif-item{ color:var(--nf-body) }
.notif-panel .notif-text b{ color:var(--nf-title) }
.notif-panel .notif-text span{ color:var(--nf-body) }
.notif-panel .notif-time,
.notif-panel .notif-text small,
.notif-panel time{ color:var(--nf-muted) }
.notif-panel .notif-item{ border-bottom-color:var(--nf-line) }
.notif-panel .notif-head{ border-bottom-color:var(--nf-line) }
.notif-panel .notif-empty{ color:var(--nf-body) }
/* Unread marker and hover in electric blue rather than brass, per the brief. */
.notif-panel .notif-item.unread{ background:rgba(95,162,255,.12) }
.notif-panel .notif-item.unread .notif-text b::after{ background:var(--nf-accent) }
.notif-panel .notif-item:hover,
.notif-panel .notif-item:focus-visible{ background:rgba(95,162,255,.16) }
.notif-panel .notif-item:focus-visible{ outline:2px solid var(--nf-accent); outline-offset:-2px }
/* Long Hindi strings wrap instead of overflowing their row. */
.notif-panel .notif-text{ min-width:0 }
.notif-panel .notif-text b,
.notif-panel .notif-text span{ overflow-wrap:anywhere; word-break:break-word }
/* A scrollbar that can be seen against deep navy. */
.notif-panel .notif-list{ scrollbar-width:thin; scrollbar-color:rgba(140,192,255,.45) transparent }
.notif-panel .notif-list::-webkit-scrollbar{ width:8px }
.notif-panel .notif-list::-webkit-scrollbar-thumb{
  background:rgba(140,192,255,.42); border-radius:999px;
  border:2px solid transparent; background-clip:content-box }
.notif-panel .notif-list::-webkit-scrollbar-thumb:hover{ background:rgba(140,192,255,.62); background-clip:content-box }
/* On a phone the panel stays inside the viewport. */
@media (max-width:560px){
  .notif-panel{ right:auto; left:50%; transform:translateX(-50%);
    width:min(360px, calc(100vw - 20px)); max-height:min(70vh, 460px) }
}

/* ── The OTHER notification panel ────────────────────────────────────────
   There are two. index.php renders its own bell as .notif-panel (styled
   above). Every other page — Shop, Cart, Career, Pick 3, Mystery Box — gets
   the shared bell from assets/js/lb11-bell.js, which emits .lb-bell-panel
   with completely different class names. Fixing .notif-panel alone left the
   bell broken on every page except Home, which is where it was being looked
   at, so the fix looked like it had not been applied.

   Same root cause as .notif-panel: the panel background resolves to a dark
   navy on BOTH themes, while the text used theme-following tokens. Measured
   in light theme before this, on Shop, Career and Cart alike:
       title 1.02:1   body 3.46:1   time 3.46:1
   Dark theme was already fine (16.38 / 5.68 / 5.68) and is left alone in
   substance. Fixed colours, because the surface is always dark. */
.lb-bell-panel{
  --nb-title:#EEF3FF; --nb-body:#B4C0DB; --nb-muted:#9FB2D2;
  --nb-line:rgba(140,192,255,.18); --nb-accent:#5FA2FF;
  background:#101a2e;
}
.lb-bell-row b{ color:var(--nb-title) }
.lb-bell-row small{ color:var(--nb-body) }
.lb-bell-row time{ color:var(--nb-muted); opacity:1 }
.lb-bell-empty{ color:var(--nb-body) }
.lb-bell-row + .lb-bell-row{ border-top-color:var(--nb-line) }
.lb-bell-row.is-unread{ background:rgba(95,162,255,.14) }
.lb-bell-row:hover{ background:rgba(95,162,255,.10) }
/* Long titles and long Hindi strings wrap instead of forcing the panel wide. */
.lb-bell-row > div{ min-width:0 }
.lb-bell-row b, .lb-bell-row small{ overflow-wrap:anywhere; word-break:break-word }
/* A scrollbar that is visible against the dark panel. */
.lb-bell-panel{ scrollbar-width:thin; scrollbar-color:rgba(140,192,255,.45) transparent }
.lb-bell-panel::-webkit-scrollbar{ width:8px }
.lb-bell-panel::-webkit-scrollbar-thumb{
  background:rgba(140,192,255,.42); border-radius:999px;
  border:2px solid transparent; background-clip:content-box }
.lb-bell-btn:focus-visible{ outline:2px solid var(--nb-accent); outline-offset:2px }

/* ── Site footer ─────────────────────────────────────────────────────── */
.site-footer{
  --ft-title:#EAF0FF;
  --ft-body: #B4C0DB;
  --ft-muted:#8FA3C6;
}
.site-footer, .site-footer p, .site-footer li, .site-footer small{ color:var(--ft-body) }
.site-footer h1, .site-footer h2, .site-footer h3, .site-footer h4,
.site-footer b, .site-footer strong{ color:var(--ft-title) }
.site-footer a{ color:var(--ft-body) }
.site-footer a:hover, .site-footer a:focus-visible{ color:var(--ft-title) }
.site-footer a:focus-visible{ outline:2px solid #5FA2FF; outline-offset:2px; border-radius:4px }
.site-footer .muted, .site-footer .copy, .site-footer .legal{ color:var(--ft-muted) }
/* The social buttons are icon chips, not body links: their glyph colour is set
   by index.php and is already correct against the chip's own fill. The generic
   link rule above has the same specificity as index.php's rule and was winning
   on source order, which washed the glyphs out. Restoring them explicitly. */
/* These two carry their own colour declaration in index.php, so they beat the
   inherited rule above and kept following the theme while the footer stayed
   dark. Measured in LIGHT theme before this: the wordmark 1.06:1 (it is the
   washed-out "LUCKY BHARAT 11" in the reported screenshot) and the column
   headings 3.75:1 at 11px, which is below AA for text that size. */
.site-footer .footer-brand-name{ color:var(--ft-title) }
.site-footer .footer-col-title{ color:var(--ft-muted) }
.site-footer .footer-social a{ color:var(--ink-dim) }
.site-footer .footer-social a:hover,
.site-footer .footer-social a:focus-visible{ color:var(--brass-2) }

/* ── Space between the light page and the dark footer ────────────────────
   Measured before this at 1440px and 390px, both themes: the gap between the
   last painted element and the top of the footer was 0px, with the footer's
   own margin-top at 0. In light theme the page is rgb(237,241,249) and the
   footer is rgb(7,11,20), so the two slabs met edge to edge with no
   separation at all — the "space missing between black and white area at the
   bottom". The footer's 48px padding sits INSIDE the dark block, so it does
   nothing for the transition.

   A margin above the footer shows the page colour through, which is the gap.
   In dark theme both sides are already dark, so this is invisible there and
   changes nothing. */
.site-footer{ margin-top:56px }
@media (max-width:768px){ .site-footer{ margin-top:40px } }
@media (max-width:428px){ .site-footer{ margin-top:32px } }

/* ── Checkout button label, dark theme ───────────────────────────────────
   The label used --lp-gold-ink, which in dark theme is the near-black
   rgb(4,16,40), on the Electric Blue gradient: measured 3.23:1 from rendered
   pixels, below AA for 14px bold. Light theme is already white on blue at
   4.80:1 and is untouched.

   Scoped to the checkout bar's own buttons, NOT to the --lp-gold-ink token,
   so every other primary button on the site keeps the approved treatment.
   The gradient, the radius and the weight are unchanged — only the ink. */
:root[data-theme="dark"] .hud .cbtn:not(:disabled),
:root[data-theme="dark"] .hud .cbtn:not(:disabled):hover{ color:#FFFFFF }

/* Shared mobile-first notification rows: one quiet inbox, no oversized emojis. */
.notif-panel,.lb-bell-panel{background:#111925!important;border:1px solid #2b374a!important;border-radius:14px!important;box-shadow:0 16px 42px rgba(0,0,0,.42)!important}
.notif-item,.lb-bell-row{
  display:grid!important;grid-template-columns:28px minmax(0,1fr)!important;
  align-items:start!important;gap:10px!important;
  position:relative;min-height:64px;padding:11px 12px!important;
  border-radius:0!important;background:transparent;
}
.notif-item:not(:last-child),.lb-bell-row:not(:last-child){border-bottom:1px solid rgba(160,180,210,.13)!important}
.notif-item.unread,.lb-bell-row.is-unread{background:rgba(68,118,188,.08)!important}
.notif-item.unread::before,.lb-bell-row.is-unread::before{
  content:'';position:absolute;left:0;top:18px;width:2px;height:26px;border-radius:2px;background:#67a4f8;
}
.notif-icon,.lb-bell-ico{
  display:grid!important;place-items:center!important;width:28px;height:28px;
  border:1px solid rgba(150,180,215,.22);border-radius:9px;
  background:rgba(105,139,184,.08);color:#9cbbdb;
  font-size:0!important;line-height:1!important;flex:0 0 28px!important;
}
.notif-icon svg,.lb-bell-ico svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.7;fill:none;stroke-linecap:round;stroke-linejoin:round}
.notif-text,.lb-bell-content{display:flex;flex-direction:column;min-width:0;gap:3px!important;padding-right:62px}
.notif-text b,.lb-bell-content b{display:block;color:#ecf2fc!important;font-size:12.5px!important;line-height:1.35!important;font-weight:650!important;letter-spacing:0!important;overflow-wrap:anywhere}
.notif-text span,.lb-bell-content small{display:block;color:#9caec6!important;font-size:11.5px!important;line-height:1.35!important;margin:0!important}
.notif-text small,.lb-bell-content time{
  position:absolute;right:12px;top:13px;color:#8da2be!important;
  font:500 10.5px/1.3 Inter,system-ui,sans-serif!important;opacity:1!important;white-space:nowrap;
}
.notif-head{padding:11px 14px!important;border-bottom:1px solid rgba(160,180,210,.16)!important}
.notif-head b{font-size:13.5px!important}
.notif-markall{font-size:11px!important}
@media(max-width:460px){
  .notif-panel{left:8px!important;right:8px!important;top:62px!important;width:auto!important;max-height:72vh!important}
  .lb-bell-panel{width:min(345px,calc(100vw - 16px))!important;max-height:72vh!important}
  .notif-item,.lb-bell-row{padding:10px!important;gap:9px!important;min-height:62px}
  .notif-text,.lb-bell-content{padding-right:52px}
  .notif-text small,.lb-bell-content time{right:10px}
}


/* Reward Emblem: no floating square icon; gold is reserved for a real reward. */
.notif-icon,.lb-bell-ico{border:0!important;background:transparent!important;border-radius:0!important}
.notif-item.is-keychain::before,.lb-bell-row.is-keychain::before{
  content:'';position:absolute;left:0;top:14px;width:3px;height:38px;
  border-radius:3px;background:#c6a65d!important;
}
.notif-item.is-keychain .notif-icon,.lb-bell-row.is-keychain .lb-bell-ico{color:#c6a65d!important}
.notif-item.is-keychain .notif-icon svg,.lb-bell-row.is-keychain .lb-bell-ico svg{width:19px!important;height:19px!important;stroke-width:1.6!important}

/* ── Top navigation: the SHOP link must never be starved ─────────────────
   Reported three times and not reproduced until now, because it only
   happens at 1600px and wider — every earlier test stopped at 1440px.

   Measured on index.php before this rule:
       1024 / 1280 / 1440 px   nav fits, SHOP fine
       1600 / 1920 / 2560 px   rank chip appears, right cluster 508 -> 669px,
                               nav squeezed 458 -> 294px while needing 440,
                               short by 146px, SHOP clipped and overlapped 71px

   Cause: .lp-nav is `flex:1; min-width:0`, so it is the only item allowed to
   shrink, while .lp-top-right is `flex-shrink:0` and refuses to. The row is
   capped at max-width:1360px, so a wider screen does not add room — it only
   reveals the rank chip, which then takes the space out of the nav.

   Fix: the nav never shrinks below the width of its own links, and the right
   cluster is the thing that yields instead. No padding, gap, font or colour
   is touched, so the header looks exactly as approved at every width. */
.lp-nav{ min-width:max-content }
.lp-top-right{ min-width:0 }

/* ── Pick 3 board: row layout, matching the approved reference ───────────
   The board already carried everything the reference shows — role badge,
   avatar, name, opponent, line value, the LIVE FORM strip and the two side
   buttons. What differed was the arrangement: a grid of tall cards instead
   of one scannable row per player.

   This re-flows the SAME markup into rows from 900px up. Nothing is hidden
   and no element is removed, so the card layout still applies on phones,
   where rows would be too cramped. */
@media (min-width:900px){
  /* pick3.php's own <style> sets .lp-pick3 .lp-players, which outranks a bare
     .lp-players here, so the same specificity is matched deliberately. */
  .lp-pick3 .lp-players, .lp-players.lb-grid{ grid-template-columns:1fr !important; gap:10px }
  .lp-pick3 .lp-player.pp, .lp-player.pp{
    display:grid; align-items:center; gap:16px; padding:14px 18px;
    grid-template-columns:auto minmax(160px,1fr) minmax(128px,.6fr) minmax(145px,.65fr) minmax(190px,.8fr);
    grid-template-areas:"avatar name line form sides";
    text-align:left;
  }
  .lp-player.pp .lp-avatar{ grid-area:avatar; margin:0; width:52px; height:52px; font-size:17px }
  .lp-player.pp .pp-role{ position:absolute; top:10px; left:14px }
  .lp-player.pp .pp-team{ grid-area:name; align-self:end; margin:0; font-size:11.5px }
  .lp-player.pp .pp-name{ grid-area:name; align-self:center; margin:0; font-size:17px; line-height:1.2 }
  .lp-player.pp .pp-opp{ grid-area:name; align-self:start; margin:0; font-size:11.5px }
  .lp-player.pp .pp-line{ grid-area:line; display:flex; align-items:baseline; gap:8px; margin:0 }
  .lp-player.pp .pp-line .n{ font-size:26px }
  .lp-player.pp .pp-line small{ font-size:10px; line-height:1.2; text-align:left; max-width:62px }
  .lp-player.pp .pp-form{ grid-area:form; margin:0 }
  .lp-player.pp .lp-ou{ grid-area:sides; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:10px }
  /* name / team / opponent share one grid cell, stacked */
  .lp-player.pp .pp-team,
  .lp-player.pp .pp-name,
  .lp-player.pp .pp-opp{ grid-column:2 }
}
/* Both side buttons show the number being bet on, as in the reference. */
.lp-player.pp .lp-ou button{ display:flex; flex-direction:column; align-items:center; gap:2px; min-height:52px; line-height:1.1 }
.lp-player.pp .lp-ou button b{ font:800 11px/1 var(--lp-font); letter-spacing:.1em }
.lp-player.pp .lp-ou button i{ font:800 15px/1 var(--lp-head); font-style:normal; opacity:.95 }

/* ── Pick 3 arena: tabs, countdown, numbered rows, match strip ───────────
   Presentation only. Every piece renders from data the page already has and
   disappears when that data is absent, so nothing is ever invented on screen. */
.lb-arena-head{ display:flex; align-items:flex-end; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin:0 0 16px }
.lb-arena-tabs{ display:flex; gap:4px; border-bottom:1px solid var(--lp-line); flex:1 1 auto }
.lb-arena-tabs > *{ appearance:none; background:none; border:0; cursor:pointer;
  padding:10px 18px 12px; font:800 12.5px/1 var(--lp-font); letter-spacing:.12em;
  text-transform:uppercase; color:var(--lp-ink-3); text-decoration:none;
  border-bottom:3px solid transparent; margin-bottom:-1px; transition:color .18s }
.lb-arena-tabs > *:hover{ color:var(--lp-ink) }
.lb-arena-tabs > .on,
.lb-arena-tabs > [aria-selected="true"]{ color:var(--lp-ink); border-bottom-color:#18c08a }

.lb-countdown{ display:grid; justify-items:center; gap:2px; text-align:center; flex:0 0 auto }
.lb-countdown .cd-label{ font:800 10.5px/1 var(--lp-font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lp-ink-3) }
.lb-countdown .cd-clock{ display:flex; align-items:baseline; gap:6px;
  font:800 30px/1 var(--lp-head); color:#2ee6a8; font-variant-numeric:tabular-nums }
.lb-countdown .cd-clock i{ font-style:normal; opacity:.5; font-size:22px }
.lb-countdown .cd-units{ display:flex; gap:20px; font:700 9px/1 var(--lp-font);
  letter-spacing:.16em; color:var(--lp-ink-3) }

/* Row numbers, as in the reference. A counter keeps the markup untouched. */
@media (min-width:900px){
  .lp-pick3 .lp-players{ counter-reset:lbrow }
  .lp-pick3 .lp-player.pp{ counter-increment:lbrow; padding-left:52px; position:relative }
  .lp-pick3 .lp-player.pp::before{ content:counter(lbrow); position:absolute; left:18px;
    top:50%; transform:translateY(-50%); font:800 19px/1 var(--lp-head); color:var(--lp-ink-3) }
  /* the role already reads as text under the player's name in row mode, so the
     corner badge is redundant and only crowds the side buttons */
  .lp-pick3 .lp-player.pp .pp-role{ display:none }
}

/* Selected sides: Over reads as the positive side, Under as the chosen fill. */
.lp-player.pp .lp-ou button[aria-pressed="true"].over{
  border-color:#18c08a; box-shadow:inset 0 0 0 1px #18c08a; color:#7ef0c4; background:rgba(24,192,138,.10) }
.lp-player.pp .lp-ou button[aria-pressed="true"].under{
  border-color:#3d8bff; background:#1f5fe0; color:#fff }

.lb-matchstrip{ display:flex; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:18px; padding:14px 18px; border-radius:14px;
  background:var(--lp-surface-2); border:1px solid var(--lp-line) }
.lb-matchstrip .ms-state{ font:800 10.5px/1 var(--lp-font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lp-ink-3); padding:6px 12px; border-radius:999px;
  border:1px solid var(--lp-line) }
.lb-matchstrip .ms-state.live{ color:#2ee6a8; border-color:rgba(46,230,168,.45) }
.lb-matchstrip .ms-teams{ display:flex; align-items:center; gap:10px;
  font:800 15px/1 var(--lp-head); color:var(--lp-ink) }
.lb-matchstrip .ms-teams i{ font-style:normal; font-size:11px; letter-spacing:.1em;
  color:var(--lp-ink-3); text-transform:uppercase }
.lb-matchstrip .ms-venue{ margin-left:auto; font:600 13px/1.3 var(--lp-font); color:var(--lp-ink-2) }
@media (max-width:560px){
  .lb-arena-head{ gap:12px }
  .lb-countdown .cd-clock{ font-size:24px }
  .lb-matchstrip{ gap:10px; padding:12px 14px }
  .lb-matchstrip .ms-venue{ margin-left:0; flex:1 1 100% }
}

/* ── Pick 3 arena, second pass: match the approved reference row ─────────
   The reference row reads left-to-right as
       № · photo · name/team · metric + line · OVER · UNDER · LIVE FORM
   The board already rendered every one of those pieces; only two things
   differed — the form strip sat between the line and the buttons, and the
   metric label sat beside the number instead of above it. Both are fixed
   here by re-ordering the SAME grid areas, so no markup is removed and the
   phone card layout below 900px is untouched. */
@media (min-width:900px){
  .lp-pick3 .lp-player.pp, .lp-player.pp{
    grid-template-columns:auto minmax(150px,1fr) minmax(104px,.42fr) minmax(228px,.74fr) minmax(132px,.5fr);
    grid-template-areas:"avatar name line sides form";
    gap:18px; padding:16px 20px 16px 52px; min-height:104px;
  }
  .lp-player.pp .pp-form{ grid-area:form; justify-self:start }
  .lp-player.pp .lp-ou{ grid-area:sides }

  /* Name block: big name, team underneath. The opponent line repeats the
     same fixture on every row and is already spelled out in the match strip
     at the foot of the board, so in row mode it only crowds the name.
     It stays visible on phones, where there is no strip beside it. */
  .lp-player.pp .pp-name{ font:800 20px/1.15 var(--lp-head); letter-spacing:.2px }
  .lp-player.pp .pp-team{ align-self:start; margin-top:2px !important; font-size:12.5px; color:var(--lp-ink-3) }
  .lp-player.pp .pp-opp{ display:none }
  .lp-player.pp .pp-name{ align-self:end }

  /* Metric label above the number, as in the reference. column-reverse does
     it without touching the markup order (the number stays first in the DOM,
     so screen readers still read "27.5 Runs"). */
  .lp-player.pp .pp-line{ display:flex; flex-direction:column-reverse; align-items:flex-start; gap:2px }
  .lp-player.pp .pp-line small{ max-width:none; font:600 12.5px/1.2 var(--lp-font); color:var(--lp-ink-3);
    text-transform:none; letter-spacing:0 }
  .lp-player.pp .pp-line .n{ font:800 30px/1 var(--lp-head) }

  .lp-player.pp .lp-ou{ grid-template-columns:1fr 1fr; gap:12px }
  .lp-player.pp .lp-ou button{ min-height:58px }
}

/* Photo, when one exists. A headshot is a portrait, not a circle — cropping
   it round cuts the face. Initials keep the round badge they always had. */
img.lp-avatar{ border-radius:12px; object-fit:cover; object-position:50% 18%;
  background:var(--lp-surface-2) }
@media (min-width:900px){
  .lp-player.pp img.lp-avatar{ width:72px; height:84px; align-self:center }
}

/* LIVE FORM: five flat segments and the average underneath, as in the
   reference. The bars carry an inline height from the renderer, so the flat
   shape is forced here rather than by editing every bar. */
.lp-player.pp .pp-form{ display:grid; gap:7px; justify-items:start }
.lp-player.pp .pp-form .pp-form-k{ font:800 9.5px/1 var(--lp-font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lp-ink-3) }
.lp-player.pp .pp-form .bars{ display:flex; align-items:center; gap:4px; height:auto; width:auto }
.lp-player.pp .pp-form .bars i{ height:6px !important; width:22px; border-radius:3px;
  background:var(--lp-line-2, rgba(140,170,220,.26)); align-self:center }
.lp-player.pp .pp-form .bars i.up{ background:#18c08a }
.lp-player.pp .pp-form .bars .ln{ display:none }
.lp-player.pp .pp-form > span:last-child{ font:600 12px/1.2 var(--lp-font); color:var(--lp-ink-3) }

/* Arena title block — the reference puts the board's own name and one line of
   copy to the left of the countdown, under the mode tabs. */
.lb-arena-tabs{ margin:0 0 18px }
.lb-arena-head{ align-items:flex-end }
.lb-arena-title{ flex:1 1 320px; min-width:0 }
.lb-arena-title h2{ margin:0; font:800 clamp(28px,3.6vw,46px)/1 var(--lp-head);
  letter-spacing:-.5px; color:var(--lp-ink); text-transform:uppercase }
.lb-arena-title h2 i{ font-style:normal; color:var(--lp-ink-3) }
.lb-arena-title p{ margin:8px 0 0; font:600 14.5px/1.3 var(--lp-font); color:var(--lp-ink-2) }
@media (max-width:560px){
  .lb-arena-title h2{ font-size:26px }
  .lb-arena-title p{ font-size:13px }
}

/* Name above team, as in the reference. The row's five areas become two rows
   so the stack is explicit instead of two layers fighting over one cell —
   the markup is unchanged, only where each piece lands. */
@media (min-width:900px){
  .lp-pick3 .lp-player.pp, .lp-player.pp{
    grid-template-rows:auto auto;
    grid-template-areas:"avatar name line sides form"
                        "avatar team line sides form";
    row-gap:2px;
  }
  .lp-pick3 .lp-player.pp .pp-name{ grid-area:name; align-self:end; margin:0 !important }
  .lp-pick3 .lp-player.pp .pp-team{ grid-area:team; align-self:start; margin:0 !important;
    font:600 12.5px/1.2 var(--lp-font); color:var(--lp-ink-3); letter-spacing:.02em }
  .lp-pick3 .lp-player.pp .lp-avatar,
  .lp-pick3 .lp-player.pp .pp-line,
  .lp-pick3 .lp-player.pp .lp-ou,
  .lp-pick3 .lp-player.pp .pp-form{ grid-row:1 / 3; align-self:center }
  /* the metric name is a quiet label, never a highlight colour */
  .lp-pick3 .lp-player.pp .pp-line small{ color:var(--lp-ink-3); font-weight:600 }
}
/* A headshot is a portrait. Only the initials badge stays round. */
.lp-pick3 .lp-player.pp img.lp-avatar,
.lp-player.pp img.lp-avatar{ border-radius:12px }
/* Form segments: green above the line, red when the last five fell well short. */
.lp-player.pp .pp-form .bars i.dn{ background:#e8606b }

/* ════════════════════════════════════════════════════════════════════
   Mystery Box — the approved phone reference

   The reference reads as one centred column:
       REWARD ZONE · case name · one line of copy · the case ·
       OPEN CASE · tokens left · level · earn more tokens · footnote

   Every one of those pieces already existed on the page; they were laid
   out as two desktop columns. `display:contents` on the two column
   wrappers lets the SAME markup re-flow into one ordered stack, so
   nothing is duplicated, hidden or re-fetched. Desktop is untouched.
   ════════════════════════════════════════════════════════════════════ */
.mb-eyebrow{ margin:0 0 10px; font:800 11px/1 var(--lp-font); letter-spacing:.26em;
  text-transform:uppercase; color:#8FB4E8; display:flex; align-items:center; gap:12px }
.mb-eyebrow::before, .mb-eyebrow::after{ content:""; height:1px; flex:1 1 auto;
  background:linear-gradient(90deg,transparent,rgba(143,180,232,.45)) }
.mb-eyebrow::after{ background:linear-gradient(90deg,rgba(143,180,232,.45),transparent) }

/* Tokens left reads as a badge, not a stray sentence. */
.mb-open .mb-note:not(:empty){ display:inline-flex; align-items:center; gap:9px;
  margin:12px auto 0; padding:8px 16px 8px 12px; border-radius:999px;
  font:800 12.5px/1 var(--lp-font); letter-spacing:.1em; text-transform:uppercase;
  color:#F2D27E; background:rgba(214,170,74,.10); border:1px solid rgba(214,170,74,.34) }
.mb-open .mb-note:not(:empty)::before{ content:""; width:15px; height:17px; flex:0 0 15px;
  background:linear-gradient(160deg,#F7DD9A,#C79B3A);
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%) }

/* Level strip */
.mb-level{ margin:20px auto 0; max-width:520px }
.mb-level-row{ display:flex; align-items:baseline; justify-content:center; gap:8px;
  flex-wrap:wrap; text-align:center;
  font:700 11.5px/1.35 var(--lp-font); letter-spacing:.06em; text-transform:uppercase }
.mb-level-row span::before{ content:"·"; margin-right:8px; opacity:.6 }
.mb-level-row b{ color:#F2D27E; font-weight:800 }
.mb-level-row span{ color:var(--lp-ink-3) }
.mb-level-bar{ margin-top:10px; height:9px; border-radius:999px; overflow:hidden;
  background:rgba(140,170,220,.16) }
.mb-level-bar i{ display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,#C79B3A,#F7DD9A); transition:width .5s ease }

/* Earn more tokens */
.mb-earn{ display:flex; align-items:center; gap:12px; max-width:520px;
  margin:18px auto 0; padding:14px 2px; text-decoration:none;
  border-top:1px solid var(--lp-line); border-bottom:1px solid var(--lp-line);
  font:600 14.5px/1 var(--lp-font); color:var(--lp-ink) }
.mb-earn em{ margin-left:auto; font-style:normal; font-size:20px; color:var(--lp-ink-3) }
.mb-earn:hover{ color:#F2D27E }
.mb-earn-ico{ width:22px; height:22px; flex:0 0 22px; border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F7DD9A,#C79B3A);
  box-shadow:0 0 0 3px rgba(199,155,58,.16) }
.mb-foot{ margin:16px 0 0; text-align:center; font:600 12.5px/1 var(--lp-font);
  color:var(--lp-ink-3) }

@media (max-width:860px){
  .mb-hero{ display:flex; flex-direction:column; gap:0 }
  .mb-hero > div{ display:contents }
  .mb-eyebrow,
  .mb-hero > div > .mb-h1{ text-align:center; justify-content:center }
  .mb-eyebrow{ order:1 }
  .mb-hero .mb-h1{ order:2; text-align:center }
  .mb-hero .mb-sub{ order:3; text-align:center; margin-left:auto; margin-right:auto; max-width:30ch }
  .mb-hero .mb-stage{ order:4 }
  .mb-hero .mb-open{ order:5; text-align:center }
  .mb-hero .mb-level{ order:6 }
  .mb-hero .mb-earn{ order:7 }
  .mb-hero .mb-foot{ order:8 }
  .mb-hero .mb-stats{ order:9; margin-top:22px }
  .mb-hero .mb-feats{ order:10 }
  .mb-hero #mbResultSlot{ order:11 }

  .mb-hero .mb-open .mb-cost{ justify-content:center }
  .mb-hero .mb-go{ width:100%; min-height:58px; font-size:17px; letter-spacing:.12em }
}

/* ════════════════════════════════════════════════════════════════════
   Traditional XI panel — the third approved reference

   It sits beside Your Line, as a doorway into the builder that already
   exists. The slots are drawn empty on purpose: no player is shown here,
   because nothing has been picked on this page.
   ════════════════════════════════════════════════════════════════════ */
.lb-xi{ margin-top:16px; padding:18px; border-radius:18px;
  background:var(--lp-surface); border:1px solid var(--lp-line) }
.lb-xi-head{ display:flex; align-items:flex-start; gap:12px; margin-bottom:16px }
.lb-xi-head h3{ margin:0; font:800 15px/1.2 var(--lp-head); letter-spacing:.06em;
  text-transform:uppercase; color:var(--lp-ink) }
.lb-xi-head p{ margin:5px 0 0; font:600 12.5px/1.35 var(--lp-font); color:var(--lp-ink-3) }
.lb-xi-cta{ margin-left:auto; flex:0 0 auto; text-decoration:none; white-space:nowrap;
  font:800 10.5px/1 var(--lp-font); letter-spacing:.12em; text-transform:uppercase;
  color:var(--lp-gold, #F2D27E); padding:8px 12px; border-radius:999px;
  border:1px solid rgba(214,170,74,.38) }
.lb-xi-cta:hover{ background:rgba(214,170,74,.12) }
.lb-xi-cta em{ font-style:normal; margin-left:4px }

.lb-xi-pitch{ display:grid; gap:14px; padding:18px 14px; border-radius:14px;
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(34,96,62,.42), transparent 70%),
    linear-gradient(180deg, rgba(20,54,38,.55), rgba(12,32,24,.55));
  border:1px solid rgba(90,170,130,.22) }
.lb-xi-row{ display:grid; gap:7px; justify-items:center }
.lb-xi-rk{ font:800 9.5px/1 var(--lp-font); letter-spacing:.18em; text-transform:uppercase;
  color:rgba(222,240,230,.62) }
.lb-xi-slots{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px }
.lb-xi-slot{ position:relative; display:grid; justify-items:center; gap:4px; width:52px }
.lb-xi-slot i{ display:block; width:34px; height:34px; border-radius:50%;
  background:rgba(214,235,224,.14); border:1px solid rgba(214,235,224,.26);
  box-shadow:inset 0 -6px 10px rgba(0,0,0,.18) }
.lb-xi-slot small{ font:700 9px/1 var(--lp-font); letter-spacing:.1em;
  text-transform:uppercase; color:rgba(222,240,230,.52) }
.lb-xi-badge{ position:absolute; top:-3px; right:4px; width:17px; height:17px;
  border-radius:50%; display:grid; place-items:center;
  font:800 8.5px/1 var(--lp-font); color:#201604;
  background:linear-gradient(160deg,#F7DD9A,#C79B3A) }
.lb-xi-badge.vc{ font-size:7.5px }
.lb-xi-rule{ margin:14px 0 0; text-align:center;
  font:600 11.5px/1.45 var(--lp-font); color:var(--lp-ink-3) }

/* Bottom match strip: league, the fixture, venue, what is up next. */
.lb-matchstrip .ms-league{ font:800 10.5px/1 var(--lp-font); letter-spacing:.14em;
  text-transform:uppercase; color:var(--lp-ink-3) }
.lb-matchstrip .ms-next{ display:flex; align-items:center; gap:8px; padding-left:18px;
  border-left:1px solid var(--lp-line); font:700 13px/1 var(--lp-font); color:var(--lp-ink-2) }
.lb-matchstrip .ms-next i{ font-style:normal; font-size:10px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--lp-ink-3) }
.lb-matchstrip .ms-next em{ font-style:normal; font-size:10px; color:var(--lp-ink-3) }
.lb-matchstrip .ms-all{ flex:0 0 auto; text-decoration:none; white-space:nowrap;
  font:800 10.5px/1 var(--lp-font); letter-spacing:.12em; text-transform:uppercase;
  color:var(--lp-ink-2); padding:9px 14px; border-radius:999px; border:1px solid var(--lp-line) }
.lb-matchstrip .ms-all:hover{ color:var(--lp-ink); border-color:var(--lp-line-strong, var(--lp-line)) }
.lb-matchstrip .ms-venue{ margin-left:0 }
.lb-matchstrip .ms-all{ margin-left:auto }

/* The right rail is ~370px wide, so Your Line and the XI stack rather than
   sitting side by side: squeezed into two columns the eleven slots wrap into
   a vertical list and stop reading as a team sheet. Stacked, every row of the
   XI stays on one line at every width. */
@media (max-width:560px){
  .lb-matchstrip .ms-next{ padding-left:0; border-left:0 }
  .lb-matchstrip .ms-all{ margin-left:0 }
}

/* ── Wide desktop: three columns, as in the third reference ──────────────
   Rows · Your Line · Traditional XI, side by side. Below this width the XI
   stacks under Your Line instead, because squeezed into a narrow rail the
   eleven slots wrap into a vertical list and stop reading as a team sheet.

   `display:contents` lets the two panels become grid items in their own
   right without touching the markup. The sticky behaviour the rail used to
   provide moves onto each panel, so both still follow the scroll. */
@media (min-width:1500px){
  /* The page wrapper is capped at 1360px, so on a wide monitor the three
     columns would have to share less width than the rows alone need, and the
     rows were clipped by 70px. The board alone is allowed to bleed past that
     cap — the header and the rest of the page keep their original width. */
  .lp-pick3 .lp-cols.lb-cols{ grid-template-columns:minmax(0,1fr) 292px 320px; gap:20px;
    width:min(1600px, calc(100vw - 56px)); margin-left:50%; transform:translateX(-50%) }
  .lp-pick3 .lp-cols.lb-cols > .lp-sticky{ display:contents }
  .lp-pick3 .lp-cols.lb-cols > .lp-sticky > .lp-slip,
  .lp-pick3 .lp-cols.lb-cols > .lp-sticky > .lb-xi{ position:sticky; top:96px; margin-top:0; align-self:start }
  /* the row has less width here, so the form strip gives way first */
  .lp-pick3 .lp-player.pp{ grid-template-columns:auto minmax(132px,1fr) minmax(92px,.38fr) minmax(206px,.7fr) minmax(112px,.42fr);
    gap:14px; padding-left:46px }
  .lp-pick3 .lp-player.pp .pp-form .bars i{ width:16px }
}

/* ════════════════════════════════════════════════════════════════════
   Stadium backdrop — the reference puts the whole board inside a ground

   The photograph is the one ALREADY in this package
   (assets/arena/batsman-*.webp, the wide stadium bowl under floodlights).
   No new artwork was made or downloaded for this: it is the same picture
   the home hero already uses, pushed behind the page and darkened until
   the type on top still measures AA.

   It is fixed, so the board floats over the ground as the page scrolls,
   and it is painted by body::before — behind every card, above nothing
   that matters, and with no markup change at all.
   ════════════════════════════════════════════════════════════════════ */
html.lp-pick3 body::before,
body.lb-stadium::before{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background-image:
    linear-gradient(180deg,
      rgba(6,11,24,.955) 0%,
      rgba(6,11,24,.925) 38%,
      rgba(6,11,24,.80) 72%,
      rgba(6,11,24,.62) 100%),
    image-set(url("../arena/batsman-1200.webp") type("image/webp"),
              url("../arena/batsman-1200.jpg")  type("image/jpeg"));
  background-repeat:no-repeat;
  background-position:center top, center 42%;
  background-size:cover, cover;
}
/* Floodlight flare, left and right, as in the reference. Drawn, not a file. */
html.lp-pick3 body::after,
body.lb-stadium::after{
  content:"";
  position:fixed; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(42% 30% at 4% 16%,  rgba(150,196,255,.17), transparent 70%),
    radial-gradient(42% 30% at 96% 16%, rgba(150,196,255,.17), transparent 70%),
    radial-gradient(70% 38% at 50% 104%, rgba(46,230,168,.10), transparent 72%);
}
/* The cards must stay solid over a photograph — a translucent panel over a
   stadium is where contrast quietly dies. */
html.lp-pick3 .lp-card,
html.lp-pick3 .lp-player.pp,
html.lp-pick3 .lp-slip,
html.lp-pick3 .lb-xi,
html.lp-pick3 .lb-matchstrip{ backdrop-filter:blur(6px) }
@media (prefers-reduced-motion:reduce){
  html.lp-pick3 body::before, body.lb-stadium::before{ background-attachment:scroll }
}

/* ════════════════════════════════════════════════════════════════════
   ARENA BACKDROP — the look of the reference, built from YOUR assets

   The reference puts the whole board on a night-stadium photograph with
   the panels floating over it. The photograph used here is the one that
   already ships in this package, assets/arena/batsman-1200.webp. No
   image was generated, downloaded or replaced.

   To use the exact photograph from the mock-up instead, drop it in as
       assets/arena/pick3-bg.webp      (.jpg also works)
   and the page picks it up on its own — pick3.php looks for that file
   and sets --lb-arena-photo when it is there. Nothing else to change.
   ════════════════════════════════════════════════════════════════════ */
html.lp-pick3{
  background:#06080f var(--lb-arena-photo, url(../arena/batsman-1200.webp)) 50% 38% / cover no-repeat fixed;
}
/* The veil. Dark at the top where the text lives, clearing towards the
   pitch, dark again under the match bar — the same fall as the reference. */
html.lp-pick3 body{
  background:linear-gradient(180deg,
    rgba(5,9,17,.86) 0%, rgba(5,9,17,.80) 34%, rgba(5,9,17,.58) 68%,
    rgba(5,9,17,.76) 88%, rgba(5,9,17,.92) 100%);
}
@media (prefers-reduced-motion: no-preference){
  html.lp-pick3{ background-attachment:fixed }
}
@supports not (background-attachment: fixed){
  html.lp-pick3{ background-attachment:scroll }
}

/* Panels float over the photograph instead of sitting on a flat page. */
html.lp-pick3 .lp-slip,
html.lp-pick3 .lb-xi,
html.lp-pick3 .lb-matchstrip,
html.lp-pick3 .lp-players{
  background:rgba(8,13,24,.86);
  border:1px solid rgba(126,166,226,.16);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}

/* One panel of rows divided by hairlines, as in the reference — not four
   separate cards. The markup is unchanged; only the frame moves outward. */
@media (min-width:900px){
  html.lp-pick3 .lp-players{ border-radius:16px; overflow:hidden; gap:0 !important; padding:0 }
  html.lp-pick3 .lp-player.pp{
    background:transparent !important; border:0 !important; border-radius:0 !important;
    box-shadow:none !important; border-bottom:1px solid rgba(126,166,226,.13) !important;
  }
  html.lp-pick3 .lp-player.pp:last-child{ border-bottom:0 !important }
  html.lp-pick3 .lp-player.pp:hover{ background:rgba(255,255,255,.035) !important; transform:none }
  html.lp-pick3 .lp-player.pp.picked{ background:rgba(60,120,230,.07) !important }
  /* a taller portrait, standing on the row's bottom edge like the reference */
  html.lp-pick3 .lp-player.pp img.lp-avatar{ height:92px; width:78px; align-self:end; border-radius:10px 10px 0 0 }
}

/* The match bar reads as the strip across the foot of the reference. */
html.lp-pick3 .lb-matchstrip{ background:rgba(5,9,17,.93); border-radius:14px; padding:16px 20px }

/* Keep the hero readable now that the page behind it is a photograph. */
html.lp-pick3 .lb-hero-wrap .lp-card,
html.lp-pick3 .lb-filter{ background:rgba(8,13,24,.72); border-radius:16px }
html.lp-pick3 .lb-filter{ padding:10px 14px; border:1px solid rgba(126,166,226,.12) }

/* pick3.php's own <style> paints an opaque gradient over <main>, which sat on
   top of the stadium photograph. Keep its blue glow, drop the opaque base so
   the photograph is actually visible. Specificity is raised by one element
   selector because that inline block comes later in the cascade. */
html.lp-pick3 .lp-main{
  background:radial-gradient(ellipse 80% 460px at 60% 0%, rgba(23,76,120,.26), transparent 80%);
}

/* Same backdrop for the Mystery Box page, as in the second reference.
   Override file: assets/arena/mystery-bg.webp (or .jpg / .png). */
html.lb-mystery{
  background:#06080f var(--lb-mystery-photo, url(../arena/batsman-1200.webp)) 50% 30% / cover no-repeat fixed;
}
html.lb-mystery body{
  background:linear-gradient(180deg,
    rgba(5,9,17,.82) 0%, rgba(5,9,17,.76) 30%, rgba(5,9,17,.68) 58%,
    rgba(5,9,17,.88) 82%, rgba(5,9,17,.96) 100%);
}
html.lb-mystery .mb-wrap > .mb-sec,
html.lb-mystery .mb-hero{ position:relative }
html.lb-mystery .mb-stat,
html.lb-mystery .mb-open,
html.lb-mystery .mb-grid > *,
html.lb-mystery .mb-recent{
  background:rgba(8,13,24,.82);
  -webkit-backdrop-filter:blur(7px); backdrop-filter:blur(7px);
}

/* On the phone the reference has no card at all around the case — the title,
   the case and the button sit straight on the stadium. Drop the hero frame
   there; the cards below (tokens, points, rewards) keep theirs. */
@media (max-width:860px){
  html.lb-mystery .mb-hero{ background:transparent !important; border-color:transparent !important;
    box-shadow:none !important; padding-left:0; padding-right:0 }
  html.lb-mystery .mb-hero .mb-open{ background:transparent !important; border-color:transparent !important;
    -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:none !important }
  html.lb-mystery .mb-stage{ background:transparent !important; border-color:transparent !important }
}

/* A real team badge, when one has been supplied, fills the code chip. */
.lb-teamcrest-img{ width:100%; height:100%; object-fit:contain; display:block; padding:3px }
.team-crest:has(.lb-teamcrest-img),
.lp-lc-crest:has(.lb-teamcrest-img){ background:transparent !important; border-color:rgba(126,166,226,.22) }
.lp-lc-crest .lb-teamcrest-img{ padding:0 }