/* LuckyBharat11 — cinematic UI refinement of 3SCREENS (3).
 * Presentation only: no game, settlement, wallet, login, or commerce logic.
 * Keep this layer last in <head>. */
:root { --lb11-royal:#62a9ff; --lb11-gold:#e7c889; --lb11-mint:#40d5ae;
  --lb11-ink:#07101d; --lb11-hairline:rgba(151,185,224,.16) }

/* A quieter, more legible scoreboard over the stadium. */
html.lp-pick3 .lp-hero {border-color:rgba(231,200,137,.26);box-shadow:0 24px 58px rgba(0,0,0,.28)}
html.lp-pick3 .lp-hero-art {background:rgba(5,13,26,.82);backdrop-filter:blur(10px)}
html.lp-pick3 .lb-hero-wrap .lp-card {border-radius:12px}
html.lp-pick3 .lp-players {box-shadow:0 20px 48px rgba(0,0,0,.24)}
html.lp-pick3 .lp-player.pp {min-height:102px}
html.lp-pick3 .lp-player.pp:focus-within {outline:2px solid var(--lb11-mint);outline-offset:-2px}
html.lp-pick3 .lp-player.pp button:focus-visible {outline:2px solid var(--lb11-gold);outline-offset:3px}
html.lp-pick3 .lp-player.pp .pp-form {opacity:.85}
html.lp-pick3 .lp-slip, html.lp-pick3 .lb-xi {border-radius:12px;border-color:var(--lb11-hairline)}
html.lp-pick3 .lp-slip .lp-btn.gold {font-weight:800;letter-spacing:.075em;min-height:48px}
html.lp-pick3 .lp-slip .lp-btn:disabled {box-shadow:none;opacity:.62;cursor:not-allowed}
html.lp-pick3 .lb-xi-pitch {border-radius:10px;min-width:0}
html.lp-pick3 .lb-xi-head {align-items:center}
html.lp-pick3 .lb-xi-rule {line-height:1.5}

/* The hero and game board should share one baseline on wide monitors.
   Never shrink the selection rows just to squeeze in a third column. */
@media (min-width:1500px) {
  html.lp-pick3 .lb-hero-wrap,
  html.lp-pick3 .lb-boardbar,
  html.lp-pick3 .lb-rail,
  html.lp-pick3 .lp-cols.lb-cols {
    width:min(1560px,calc(100vw - 72px));max-width:none;
    margin-left:50%;transform:translateX(-50%);
  }
  html.lp-pick3 .lp-cols.lb-cols {grid-template-columns:minmax(0,1fr) minmax(280px,300px) minmax(290px,320px);gap:18px}
}
/* Large laptops need the player rows and slip, not a tiny third column.

   MEASURED: a player row in row-mode needs 790px. A second column may only
   open once that much is still left over, or the row is clipped — at 900px
   the row lost 298px, at 1024px 174px, at 1180px 18px. So the board stays a
   single column until there is genuinely room for both. */
@media (min-width:900px) and (max-width:1239px) {
  html.lp-pick3 .lp-cols.lb-cols {grid-template-columns:minmax(0,1fr);gap:18px}
  html.lp-pick3 .lp-slip {margin-top:16px}
  html.lp-pick3 .lb-xi {margin-top:16px}
}
@media (min-width:1240px) and (max-width:1499px) {
  html.lp-pick3 .lp-cols.lb-cols {grid-template-columns:minmax(0,1fr) minmax(285px,340px);gap:18px}
  html.lp-pick3 .lb-xi {margin-top:16px}
}

/* Mobile Pick 3: selection always readable, slip remains an actual action. */
@media (max-width:899px) {
  html.lp-pick3 .lp-players {border-radius:12px;overflow:hidden}
  html.lp-pick3 .lp-player.pp {min-height:90px;border-radius:10px}
  html.lp-pick3 .lb-xi {margin-top:18px}
  html.lp-pick3 .lp-hero {padding:22px 18px}
  html.lp-pick3 .lp-hero-art {padding:14px}
}
@media (max-width:520px) {
  html.lp-pick3 .lp-hero h1 {font-size:clamp(38px,12vw,56px)}
  html.lp-pick3 .lb-hero-wrap,html.lp-pick3 .lp-cols.lb-cols {width:100%;margin-left:0;transform:none}
  /* LIVE FORM stays on the phone. MEASURED at 320 / 360 / 390 / 430 / 520px:
     with the strip visible the card is 303px instead of 259px, and the row
     clips 0px with 0px page overflow at every one of those widths. It was
     not hiding a layout problem, and the reference shows the strip, so it
     keeps its place. */
  html.lp-pick3 .lp-slip {padding-bottom:calc(18px + env(safe-area-inset-bottom))}
}

/* Mystery Box: case and reveal are the moment, supporting metrics recede. */
html.lb-mystery .mb-stage {isolation:isolate}
html.lb-mystery .mb-stage-in {filter:drop-shadow(0 16px 36px rgba(0,0,0,.42))}
html.lb-mystery .mb-h1 {text-wrap:balance}
html.lb-mystery .mb-go {min-height:58px;letter-spacing:.07em;border-radius:10px}
html.lb-mystery .mb-go:focus-visible {outline:3px solid var(--lb11-gold);outline-offset:4px}
html.lb-mystery .mb-stat {border-color:var(--lb11-hairline);border-radius:12px}
@media (max-width:860px) {
  html.lb-mystery .mb-wrap {padding-bottom:calc(114px + env(safe-area-inset-bottom))}
  html.lb-mystery .mb-hero {gap:0}
  html.lb-mystery .mb-stage {max-width:100%;margin:0 auto}
  html.lb-mystery .mb-open {position:relative;z-index:2;padding:0 10px 20px}
  html.lb-mystery .mb-go {display:block;width:100%;min-height:62px}
  html.lb-mystery .mb-hero .mb-stats {margin-top:24px}
}

/* Shared store + Career identity: controlled strokes instead of bulky tiles. */
.lb11-shop .st-card,.lb11-shop .st-banner,.lb11-shop .st-order {border-radius:12px}
.lb11-shop .st-card {box-shadow:none;overflow:hidden}
.lb11-shop .st-card:hover {transform:translateY(-3px);border-color:rgba(231,200,137,.45)}
.lb11-shop .st-wallet {box-shadow:none}
.lb11-shop :is(.st-card,.st-order) button:focus-visible,
.lb11-shop :is(.st-card,.st-order) a:focus-visible {outline:2px solid var(--lb11-gold);outline-offset:2px}
.fp-arena .fp-hero {border-radius:12px}
.fp-arena .fp-card {border-radius:12px}
@media (max-width:700px) {
  .lb11-shop .st-card,.lb11-shop .st-order {border-radius:10px}
  .lb11-shop .st-tools {gap:10px}
}
@media (prefers-reduced-motion:reduce) {
  .lb11-shop .st-card,.lp-pick3 .lp-player.pp {transition:none!important}
}