/* BronzeRush v5.0 — scene based show flow */

html,body{width:100%;height:100%;overflow:hidden}
body{
  min-height:100vh;
  background:
    radial-gradient(circle at 50% -20%,rgba(205,127,50,.18),transparent 38%),
    #080706
}
.show-header{
  height:58px;
  position:relative;
  z-index:80;
  padding:8px 14px;
}
.show-header .logo{width:38px;height:38px;border-radius:10px}
.show-header h1{font-size:18px}
.show-header .sub{font-size:10px}

.show-shell{
  position:relative;
  width:min(1660px,100%);
  height:calc(100vh - 58px);
  margin:0 auto;
  overflow:hidden;
  padding:0 16px 14px;
}

.stage-hud{
  position:absolute;
  top:13px;
  left:30px;
  right:30px;
  z-index:28;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  pointer-events:none;
}
.stage-hud .phase{box-shadow:0 8px 28px rgba(0,0,0,.28)}
.stage-timer{
  min-width:118px;
  text-align:right;
  color:#fff5e9;
  font-size:clamp(30px,3vw,48px);
  line-height:1;
  font-weight:1000;
  font-variant-numeric:tabular-nums;
  text-shadow:0 5px 22px #000;
}

.show-scene{
  position:absolute;
  inset:0 16px 14px;
  z-index:1;
  opacity:0;
  visibility:hidden;
  transform:scale(.985);
  pointer-events:none;
  transition:
    opacity .48s ease,
    transform .58s cubic-bezier(.2,.8,.2,1),
    visibility 0s linear .58s;
}
.show-scene.active{
  z-index:5;
  opacity:1;
  visibility:visible;
  transform:scale(1);
  pointer-events:auto;
  transition-delay:0s;
}

.scene-heading{
  height:132px;
  padding-top:58px;
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
}
.scene-kicker{
  color:#f2a85f;
  font-size:11px;
  font-weight:1000;
  letter-spacing:3.2px;
}
.scene-heading h2{
  margin-top:4px;
  font-size:clamp(32px,3.6vw,56px);
  line-height:.96;
  letter-spacing:-1px;
  text-shadow:0 7px 28px rgba(0,0,0,.45)
}
.scene-heading p{
  margin-top:7px;
  color:#bfae9f;
  font-size:12px;
}

/* ---------------- Voting ---------------- */

