/* Voting, betting, standings, layout and racer card modal */

.choice{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;padding:9px 10px;border:1px solid var(--line);border-radius:12px;background:#120e0b}
.choice strong{display:block}.votes{font-size:12px;color:var(--bronze2);font-weight:900}
.choices{display:grid;gap:7px;max-height:470px;overflow:auto}
button{border:1px solid #70431e;background:linear-gradient(#48290f,#301a0b);color:#ffe6ca;padding:9px 12px;border-radius:10px;font-weight:1000;cursor:pointer}
button:hover{filter:brightness(1.14)}button:disabled{opacity:.34;cursor:not-allowed;filter:none}.selected{outline:2px solid var(--bronze2)}
.sep{margin-top:13px;padding-top:12px;border-top:1px solid var(--line)}
.standings{display:grid;gap:6px;margin-top:8px}
.standing{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:8px 9px;border-radius:10px;border:1px solid var(--line);background:#100d0b}
.pos{font-size:12px;color:var(--bronze2);font-weight:1000}
.meter{height:5px;background:#241a13;border-radius:999px;overflow:hidden;margin-top:5px}
.meter > div{height:100%;background:linear-gradient(90deg,#c26c32,#f0a45a);border-radius:999px}
.damage{font-size:10px;color:#c8b9ac}
.feed{display:grid;gap:6px;max-height:235px;overflow:auto;margin-top:8px}
.feedline{font-size:12px;padding:7px 8px;border:1px solid #2d2017;border-radius:9px;background:#100d0b;color:#ded0c4}.feedline:first-child{color:#fff}
.predpanel{display:none}
.predgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}
@media(max-width:900px){.predgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.predgrid{grid-template-columns:1fr}}

.pred-card{
  --accent:#cd7f32;
  position:relative;padding:12px;border-radius:16px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 50%,#5c381e 50%);
  background:
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 16%,#17110d),#0b0908 72%);
  box-shadow:0 14px 34px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--accent) 12%,transparent);
}
.pred-card:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 26%);
  pointer-events:none
}
.pred-card.locked{opacity:.62}
.pred-card.picked{
  outline:2px solid color-mix(in srgb,var(--accent) 70%,#fff 15%);
  box-shadow:0 18px 40px rgba(0,0,0,.4),0 0 28px color-mix(in srgb,var(--accent) 28%,transparent)
}
.pred-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.pred-name{font-size:22px;font-weight:1000;line-height:1}
.pred-icon{font-size:18px;margin-right:6px}
.pred-trait{font-size:11px;color:#d5c7bb;margin-top:4px;min-height:28px}
.pred-mult{
  padding:7px 9px;border-radius:11px;white-space:nowrap;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);
  color:#ffd19a;font-size:15px;font-weight:1000
}
.pred-stats{display:grid;gap:6px;margin-top:10px}
.pred-stat{
  display:grid;grid-template-columns:74px 1fr 34px;align-items:center;gap:8px
}
.pred-stat-label{font-size:10px;color:#d3c2b3;font-weight:900;letter-spacing:.6px}
.pred-stat-bar{
  height:7px;border-radius:999px;background:#241a13;overflow:hidden
}
.pred-stat-bar > div{
  height:100%;border-radius:999px;background:var(--accent);
  box-shadow:0 0 10px color-mix(in srgb,var(--accent) 50%,transparent)
}
.pred-stat-value{font-size:11px;color:#fff;font-weight:900;text-align:right}
.pred-bottom{display:grid;gap:8px;margin-top:12px}
.pred-bottom input{
  width:100%;background:#0d0a08;color:var(--text);border:1px solid var(--line);
  border-radius:10px;padding:9px 10px;font-weight:900
}
.pred-bottom button{width:100%}
.pred-minirow{
  display:flex;justify-content:space-between;align-items:center;gap:10px;
  font-size:10px;color:#cdb9a9;font-weight:900;letter-spacing:.5px;margin-top:8px
}
.pred-highlight{
  display:inline-flex;align-items:center;gap:6px;
  padding:4px 7px;border-radius:999px;background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);font-size:10px;color:#f0dfcf
}
.winner{color:var(--yellow)}

/* v4.7 one-screen three-column shell */
body{height:100vh;overflow:hidden}
header{position:sticky;top:0}
.app-shell{
  max-width:1600px;
  margin:0 auto;
  padding:14px;
  height:calc(100vh - 78px);
  display:grid;
  grid-template-columns:310px minmax(0,1fr) 310px;
  gap:14px;
  overflow:hidden
}
.panel{min-height:0;display:flex;flex-direction:column}
.race-panel{overflow:hidden}
.race-panel canvas{max-height:100%}
.race-panel .canvas-wrap{
  flex:0 0 auto;
  min-height:0;
  aspect-ratio:auto;
  height:auto;
  min-height:0;
  max-height:500px
}
.race-panel .event{margin-top:8px;min-height:52px;font-size:15px;padding:10px 14px}
.race-panel .tags{margin-top:6px}
.side-panel,.predpanel{overflow:hidden}
.side-scroll{overflow:auto}
.side-content, .side-panel #sideContent{flex:0 0 auto}
.side-block{display:flex;flex-direction:column;min-height:0}
.side-fill{flex:1;min-height:0}
.feed{max-height:none;flex:1}
.choices{max-height:none}
.predpanel{display:flex}
.pred-empty{
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;min-height:120px;padding:14px 12px;margin-bottom:8px;
  border:1px dashed #4b3323;border-radius:16px;background:#100d0b;color:#d9c8b9
}
.pred-empty-title{font-size:18px;font-weight:1000}
.pred-empty-sub{font-size:12px;color:#bdaea0;max-width:250px;margin-top:8px;line-height:1.45}
.predgrid{
  grid-template-columns:1fr;
  gap:10px;
  overflow:auto;
  padding-right:4px;
  min-height:0
}
.pred-card{
  padding:8px 9px;
  border-radius:12px
}
.pred-name{font-size:16px}
.pred-trait{font-size:9px;min-height:16px;line-height:1.2}
.pred-mult{font-size:12px;padding:5px 7px}
.pred-minirow{font-size:8px;margin-top:4px}
.pred-stats{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:4px 6px;
  margin-top:6px
}
.pred-stat{
  grid-template-columns:48px 1fr 22px;
  gap:4px
}
.pred-stat-label,.pred-stat-value{font-size:8px}
.pred-stat-bar{height:5px}
.pred-bottom{
  grid-template-columns:78px 1fr;
  align-items:center;
  gap:6px;
  margin-top:8px
}
.pred-bottom button{width:100%;white-space:nowrap;padding:7px 9px;font-size:12px}
.pred-bottom input{padding:7px 8px;font-size:12px}
@media(max-width:1250px){
  body{overflow:auto}
  .app-shell{
    height:auto;
    min-height:calc(100vh - 78px);
    grid-template-columns:250px minmax(0,1fr) 270px
  }
  .race-panel .canvas-wrap{max-height:420px}
}
@media(max-width:1050px){
  body{overflow:auto}
  .app-shell{
    height:auto;
    grid-template-columns:1fr;
  }
  .predgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:700px){
  .predgrid{grid-template-columns:1fr}
}

/* v4.8 compact betting rows */
.pred-empty{min-height:96px}
.predgrid{gap:8px}
.pred-row{
  --accent:#cd7f32;
  position:relative;
  padding:10px 10px 9px;
  border-radius:12px;
  border:1px solid color-mix(in srgb,var(--accent) 52%,#5c381e 48%);
  background:linear-gradient(180deg,color-mix(in srgb,var(--accent) 13%,#17110d),#0b0908 72%);
  box-shadow:0 10px 22px rgba(0,0,0,.28);
}
.pred-row.locked{opacity:.62}
.pred-row.picked{
  outline:2px solid color-mix(in srgb,var(--accent) 75%,#fff 12%);
  box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 18px color-mix(in srgb,var(--accent) 24%,transparent);
}
.pred-row-top{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  align-items:start;
}
.pred-row-name{
  font-size:15px;font-weight:1000;line-height:1.05;
  display:flex;align-items:center;gap:6px
}
.pred-row-trait{
  font-size:9px;color:#d0c0b2;margin-top:4px;line-height:1.15;
  min-height:10px
}
.pred-row-right{
  display:flex;align-items:center;gap:6px
}
.pred-row-mult{
  padding:5px 7px;border-radius:999px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.10);
  color:#ffd19a;font-size:11px;font-weight:1000;white-space:nowrap
}
.info-btn{
  width:24px;height:24px;border-radius:999px;padding:0;
  display:grid;place-items:center;font-size:12px;font-weight:1000;
  background:#18120e;border:1px solid #6d4625;color:#ffe3c2
}
.pred-row-bottom{
  display:grid;
  grid-template-columns:70px 1fr auto;
  gap:6px;
  align-items:center;
  margin-top:8px
}
.pred-row-bottom input{
  width:100%;background:#0d0a08;color:var(--text);border:1px solid var(--line);
  border-radius:9px;padding:7px 8px;font-size:12px;font-weight:900
}
.pred-row-bottom button{
  padding:7px 10px;border-radius:9px;font-size:12px
}
.pred-row-votes{
  font-size:9px;color:#cdb9a9;font-weight:900;letter-spacing:.4px;text-align:right
}

/* Info modal */
.info-modal{
  position:fixed;inset:0;display:none;z-index:60;
  align-items:center;justify-content:center
}
.info-modal.show{display:flex}
.info-backdrop{
  position:absolute;inset:0;background:rgba(0,0,0,.72);backdrop-filter:blur(3px)
}
.info-card{
  position:relative;z-index:1;width:min(560px,92vw);max-height:88vh;overflow:auto;
  border-radius:22px;border:1px solid #8c5b31;
  background:linear-gradient(180deg,#20150e,#0f0b08 72%);
  box-shadow:0 26px 80px rgba(0,0,0,.55),0 0 35px rgba(205,127,50,.16);
  padding:16px
}
.info-close{
  position:absolute;top:12px;right:12px;width:34px;height:34px;padding:0;
  border-radius:999px;display:grid;place-items:center;font-size:14px
}
.info-full{
  --accent:#cd7f32;
  position:relative;padding:16px;border-radius:18px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--accent) 55%,#6f4422 45%);
  background:
    radial-gradient(circle at 50% 24%,color-mix(in srgb,var(--accent) 18%,transparent),transparent 36%),
    linear-gradient(180deg,color-mix(in srgb,var(--accent) 14%,#17110d),#0a0907 78%);
}
.info-full:before{
  content:"";position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(255,255,255,.10),transparent 25%);
  pointer-events:none
}
.info-headline{
  display:flex;justify-content:space-between;align-items:flex-start;gap:12px
}
.info-badge{
  padding:8px 10px;border-radius:12px;background:rgba(0,0,0,.24);
  border:1px solid rgba(255,255,255,.10);color:#f7d4ad;font-size:13px;font-weight:1000
}
.info-name{
  font-size:36px;font-weight:1000;line-height:1
}
.info-trait{
  margin-top:6px;color:#d7c8bb;font-size:13px
}
.info-hero{
  margin-top:14px;display:grid;grid-template-columns:1.1fr .9fr;gap:12px;align-items:end
}
.info-driver{
  min-height:170px;border-radius:16px;padding:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--accent) 26%,transparent),transparent 40%),
    rgba(0,0,0,.22);
  display:flex;flex-direction:column;justify-content:flex-end
}
.info-driver-emoji{
  font-size:72px;line-height:1;text-align:center;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))
}
.info-driver-label{
  text-align:center;font-size:11px;color:#cebdae;font-weight:1000;letter-spacing:1px;margin-top:8px
}
.info-car{
  min-height:170px;border-radius:16px;padding:14px;
  border:1px solid rgba(255,255,255,.08);
  background:
    radial-gradient(circle at 50% 22%,color-mix(in srgb,var(--accent) 20%,transparent),transparent 40%),
    rgba(0,0,0,.22);
  display:flex;flex-direction:column;justify-content:flex-end
}
.info-car-emoji{
  font-size:86px;line-height:1;text-align:center;filter:drop-shadow(0 8px 10px rgba(0,0,0,.45))
}
.info-car-label{
  text-align:center;font-size:11px;color:#cebdae;font-weight:1000;letter-spacing:1px;margin-top:8px
}
.info-stats{
  display:grid;gap:8px;margin-top:16px
}
.info-stat{
  display:grid;grid-template-columns:100px 1fr 38px;gap:10px;align-items:center
}
.info-stat-label{font-size:11px;color:#dbcbbc;font-weight:1000;letter-spacing:.6px}
.info-stat-bar{height:9px;border-radius:999px;background:#241a13;overflow:hidden}
.info-stat-bar>div{
  height:100%;border-radius:999px;background:var(--accent);
  box-shadow:0 0 12px color-mix(in srgb,var(--accent) 45%,transparent)
}
.info-stat-value{font-size:12px;text-align:right;font-weight:1000}
.info-quote{
  margin-top:16px;padding:14px;border-radius:14px;
  border:1px solid rgba(255,255,255,.08);background:rgba(0,0,0,.22);
  color:#f1e4d7;font-size:18px;font-weight:1000;line-height:1.35
}
.info-subgrid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px
}
.info-chip{
  padding:10px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.08);
  background:rgba(0,0,0,.20);font-size:11px;color:#d8c8bb;font-weight:900
}
.info-chip b{display:block;color:#fff;font-size:14px;margin-bottom:3px}
@media(max-width:700px){
  .info-hero{grid-template-columns:1fr}
  .info-name{font-size:28px}
  .info-stat{grid-template-columns:82px 1fr 34px}
}


/* v4.9 — real racer artwork integration */
.racer-thumb{
  width:52px;height:52px;flex:0 0 52px;
  border-radius:10px;overflow:hidden;display:inline-block;
  border:1px solid rgba(255,255,255,.18);background:#0d0907;
  box-shadow:0 5px 14px rgba(0,0,0,.28)
}
.racer-thumb img{
  width:100%;height:100%;display:block;
  object-fit:cover;object-position:50% 17%;
  transform:scale(1.42)
}
.pred-row-name{align-items:center}
.art-card-viewer{
  display:flex;flex-direction:column;align-items:center;
  gap:10px;padding:6px
}
.art-card-label{
  width:min(410px,100%);padding-right:42px;
  display:flex;justify-content:space-between;align-items:flex-end;
  gap:12px;color:#d8c7b8;font-size:11px
}
.art-card-label span:first-child{
  color:#fff;font-size:18px;font-weight:1000
}
.art-card-image{
  display:block;width:auto;max-width:100%;max-height:78vh;
  object-fit:contain;border-radius:14px;
  box-shadow:0 22px 55px rgba(0,0,0,.55)
}


/* v4.9.1 — larger mini portraits */
.pred-row{
  padding:9px 10px 8px;
}
.pred-row-top{
  align-items:center;
}
.pred-row-name{
  gap:9px;
}
.pred-row-trait{
  margin-top:3px;
}
.pred-row-bottom{
  margin-top:6px;
}