/* ═══════════════════════════════════════════
   CRICKET TCG · STADIUM NIGHTS
   UI/UX Prototype — Visual Reference
═══════════════════════════════════════════ */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;}
:root{
  --ink:#05080f;
  --s0:#080d18;
  --s1:#0c1222;
  --s2:#10192e;
  --s3:#172238;
  --gold:#f2c443;
  --gold-lt:#fad96e;
  --gold-dim:rgba(242,196,67,.14);
  --gold-b:rgba(242,196,67,.28);
  --red:#e03838;
  --green:#32c068;
  --green-b:rgba(50,192,104,.38);
  --green-dim:rgba(50,192,104,.10);
  --tp:#eceef8;
  --ts:#7888aa;
  --tm:#3d4e6a;
  --bsub:rgba(255,255,255,.06);
  --bmid:rgba(255,255,255,.12);
  --bat-bg:#0a1c36;--bat-b:rgba(64,152,240,.6);--bat-t:#80c8ff;--bat-d:rgba(64,152,240,.10);
  --bowl-bg:#16092e;--bowl-b:rgba(152,72,240,.6);--bowl-t:#c898ff;--bowl-d:rgba(152,72,240,.10);
  --sup-bg:#081a0c;--sup-b:rgba(50,192,104,.52);--sup-t:#58e890;--sup-d:rgba(50,192,104,.08);--sup-glow:rgba(50,192,104,.35);
  --cap-bg:#1e0808;--cap-b:rgba(220,72,72,.58);--cap-t:#ff9090;--cap-d:rgba(220,72,72,.10);
  --fh:var(--font-ui);
  --fb:var(--font-ui);
}
html,body{width:100%;height:100%;overflow:hidden;background:var(--s0);font-family:var(--fb);color:var(--tp);}

/* ─── SCREEN SYSTEM ─── */
.screen{display:none;position:fixed;inset:0;overflow-y:auto;overflow-x:hidden;background:var(--s0);}
.screen.active{display:flex;flex-direction:column;}
#s-lobby,#s-deck,#s-final{overflow-y:auto;}
#s-board{overflow:hidden;display:none;flex-direction:column;justify-content:flex-start;}
#s-board.active{display:flex;}

/* ─── SHARED BUTTONS ─── */
.btn-p{
  width:100%;background:linear-gradient(180deg,#f7d050 0%,#e8ac20 100%);
  color:var(--ink);border:none;border-radius:10px;padding:15px;
  font-size:.95rem;font-weight:700;letter-spacing:2.5px;text-transform:uppercase;
  cursor:pointer;font-family:var(--fh);flex-shrink:0;
  box-shadow:0 4px 16px rgba(242,196,67,.28),0 1px 0 rgba(255,255,255,.15) inset;
  transition:transform .1s,box-shadow .1s;
}
.btn-p:active{transform:scale(.98);box-shadow:0 2px 8px rgba(242,196,67,.2);}
.btn-s{
  width:100%;background:transparent;color:var(--gold);
  border:1.5px solid var(--gold-b);border-radius:10px;padding:13px;
  font-size:.9rem;cursor:pointer;font-family:var(--fh);letter-spacing:1.5px;
  flex-shrink:0;transition:background .15s,border-color .15s;
}
.btn-s:active{background:var(--gold-dim);border-color:var(--gold);}
.divdr{display:flex;align-items:center;gap:10px;color:var(--tm);font-size:.7rem;letter-spacing:1px;}
.divdr::before,.divdr::after{content:'';flex:1;height:1px;background:var(--bsub);}

/* ─── LOBBY ─── */
#s-lobby{
  background:var(--s0);align-items:center;justify-content:center;
  padding:2.2rem 1.5rem;gap:1.8rem;
  /* Radial stadium light from top */
  background-image:
    radial-gradient(ellipse 70% 40% at 50% 0%,rgba(242,196,67,.09) 0%,transparent 65%),
    radial-gradient(ellipse 40% 25% at 20% 100%,rgba(64,152,240,.05) 0%,transparent 70%),
    radial-gradient(ellipse 40% 25% at 80% 100%,rgba(152,72,240,.05) 0%,transparent 70%);
  background-size:100% 100%,100% 100%,100% 100%;
}
#s-lobby::after{
  content:'';position:fixed;top:0;left:50%;
  width:300px;height:200px;
  transform:translateX(-50%);
  background:conic-gradient(from 270deg at 50% 0%,
    transparent 70deg,rgba(242,196,67,.04) 80deg,transparent 90deg,
    transparent 160deg,rgba(242,196,67,.04) 170deg,transparent 180deg,
    transparent 250deg
  );
  pointer-events:none;
}
.logo-title{
  font-family:var(--fh);font-size:2.6rem;font-weight:700;
  color:var(--gold);letter-spacing:7px;text-transform:uppercase;text-align:center;
  /* Text shadow gives depth */
  text-shadow:0 0 40px rgba(242,196,67,.3),0 2px 4px rgba(0,0,0,.6);
  line-height:1;
}
.logo-sub{
  font-family:var(--fb);font-size:.6rem;color:var(--ts);
  letter-spacing:6px;text-transform:uppercase;text-align:center;margin-top:6px;
}
.lcard{
  background:var(--s2);
  border:1px solid var(--bmid);
  border-radius:14px;padding:1.3rem;width:100%;
  box-shadow:0 4px 24px rgba(0,0,0,.4);
}
.llabel{font-size:.58rem;color:var(--ts);text-transform:uppercase;letter-spacing:2.5px;margin-bottom:8px;}
.linput{
  width:100%;background:var(--s0);
  border:1.5px solid var(--gold-b);border-radius:9px;
  padding:13px 14px;color:var(--gold-lt);
  font-size:1.4rem;letter-spacing:9px;text-align:center;
  outline:none;font-family:var(--fh);font-weight:600;
  transition:border-color .15s,box-shadow .15s;
}
.linput:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,196,67,.12);}
.lobby-btns{width:100%;display:flex;flex-direction:column;gap:12px;}