.vote-show-grid{
  height:calc(100% - 142px);
  display:grid;
  grid-template-columns:repeat(6,minmax(0,1fr));
  grid-template-rows:repeat(2,minmax(0,1fr));
  gap:10px;
  padding:0 8px 8px;
}
.vote-character-card{
  --accent:#cd7f32;
  position:relative;
  min-width:0;
  overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 54%,#402818 46%);
  border-radius:17px;
  background:
    radial-gradient(circle at 50% 25%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 45%),
    linear-gradient(180deg,#1a130e,#0c0907);
  box-shadow:0 16px 36px rgba(0,0,0,.28);
  opacity:0;
  transform:translateY(22px) scale(.96);
  animation:voteEnter .42s ease forwards;
  animation-delay:var(--delay);
}
@keyframes voteEnter{
  to{opacity:1;transform:none}
}
.vote-character-card:before{
  content:"";
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.11),transparent 28%);
  pointer-events:none
}
.vote-character-card.selected{
  outline:2px solid color-mix(in srgb,var(--accent) 72%,#fff 16%);
  box-shadow:0 18px 48px rgba(0,0,0,.36),0 0 32px color-mix(in srgb,var(--accent) 30%,transparent)
}
.vote-art{
  height:calc(100% - 82px);
  min-height:100px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  position:relative;
  background:rgba(0,0,0,.12)
}
.vote-art img{
  width:100%;height:100%;object-fit:cover;
  object-position:50% 15%;
  transform:scale(1.13)
}
.vote-emoji{
  font-size:clamp(52px,5vw,92px);
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.45))
}
.vote-info{
  height:82px;
  padding:8px 10px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  grid-template-rows:auto auto;
  gap:2px 7px;
  align-items:center
}
.vote-name{
  font-size:16px;
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis
}
.vote-trait{
  font-size:9px;color:#cdbbad;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.vote-count{
  grid-row:1/span 2;
  grid-column:2;
  align-self:center;
  text-align:right;
  color:#ffb267;
  font-size:11px;
  font-weight:1000
}
.vote-action{
  position:absolute;
  inset:auto 8px 8px;
  opacity:0;
  transform:translateY(6px);
  transition:.2s ease
}
.vote-character-card:hover .vote-action,
.vote-character-card.selected .vote-action{
  opacity:1;transform:none
}
.vote-action button{
  width:100%;
  padding:8px;
  font-size:11px;
  background:linear-gradient(#5a3415,#321b0b)
}

/* ---------------- Prediction ---------------- */

.prediction-heading{height:150px}
.prediction-show-grid{
  height:calc(100% - 160px);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:12px;
  padding:0 6px 8px;
  align-items:stretch
}
.show-predict-card{
  --accent:#cd7f32;
  min-width:0;
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border-radius:20px;
  border:1px solid color-mix(in srgb,var(--accent) 58%,#50301b 42%);
  background:
    radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--accent) 22%,transparent),transparent 42%),
    linear-gradient(180deg,#1b130e,#0b0806 72%);
  box-shadow:0 24px 52px rgba(0,0,0,.34);
  opacity:0;
  transform:translateY(-90px) scale(1.16) rotate(-2deg);
  animation:cardSlam .48s cubic-bezier(.18,.92,.24,1.18) forwards;
  animation-delay:var(--delay)
}
@keyframes cardSlam{
  0%{opacity:0;transform:translateY(-90px) scale(1.16) rotate(-2deg)}
  72%{opacity:1;transform:translateY(6px) scale(.985) rotate(.4deg)}
  100%{opacity:1;transform:none}
}
.show-predict-card.locked{filter:grayscale(.72) brightness(.55)}
.show-predict-card.picked{
  filter:none;
  outline:3px solid color-mix(in srgb,var(--accent) 70%,#fff 18%);
  box-shadow:0 28px 62px rgba(0,0,0,.42),0 0 42px color-mix(in srgb,var(--accent) 32%,transparent)
}
.predict-art{
  position:relative;
  flex:1;
  min-height:210px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.15)
}
.predict-art img{
  width:100%;height:100%;
  display:block;
  object-fit:cover;
  object-position:50% 15%;
  transform:scale(1.08)
}
.predict-art .vote-emoji{font-size:96px}
.predict-odds{
  position:absolute;
  top:10px;right:10px;
  padding:8px 10px;
  border-radius:999px;
  color:#ffd29d;
  background:rgba(8,6,5,.86);
  border:1px solid color-mix(in srgb,var(--accent) 50%,#fff 10%);
  font-weight:1000;
  font-size:14px
}
.predict-info-btn{
  position:absolute;
  top:10px;left:10px;
  width:31px;height:31px;
  border-radius:999px;
  padding:0;
  display:grid;place-items:center;
  z-index:2;
  background:rgba(8,6,5,.84)
}
.predict-copy{
  padding:10px 12px 6px;
}
.predict-name{
  font-size:22px;font-weight:1000;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.predict-trait{
  margin-top:3px;
  color:#cdbdaf;
  font-size:10px;
  min-height:14px
}
.predict-controls{
  padding:8px 10px 11px;
  display:grid;
  grid-template-columns:minmax(0,1fr) 1fr;
  gap:7px
}
.predict-controls input{
  width:100%;
  min-width:0;
  background:#0c0907;
  color:#fff;
  border:1px solid #49301e;
  border-radius:10px;
  padding:10px;
  font-weight:1000
}
.predict-controls .predict-btn{
  width:100%;
  font-size:12px
}
.predict-votes{
  grid-column:1/-1;
  text-align:center;
  font-size:9px;
  color:#aa998a;
  font-weight:900;
  letter-spacing:.6px
}

/* ---------------- Countdown ---------------- */

.countdown-scene{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 45%,rgba(205,127,50,.19),transparent 32%);
}
.countdown-kicker{
  color:#d9c3af;
  font-size:clamp(15px,1.5vw,24px);
  font-weight:1000;
  letter-spacing:5px
}
.countdown-number{
  margin-top:8px;
  font-size:clamp(150px,25vw,360px);
  line-height:.82;
  font-weight:1000;
  color:#fff4e9;
  text-shadow:
    0 0 35px rgba(205,127,50,.28),
    0 18px 60px rgba(0,0,0,.65)
}
.countdown-number.punch{
  animation:countPunch .52s cubic-bezier(.12,.8,.2,1)
}
@keyframes countPunch{
  0%{transform:scale(1.45);opacity:.1}
  45%{transform:scale(.94);opacity:1}
  100%{transform:scale(1)}
}
.locked-pick{
  margin-top:22px;
  min-height:40px;
  color:#ffcb94;
  font-size:15px;
  font-weight:1000
}

/* ---------------- Race ---------------- */

.race-show-scene{padding-top:64px}
.race-show-layout{
  height:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr) 320px;
  gap:13px
}
.race-stage{
  min-width:0;
  min-height:0;
  display:flex;
  flex-direction:column;
  align-items:center
}
.show-canvas{
  width:min(100%, calc((100vh - 255px) * 16 / 9));
  aspect-ratio:16/9 !important;
  flex:0 0 auto;
  min-height:auto;
  max-height:none!important;
  margin:0 auto
}
.show-canvas canvas{
  width:100%;
  height:100%;
  display:block
}
.show-event{
  width:min(100%, calc((100vh - 255px) * 16 / 9));
  min-height:54px;
  margin:9px auto 0;
  font-size:16px
}
.your-pick-bar{
  width:min(100%, calc((100vh - 255px) * 16 / 9));
  min-height:40px;
  margin:7px auto 0;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  border:1px solid #3e2a1c;
  border-radius:12px;
  background:#100d0a;
  font-size:12px
}
.your-pick-label{
  color:#bda99a;
  font-size:9px;
  letter-spacing:1.8px;
  font-weight:1000
}
.race-rail{
  min-height:0;
  padding:14px;
  border:1px solid #3b291d;
  border-radius:18px;
  background:linear-gradient(180deg,rgba(31,23,17,.98),rgba(19,14,11,.98));
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden
}
.rail-block{
  min-height:0
}
.rail-block h3{font-size:16px}
.rail-grow{
  flex:1;
  display:flex;
  flex-direction:column
}
.race-scroll{overflow:auto}
.race-rail .feed{max-height:none;flex:1}
.compact-rail-info{
  padding-top:10px;
  border-top:1px solid #3b291d
}
.compact-rail-info #sideContent .choice{
  margin-top:7px;
  padding:7px
}
.race-result-overlay{
  position:absolute;
  inset:0;
  z-index:18;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:
    radial-gradient(circle at 50% 42%,rgba(205,127,50,.28),transparent 30%),
    rgba(5,4,3,.76);
  backdrop-filter:blur(4px);
  opacity:0;
  visibility:hidden;
  transition:.38s ease
}
.race-result-overlay.show{opacity:1;visibility:visible}
.result-kicker{
  color:#ffb76d;
  letter-spacing:4px;
  font-size:12px;
  font-weight:1000
}
.result-winner{
  margin-top:6px;
  font-size:clamp(44px,6vw,88px);
  line-height:.92;
  font-weight:1000
}
.result-message{
  margin-top:14px;
  max-width:700px;
  color:#f4ddc8;
  font-size:18px;
  font-weight:900
}
.result-next{
  margin-top:22px;
  color:#a99686;
  font-size:11px;
  font-weight:1000;
  letter-spacing:1.5px
}

/* ---------------- Full-screen transitions ---------------- */

.show-transition{
  position:absolute;
  inset:0 16px 14px;
  z-index:50;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:#080706;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition:opacity .34s ease,visibility 0s linear .36s
}
.show-transition.show{
  opacity:1;
  visibility:visible;
  transition-delay:0s
}
.transition-glow{
  position:absolute;
  width:650px;height:650px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(205,127,50,.28),transparent 66%);
  transform:scale(.5);
  opacity:0
}
.show-transition.show .transition-glow{
  animation:transitionGlow 1.4s ease forwards
}
@keyframes transitionGlow{
  0%{opacity:0;transform:scale(.4)}
  35%{opacity:1}
  100%{opacity:.28;transform:scale(1.35)}
}
.transition-content{
  position:relative;
  text-align:center;
  transform:scale(.85);
  opacity:0
}
.show-transition.show .transition-content{
  animation:transitionTitle .55s .18s cubic-bezier(.2,.9,.2,1.15) forwards
}
@keyframes transitionTitle{
  to{opacity:1;transform:scale(1)}
}
.transition-kicker{
  color:#eaa25b;
  font-size:12px;
  font-weight:1000;
  letter-spacing:4px
}
.transition-title{
  margin-top:7px;
  font-size:clamp(46px,7vw,104px);
  line-height:.88;
  font-weight:1000;
  letter-spacing:-3px;
  text-shadow:0 12px 50px rgba(0,0,0,.65)
}
.transition-sub{
  margin-top:17px;
  color:#c9b7a8;
  font-size:14px;
  font-weight:800
}