/* ─── DECK SELECT ─── */
#s-deck{
  background:var(--s0);padding:1.3rem;gap:1rem;
  background-image:radial-gradient(ellipse 80% 30% at 50% 0%,rgba(242,196,67,.05) 0%,transparent 60%);
}
.stitle{font-family:var(--fh);font-size:1.2rem;font-weight:700;color:var(--gold);letter-spacing:3px;text-transform:uppercase;}
.dgrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.dc{
  background:var(--s2);border:1.5px solid var(--bsub);
  border-radius:13px;padding:1rem .9rem;cursor:pointer;
  display:flex;flex-direction:column;gap:5px;
  transition:border-color .18s,background .18s,transform .1s,box-shadow .18s;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.dc:active{transform:scale(.97);}
.dc.sel{
  border-color:var(--gold);
  background:linear-gradient(135deg,rgba(242,196,67,.12) 0%,rgba(242,196,67,.04) 100%);
  box-shadow:0 0 0 1px rgba(242,196,67,.2),0 4px 20px rgba(242,196,67,.12);
}
.dc-name{font-family:var(--fh);font-size:1.05rem;font-weight:700;color:var(--gold-lt);letter-spacing:.3px;}
.dc-cap{font-size:.58rem;color:var(--ts);text-transform:uppercase;letter-spacing:1px;}
.dtags{display:flex;flex-wrap:wrap;gap:3px;margin-top:4px;}
.tag{font-size:.54rem;padding:2px 7px;border-radius:4px;text-transform:uppercase;letter-spacing:.5px;font-weight:700;}
.tag.bat{background:var(--bat-d);color:var(--bat-t);border:1px solid rgba(64,152,240,.25);}
.tag.bowl{background:var(--bowl-d);color:var(--bowl-t);border:1px solid rgba(152,72,240,.25);}
.tag.sup{background:var(--sup-d);color:var(--sup-t);border:1px solid rgba(50,192,104,.25);}
.dc-desc{font-size:.65rem;color:var(--ts);line-height:1.4;margin-top:4px;}
.deck-info{
  background:var(--s2);border:1px solid var(--gold-b);
  border-radius:9px;padding:9px 12px;font-size:.67rem;color:var(--ts);line-height:1.4;
  box-shadow:0 0 0 1px rgba(242,196,67,.06);
}

/* ─── BOARD ZONES ─── */
#s-board{height:100vh;}

.scorebar{
  flex:0 0 7%;min-height:0;overflow:hidden;
  background:linear-gradient(180deg,#060a14 0%,var(--s0) 100%);
  border-bottom:1px solid rgba(242,196,67,.15);
  padding:4px 8px;display:flex;align-items:center;gap:5px;
  box-shadow:0 2px 12px rgba(0,0,0,.5);
  position:relative;z-index:10;
}

.ozone{
  flex:0 0 16%;min-height:0;overflow:hidden;
  background:rgba(0,0,0,.22);
  border-bottom:1px solid var(--bsub);
  padding:4px 8px;display:flex;flex-direction:column;gap:2px;
}

/* THE FIELD — pitch mat with texture */
.field{
  flex:0 0 20%;min-height:0;
  /* Layered pitch atmosphere */
  background:
    repeating-linear-gradient(90deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 28px),
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0,rgba(255,255,255,.012) 1px,transparent 1px,transparent 28px),
    linear-gradient(180deg,#0d2016 0%,#0a1a0e 50%,#0d2016 100%);
  border-top:2px solid rgba(242,196,67,.25);
  border-bottom:2px solid rgba(242,196,67,.25);
  box-shadow:inset 0 8px 20px rgba(0,0,0,.4),inset 0 -8px 20px rgba(0,0,0,.4);
  padding:4px 10px 20px;
  display:flex;align-items:center;justify-content:space-around;
  position:relative;
}
/* Central pitch strip */
.field::before{
  content:'';position:absolute;left:50%;top:0;bottom:0;
  width:44px;transform:translateX(-50%);
  background:linear-gradient(180deg,transparent 0%,rgba(160,120,60,.08) 20%,rgba(160,120,60,.12) 50%,rgba(160,120,60,.08) 80%,transparent 100%);
  border-left:1px solid rgba(242,196,67,.08);
  border-right:1px solid rgba(242,196,67,.08);
}
/* Crease lines */
.field::after{
  content:'';position:absolute;left:50%;top:50%;
  width:36px;height:1px;transform:translate(-50%,-50%);
  background:rgba(242,196,67,.2);
  box-shadow:0 -16px 0 rgba(242,196,67,.12),0 16px 0 rgba(242,196,67,.12);
}

.timer-pill{
  position:absolute;bottom:4px;left:50%;transform:translateX(-50%);
  background:rgba(4,6,14,.92);
  border:1px solid rgba(242,196,67,.35);border-radius:6px;
  padding:2px 10px;display:flex;flex-direction:column;align-items:center;
  white-space:nowrap;
  box-shadow:0 0 10px rgba(242,196,67,.15);
}

.pzone{
  flex:0 0 17%;min-height:0;overflow:hidden;
  background:rgba(0,0,0,.12);
  padding:4px 8px;display:flex;flex-direction:column;gap:2px;
  border-top:1px solid var(--bsub);
}
.hzone{
  flex:0 0 19%;min-height:0;overflow:hidden;
  background:var(--s0);border-top:1px solid var(--bsub);
  padding:4px 6px;display:flex;flex-direction:column;
}
.wizard{
  flex:0 0 15%;min-height:0;
  background:linear-gradient(0deg,#04060e 0%,var(--s0) 100%);
  border-top:2px solid rgba(242,196,67,.22);
  display:flex;flex-direction:column;
}

/* ─── SCOREBAR INTERNALS ─── */
.cap-pill{
  display:flex;flex-direction:row;align-items:center;cursor:pointer;gap:5px;flex-shrink:0;
  background:linear-gradient(135deg,rgba(220,72,72,.2) 0%,rgba(220,72,72,.08) 100%);
  border:1.5px solid var(--cap-b);border-radius:8px;padding:4px 8px;
  transition:background .15s;
  box-shadow:0 1px 6px rgba(0,0,0,.4);
}
.cap-pill:active{background:rgba(220,72,72,.25);}
.cap-mini{width:22px;height:28px;border-radius:3px;border:1px solid rgba(220,72,72,.4);background:rgba(0,0,0,.35);display:flex;flex-direction:column;overflow:hidden;flex-shrink:0;}
.cap-mini-bar{display:none;}
.cap-mini-icon{flex:1;display:flex;align-items:center;justify-content:center;font-size:10px;background-size:cover;background-position:center top;overflow:hidden;border-radius:0 0 2px 2px;}
.cap-mini-name{display:none;}
.cap-text{display:flex;flex-direction:column;gap:1px;}
.cap-label{font-size:.42rem;color:var(--cap-t);text-transform:uppercase;letter-spacing:.6px;font-weight:700;font-family:var(--fh);}
.cap-name{font-size:.52rem;color:var(--tp);font-weight:600;font-family:var(--fh);letter-spacing:.3px;}
.score-mid{flex:1;display:flex;align-items:center;justify-content:center;gap:4px;}
.score-half{flex:1;display:flex;flex-direction:column;align-items:center;}
.score-lbl{font-size:.42rem;color:var(--ts);text-transform:uppercase;letter-spacing:1px;}
/* BIGGER SCORES */
.score-num{
  font-size:1.35rem;color:var(--gold);font-weight:700;line-height:1;
  font-family:var(--fh);letter-spacing:.5px;
  text-shadow:0 0 16px rgba(242,196,67,.4);
}
.ball-badge{
  font-size:.4rem;background:rgba(255,255,255,.04);
  border:1px solid var(--bsub);padding:1px 5px;border-radius:3px;
  color:var(--ts);text-transform:uppercase;letter-spacing:.5px;margin-top:1px;
}
.score-vs{font-size:.65rem;color:var(--tm);padding:0 1px;}
.timer-num{
  font-size:1rem;color:var(--gold-lt);font-weight:700;line-height:1;
  font-family:var(--fh);
}

/* ─── ZONE INTERNALS ─── */
.zone-lbl{font-size:.48rem;color:#fff;text-transform:uppercase;letter-spacing:2px;text-align:center;font-weight:600;font-family:var(--fh);}
.zone-row{display:flex;align-items:flex-start;justify-content:space-between;gap:5px;flex:1;}
.bench-row{display:flex;gap:5px;align-items:flex-start;justify-content:center;flex:1;}
.aux-col{display:flex;flex-direction:column;align-items:center;gap:2px;flex-shrink:0;}
.aux-lbl{font-size:.36rem;color:var(--ts);text-transform:uppercase;letter-spacing:.4px;}
.pile{
  border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:1px dashed rgba(255,255,255,.1);background:rgba(0,0,0,.18);
}
.pile-lbl{font-size:.34rem;color:var(--ts);text-transform:uppercase;letter-spacing:.5px;}
.deck-tile{
  border-radius:7px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--s3) 0%,var(--s2) 100%);
  border:1.5px solid var(--gold-b);cursor:pointer;
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  transition:border-color .15s,box-shadow .15s;
}
.deck-tile:active{box-shadow:0 0 0 3px var(--gold-dim);}
.deck-pulse{animation:dp 1.4s ease-in-out infinite;}
@keyframes dp{
  0%,100%{border-color:var(--gold-b);box-shadow:0 2px 8px rgba(0,0,0,.4);}
  50%{border-color:var(--gold);box-shadow:0 0 0 3px rgba(242,196,67,.2),0 2px 8px rgba(0,0,0,.4);}
}
.deck-cnt{font-size:.9rem;color:var(--gold);font-weight:700;line-height:1;font-family:var(--fh);}

/* ─── FIELD INTERNALS ─── */
.active-col{display:flex;flex-direction:column;align-items:center;gap:3px;}
.active-lbl{font-size:.42rem;color:rgba(255,255,255,.38);text-transform:uppercase;letter-spacing:1px;font-family:var(--fh);font-weight:600;}
.empty-active{
  border:1.5px dashed rgba(242,196,67,.22);border-radius:10px;
  background:rgba(242,196,67,.025);
  display:flex;align-items:center;justify-content:center;
}
.empty-active-txt{font-size:.4rem;color:rgba(242,196,67,.32);text-transform:uppercase;text-align:center;padding:5px;letter-spacing:.3px;}
.vs-pill{display:flex;flex-direction:column;align-items:center;gap:2px;}
.vs-txt{
  font-size:.72rem;color:var(--gold);
  border:1.5px solid rgba(242,196,67,.35);border-radius:5px;
  padding:3px 9px;
  background:rgba(242,196,67,.07);
  font-family:var(--fh);font-weight:700;letter-spacing:1.5px;
  box-shadow:0 0 10px rgba(242,196,67,.1);
}
.role-txt{font-size:.4rem;color:var(--ts);text-transform:uppercase;letter-spacing:.8px;}
.field-left{display:flex;flex-direction:row;align-items:flex-end;gap:4px;}
.field-right{display:flex;flex-direction:row;align-items:flex-end;gap:4px;}
.sup-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;}
.sup-lbl{font-size:.38rem;color:var(--sup-t);text-transform:uppercase;letter-spacing:.4px;}
.sup-slot{
  width:48px;height:72px;border-radius:7px;
  border:1.5px dashed var(--sup-b);background:var(--sup-d);
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s,background .15s;
}
.sup-slot.hover{border-color:var(--sup-t);background:rgba(50,192,104,.18);}
.sup-slot-txt{font-size:.36rem;color:var(--sup-t);text-transform:uppercase;text-align:center;padding:3px;letter-spacing:.3px;}

/* ── Opp support slot (mirrors your sup-wrap, left side of field) ── */
#opp-sup-wrap{display:flex;flex-direction:column;align-items:center;gap:1px;}
.opp-sup-lbl{font-size:.38rem;color:var(--sup-t);text-transform:uppercase;letter-spacing:.4px;}
#opp-sup-slot{
  width:48px;height:72px;border-radius:7px;
  border:1.5px dashed var(--sup-b);background:var(--sup-d);
  display:flex;align-items:center;justify-content:center;
  overflow:hidden;
}
/* Support card reveal pop — both sides */
.sup-reveal-pop{
  animation:supRevealPop .5s cubic-bezier(.2,1.4,.4,1) both;
}
@keyframes supRevealPop{
  from{transform:scale(.5) translateY(12px);opacity:0;}
  to{transform:scale(1) translateY(0);opacity:1;}
}
/* Glow ring on support card after reveal */
.sup-revealed{
  border-color:var(--sup-t)!important;
  box-shadow:0 0 16px var(--sup-glow),0 3px 10px rgba(0,0,0,.6);
}

/* ─── HAND ─── */
.hand-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:4px;}
.hand-lbl{font-size:.48rem;color:#fff;text-transform:uppercase;letter-spacing:1.5px;font-weight:600;font-family:var(--fh);}
.hand-count{font-size:.48rem;color:var(--ts);}
.hand-scroll{display:flex;gap:5px;overflow-x:auto;align-items:flex-start;scrollbar-width:none;flex:1;padding-bottom:2px;}
.hand-scroll::-webkit-scrollbar{display:none;}

/* ─── WIZARD ─── */
.wsteps{display:flex;border-bottom:1px solid rgba(242,196,67,.12);flex-shrink:0;}
.wstep{
  flex:1;padding:5px 2px;text-align:center;
  font-size:.52rem;color:var(--tm);
  text-transform:uppercase;letter-spacing:.3px;
  border-bottom:2px solid transparent;font-weight:600;
  font-family:var(--fh);transition:color .15s;
}
.wstep.active{color:var(--gold);border-bottom-color:var(--gold);}
.wstep.done{color:var(--green);cursor:pointer;}
.wbody{padding:6px 12px 7px;flex:1;display:flex;flex-direction:column;min-height:0;}
.wpips{display:flex;gap:3px;margin-bottom:5px;flex-shrink:0;}
.pip{height:3px;flex:1;border-radius:3px;background:rgba(255,255,255,.08);}
.pip.active{background:var(--gold);box-shadow:0 0 6px rgba(242,196,67,.4);}
.pip.done{background:var(--green);}
/* Instruction text — larger, more prominent */
.winstr{
  font-size:.9rem;color:var(--tp);line-height:1.35;
  flex:1;min-height:0;overflow:hidden;font-family:var(--fb);
}
.wbtns{display:flex;gap:7px;flex-shrink:0;padding-top:5px;}
.wbtn{
  flex:1;padding:9px 5px;border-radius:8px;
  font-size:.92rem;cursor:pointer;
  font-family:var(--fh);font-weight:700;letter-spacing:1px;
  border:1.5px solid;transition:opacity .15s,transform .1s;
}
.wbtn:active{opacity:.8;transform:scale(.97);}
.wbtn.skip{background:rgba(255,255,255,.04);color:var(--ts);border-color:var(--bmid);}
.wbtn.go{background:linear-gradient(180deg,#f7d050 0%,#e8ac20 100%);color:var(--ink);border-color:var(--gold);box-shadow:0 3px 12px rgba(242,196,67,.25);}
.wbtn.lock{
  background:linear-gradient(180deg,#ee4040 0%,#c02020 100%);
  color:#fff;border-color:var(--red);
  box-shadow:0 3px 12px rgba(224,56,56,.3);
  letter-spacing:1.5px;
}

/* ─── CARDS — the big upgrade ─── */
.card{
  border-radius:10px;
  border:2px solid;
  display:flex;flex-direction:column;
  flex-shrink:0;overflow:hidden;
  transition:border-color .12s,opacity .15s,box-shadow .12s,transform .1s;
  /* Physical depth */
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 1px 0 rgba(255,255,255,.05) inset;
}
.card.clickable{cursor:pointer;}
.card.clickable:active{transform:scale(.94);}
.card.hover-gold{border-color:var(--gold)!important;box-shadow:0 0 0 2px rgba(242,196,67,.22),0 4px 12px rgba(0,0,0,.5)!important;}
.card.grayed{opacity:.15;pointer-events:none;}
.card.sup-glow{border-color:var(--sup-t)!important;box-shadow:0 0 0 2px rgba(50,192,104,.22)!important;}
.card.locked-slot{
  background:repeating-linear-gradient(45deg,rgba(242,196,67,.04) 0,rgba(242,196,67,.04) 3px,rgba(0,0,0,.22) 3px,rgba(0,0,0,.22) 8px);
  border:2px solid rgba(242,196,67,.3);cursor:not-allowed;
}
.card.empty-slot{
  background:rgba(255,255,255,.01);
  border-color:rgba(255,255,255,.07);border-style:dashed;cursor:default;
  box-shadow:none;
}

/* Type colour systems — richer backgrounds with subtle gradient */
.card.bat{
  background:linear-gradient(160deg,#0e2240 0%,#091828 100%);
  border-color:var(--bat-b);
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 0 1px rgba(64,152,240,.08) inset;
}
.card.bowl{
  background:linear-gradient(160deg,#1a0c36 0%,#0e0620 100%);
  border-color:var(--bowl-b);
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 0 1px rgba(152,72,240,.08) inset;
}
.card.sup{
  background:linear-gradient(160deg,#0a2010 0%,#051208 100%);
  border-color:var(--sup-b);
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 0 1px rgba(50,192,104,.08) inset;
}
.card.cap{
  background:linear-gradient(160deg,#280c0c 0%,#180606 100%);
  border-color:var(--cap-b);
  box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 0 1px rgba(220,72,72,.08) inset;
}

/* ─── ACTIVE CARD ELEVATION (type-specific glow) ─── */
#my-active .card.bat{box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 18px rgba(64,152,240,.25),0 0 0 1px rgba(64,152,240,.1) inset;}
#my-active .card.bowl{box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 18px rgba(152,72,240,.25),0 0 0 1px rgba(152,72,240,.1) inset;}
#my-active .card.sup{box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 18px rgba(50,192,104,.25),0 0 0 1px rgba(50,192,104,.1) inset;}

/* ─── FOCUS / ANIMATIONS ─── */
.focus-dim{opacity:.12;pointer-events:none;transition:opacity .18s;}

/* ── Target picker ─────────────────────────────────── */
.tp-glow .card,.tp-glow{outline:2px solid #f0c040;outline-offset:2px;cursor:pointer;}
.tp-glow:hover .card,.tp-glow .card:hover{outline-color:#ffe97a;box-shadow:0 0 10px rgba(240,192,64,.45);}
.tp-dim{opacity:.15;pointer-events:none;transition:opacity .15s;}
.active-shine{animation:activeshine 1.6s ease-in-out infinite;}
@keyframes activeshine{
  0%,100%{border-color:rgba(242,196,67,.45);box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 8px rgba(242,196,67,.1);}
  50%{border-color:var(--gold);box-shadow:0 6px 20px rgba(0,0,0,.7),0 0 22px rgba(242,196,67,.35);}
}
.bench-shine{animation:benchshine 1.6s ease-in-out infinite;border-color:rgba(242,196,67,.5)!important;border-style:dashed!important;}
@keyframes benchshine{
  0%,100%{box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 4px rgba(242,196,67,.08);border-color:rgba(242,196,67,.38)!important;}
  50%{box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 14px rgba(242,196,67,.3);border-color:var(--gold)!important;}
}
.sup-shine{animation:supshine 1.5s ease-in-out infinite;}
@keyframes supshine{
  0%,100%{border-color:var(--sup-b);box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 4px rgba(50,192,104,.08);}
  50%{border-color:var(--sup-t);box-shadow:0 3px 10px rgba(0,0,0,.6),0 0 14px rgba(50,192,104,.3);}
}

/* ─── CARD SIZES ─── */
.csm{width:68px;height:104px;}
.cact{width:90px;height:124px;}
.chand{width:66px;height:104px;}

/* ─── CARD INTERNALS ─── */
/* Category corner badge — tiny, overlaid top-left of art area */
.ctype{
  display:none; /* hidden — category shown via corner overlay instead */
}
/* Corner category tag — absolute inside .cart */
.ccorner{
  position:absolute;top:3px;left:3px;
  font-size:.28rem;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  padding:1px 4px;border-radius:3px;
  font-family:var(--fh);line-height:1.4;
  z-index:3;
}
.bat .ccorner{background:rgba(64,152,240,.55);color:#d0eaff;}
.bowl .ccorner{background:rgba(152,72,240,.55);color:#e0d0ff;}
.sup .ccorner{background:rgba(50,192,104,.5);color:#c0f0d8;}
.cap .ccorner{background:rgba(220,72,72,.5);color:#ffd0d0;}

/* Art area — styled placeholder with crosshatch until real art arrives */
.cart{flex:1;display:flex;align-items:center;justify-content:center;padding:3px;position:relative;}
.cart-in{
  width:100%;height:100%;border-radius:4px;
  display:flex;align-items:center;justify-content:center;font-size:16px;
  position:relative;overflow:hidden;
}
/* Crosshatch placeholder texture — will be hidden once real art is in */
.bat .cart-in{
  background:
    repeating-linear-gradient(45deg,rgba(64,152,240,.07) 0,rgba(64,152,240,.07) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(-45deg,rgba(64,152,240,.07) 0,rgba(64,152,240,.07) 1px,transparent 1px,transparent 8px),
    rgba(64,152,240,.04);
}
.bowl .cart-in{
  background:
    repeating-linear-gradient(45deg,rgba(152,72,240,.07) 0,rgba(152,72,240,.07) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(-45deg,rgba(152,72,240,.07) 0,rgba(152,72,240,.07) 1px,transparent 1px,transparent 8px),
    rgba(152,72,240,.04);
}
.sup .cart-in{
  background:
    repeating-linear-gradient(45deg,rgba(50,192,104,.07) 0,rgba(50,192,104,.07) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(-45deg,rgba(50,192,104,.07) 0,rgba(50,192,104,.07) 1px,transparent 1px,transparent 8px),
    rgba(50,192,104,.04);
}
.cap .cart-in{
  background:
    repeating-linear-gradient(45deg,rgba(220,72,72,.07) 0,rgba(220,72,72,.07) 1px,transparent 1px,transparent 8px),
    repeating-linear-gradient(-45deg,rgba(220,72,72,.07) 0,rgba(220,72,72,.07) 1px,transparent 1px,transparent 8px),
    rgba(220,72,72,.04);
}
/* ─── PLAYER TYPE PILL ───
   Sits between art and footer. Three colours, one per type.
   Readable at a glance from across the board. ─── */
.cstyle-badge{
  display:block;
  text-align:center;
  font-size:.36rem;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  padding:2px 4px;
  font-family:var(--fh);line-height:1.5;
  flex-shrink:0;
}
/* Style badges match the card design's banner: black, with the style colour (css/cards.css) */
/* POWER — coral */
.style-power{background:#111214;color:#f9523e;}
/* TECHNICAL — cyan */
.style-technical{background:#111214;color:#6ef8f3;}
/* CONTROL — yellow */
.style-control{background:#111214;color:#fce752;}
/* Remove old card-type overrides — type colours come from style-* classes */
/* POWER weak indicator */
.cweak-power{color:#fda38b;font-size:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
/* TECHNICAL weak indicator */
.cweak-technical{color:#6ef8f3;font-size:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
/* CONTROL weak indicator */
.cweak-control{color:#fce752;font-size:.35rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}
/* Fallback for unknown type */
.cweak{font-size:.35rem;color:#f07070;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;}

/* ─── CARD ART SYSTEM ───
   When a card has art, .cart-in gets background-image set via JS.
   The crosshatch placeholder disappears; a gradient vignette
   on the bottom blends art into the footer naturally.
   The emoji is hidden when art is loaded. ─── */
.cart-in.has-art{background-image:none;}
.cart-in.has-art .cart-emoji{display:none;}
/* Bottom vignette — fades art into footer */
.cart-in.has-art::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(0deg,rgba(0,0,0,.7) 0%,rgba(0,0,0,.1) 45%,transparent 70%);
  pointer-events:none;
}
/* Also used in modal detail card art */
.mart .cart-in{background-size:cover;background-position:center top;}
.mart .cart-in.has-art::after{
  background:linear-gradient(0deg,rgba(0,0,0,.65) 0%,transparent 55%);
}


/* Footer — tighter, cleaner */
.cfoot{
  padding:3px 5px 4px;
  background:rgba(0,0,0,.42);
  flex-shrink:0;
  border-top:1px solid rgba(255,255,255,.06);
  display:flex;flex-direction:column;gap:1px;
}
.cfoot-row{display:flex;align-items:center;justify-content:space-between;gap:2px;min-width:0;}
.cname{
  font-size:.5rem;color:var(--tp);font-weight:700;
  text-transform:uppercase;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  font-family:var(--fh);letter-spacing:.4px;flex:1;min-width:0;
}
.csm .cname{font-size:.44rem;}
.cstam{
  font-size:.42rem;color:var(--gold);
  display:flex;align-items:center;gap:2px;flex-shrink:0;
  font-family:var(--fh);font-weight:700;
}
.sdot{
  display:inline-block;width:3px;height:3px;
  background:var(--gold);border-radius:50%;
  vertical-align:middle;flex-shrink:0;
}
.eslot-lbl{font-size:.42rem;color:rgba(255,255,255,.12);text-transform:uppercase;text-align:center;padding:4px;letter-spacing:.3px;}
.locked-inner{width:100%;height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;}
.locked-icon{font-size:.9rem;color:rgba(242,196,67,.45);}
.locked-lbl{font-size:.32rem;color:rgba(242,196,67,.4);text-transform:uppercase;letter-spacing:.3px;text-align:center;}

/* ─── OVERLAYS ─── */
.overlay{position:fixed;inset:0;z-index:200;display:none;}
.overlay.open{display:flex;}

/* Card detail sheet */
#modal-overlay{background:rgba(0,0,0,.85);align-items:flex-end;justify-content:center;z-index:300;}
.msheet{
  background:linear-gradient(160deg,var(--s3) 0%,var(--s1) 100%);
  border-top:1.5px solid rgba(242,196,67,.3);
  border-radius:18px 18px 0 0;width:100%;max-width:480px;padding:14px;
  box-shadow:0 -8px 40px rgba(0,0,0,.7);
}
.mhandle{width:36px;height:3px;background:var(--bmid);border-radius:2px;margin:0 auto 14px;}
.mheader{display:flex;gap:13px;align-items:flex-start;margin-bottom:11px;}
.mart{width:76px;height:106px;border-radius:9px;flex-shrink:0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 4px 14px rgba(0,0,0,.6);}
.minfo{flex:1;}
.mtype{font-size:.54rem;text-transform:uppercase;letter-spacing:2.5px;margin-bottom:3px;font-weight:700;color:var(--ts);font-family:var(--fh);}
.mname{font-size:1.3rem;color:var(--gold-lt);font-weight:700;margin-bottom:5px;font-family:var(--fh);letter-spacing:.5px;text-shadow:0 0 20px rgba(242,196,67,.25);}
.mstats{display:flex;gap:16px;margin-bottom:6px;}
.mstat-l{font-size:.52rem;color:var(--ts);text-transform:uppercase;letter-spacing:1px;}
.mstat-v{font-size:.82rem;color:var(--tp);font-weight:700;font-family:var(--fh);}
.mweak{font-size:.64rem;color:#f07070;margin-bottom:9px;}
.mability{
  background:rgba(0,0,0,.25);border:1px solid var(--bsub);
  border-radius:9px;padding:9px 11px;margin-bottom:9px;
}
.mab-name{font-size:.6rem;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:4px;font-family:var(--fh);font-weight:700;}
.mab-text{font-size:.78rem;color:var(--ts);line-height:1.5;}
.mbtns{display:flex;}
.mbtn{
  flex:1;padding:11px 5px;border-radius:8px;font-size:.78rem;cursor:pointer;
  border:1.5px solid var(--bmid);font-family:var(--fh);font-weight:600;letter-spacing:1px;
  background:rgba(255,255,255,.04);color:var(--ts);transition:background .15s;
}
.mbtn:active{background:var(--s3);}

/* ═══════════════════════════════════════════
   DICE OVERLAY — REAL FIELD LIFT
   The actual .field div on the board is reparented
   to position:fixed, reveals happen on it, then it
   animates to top:0 as the overlay scrolls in below.
═══════════════════════════════════════════ */
#dice-overlay{
  background:rgba(2,4,10,0);
  flex-direction:column;align-items:stretch;justify-content:flex-start;
  gap:0;padding:0;overflow:hidden;
  transition:background .45s ease;
  pointer-events:none;
}
#dice-overlay.open{display:flex;pointer-events:auto;}
#dice-overlay.scrim{background:rgba(2,4,10,.88);}
#dice-overlay.full{background:#03050d;}

/* ── .field in spotlight mode (still in board flow) ── */
.field.spotlight{
  position:relative;z-index:220;
  box-shadow:0 0 0 2px rgba(242,196,67,.55),0 0 48px rgba(242,196,67,.28);
  transition:box-shadow .3s;
}
/* ── .field when moved into overlay (now a normal block child of #dice-overlay) ── */
.field.lifted{
  width:100%;flex-shrink:0;
  border-bottom:2px solid rgba(242,196,67,.35);
  box-shadow:0 8px 40px rgba(0,0,0,.9);
  /* Remove the flex:0 0 20% sizing — width:100% takes over */
  flex:none;
  /* Animate in */
  animation:fieldDropIn .45s cubic-bezier(.2,1,.4,1) both;
}
@keyframes fieldDropIn{
  from{transform:translateY(-30px);opacity:.7;}
  to{transform:translateY(0);opacity:1;}
}

/* Support slot reveal glow — applied during reveal phase */
.sup-slot.revealing{
  border-color:var(--sup-t)!important;
  box-shadow:0 0 14px var(--sup-glow)!important;
  animation:supReveal .6s ease-out forwards;
}
@keyframes supReveal{
  0%{transform:scale(.92);opacity:.5;}
  60%{transform:scale(1.06);opacity:1;}
  100%{transform:scale(1);opacity:1;}
}


/* Flip animation for opp active on the real board */
.board-flip-wrap{perspective:700px;display:inline-block;}
.board-flip-inner{
  transform-style:preserve-3d;
  transition:transform .6s cubic-bezier(.4,0,.2,1);
  position:relative;width:90px;height:124px;
}
.board-flip-inner.flipped{transform:rotateY(180deg);}
.board-flip-front,.board-flip-back{
  backface-visibility:hidden;position:absolute;inset:0;border-radius:10px;overflow:hidden;
}
.board-flip-back{transform:rotateY(180deg);}

/* Gold pulse ring after reveal */
.card.reveal-pulse{animation:revealPulse 1s ease-out forwards;}
@keyframes revealPulse{
  0%  {box-shadow:0 0 0 0   rgba(242,196,67,.9),0 6px 20px rgba(0,0,0,.7);}
  65% {box-shadow:0 0 0 14px rgba(242,196,67,.0),0 6px 20px rgba(0,0,0,.7);}
  100%{box-shadow:0 6px 20px rgba(0,0,0,.7);}
}

/* ── Scroll area sits below the lifted field ── */
.d-scroll{
  flex:1;overflow-y:auto;overflow-x:hidden;width:100%;
  display:flex;flex-direction:column;align-items:center;
  gap:0;padding:0 14px 16px;scrollbar-width:none;
  opacity:0;transition:opacity .35s;

}
.d-scroll.visible{opacity:1;}
.d-scroll::-webkit-scrollbar{display:none;}

/* ── Flash + particles ── */
#d-flash{position:absolute;inset:0;pointer-events:none;z-index:10;opacity:0;transition:opacity .08s;}
#d-particles{position:absolute;inset:0;pointer-events:none;z-index:11;}
#d-edge-pulse{position:absolute;inset:0;pointer-events:none;z-index:9;opacity:0;}

/* ══ SCROLL CONTENT ══ */
.d-phase{width:100%;display:flex;flex-direction:column;align-items:center;}
.d-phase-label{font-size:.44rem;color:var(--tm);text-transform:uppercase;letter-spacing:3px;font-family:var(--fh);font-weight:700;margin:8px 0 6px;}
.d-divider{width:100%;height:1px;background:rgba(255,255,255,.07);margin:8px 0;flex-shrink:0;}

/* Effects list */
.d-effects{
  width:100%;border-radius:10px;
  background:rgba(0,0,0,.3);border:1px solid var(--bsub);
  padding:10px 12px;display:flex;flex-direction:column;gap:5px;
}
.d-effects-title{font-size:.44rem;color:var(--ts);text-transform:uppercase;letter-spacing:2px;font-family:var(--fh);font-weight:700;margin-bottom:2px;}
.d-effect-row{display:flex;align-items:flex-start;gap:8px;font-size:.62rem;font-family:var(--fh);}
.d-effect-icon{font-size:.66rem;flex-shrink:0;width:16px;text-align:center;margin-top:1px;}
.d-effect-text{color:var(--tp);flex:1;line-height:1.35;}
.d-effect-text.muted{color:var(--ts);}
.d-effect-text.warn{color:#ff9090;}
.d-effect-text.good{color:var(--green);}
.d-effect-text.cap{color:var(--cap-t);}
.d-eff-section{font-size:.38rem;color:var(--tm);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--fh);margin-top:4px;margin-bottom:1px;padding-top:5px;border-top:1px solid rgba(255,255,255,.05);}
.d-eff-section:first-of-type{margin-top:0;border-top:none;padding-top:0;}

/* Dice area */
.d-dice-area{width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;}
.d-dice-row{display:flex;gap:14px;align-items:center;justify-content:center;width:100%;}
.d-dice-col{display:flex;flex-direction:column;align-items:center;gap:5px;}
.d-dice-who{font-size:.44rem;color:var(--ts);text-transform:uppercase;letter-spacing:1px;font-family:var(--fh);}
.d-matchup{display:flex;flex-direction:column;align-items:center;gap:4px;flex-shrink:0;}
.d-matchup-vs{font-size:.52rem;color:var(--tm);font-family:var(--fh);font-weight:700;}
.d-weak{font-size:.44rem;padding:2px 7px;border-radius:4px;font-family:var(--fh);font-weight:700;letter-spacing:.3px;text-align:center;}
.d-weak.active{background:rgba(224,56,56,.2);color:#ff9090;border:1px solid rgba(224,56,56,.4);}
.dmod{font-size:.5rem;padding:2px 8px;border-radius:5px;border:1px solid;text-align:center;font-weight:600;font-family:var(--fh);}
.dmod.fair{color:var(--ts);border-color:var(--bmid);background:rgba(255,255,255,.04);}
.dmod.higher{color:var(--green);border-color:var(--green-b);background:var(--green-dim);}


/* The actual dice */
.dbox{
  width:88px;height:88px;border-radius:16px;
  background:linear-gradient(160deg,#f9f7f0 0%,#e6e2d2 100%);
  border:2.5px solid var(--gold);
  box-shadow:0 0 0 4px rgba(242,196,67,.18),0 8px 28px rgba(0,0,0,.8);
  position:relative;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
  transition:box-shadow .2s;
}
/* Winner die glow */
.dbox.winner{
  border-color:#fff;
  box-shadow:0 0 0 4px rgba(242,196,67,.5),0 0 24px rgba(242,196,67,.6),0 8px 28px rgba(0,0,0,.8);
}
/* Pip layout — SVG inside each die */
.dbox svg{position:absolute;inset:0;}

.dval{
  font-size:2.6rem;color:#0a0e1a;font-weight:700;font-family:var(--fh);line-height:1;
  position:relative;z-index:2;
  transition:opacity .06s;
}
.dvs-sep{
  font-size:.7rem;color:var(--tm);font-family:var(--fh);font-weight:700;letter-spacing:1px;
  margin-top:20px;
}

/* Roll animation classes */
.dbox.rolling .dval{animation:flickerNum .05s steps(1) infinite;}
@keyframes flickerNum{0%{opacity:1;}50%{opacity:.5;}}
.dbox.landing{animation:diceLand .25s cubic-bezier(.2,1.5,.4,1) both;}
@keyframes diceLand{
  0%{transform:scale(1.18) rotate(-6deg);}
  60%{transform:scale(.96) rotate(2deg);}
  100%{transform:scale(1) rotate(0deg);}
}

/* ══ PHASE 3 — OUTCOME SPLASH ══ */
.d-outcome-wrap{
  width:100%;border-radius:14px;padding:16px 16px 14px;
  text-align:center;position:relative;overflow:hidden;
  border:1.5px solid;
  transition:border-color .2s,background .2s;
}
/* Outcome states */
.d-outcome-wrap.runs{
  background:linear-gradient(160deg,#1a1400 0%,#0d0a00 100%);
  border-color:rgba(242,196,67,.35);
  box-shadow:0 0 28px rgba(242,196,67,.12);
}
.d-outcome-wrap.four{
  background:linear-gradient(160deg,#001a2e 0%,#000e1c 100%);
  border-color:rgba(64,152,240,.5);
  box-shadow:0 0 32px rgba(64,152,240,.2);
}
.d-outcome-wrap.six{
  background:linear-gradient(160deg,#1a0a00 0%,#0f0500 100%);
  border-color:rgba(242,130,40,.55);
  box-shadow:0 0 36px rgba(242,130,40,.25);
}
.d-outcome-wrap.wicket{
  background:linear-gradient(160deg,#1e0000 0%,#0e0000 100%);
  border-color:rgba(224,56,56,.5);
  box-shadow:0 0 36px rgba(224,56,56,.2);
}
.d-outcome-wrap.dotball{
  background:linear-gradient(160deg,var(--s3) 0%,var(--s2) 100%);
  border-color:rgba(255,255,255,.1);
  box-shadow:none;
}
/* Event label (SIX! / FOUR! / WICKET!) */
.d-event-lbl{
  font-family:var(--fh);font-size:1.5rem;font-weight:700;
  letter-spacing:6px;text-transform:uppercase;line-height:1;
  margin-bottom:4px;
  animation:eventLblIn .3s cubic-bezier(.2,1.5,.3,1) both;
}
@keyframes eventLblIn{
  from{transform:scale(.5);opacity:0;}
  to{transform:scale(1);opacity:1;}
}
.d-event-lbl.six{color:#ff8c20;text-shadow:0 0 30px rgba(255,140,32,.7),0 0 60px rgba(255,140,32,.4);}
.d-event-lbl.four{color:#60c8ff;text-shadow:0 0 24px rgba(64,180,255,.6),0 0 50px rgba(64,180,255,.3);}
.d-event-lbl.wicket{color:#ff5555;text-shadow:0 0 24px rgba(255,85,85,.6),0 0 50px rgba(255,85,85,.3);}
.d-event-lbl.dotball{color:var(--ts);font-size:1rem;letter-spacing:4px;text-shadow:none;}
/* The runs number */
.druns{
  font-family:var(--fh);font-weight:700;line-height:1;
  animation:runsIn .35s cubic-bezier(.2,1.6,.3,1) both;
}
@keyframes runsIn{
  from{transform:scale(.3) translateY(20px);opacity:0;}
  to{transform:scale(1) translateY(0);opacity:1;}
}
.druns.size-normal{font-size:3.8rem;}
.druns.size-big{font-size:4.8rem;}
.druns.col-runs{color:var(--gold);text-shadow:0 0 30px rgba(242,196,67,.6);}
.druns.col-four{color:#80d8ff;text-shadow:0 0 30px rgba(128,216,255,.5);}
.druns.col-six{color:#ffaa44;text-shadow:0 0 36px rgba(255,170,68,.7);}
.druns.col-wicket{color:#ff6666;text-shadow:0 0 30px rgba(255,102,102,.5);}
.druns.col-dot{color:var(--ts);text-shadow:none;font-size:2.4rem;}
.drlbl{
  font-size:.5rem;color:var(--ts);text-transform:uppercase;letter-spacing:3px;
  margin-top:5px;font-family:var(--fh);
}
.drdet{font-size:.62rem;color:var(--tm);margin-top:6px;}

/* ══ PHASE 4 — EFFECTS SUMMARY ══ */
.d-effects{
  width:100%;border-radius:10px;
  background:rgba(0,0,0,.3);border:1px solid var(--bsub);
  padding:10px 12px;display:flex;flex-direction:column;gap:6px;
}
.d-effects-title{
  font-size:.46rem;color:var(--ts);text-transform:uppercase;letter-spacing:2px;
  font-family:var(--fh);font-weight:700;margin-bottom:2px;
}
.d-effect-row{
  display:flex;align-items:center;gap:8px;
  font-size:.62rem;font-family:var(--fh);
}
.d-effect-icon{font-size:.7rem;flex-shrink:0;width:16px;text-align:center;}
.d-effect-text{color:var(--tp);flex:1;}
.d-effect-text.muted{color:var(--ts);}
.d-effect-text.warn{color:#ff9090;}
.d-effect-text.good{color:var(--green);}

/* Continue button */
.btn-cont{
  background:linear-gradient(180deg,#f7d050 0%,#e8ac20 100%);
  color:var(--ink);border:none;border-radius:10px;
  padding:15px 0;font-size:.92rem;font-weight:700;cursor:pointer;
  font-family:var(--fh);text-transform:uppercase;letter-spacing:2.5px;
  box-shadow:0 4px 16px rgba(242,196,67,.28);
  transition:transform .1s,box-shadow .1s;
  width:100%;margin-top:4px;flex-shrink:0;
}
.btn-cont:active{transform:scale(.97);box-shadow:0 2px 8px rgba(242,196,67,.2);}

/* ── Skip hint ── */
.d-skip-hint{font-size:.4rem;color:rgba(255,255,255,.18);text-transform:uppercase;letter-spacing:1.5px;font-family:var(--fh);text-align:center;margin-top:2px;flex-shrink:0;}
.dsup{font-size:.62rem;color:var(--sup-t);border:1px solid var(--sup-b);padding:4px 11px;border-radius:5px;background:var(--sup-d);font-family:var(--fh);font-weight:600;}
.dtitle{display:none;}

/* Toss */
#toss-overlay{background:rgba(0,0,0,.85);flex-direction:column;align-items:center;justify-content:center;gap:16px;}
.toss-sub{font-size:.76rem;color:var(--ts);letter-spacing:2px;text-transform:uppercase;text-align:center;padding:0 24px;line-height:1.5;}
.toss-btns{display:flex;gap:12px;}
.toss-btns .wbtn{min-width:110px;flex:none;}

/* Waiting */
#wait-overlay{background:rgba(0,0,0,.78);flex-direction:column;align-items:center;justify-content:center;gap:13px;}
.wtxt{font-size:.92rem;color:var(--gold);letter-spacing:3.5px;text-transform:uppercase;font-family:var(--fh);font-weight:700;}
.dots{display:flex;gap:7px;}
.dot{width:7px;height:7px;border-radius:50%;background:var(--gold);opacity:.22;animation:pulse 1.3s infinite;}
.dot:nth-child(2){animation-delay:.22s;}.dot:nth-child(3){animation-delay:.44s;}
@keyframes pulse{0%,80%,100%{opacity:.22;}40%{opacity:1;}}

/* ─── FINAL SCREEN ─── */
#s-final{
  background:var(--s0);padding:1.3rem;gap:.9rem;align-items:stretch;
  background-image:radial-gradient(ellipse 70% 35% at 50% 0%,rgba(242,196,67,.06) 0%,transparent 60%);
}
.f-trophy{font-size:2.4rem;text-align:center;filter:drop-shadow(0 0 16px rgba(242,196,67,.4));}
.f-title{
  font-size:1.2rem;color:var(--gold);text-transform:uppercase;
  letter-spacing:5px;text-align:center;
  font-family:var(--fh);font-weight:700;
  text-shadow:0 0 24px rgba(242,196,67,.3);
}
.f-totals{
  display:flex;
  border:1.5px solid rgba(242,196,67,.3);border-radius:12px;
  overflow:hidden;
  background:linear-gradient(160deg,var(--s3) 0%,var(--s2) 100%);
  box-shadow:0 0 20px rgba(242,196,67,.06);
}
.f-tot-half{flex:1;padding:.9rem .7rem;text-align:center;}
.f-tot-half:first-child{border-right:1px solid var(--bsub);}
.f-tot-lbl{font-size:.5rem;color:var(--ts);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:3px;font-family:var(--fh);}
.f-tot-score{
  font-size:2.2rem;color:var(--gold);font-weight:700;line-height:1;
  font-family:var(--fh);text-shadow:0 0 20px rgba(242,196,67,.3);
}
.f-tot-detail{font-size:.55rem;color:var(--ts);margin-top:3px;}
.f-winner{
  background:linear-gradient(90deg,#f7d050,#e8ac20);
  color:var(--ink);font-size:.5rem;font-weight:700;
  padding:2px 9px;border-radius:4px;text-transform:uppercase;
  letter-spacing:1.5px;margin-top:5px;display:inline-block;
  font-family:var(--fh);
  box-shadow:0 2px 8px rgba(242,196,67,.3);
}
.innings-row{display:flex;gap:8px;}
.innings-card{
  flex:1;
  background:var(--s2);
  border:1px solid var(--bsub);
  border-radius:10px;overflow:hidden;min-width:0;
  box-shadow:0 2px 8px rgba(0,0,0,.3);
}
.innings-hdr{
  padding:6px 9px;border-bottom:1px solid var(--bsub);
  display:flex;justify-content:space-between;align-items:center;
  background:rgba(0,0,0,.18);
}
.innings-title{font-size:.56rem;color:var(--gold);text-transform:uppercase;letter-spacing:1.5px;font-weight:700;font-family:var(--fh);}
.innings-score{font-size:.72rem;color:var(--tp);font-weight:700;font-family:var(--fh);}
.innings-sec{padding:5px 8px;}
.innings-sec-lbl{font-size:.46rem;color:var(--ts);text-transform:uppercase;letter-spacing:.8px;margin-bottom:3px;border-bottom:1px solid rgba(255,255,255,.04);padding-bottom:2px;font-family:var(--fh);}
.ipr{display:flex;justify-content:space-between;align-items:center;padding:2px 0;}
.ipr-name{font-size:.6rem;color:var(--tp);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:55%;}
.ipr-stat{font-size:.58rem;color:var(--gold);white-space:nowrap;font-family:var(--fh);font-weight:700;}

/* Stamina drain popup — floats above the drained bench card */
.stam-drain-popup{
  position:fixed;z-index:9000;pointer-events:none;
  background:rgba(200,20,20,.93);color:#fff;
  font-size:.62rem;font-weight:700;
  padding:3px 8px;border-radius:6px;
  white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.5);
  animation:stamDrainPop 2.1s ease-out forwards;
}
.stam-drain-popup.gain{background:rgba(24,135,88,.93);}
@keyframes stamDrainPop{
  0%  {opacity:0;transform:translateX(-50%) translateY(-100%) scale(.8);}
  15% {opacity:1;transform:translateX(-50%) translateY(-120%) scale(1.05);}
  60% {opacity:1;transform:translateX(-50%) translateY(-145%) scale(1);}
  100%{opacity:0;transform:translateX(-50%) translateY(-170%) scale(.95);}
}
.ipr-stat.m{color:var(--ts);}
.innings-div{height:1px;background:rgba(255,255,255,.04);margin:0 8px;}