.compat-hidden{
  display:none!important
}

/* Keep the info modal above show transitions when opened deliberately. */
.info-modal{z-index:90}

@media(max-width:1350px){
  .vote-show-grid{grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(3,minmax(0,1fr))}
  .prediction-show-grid{gap:8px}
  .predict-name{font-size:18px}
  .race-show-layout{grid-template-columns:minmax(0,1fr) 280px}
}
@media(max-width:1000px){
  html,body{overflow:auto}
  .show-shell{height:auto;min-height:calc(100vh - 58px);overflow:visible}
  .show-scene{position:relative;inset:auto;display:none;min-height:700px}
  .show-scene.active{display:block}
  .vote-show-grid{grid-template-columns:repeat(3,1fr);height:auto}
  .prediction-show-grid{grid-template-columns:repeat(2,1fr);height:auto}
  .race-show-layout{grid-template-columns:1fr}
  .stage-hud{position:fixed;top:68px}
}


/* v5.0.1 — broadcast camera / aspect-ratio fix
   The race viewport now stays true 16:9 so the oval and cars are not stretched.
   The race HUD bars use the same effective width as the canvas. */

/* =========================================================
   BRONZERUSH MASTER RACER CARD V1
   Standard artwork size: 768 x 2048 px (3:8)

   ONE IMAGE / TWO VIEWS:
   - VOTING: top hero crop only (name + driver/car)
   - PREDICTION: full master card scaled to fit
   ========================================================= */


/* ---------- VOTING VIEW ----------
   Only portrait-based/master-card racers use this crop.
   Emoji fallback cards keep their existing layout.
*/
.vote-character-card:has(.vote-art img) .vote-art{
  /* 768 / ~970 = ~0.79.
     This window deliberately stops before the stat block. */
  width:100%;
  height:auto;
  aspect-ratio:0.79;
  min-height:0;
  flex:0 0 auto;
  overflow:hidden;
  align-items:flex-start;
  justify-content:center;
  background:#090705;
}

.vote-character-card:has(.vote-art img) .vote-art img{
  position:absolute;
  top:0;
  left:0;

  /* Master card fills the slot by width.
     Height remains natural, so we crop vertically — never stretch. */
  width:100%;
  height:auto;
  max-width:none;

  object-fit:initial;
  object-position:initial;

  /* Remove the old portrait zoom completely. */
  transform:none;
}

/* Keep the game's own name/votes UI anchored at the bottom.
   The space between hero crop and info becomes intentional breathing room. */
.vote-character-card:has(.vote-art img) .vote-info{
  position:absolute;
  left:0;
  right:0;
  bottom:0;
  height:82px;
  z-index:3;

  background:
    linear-gradient(
      180deg,
      rgba(8,6,5,0) 0%,
      rgba(8,6,5,.86) 24%,
      rgba(8,6,5,.98) 100%
    );
}

/* Fade the lower edge of the hero crop into the card background. */
.vote-character-card:has(.vote-art img) .vote-art:after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-1px;
  height:44px;
  pointer-events:none;
  background:linear-gradient(180deg,transparent,#0c0907 96%);
}


/* ---------- PREDICTION VIEW ----------
   Full master card visible. No crop, no artificial zoom.
*/
.show-predict-card:has(.predict-art img) .predict-art{
  flex:1 1 auto;
  min-height:0;
  padding:5px 5px 0;
  overflow:hidden;
  align-items:flex-start;
  justify-content:center;

  background:
    radial-gradient(
      circle at 50% 20%,
      color-mix(in srgb,var(--accent) 12%,transparent),
      transparent 42%
    ),
    #090705;
}

.show-predict-card:has(.predict-art img) .predict-art img{
  display:block;

  /* Fit the WHOLE 3:8 master card inside the available artwork area. */
  width:100%;
  height:100%;
  max-width:100%;
  max-height:100%;

  object-fit:contain;
  object-position:top center;

  /* Critical: no old portrait zoom / stretching. */
  transform:none;
}

/* Prediction HTML controls remain visually separate from the artwork.
   The image contains racer information; the game owns odds/stake/lock-in. */
.show-predict-card:has(.predict-art img) .predict-copy{
  position:relative;
  z-index:3;
  background:linear-gradient(180deg,rgba(11,8,6,.72),#0b0806 55%);
}

.show-predict-card:has(.predict-art img) .predict-controls{
  position:relative;
  z-index:3;
  background:#0b0806;
}

/* Make overlay controls readable without hiding the card artwork. */
.show-predict-card:has(.predict-art img) .predict-info-btn,
.show-predict-card:has(.predict-art img) .predict-odds{
  z-index:6;
  backdrop-filter:blur(5px);
}


/* ---------- MASTER CARD SAFE AREA ----------
   Keep all generated text inside ~8% side margins.
   This is documentation for future racer artwork and does not alter layout.

   ART STANDARD:
   Canvas:       768 x 2048 px
   Ratio:        3:8
   Side safe:    ~62 px minimum
   Hero zone:    y = 0 .. ~970 px
   Detail zone:  y = ~970 .. 2048 px

   VOTE uses approximately the hero zone.
   PREDICTION displays the complete 2048 px card.
*/


/* =========================================================
   VOTING BUTTON FIX
   Keeps voting controls above MASTER RACER CARD artwork.
   ========================================================= */

/* Reserve a clean bottom UI area on every voting card. */
.vote-character-card .vote-info{
  position:absolute;
  left:0;
  right:0;
  bottom:42px;
  height:62px;
  z-index:7;
  padding:7px 9px;

  background:
    linear-gradient(
      180deg,
      rgba(8,6,5,0) 0%,
      rgba(8,6,5,.82) 24%,
      rgba(8,6,5,.98) 100%
    );
}

/* The vote button is always visible and always clickable. */
.vote-character-card .vote-action{
  position:absolute;
  left:8px;
  right:8px;
  bottom:7px;
  z-index:10;

  opacity:1;
  transform:none;
  pointer-events:auto;
}

/* Override the old hover-only behavior. */
.vote-character-card:hover .vote-action,
.vote-character-card.selected .vote-action{
  opacity:1;
  transform:none;
}

.vote-character-card .vote-action button{
  width:100%;
  min-height:29px;
  padding:6px 8px;
  font-size:10px;
  line-height:1;
  position:relative;
  z-index:11;
}

/* Master artwork may visually continue behind the UI, but can never
   intercept clicks intended for the voting controls. */
.vote-character-card .vote-art,
.vote-character-card .vote-art img,
.vote-character-card .vote-art:after{
  pointer-events:none;
}

/* On master-card racers, keep the lower fade above the artwork but
   below the actual game controls. */
.vote-character-card:has(.vote-art img) .vote-art:after{
  z-index:2;
}

.vote-character-card:has(.vote-art img) .vote-info{
  bottom:42px;
  height:62px;
  z-index:7;
}

/* Selected racer remains visually clear after the vote is locked. */
.vote-character-card.selected .vote-action button{
  filter:brightness(1.08);
}