:root{
  --blue:#2a75bb;
  --yellow:#ffcb05;
  --bg1:#10182b;
  --bg2:#18243f;
  --ink:#f8fbff;
  --muted:#bfd0ea;
  --panel:#182338;
  --panel2:#22314d;
  --card:#1a2540;
  --text:#f8fbff;
  --stroke: rgba(255,255,255,0.14);
  --softBorder: rgba(255, 255, 255, 0.12);
  --shadow: 0 16px 40px rgba(2, 6, 23, 0.28);
}

*{ box-sizing:border-box; }

body{
  margin:0;
  font-family: "Segoe UI", system-ui, -apple-system, Arial, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1000px 600px at 12% 0%, rgba(42,117,187,0.24), transparent),
    radial-gradient(900px 550px at 88% 0%, rgba(255,203,5,0.14), transparent),
    linear-gradient(180deg, var(--bg1), var(--bg2));
}

/* =========================================
   EASIER-ON-THE-EYES GAME TOP BAR
   ========================================= */

/* general top bar */
.topbar{
  background:
    linear-gradient(135deg, #142033 0%, #1b2b44 45%, #223554 100%);
  border: 1px solid rgba(255,255,255,0.08);
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.28),
    inset 0 1px 0 rgba(255,255,255,0.04);
  text-align: center;
  border-radius: 0 0 18px 18px;
  padding: 18px 16px;
}

/* specifically the in-game bar */
#game .topbar{
  background:
    linear-gradient(135deg, #0f1728 0%, #16233a 48%, #1d2d47 100%);
}

/* title */
.title {
  font-size: 30px;
  font-weight: 1000;
  letter-spacing: 0.2px;
  color: #1a8a7b;
}

/* subtitle / turn text */
.topbar .subhint,
#turnBanner{
  color: #dbeafe;
  font-size: 15px;
  font-weight: 900;
  text-shadow: 0 1px 3px rgba(0,0,0,0.35);
}

h1{
  margin:0;
  color: var(--blue);
  text-shadow: 1px 1px 2px rgba(0,0,0,0.25);
}

.hidden{ display:none; }

/* Hide all app screens until the server-validated auth/session restore chooses
   the correct screen. This prevents a refresh from briefly flashing the landing
   page before returning to the active battle or setup panel. */
body.appBooting #signupGate,
body.appBooting #setup,
body.appBooting #game{
  display:none !important;
}

body.appBooting::before{
  content:"";
  position:fixed;
  inset:0;
  background:
    radial-gradient(1000px 600px at 12% 0%, rgba(42,117,187,0.18), transparent),
    radial-gradient(900px 550px at 88% 0%, rgba(255,203,5,0.10), transparent),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  z-index:2147483000;
}


.setup{
  display:flex;
  justify-content:center;
  padding: 24px 12px;
}

.setup-card{
  width:min(760px, 95vw);
  background: var(--panel);
  border: 1px solid var(--softBorder);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 22px;
  text-align:center;
}

.setup-card h2{
  margin: 0 0 10px;
}

.setup-row{
  display:flex;
  gap: 14px;
  justify-content:center;
  flex-wrap:wrap;
  margin: 10px 0 14px;
}

label{
  display:flex;
  flex-direction:column;
  gap:8px;
  font-weight:800;
  color: var(--ink);
  text-align:left;
}

input{
  width: 160px;
  padding: 12px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.15);
  outline:none;
  font-size: 15px;
  background: rgba(255,255,255,0.96);
  color:#0f172a;
}

.primary{
  background: var(--blue);
  color:white;
  border:none;
  padding: 14px 18px;
  border-radius: 14px;
  cursor:pointer;
  font-weight:900;
  font-size: 16px;
  box-shadow: 0 10px 22px rgba(42,117,187,0.25);
}

.primary:hover{ filter: brightness(0.97); }

.hint{
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 15px;
}

.arena{
  width:min(1200px, 96vw);
  margin: 18px auto 0;
  padding-bottom: 8px;
}

.field{
  background: var(--panel);
  border: 1px solid var(--softBorder);
  border-radius: 20px;
  box-shadow: var(--shadow);
  padding: 16px;
  margin: 14px 0;
}

.field-header{
  display:flex;
  justify-content:space-between;
  align-items:baseline;
  gap: 10px;
  flex-wrap:wrap;
  padding: 2px 4px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.field h2{
  margin:0;
  font-size: 20px;
}

.subhint{
  color: var(--muted);
  font-size: 14px;
  font-weight: 700;
}

.divider{ height: 10px; }

.zone-row{
  display:grid;
  grid-template-columns: 1.1fr 0.9fr 0.9fr 1fr;
  gap: 12px;
  margin-top: 12px;
}

.player-grid{
  grid-template-columns: 1.1fr 0.9fr 0.9fr 1fr;
}

.zone{
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 16px;
  padding: 12px;
  min-height: 150px;
}

.zone-title{
  font-size: 12px;
  color: var(--muted);
  font-weight:900;
  letter-spacing: .3px;
  margin-bottom: 8px;
  text-transform: uppercase;
}

.active, .bench, .hand, .prize, .stadium{
  display:flex;
  justify-content:flex-start;
  align-items:flex-start;
  flex-wrap:wrap;
  gap: 12px;
  min-height: 120px;
}

.card{
  width: 100px;
  height: 144px;
  border-radius: 14px;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,0.16);
  background: #eef2ff;
  position: relative;
  box-shadow: 0 10px 24px rgba(2,6,23,0.24);
  transition: transform .12s ease, box-shadow .12s ease;
}

.card:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 28px rgba(2,6,23,0.30);
}

.card img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.card-back{
  width:100%;
  height:100%;
  background: repeating-linear-gradient(
    45deg,
    #2a75bb,
    #2a75bb 10px,
    #ffcb05 10px,
    #ffcb05 20px
  );
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  font-weight:900;
  font-size: 15px;
  letter-spacing: .5px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.35);
}

.damageBadge{
  position:absolute;
  bottom: 6px;
  right: 6px;
  background: rgba(239, 68, 68, 0.95);
  color: white;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 14px;
  border: 2px solid rgba(0,0,0,0.25);
}

.energyBadge{
  position:absolute;
  top: 6px;
  right: 6px;
  background: rgba(34, 197, 94, 0.95);
  color: white;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  border: 2px solid rgba(0,0,0,0.18);
}

.equipBadge{
  position:absolute;
  top: 6px;
  left: 6px;
  background: rgba(168, 85, 247, 0.95);
  color: white;
  font-weight: 900;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 13px;
  border: 2px solid rgba(0,0,0,0.18);
}

.bench-slot{
  width: 118px;
  min-height: 184px;
  border-radius: 14px;
  border: 2px dashed rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.03);
  padding: 10px;
}

.slotHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  font-size: 11px;
  color: rgba(255,255,255,0.74);
  font-weight: 900;
  margin-bottom: 6px;
  text-transform: uppercase;
}

.slotBody{
  display:flex;
  flex-direction:column;
  gap: 6px;
  align-items:center;
}

.slotEmpty{
  height: 144px;
  width: 100px;
  border-radius: 12px;
  border: 2px dashed rgba(255,255,255,0.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color: rgba(255,255,255,0.45);
  font-weight: 800;
  font-size: 13px;
}

.pokeWrap{
  display:flex;
  gap: 12px;
  align-items:flex-start;
  flex-wrap:wrap;
}

.pokeActions{
  display:flex;
  flex-direction:column;
  gap: 8px;
}

.pokeActions .miniTitle{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .2px;
}

.btnRow{
  display:flex;
  gap: 8px;
  flex-wrap:wrap;
}

.smallbtn{
  padding: 10px 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.95);
  color:#111827;
  cursor:pointer;
  font-weight: 900;
  box-shadow: 0 10px 20px rgba(2,6,23,0.10);
  font-size: 13px;
}

.smallbtn:hover{ filter: brightness(0.98); }

.smallbtn.danger{
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
  color: #fff;
}

.smallbtn.good{
  background: rgba(34, 197, 94, 0.16);
  border-color: rgba(34, 197, 94, 0.35);
  color: #fff;
}

.smallbtn.purple{
  background: rgba(168, 85, 247, 0.18);
  border-color: rgba(168, 85, 247, 0.35);
  color: #fff;
}

.side-zones{
  display:flex;
  flex-direction:column;
  gap: 10px;
}

.stack-row{
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
}

.stack-zone{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap: 6px;
}

.stack{
  width: 100px;
  height: 144px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.count{
  font-weight: 900;
  color: rgba(255,255,255,0.78);
  font-size: 15px;
  margin-left: 2px;
}

.clickable{
  cursor:pointer;
}

.controls{
  width:min(1200px, 96vw);
  margin: 12px auto 0;
  display:flex;
  justify-content:center;
  gap: 12px;
  flex-wrap:wrap;
  padding: 16px;
}

.controls button{
  padding: 14px 18px;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.94);
  color:#111827;
  cursor:pointer;
  font-weight: 900;
  font-size: 16px;
  box-shadow: 0 10px 20px rgba(2,6,23,0.12);
  transition: transform .12s ease, box-shadow .12s ease;
}

.controls button:hover{
  transform: translateY(-1px);
  box-shadow: 0 14px 24px rgba(2,6,23,0.16);
}

.controls .danger{
  background: rgba(239, 68, 68, 0.14);
  border-color: rgba(239, 68, 68, 0.35);
  color: white;
}

.message{
  width:min(1200px, 96vw);
  margin: 12px auto 24px;
  padding: 16px 18px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 16px;
  font-weight: 900;
  font-size: 16px;
  color: rgba(255,255,255,0.95);
  box-shadow: 0 10px 20px rgba(2,6,23,0.08);
  text-align:center;
}

.energy-row{
  display:flex;
  gap: 18px;
  flex-wrap:wrap;
  align-items:flex-start;
}

.energyPile, .energyDiscard{
  width: 100px;
  height: 144px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.energyDiscardWrap .mini-title{
  font-size: 12px;
  color: var(--muted);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .2px;
  margin-bottom: 6px;
}

/* Equip overlap under Pokémon card */
.equipStack{
  position:absolute;
  bottom: -18px;
  left: 8px;
  display:flex;
  flex-direction:column;
  gap: 6px;
  pointer-events:none;
}

.equipStrip{
  width: 76px;
  height: 46px;
  border-radius: 8px;
  overflow:hidden;
  border: 2px solid rgba(15,23,42,0.55);
  box-shadow: 0 8px 16px rgba(2,6,23,0.10);
  background: #fff;
}

.equipStrip img{
  width:100%;
  height:100%;
  object-fit: cover;
}

/* Modal */
.hidden{
  display:none !important;
}

.modalOverlay{
  position: fixed;
  inset: 0;
  background: rgba(2,6,23,0.70);
  display:flex;
  align-items:center;
  justify-content:center;
  padding: 18px;
  z-index: 9999;
}

/* 🔑 THIS LINE FIXES EVERYTHING */
.modalOverlay.hidden{
  display:none !important;
}

.modal{
  width: min(1040px, 96vw);
  max-height: min(88vh, 900px);
  background: linear-gradient(180deg, rgba(255,255,255,0.06), transparent), var(--panel);
  color: var(--text);
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(2,6,23,0.42);
  border: 1px solid rgba(255,255,255,0.12);
  overflow:hidden;
}

.modalHeader{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding: 16px 18px;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  background: rgba(255,255,255,0.03);
}

.modalTitle{
  font-weight: 950;
  font-size: 18px;
  letter-spacing: .2px;
}

.modalClose{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  border-radius: 12px;
  padding: 8px 10px;
  cursor:pointer;
  font-weight: 900;
}

.modalBody{
  padding: 16px 18px;
  overflow:auto;
  max-height: 58vh;
}

.modalActions{
  padding: 14px 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
  display:flex;
  gap: 10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}

.viewerGrid{
  display:flex;
  gap: 12px;
  flex-wrap:wrap;
}

.viewerCard{
  width: 100px;
  height: 144px;
  border-radius: 12px;
  overflow:hidden;
  border: 2px solid rgba(255,255,255,0.16);
  position:relative;
}

.viewerCard img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.viewerLabel{
  font-size: 13px;
  color: var(--muted);
  font-weight: 900;
  margin-bottom: 10px;
}

@media (max-width: 980px){
  .zone-row{
    grid-template-columns: 1fr;
  }
  .bench-slot{
    width: 140px;
  }
}

/* ======================================================
   SECOND THEME BLOCK (kept as-is from your file)
   ====================================================== */

* {
  box-sizing: border-box;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial;
}

body {
  margin: 0;
  background:
    radial-gradient(900px 600px at 15% 10%, rgba(124, 58, 237, 0.16), transparent),
    radial-gradient(900px 600px at 85% 10%, rgba(22, 163, 74, 0.12), transparent),
    radial-gradient(700px 500px at 50% 100%, rgba(42,117,187,0.12), transparent),
    linear-gradient(180deg, var(--bg1), var(--bg2));
  color: var(--text);
}

.page {
  padding: 18px;
  max-width: 1260px;
  margin: 0 auto;
}

.hidden {
  display: none !important;
}

.topbar {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}



.subhint {
  color: var(--muted);
  font-weight: 800;
  font-size: 14px;
}

.panel {
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 18px;
}

.panelTitle {
  font-size: 24px;
  font-weight: 1000;
  margin-bottom: 14px;
  color: var(--text);
}

.panelRow {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: center;
}

.panelGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(200px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-weight: 900;
  color: var(--muted);
  font-size: 14px;
}

.field input,
.field select {
  background: rgba(255,255,255,0.94);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 14px;
  color: #0f172a;
  padding: 12px;
  font-weight: 900;
  font-size: 15px;
}

.controls {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.bigbtn,
.smallbtn {
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  border-radius: 14px;
  padding: 12px 14px;
  font-weight: 950;
  cursor: pointer;
}

.bigbtn {
  font-size: 17px;
  padding: 15px 18px;
}

.smallbtn {
  padding: 9px 11px;
  border-radius: 12px;
  font-weight: 900;
  font-size: 13px;
}

.bigbtn.good,
.smallbtn.good {
  background: rgba(22, 163, 74, 0.20);
  border-color: rgba(22, 163, 74, 0.35);
}

.bigbtn.danger,
.smallbtn.danger {
  background: rgba(220, 38, 38, 0.22);
  border-color: rgba(220, 38, 38, 0.35);
}

.bigbtn.purple,
.smallbtn.purple {
  background: rgba(124, 58, 237, 0.22);
  border-color: rgba(124, 58, 237, 0.35);
}

.bigbtn:disabled,
.smallbtn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.message {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--stroke);
  border-radius: 16px;
  padding: 14px;
  margin-bottom: 14px;
  min-height: 52px;
  font-weight: 900;
}

.board {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.side {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  padding: 14px;
}

.zoneTitle {
  margin-top: 8px;
  margin-bottom: 8px;
  color: #dbeafe;
  font-weight: 950;
  font-size: 14px;
}

.zone {
  min-height: 150px;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: flex-start;
}

.hand {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 150px;
}

.bench {
  display: grid;
  grid-template-columns: repeat(2, minmax(180px, 1fr));
  gap: 12px;
}

.bench-slot {
  border: 1px solid var(--stroke);
  background: rgba(0, 0, 0, 0.12);
  border-radius: 16px;
  padding: 10px;
}

.slotHeader {
  display: flex;
  justify-content: space-between;
  color: var(--muted);
  font-weight: 950;
  font-size: 12px;
  margin-bottom: 8px;
}

.slotBody {
  min-height: 150px;
}

.slotEmpty {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--muted);
  font-weight: 950;
  width: 100%;
  height: 144px;
  border: 1px dashed rgba(255, 255, 255, 0.12);
  border-radius: 14px;
}

.prize {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  min-height: 150px;
}

.card {
  width: 100px;
  height: 144px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--card);
  border: 1px solid var(--stroke);
  position: relative;
}

.card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.card-back {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 950;
  color: rgba(255, 255, 255, 0.9);
}

.damageBadge,
.energyBadge,
.equipBadge {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(0, 0, 0, 0.55);
  border: 1px solid rgba(255, 255, 255, 0.18);
  padding: 4px 8px;
  border-radius: 999px;
  font-weight: 950;
  font-size: 12px;
}

.energyBadge {
  right: 8px;
}

.equipBadge {
  right: 8px;
  top: auto;
  bottom: 8px;
}

.damageBadge {
  left: 8px;
  right: auto;
}

.pokeWrap {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.pokeActions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--stroke);
  padding: 12px;
  border-radius: 16px;
  min-width: 240px;
}

.miniTitle {
  font-weight: 950;
  color: var(--muted);
  font-size: 13px;
}

.btnRow {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.equipStack {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  gap: 4px;
  padding: 6px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.6));
}

.equipStrip {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.18);
}

.equipStrip img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.lowerRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(150px, 1fr));
  gap: 12px;
  margin-top: 12px;
}

/* Modal */
.modalOverlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.70);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  z-index: 50;
}

.modal {
  width: min(1040px, 96vw);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), transparent), var(--panel);
  border: 1px solid var(--stroke);
  border-radius: 20px;
  overflow: hidden;
}

.modalHeader {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-bottom: 1px solid var(--stroke);
}

.modalTitle {
  font-weight: 950;
  font-size: 18px;
}

.modalBody {
  padding: 14px;
}

.modalActions {
  padding: 14px;
  border-top: 1px solid var(--stroke);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* Deck editor */
.deckGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  gap: 14px;
}

.deckCard {
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
  border-radius: 16px;
  padding: 12px;
}

.viewerLabel {
  font-weight: 950;
  color: var(--muted);
  margin-bottom: 10px;
  font-size: 14px;
}

.viewerGrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(132px, 1fr));
  gap: 14px;
}

.viewerCard {
  width: 100px;
  height: 144px;
  border-radius: 14px;
  overflow: hidden;
  border: 1px solid var(--stroke);
}

.viewerCard img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.countPill {
  min-width: 38px;
  text-align: center;
  font-weight: 950;
  border-radius: 999px;
  padding: 7px 11px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.08);
  color: var(--text);
  font-size: 14px;
}

.deckRow {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px;
  border-radius: 16px;
  border: 1px solid var(--stroke);
  background: rgba(255, 255, 255, 0.04);
}

.deckRowSelected {
  border-color: rgba(22, 163, 74, 0.35);
  background: rgba(22, 163, 74, 0.10);
}

/* =========================
   Bench alignment fix (your previous attempt)
   ========================= */

/* Make each bench slot a positioning context */
.bench-slot {
  position: relative;
}

/* Center whatever is inside the bench slot body */
.bench-slot .slotBody {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  width: 100%;
}

/* Ensure the Pokémon block (card + actions) uses its own width and doesn't stretch weirdly */
.bench-slot .pokeWrap {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  max-width: 100%;
}

/* If your .slotEmpty blocks were centered before, keep them centered too */
.bench-slot .slotBody .slotEmpty {
  margin: 0 auto;
}

/* ======================================================
   FINAL FIX (IMPORTANT):
   bench actions were forcing 220px width -> shifts card
   Put this at the end so it wins.
   ====================================================== */

.bench-slot .slotBody{
  display: flex;
  justify-content: center;
  align-items: flex-start;
}

/* Force bench contents to stack vertically and stay centered */
.bench-slot .pokeWrap{
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

/* IMPORTANT: bench actions must NOT have min-width:220px */
.bench-slot .pokeActions{
  min-width: 0 !important;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
}

/* Center the action button rows inside the bench slot */
.bench-slot .btnRow{
  justify-content: center;
}

/* Ensure the card itself stays centered */
.bench-slot .card{
  margin-left: auto;
  margin-right: auto;
}

.comingSoonBtn {
  opacity: 0.45;
  filter: grayscale(0.35);
  cursor: not-allowed !important;
  pointer-events: none;
  border-style: dashed;
}

.comingSoonText {
  margin-top: 12px;
  color: #dbeafe;
  font-weight: 900;
  font-size: 15px;
  opacity: 0.9;
}

/* premium polish additions */
.panel,
.side,
.modal,
.field,
.message{
  backdrop-filter: blur(6px);
}

.bigbtn,
.smallbtn,
.controls button{
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
}

.bigbtn:hover,
.smallbtn:hover,
.controls button:hover{
  transform: translateY(-1px);
}

.page .panel:first-child{
  box-shadow: 0 18px 42px rgba(2,6,23,0.24);
}

@media (max-width: 1100px){
  .board{
    grid-template-columns: 1fr;
  }

  .panelGrid{
    grid-template-columns: repeat(2, minmax(180px, 1fr));
  }

  .lowerRow{
    grid-template-columns: repeat(2, minmax(140px, 1fr));
  }

  .deckGrid,
  .viewerGrid{
    grid-template-columns: repeat(4, minmax(132px, 1fr));
  }
}

@media (max-width: 980px){
  .zone-row{
    grid-template-columns: 1fr;
  }
  .bench-slot{
    width: 140px;
  }
}

@media (max-width: 700px){
  .page{
    padding: 12px;
  }

  .title{
    font-size: 24px;
  }

  .panelTitle{
    font-size: 21px;
  }

  .bigbtn,
  .controls button{
    font-size: 15px;
    padding: 13px 15px;
  }

  .panelGrid{
    grid-template-columns: 1fr;
  }

  .deckGrid,
  .viewerGrid{
    grid-template-columns: repeat(2, minmax(132px, 1fr));
  }

  .lowerRow{
    grid-template-columns: 1fr 1fr;
  }
}


/* ======================================================
   LARGE PROFESSIONAL PLAYFIELD UPGRADE
   Add this at the VERY END so it overrides earlier rules
   ====================================================== */

/* overall game page should use more width */
#game.page{
  max-width: 1600px;
  padding-top: 14px;
}

/* keep game title bar visible near top */
#game .topbar{
  position: sticky;
  top: 0;
  z-index: 40;
  border-radius: 0 0 18px 18px;
}

/* keep controls visible while scrolling */
#game .controls{
  position: sticky;
  top: 88px;
  z-index: 39;
  background: rgba(10, 18, 34, 0.84);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 16px 34px rgba(0,0,0,0.28);
  justify-content: center;
}

/* make the board breathe more */
.board{
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}

.side{
  padding: 18px;
  border-radius: 24px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.025)),
    rgba(9, 16, 30, 0.56);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.05),
    0 20px 44px rgba(0,0,0,0.24);
}

/* section labels */
.zoneTitle{
  font-size: 16px;
  font-weight: 1000;
  letter-spacing: 0.4px;
  margin-top: 10px;
  margin-bottom: 10px;
  color: #eaf2ff;
}

/* zones */
.zone{
  min-height: 220px;
  padding: 18px;
  border-radius: 22px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.015));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
}

/* active zones become much larger */
#playerActive.zone,
#aiActive.zone{
  min-height: 390px;
  align-items: center;
}

/* bench layout */
.bench{
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 16px;
}

/* bench slots bigger */
.bench-slot{
  min-height: 300px;
  border-radius: 20px;
  padding: 14px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.045), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.12);
}

/* larger bench card size */
.bench-slot .card{
  width: 150px;
  height: 210px;
  border-radius: 18px;
}

/* active card size much larger */
#playerActive .card,
#aiActive .card{
  width: 230px;
  height: 320px;
  border-radius: 22px;
  box-shadow:
    0 20px 40px rgba(0,0,0,0.34),
    0 0 0 1px rgba(255,255,255,0.10);
}

/* active empty slot bigger too */
#playerActive .slotEmpty,
#aiActive .slotEmpty{
  width: 230px !important;
  height: 320px !important;
  border-radius: 22px;
  font-size: 18px;
}

/* bench empties */
.bench-slot .slotEmpty{
  width: 150px;
  height: 210px;
  border-radius: 18px;
}

/* hand bigger */
.hand{
  min-height: 210px;
  gap: 14px;
}

.hand .card{
  width: 130px;
  height: 186px;
  border-radius: 16px;
}

/* prize size */
.prize .card{
  width: 112px;
  height: 160px;
}

/* deck/discard/stadium/energy slightly larger */
#playerDeck .card,
#playerDiscard .card,
#energyPile .card,
#energyDiscard .card,
#playerStadium .card,
#aiStadium .card{
  width: 120px;
  height: 172px;
}

/* stadium empty slots */
#playerStadium .slotEmpty,
#aiStadium .slotEmpty,
#playerDeck .slotEmpty,
#playerDiscard .slotEmpty,
#energyPile .slotEmpty,
#energyDiscard .slotEmpty{
  width: 120px !important;
  height: 172px !important;
}

/* bigger badges on large cards */
#playerActive .damageBadge,
#playerActive .energyBadge,
#playerActive .equipBadge,
#aiActive .damageBadge,
#aiActive .energyBadge,
#aiActive .equipBadge{
  font-size: 16px;
  padding: 6px 12px;
}

/* make active layouts center nicely */
#playerActive .pokeWrap,
#aiActive .pokeWrap{
  width: 100%;
  justify-content: center;
  align-items: flex-start;
  gap: 24px;
}

/* active actions look more premium */
#playerActive .pokeActions,
#aiActive .pokeActions{
  min-width: 290px;
  padding: 16px;
  border-radius: 18px;
  background: rgba(255,255,255,0.05);
}

/* bench actions still usable */
.bench-slot .pokeActions{
  margin-top: 12px;
  border-radius: 16px;
}

/* larger general buttons */
.bigbtn{
  font-size: 18px;
  padding: 16px 20px;
  border-radius: 16px;
}

.smallbtn{
  font-size: 14px;
  padding: 10px 13px;
}

/* message bar */
.message{
  font-size: 18px;
  padding: 18px 20px;
  border-radius: 18px;
}

/* lower row spacing */
.lowerRow{
  grid-template-columns: repeat(4, minmax(170px, 1fr));
  gap: 18px;
  margin-top: 16px;
}

/* nicer card styling */
.card,
.viewerCard{
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.14);
}

/* =========================================
   STARTING ACTIVE SELECTION CARDS IN MODAL
   ========================================= */
.startingActiveGrid{
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 16px;
  margin-top: 12px;
}

.startingActiveChoice{
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(255,255,255,0.04);
  border-radius: 18px;
  padding: 14px;
  cursor: pointer;
  color: var(--text);
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 12px;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
  box-shadow: 0 12px 24px rgba(0,0,0,0.16);
}


.startingActiveChoice--selected {
  border-color: rgba(255,203,5,0.78);
  box-shadow: 0 0 0 2px rgba(255,203,5,0.22), 0 18px 30px rgba(0,0,0,0.28);
  background: linear-gradient(180deg, rgba(255,203,5,0.12), rgba(255,255,255,0.05));
}

.startingActiveChoice:hover{
  transform: translateY(-3px);
  border-color: rgba(255,203,5,0.55);
  box-shadow: 0 18px 30px rgba(0,0,0,0.24);
}

.startingActiveCard{
  width: 140px;
  height: 200px;
  border-radius: 18px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,0.16);
  box-shadow: 0 12px 24px rgba(0,0,0,0.24);
  background: rgba(255,255,255,0.05);
}

.startingActiveCard img{
  width:100%;
  height:100%;
  object-fit: cover;
}

.startingActiveName{
  font-size: 16px;
  font-weight: 1000;
  text-align: center;
  line-height: 1.2;
  color: #f8fbff;
}

/* better responsive behavior */
@media (max-width: 1300px){
  #playerActive .card,
  #aiActive .card{
    width: 200px;
    height: 280px;
  }

  #playerActive .slotEmpty,
  #aiActive .slotEmpty{
    width: 200px !important;
    height: 280px !important;
  }

  .bench-slot .card{
    width: 132px;
    height: 188px;
  }
}

@media (max-width: 1100px){
  .board{
    grid-template-columns: 1fr;
  }

  #game .controls{
    top: 82px;
  }
}

@media (max-width: 760px){
  #game .controls{
    top: 76px;
    padding: 10px;
    border-radius: 14px;
  }

  .bigbtn{
    font-size: 15px;
    padding: 12px 14px;
  }

  .hand .card{
    width: 108px;
    height: 154px;
  }

  #playerActive .card,
  #aiActive .card{
    width: 170px;
    height: 240px;
  }

  #playerActive .slotEmpty,
  #aiActive .slotEmpty{
    width: 170px !important;
    height: 240px !important;
  }

  .bench-slot .card{
    width: 118px;
    height: 168px;
  }

  .startingActiveCard{
    width: 118px;
    height: 168px;
  }
}

/* =========================================
   BENCH TRUE CENTERING OVERRIDE
   PUT THIS AT THE VERY BOTTOM
   ========================================= */

.bench{
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)) !important;
  gap: 16px !important;
  justify-items: center !important;
  align-items: start !important;
}

.bench-slot{
  width: 100% !important;
  max-width: 260px !important;
  min-height: 300px !important;
  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.bench-slot .slotHeader{
  width: 100% !important;
  min-height: 38px !important;
  margin-bottom: 10px !important;

  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
}

.bench-slot .slotHeader span:first-child{
  text-align: left !important;
}

.bench-slot .slotHeader span:last-child{
  text-align: right !important;
  max-width: 90px !important;
  line-height: 1.05 !important;
}

.bench-slot .slotBody{
  width: 100% !important;
  flex: 1 1 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.bench-slot .pokeWrap{
  width: 100% !important;
  margin: 0 auto !important;

  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 12px !important;
}

.bench-slot .card,
.bench-slot .slotEmpty{
  display: block !important;
  margin: 0 auto !important;
  flex: 0 0 auto !important;
}

.bench-slot .pokeActions{
  width: 100% !important;
  max-width: 220px !important;
  min-width: 0 !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
}

.bench-slot .btnRow{
  justify-content: center !important;
}


/* =========================================
   UNIVERSAL CARD ZOOM VIEWER
   ========================================= */
.zoomCardWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:16px;
  padding:8px 0 4px;
}

.zoomCard{
  width:min(420px, 72vw);
  aspect-ratio: 5 / 7;
  border-radius:24px;
  overflow:hidden;
  position:relative;
  border: 2px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow:
    0 24px 60px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.06);
}

.zoomCard img,
.zoomCard .card-back{
  width:100%;
  height:100%;
  object-fit:cover;
}

.zoomCard .card-back{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:1000;
  color:white;
  background: repeating-linear-gradient(
    45deg,
    #2a75bb,
    #2a75bb 18px,
    #ffcb05 18px,
    #ffcb05 36px
  );
}

.zoomCard .damageBadge,
.zoomCard .energyBadge,
.zoomCard .equipBadge{
  font-size:18px;
  padding:7px 14px;
  border-radius:999px;
}

.zoomCardMeta{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.zoomCardName{
  font-size:24px;
  font-weight:1000;
  color:#f8fbff;
}

.zoomCardType{
  font-size:15px;
  font-weight:900;
  letter-spacing:0.08em;
  color:#bfd0ea;
}

/* =========================================
   NON-SCROLLING FIT-TO-SCREEN CARD VIEWER
   ========================================= */
.modal:has(.zoomViewerShell){
  width: min(92vw, 700px);
  max-height: 92vh;
}

.modalBody:has(.zoomViewerShell){
  overflow: hidden !important;
  max-height: none !important;
  padding: 12px 16px 10px;
}

.zoomViewerShell{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
}

.zoomViewerSubtitle{
  margin-bottom: 10px;
  text-align:center;
  color: var(--muted);
  font-weight: 900;
  font-size: 14px;
}

.zoomCardWrap{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:12px;
  width:100%;
}

.zoomCard{
  height: min(72vh, 760px);
  aspect-ratio: 5 / 7;
  width: auto;
  max-width: 100%;
  border-radius: 24px;
  overflow:hidden;
  position:relative;
  border: 2px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02));
  box-shadow:
    0 24px 60px rgba(0,0,0,0.38),
    0 0 0 1px rgba(255,255,255,0.06);
}

.zoomCard img,
.zoomCard .card-back{
  width:100%;
  height:100%;
  object-fit:contain;
}

.zoomCard .card-back{
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:34px;
  font-weight:1000;
  color:white;
  background: repeating-linear-gradient(
    45deg,
    #2a75bb,
    #2a75bb 18px,
    #ffcb05 18px,
    #ffcb05 36px
  );
}

.zoomCardMeta{
  text-align:center;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.zoomCardName{
  font-size:22px;
  font-weight:1000;
  color:#f8fbff;
}

.zoomCardType{
  font-size:14px;
  font-weight:900;
  letter-spacing:0.08em;
  color:#bfd0ea;
}

.zoomCard .damageBadge,
.zoomCard .energyBadge,
.zoomCard .equipBadge{
  font-size:18px;
  padding:7px 14px;
  border-radius:999px;
}

/* =========================================
   MULTIPLAYER MVP: REQUEST BAR + GAME LOG
   ========================================= */

.pendingRequestBar{
  width:min(1200px, 96vw);
  margin: -4px auto 18px;
  padding: 14px 16px;
  border-radius: 16px;
  border: 1px solid rgba(255,255,255,0.14);
  background: rgba(245, 158, 11, 0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.16);
}

.pendingRequestInner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
}

.pendingRequestText{
  font-weight:900;
  color:#f8fbff;
}

.pendingRequestActions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.logList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.logRow{
  display:flex;
  gap:12px;
  align-items:flex-start;
  border: 1px solid rgba(255,255,255,0.10);
  border-radius: 14px;
  padding: 12px;
  background: rgba(255,255,255,0.04);
}

.logSeq{
  min-width:56px;
  font-weight:1000;
  color:#93c5fd;
}

.logMain{
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.logText{
  color:#f8fbff;
  font-weight:900;
  line-height:1.35;
}

.logMeta{
  color:#bfd0ea;
  font-size:13px;
  font-weight:800;
}

.logRow--request{
  border-color: rgba(245, 158, 11, 0.35);
}

.logRow--approval{
  border-color: rgba(34, 197, 94, 0.35);
}

.logRow--denial{
  border-color: rgba(239, 68, 68, 0.35);
}

.logRow--undo{
  border-color: rgba(168, 85, 247, 0.35);
}

/* Append this to the end of your existing style.css */

.roomGrid {
  grid-template-columns: repeat(3, minmax(200px, 1fr));
}

#roomPanel .panelRow {
  margin-top: 10px;
}

#roomPanel input,
#roomPanel select {
  width: 100%;
}

@media (max-width: 900px) {
  .roomGrid {
    grid-template-columns: 1fr;
  }
}

/* multiplayer fix: force circular counters */
.damageBadge,
.energyBadge,
.equipBadge {
  min-width: 28px;
  height: 28px;
  padding: 0 6px !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px !important;
  font-weight: 1000;
}

.damageBadge {
  left: 8px !important;
  right: auto !important;
  top: auto !important;
  bottom: 8px !important;
  background: rgba(239, 68, 68, 0.96) !important;
  border: 2px solid rgba(127, 29, 29, 0.9) !important;
}

.energyBadge {
  right: 8px !important;
  left: auto !important;
  top: 8px !important;
  bottom: auto !important;
  background: rgba(34, 197, 94, 0.96) !important;
  border: 2px solid rgba(20, 83, 45, 0.9) !important;
}

.equipBadge {
  left: 8px !important;
  top: 8px !important;
  bottom: auto !important;
  right: auto !important;
}

.startingActiveChoice--disabled {
  opacity: 0.65;
  filter: grayscale(0.15);
  cursor: not-allowed;
}

/* =========================================
   BATTLEFIELD HUD LAYOUT OVERRIDE (NO PAGE SCROLL)
   ========================================= */

html, body {
  height: 100%;
}

body:has(#game:not(.hidden)) {
  overflow: hidden;
}

#game.page {
  max-width: 100vw;
}

#game {
  height: 100dvh;
  display: grid;
  grid-template-rows: auto auto auto auto minmax(0, 1fr);
  gap: 10px;
  padding: 10px 12px 12px;
  overflow: hidden;
}

#game .topbar,
#game .controls,
#game .message,
#game .pendingRequestBar,
#game .board {
  width: 100%;
  max-width: none;
  margin: 0;
}

#game .topbar {
  padding: 12px 16px;
  border-radius: 18px;
}

#game .title {
  font-size: 28px;
  line-height: 1;
}

#game .gameControls {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
  padding: 10px;
  background: rgba(8, 14, 26, 0.78);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px;
  backdrop-filter: blur(12px);
}

#game .gameControls .bigbtn {
  min-width: 0;
  width: 100%;
  font-size: 13px;
  line-height: 1.1;
  padding: 10px 8px;
  min-height: 44px;
  border-radius: 12px;
}

#game .message,
#game .pendingRequestBar {
  padding: 10px 14px;
  min-height: 0;
  font-size: 14px;
}

#game .board {
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  overflow: hidden;
}

#game .side {
  min-height: 0;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: 8px;
  padding: 12px;
  border-radius: 22px;
  overflow: hidden;
}

#game .opponentSide {
  grid-template-rows: auto auto auto auto;
  height: 650px;
}

.sideHeaderRow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hudPill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  border-radius: 999px;
  background: linear-gradient(135deg, rgba(42,117,187,0.24), rgba(255,203,5,0.16));
  border: 1px solid rgba(255,255,255,0.14);
  font-size: 13px;
  font-weight: 1000;
  color: #f8fbff;
  white-space: nowrap;
}

#game .zoneTitle {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

#game .zone {
  min-height: 0;
  padding: 10px;
  border-radius: 16px;
  align-items: center;
  justify-content: center;
}

#game #playerActive.zone,
#game #aiActive.zone {
  min-height: 0;
  height: 230px;
}

#game .bench {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

#game .bench-slot {
  min-height: 0 !important;
  max-width: none !important;
  padding: 8px !important;
  border-radius: 16px !important;
}

#game .bench-slot .slotHeader {
  min-height: 22px !important;
  margin-bottom: 6px !important;
  font-size: 10px !important;
}

#game .bench-slot .slotBody,
#game .bench-slot .pokeWrap {
  gap: 8px !important;
}

#game .card,
#game .viewerCard {
  border-radius: 14px;
}

#game #playerActive .card,
#game #aiActive .card,
#game #playerActive .slotEmpty,
#game #aiActive .slotEmpty {
  width: 132px !important;
  height: 184px !important;
  border-radius: 16px !important;
}

#game .bench-slot .card,
#game .bench-slot .slotEmpty {
  width: 84px !important;
  height: 118px !important;
  border-radius: 12px !important;
}

#game .pokeActions {
  min-width: 0 !important;
  width: 100% !important;
  max-width: none !important;
  padding: 8px !important;
  border-radius: 12px !important;
  gap: 6px !important;
}

#game .miniTitle {
  font-size: 10px;
}

#game .smallbtn {
  font-size: 11px;
  padding: 7px 8px;
  border-radius: 10px;
}

#game .btnRow {
  gap: 6px !important;
}

#game .prize,
#game .compactPrize {
  min-height: 0;
  gap: 6px;
}

#game .prize .card {
  width: 54px;
  height: 76px;
  border-radius: 10px;
}

#game .compactZone {
  min-height: 84px;
}

#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  width: 72px !important;
  height: 102px !important;
  border-radius: 12px !important;
}

#game .opponentLowerRow,
#game .lowerRow {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-top: 0;
}

#game .opponentLowerRow > div,
#game .lowerRow > div {
  min-width: 0;
}

#game .handTrayTitle {
  margin-top: 4px;
}

#game .handTray {
  min-height: 124px;
  max-height: 124px;
  flex-wrap: nowrap;
  overflow: hidden;
  align-items: flex-end;
  justify-content: flex-start;
  padding: 14px 18px 8px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(10,16,30,0.92), rgba(17, 28, 50, 0.92));
  border: 1px solid rgba(255,255,255,0.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 18px 40px rgba(0,0,0,0.24);
}

#game .hand .card {
  width: 84px !important;
  height: 118px !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 18px rgba(0,0,0,0.28);
  transition: transform .12s ease;
}

#game .hand .card:hover {
  transform: translateY(-10px);
  z-index: 10;
}

#game .hand .card + .card {
  margin-left: -28px;
}

#game .battleHint {
  margin-top: 4px;
  font-size: 12px;
}

#game .damageBadge,
#game .energyBadge,
#game .equipBadge {
  font-size: 10px !important;
  padding: 3px 6px !important;
}

#game .equipStack {
  gap: 3px;
  padding: 4px;
}

#game .equipStrip {
  width: 18px;
  height: 28px;
}

@media (max-width: 1400px) {
  #game .gameControls {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}

@media (max-width: 1100px) {
  body:has(#game:not(.hidden)) {
    overflow: auto;
  }

  #game {
    height: auto;
    overflow: visible;
  }

  #game .board {
    grid-template-columns: 1fr;
    overflow: visible;
  }
}

/* ======================================================
   FINAL AAA BATTLE HUD OVERRIDES
   ====================================================== */
#game {
  gap: 8px;
  padding: 8px 10px 10px;
  background:
    radial-gradient(1200px 700px at 50% -10%, rgba(59,130,246,0.10), transparent 55%),
    radial-gradient(900px 600px at 50% 110%, rgba(16,185,129,0.08), transparent 50%);
}

#game .topbar {
  padding: 10px 16px;
  border-radius: 16px;
  background:
    linear-gradient(135deg, rgba(7,12,24,0.96), rgba(17,29,52,0.94) 45%, rgba(13,39,58,0.92));
}

#game .title {
  font-size: 20px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #6ee7d8;
}

#game #turnBanner {
  font-size: 13px;
}

#game .gameControls {
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 7px;
  padding: 8px;
  border-radius: 16px;
  background:
    linear-gradient(180deg, rgba(8,14,26,0.90), rgba(6,10,20,0.82));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 14px 30px rgba(0,0,0,0.18);
}

#game .gameControls .bigbtn {
  min-height: 38px;
  padding: 8px 8px;
  font-size: 12px;
  border-radius: 11px;
  background: linear-gradient(180deg, rgba(255,255,255,0.94), rgba(228,234,244,0.94));
  box-shadow: 0 6px 14px rgba(2,6,23,0.14);
}

#game .message,
#game .pendingRequestBar {
  min-height: 38px;
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    linear-gradient(90deg, rgba(38,45,89,0.65), rgba(18,35,53,0.82), rgba(38,45,89,0.65));
}

#game .board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr);
  gap: 10px;
}

#game .side {
  gap: 7px;
  padding: 10px;
  border-radius: 20px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(17,25,47,0.96), rgba(12,18,35,0.96));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04), 0 14px 34px rgba(0,0,0,0.22);
}

#game .zoneTitle {
  font-size: 11px;
  font-weight: 1000;
  color: #d8e7ff;
}

#game .hudPill {
  padding: 5px 10px;
  font-size: 12px;
}

#game .zone {
  background:
    linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  border: 1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.03);
}

#game #playerActive.zone,
#game #aiActive.zone {
  height: 188px;
}

#game #playerActive .card,
#game #aiActive .card,
#game #playerActive .slotEmpty,
#game #aiActive .slotEmpty {
  width: 168px !important;
  height: 254px !important;
  margin-top: -32px;
}

#game .bench {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 8px !important;
  align-items: stretch;
}

#game .bench-slot {
  min-width: 0;
  height: 170px;
  padding: 8px 9px 9px !important;
  display: grid;
  grid-template-rows: auto 1fr;
  align-items: stretch;
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
}

#game .bench-slot .slotHeader {
  font-size: 9px !important;
  letter-spacing: 0.05em;
  margin-bottom: 5px !important;
}

#game .bench-slot .slotBody {
  min-height: 0;
}

#game .bench-slot .pokeWrap {
  display: grid !important;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 8px !important;
  align-items: start;
  flex-wrap: nowrap !important;
}

#game .bench-slot .card,
#game .bench-slot .slotEmpty {
  width: 74px !important;
  height: 102px !important;
}

#game .bench-slot .slotEmpty {
  font-size: 11px;
}

#game .bench-slot .pokeActions {
  min-width: 0 !important;
  width: 100% !important;
  height: 102px;
  padding: 4px !important;
  display: grid;
  grid-template-rows: auto repeat(4, 1fr);
  gap: 4px !important;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
}

#game .bench-slot .miniTitle {
  font-size: 8px !important;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#game .bench-slot .btnRow {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 4px !important;
}

#game .bench-slot .btnRow:nth-of-type(1) {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

#game .bench-slot .btnRow:nth-of-type(2),
#game .bench-slot .btnRow:nth-of-type(4) {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

#game .bench-slot .btnRow:nth-of-type(3) {
  grid-template-columns: 1fr;
}

#game .bench-slot .smallbtn {
  min-width: 0;
  padding: 0 4px;
  min-height: 18px;
  font-size: 8px;
  line-height: 1;
  border-radius: 8px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#game .damageBadge,
#game .energyBadge,
#game .equipBadge {
  font-size: 9px !important;
  padding: 2px 5px !important;
}

#game .equipStack {
  bottom: -8px;
  right: 5px;
}

#game .equipStrip {
  width: 14px;
  height: 22px;
  border-width: 1px;
}

#game .opponentLowerRow,
#game .lowerRow {
  gap: 7px;
}

#game .compactZone,
#game .lowerRow .zone,
#game .opponentLowerRow .zone {
  min-height: 78px;
}

#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  width: 62px !important;
  height: 88px !important;
}

#game .prize .card {
  width: 46px;
  height: 64px;
}

#game .handTrayTitle {
  margin-top: 2px;
}

#game .handTray {
  min-height: 102px;
  max-height: 102px;
  padding: 10px 12px 6px;
  border-radius: 16px;
  overflow: hidden;
}

#game .hand .card {
  width: 72px !important;
  height: 100px !important;
}

#game .hand .card + .card {
  margin-left: -22px;
}

#game .battleHint {
  display: none;
}

@media (max-width: 1500px) {
  #game .gameControls {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

@media (max-width: 1180px) {
  #game .board {
    grid-template-columns: 1fr;
  }

  #game {
    height: auto;
    overflow: visible;
  }

  body:has(#game:not(.hidden)) {
    overflow: auto;
  }
}


/* ======================================================
   ULTIMATE RESPONSIVE BATTLE HUD REFINEMENTS
   ====================================================== */
body:has(#game:not(.hidden)) {
  overflow: hidden;
}

#game {
  --hud-gap: clamp(6px, 0.55vw, 10px);
  --stack-card-w: clamp(60px, 4.1vw, 78px);
  --stack-card-h: calc(var(--stack-card-w) * 1.42);
  --active-card-w: clamp(112px, 7.8vw, 148px);
  --active-card-h: calc(var(--active-card-w) * 1.39);
  --bench-card-w: clamp(72px, 5vw, 98px);
  --bench-card-h: calc(var(--bench-card-w) * 1.4);
  --hand-card-w: clamp(72px, 5vw, 94px);
  --hand-card-h: calc(var(--hand-card-w) * 1.4);
}

#game .gameControls {
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

#game .board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  gap: var(--hud-gap);
  align-items: stretch;
}

#game .side {
  min-width: 0;
}

#game #playerActive.zone,
#game #aiActive.zone {
  height: clamp(180px, 23vh, 230px);
}

#game #playerActive .card,
#game #aiActive .card,
#game #playerActive .slotEmpty,
#game #aiActive .slotEmpty {
  /* width: var(--active-card-w) !important; */
  /* height: var(--active-card-h) !important; */
}

#game .bench {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)) !important;
  gap: var(--hud-gap) !important;
}

#game .bench-slot {
  height: auto;
  min-height: clamp(158px, 21vh, 196px);
  padding: 8px !important;
  overflow: hidden;
}

#game .bench-slot .slotBody {
  min-height: 0;
  display: flex;
  align-items: stretch;
}

#game .bench-slot .pokeWrap {
  display: grid !important;
  grid-template-columns: var(--bench-card-w) minmax(0, 1fr);
  gap: 8px !important;
  width: 100%;
  align-items: stretch;
}

#game .bench-slot .card,
#game .bench-slot .slotEmpty {
  width: var(--bench-card-w) !important;
  height: var(--bench-card-h) !important;
  align-self: center;
}

#game .bench-slot .pokeActions {
  align-self: stretch;
  min-height: var(--bench-card-h);
  height: auto;
  padding: 6px !important;
  gap: 5px !important;
  border-radius: 12px;
}

#game .bench-slot .miniTitle {
  display: none;
}

#game .bench-slot .btnRow {
  display: grid !important;
  gap: 4px !important;
}

#game .bench-slot .btnRowDamage { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#game .bench-slot .btnRowEnergy,
#game .bench-slot .btnRowMove,
#game .bench-slot .btnRowUtility { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#game .bench-slot .btnRowUtility { grid-template-columns: 1fr; }

#game .bench-slot .smallbtn {
  padding: 0 4px;
  min-height: 22px;
  font-size: clamp(8px, 0.65vw, 10px);
  line-height: 1;
}

#game .activeActionPanel {
  max-width: 220px;
}

#game .playerLowerRow,
#game .opponentLowerRow,
#game .lowerRow {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: var(--hud-gap);
}

#game .opponentLowerRow { grid-template-columns: repeat(4, minmax(0, 1fr)); }

#game .compactZone,
#game .lowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactPrize {
  min-height: clamp(80px, 11vh, 112px);
}

#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  width: var(--stack-card-w) !important;
  height: var(--stack-card-h) !important;
}

#game .prize {
  justify-content: flex-start;
  align-items: center;
}

#game .prize .card {
  width: clamp(46px, 3.4vw, 62px);
  height: calc(clamp(46px, 3.4vw, 62px) * 1.38);
}

#game .handTray {
  min-height: clamp(106px, 14vh, 142px);
  max-height: clamp(106px, 14vh, 142px);
  justify-content: flex-start;
  overflow: hidden;
}

#game .hand .card {
  width: var(--hand-card-w) !important;
  height: var(--hand-card-h) !important;
}

#game .hand .card + .card {
  margin-left: -24px;
}

#game .damageBadge,
#game .energyBadge,
#game .equipBadge {
  font-size: clamp(9px, 0.72vw, 11px) !important;
}

@media (max-width: 1500px) {
  #game .gameControls { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 1280px) {
  body:has(#game:not(.hidden)) { overflow: auto; }
  #game { height: auto; overflow: visible; }
  #game .board { grid-template-columns: 1fr; }
}

@media (max-width: 900px) {
  #game .gameControls { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game .playerLowerRow,
  #game .lowerRow { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #game .opponentLowerRow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #game .bench { grid-template-columns: 1fr !important; }
}


/* ======================================================
   COMBINED ACTIVE + BENCH ARENA / CLICK-TO-ACT HUD
   ====================================================== */
#game .board {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

#game #playerBench,
#game #aiBench,
#game .playerSide > .zoneTitle:nth-of-type(2),
#game .opponentSide > .zoneTitle:nth-of-type(2) {
  display: none !important;
}

#game #playerActive.zone,
#game #aiActive.zone {
  height: clamp(206px, 27vh, 300px);
  padding: clamp(8px, 0.8vw, 14px);
}

#game .battleLane {
  display: grid;
  grid-template-columns: minmax(132px, 0.84fr) minmax(0, 1.6fr);
  gap: clamp(10px, 1vw, 16px);
  align-items: stretch;
  width: 100%;
  height: 100%;
}

#game .battleLaneActive,
#game .battleLaneBench {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

#game .battleLaneSectionLabel {
  font-size: 10px;
  line-height: 1;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(216,231,255,0.78);
}

#game .battleLaneActive .pokeWrap,
#game .battleLaneActive .battleLaneEmpty {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game .battleLaneBenchRail {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(clamp(76px, 8vw, 110px), 1fr));
  gap: clamp(8px, 0.8vw, 12px);
  align-items: stretch;
}

#game .battleLaneBenchSlot {
  min-width: 0;
  border-radius: 14px;
  border: 1px solid rgba(255,255,255,0.08);
  background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02));
  padding: 7px 6px 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
  justify-content: flex-start;
  overflow: hidden;
}

#game .battleLaneSlotTag {
  align-self: stretch;
  font-size: 9px;
  font-weight: 900;
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(216,231,255,0.7);
  text-align: left;
}

#game .battleLaneBenchSlot .pokeWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100%;
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty {
  width: clamp(72px, 5.1vw, 96px) !important;
  height: calc(clamp(72px, 5.1vw, 96px) * 1.4) !important;
}

#game .battleLaneBenchSlot .slotEmpty,
#game .battleLaneActiveEmpty {
  border-style: dashed;
  color: rgba(255,255,255,0.68);
  font-size: 11px;
}

#game .battleLaneBenchSlot .damageBadge,
#game .battleLaneBenchSlot .energyBadge,
#game .battleLaneBenchSlot .equipBadge {
  font-size: 9px !important;
  padding: 2px 5px !important;
}

#game .battleLaneBenchSlot .equipStack {
  bottom: -6px;
  right: 4px;
}

#game .battleLaneBenchSlot .equipStrip {
  width: 14px;
  height: 20px;
}

#game .pokeWrap {
  cursor: default;
}

#game .pokeWrap .card {
  cursor: pointer;
}

@media (max-width: 1280px) {
  #game .battleLane {
    grid-template-columns: minmax(112px, 0.8fr) minmax(0, 1.5fr);
  }
}

@media (max-width: 1100px) {
  #game .battleLane {
    grid-template-columns: 1fr;
  }

  #game #playerActive.zone,
  #game #aiActive.zone {
    height: auto;
    min-height: 280px;
  }

  #game .battleLaneBenchRail {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
  }
}

/* ===== Final battle HUD polish pass ===== */
#game.page {
  max-width: min(1800px, 100vw);
  padding: 8px;
}

#game .topbar {
  margin-bottom: 8px;
  padding: 10px 14px;
}

#game .gameControls {
  margin-bottom: 8px;
  gap: 8px;
}

#game .message {
  margin-bottom: 8px;
  min-height: 40px;
  padding: 10px 14px;
}

#game .board {
  gap: 10px;
  align-items: start;
}

#game .side {
  padding: 10px;
  height: 650px;
}

#game .zoneTitle {
  margin-top: 0;
  margin-bottom: 5px;
  font-size: 12px;
}

#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(230px, 33vh, 380px);
  height: clamp(230px, 33vh, 380px);
  padding: 6px 8px;
}

#game .battleLane {
  grid-template-columns: minmax(180px, 1.05fr) minmax(0, 2.35fr);
  gap: clamp(10px, 1vw, 18px);
}

#game .battleLaneActive .card {
  width: clamp(128px, 10vw, 196px) !important;
  height: calc(clamp(128px, 10vw, 196px) * 1.4) !important;
}

#game .battleLaneBenchRail {
  grid-template-columns: repeat(auto-fit, minmax(clamp(92px, 9vw, 136px), 1fr));
  gap: clamp(8px, 0.7vw, 12px);
}

#game .battleLaneBenchSlot {
  padding: 4px 4px 6px;
  gap: 4px;
}

#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty {
  width: clamp(88px, 7vw, 126px) !important;
  height: calc(clamp(88px, 7vw, 126px) * 1.4) !important;
}

#game .battleLaneSlotTag,
#game .battleLaneSectionLabel {
  font-size: 9px;
}

#game .playerLowerRow,
#game .opponentLowerRow {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 8px;
}

#game .opponentLowerRow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#game .compactZone,
#game .playerLowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactPrize {
  min-height: 84px !important;
  height: 84px !important;
  padding: 6px;
}

#game .compactZone .card,
#game .playerLowerRow .card,
#game .opponentLowerRow .card,
#game .compactPrize .card,
#game .compactPrize .slotEmpty {
  width: clamp(46px, 4vw, 72px);
  height: calc(clamp(46px, 4vw, 72px) * 1.4);
}

#game .playerLowerRow .zoneTitle,
#game .opponentLowerRow .zoneTitle {
  margin-bottom: 4px;
}

#game .handTrayTitle {
  margin-top: 8px;
  margin-bottom: 6px;
}

#game .handTray,
#game .opponentHandTray {
  min-height: clamp(126px, 18vh, 228px);
  height: clamp(126px, 18vh, 228px);
  align-items: flex-end;
  padding: 8px 6px 4px;
  overflow: hidden;
}

#game .handTray .card,
#game .opponentHandTray .card {
  width: clamp(88px, 7vw, 132px);
  height: calc(clamp(88px, 7vw, 132px) * 1.4);
}

#game .opponentHandTitle {
  margin-top: 8px;
}

#game .opponentHandBack {
  opacity: 0.98;
  filter: saturate(0.9) brightness(0.96);
}

#game .opponentHandTray .card-back {
  font-size: clamp(11px, 1vw, 14px);
}

#game .damageBadge,
#game .energyBadge,
#game .equipBadge {
  transform: scale(0.96);
  transform-origin: center;
}

@media (max-width: 1360px) {
  #game .battleLane {
    grid-template-columns: minmax(160px, 0.95fr) minmax(0, 2.1fr);
  }

  #game .handTray,
  #game .opponentHandTray {
    min-height: clamp(118px, 16vh, 210px);
    height: clamp(118px, 16vh, 210px);
  }
}

@media (max-width: 1100px) {
  #game .board {
    grid-template-columns: 1fr;
  }

  #game .battleLane {
    grid-template-columns: 1fr;
  }

  #game .playerLowerRow,
  #game .opponentLowerRow {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}


/* ======================================================
   PERFECTION PATCH OVERRIDES
   ====================================================== */
#game {
  --active-card-w: clamp(140px, 10.4vw, 210px);
  --active-card-h: calc(var(--active-card-w) * 1.4);
  --hand-card-w: clamp(86px, 6.9vw, 126px);
  --hand-card-h: calc(var(--hand-card-w) * 1.4);
}

#game #playerActive.zone,
#game #aiActive.zone {
  height: clamp(210px, 27vh, 290px);
}

#game .battleLane {
  grid-template-columns: minmax(210px, 1.15fr) minmax(0, 2.2fr);
  gap: clamp(10px, 1vw, 16px);
}

#game .battleLaneActive .card,
#game .battleLaneActive .slotEmpty {
  width: var(--active-card-w) !important;
  height: var(--active-card-h) !important;
}

#game .playerLowerRow {
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

#game .opponentLowerRow {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

#game .compactZone,
#game .playerLowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactPrize {
  min-height: 62px !important;
  height: 62px !important;
  padding: 4px !important;
}

#game .compactZone .card,
#game .playerLowerRow .card,
#game .opponentLowerRow .card,
#game .compactPrize .card,
#game .compactPrize .slotEmpty,
#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  width: clamp(32px, 2.6vw, 46px) !important;
  height: calc(clamp(32px, 2.6vw, 46px) * 1.4) !important;
}

#game .prize .card {
  width: clamp(28px, 2.35vw, 42px) !important;
  height: calc(clamp(28px, 2.35vw, 42px) * 1.4) !important;
}

#game .zoneTitle {
  font-size: 10px;
}

#game .playerLowerRow .zoneTitle,
#game .opponentLowerRow .zoneTitle {
  margin-bottom: 2px;
}

#game .handTray,
#game .opponentHandTray {
  min-height: clamp(154px, 24vh, 300px);
  height: clamp(154px, 24vh, 300px);
  padding: 14px 6px 6px;
}

#game .handTray .card {
  width: calc(var(--hand-card-w) * 0.72) !important;
  height: calc(var(--hand-card-h) * 0.72) !important;
}

#game .opponentHandTray .card {
  width: calc(var(--hand-card-w) * 0.78) !important;
  height: calc(var(--hand-card-h) * 0.78) !important;
}

#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -28px;
}

/* ======================================================
   AAA POLISH PASS - based on poke_perfection_based_on_v2
   ====================================================== */
#game {
  --card-aspect: 63 / 88;
}

/* Bigger, more premium HUD typography without wasting space */
#game .topbar {
  padding: 8px 16px !important;
}
#game .title {
  font-size: clamp(30px, 2.3vw, 42px) !important;
  line-height: 0.95 !important;
  letter-spacing: 0.06em !important;
  font-weight: 1000 !important;
}
#game #turnBanner,
#game .topbar .subhint {
  font-size: clamp(14px, 0.95vw, 18px) !important;
  font-weight: 900 !important;
}
#game .zoneTitle,
#game .battleLaneSectionLabel,
#game .battleLaneSlotTag {
  font-size: clamp(11px, 0.78vw, 14px) !important;
  letter-spacing: 0.06em !important;
}
#game .gameControls .bigbtn {
  font-size: clamp(12px, 0.82vw, 15px) !important;
  min-height: 40px !important;
}

/* Preserve card proportions everywhere */
#game .battleLaneActive .card,
#game .battleLaneActive .slotEmpty,
#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty,
#game .handTray .card,
#game .opponentHandTray .card,
#game .compactZone .card,
#game .compactPrize .card,
#game .compactPrize .slotEmpty,
#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  aspect-ratio: var(--card-aspect) !important;
  height: auto !important;
}

/* Active should feel heroic, bench should stay stable */
#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(236px, 31vh, 340px) !important;
  height: clamp(236px, 31vh, 340px) !important;
}
#game .battleLane {
  grid-template-columns: minmax(220px, 1.08fr) minmax(0, 2.12fr) !important;
  gap: clamp(10px, 0.9vw, 16px) !important;
}
#game .battleLaneActive .card,
#game .battleLaneActive .slotEmpty {
  width: clamp(150px, 11vw, 212px) !important;
}

/* Bench: fixed 3+2 structure so 4/5 Pokémon do not warp the lane */
#game .battleLaneBenchRail {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(8px, 0.72vw, 12px) !important;
  align-items: stretch !important;
  align-content: stretch !important;
}
#game .battleLaneBenchSlot {
  min-height: 0 !important;
  height: 100% !important;
  padding: 5px 5px 6px !important;
  justify-content: flex-start !important;
}
#game .battleLaneBenchSlot .pokeWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  flex: 1 1 auto !important;
  min-height: 0 !important;
}
#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty {
  width: min(100%, clamp(84px, 6.2vw, 112px)) !important;
}

/* Utility row: compact, top-aligned, leaving more room for hand */
#game .playerLowerRow,
#game .opponentLowerRow {
  align-items: start !important;
  margin-top: 4px !important;
}
#game .compactZone,
#game .playerLowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactPrize {
  min-height: 54px !important;
  height: 54px !important;
  padding: 4px 6px 3px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}
#game .compactZone > :not(.zoneTitle),
#game .playerLowerRow .zone > :not(.zoneTitle),
#game .opponentLowerRow .zone > :not(.zoneTitle),
#game .compactPrize > :not(.zoneTitle) {
  margin-top: 0 !important;
}
#game .compactZone .card,
#game .playerLowerRow .card,
#game .opponentLowerRow .card,
#game .compactPrize .card,
#game .compactPrize .slotEmpty,
#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  width: clamp(26px, 2vw, 38px) !important;
  align-self: center !important;
}

/* Prize cards: more elegant, centered, slightly overlapped */
#game .compactPrize .prize {
  width: 100% !important;
  display: flex !important;
  justify-content: center !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  flex-wrap: nowrap !important;
  gap: 0 !important;
  overflow: hidden !important;
  padding-top: 0 !important;
}
#game .compactPrize .card,
#game .compactPrize .slotEmpty,
#game .prize .card {
  width: clamp(24px, 1.82vw, 34px) !important;
}
#game .compactPrize .card + .card,
#game .compactPrize .slotEmpty + .slotEmpty,
#game .compactPrize .slotEmpty + .card,
#game .compactPrize .card + .slotEmpty {
  margin-left: -5px !important;
}

/* Hand should look powerful, not stretched */
#game .handTrayTitle,
#game .opponentHandTitle {
  margin-top: 6px !important;
  margin-bottom: 5px !important;
  font-size: clamp(13px, 0.95vw, 16px) !important;
  font-weight: 900 !important;
}
#game .handTray,
#game .opponentHandTray {
  min-height: clamp(142px, 23vh, 250px) !important;
  height: clamp(142px, 23vh, 250px) !important;
  padding: 6px 8px 6px !important;
  align-items: flex-end !important;
}
#game .handTray .card,
#game .opponentHandTray .card {
  width: clamp(74px, 5.5vw, 108px) !important;
  max-height: calc(100% - 2px) !important;
}
#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -14px !important;
}
#game .opponentHandTray .card-back {
  font-size: clamp(10px, 0.78vw, 13px) !important;
}

@media (max-width: 1380px) {
  #game .battleLane {
    grid-template-columns: minmax(190px, 1fr) minmax(0, 2fr) !important;
  }
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  #game .handTray,
  #game .opponentHandTray {
    min-height: clamp(132px, 20vh, 220px) !important;
    height: clamp(132px, 20vh, 220px) !important;
  }
}

@media (max-width: 1120px) {
  #game .battleLane {
    grid-template-columns: 1fr !important;
  }
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #game .playerLowerRow,
  #game .opponentLowerRow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* ======================================================
   RESPONSIVE HAND + BATTLE LANE FINAL OVERRIDES
   ====================================================== */
#game {
  --active-card-w: clamp(150px, 10.2vw, 214px);
  --active-card-h: calc(var(--active-card-w) * 1.4);
  --bench-card-w: clamp(84px, 5.2vw, 112px);
  --bench-card-h: calc(var(--bench-card-w) * 1.4);
}

#game .topbar .title,
#game .topbarTitle,
#game .gameTitle {
  font-size: clamp(24px, 2.4vw, 38px) !important;
  letter-spacing: 0.04em;
}

#game .battleLane {
  grid-template-columns: minmax(220px, 1.1fr) minmax(0, 2fr) !important;
  align-items: stretch;
  gap: clamp(10px, 0.95vw, 16px) !important;
}

#game .battleLaneActive,
#game .battleLaneBench {
  min-height: 0;
  height: 100%;
}

#game .battleLaneActive {
  display: grid;
  grid-template-rows: auto 1fr;
}

#game .battleLaneActive .pokeWrap,
#game .battleLaneActive .battleLaneEmpty {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game .battleLaneActive .card,
#game .battleLaneActive .slotEmpty {
  width: var(--active-card-w) !important;
  height: var(--active-card-h) !important;
  max-height: calc(100% - 12px);
  object-fit: cover;
}

#game .battleLaneBench {
  display: grid;
  grid-template-rows: auto 1fr;
}

#game .battleLaneBenchRail {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(114px, 1fr);
  align-items: stretch;
  gap: clamp(8px, 0.7vw, 12px) !important;
  min-height: 0;
}

#game .battleLaneBenchSlot {
  min-height: 114px;
  height: 100%;
  padding: 6px 6px 8px !important;
  gap: 4px !important;
  justify-content: flex-start;
}

#game .battleLaneBenchSlot .pokeWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty {
  width: var(--bench-card-w) !important;
  height: var(--bench-card-h) !important;
  max-height: calc(100% - 8px);
}

#game .battleLaneSlotTag,
#game .battleLaneSectionLabel {
  font-size: clamp(12px, 0.9vw, 15px) !important;
  letter-spacing: 0.06em;
}

#game .playerLowerRow,
#game .opponentLowerRow {
  align-items: start;
}

#game .compactZone,
#game .playerLowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactPrize {
  display: flex;
  flex-direction: column;
  justify-content: flex-start !important;
}

#game .playerLowerRow .zone .stackWrap,
#game .opponentLowerRow .zone .stackWrap,
#game .compactPrize {
  align-items: flex-start;
}

#game .playerLowerRow .card,
#game .opponentLowerRow .card,
#game .compactPrize .card,
#game .compactPrize .slotEmpty,
#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty {
  align-self: flex-start;
}

#game .compactPrize {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: flex-start !important;
  justify-content: flex-start;
  gap: 0;
  overflow: hidden;
}

#game .compactPrize .card {
  position: relative;
}

#game .compactPrize .card + .card {
  margin-left: -6px;
}

#game .handTray,
#game .opponentHandTray {
  min-height: clamp(126px, 16vh, 188px) !important;
  height: clamp(126px, 16vh, 188px) !important;
  padding: 8px 10px 6px !important;
  align-items: flex-end;
  overflow: hidden;
}

#game .handTray .card,
#game .opponentHandTray .card {
  width: clamp(80px, 6.1vw, 116px) !important;
  height: calc(clamp(80px, 6.1vw, 116px) * 1.4) !important;
  max-height: 100%;
}

#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -20px;
}

#game .zoneTitle,
#game .turnMeta,
#game .message,
#game .gameControls button,
#game .btn,
#game .smallbtn {
  font-size: clamp(12px, 0.9vw, 16px);
}

#game .sideTitle,
#game h2,
#game h3 {
  font-size: clamp(22px, 1.5vw, 30px);
}

@media (max-width: 1500px) {
  #game .battleLaneBenchRail {
    grid-auto-rows: minmax(104px, 1fr);
  }

  #game .handTray .card,
  #game .opponentHandTray .card {
    width: clamp(72px, 5.7vw, 104px) !important;
    height: calc(clamp(72px, 5.7vw, 104px) * 1.4) !important;
  }
}

@media (max-width: 1180px) {
  #game .battleLane {
    grid-template-columns: 1fr !important;
  }

  #game .battleLaneBenchRail {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}


/* ======================================================
   FINAL RESPONSIVE HAND + AAA TYPOGRAPHY POLISH
   ====================================================== */
#game {
  --hand-card-w: clamp(72px, 5.8vw, 104px);
  --hand-card-h: calc(var(--hand-card-w) * 1.4);
  --active-card-w: clamp(132px, 9.2vw, 188px);
  --active-card-h: calc(var(--active-card-w) * 1.4);
  --bench-card-w: clamp(84px, 6vw, 118px);
  --bench-card-h: calc(var(--bench-card-w) * 1.4);
}

#game .title,
#game .sideTitle,
#game h2,
#game h3 {
  font-size: clamp(26px, 1.8vw, 36px) !important;
  letter-spacing: 0.02em;
}

#game .turnMeta,
#game .message,
#game .zoneTitle,
#game .handTrayTitle,
#game .opponentHandTitle,
#game .gameControls button,
#game .btn,
#game .smallbtn,
#game .battleLaneSlotTag,
#game .battleLaneSectionLabel {
  font-size: clamp(13px, 0.95vw, 17px) !important;
}

#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(236px, 32vh, 360px) !important;
  height: clamp(236px, 32vh, 360px) !important;
}

#game .battleLane {
  grid-template-columns: minmax(200px, 1.08fr) minmax(0, 2.2fr) !important;
  align-items: stretch;
}

#game .battleLaneActive,
#game .battleLaneBench {
  min-height: 0;
}

#game .battleLaneActive .pokeWrap,
#game .battleLaneActive .battleLaneEmpty {
  width: 105%;
  height: 130%;
  min-height: 0;
  display: grid !important;
  place-items: center;
}

#game .battleLaneActive .card,
#game .battleLaneActive .slotEmpty {
  width: var(--active-card-w) !important;
  height: var(--active-card-h) !important;
  max-height: calc(100% - 12px);
}

#game .battleLaneBenchRail {
  grid-template-columns: repeat(auto-fit, minmax(clamp(90px, 8vw, 124px), 1fr)) !important;
  grid-auto-rows: 1fr;
  align-items: stretch;
}

#game .battleLaneBenchSlot {
  min-height: 0;
  justify-content: flex-start;
}

#game .battleLaneBenchSlot .pokeWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100%;
  height: 100%;
  min-height: 0;
  display: grid !important;
  place-items: center;
}

#game .playerLowerRow,
#game .opponentLowerRow {
  margin-top: 6px;
}

#game .compactPrize,
#game .prize {
  gap: 0 !important;
  align-items: flex-start !important;
}

#game .compactPrize .card,
#game .prize .card {
  width: clamp(18px, 1.3vw, 28px) !important;
  height: calc(clamp(18px, 1.3vw, 28px) * 1.4) !important;
}

#game .compactPrize .card + .card,
#game .prize .card + .card {
  margin-left: -4px !important;
}

#game .handTray,
#game .opponentHandTray {
  min-height: clamp(120px, 15vh, 180px) !important;
  height: clamp(120px, 15vh, 180px) !important;
  padding: 8px 10px 8px !important;
  overflow: hidden;
}

#game .handTray .card,
#game .opponentHandTray .card {
  width: var(--hand-card-w) !important;
  height: var(--hand-card-h) !important;
  max-height: calc(100% - 2px);
}

#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -22px;
}

@media (max-width: 1450px) {
  #game .battleLane {
    grid-template-columns: minmax(172px, 0.98fr) minmax(0, 2.05fr) !important;
  }
}

@media (max-width: 1180px) {
  #game .battleLane {
    grid-template-columns: 1fr !important;
  }
}


/* ======================================================
   FINAL HAND VISIBILITY + PRIZE VISIBILITY + TYPOGRAPHY TUNE
   ====================================================== */
#game {
  --hand-card-w: clamp(62px, 5.2vw, 98px);
  --hand-card-h: calc(var(--hand-card-w) * 1.4);
}

#game .title,
#game .sideTitle,
#game h2,
#game h3 {
  font-size: clamp(28px, 2vw, 40px) !important;
}

#game .turnMeta,
#game .message,
#game .zoneTitle,
#game .handTrayTitle,
#game .opponentHandTitle,
#game .gameControls button,
#game .btn,
#game .smallbtn,
#game .battleLaneSlotTag,
#game .battleLaneSectionLabel,
#game .hudPill {
  font-size: clamp(14px, 1vw, 18px) !important;
}

#game .board {
  gap: 8px !important;
}

#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(212px, 28vh, 320px) !important;
  height: clamp(212px, 28vh, 320px) !important;
}

#game .battleLane {
  grid-template-columns: minmax(200px, 1.04fr) minmax(0, 2.25fr) !important;
  gap: clamp(8px, 0.8vw, 14px) !important;
}

#game .battleLaneBenchRail {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(96px, 1fr) !important;
  gap: clamp(6px, 0.6vw, 10px) !important;
}

#game .battleLaneBenchSlot {
  min-height: 96px !important;
  padding: 5px 5px 6px !important;
}

#game .playerLowerRow,
#game .opponentLowerRow {
  margin-top: 2px !important;
  margin-bottom: 2px !important;
  align-items: start !important;
}

#game .playerLowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactZone,
#game .compactPrize {
  min-height: clamp(38px, 5vh, 58px) !important;
  height: clamp(38px, 5vh, 58px) !important;
}

#game .compactPrize,
#game .prize {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 2px !important;
  overflow: hidden !important;
}

#game .compactPrize .card,
#game .prize .card {
  width: clamp(12px, 0.95vw, 20px) !important;
  height: calc(clamp(12px, 0.95vw, 20px) * 1.4) !important;
  margin-left: 0 !important;
}

#game .compactPrize .card + .card,
#game .prize .card + .card {
  margin-left: 0 !important;
}

#game .handTrayTitle,
#game .opponentHandTitle {
  margin-top: 2px !important;
  margin-bottom: 4px !important;
}

#game .handTray,
#game .opponentHandTray {
  min-height: clamp(102px, 16.5vh, 160px) !important;
  height: clamp(102px, 16.5vh, 160px) !important;
  padding: 6px 8px 4px !important;
  align-items: flex-start !important;
  overflow: hidden !important;
}

#game .handTray .card,
#game .opponentHandTray .card {
  width: var(--hand-card-w) !important;
  height: var(--hand-card-h) !important;
  max-height: calc(100% - 1px) !important;
}

#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -18px !important;
}

@media (max-width: 1500px), (max-height: 920px) {
  #game #playerActive.zone,
  #game #aiActive.zone {
    min-height: clamp(188px, 25vh, 280px) !important;
    height: clamp(188px, 25vh, 280px) !important;
  }

  #game .battleLaneBenchRail {
    grid-auto-rows: minmax(88px, 1fr) !important;
  }

  #game .playerLowerRow .zone,
  #game .opponentLowerRow .zone,
  #game .compactZone,
  #game .compactPrize {
    min-height: clamp(34px, 4.2vh, 48px) !important;
    height: clamp(34px, 4.2vh, 48px) !important;
  }

  #game .handTray,
  #game .opponentHandTray {
    min-height: clamp(94px, 15vh, 138px) !important;
    height: clamp(94px, 15vh, 138px) !important;
  }
}


/* === final hand overlap + active size polish === */
#game {
  --active-card-w: clamp(104px, 6.9vw, 148px) !important;
  --active-card-h: calc(var(--active-card-w) * 1.4) !important;
}

#game .battleLaneActive .card,
#game .battleLaneActive .slotEmpty {
  width: var(--active-card-w) !important;
  height: var(--active-card-h) !important;
  max-width: calc(100% - 18px) !important;
  max-height: calc(100% - 18px) !important;
}

#game .handTray,
#game .opponentHandTray {
  overflow: hidden !important;
  justify-content: flex-start !important;
}

#game .handTray .card,
#game .opponentHandTray .card {
  box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
}


/* === v5 utility row + stronger hand overlap polish === */
#game .playerLowerRow,
#game .opponentLowerRow {
  grid-template-columns: 1.05fr 1.05fr 1.15fr 1.15fr 0.95fr 1.15fr !important;
  column-gap: 10px !important;
  row-gap: 0 !important;
  align-items: start !important;
}

#game .compactZone,
#game .playerLowerRow .zone,
#game .opponentLowerRow .zone,
#game .compactPrize {
  min-height: 60px !important;
  height: 60px !important;
  padding: 2px 8px 4px !important;
  justify-content: flex-start !important;
}

#game .playerLowerRow .zoneTitle,
#game .opponentLowerRow .zoneTitle,
#game .compactPrize .zoneTitle,
#game .handTrayTitle,
#game .opponentHandTitle,
#game .battleLaneTitle,
#game .turnBanner,
#game .actionBtn,
#game .toolbarBtn,
#game .gameTitle {
  font-size: clamp(15px, 1.02vw, 19px) !important;
}

#game .compactZone .card,
#game .playerLowerRow .card,
#game .opponentLowerRow .card,
#game .playerLowerRow .slotEmpty,
#game .opponentLowerRow .slotEmpty,
#game #playerDeck .card,
#game #playerDiscard .card,
#game #playerStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game #aiStadium .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerDeck .slotEmpty,
#game #playerDiscard .slotEmpty,
#game #playerStadium .slotEmpty,
#game #aiDeck .slotEmpty,
#game #aiDiscard .slotEmpty,
#game #aiStadium .slotEmpty,
#game #energyPile .slotEmpty,
#game #energyDiscard .slotEmpty {
  width: clamp(34px, 2.5vw, 52px) !important;
  height: auto !important;
  max-height: 42px !important;
  align-self: center !important;
}

#game .compactPrize,
#game .prize {
  justify-content: center !important;
  overflow: hidden !important;
}

#game .compactPrize .card,
#game .prize .card {
  width: clamp(16px, 1.18vw, 24px) !important;
  height: calc(clamp(16px, 1.18vw, 24px) * 1.4) !important;
  max-height: 34px !important;
}

#game .compactPrize .card + .card,
#game .prize .card + .card {
  margin-left: -3px !important;
}

#game .handTray,
#game .opponentHandTray {
  padding: 4px 6px 6px !important;
}

#game .handTray .card,
#game .opponentHandTray .card {
  box-shadow: 0 10px 22px rgba(0,0,0,0.34) !important;
}

#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -28px !important;
}

@media (max-width: 1400px), (max-height: 900px) {
  #game .playerLowerRow,
  #game .opponentLowerRow {
    column-gap: 8px !important;
  }

  #game .compactZone,
  #game .playerLowerRow .zone,
  #game .opponentLowerRow .zone,
  #game .compactPrize {
    min-height: 56px !important;
    height: 56px !important;
  }

  #game .compactZone .card,
  #game .playerLowerRow .card,
  #game .opponentLowerRow .card,
  #game .playerLowerRow .slotEmpty,
  #game .opponentLowerRow .slotEmpty,
  #game #playerDeck .card,
  #game #playerDiscard .card,
  #game #playerStadium .card,
  #game #aiDeck .card,
  #game #aiDiscard .card,
  #game #aiStadium .card,
  #game #energyPile .card,
  #game #energyDiscard .card,
  #game #playerDeck .slotEmpty,
  #game #playerDiscard .slotEmpty,
  #game #playerStadium .slotEmpty,
  #game #aiDeck .slotEmpty,
  #game #aiDiscard .slotEmpty,
  #game #aiStadium .slotEmpty,
  #game #energyPile .slotEmpty,
  #game #energyDiscard .slotEmpty {
    width: clamp(30px, 2.25vw, 46px) !important;
    max-height: 38px !important;
  }

  #game .handTray .card + .card,
  #game .opponentHandTray .card + .card {
    margin-left: -34px !important;
  }
}

/* === v6 alignment + hand visibility polish === */
#game .opponentLowerRow,
#game .playerLowerRow {
  display:grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  align-items:start !important;
}

#game .opponentLowerRow > div,
#game .playerLowerRow > div {
  min-width: 0 !important;
}

#game .ghostZone {
  visibility: hidden !important;
  pointer-events: none !important;
}

#game .ghostZone .zoneTitle,
#game .ghostZoneBox {
  visibility: hidden !important;
}

#game .handTrayTitle,
#game .opponentHandTitle {
  min-height: 28px !important;
  display:flex !important;
  align-items:flex-end !important;
}

#game .handTray,
#game .opponentHandTray {
  display:flex !important;
  flex-wrap: nowrap !important;
  align-items:flex-end !important;
  justify-content:flex-start !important;
  overflow:hidden !important;
}

#game .handTray .card,
#game .opponentHandTray .card {
  position: relative !important;
  flex: 0 0 auto !important;
}



/* === v7 perfection alignment + remove energy discard === */
#game .playerLowerRow,
#game .opponentLowerRow {
  grid-template-columns: 1.05fr 1.05fr 0.98fr 1.12fr 1fr !important;
  column-gap: 12px !important;
  align-items: start !important;
}

#game .playerLowerRow > :nth-child(6),
#game .opponentLowerRow > :nth-child(6),
#game .energyDiscardGhost {
  display: none !important;
}

#game .playerLowerRow .zoneTitle,
#game .opponentLowerRow .zoneTitle,
#game .handTrayTitle,
#game .opponentHandTitle {
  font-size: clamp(17px, 1.08vw, 21px) !important;
  line-height: 1.08 !important;
}

#game .handTrayTitle,
#game .opponentHandTitle {
  margin-top: 8px !important;
  min-height: 32px !important;
}

#game .handTray,
#game .opponentHandTray {
  min-height: 132px !important;
  height: 132px !important;
  justify-content: flex-start !important;
  align-items: flex-end !important;
  padding: 6px 8px 8px !important;
}

#game #playerHand,
#game #aiHand {
  margin-top: 0 !important;
}

#game .handTray .card,
#game .opponentHandTray .card {
  width: var(--hand-card-w) !important;
  height: var(--hand-card-h) !important;
  max-width: none !important;
  max-height: none !important;
}

#game #playerDeck,
#game #playerDiscard,
#game #playerStadium,
#game #aiDeck,
#game #aiDiscard,
#game #aiStadium,
#game #energyPile,
#game .compactPrize,
#game .prize {
  justify-content: center !important;
  align-items: center !important;
}

#game .compactPrize,
#game .prize {
  gap: 1px !important;
}

#game .compactPrize .card,
#game .prize .card {
  width: clamp(20px, 1.35vw, 28px) !important;
  height: calc(clamp(20px, 1.35vw, 28px) * 1.4) !important;
}

/* === v10 hand-name visibility polish === */
#game .handTray,
#game .opponentHandTray {
  min-height: 126px !important;
  height: 126px !important;
  padding: 14px 10px 10px !important;
  align-items: flex-end !important;
}

#game #playerHand .card,
#game #aiHand .card,
#game .handTray .card,
#game .opponentHandTray .card {
  width: clamp(56px, 4.2vw, 70px) !important;
  height: calc(clamp(56px, 4.2vw, 70px) * 1.4) !important;
  border-radius: 11px !important;
}

#game .handTray .card img,
#game .opponentHandTray .card img {
  object-position: top center !important;
}


/* === v11 precision polish === */
#game .handTrayTitle,
#game .opponentHandTitle {
  display: flex !important;
  align-items: baseline !important;
  gap: 6px !important;
}

#game .battleLaneBenchSlot {
  overflow: hidden !important;
}

#game .battleLaneBenchSlot .benchPokemonWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100% !important;
  height: calc(100% - 24px) !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#game .battleLaneBenchSlot .benchPokemonCard {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 5 / 7 !important;
  margin: 0 auto !important;
}

#game .battleLaneBenchSlot .benchPokemonCard img {
  object-fit: contain !important;
  object-position: center center !important;
  width: 60%;
  margin-left: 20px;
}

#game .compactZone .stadiumWrap,
#game .compactZone .stadiumCard {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  height: 100% !important;
}

#game .compactZone .stadiumCard {
  width: auto !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: 100% !important;
  aspect-ratio: 5 / 7 !important;
}

#game .compactZone .stadiumCard img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* ======================================================
   PTCG Deck Pricing Calculator
====================================================== */
.pricingHero{
  display:grid;
  grid-template-columns:1.3fr .95fr;
  gap:18px;
  align-items:start;
  padding:18px;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.14);
  background:linear-gradient(135deg, rgba(10,18,35,.92), rgba(30,41,59,.88));
  box-shadow:0 18px 46px rgba(0,0,0,.34);
}
.pricingHeroTitle{
  font-size:28px;
  font-weight:1000;
  line-height:1.08;
  letter-spacing:.2px;
  color:#fff;
}
.pricingHeroText{ max-width:900px; margin-top:10px; }
.pricingHeroStats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:12px;
}
.pricingStatCard{
  border-radius:20px;
  padding:14px;
  background:rgba(255,255,255,.94);
  color:#0f172a;
  box-shadow:0 10px 28px rgba(0,0,0,.16);
}
.pricingStatLabel{ font-size:12px; font-weight:900; text-transform:uppercase; letter-spacing:.5px; color:#64748b; }
.pricingStatValue{ margin-top:8px; font-size:28px; font-weight:1000; line-height:1; }
.goodText{ color:#0f9d58; }
.purpleText{ color:#7c3aed; }

.pricingGrid{
  display:grid;
  grid-template-columns:1.02fr 1.1fr 1.08fr;
  gap:16px;
  margin-top:16px;
}
.pricingCard{
  min-width:0;
  overflow:hidden;
  padding:16px;
  border-radius:24px;
  border:2px solid rgba(255,255,255,.12);
  background:linear-gradient(180deg, rgba(15,23,42,.92), rgba(30,41,59,.9));
  box-shadow:0 14px 34px rgba(0,0,0,.28);
}
.pricingCardTitle{
  font-size:20px;
  font-weight:1000;
  color:#fff;
  margin-bottom:6px;
}
.pricingTextarea{
  width:100%;
  min-height:420px;
  margin-top:12px;
  border-radius:20px;
  border:2px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.96);
  color:#0f172a;
  padding:14px;
  font:600 14px/1.5 Arial, sans-serif;
  resize:vertical;
}
.pricingRow{ margin-top:12px; }
.pricingUnmatched{
  margin-top:12px;
  border-radius:18px;
  padding:12px;
  background:rgba(251,191,36,.13);
  border:2px solid rgba(251,191,36,.28);
  color:#fde68a;
  font-weight:800;
}
.pricingUnmatchedTitle{ font-size:13px; text-transform:uppercase; letter-spacing:.45px; margin-bottom:8px; }
.pricingUnmatchedLine{ font-size:12px; line-height:1.45; color:#fef3c7; }

.pricingDeckList,
.pricingSearchResults{
  min-width:0;
  width:100%;
  margin-top:12px;
  display:flex;
  flex-direction:column;
  gap:12px;
  max-height:560px;
  overflow:auto;
  padding-right:4px;
}
.pricingDeckEmpty,
.pricingSearchEmpty{
  margin-top:12px;
  border:2px dashed rgba(255,255,255,.18);
  border-radius:20px;
  min-height:280px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:18px;
  text-align:center;
  color:#cbd5e1;
  font-weight:800;
}
.pricingDeckRow,
.pricingSearchRow{
  min-width:0;
  width:100%;
  display:flex;
  align-items:flex-start;
  gap:12px;
  border-radius:20px;
  background:rgba(255,255,255,.97);
  color:#0f172a;
  padding:12px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  overflow:hidden;
}
.pricingDeckMain,
.pricingSearchMain{
  min-width:0;
  flex:1 1 auto;
}
.pricingDeckImg,
.pricingSearchThumb,
.pricingPreviewImg{
  width:76px;
  height:106px;
  object-fit:cover;
  border-radius:12px;
  border:2px solid rgba(15,23,42,.08);
  background:#e2e8f0;
}
.pricingDeckRow > *,
.pricingSearchRow > *{ min-width:0; }
.pricingDeckName,
.pricingSearchName{
  font-weight:1000;
  line-height:1.1;
  overflow-wrap:anywhere;
}
.pricingDeckMeta,
.pricingSearchMeta{ margin-top:6px; font-size:12px; color:#64748b; font-weight:800; }
.pricingDeckActions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:12px; }
.pricingQtyControls{ display:flex; align-items:center; gap:8px; }
.pricingQtyValue{ min-width:28px; text-align:center; font-weight:1000; font-size:16px; }
.pricingLineTotals{ flex:0 0 auto; margin-left:auto; text-align:right; align-self:flex-start; }
.pricingLineTotal{ font-size:18px; font-weight:1000; color:#0f9d58; }
.pricingEachPrice{ font-size:12px; color:#64748b; font-weight:800; margin-top:5px; }

.pricingSearchCard{ min-width:0; }
.pricingSearchField{ margin-top:10px; max-width:none; }
.pricingSearchArea{
  min-width:0;
  width:100%;
  margin-top:10px;
  display:grid;
  grid-template-columns:minmax(250px,340px) minmax(0,1fr);
  gap:14px;
  align-items:start;
}
.pricingHoverPreview{
  min-width:0;
  max-width:100%;
  overflow:hidden;
  position:sticky;
  top:0;
  border-radius:22px;
  padding:14px;
  background:rgba(255,255,255,.97);
  min-height:320px;
  box-shadow:0 10px 24px rgba(0,0,0,.16);
  color:#0f172a;
}
.pricingPreviewEmpty{
  min-height:292px;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  color:#64748b;
  font-weight:800;
  line-height:1.55;
}
.pricingPreviewImg{
  width:100%;
  height:auto;
  max-height:320px;
  aspect-ratio:63/88;
}
.pricingPreviewName{ margin-top:10px; font-size:18px; font-weight:1000; line-height:1.1; }
.pricingPreviewMeta{ margin-top:6px; color:#64748b; font-size:12px; font-weight:800; }
.pricingPreviewPrice{ margin-top:10px; font-size:22px; font-weight:1000; color:#0f9d58; }
.pricingPreviewLow{ margin-top:4px; color:#7c3aed; font-size:13px; font-weight:900; }
.pricingResultActions{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:10px; margin-top:10px; }
.pricingMarketBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:#ecfdf5;
  color:#0f9d58;
  font-weight:1000;
  font-size:13px;
}
.pricingSearchRow.isHovering{ outline:3px solid rgba(124,58,237,.22); transform:translateY(-1px); }

@media (max-width: 1450px){
  .pricingGrid{ grid-template-columns:1fr; }
  .pricingSearchArea{ grid-template-columns:1fr; }
  .pricingHoverPreview{ position:relative; }
}
@media (max-width: 1100px){
  .pricingHero{ grid-template-columns:1fr; }
}
@media (max-width: 900px){
  .pricingDeckRow,
  .pricingSearchRow{
    flex-wrap:wrap;
  }
  .pricingDeckImg,
  .pricingSearchThumb{
    width:64px;
    height:90px;
  }
  .pricingDeckMain,
  .pricingSearchMain{
    flex:1 1 calc(100% - 76px);
  }
  .pricingLineTotals{
    width:100%;
    margin-left:0;
    text-align:left;
  }
  .pricingResultActions{ flex-direction:column; align-items:flex-start; }
  .pricingSearchRow .smallbtn{ width:100%; }
}
@media (max-width: 760px){
  .pricingHeroStats{ grid-template-columns:1fr; }
}

.pricingDeckList > *,
.pricingSearchResults > *{
  flex:0 0 auto;
}
.pricingDeckImg,
.pricingSearchThumb{
  flex:0 0 76px;
  display:block;
}
.pricingSearchResults .pricingSearchRow{
  cursor:pointer;
}


/* Section 3 tuning: results keep a compact in-panel thumb, full preview floats on hover */
.pricingSearchArea{
  position:relative;
  grid-template-columns:minmax(0,1fr);
}
.pricingSearchResults{
  gap:10px;
  padding-right:10px;
}
.pricingSearchRow{
  position:relative;
  align-items:center;
}
.pricingSearchThumb{
  width:92px;
  height:58px;
  flex:0 0 92px;
  border-radius:14px;
  object-fit:contain;
  object-position:center center;
  background:#ffffff;
  padding:3px;
}
.pricingSearchMain{
  display:flex;
  flex-direction:column;
  justify-content:center;
}
.pricingHoverPreview{
  display:none;
  position:fixed;
  top:120px;
  left:120px;
  width:300px;
  min-width:300px;
  max-width:300px;
  box-sizing:border-box;
  z-index:1200;
  pointer-events:none;
  border:2px solid rgba(124,58,237,.18);
  box-shadow:0 22px 50px rgba(0,0,0,.28);
}
.pricingHoverPreview.isVisible{
  display:block;
}
.pricingPreviewImg{
  width:100%;
  height:auto;
  max-height:none;
  aspect-ratio:63/88;
  object-fit:contain;
  background:#fff;
  border-radius:16px;
}
@media (max-width: 900px){
  .pricingSearchThumb{
    width:88px;
    height:56px;
    flex-basis:88px;
  }
  .pricingSearchMain{
    flex:1 1 calc(100% - 100px);
  }
  .pricingHoverPreview{
    display:none !important;
  }
}


/* =====================================================
   Deck Consistency Lab
   ===================================================== */
.probHero{
  display:grid;
  grid-template-columns:minmax(0,1.35fr) minmax(300px,0.8fr);
  gap:18px;
  align-items:stretch;
  background: linear-gradient(145deg, rgba(17,30,50,0.95), rgba(27,46,78,0.88));
  border:1px solid rgba(115,194,255,0.18);
  border-radius:28px;
  padding:22px;
  box-shadow: 0 18px 42px rgba(2,6,23,0.30), inset 0 1px 0 rgba(255,255,255,0.04);
}
.probHeroTitle{font-size:32px;font-weight:1000;line-height:1.08;color:#eff7ff;max-width:720px;}
.probHeroText{max-width:760px;line-height:1.55;margin-top:10px;}
.probHeroActions{margin-top:18px;justify-content:flex-start;}
.probHeroStats{display:grid;grid-template-columns:repeat(1,minmax(0,1fr));gap:12px;}
.probStatCard{
  min-height:100px;padding:16px 18px;border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  border:1px solid rgba(255,255,255,0.10);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05), 0 10px 24px rgba(2,6,23,0.18);
  display:flex;flex-direction:column;justify-content:center;
}
.probStatLabel{font-size:12px;font-weight:900;color:#b7d5ff;text-transform:uppercase;letter-spacing:.4px;}
.probStatValue{font-size:30px;font-weight:1000;color:#f8fbff;margin-top:6px;}
.probLayout{display:grid;grid-template-columns:minmax(310px,0.92fr) minmax(0,1.45fr);gap:18px;margin-top:18px;align-items:start;}
.probLeftRail,.probMainStage,.probSupportColumn{display:flex;flex-direction:column;gap:18px;}
.probCard{
  background:linear-gradient(180deg, rgba(20,32,53,0.98), rgba(24,39,66,0.96));
  border:1px solid rgba(143,197,255,0.12);
  border-radius:26px;
  padding:18px;
  box-shadow:0 16px 34px rgba(2,6,23,0.26), inset 0 1px 0 rgba(255,255,255,0.04);
}
.probSectionTitle{font-size:18px;font-weight:1000;color:#f4fbff;margin-bottom:6px;}
.probInlineField{max-width:none;width:100%;}
.probInlineField input,.probInlineField select{
  width:100%;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,0.12);
  background:rgba(248,251,255,0.97);color:#0f172a;font-size:15px;font-weight:700;
}
.probDeckSummary{margin-top:12px;}
.probSummaryTop{display:flex;justify-content:space-between;gap:12px;align-items:center;flex-wrap:wrap;}
.probLoadedDeckName{font-size:20px;font-weight:1000;color:#fff;}
.probLocalCopyBadge{padding:7px 12px;border-radius:999px;background:rgba(102,217,255,0.12);border:1px solid rgba(102,217,255,0.18);font-size:12px;font-weight:900;color:#8be6ff;text-transform:uppercase;letter-spacing:.4px;}
.probSummaryGrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:14px;}
.probMiniStat{padding:12px 14px;border-radius:18px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);display:flex;align-items:center;justify-content:space-between;gap:12px;}
.probMiniStat span{font-size:12px;font-weight:800;color:#b7d5ff;text-transform:uppercase;}
.probMiniStat strong{font-size:16px;color:#f8fbff;}
.probDeckRoster{margin-top:14px;display:flex;flex-direction:column;gap:10px;max-height:720px;overflow:auto;padding-right:4px;}
.probDeckRow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:18px;background:rgba(255,255,255,0.045);border:1px solid rgba(255,255,255,0.09);min-width:0;}
.probDeckThumbWrap{flex:0 0 52px;display:flex;align-items:center;justify-content:center;}
.probDeckThumb{width:52px;height:52px;border-radius:14px;object-fit:cover;border:1px solid rgba(255,255,255,0.15);background:#e8effa;}
.probNoImg{display:flex;align-items:center;justify-content:center;color:#10233f;font-size:10px;font-weight:900;}
.probDeckInfo{min-width:0;flex:1;}
.probDeckCardName{font-size:15px;font-weight:900;color:#fff;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.probDeckMeta{margin-top:4px;font-size:12px;color:#acc8ea;font-weight:700;}
.probDeckRowActions{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.probDeckQty{min-width:26px;text-align:center;font-size:15px;font-weight:1000;color:#fff;}
.probSegmentWrap{margin-top:16px;}
.probSegmentLabel{font-size:12px;font-weight:900;color:#b7d5ff;text-transform:uppercase;letter-spacing:.45px;margin-bottom:8px;}
.probSegmentRow{display:flex;gap:10px;flex-wrap:wrap;}
.probSegmentBtn{padding:12px 14px;border-radius:16px;border:1px solid rgba(255,255,255,0.10);background:rgba(255,255,255,0.05);color:#e7f4ff;font-weight:900;cursor:pointer;transition:transform .12s ease, background .12s ease, box-shadow .12s ease;}
.probSegmentBtn:hover{transform:translateY(-1px);background:rgba(255,255,255,0.09);}
.probSegmentBtn.isSelected{background:linear-gradient(180deg, rgba(102,217,255,0.18), rgba(72,147,255,0.16));border-color:rgba(102,217,255,0.34);box-shadow:0 10px 20px rgba(31,120,255,0.18), inset 0 1px 0 rgba(255,255,255,0.08);}
.probQueryPanels{margin-top:18px;}
.probQueryPanel{padding:16px;border-radius:22px;background:rgba(255,255,255,0.04);border:1px solid rgba(255,255,255,0.08);}
.probQueryGrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;align-items:end;}
.probComboGrid{grid-template-columns:minmax(0,1fr) 120px minmax(0,1fr);align-items:center;}
.probComboJoiner{display:flex;align-items:center;justify-content:center;height:100%;font-size:18px;font-weight:1000;letter-spacing:.6px;color:#9be9ff;text-transform:uppercase;}
.probPreviewStrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:14px;min-height:68px;}
.probPreviewLabel{font-size:12px;font-weight:900;color:#b7d5ff;text-transform:uppercase;letter-spacing:.4px;margin:10px 0 6px;}
.probComboPreviewWrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:10px;}
.probMiniCardChip{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:16px;background:rgba(255,255,255,0.06);border:1px solid rgba(255,255,255,0.08);max-width:100%;}
.probMiniCardChip img,.probMiniChipFallback{width:44px;height:44px;border-radius:12px;object-fit:cover;background:#dfe7f3;display:flex;align-items:center;justify-content:center;color:#10233f;font-weight:1000;}
.probMiniCardMeta{min-width:0;display:flex;flex-direction:column;gap:2px;}
.probMiniCardMeta span{font-size:13px;font-weight:900;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.probMiniCardMeta strong{font-size:12px;color:#9fd8ff;}
.probPreviewEmpty,.probEmpty{display:flex;align-items:center;justify-content:center;padding:18px 14px;border-radius:18px;background:rgba(255,255,255,0.04);border:1px dashed rgba(255,255,255,0.12);color:#b7cce7;font-weight:700;text-align:center;min-height:72px;}
.probResultsGrid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(290px,0.85fr);gap:18px;margin-top:18px;align-items:start;}
.probResultTheater{min-height:100%;}
.probResultHeader{display:flex;justify-content:space-between;align-items:flex-start;gap:14px;flex-wrap:wrap;}
.probSeenChip{padding:8px 12px;border-radius:999px;background:rgba(100,221,255,0.10);border:1px solid rgba(100,221,255,0.18);font-size:12px;font-weight:900;color:#8ee8ff;text-transform:uppercase;letter-spacing:.35px;}
.probGauge{margin:20px auto 16px;width:min(420px,100%);aspect-ratio:1;border-radius:50%;padding:20px;display:flex;align-items:center;justify-content:center;box-shadow:0 18px 34px rgba(2,6,23,0.24), inset 0 0 0 12px rgba(255,255,255,0.04);}
.probGaugeInner{width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 30% 20%, rgba(255,255,255,0.08), rgba(9,15,28,0.95));display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:24px;}
.probPercent{font-size:58px;font-weight:1000;line-height:1;color:#fff;text-shadow:0 4px 24px rgba(102,217,255,0.12);}
.probLabel{margin-top:10px;font-size:18px;font-weight:1000;color:#8ee8ff;}
.probPlainLanguage{font-size:20px;font-weight:900;color:#f7fbff;text-align:center;max-width:540px;margin:0 auto;line-height:1.25;}
.probResultSummary{margin-top:10px;text-align:center;color:#b6cde7;font-size:14px;font-weight:700;line-height:1.5;}
.probBreakdown{display:flex;flex-direction:column;gap:10px;}
.probBreakRow{display:flex;justify-content:space-between;gap:12px;align-items:center;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.08);}
.probBreakRow span{font-size:13px;font-weight:800;color:#b5d0ea;}
.probBreakRow strong{font-size:14px;color:#fff;}
.probDeltaPanel,.probInsightPanel{min-height:132px;display:flex;flex-direction:column;justify-content:center;}
.probDeltaHeadline{font-size:34px;font-weight:1000;color:#f8fbff;}
.probDeltaHeadline.isPositive{color:#7af0ba;}
.probDeltaHeadline.isNegative{color:#ff9ea8;}
.probDeltaMeta{margin-top:6px;color:#c1d4eb;font-weight:800;}
.probInsightMain{font-size:15px;line-height:1.6;color:#f3f9ff;font-weight:800;}
.probModalGroupBuilder{display:flex;flex-direction:column;}
.probGroupCardList{display:flex;flex-direction:column;gap:10px;max-height:420px;overflow:auto;margin-top:12px;padding-right:4px;}
.probGroupCardRow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(13,21,37,0.72);border:1px solid rgba(255,255,255,0.08);}
.probGroupCardRow input{width:auto;}
.probGroupCardRow img,.probGroupCardFallback{width:46px;height:46px;border-radius:12px;object-fit:cover;background:#dfe7f3;display:flex;align-items:center;justify-content:center;color:#10233f;font-weight:1000;}
.probGroupCardMeta{min-width:0;display:flex;flex-direction:column;gap:3px;}
.probGroupCardMeta b{font-size:14px;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:340px;}
.probGroupCardMeta span{font-size:12px;color:#b6cce7;font-weight:700;}

@media (max-width: 1200px){
  .probLayout,.probResultsGrid{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .probHero{grid-template-columns:1fr;}
  .probQueryGrid{grid-template-columns:1fr;}
  .probComboGrid,.probComboPreviewWrap{grid-template-columns:1fr;}
  .probPercent{font-size:48px;}
}


/* === QA pass: signup-first home and cleaner setup hierarchy === */
.signupGate{
  min-height:100vh;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:32px 18px;
}
.signupShell{
  width:min(920px, 100%);
  padding:42px 36px;
  border-radius:28px;
  border:1px solid rgba(255,255,255,0.16);
  background:
    radial-gradient(700px 320px at 18% 0%, rgba(42,117,187,0.22), transparent),
    radial-gradient(580px 300px at 86% 12%, rgba(255,203,5,0.14), transparent),
    linear-gradient(180deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
  box-shadow: 0 28px 70px rgba(2, 6, 23, 0.42);
  text-align:center;
}
.signupBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 14px;
  margin-bottom:18px;
  border-radius:999px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.14);
  color:#dbeafe;
  font-weight:1000;
  letter-spacing:.12em;
  font-size:12px;
}
.signupTitle{
  margin:0;
  font-size:clamp(36px, 6vw, 64px);
  line-height:1.02;
  color:#f8fbff;
  text-shadow:0 8px 28px rgba(0,0,0,0.28);
}
.signupCopy{
  width:min(700px, 100%);
  margin:18px auto 0;
  color:#cbd5e1;
  font-size:18px;
  line-height:1.7;
  font-weight:700;
}
.signupBtn{
  margin-top:28px;
  border:1px solid rgba(255,255,255,0.14);
  background:linear-gradient(135deg, rgba(22,163,74,0.88), rgba(21,128,61,0.92));
  color:#fff;
  border-radius:18px;
  padding:18px 34px;
  font-size:20px;
  font-weight:1000;
  cursor:pointer;
  box-shadow:0 18px 44px rgba(22,163,74,0.28);
}
.signupBtn:hover{ transform:translateY(-1px); filter:brightness(1.03); }
.homeWelcomePanel{ margin-bottom:16px; }
.homeHeroCopy{
  max-width:820px;
  margin-bottom:16px;
  color:#dbeafe;
  font-size:16px;
  line-height:1.7;
  font-weight:800;
}
.homeSection{
  margin-top:16px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,0.08);
}
.homeSectionSecondary{ opacity:0.98; }
.homeSectionTitle{
  margin-bottom:12px;
  color:#f8fbff;
  font-weight:1000;
  font-size:15px;
  text-transform:uppercase;
  letter-spacing:.08em;
}
#roomPanel{ margin-top:16px; }
.roomActionRow{ margin-top:14px; }
.roomPrimaryCta{ min-width:220px; }
.roomModeHint{ margin-top:8px; }
.roomReadyNote{
  margin-top:10px;
  color:#dbeafe;
  font-weight:800;
}
.field.isLocked{ opacity:0.58; }
.field.isLocked select, .field.isLocked input{ cursor:not-allowed; }
@media (max-width: 760px){
  .signupShell{ padding:30px 20px; }
  .signupCopy{ font-size:16px; }
}


/* Final equip placement: always bottom-right */
#game .equipStack,
.equipStack {
  left: auto !important;
  right: 8px !important;
  bottom: -10px !important;
}
#game .battleLaneBenchSlot .equipStack {
  left: auto !important;
  right: 4px !important;
  bottom: -6px !important;
}


/* enforced modal stack for starting team selection */
.modalOverlay{ z-index: 99999 !important; }
.modal{ position: relative; z-index: 100000 !important; }

.playZoneBadge{position:absolute;right:6px;bottom:6px;}

/* === v38 tighten lower utility row to hand spacing === */
#game .playerLowerRow,
#game .opponentLowerRow {
  margin-bottom: 0 !important;
  row-gap: 0 !important;
}

#game .handTrayTitle,
#game .opponentHandTitle {
  margin-top: 0 !important;
  margin-bottom: 2px !important;
  min-height: 24px !important;
}

#game .handTray,
#game .opponentHandTray {
  margin-top: 0 !important;
  padding-top: 2px !important;
}

/* === v39 aesthetic tightening: utility row closer to hand + centered empty play slot === */
#game .playerLowerRow,
#game .opponentLowerRow {
  margin-top: 0 !important;
  margin-bottom: -45px !important;
  row-gap: 0 !important;
}

#game .handTrayTitle,
#game .opponentHandTitle {
  margin-top: 46px !important;
  margin-bottom: 0 !important;
  min-height: 22px !important;
}

#game .handTray,
#game .opponentHandTray {
  margin-top: 0 !important;
  padding-top: 0 !important;
}

#game #playerPlayZone,
#game #aiPlayZone {
  justify-content: center !important;
  align-items: center !important;
}

#game #playerPlayZone .slotEmpty,
#game #aiPlayZone .slotEmpty {
  margin: auto !important;
  align-self: center !important;
  justify-self: center !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
}


/* === v51 trainer play spot image-fit fix ===
   Trainer/support/item images may be full-card portraits or horizontal art crops.
   Never crop them in the Trainer Play Spot or card viewer. */
#game #playerPlayZone .trainerPlayCard,
#game #aiPlayZone .trainerPlayCard {
  width: min(100%, 104px) !important;
  height: calc(100% - 8px) !important;
  min-width: 0 !important;
  min-height: 0 !important;
  max-width: 104px !important;
  max-height: 62px !important;
  aspect-ratio: auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  overflow: hidden !important;
  padding: 2px !important;
  box-sizing: border-box !important;
  background: rgba(15, 23, 42, 0.72) !important;
}

#game #playerPlayZone .trainerPlayCard img,
#game #aiPlayZone .trainerPlayCard img {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  display: block !important;
}

#game #playerPlayZone .trainerPlayCard .energyBadge,
#game #aiPlayZone .trainerPlayCard .energyBadge {
  right: 4px !important;
  bottom: 4px !important;
  transform: none !important;
}

.playCardViewerCard img,
#game .playCardViewerCard img,
.zoomCard img,
#game .zoomCard img {
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(15, 23, 42, 0.45) !important;
}

/* Evolution stack visuals */
.evolutionStackWrap {
  position: relative;
  display: inline-block;
  width: 125%;
  height: 68%;
}
.evolutionTopCard {
  position: relative;
  z-index: 5;
}
.evolutionUnderCard {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  overflow: hidden;
  opacity: 0.9;
  filter: saturate(0.95) brightness(0.92);
  pointer-events: none;
}
.evolutionUnderCard img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.evolutionUnderCard0 {
  transform: translate(7px, 8px) scale(0.96);
  z-index: 2;
}
.evolutionUnderCard1 {
  transform: translate(14px, 16px) scale(0.92);
  z-index: 1;
}
.stageBadge {
  position: absolute;
  top: 5px;
  left: 5px;
  z-index: 8;
  padding: 2px 6px;
  border-radius: 999px;
  background: rgba(15, 23, 42, 0.86);
  color: white;
  font-size: 9px;
  font-weight: 1000;
  letter-spacing: 0.02em;
  line-height: 1.05;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(0,0,0,0.28);
}

/* ======================================================
   Triple-A deck builder performance + visibility upgrade
   ====================================================== */
.deckBuilderShell{
  display:grid;
  grid-template-columns:minmax(0, 1fr) clamp(300px, 32vw, 380px);
  gap:18px;
  align-items:start;
}

.deckBuilderMain{
  min-width:0;
  overflow:hidden;
  padding-right:2px;
}

.deckBuilderToolbar{
  display:grid;
  grid-template-columns:minmax(180px, 1fr) minmax(220px, 1.25fr);
  gap:12px;
  align-items:end;
  margin-bottom:10px;
}

.deckBuilderField{
  display:flex;
  flex-direction:column;
  gap:6px;
  font-weight:900;
  color:var(--muted);
  min-width:0;
}

.deckBuilderField input,
.deckBuilderField select{
  width:100%;
}

.deckBuilderMetric{
  min-width:0;
  padding:10px 12px;
  border:1px solid var(--stroke);
  border-radius:14px;
  background:rgba(255,255,255,.045);
}

.deckBuilderTotal{
  font-weight:950;
  font-size:24px;
  line-height:1;
}

.deckBuilderQuickRow{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  margin:8px 0 8px;
}

.deckBuilderResultsGrid{
  grid-template-columns:repeat(auto-fill, minmax(145px, 1fr));
  align-items:stretch;
}

.deckBuilderResultCard{
  display:flex;
  flex-direction:column;
  align-items:center;
  min-height:270px;
}

.deckBuilderResultCard .viewerCard img,
.deckCurrentThumb img{
  loading:lazy;
}

.deckBuilderCardMeta{
  text-align:center;
  margin-top:8px;
  min-height:58px;
  width:100%;
}

.deckBuilderCardName{
  font-weight:950;
  line-height:1.15;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}

.deckBuilderStepper{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:center;
  margin-top:auto;
}

.deckBuilderLoadMoreWrap{
  display:flex;
  justify-content:center;
  margin-top:14px;
}

.deckBuilderSidebar{
  position:sticky;
  top:0;
  align-self:start;
  max-height:calc(58vh - 8px);
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius:18px;
  background:linear-gradient(180deg, rgba(255,255,255,.085), rgba(255,255,255,.035));
  padding:14px;
  box-shadow:0 16px 32px rgba(0,0,0,.22);
  z-index:2;
}

.deckSidebarHeader{
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:10px;
  padding-bottom:10px;
  margin-bottom:10px;
  border-bottom:1px solid var(--stroke);
}

.deckSidebarTitle{
  font-size:18px;
  font-weight:950;
}

.deckCurrentList{
  display:flex;
  flex-direction:column;
  gap:8px;
}

.deckCurrentItem{
  display:grid;
  grid-template-columns:44px minmax(0, 1fr) auto auto auto;
  gap:8px;
  align-items:center;
  border:1px solid rgba(255,255,255,.10);
  border-radius:14px;
  background:rgba(0,0,0,.12);
  padding:8px;
}

.deckCurrentThumb{
  width:42px;
  height:58px;
  border-radius:8px;
  overflow:hidden;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.deckCurrentThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.deckCurrentMeta{
  min-width:0;
}

.deckCurrentName{
  font-weight:950;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.deckCurrentQty{
  font-weight:950;
  color:var(--text);
}

.deckEmptyHint{
  padding:12px;
  border:1px dashed var(--stroke);
  border-radius:14px;
}


.deckBuilderNameField{ grid-column:1 / 2; }
.deckBuilderToolbar .deckBuilderField:not(.deckBuilderNameField):not(.deckBuilderTypeField){ grid-column:2 / 3; }
.deckBuilderTypeField{ grid-column:1 / 2; }
.deckBuilderMetric{ grid-column:2 / 3; }

.deckBuilderShell .smallbtn{ white-space:nowrap; }
.deckBuilderSidebar .subhint{ line-height:1.25; }
.deckCurrentList{ padding-bottom:4px; }
.deckCurrentItem .smallbtn{ min-width:36px; padding:8px 10px; }

@media (max-width: 1050px){
  .deckBuilderShell{
    grid-template-columns:1fr;
  }
  .deckBuilderSidebar{
    position:relative;
    max-height:260px;
  }
  .deckBuilderToolbar{
    grid-template-columns:1fr 1fr;
  }
  .deckBuilderNameField,
  .deckBuilderToolbar .deckBuilderField:not(.deckBuilderNameField):not(.deckBuilderTypeField),
  .deckBuilderTypeField,
  .deckBuilderMetric{
    grid-column:auto;
  }
}

@media (max-width: 720px){
  .deckBuilderToolbar{
    grid-template-columns:1fr;
  }
  .deckBuilderNameField,
  .deckBuilderToolbar .deckBuilderField:not(.deckBuilderNameField):not(.deckBuilderTypeField),
  .deckBuilderTypeField,
  .deckBuilderMetric{
    grid-column:auto;
  }
  .deckCurrentItem{
    grid-template-columns:38px minmax(0, 1fr) auto;
  }
  .deckCurrentItem .smallbtn{
    padding:6px 8px;
  }
}


/* Typed Pocket-style Energy Zone */
.energySetupGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start;}
.energyTypeChoices{display:flex;flex-wrap:wrap;gap:7px;margin-top:6px;}
.energyTypeChoice{display:inline-flex;align-items:center;gap:5px;padding:6px 8px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:12px;font-weight:900;cursor:pointer;}
.energyTypeChoice input{margin:0;}
.energySymbol{--energy-color:#64748b;display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:999px;background:var(--energy-color);color:white;border:2px solid rgba(255,255,255,.75);box-shadow:0 4px 10px rgba(0,0,0,.28);font-size:14px;font-weight:1000;line-height:1;vertical-align:middle;}
.energySymbol--mini{width:18px;height:18px;font-size:10px;border-width:1px;box-shadow:0 2px 5px rgba(0,0,0,.25);}
.energySymbol--large{width:54px;height:54px;font-size:31px;border-width:3px;}
.energySymbolLabel{margin-left:4px;font-size:12px;font-weight:1000;}
.sideEnergyStatusHost{margin-left:auto;min-width:156px;}
.sideEnergyStatus{padding:6px 8px;border-radius:14px;background:rgba(15,23,42,.72);border:1px solid rgba(255,255,255,.16);box-shadow:0 6px 18px rgba(0,0,0,.22);font-size:11px;font-weight:900;line-height:1.2;}
.sideEnergyStatus--current{border-color:rgba(34,197,94,.65);}
.sideEnergyTitle{font-size:11px;color:#e2e8f0;margin-bottom:4px;}
.sideEnergyRow{display:flex;align-items:center;gap:5px;white-space:nowrap;color:#f8fafc;}
.energyZoneCardFace{height:100%;min-height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7px;padding:8px;background:linear-gradient(145deg,rgba(255,255,255,.16),rgba(15,23,42,.15));}
.energyZoneCardName{font-size:11px;font-weight:1000;color:#fff;text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.5);}
.attachedEnergyTypes{position:absolute;left:4px;bottom:4px;display:flex;gap:2px;align-items:center;z-index:4;}
.energyMore{display:inline-flex;align-items:center;justify-content:center;min-width:18px;height:18px;padding:0 3px;border-radius:999px;background:#0f172a;color:#fff;border:1px solid rgba(255,255,255,.6);font-size:10px;font-weight:1000;}
@media (max-width:900px){.energySetupGrid{grid-template-columns:1fr}.sideEnergyStatusHost{min-width:132px}.sideEnergyStatus{font-size:10px}}

/* v94: image-backed, horizontal Pocket Energy indicators */
.energySymbol{overflow:hidden;background:transparent;border:0;box-shadow:none;padding:0;flex:0 0 auto;}
.energySymbol img{width:100%;height:100%;object-fit:contain;display:block;filter:drop-shadow(0 2px 4px rgba(0,0,0,.35));}
.energyTypeChoice .energySymbol{width:28px;height:28px;}
.sideEnergyStatusHost{min-width:260px;max-width:440px;}
.sideEnergyStatus{display:flex;align-items:center;gap:10px;padding:6px 10px;white-space:nowrap;}
.sideEnergyTitle{margin:0;min-width:max-content;}
.sideEnergyInline{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;}
.sideEnergyRow{gap:4px;}
.energyZoneCardFace{min-width:120px;min-height:58px;flex-direction:row;gap:8px;}
.energyZoneCardFace .energySymbol--large{width:46px;height:46px;}
.energyZoneCardName{font-size:12px;white-space:nowrap;}
.attachedEnergyTypes{left:4px;right:4px;bottom:4px;display:flex;flex-wrap:wrap;gap:2px;max-width:calc(100% - 8px);}
.attachedEnergyTypes .energySymbol--mini{width:18px;height:18px;}
@media (max-width:900px){.sideEnergyStatusHost{min-width:200px}.sideEnergyStatus{gap:6px}.sideEnergyInline{gap:6px}.sideEnergyTitle{font-size:10px}}
.deckBuilderZoomCard{border:0;background:transparent;padding:0;cursor:zoom-in;}
.deckBuilderZoomCard:hover{transform:translateY(-2px) scale(1.02);filter:brightness(1.08);}
.cardFullscreenOverlay{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;padding:24px;}
.cardFullscreenOverlay.hidden{display:none;}
.cardFullscreenBackdrop{position:absolute;inset:0;background:rgba(0,0,0,.82);backdrop-filter:blur(8px);}
.cardFullscreenPanel{position:relative;z-index:1;max-width:min(92vw,720px);max-height:94vh;display:flex;flex-direction:column;align-items:center;gap:10px;}
.cardFullscreenPanel img{max-width:100%;max-height:86vh;object-fit:contain;border-radius:18px;box-shadow:0 30px 80px rgba(0,0,0,.7);}
.cardFullscreenName{font-weight:1000;color:#fff;text-shadow:0 2px 8px rgba(0,0,0,.7);}
.cardFullscreenClose{position:absolute;top:-18px;right:-18px;width:42px;height:42px;border-radius:999px;border:1px solid rgba(255,255,255,.3);background:#0f172a;color:#fff;font-size:28px;font-weight:1000;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.5);}

/* v95: attached energy quantities + wider horizontal zone polish */
.sideEnergyStatusHost{min-width:320px;max-width:560px;flex:1 1 320px;}
.sideEnergyStatus{width:100%;justify-content:flex-start;min-height:42px;}
.sideEnergyInline{flex:1;justify-content:flex-start;}
.attachedEnergyTypes{align-items:center;justify-content:flex-start;}
.attachedEnergyChip{display:inline-flex;align-items:center;gap:1px;padding:1px 4px 1px 1px;border-radius:999px;background:rgba(15,23,42,.78);border:1px solid rgba(255,255,255,.55);box-shadow:0 2px 7px rgba(0,0,0,.35);}
.attachedEnergyChip .energySymbol--mini{width:16px;height:16px;}
.attachedEnergyCount{font-size:10px;font-weight:1000;color:#fff;line-height:1;min-width:8px;text-align:center;}
.attachedEnergyViewerGrid{display:flex;flex-direction:column;gap:10px;margin-top:12px;}
.attachedEnergyViewerRow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);}
.attachedEnergyViewerName{font-weight:1000;color:#fff;}
.emptyChoicePanel{padding:14px;border-radius:16px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);}
@media (max-width:900px){.sideEnergyStatusHost{min-width:220px;max-width:100%;flex-basis:100%;}.sideEnergyInline{flex-wrap:wrap;}}

/* v96: use the real Pokémon card back everywhere hidden cards/decks are rendered. */
.card-back{
  background: url("assets/back.png") center center / cover no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
  letter-spacing: 0 !important;
}
.zoomCard .card-back{
  background: url("assets/back.png") center center / cover no-repeat !important;
  color: transparent !important;
  font-size: 0 !important;
  text-shadow: none !important;
}
.energyDiscardChoice{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap:12px;
  width:100%;
  padding:10px 12px;
}
.energyDiscardChoice b{margin-left:auto;}


/* v98 sandbox polish: keep damage away from attached-energy chips. */
#game .damageBadge,
.zoomCard .damageBadge,
.damageBadge {
  left: 8px !important;
  right: auto !important;
  top: 50% !important;
  bottom: auto !important;
  transform: translateY(-50%) scale(0.96) !important;
  z-index: 8;
}
#game .attachedEnergyTypes,
.attachedEnergyTypes {
  top: 40px;
  right: 6px;
}
.energyAttachChoiceGrid {
  display:grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap:10px;
}
.energyAttachAnyChoice {
  min-height:54px;
  justify-content:center;
}
#game .attachedEnergyTypes,
.attachedEnergyTypes {
  left: auto !important;
  bottom: auto !important;
  top: 40px !important;
  right: 6px !important;
  justify-content: flex-end !important;
  max-width: calc(100% - 14px) !important;
  z-index: 7;
}

/* ======================================================
   Deck Consistency Lab v2 — exact next-card calculator
   Isolated styles; does not affect battle board layout.
   ====================================================== */
.probSimpleHero{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:18px;
  align-items:center;
  padding:22px;
  border-radius:28px;
  background:radial-gradient(circle at top left,rgba(102,217,255,.22),rgba(152,105,255,.12) 42%,rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 22px 70px rgba(0,0,0,.28);
}
.probSimpleTitle{font-size:30px;font-weight:1000;line-height:1.08;color:#eff7ff;}
.probSimpleText{max-width:860px;line-height:1.55;margin-top:10px;}
.probSimpleStats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:16px;}
.probSimpleStats .probStatValue{font-size:22px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.probSimpleLayout{display:grid;grid-template-columns:minmax(300px,.95fr) minmax(360px,1.1fr) minmax(310px,.9fr);gap:18px;margin-top:18px;align-items:start;}
.probSimpleColumn{display:flex;flex-direction:column;gap:16px;min-width:0;}
.probDrawField{max-width:240px;}
.probKnownGrid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px;}
.probKnownTitle{font-weight:900;color:#eaf7ff;margin-bottom:8px;}
.probKnownList{display:flex;flex-direction:column;gap:8px;min-height:54px;}
.probKnownRow{display:grid;grid-template-columns:auto 36px minmax(0,1fr) auto auto auto;align-items:center;gap:8px;padding:8px;border-radius:16px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.09);}
.probKnownRow img,.probKnownFallback{width:36px;height:50px;border-radius:8px;object-fit:cover;background:rgba(255,255,255,.09);display:grid;place-items:center;font-weight:900;color:#9fb9d9;}
.probKnownIndex{width:24px;height:24px;border-radius:999px;background:rgba(102,217,255,.18);display:grid;place-items:center;font-weight:900;color:#dff7ff;font-size:12px;}
.probKnownName{font-weight:850;color:#f2f7ff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.probConditionList{display:flex;flex-direction:column;gap:12px;margin-top:12px;}
.probConditionCard{padding:14px;border-radius:22px;background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.10);box-shadow:0 10px 30px rgba(0,0,0,.16);}
.probConditionHeader{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;margin-bottom:10px;}
.probJoinRow{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:8px 0;color:#c9d8ee;font-weight:800;font-size:13px;}
.probToggle{border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#dcecff;border-radius:999px;padding:7px 10px;font-weight:950;cursor:pointer;}
.probToggle.isSelected{background:linear-gradient(135deg,#66d9ff,#9b7bff);color:#06111f;border-color:transparent;}
.probTargetAddRow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:8px;align-items:center;margin-top:10px;}
.probTargetAddRow select{width:100%;}
.probTargetChips{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px;}
.probTargetChip{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:999px;background:rgba(102,217,255,.12);border:1px solid rgba(102,217,255,.24);color:#e9f8ff;font-weight:850;}
.probTargetChip button{border:0;background:rgba(255,255,255,.16);color:#fff;width:22px;height:22px;border-radius:999px;cursor:pointer;font-weight:1000;}
.probConditionPlain{margin-top:10px;padding:9px 10px;border-radius:14px;background:rgba(0,0,0,.17);color:#d7e6fb;font-weight:750;line-height:1.35;}
.probDeckRowActions .smallbtn[disabled],.probKnownRow .smallbtn[disabled]{opacity:.38;cursor:not-allowed;}
.probResultTheater{position:sticky;top:12px;}
@media (max-width: 1250px){.probSimpleLayout{grid-template-columns:1fr 1fr}.probSimpleColumn:last-child{grid-column:1 / -1}.probResultTheater{position:relative;top:auto;}}
@media (max-width: 860px){.probSimpleHero,.probSimpleStats,.probSimpleLayout,.probKnownGrid{grid-template-columns:1fr}.probHeroActions{justify-content:flex-start}.probTargetAddRow{grid-template-columns:1fr}.probKnownRow{grid-template-columns:auto 36px minmax(0,1fr);}.probKnownRow button{grid-column:auto;}}

/* ======================================================
   Deck Consistency Lab v3 visual polish only
   Minimalist, TCG-online style. Functionality unchanged.
   ====================================================== */
#setupProbabilityPanel{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% -8%, rgba(85,214,255,.18), transparent 36%),
    radial-gradient(circle at 94% 10%, rgba(168,85,247,.16), transparent 34%),
    linear-gradient(180deg, rgba(9,16,31,.98), rgba(14,25,46,.98));
  border-color:rgba(126,196,255,.16);
}
#setupProbabilityPanel::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 50% 0%, black, transparent 76%);
  opacity:.45;
}
#setupProbabilityPanel > *{position:relative;z-index:1;}
#setupProbabilityPanel .panelTitle{
  font-size:clamp(28px,3vw,44px);
  letter-spacing:-.035em;
  line-height:.95;
  margin-bottom:16px;
  text-shadow:0 0 34px rgba(102,217,255,.18);
}

.probSimpleHero{
  grid-template-columns:minmax(0,1fr);
  gap:14px;
  padding:20px;
  border-radius:30px;
  background:
    linear-gradient(135deg, rgba(67,147,255,.16), rgba(126,87,255,.12) 48%, rgba(20,184,166,.10)),
    rgba(7,13,27,.44);
  border:1px solid rgba(135,206,255,.18);
  box-shadow:0 26px 80px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(10px);
}
.probSimpleTitle{font-size:clamp(22px,2.3vw,34px);letter-spacing:-.035em;}
.probSimpleText{max-width:980px;color:#cfe0f7;}
.probHeroActions{margin-top:2px;gap:8px;}
#setupProbabilityPanel .bigbtn,
#setupProbabilityPanel .smallbtn,
#setupProbabilityPanel .probToggle{
  min-height:0;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 24px rgba(0,0,0,.18);
  transition:transform .15s ease, filter .15s ease, border-color .15s ease, background .15s ease;
}
#setupProbabilityPanel .bigbtn:hover,
#setupProbabilityPanel .smallbtn:hover,
#setupProbabilityPanel .probToggle:hover{transform:translateY(-1px);filter:brightness(1.08);}
#setupProbabilityPanel .bigbtn{padding:10px 14px;font-size:13px;letter-spacing:.01em;}
#setupProbabilityPanel .smallbtn{width:34px;height:34px;padding:0;display:inline-grid;place-items:center;font-size:18px;font-weight:1000;line-height:1;}
#setupProbabilityPanel .smallbtn.good{background:linear-gradient(135deg, rgba(52,211,153,.92), rgba(20,184,166,.78));}
#setupProbabilityPanel .smallbtn.purple{background:linear-gradient(135deg, rgba(139,92,246,.94), rgba(85,123,255,.76));}
#setupProbabilityPanel .smallbtn.danger{background:linear-gradient(135deg, rgba(244,63,94,.85), rgba(127,29,29,.74));}

.probSimpleStats{
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:10px;
}
.probStatCard{
  min-height:76px;
  padding:13px 15px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.028));
  border-color:rgba(151,202,255,.13);
}
.probStatLabel{font-size:10px;color:#9fb9dd;letter-spacing:.08em;}
.probSimpleStats .probStatValue{font-size:clamp(17px,1.4vw,23px);letter-spacing:-.025em;}

.probSimpleLayout{
  grid-template-columns:minmax(330px,.92fr) minmax(390px,1.18fr) minmax(300px,.82fr);
  gap:16px;
}
.probCard{
  border-radius:28px;
  padding:16px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.072), rgba(255,255,255,.032)),
    rgba(13,24,44,.74);
  border:1px solid rgba(143,197,255,.13);
  box-shadow:0 18px 44px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.06);
  backdrop-filter:blur(10px);
}
.probSectionTitle{font-size:16px;letter-spacing:-.02em;}
#setupProbabilityPanel .subhint{color:#b8c9e4;line-height:1.42;}
.probInlineField{gap:7px;color:#b8c9e4;font-size:11px;text-transform:uppercase;letter-spacing:.075em;}
.probInlineField input,.probInlineField select,
.probTargetAddRow select{
  min-height:42px;
  border-radius:16px;
  border:1px solid rgba(148,197,255,.22);
  background:rgba(236,244,255,.94);
  box-shadow:0 10px 18px rgba(0,0,0,.14);
}
.probDeckEditorCard{padding-bottom:10px;}
.probDeckRoster{
  gap:8px;
  max-height:540px;
  padding:5px 6px 5px 1px;
  scrollbar-width:thin;
}
.probDeckRow{
  display:grid;
  grid-template-columns:54px minmax(0,1fr) auto;
  gap:10px;
  align-items:center;
  min-height:86px;
  padding:9px;
  border-radius:22px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.025)),
    rgba(4,10,22,.32);
  border-color:rgba(142,192,255,.12);
  box-shadow:0 10px 24px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.05);
}
.probDeckRow:hover{
  transform:translateY(-1px);
  background:
    linear-gradient(135deg, rgba(102,217,255,.105), rgba(153,117,255,.055)),
    rgba(4,10,22,.34);
  border-color:rgba(102,217,255,.25);
}
.probDeckThumbWrap{flex-basis:54px;}
.probDeckThumb{
  width:46px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
  box-shadow:0 9px 20px rgba(0,0,0,.34);
  border:1px solid rgba(255,255,255,.28);
}
.probDeckCardName{font-size:14px;letter-spacing:-.01em;}
.probDeckMeta{margin-top:3px;}
.probDeckMeta span{
  display:inline-flex;
  max-width:100%;
  padding:3px 8px;
  border-radius:999px;
  background:rgba(102,217,255,.09);
  border:1px solid rgba(102,217,255,.14);
  color:#a7dfff;
  font-size:10px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.probDeckCountBar{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:7px;
}
.probDeckCountBar span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:4px 7px;
  border-radius:999px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
  color:#bfd0e8;
  font-size:10px;
  font-weight:850;
}
.probDeckCountBar b{color:#fff;font-size:12px;}
.probDeckRowActions{flex-direction:column;gap:6px;}

.probSummaryGrid{grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;}
.probMiniStat{flex-direction:column;align-items:flex-start;padding:9px 10px;border-radius:16px;gap:2px;}
.probMiniStat span{font-size:9px;letter-spacing:.07em;}
.probMiniStat strong{font-size:17px;}
.probLoadedDeckName{font-size:17px;}
.probLocalCopyBadge{font-size:10px;padding:6px 9px;}

.probKnownGrid{grid-template-columns:1fr;}
.probKnownList{gap:7px;}
.probKnownRow{
  grid-template-columns:auto 34px minmax(0,1fr) auto auto auto;
  padding:7px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
}
.probKnownRow img,.probKnownFallback{width:32px;height:45px;border-radius:8px;}
.probKnownIndex{width:22px;height:22px;font-size:11px;}
.probKnownName{font-size:13px;}

.probQueryCard{background:linear-gradient(180deg, rgba(106,92,255,.105), rgba(255,255,255,.032)), rgba(13,24,44,.78);}
.probDrawField{max-width:180px;}
.probConditionCard{
  padding:13px;
  border-radius:24px;
  background:linear-gradient(135deg, rgba(102,217,255,.075), rgba(155,123,255,.055)), rgba(4,10,22,.26);
  border-color:rgba(155,205,255,.13);
}
.probConditionHeader strong{font-size:15px;}
.probToggle{padding:7px 11px;font-size:11px;box-shadow:none;}
.probToggle.isSelected{box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 8px 22px rgba(76,143,255,.22);}
.probTargetAddRow{grid-template-columns:minmax(0,1fr) 38px;}
.probTargetChip{padding:7px 9px;border-color:rgba(102,217,255,.20);background:rgba(102,217,255,.10);}
.probTargetChip button{display:grid;place-items:center;}
.probConditionPlain{font-size:13px;background:rgba(0,0,0,.20);}

.probResultTheater{
  position:sticky;
  top:10px;
  overflow:hidden;
  background:
    radial-gradient(circle at 50% 0%, rgba(102,217,255,.17), transparent 48%),
    linear-gradient(180deg, rgba(255,255,255,.075), rgba(255,255,255,.032)),
    rgba(10,20,39,.82);
}
.probResultTheater::after{
  content:"";
  position:absolute;
  inset:auto -28% -38% -28%;
  height:58%;
  background:radial-gradient(ellipse at center, rgba(102,217,255,.16), transparent 66%);
  pointer-events:none;
}
.probResultTheater > *{position:relative;z-index:1;}
.probResultHeader{align-items:center;}
.probSeenChip{font-size:10px;padding:7px 10px;}
.probGauge{
  width:min(218px,72%);
  padding:12px;
  margin:16px auto 12px;
  box-shadow:0 18px 34px rgba(2,6,23,.26), inset 0 0 0 8px rgba(255,255,255,.035);
}
.probGaugeInner{padding:12px;}
.probPercent{
  font-size:clamp(30px,3.2vw,44px);
  letter-spacing:-.055em;
  white-space:nowrap;
}
.probLabel{font-size:14px;margin-top:7px;}
.probPlainLanguage{font-size:16px;max-width:300px;}
.probResultSummary{font-size:12px;line-height:1.35;}
.probBreakdown{gap:7px;}
.probBreakRow{padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.045);}
.probBreakRow span{font-size:11px;}
.probBreakRow strong{font-size:12px;text-align:right;word-break:break-word;}
.probEmpty,.probPreviewEmpty{min-height:56px;padding:12px;border-radius:16px;}

@media (max-width: 1370px){
  .probSimpleLayout{grid-template-columns:minmax(320px,.95fr) minmax(380px,1.18fr) minmax(280px,.78fr);gap:14px;}
  .probGauge{width:min(190px,70%);}
  .probPercent{font-size:34px;}
}
@media (max-width: 1250px){
  .probSimpleLayout{grid-template-columns:1fr 1fr;}
  .probSimpleColumn:last-child{grid-column:1 / -1;display:grid;grid-template-columns:minmax(270px,.8fr) minmax(260px,.6fr) minmax(260px,.6fr);gap:14px;}
  .probResultTheater{position:relative;top:auto;}
  .probGauge{width:170px;}
}
@media (max-width: 900px){
  .probSimpleStats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .probSimpleLayout,.probSimpleColumn:last-child{grid-template-columns:1fr;display:grid;}
  .probHeroActions{justify-content:flex-start;}
  .probDeckRow{grid-template-columns:48px minmax(0,1fr);}
  .probDeckRowActions{grid-column:1 / -1;flex-direction:row;justify-content:flex-end;}
  .probSummaryGrid{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* ======================================================
   Deck Consistency Lab v4 complete UX overhaul
   Visual/layout only: exact statistics functions unchanged.
   ====================================================== */
#setupProbabilityPanel{
  width:min(1540px,calc(100vw - 28px));
  margin-inline:auto;
  padding:18px;
  overflow:visible;
  background:
    radial-gradient(circle at 13% 4%, rgba(65,211,255,.22), transparent 30%),
    radial-gradient(circle at 84% 12%, rgba(139,92,246,.18), transparent 34%),
    radial-gradient(circle at 50% 92%, rgba(20,184,166,.12), transparent 42%),
    linear-gradient(180deg, rgba(6,12,25,.98), rgba(10,20,39,.98));
}
#setupProbabilityPanel .panelTitle{margin:0;font-size:clamp(26px,2.8vw,46px);}
.probTopBar{
  display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;
  align-items:center;
  gap:16px;
  padding:14px 16px;
  margin-bottom:14px;
  border-radius:28px;
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border:1px solid rgba(137,208,255,.18);
  box-shadow:0 22px 70px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  backdrop-filter:blur(14px);
}
.probTopSubtitle{margin-top:3px;color:#bcd2ef;font-size:13px;}
.probTopActions{display:flex;gap:9px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}
.probBackTop{background:rgba(255,255,255,.08)!important;color:#eaf6ff!important;}
.probHiddenControls{position:absolute!important;width:1px!important;height:1px!important;overflow:hidden!important;opacity:0!important;pointer-events:none!important;}
.probSimpleHero{
  padding:16px 20px;
  margin-bottom:12px;
  min-height:0;
}
.probSimpleTitle{font-size:clamp(18px,1.8vw,28px);}
.probSimpleText{font-size:13px;max-width:920px;}
.probSimpleStats{
  grid-template-columns:repeat(4,minmax(0,1fr));
  margin-top:12px;
  margin-bottom:12px;
}
.probStatCard{min-height:62px;padding:10px 13px;border-radius:20px;}
.probSimpleStats .probStatValue{font-size:clamp(16px,1.2vw,22px);}

.probSimpleLayout{
  display:grid!important;
  grid-template-columns:minmax(420px,1.05fr) minmax(440px,1fr);
  grid-template-areas:
    "result result"
    "deck query";
  gap:16px;
  align-items:start;
}
.probSimpleColumn:nth-child(1){grid-area:deck;}
.probSimpleColumn:nth-child(2){grid-area:query;}
.probSimpleColumn:nth-child(3){
  grid-area:result;
  display:grid;
  grid-template-columns:minmax(560px,1.25fr) minmax(260px,.52fr) minmax(260px,.52fr);
  gap:14px;
  align-items:stretch;
}
.probResultTheater{
  position:relative!important;
  top:auto!important;
  min-height:430px;
  display:grid;
  grid-template-columns:minmax(300px,.92fr) minmax(390px,1.08fr);
  grid-template-areas:
    "copy gauge"
    "plain gauge"
    "summary gauge";
  align-items:center;
  gap:18px;
  padding:24px;
  border-radius:34px;
  background:
    radial-gradient(circle at 72% 45%, rgba(92,225,255,.24), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.092), rgba(255,255,255,.033)),
    rgba(7,14,30,.88);
  border:1px solid rgba(123,215,255,.22);
  box-shadow:0 30px 90px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08);
}
.probResultHeader{grid-area:copy;align-self:end;display:block;}
.probResultHeader .probSectionTitle{font-size:clamp(22px,2vw,34px);}
#probResultContext{font-size:clamp(14px,1.25vw,19px);font-weight:900;color:#dcecff;margin-top:8px;}
.probSeenChip{position:absolute;right:24px;top:22px;font-size:12px;padding:8px 12px;}
.probGauge{
  grid-area:gauge;
  width:min(420px,38vw)!important;
  max-width:100%;
  padding:18px;
  margin:0 auto!important;
  box-shadow:0 28px 60px rgba(0,0,0,.34), inset 0 0 0 10px rgba(255,255,255,.045);
}
.probGaugeInner{padding:20px;background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.12), rgba(9,15,28,.96) 62%);}
.probPercent{font-size:clamp(56px,6vw,96px)!important;line-height:.92;letter-spacing:-.075em;}
.probLabel{font-size:clamp(15px,1.25vw,21px);color:#76efff;}
.probPlainLanguage{grid-area:plain;align-self:center;max-width:none;font-size:clamp(20px,1.8vw,30px);line-height:1.12;text-align:left;margin:0;font-weight:1000;color:#f4f8ff;}
.probResultSummary{grid-area:summary;align-self:start;text-align:left;font-size:14px;color:#bed3ef;line-height:1.45;margin:0;}
.probSimpleColumn:nth-child(3) > .probCard:not(.probResultTheater){min-height:0;}

.probDeckEditorCard{padding:16px;border-radius:32px;}
.probDeckPoolHeader{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;}
.probDeckPoolHeader .probDeckSummary{
  margin:0;
  padding:0;
  background:transparent;
  border:0;
}
.probSummaryTop{display:none;}
.probSummaryGrid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px;margin:0;}
.probMiniStat{padding:8px 9px;border-radius:15px;background:rgba(255,255,255,.055);}
.probMiniStat span{font-size:8px;}
.probMiniStat strong{font-size:16px;}

.probDeckRoster{
  margin-top:14px;
  display:grid!important;
  grid-auto-flow:column;
  grid-auto-columns:minmax(190px,215px);
  gap:14px;
  overflow-x:auto;
  overflow-y:hidden;
  max-height:none!important;
  padding:8px 6px 18px;
  scroll-snap-type:x proximity;
  scrollbar-width:thin;
}
.probDeckRow{
  scroll-snap-align:start;
  position:relative;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:9px;
  min-height:0!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  box-shadow:none!important;
  transform:none!important;
}
.probDeckRow.isExhausted{opacity:.48;filter:saturate(.65);}
.probDeckArtFrame{
  position:relative;
  aspect-ratio:63/88;
  border-radius:19px;
  overflow:hidden;
  background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  box-shadow:0 18px 40px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.18), inset 0 1px 0 rgba(255,255,255,.10);
}
.probDeckThumbWrap{display:contents;}
.probDeckThumb{
  position:absolute;
  inset:0;
  width:100%!important;
  height:100%!important;
  border-radius:0!important;
  object-fit:cover;
  border:0!important;
  box-shadow:none!important;
  background:rgba(255,255,255,.04);
}
.probNoImg{display:grid;place-items:center;font-size:46px;color:#9fb9dd;}
.probDeckImageShade{
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0) 38%, rgba(2,6,23,.58) 70%, rgba(2,6,23,.86));
  pointer-events:none;
}
.probDeckFloatCounts{
  position:absolute;
  top:8px;
  left:8px;
  right:8px;
  display:flex;
  justify-content:space-between;
  gap:7px;
  pointer-events:none;
}
.probDeckFloatCounts span{
  display:inline-flex;
  align-items:center;
  gap:4px;
  padding:5px 8px;
  border-radius:999px;
  background:rgba(4,10,22,.68);
  border:1px solid rgba(255,255,255,.18);
  color:#dceaff;
  font-size:10px;
  font-weight:950;
  backdrop-filter:blur(8px);
}
.probDeckFloatCounts b{font-size:13px;color:#fff;}
.probDeckRowActions{
  position:absolute;
  left:8px;
  right:8px;
  bottom:8px;
  display:grid!important;
  grid-template-columns:1fr 1fr 1fr;
  gap:6px;
  z-index:2;
}
.probCardAction{
  min-height:28px;
  padding:0 6px;
  border:1px solid rgba(255,255,255,.20);
  border-radius:999px;
  background:rgba(15,27,51,.78);
  color:#eff7ff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:-.01em;
  box-shadow:0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.12);
  cursor:pointer;
  backdrop-filter:blur(8px);
}
.probCardAction:hover{filter:brightness(1.1);transform:translateY(-1px);}
.probCardAction.danger{background:linear-gradient(135deg, rgba(244,63,94,.88), rgba(127,29,29,.80));}
.probCardAction.purple{background:linear-gradient(135deg, rgba(139,92,246,.9), rgba(67,56,202,.78));}
.probCardAction:disabled{opacity:.45;cursor:not-allowed;transform:none;}
.probDeckInfo{padding:0 4px;}
.probDeckCardName{font-size:15px;line-height:1.1;min-height:34px;font-weight:1000;color:#f4f8ff;}
.probDeckMeta span{font-size:9px;padding:3px 7px;}
.probDeckCountBar{margin-top:6px;gap:5px;}
.probDeckCountBar span{font-size:9px;padding:3px 6px;}
.probDeckCountBar b{font-size:11px;}

.probKnownGrid{grid-template-columns:1fr 1fr;}
.probKnownRow{grid-template-columns:auto 34px minmax(0,1fr) auto auto auto;}
.probQueryCard,.probCard{border-radius:30px;}
#setupProbabilityPanel .bigbtn{padding:10px 15px;}

@media (max-width:1250px){
  .probSimpleLayout{grid-template-columns:1fr;grid-template-areas:"result" "deck" "query";}
  .probSimpleColumn:nth-child(3){grid-template-columns:1fr;}
  .probResultTheater{grid-template-columns:1fr;grid-template-areas:"copy" "gauge" "plain" "summary";min-height:0;}
  .probGauge{width:min(390px,82vw)!important;}
  .probPlainLanguage,.probResultSummary{text-align:center;}
  .probKnownGrid{grid-template-columns:1fr;}
}
@media (max-width:850px){
  #setupProbabilityPanel{width:calc(100vw - 14px);padding:10px;}
  .probTopBar{grid-template-columns:1fr;gap:10px;}
  .probTopActions{justify-content:flex-start;}
  .probSimpleStats{grid-template-columns:repeat(2,minmax(0,1fr));}
  .probDeckRoster{grid-auto-columns:minmax(165px,72vw);}
  .probPercent{font-size:clamp(44px,16vw,72px)!important;}
}

/* ======================================================
   Deck Consistency Lab v5 viewport + discard pile pass
   Presentation-focused; exact probability engine unchanged.
   ====================================================== */
#setup.probabilityMode{
  max-width:none!important;
  width:100%!important;
  padding:8px 12px 18px!important;
  margin:0!important;
  display:flex;
  flex-direction:column;
  align-items:center;
}
#setup.probabilityMode > .topbar{
  width:min(1760px,calc(100vw - 24px));
  margin-inline:auto;
}
#setupProbabilityPanel{
  width:min(1760px,calc(100vw - 24px))!important;
  margin:0 auto!important;
  padding:14px!important;
}
#setupProbabilityPanel .probTopBar,
#setupProbabilityPanel .probSimpleHero,
#setupProbabilityPanel .probSimpleStats,
#setupProbabilityPanel .probSimpleLayout{
  width:100%;
  margin-left:auto;
  margin-right:auto;
}
#setupProbabilityPanel .probTopBar{padding:10px 13px;margin-bottom:10px;border-radius:24px;}
#setupProbabilityPanel .panelTitle{font-size:clamp(24px,2.2vw,40px)!important;line-height:1;}
#setupProbabilityPanel .probSimpleHero{padding:12px 16px;margin-bottom:10px;border-radius:24px;}
#setupProbabilityPanel .probSimpleTitle{font-size:clamp(17px,1.45vw,24px);}
#setupProbabilityPanel .probSimpleStats{gap:10px;margin-top:10px;margin-bottom:10px;}
#setupProbabilityPanel .probStatCard{min-height:52px;padding:8px 11px;}
#setupProbabilityPanel .probCard{padding:13px;border-radius:24px;}
#setupProbabilityPanel .probSectionTitle{font-size:clamp(17px,1.2vw,22px);}
#setupProbabilityPanel .subhint{font-size:12px;line-height:1.25;}
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(360px,1.05fr) minmax(410px,1.08fr) minmax(390px,.95fr)!important;
  grid-template-areas:"deck query result"!important;
  gap:13px!important;
  align-items:start;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(3){
  grid-template-columns:1fr!important;
  display:flex!important;
  flex-direction:column;
  gap:13px;
}
#setupProbabilityPanel .probResultTheater{
  min-height:420px!important;
  grid-template-columns:1fr!important;
  grid-template-areas:"copy" "gauge" "plain" "summary"!important;
  align-content:center;
  justify-items:center;
  text-align:center;
  gap:10px!important;
  padding:18px!important;
}
#setupProbabilityPanel .probResultHeader{text-align:center;align-self:center;}
#setupProbabilityPanel #probResultContext{font-size:clamp(13px,1vw,17px);margin-top:4px;}
#setupProbabilityPanel .probGauge{
  width:min(330px,100%)!important;
  padding:14px!important;
  margin:6px auto!important;
}
#setupProbabilityPanel .probPercent{font-size:clamp(48px,4.3vw,78px)!important;}
#setupProbabilityPanel .probPlainLanguage,
#setupProbabilityPanel .probResultSummary{text-align:center!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(17px,1.35vw,24px)!important;}
#setupProbabilityPanel .probSeenChip{right:14px;top:14px;padding:6px 10px;}
#setupProbabilityPanel .probDeckEditorCard{min-height:0;}
#setupProbabilityPanel .probDeckPoolHeader{gap:8px;}
#setupProbabilityPanel .probSummaryGrid{grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;}
#setupProbabilityPanel .probMiniStat{padding:6px 7px;}
#setupProbabilityPanel .probMiniStat strong{font-size:14px;}
#setupProbabilityPanel .probDeckRoster{
  grid-auto-columns:minmax(175px,205px)!important;
  gap:11px!important;
  padding:7px 4px 14px!important;
}
#setupProbabilityPanel .probDeckCardName{font-size:13px;min-height:30px;}
#setupProbabilityPanel .probDeckRowActions{gap:5px;}
#setupProbabilityPanel .probCardAction{font-size:9px;min-height:26px;padding:0 5px;}
#setupProbabilityPanel .probKnownGridThree{grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:9px;}
#setupProbabilityPanel .probKnownTitle{font-size:12px;margin-bottom:6px;}
#setupProbabilityPanel .probKnownList{gap:6px;max-height:168px;overflow:auto;padding-right:2px;}
#setupProbabilityPanel .probKnownRow{grid-template-columns:20px 28px minmax(0,1fr) auto auto auto!important;gap:5px;padding:6px;border-radius:13px;}
#setupProbabilityPanel .probDiscardRow{grid-template-columns:20px 28px minmax(0,1fr) auto!important;}
#setupProbabilityPanel .probKnownRow img,
#setupProbabilityPanel .probKnownFallback{width:28px;height:39px;border-radius:7px;}
#setupProbabilityPanel .probKnownIndex{width:20px;height:20px;font-size:10px;}
#setupProbabilityPanel .probKnownName{font-size:11px;}
#setupProbabilityPanel .probKnownRow .smallbtn{min-height:24px;padding:0 7px;font-size:11px;}
#setupProbabilityPanel .probBreakdown{font-size:11px;}
#setupProbabilityPanel .probBreakRow{padding:7px 9px;}

@media (max-width:1320px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(360px,1fr) minmax(360px,1fr)!important;
    grid-template-areas:"result result" "deck query"!important;
  }
  #setupProbabilityPanel .probSimpleColumn:nth-child(3){display:grid!important;grid-template-columns:minmax(0,1.2fr) minmax(230px,.55fr) minmax(230px,.55fr)!important;}
  #setupProbabilityPanel .probResultTheater{grid-template-columns:minmax(280px,.85fr) minmax(330px,1.05fr)!important;grid-template-areas:"copy gauge" "plain gauge" "summary gauge"!important;text-align:left;justify-items:stretch;}
  #setupProbabilityPanel .probResultHeader,#setupProbabilityPanel .probPlainLanguage,#setupProbabilityPanel .probResultSummary{text-align:left!important;}
  #setupProbabilityPanel .probGauge{width:min(330px,34vw)!important;}
}
@media (max-width:920px){
  #setup.probabilityMode{padding:6px!important;}
  #setupProbabilityPanel{width:calc(100vw - 12px)!important;padding:9px!important;}
  #setupProbabilityPanel .probSimpleStats{grid-template-columns:repeat(2,minmax(0,1fr));}
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:1fr!important;grid-template-areas:"result" "deck" "query"!important;}
  #setupProbabilityPanel .probSimpleColumn:nth-child(3){grid-template-columns:1fr!important;display:grid!important;}
  #setupProbabilityPanel .probResultTheater{grid-template-columns:1fr!important;grid-template-areas:"copy" "gauge" "plain" "summary"!important;text-align:center;}
  #setupProbabilityPanel .probResultHeader,#setupProbabilityPanel .probPlainLanguage,#setupProbabilityPanel .probResultSummary{text-align:center!important;}
  #setupProbabilityPanel .probGauge{width:min(350px,82vw)!important;}
  #setupProbabilityPanel .probKnownGridThree{grid-template-columns:1fr!important;}
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(165px,70vw)!important;}
}

/* ======================================================
   Deck Consistency Lab v6 space + interaction pass
   UI only: exact probability engine remains untouched.
   ====================================================== */
#setupProbabilityPanel{
  width:min(1900px,calc(100vw - 14px))!important;
  padding:10px!important;
}
#setupProbabilityPanel .probTopBar{margin-bottom:8px!important;padding:8px 12px!important;}
#setupProbabilityPanel .probSimpleHero{display:none!important;}
#setupProbabilityPanel .probSimpleStats{margin:8px 0!important;grid-template-columns:repeat(4,minmax(0,1fr))!important;}
#setupProbabilityPanel .probStatCard{min-height:46px!important;padding:7px 10px!important;border-radius:17px!important;}
#setupProbabilityPanel .probStatLabel{font-size:9px!important;}
#setupProbabilityPanel .probStatValue{font-size:clamp(15px,1.05vw,20px)!important;}
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(420px,1.1fr) minmax(520px,1.22fr) minmax(390px,.86fr)!important;
  grid-template-areas:"deck query result"!important;
  gap:10px!important;
}
#setupProbabilityPanel .probCard{padding:11px!important;border-radius:22px!important;}
#setupProbabilityPanel .probDeckPoolHeader{display:flex!important;align-items:flex-start;justify-content:space-between;gap:12px!important;}
#setupProbabilityPanel .probDeckPoolHeader .subhint{max-width:420px;}
#setupProbabilityPanel .probSummaryGrid{grid-template-columns:repeat(5,minmax(52px,1fr))!important;min-width:340px;}
#setupProbabilityPanel .probInlineField{margin:9px 0!important;padding:9px 10px!important;border-radius:18px!important;}
#setupProbabilityPanel .probInlineField input{min-height:38px!important;padding:8px 10px!important;}
#setupProbabilityPanel .probDeckRoster{
  grid-auto-columns:minmax(180px,200px)!important;
  gap:12px!important;
  padding:6px 4px 12px!important;
  cursor:grab;
  user-select:none;
  -webkit-user-select:none;
  scroll-snap-type:x proximity;
  overscroll-behavior-x:contain;
}
#setupProbabilityPanel .probDeckRoster.isDragging{cursor:grabbing;scroll-snap-type:none;}
#setupProbabilityPanel .probDeckRoster.isDragging .probDeckRow{pointer-events:none;}
#setupProbabilityPanel .probDeckArtFrame{cursor:zoom-in;border-radius:18px!important;}
#setupProbabilityPanel .probDeckCardName{font-size:12px!important;min-height:27px!important;}
#setupProbabilityPanel .probDeckCountBar{display:none!important;}
#setupProbabilityPanel .probDeckMeta span{font-size:8px!important;}
#setupProbabilityPanel .probCardAction{font-size:8px!important;min-height:24px!important;padding:0 5px!important;}
#setupProbabilityPanel .probKnownGridThree{gap:7px!important;}
#setupProbabilityPanel .probKnownList{max-height:112px!important;}
#setupProbabilityPanel .probKnownRow{padding:5px!important;border-radius:12px!important;}
#setupProbabilityPanel .probQueryCard{padding:12px!important;}
#setupProbabilityPanel .probQueryCard > .subhint{display:none!important;}
#setupProbabilityPanel .probDrawField{display:grid!important;grid-template-columns:1fr 92px!important;align-items:center;gap:10px!important;width:220px!important;margin:8px 0 10px!important;}
#setupProbabilityPanel .probDrawField input{width:92px!important;text-align:center!important;}
#setupProbabilityPanel .probConditionList{display:flex!important;flex-direction:column!important;gap:8px!important;}
#setupProbabilityPanel .probConditionCardCompact{
  padding:10px!important;
  border-radius:19px!important;
  background:linear-gradient(135deg, rgba(255,255,255,.07), rgba(255,255,255,.035))!important;
}
#setupProbabilityPanel .probConditionTopline{
  display:grid;
  grid-template-columns:auto auto minmax(112px,1fr) auto;
  align-items:center;
  gap:7px;
}
#setupProbabilityPanel .probConditionNumber{
  padding:7px 10px;
  border-radius:999px;
  background:rgba(102,217,255,.12);
  border:1px solid rgba(102,217,255,.22);
  font-size:11px;
  font-weight:1000;
  color:#eaf8ff;
  white-space:nowrap;
}
#setupProbabilityPanel .probJoinPill,
#setupProbabilityPanel .probHitSelect{
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:32px;
  padding:4px 6px;
  border-radius:999px;
  background:rgba(3,8,20,.32);
  border:1px solid rgba(255,255,255,.11);
  color:#bdd0ec;
  font-size:9px;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.04em;
}
#setupProbabilityPanel .probHitSelect{justify-self:start;text-transform:none;letter-spacing:.01em;font-size:10px;}
#setupProbabilityPanel .probHitSelect select{
  width:54px;
  min-height:24px;
  padding:2px 8px;
  border-radius:999px;
  border:1px solid rgba(118,239,255,.25);
  background:#dfe7f1;
  color:#061322;
  font-weight:1000;
  text-align:center;
}
#setupProbabilityPanel .probHitSelectLocked{padding-inline:10px;color:#d5e4f8;}
#setupProbabilityPanel .probJoinPill .probToggle{
  min-height:24px!important;
  padding:0 8px!important;
  font-size:9px!important;
}
#setupProbabilityPanel .probConditionDelete{width:30px!important;height:30px!important;min-height:30px!important;font-size:15px!important;}
#setupProbabilityPanel .probTargetAddRowCompact{
  grid-template-columns:minmax(0,1fr) 32px!important;
  gap:7px!important;
  margin-top:8px!important;
}
#setupProbabilityPanel .probTargetAddRowCompact select{
  min-height:36px!important;
  padding:8px 10px!important;
  border-radius:14px!important;
  font-size:12px!important;
}
#setupProbabilityPanel .probTargetChipsCompact{margin-top:7px!important;gap:5px!important;}
#setupProbabilityPanel .probTargetChip{padding:5px 7px!important;border-radius:999px!important;font-size:11px!important;}
#setupProbabilityPanel .probTargetChip button{width:18px!important;height:18px!important;font-size:12px!important;}
#setupProbabilityPanel .probConditionPlainCompact{
  margin-top:7px!important;
  padding:6px 9px!important;
  border-radius:13px!important;
  font-size:11px!important;
  line-height:1.25!important;
  min-height:0!important;
}
#setupProbabilityPanel .probQueryCard .panelRow{margin-top:8px!important;gap:8px!important;}
#setupProbabilityPanel .probQueryCard .bigbtn{padding:8px 10px!important;font-size:11px!important;border-radius:14px!important;}
#setupProbabilityPanel .probSimpleColumn:nth-child(3){gap:10px!important;}
#setupProbabilityPanel .probResultTheater{
  min-height:360px!important;
  padding:14px!important;
  gap:6px!important;
}
#setupProbabilityPanel .probGauge{width:min(300px,100%)!important;padding:12px!important;}
#setupProbabilityPanel .probPercent{font-size:clamp(42px,3.7vw,68px)!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(15px,1.05vw,20px)!important;}
#setupProbabilityPanel .probResultSummary{font-size:12px!important;}
#setupProbabilityPanel .probBreakdown{font-size:10px!important;}
#setupProbabilityPanel .probBreakRow{padding:5px 7px!important;border-radius:10px!important;}

.probCardFullscreenOverlay{
  position:fixed;
  inset:0;
  z-index:100000;
  display:none;
  place-items:center;
  padding:clamp(12px,2.2vw,28px);
  background:radial-gradient(circle at 50% 18%, rgba(82,213,255,.18), transparent 28%), rgba(2,6,18,.92);
  backdrop-filter:blur(18px);
}
.probCardFullscreenOverlay.isOpen{display:grid;}
body.probFullscreenLocked{overflow:hidden;}
.probFullscreenStage{
  display:grid;
  justify-items:center;
  gap:12px;
  max-width:min(92vw,760px);
}
.probFullscreenStage img{
  max-width:min(86vw,560px);
  max-height:84vh;
  object-fit:contain;
  border-radius:24px;
  box-shadow:0 40px 110px rgba(0,0,0,.7), 0 0 0 1px rgba(255,255,255,.24), 0 0 46px rgba(102,217,255,.26);
  background:#07101f;
}
.probFullscreenName{
  color:#f6fbff;
  font-size:clamp(18px,2vw,30px);
  font-weight:1000;
  text-align:center;
  text-shadow:0 4px 18px rgba(0,0,0,.7);
}
.probFullscreenClose{
  position:fixed;
  top:18px;
  right:18px;
  width:46px;
  height:46px;
  border-radius:999px;
  border:1px solid rgba(255,255,255,.24);
  background:rgba(15,23,42,.78);
  color:#fff;
  font-size:30px;
  line-height:1;
  font-weight:900;
  cursor:pointer;
  box-shadow:0 16px 38px rgba(0,0,0,.34);
}

@media (min-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(500px,1.15fr) minmax(620px,1.26fr) minmax(430px,.86fr)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(190px,215px)!important;}
}
@media (max-width:1180px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:1fr!important;grid-template-areas:"result" "deck" "query"!important;}
  #setupProbabilityPanel .probResultTheater{grid-template-columns:minmax(240px,.8fr) minmax(280px,1fr)!important;grid-template-areas:"copy gauge" "plain gauge" "summary gauge"!important;text-align:left!important;}
  #setupProbabilityPanel .probResultHeader,#setupProbabilityPanel .probPlainLanguage,#setupProbabilityPanel .probResultSummary{text-align:left!important;}
}
@media (max-width:760px){
  #setupProbabilityPanel .probSimpleStats{grid-template-columns:repeat(2,minmax(0,1fr))!important;}
  #setupProbabilityPanel .probDeckPoolHeader{display:block!important;}
  #setupProbabilityPanel .probSummaryGrid{min-width:0;grid-template-columns:repeat(2,minmax(0,1fr))!important;margin-top:8px!important;}
  #setupProbabilityPanel .probConditionTopline{grid-template-columns:1fr auto;}
  #setupProbabilityPanel .probJoinPill,#setupProbabilityPanel .probHitSelect{justify-self:start;}
  #setupProbabilityPanel .probResultTheater{grid-template-columns:1fr!important;grid-template-areas:"copy" "gauge" "plain" "summary"!important;text-align:center!important;}
  #setupProbabilityPanel .probResultHeader,#setupProbabilityPanel .probPlainLanguage,#setupProbabilityPanel .probResultSummary{text-align:center!important;}
}

/* ======================================================
   Deck Consistency Lab v7 focused fix pass
   - keeps exact math untouched
   - fixes fullscreen card preview, result spacing, top HUD, and section numbering
   ====================================================== */
#setupProbabilityPanel{
  width:min(1920px,calc(100vw - 10px))!important;
  padding:8px!important;
}
#setup.probabilityMode{padding:4px 6px 12px!important;}
#setupProbabilityPanel .probTopBarArena{
  display:grid!important;
  grid-template-columns:auto minmax(250px,.72fr) minmax(560px,1.8fr) auto;
  gap:10px!important;
  align-items:center!important;
  min-height:74px;
  padding:8px 12px!important;
  margin-bottom:8px!important;
}
#setupProbabilityPanel .probTopIdentity{min-width:0;}
#setupProbabilityPanel .panelTitle{font-size:clamp(24px,2vw,38px)!important;white-space:nowrap;}
#setupProbabilityPanel .probTopSubtitle{font-size:12px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:520px;}
#setupProbabilityPanel .probTopHud{
  display:grid;
  grid-template-columns:repeat(4,minmax(86px,.35fr)) minmax(260px,.9fr) minmax(230px,.75fr);
  gap:7px;
  min-width:0;
  align-items:stretch;
}
#setupProbabilityPanel .probTopHud .probStatCard{
  min-height:48px!important;
  padding:6px 9px!important;
  border-radius:16px!important;
  background:linear-gradient(135deg, rgba(255,255,255,.075), rgba(255,255,255,.035));
}
#setupProbabilityPanel .probTopHud .probStatLabel{font-size:8px!important;letter-spacing:.08em;}
#setupProbabilityPanel .probTopHud .probStatValue{font-size:16px!important;line-height:1.05!important;}
#setupProbabilityPanel .probTopBreakdown,
#setupProbabilityPanel .probTopHistory{
  min-height:48px;
  padding:6px 9px!important;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.09);
  overflow:hidden;
}
#setupProbabilityPanel .probTopHudTitle{
  color:#9fb7d8;
  font-weight:1000;
  font-size:8px;
  letter-spacing:.08em;
  text-transform:uppercase;
  margin-bottom:3px;
}
#setupProbabilityPanel .probTopHudGrid{
  display:grid;
  grid-template-columns:repeat(5,auto);
  gap:6px;
  align-items:center;
  color:#d7e6fb;
  font-size:10px;
  font-weight:850;
  white-space:nowrap;
}
#setupProbabilityPanel .probTopHudGrid b{color:#fff;font-size:11px;}
#setupProbabilityPanel .probTopLastAction{
  color:#eef6ff;
  font-size:10px;
  font-weight:900;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
#setupProbabilityPanel .probTopUndoCount{font-size:9px;color:#95accf;margin-top:2px;font-weight:850;}
#setupProbabilityPanel .probTopHudEmpty{font-size:11px;color:#a9bad6;font-weight:900;display:grid;align-items:center;height:100%;}
#setupProbabilityPanel .probTopActions{gap:7px!important;flex-wrap:nowrap!important;}
#setupProbabilityPanel .probTopActions .bigbtn{padding:9px 12px!important;font-size:12px!important;white-space:nowrap;}

#setupProbabilityPanel .probSimpleStats{display:none!important;}
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(470px,1.02fr) minmax(560px,1.16fr) minmax(500px,.98fr)!important;
  grid-template-areas:"deck query result"!important;
  gap:9px!important;
}
#setupProbabilityPanel .probSectionTitle{
  font-size:clamp(18px,1.2vw,23px)!important;
  line-height:1.05!important;
  letter-spacing:-.03em;
}
#setupProbabilityPanel .probDeckPoolHeader .subhint,
#setupProbabilityPanel .probCard > .subhint{font-size:11px!important;line-height:1.35!important;}

/* Result stage: no overlapping chip/title, clearer hierarchy */
#setupProbabilityPanel .probSimpleColumn:nth-child(3){display:flex!important;flex-direction:column!important;gap:0!important;}
#setupProbabilityPanel .probResultTheater{
  min-height:calc(100vh - 124px)!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  grid-template-rows:auto minmax(320px,1fr) auto auto!important;
  grid-template-areas:"copy" "gauge" "plain" "summary"!important;
  align-items:center!important;
  justify-items:center!important;
  padding:16px 18px!important;
  gap:10px!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probResultHeader{
  width:100%;
  display:grid!important;
  grid-template-columns:1fr auto;
  gap:8px;
  align-items:start;
  text-align:center;
}
#setupProbabilityPanel .probResultHeader .probSectionTitle{font-size:clamp(18px,1.3vw,24px)!important;}
#setupProbabilityPanel #probResultContext{
  grid-column:1 / -1;
  font-size:clamp(12px,.95vw,16px)!important;
  line-height:1.18!important;
  max-width:100%;
  margin:0 auto!important;
}
#setupProbabilityPanel .probSeenChip{
  position:static!important;
  justify-self:end!important;
  align-self:start!important;
  font-size:10px!important;
  padding:6px 9px!important;
}
#setupProbabilityPanel .probGauge{
  width:min(410px,24vw,100%)!important;
  padding:14px!important;
  align-self:center!important;
  justify-self:center!important;
}
#setupProbabilityPanel .probPercent{font-size:clamp(50px,4.5vw,84px)!important;line-height:.9!important;letter-spacing:-.075em!important;}
#setupProbabilityPanel .probLabel{font-size:clamp(13px,1vw,18px)!important;}
#setupProbabilityPanel .probPlainLanguage{
  text-align:center!important;
  font-size:clamp(16px,1.2vw,22px)!important;
  line-height:1.12!important;
  max-width:430px!important;
}
#setupProbabilityPanel .probResultSummary{
  text-align:center!important;
  font-size:11px!important;
  line-height:1.35!important;
  max-width:440px!important;
  overflow-wrap:anywhere;
}

/* Cards: keep drag-scroll, but do not disable click targets while the drag state cleans up. */
#setupProbabilityPanel .probDeckRoster.isDragging .probDeckRow{pointer-events:auto!important;}
#setupProbabilityPanel .probDeckArtFrame{cursor:zoom-in!important;}
#setupProbabilityPanel .probDeckArtFrame:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(0,0,0,.42),0 0 0 1px rgba(118,239,255,.35),0 0 24px rgba(102,217,255,.16);}
.probCardFullscreenOverlay{z-index:2147483000!important;}
.probCardFullscreenOverlay.isOpen{display:grid!important;}
.probFullscreenStage img{max-width:min(92vw,660px)!important;max-height:88vh!important;}

/* Conditions: clearer but smaller. */
#setupProbabilityPanel .probConditionCardCompact{padding:8px!important;border-radius:17px!important;}
#setupProbabilityPanel .probConditionTopline{grid-template-columns:auto auto auto 28px!important;gap:6px!important;}
#setupProbabilityPanel .probConditionNumber{font-size:10px!important;padding:6px 9px!important;}
#setupProbabilityPanel .probJoinPill{min-height:28px!important;padding:3px 5px!important;font-size:8px!important;}
#setupProbabilityPanel .probHitSelect{min-height:28px!important;padding:3px 5px!important;font-size:9px!important;}
#setupProbabilityPanel .probHitSelect::before{content:"At least";color:#9fb7d8;text-transform:uppercase;font-size:8px;letter-spacing:.08em;}
#setupProbabilityPanel .probHitSelect > span:first-child{display:none!important;}
#setupProbabilityPanel .probHitSelect select{width:78px!important;min-height:24px!important;font-size:10px!important;padding:2px 7px!important;}
#setupProbabilityPanel .probTargetAddRowCompact{margin-top:6px!important;}
#setupProbabilityPanel .probTargetAddRowCompact select{min-height:32px!important;font-size:11px!important;}
#setupProbabilityPanel .probTargetChipsCompact{margin-top:5px!important;}
#setupProbabilityPanel .probConditionPlainCompact{margin-top:5px!important;font-size:10px!important;}

@media (max-width:1500px){
  #setupProbabilityPanel .probTopBarArena{grid-template-columns:auto minmax(230px,.7fr) minmax(420px,1.3fr) auto;}
  #setupProbabilityPanel .probTopHud{grid-template-columns:repeat(4,minmax(74px,.35fr));}
  #setupProbabilityPanel .probTopBreakdown,#setupProbabilityPanel .probTopHistory{display:none!important;}
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(400px,1fr) minmax(520px,1.1fr) minmax(410px,.9fr)!important;}
  #setupProbabilityPanel .probGauge{width:min(360px,25vw,100%)!important;}
}
@media (max-width:1180px){
  #setupProbabilityPanel .probTopBarArena{grid-template-columns:1fr!important;align-items:start!important;}
  #setupProbabilityPanel .probTopHud{grid-template-columns:repeat(4,minmax(0,1fr));}
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:1fr!important;grid-template-areas:"result" "deck" "query"!important;}
  #setupProbabilityPanel .probResultTheater{min-height:0!important;grid-template-rows:auto auto auto auto!important;}
  #setupProbabilityPanel .probGauge{width:min(380px,78vw)!important;}
}


/* ======================================================
   Deck Consistency Lab v8 final fit + card fullscreen + OR/AND clarity
   ====================================================== */
#setupProbabilityPanel{
  width:min(1920px,calc(100vw - 6px))!important;
  padding:6px!important;
}
#setupProbabilityPanel .probTopBarArena{
  min-height:66px!important;
  padding:7px 10px!important;
  margin-bottom:6px!important;
  grid-template-columns:auto minmax(240px,.66fr) minmax(620px,1.95fr) auto!important;
}
#setupProbabilityPanel .panelTitle{font-size:clamp(22px,1.8vw,34px)!important;}
#setupProbabilityPanel .probTopSubtitle{font-size:11px!important;}
#setupProbabilityPanel .probTopActions .bigbtn{padding:8px 11px!important;font-size:11px!important;}
#setupProbabilityPanel .probTopHud .probStatCard{min-height:44px!important;padding:5px 8px!important;}
#setupProbabilityPanel .probTopBreakdown,#setupProbabilityPanel .probTopHistory{min-height:44px!important;padding:5px 8px!important;}

#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(430px,.92fr) minmax(680px,1.34fr) minmax(390px,.74fr)!important;
  gap:8px!important;
  align-items:start!important;
}
#setupProbabilityPanel .probCard{padding:12px!important;border-radius:20px!important;}
#setupProbabilityPanel .probDeckEditorCard{min-height:calc(100vh - 108px)!important;}
#setupProbabilityPanel .probDeckPoolHeader{gap:8px!important;margin-bottom:8px!important;}
#setupProbabilityPanel .probSectionTitle{font-size:clamp(17px,1.1vw,22px)!important;}
#setupProbabilityPanel .probDeckPoolHeader .subhint,
#setupProbabilityPanel .probCard > .subhint{font-size:10px!important;line-height:1.25!important;}
#setupProbabilityPanel .probInlineField{margin-top:8px!important;padding:8px 10px!important;border-radius:16px!important;}
#setupProbabilityPanel .probInlineField input{min-height:34px!important;font-size:12px!important;}
#setupProbabilityPanel .probDeckRoster{
  grid-auto-columns:minmax(185px,205px)!important;
  gap:10px!important;
  padding:8px 2px 10px!important;
}
#setupProbabilityPanel .probDeckArtFrame{min-height:274px!important;}
#setupProbabilityPanel .probDeckCardName{font-size:12px!important;margin-top:6px!important;}
#setupProbabilityPanel .probDeckMeta{margin-top:4px!important;}
#setupProbabilityPanel .probKnownGridThree{gap:8px!important;}
#setupProbabilityPanel .probKnownList{min-height:58px!important;padding:7px!important;}
#setupProbabilityPanel .probPreviewEmpty{font-size:13px!important;padding:12px!important;}

#setupProbabilityPanel .probQueryCard{padding:12px!important;}
#setupProbabilityPanel .probDrawField{display:grid!important;grid-template-columns:auto 88px!important;align-items:center!important;max-width:230px!important;}
#setupProbabilityPanel .probDrawField input{min-height:34px!important;}
#setupProbabilityPanel .probConditionList{gap:8px!important;margin-top:8px!important;}
#setupProbabilityPanel .probConditionCardCompact{padding:7px!important;border-radius:16px!important;}
#setupProbabilityPanel .probConditionTopline{grid-template-columns:auto auto auto 26px!important;gap:5px!important;}
#setupProbabilityPanel .probJoinPill,#setupProbabilityPanel .probHitSelect{min-height:26px!important;padding:2px 5px!important;}
#setupProbabilityPanel .probHitSelect select{width:84px!important;min-height:23px!important;font-size:10px!important;}
#setupProbabilityPanel .probHitSelectEach::before{content:"At least each"!important;}
#setupProbabilityPanel .probHitSelectEach > span:last-child{display:none!important;}
#setupProbabilityPanel .probTargetAddRowCompact select{min-height:30px!important;}
#setupProbabilityPanel .probConditionPlainCompact{font-size:10px!important;padding:5px 8px!important;}

#setupProbabilityPanel .probResultTheater{
  min-height:calc(100vh - 110px)!important;
  padding:12px 14px!important;
  grid-template-rows:auto minmax(245px,1fr) auto auto!important;
  gap:6px!important;
}
#setupProbabilityPanel .probResultHeader .probSectionTitle{font-size:clamp(17px,1.1vw,22px)!important;}
#setupProbabilityPanel #probResultContext{font-size:clamp(11px,.78vw,14px)!important;line-height:1.14!important;}
#setupProbabilityPanel .probSeenChip{font-size:9px!important;padding:5px 8px!important;}
#setupProbabilityPanel .probGauge{width:min(325px,18.5vw,100%)!important;padding:10px!important;}
#setupProbabilityPanel .probPercent{font-size:clamp(42px,3.5vw,66px)!important;letter-spacing:-.07em!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(14px,.95vw,18px)!important;line-height:1.08!important;max-width:360px!important;}
#setupProbabilityPanel .probResultSummary{font-size:10px!important;line-height:1.25!important;max-width:360px!important;}

/* Fullscreen overlay must be above setup/game layers and must receive clicks. */
.probCardFullscreenOverlay{
  position:fixed!important;
  inset:0!important;
  z-index:2147483646!important;
  pointer-events:auto!important;
}
.probCardFullscreenOverlay.isOpen{display:grid!important;}
.probFullscreenStage{max-width:96vw!important;max-height:96vh!important;}
.probFullscreenStage img{max-width:min(92vw,700px)!important;max-height:88vh!important;}

@media (min-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(430px,.9fr) minmax(720px,1.38fr) minmax(360px,.72fr)!important;}
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(175px,198px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{min-height:262px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(390px,.9fr) minmax(560px,1.3fr) minmax(340px,.78fr)!important;}
  #setupProbabilityPanel .probGauge{width:min(300px,22vw,100%)!important;}
}

/* ======================================================
   Deck Consistency Lab v9 fit + drag + OR clarity patch
   UI-only overrides. Exact finite-deck engine preserved.
   ====================================================== */
#setupProbabilityPanel{
  width:min(1920px,calc(100vw - 4px))!important;
  padding:5px!important;
}
#setupProbabilityPanel .probTopBarArena{
  min-height:58px!important;
  padding:6px 9px!important;
  margin-bottom:5px!important;
  gap:8px!important;
  grid-template-columns:auto minmax(230px,.58fr) minmax(650px,2.05fr) auto!important;
}
#setupProbabilityPanel .panelTitle{font-size:clamp(21px,1.55vw,31px)!important;}
#setupProbabilityPanel .probTopSubtitle{font-size:10px!important;margin-top:1px!important;}
#setupProbabilityPanel .probTopActions{gap:5px!important;}
#setupProbabilityPanel .probTopActions .bigbtn{padding:7px 10px!important;font-size:10px!important;}
#setupProbabilityPanel .probBackTop{padding:8px 12px!important;font-size:11px!important;}
#setupProbabilityPanel .probTopHud{gap:5px!important;}
#setupProbabilityPanel .probTopHud .probStatCard{min-height:39px!important;padding:4px 7px!important;border-radius:13px!important;}
#setupProbabilityPanel .probTopHud .probStatLabel{font-size:7px!important;}
#setupProbabilityPanel .probTopHud .probStatValue{font-size:14px!important;}
#setupProbabilityPanel .probTopBreakdown,#setupProbabilityPanel .probTopHistory{min-height:39px!important;padding:4px 7px!important;border-radius:13px!important;}
#setupProbabilityPanel .probTopHudTitle{font-size:7px!important;margin-bottom:1px!important;}
#setupProbabilityPanel .probTopHudGrid{font-size:9px!important;gap:5px!important;}
#setupProbabilityPanel .probTopHudGrid b{font-size:10px!important;}
#setupProbabilityPanel .probTopLastAction{font-size:9px!important;}
#setupProbabilityPanel .probTopUndoCount{font-size:8px!important;}

#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(400px,.86fr) minmax(760px,1.48fr) minmax(320px,.62fr)!important;
  gap:7px!important;
}
#setupProbabilityPanel .probCard{padding:10px!important;border-radius:18px!important;}
#setupProbabilityPanel .probSectionTitle{font-size:clamp(16px,1vw,20px)!important;}
#setupProbabilityPanel .probDeckPoolHeader .subhint,
#setupProbabilityPanel .probCard > .subhint{font-size:9px!important;line-height:1.18!important;}
#setupProbabilityPanel .probDeckEditorCard{min-height:calc(100vh - 126px)!important;}
#setupProbabilityPanel .probDeckRoster{
  grid-auto-columns:minmax(160px,178px)!important;
  gap:8px!important;
  padding:6px 1px 8px!important;
  touch-action:pan-y!important;
  cursor:grab!important;
}
#setupProbabilityPanel .probDeckRoster.isDragging{cursor:grabbing!important;}
#setupProbabilityPanel .probDeckArtFrame{min-height:232px!important;touch-action:none!important;}
#setupProbabilityPanel .probDeckThumb{-webkit-user-drag:none!important;user-select:none!important;}
#setupProbabilityPanel .probDeckFloatCounts{top:6px!important;left:6px!important;right:6px!important;}
#setupProbabilityPanel .probDeckFloatCounts span{font-size:9px!important;padding:4px 7px!important;}
#setupProbabilityPanel .probDeckFloatCounts b{font-size:12px!important;}
#setupProbabilityPanel .probDeckRowActions{left:6px!important;right:6px!important;bottom:6px!important;gap:4px!important;}
#setupProbabilityPanel .probCardAction{font-size:8px!important;min-height:22px!important;padding:0 4px!important;}
#setupProbabilityPanel .probDeckCardName{font-size:11px!important;min-height:22px!important;margin-top:4px!important;}
#setupProbabilityPanel .probDeckMeta{margin-top:2px!important;}
#setupProbabilityPanel .probInlineField{margin:6px 0!important;padding:7px 9px!important;}
#setupProbabilityPanel .probInlineField input{min-height:31px!important;}
#setupProbabilityPanel .probSummaryGrid{gap:5px!important;}
#setupProbabilityPanel .probMiniStat{padding:5px 6px!important;border-radius:12px!important;}
#setupProbabilityPanel .probMiniStat strong{font-size:13px!important;}

#setupProbabilityPanel .probKnownGridThree{gap:6px!important;}
#setupProbabilityPanel .probKnownTitle{font-size:10px!important;margin-bottom:4px!important;}
#setupProbabilityPanel .probKnownList{min-height:44px!important;max-height:88px!important;padding:5px!important;}
#setupProbabilityPanel .probKnownRow{padding:4px!important;gap:4px!important;border-radius:10px!important;}
#setupProbabilityPanel .probKnownName{font-size:10px!important;}
#setupProbabilityPanel .probKnownRow img,#setupProbabilityPanel .probKnownFallback{width:24px!important;height:34px!important;}

#setupProbabilityPanel .probDrawField{margin:5px 0 7px!important;grid-template-columns:auto 76px!important;max-width:200px!important;}
#setupProbabilityPanel .probDrawField input{width:76px!important;min-height:30px!important;}
#setupProbabilityPanel .probConditionList{gap:6px!important;margin-top:6px!important;}
#setupProbabilityPanel .probConditionCardCompact{padding:5px!important;border-radius:13px!important;}
#setupProbabilityPanel .probConditionTopline{grid-template-columns:auto auto auto 24px!important;gap:4px!important;}
#setupProbabilityPanel .probConditionNumber{font-size:9px!important;padding:5px 8px!important;}
#setupProbabilityPanel .probJoinPill,#setupProbabilityPanel .probHitSelect{min-height:23px!important;padding:2px 4px!important;font-size:7px!important;gap:3px!important;}
#setupProbabilityPanel .probJoinPill .probToggle{min-height:19px!important;padding:0 6px!important;font-size:8px!important;}
#setupProbabilityPanel .probHitSelect::before{font-size:7px!important;}
#setupProbabilityPanel .probHitSelect select{width:72px!important;min-height:20px!important;font-size:9px!important;padding:1px 5px!important;}
#setupProbabilityPanel .probConditionDelete{width:24px!important;height:24px!important;min-height:24px!important;font-size:12px!important;}
#setupProbabilityPanel .probTargetAddRowCompact{margin-top:4px!important;grid-template-columns:minmax(0,1fr) 28px!important;gap:5px!important;}
#setupProbabilityPanel .probTargetAddRowCompact select{min-height:27px!important;font-size:10px!important;padding:5px 8px!important;border-radius:11px!important;}
#setupProbabilityPanel .probTargetAddRowCompact .smallbtn{width:28px!important;height:28px!important;min-height:28px!important;font-size:14px!important;}
#setupProbabilityPanel .probTargetChipsCompact{margin-top:4px!important;gap:4px!important;}
#setupProbabilityPanel .probTargetChip{font-size:10px!important;padding:4px 6px!important;}
#setupProbabilityPanel .probTargetChip button{width:16px!important;height:16px!important;font-size:10px!important;}
#setupProbabilityPanel .probConditionPlainCompact{display:none!important;}
#setupProbabilityPanel .probQueryCard .panelRow{margin-top:6px!important;}
#setupProbabilityPanel .probQueryCard .bigbtn{padding:7px 9px!important;font-size:10px!important;}

#setupProbabilityPanel .probResultTheater{
  min-height:calc(100vh - 126px)!important;
  padding:10px 11px!important;
  grid-template-rows:auto minmax(220px,1fr) auto auto!important;
  gap:4px!important;
}
#setupProbabilityPanel .probResultHeader .probSectionTitle{font-size:clamp(16px,1vw,20px)!important;}
#setupProbabilityPanel #probResultContext{font-size:clamp(10px,.68vw,13px)!important;line-height:1.1!important;}
#setupProbabilityPanel .probGauge{width:min(280px,16vw,100%)!important;padding:9px!important;}
#setupProbabilityPanel .probPercent{font-size:clamp(38px,3.1vw,58px)!important;}
#setupProbabilityPanel .probLabel{font-size:clamp(11px,.8vw,15px)!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(13px,.82vw,16px)!important;max-width:310px!important;}
#setupProbabilityPanel .probResultSummary{font-size:9px!important;max-width:310px!important;}
#setupProbabilityPanel .probSeenChip{font-size:8px!important;padding:4px 7px!important;}

/* OR means union-of-targets. No quantity selector is needed in OR mode. */
#setupProbabilityPanel .probHitSelect:not(.probHitSelectEach){display:none!important;}

@media (min-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(390px,.82fr) minmax(800px,1.52fr) minmax(315px,.6fr)!important;}
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(158px,174px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{min-height:228px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(360px,.86fr) minmax(620px,1.42fr) minmax(300px,.68fr)!important;}
  #setupProbabilityPanel .probTopBarArena{grid-template-columns:auto minmax(220px,.62fr) minmax(460px,1.5fr) auto!important;}
  #setupProbabilityPanel .probGauge{width:min(260px,20vw,100%)!important;}
}

/* ======================================================
   Deck Consistency Lab v10 compact fit + cumulative AND + glass fullscreen
   ====================================================== */
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(360px,.78fr) minmax(820px,1.6fr) minmax(300px,.54fr)!important;
  gap:6px!important;
}
#setupProbabilityPanel .probDeckEditorCard,
#setupProbabilityPanel .probResultTheater{
  min-height:0!important;
  height:auto!important;
  max-height:calc(100vh - 168px)!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probDeckEditorCard{padding:8px!important;}
#setupProbabilityPanel .probResultTheater{
  padding:8px 9px!important;
  grid-template-rows:auto minmax(185px,auto) auto auto!important;
}
#setupProbabilityPanel .probDeckRoster{
  max-height:360px!important;
  min-height:318px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  touch-action:none!important;
  overscroll-behavior:contain!important;
}
#setupProbabilityPanel .probDeckArtFrame{min-height:210px!important;}
#setupProbabilityPanel .probDeckThumb{pointer-events:none!important;-webkit-user-drag:none!important;user-drag:none!important;}
#setupProbabilityPanel .probDeckImageShade,
#setupProbabilityPanel .probDeckFloatCounts{pointer-events:none!important;}
#setupProbabilityPanel .probCardAction{pointer-events:auto!important;}
#setupProbabilityPanel .probGauge{width:min(238px,13.2vw,100%)!important;padding:7px!important;}
#setupProbabilityPanel .probPercent{font-size:clamp(32px,2.65vw,48px)!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(12px,.74vw,14px)!important;margin-top:3px!important;}
#setupProbabilityPanel .probResultSummary{font-size:8px!important;line-height:1.18!important;margin-top:2px!important;}
#setupProbabilityPanel .probQueryCard{padding:8px!important;}
#setupProbabilityPanel .probQueryCard > .subhint{display:none!important;}
#setupProbabilityPanel .probDrawField{margin:3px 0 5px!important;min-height:34px!important;}
#setupProbabilityPanel .probConditionCardCompact{padding:4px!important;border-radius:12px!important;}
#setupProbabilityPanel .probConditionTopline{grid-template-columns:minmax(120px,.85fr) auto auto 22px!important;gap:3px!important;}
#setupProbabilityPanel .probConditionNumber{min-height:22px!important;font-size:8px!important;padding:4px 7px!important;}
#setupProbabilityPanel .probJoinPill{min-height:21px!important;padding:2px 3px!important;}
#setupProbabilityPanel .probJoinPill span{font-size:7px!important;}
#setupProbabilityPanel .probJoinPill .probToggle{min-height:17px!important;padding:0 5px!important;font-size:7px!important;}
#setupProbabilityPanel .probTargetAddRowCompact select{min-height:25px!important;font-size:9px!important;}
#setupProbabilityPanel .probTargetAddRowCompact .smallbtn{width:26px!important;height:26px!important;min-height:26px!important;}
#setupProbabilityPanel .probTargetChip{font-size:9px!important;padding:3px 5px!important;}
#setupProbabilityPanel .probQueryCard .bigbtn{padding:6px 8px!important;font-size:9px!important;}
#setupProbabilityPanel .probKnownList{min-height:38px!important;max-height:70px!important;}
#setupProbabilityPanel .probKnownGridThree{gap:5px!important;}
.probCardFullscreenOverlay{
  background:rgba(3,10,22,.72)!important;
  backdrop-filter:blur(16px) saturate(125%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(125%)!important;
}
.probFullscreenStage{
  background:rgba(10,20,38,.35)!important;
  border:1px solid rgba(135,231,255,.28)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.58),0 0 70px rgba(98,223,255,.14)!important;
}
@media (min-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(350px,.76fr) minmax(850px,1.65fr) minmax(292px,.52fr)!important;}
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(150px,164px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{min-height:204px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(330px,.82fr) minmax(640px,1.5fr) minmax(280px,.62fr)!important;}
  #setupProbabilityPanel .probDeckRoster{max-height:330px!important;min-height:290px!important;}
}


/* ======================================================
   Deck Consistency Lab v11 result width + translucent card preview
   ====================================================== */
#setupProbabilityPanel .probResultTheater{
  min-width:330px!important;
  min-height:390px!important;
  padding:10px 12px!important;
}
#setupProbabilityPanel .probGauge{
  width:min(270px,15vw,100%)!important;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(3){
  min-width:330px!important;
}
.probCardFullscreenOverlay{
  background:radial-gradient(circle at 50% 18%, rgba(82,213,255,.16), transparent 32%), rgba(3,10,22,.56)!important;
  backdrop-filter:blur(14px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(14px) saturate(135%)!important;
}
.probFullscreenStage{
  background:rgba(10,20,38,.22)!important;
  border:1px solid rgba(135,231,255,.32)!important;
  box-shadow:0 30px 100px rgba(0,0,0,.46),0 0 70px rgba(98,223,255,.18)!important;
}
.probCardFullscreenOverlay:fullscreen{
  background:radial-gradient(circle at 50% 18%, rgba(82,213,255,.16), transparent 32%), rgba(3,10,22,.56)!important;
}
.probCardFullscreenOverlay:fullscreen::backdrop{
  background:transparent!important;
}
@media (min-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(345px,.74fr) minmax(815px,1.56fr) minmax(340px,.64fr)!important;}
  #setupProbabilityPanel .probResultTheater{min-width:340px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(320px,.8fr) minmax(610px,1.42fr) minmax(320px,.7fr)!important;}
  #setupProbabilityPanel .probResultTheater{min-width:320px!important;}
  #setupProbabilityPanel .probSimpleColumn:nth-child(3){min-width:320px!important;}
}

/* ======================================================
   Deck Consistency Lab v12 AAA compact deck selector layout
   ====================================================== */
#setupProbabilityPanel .probTopBarArena{
  grid-template-columns:auto minmax(260px,.62fr) minmax(620px,1.55fr) auto!important;
  gap:10px!important;
  padding:10px 14px!important;
}
#setupProbabilityPanel .probTopActions{gap:8px!important;justify-content:flex-end!important;}
#setupProbabilityPanel .probTopActions .bigbtn{padding:9px 13px!important;font-size:12px!important;}
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(390px,.92fr) minmax(650px,1.18fr) minmax(360px,.84fr)!important;
  grid-template-areas:"deck query result"!important;
  gap:10px!important;
  align-items:stretch!important;
  height:clamp(500px, calc(100svh - 185px), 610px)!important;
  min-height:500px!important;
  max-height:610px!important;
}
#setupProbabilityPanel .probSimpleColumn{
  height:100%!important;
  min-height:0!important;
  display:flex!important;
  flex-direction:column!important;
  gap:10px!important;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(1){grid-area:deck!important;}
#setupProbabilityPanel .probSimpleColumn:nth-child(2){grid-area:query!important;}
#setupProbabilityPanel .probSimpleColumn:nth-child(3){grid-area:result!important;min-width:0!important;}
#setupProbabilityPanel .probDeckEditorCard,
#setupProbabilityPanel .probResultTheater{
  height:100%!important;
  min-height:0!important;
  max-height:none!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex:0 0 144px!important;
  min-height:144px!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probQueryCard{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probDeckPoolHeader{
  display:grid!important;
  grid-template-columns:auto minmax(260px,1fr)!important;
  align-items:start!important;
  gap:10px!important;
  margin-bottom:6px!important;
}
#setupProbabilityPanel .probDeckPoolHeader .subhint{display:none!important;}
#setupProbabilityPanel .probSectionTitle{
  font-size:clamp(20px,1.35vw,27px)!important;
  line-height:.95!important;
  letter-spacing:-.04em!important;
}
#setupProbabilityPanel .probCard > .subhint{
  font-size:12px!important;
  line-height:1.25!important;
  color:#d2def2!important;
}
#setupProbabilityPanel .probSummaryGrid{
  grid-template-columns:repeat(5,minmax(0,1fr))!important;
  gap:5px!important;
  min-width:0!important;
}
#setupProbabilityPanel .probMiniStat{
  min-height:48px!important;
  padding:7px 8px!important;
  border-radius:14px!important;
}
#setupProbabilityPanel .probMiniStat span{font-size:9px!important;}
#setupProbabilityPanel .probMiniStat strong{font-size:18px!important;}
#setupProbabilityPanel .probDeckControlsRow{
  display:grid!important;
  grid-template-columns:minmax(150px,.48fr) minmax(0,1fr)!important;
  gap:8px!important;
  margin:6px 0 8px!important;
}
#setupProbabilityPanel .probDeckControlsRow .probInlineField{
  margin:0!important;
  min-height:54px!important;
  padding:7px 9px!important;
  border-radius:17px!important;
}
#setupProbabilityPanel .probDeckControlsRow select,
#setupProbabilityPanel .probDeckControlsRow input{
  width:100%!important;
  min-height:31px!important;
  border-radius:12px!important;
  font-size:13px!important;
  font-weight:850!important;
}
#setupProbabilityPanel .probDeckRoster{
  height:calc(100% - 126px)!important;
  min-height:0!important;
  max-height:none!important;
  grid-auto-columns:minmax(132px,148px)!important;
  gap:9px!important;
  padding:6px 3px 9px!important;
}
#setupProbabilityPanel .probDeckArtFrame{
  min-height:184px!important;
  max-height:194px!important;
  border-radius:16px!important;
}
#setupProbabilityPanel .probDeckThumb{
  object-fit:contain!important;
  background:radial-gradient(circle at 50% 22%, rgba(105,231,255,.12), rgba(4,10,23,.92) 58%, rgba(0,0,0,.94))!important;
}
#setupProbabilityPanel .probDeckImageShade{
  background:linear-gradient(180deg, rgba(0,0,0,.02) 34%, rgba(2,6,23,.26) 68%, rgba(2,6,23,.72))!important;
}
#setupProbabilityPanel .probDeckFloatCounts{top:5px!important;left:5px!important;right:5px!important;}
#setupProbabilityPanel .probDeckFloatCounts span{font-size:8px!important;padding:3px 6px!important;}
#setupProbabilityPanel .probDeckFloatCounts b{font-size:11px!important;}
#setupProbabilityPanel .probDeckRowActions{left:5px!important;right:5px!important;bottom:5px!important;gap:3px!important;}
#setupProbabilityPanel .probCardAction{
  min-height:21px!important;
  padding:0 3px!important;
  font-size:8px!important;
  border-radius:999px!important;
}
#setupProbabilityPanel .probDeckCardName{
  font-size:13px!important;
  min-height:18px!important;
  margin-top:5px!important;
  letter-spacing:-.03em!important;
}
#setupProbabilityPanel .probDeckMeta span{font-size:8px!important;padding:3px 7px!important;}
#setupProbabilityPanel .probKnownGridThree{height:74px!important;gap:8px!important;}
#setupProbabilityPanel .probKnownTitle{font-size:13px!important;margin-bottom:4px!important;}
#setupProbabilityPanel .probKnownList{height:50px!important;min-height:50px!important;max-height:50px!important;padding:5px!important;overflow:auto!important;}
#setupProbabilityPanel .probPreviewEmpty{font-size:14px!important;padding:6px!important;}
#setupProbabilityPanel .probQueryCard .probSectionTitle,
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child .probSectionTitle{
  font-size:clamp(19px,1.22vw,25px)!important;
}
#setupProbabilityPanel .probDrawField{
  grid-template-columns:auto 74px!important;
  max-width:220px!important;
  margin:4px 0 7px!important;
}
#setupProbabilityPanel .probDrawField input{font-size:16px!important;min-height:32px!important;}
#setupProbabilityPanel .probConditionCardCompact{padding:7px!important;border-radius:15px!important;}
#setupProbabilityPanel .probConditionTopline{grid-template-columns:minmax(130px,.75fr) auto auto 24px!important;gap:5px!important;}
#setupProbabilityPanel .probConditionNumber{font-size:10px!important;min-height:24px!important;}
#setupProbabilityPanel .probJoinPill span{font-size:8px!important;}
#setupProbabilityPanel .probJoinPill .probToggle{font-size:8px!important;min-height:18px!important;}
#setupProbabilityPanel .probTargetAddRowCompact select{font-size:12px!important;min-height:30px!important;}
#setupProbabilityPanel .probTargetChip{font-size:11px!important;padding:4px 7px!important;}
#setupProbabilityPanel .probQueryCard .bigbtn{font-size:11px!important;padding:7px 10px!important;}
#setupProbabilityPanel .probResultTheater{
  min-width:0!important;
  display:grid!important;
  grid-template-rows:auto minmax(235px,1fr) auto auto!important;
  justify-items:center!important;
  padding:12px!important;
  text-align:center!important;
}
#setupProbabilityPanel .probGauge{width:min(285px,17vw,100%)!important;}
#setupProbabilityPanel .probPercent{font-size:clamp(40px,3vw,58px)!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(15px,.95vw,19px)!important;line-height:1.18!important;}
#setupProbabilityPanel .probResultSummary{font-size:10px!important;line-height:1.2!important;}
@media (min-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(390px,.92fr) minmax(680px,1.22fr) minmax(380px,.86fr)!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{grid-template-columns:minmax(330px,.85fr) minmax(560px,1.2fr) minmax(320px,.82fr)!important;}
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(126px,142px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{min-height:176px!important;}
}

/* ======================================================
   Deck Consistency Lab v13 AAA arena proportion pass
   - deck selector in pool, no deck instruction copy
   - tighter/narrower middle, equal-height arena columns
   - larger readable labels, visible card actions
   ====================================================== */
#setupProbabilityPanel .probTopBarArena{
  padding:9px 12px!important;
  gap:9px!important;
  grid-template-columns:auto minmax(260px,.58fr) minmax(560px,1.35fr) auto!important;
}
#setupProbabilityPanel .probTopHero h2{font-size:clamp(27px,1.75vw,36px)!important;line-height:.9!important;}
#setupProbabilityPanel .probTopHero p{font-size:13px!important;line-height:1.1!important;}
#setupProbabilityPanel .probHeroStats{gap:7px!important;}
#setupProbabilityPanel .probStatCard{min-height:58px!important;padding:8px 10px!important;border-radius:15px!important;}
#setupProbabilityPanel .probStatLabel{font-size:9px!important;letter-spacing:.12em!important;}
#setupProbabilityPanel .probStatValue{font-size:17px!important;line-height:1.05!important;}

#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(420px,.88fr) minmax(555px,1.02fr) minmax(430px,.94fr)!important;
  grid-template-areas:"deck query result"!important;
  gap:10px!important;
  align-items:stretch!important;
  height:clamp(520px, calc(100svh - 170px), 650px)!important;
  min-height:520px!important;
  max-height:650px!important;
}
#setupProbabilityPanel .probSimpleColumn{
  height:100%!important;
  min-height:0!important;
  gap:10px!important;
}
#setupProbabilityPanel .probDeckEditorCard,
#setupProbabilityPanel .probResultTheater,
#setupProbabilityPanel .probSimpleColumn:nth-child(2){
  height:100%!important;
  min-height:0!important;
}
#setupProbabilityPanel .probDeckEditorCard,
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child,
#setupProbabilityPanel .probQueryCard,
#setupProbabilityPanel .probResultTheater{
  border-radius:20px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 50px rgba(0,0,0,.18)!important;
}

/* Deck pool: remove instruction copy entirely and reclaim the space. */
#setupProbabilityPanel .probDeckPoolHeader{
  grid-template-columns:auto 1fr!important;
  align-items:center!important;
  gap:8px!important;
  margin-bottom:4px!important;
}
#setupProbabilityPanel .probDeckEditorCard > .subhint,
#setupProbabilityPanel .probDeckPoolHeader .subhint,
#setupProbabilityPanel .probDeckPoolHeader p{
  display:none!important;
}
#setupProbabilityPanel .probSectionTitle{
  font-size:clamp(22px,1.35vw,30px)!important;
  line-height:.92!important;
  letter-spacing:-.045em!important;
}
#setupProbabilityPanel .probDeckSummary{justify-content:end!important;gap:5px!important;}
#setupProbabilityPanel .probSummaryGrid{gap:5px!important;}
#setupProbabilityPanel .probMiniStat{min-height:45px!important;padding:7px 8px!important;border-radius:13px!important;}
#setupProbabilityPanel .probMiniStat span{font-size:9px!important;line-height:1!important;}
#setupProbabilityPanel .probMiniStat strong{font-size:18px!important;}

/* Deck selector now replaces the old load button area. */
#setupProbabilityPanel .probDeckControlsRow{
  grid-template-columns:minmax(145px,.42fr) minmax(0,1fr)!important;
  gap:8px!important;
  margin:5px 0 9px!important;
}
#setupProbabilityPanel .probDeckControlsRow .probInlineField{
  min-height:52px!important;
  padding:7px 9px!important;
  border-radius:16px!important;
  font-size:9px!important;
}
#setupProbabilityPanel .probDeckControlsRow select,
#setupProbabilityPanel .probDeckControlsRow input{
  min-height:32px!important;
  font-size:14px!important;
  border-radius:13px!important;
}

/* Bigger card presence, but keep overlay actions always visible. */
#setupProbabilityPanel .probDeckRoster{
  height:calc(100% - 112px)!important;
  min-height:0!important;
  max-height:none!important;
  grid-auto-columns:minmax(152px,172px)!important;
  gap:12px!important;
  padding:8px 4px 12px!important;
  align-content:start!important;
}
#setupProbabilityPanel .probDeckArtFrame{
  min-height:214px!important;
  height:214px!important;
  max-height:214px!important;
  border-radius:18px!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probDeckThumb{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center!important;
}
#setupProbabilityPanel .probDeckFloatCounts{top:6px!important;left:6px!important;right:6px!important;z-index:5!important;}
#setupProbabilityPanel .probDeckFloatCounts span{font-size:9px!important;padding:4px 7px!important;}
#setupProbabilityPanel .probDeckFloatCounts b{font-size:12px!important;}
#setupProbabilityPanel .probDeckRowActions{
  left:7px!important;
  right:7px!important;
  bottom:7px!important;
  gap:5px!important;
  z-index:6!important;
}
#setupProbabilityPanel .probCardAction{
  min-height:25px!important;
  padding:0 7px!important;
  font-size:10px!important;
  border-radius:999px!important;
  box-shadow:0 8px 14px rgba(0,0,0,.35)!important;
}
#setupProbabilityPanel .probDeckCardName{font-size:15px!important;line-height:1.05!important;margin-top:7px!important;}
#setupProbabilityPanel .probDeckMeta span{font-size:9px!important;padding:4px 8px!important;}
#setupProbabilityPanel .probDeckCountBar{display:none!important;}

/* Middle: less width, denser content, stronger readability. */
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex:0 0 150px!important;
  min-height:150px!important;
  padding:12px 14px!important;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child .subhint{
  font-size:12px!important;
  line-height:1.15!important;
  margin-bottom:7px!important;
}
#setupProbabilityPanel .probKnownGridThree{
  height:78px!important;
  min-height:78px!important;
  gap:9px!important;
}
#setupProbabilityPanel .probKnownTitle{font-size:13px!important;margin-bottom:5px!important;}
#setupProbabilityPanel .probKnownList{
  height:54px!important;
  min-height:54px!important;
  max-height:54px!important;
  padding:6px!important;
  border-radius:15px!important;
  overflow:auto!important;
}
#setupProbabilityPanel .probPreviewEmpty{font-size:15px!important;line-height:1.15!important;}
#setupProbabilityPanel .probQueryCard{
  flex:1 1 auto!important;
  min-height:0!important;
  padding:12px 14px!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probQueryCard .probSectionTitle{font-size:clamp(22px,1.28vw,29px)!important;}
#setupProbabilityPanel .probQueryCard > .subhint{display:none!important;}
#setupProbabilityPanel .probDrawField{
  grid-template-columns:auto 86px!important;
  max-width:245px!important;
  min-height:50px!important;
  padding:8px 10px!important;
  margin:6px 0 8px!important;
}
#setupProbabilityPanel .probDrawField span,
#setupProbabilityPanel .probDrawField{font-size:11px!important;}
#setupProbabilityPanel .probDrawField input{font-size:18px!important;min-height:34px!important;}
#setupProbabilityPanel .probConditionsList{
  max-height:calc(100% - 108px)!important;
  overflow:auto!important;
  padding-right:3px!important;
}
#setupProbabilityPanel .probConditionCardCompact{
  padding:7px!important;
  border-radius:16px!important;
}
#setupProbabilityPanel .probConditionTopline{
  grid-template-columns:minmax(140px,.9fr) auto auto 26px!important;
  gap:6px!important;
}
#setupProbabilityPanel .probConditionNumber{font-size:11px!important;min-height:25px!important;}
#setupProbabilityPanel .probJoinPill .probToggle{font-size:9px!important;min-height:19px!important;padding:0 8px!important;}
#setupProbabilityPanel .probTargetAddRowCompact{gap:6px!important;margin-top:6px!important;}
#setupProbabilityPanel .probTargetAddRowCompact select{min-height:31px!important;font-size:13px!important;}
#setupProbabilityPanel .probTargetAddRowCompact .probTinyAdd{min-height:31px!important;min-width:31px!important;}
#setupProbabilityPanel .probTargetChip{font-size:12px!important;padding:4px 8px!important;}
#setupProbabilityPanel .probConditionSummary{display:none!important;}
#setupProbabilityPanel .probQueryCard .bigbtn{font-size:12px!important;padding:8px 12px!important;}

/* Result column: same height, polished and readable. */
#setupProbabilityPanel .probResultTheater{
  padding:13px 14px!important;
  grid-template-rows:auto minmax(250px,1fr) auto auto!important;
}
#setupProbabilityPanel .probResultTheater .probSectionTitle{font-size:clamp(22px,1.25vw,29px)!important;}
#setupProbabilityPanel .probGauge{width:min(315px,18vw,100%)!important;}
#setupProbabilityPanel .probPercent{font-size:clamp(43px,3.1vw,64px)!important;}
#setupProbabilityPanel .probPlainLanguage{font-size:clamp(16px,1vw,21px)!important;line-height:1.16!important;}
#setupProbabilityPanel .probResultSummary{font-size:11px!important;}

@media (min-width:1700px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(450px,.9fr) minmax(610px,1fr) minmax(455px,.95fr)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(160px,180px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:224px!important;min-height:224px!important;max-height:224px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(350px,.9fr) minmax(500px,1fr) minmax(340px,.92fr)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(136px,152px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:190px!important;min-height:190px!important;max-height:190px!important;}
  #setupProbabilityPanel .probGauge{width:min(260px,20vw,100%)!important;}
}

/* ======================================================
   Deck Consistency Lab v14 space rebalance
   - larger deck cards
   - taller known-deck order lanes
   - shorter scrollable probability editor
   UI/layout only. Probability engine unchanged.
   ====================================================== */
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(455px,.95fr) minmax(560px,.98fr) minmax(430px,.9fr)!important;
  height:clamp(540px, calc(100svh - 158px), 670px)!important;
  max-height:670px!important;
}

/* Left arena: use the empty vertical space for larger cards. */
#setupProbabilityPanel .probDeckEditorCard{
  overflow:hidden!important;
}
#setupProbabilityPanel .probDeckRoster{
  height:calc(100% - 104px)!important;
  grid-auto-columns:minmax(178px,206px)!important;
  gap:14px!important;
  padding:8px 5px 13px!important;
}
#setupProbabilityPanel .probDeckArtFrame{
  height:258px!important;
  min-height:258px!important;
  max-height:258px!important;
  border-radius:19px!important;
}
#setupProbabilityPanel .probDeckThumb{
  object-fit:contain!important;
  object-position:center!important;
}
#setupProbabilityPanel .probDeckCardName{
  font-size:16px!important;
  margin-top:8px!important;
  min-height:22px!important;
}
#setupProbabilityPanel .probDeckMeta span{
  font-size:10px!important;
  padding:4px 9px!important;
}
#setupProbabilityPanel .probCardAction{
  min-height:27px!important;
  font-size:10px!important;
  padding:0 8px!important;
}

/* Middle arena: give known order enough height, then make question editor compact and scrollable. */
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex:0 0 205px!important;
  min-height:205px!important;
  max-height:205px!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probKnownGridThree{
  height:118px!important;
  min-height:118px!important;
  max-height:118px!important;
  align-items:stretch!important;
}
#setupProbabilityPanel .probKnownList{
  height:88px!important;
  min-height:88px!important;
  max-height:88px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding:7px!important;
}
#setupProbabilityPanel .probKnownRow{
  min-height:44px!important;
}
#setupProbabilityPanel .probKnownRow img,
#setupProbabilityPanel .probKnownFallback{
  width:32px!important;
  height:45px!important;
}
#setupProbabilityPanel .probPreviewEmpty{
  font-size:16px!important;
}

#setupProbabilityPanel .probQueryCard{
  flex:1 1 0!important;
  min-height:0!important;
  max-height:none!important;
  display:flex!important;
  flex-direction:column!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probQueryCard .probSectionTitle{
  font-size:clamp(22px,1.2vw,28px)!important;
  margin-bottom:4px!important;
}
#setupProbabilityPanel .probDrawField{
  flex:0 0 auto!important;
  margin:4px 0 7px!important;
  min-height:44px!important;
  max-width:220px!important;
}
#setupProbabilityPanel #probConditionList,
#setupProbabilityPanel .probConditionList{
  flex:1 1 auto!important;
  min-height:0!important;
  max-height:none!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:4px!important;
  padding-bottom:5px!important;
  scrollbar-width:thin;
}
#setupProbabilityPanel #probConditionList::-webkit-scrollbar,
#setupProbabilityPanel .probConditionList::-webkit-scrollbar{
  width:8px;
}
#setupProbabilityPanel #probConditionList::-webkit-scrollbar-thumb,
#setupProbabilityPanel .probConditionList::-webkit-scrollbar-thumb{
  background:rgba(116,232,255,.32);
  border-radius:999px;
}
#setupProbabilityPanel .probConditionCardCompact{
  padding:7px!important;
  margin-bottom:7px!important;
}
#setupProbabilityPanel .probConditionTopline{
  min-height:25px!important;
}
#setupProbabilityPanel .probTargetAddRowCompact select{
  min-height:30px!important;
}

@media (min-width:1700px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(485px,.95fr) minmax(610px,.98fr) minmax(455px,.9fr)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(190px,218px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:274px!important;min-height:274px!important;max-height:274px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(380px,.92fr) minmax(500px,.98fr) minmax(340px,.88fr)!important;
    height:clamp(510px, calc(100svh - 150px), 620px)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(152px,172px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:220px!important;min-height:220px!important;max-height:220px!important;}
  #setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{flex-basis:190px!important;min-height:190px!important;max-height:190px!important;}
  #setupProbabilityPanel .probKnownGridThree{height:104px!important;min-height:104px!important;max-height:104px!important;}
  #setupProbabilityPanel .probKnownList{height:76px!important;min-height:76px!important;max-height:76px!important;}
}

/* ======================================================
   Deck Consistency Lab v15 polish
   - larger deck cards
   - taller known deck lanes with cleaner discard thumbnails
   - draw count moved into probability header
   - reuse global deck-builder fullscreen viewer
   ====================================================== */
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(500px,1fr) minmax(600px,1.05fr) minmax(430px,.86fr)!important;
  height:clamp(560px, calc(100svh - 154px), 700px)!important;
  max-height:700px!important;
}

/* Deck pool: bigger card art using the available empty vertical space. */
#setupProbabilityPanel .probDeckRoster{
  height:calc(100% - 108px)!important;
  min-height:0!important;
  grid-auto-columns:minmax(202px,232px)!important;
  gap:18px!important;
  padding:10px 7px 14px!important;
  align-content:start!important;
}
#setupProbabilityPanel .probDeckArtFrame{
  height:302px!important;
  min-height:302px!important;
  max-height:302px!important;
  border-radius:20px!important;
}
#setupProbabilityPanel .probDeckRowActions{
  left:8px!important;
  right:8px!important;
  bottom:8px!important;
  gap:6px!important;
}
#setupProbabilityPanel .probCardAction{
  min-height:30px!important;
  font-size:11px!important;
  padding:0 9px!important;
}
#setupProbabilityPanel .probDeckCardName{
  font-size:17px!important;
  line-height:1.05!important;
  margin-top:9px!important;
}

/* Known deck order: taller lanes, bigger mini card thumbnails. */
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex:0 0 238px!important;
  min-height:238px!important;
  max-height:238px!important;
  padding:16px 18px!important;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child .subhint{
  font-size:13px!important;
  line-height:1.18!important;
  margin-bottom:9px!important;
}
#setupProbabilityPanel .probKnownGridThree{
  height:145px!important;
  min-height:145px!important;
  max-height:145px!important;
  gap:12px!important;
}
#setupProbabilityPanel .probKnownList{
  height:112px!important;
  min-height:112px!important;
  max-height:112px!important;
  padding:8px!important;
}
#setupProbabilityPanel .probKnownRow{
  min-height:56px!important;
  padding:6px!important;
  gap:7px!important;
}
#setupProbabilityPanel .probKnownRow img,
#setupProbabilityPanel .probKnownFallback{
  width:43px!important;
  height:60px!important;
  border-radius:5px!important;
}
#setupProbabilityPanel .probKnownIndex{
  width:27px!important;
  height:27px!important;
  font-size:13px!important;
}
#setupProbabilityPanel #probKnownDiscardList .probKnownName{
  display:none!important;
}
#setupProbabilityPanel #probKnownDiscardList .probKnownRow{
  grid-template-columns:auto auto 1fr!important;
}
#setupProbabilityPanel #probKnownDiscardList .smallbtn.good{
  margin-left:auto!important;
  min-width:38px!important;
  min-height:38px!important;
  border-radius:999px!important;
  font-size:18px!important;
}

/* Probability question: draw count now sits beside the title; body stays short and scrollable. */
#setupProbabilityPanel .probQueryCard{
  flex:1 1 0!important;
  min-height:0!important;
  padding:12px 16px!important;
  display:flex!important;
  flex-direction:column!important;
}
#setupProbabilityPanel .probQueryHeader{
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:14px!important;
  margin-bottom:8px!important;
  flex:0 0 auto!important;
}
#setupProbabilityPanel .probQueryHeader .probSectionTitle{
  margin:0!important;
  font-size:clamp(25px,1.42vw,32px)!important;
  line-height:1!important;
  white-space:nowrap!important;
}
#setupProbabilityPanel .probDrawField{
  margin:0!important;
  max-width:270px!important;
  min-width:245px!important;
  min-height:46px!important;
  display:grid!important;
  grid-template-columns:1fr 86px!important;
  align-items:center!important;
  gap:10px!important;
}
#setupProbabilityPanel .probDrawField input{
  min-height:38px!important;
  font-size:19px!important;
  text-align:center!important;
}
#setupProbabilityPanel .probConditionList{
  flex:1 1 auto!important;
  min-height:0!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
  padding-right:5px!important;
}
#setupProbabilityPanel .probQueryCard .panelRow{
  flex:0 0 auto!important;
  margin-top:8px!important;
}

/* The Consistency Lab now calls the shared deck-builder fullscreen viewer. */
#setupProbabilityPanel .probCardFullscreenOverlay{
  display:none!important;
}

@media (min-width:1700px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(530px,1fr) minmax(650px,1.02fr) minmax(455px,.86fr)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(212px,242px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:318px!important;min-height:318px!important;max-height:318px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(390px,.92fr) minmax(540px,1.02fr) minmax(330px,.82fr)!important;
    height:clamp(520px, calc(100svh - 148px), 640px)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(166px,188px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:240px!important;min-height:240px!important;max-height:240px!important;}
  #setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{flex-basis:215px!important;min-height:215px!important;max-height:215px!important;}
  #setupProbabilityPanel .probKnownGridThree{height:122px!important;min-height:122px!important;max-height:122px!important;}
  #setupProbabilityPanel .probKnownList{height:92px!important;min-height:92px!important;max-height:92px!important;}
  #setupProbabilityPanel .probKnownRow img,#setupProbabilityPanel .probKnownFallback{width:34px!important;height:48px!important;}
  #setupProbabilityPanel .probDrawField{min-width:210px!important;grid-template-columns:1fr 72px!important;}
}

/* ======================================================
   Deck Consistency Lab v16 compact arena proportion pass
   - tighter whole page
   - wider middle lane so known order controls fit
   - slightly narrower deck/result lanes
   - layout only; probability engine unchanged
   ====================================================== */
#setupProbabilityPanel{
  padding:5px!important;
}
#setupProbabilityPanel .probTopBarArena{
  min-height:58px!important;
  padding:7px 10px!important;
  margin-bottom:6px!important;
  gap:8px!important;
}
#setupProbabilityPanel .probTopHero h2{
  font-size:clamp(24px,1.55vw,32px)!important;
}
#setupProbabilityPanel .probTopHero p{
  font-size:11px!important;
}
#setupProbabilityPanel .probStatCard{
  min-height:50px!important;
  padding:7px 9px!important;
}
#setupProbabilityPanel .probStatValue{
  font-size:16px!important;
}
#setupProbabilityPanel .probTopActions .bigbtn{
  padding:8px 12px!important;
}

#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(455px,.82fr) minmax(760px,1.25fr) minmax(395px,.72fr)!important;
  height:clamp(525px, calc(100svh - 164px), 660px)!important;
  min-height:525px!important;
  max-height:660px!important;
  gap:8px!important;
}
#setupProbabilityPanel .probSimpleColumn{
  gap:8px!important;
}
#setupProbabilityPanel .probCard{
  padding:11px 13px!important;
}

/* Left deck lane: keep cards strong, but trim horizontal/vertical footprint. */
#setupProbabilityPanel .probDeckEditorCard{
  padding:11px!important;
}
#setupProbabilityPanel .probDeckControlsRow{
  margin:4px 0 7px!important;
}
#setupProbabilityPanel .probDeckControlsRow .probInlineField{
  min-height:48px!important;
  padding:6px 8px!important;
}
#setupProbabilityPanel .probDeckRoster{
  height:calc(100% - 100px)!important;
  grid-auto-columns:minmax(186px,212px)!important;
  gap:14px!important;
  padding:8px 5px 12px!important;
}
#setupProbabilityPanel .probDeckArtFrame{
  height:284px!important;
  min-height:284px!important;
  max-height:284px!important;
}
#setupProbabilityPanel .probCardAction{
  min-height:28px!important;
  font-size:10px!important;
  padding:0 8px!important;
}
#setupProbabilityPanel .probDeckCardName{
  font-size:16px!important;
  margin-top:7px!important;
}

/* Middle: wider, but vertically tighter. Known order rows now have enough horizontal room for controls. */
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex:0 0 218px!important;
  min-height:218px!important;
  max-height:218px!important;
  padding:13px 15px!important;
}
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child .subhint{
  font-size:12px!important;
  line-height:1.12!important;
  margin-bottom:7px!important;
}
#setupProbabilityPanel .probKnownGridThree{
  grid-template-columns:minmax(0,1.08fr) minmax(0,1.08fr) minmax(0,.84fr)!important;
  height:132px!important;
  min-height:132px!important;
  max-height:132px!important;
  gap:9px!important;
}
#setupProbabilityPanel .probKnownList{
  height:101px!important;
  min-height:101px!important;
  max-height:101px!important;
  padding:6px!important;
}
#setupProbabilityPanel .probKnownRow{
  grid-template-columns:25px 40px minmax(0,1fr) 24px 24px 28px!important;
  min-height:50px!important;
  padding:5px!important;
  gap:5px!important;
}
#setupProbabilityPanel .probKnownRow img,
#setupProbabilityPanel .probKnownFallback{
  width:40px!important;
  height:56px!important;
}
#setupProbabilityPanel .probKnownIndex{
  width:25px!important;
  height:25px!important;
  font-size:12px!important;
}
#setupProbabilityPanel .probKnownName{
  font-size:12px!important;
  min-width:0!important;
}
#setupProbabilityPanel .probKnownRow .smallbtn{
  width:24px!important;
  height:24px!important;
  min-width:24px!important;
  min-height:24px!important;
  padding:0!important;
  font-size:11px!important;
  border-radius:999px!important;
}
#setupProbabilityPanel .probKnownRow .smallbtn.danger{
  width:28px!important;
  min-width:28px!important;
}
#setupProbabilityPanel #probKnownDiscardList .probKnownRow{
  grid-template-columns:25px 40px 1fr 34px!important;
}
#setupProbabilityPanel #probKnownDiscardList .smallbtn.good{
  width:34px!important;
  height:34px!important;
  min-width:34px!important;
  min-height:34px!important;
  font-size:16px!important;
}

/* Probability editor: compact vertical rhythm, still scrollable. */
#setupProbabilityPanel .probQueryCard{
  padding:11px 14px!important;
}
#setupProbabilityPanel .probQueryHeader{
  margin-bottom:6px!important;
}
#setupProbabilityPanel .probQueryHeader .probSectionTitle{
  font-size:clamp(23px,1.25vw,29px)!important;
}
#setupProbabilityPanel .probDrawField{
  min-height:42px!important;
  max-width:242px!important;
  min-width:222px!important;
  grid-template-columns:1fr 78px!important;
  padding:6px 9px!important;
}
#setupProbabilityPanel .probDrawField input{
  min-height:34px!important;
  font-size:17px!important;
}
#setupProbabilityPanel .probConditionCardCompact{
  padding:6px!important;
  margin-bottom:6px!important;
}
#setupProbabilityPanel .probTargetAddRowCompact select{
  min-height:29px!important;
}
#setupProbabilityPanel .probQueryCard .panelRow{
  margin-top:6px!important;
}

/* Right result lane: slightly narrower and same arena height. */
#setupProbabilityPanel .probResultTheater{
  padding:11px 12px!important;
  grid-template-rows:auto minmax(230px,1fr) auto auto!important;
}
#setupProbabilityPanel .probGauge{
  width:min(295px,16vw,100%)!important;
}
#setupProbabilityPanel .probPercent{
  font-size:clamp(40px,2.75vw,58px)!important;
}
#setupProbabilityPanel .probPlainLanguage{
  font-size:clamp(14px,.92vw,18px)!important;
}

@media (min-width:1700px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(480px,.82fr) minmax(800px,1.25fr) minmax(405px,.7fr)!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(192px,220px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:292px!important;min-height:292px!important;max-height:292px!important;}
}
@media (max-width:1500px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(360px,.78fr) minmax(590px,1.2fr) minmax(305px,.68fr)!important;
    height:clamp(500px, calc(100svh - 146px), 615px)!important;
    min-height:500px!important;
    max-height:615px!important;
  }
  #setupProbabilityPanel .probDeckRoster{grid-auto-columns:minmax(150px,172px)!important;}
  #setupProbabilityPanel .probDeckArtFrame{height:230px!important;min-height:230px!important;max-height:230px!important;}
  #setupProbabilityPanel .probKnownGridThree{height:118px!important;min-height:118px!important;max-height:118px!important;}
  #setupProbabilityPanel .probKnownList{height:89px!important;min-height:89px!important;max-height:89px!important;}
  #setupProbabilityPanel .probKnownRow{grid-template-columns:22px 34px minmax(0,1fr) 22px 22px 25px!important;gap:4px!important;}
  #setupProbabilityPanel .probKnownRow img,#setupProbabilityPanel .probKnownFallback{width:34px!important;height:48px!important;}
  #setupProbabilityPanel .probKnownRow .smallbtn{width:22px!important;height:22px!important;min-width:22px!important;min-height:22px!important;font-size:10px!important;}
  #setupProbabilityPanel .probGauge{width:min(250px,19vw,100%)!important;}
}

/* ======================================================
   Deck Consistency Lab v17 requested polish
   - remove known-order help text space
   - wider deck picker / narrower deck search
   - slightly smaller overall width
   - compact top breakdown labels
   - layout only; probability engine unchanged
   ====================================================== */
#setup.probabilityMode{
  padding-left:10px!important;
  padding-right:10px!important;
}
#setupProbabilityPanel{
  width:min(1848px, calc(100vw - 34px))!important;
  padding:5px!important;
}
#setupProbabilityPanel .probTopBarArena{
  width:100%!important;
}

/* Deck Pool controls: give saved-deck picker priority over search. */
#setupProbabilityPanel .probDeckControlsRow{
  grid-template-columns:minmax(180px, .72fr) minmax(210px, 1fr)!important;
  gap:9px!important;
}
#setupProbabilityPanel .probDeckSelectField{
  min-width:180px!important;
}
#setupProbabilityPanel .probSearchField{
  min-width:0!important;
}
#setupProbabilityPanel #probDeckSelect{
  font-size:15px!important;
  font-weight:1000!important;
}
#setupProbabilityPanel #probDeckFilter{
  font-size:14px!important;
}

/* Removing the known-order subhint gives the lanes more vertical image space. */
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex-basis:218px!important;
  min-height:218px!important;
  max-height:218px!important;
  padding-top:12px!important;
}
#setupProbabilityPanel .probKnownGridThree{
  margin-top:4px!important;
  height:150px!important;
  min-height:150px!important;
  max-height:150px!important;
  align-items:stretch!important;
}
#setupProbabilityPanel .probKnownList{
  height:119px!important;
  min-height:119px!important;
  max-height:119px!important;
  overflow-y:auto!important;
}
#setupProbabilityPanel .probKnownRow{
  min-height:58px!important;
}
#setupProbabilityPanel .probKnownRow img,
#setupProbabilityPanel .probKnownFallback{
  width:42px!important;
  height:60px!important;
  object-fit:cover!important;
}

/* Top HUD breakdown now intentionally only shows Modeled / Top / Pool. */
#setupProbabilityPanel .probTopHudGrid{
  grid-template-columns:repeat(3,auto)!important;
  gap:10px!important;
}
#setupProbabilityPanel .probTopBreakdown{
  max-width:360px!important;
}

/* Preserve the middle lane, but shave the whole page a touch horizontally. */
#setupProbabilityPanel .probSimpleLayout{
  grid-template-columns:minmax(430px,.78fr) minmax(760px,1.28fr) minmax(380px,.68fr)!important;
}
@media (min-width:1700px){
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(455px,.78fr) minmax(795px,1.28fr) minmax(390px,.68fr)!important;
  }
}
@media (max-width:1500px){
  #setupProbabilityPanel{
    width:calc(100vw - 28px)!important;
  }
  #setupProbabilityPanel .probSimpleLayout{
    grid-template-columns:minmax(350px,.76fr) minmax(590px,1.24fr) minmax(300px,.66fr)!important;
  }
  #setupProbabilityPanel .probDeckControlsRow{
    grid-template-columns:minmax(155px,.76fr) minmax(170px,.9fr)!important;
  }
  #setupProbabilityPanel .probKnownGridThree{
    height:132px!important;
    min-height:132px!important;
    max-height:132px!important;
  }
  #setupProbabilityPanel .probKnownList{
    height:103px!important;
    min-height:103px!important;
    max-height:103px!important;
  }
  #setupProbabilityPanel .probKnownRow img,
  #setupProbabilityPanel .probKnownFallback{
    width:36px!important;
    height:52px!important;
  }
}

/* ======================================================
   Deck Consistency Lab v18 known-order drag + HUD cleanup
   - restore discard names
   - keep mini card art inside known-order rows
   - drag/drop reorder for known top/bottom rows
   - remove redundant top HUD cards and enlarge remaining HUD text
   ====================================================== */
#setupProbabilityPanel .probTopHud > .probStatCard{
  display:none!important;
}
#setupProbabilityPanel .probTopHud{
  grid-template-columns:minmax(300px, 1.05fr) minmax(260px, .9fr)!important;
  gap:9px!important;
}
#setupProbabilityPanel .probTopBreakdown,
#setupProbabilityPanel .probTopHistory{
  min-height:55px!important;
  padding:8px 12px!important;
}
#setupProbabilityPanel .probTopHudTitle{
  font-size:10px!important;
  letter-spacing:.12em!important;
  margin-bottom:4px!important;
}
#setupProbabilityPanel .probTopHudGrid{
  font-size:14px!important;
  gap:18px!important;
}
#setupProbabilityPanel .probTopHudGrid b{
  font-size:15px!important;
}
#setupProbabilityPanel .probTopLastAction{
  font-size:14px!important;
  line-height:1.05!important;
}
#setupProbabilityPanel .probTopUndoCount{
  font-size:11px!important;
  margin-top:3px!important;
}

/* Known order: bigger lane, smaller contained image art, no vertical spill. */
#setupProbabilityPanel .probSimpleColumn:nth-child(2) > .probCard:first-child{
  flex:0 0 224px!important;
  min-height:224px!important;
  max-height:224px!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probKnownGridThree{
  height:158px!important;
  min-height:158px!important;
  max-height:158px!important;
}
#setupProbabilityPanel .probKnownList{
  height:126px!important;
  min-height:126px!important;
  max-height:126px!important;
  padding:6px!important;
  overflow-y:auto!important;
  overflow-x:hidden!important;
}
#setupProbabilityPanel .probKnownRow{
  min-height:56px!important;
  height:56px!important;
  max-height:56px!important;
  align-items:center!important;
  overflow:hidden!important;
  cursor:grab;
}
#setupProbabilityPanel .probKnownRow:active{
  cursor:grabbing;
}
#setupProbabilityPanel .probKnownRow img,
#setupProbabilityPanel .probKnownFallback{
  width:36px!important;
  height:50px!important;
  max-height:50px!important;
  object-fit:contain!important;
  align-self:center!important;
}
#setupProbabilityPanel .probKnownDragging{
  opacity:.48!important;
  transform:scale(.985);
}
#setupProbabilityPanel .probKnownDropTarget{
  border-color:rgba(104,229,255,.72)!important;
  box-shadow:0 0 0 2px rgba(104,229,255,.18), 0 0 22px rgba(104,229,255,.16)!important;
}
#setupProbabilityPanel .probKnownRow button{
  cursor:pointer;
}

/* Known discard should include names again. */
#setupProbabilityPanel #probKnownDiscardList .probKnownName{
  display:block!important;
  font-size:12px!important;
  font-weight:900!important;
  min-width:0!important;
}
#setupProbabilityPanel #probKnownDiscardList .probKnownRow{
  grid-template-columns:25px 36px minmax(0,1fr) 34px!important;
}
#setupProbabilityPanel #probKnownDiscardList .smallbtn.good{
  width:34px!important;
  min-width:34px!important;
  height:34px!important;
  min-height:34px!important;
}

@media (max-width:1500px){
  #setupProbabilityPanel .probTopHud{
    grid-template-columns:minmax(230px, 1fr) minmax(210px, .9fr)!important;
  }
  #setupProbabilityPanel .probTopHudGrid{font-size:12px!important;gap:10px!important;}
  #setupProbabilityPanel .probTopHudGrid b{font-size:13px!important;}
  #setupProbabilityPanel .probTopLastAction{font-size:12px!important;}
  #setupProbabilityPanel .probKnownGridThree{height:142px!important;min-height:142px!important;max-height:142px!important;}
  #setupProbabilityPanel .probKnownList{height:112px!important;min-height:112px!important;max-height:112px!important;}
  #setupProbabilityPanel .probKnownRow{height:50px!important;min-height:50px!important;max-height:50px!important;}
  #setupProbabilityPanel .probKnownRow img,#setupProbabilityPanel .probKnownFallback{width:32px!important;height:44px!important;max-height:44px!important;}
  #setupProbabilityPanel #probKnownDiscardList .probKnownRow{grid-template-columns:22px 32px minmax(0,1fr) 30px!important;}
}

/* ======================================================
   Deck Consistency Lab v19 premium result gauge skin
   Visual-only: modern AAA TCG holographic dial.
   ====================================================== */
#setupProbabilityPanel .probGauge{
  position:relative!important;
  isolation:isolate!important;
  border-radius:50%!important;
  padding:12px!important;
  overflow:visible!important;
  border:1px solid rgba(140,232,255,.16)!important;
  box-shadow:
    0 24px 54px rgba(0,0,0,.42),
    0 0 0 1px rgba(255,255,255,.035),
    inset 0 0 0 1px rgba(255,255,255,.08),
    inset 0 0 34px rgba(104,229,255,.07)!important;
}
#setupProbabilityPanel .probGauge::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:50%;
  z-index:-2;
  background:
    conic-gradient(from -90deg,
      rgba(104,229,255,.0) 0deg,
      rgba(104,229,255,.40) var(--prob-deg, 0deg),
      rgba(115,139,170,.10) var(--prob-deg, 0deg) 360deg);
  filter:blur(18px);
  opacity:.62;
  pointer-events:none;
}
#setupProbabilityPanel .probGauge::after{
  content:"";
  position:absolute;
  inset:7px;
  border-radius:50%;
  z-index:-1;
  background:
    repeating-conic-gradient(from -90deg,
      rgba(255,255,255,.16) 0deg 1.1deg,
      transparent 1.1deg 12deg),
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(255,255,255,.08) 59%, transparent 61%);
  opacity:.20;
  pointer-events:none;
  mask:radial-gradient(circle, transparent 56%, #000 57% 75%, transparent 76%);
  -webkit-mask:radial-gradient(circle, transparent 56%, #000 57% 75%, transparent 76%);
}
#setupProbabilityPanel .probGaugeInner{
  position:relative!important;
  width:100%!important;
  height:100%!important;
  border-radius:50%!important;
  overflow:hidden!important;
  background:
    radial-gradient(circle at 36% 22%, rgba(154,242,255,.18), transparent 0 24%, transparent 25%),
    radial-gradient(circle at 49% 54%, rgba(4,8,18,.82) 0 47%, rgba(4,10,24,.96) 64%, rgba(2,6,16,.98) 100%),
    linear-gradient(145deg, rgba(255,255,255,.08), rgba(255,255,255,0) 42%)!important;
  box-shadow:
    inset 0 0 0 1px rgba(255,255,255,.07),
    inset 0 22px 42px rgba(255,255,255,.035),
    inset 0 -22px 46px rgba(0,0,0,.42)!important;
}
#setupProbabilityPanel .probGaugeInner::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  background:
    linear-gradient(135deg, rgba(255,255,255,.18), rgba(255,255,255,0) 34%),
    radial-gradient(circle at 33% 25%, rgba(255,255,255,.22), transparent 0 7%, transparent 8%);
  opacity:.62;
  pointer-events:none;
}
#setupProbabilityPanel .probGaugeInner::after{
  content:"";
  position:absolute;
  inset:12%;
  border-radius:50%;
  border:1px solid rgba(126,231,255,.13);
  box-shadow:0 0 32px rgba(104,229,255,.08), inset 0 0 28px rgba(0,0,0,.22);
  pointer-events:none;
}
#setupProbabilityPanel .probPercent{
  position:relative!important;
  z-index:2!important;
  text-shadow:
    0 0 18px rgba(104,229,255,.28),
    0 6px 24px rgba(0,0,0,.44)!important;
}
#setupProbabilityPanel .probLabel{
  position:relative!important;
  z-index:2!important;
  color:#9af4ff!important;
  text-shadow:0 0 14px rgba(104,229,255,.34)!important;
}

/* ======================================================
   Deck Consistency Lab v20 deck-pool HUD + grid view
   Visual/UI only: move deck-pool stats to top HUD and add
   a polished grid browse mode without changing calculator math.
   ====================================================== */
#setupProbabilityPanel .probDeckPoolHeader{
  margin-bottom:8px!important;
}
#setupProbabilityPanel .probDeckPoolHeader .probDeckSummary{
  display:none!important;
}
#setupProbabilityPanel .probTopHud{
  grid-template-columns:minmax(245px,.88fr) minmax(360px,1.18fr) minmax(245px,.88fr)!important;
  align-items:stretch!important;
}
#setupProbabilityPanel .probTopDeckPoolSummary{
  min-height:55px!important;
  padding:8px 12px!important;
  border-color:rgba(82,205,185,.24)!important;
  background:
    linear-gradient(135deg, rgba(32,98,102,.18), rgba(92,68,155,.12)),
    rgba(255,255,255,.045)!important;
}
#setupProbabilityPanel .probTopDeckPoolGrid{
  display:grid!important;
  grid-template-columns:repeat(5, auto)!important;
  align-items:center!important;
  justify-content:start!important;
  gap:12px!important;
  white-space:nowrap!important;
  font-size:13px!important;
  font-weight:950!important;
  color:#c9d7ec!important;
  letter-spacing:.01em!important;
}
#setupProbabilityPanel .probTopDeckPoolGrid b{
  color:#ffffff!important;
  font-size:15px!important;
  margin-left:3px!important;
  text-shadow:0 0 12px rgba(104,229,255,.14)!important;
}
#setupProbabilityPanel .probGridToggle{
  margin:8px 0 0 10px!important;
  min-height:34px!important;
  padding:7px 14px!important;
  border-radius:999px!important;
  font-size:13px!important;
  font-weight:1000!important;
  background:
    linear-gradient(135deg, rgba(104,229,255,.14), rgba(145,112,255,.15)),
    rgba(255,255,255,.055)!important;
  border:1px solid rgba(131,230,255,.22)!important;
  box-shadow:0 10px 22px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.08)!important;
}
#setupProbabilityPanel .probGridToggle:hover{
  transform:translateY(-1px)!important;
  border-color:rgba(104,229,255,.44)!important;
  box-shadow:0 14px 28px rgba(0,0,0,.28),0 0 18px rgba(104,229,255,.12)!important;
}

/* Scroll mode remains the cinematic card belt. Grid view becomes a compact
   visual binder so every card in the deck is reachable at once. */
#setupProbabilityPanel .probDeckRoster.isGridView{
  display:grid!important;
  grid-template-columns:repeat(auto-fill,minmax(118px,1fr))!important;
  grid-auto-columns:unset!important;
  grid-auto-flow:row!important;
  gap:10px!important;
  overflow-x:hidden!important;
  overflow-y:auto!important;
  scroll-snap-type:none!important;
  padding:10px!important;
  align-items:start!important;
  align-content:start!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow{
  min-width:0!important;
  width:100%!important;
  display:grid!important;
  grid-template-columns:1fr!important;
  gap:6px!important;
  padding:0!important;
  border:0!important;
  background:transparent!important;
  scroll-snap-align:none!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckArtFrame{
  height:166px!important;
  min-height:166px!important;
  max-height:166px!important;
  border-radius:15px!important;
  box-shadow:0 14px 28px rgba(0,0,0,.34),0 0 0 1px rgba(255,255,255,.07)!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckThumb{
  object-fit:contain!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckFloatCounts{
  top:5px!important;
  left:5px!important;
  right:5px!important;
  gap:4px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckFloatCounts span{
  padding:4px 6px!important;
  border-radius:999px!important;
  font-size:10px!important;
  line-height:1!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions{
  left:5px!important;
  right:5px!important;
  bottom:5px!important;
  gap:4px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probCardAction{
  min-width:0!important;
  width:30px!important;
  height:25px!important;
  min-height:25px!important;
  padding:0!important;
  flex:0 0 30px!important;
  font-size:0!important;
  border-radius:999px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probCardAction::before{
  font-size:11px!important;
  font-weight:1000!important;
  line-height:1!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions button:nth-child(1)::before{content:"D";}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions button:nth-child(2)::before{content:"T";}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions button:nth-child(3)::before{content:"B";}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckInfo{
  min-height:40px!important;
  padding:0 2px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckCardName{
  font-size:12px!important;
  line-height:1.05!important;
  white-space:nowrap!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckMeta span{
  font-size:9px!important;
  padding:3px 7px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckCountBar{
  display:none!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow.isExhausted .probDeckArtFrame{
  filter:grayscale(.78) brightness(.58) saturate(.58)!important;
  opacity:.72!important;
}

@media (max-width:1500px){
  #setupProbabilityPanel .probTopHud{
    grid-template-columns:minmax(195px,.82fr) minmax(290px,1.1fr) minmax(200px,.82fr)!important;
  }
  #setupProbabilityPanel .probTopDeckPoolGrid{
    grid-template-columns:repeat(3, auto)!important;
    gap:7px 10px!important;
    font-size:11px!important;
  }
  #setupProbabilityPanel .probTopDeckPoolGrid b{font-size:12px!important;}
  #setupProbabilityPanel .probDeckRoster.isGridView{
    grid-template-columns:repeat(auto-fill,minmax(100px,1fr))!important;
    gap:8px!important;
  }
  #setupProbabilityPanel .probDeckRoster.isGridView .probDeckArtFrame{
    height:146px!important;
    min-height:146px!important;
    max-height:146px!important;
  }
}

/* ======================================================
   Deck Consistency Lab v21 HUD rounding + explicit deck grid toggle
   Visual-only patch: match top HUD card styling and make the deck
   grid toggle clearly visible below the card belt.
   ====================================================== */
#setupProbabilityPanel .probTopDeckPoolSummary{
  border-radius:16px!important;
  border:1px solid rgba(255,255,255,.09)!important;
  overflow:hidden!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.06), 0 12px 26px rgba(0,0,0,.18)!important;
}
#setupProbabilityPanel .probTopDeckPoolSummary::before{border-radius:inherit!important;}

#setupProbabilityPanel .probDeckEditorCard{
  display:flex!important;
  flex-direction:column!important;
}
#setupProbabilityPanel .probGridToggle{
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  align-self:flex-start!important;
  margin:10px 0 0 12px!important;
  min-height:34px!important;
  padding:7px 16px!important;
  border-radius:999px!important;
  white-space:nowrap!important;
  position:relative!important;
  z-index:5!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView{
  max-height:430px!important;
  min-height:0!important;
  padding-bottom:12px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction{
  box-shadow:0 6px 14px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.12)!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckArtFrame{
  cursor:zoom-in!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow.isExhausted .probDeckArtFrame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background:linear-gradient(180deg,rgba(5,10,20,.22),rgba(5,10,20,.48));
  pointer-events:none;
}

/* ======================================================
   Deck Consistency Lab v22 grid-view visual cleanup
   Visual-only: hover-only vertical action dots, no names/types in grid.
   ====================================================== */
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckInfo{
  display:none!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow{
  gap:0!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckArtFrame{
  overflow:hidden!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions{
  position:absolute!important;
  left:7px!important;
  right:auto!important;
  top:50%!important;
  bottom:auto!important;
  transform:translateY(-50%) translateX(-5px)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:5px!important;
  width:auto!important;
  padding:4px!important;
  border-radius:999px!important;
  background:rgba(4,10,22,.30)!important;
  border:1px solid rgba(255,255,255,.10)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.34), inset 0 1px 0 rgba(255,255,255,.08)!important;
  opacity:0!important;
  pointer-events:none!important;
  transition:opacity .16s ease, transform .16s ease!important;
  z-index:7!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow:hover .probDeckRowActions,
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow:focus-within .probDeckRowActions{
  opacity:1!important;
  pointer-events:auto!important;
  transform:translateY(-50%) translateX(0)!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction{
  width:18px!important;
  height:18px!important;
  min-width:18px!important;
  max-width:18px!important;
  min-height:18px!important;
  max-height:18px!important;
  flex:0 0 18px!important;
  padding:0!important;
  border-radius:999px!important;
  font-size:0!important;
  color:transparent!important;
  border:1px solid rgba(255,255,255,.24)!important;
  box-shadow:0 5px 12px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.18)!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction::before{
  content:""!important;
  display:none!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction.danger{
  background:linear-gradient(180deg,rgba(255,88,112,.96),rgba(151,27,53,.94))!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction.purple{
  background:linear-gradient(180deg,rgba(143,113,255,.98),rgba(78,49,184,.96))!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction:not(.danger):not(.purple){
  background:linear-gradient(180deg,rgba(62,94,141,.98),rgba(20,39,71,.96))!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions .probCardAction:hover{
  transform:scale(1.16)!important;
  filter:saturate(1.18) brightness(1.08)!important;
}
@media (hover:none){
  #setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions{
    opacity:1!important;
    pointer-events:auto!important;
    transform:translateY(-50%) translateX(0)!important;
  }
}


/* ======================================================
   Deck Consistency Lab v23 grid drag/hover refinement
   Visual-only: raise hover controls and make grid binder drag-scrollable.
   ====================================================== */
#setupProbabilityPanel .probDeckRoster.isGridView{
  cursor:grab!important;
  touch-action:none!important;
  user-select:none!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView.isDragging{
  cursor:grabbing!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions{
  top:43%!important;
  transform:translateY(-50%) translateX(-5px)!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow:hover .probDeckRowActions,
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow:focus-within .probDeckRowActions{
  transform:translateY(-50%) translateX(0)!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckThumb{
  -webkit-user-drag:none!important;
  user-select:none!important;
}

/* ======================================================
   Deck Consistency Lab v24 grid spacing + performance pass
   Visual-only for grid spacing; JS uses faster exact DP counting.
   ====================================================== */
#setupProbabilityPanel .probDeckRoster.isGridView{
  row-gap:22px!important;
  column-gap:12px!important;
  grid-auto-rows:166px!important;
  align-content:start!important;
  justify-content:stretch!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow{
  height:166px!important;
  min-height:166px!important;
  max-height:166px!important;
  align-self:start!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckArtFrame{
  height:166px!important;
  min-height:166px!important;
  max-height:166px!important;
}
#setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions{
  top:38%!important;
}
@media (max-width:1500px){
  #setupProbabilityPanel .probDeckRoster.isGridView{
    row-gap:20px!important;
    column-gap:10px!important;
    grid-auto-rows:146px!important;
  }
  #setupProbabilityPanel .probDeckRoster.isGridView .probDeckRow,
  #setupProbabilityPanel .probDeckRoster.isGridView .probDeckArtFrame{
    height:146px!important;
    min-height:146px!important;
    max-height:146px!important;
  }
  #setupProbabilityPanel .probDeckRoster.isGridView .probDeckRowActions{
    top:37%!important;
  }
}

/* ======================================================
   Deck editor current-deck fullscreen thumb affordance
   ====================================================== */
.deckCurrentZoomThumb{
  cursor:zoom-in;
  outline:none;
  border-radius:12px;
  transition:transform .14s ease, box-shadow .14s ease, filter .14s ease;
}
.deckCurrentZoomThumb:hover,
.deckCurrentZoomThumb:focus-visible{
  transform:translateY(-1px) scale(1.04);
  box-shadow:0 0 0 2px rgba(104,229,255,.28), 0 10px 24px rgba(0,0,0,.36);
  filter:saturate(1.08) brightness(1.06);
}
.deckCurrentZoomThumb img{
  pointer-events:none;
}

/* ======================================================
   Shared battle action animations — visual-only overlay
   ====================================================== */
.battleFxRoot{
  position:fixed;
  inset:0;
  z-index:9997;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint;
}
.battleFxCard img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  user-select:none;
  pointer-events:none;
}

/* Fluid side-anchored deck shuffle */
.battleShuffleFx{
  position:absolute;
  left:var(--fx-x, 50vw);
  top:var(--fx-y, 50vh);
  width:300px;
  height:260px;
  opacity:0;
  transform:translate(-50%,-50%) scale(.92);
  filter:drop-shadow(0 26px 55px rgba(0,0,0,.42));
}
.battleShuffleFx.battleFx--live{
  animation:battleFxNodeFade 1.68s cubic-bezier(.16,.9,.22,1) both;
}
.battleShuffleFx__halo{
  position:absolute;
  inset:-42px -58px;
  border-radius:999px;
  background:
    radial-gradient(circle at 50% 50%, rgba(103,232,249,.34), rgba(99,102,241,.16) 35%, rgba(15,23,42,.02) 66%, transparent 78%);
  filter:blur(16px);
  opacity:.0;
}
.battleFx--live .battleShuffleFx__halo{ animation:battleFxHalo 1.48s ease-out both; }
.battleShuffleFx__stage{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 40%, rgba(103,232,249,.16), rgba(15,23,42,.22) 47%, transparent 72%);
  transform:translateZ(0);
}
.battleShuffleFx__stream{
  position:relative;
  width:132px;
  height:184px;
  perspective:900px;
  transform-style:preserve-3d;
}
.battleShuffleFx__card{
  position:absolute;
  inset:0;
  border-radius:10px;
  overflow:hidden;
  box-shadow:0 14px 26px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.2), 0 0 18px rgba(34,211,238,.13);
  transform:translate3d(calc((var(--i) - 9) * .9px), calc((var(--i) - 9) * .55px), 0) rotate(calc((var(--i) - 9) * .32deg));
  opacity:.98;
}
.battleFx--live .battleShuffleFx__card{
  animation:battleCardRiffle 1.36s cubic-bezier(.18,.85,.2,1) both;
  animation-delay:calc(var(--i) * 14ms);
}
.battleShuffleFx__deckCore{
  position:absolute;
  width:126px;
  height:176px;
  transform:translateY(2px);
  pointer-events:none;
}
.battleShuffleFx__deckCore span{
  position:absolute;
  inset:0;
  border-radius:10px;
  background:linear-gradient(145deg, rgba(8,22,45,.82), rgba(24,61,92,.72));
  border:1px solid rgba(167,243,255,.12);
  transform:translate(calc(var(--i) * .9px), calc(var(--i) * .55px));
  opacity:.2;
}
.battleShuffleFx__title,
.battleShuffleFx__subtitle{
  position:absolute;
  left:-24px;
  right:-24px;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 3px 12px rgba(0,0,0,.55), 0 0 18px rgba(103,232,249,.28);
  pointer-events:none;
}
.battleShuffleFx__title{
  bottom:18px;
  font-size:.92rem;
  font-weight:1000;
  letter-spacing:.14em;
  color:#effcff;
}
.battleShuffleFx__subtitle{
  bottom:2px;
  font-size:.62rem;
  font-weight:900;
  letter-spacing:.08em;
  color:rgba(191,239,255,.78);
}
.battleFx--live .battleShuffleFx__title,
.battleFx--live .battleShuffleFx__subtitle{ animation:battleFxText 1.5s ease both; }
@keyframes battleFxNodeFade{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.86)}
  10%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  78%{opacity:1;transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0;transform:translate(-50%,-50%) scale(.98)}
}
@keyframes battleFxHalo{
  0%{opacity:0;transform:scale(.6)}
  18%{opacity:1;transform:scale(1)}
  74%{opacity:.8;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.12)}
}
@keyframes battleCardRiffle{
  0%{transform:translate3d(calc((var(--i) - 9) * .9px), calc((var(--i) - 9) * .55px), 0) rotate(calc((var(--i) - 9) * .32deg));}
  18%{transform:translate3d(calc(-66px + var(--i) * 7.8px), calc(-10px + (var(--i) % 5) * 4px), 42px) rotate(calc(-13deg + var(--i) * 1.6deg)) rotateY(-16deg);}
  38%{transform:translate3d(calc(62px - var(--i) * 7px), calc(10px - (var(--i) % 5) * 4px), 52px) rotate(calc(12deg - var(--i) * 1.35deg)) rotateY(16deg);}
  60%{transform:translate3d(calc(-36px + var(--i) * 4.1px), calc((var(--i) - 9) * .4px), 24px) rotate(calc(-6deg + var(--i) * .7deg));}
  84%{transform:translate3d(calc((var(--i) - 9) * 1.1px), calc((var(--i) - 9) * .6px), 4px) rotate(calc((var(--i) - 9) * .25deg));}
  100%{transform:translate3d(calc((var(--i) - 9) * .9px), calc((var(--i) - 9) * .55px), 0) rotate(calc((var(--i) - 9) * .32deg));}
}
@keyframes battleFxText{
  0%{opacity:0;transform:translateY(6px)}
  18%{opacity:1;transform:translateY(0)}
  76%{opacity:1;transform:translateY(0)}
  100%{opacity:0;transform:translateY(-4px)}
}

/* Coin flip */
.battleCoinFx{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
}
.battleCoinFx.battleFx--live{ animation:battleCoinFade 1.95s cubic-bezier(.16,.86,.22,1) both; }
.battleCoinFx__halo{
  position:absolute;
  width:min(460px,46vw);
  height:min(460px,46vw);
  border-radius:50%;
  background:radial-gradient(circle, rgba(251,191,36,.34), rgba(103,232,249,.14) 40%, transparent 72%);
  filter:blur(18px);
}
.battleCoinFx__stage{ position:relative; display:grid; place-items:center; min-width:320px; min-height:320px; }
.battleCoinFx__coin{
  position:relative;
  width:138px;
  height:138px;
  border-radius:50%;
  transform-style:preserve-3d;
  box-shadow:0 28px 58px rgba(0,0,0,.48), 0 0 0 3px rgba(255,255,255,.14), 0 0 42px rgba(251,191,36,.3);
}
.battleFx--live .battleCoinFx__coin{ animation:battleCoinSpin 1.38s cubic-bezier(.16,.82,.2,1) both; }
.battleCoinFx__face{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  border-radius:50%;
  font-size:4.6rem;
  font-weight:1000;
  color:#fff7d6;
  background:
    radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 28%),
    radial-gradient(circle at 50% 50%, #facc15, #d97706 62%, #7c2d12 100%);
  border:3px solid rgba(255,244,190,.68);
  backface-visibility:hidden;
}
.battleCoinFx__face--tails{ transform:rotateY(180deg); background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.38), transparent 28%), radial-gradient(circle at 50% 50%, #67e8f9, #2563eb 64%, #1e1b4b 100%); }
.battleCoinFx__title,
.battleCoinFx__result{
  position:absolute;
  text-align:center;
  text-transform:uppercase;
  text-shadow:0 4px 16px rgba(0,0,0,.65), 0 0 24px rgba(251,191,36,.25);
}
.battleCoinFx__title{ bottom:38px; font-size:.9rem; letter-spacing:.16em; font-weight:1000; color:#fff7ed; }
.battleCoinFx__result{ bottom:4px; font-size:1.7rem; letter-spacing:.08em; font-weight:1000; color:#fef3c7; }
@keyframes battleCoinFade{0%{opacity:0}10%{opacity:1}82%{opacity:1}100%{opacity:0}}
@keyframes battleCoinSpin{
  0%{transform:translateY(44px) rotateY(0deg) rotateX(18deg) scale(.72)}
  36%{transform:translateY(-56px) rotateY(900deg) rotateX(24deg) scale(1.08)}
  68%{transform:translateY(8px) rotateY(1530deg) rotateX(12deg) scale(1)}
  100%{transform:translateY(0) rotateY(1800deg) rotateX(0deg) scale(1)}
}

/* Inspect / Disrupt: both-hand refresh sequence */
.battleRefreshFx{
  position:absolute;
  inset:0;
  display:grid;
  place-items:center;
  opacity:0;
}
.battleRefreshFx.battleFx--live{ animation:battleRefreshFade 3.0s ease both; }
.battleRefreshFx__glass{
  position:absolute;
  width:min(1120px,90vw);
  height:min(520px,72vh);
  border-radius:36px;
  background:radial-gradient(circle at 50% 35%, rgba(103,232,249,.13), rgba(15,23,42,.32) 52%, rgba(2,6,23,.12));
  border:1px solid rgba(148,246,255,.18);
  box-shadow:0 38px 100px rgba(0,0,0,.32), inset 0 0 56px rgba(103,232,249,.08);
  backdrop-filter:blur(4px) saturate(125%);
}
.battleRefreshFx__title,
.battleRefreshFx__subtitle{
  position:absolute;
  top:calc(50% - min(240px,34vh));
  text-align:center;
  text-transform:uppercase;
  letter-spacing:.14em;
  font-weight:1000;
  color:#ecfeff;
  text-shadow:0 4px 18px rgba(0,0,0,.62),0 0 24px rgba(103,232,249,.2);
}
.battleRefreshFx__subtitle{ margin-top:26px; font-size:.68rem; color:rgba(207,250,254,.78); letter-spacing:.09em; }
.battleRefreshFx__lanes{
  position:relative;
  width:min(960px,84vw);
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:min(8vw,90px);
  align-items:center;
}
.battleRefreshFx__lane{
  position:relative;
  min-height:310px;
  display:grid;
  place-items:center;
}
.battleRefreshFx__laneTitle{
  position:absolute;
  top:10px;
  padding:6px 14px;
  border-radius:999px;
  background:rgba(12,29,52,.72);
  border:1px solid rgba(125,211,252,.26);
  color:#dffaff;
  font-weight:1000;
  letter-spacing:.09em;
  text-transform:uppercase;
  font-size:.72rem;
}
.battleRefreshFx__hand,
.battleRefreshFx__deck,
.battleRefreshFx__draw{ position:absolute; width:94px; height:132px; transform-style:preserve-3d; }
.battleRefreshFx__hand{ left:12%; top:96px; }
.battleRefreshFx__deck{ right:16%; top:96px; }
.battleRefreshFx__draw{ right:10%; top:96px; }
.battleRefreshFx__handCard,
.battleRefreshFx__deckCard,
.battleRefreshFx__drawCard{
  position:absolute;
  inset:0;
  border-radius:8px;
  overflow:hidden;
  box-shadow:0 12px 24px rgba(0,0,0,.34), 0 0 0 1px rgba(255,255,255,.16);
  transform:translate(calc((var(--i) - 3) * 8px), calc((var(--i) % 3) * 2px)) rotate(calc((var(--i) - 3) * 2deg));
}
.battleFx--live .battleRefreshFx__handCard{ animation:battleRefreshHandToDeck 1.05s cubic-bezier(.2,.82,.2,1) both; animation-delay:calc(var(--i) * 28ms); }
.battleFx--live .battleRefreshFx__deckCard{ animation:battleRefreshDeckShuffle 1.1s cubic-bezier(.2,.82,.2,1) both; animation-delay:1.0s; }
.battleFx--live .battleRefreshFx__drawCard{ animation:battleRefreshDraw 1.0s cubic-bezier(.2,.82,.2,1) both; animation-delay:1.78s; opacity:0; }
.battleRefreshFx__caption{
  position:absolute;
  bottom:22px;
  padding:7px 13px;
  border-radius:999px;
  background:rgba(15,23,42,.72);
  border:1px solid rgba(148,246,255,.18);
  color:#d9faff;
  font-weight:1000;
  text-transform:uppercase;
  letter-spacing:.08em;
  font-size:.68rem;
}
@keyframes battleRefreshFade{0%{opacity:0}8%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes battleRefreshHandToDeck{
  0%{opacity:1; transform:translate(calc((var(--i) - 3) * 8px), calc((var(--i) % 3) * 2px)) rotate(calc((var(--i) - 3) * 2deg));}
  58%{opacity:1; transform:translate(calc(160px - var(--i) * 4px), calc(-12px + (var(--i) % 4) * 4px)) rotate(calc(18deg - var(--i) * 2deg)) scale(.92);}
  100%{opacity:0; transform:translate(198px,0) rotate(0deg) scale(.75);}
}
@keyframes battleRefreshDeckShuffle{
  0%{transform:translate(calc((var(--i) - 4) * 2px), calc((var(--i) - 4) * 1px)) rotate(calc((var(--i) - 4) * .5deg));}
  35%{transform:translate(calc(-34px + var(--i) * 7px), calc((var(--i) % 4) * 5px)) rotate(calc(-10deg + var(--i) * 1.7deg));}
  68%{transform:translate(calc(28px - var(--i) * 5px), calc((var(--i) % 3) * -5px)) rotate(calc(8deg - var(--i) * 1.2deg));}
  100%{transform:translate(calc((var(--i) - 4) * 2px), calc((var(--i) - 4) * 1px)) rotate(calc((var(--i) - 4) * .5deg));}
}
@keyframes battleRefreshDraw{
  0%{opacity:0; transform:translate(-8px,0) scale(.78) rotate(-4deg);}
  18%{opacity:1;}
  100%{opacity:1; transform:translate(calc(-150px + var(--i) * 12px), calc(80px + (var(--i) % 2) * 8px)) scale(.82) rotate(calc(-8deg + var(--i) * 2deg));}
}
@media (prefers-reduced-motion: reduce){
  .battleFxRoot *{animation-duration:520ms!important;animation-iteration-count:1!important;transition-duration:0ms!important;}
}

/* ======================================================
   V29 premium shared action animation pass
   - smoother deck shuffles
   - shared random board spot reveal
   ====================================================== */
.battleShuffleFx{
  width:360px;
  height:286px;
  transform:translate(-50%,-50%) scale(.94);
  filter:drop-shadow(0 32px 70px rgba(0,0,0,.50));
  will-change:opacity, transform;
}
.battleShuffleFx.battleFx--live{
  animation:battleShufflePremiumLife 2.16s cubic-bezier(.16,.84,.22,1) both;
}
.battleShuffleFx__aura{
  position:absolute;
  inset:-58px -78px;
  border-radius:999px;
  opacity:0;
  background:
    radial-gradient(circle at 50% 50%, rgba(103,232,249,.36), rgba(34,211,238,.14) 34%, rgba(99,102,241,.08) 58%, transparent 76%),
    conic-gradient(from 210deg, transparent, rgba(103,232,249,.22), transparent 42%, rgba(168,85,247,.14), transparent 74%);
  filter:blur(18px) saturate(125%);
  will-change:opacity, transform;
}
.battleFx--live .battleShuffleFx__aura{ animation:battleShuffleAura 2.0s ease-out both; }
.battleShuffleFx__stage{
  position:absolute;
  inset:0;
  border-radius:34px;
  overflow:visible;
  background:radial-gradient(circle at 50% 42%, rgba(103,232,249,.13), rgba(15,23,42,.12) 48%, transparent 72%);
  transform-style:preserve-3d;
  perspective:1100px;
  will-change:transform;
}
.battleShuffleFx__packet,
.battleShuffleFx__bridge,
.battleShuffleFx__deckCore{
  position:absolute;
  left:50%;
  top:46%;
  width:116px;
  height:162px;
  transform-style:preserve-3d;
  transform:translate(-50%,-50%);
}
.battleShuffleFx__packet--left{ transform:translate(calc(-50% - 76px), -50%) rotate(-7deg); }
.battleShuffleFx__packet--right{ transform:translate(calc(-50% + 76px), -50%) rotate(7deg); }
.battleShuffleFx__bridge{ opacity:0; }
.battleShuffleFx__card{
  position:absolute;
  inset:0;
  border-radius:9px;
  overflow:hidden;
  opacity:.98;
  transform:translate3d(calc((var(--i) - 4) * 1.4px), calc((var(--i) - 4) * .8px), 0) rotate(calc((var(--i) - 4) * .38deg));
  box-shadow:0 14px 26px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.18), 0 0 18px rgba(34,211,238,.12);
  will-change:transform, opacity, filter;
}
.battleFx--live .battleShuffleFx__card--left{ animation:battleShuffleLeftPacket 1.64s cubic-bezier(.18,.84,.2,1) both; animation-delay:calc(var(--i) * 18ms); }
.battleFx--live .battleShuffleFx__card--right{ animation:battleShuffleRightPacket 1.64s cubic-bezier(.18,.84,.2,1) both; animation-delay:calc(var(--i) * 18ms); }
.battleFx--live .battleShuffleFx__card--bridge{ animation:battleShuffleBridge 1.72s cubic-bezier(.18,.84,.2,1) both; animation-delay:calc(220ms + var(--i) * 20ms); }
.battleShuffleFx__deckCore{
  pointer-events:none;
  filter:drop-shadow(0 24px 40px rgba(0,0,0,.36));
}
.battleShuffleFx__deckCore span{
  position:absolute;
  inset:0;
  border-radius:10px;
  background:linear-gradient(145deg, rgba(7,20,41,.92), rgba(20,61,93,.76));
  border:1px solid rgba(167,243,255,.13);
  transform:translate(calc((var(--i) - 5) * .9px), calc((var(--i) - 5) * .55px)) rotate(calc((var(--i) - 5) * .18deg));
  opacity:.18;
}
.battleFx--live .battleShuffleFx__deckCore{ animation:battleShuffleDeckCore 1.9s cubic-bezier(.18,.84,.2,1) both; }
.battleShuffleFx__slash{
  position:absolute;
  left:50%;
  top:45%;
  width:250px;
  height:5px;
  border-radius:999px;
  transform:translate(-50%,-50%) rotate(-8deg) scaleX(0);
  opacity:0;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.86), rgba(103,232,249,.95), transparent);
  box-shadow:0 0 22px rgba(103,232,249,.45);
  will-change:opacity, transform;
}
.battleFx--live .battleShuffleFx__slash{ animation:battleShuffleSlash 1.18s ease-out .42s both; }
.battleShuffleFx__title{ bottom:28px; font-size:1.02rem; letter-spacing:.16em; }
.battleShuffleFx__subtitle{ bottom:10px; font-size:.66rem; }
.battleFx--live .battleShuffleFx__title,
.battleFx--live .battleShuffleFx__subtitle{ animation:battleFxText 2.02s ease both; }
@keyframes battleShufflePremiumLife{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.88)}
  8%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  84%{opacity:1; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(.985)}
}
@keyframes battleShuffleAura{
  0%{opacity:0; transform:scale(.62) rotate(0deg)}
  16%{opacity:1; transform:scale(1) rotate(8deg)}
  68%{opacity:.88; transform:scale(1.04) rotate(24deg)}
  100%{opacity:0; transform:scale(1.14) rotate(42deg)}
}
@keyframes battleShuffleLeftPacket{
  0%{opacity:.98; transform:translate3d(calc((var(--i) - 4) * 1.4px), calc((var(--i) - 4) * .8px),0) rotate(calc((var(--i) - 4) * .35deg));}
  28%{opacity:1; transform:translate3d(calc(78px + var(--i) * 2.8px), calc(-18px + (var(--i) % 4) * 5px), 42px) rotate(calc(20deg - var(--i) * 1.3deg)) rotateY(-18deg) scale(.94);}
  55%{opacity:.96; transform:translate3d(calc(28px + var(--i) * 1.2px), calc(6px - (var(--i) % 5) * 2px), 20px) rotate(calc(8deg - var(--i) * .5deg)) rotateY(8deg) scale(.98);}
  82%{opacity:1; transform:translate3d(calc((var(--i) - 4) * 1.8px), calc((var(--i) - 4) * .75px), 4px) rotate(calc((var(--i) - 4) * .3deg));}
  100%{opacity:.98; transform:translate3d(calc((var(--i) - 4) * 1.2px), calc((var(--i) - 4) * .65px),0) rotate(calc((var(--i) - 4) * .24deg));}
}
@keyframes battleShuffleRightPacket{
  0%{opacity:.98; transform:translate3d(calc((var(--i) - 4) * 1.4px), calc((var(--i) - 4) * .8px),0) rotate(calc((var(--i) - 4) * .35deg));}
  28%{opacity:1; transform:translate3d(calc(-78px - var(--i) * 2.8px), calc(18px - (var(--i) % 4) * 5px), 42px) rotate(calc(-20deg + var(--i) * 1.3deg)) rotateY(18deg) scale(.94);}
  55%{opacity:.96; transform:translate3d(calc(-28px - var(--i) * 1.2px), calc(-6px + (var(--i) % 5) * 2px), 20px) rotate(calc(-8deg + var(--i) * .5deg)) rotateY(-8deg) scale(.98);}
  82%{opacity:1; transform:translate3d(calc((var(--i) - 4) * 1.8px), calc((var(--i) - 4) * .75px), 4px) rotate(calc((var(--i) - 4) * .3deg));}
  100%{opacity:.98; transform:translate3d(calc((var(--i) - 4) * 1.2px), calc((var(--i) - 4) * .65px),0) rotate(calc((var(--i) - 4) * .24deg));}
}
@keyframes battleShuffleBridge{
  0%{opacity:0; transform:translate3d(calc(-92px + var(--i) * 15px), calc(-34px + (var(--i) % 5) * 11px), 74px) rotate(calc(-22deg + var(--i) * 3.4deg)) scale(.72);}
  18%{opacity:.98;}
  62%{opacity:.9; transform:translate3d(calc(42px - var(--i) * 7px), calc(20px - (var(--i) % 5) * 7px), 40px) rotate(calc(18deg - var(--i) * 2deg)) scale(.86);}
  100%{opacity:0; transform:translate3d(calc((var(--i) - 6) * 1.4px), calc((var(--i) - 6) * .8px), 2px) rotate(calc((var(--i) - 6) * .22deg)) scale(.9);}
}
@keyframes battleShuffleDeckCore{
  0%{transform:translate(-50%,-50%) scale(.96) rotate(-1deg)}
  28%{transform:translate(-50%,-50%) scale(1.05) rotate(2deg)}
  60%{transform:translate(-50%,-50%) scale(.98) rotate(-1deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0)}
}
@keyframes battleShuffleSlash{
  0%{opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scaleX(0)}
  24%{opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scaleX(1)}
  100%{opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scaleX(.2)}
}

/* Random board spot reveal */
.battleRandomSpotFx{
  position:absolute;
  inset:0;
  opacity:0;
  will-change:opacity;
}
.battleRandomSpotFx.battleFx--live{ animation:battleRandomSpotLife 2.42s cubic-bezier(.16,.84,.22,1) both; }
.battleRandomSpotFx__veil{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at var(--winner-x, 50vw) var(--winner-y, 50vh), rgba(103,232,249,.16), rgba(2,6,23,.10) 30%, transparent 62%);
  backdrop-filter:saturate(110%);
}
.battleRandomSpotFx__title,
.battleRandomSpotFx__subtitle,
.battleRandomSpotFx__result{
  position:absolute;
  left:0;
  right:0;
  text-align:center;
  text-transform:uppercase;
  font-weight:1000;
  pointer-events:none;
  text-shadow:0 5px 18px rgba(0,0,0,.65), 0 0 28px rgba(103,232,249,.32);
}
.battleRandomSpotFx__title{ top:11vh; letter-spacing:.18em; font-size:1.05rem; color:#ecfeff; }
.battleRandomSpotFx__subtitle{ top:calc(11vh + 28px); letter-spacing:.1em; font-size:.68rem; color:rgba(207,250,254,.76); }
.battleRandomSpotFx__result{
  top:calc(var(--winner-y, 50vh) + 92px);
  font-size:1.55rem;
  letter-spacing:.08em;
  color:#fefce8;
}
.battleRandomSpotFx__marker{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:calc(var(--w) + 28px);
  height:calc(var(--h) + 28px);
  border-radius:22px;
  transform:translate(-50%,-50%) scale(.72);
  opacity:0;
  border:2px solid rgba(103,232,249,.2);
  box-shadow:0 0 0 1px rgba(255,255,255,.08), inset 0 0 34px rgba(103,232,249,.06), 0 0 28px rgba(103,232,249,.12);
  will-change:transform, opacity, filter;
}
.battleRandomSpotFx__marker span{
  position:absolute;
  inset:7px;
  border-radius:18px;
  border:1px solid rgba(207,250,254,.22);
  background:radial-gradient(circle, rgba(103,232,249,.12), transparent 66%);
}
.battleFx--live .battleRandomSpotFx__marker{ animation:battleRandomMarkerScan 1.42s ease-out both; animation-delay:calc(var(--i) * 72ms); }
.battleFx--live .battleRandomSpotFx__marker--winner{ animation:battleRandomMarkerWinner 2.12s cubic-bezier(.18,.86,.2,1) both; animation-delay:.54s; z-index:2; }
.battleRandomSpotFx__beam{
  position:absolute;
  left:var(--winner-x, 50vw);
  top:var(--winner-y, 50vh);
  width:220px;
  height:220px;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.4);
  opacity:0;
  background:
    radial-gradient(circle, rgba(255,255,255,.45), rgba(103,232,249,.32) 23%, rgba(34,211,238,.11) 54%, transparent 72%),
    conic-gradient(from 20deg, transparent, rgba(103,232,249,.5), transparent 35%, rgba(251,191,36,.34), transparent 70%);
  filter:blur(.3px) drop-shadow(0 0 30px rgba(103,232,249,.38));
  will-change:opacity, transform;
}
.battleFx--live .battleRandomSpotFx__beam{ animation:battleRandomBeam 1.45s cubic-bezier(.16,.86,.22,1) .78s both; }
@keyframes battleRandomSpotLife{0%{opacity:0}7%{opacity:1}88%{opacity:1}100%{opacity:0}}
@keyframes battleRandomMarkerScan{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.74); filter:saturate(.8)}
  22%{opacity:.92; transform:translate(-50%,-50%) scale(1); filter:saturate(1.25)}
  58%{opacity:.65; transform:translate(-50%,-50%) scale(.96)}
  100%{opacity:.13; transform:translate(-50%,-50%) scale(.9)}
}
@keyframes battleRandomMarkerWinner{
  0%{opacity:.24; transform:translate(-50%,-50%) scale(.82); border-color:rgba(103,232,249,.34)}
  30%{opacity:1; transform:translate(-50%,-50%) scale(1.11); border-color:rgba(255,255,255,.72); box-shadow:0 0 0 2px rgba(255,255,255,.14), 0 0 48px rgba(103,232,249,.48), inset 0 0 36px rgba(103,232,249,.18)}
  70%{opacity:1; transform:translate(-50%,-50%) scale(1.04)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes battleRandomBeam{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.2) rotate(0deg)}
  18%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(10deg)}
  68%{opacity:.76; transform:translate(-50%,-50%) scale(1.12) rotate(44deg)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.35) rotate(82deg)}
}

/* ======================================================
   v30 premium shared animation upscale/pass
   Visual-only: transform + opacity driven for smooth replay on both clients.
   ====================================================== */
.battleFxRoot{ z-index:10020; }

/* Larger, cleaner side-anchored riffle shuffle */
.battleShuffleFx{
  width:390px!important;
  height:330px!important;
  filter:drop-shadow(0 34px 70px rgba(0,0,0,.56))!important;
}
.battleShuffleFx.battleFx--live{ animation:battleShuffleV30Life 2.72s cubic-bezier(.16,.86,.22,1) both!important; }
.battleShuffleFx__aura,
.battleShuffleFx__halo{
  inset:-78px -92px!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.30), transparent 16%),
    radial-gradient(circle at 50% 50%, rgba(125,249,255,.42), rgba(59,130,246,.22) 34%, rgba(147,51,234,.14) 56%, transparent 78%)!important;
  filter:blur(18px) saturate(1.25)!important;
}
.battleShuffleFx__stage{
  border-radius:42px!important;
  background:
    radial-gradient(circle at 50% 42%, rgba(255,255,255,.13), transparent 20%),
    radial-gradient(circle at 50% 44%, rgba(103,232,249,.20), rgba(15,23,42,.26) 48%, transparent 72%)!important;
  perspective:1400px!important;
}
.battleShuffleFx__packet,
.battleShuffleFx__bridge,
.battleShuffleFx__deckCore{ width:148px!important; height:206px!important; }
.battleShuffleFx__packet--left{ transform:translate(calc(-50% - 102px), -50%) rotate(-8deg)!important; }
.battleShuffleFx__packet--right{ transform:translate(calc(-50% + 102px), -50%) rotate(8deg)!important; }
.battleShuffleFx__card{ border-radius:12px!important; will-change:transform,opacity,filter!important; }
.battleFx--live .battleShuffleFx__card--left{ animation:battleShuffleV30Left 2.12s cubic-bezier(.17,.87,.2,1) both!important; animation-delay:calc(var(--i) * 15ms)!important; }
.battleFx--live .battleShuffleFx__card--right{ animation:battleShuffleV30Right 2.12s cubic-bezier(.17,.87,.2,1) both!important; animation-delay:calc(var(--i) * 15ms)!important; }
.battleFx--live .battleShuffleFx__card--bridge{ animation:battleShuffleV30Bridge 2.22s cubic-bezier(.17,.87,.2,1) both!important; animation-delay:calc(180ms + var(--i) * 16ms)!important; }
.battleFx--live .battleShuffleFx__deckCore{ animation:battleShuffleV30Deck 2.46s cubic-bezier(.17,.87,.2,1) both!important; }
.battleShuffleFx__slash{ width:330px!important; height:7px!important; }
.battleFx--live .battleShuffleFx__slash{ animation:battleShuffleV30Slash 1.42s ease-out .5s both!important; }
.battleShuffleFx__title{ bottom:30px!important; font-size:1.14rem!important; letter-spacing:.18em!important; }
.battleShuffleFx__subtitle{ bottom:10px!important; font-size:.72rem!important; letter-spacing:.11em!important; }
@keyframes battleShuffleV30Life{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.82) rotate(-1deg)}
  8%{opacity:1; transform:translate(-50%,-50%) scale(1.02) rotate(0deg)}
  80%{opacity:1; transform:translate(-50%,-50%) scale(1) rotate(0deg)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(.98) rotate(.4deg)}
}
@keyframes battleShuffleV30Left{
  0%{opacity:.96; transform:translate3d(calc((var(--i) - 4) * 1.3px), calc((var(--i) - 4) * .7px),0) rotate(calc((var(--i) - 4) * .35deg)) scale(.98)}
  22%{opacity:1; transform:translate3d(calc(112px + var(--i) * 1.9px), calc(-26px + (var(--i) % 4) * 5px), 78px) rotate(calc(28deg - var(--i) * 1.4deg)) rotateY(-28deg) scale(.92)}
  46%{opacity:1; transform:translate3d(calc(42px + var(--i) * .9px), calc(8px - (var(--i) % 5) * 2px), 34px) rotate(calc(12deg - var(--i) * .55deg)) rotateY(10deg) scale(.98)}
  72%{opacity:1; transform:translate3d(calc((var(--i) - 4) * 2px), calc((var(--i) - 4) * .85px), 8px) rotate(calc((var(--i) - 4) * .28deg)) scale(1.01)}
  100%{opacity:.98; transform:translate3d(calc((var(--i) - 4) * 1.05px), calc((var(--i) - 4) * .62px),0) rotate(calc((var(--i) - 4) * .20deg)) scale(1)}
}
@keyframes battleShuffleV30Right{
  0%{opacity:.96; transform:translate3d(calc((var(--i) - 4) * 1.3px), calc((var(--i) - 4) * .7px),0) rotate(calc((var(--i) - 4) * .35deg)) scale(.98)}
  22%{opacity:1; transform:translate3d(calc(-112px - var(--i) * 1.9px), calc(26px - (var(--i) % 4) * 5px), 78px) rotate(calc(-28deg + var(--i) * 1.4deg)) rotateY(28deg) scale(.92)}
  46%{opacity:1; transform:translate3d(calc(-42px - var(--i) * .9px), calc(-8px + (var(--i) % 5) * 2px), 34px) rotate(calc(-12deg + var(--i) * .55deg)) rotateY(-10deg) scale(.98)}
  72%{opacity:1; transform:translate3d(calc((var(--i) - 4) * 2px), calc((var(--i) - 4) * .85px), 8px) rotate(calc((var(--i) - 4) * .28deg)) scale(1.01)}
  100%{opacity:.98; transform:translate3d(calc((var(--i) - 4) * 1.05px), calc((var(--i) - 4) * .62px),0) rotate(calc((var(--i) - 4) * .20deg)) scale(1)}
}
@keyframes battleShuffleV30Bridge{
  0%{opacity:0; transform:translate3d(calc(-126px + var(--i) * 18px), calc(-46px + (var(--i) % 5) * 13px), 108px) rotate(calc(-28deg + var(--i) * 3.8deg)) rotateY(-22deg) scale(.66)}
  20%{opacity:1}
  54%{opacity:.96; transform:translate3d(calc(58px - var(--i) * 8px), calc(26px - (var(--i) % 5) * 8px), 54px) rotate(calc(20deg - var(--i) * 2.1deg)) rotateY(16deg) scale(.88)}
  100%{opacity:0; transform:translate3d(calc((var(--i) - 6) * 1.4px), calc((var(--i) - 6) * .8px), 4px) rotate(calc((var(--i) - 6) * .2deg)) rotateY(0deg) scale(.94)}
}
@keyframes battleShuffleV30Deck{
  0%{transform:translate(-50%,-50%) scale(.92) rotate(-2deg)}
  25%{transform:translate(-50%,-50%) scale(1.08) rotate(3deg)}
  54%{transform:translate(-50%,-50%) scale(.97) rotate(-1.5deg)}
  78%{transform:translate(-50%,-50%) scale(1.03) rotate(.8deg)}
  100%{transform:translate(-50%,-50%) scale(1) rotate(0deg)}
}
@keyframes battleShuffleV30Slash{
  0%{opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scaleX(0)}
  20%{opacity:1; transform:translate(-50%,-50%) rotate(-8deg) scaleX(1)}
  100%{opacity:0; transform:translate(-50%,-50%) rotate(-8deg) scaleX(.08)}
}

/* Physics coin: JS Web Animations controls the result-facing rotation. */
.battleCoinFx--physics.battleFx--live .battleCoinFx__coin{ animation:none!important; }
.battleCoinFx.battleCoinFx--physics.battleFx--live{ animation:battleCoinV30Fade 2.48s cubic-bezier(.16,.86,.22,1) both!important; }
.battleCoinFx__stage{ min-width:440px!important; min-height:420px!important; perspective:1200px!important; }
.battleCoinFx__coin{ width:174px!important; height:174px!important; transform-style:preserve-3d!important; will-change:transform!important; }
.battleCoinFx__face{ font-size:5.55rem!important; border-width:4px!important; box-shadow:inset 0 0 18px rgba(255,255,255,.18); }
.battleCoinFx__halo{ width:min(620px,58vw)!important; height:min(620px,58vw)!important; background:radial-gradient(circle, rgba(251,191,36,.42), rgba(103,232,249,.18) 39%, rgba(147,51,234,.12) 58%, transparent 76%)!important; }
.battleCoinFx__spark{ position:absolute; width:9px; height:9px; border-radius:999px; background:#fef3c7; box-shadow:0 0 22px rgba(251,191,36,.9); opacity:0; }
.battleCoinFx__spark--one{ left:25%; top:35%; }
.battleCoinFx__spark--two{ right:27%; top:44%; }
.battleCoinFx__spark--three{ left:44%; bottom:28%; }
.battleFx--live .battleCoinFx__spark{ animation:battleCoinSpark 1.15s ease-out .35s both; }
.battleFx--live .battleCoinFx__spark--two{ animation-delay:.52s; }
.battleFx--live .battleCoinFx__spark--three{ animation-delay:.68s; }
.battleCoinFx__title{ bottom:46px!important; font-size:1.02rem!important; }
.battleCoinFx__result{ bottom:4px!important; font-size:2.05rem!important; }
@keyframes battleCoinV30Fade{0%{opacity:0}7%{opacity:1}83%{opacity:1}100%{opacity:0}}
@keyframes battleCoinSpark{0%{opacity:0;transform:scale(.2)}18%{opacity:1;transform:scale(1)}100%{opacity:0;transform:translateY(-44px) scale(.2)}}

/* Bigger board-wide random spot reveal */
.battleRandomSpotFx.battleFx--live{ animation:battleRandomSpotV30Life 3.16s cubic-bezier(.16,.84,.22,1) both!important; }
.battleRandomSpotFx__veil{ background:radial-gradient(circle at var(--winner-x, 50vw) var(--winner-y, 50vh), rgba(251,191,36,.18), rgba(103,232,249,.18) 20%, rgba(2,6,23,.18) 45%, transparent 74%)!important; backdrop-filter:blur(1.5px) saturate(122%)!important; }
.battleRandomSpotFx__title{ top:9vh!important; font-size:1.3rem!important; letter-spacing:.22em!important; }
.battleRandomSpotFx__subtitle{ top:calc(9vh + 34px)!important; font-size:.8rem!important; }
.battleRandomSpotFx__result{ top:calc(var(--winner-y, 50vh) + 112px)!important; font-size:1.95rem!important; color:#fff7c2!important; }
.battleRandomSpotFx__marker{ width:calc(var(--w) + 46px)!important; height:calc(var(--h) + 46px)!important; border-radius:30px!important; border-width:3px!important; }
.battleRandomSpotFx__marker span{ inset:10px!important; border-radius:24px!important; }
.battleFx--live .battleRandomSpotFx__marker{ animation:battleRandomMarkerV30Scan 1.9s ease-out both!important; animation-delay:calc(var(--i) * 58ms)!important; }
.battleFx--live .battleRandomSpotFx__marker--winner{ animation:battleRandomMarkerV30Winner 2.55s cubic-bezier(.18,.86,.2,1) both!important; animation-delay:.55s!important; }
.battleRandomSpotFx__beam{ width:320px!important; height:320px!important; }
.battleFx--live .battleRandomSpotFx__beam{ animation:battleRandomBeamV30 2.05s cubic-bezier(.16,.86,.22,1) .72s both!important; }
@keyframes battleRandomSpotV30Life{0%{opacity:0}6%{opacity:1}90%{opacity:1}100%{opacity:0}}
@keyframes battleRandomMarkerV30Scan{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.65); filter:saturate(.8) brightness(.8)}
  20%{opacity:1; transform:translate(-50%,-50%) scale(1.05); filter:saturate(1.35) brightness(1.15)}
  54%{opacity:.62; transform:translate(-50%,-50%) scale(.96)}
  100%{opacity:.12; transform:translate(-50%,-50%) scale(.9)}
}
@keyframes battleRandomMarkerV30Winner{
  0%{opacity:.26; transform:translate(-50%,-50%) scale(.8); border-color:rgba(103,232,249,.34)}
  28%{opacity:1; transform:translate(-50%,-50%) scale(1.18); border-color:rgba(255,255,255,.9); box-shadow:0 0 0 3px rgba(255,255,255,.18), 0 0 62px rgba(251,191,36,.54), 0 0 88px rgba(103,232,249,.38), inset 0 0 44px rgba(103,232,249,.22)}
  65%{opacity:1; transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.22)}
}
@keyframes battleRandomBeamV30{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.15) rotate(0deg)}
  15%{opacity:1; transform:translate(-50%,-50%) scale(1.05) rotate(18deg)}
  66%{opacity:.86; transform:translate(-50%,-50%) scale(1.22) rotate(78deg)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.5) rotate(132deg)}
}

/* Larger two-lane hand refresh sequence */
.battleRefreshFx.battleFx--live{ animation:battleRefreshFade 3.45s ease both!important; }
.battleRefreshFx__glass{ width:min(1280px,94vw)!important; height:min(620px,78vh)!important; border-radius:44px!important; }
.battleRefreshFx__lanes{ width:min(1120px,88vw)!important; gap:min(8vw,112px)!important; }
.battleRefreshFx__lane{ min-height:380px!important; }
.battleRefreshFx__hand,
.battleRefreshFx__deck,
.battleRefreshFx__draw{ width:116px!important; height:162px!important; }
.battleRefreshFx__hand{ left:9%!important; top:118px!important; }
.battleRefreshFx__deck{ right:15%!important; top:118px!important; }
.battleRefreshFx__draw{ right:7%!important; top:118px!important; }
.battleFx--live .battleRefreshFx__handCard{ animation-duration:1.24s!important; }
.battleFx--live .battleRefreshFx__deckCard{ animation-duration:1.28s!important; animation-delay:1.08s!important; }
.battleFx--live .battleRefreshFx__drawCard{ animation-duration:1.14s!important; animation-delay:2.02s!important; }

/* v32 AAA animation upscale: centered shuffle, physics coin, clearer random spot */
.battleFxRoot{
  pointer-events:none;
  position:fixed;
  inset:0;
  z-index:999999;
  overflow:hidden;
}
.battleShuffleFx--centered{
  left:50%!important;
  top:50%!important;
  width:min(720px,86vw)!important;
  height:min(520px,70vh)!important;
  transform:translate(-50%,-50%)!important;
  display:grid!important;
  place-items:center!important;
}
.battleShuffleFx--centered.battleFx--live{ animation:battleShuffleV32Life 3.05s cubic-bezier(.16,.86,.18,1) both!important; }
.battleShuffleFx--centered .battleShuffleFx__stage{
  width:min(650px,78vw)!important;
  height:390px!important;
  transform:none!important;
  left:auto!important;
  top:auto!important;
  perspective:1350px!important;
  filter:drop-shadow(0 44px 80px rgba(0,0,0,.46));
}
.battleShuffleFx__table{
  position:absolute;
  left:50%;
  top:55%;
  width:560px;
  max-width:78vw;
  height:210px;
  transform:translate(-50%,-50%) rotateX(64deg);
  border-radius:50%;
  background:radial-gradient(circle, rgba(59,130,246,.20), rgba(14,165,233,.10) 38%, rgba(2,6,23,.04) 70%, transparent 76%);
  box-shadow:0 0 92px rgba(14,165,233,.20), inset 0 0 44px rgba(255,255,255,.06);
}
.battleShuffleFx--centered .battleShuffleFx__packet,
.battleShuffleFx--centered .battleShuffleFx__bridge,
.battleShuffleFx--centered .battleShuffleFx__deckCore{
  width:154px!important;
  height:214px!important;
}
.battleShuffleFx--centered .battleShuffleFx__packet--left{ transform:translate(calc(-50% - 118px), -50%) rotate(-6deg)!important; }
.battleShuffleFx--centered .battleShuffleFx__packet--right{ transform:translate(calc(-50% + 118px), -50%) rotate(6deg)!important; }
.battleShuffleFx--centered .battleShuffleFx__card{ transform-origin:center bottom!important; }
.battleShuffleFx--centered.battleFx--live .battleShuffleFx__card--left{ animation:battleShuffleV32Left 2.34s cubic-bezier(.18,.86,.18,1) both!important; animation-delay:calc(var(--i) * 13ms)!important; }
.battleShuffleFx--centered.battleFx--live .battleShuffleFx__card--right{ animation:battleShuffleV32Right 2.34s cubic-bezier(.18,.86,.18,1) both!important; animation-delay:calc(var(--i) * 13ms)!important; }
.battleShuffleFx--centered.battleFx--live .battleShuffleFx__card--bridge{ animation:battleShuffleV32Bridge 2.46s cubic-bezier(.18,.86,.18,1) both!important; animation-delay:calc(260ms + var(--i) * 18ms)!important; }
.battleShuffleFx--centered.battleFx--live .battleShuffleFx__deckCore{ animation:battleShuffleV32Deck 2.68s cubic-bezier(.18,.86,.18,1) both!important; }
.battleShuffleFx__cut{
  position:absolute;
  left:50%;
  top:50%;
  width:250px;
  height:8px;
  border-radius:999px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.9), rgba(103,232,249,.75), transparent);
  opacity:0;
  filter:blur(.15px) drop-shadow(0 0 24px rgba(103,232,249,.68));
}
.battleShuffleFx__cut--one{ transform:translate(-50%,-50%) rotate(-13deg); }
.battleShuffleFx__cut--two{ transform:translate(-50%,-50%) rotate(14deg); }
.battleShuffleFx--centered.battleFx--live .battleShuffleFx__cut--one{ animation:battleShuffleV32Cut 1.12s ease-out .62s both!important; }
.battleShuffleFx--centered.battleFx--live .battleShuffleFx__cut--two{ animation:battleShuffleV32Cut 1.12s ease-out 1.22s both!important; }
.battleShuffleFx--centered .battleShuffleFx__title{
  bottom:36px!important;
  font-size:1.42rem!important;
  letter-spacing:.22em!important;
  color:#e0f2fe!important;
}
.battleShuffleFx--centered .battleShuffleFx__subtitle{
  bottom:12px!important;
  font-size:.86rem!important;
  color:rgba(224,242,254,.82)!important;
}
@keyframes battleShuffleV32Life{0%{opacity:0;transform:translate(-50%,-50%) scale(.94)}7%{opacity:1;transform:translate(-50%,-50%) scale(1)}87%{opacity:1}100%{opacity:0;transform:translate(-50%,-50%) scale(.985)}}
@keyframes battleShuffleV32Left{0%{opacity:0; transform:translateX(-22px) translateY(20px) rotate(-5deg) scale(.95)}16%{opacity:1}42%{transform:translateX(88px) translateY(-18px) rotate(8deg) scale(1.02)}70%{transform:translateX(22px) translateY(3px) rotate(1deg) scale(.99)}100%{opacity:0; transform:translateX(72px) translateY(4px) rotate(0deg) scale(.98)}}
@keyframes battleShuffleV32Right{0%{opacity:0; transform:translateX(22px) translateY(20px) rotate(5deg) scale(.95)}16%{opacity:1}42%{transform:translateX(-88px) translateY(-18px) rotate(-8deg) scale(1.02)}70%{transform:translateX(-22px) translateY(3px) rotate(-1deg) scale(.99)}100%{opacity:0; transform:translateX(-72px) translateY(4px) rotate(0deg) scale(.98)}}
@keyframes battleShuffleV32Bridge{0%{opacity:0; transform:translateY(42px) translateX(calc((var(--i) - 8) * -7px)) rotate(calc((var(--i) - 9) * -2deg)) scale(.78)}20%{opacity:.92}54%{opacity:1; transform:translateY(-24px) translateX(calc((var(--i) - 8) * 5px)) rotate(calc((var(--i) - 9) * 1.5deg)) scale(1)}86%{opacity:.62}100%{opacity:0; transform:translateY(14px) translateX(0) rotate(0deg) scale(.88)}}
@keyframes battleShuffleV32Deck{0%{opacity:0; transform:translate(-50%,-50%) translateY(70px) rotateX(50deg) scale(.7)}46%{opacity:0; transform:translate(-50%,-50%) translateY(42px) rotateX(28deg) scale(.82)}68%{opacity:1; transform:translate(-50%,-50%) translateY(2px) rotateX(0deg) scale(1.04)}100%{opacity:1; transform:translate(-50%,-50%) translateY(0) rotateX(0deg) scale(1)}}
@keyframes battleShuffleV32Cut{0%{opacity:0; transform:translate(-50%,-50%) rotate(var(--r, -13deg)) scaleX(.02)}22%{opacity:1; transform:translate(-50%,-50%) rotate(var(--r, -13deg)) scaleX(1)}100%{opacity:0; transform:translate(-50%,-50%) rotate(var(--r, -13deg)) scaleX(.06)}}

.battleCoinFx.battleCoinFx--physics.battleFx--live{ animation:battleCoinV32Fade 3.18s cubic-bezier(.16,.86,.18,1) both!important; }
.battleCoinFx__stage{ min-width:520px!important; min-height:500px!important; perspective:1450px!important; }
.battleCoinFx__coin{ width:188px!important; height:188px!important; transform-style:preserve-3d!important; will-change:transform!important; }
.battleCoinFx__edge{
  position:absolute;
  inset:-3px;
  border-radius:50%;
  background:conic-gradient(from 0deg, rgba(255,255,255,.45), rgba(146,64,14,.88), rgba(251,191,36,.7), rgba(255,255,255,.32), rgba(146,64,14,.9));
  transform:translateZ(-7px);
  box-shadow:0 0 0 8px rgba(120,53,15,.2), inset 0 0 12px rgba(0,0,0,.5);
}
.battleCoinFx__face--heads{ transform:translateZ(8px)!important; }
.battleCoinFx__face--tails{ transform:rotateX(180deg) translateZ(8px)!important; }
.battleCoinFx--tails .battleCoinFx__face--heads{ background:radial-gradient(circle at 35% 28%, rgba(255,255,255,.42), transparent 28%), radial-gradient(circle at 50% 50%, #facc15, #d97706 62%, #7c2d12 100%)!important; }
.battleCoinFx__shadow{
  position:absolute;
  width:190px;
  height:46px;
  border-radius:50%;
  background:radial-gradient(ellipse, rgba(0,0,0,.42), rgba(0,0,0,.12) 48%, transparent 72%);
  filter:blur(4px);
  transform:translateY(124px) scale(.55);
}
@keyframes battleCoinV32Fade{0%{opacity:0}5%{opacity:1}84%{opacity:1}100%{opacity:0}}

.battleRandomSpotFx.battleFx--live{ animation:battleRandomSpotV32Life 3.85s cubic-bezier(.16,.84,.18,1) both!important; }
.battleRandomSpotFx__veil{ background:radial-gradient(circle at var(--winner-x, 50vw) var(--winner-y, 50vh), rgba(250,204,21,.28), rgba(103,232,249,.20) 20%, rgba(2,6,23,.38) 52%, rgba(2,6,23,.08) 80%)!important; backdrop-filter:blur(2px) saturate(130%)!important; }
.battleRandomSpotFx__title{ top:7vh!important; font-size:1.62rem!important; letter-spacing:.24em!important; color:#ecfeff!important; }
.battleRandomSpotFx__subtitle{ top:calc(7vh + 42px)!important; font-size:.9rem!important; letter-spacing:.13em!important; }
.battleRandomSpotFx__result{
  top:calc(var(--winner-y, 50vh) + 126px)!important;
  left:var(--winner-x, 50vw)!important;
  transform:translateX(-50%)!important;
  padding:10px 18px!important;
  border:1px solid rgba(253,224,71,.55)!important;
  border-radius:999px!important;
  background:linear-gradient(135deg, rgba(15,23,42,.82), rgba(88,28,135,.54))!important;
  font-size:2.15rem!important;
  color:#fff7c2!important;
  box-shadow:0 0 42px rgba(250,204,21,.34), 0 16px 44px rgba(0,0,0,.46)!important;
}
.battleRandomSpotFx__marker{ width:calc(var(--w) + 60px)!important; height:calc(var(--h) + 60px)!important; border-radius:34px!important; border:3px solid rgba(103,232,249,.35)!important; }
.battleRandomSpotFx__marker span{ inset:9px!important; border-radius:26px!important; background:linear-gradient(135deg, rgba(103,232,249,.14), rgba(250,204,21,.12))!important; }
.battleFx--live .battleRandomSpotFx__marker{ animation:battleRandomMarkerV32Scan 2.2s ease-out both!important; animation-delay:calc(var(--i) * 72ms)!important; }
.battleFx--live .battleRandomSpotFx__marker--winner{ animation:battleRandomMarkerV32Winner 3.1s cubic-bezier(.18,.86,.18,1) both!important; animation-delay:.68s!important; }
.battleRandomSpotFx__beam{ width:390px!important; height:390px!important; border-radius:50%!important; background:radial-gradient(circle, rgba(250,204,21,.54), rgba(103,232,249,.28) 34%, rgba(255,255,255,.13) 45%, transparent 66%)!important; mix-blend-mode:screen!important; }
.battleFx--live .battleRandomSpotFx__beam{ animation:battleRandomBeamV32 2.45s cubic-bezier(.16,.86,.18,1) .84s both!important; }
@keyframes battleRandomSpotV32Life{0%{opacity:0}5%{opacity:1}91%{opacity:1}100%{opacity:0}}
@keyframes battleRandomMarkerV32Scan{0%{opacity:0; transform:translate(-50%,-50%) scale(.64); filter:brightness(.75)}18%{opacity:1; transform:translate(-50%,-50%) scale(1.08); filter:brightness(1.22)}58%{opacity:.72; transform:translate(-50%,-50%) scale(.98)}100%{opacity:.18; transform:translate(-50%,-50%) scale(.94)}}
@keyframes battleRandomMarkerV32Winner{0%{opacity:.34; transform:translate(-50%,-50%) scale(.82); border-color:rgba(103,232,249,.38)}18%{opacity:1; transform:translate(-50%,-50%) scale(1.23); border-color:rgba(255,255,255,.95); box-shadow:0 0 0 3px rgba(255,255,255,.24),0 0 70px rgba(250,204,21,.7),0 0 110px rgba(103,232,249,.45), inset 0 0 50px rgba(103,232,249,.22)}56%{opacity:1; transform:translate(-50%,-50%) scale(1.1)}82%{opacity:1; transform:translate(-50%,-50%) scale(1.16)}100%{opacity:0; transform:translate(-50%,-50%) scale(1.02)}}
@keyframes battleRandomBeamV32{0%{opacity:0; transform:translate(-50%,-50%) scale(.16) rotate(0deg)}18%{opacity:.92; transform:translate(-50%,-50%) scale(.72) rotate(80deg)}54%{opacity:.84; transform:translate(-50%,-50%) scale(1.1) rotate(220deg)}100%{opacity:0; transform:translate(-50%,-50%) scale(1.45) rotate(390deg)}}
.battleShuffleFx__cut--one{ --r:-13deg; }
.battleShuffleFx__cut--two{ --r:14deg; }


/* v33 premium physics coin flip: deterministic final face, cinematic visual only */
.battleCoinFx.battleCoinFx--cinematic{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  opacity:0;
  pointer-events:none!important;
  perspective:1600px!important;
}
.battleCoinFx.battleCoinFx--cinematic.battleFx--live{
  animation:battleCoinV33Life 3.55s cubic-bezier(.16,.86,.18,1) both!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__veil{
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 50% 46%, rgba(250,204,21,.14), rgba(56,189,248,.10) 28%, rgba(2,6,23,.20) 54%, transparent 78%);
  backdrop-filter:blur(1.5px) saturate(118%);
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__halo{
  width:min(690px,62vw)!important;
  height:min(690px,62vw)!important;
  border-radius:999px!important;
  background:
    radial-gradient(circle, rgba(254,240,138,.42), rgba(250,204,21,.20) 20%, rgba(103,232,249,.20) 42%, rgba(147,51,234,.12) 58%, transparent 76%)!important;
  filter:blur(20px) saturate(140%)!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__stage{
  position:relative!important;
  display:grid!important;
  place-items:center!important;
  width:min(560px,72vw)!important;
  height:min(520px,72vh)!important;
  min-width:0!important;
  min-height:0!important;
  perspective:1700px!important;
  transform-style:preserve-3d!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__coin{
  width:184px!important;
  height:184px!important;
  position:relative!important;
  border-radius:50%!important;
  transform-style:preserve-3d!important;
  will-change:transform!important;
  animation:none!important;
  box-shadow:
    0 34px 70px rgba(0,0,0,.54),
    0 0 0 3px rgba(255,255,255,.16),
    0 0 52px rgba(250,204,21,.34)!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__edge{
  position:absolute!important;
  inset:-6px!important;
  border-radius:50%!important;
  background:
    conic-gradient(from 10deg, rgba(255,255,255,.58), rgba(146,64,14,.88), rgba(251,191,36,.94), rgba(255,255,255,.38), rgba(120,53,15,.92), rgba(254,240,138,.78), rgba(255,255,255,.58))!important;
  transform:translateZ(0px)!important;
  z-index:1!important;
  opacity:.78!important;
  box-shadow:0 0 0 7px rgba(120,53,15,.16), inset 0 0 16px rgba(0,0,0,.42)!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__face{
  position:absolute!important;
  inset:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:50%!important;
  font-size:6rem!important;
  font-weight:1000!important;
  line-height:1!important;
  backface-visibility:hidden!important;
  -webkit-backface-visibility:hidden!important;
  border:4px solid rgba(255,244,190,.76)!important;
  color:#fff7d6!important;
  text-shadow:0 2px 7px rgba(0,0,0,.32), 0 0 28px rgba(255,255,255,.20)!important;
  box-shadow:inset 0 0 22px rgba(255,255,255,.20), inset 0 -16px 35px rgba(0,0,0,.22)!important;
  filter:brightness(var(--coinLight, 1)) saturate(1.12)!important;
  z-index:2!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__face--heads{
  transform:translateZ(11px)!important;
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,.58), transparent 22%),
    radial-gradient(circle at 50% 52%, #fde68a, #f59e0b 58%, #7c2d12 100%)!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__face--tails{
  transform:rotateX(180deg) translateZ(11px)!important;
  background:
    radial-gradient(circle at 33% 24%, rgba(255,255,255,.48), transparent 24%),
    radial-gradient(circle at 50% 52%, #a5f3fc, #2563eb 61%, #172554 100%)!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__shadow{
  position:absolute!important;
  width:210px!important;
  height:46px!important;
  border-radius:999px!important;
  background:radial-gradient(ellipse, rgba(0,0,0,.58), rgba(0,0,0,.20) 50%, transparent 74%)!important;
  filter:blur(5px)!important;
  transform:translateY(128px) scale(.55);
  opacity:.16;
  will-change:transform,opacity!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__tableRing{
  position:absolute;
  left:50%;
  top:50%;
  width:280px;
  height:120px;
  border-radius:50%;
  border:2px solid rgba(250,204,21,.58);
  box-shadow:0 0 36px rgba(250,204,21,.34), inset 0 0 22px rgba(103,232,249,.12);
  opacity:0;
  transform:translate(-50%, -50%) scale(.7);
  pointer-events:none;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__spark{
  position:absolute!important;
  width:10px!important;
  height:10px!important;
  border-radius:999px!important;
  background:#fef3c7!important;
  box-shadow:0 0 24px rgba(250,204,21,.95), 0 0 42px rgba(103,232,249,.32)!important;
  opacity:0;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__spark--one{ left:23%; top:32%; }
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__spark--two{ right:22%; top:41%; }
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__spark--three{ left:47%; bottom:27%; }
.battleCoinFx.battleCoinFx--cinematic.battleFx--live .battleCoinFx__spark{ animation:battleCoinV33Spark 1.28s ease-out .35s both!important; }
.battleCoinFx.battleCoinFx--cinematic.battleFx--live .battleCoinFx__spark--two{ animation-delay:.52s!important; }
.battleCoinFx.battleCoinFx--cinematic.battleFx--live .battleCoinFx__spark--three{ animation-delay:.68s!important; }
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__title,
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__result{
  position:absolute!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  text-transform:uppercase!important;
  text-shadow:0 4px 18px rgba(0,0,0,.75), 0 0 28px rgba(250,204,21,.34)!important;
  white-space:nowrap!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__title{
  bottom:52px!important;
  font-size:1.04rem!important;
  letter-spacing:.20em!important;
  font-weight:1000!important;
  color:#e0f2fe!important;
}
.battleCoinFx.battleCoinFx--cinematic .battleCoinFx__result{
  bottom:8px!important;
  font-size:2.45rem!important;
  letter-spacing:.10em!important;
  font-weight:1000!important;
  color:#fef3c7!important;
  opacity:0!important;
  transform:translateX(-50%) translateY(10px) scale(.88)!important;
  filter:blur(8px)!important;
  transition:opacity .22s ease, transform .28s cubic-bezier(.16,.86,.22,1), filter .28s ease!important;
}
.battleCoinFx.battleCoinFx--cinematic.battleCoinFx--landed .battleCoinFx__result{
  opacity:1!important;
  transform:translateX(-50%) translateY(0) scale(1)!important;
  filter:blur(0)!important;
}
.battleCoinFx.battleCoinFx--cinematic.battleCoinFx--tails .battleCoinFx__result{ color:#cffafe!important; }
.battleCoinFx.battleCoinFx--cinematic.battleCoinFx--landed .battleCoinFx__coin{
  box-shadow:0 38px 78px rgba(0,0,0,.58), 0 0 0 3px rgba(255,255,255,.18), 0 0 74px rgba(250,204,21,.46)!important;
}
@keyframes battleCoinV33Life{0%{opacity:0}5%{opacity:1}86%{opacity:1}100%{opacity:0}}
@keyframes battleCoinV33Spark{0%{opacity:0;transform:translateY(18px) scale(.45)}36%{opacity:1}100%{opacity:0;transform:translateY(-68px) translateX(24px) scale(1.3)}}

/* v37 centered premium shuffle rebuild: readable split, riffle, bridge, stack, fade */
.battleShuffleFx--v37{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100vw!important;
  height:100vh!important;
  transform:none!important;
  display:grid!important;
  place-items:center!important;
  opacity:0;
  pointer-events:none!important;
  z-index:999999!important;
  isolation:isolate!important;
}
.battleShuffleFx--v37.battleFx--live{ animation:battleShuffleV37Life 2.18s cubic-bezier(.16,.86,.18,1) both!important; }
.battleShuffleFx--v37 .battleShuffleFx__veil{
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 50% 48%, rgba(56,189,248,.17), rgba(99,102,241,.10) 28%, rgba(2,6,23,.26) 58%, rgba(2,6,23,.04) 80%),
    linear-gradient(180deg, rgba(2,6,23,.08), rgba(2,6,23,.24), rgba(2,6,23,.08))!important;
  backdrop-filter:blur(1.2px) saturate(122%)!important;
}
.battleShuffleFx--v37 .battleShuffleFx__cinema{
  position:relative!important;
  width:min(680px,86vw)!important;
  height:min(500px,72vh)!important;
  display:grid!important;
  place-items:center!important;
  overflow:visible!important;
  border-radius:36px!important;
}
.battleShuffleFx--v37 .battleShuffleFx__cinema::before{
  content:"";
  position:absolute;
  inset:38px 34px 46px;
  border-radius:36px;
  background:linear-gradient(135deg, rgba(15,23,42,.36), rgba(30,41,59,.18), rgba(14,165,233,.06));
  border:1px solid rgba(186,230,253,.18);
  box-shadow:0 34px 86px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.08), 0 0 90px rgba(56,189,248,.10);
}
.battleShuffleFx--v37 .battleShuffleFx__header{
  position:absolute!important;
  top:30px!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  text-align:center!important;
  z-index:5!important;
  text-transform:uppercase!important;
  text-shadow:0 6px 24px rgba(0,0,0,.72), 0 0 34px rgba(56,189,248,.24)!important;
}
.battleShuffleFx--v37 .battleShuffleFx__eyebrow{
  font-size:.78rem!important;
  letter-spacing:.24em!important;
  font-weight:900!important;
  color:rgba(186,230,253,.82)!important;
  margin-bottom:4px!important;
}
.battleShuffleFx--v37 .battleShuffleFx__title{
  position:static!important;
  transform:none!important;
  font-size:1.42rem!important;
  letter-spacing:.25em!important;
  font-weight:1000!important;
  color:#f8fafc!important;
  line-height:1!important;
}
.battleShuffleFx--v37 .battleShuffleFx__subtitle{
  position:static!important;
  transform:none!important;
  margin-top:6px!important;
  font-size:.78rem!important;
  letter-spacing:.12em!important;
  font-weight:800!important;
  color:rgba(224,242,254,.72)!important;
  white-space:nowrap!important;
}
.battleShuffleFx--v37 .battleShuffleFx__stage{
  position:absolute!important;
  left:50%!important;
  top:52%!important;
  width:min(600px,78vw)!important;
  height:330px!important;
  transform:translate(-50%,-50%)!important;
  perspective:1250px!important;
  filter:none!important;
  z-index:3!important;
  overflow:visible!important;
}
.battleShuffleFx--v37 .battleShuffleFx__table{
  position:absolute!important;
  left:50%!important;
  top:61%!important;
  width:min(520px,76vw)!important;
  height:170px!important;
  transform:translate(-50%,-50%) rotateX(64deg)!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse, rgba(125,211,252,.20), rgba(59,130,246,.10) 40%, rgba(2,6,23,.04) 72%, transparent 78%)!important;
  box-shadow:0 0 70px rgba(56,189,248,.15), inset 0 0 42px rgba(255,255,255,.05)!important;
  opacity:.98!important;
}
.battleShuffleFx--v37 .battleShuffleFx__packet,
.battleShuffleFx--v37 .battleShuffleFx__riffle,
.battleShuffleFx--v37 .battleShuffleFx__finalDeck{
  position:absolute!important;
  left:50%!important;
  top:52%!important;
  width:118px!important;
  height:164px!important;
  transform-style:preserve-3d!important;
  transform-origin:center bottom!important;
  overflow:visible!important;
}
.battleShuffleFx--v37 .battleShuffleFx__packet--left{ transform:translate(calc(-50% - 96px), -50%) rotateZ(-5deg) rotateY(-7deg)!important; }
.battleShuffleFx--v37 .battleShuffleFx__packet--right{ transform:translate(calc(-50% + 96px), -50%) rotateZ(5deg) rotateY(7deg)!important; }
.battleShuffleFx--v37 .battleShuffleFx__riffle{ transform:translate(-50%,-50%)!important; }
.battleShuffleFx--v37 .battleShuffleFx__finalDeck{ transform:translate(-50%,-50%) translateY(18px) scale(.86)!important; opacity:0!important; }
.battleShuffleFx--v37 .battleFxCard{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:118px!important;
  height:164px!important;
  border-radius:12px!important;
  transform:translate3d(0,0,0)!important;
  opacity:0;
  will-change:transform,opacity!important;
  filter:drop-shadow(0 18px 18px rgba(0,0,0,.28));
}
.battleShuffleFx--v37 .battleFxCard img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  border-radius:12px!important;
  border:1px solid rgba(224,242,254,.44)!important;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 0 18px rgba(56,189,248,.12)!important;
}
.battleShuffleFx--v37 .battleShuffleFx__packet--left .battleFxCard{ transform:translate3d(calc(var(--i) * -1.2px), calc(var(--i) * 1.25px), calc(var(--i) * 1px)) rotateZ(calc(var(--i) * -.18deg))!important; opacity:1; }
.battleShuffleFx--v37 .battleShuffleFx__packet--right .battleFxCard{ transform:translate3d(calc(var(--i) * 1.2px), calc(var(--i) * 1.25px), calc(var(--i) * 1px)) rotateZ(calc(var(--i) * .18deg))!important; opacity:1; }
.battleShuffleFx--v37 .battleShuffleFx__riffle .battleFxCard{ opacity:0; transform:translate3d(calc((var(--i) - 7) * 14px), 64px, 0) rotateZ(calc((var(--i) - 7) * -2.1deg)) scale(.72)!important; }
.battleShuffleFx--v37.battleFx--live .battleShuffleFx__packet--left .battleFxCard{ animation:battleShuffleV37Left 1.42s cubic-bezier(.18,.84,.2,1) both!important; animation-delay:calc(80ms + var(--i) * 22ms)!important; }
.battleShuffleFx--v37.battleFx--live .battleShuffleFx__packet--right .battleFxCard{ animation:battleShuffleV37Right 1.42s cubic-bezier(.18,.84,.2,1) both!important; animation-delay:calc(95ms + var(--i) * 22ms)!important; }
.battleShuffleFx--v37.battleFx--live .battleShuffleFx__riffle .battleFxCard{ animation:battleShuffleV37Riffle 1.16s cubic-bezier(.2,.86,.18,1) both!important; animation-delay:calc(430ms + var(--i) * 34ms)!important; }
.battleShuffleFx--v37 .battleShuffleFx__finalDeck span{
  position:absolute!important;
  left:0!important;
  top:0!important;
  width:118px!important;
  height:164px!important;
  border-radius:12px!important;
  background:linear-gradient(135deg, #082f49, #1d4ed8 45%, #020617 100%)!important;
  border:1px solid rgba(224,242,254,.42)!important;
  box-shadow:0 16px 24px rgba(0,0,0,.22), inset 0 0 0 1px rgba(255,255,255,.06)!important;
  transform:translate3d(calc(var(--i) * .9px), calc(var(--i) * -1.1px), calc(var(--i) * 1px))!important;
}
.battleShuffleFx--v37.battleFx--live .battleShuffleFx__finalDeck{ animation:battleShuffleV37FinalDeck .76s cubic-bezier(.16,.86,.22,1) 1.24s both!important; }
.battleShuffleFx--v37 .battleShuffleFx__shock{
  position:absolute!important;
  left:50%!important;
  top:57%!important;
  width:230px!important;
  height:86px!important;
  border-radius:50%!important;
  border:2px solid rgba(125,211,252,.55)!important;
  box-shadow:0 0 44px rgba(56,189,248,.22), inset 0 0 30px rgba(250,204,21,.10)!important;
  opacity:0;
  transform:translate(-50%,-50%) scale(.58) rotateX(64deg)!important;
}
.battleShuffleFx--v37.battleFx--live .battleShuffleFx__shock{ animation:battleShuffleV37Shock .52s ease-out 1.62s both!important; }
.battleShuffleFx--v37 .battleShuffleFx__done{
  position:absolute!important;
  left:50%!important;
  bottom:38px!important;
  transform:translateX(-50%) translateY(8px) scale(.92)!important;
  opacity:0;
  font-size:1.92rem!important;
  letter-spacing:.20em!important;
  font-weight:1000!important;
  color:#fef3c7!important;
  text-shadow:0 6px 28px rgba(0,0,0,.72), 0 0 36px rgba(250,204,21,.38)!important;
  z-index:6!important;
}
.battleShuffleFx--v37.battleFx--live .battleShuffleFx__done{ animation:battleShuffleV37Done .64s cubic-bezier(.16,.86,.22,1) 1.58s both!important; }
@keyframes battleShuffleV37Life{
  0%{opacity:0; transform:scale(.985)}
  6%{opacity:1; transform:scale(1)}
  84%{opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(.992)}
}
@keyframes battleShuffleV37Left{
  0%{opacity:0; transform:translate3d(-24px,22px,0) rotateZ(-6deg) scale(.96)}
  12%{opacity:1}
  30%{opacity:1; transform:translate3d(-28px,4px,0) rotateZ(-10deg) scale(1.02)}
  58%{opacity:.95; transform:translate3d(82px,-14px,0) rotateZ(7deg) scale(1.02)}
  86%{opacity:.28; transform:translate3d(44px,8px,0) rotateZ(1deg) scale(.9)}
  100%{opacity:0; transform:translate3d(44px,16px,0) rotateZ(0deg) scale(.82)}
}
@keyframes battleShuffleV37Right{
  0%{opacity:0; transform:translate3d(24px,22px,0) rotateZ(6deg) scale(.96)}
  12%{opacity:1}
  30%{opacity:1; transform:translate3d(28px,4px,0) rotateZ(10deg) scale(1.02)}
  58%{opacity:.95; transform:translate3d(-82px,-14px,0) rotateZ(-7deg) scale(1.02)}
  86%{opacity:.28; transform:translate3d(-44px,8px,0) rotateZ(-1deg) scale(.9)}
  100%{opacity:0; transform:translate3d(-44px,16px,0) rotateZ(0deg) scale(.82)}
}
@keyframes battleShuffleV37Riffle{
  0%{opacity:0; transform:translate3d(calc((var(--i) - 7) * 18px), 66px, 0) rotateZ(calc((var(--i) - 7) * -2.8deg)) scale(.7)}
  18%{opacity:1}
  45%{opacity:1; transform:translate3d(calc((var(--i) - 7) * 8px), -26px, 0) rotateZ(calc((var(--i) - 7) * 1.8deg)) scale(.96)}
  78%{opacity:.9; transform:translate3d(calc((var(--i) - 7) * 2px), 8px, 0) rotateZ(0deg) scale(.88)}
  100%{opacity:0; transform:translate3d(0, 20px, 0) rotateZ(0deg) scale(.74)}
}
@keyframes battleShuffleV37FinalDeck{
  0%{opacity:0; transform:translate(-50%,-50%) translateY(42px) rotateX(42deg) scale(.68)}
  46%{opacity:1; transform:translate(-50%,-50%) translateY(-8px) rotateX(8deg) scale(1.06)}
  66%{opacity:1; transform:translate(-50%,-50%) translateY(4px) rotateX(0deg) scale(.98)}
  100%{opacity:1; transform:translate(-50%,-50%) translateY(0) rotateX(0deg) scale(1)}
}
@keyframes battleShuffleV37Shock{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.46) rotateX(64deg)}
  34%{opacity:.88; transform:translate(-50%,-50%) scale(1.04) rotateX(64deg)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.34) rotateX(64deg)}
}
@keyframes battleShuffleV37Done{
  0%{opacity:0; transform:translateX(-50%) translateY(10px) scale(.84); filter:blur(8px)}
  42%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.04); filter:blur(0)}
  100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1); filter:blur(0)}
}

/* ======================================================
   v38 clean AAA centered shuffle: readable + input blocking
   ====================================================== */
.battleFxRoot--blocking{
  pointer-events:auto!important;
}
body.battleFxInputLocked{
  cursor:wait;
}
.battleShuffleFx--v38{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  width:100vw!important;
  height:100vh!important;
  transform:none!important;
  display:grid!important;
  place-items:center!important;
  opacity:0;
  z-index:1000000!important;
  pointer-events:auto!important;
  filter:none!important;
  contain:layout paint style!important;
}
.battleShuffleFx--v38.battleFx--live{
  animation:battleShuffleV38Overlay 4.35s cubic-bezier(.16,.84,.2,1) both!important;
}
.battleShuffleFx--v38 .battleShuffleFx__veil{
  position:absolute!important;
  inset:0!important;
  background:
    radial-gradient(circle at 50% 45%, rgba(56,189,248,.24), rgba(15,23,42,.72) 42%, rgba(2,6,23,.48) 78%),
    linear-gradient(180deg, rgba(6,11,29,.36), rgba(6,11,29,.58));
  backdrop-filter:blur(2px) saturate(125%);
  pointer-events:auto!important;
}
.battleShuffleFx--v38 .battleShuffleFx__panel{
  position:relative!important;
  width:min(560px,88vw)!important;
  height:430px!important;
  border-radius:30px!important;
  border:1px solid rgba(125,211,252,.26)!important;
  background:
    linear-gradient(180deg, rgba(20,31,55,.86), rgba(8,13,28,.78)),
    radial-gradient(circle at 50% 20%, rgba(56,189,248,.20), transparent 60%);
  box-shadow:
    0 34px 90px rgba(0,0,0,.52),
    0 0 52px rgba(56,189,248,.16),
    inset 0 1px 0 rgba(255,255,255,.10);
  overflow:hidden!important;
  pointer-events:auto!important;
  isolation:isolate;
}
.battleShuffleFx--v38 .battleShuffleFx__panel::before{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(110deg, transparent 0 28%, rgba(255,255,255,.08) 38%, transparent 52%);
  transform:translateX(-120%);
  opacity:.8;
  pointer-events:none;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__panel::before{
  animation:battleShuffleV38Sheen 2.25s ease-out .30s both;
}
.battleShuffleFx--v38 .battleShuffleFx__header{
  position:absolute!important;
  top:24px!important;
  left:28px!important;
  right:28px!important;
  z-index:6!important;
  text-align:center!important;
  letter-spacing:.08em!important;
  pointer-events:none!important;
}
.battleShuffleFx--v38 .battleShuffleFx__eyebrow{
  color:#7dd3fc!important;
  font-size:.78rem!important;
  font-weight:1000!important;
  letter-spacing:.20em!important;
  text-transform:uppercase!important;
  text-shadow:0 0 14px rgba(125,211,252,.34)!important;
}
.battleShuffleFx--v38 .battleShuffleFx__title{
  position:static!important;
  margin-top:3px!important;
  color:#f8fafc!important;
  font-size:1.75rem!important;
  line-height:1!important;
  font-weight:1000!important;
  letter-spacing:.09em!important;
  text-transform:uppercase!important;
  text-shadow:0 8px 26px rgba(0,0,0,.46), 0 0 20px rgba(56,189,248,.18)!important;
}
.battleShuffleFx--v38 .battleShuffleFx__subtitle{
  position:static!important;
  margin-top:8px!important;
  color:rgba(226,232,240,.78)!important;
  font-size:.80rem!important;
  font-weight:900!important;
  letter-spacing:.10em!important;
  text-transform:uppercase!important;
}
.battleShuffleFx--v38 .battleShuffleFx__stage{
  position:absolute!important;
  left:50%!important;
  top:53%!important;
  width:430px!important;
  height:250px!important;
  transform:translate(-50%,-50%)!important;
  perspective:1100px!important;
  filter:none!important;
  overflow:visible!important;
  pointer-events:none!important;
}
.battleShuffleFx--v38 .battleShuffleFx__table{
  position:absolute!important;
  left:50%!important;
  top:62%!important;
  width:390px!important;
  height:118px!important;
  transform:translate(-50%,-50%) rotateX(64deg)!important;
  border-radius:50%!important;
  background:radial-gradient(ellipse, rgba(125,211,252,.18), rgba(56,189,248,.10) 42%, transparent 72%)!important;
  box-shadow:0 0 44px rgba(56,189,248,.16), inset 0 0 28px rgba(255,255,255,.06)!important;
  opacity:.94!important;
}
.battleShuffleFx--v38 .battleShuffleFx__packet,
.battleShuffleFx--v38 .battleShuffleFx__riffle,
.battleShuffleFx--v38 .battleShuffleFx__finalDeck{
  position:absolute!important;
  left:50%!important;
  top:52%!important;
  width:90px!important;
  height:126px!important;
  transform-style:preserve-3d!important;
  pointer-events:none!important;
}
.battleShuffleFx--v38 .battleShuffleFx__packet--left{
  transform:translate(-50%,-50%) translateX(-72px) rotateZ(-5deg)!important;
}
.battleShuffleFx--v38 .battleShuffleFx__packet--right{
  transform:translate(-50%,-50%) translateX(72px) rotateZ(5deg)!important;
}
.battleShuffleFx--v38 .battleShuffleFx__riffle,
.battleShuffleFx--v38 .battleShuffleFx__finalDeck{
  transform:translate(-50%,-50%)!important;
}
.battleShuffleFx--v38 .battleShuffleFx__card,
.battleShuffleFx--v38 .battleShuffleFx__riffleCard,
.battleShuffleFx--v38 .battleShuffleFx__stackCard{
  position:absolute!important;
  inset:0!important;
  width:90px!important;
  height:126px!important;
  border-radius:10px!important;
  overflow:hidden!important;
  border:1px solid rgba(224,242,254,.48)!important;
  background:#0f172a!important;
  box-shadow:0 14px 28px rgba(0,0,0,.34), 0 0 16px rgba(56,189,248,.12)!important;
  transform-origin:center center!important;
  opacity:0;
  will-change:transform, opacity!important;
  backface-visibility:hidden!important;
}
.battleShuffleFx--v38 .battleShuffleFx__card img,
.battleShuffleFx--v38 .battleShuffleFx__riffleCard img,
.battleShuffleFx--v38 .battleShuffleFx__stackCard img{
  width:100%!important;
  height:100%!important;
  object-fit:cover!important;
  display:block!important;
  user-select:none!important;
  pointer-events:none!important;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__card--left{
  animation:battleShuffleV38LeftPacket 2.05s cubic-bezier(.2,.86,.18,1) both!important;
  animation-delay:calc(150ms + var(--i) * 24ms)!important;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__card--right{
  animation:battleShuffleV38RightPacket 2.05s cubic-bezier(.2,.86,.18,1) both!important;
  animation-delay:calc(150ms + var(--i) * 24ms)!important;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__riffleCard{
  animation:battleShuffleV38Riffle 1.65s cubic-bezier(.17,.88,.2,1) both!important;
  animation-delay:calc(780ms + var(--i) * 46ms)!important;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__stackCard{
  animation:battleShuffleV38Stack 1.38s cubic-bezier(.15,.9,.22,1) both!important;
  animation-delay:calc(1720ms + var(--i) * 14ms)!important;
}
.battleShuffleFx--v38 .battleShuffleFx__shock{
  position:absolute!important;
  left:50%!important;
  top:62%!important;
  width:120px!important;
  height:120px!important;
  border-radius:50%!important;
  border:2px solid rgba(125,211,252,.72)!important;
  transform:translate(-50%,-50%) scale(.25)!important;
  opacity:0;
  pointer-events:none!important;
  box-shadow:0 0 28px rgba(56,189,248,.3)!important;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__shock{
  animation:battleShuffleV38Shock .72s ease-out 2.14s both!important;
}
.battleShuffleFx--v38 .battleShuffleFx__done{
  position:absolute!important;
  left:50%!important;
  bottom:28px!important;
  transform:translateX(-50%) translateY(10px) scale(.96)!important;
  padding:9px 22px!important;
  border-radius:999px!important;
  border:1px solid rgba(125,211,252,.46)!important;
  background:linear-gradient(135deg, rgba(8,47,73,.82), rgba(15,23,42,.74))!important;
  color:#e0f2fe!important;
  font-weight:1000!important;
  font-size:1.02rem!important;
  letter-spacing:.18em!important;
  text-transform:uppercase!important;
  opacity:0;
  box-shadow:0 0 26px rgba(56,189,248,.26)!important;
  pointer-events:none!important;
}
.battleShuffleFx--v38.battleFx--live .battleShuffleFx__done{
  animation:battleShuffleV38Done .74s cubic-bezier(.16,.9,.2,1) 2.22s both!important;
}
@keyframes battleShuffleV38Overlay{
  0%{opacity:0; transform:scale(.985)}
  5%{opacity:1; transform:scale(1)}
  91%{opacity:1; transform:scale(1)}
  100%{opacity:0; transform:scale(.992)}
}
@keyframes battleShuffleV38Sheen{
  0%{transform:translateX(-120%); opacity:0}
  20%{opacity:.85}
  100%{transform:translateX(120%); opacity:0}
}
@keyframes battleShuffleV38LeftPacket{
  0%{opacity:0; transform:translate3d(58px,26px,0) rotateZ(-2deg) scale(.88)}
  16%{opacity:1; transform:translate3d(0,0,0) rotateZ(calc(-4deg + var(--i) * -.25deg)) scale(1)}
  52%{opacity:1; transform:translate3d(0,0,0) rotateZ(calc(-4deg + var(--i) * -.25deg)) scale(1)}
  80%{opacity:.72; transform:translate3d(54px,8px,0) rotateZ(-1deg) scale(.96)}
  100%{opacity:0; transform:translate3d(70px,10px,0) rotateZ(0deg) scale(.94)}
}
@keyframes battleShuffleV38RightPacket{
  0%{opacity:0; transform:translate3d(-58px,26px,0) rotateZ(2deg) scale(.88)}
  16%{opacity:1; transform:translate3d(0,0,0) rotateZ(calc(4deg + var(--i) * .25deg)) scale(1)}
  52%{opacity:1; transform:translate3d(0,0,0) rotateZ(calc(4deg + var(--i) * .25deg)) scale(1)}
  80%{opacity:.72; transform:translate3d(-54px,8px,0) rotateZ(1deg) scale(.96)}
  100%{opacity:0; transform:translate3d(-70px,10px,0) rotateZ(0deg) scale(.94)}
}
@keyframes battleShuffleV38Riffle{
  0%{opacity:0; transform:translate3d(calc(var(--dir) * 115px), 36px, 0) rotateZ(calc(var(--dir) * 8deg)) scale(.82)}
  28%{opacity:1; transform:translate3d(calc(var(--dir) * 48px), calc(var(--center) * 2px), 0) rotateZ(calc(var(--dir) * 4deg)) scale(.97)}
  68%{opacity:1; transform:translate3d(calc(var(--center) * 7px), calc(var(--center) * -.35px), 0) rotateZ(calc(var(--center) * .8deg)) scale(1)}
  100%{opacity:0; transform:translate3d(0,0,0) rotateZ(0deg) scale(.9)}
}
@keyframes battleShuffleV38Stack{
  0%{opacity:0; transform:translate3d(calc((var(--i) - 4) * 11px), 28px, 0) rotateZ(calc((var(--i) - 4) * 2deg)) scale(.86)}
  38%{opacity:1; transform:translate3d(calc((var(--i) - 4) * 4px), 7px, 0) rotateZ(calc((var(--i) - 4) * .7deg)) scale(1.02)}
  66%{opacity:1; transform:translate3d(calc((var(--i) - 4) * 1.4px), calc((var(--i) - 4) * -1.1px), 0) rotateZ(0deg) scale(1)}
  100%{opacity:1; transform:translate3d(calc((var(--i) - 4) * .75px), calc((var(--i) - 4) * -.75px), 0) rotateZ(0deg) scale(1)}
}
@keyframes battleShuffleV38Shock{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.2)}
  20%{opacity:.9}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.9)}
}
@keyframes battleShuffleV38Done{
  0%{opacity:0; transform:translateX(-50%) translateY(12px) scale(.92)}
  55%{opacity:1; transform:translateX(-50%) translateY(0) scale(1.04)}
  100%{opacity:1; transform:translateX(-50%) translateY(0) scale(1)}
}


/* ======================================================
   v40 shuffle visual cleanup: remove table/ring behind cards
   ====================================================== */
.battleShuffleFx--v38 .battleShuffleFx__table,
.battleShuffleFx--v38 .battleShuffleFx__shock{
  display:none!important;
  opacity:0!important;
  visibility:hidden!important;
  animation:none!important;
  box-shadow:none!important;
  border:0!important;
  background:transparent!important;
}
.battleShuffleFx--v38 .battleShuffleFx__panel{
  background:linear-gradient(180deg, rgba(20,31,55,.88), rgba(8,13,28,.82))!important;
}

/* ======================================================
   v41 sleek random spot reveal: clear candidates, delayed result
   ====================================================== */
.battleRandomSpotFx--cinematic{
  position:fixed!important;
  inset:0!important;
  z-index:1000000!important;
  opacity:0;
  pointer-events:auto!important;
  overflow:hidden!important;
  contain:layout paint!important;
}
.battleRandomSpotFx--cinematic.battleFx--live{
  animation:battleRandomSpotV41Life 4.8s cubic-bezier(.16,.84,.18,1) both!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__veil{
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg, rgba(2,6,23,.48), rgba(2,6,23,.36) 48%, rgba(2,6,23,.50)),
    radial-gradient(circle at 50% 50%, rgba(56,189,248,.10), transparent 44%)!important;
  backdrop-filter:blur(2px) saturate(120%)!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__hud{
  position:absolute!important;
  left:50%!important;
  top:6.2vh!important;
  transform:translateX(-50%)!important;
  width:min(620px,72vw)!important;
  padding:14px 22px 16px!important;
  border:1px solid rgba(103,232,249,.28)!important;
  border-radius:24px!important;
  background:linear-gradient(135deg, rgba(15,23,42,.78), rgba(30,41,59,.48))!important;
  box-shadow:0 24px 70px rgba(0,0,0,.36), inset 0 0 30px rgba(103,232,249,.04)!important;
  text-align:center!important;
  pointer-events:none!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__eyebrow,
.battleRandomSpotFx--cinematic .battleRandomSpotFx__title,
.battleRandomSpotFx--cinematic .battleRandomSpotFx__subtitle{
  position:static!important;
  left:auto!important;
  right:auto!important;
  top:auto!important;
  transform:none!important;
  text-align:center!important;
  text-transform:uppercase!important;
  font-weight:1000!important;
  pointer-events:none!important;
  text-shadow:0 4px 18px rgba(0,0,0,.65)!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__eyebrow{
  color:#67e8f9!important;
  letter-spacing:.26em!important;
  font-size:.7rem!important;
  opacity:.92!important;
  margin-bottom:3px!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__title{
  color:#f8fafc!important;
  font-size:1.56rem!important;
  letter-spacing:.2em!important;
  line-height:1.05!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__subtitle{
  color:rgba(226,232,240,.76)!important;
  font-size:.72rem!important;
  letter-spacing:.13em!important;
  margin-top:7px!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__marker{
  position:absolute!important;
  left:var(--x)!important;
  top:var(--y)!important;
  width:calc(var(--w) + 22px)!important;
  height:calc(var(--h) + 22px)!important;
  border-radius:24px!important;
  transform:translate(-50%,-50%) scale(.88)!important;
  opacity:0!important;
  border:2px solid rgba(103,232,249,.36)!important;
  background:linear-gradient(135deg, rgba(8,47,73,.18), rgba(15,23,42,.04))!important;
  box-shadow:0 0 0 1px rgba(255,255,255,.08), inset 0 0 30px rgba(103,232,249,.08), 0 12px 34px rgba(0,0,0,.24)!important;
  filter:none!important;
  will-change:transform, opacity!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__marker span{
  position:absolute!important;
  inset:7px!important;
  border-radius:18px!important;
  border:1px solid rgba(226,232,240,.22)!important;
  background:linear-gradient(135deg, rgba(103,232,249,.08), rgba(255,255,255,.02))!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__marker b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:18px!important;
  height:18px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%) scale(.65)!important;
  background:rgba(103,232,249,.88)!important;
  box-shadow:0 0 20px rgba(103,232,249,.78), 0 0 54px rgba(103,232,249,.22)!important;
  opacity:0!important;
}
.battleRandomSpotFx--cinematic.battleFx--live .battleRandomSpotFx__marker{
  animation:battleRandomSpotV41Candidate 2.72s cubic-bezier(.18,.86,.18,1) both!important;
  animation-delay:calc(.18s + var(--i) * 80ms)!important;
}
.battleRandomSpotFx--cinematic.battleFx--live .battleRandomSpotFx__marker b{
  animation:battleRandomSpotV41Dot 1.15s ease-in-out infinite alternate!important;
  animation-delay:calc(.26s + var(--i) * 80ms)!important;
}
.battleRandomSpotFx--cinematic.battleFx--live .battleRandomSpotFx__marker--winner{
  animation:battleRandomSpotV41Winner 4.12s cubic-bezier(.16,.86,.18,1) both!important;
  animation-delay:.18s!important;
  z-index:3!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__cursor{
  position:absolute!important;
  left:var(--winner-x, 50vw)!important;
  top:var(--winner-y, 50vh)!important;
  width:104px!important;
  height:104px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%) scale(.72)!important;
  opacity:0!important;
  display:grid!important;
  place-items:center!important;
  color:#e0f2fe!important;
  font-weight:1000!important;
  font-size:2rem!important;
  letter-spacing:.02em!important;
  background:radial-gradient(circle, rgba(14,165,233,.22), rgba(15,23,42,.10) 58%, transparent 72%)!important;
  border:1px solid rgba(103,232,249,.36)!important;
  box-shadow:0 0 46px rgba(103,232,249,.34)!important;
  pointer-events:none!important;
}
.battleRandomSpotFx--cinematic.battleFx--live .battleRandomSpotFx__cursor{
  animation:battleRandomSpotV41Cursor 2.9s cubic-bezier(.18,.86,.18,1) .14s both!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__beam{
  position:absolute!important;
  left:var(--winner-x, 50vw)!important;
  top:var(--winner-y, 50vh)!important;
  width:220px!important;
  height:220px!important;
  border-radius:999px!important;
  transform:translate(-50%,-50%) scale(.18)!important;
  opacity:0!important;
  background:radial-gradient(circle, rgba(250,204,21,.58), rgba(103,232,249,.34) 34%, rgba(255,255,255,.18) 46%, transparent 70%)!important;
  mix-blend-mode:screen!important;
  filter:none!important;
  pointer-events:none!important;
}
.battleRandomSpotFx--cinematic.battleFx--live .battleRandomSpotFx__beam{
  animation:battleRandomSpotV41Beam 1.15s cubic-bezier(.16,.86,.18,1) 2.82s both!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__result{
  position:absolute!important;
  left:var(--winner-x, 50vw)!important;
  top:calc(var(--winner-y, 50vh) + 116px)!important;
  right:auto!important;
  transform:translate(-50%, 16px) scale(.94)!important;
  opacity:0!important;
  min-width:min(420px, 62vw)!important;
  max-width:78vw!important;
  padding:12px 20px 13px!important;
  border-radius:999px!important;
  border:1px solid rgba(253,224,71,.52)!important;
  background:linear-gradient(135deg, rgba(15,23,42,.88), rgba(69,26,3,.40))!important;
  color:#fff7c2!important;
  text-align:center!important;
  text-transform:uppercase!important;
  font-size:1.28rem!important;
  letter-spacing:.075em!important;
  font-weight:1000!important;
  box-shadow:0 18px 60px rgba(0,0,0,.52), 0 0 40px rgba(250,204,21,.28)!important;
  text-shadow:0 3px 14px rgba(0,0,0,.72)!important;
  pointer-events:none!important;
}
.battleRandomSpotFx--cinematic .battleRandomSpotFx__result small{
  display:block!important;
  color:#67e8f9!important;
  font-size:.57rem!important;
  letter-spacing:.28em!important;
  margin-bottom:4px!important;
  opacity:.92!important;
}
.battleRandomSpotFx--cinematic.battleFx--live .battleRandomSpotFx__result{
  animation:battleRandomSpotV41Result .72s cubic-bezier(.16,.86,.18,1) 2.95s both!important;
}
@keyframes battleRandomSpotV41Life{
  0%{opacity:0}
  5%{opacity:1}
  88%{opacity:1}
  100%{opacity:0}
}
@keyframes battleRandomSpotV41Candidate{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.78)}
  18%{opacity:.94; transform:translate(-50%,-50%) scale(1.02)}
  46%{opacity:.55; transform:translate(-50%,-50%) scale(.96)}
  72%{opacity:.82; transform:translate(-50%,-50%) scale(1)}
  100%{opacity:.22; transform:translate(-50%,-50%) scale(.94)}
}
@keyframes battleRandomSpotV41Dot{
  from{opacity:.2; transform:translate(-50%,-50%) scale(.62)}
  to{opacity:.95; transform:translate(-50%,-50%) scale(1.02)}
}
@keyframes battleRandomSpotV41Winner{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.78); border-color:rgba(103,232,249,.36)}
  15%{opacity:.98; transform:translate(-50%,-50%) scale(1.03); border-color:rgba(103,232,249,.54)}
  47%{opacity:.32; transform:translate(-50%,-50%) scale(.94); border-color:rgba(103,232,249,.28)}
  66%{opacity:1; transform:translate(-50%,-50%) scale(1.18); border-color:rgba(253,224,71,.98); box-shadow:0 0 0 4px rgba(253,224,71,.18), 0 0 66px rgba(250,204,21,.58), 0 0 92px rgba(103,232,249,.36), inset 0 0 48px rgba(250,204,21,.16)}
  82%{opacity:1; transform:translate(-50%,-50%) scale(1.08)}
  100%{opacity:1; transform:translate(-50%,-50%) scale(1.1); border-color:rgba(253,224,71,.88); box-shadow:0 0 0 3px rgba(253,224,71,.16), 0 0 62px rgba(250,204,21,.48), inset 0 0 40px rgba(250,204,21,.16)}
}
@keyframes battleRandomSpotV41Cursor{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.55) rotate(0deg)}
  13%{opacity:1; transform:translate(-50%,-50%) scale(.92) rotate(24deg)}
  54%{opacity:.9; transform:translate(-50%,-50%) scale(1.05) rotate(220deg)}
  82%{opacity:0; transform:translate(-50%,-50%) scale(.82) rotate(360deg)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(.72) rotate(390deg)}
}
@keyframes battleRandomSpotV41Beam{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.18)}
  35%{opacity:.96; transform:translate(-50%,-50%) scale(.78)}
  100%{opacity:0; transform:translate(-50%,-50%) scale(1.22)}
}
@keyframes battleRandomSpotV41Result{
  0%{opacity:0; transform:translate(-50%, 18px) scale(.94); filter:blur(6px)}
  58%{opacity:1; transform:translate(-50%, 0) scale(1.04); filter:blur(0)}
  100%{opacity:1; transform:translate(-50%, 0) scale(1); filter:blur(0)}
}

/* ======================================================
   v42 Random Spot: early-2000s board-target selector
   - Highlights actual eligible slots
   - Stepped ? cursor hops through candidates
   - Result hidden until final lock-on
   ====================================================== */
.battleRandomSpotFx--retro{
  position:fixed!important;
  inset:0!important;
  z-index:1000000!important;
  opacity:0;
  pointer-events:auto!important;
  overflow:hidden!important;
  contain:layout paint!important;
  font-family:inherit!important;
}
.battleRandomSpotFx--retro.battleFx--live{
  animation:battleRandomSpotV42Life 5.6s steps(1,end) both!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__veil{
  position:absolute!important;
  inset:0!important;
  background:
    linear-gradient(180deg, rgba(2,6,23,.58), rgba(8,13,30,.42) 45%, rgba(2,6,23,.62)),
    repeating-linear-gradient(0deg, rgba(255,255,255,.028) 0 1px, transparent 1px 4px)!important;
  backdrop-filter:blur(1px) saturate(112%)!important;
  pointer-events:auto!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__hud{
  position:fixed!important;
  left:50%!important;
  top:5.8vh!important;
  transform:translateX(-50%)!important;
  width:min(620px,74vw)!important;
  padding:13px 22px 15px!important;
  border:3px solid rgba(226,232,240,.78)!important;
  border-radius:8px!important;
  background:linear-gradient(180deg, rgba(15,23,42,.94), rgba(20,36,68,.86))!important;
  box-shadow:
    0 0 0 3px rgba(15,23,42,.72),
    0 18px 44px rgba(0,0,0,.48),
    inset 0 0 0 2px rgba(103,232,249,.14)!important;
  text-align:center!important;
  pointer-events:none!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__eyebrow,
.battleRandomSpotFx--retro .battleRandomSpotFx__title,
.battleRandomSpotFx--retro .battleRandomSpotFx__subtitle{
  position:static!important;
  inset:auto!important;
  transform:none!important;
  text-align:center!important;
  text-transform:uppercase!important;
  pointer-events:none!important;
  font-weight:1000!important;
  text-shadow:2px 3px 0 rgba(0,0,0,.58), 0 0 18px rgba(103,232,249,.22)!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__eyebrow{
  color:#67e8f9!important;
  font-size:.78rem!important;
  line-height:1!important;
  letter-spacing:.24em!important;
  margin-bottom:4px!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__title{
  color:#f8fafc!important;
  font-size:1.72rem!important;
  line-height:1!important;
  letter-spacing:.18em!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__subtitle{
  color:#fde68a!important;
  font-size:.78rem!important;
  letter-spacing:.12em!important;
  margin-top:8px!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__screenFlash{
  position:fixed!important;
  inset:0!important;
  pointer-events:none!important;
  opacity:0!important;
  background:rgba(255,255,255,.58)!important;
}
.battleRandomSpotFx--retro.battleRandomSpotFx--revealed .battleRandomSpotFx__screenFlash{
  animation:battleRandomSpotV42Flash .34s steps(2,end) both!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker{
  position:fixed!important;
  left:var(--x)!important;
  top:var(--y)!important;
  width:calc(var(--w) + 28px)!important;
  height:calc(var(--h) + 28px)!important;
  transform:translate(-50%,-50%) scale(.96)!important;
  opacity:0!important;
  border:3px solid rgba(103,232,249,.84)!important;
  border-radius:4px!important;
  background:rgba(14,165,233,.06)!important;
  box-shadow:
    0 0 0 3px rgba(8,13,30,.62),
    0 0 24px rgba(103,232,249,.34),
    inset 0 0 0 2px rgba(255,255,255,.08)!important;
  filter:none!important;
  will-change:transform, opacity!important;
  pointer-events:none!important;
}
.battleRandomSpotFx--retro.battleFx--live .battleRandomSpotFx__marker{
  animation:battleRandomSpotV42CandidateIn .48s steps(3,end) both!important;
  animation-delay:calc(.12s + var(--i) * 60ms)!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker span{
  position:absolute!important;
  inset:6px!important;
  border:2px dashed rgba(207,250,254,.46)!important;
  border-radius:3px!important;
  background:linear-gradient(135deg, rgba(103,232,249,.08), rgba(2,6,23,.02))!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker::before,
.battleRandomSpotFx--retro .battleRandomSpotFx__marker::after,
.battleRandomSpotFx--retro .battleRandomSpotFx__marker span::before,
.battleRandomSpotFx--retro .battleRandomSpotFx__marker span::after{
  content:""!important;
  position:absolute!important;
  width:18px!important;
  height:18px!important;
  border-color:#e0f2fe!important;
  filter:drop-shadow(0 0 8px rgba(103,232,249,.88))!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker::before{left:-7px!important;top:-7px!important;border-left:5px solid!important;border-top:5px solid!important;}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker::after{right:-7px!important;top:-7px!important;border-right:5px solid!important;border-top:5px solid!important;}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker span::before{left:-13px!important;bottom:-13px!important;border-left:5px solid!important;border-bottom:5px solid!important;}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker span::after{right:-13px!important;bottom:-13px!important;border-right:5px solid!important;border-bottom:5px solid!important;}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker b{
  position:absolute!important;
  left:50%!important;
  top:50%!important;
  width:12px!important;
  height:12px!important;
  transform:translate(-50%,-50%)!important;
  border-radius:0!important;
  background:#67e8f9!important;
  box-shadow:0 0 12px rgba(103,232,249,.88)!important;
  opacity:.86!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker em{
  display:none!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker.is-current{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1.08)!important;
  border-color:#fde047!important;
  background:rgba(250,204,21,.12)!important;
  box-shadow:
    0 0 0 4px rgba(8,13,30,.66),
    0 0 34px rgba(250,204,21,.62),
    inset 0 0 26px rgba(250,204,21,.16)!important;
  animation:battleRandomSpotV42CurrentBlink .22s steps(2,end) infinite!important;
  z-index:4!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker.is-current::before,
.battleRandomSpotFx--retro .battleRandomSpotFx__marker.is-current::after,
.battleRandomSpotFx--retro .battleRandomSpotFx__marker.is-current span::before,
.battleRandomSpotFx--retro .battleRandomSpotFx__marker.is-current span::after{
  border-color:#fff7ad!important;
  filter:drop-shadow(0 0 10px rgba(250,204,21,.9))!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__marker.is-final{
  opacity:1!important;
  transform:translate(-50%,-50%) scale(1.16)!important;
  border-color:#fff7ad!important;
  background:rgba(251,191,36,.16)!important;
  box-shadow:
    0 0 0 5px rgba(8,13,30,.72),
    0 0 0 10px rgba(250,204,21,.18),
    0 0 54px rgba(250,204,21,.82),
    0 0 90px rgba(103,232,249,.34),
    inset 0 0 32px rgba(255,247,173,.22)!important;
  animation:battleRandomSpotV42WinnerHold 1.05s steps(3,end) infinite!important;
  z-index:5!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__cursor{
  position:fixed!important;
  left:-9999px;
  top:-9999px;
  width:58px!important;
  height:48px!important;
  transform:translate(-50%, calc(-100% - 16px))!important;
  opacity:0!important;
  display:grid!important;
  place-items:center!important;
  border-radius:4px!important;
  border:3px solid #f8fafc!important;
  background:linear-gradient(180deg, #facc15, #f97316)!important;
  color:#111827!important;
  box-shadow:0 0 0 3px rgba(17,24,39,.84), 0 10px 28px rgba(0,0,0,.48), 0 0 24px rgba(250,204,21,.58)!important;
  font-size:2rem!important;
  font-weight:1000!important;
  line-height:1!important;
  pointer-events:none!important;
  z-index:7!important;
  transition:opacity .06s steps(1,end)!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__cursor::after{
  content:""!important;
  position:absolute!important;
  left:50%!important;
  bottom:-16px!important;
  transform:translateX(-50%)!important;
  border-left:12px solid transparent!important;
  border-right:12px solid transparent!important;
  border-top:14px solid #f97316!important;
  filter:drop-shadow(0 4px 0 rgba(17,24,39,.9))!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__cursor.is-visible{
  opacity:1!important;
  animation:battleRandomSpotV42CursorBounce .26s steps(2,end) infinite!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__cursor.is-final{
  background:linear-gradient(180deg, #fff7ad, #facc15)!important;
  animation:battleRandomSpotV42CursorFinal .82s steps(3,end) infinite!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__beam{
  display:none!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__result{
  position:fixed!important;
  left:50%!important;
  right:auto!important;
  top:auto!important;
  bottom:8.5vh!important;
  transform:translate(-50%, 16px) scale(.92)!important;
  opacity:0!important;
  width:min(720px,82vw)!important;
  padding:15px 24px 17px!important;
  border-radius:8px!important;
  border:3px solid #f8fafc!important;
  background:linear-gradient(180deg, rgba(120,53,15,.96), rgba(30,41,59,.96))!important;
  color:#fff7ad!important;
  font-size:1.55rem!important;
  letter-spacing:.08em!important;
  text-transform:uppercase!important;
  font-weight:1000!important;
  text-align:center!important;
  text-shadow:2px 3px 0 rgba(0,0,0,.64)!important;
  box-shadow:0 0 0 4px rgba(17,24,39,.86), 0 22px 52px rgba(0,0,0,.52), 0 0 28px rgba(250,204,21,.42)!important;
  pointer-events:none!important;
  z-index:8!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__result small{
  display:block!important;
  font-size:.68rem!important;
  color:#67e8f9!important;
  letter-spacing:.25em!important;
  margin-bottom:5px!important;
}
.battleRandomSpotFx--retro .battleRandomSpotFx__result.is-revealed{
  animation:battleRandomSpotV42ResultIn .5s steps(3,end) both!important;
}
@keyframes battleRandomSpotV42Life{
  0%{opacity:0}
  4%{opacity:1}
  94%{opacity:1}
  100%{opacity:0}
}
@keyframes battleRandomSpotV42CandidateIn{
  0%{opacity:0; transform:translate(-50%,-50%) scale(.86)}
  45%{opacity:1; transform:translate(-50%,-50%) scale(1.04)}
  100%{opacity:.74; transform:translate(-50%,-50%) scale(1)}
}
@keyframes battleRandomSpotV42CurrentBlink{
  0%,100%{filter:brightness(1)}
  50%{filter:brightness(1.45)}
}
@keyframes battleRandomSpotV42WinnerHold{
  0%,100%{filter:brightness(1); transform:translate(-50%,-50%) scale(1.12)}
  50%{filter:brightness(1.35); transform:translate(-50%,-50%) scale(1.18)}
}
@keyframes battleRandomSpotV42CursorBounce{
  0%,100%{transform:translate(-50%, calc(-100% - 16px))}
  50%{transform:translate(-50%, calc(-100% - 24px))}
}
@keyframes battleRandomSpotV42CursorFinal{
  0%,100%{transform:translate(-50%, calc(-100% - 18px)) scale(1)}
  50%{transform:translate(-50%, calc(-100% - 30px)) scale(1.08)}
}
@keyframes battleRandomSpotV42Flash{
  0%{opacity:0}
  18%{opacity:.62}
  32%{opacity:.14}
  55%{opacity:.34}
  100%{opacity:0}
}
@keyframes battleRandomSpotV42ResultIn{
  0%{opacity:0; transform:translate(-50%, 18px) scale(.88)}
  55%{opacity:1; transform:translate(-50%, 0) scale(1.06)}
  100%{opacity:1; transform:translate(-50%, 0) scale(1)}
}

/* ======================================================
   v45 Random Spot cleanup: remove dashed inner guide lines
   ====================================================== */
.battleRandomSpotFx--retro .battleRandomSpotFx__marker span{
  border:0!important;
  outline:0!important;
  background:transparent!important;
  box-shadow:none!important;
}

/* ======================================================
   v46 Battle Drag & Drop UX Layer
   ====================================================== */
.battleDraggableCard{
  touch-action:none;
  user-select:none;
}
.battleDraggableCard:hover{
  filter:brightness(1.08) saturate(1.08);
}
.battleDragLayer{
  position:fixed;
  inset:0;
  z-index:1000002;
  pointer-events:none;
  overflow:hidden;
}
.battleDragGhost{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:1000003;
  border-radius:10px;
  filter:drop-shadow(0 22px 26px rgba(0,0,0,.55)) drop-shadow(0 0 22px rgba(83,225,255,.44));
  will-change:transform,opacity;
  transition:filter .12s ease, opacity .16s ease;
}
.battleDragGhost img,
.battleDragGhost .card-back{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:10px;
}
.battleDragGhost--drop{
  opacity:.45;
  filter:drop-shadow(0 12px 22px rgba(77,255,216,.55));
}
.battleDragGhost--return{
  opacity:0;
  filter:drop-shadow(0 10px 18px rgba(248,113,113,.55));
}
.battleDragSource--ghosting{
  opacity:.42!important;
  filter:grayscale(.25) brightness(.85)!important;
}
.battleDropTarget--valid{
  position:relative;
  outline:2px solid rgba(68,224,255,.65)!important;
  outline-offset:5px!important;
  box-shadow:0 0 0 2px rgba(68,224,255,.12), 0 0 24px rgba(68,224,255,.25), inset 0 0 18px rgba(68,224,255,.10)!important;
  border-radius:16px!important;
}
.battleDropTarget--hover{
  outline:3px solid rgba(255,214,74,.95)!important;
  outline-offset:7px!important;
  box-shadow:0 0 0 3px rgba(255,214,74,.18), 0 0 34px rgba(255,214,74,.52), inset 0 0 22px rgba(255,214,74,.12)!important;
}
.dragDeckChoiceGrid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  margin-top:14px;
}
body.battleFxInputLocked .battleDraggableCard{
  pointer-events:none!important;
}

/* ======================================================
   v48 Battle Drag & Drop action dock + stronger working drag affordances
   ====================================================== */
body.battleDragActive{
  cursor:grabbing!important;
}
.battleDragGhost--v48{
  animation:battleDragGhostPop .14s ease-out both;
}
@keyframes battleDragGhostPop{
  from{opacity:.72;transform:translate3d(var(--x,0),var(--y,0),0) translate(-50%,-50%) scale(.92)}
  to{opacity:1}
}
.battleDragActionDock{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:1000004;
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-radius:22px;
  background:linear-gradient(180deg,rgba(8,18,38,.94),rgba(3,8,18,.94));
  border:1px solid rgba(111,214,255,.38);
  box-shadow:0 18px 50px rgba(0,0,0,.58),0 0 34px rgba(68,224,255,.16),inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none;
}
.battleDragDockTarget{
  min-width:92px;
  padding:10px 12px;
  border-radius:16px;
  text-align:center;
  background:linear-gradient(180deg,rgba(19,36,66,.94),rgba(9,18,37,.94));
  border:1px solid rgba(150,200,255,.24);
  color:#e9f8ff;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.battleDragDockTarget b{
  display:block;
  font-size:.78rem;
  font-weight:1000;
}
.battleDragDockTarget span{
  display:block;
  margin-top:2px;
  font-size:.58rem;
  color:#a8c6e8;
  letter-spacing:.05em;
  text-transform:none;
}
.battleDragActionDock .battleDropTarget--valid{
  outline-offset:2px!important;
}
.battleDropTarget--valid{
  transition:outline-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.battleDropTarget--hover{
  transform:translateY(-1px);
}

/* ======================================================
   v51 hard-wired drag/drop reliability patch
   ====================================================== */
.battleDragLayer--v51{
  pointer-events:none!important;
}
.battleDraggableCard,
.evolutionTopCard,
#playerHand > .card,
#aiHand > .card,
#playerStadium .card,
#aiStadium .card,
#playerPlayZone .card,
#aiPlayZone .card{
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
}
body.battleFxInputLocked .battleDraggableCard,
body.battleFxInputLocked .evolutionTopCard,
body.battleFxInputLocked #playerHand > .card,
body.battleFxInputLocked #aiHand > .card{
  pointer-events:auto!important;
}
.battleDragGhost--v51{
  opacity:1!important;
  z-index:1000005!important;
}
.battleDragActionDock--v51{
  z-index:1000006!important;
}

/* ======================================================
   v52 direct live-card battle drag/drop
   ====================================================== */
.battleDraggableCard,
.evolutionTopCard,
#playerHand > .card,
#aiHand > .card,
#playerStadium .card,
#aiStadium .card,
#playerPlayZone .card,
#aiPlayZone .card{
  touch-action:none!important;
  user-select:none!important;
  -webkit-user-drag:none!important;
  cursor:grab!important;
}
body.battleDragActiveV52{cursor:grabbing!important;}
.battleDragLayerV52{
  position:fixed;
  inset:0;
  z-index:10000020;
  pointer-events:none;
  overflow:hidden;
}
.battleDragGhostV52{
  position:fixed;
  left:0;
  top:0;
  pointer-events:none;
  z-index:10000024;
  border-radius:12px;
  filter:drop-shadow(0 24px 28px rgba(0,0,0,.58)) drop-shadow(0 0 24px rgba(84,224,255,.48));
  will-change:transform,opacity;
  animation:battleDragV52Pop .12s ease-out both;
}
.battleDragGhostV52 img,.battleDragGhostV52 .card-back{
  width:100%;height:100%;object-fit:contain;border-radius:12px;
}
@keyframes battleDragV52Pop{from{opacity:.72;transform:translate3d(0,0,0) translate(-50%,-50%) scale(.94)}to{opacity:1}}
.battleDragGhostV52--drop{opacity:.42;transition:opacity .16s ease,filter .16s ease;filter:drop-shadow(0 12px 22px rgba(77,255,216,.55));}
.battleDragGhostV52--return{opacity:0;transition:opacity .16s ease,filter .16s ease;filter:drop-shadow(0 10px 18px rgba(248,113,113,.55));}
.battleDragSourceV52--ghosting{opacity:.42!important;filter:grayscale(.22) brightness(.86)!important;}
.battleDropTargetV52--valid{
  position:relative;
  outline:3px solid rgba(68,224,255,.72)!important;
  outline-offset:5px!important;
  border-radius:16px!important;
  box-shadow:0 0 0 2px rgba(68,224,255,.14),0 0 26px rgba(68,224,255,.30),inset 0 0 18px rgba(68,224,255,.12)!important;
  transition:outline-color .12s ease,box-shadow .12s ease,transform .12s ease;
}
.battleDropTargetV52--hover{
  outline:4px solid rgba(255,214,74,.98)!important;
  outline-offset:7px!important;
  transform:translateY(-1px);
  box-shadow:0 0 0 3px rgba(255,214,74,.20),0 0 38px rgba(255,214,74,.60),inset 0 0 22px rgba(255,214,74,.16)!important;
}
.battleDragActionDockV52{
  position:fixed;
  left:50%;
  bottom:28px;
  transform:translateX(-50%);
  z-index:10000023;
  display:flex;
  gap:10px;
  padding:12px 14px;
  border-radius:24px;
  background:linear-gradient(180deg,rgba(7,17,36,.96),rgba(2,7,17,.96));
  border:1px solid rgba(111,214,255,.42);
  box-shadow:0 18px 50px rgba(0,0,0,.62),0 0 34px rgba(68,224,255,.18),inset 0 1px 0 rgba(255,255,255,.14);
  pointer-events:none;
}
.battleDragDockTargetV52{
  min-width:96px;
  padding:10px 12px;
  border-radius:16px;
  text-align:center;
  background:linear-gradient(180deg,rgba(19,36,66,.96),rgba(9,18,37,.96));
  border:1px solid rgba(150,200,255,.28);
  color:#e9f8ff;
  text-transform:uppercase;
  letter-spacing:.08em;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.battleDragDockTargetV52 b{display:block;font-size:.78rem;font-weight:1000;}
.battleDragDockTargetV52 span{display:block;margin-top:2px;font-size:.58rem;color:#a8c6e8;letter-spacing:.05em;text-transform:none;}
.battleDragActionDockV52 .battleDropTargetV52--valid{outline-offset:2px!important;}

/* v53 battle drag/drop explicit rendered-card UX */
.battleDragSourceV53,
[data-battle-drag-source="1"] {
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}
.battleDragSourceV53 img,
[data-battle-drag-source="1"] img,
#game img {
  -webkit-user-drag: none;
  user-select: none;
  width: ;
}
.battleDragActiveV53 {
  cursor: grabbing !important;
}
.battleDragSourceV53--ghosting {
  opacity: 0.46 !important;
  filter: saturate(0.65) brightness(0.85);
}
.battleDragGhostV53 {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 2147483000;
  pointer-events: none;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 28px 70px rgba(0,0,0,0.55), 0 0 26px rgba(80,220,255,0.5);
  transition: opacity 160ms ease, transform 60ms linear;
  will-change: transform, opacity;
}
.battleDragGhostV53 img,
.battleDragGhostV53 .card-back {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}
.battleDragGhostV53--drop {
  opacity: 0;
  transform: translate3d(var(--drop-x, 0), var(--drop-y, 0), 0) scale(0.65) !important;
}
.battleDragGhostV53--return {
  opacity: 0;
  transform: scale(0.65) !important;
}
.battleDropTargetV53--valid {
  outline: 3px solid rgba(40, 225, 255, 0.95) !important;
  outline-offset: 4px;
  box-shadow: 0 0 0 4px rgba(16, 185, 255, 0.18), 0 0 28px rgba(45, 225, 255, 0.7) !important;
  border-radius: 14px;
  position: relative;
}
.battleDropTargetV53--hover {
  outline-color: rgba(255, 215, 70, 1) !important;
  box-shadow: 0 0 0 5px rgba(255, 215, 70, 0.28), 0 0 42px rgba(255, 215, 70, 0.9) !important;
  transform: translateY(-1px);
}
.battleDragActionDockV53 {
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 2147482500;
  display: flex;
  gap: 10px;
  padding: 12px;
  border-radius: 22px;
  background: rgba(5, 12, 31, 0.86);
  border: 1px solid rgba(148, 211, 255, 0.35);
  box-shadow: 0 24px 70px rgba(0,0,0,0.55), inset 0 0 0 1px rgba(255,255,255,0.06);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.battleDragDockTargetV53 {
  pointer-events: none;
  min-width: 110px;
  padding: 10px 12px;
  border-radius: 16px;
  text-align: center;
  color: #e6faff;
  font-weight: 1000;
  background: linear-gradient(180deg, rgba(18, 35, 67, 0.96), rgba(5, 13, 32, 0.96));
  border: 1px solid rgba(93, 220, 255, 0.45);
}
.battleDragDockTargetV53 b {
  display: block;
  font-size: 0.9rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.battleDragDockTargetV53 span {
  display: block;
  margin-top: 2px;
  font-size: 0.68rem;
  color: rgba(205, 239, 255, 0.76);
}
.battleDragDockTargetV53.battleDropTargetV53--hover {
  background: linear-gradient(180deg, rgba(82, 61, 12, 0.98), rgba(37, 23, 6, 0.98));
}
.dragDeckChoiceGrid {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}


/* ======================================================
   v55 hand-card drag reliability patch
   ====================================================== */
#game #playerHand > .card.battleDraggableCard,
#game #aiHand > .card.battleDraggableCard {
  touch-action: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
  cursor: grab !important;
}
#game #playerHand > .card.battleDraggableCard img,
#game #aiHand > .card.battleDraggableCard img {
  pointer-events: none !important;
  user-select: none !important;
  -webkit-user-drag: none !important;
}
body.battleDragActiveV53 #game #playerHand > .card.battleDraggableCard,
body.battleDragActiveV53 #game #aiHand > .card.battleDraggableCard {
  cursor: grabbing !important;
}

/* v58 cinematic card inspection overlay */
.modalOverlay.inspectOverlay{
  z-index: 99999 !important;
  padding: 0 !important;
  background:
    radial-gradient(circle at 24% 50%, rgba(69,224,255,0.18), transparent 34%),
    radial-gradient(circle at 82% 54%, rgba(130,91,255,0.13), transparent 38%),
    rgba(2, 8, 22, 0.74) !important;
  backdrop-filter: blur(7px) saturate(1.08);
  -webkit-backdrop-filter: blur(7px) saturate(1.08);
  overflow: hidden;
}
.modalOverlay.inspectOverlay::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.18;
  background:
    linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px);
  background-size: 100% 5px, 68px 100%;
  mix-blend-mode: screen;
}
.modalOverlay.inspectOverlay::after{
  content:"";
  position:absolute;
  inset:-1px;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(0,0,0,.36), transparent 20%, transparent 78%, rgba(0,0,0,.34)),
    linear-gradient(180deg, rgba(0,0,0,.25), transparent 22%, transparent 75%, rgba(0,0,0,.32));
}
.modal.cardInspectModal{
  position:relative !important;
  z-index:100000 !important;
  width:100vw !important;
  height:100vh !important;
  max-height:none !important;
  border:0 !important;
  border-radius:0 !important;
  overflow:hidden !important;
  background: transparent !important;
  box-shadow:none !important;
  color: var(--text);
  display:grid;
  grid-template-columns: minmax(360px, 50vw) minmax(340px, 42vw);
  grid-template-rows: 1fr;
  align-items:center;
  justify-content:center;
  gap: clamp(20px, 3vw, 64px);
  padding: clamp(20px, 4vw, 72px);
  opacity:0;
  transform: scale(.985);
  transition: opacity 240ms ease, transform 360ms cubic-bezier(.16,1,.3,1);
}
.modalOverlay.inspectLive .modal.cardInspectModal{
  opacity:1;
  transform: scale(1);
}
.modalOverlay.inspectClosing .modal.cardInspectModal{
  opacity:0;
  transform: scale(.985);
}
.modal.cardInspectModal .modalHeader{
  position:absolute;
  top: clamp(16px, 2.5vw, 34px);
  right: clamp(18px, 3vw, 46px);
  z-index:5;
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
}
.modal.cardInspectModal .modalTitle{ display:none !important; }
.modal.cardInspectModal #modalClose,
.modal.cardInspectModal .modalClose{
  width:48px;
  height:48px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.18);
  background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.04)), rgba(121,36,72,.76);
  box-shadow: 0 18px 42px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.18);
  font-size:20px;
  transition: transform 160ms ease, filter 160ms ease, box-shadow 160ms ease;
}
.modal.cardInspectModal #modalClose:hover,
.modal.cardInspectModal .modalClose:hover{
  transform: translateY(-2px) scale(1.03);
  filter: brightness(1.15);
}
.modal.cardInspectModal .modalBody{
  grid-column:1;
  height:100%;
  max-height:none !important;
  overflow:visible !important;
  padding:0 !important;
  display:flex;
  align-items:center;
  justify-content:center;
}
.battleInspectShell{
  position:relative;
  width:100%;
  height:min(82vh, 820px);
  display:flex;
  align-items:center;
  justify-content:center;
}
.battleInspectCardStage{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  width:100%;
  height:100%;
  perspective: 1200px;
}
.battleInspectInfo{
  position:absolute;
  left: clamp(8px, 2vw, 34px);
  top: clamp(6px, 2vh, 28px);
  z-index:3;
  padding: 12px 16px 11px;
  border-radius:18px;
  background: linear-gradient(135deg, rgba(8,20,45,.72), rgba(18,35,71,.38));
  border:1px solid rgba(116,226,255,.22);
  box-shadow: 0 14px 34px rgba(0,0,0,.28), inset 0 1px 0 rgba(255,255,255,.08);
  transform: translateX(-18px);
  opacity:0;
  transition: transform 420ms cubic-bezier(.16,1,.3,1) 120ms, opacity 280ms ease 120ms;
}
.modalOverlay.inspectLive .battleInspectInfo{
  transform: translateX(0);
  opacity:1;
}
.battleInspectKicker{
  font-size:12px;
  font-weight:950;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#7beeff;
  text-shadow:0 0 16px rgba(77,221,255,.58);
}
.battleInspectName{
  margin-top:2px;
  font-size: clamp(26px, 3.2vw, 48px);
  line-height:.95;
  font-weight:1000;
  letter-spacing:.02em;
  color:#f8fbff;
  text-shadow:0 8px 26px rgba(0,0,0,.58);
}
.battleInspectStats{
  margin-top:6px;
  color:#cbd7ee;
  font-size:12px;
  font-weight:900;
  letter-spacing:.08em;
  text-transform:uppercase;
}
.battleInspectCardFrame{
  position:relative;
  height: min(76vh, 760px);
  max-width:min(42vw, 520px);
  aspect-ratio: 63 / 88;
  border-radius: clamp(16px, 2vw, 28px);
  transform: translate3d(-7vw, 3vh, 0) scale(.42) rotate(-7deg) rotateY(10deg);
  opacity:0;
  filter: drop-shadow(0 35px 54px rgba(0,0,0,.56));
  transition:
    transform 560ms cubic-bezier(.16,1,.3,1),
    opacity 240ms ease,
    filter 560ms ease;
  will-change: transform, opacity, filter;
}
.modalOverlay.inspectLive .battleInspectCardFrame{
  transform: translate3d(0, 0, 0) scale(1) rotate(-1.2deg) rotateY(0deg);
  opacity:1;
  filter: drop-shadow(0 42px 70px rgba(0,0,0,.62));
}
.modalOverlay.inspectClosing .battleInspectCardFrame{
  transform: translate3d(-4vw, 2vh, 0) scale(.72) rotate(-5deg);
  opacity:0;
}
.battleInspectCardFrame::before{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:inherit;
  background: linear-gradient(145deg, rgba(82,232,255,.88), rgba(119,94,255,.32), rgba(255,211,92,.55));
  filter: blur(10px);
  opacity:.56;
  z-index:-1;
}
.battleInspectCardFrame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(105deg, transparent 0%, transparent 38%, rgba(255,255,255,.22) 47%, transparent 57%, transparent 100%);
  transform: translateX(-120%);
  transition: transform 900ms cubic-bezier(.16,1,.3,1) 240ms;
  mix-blend-mode: screen;
}
.modalOverlay.inspectLive .battleInspectCardFrame::after{
  transform: translateX(120%);
}
.battleInspectCardFrame img{
  width:100%;
  height:100%;
  object-fit:contain;
  border-radius:inherit;
  display:block;
  user-select:none;
  -webkit-user-drag:none;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.2);
}
.battleInspectCommandHint{
  display:none;
}
.modal.cardInspectModal .modalActions{
  grid-column:2;
  position:relative;
  z-index:4;
  width:min(440px, 40vw);
  padding:0 !important;
  border:0 !important;
  background:transparent !important;
  display:flex !important;
  flex-direction:column;
  justify-content:center;
  align-items:stretch;
  gap:14px;
}
.modal.cardInspectModal .modalActions::before{
  content:"ACTION  GUARD";
  display:block;
  margin: 0 0 6px 18px;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.32em;
  color:#7beeff;
  text-shadow:0 0 22px rgba(84,223,255,.8);
  transform: translateX(24px);
  opacity:0;
  transition: transform 380ms cubic-bezier(.16,1,.3,1) 160ms, opacity 260ms ease 160ms;
}
.modalOverlay.inspectLive .modal.cardInspectModal .modalActions::before{
  transform: translateX(0);
  opacity:1;
}
.modal.cardInspectModal .modalActions .smallbtn{
  --cmd-accent: #60dfff;
  --cmd-accent-2: #315cff;
  position:relative;
  min-height:60px;
  width:100%;
  padding: 0 26px 0 72px;
  border: 0;
  border-radius:0;
  clip-path: polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.22)),
    linear-gradient(120deg, color-mix(in srgb, var(--cmd-accent) 30%, #10233e), rgba(11,18,38,.92) 55%, color-mix(in srgb, var(--cmd-accent-2) 22%, #0f172a));
  color:#f8fbff;
  font-size:16px;
  font-weight:1000;
  letter-spacing:.035em;
  text-align:left;
  text-transform:uppercase;
  text-shadow:0 2px 0 rgba(0,0,0,.38), 0 0 16px rgba(255,255,255,.18);
  box-shadow:
    0 16px 30px rgba(0,0,0,.30),
    inset 0 0 0 2px color-mix(in srgb, var(--cmd-accent) 68%, white 8%),
    inset 0 1px 0 rgba(255,255,255,.28),
    inset 0 -9px 22px rgba(0,0,0,.22);
  transform: translateX(56px) scale(.96);
  opacity:0;
  transition:
    transform 340ms cubic-bezier(.16,1,.3,1),
    opacity 220ms ease,
    filter 160ms ease,
    box-shadow 160ms ease;
  overflow:hidden;
}
.modalOverlay.inspectLive .modal.cardInspectModal .modalActions .smallbtn{
  transform: translateX(0) scale(1);
  opacity:1;
}
.modal.cardInspectModal .modalActions .smallbtn:nth-child(1){ transition-delay: 120ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(2){ transition-delay: 170ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(3){ transition-delay: 220ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(4){ transition-delay: 270ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(5){ transition-delay: 320ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(6){ transition-delay: 370ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(7){ transition-delay: 420ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(8){ transition-delay: 470ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(9){ transition-delay: 520ms; }
.modal.cardInspectModal .modalActions .smallbtn:nth-child(n+10){ transition-delay: 570ms; }
.modal.cardInspectModal .modalActions .smallbtn::before{
  content:"";
  position:absolute;
  left:19px;
  top:50%;
  width:34px;
  height:34px;
  transform: translateY(-50%);
  border-radius:10px;
  background:
    radial-gradient(circle at 35% 25%, rgba(255,255,255,.9), transparent 22%),
    linear-gradient(145deg, var(--cmd-accent), var(--cmd-accent-2));
  box-shadow:0 0 18px color-mix(in srgb, var(--cmd-accent) 75%, transparent), inset 0 0 0 2px rgba(255,255,255,.35);
}
.modal.cardInspectModal .modalActions .smallbtn::after{
  content:"";
  position:absolute;
  inset:0;
  transform: translateX(-120%);
  background: linear-gradient(100deg, transparent 0%, transparent 42%, rgba(255,255,255,.28) 50%, transparent 58%, transparent 100%);
  transition: transform 520ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.modal.cardInspectModal .modalActions .smallbtn:hover{
  transform: translateX(-8px) scale(1.018);
  filter: brightness(1.12) saturate(1.08);
  box-shadow:
    0 18px 34px rgba(0,0,0,.34),
    0 0 26px color-mix(in srgb, var(--cmd-accent) 46%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--cmd-accent) 82%, white 12%),
    inset 0 1px 0 rgba(255,255,255,.32),
    inset 0 -9px 22px rgba(0,0,0,.22);
}
.modal.cardInspectModal .modalActions .smallbtn:hover::after{
  transform: translateX(120%);
}
.modal.cardInspectModal .modalActions .smallbtn:active{
  transform: translateX(-4px) scale(.985);
}
.modal.cardInspectModal .modalActions .smallbtn.good{
  --cmd-accent:#4dffac;
  --cmd-accent-2:#12a35d;
}
.modal.cardInspectModal .modalActions .smallbtn.purple{
  --cmd-accent:#a88cff;
  --cmd-accent-2:#5633d3;
}
.modal.cardInspectModal .modalActions .smallbtn.danger{
  --cmd-accent:#ff7996;
  --cmd-accent-2:#9f2447;
}
@media (max-width: 980px){
  .modal.cardInspectModal{
    grid-template-columns:1fr;
    grid-template-rows: minmax(320px, 58vh) auto;
    gap:18px;
    padding: 18px;
  }
  .modal.cardInspectModal .modalBody{ grid-column:1; grid-row:1; }
  .modal.cardInspectModal .modalActions{
    grid-column:1;
    grid-row:2;
    width:min(92vw, 620px);
    max-height:34vh;
    overflow:auto;
    margin-inline:auto;
  }
  .battleInspectCardFrame{ height:min(54vh, 560px); max-width:72vw; }
  .battleInspectInfo{ left:18px; top:10px; }
  .modal.cardInspectModal .modalActions .smallbtn{ min-height:52px; font-size:14px; }
}

/* v59 inspect overlay refinement: two-column command grid, hand support, cleaner alignment */
.modal.cardInspectModal{
  grid-template-columns: minmax(300px, 43vw) minmax(560px, 50vw) !important;
  gap: clamp(10px, 1.8vw, 34px) !important;
  padding: clamp(18px, 2.4vw, 42px) clamp(22px, 3vw, 54px) !important;
  align-items:center !important;
}
.modal.cardInspectModal .modalBody{
  min-width:0 !important;
}
.battleInspectShell{
  height:min(76vh, 760px) !important;
  min-width:0 !important;
}
.battleInspectCardStage{
  justify-content:center !important;
  gap: clamp(10px, 1.5vh, 18px) !important;
}
.battleInspectInfo{
  position:relative !important;
  left:auto !important;
  top:auto !important;
  align-self:flex-start !important;
  max-width:min(92%, 360px) !important;
  margin-left:clamp(12px, 2vw, 34px) !important;
  margin-bottom: clamp(8px, 1.4vh, 18px) !important;
  padding: 10px 14px 10px !important;
  z-index:4 !important;
}
.battleInspectName{
  font-size: clamp(26px, 2.7vw, 42px) !important;
  line-height:1 !important;
  overflow-wrap:anywhere !important;
}
.battleInspectStats{
  font-size:11px !important;
  line-height:1.25 !important;
}
.battleInspectCardFrame{
  height: min(64vh, 650px) !important;
  max-width:min(36vw, 430px) !important;
  transform: translate3d(-4vw, 2vh, 0) scale(.50) rotate(-5deg) rotateY(8deg) !important;
}
.modalOverlay.inspectLive .battleInspectCardFrame{
  transform: translate3d(0, 0, 0) scale(1) rotate(-.8deg) rotateY(0deg) !important;
}
.modal.cardInspectModal .modalActions{
  width:min(860px, 50vw) !important;
  max-height:min(78vh, 760px) !important;
  display:grid !important;
  grid-template-columns: repeat(2, minmax(230px, 1fr)) !important;
  align-content:center !important;
  justify-content:center !important;
  gap:12px 14px !important;
  overflow:visible !important;
}
.modal.cardInspectModal .modalActions::before{
  grid-column:1 / -1 !important;
  margin:0 0 4px 14px !important;
}
.modal.cardInspectModal .modalActions .smallbtn{
  min-height:54px !important;
  width:100% !important;
  padding:0 20px 0 62px !important;
  font-size:clamp(12px, .82vw, 15px) !important;
  letter-spacing:.03em !important;
  clip-path: polygon(8% 0, 100% 0, 92% 100%, 0 100%) !important;
}
.modal.cardInspectModal .modalActions .smallbtn::before{
  left:17px !important;
  width:30px !important;
  height:30px !important;
}
.modal.cardInspectModal .modalActions .smallbtn:nth-child(odd){
  transform: translateX(42px) scale(.96);
}
.modal.cardInspectModal .modalActions .smallbtn:nth-child(even){
  transform: translateX(58px) scale(.96);
}
.modalOverlay.inspectLive .modal.cardInspectModal .modalActions .smallbtn{
  transform: translateX(0) scale(1) !important;
}
.modal.cardInspectModal .modalActions .smallbtn:hover{
  transform: translateX(-6px) scale(1.012) !important;
}
.modal.cardInspectModal .modalActions .smallbtn:active{
  transform: translateX(-3px) scale(.985) !important;
}
.handInspectShell .battleInspectCardFrame{
  height:min(62vh, 620px) !important;
  max-width:min(35vw, 410px) !important;
}
@media (max-width: 1240px){
  .modal.cardInspectModal{
    grid-template-columns: minmax(280px, 40vw) minmax(480px, 54vw) !important;
    gap:14px !important;
    padding:18px 24px !important;
  }
  .modal.cardInspectModal .modalActions{
    width:min(760px, 54vw) !important;
    gap:10px 12px !important;
  }
  .modal.cardInspectModal .modalActions .smallbtn{
    min-height:48px !important;
    font-size:12px !important;
  }
  .battleInspectCardFrame{
    height:min(58vh, 590px) !important;
    max-width:min(34vw, 380px) !important;
  }
}
@media (max-width: 980px){
  .modal.cardInspectModal{
    grid-template-columns:1fr !important;
    grid-template-rows:minmax(300px, 52vh) auto !important;
    overflow:auto !important;
  }
  .modal.cardInspectModal .modalActions{
    grid-template-columns:repeat(2, minmax(170px, 1fr)) !important;
    width:min(94vw, 760px) !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .battleInspectCardFrame{
    height:min(46vh, 500px) !important;
    max-width:72vw !important;
  }
  .battleInspectInfo{
    align-self:center !important;
    margin-left:0 !important;
    max-width:86vw !important;
  }
}
@media (max-width: 640px){
  .modal.cardInspectModal .modalActions{
    grid-template-columns:1fr !important;
  }
}

/* v60 unified Digimon/PS2-inspired command popups for card viewer, energies, tools, and approval requests */
.modal.cardInspectModal.battleCommandModal{
  grid-template-columns: minmax(340px, 43vw) minmax(520px, 48vw) !important;
  gap: clamp(16px, 2.4vw, 46px) !important;
}
.battleCommandShell{
  width:100%;
  height:min(78vh, 800px) !important;
  display:grid !important;
  grid-template-columns:minmax(260px, .92fr) minmax(240px, .78fr);
  gap:clamp(14px, 2vw, 32px);
  align-items:center;
}
.battleCommandHeroStage{
  min-width:0;
}
.battleCommandInfo{
  max-width:min(96%, 440px) !important;
  background:
    linear-gradient(135deg, rgba(9,26,55,.82), rgba(12,21,48,.52)),
    radial-gradient(circle at 0% 0%, rgba(114,238,255,.22), transparent 55%) !important;
}
.battleCommandPanel{
  position:relative;
  min-width:0;
  max-height:min(68vh, 720px);
  overflow:auto;
  padding: clamp(16px, 2vw, 26px);
  border-radius:24px;
  border:1px solid rgba(126,231,255,.20);
  background:
    linear-gradient(135deg, rgba(10,22,48,.78), rgba(16,26,58,.46)),
    radial-gradient(circle at 15% 10%, rgba(105,229,255,.18), transparent 40%),
    radial-gradient(circle at 100% 100%, rgba(120,87,255,.14), transparent 42%);
  box-shadow:
    0 26px 70px rgba(0,0,0,.38),
    inset 0 1px 0 rgba(255,255,255,.12),
    inset 0 0 0 1px rgba(255,255,255,.04);
  transform:translateX(32px) scale(.98);
  opacity:0;
  transition:transform 480ms cubic-bezier(.16,1,.3,1) 180ms, opacity 260ms ease 180ms;
}
.modalOverlay.inspectLive .battleCommandPanel{
  transform:translateX(0) scale(1);
  opacity:1;
}
.battleCommandPanel::before,
.battleCommandPanel::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-color:rgba(119,239,255,.42);
  opacity:.75;
}
.battleCommandPanel::before{
  left:12px; top:12px; width:40px; height:22px;
  border-left:2px solid; border-top:2px solid;
}
.battleCommandPanel::after{
  right:12px; bottom:12px; width:40px; height:22px;
  border-right:2px solid; border-bottom:2px solid;
}
.battleCommandPanelKicker{
  font-size:12px;
  font-weight:1000;
  letter-spacing:.28em;
  text-transform:uppercase;
  color:#7beeff;
  text-shadow:0 0 18px rgba(123,238,255,.70);
}
.battleCommandPanelTitle{
  margin-top:8px;
  color:#f8fbff;
  font-size:clamp(26px, 2.1vw, 38px);
  line-height:1;
  font-weight:1000;
  letter-spacing:.015em;
  text-shadow:0 10px 30px rgba(0,0,0,.5);
}
.battleCommandPanelText,
.battleCommandPanelNote{
  margin-top:12px;
  color:#cbd7ee;
  font-weight:900;
  line-height:1.45;
  letter-spacing:.02em;
}
.battleCommandPanelNote{
  padding:12px 14px;
  border-radius:16px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
}
.battleCommandZoomFrame{
  height:min(76vh, 760px) !important;
  max-width:min(38vw, 500px) !important;
}
.battleCommandSupportFrame{
  height:min(48vh, 520px) !important;
  max-width:min(26vw, 330px) !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions{
  align-content:center !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions::before{
  content:"COMMAND  DECK" !important;
}
.cardViewCommandModal .modalActions,
.energyCommandModal .modalActions,
.toolCommandModal .modalActions,
.approvalCommandModal .modalActions{
  grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
}
.cardViewCommandModal .modalActions .smallbtn,
.energyCommandModal .modalActions .smallbtn,
.toolCommandModal .modalActions .smallbtn,
.approvalCommandModal .modalActions .smallbtn{
  min-height:58px !important;
}
.energyCommandModal .modalActions .smallbtn:not(.danger){
  --cmd-accent:#4dffac !important;
  --cmd-accent-2:#12a35d !important;
}
.toolCommandModal .modalActions .smallbtn:not(.danger){
  --cmd-accent:#a88cff !important;
  --cmd-accent-2:#5633d3 !important;
}
.approvalCommandModal .modalActions::before{
  content:"REQUEST  COMMANDS" !important;
  color:#ffbfd0 !important;
  text-shadow:0 0 22px rgba(255,95,140,.65) !important;
}
.approvalCommandModal .modalActions .smallbtn:not(.danger){
  --cmd-accent:#bca6ff !important;
  --cmd-accent-2:#6a3ff0 !important;
}
.approvalCommandModal .modalActions .smallbtn.danger{
  --cmd-accent:#ff7593 !important;
  --cmd-accent-2:#a91f45 !important;
}
.approvalCommandPanel{
  border-color:rgba(255,117,147,.26);
  background:
    linear-gradient(135deg, rgba(43,16,42,.82), rgba(17,24,55,.52)),
    radial-gradient(circle at 12% 12%, rgba(255,117,147,.22), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(128,80,255,.18), transparent 44%);
}
.approvalCommandInfo{
  border-color:rgba(255,117,147,.28) !important;
}
.approvalTargetFrame::before{
  background:linear-gradient(145deg, rgba(255,117,147,.78), rgba(128,80,255,.45), rgba(255,220,120,.42)) !important;
}
.battleCommandEnergyGrid{
  margin-top:18px !important;
  gap:12px !important;
}
.battleCommandEnergyRow{
  border-radius:18px !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    rgba(5, 15, 34, .45) !important;
  border:1px solid rgba(126,231,255,.18) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 10px 28px rgba(0,0,0,.22);
}
.battleCommandEmptyState{
  margin-top:16px;
  padding:22px;
  border-radius:20px;
  background:rgba(255,255,255,.06);
  border:1px dashed rgba(255,255,255,.18);
  color:#d7e5ff;
  font-weight:1000;
  text-align:center;
}
.toolCommandList.viewerGrid{
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  margin-top:18px;
  max-height:min(46vh, 460px);
  overflow:auto;
}
.toolCommandItem{
  display:grid;
  grid-template-columns:88px minmax(0, 1fr);
  gap:14px;
  align-items:center;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(168,140,255,.22);
  background:
    linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(8,15,35,.45);
  box-shadow:0 12px 30px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.10);
}
.toolCommandCard{
  width:76px !important;
  height:106px !important;
  border-radius:12px !important;
  overflow:hidden !important;
  background:transparent !important;
  padding:0 !important;
  border:0 !important;
  cursor:pointer;
  filter:drop-shadow(0 12px 18px rgba(0,0,0,.38));
}
.toolCommandCard img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:12px;
}
.toolCommandMeta{ min-width:0; }
.toolCommandName{
  color:#f8fbff;
  font-weight:1000;
  font-size:16px;
  line-height:1.15;
}
.toolCommandSub{
  margin-top:3px;
  color:#aebbd4;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.toolCommandInlineActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}
.toolCommandInlineActions .smallbtn{
  min-height:34px !important;
  padding:6px 12px !important;
  font-size:11px !important;
  border-radius:12px !important;
  clip-path:none !important;
}
.toolCommandInlineActions .smallbtn::before,
.toolCommandInlineActions .smallbtn::after{
  display:none !important;
}
@media (max-width: 1240px){
  .battleCommandShell{
    grid-template-columns:1fr;
    grid-template-rows:auto auto;
    height:min(78vh, 760px) !important;
    overflow:auto;
  }
  .battleCommandSupportFrame{ height:min(36vh, 420px) !important; max-width:min(38vw, 300px) !important; }
  .battleCommandPanel{ max-height:32vh; }
}
@media (max-width: 980px){
  .modal.cardInspectModal.battleCommandModal{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
  }
  .battleCommandShell{ height:auto !important; }
  .battleCommandPanel{ max-height:none; }
}

/* v61 restored unified command popup system + Attach Any Energy command grid */
.modal.cardInspectModal.battleCommandModal{
  grid-template-columns: minmax(320px, 42vw) minmax(520px, 48vw) !important;
  gap: clamp(18px, 2.6vw, 54px) !important;
  padding: clamp(20px, 3.2vw, 56px) !important;
}
.modal.cardInspectModal.battleCommandModal .modalBody{
  grid-column: 1 !important;
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  overflow:visible !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions{
  grid-column: 2 !important;
  width:min(780px, 48vw) !important;
  max-height:min(78vh, 760px) !important;
  overflow:auto !important;
  display:grid !important;
  grid-template-columns: repeat(2, minmax(210px, 1fr)) !important;
  align-content:center !important;
  align-items:stretch !important;
  gap:12px 14px !important;
  padding: clamp(12px, 1.2vw, 20px) !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions::before{
  grid-column:1 / -1 !important;
  margin:0 0 4px 18px !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn{
  min-height:56px !important;
  width:100% !important;
  margin:0 !important;
}
.battleCommandShell{
  width:100% !important;
  height:min(82vh, 820px) !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.battleCommandHeroStage{
  width:100% !important;
  height:100% !important;
}
.battleCommandPanel{
  display:none !important;
}
.cardViewCommandShell .battleCommandPanel,
.energyCommandShell .battleCommandPanel,
.toolCommandShell .battleCommandPanel,
.approvalCommandShell .battleCommandPanel,
.energyAttachCommandShell .battleCommandPanel{
  display:block !important;
  position:absolute !important;
  left:calc(100% + clamp(20px, 3vw, 52px)) !important;
  top:50% !important;
  width:min(460px, 40vw) !important;
  max-height:min(72vh, 720px) !important;
  transform:translate(28px,-50%) scale(.98) !important;
  opacity:0 !important;
  z-index:3 !important;
}
.modalOverlay.inspectLive .cardViewCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .energyCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .toolCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .approvalCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .energyAttachCommandShell .battleCommandPanel{
  transform:translate(0,-50%) scale(1) !important;
  opacity:1 !important;
}
.energyAttachCommandModal .modalActions::before{
  content:"ENERGY  COMMAND" !important;
  color:#a8ffe1 !important;
  text-shadow:0 0 22px rgba(77,255,188,.70) !important;
}
.energyAttachCommandModal .modalActions .smallbtn:not(.danger),
.energyCommandModal .modalActions .smallbtn.good{
  --cmd-accent:#4dffbd !important;
  --cmd-accent-2:#12a36c !important;
}
.energyAttachCommandPanel{
  border-color:rgba(93,255,199,.28) !important;
  background:
    linear-gradient(135deg, rgba(8,38,44,.84), rgba(15,22,55,.52)),
    radial-gradient(circle at 12% 10%, rgba(82,255,190,.24), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(77,170,255,.18), transparent 44%) !important;
}
.energyAttachCommandInfo{
  border-color:rgba(93,255,199,.30) !important;
}
.energyAttachTargetFrame::before{
  background:linear-gradient(145deg, rgba(93,255,199,.78), rgba(77,170,255,.42), rgba(255,220,120,.42)) !important;
}
.energyAttachCommandGrid{
  margin-top:18px;
  display:grid;
  grid-template-columns:repeat(2, minmax(138px, 1fr));
  gap:12px;
}
.energyAttachCommandTile{
  --energy-accent:#7beeff;
  position:relative;
  min-height:64px;
  padding:9px 14px 9px 12px;
  display:flex;
  align-items:center;
  gap:10px;
  border:0;
  color:#f8fbff;
  cursor:pointer;
  clip-path: polygon(10% 0, 100% 0, 90% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(0,0,0,.24)),
    linear-gradient(120deg, color-mix(in srgb, var(--energy-accent) 28%, #10233e), rgba(10,18,38,.93) 62%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.30),
    inset 0 0 0 2px color-mix(in srgb, var(--energy-accent) 66%, white 5%),
    inset 0 1px 0 rgba(255,255,255,.26),
    inset 0 -8px 18px rgba(0,0,0,.20);
  transform:translateX(18px) scale(.96);
  opacity:0;
  transition:transform 260ms cubic-bezier(.16,1,.3,1), opacity 220ms ease, filter 160ms ease, box-shadow 160ms ease;
  overflow:hidden;
}
.modalOverlay.inspectLive .energyAttachCommandTile{
  transform:translateX(0) scale(1);
  opacity:1;
}
.energyAttachCommandTile:nth-child(1), .energyAttachCommandTile:nth-child(2){ transition-delay:190ms; }
.energyAttachCommandTile:nth-child(3), .energyAttachCommandTile:nth-child(4){ transition-delay:240ms; }
.energyAttachCommandTile:nth-child(5), .energyAttachCommandTile:nth-child(6){ transition-delay:290ms; }
.energyAttachCommandTile:nth-child(7), .energyAttachCommandTile:nth-child(8){ transition-delay:340ms; }
.energyAttachCommandTile:nth-child(9), .energyAttachCommandTile:nth-child(10){ transition-delay:390ms; }
.energyAttachCommandTile::after{
  content:"";
  position:absolute;
  inset:0;
  transform:translateX(-130%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.24), transparent);
  transition:transform 520ms ease;
}
.energyAttachCommandTile:hover{
  transform:translateX(-5px) scale(1.015) !important;
  filter:brightness(1.14);
  box-shadow:
    0 18px 34px rgba(0,0,0,.36),
    inset 0 0 0 2px color-mix(in srgb, var(--energy-accent) 80%, white 12%),
    0 0 26px color-mix(in srgb, var(--energy-accent) 42%, transparent);
}
.energyAttachCommandTile:hover::after{ transform:translateX(130%); }
.energyAttachCommandTile:active,
.energyAttachCommandTile.energyAttachTileSelected{
  transform:translateX(-2px) scale(.985) !important;
  filter:brightness(1.22);
}
.energyAttachTileOrb{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  flex:0 0 auto;
  border-radius:13px;
  background:radial-gradient(circle at 35% 25%, rgba(255,255,255,.60), transparent 35%), color-mix(in srgb, var(--energy-accent) 45%, #101827);
  box-shadow:0 0 22px color-mix(in srgb, var(--energy-accent) 62%, transparent), inset 0 0 0 1px rgba(255,255,255,.26);
}
.energyAttachTileText{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1;
}
.energyAttachTileKicker{
  color:#b8c8df;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.energyAttachTileName{
  margin-top:4px;
  color:#f8fbff;
  font-size:15px;
  font-weight:1000;
  letter-spacing:.04em;
  text-transform:uppercase;
  white-space:nowrap;
  text-shadow:0 2px 0 rgba(0,0,0,.34);
}
.energyAttach-fire{ --energy-accent:#ff774d; }
.energyAttach-water{ --energy-accent:#4db5ff; }
.energyAttach-lightning{ --energy-accent:#ffe15a; }
.energyAttach-grass{ --energy-accent:#55e875; }
.energyAttach-fighting{ --energy-accent:#d99555; }
.energyAttach-psychic{ --energy-accent:#d06cff; }
.energyAttach-dark{ --energy-accent:#8d77ff; }
.energyAttach-steel{ --energy-accent:#b9d0e7; }
.energyAttach-fairy{ --energy-accent:#ff8fcf; }
.energyAttach-colorless{ --energy-accent:#eef3ff; }
@media (max-width: 1320px){
  .cardViewCommandShell .battleCommandPanel,
  .energyCommandShell .battleCommandPanel,
  .toolCommandShell .battleCommandPanel,
  .approvalCommandShell .battleCommandPanel,
  .energyAttachCommandShell .battleCommandPanel{
    display:none !important;
  }
  .modal.cardInspectModal.battleCommandModal{
    grid-template-columns:minmax(280px, 39vw) minmax(500px, 56vw) !important;
    gap:14px !important;
  }
}
@media (max-width: 980px){
  .modal.cardInspectModal.battleCommandModal{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    overflow:auto !important;
  }
  .modal.cardInspectModal.battleCommandModal .modalBody{ grid-column:1 !important; }
  .modal.cardInspectModal.battleCommandModal .modalActions{
    grid-column:1 !important;
    width:min(94vw, 760px) !important;
    max-height:none !important;
    overflow:visible !important;
  }
  .energyAttachCommandGrid{ grid-template-columns:1fr; }
}

/* v63 command popup layout fix: clean 3-zone layout, no overlapping panels/buttons, consistent card scale */
.modal.cardInspectModal.battleCommandModal{
  grid-template-columns:minmax(300px, 33vw) minmax(260px, 25vw) minmax(420px, 34vw) !important;
  gap:clamp(12px, 1.4vw, 24px) !important;
  padding:clamp(18px, 2.4vw, 44px) clamp(22px, 3vw, 58px) !important;
  align-items:center !important;
  overflow:hidden !important;
}
.modal.cardInspectModal.battleCommandModal .modalBody{
  grid-column:1 / 3 !important;
  grid-row:1 !important;
  width:100% !important;
  height:min(82vh, 800px) !important;
  min-width:0 !important;
  overflow:visible !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions{
  grid-column:3 !important;
  grid-row:1 !important;
  width:100% !important;
  max-width:none !important;
  max-height:min(78vh, 780px) !important;
  overflow:auto !important;
  display:grid !important;
  grid-template-columns:repeat(2, minmax(172px, 1fr)) !important;
  gap:clamp(10px, 1vw, 14px) clamp(12px, 1.1vw, 16px) !important;
  align-content:center !important;
  align-items:stretch !important;
  padding:clamp(8px, .9vw, 14px) !important;
  scrollbar-width:thin;
}
.modal.cardInspectModal.battleCommandModal .modalActions::before{
  grid-column:1 / -1 !important;
  margin:0 0 6px 14px !important;
  position:relative !important;
  z-index:1 !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn{
  min-height:clamp(48px, 5.2vh, 58px) !important;
  width:100% !important;
  margin:0 !important;
  padding:0 clamp(14px, 1.1vw, 20px) 0 clamp(48px, 3.1vw, 60px) !important;
  font-size:clamp(11px, .76vw, 14px) !important;
  line-height:1.08 !important;
  white-space:normal !important;
  text-align:left !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn::before{
  left:clamp(13px, 1vw, 17px) !important;
  width:clamp(24px, 2vw, 30px) !important;
  height:clamp(24px, 2vw, 30px) !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn:nth-child(odd),
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn:nth-child(even){
  transform:translateX(38px) scale(.97) !important;
}
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .modalActions .smallbtn{
  transform:translateX(0) scale(1) !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn:hover{
  transform:translateX(-4px) scale(1.012) !important;
}
.modal.cardInspectModal.battleCommandModal .modalActions .smallbtn:active{
  transform:translateX(-2px) scale(.985) !important;
}

.modal.cardInspectModal.battleCommandModal .battleCommandShell{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(255px, 1.08fr) minmax(240px, .88fr) !important;
  gap:clamp(12px, 1.4vw, 24px) !important;
  align-items:center !important;
  justify-content:stretch !important;
  overflow:visible !important;
}
.modal.cardInspectModal.battleCommandModal .battleCommandHeroStage{
  width:100% !important;
  height:100% !important;
  min-width:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
}
.modal.cardInspectModal.battleCommandModal .battleInspectInfo{
  max-width:min(92%, 390px) !important;
  margin-left:clamp(8px, 1.3vw, 18px) !important;
}
.modal.cardInspectModal.battleCommandModal .battleInspectName{
  font-size:clamp(24px, 2.25vw, 38px) !important;
}
.modal.cardInspectModal.battleCommandModal .battleInspectCardFrame,
.modal.cardInspectModal.battleCommandModal .battleCommandSupportFrame,
.modal.cardInspectModal.battleCommandModal .battleCommandZoomFrame,
.modal.cardInspectModal.battleCommandModal .approvalTargetFrame,
.modal.cardInspectModal.battleCommandModal .energyAttachTargetFrame,
.modal.cardInspectModal.battleCommandModal .evolutionStackTargetFrame{
  height:min(64vh, 650px) !important;
  max-width:min(31vw, 430px) !important;
  width:auto !important;
}
.modal.cardInspectModal.battleCommandModal .battleCommandPanel,
.modal.cardInspectModal.battleCommandModal .cardViewCommandShell .battleCommandPanel,
.modal.cardInspectModal.battleCommandModal .energyCommandShell .battleCommandPanel,
.modal.cardInspectModal.battleCommandModal .toolCommandShell .battleCommandPanel,
.modal.cardInspectModal.battleCommandModal .approvalCommandShell .battleCommandPanel,
.modal.cardInspectModal.battleCommandModal .energyAttachCommandShell .battleCommandPanel,
.modal.cardInspectModal.battleCommandModal .evolutionStackCommandShell .battleCommandPanel{
  display:block !important;
  position:relative !important;
  left:auto !important;
  right:auto !important;
  top:auto !important;
  bottom:auto !important;
  width:100% !important;
  max-width:100% !important;
  max-height:min(66vh, 700px) !important;
  overflow:auto !important;
  transform:translateX(24px) scale(.98) !important;
  opacity:0 !important;
  z-index:2 !important;
}
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .battleCommandPanel,
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .cardViewCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .energyCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .toolCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .approvalCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .energyAttachCommandShell .battleCommandPanel,
.modalOverlay.inspectLive .modal.cardInspectModal.battleCommandModal .evolutionStackCommandShell .battleCommandPanel{
  transform:translateX(0) scale(1) !important;
  opacity:1 !important;
}

/* Evolution stack popup */
.evolutionStackCommandPanel{
  border-color:rgba(168,140,255,.28) !important;
  background:
    linear-gradient(135deg, rgba(22,18,52,.84), rgba(13,23,52,.54)),
    radial-gradient(circle at 12% 10%, rgba(168,140,255,.22), transparent 44%),
    radial-gradient(circle at 100% 100%, rgba(123,238,255,.16), transparent 44%) !important;
}
.evolutionStackCommandList{
  margin-top:18px;
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
}
.evolutionStackCommandCard{
  position:relative;
  min-height:96px;
  display:grid;
  grid-template-columns:64px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  text-align:left;
  padding:10px 14px 10px 12px;
  border:0;
  color:#f8fbff;
  cursor:pointer;
  clip-path:polygon(7% 0, 100% 0, 93% 100%, 0 100%);
  background:
    linear-gradient(90deg, rgba(255,255,255,.14), transparent 36%),
    linear-gradient(135deg, rgba(92,73,190,.70), rgba(9,20,43,.92) 64%);
  box-shadow:
    0 14px 28px rgba(0,0,0,.30),
    inset 0 0 0 2px rgba(168,140,255,.56),
    inset 0 1px 0 rgba(255,255,255,.22);
  transform:translateX(18px) scale(.97);
  opacity:0;
  transition:transform 260ms cubic-bezier(.16,1,.3,1), opacity 220ms ease, filter 160ms ease;
  overflow:hidden;
}
.modalOverlay.inspectLive .evolutionStackCommandCard{
  transform:translateX(0) scale(1);
  opacity:1;
}
.evolutionStackCommandCard:nth-child(1){ transition-delay:190ms; }
.evolutionStackCommandCard:nth-child(2){ transition-delay:240ms; }
.evolutionStackCommandCard:nth-child(3){ transition-delay:290ms; }
.evolutionStackCommandCard:hover{
  transform:translateX(-5px) scale(1.012) !important;
  filter:brightness(1.14);
}
.evolutionStackThumb{
  width:56px;
  height:78px;
  border-radius:8px;
  overflow:hidden;
  filter:drop-shadow(0 9px 14px rgba(0,0,0,.45));
}
.evolutionStackThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.evolutionStackMeta{
  display:flex;
  min-width:0;
  flex-direction:column;
  line-height:1.05;
}
.evolutionStackKicker{
  color:#86f4ff;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.16em;
  text-transform:uppercase;
}
.evolutionStackName{
  margin-top:5px;
  color:#fff;
  font-size:clamp(15px, 1.05vw, 20px);
  font-weight:1000;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.evolutionStackStage{
  margin-top:4px;
  color:#c8d5ee;
  font-size:12px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.08em;
}
.evolutionStackCommandModal .modalActions::before{
  content:"EVOLUTION  COMMAND" !important;
  color:#cfc2ff !important;
  text-shadow:0 0 22px rgba(168,140,255,.70) !important;
}

@media (max-width: 1380px){
  .modal.cardInspectModal.battleCommandModal{
    grid-template-columns:minmax(280px, 37vw) minmax(390px, 56vw) !important;
    grid-template-rows:auto auto !important;
    gap:14px !important;
    overflow:auto !important;
  }
  .modal.cardInspectModal.battleCommandModal .modalBody{
    grid-column:1 !important;
    height:min(78vh, 760px) !important;
  }
  .modal.cardInspectModal.battleCommandModal .battleCommandShell{
    grid-template-columns:1fr !important;
  }
  .modal.cardInspectModal.battleCommandModal .battleCommandPanel{
    display:none !important;
  }
  .modal.cardInspectModal.battleCommandModal .modalActions{
    grid-column:2 !important;
    grid-template-columns:repeat(2, minmax(170px, 1fr)) !important;
    width:100% !important;
  }
  .modal.cardInspectModal.battleCommandModal .battleInspectCardFrame,
  .modal.cardInspectModal.battleCommandModal .battleCommandSupportFrame,
  .modal.cardInspectModal.battleCommandModal .battleCommandZoomFrame,
  .modal.cardInspectModal.battleCommandModal .approvalTargetFrame,
  .modal.cardInspectModal.battleCommandModal .energyAttachTargetFrame,
  .modal.cardInspectModal.battleCommandModal .evolutionStackTargetFrame{
    height:min(62vh, 620px) !important;
    max-width:min(35vw, 410px) !important;
  }
}
@media (max-width: 980px){
  .modal.cardInspectModal.battleCommandModal{
    grid-template-columns:1fr !important;
    grid-template-rows:auto auto !important;
    overflow:auto !important;
  }
  .modal.cardInspectModal.battleCommandModal .modalBody,
  .modal.cardInspectModal.battleCommandModal .modalActions{
    grid-column:1 !important;
    width:100% !important;
    max-height:none !important;
  }
  .modal.cardInspectModal.battleCommandModal .modalActions{
    grid-template-columns:repeat(2, minmax(160px, 1fr)) !important;
  }
}
@media (max-width: 640px){
  .modal.cardInspectModal.battleCommandModal .modalActions{
    grid-template-columns:1fr !important;
  }
}

/* v64 approval sub-popups: request discard energy, request +10 damage, request -10 damage */
.modal.cardInspectModal.battleCommandModal.approvalSubCommandModal,
.modal.cardInspectModal.battleCommandModal.requestDiscardEnergyModal{
  --approval-sub-accent:#ff4d8a;
  --approval-sub-accent-2:#8b5cf6;
}
.modal.cardInspectModal.battleCommandModal.damageAddCommandModal{ --approval-sub-accent:#ff4d7e; --approval-sub-accent-2:#fb7185; }
.modal.cardInspectModal.battleCommandModal.damageRemoveCommandModal{ --approval-sub-accent:#8b5cf6; --approval-sub-accent-2:#60a5fa; }
.modal.cardInspectModal.battleCommandModal.energyCounterCommandModal,
.modal.cardInspectModal.battleCommandModal.requestDiscardEnergyModal{ --approval-sub-accent:#ff477d; --approval-sub-accent-2:#22d3ee; }

.modal.cardInspectModal.battleCommandModal .approvalSubCommandShell,
.modal.cardInspectModal.battleCommandModal .requestDiscardEnergyShell{
  width:100% !important;
  height:100% !important;
  display:grid !important;
  grid-template-columns:minmax(255px, 1.05fr) minmax(280px, .95fr) !important;
  gap:clamp(14px, 1.5vw, 24px) !important;
  align-items:center !important;
  overflow:visible !important;
}

.modal.cardInspectModal.battleCommandModal .approvalSubCommandPanel,
.modal.cardInspectModal.battleCommandModal .requestDiscardEnergyPanel{
  border-color:color-mix(in srgb, var(--approval-sub-accent) 58%, transparent) !important;
  background:
    linear-gradient(135deg, rgba(18,22,45,.84), rgba(11,17,34,.68)),
    radial-gradient(circle at 10% 10%, color-mix(in srgb, var(--approval-sub-accent) 22%, transparent), transparent 42%),
    radial-gradient(circle at 100% 100%, color-mix(in srgb, var(--approval-sub-accent-2) 18%, transparent), transparent 48%) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 0 0 1px color-mix(in srgb, var(--approval-sub-accent) 28%, transparent),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.modal.cardInspectModal.battleCommandModal .approvalSubCommandPanel::before,
.modal.cardInspectModal.battleCommandModal .requestDiscardEnergyPanel::before{
  background:linear-gradient(90deg, var(--approval-sub-accent), transparent 72%) !important;
}
.modal.cardInspectModal.battleCommandModal .approvalSubInfo,
.modal.cardInspectModal.battleCommandModal .requestDiscardEnergyInfo{
  border-color:color-mix(in srgb, var(--approval-sub-accent) 42%, transparent) !important;
  background:
    linear-gradient(135deg, rgba(8,18,35,.82), rgba(30,14,42,.58)),
    radial-gradient(circle at 0 0, color-mix(in srgb, var(--approval-sub-accent) 18%, transparent), transparent 48%) !important;
}
.modal.cardInspectModal.battleCommandModal .approvalSubTargetFrame,
.modal.cardInspectModal.battleCommandModal .requestDiscardEnergyTargetFrame{
  box-shadow:
    0 24px 55px rgba(0,0,0,.45),
    0 0 38px color-mix(in srgb, var(--approval-sub-accent) 28%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--approval-sub-accent) 36%, transparent) !important;
}
.modal.cardInspectModal.battleCommandModal .approvalSubTargetFrame::before,
.modal.cardInspectModal.battleCommandModal .requestDiscardEnergyTargetFrame::before{
  background:linear-gradient(90deg, transparent, color-mix(in srgb, var(--approval-sub-accent) 28%, transparent), transparent) !important;
}

.approvalSubStatusGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin:18px 0 14px;
}
.approvalSubStat{
  min-height:62px;
  border-radius:16px;
  padding:11px 13px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.approvalSubStat span{
  font-size:10px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:#9fb7ce;
  font-weight:1000;
}
.approvalSubStat b{
  font-size:clamp(14px, 1vw, 17px);
  color:#f8fbff;
  line-height:1.05;
}
.approvalSubForm{
  display:grid;
  grid-template-columns:1fr;
  gap:12px;
  margin-top:12px;
}
.approvalSubField{
  margin:0;
  display:grid;
  grid-template-columns:minmax(92px, .65fr) minmax(118px, 1fr);
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:18px;
  background:linear-gradient(90deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
  border:1px solid color-mix(in srgb, var(--approval-sub-accent) 28%, rgba(255,255,255,.14));
}
.approvalSubField span{
  font-size:11px;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:#cce8ff;
  font-weight:1000;
}
.approvalSubField input,
.approvalSubField select{
  width:100%;
  min-height:44px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.24);
  background:#e8eef7;
  color:#0c1728;
  font-weight:1000;
  font-size:16px;
  padding:8px 12px;
  outline:none;
  box-shadow:inset 0 1px 4px rgba(0,0,0,.18), 0 0 0 0 color-mix(in srgb, var(--approval-sub-accent) 0%, transparent);
}
.approvalSubField input:focus,
.approvalSubField select:focus{
  box-shadow:inset 0 1px 4px rgba(0,0,0,.18), 0 0 0 3px color-mix(in srgb, var(--approval-sub-accent) 25%, transparent);
}
.approvalSubHint{
  color:#aebbd0;
  font-size:12px;
  line-height:1.35;
  font-weight:800;
  padding:0 6px;
}

.energyDiscardCommandGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
  margin-top:18px;
}
.energyDiscardCommandTile{
  --energy-accent:#ff4d7d;
  position:relative;
  min-height:76px;
  border:0;
  padding:10px 42px 10px 14px;
  color:#fff;
  display:grid;
  grid-template-columns:42px minmax(0, 1fr);
  gap:12px;
  align-items:center;
  text-align:left;
  cursor:pointer;
  clip-path:polygon(7% 0, 100% 0, 92% 100%, 0 100%);
  background:
    linear-gradient(90deg, color-mix(in srgb, var(--energy-accent) 32%, transparent), transparent 54%),
    linear-gradient(135deg, rgba(28,35,61,.88), rgba(7,13,28,.94));
  box-shadow:
    0 16px 34px rgba(0,0,0,.35),
    inset 0 0 0 2px color-mix(in srgb, var(--energy-accent) 56%, transparent),
    inset 0 1px 0 rgba(255,255,255,.18);
  transform:translateX(18px) scale(.97);
  opacity:0;
  transition:transform .32s cubic-bezier(.16,1,.3,1), opacity .32s ease, filter .18s ease, box-shadow .18s ease;
  overflow:hidden;
}
.modalOverlay.inspectLive .energyDiscardCommandTile{ transform:translateX(0) scale(1); opacity:1; }
.energyDiscardCommandTile:nth-child(1), .energyDiscardCommandTile:nth-child(2){ transition-delay:180ms; }
.energyDiscardCommandTile:nth-child(3), .energyDiscardCommandTile:nth-child(4){ transition-delay:230ms; }
.energyDiscardCommandTile:nth-child(5), .energyDiscardCommandTile:nth-child(6){ transition-delay:280ms; }
.energyDiscardCommandTile::after{
  content:"";
  position:absolute;
  inset:-35% auto -35% -55%;
  width:42%;
  transform:skewX(-18deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
  transition:transform .42s ease;
}
.energyDiscardCommandTile:hover{
  transform:translateX(-4px) scale(1.015) !important;
  filter:brightness(1.13);
  box-shadow:
    0 20px 44px rgba(0,0,0,.42),
    0 0 26px color-mix(in srgb, var(--energy-accent) 32%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--energy-accent) 78%, transparent),
    inset 0 1px 0 rgba(255,255,255,.24);
}
.energyDiscardCommandTile:hover::after{ transform:translateX(340%) skewX(-18deg); }
.energyDiscardCommandTile:active,
.energyDiscardCommandTile.energyDiscardTileSelected{ transform:translateX(-2px) scale(.985) !important; filter:brightness(1.22); }
.energyDiscardTileCount{
  position:absolute;
  right:18px;
  top:50%;
  transform:translateY(-50%);
  min-width:26px;
  height:26px;
  display:grid;
  place-items:center;
  border-radius:999px;
  font-size:12px;
  font-weight:1000;
  color:#06111f;
  background:color-mix(in srgb, var(--energy-accent) 70%, #ffffff);
  box-shadow:0 0 16px color-mix(in srgb, var(--energy-accent) 50%, transparent);
}

.modal.cardInspectModal.battleCommandModal.approvalSubCommandModal .modalActions::before{
  content:"CONFIRM REQUEST" !important;
  color:var(--approval-sub-accent) !important;
}
.modal.cardInspectModal.battleCommandModal.requestDiscardEnergyModal .modalActions::before{
  content:"ENERGY COMMAND" !important;
  color:#ff7aa2 !important;
}
.modal.cardInspectModal.battleCommandModal.approvalSubCommandModal .modalActions .smallbtn:not(.danger),
.modal.cardInspectModal.battleCommandModal.requestDiscardEnergyModal .modalActions .smallbtn:not(.danger){
  box-shadow:
    0 14px 30px rgba(0,0,0,.30),
    inset 0 0 0 2px color-mix(in srgb, var(--approval-sub-accent-2) 60%, transparent),
    inset 0 1px 0 rgba(255,255,255,.20) !important;
}

@media (max-width:1100px){
  .energyDiscardCommandGrid{ grid-template-columns:1fr; }
  .approvalSubStatusGrid{ grid-template-columns:1fr; }
  .approvalSubField{ grid-template-columns:1fr; gap:7px; }
}

/* ======================================================
   v67 setup hand/prize accessibility + selected prize popup
====================================================== */
#game .handTray,
#game .opponentHandTray {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-gutter: stable both-edges;
  align-items: center !important;
  padding-bottom: 10px !important;
}

#game .handTray .card,
#game .opponentHandTray .card {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
  overflow: hidden !important;
}

#game .handTray .card img,
#game .opponentHandTray .card img,
#game #playerHand .card img,
#game #aiHand .card img {
  object-fit: contain !important;
  object-position: center center !important;
  background: #eef2ff !important;
}

#game .compactPrize,
#game .prize {
  overflow-x: auto !important;
  overflow-y: hidden !important;
  flex-wrap: nowrap !important;
  scrollbar-gutter: stable;
  padding-bottom: 4px !important;
}

#game .compactPrize .card,
#game .prize .card,
#game .compactPrize .slotEmpty,
#game .prize .slotEmpty {
  flex: 0 0 auto !important;
  margin-left: 0 !important;
}

#game .handTray::-webkit-scrollbar,
#game .opponentHandTray::-webkit-scrollbar,
#game .compactPrize::-webkit-scrollbar,
#game .prize::-webkit-scrollbar {
  height: 8px;
}
#game .handTray::-webkit-scrollbar-thumb,
#game .opponentHandTray::-webkit-scrollbar-thumb,
#game .compactPrize::-webkit-scrollbar-thumb,
#game .prize::-webkit-scrollbar-thumb {
  background: linear-gradient(90deg, rgba(96,165,250,.72), rgba(168,85,247,.72));
  border-radius: 999px;
}
#game .handTray::-webkit-scrollbar-track,
#game .opponentHandTray::-webkit-scrollbar-track,
#game .compactPrize::-webkit-scrollbar-track,
#game .prize::-webkit-scrollbar-track {
  background: rgba(255,255,255,.08);
  border-radius: 999px;
}

.modal.cardInspectModal.battleCommandModal.prizeTakeCommandModal {
  --prize-accent: #facc15;
  --prize-accent-2: #a855f7;
}
.modal.cardInspectModal.battleCommandModal .prizeTakeInspectShell {
  width: 100% !important;
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(255px, 1fr) minmax(280px, .9fr) !important;
  gap: clamp(14px, 1.6vw, 24px) !important;
  align-items: center !important;
}
.modal.cardInspectModal.battleCommandModal .prizeTakeInfo,
.modal.cardInspectModal.battleCommandModal .prizeTakeCommandPanel {
  border-color: color-mix(in srgb, var(--prize-accent) 48%, transparent) !important;
  background:
    linear-gradient(135deg, rgba(24,28,48,.86), rgba(10,16,32,.74)),
    radial-gradient(circle at 10% 0%, color-mix(in srgb, var(--prize-accent) 20%, transparent), transparent 48%),
    radial-gradient(circle at 95% 95%, color-mix(in srgb, var(--prize-accent-2) 18%, transparent), transparent 48%) !important;
  box-shadow:
    0 26px 70px rgba(0,0,0,.42),
    inset 0 0 0 1px color-mix(in srgb, var(--prize-accent) 25%, transparent),
    inset 0 1px 0 rgba(255,255,255,.14) !important;
}
.modal.cardInspectModal.battleCommandModal .prizeTakeCardFrame {
  display: grid !important;
  place-items: center !important;
  box-shadow:
    0 24px 55px rgba(0,0,0,.48),
    0 0 38px color-mix(in srgb, var(--prize-accent) 28%, transparent),
    inset 0 0 0 2px color-mix(in srgb, var(--prize-accent) 34%, transparent) !important;
}
.prizeTakeCardBack {
  width: min(260px, 28vw) !important;
  height: calc(min(260px, 28vw) * 1.4) !important;
  border-radius: 20px !important;
  display: grid !important;
  place-items: center !important;
  font-size: clamp(52px, 8vw, 110px) !important;
  font-weight: 1000 !important;
  color: rgba(255,255,255,.92) !important;
  border: 2px solid rgba(255,255,255,.20) !important;
}
.modal.cardInspectModal.battleCommandModal.prizeTakeCommandModal .modalActions::before {
  content: "SELECTED PRIZE" !important;
  color: var(--prize-accent) !important;
}

@media (max-width: 900px) {
  .modal.cardInspectModal.battleCommandModal .prizeTakeInspectShell {
    grid-template-columns: 1fr !important;
  }
}

/* v68: discard pile cards are clickable without browser button chrome */
.discardViewerCardBtn{
  appearance:none;
  -webkit-appearance:none;
  padding:0;
  cursor:pointer;
  display:block;
}
.discardViewerCardBtn img{
  object-fit:contain;
  background:rgba(0,0,0,.18);
}
.discardViewerCardBtn:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 30px rgba(0,0,0,.28);
}


/* v69 setup image containment: opening/setup preview cards are full-card previews, not cropped art thumbnails. */
.setupHandPreviewCard img,
.startingActiveCard img,
.startingActiveChoice img {
  object-fit: contain !important;
  background: rgba(0,0,0,.22);
}
.setupHandPreviewCard,
.startingActiveCard {
  display: grid;
  place-items: center;
}

/* ======================================================
   v70 mulligan/prize fullscreen card access + setup image containment
====================================================== */
.mulliganRevealZoomCard,
.inspectPrizeZoomCard {
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  padding: 0 !important;
  cursor: pointer !important;
  background: rgba(255,255,255,.06) !important;
  display: grid !important;
  place-items: center !important;
}
.mulliganRevealZoomCard:hover,
.inspectPrizeZoomCard:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 18px 34px rgba(0,0,0,.35), 0 0 0 2px rgba(96,165,250,.34) !important;
}
.mulliganRevealZoomCard img,
.inspectPrizeZoomCard img,
.mulliganRevealHand .viewerCard img,
#modalBody .viewerGrid .viewerCard img,
#modalBody .startingActiveChoice img,
#modalBody .setupHandPreviewCard img,
#modalBody .startingActiveCard img {
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(0,0,0,.18) !important;
}
#modalBody .viewerGrid .viewerCard,
#modalBody .startingActiveChoice,
#modalBody .setupHandPreviewCard,
#modalBody .startingActiveCard {
  overflow: hidden !important;
}

/* ======================================================
   v74 active/bench battlefield height expansion
   - hides GAME title
   - expands the Active + Bench container vertically
   - makes bench slots and bench card image area larger
====================================================== */
#game .gameTopbar {
  padding: 5px 14px !important;
  min-height: 0 !important;
  border-radius: 15px !important;
}

#game .gameTopbar .title {
  display: none !important;
}

#game .gameTopbar #turnBanner {
  margin: 0 !important;
  font-size: clamp(13px, 0.95vw, 16px) !important;
  line-height: 1.12 !important;
}

#game .controls {
  top: 34px !important;
}

#game {
  --active-card-w: clamp(124px, 8.5vw, 164px);
  --active-card-h: calc(var(--active-card-w) * 1.39);
  --bench-card-w: clamp(92px, 6.35vw, 126px);
  --bench-card-h: calc(var(--bench-card-w) * 1.4);
}

#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(258px, 34vh, 385px) !important;
  height: clamp(258px, 34vh, 385px) !important;
  padding: clamp(10px, 1vw, 15px) !important;
}

div#playerActive {}

#game .battleLane {
  grid-template-columns: minmax(210px, 0.98fr) minmax(0, 2.4fr) !important;
  gap: clamp(10px, 0.95vw, 16px) !important;
  align-items: stretch !important;
}

#game .battleLaneActive,
#game .battleLaneBench {
  min-height: 0 !important;
}

#game .battleLaneBenchRail {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(124px, 1fr) !important;
  gap: clamp(8px, 0.75vw, 13px) !important;
  align-content: stretch !important;
}

#game .battleLaneBenchSlot {
  min-height: 124px !important;
  padding: 4px 8px 8px !important;
}

#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty {
  width: var(--bench-card-w) !important;
  height: var(--bench-card-h) !important;
  max-height: 100% !important;
  border-radius: 13px !important;
}

#game .battleLaneBenchSlot .slotBody,
#game .battleLaneBenchSlot .pokeWrap {
  min-height: calc(var(--bench-card-h) + 8px) !important;
  align-items: center !important;
  justify-content: center !important;
}

#game .battleLaneBenchSlot .pokeActions {
  min-height: var(--bench-card-h) !important;
}

#game .playerLowerRow,
#game .opponentLowerRow {
  margin-top: 3px !important;
}

#game .handTray,
#game .opponentHandTray {
  min-height: clamp(88px, 13vh, 128px) !important;
  height: clamp(88px, 13vh, 128px) !important;
}

@media (max-width: 1500px), (max-height: 920px) {
  #game {
    --active-card-w: clamp(116px, 39.9vw, 150px);
    --bench-card-w: clamp(84px, 0.75vw, 112px);
  }

  #game #playerActive.zone,
  #game #aiActive.zone {
    min-height: clamp(236px, 31vh, 335px) !important;
    height: clamp(236px, 37vh, 335px) !important;
  }

  #game .battleLaneBenchRail {
    grid-auto-rows: minmax(112px, 1fr) !important;
  }

  #game .battleLaneBenchSlot {
    min-height: 144px !important;
  }

  #game .handTray,
  #game .opponentHandTray {
    min-height: clamp(80px, 11.5vh, 112px) !important;
    height: clamp(80px, 11.5vh, 112px) !important;
  }
}

/* ======================================================
   v79 mirrored responsive battlefield containment polish
   - keeps both Active Pokémon beside the center seam
   - makes left/right fields true visual mirrors
   - guarantees full-card containment in every Active/Bench slot
====================================================== */
#game {
  --field-card-aspect: 63 / 88;
  --field-panel-radius: 18px;
  --field-slot-radius: 14px;
  --field-active-w: clamp(112px, 7.8vw, 168px);
  --field-bench-w: clamp(58px, 5.45vw, 106px);
}

#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(270px, 36vh, 430px) !important;
  height: clamp(270px, 36vh, 430px) !important;
  padding: clamp(10px, 0.85vw, 16px) !important;
  overflow: hidden !important;
}

#game .battleLane {
  height: 100% !important;
  display: grid !important;
  grid-template-columns: minmax(116px, 0.82fr) minmax(0, 2.18fr) !important;
  gap: clamp(10px, 0.9vw, 16px) !important;
  align-items: stretch !important;
  min-width: 0 !important;
}

/* Player 2 is bench | active; Player 1 is active | bench. Keep exact mirror widths. */
#game .opponentSide .battleLane {
  grid-template-columns: minmax(0, 2.18fr) minmax(116px, 0.82fr) !important;
}

#game .battleLaneActive,
#game .battleLaneBench {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(7px, 0.55vw, 10px) !important;
}

#game .battleLaneSectionLabel {
  margin: 0 !important;
  line-height: 1 !important;
  color: rgba(220, 231, 255, 0.82) !important;
  text-shadow: 0 1px 8px rgba(0,0,0,.35) !important;
}

#game .playerSide .battleLaneActive .battleLaneSectionLabel,
#game .playerSide .battleLaneBench .battleLaneSectionLabel,
#game .playerSide .battleLaneSlotTag {
  text-align: left !important;
}

#game .opponentSide .battleLaneActive .battleLaneSectionLabel,
#game .opponentSide .battleLaneBench .battleLaneSectionLabel,
#game .opponentSide .battleLaneSlotTag {
  text-align: right !important;
}

#game .battleLaneActive .activePokemonWrap,
#game .battleLaneActive .battleLaneActiveEmpty {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: flex !important;
  align-items: center !important;
}

/* Pull actives toward the center seam while preserving room for evolution stacks. */
#game .playerSide .battleLaneActive .activePokemonWrap,
#game .playerSide .battleLaneActive .battleLaneActiveEmpty {
  justify-content: flex-start !important;
}
#game .opponentSide .battleLaneActive .activePokemonWrap,
#game .opponentSide .battleLaneActive .battleLaneActiveEmpty {
  justify-content: flex-end !important;
}

#game .battleLaneActive .evolutionStackWrap,
#game .battleLaneBenchSlot .evolutionStackWrap {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  display: grid !important;
  place-items: center !important;
}

#game .battleLaneActive .activePokemonCard,
#game .battleLaneActive .slotEmpty {
  width: min(var(--field-active-w), calc(100% - 8px)) !important;
  height: auto !important;
  aspect-ratio: var(--field-card-aspect) !important;
  max-height: calc(100% - 8px) !important;
  border-radius: 15px !important;
}

#game .battleLaneBenchRail {
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: minmax(0, 1fr) !important;
  gap: clamp(7px, 0.62vw, 11px) !important;
  align-items: stretch !important;
  align-content: stretch !important;
}

#game .battleLaneBenchSlot {
  min-width: 0 !important;
  min-height: 0 !important;
  height: 100% !important;
  padding: clamp(5px, 0.48vw, 8px) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  gap: clamp(4px, 0.35vw, 7px) !important;
  overflow: hidden !important;
  border-radius: var(--field-slot-radius) !important;
  border: 1px solid rgba(205, 222, 255, 0.11) !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,.018)),
    radial-gradient(circle at 50% 0%, rgba(147,197,253,.10), transparent 58%) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 8px 18px rgba(0,0,0,.12) !important;
}

#game .battleLaneBenchSlot .benchPokemonWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  overflow: hidden !important;
}

#game .battleLaneBenchSlot .benchPokemonCard,
#game .battleLaneBenchSlot .slotEmpty {
  width: min(var(--field-bench-w), calc(100% - 4px)) !important;
  height: auto !important;
  aspect-ratio: var(--field-card-aspect) !important;
  max-width: calc(100% - 4px) !important;
  max-height: calc(100% - 4px) !important;
  border-radius: 11px !important;
  margin: 0 !important;
}

/* The image should never crop inside battlefield cards. */
#game .battleLaneActive .card img,
#game .battleLaneBenchSlot .card img,
#game .battleLaneActive .slotEmpty img,
#game .battleLaneBenchSlot .slotEmpty img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: rgba(15,23,42,.22) !important;
  margin: 0 !important;
}

#game .battleLaneActive .card,
#game .battleLaneBenchSlot .card {
  overflow: hidden !important;
  flex: 0 0 auto !important;
}

#game .battleLaneBenchSlot .slotEmpty {
  display: grid !important;
  place-items: center !important;
  font-size: clamp(10px, 0.8vw, 13px) !important;
  color: rgba(232,240,255,.76) !important;
  border-style: dashed !important;
}

@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --field-active-w: clamp(102px, 7vw, 146px);
    --field-bench-w: clamp(50px, 4.8vw, 92px);
  }
  #game #playerActive.zone,
  #game #aiActive.zone {
    min-height: clamp(246px, 34vh, 350px) !important;
    height: clamp(246px, 34vh, 350px) !important;
  }
  #game .battleLane,
  #game .opponentSide .battleLane {
    gap: clamp(8px, 0.7vw, 12px) !important;
  }
}

@media (max-width: 1180px) {
  #game .battleLane,
  #game .opponentSide .battleLane {
    grid-template-columns: 1fr !important;
  }
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(auto-fit, minmax(88px, 1fr)) !important;
  }
  #game .playerSide .battleLaneActive .activePokemonWrap,
  #game .opponentSide .battleLaneActive .activePokemonWrap,
  #game .playerSide .battleLaneActive .battleLaneActiveEmpty,
  #game .opponentSide .battleLaneActive .battleLaneActiveEmpty {
    justify-content: center !important;
  }
}

@media (max-width: 820px) {
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v79.1: height-first battlefield card sizing so cards shrink inside short slots instead of clipping. */
#game .battleLaneActive .activePokemonCard,
#game .battleLaneActive .slotEmpty {
  height: min(calc(var(--field-active-w) * 88 / 63), calc(100% - 8px)) !important;
  width: auto !important;
  max-width: calc(100% - 8px) !important;
  aspect-ratio: var(--field-card-aspect) !important;
}

#game .battleLaneBenchSlot .benchPokemonCard,
#game .battleLaneBenchSlot .slotEmpty {
  height: min(calc(var(--field-bench-w) * 88 / 63), calc(100% - 4px)) !important;
  width: auto !important;
  max-width: calc(100% - 4px) !important;
  aspect-ratio: var(--field-card-aspect) !important;
}

/* v79.2: absolute final battlefield sizing guard. Percent max-heights are unreliable inside nested CSS grids,
   so bench cards use a viewport-based safe width that preserves the full 63:88 card in every 3+2 bench slot. */
#game {
  --field-bench-safe-w: clamp(46px, 3.8vw, 72px);
  --field-active-safe-w: clamp(98px, 6.8vw, 152px);
}

#game .battleLaneBenchSlot .card.benchPokemonCard,
#game .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard {
  width: var(--field-bench-safe-w) !important;
  height: calc(var(--field-bench-safe-w) * 88 / 63) !important;
  max-width: calc(100% - 4px) !important;
  max-height: none !important;
  aspect-ratio: 63 / 88 !important;
}

#game .battleLaneActive .card.activePokemonCard,
#game .battleLaneActive .evolutionTopCard.activePokemonCard {
  width: var(--field-active-safe-w) !important;
  height: calc(var(--field-active-safe-w) * 88 / 63) !important;
  max-width: calc(100% - 8px) !important;
  max-height: none !important;
  aspect-ratio: 63 / 88 !important;
}

@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --field-bench-safe-w: clamp(44px, 3.45vw, 64px);
    --field-active-safe-w: clamp(92px, 6.1vw, 132px);
  }
}

/* v79.3: beat legacy #playerActive/#aiActive card-size rules inside the combined battlefield. */
#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard {
  width: var(--field-bench-safe-w) !important;
  height: calc(var(--field-bench-safe-w) * 88 / 63) !important;
  max-width: calc(100% - 4px) !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: 63 / 88 !important;
}

#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  width: var(--field-bench-safe-w) !important;
  height: calc(var(--field-bench-safe-w) * 88 / 63) !important;
  max-width: calc(100% - 4px) !important;
  max-height: none !important;
  margin: 0 !important;
  aspect-ratio: 63 / 88 !important;
}

#game #playerActive .battleLaneActive .card.activePokemonCard,
#game #aiActive .battleLaneActive .card.activePokemonCard,
#game #playerActive .battleLaneActive .slotEmpty,
#game #aiActive .battleLaneActive .slotEmpty {
  width: var(--field-active-safe-w) !important;
  height: calc(var(--field-active-safe-w) * 88 / 63) !important;
  max-width: calc(100% - 8px) !important;
  max-height: none !important;
  margin-top: 0 !important;
  aspect-ratio: 63 / 88 !important;
}

/* v79.4: final size tune after responsive fit checks. */
#game {
  --field-bench-safe-w: clamp(52px, 4.6vw, 78px);
  --field-active-safe-w: clamp(108px, 7.2vw, 156px);
}
@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --field-bench-safe-w: clamp(48px, 4.6vw, 74px);
    --field-active-safe-w: clamp(100px, 6.8vw, 144px);
  }
}

@media (max-height: 700px) {
  #game {
    --field-bench-safe-w: clamp(42px, 3.65vw, 58px);
    --field-active-safe-w: clamp(88px, 5.8vw, 124px);
  }
}

/* v79.5: hard guarantee that bench cards always fully fit inside the slot body.
   Size the card from the available slot-body height first, then cap by width.
   This prevents any top/bottom clipping in short rows while keeping symmetry. */
#game #playerActive .battleLaneBenchSlot .benchPokemonWrap,
#game #aiActive .battleLaneBenchSlot .benchPokemonWrap,
#game #playerActive .battleLaneBenchSlot .battleLaneEmpty,
#game #aiActive .battleLaneBenchSlot .battleLaneEmpty {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
  align-content: center !important;
}

#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  width: auto !important;
  height: min(calc(100% - 2px), calc(var(--field-bench-safe-w) * 88 / 63)) !important;
  max-height: calc(100% - 2px) !important;
  max-width: calc(100% - 2px) !important;
  aspect-ratio: 63 / 88 !important;
  margin: 0 auto !important;
  justify-self: center !important;
  align-self: center !important;
}

#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard img,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard img,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard img,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard img {
  object-fit: contain !important;
  object-position: center center !important;
}

/* Slightly more conservative bench width target so all five bench slots fit cleanly
   even on shorter viewports. */
#game {
  --field-bench-safe-w: clamp(44px, 4vw, 68px);
}
@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --field-bench-safe-w: clamp(40px, 3.6vw, 62px);
  }
}
@media (max-height: 700px) {
  #game {
    --field-bench-safe-w: clamp(36px, 3.1vw, 54px);
  }
}

/* v80.1: tighten bench slot boxes around cards, enlarge hand cards slightly, and keep everything responsive. */
#game {
  --field-bench-safe-w: clamp(46px, 4.15vw, 70px);
  --hand-safe-w: clamp(92px, 7.2vw, 136px);
  --hand-safe-h: calc(var(--hand-safe-w) * 1.4);
}

/* BENCH: boxes should hug the card instead of filling giant vertical space. */
#game .battleLaneBench,
#game .battleLaneBenchRail {
  align-self: start !important;
}

#game .battleLaneBenchRail {
  height: auto !important;
  min-height: 0 !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  grid-auto-rows: auto !important;
  align-items: start !important;
  align-content: start !important;
  gap: clamp(8px, 0.72vw, 12px) !important;
}

#game .battleLaneBenchSlot {
  height: auto !important;
  min-height: calc((var(--field-bench-safe-w) * 88 / 63) + 26px) !important;
  padding: 4px 4px 5px !important;
  gap: 3px !important;
  align-self: start !important;
}

#game .battleLaneSlotTag {
  font-size: clamp(9px, 0.72vw, 11px) !important;
  line-height: 1 !important;
}

#game #playerActive .battleLaneBenchSlot .benchPokemonWrap,
#game #aiActive .battleLaneBenchSlot .benchPokemonWrap,
#game #playerActive .battleLaneBenchSlot .battleLaneEmpty,
#game #aiActive .battleLaneBenchSlot .battleLaneEmpty {
  height: auto !important;
  min-height: 0 !important;
}

#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  width: auto !important;
  height: calc(var(--field-bench-safe-w) * 88 / 63) !important;
  max-width: calc(100% - 2px) !important;
  max-height: calc(100% - 2px) !important;
}

/* HAND: make cards a little larger, reduce clipping, and keep them responsive. */
#game .handTray,
#game .opponentHandTray {
  min-height: clamp(136px, 19vh, 236px) !important;
  height: clamp(136px, 19vh, 236px) !important;
  padding: 8px 8px 8px !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

#game .handTray .hand,
#game .opponentHandTray .hand {
  width: max-content;
  min-width: 100%;
  padding-bottom: 2px;
}

#game .handTray .card,
#game .opponentHandTray .card {
  width: var(--hand-safe-w) !important;
  height: var(--hand-safe-h) !important;
  max-width: none !important;
  max-height: none !important;
}

#game .handTray .card + .card,
#game .opponentHandTray .card + .card {
  margin-left: -20px !important;
}

@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --field-bench-safe-w: clamp(42px, 3.8vw, 62px);
    --hand-safe-w: clamp(84px, 6.6vw, 124px);
  }
}

@media (max-height: 760px) {
  #game {
    --field-bench-safe-w: clamp(38px, 3.25vw, 54px);
    --hand-safe-w: clamp(76px, 5.8vw, 112px);
  }

  #game .handTray,
  #game .opponentHandTray {
    min-height: clamp(118px, 17vh, 188px) !important;
    height: clamp(118px, 17vh, 188px) !important;
  }
}

@media (max-width: 1180px) {
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)) !important;
  }

  #game .handTray .card + .card,
  #game .opponentHandTray .card + .card {
    margin-left: -16px !important;
  }
}

/* v80.1b: hand row should stay on one line and scroll horizontally instead of clipping/wrapping. */
#game .handTray .hand,
#game .opponentHandTray .hand {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-end !important;
  gap: 0 !important;
}

/* v81.2: use the free bench area much better.
   Goal: slots should expand to fill the lane like the mockup, stay only slightly larger
   than the card itself, and remain responsive across viewport sizes. */
#game {
  --field-bench-safe-w: clamp(58px, 4.9vw, 82px);
}

/* Give the bench portion a little more room while keeping symmetry with active. */
#game .battleLane {
  grid-template-columns: minmax(170px, 0.95fr) minmax(0, 2.55fr) !important;
  gap: clamp(12px, 1vw, 18px) !important;
}
#game .opponentSide .battleLane {
  grid-template-columns: minmax(0, 2.55fr) minmax(170px, 0.95fr) !important;
}

#game .battleLaneBench,
#game .battleLaneBenchRail {
  width: 100% !important;
}

/* auto-fit lets 1–2 occupied slots expand nicely, while the chosen min width keeps
   5 bench slots at a clean 3-over-2 layout on common desktop widths. */
#game .battleLaneBenchRail {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(clamp(128px, 12vw, 170px), 1fr)) !important;
  grid-auto-rows: auto !important;
  gap: clamp(10px, 0.8vw, 14px) !important;
  align-items: start !important;
  align-content: start !important;
  justify-items: stretch !important;
  height: auto !important;
}

#game .battleLaneBenchSlot {
  width: 100% !important;
  min-width: 0 !important;
  height: auto !important;
  min-height: clamp(128px, 16vh, 166px) !important;
  grid-template-rows: auto 1fr !important;
  align-items: start !important;
  justify-items: center !important;
  padding: clamp(5px, 0.45vw, 8px) !important;
  gap: clamp(4px, 0.35vw, 7px) !important;
  border-radius: 16px !important;
}

#game .battleLaneBenchSlot .benchPokemonWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100% !important;
  height: 100% !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
}

/* Card fills the slot elegantly without clipping. */
#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  width: auto !important;
  height: min(calc(100% - 2px), calc(var(--field-bench-safe-w) * 88 / 63)) !important;
  max-width: calc(100% - 6px) !important;
  max-height: calc(100% - 2px) !important;
  aspect-ratio: 63 / 88 !important;
  margin: 0 auto !important;
}

#game .battleLaneSlotTag {
  width: 100% !important;
  text-align: left !important;
  font-size: clamp(9px, 0.78vw, 12px) !important;
}

/* Keep the active visually strong but let bench use surrounding whitespace better. */
#game #playerActive.zone,
#game #aiActive.zone {
  min-height: clamp(238px, 33vh, 380px) !important;
  height: clamp(238px, 33vh, 380px) !important;
}

/* Responsiveness */
@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --field-bench-safe-w: clamp(52px, 4.4vw, 74px);
  }
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(auto-fit, minmax(clamp(116px, 11vw, 152px), 1fr)) !important;
  }
  #game .battleLaneBenchSlot {
    min-height: clamp(118px, 15vh, 152px) !important;
  }
}

@media (max-width: 1180px) {
  #game .battleLane,
  #game .opponentSide .battleLane {
    grid-template-columns: 1fr !important;
  }
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)) !important;
  }
}

@media (max-width: 820px) {
  #game {
    --field-bench-safe-w: clamp(46px, 6.2vw, 66px);
  }
  #game .battleLaneBenchRail {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
  #game .battleLaneBenchSlot {
    min-height: clamp(112px, 14vh, 146px) !important;
  }
}

/* v82.1 FINAL: bench slots must be portrait/card-shaped, and bench card size must
   always match hand card size. This override intentionally prevents bench slots
   from stretching into large horizontal panels when few slots are occupied. */
#game {
  --bench-slot-card-w: var(--hand-safe-w, clamp(92px, 7.2vw, 136px));
  --bench-slot-card-h: var(--hand-safe-h, calc(var(--bench-slot-card-w) * 1.4));
  --bench-slot-w: calc(var(--bench-slot-card-w) + 14px);
  --bench-slot-h: calc(var(--bench-slot-card-h) + 32px);
}

/* Keep the active+bench lane balanced, but stop the bench slots themselves from stretching. */
#game .battleLane {
  grid-template-columns: minmax(170px, 0.95fr) minmax(0, 2.2fr) !important;
}
#game .opponentSide .battleLane {
  grid-template-columns: minmax(0, 2.2fr) minmax(170px, 0.95fr) !important;
}

/* Arrange bench slots as a wrapped row of fixed portrait tiles. */
#game .battleLaneBenchRail {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: var(--bench-rail-gap, clamp(10px, 0.85vw, 14px)) !important;
  width: 100% !important;
  height: auto !important;
}

#game .battleLaneBenchSlot {
  flex: 0 0 var(--bench-slot-w) !important;
  width: var(--bench-slot-w) !important;
  min-width: var(--bench-slot-w) !important;
  max-width: var(--bench-slot-w) !important;
  height: var(--bench-slot-h) !important;
  min-height: var(--bench-slot-h) !important;
  max-height: var(--bench-slot-h) !important;
  box-sizing: border-box !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  padding: 5px 5px 6px !important;
  gap: 4px !important;
  border-radius: 16px !important;
}

#game .battleLaneSlotTag {
  width: 100% !important;
  text-align: left !important;
  font-size: clamp(9px, 0.76vw, 11px) !important;
  line-height: 1 !important;
}

#game .battleLaneBenchSlot .benchPokemonWrap,
#game .battleLaneBenchSlot .battleLaneEmpty {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
}

/* Bench card image size MUST match the hand card size. */
#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty,
#game .battleLaneBenchSlot .card,
#game .battleLaneBenchSlot .slotEmpty {
  width: var(--bench-slot-card-w) !important;
  min-width: var(--bench-slot-card-w) !important;
  max-width: var(--bench-slot-card-w) !important;
  height: var(--bench-slot-card-h) !important;
  min-height: var(--bench-slot-card-h) !important;
  max-height: var(--bench-slot-card-h) !important;
  aspect-ratio: 63 / 88 !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
}

#game .battleLaneBenchSlot .card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

/* Empty placeholder should feel like the same card footprint, inside the card-shaped slot. */
#game .battleLaneBenchSlot .slotEmpty {
  display: grid !important;
  place-items: center !important;
  border-style: dashed !important;
  color: rgba(232,240,255,.78) !important;
}

/* Responsiveness: shrink both hand and bench together. */
@media (max-width: 1500px), (max-height: 900px) {
  #game {
    --bench-slot-card-w: var(--hand-safe-w, clamp(84px, 6.6vw, 124px));
    --bench-slot-card-h: var(--hand-safe-h, calc(var(--bench-slot-card-w) * 1.4));
    --bench-slot-w: calc(var(--bench-slot-card-w) + 12px);
    --bench-slot-h: calc(var(--bench-slot-card-h) + 30px);
  }
}

@media (max-width: 1180px) {
  #game .battleLane,
  #game .opponentSide .battleLane {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 820px), (max-height: 760px) {
  #game {
    --bench-slot-card-w: var(--hand-safe-w, clamp(76px, 5.8vw, 112px));
    --bench-slot-card-h: var(--hand-safe-h, calc(var(--bench-slot-card-w) * 1.4));
    --bench-slot-w: calc(var(--bench-slot-card-w) + 10px);
    --bench-slot-h: calc(var(--bench-slot-card-h) + 28px);
  }
}

/* v83.1 hard lock: bench slot shell must stay card-shaped and the bench card footprint
   must always match the visible hand card size. This sits at the end on purpose so it
   wins over the many older battlefield overrides above. */
#game {
  --bench-card-match-w: var(--hand-safe-w, clamp(92px, 7.2vw, 136px));
  --bench-card-match-h: var(--hand-safe-h, calc(var(--bench-card-match-w) * 1.4));
  --bench-slot-shell-w: calc(var(--bench-card-match-w) + 14px);
  --bench-slot-shell-h: calc(var(--bench-card-match-h) + 30px);
}

#game #playerActive .battleLaneBenchRail,
#game #aiActive .battleLaneBenchRail {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: flex-start !important;
  align-content: flex-start !important;
  justify-content: flex-start !important;
  gap: clamp(10px, 0.85vw, 14px) !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
}

#game #playerActive .battleLaneBenchSlot,
#game #aiActive .battleLaneBenchSlot {
  flex: 0 0 auto !important;
  width: var(--bench-slot-shell-w) !important;
  min-width: var(--bench-slot-shell-w) !important;
  max-width: var(--bench-slot-shell-w) !important;
  height: var(--bench-slot-shell-h) !important;
  min-height: var(--bench-slot-shell-h) !important;
  max-height: var(--bench-slot-shell-h) !important;
  display: grid !important;
  grid-template-rows: auto minmax(0, 1fr) !important;
  justify-items: stretch !important;
  align-items: stretch !important;
  padding: 5px 5px 6px !important;
  gap: 4px !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

#game #playerActive .battleLaneBenchSlot .battleLaneSlotTag,
#game #aiActive .battleLaneBenchSlot .battleLaneSlotTag {
  width: 100% !important;
  text-align: left !important;
  font-size: clamp(9px, 0.76vw, 11px) !important;
  line-height: 1 !important;
}

#game #playerActive .battleLaneBenchSlot .benchPokemonWrap,
#game #aiActive .battleLaneBenchSlot .benchPokemonWrap,
#game #playerActive .battleLaneBenchSlot .battleLaneEmpty,
#game #aiActive .battleLaneBenchSlot .battleLaneEmpty {
  width: 100% !important;
  height: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  display: grid !important;
  place-items: center !important;
}

#game #playerActive .battleLaneBenchSlot .evolutionStackWrap,
#game #aiActive .battleLaneBenchSlot .evolutionStackWrap {
  width: var(--bench-card-match-w) !important;
  min-width: var(--bench-card-match-w) !important;
  max-width: var(--bench-card-match-w) !important;
  height: var(--bench-card-match-h) !important;
  min-height: var(--bench-card-match-h) !important;
  max-height: var(--bench-card-match-h) !important;
  display: grid !important;
  place-items: center !important;
}

#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  width: var(--bench-card-match-w) !important;
  min-width: var(--bench-card-match-w) !important;
  max-width: var(--bench-card-match-w) !important;
  height: var(--bench-card-match-h) !important;
  min-height: var(--bench-card-match-h) !important;
  max-height: var(--bench-card-match-h) !important;
  aspect-ratio: 63 / 88 !important;
  margin: 0 auto !important;
  align-self: center !important;
  justify-self: center !important;
}

#game #playerActive .battleLaneBenchSlot .card img,
#game #aiActive .battleLaneBenchSlot .card img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  display: grid !important;
  place-items: center !important;
  border-style: dashed !important;
}


/* v83.2: keep all five bench slots on the same row at desktop widths.
   Bench cards still match the hand-card footprint, but the shared card size is
   now capped from the available bench width so Slot 5 never drops or clips. */
#game {
  --bench-slot-shell-w: calc(var(--bench-card-match-w) + 8px);
  --bench-slot-shell-h: calc(var(--bench-card-match-h) + 24px);
}

#game .battleLane {
  grid-template-columns: minmax(148px, 0.78fr) minmax(0, 2.42fr) !important;
  gap: clamp(8px, 0.7vw, 12px) !important;
}

#game .opponentSide .battleLane {
  grid-template-columns: minmax(0, 2.42fr) minmax(148px, 0.78fr) !important;
}

#game #playerActive .battleLaneBenchRail,
#game #aiActive .battleLaneBenchRail {
  flex-wrap: nowrap !important;
  gap: var(--bench-rail-gap, clamp(6px, 0.55vw, 10px)) !important;
}

#game #playerActive .battleLaneBenchSlot,
#game #aiActive .battleLaneBenchSlot {
  padding: 4px 3px 5px !important;
}




/* v83.2: final side-specific bench rail alignment.
   The bench rail is a flex row in the final battlefield layout, so alignment must
   be controlled here instead of with JS grid placement. Keep each side mirrored. */
#game .playerSide .battleLaneBenchRail {
  justify-content: flex-end !important;
}

#game .opponentSide .battleLaneBenchRail {
  justify-content: flex-start !important;
}

/* v83.1: clean up ACTIVE evolution stacks.
   Make the cards underneath read like a neat layered stack instead of nearly full-size cards. */
#game .battleLaneActive .activeEvolutionStackWrap {
  position: relative !important;
  width: var(--field-active-safe-w) !important;
  height: calc(var(--field-active-safe-w) * 88 / 63) !important;
  min-width: var(--field-active-safe-w) !important;
  min-height: calc(var(--field-active-safe-w) * 88 / 63) !important;
  overflow: visible !important;
  isolation: isolate !important;
}

#game .battleLaneActive .activeEvolutionStackWrap .evolutionTopCard.activePokemonCard {
  position: relative !important;
  z-index: 5 !important;
  box-shadow:
    0 14px 28px rgba(2, 6, 23, 0.28),
    0 0 0 1px rgba(255,255,255,0.06) !important;
}

#game .battleLaneActive .activeEvolutionStackWrap .evolutionUnderCard {
  inset: auto !important;
  left: 50% !important;
  top: 50% !important;
  width: 88% !important;
  height: 88% !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  pointer-events: none !important;
  opacity: 0.42 !important;
  filter: saturate(0.78) brightness(0.82) !important;
  box-shadow: 0 10px 24px rgba(2, 6, 23, 0.18) !important;
}

#game .battleLaneActive .activeEvolutionStackWrap .evolutionUnderCard img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

#game .battleLaneActive .activeEvolutionStackWrap .evolutionUnderCard0 {
  z-index: 2 !important;
  transform: translate(calc(-50% + 14px), calc(-50% - 2px)) scale(0.90) rotate(2.5deg) !important;
}

#game .battleLaneActive .activeEvolutionStackWrap .evolutionUnderCard1 {
  z-index: 1 !important;
  opacity: 0.28 !important;
  transform: translate(calc(-50% + 26px), calc(-50% - 7px)) scale(0.82) rotate(5deg) !important;
}


/* v83.3: exact selector override for final bench rail alignment.
   The hard-locked battlefield rules target #playerActive/#aiActive directly,
   so we must override at the same specificity. Right-align both bench rails. */
#game #playerActive .battleLaneBenchRail,
#game #aiActive .battleLaneBenchRail {
  justify-content: flex-end !important;
}


/* v84.0: responsive one-row bench sizing.
   Bench slots now size from the actual rail width and slot count so they always stay on one row.
   With 1-2 slots they grow up toward Active size; with many slots they shrink just enough to fit. */
#game #playerActive .battleLaneBenchRail,
#game #aiActive .battleLaneBenchRail {
  flex-wrap: nowrap !important;
  gap: var(--bench-rail-gap, clamp(6px, 0.55vw, 10px)) !important;
}

#game #playerActive .battleLaneBenchSlot,
#game #aiActive .battleLaneBenchSlot {
  width: var(--bench-slot-shell-w) !important;
  min-width: var(--bench-slot-shell-w) !important;
  max-width: var(--bench-slot-shell-w) !important;
  height: var(--bench-slot-shell-h) !important;
  min-height: var(--bench-slot-shell-h) !important;
  max-height: var(--bench-slot-shell-h) !important;
}

#game #playerActive .battleLaneBenchSlot .evolutionStackWrap,
#game #aiActive .battleLaneBenchSlot .evolutionStackWrap,
#game #playerActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .card.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #aiActive .battleLaneBenchSlot .evolutionTopCard.benchPokemonCard,
#game #playerActive .battleLaneBenchSlot .slotEmpty,
#game #aiActive .battleLaneBenchSlot .slotEmpty {
  width: var(--bench-card-match-w) !important;
  min-width: var(--bench-card-match-w) !important;
  max-width: var(--bench-card-match-w) !important;
  height: var(--bench-card-match-h) !important;
  min-height: var(--bench-card-match-h) !important;
  max-height: var(--bench-card-match-h) !important;
}


/* v84.1: final bench rail side alignment + overflow safety.
   Player 1 bench stays left aligned, Player 2 bench stays right aligned.
   Keep a horizontal scroll fallback so slots never disappear if sizing ever overshoots. */
#game #playerActive .battleLaneBench {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

#game #aiActive .battleLaneBench {
  min-width: 0 !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
}

#game #playerActive .battleLaneBenchRail {
  justify-content: flex-start !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  width: max-content !important;
  min-width: 100% !important;
}

#game #aiActive .battleLaneBenchRail {
  justify-content: flex-end !important;
  flex-wrap: nowrap !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  scrollbar-width: thin;
  width: max-content !important;
  min-width: 100% !important;
}


/* v84.2: remove all visible card outline strokes.
   Keep depth shadows, but never show a line border around cards. */
#game .card,
#game .viewerCard,
#game .evolutionTopCard,
#game .card-back,
#game .hand .card,
#game .battleLaneActive .card,
#game .battleLaneBenchSlot .card,
#game #playerDeck .card,
#game #playerDiscard .card,
#game #energyPile .card,
#game #energyDiscard .card,
#game #playerStadium .card,
#game #aiStadium .card,
#game #aiDeck .card,
#game #aiDiscard .card,
#game .prize .card {
  border: none !important;
  outline: none !important;
}

#game .battleLaneActive .activeEvolutionStackWrap .evolutionTopCard.activePokemonCard {
  box-shadow: 0 14px 28px rgba(2, 6, 23, 0.28) !important;
}


/* v84.3: remove card outline strokes in all preview / inspect / zoom views too. */
.viewerCard,
.viewerCard img,
.zoomCard,
.zoomCard img,
.zoomCard .card-back,
.playCardViewerCard,
.playCardViewerCard img,
.battleInspectCardFrame,
.battleInspectCardFrame img,
.mulliganRevealZoomCard,
.inspectPrizeZoomCard,
#modalBody .viewerGrid .viewerCard,
#modalBody .viewerGrid .viewerCard img,
#modalBody .startingActiveChoice,
#modalBody .startingActiveChoice img,
#modalBody .setupHandPreviewCard,
#modalBody .setupHandPreviewCard img,
#modalBody .startingActiveCard,
#modalBody .startingActiveCard img {
  border: none !important;
  outline: none !important;
  box-shadow: none !important;
}

.battleInspectCardFrame::before,
.battleInspectCardFrame::after {
  display: none !important;
  content: none !important;
}

.battleInspectCardFrame,
.modalOverlay.inspectLive .battleInspectCardFrame,
.modalOverlay.inspectClosing .battleInspectCardFrame {
  filter: drop-shadow(0 28px 52px rgba(0,0,0,.52)) !important;
}


/* v84.4: hand trays must scale with the visible card size so the full card is always visible,
   even when browser zoom changes the effective viewport size. */
#game {
  --hand-row-pad-y: clamp(8px, 0.9vh, 12px);
  --hand-row-pad-x: clamp(8px, 0.8vw, 12px);
}

#game .handTray,
#game .opponentHandTray {
  min-height: calc(var(--hand-safe-h) + (var(--hand-row-pad-y) * 2) + 4px) !important;
  height: calc(var(--hand-safe-h) + (var(--hand-row-pad-y) * 2) + 4px) !important;
  padding: var(--hand-row-pad-y) var(--hand-row-pad-x) !important;
  align-items: center !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
}

#game #playerHand,
#game #aiHand {
  box-sizing: border-box !important;
}

#game .handTray .card,
#game .opponentHandTray .card,
#game #playerHand .card,
#game #aiHand .card {
  max-height: calc(100% - (var(--hand-row-pad-y) * 2) - 2px) !important;
  align-self: center !important;
}

#game .handTray .card img,
#game .opponentHandTray .card img,
#game #playerHand .card img,
#game #aiHand .card img,
#game .opponentHandTray .card-back {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}


/* v84.5: hard hand-row visibility guarantee.
   Use the exact tray element ids so old generic .hand/.handTray rules can never clip the cards.
   The tray height is synced from JS to the fitted card height, and cards always anchor from the top. */
#game #playerHand.hand.handTray,
#game #aiHand.hand.handTray,
#game #aiHand.hand.handTray.opponentHandTray {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: flex-start !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  padding: var(--hand-row-pad-y) var(--hand-row-pad-x) !important;
  scroll-padding-left: var(--hand-row-pad-x) !important;
  scroll-padding-right: var(--hand-row-pad-x) !important;
}

#game #playerHand.hand.handTray > .card,
#game #aiHand.hand.handTray > .card {
  position: relative !important;
  flex: 0 0 auto !important;
  display: block !important;
  align-self: flex-start !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  max-height: none !important;
}

#game #playerHand.hand.handTray > .card img,
#game #aiHand.hand.handTray > .card img,
#game #aiHand.hand.handTray > .card .card-back {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
  object-position: center center !important;
}

#game #playerHand::-webkit-scrollbar,
#game #aiHand::-webkit-scrollbar {
  height: 8px;
}


/* === v85 optional match features: compact toggles, markers, Lost Zone, live bench size === */
.matchFeatureSetupField {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  font-weight: 1000 !important;
  grid-column: 1 / -1;
}
.matchFeatureToggleGrid { display:grid; grid-template-columns:repeat(3,minmax(160px,1fr)); gap:10px; }
.matchFeatureToggle { display:flex; align-items:center; gap:10px; padding:10px 12px; border-radius:16px; background:rgba(255,255,255,.70); border:1px solid rgba(124,58,237,.20); box-shadow:0 10px 24px rgba(30,41,59,.08); cursor:pointer; user-select:none; }
.matchFeatureToggle input { position:absolute; opacity:0; pointer-events:none; }
.matchFeatureSwitch { width:42px; height:24px; flex:0 0 42px; border-radius:999px; background:rgba(148,163,184,.55); border:1px solid rgba(100,116,139,.28); position:relative; transition:background .18s ease,border-color .18s ease; }
.matchFeatureSwitch::after { content:""; width:18px; height:18px; border-radius:999px; position:absolute; left:3px; top:2px; background:#fff; box-shadow:0 4px 12px rgba(15,23,42,.20); transition:transform .18s ease; }
.matchFeatureToggle input:checked + .matchFeatureSwitch { background:linear-gradient(135deg,#8b5cf6,#ec4899); border-color:rgba(236,72,153,.45); }
.matchFeatureToggle input:checked + .matchFeatureSwitch::after { transform:translateX(18px); }
.matchFeatureCopy { display:flex; flex-direction:column; gap:2px; min-width:0; }
.matchFeatureCopy b { font-size:13px; letter-spacing:.02em; }
.matchFeatureCopy small { font-size:11px; color:#64748b; font-weight:800; }
#game .sideHeaderRow { gap:8px !important; }
#game .matchMarkerRow { display:flex; align-items:center; justify-content:flex-start; flex-wrap:wrap; gap:6px; min-width:0; flex:1 1 auto; }
#game .opponentSide .matchMarkerRow { justify-content:flex-end; }
#game .matchMarkerChip, #game .benchSizeChip { border:1px solid rgba(255,255,255,.28); background:rgba(15,23,42,.34); color:#fff; box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 8px 18px rgba(15,23,42,.14); border-radius:999px; min-height:28px; font-size:clamp(10px,.72vw,12px); font-weight:1000; letter-spacing:.02em; backdrop-filter:blur(8px); }
#game .matchMarkerChip { padding:5px 9px; cursor:pointer; }
#game .matchMarkerChip--used { background:linear-gradient(135deg,rgba(124,58,237,.86),rgba(236,72,153,.86)); border-color:rgba(255,255,255,.42); text-shadow:0 1px 5px rgba(0,0,0,.28); }
#game .benchSizeChip { display:inline-flex; align-items:center; gap:6px; padding:3px 6px 3px 9px; white-space:nowrap; }
#game .benchSizeChip strong { min-width:16px; text-align:center; font-size:clamp(12px,.82vw,14px); }
#game .benchSizeBtn { width:22px; height:22px; border-radius:999px; border:1px solid rgba(255,255,255,.34); background:rgba(255,255,255,.16); color:#fff; font-weight:1000; line-height:1; cursor:pointer; }
#game .benchSizeBtn:disabled { opacity:.42; cursor:not-allowed; }
#game .discardLostPairHost { min-width:0 !important; }
#game .discardLostPair { display:grid; grid-template-columns:minmax(0,1fr); gap:7px; min-width:0; }
#game .discardLostPair.hasLostZone { grid-template-columns:repeat(2,minmax(0,1fr)); }
#game .discardLostPair .miniZoneBlock { min-width:0; }
#game .lostZoneBlock .zoneTitle { color:#fef3c7 !important; text-shadow:0 1px 8px rgba(124,58,237,.35); }
#game .lostZone { border-color:rgba(236,72,153,.34) !important; box-shadow:inset 0 0 0 1px rgba(255,255,255,.08),0 10px 22px rgba(124,58,237,.16) !important; }
#game .lostZoneTopCard { box-shadow:0 0 0 2px rgba(236,72,153,.32),0 10px 24px rgba(15,23,42,.18) !important; }
@media (max-width:900px) { .matchFeatureToggleGrid { grid-template-columns:1fr; } #game .matchMarkerRow { gap:4px; } #game .matchMarkerChip, #game .benchSizeChip { font-size:10px; } }


/* === v85.1 fixes: discard/lost zone spacing + smaller lobby toggles === */
#game .playerLowerRow,
#game .opponentLowerRow {
  grid-template-columns: minmax(0, 1fr) minmax(250px, 1.65fr) minmax(0, 0.95fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) !important;
  column-gap: 12px !important;
  align-items: start !important;
}

#game .discardLostPairHost {
  width: 100% !important;
  min-width: 0 !important;
  align-self: start !important;
}

#game .discardLostPair,
#game .discardLostPair.hasLostZone {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100% !important;
  min-width: 0 !important;
  align-items: start !important;
}

#game .discardLostPair .miniZoneBlock {
  width: 100% !important;
  min-width: 0 !important;
}

#game .discardLostPair .zone {
  width: 100% !important;
  min-width: 0 !important;
  box-sizing: border-box !important;
}

#game .discardLostPair .card,
#game .discardLostPair .slotEmpty {
  margin-left: auto !important;
  margin-right: auto !important;
}

.matchFeatureToggleGrid {
  grid-template-columns: repeat(3, minmax(116px, 1fr)) !important;
  gap: 6px !important;
}

.matchFeatureToggle {
  gap: 7px !important;
  padding: 6px 8px !important;
  border-radius: 12px !important;
}

.matchFeatureSwitch {
  width: 30px !important;
  height: 17px !important;
  flex: 0 0 30px !important;
}

.matchFeatureSwitch::after {
  width: 11px !important;
  height: 11px !important;
  left: 2px !important;
  top: 2px !important;
}

.matchFeatureToggle input:checked + .matchFeatureSwitch::after {
  transform: translateX(13px) !important;
}

.matchFeatureCopy b {
  font-size: 11px !important;
}

.matchFeatureCopy small {
  font-size: 9px !important;
}

@media (max-width: 1100px) {
  #game .playerLowerRow,
  #game .opponentLowerRow {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }

  #game .discardLostPairHost {
    grid-column: span 2 !important;
  }
}

@media (max-width: 780px) {
  #game .discardLostPairHost {
    grid-column: auto !important;
  }

  #game .discardLostPair,
  #game .discardLostPair.hasLostZone {
    grid-template-columns: 1fr 1fr !important;
  }

  .matchFeatureToggleGrid {
    grid-template-columns: 1fr !important;
  }
}


/* === v85.2 final: make room-lobby match feature toggles noticeably smaller === */
.matchFeatureToggleGrid {
  grid-template-columns: repeat(3, minmax(96px, 1fr)) !important;
  gap: 5px !important;
}

.matchFeatureToggle {
  gap: 6px !important;
  padding: 4px 6px !important;
  border-radius: 10px !important;
  min-height: 0 !important;
}

.matchFeatureSwitch {
  width: 24px !important;
  height: 14px !important;
  flex: 0 0 24px !important;
}

.matchFeatureSwitch::after {
  width: 8px !important;
  height: 8px !important;
  left: 2px !important;
  top: 2px !important;
}

.matchFeatureToggle input:checked + .matchFeatureSwitch::after {
  transform: translateX(10px) !important;
}

.matchFeatureCopy {
  gap: 1px !important;
}

.matchFeatureCopy b {
  font-size: 10px !important;
  line-height: 1.05 !important;
}

.matchFeatureCopy small {
  font-size: 8px !important;
  line-height: 1.05 !important;
}

/* === v85.3 final: keep lobby feature toggles compact, but restore readable labels === */
.matchFeatureToggleGrid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 8px !important;
}

.matchFeatureToggle {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 7px 10px !important;
  border-radius: 12px !important;
  min-width: 0 !important;
}

.matchFeatureSwitch {
  width: 28px !important;
  height: 16px !important;
  flex: 0 0 28px !important;
}

.matchFeatureSwitch::after {
  width: 10px !important;
  height: 10px !important;
  left: 2px !important;
  top: 2px !important;
}

.matchFeatureToggle input:checked + .matchFeatureSwitch::after {
  transform: translateX(12px) !important;
}

.matchFeatureCopy {
  display: flex !important;
  flex-direction: column !important;
  gap: 2px !important;
  min-width: 0 !important;
}

.matchFeatureCopy b {
  font-size: 12px !important;
  line-height: 1.12 !important;
}

.matchFeatureCopy small {
  font-size: 10px !important;
  line-height: 1.12 !important;
}


/* === v85.3 final lobby toggle polish: compact, in-grid, and aesthetic === */
.matchFeatureSetupFieldCompact {
  grid-column: auto !important;
  align-self: stretch !important;
  justify-content: center !important;
  gap: 0 !important;
  min-height: 0 !important;
}

.matchFeatureToggleGridCompact {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 6px !important;
  width: 100% !important;
  margin: 0 !important;
}

.matchFeatureToggleCompact {
  min-height: 0 !important;
  padding: 6px 4px 5px !important;
  border-radius: 14px !important;
  gap: 4px !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
  text-align: center !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.78), rgba(255,255,255,0.70)) !important;
  border: 1px solid rgba(148,163,184,0.22) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.68),
    0 8px 18px rgba(15,23,42,0.07) !important;
}

.matchFeatureToggleCompact:hover {
  transform: translateY(-1px) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.72),
    0 12px 22px rgba(15,23,42,0.10) !important;
}

.matchFeatureToggleCompact .matchFeatureSwitch {
  width: 22px !important;
  height: 22px !important;
  flex: 0 0 22px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, rgba(168,85,247,0.94), rgba(236,72,153,0.90)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.42),
    0 6px 12px rgba(168,85,247,0.20) !important;
}

.matchFeatureToggleCompact .matchFeatureSwitch::after {
  width: 7px !important;
  height: 7px !important;
  left: auto !important;
  right: 3px !important;
  top: 3px !important;
  border-radius: 999px !important;
  background: rgba(255,255,255,0.96) !important;
  box-shadow: 0 1px 3px rgba(15,23,42,0.20) !important;
}

.matchFeatureToggleCompact input:not(:checked) + .matchFeatureSwitch {
  background: linear-gradient(135deg, rgba(148,163,184,0.82), rgba(148,163,184,0.70)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 4px 10px rgba(100,116,139,0.16) !important;
}

.matchFeatureToggleCompact input:checked + .matchFeatureSwitch::after,
.matchFeatureToggleCompact input:not(:checked) + .matchFeatureSwitch::after {
  transform: none !important;
}

.matchFeatureToggleCompact .matchFeatureCopy {
  gap: 1px !important;
  align-items: center !important;
}

.matchFeatureToggleCompact .matchFeatureCopy b {
  font-size: 11px !important;
  line-height: 1 !important;
  letter-spacing: 0.01em !important;
  color: #ffffff !important;
  text-shadow: 0 1px 8px rgba(15,23,42,0.18) !important;
  mix-blend-mode: normal !important;
}

.matchFeatureToggleCompact .matchFeatureCopy small {
  font-size: 8px !important;
  line-height: 1.05 !important;
  color: rgba(71,85,105,0.92) !important;
  font-weight: 900 !important;
}

@media (max-width: 1100px) {
  .matchFeatureSetupFieldCompact {
    grid-column: 1 / -1 !important;
  }
  .matchFeatureToggleGridCompact {
    max-width: 420px;
  }
}


/* === v85.4 final: single-circle lobby toggle indicator === */
.matchFeatureToggleCompact .matchFeatureSwitch {
  width: 20px !important;
  height: 20px !important;
  flex: 0 0 20px !important;
  border-radius: 999px !important;
  border: 0 !important;
  background: linear-gradient(135deg, rgba(148,163,184,0.90), rgba(148,163,184,0.76)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.26),
    0 4px 10px rgba(100,116,139,0.18) !important;
}

.matchFeatureToggleCompact .matchFeatureSwitch::after {
  display: none !important;
  content: none !important;
}

.matchFeatureToggleCompact input:checked + .matchFeatureSwitch {
  background: linear-gradient(135deg, rgba(168,85,247,0.98), rgba(236,72,153,0.96)) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.34),
    0 0 0 2px rgba(236,72,153,0.16),
    0 0 18px rgba(168,85,247,0.34),
    0 8px 18px rgba(168,85,247,0.24) !important;
}


/* === v86: play-spot item/supporter split, random hand utility, ability-used marker === */
.abilityUsedBadge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  width: 12px;
  height: 12px;
  border-radius: 999px;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,0.92), rgba(168,85,247,0.96) 45%, rgba(99,102,241,0.98) 100%);
  box-shadow:
    0 0 0 1px rgba(255,255,255,0.18),
    0 0 10px rgba(168,85,247,0.24);
  opacity: 0.92;
  pointer-events: none;
}

#game .battleLaneActive .abilityUsedBadge {
  width: 14px;
  height: 14px;
  right: 10px;
  bottom: 10px;
}

.zoomCard .abilityUsedBadge,
#game .zoomCard .abilityUsedBadge {
  width: 16px;
  height: 16px;
  right: 10px;
  bottom: 10px;
}


/* === v86.2 immaculate visual pass: flatter premium Pokebowl styling only === */
:root{
  --bg1:#06111d !important;
  --bg2:#091524 !important;
  --panel:#0b1625 !important;
  --panel2:#101d31 !important;
  --card:#101b2d !important;
  --text:#f8fbff !important;
  --muted:#b7c7dd !important;
  --stroke: rgba(125, 158, 204, 0.22) !important;
  --softBorder: rgba(125, 158, 204, 0.18) !important;
  --shadow: 0 16px 36px rgba(2, 8, 20, 0.36) !important;
  --brand-purple:#b86cf9 !important;
  --brand-orange:#d76518 !important;
  --brand-green:#17b26a !important;
  --brand-yellow:#f5d02a !important;
  --brand-surface:#081422 !important;
  --brand-surface-2:#0c192b !important;
}

body{
  background:#06111d !important;
  color:var(--text) !important;
}

.signupGate{
  background:
    radial-gradient(900px 500px at 12% 0%, rgba(111, 76, 255, 0.10), transparent 55%),
    radial-gradient(900px 500px at 88% 0%, rgba(16, 185, 129, 0.08), transparent 55%),
    #06111d !important;
}

.signupShell{
  background:#0b1625 !important;
  border:1px solid rgba(125,158,204,0.22) !important;
  box-shadow:0 28px 70px rgba(2, 6, 23, 0.42) !important;
}

.topbar{
  background:#0b1625 !important;
  border:1px solid rgba(125,158,204,0.20) !important;
  box-shadow:
    0 10px 28px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
  border-radius:0 0 18px 18px !important;
}

#game .topbar{
  background:#08111d !important;
  border-color:rgba(125,158,204,0.18) !important;
}

#setup .title,
#game .title{
  display:inline-flex !important;
  align-items:center !important;
  justify-content:center !important;
  gap:10px !important;
  color:#c885ff !important;
  letter-spacing:.01em !important;
  text-shadow:none !important;
}

#setup .title::before,
#game .title::before{
  content:"" !important;
  width:30px !important;
  height:30px !important;
  display:inline-block !important;
  background:url("pokebowl-icon.png") center/contain no-repeat !important;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,0.34)) !important;
  opacity:0.95 !important;
  transform:translateY(1px) !important;
}

#setup .title{
  font-size:26px !important;
}

#game .title{
  font-size:22px !important;
}

.topbar .subhint,
#turnBanner{
  color:#d6e3f3 !important;
  text-shadow:none !important;
}

.panel,
.field,
.setup-card,
.zone,
.side,
.message,
.probCard,
.deckListCard,
.deckBuilderCard,
.pricingStatCard,
.pricingCard,
.pricingHero,
.cardLibraryItem,
.cardLibrarySummary,
.probHeaderCard,
.probToolbarCard,
.probDeckCard,
.probDropzone,
.probQuestionCard,
.probResultTheater{
  background:#0b1625 !important;
  border:1px solid rgba(125,158,204,0.20) !important;
  box-shadow:0 14px 30px rgba(2,8,20,0.28) !important;
}

.zone.compactZone,
.battleLaneBenchSlot,
.battleLaneActiveSlot,
.battleLaneMiniZone,
.deckBuilderCurrentCard,
.deckBuilderPoolCard,
.deckBuilderSection,
.deckBuilderSidebar,
.probConditionChip,
.probSeenChip,
.hudPill,
.sideEnergyStatus,
.pendingRequestBar{
  background:#0f1b2d !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  box-shadow:0 10px 22px rgba(2,8,20,0.18) !important;
}

.panelTitle,
.homeSectionTitle,
.zoneTitle,
.probSectionTitle{
  color:#f7fbff !important;
  text-shadow:none !important;
}

.homeHeroCopy,
.subhint,
.comingSoonText,
.roomReadyNote{
  color:#c4d2e5 !important;
}

.homeSection{
  border-top:1px solid rgba(125,158,204,0.15) !important;
}

.bigbtn,
.smallbtn{
  background:#0d1829 !important;
  border:1px solid rgba(125,158,204,0.22) !important;
  color:#f8fbff !important;
  box-shadow:
    0 8px 20px rgba(2,8,20,0.18),
    inset 0 1px 0 rgba(255,255,255,0.03) !important;
}

.bigbtn:hover,
.smallbtn:hover{
  filter:none !important;
  transform:translateY(-1px);
  border-color:rgba(184,108,249,0.34) !important;
}

.bigbtn.good,
.smallbtn.good,
#startGame,
#btnUploadSingleCard,
#btnNewDeck,
#pricingRunBtn{
  background:rgba(12, 64, 41, 0.94) !important;
  border-color:rgba(23,178,106,0.55) !important;
  color:#e8fff5 !important;
}

.bigbtn.purple,
.smallbtn.purple,
#btnOpenDeckEditor,
#btnOpenProbabilityLab,
#btnUploadBatchCards{
  background:rgba(56, 32, 94, 0.95) !important;
  border-color:rgba(184,108,249,0.55) !important;
  color:#f8efff !important;
}

.bigbtn.danger,
.smallbtn.danger,
#btnDeleteDeck{
  background:rgba(88, 24, 29, 0.94) !important;
  border-color:rgba(248,113,113,0.50) !important;
  color:#fff0f0 !important;
}

#endTurn.bigbtn.danger{
  background:rgba(168, 73, 22, 0.96) !important;
  border-color:rgba(255, 156, 82, 0.54) !important;
  color:#fff9f4 !important;
}

#attachEnergyZoneBtn.bigbtn.good,
#btnOpenDeckPricing.bigbtn.good,
#btnMpSetupGame.bigbtn.good{
  background:rgba(13, 77, 57, 0.95) !important;
  border-color:rgba(52, 211, 153, 0.48) !important;
}

.field input,
.field select,
#setup input[type="text"],
#setup input[type="number"],
#setup textarea,
#setup select{
  background:#091321 !important;
  color:#f8fbff !important;
  border:1px solid rgba(125,158,204,0.24) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.02) !important;
}

#setup input::placeholder,
#setup textarea::placeholder{
  color:#94a9c8 !important;
}

#setup option{
  background:#091321 !important;
  color:#f8fbff !important;
}

.homeWelcomePanel,
#setupGamePanel,
#setupDeckPanel,
#setupCardLibraryPanel,
#setupDeckPricingPanel,
#setupProbabilityPanel{
  background:#091523 !important;
}

.matchFeatureToggleCompact{
  background:#0c1728 !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.03),
    0 8px 18px rgba(15,23,42,0.16) !important;
}

.matchFeatureToggleCompact:hover{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.04),
    0 10px 20px rgba(15,23,42,0.18) !important;
}

.matchFeatureToggleCompact .matchFeatureCopy b{
  color:#f8fbff !important;
  text-shadow:none !important;
}

.matchFeatureToggleCompact .matchFeatureCopy small{
  color:#9eb0c9 !important;
}

.matchFeatureToggleCompact .matchFeatureSwitch{
  background:#334155 !important;
  box-shadow:none !important;
}

.matchFeatureToggleCompact input:checked + .matchFeatureSwitch{
  background:#b86cf9 !important;
  box-shadow:
    0 0 0 2px rgba(184,108,249,0.12),
    0 0 16px rgba(184,108,249,0.20) !important;
}

#energyTypeSetupField{
  background:#091523 !important;
  border-color:rgba(125,158,204,0.22) !important;
}

.energySetupGrid > div{
  background:#0b1625 !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  border-radius:18px !important;
  padding:14px 14px 12px !important;
  box-shadow:0 10px 24px rgba(2,8,20,0.18) !important;
}

.energyTypeChoices{
  gap:10px !important;
}

.energyTypeChoice{
  position:relative !important;
  flex:1 1 112px !important;
  min-height:54px !important;
  max-width:132px !important;
  padding:10px 12px !important;
  border-radius:16px !important;
  background:#0d1828 !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  box-shadow:0 8px 18px rgba(2,8,20,0.18) !important;
  align-items:center !important;
  justify-content:flex-start !important;
  gap:10px !important;
  transition:transform .14s ease, border-color .14s ease, box-shadow .14s ease !important;
}

.energyTypeChoice:hover{
  transform:translateY(-1px) !important;
  border-color:rgba(184,108,249,0.34) !important;
}

.energyTypeChoice input{
  position:absolute !important;
  opacity:0 !important;
  pointer-events:none !important;
}

.energyTypeChoice .energySymbol{
  width:32px !important;
  height:32px !important;
  border-radius:999px !important;
  background:#121f33 !important;
  border:1px solid rgba(255,255,255,0.08) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.03) !important;
  padding:3px !important;
}

.energyTypeChoice .energySymbol img{
  filter:drop-shadow(0 2px 3px rgba(0,0,0,.28)) !important;
}

.energyTypeChoice span{
  color:#e6eef9 !important;
  font-size:12px !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
}

.energyTypeChoice:has(input:checked){
  background:#101f35 !important;
  border-color:rgba(184,108,249,0.42) !important;
  box-shadow:
    inset 0 0 0 1px rgba(184,108,249,0.10),
    0 12px 24px rgba(2,8,20,0.22) !important;
}

.energyTypeChoice:has(input:checked)::after{
  content:"✓" !important;
  position:absolute !important;
  right:10px !important;
  top:8px !important;
  width:16px !important;
  height:16px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  border-radius:999px !important;
  background:#0c4029 !important;
  color:#e8fff5 !important;
  font-size:11px !important;
  font-weight:1000 !important;
  border:1px solid rgba(23,178,106,0.40) !important;
}

.energyTypeChoice:has(input:checked) .energySymbol{
  background:#15243a !important;
  border-color:rgba(184,108,249,0.28) !important;
}

.message{
  background:#121d32 !important;
  color:#eef5ff !important;
}

#message{
  background:#2b2359 !important;
  border-color:rgba(184,108,249,0.28) !important;
}

.side{
  background:#0a1422 !important;
  border-color:rgba(125,158,204,0.18) !important;
}

.zone{
  background:#10192a !important;
  border-color:rgba(125,158,204,0.16) !important;
}

#game .controls{
  background:transparent !important;
}

#game .bigbtn{
  min-height:56px;
}

.hudPill{
  background:#162132 !important;
  color:#f8fbff !important;
}

.sideEnergyStatus{
  background:#0d1828 !important;
}

.pendingRequestBar{
  background:#0f1b2d !important;
  color:#f8fbff !important;
}

.cardLibraryItem,
.deckRow,
.deckItem,
.pricingSearchResult,
.deckBuilderPoolCard,
.deckBuilderCurrentCard{
  background:#0c1728 !important;
  border-color:rgba(125,158,204,0.18) !important;
}

.probGauge{
  box-shadow:none !important;
}

.comingSoonBtn{
  background:#0d1828 !important;
  border-color:rgba(125,158,204,0.16) !important;
  color:#aebfd8 !important;
}

/* subtle brand polish without changing sizing-critical game pieces */
#setup .topbar,
#setupHome,
#setupGamePanel,
#setupDeckPanel,
#setupCardLibraryPanel,
#setupDeckPricingPanel,
#setupProbabilityPanel,
#roomPanel{
  position:relative;
}

#setup .topbar::after,
#setupHome::after,
#setupGamePanel::after,
#setupDeckPanel::after,
#setupCardLibraryPanel::after,
#setupDeckPricingPanel::after,
#setupProbabilityPanel::after,
#roomPanel::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,0.015);
}

@media (max-width: 900px){
  #setup .title{
    font-size:22px !important;
  }
  #setup .title::before,
  #game .title::before{
    width:24px !important;
    height:24px !important;
  }
  .energyTypeChoice{
    flex-basis:96px !important;
    max-width:none !important;
  }
}


/* === v86.1 home status/button layout polish + brand info screens === */
.homeBlurSoonBtn{
  position:relative !important;
  overflow:hidden !important;
  min-width:288px !important;
  justify-content:center !important;
}

.homeBlurSoonBtn__label{
  display:block !important;
  filter:blur(1.5px) !important;
  opacity:0.45 !important;
  transform:translateY(1px) !important;
}

.homeBlurSoonBtn__badge{
  position:absolute !important;
  inset:0 !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  text-transform:uppercase !important;
  letter-spacing:.16em !important;
  font-size:12px !important;
  font-weight:1000 !important;
  color:#f7fbff !important;
  background:rgba(7,12,20,0.16) !important;
  pointer-events:none !important;
}

.homeInfoBtn{
  min-width:240px !important;
}

.comingSoonBtnInline{
  display:flex !important;
  flex-direction:column !important;
  align-items:flex-start !important;
  justify-content:center !important;
  gap:3px !important;
  min-width:190px !important;
}

.comingSoonBtnInline span{
  font-size:16px !important;
  line-height:1.05 !important;
}

.comingSoonBtnInline small{
  font-size:11px !important;
  letter-spacing:.12em !important;
  text-transform:uppercase !important;
  color:#8ea3c0 !important;
}

.infoScreenPanel{
  background:#091523 !important;
  padding:22px !important;
}

.infoScreenHeaderRow{
  display:flex !important;
  align-items:flex-start !important;
  justify-content:space-between !important;
  gap:16px !important;
  margin-bottom:18px !important;
}

.infoHeroBlock{
  background:#0d1829 !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  border-radius:22px !important;
  padding:22px 22px 20px !important;
  box-shadow:0 14px 28px rgba(2,8,20,0.18) !important;
  margin-bottom:18px !important;
}

.infoHeroBlockTight{
  margin-bottom:16px !important;
}

.infoHeroEyebrow{
  font-size:12px !important;
  letter-spacing:.16em !important;
  text-transform:uppercase !important;
  color:#b86cf9 !important;
  font-weight:1000 !important;
  margin-bottom:10px !important;
}

.infoHeroTitle{
  font-size:30px !important;
  line-height:1.08 !important;
  font-weight:1000 !important;
  color:#f8fbff !important;
  margin-bottom:12px !important;
  max-width:900px !important;
}

.infoHeroText{
  max-width:900px !important;
  color:#c4d2e5 !important;
  font-size:16px !important;
  line-height:1.68 !important;
}

.infoGrid{
  display:grid !important;
  gap:14px !important;
  margin-bottom:18px !important;
}

.infoGridTriple{
  grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
}

.infoGridDual{
  grid-template-columns:repeat(2, minmax(0, 1fr)) !important;
}

.infoCardBlock{
  background:#0c1728 !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  border-radius:20px !important;
  padding:18px 18px 16px !important;
  box-shadow:0 10px 22px rgba(2,8,20,0.16) !important;
}

.infoCardTitle{
  color:#f8fbff !important;
  font-size:18px !important;
  font-weight:1000 !important;
  margin-bottom:10px !important;
}

.infoCardCopy{
  color:#c4d2e5 !important;
  font-size:14px !important;
  line-height:1.65 !important;
}

.infoCalloutBlock,
.infoEmailFeature{
  background:#0d1829 !important;
  border:1px solid rgba(125,158,204,0.18) !important;
  border-radius:22px !important;
  padding:20px 22px !important;
  box-shadow:0 12px 24px rgba(2,8,20,0.16) !important;
}

.infoCalloutBlock{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:16px !important;
}

.infoCalloutTitle,
.infoEmailFeatureLabel{
  color:#f8fbff !important;
  font-size:18px !important;
  font-weight:1000 !important;
  margin-bottom:8px !important;
}

.infoCalloutText,
.infoEmailFeatureNote{
  color:#c4d2e5 !important;
  font-size:14px !important;
  line-height:1.6 !important;
}

.infoSoonAction{
  min-width:280px !important;
}

.infoEmailFeatureValue{
  color:#c885ff !important;
  font-size:28px !important;
  font-weight:1000 !important;
  letter-spacing:.01em !important;
  margin-bottom:8px !important;
}

#setupSupportPanel .panelTitle,
#setupAboutPanel .panelTitle,
#setupContactPanel .panelTitle{
  margin-bottom:6px !important;
}

@media (max-width: 1080px){
  .infoGridTriple,
  .infoGridDual{
    grid-template-columns:1fr !important;
  }

  .infoCalloutBlock{
    flex-direction:column !important;
    align-items:flex-start !important;
  }

  .infoSoonAction{
    width:100% !important;
    min-width:0 !important;
  }
}



/* === auth integration polish === */
.signupBtnRow {
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:12px;
  margin-top:12px;
}
.signupBtnSecondary {
  background:rgba(255,255,255,0.08) !important;
  border:1px solid rgba(255,255,255,0.15) !important;
}
.signupBtnGhost {
  background:transparent !important;
  border:1px solid rgba(255,255,255,0.14) !important;
  color:#cfe3ff !important;
}
.signupGateStatus {
  margin-top:14px;
  font-size:13px;
  color:#b8cae6;
  text-align:center;
}
.authChrome {
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.authChrome.hidden { display:none !important; }
.authUserPill {
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.12);
  color:#e8f2ff;
  font-size:12px;
  font-weight:900;
  letter-spacing:.02em;
  white-space:nowrap;
}

/* === v89: strict auth landing + account identity polish === */
.signupGate{
  position:relative;
  min-height:100vh;
  overflow:hidden;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:36px 18px;
  isolation:isolate;
  background:
    radial-gradient(950px 620px at 18% 12%, rgba(56,189,248,.18), transparent 62%),
    radial-gradient(820px 580px at 84% 18%, rgba(249,115,22,.20), transparent 58%),
    radial-gradient(720px 520px at 50% 105%, rgba(34,197,94,.16), transparent 64%),
    linear-gradient(140deg, #050814 0%, #0b1024 46%, #111827 100%);
}
.signupGate::before{
  content:"";
  position:absolute;
  inset:-2px;
  z-index:-2;
  opacity:.24;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:radial-gradient(circle at center, black 0%, transparent 78%);
}
.signupBackdrop{
  position:absolute;
  z-index:-1;
  width:360px;
  height:360px;
  border-radius:999px;
  filter:blur(5px);
  opacity:.34;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 90px rgba(56,189,248,.16);
}
.signupBackdropOne{ left:max(-120px, -8vw); top:10%; background:radial-gradient(circle, rgba(56,189,248,.22), transparent 66%); }
.signupBackdropTwo{ right:max(-150px, -10vw); bottom:8%; background:radial-gradient(circle, rgba(249,115,22,.20), transparent 68%); }
.signupShell{
  width:min(1040px, 100%);
  padding:46px clamp(20px, 5vw, 58px);
  border-radius:34px;
  border:1px solid rgba(255,255,255,.18);
  background:
    linear-gradient(180deg, rgba(255,255,255,.105), rgba(255,255,255,.045)),
    rgba(8,13,31,.76);
  box-shadow:
    0 34px 90px rgba(0,0,0,.52),
    inset 0 1px 0 rgba(255,255,255,.14);
  backdrop-filter: blur(22px);
  text-align:center;
}
.signupBrandLockup{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:18px;
  margin-bottom:22px;
}
.signupLogoRing{
  position:relative;
  width:118px;
  height:118px;
  border-radius:32px;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 35% 20%, rgba(255,255,255,.22), transparent 34%),
    linear-gradient(145deg, rgba(15,23,42,.92), rgba(2,6,23,.78));
  border:1px solid rgba(255,255,255,.18);
  box-shadow:0 26px 60px rgba(0,0,0,.42), 0 0 42px rgba(56,189,248,.10);
}
.signupLogoRing::after{
  content:"";
  position:absolute;
  inset:-7px;
  border-radius:38px;
  border:1px solid rgba(255,255,255,.10);
  pointer-events:none;
}
.signupLogo{
  width:88px;
  height:88px;
  object-fit:contain;
  filter:drop-shadow(0 18px 24px rgba(0,0,0,.38));
}
.signupBrandText{ text-align:left; }
.signupBadge{
  margin:0 0 9px;
  padding:8px 12px;
  background:rgba(56,189,248,.13);
  border:1px solid rgba(125,211,252,.22);
  color:#e0f2fe;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.signupBrandName{
  color:#fff7ed;
  font-weight:1000;
  letter-spacing:-.06em;
  font-size:clamp(38px, 5vw, 72px);
  line-height:.86;
  text-shadow:0 18px 34px rgba(0,0,0,.38);
}
.signupTitle{
  margin:0 auto;
  max-width:900px;
  font-size:clamp(34px, 5.2vw, 72px);
  letter-spacing:-.055em;
  line-height:.96;
  color:#f8fbff;
  text-shadow:0 10px 38px rgba(0,0,0,.38);
}
.signupCopy{
  width:min(760px, 100%);
  margin:20px auto 0;
  color:#dbeafe;
  font-size:clamp(16px, 2vw, 20px);
  line-height:1.68;
  font-weight:800;
}
.signupFeatureRail{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:10px;
  margin:24px auto 2px;
}
.signupFeatureRail span{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:36px;
  padding:0 14px;
  border-radius:999px;
  color:#f8fbff;
  font-weight:950;
  font-size:12px;
  letter-spacing:.03em;
  background:rgba(255,255,255,.075);
  border:1px solid rgba(255,255,255,.13);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.signupBtnRow{ margin-top:26px; gap:14px; }
.signupBtn{
  min-width:178px;
  margin-top:0;
  border-radius:18px;
  padding:17px 24px;
  color:#fff;
  background:linear-gradient(135deg, rgba(249,115,22,.98), rgba(234,88,12,.94)) !important;
  border:1px solid rgba(255,237,213,.30) !important;
  box-shadow:0 18px 45px rgba(249,115,22,.28), inset 0 1px 0 rgba(255,255,255,.16);
}
.signupBtnSecondary{
  background:linear-gradient(135deg, rgba(14,165,233,.30), rgba(30,64,175,.32)) !important;
  border:1px solid rgba(186,230,253,.24) !important;
  box-shadow:0 18px 45px rgba(14,165,233,.16), inset 0 1px 0 rgba(255,255,255,.13);
}
.signupBtnGhost{
  background:rgba(255,255,255,.055) !important;
  border:1px solid rgba(255,255,255,.16) !important;
  color:#dbeafe !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.signupBtn:hover{ transform:translateY(-2px); filter:brightness(1.06); }
.signupGateStatus{
  margin-top:16px;
  color:#cbd5e1;
  font-weight:800;
}
.topbarBrand{
  display:flex;
  align-items:center;
  gap:14px;
  min-width:0;
}
.topbarLogo{
  width:54px;
  height:54px;
  object-fit:contain;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:0 16px 34px rgba(0,0,0,.24);
  padding:6px;
}
.homeAuthCard{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin:10px 0 14px;
  padding:16px;
  border-radius:18px;
  background:linear-gradient(135deg, rgba(56,189,248,.10), rgba(255,255,255,.045));
  border:1px solid rgba(255,255,255,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.homeAuthLabel{
  color:#93c5fd;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.09em;
  text-transform:uppercase;
  margin-bottom:4px;
}
.homeAuthIdentity{
  color:#f8fbff;
  font-size:18px;
  font-weight:1000;
  overflow-wrap:anywhere;
}
.homeLogoutBtn{
  min-width:140px;
}
.authUserPill{
  background:rgba(34,197,94,.10);
  border-color:rgba(134,239,172,.20);
  color:#ecfdf5;
  max-width:min(520px, 52vw);
  overflow:hidden;
  text-overflow:ellipsis;
}
@media (max-width: 760px){
  .signupBrandLockup{ flex-direction:column; gap:14px; }
  .signupBrandText{ text-align:center; }
  .signupLogoRing{ width:102px; height:102px; border-radius:28px; }
  .signupLogo{ width:78px; height:78px; }
  .signupBtn{ width:100%; }
  .homeAuthCard{ align-items:stretch; flex-direction:column; }
  .homeLogoutBtn{ width:100%; }
  .topbarBrand{ align-items:flex-start; }
  .topbarLogo{ width:46px; height:46px; }
}

/* === v107: keep auth controls in the top bar only, not as a large account banner === */
#setup > .topbar{
  flex-direction:row;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}
#setup > .topbar .authChrome{
  margin-left:auto;
  flex:0 0 auto;
}
#setup > .topbar .authUserPill{
  max-width:min(280px, 30vw);
}
@media (max-width: 760px){
  #setup > .topbar{
    flex-direction:column;
    align-items:stretch;
  }
  #setup > .topbar .authChrome{
    justify-content:space-between;
    width:100%;
    margin-left:0;
  }
  #setup > .topbar .authUserPill{
    max-width:calc(100vw - 170px);
  }
}

/* === v108 UI QA polish === */
#setup .topbarLogo{
  display:none !important;
}
#setup .topbarBrand{
  gap:0 !important;
}
.cardLibraryFullScreenCard{
  appearance:none;
  -webkit-appearance:none;
  border:0;
  padding:0;
  cursor:zoom-in;
  display:block;
}
.cardLibraryFullScreenCard:hover{
  filter:brightness(1.08);
  transform:translateY(-2px);
}
#btnOpenDeckPricing:disabled,
#btnOpenDeckPricing[aria-disabled="true"]{
  opacity:.45 !important;
  filter:grayscale(.35) !important;
  cursor:not-allowed !important;
  pointer-events:none !important;
}
#setupProbabilityPanel .probTopActions #btnBackHomeFromProb{
  background:rgba(255,255,255,.055) !important;
  border-color:rgba(255,255,255,.16) !important;
  color:#dbeafe !important;
}


/* ======================================================
   v109 QA polish: wider probability HUD + cleaner battle drag
   ====================================================== */
#setupProbabilityPanel .probTopBarArena{
  grid-template-columns:minmax(290px, max-content) minmax(760px, 1fr) auto!important;
  align-items:center!important;
}
#setupProbabilityPanel .probTopHud{
  grid-template-columns:minmax(320px, .95fr) minmax(500px, 1.45fr) minmax(320px, .95fr)!important;
  min-width:0!important;
}
#setupProbabilityPanel .probTopBreakdown,
#setupProbabilityPanel .probTopDeckPoolSummary,
#setupProbabilityPanel .probTopHistory{
  max-width:none!important;
  min-width:0!important;
  overflow:hidden!important;
}
#setupProbabilityPanel .probTopHudGrid{
  grid-template-columns:repeat(5, max-content)!important;
  justify-content:start!important;
  gap:16px!important;
}
#setupProbabilityPanel .probTopBreakdown .probTopHudGrid{
  grid-template-columns:repeat(3, max-content)!important;
}
@media (max-width:1350px){
  #setupProbabilityPanel .probTopBarArena{
    grid-template-columns:1fr!important;
  }
  #setupProbabilityPanel .probTopHud{
    grid-template-columns:1fr!important;
  }
  #setupProbabilityPanel .probTopActions{
    justify-content:flex-end!important;
  }
}
.battleDragGhostV53{
  opacity:0;
  transition:opacity 120ms ease, transform 40ms linear!important;
}
#battleDragActionDockV53,
.battleDragActionDockV53{
  display:none!important;
  pointer-events:none!important;
}


/* ======================================================
   v110 QA polish: true disabled controls + no drag ghost flash
   ====================================================== */
#game .gameControls .bigbtn:disabled,
#game .gameControls .smallbtn:disabled,
#game .gameControls .bigbtn[aria-disabled="true"],
#game .gameControls .smallbtn[aria-disabled="true"],
#randomToHandBtn.turnLocked{
  opacity:0.34!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  transform:none!important;
  filter:grayscale(.35) brightness(.72)!important;
  background:rgba(25,35,52,.82)!important;
  border-color:rgba(125,158,204,.18)!important;
  color:rgba(235,244,255,.58)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
#game .gameControls .bigbtn:disabled:hover,
#game .gameControls .smallbtn:disabled:hover,
#game .gameControls .bigbtn[aria-disabled="true"]:hover,
#game .gameControls .smallbtn[aria-disabled="true"]:hover,
#randomToHandBtn.turnLocked:hover{
  transform:none!important;
  border-color:rgba(125,158,204,.18)!important;
  filter:grayscale(.35) brightness(.72)!important;
}
.battleDragGhostV53{
  backface-visibility:hidden!important;
  transform-origin:center center!important;
  contain:layout paint style!important;
}
.battleDragGhostV53--drop,
.battleDragGhostV53--return{
  opacity:0!important;
  transform:var(--battle-drag-final-transform, translate3d(-9999px, -9999px, 0))!important;
  transition:opacity 150ms ease!important;
}

/* ======================================================
   v111 QA polish: first-turn setup, energy indicator, button color mapping
   ====================================================== */
.bigbtn.warm,
.smallbtn.warm{
  background:rgba(168, 92, 38, 0.94)!important;
  border-color:rgba(245, 158, 93, 0.54)!important;
  color:#fff8ef!important;
}

/* Battle top bar color semantics */
#drawCard.bigbtn,
#attachEnergyZoneBtn.bigbtn,
#takePrize.bigbtn{
  background:rgba(12, 64, 41, 0.94)!important;
  border-color:rgba(23,178,106,0.55)!important;
  color:#e8fff5!important;
}
#shuffleDeck.bigbtn,
#handToDeckBtn.bigbtn,
#inspectDisruptBtn.bigbtn,
#flipCoin.bigbtn,
#randomSpotBtn.bigbtn{
  background:rgba(56, 32, 94, 0.95)!important;
  border-color:rgba(184,108,249,0.55)!important;
  color:#f8efff!important;
}
#attackBtn.bigbtn,
#endTurn.bigbtn{
  background:rgba(168, 92, 38, 0.94)!important;
  border-color:rgba(245, 158, 93, 0.54)!important;
  color:#fff8ef!important;
}
#undoBtn.bigbtn,
#gameLogBtn.bigbtn{
  background:rgba(255, 255, 255, 0.08)!important;
  border-color:var(--stroke)!important;
  color:var(--text)!important;
}
#backToSetup.bigbtn{
  background:rgba(88, 24, 29, 0.94)!important;
  border-color:rgba(248,113,113,0.50)!important;
  color:#fff0f0!important;
}

/* Landing/home color semantics */
#btnOpenDeckEditor.bigbtn,
#btnOpenAbout.bigbtn,
#mpCreateRoomBtn.bigbtn,
#mpSetupGameBtn.bigbtn{
  background:rgba(12, 64, 41, 0.94)!important;
  border-color:rgba(23,178,106,0.55)!important;
  color:#e8fff5!important;
}
#btnOpenProbabilityLab.bigbtn,
#mpJoinRoomBtn.bigbtn{
  background:rgba(56, 32, 94, 0.95)!important;
  border-color:rgba(184,108,249,0.55)!important;
  color:#f8efff!important;
}
#btnOpenCardLibrary.bigbtn,
#btnOpenContact.bigbtn{
  background:rgba(255, 255, 255, 0.08)!important;
  border-color:var(--stroke)!important;
  color:var(--text)!important;
}
#btnOpenSupport.bigbtn{
  background:rgba(168, 92, 38, 0.94)!important;
  border-color:rgba(245, 158, 93, 0.54)!important;
  color:#fff8ef!important;
}
#mpLeaveRoomBtn.bigbtn{
  background:rgba(88, 24, 29, 0.94)!important;
  border-color:rgba(248,113,113,0.50)!important;
  color:#fff0f0!important;
}

#firstTurnSetupField select{
  min-width:220px;
}

/* ======================================================
   v112 QA polish: durable turn locks, no drag flash, Stadium stacks
   ====================================================== */
#game .gameControls button.battleControlLocked,
#game .gameControls button.turnLocked,
#game .gameControls button:disabled,
#game .gameControls button[aria-disabled="true"],
#randomToHandBtn.battleControlLocked,
#randomToHandBtn.turnLocked,
#randomToHandBtn:disabled,
#randomToHandBtn[aria-disabled="true"]{
  opacity:0.34!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  transform:none!important;
  filter:grayscale(.35) brightness(.72)!important;
  background:rgba(25,35,52,.82)!important;
  border-color:rgba(125,158,204,.18)!important;
  color:rgba(235,244,255,.58)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
#game .gameControls button.battleControlLocked:hover,
#game .gameControls button.turnLocked:hover,
#game .gameControls button:disabled:hover,
#game .gameControls button[aria-disabled="true"]:hover{
  transform:none!important;
  filter:grayscale(.35) brightness(.72)!important;
}
.battleDragGhostV53{
  left:-100000px;
  top:-100000px;
  visibility:hidden;
  opacity:0;
  transform:translate3d(-100000px, -100000px, 0);
  user-select:none!important;
  -webkit-user-select:none!important;
  -webkit-user-drag:none!important;
}
.battleDragGhostV53--visible{
  visibility:visible!important;
}
.battleDragGhostV53--preflight{
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.stadiumStackWrap{
  position:relative;
  isolation:isolate;
}
.stadiumStackWrap[data-stadium-stack-count]:not([data-stadium-stack-count="1"]) .stadiumCard{
  box-shadow:0 14px 32px rgba(0,0,0,.42), 7px 7px 0 rgba(79,70,229,.35), 14px 14px 0 rgba(14,165,233,.18);
}
.stadiumStackRibbon{
  position:absolute;
  right:-10px;
  bottom:-11px;
  display:flex;
  align-items:center;
  gap:3px;
  padding:4px 7px;
  border-radius:999px;
  background:linear-gradient(135deg, rgba(17,24,39,.96), rgba(49,46,129,.92));
  border:1px solid rgba(148,163,184,.35);
  box-shadow:0 10px 24px rgba(0,0,0,.35);
  z-index:5;
}
.stadiumStackThumb{
  width:18px;
  height:25px;
  border-radius:4px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.28);
  transform:translateX(calc(var(--i) * -4px));
  background:rgba(15,23,42,.92);
}
.stadiumStackThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.stadiumStackRibbon b{
  margin-left:-4px;
  color:#f8fafc;
  font-size:11px;
  font-weight:1000;
  letter-spacing:.04em;
}
.stadiumActionStack{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:4px 0 12px;
}
.stadiumActionStackGrid{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  align-items:flex-start;
}
.stadiumActionThumb{
  position:relative;
  width:72px;
  height:102px;
  padding:0;
  border-radius:10px;
  border:1px solid rgba(148,163,184,.36);
  background:rgba(15,23,42,.85);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
  overflow:hidden;
  cursor:pointer;
}
.stadiumActionThumb img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.stadiumActionThumb span{
  position:absolute;
  left:6px;
  bottom:6px;
  padding:2px 6px;
  border-radius:999px;
  background:rgba(2,6,23,.84);
  color:#fff7ed;
  font-size:10px;
  font-weight:1000;
  letter-spacing:.05em;
}
.stadiumActionThumb--top{
  border-color:rgba(96,165,250,.9);
  box-shadow:0 0 0 2px rgba(59,130,246,.22), 0 12px 26px rgba(0,0,0,.3);
}

/* ======================================================
   v113 QA polish: private random chooser, hard turn lock,
   no drag-edge flash, richer Stadium stack viewing
   ====================================================== */
body.battleTurnLockedV113 #game .controls.gameControls #randomToHandBtn,
body.battleTurnLockedV113 #game .controls.gameControls #randomToHandBtn.bigbtn,
#game .controls.gameControls #randomToHandBtn:disabled,
#game .controls.gameControls #randomToHandBtn[aria-disabled="true"],
#game .controls.gameControls #randomToHandBtn.turnLocked,
#game .controls.gameControls #randomToHandBtn.battleControlLocked{
  opacity:0.34!important;
  cursor:not-allowed!important;
  pointer-events:none!important;
  transform:none!important;
  filter:grayscale(.35) brightness(.72)!important;
  background:rgba(25,35,52,.82)!important;
  border-color:rgba(125,158,204,.18)!important;
  color:rgba(235,244,255,.58)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.03)!important;
}
body.battleTurnLockedV113 #game .controls.gameControls #randomToHandBtn:hover,
#game .controls.gameControls #randomToHandBtn:disabled:hover,
#game .controls.gameControls #randomToHandBtn[aria-disabled="true"]:hover,
#game .controls.gameControls #randomToHandBtn.turnLocked:hover,
#game .controls.gameControls #randomToHandBtn.battleControlLocked:hover{
  transform:none!important;
  filter:grayscale(.35) brightness(.72)!important;
}
.battleDragGhostV53,
.battleDragGhostV53 img{
  -webkit-user-drag:none!important;
  user-select:none!important;
}
.battleDragGhostV53:not(.battleDragGhostV53--visible),
.battleDragGhostV53--preflight{
  display:none!important;
  visibility:hidden!important;
  opacity:0!important;
  pointer-events:none!important;
}
.stadiumHeroButton{
  padding:0!important;
  border:0!important;
  cursor:pointer!important;
  background:transparent!important;
}
.stadiumActionThumb--selected{
  border-color:rgba(34,197,94,.95)!important;
  box-shadow:0 0 0 2px rgba(34,197,94,.26), 0 14px 28px rgba(0,0,0,.35)!important;
}
.stadiumInspectShell .stadiumActionStack{
  margin-top:12px;
}


/* v114 QA polish: deck-card zoom buttons and simplified Stadium stack viewer */
.viewerCardButton{
  padding:0!important;
  border:1px solid rgba(148,163,184,.28)!important;
  background:rgba(15,23,42,.72)!important;
  cursor:pointer!important;
  appearance:none!important;
  -webkit-appearance:none!important;
}
.viewerCardButton:hover{
  transform:translateY(-2px) scale(1.015);
  box-shadow:0 18px 34px rgba(0,0,0,.38), 0 0 0 2px rgba(96,165,250,.28);
}
.stadiumInspectShell--direct .cardViewSidePanel{
  justify-content:center;
}
.stadiumActionStackGrid--large{
  justify-content:center;
  gap:14px;
  padding:8px 0 4px;
}
.stadiumActionStackGrid--large .stadiumActionThumb{
  width:92px;
  height:130px;
}

/* v117: Stadium stack viewer now reuses the Evolution Stack inspection layout. */
.stadiumStackCommandModal .modalActions::before{
  content:"STADIUM  COMMAND" !important;
  color:#cfc2ff !important;
  text-shadow:0 0 22px rgba(168,140,255,.70) !important;
}
.stadiumStackCommandCard--selected::after{
  content:"SELECTED";
  position:absolute;
  top:8px;
  right:14px;
  color:#86f4ff;
  font-size:9px;
  font-weight:1000;
  letter-spacing:.14em;
  text-transform:uppercase;
  opacity:.92;
}

/* ======================================================
   v118 QA: right-side battle chat + stable deck-search return
   ====================================================== */
#game .battleMainLayout{
  width:100%;
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:12px;
  align-items:stretch;
}
#game .battleMainLayout.chatOpen{
  grid-template-columns:minmax(0,1fr) minmax(280px,340px);
  align-items:start;
}
#game .battleMainLayout.chatOpen #battleBoard{
  min-width:0;
}
#game .battleChatPanel.hidden{
  display:none!important;
}
#game .battleChatPanel{
  min-width:0;
  min-height:0;
  max-height:calc(100vh - 230px);
  position:sticky;
  top:10px;
  align-self:start;
  display:flex;
  flex-direction:column;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(148,163,184,.24);
  background:linear-gradient(180deg, rgba(9,16,29,.98), rgba(8,13,23,.96));
  box-shadow:0 22px 60px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.06);
}
#game .battleChatHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 14px 12px;
  border-bottom:1px solid rgba(148,163,184,.18);
  background:rgba(15,23,42,.72);
}
#game .battleChatKicker{
  color:#93c5fd;
  font-size:11px;
  line-height:1;
  text-transform:uppercase;
  letter-spacing:.12em;
  font-weight:950;
}
#game .battleChatTitle{
  margin-top:4px;
  color:#eff6ff;
  font-weight:950;
  font-size:16px;
}
#game .battleChatCloseBtn{
  width:34px;
  height:34px;
  border-radius:12px;
  border:1px solid rgba(248,113,113,.42);
  background:rgba(127,29,29,.72);
  color:#fff1f2;
  font-size:22px;
  font-weight:950;
  cursor:pointer;
  display:grid;
  place-items:center;
}
#game .battleChatCloseBtn:hover{
  transform:translateY(-1px);
  border-color:rgba(252,165,165,.72);
}
#game .battleChatMessages{
  flex:1;
  min-height:0;
  overflow-y:auto;
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
  scrollbar-color:rgba(147,197,253,.55) rgba(15,23,42,.55);
}
#game .battleChatEmpty{
  margin:auto;
  max-width:240px;
  text-align:center;
  color:rgba(226,232,240,.68);
  font-weight:800;
  line-height:1.45;
}
#game .battleChatMessage{
  max-width:92%;
  padding:10px 11px;
  border-radius:16px;
  border:1px solid rgba(148,163,184,.18);
  background:rgba(30,41,59,.82);
  box-shadow:0 10px 24px rgba(0,0,0,.18);
}
#game .battleChatMessageMine{
  align-self:flex-end;
  background:rgba(30,64,175,.66);
  border-color:rgba(96,165,250,.35);
}
#game .battleChatMessageOther{
  align-self:flex-start;
  background:rgba(15,23,42,.88);
}
#game .battleChatMessageSystem{
  align-self:center;
  max-width:96%;
  text-align:center;
  background:rgba(71,85,105,.34);
  border-style:dashed;
}
#game .battleChatMeta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  margin-bottom:5px;
  color:rgba(191,219,254,.9);
  font-size:11px;
  font-weight:950;
}
#game .battleChatMeta time{
  color:rgba(226,232,240,.55);
  font-weight:850;
  white-space:nowrap;
}
#game .battleChatBubbleText{
  color:#f8fafc;
  font-weight:800;
  line-height:1.35;
  overflow-wrap:anywhere;
}
#game .battleChatForm{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:8px;
  padding:12px;
  border-top:1px solid rgba(148,163,184,.18);
  background:rgba(2,6,23,.42);
}
#game .battleChatInput{
  width:100%;
  min-width:0;
  border-radius:14px;
  border:1px solid rgba(148,163,184,.28);
  background:rgba(15,23,42,.94);
  color:#f8fafc;
  padding:11px 12px;
  font-weight:850;
  outline:none;
}
#game .battleChatInput:focus{
  border-color:rgba(96,165,250,.72);
  box-shadow:0 0 0 3px rgba(59,130,246,.18);
}
#game .battleChatSendBtn{
  border-radius:14px;
  border:1px solid rgba(34,197,94,.46);
  background:rgba(12,64,41,.94);
  color:#e8fff5;
  padding:0 14px;
  font-weight:950;
  cursor:pointer;
}
#game .chatToggleBtn.chatToggleActive,
#game .chatToggleBtn.chatToggleUnread{
  background:rgba(14,74,112,.95)!important;
  border-color:rgba(56,189,248,.62)!important;
  color:#ecfeff!important;
}
#game .chatToggleBtn.chatPulse{
  animation:battleChatPulseV118 .85s ease;
}
@keyframes battleChatPulseV118{
  0%,100%{ transform:translateY(0) scale(1); }
  38%{ transform:translateY(-2px) scale(1.035); box-shadow:0 0 0 5px rgba(56,189,248,.15); }
}
@media (max-width:1280px){
  #game .battleMainLayout.chatOpen{
    grid-template-columns:minmax(0,1fr) minmax(260px,310px);
  }
}
@media (max-width:1080px){
  #game .battleMainLayout.chatOpen{
    grid-template-columns:1fr;
  }
  #game .battleChatPanel{
    position:relative;
    top:auto;
    max-height:460px;
  }
}

/* v121: room browser / host-note / join-request lobby UI */
#roomPanel .roomLobbyActionRow{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  align-items:center;
  margin-top:10px;
}
#roomPanel .roomCompactBtn{
  min-height:42px;
  padding:9px 12px;
  font-size:12px;
  line-height:1;
  letter-spacing:.03em;
  border-radius:14px;
  white-space:nowrap;
  flex:0 1 auto;
}
#roomPanel .roomRequestsHasCount{
  box-shadow:0 0 0 1px rgba(96,165,250,.55), 0 0 18px rgba(96,165,250,.24);
}
.roomLobbyOverlay{
  position:fixed;
  inset:0;
  z-index:100050;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px;
  background:rgba(2,6,23,.58);
  backdrop-filter:blur(12px);
}
.roomLobbyOverlay.hidden{display:none!important;}
.roomLobbyModal{
  width:min(720px, calc(100vw - 28px));
  max-height:min(82vh, 760px);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(148,163,184,.26);
  border-radius:24px;
  background:linear-gradient(180deg, rgba(30,41,59,.98), rgba(8,15,28,.98));
  box-shadow:0 26px 80px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.07);
  color:#f8fbff;
}
.roomBrowserModal{width:min(860px, calc(100vw - 28px));}
.roomJoinRequestModal,.roomHostNoteModal{width:min(560px, calc(100vw - 28px));}
.roomHostRequestsModal{width:min(620px, calc(100vw - 28px));}
.roomLobbyHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  padding:16px 18px;
  border-bottom:1px solid rgba(148,163,184,.22);
}
.roomLobbyKicker{
  font-size:12px;
  line-height:1;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#93c5fd;
}
.roomLobbyTitle{
  margin-top:6px;
  font-size:20px;
  font-weight:1000;
}
.roomLobbyCloseBtn{
  width:42px;
  height:42px;
  border:1px solid rgba(248,113,113,.72);
  border-radius:15px;
  background:linear-gradient(180deg, rgba(127,29,29,.92), rgba(127,29,29,.72));
  color:#fff;
  font-size:28px;
  font-weight:1000;
  cursor:pointer;
}
.roomLobbyCloseBtn:hover{filter:brightness(1.08); transform:translateY(-1px);}
.roomBrowserTools{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:10px;
  padding:14px 16px 12px;
  border-bottom:1px solid rgba(148,163,184,.14);
}
.roomBrowserSearch,
.roomMessageField textarea{
  width:100%;
  border:1px solid rgba(96,165,250,.4);
  border-radius:16px;
  background:rgba(15,23,42,.78);
  color:#f8fbff;
  font-weight:850;
  outline:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}
.roomBrowserSearch{padding:13px 14px; min-height:44px;}
.roomBrowserSearch:focus,
.roomMessageField textarea:focus{border-color:#60a5fa; box-shadow:0 0 0 3px rgba(96,165,250,.24);}
.roomBrowserResults,
.roomHostRequestsList{
  padding:14px 16px 16px;
  overflow:auto;
  display:grid;
  gap:12px;
}
.roomBrowserCard,
.roomHostRequestCard{
  border:1px solid rgba(148,163,184,.22);
  border-radius:20px;
  background:linear-gradient(180deg, rgba(15,23,42,.95), rgba(15,23,42,.78));
  padding:14px;
  box-shadow:0 12px 30px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.04);
}
.roomBrowserCardTop,
.roomHostRequestTop,
.roomCardFooter{
  display:flex;
  justify-content:space-between;
  gap:12px;
  align-items:center;
}
.roomCardKicker{
  font-size:11px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:#93c5fd;
}
.roomCardHost{
  margin-top:4px;
  font-size:18px;
  font-weight:1000;
  color:#fff;
}
.roomCardStatus{
  border:1px solid rgba(148,163,184,.3);
  border-radius:999px;
  padding:7px 10px;
  font-size:11px;
  font-weight:1000;
  text-transform:uppercase;
  color:#cbd5e1;
  background:rgba(15,23,42,.76);
  white-space:nowrap;
}
.roomCardStatus.open{
  color:#bbf7d0;
  border-color:rgba(34,197,94,.5);
  background:rgba(22,101,52,.34);
}
.roomCardMessage{
  margin-top:10px;
  color:#e2e8f0;
  font-weight:850;
  line-height:1.35;
  overflow-wrap:anywhere;
}
.roomCardMessage.muted,
.roomBrowserEmpty,
.roomTinyHint{color:#94a3b8;}
.roomCardDetails{
  margin-top:10px;
  color:#bfdbfe;
  font-size:12px;
  font-weight:900;
  line-height:1.45;
}
.roomCardFooter{
  margin-top:12px;
  align-items:flex-end;
  color:#9ca3af;
  font-size:12px;
  font-weight:800;
}
.roomCardActions{
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:flex-end;
  flex-wrap:wrap;
}
.roomMiniBtn{
  border:1px solid rgba(148,163,184,.3);
  border-radius:12px;
  background:rgba(30,41,59,.92);
  color:#f8fbff;
  padding:9px 11px;
  font-size:12px;
  font-weight:1000;
  cursor:pointer;
}
.roomMiniBtn.good{border-color:rgba(34,197,94,.48); background:linear-gradient(180deg, rgba(21,128,61,.95), rgba(20,83,45,.9));}
.roomMiniBtn.danger{border-color:rgba(248,113,113,.55); background:linear-gradient(180deg, rgba(127,29,29,.95), rgba(88,28,28,.9));}
.roomMiniBtn:disabled{opacity:.58; cursor:not-allowed; filter:saturate(.75);}
.roomBrowserEmpty{
  border:1px dashed rgba(148,163,184,.24);
  border-radius:18px;
  padding:20px;
  text-align:center;
  font-weight:900;
}
.dangerText{color:#fecaca!important; border-color:rgba(248,113,113,.3)!important;}
.roomMyRequests{
  display:grid;
  gap:8px;
  padding:12px 16px 0;
}
.roomMyRequestPill{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  border:1px solid rgba(96,165,250,.28);
  border-radius:16px;
  padding:9px 10px;
  background:rgba(30,41,59,.74);
  color:#dbeafe;
  font-size:12px;
  font-weight:900;
}
.roomMyRequestPill.accepted{
  border-color:rgba(34,197,94,.45);
  background:rgba(20,83,45,.34);
}
.roomRequestSummary{
  margin:14px 16px 0;
  border:1px solid rgba(96,165,250,.22);
  border-radius:18px;
  padding:12px;
  display:grid;
  gap:6px;
  background:rgba(15,23,42,.64);
}
.roomRequestSummary strong{font-size:18px;}
.roomRequestSummary span,.roomRequestSummary small{color:#bfdbfe; font-weight:900;}
.roomRequestSummary em{color:#e2e8f0; font-style:normal; font-weight:850;}
.roomMessageField{
  padding:14px 16px 0;
  gap:8px;
  color:#bfdbfe;
  font-weight:1000;
}
.roomMessageField textarea{
  resize:vertical;
  min-height:96px;
  max-height:190px;
  padding:12px 13px;
  line-height:1.35;
}
.roomListedToggle{
  margin:14px 16px 0;
  display:flex;
  align-items:center;
  gap:10px;
  color:#dbeafe;
  font-weight:950;
}
.roomListedToggle input{width:18px; height:18px; accent-color:#22c55e;}
.roomTinyHint{padding:10px 16px 0; font-size:12px; font-weight:800;}
.roomLobbyActions{
  padding:14px 16px 16px;
  display:flex;
  justify-content:flex-end;
  gap:10px;
  flex-wrap:wrap;
}
.roomLobbyActions.compact{padding:10px 0 0;}
.roomHostRequestTop strong{font-size:17px; color:#fff;}
.roomHostRequestTop span{font-size:12px; color:#93c5fd; font-weight:900;}
@media (max-width:760px){
  .roomLobbyOverlay{padding:12px; align-items:stretch;}
  .roomLobbyModal{max-height:calc(100vh - 24px);}
  .roomBrowserTools{grid-template-columns:1fr;}
  .roomCardFooter,.roomBrowserCardTop{align-items:flex-start; flex-direction:column;}
  .roomCardActions{justify-content:flex-start;}
}

/* v124 — Deck Consistency Lab hydration status and guaranteed deck-card placeholders */
.probDeckHydrationBadge{
  margin-top:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:6px;
  max-width:100%;
  padding:5px 9px;
  border-radius:999px;
  border:1px solid rgba(118,239,255,.28);
  background:rgba(49,176,255,.12);
  color:#cdefff;
  font-size:10px;
  font-weight:900;
  letter-spacing:.02em;
  text-transform:uppercase;
}
.probDeckHydrationBadge::before{
  content:"";
  width:7px;
  height:7px;
  border-radius:999px;
  background:#76efff;
  box-shadow:0 0 10px rgba(118,239,255,.7);
}
.probDeckHydrationBadge.isReady{
  border-color:rgba(96,255,174,.26);
  background:rgba(72,255,172,.08);
  color:#c8ffe7;
}
.probDeckHydrationBadge.isReady::before{
  background:#7fffc1;
  box-shadow:0 0 10px rgba(127,255,193,.55);
}
.probDeckRow.isResolvingCard{
  outline:1px solid rgba(118,239,255,.16);
}
.probNoImg.isLoading{
  color:#d7ecff!important;
  background:linear-gradient(135deg,rgba(31,55,88,.95),rgba(11,24,44,.95))!important;
  border-color:rgba(118,239,255,.25)!important;
  font-size:34px!important;
  animation:probDeckImagePulse 1.15s ease-in-out infinite;
}
@keyframes probDeckImagePulse{
  0%,100%{opacity:.68;transform:scale(.985)}
  50%{opacity:1;transform:scale(1)}
}

/* === v127 empty-library onboarding for user-owned card imports === */
.emptyCardLibraryOnboarding{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(120px,170px) minmax(0,1fr);
  gap:22px;
  align-items:center;
  padding:22px;
  border-radius:24px;
  background:
    radial-gradient(circle at 20% 10%, rgba(184,108,249,.18), transparent 34%),
    radial-gradient(circle at 90% 10%, rgba(34,211,238,.12), transparent 32%),
    linear-gradient(135deg, rgba(13,24,41,.98), rgba(8,15,27,.98)) !important;
  border:1px solid rgba(184,108,249,.30) !important;
  box-shadow:0 22px 56px rgba(2,8,20,.38), inset 0 1px 0 rgba(255,255,255,.04) !important;
}
.emptyCardLibraryOnboarding::after{
  content:"";
  position:absolute;
  inset:auto -80px -120px auto;
  width:260px;
  height:260px;
  border-radius:999px;
  background:rgba(34,211,238,.08);
  pointer-events:none;
}
.emptyCardLibraryOnboardingCompact{
  margin:4px 0 2px;
  grid-template-columns:minmax(100px,140px) minmax(0,1fr);
  padding:18px;
}
.emptyCardLibraryArt{
  position:relative;
  min-height:150px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.emptyCardLibraryOnboardingCompact .emptyCardLibraryArt{
  min-height:128px;
}
.emptyCardStack{
  position:absolute;
  width:78px;
  height:108px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,.22);
  box-shadow:0 14px 34px rgba(2,8,20,.38), inset 0 1px 0 rgba(255,255,255,.07);
}
.emptyCardStackBack{
  transform:rotate(-13deg) translate(-20px, 8px);
  background:linear-gradient(135deg, rgba(15,118,110,.42), rgba(30,41,59,.84));
}
.emptyCardStackMid{
  transform:rotate(8deg) translate(18px, 5px);
  background:linear-gradient(135deg, rgba(124,58,237,.42), rgba(30,41,59,.86));
}
.emptyCardStackFront{
  transform:translateY(-6px);
  background:linear-gradient(145deg, rgba(15,23,42,.96), rgba(56,32,94,.92));
  display:flex;
  align-items:center;
  justify-content:center;
  color:#f8efff;
  font-size:44px;
  font-weight:1000;
  text-shadow:0 10px 26px rgba(184,108,249,.45);
}
.emptyCardLibraryCopy{
  position:relative;
  z-index:1;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.emptyCardLibraryEyebrow{
  color:#a5f3fc;
  font-size:12px;
  font-weight:1000;
  letter-spacing:.12em;
  text-transform:uppercase;
}
.emptyCardLibraryTitle{
  color:#f8fbff;
  font-size:24px;
  line-height:1.1;
  font-weight:1000;
}
.emptyCardLibraryText{
  max-width:760px;
  color:#dbeafe;
  font-size:15px;
  line-height:1.45;
  font-weight:850;
}
.emptyCardLibraryActions{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:6px;
}
.emptyCardLibraryActions .bigbtn{
  padding:11px 14px !important;
  font-size:14px !important;
  border-radius:14px !important;
}
.emptyCardLibraryFinePrint{
  margin-top:2px;
}
@media (max-width:720px){
  .emptyCardLibraryOnboarding,
  .emptyCardLibraryOnboardingCompact{
    grid-template-columns:1fr;
    gap:10px;
  }
  .emptyCardLibraryArt{
    min-height:96px;
  }
  .emptyCardStack{
    width:64px;
    height:90px;
  }
  .emptyCardLibraryTitle{
    font-size:21px;
  }
}


/* v140: keep element badge artwork centered inside small attach-choice squares. */
.energyAttachTileOrb .energySymbol--large{
  width:34px !important;
  height:34px !important;
  max-width:34px !important;
  max-height:34px !important;
}
.energyAttachTileOrb .energySymbol--large img{
  width:100% !important;
  height:100% !important;
  object-fit:contain !important;
  object-position:center center !important;
}

/* v140: battlefield attached generated elements use solid-color markers for readability. */
.attachedEnergySolidChip{
  background:rgba(15,23,42,.82) !important;
  border:1px solid rgba(255,255,255,.52) !important;
  gap:3px !important;
  padding:2px 5px 2px 3px !important;
}
.attachedEnergySolidDot{
  width:13px;
  height:13px;
  border-radius:999px;
  display:inline-block;
  background:var(--energy-color, #94a3b8);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45), 0 1px 4px rgba(0,0,0,.32);
  border:1px solid rgba(255,255,255,.65);
}

.rewardPointPanel{
  width:100%;
  min-height:56px;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  padding:8px;
  border-radius:16px;
  background:linear-gradient(135deg, rgba(250,204,21,.14), rgba(102,217,255,.10)), rgba(15,23,42,.55);
  border:1px solid rgba(255,255,255,.14);
  color:#f8fafc;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10);
}
.rewardPointOrb{
  width:34px;
  height:34px;
  border-radius:999px;
  display:grid;
  place-items:center;
  font-weight:1000;
  color:#101827;
  background:linear-gradient(180deg, #fde68a, #facc15);
  border:2px solid rgba(255,255,255,.85);
  box-shadow:0 5px 14px rgba(0,0,0,.28);
}
.rewardPointCopy{
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.1;
  font-size:11px;
  font-weight:900;
}
.rewardPointCopy b{
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.05em;
}
.rewardPointCopy span{
  color:#cfe4ff;
  font-size:10px;
  margin-top:3px;
}

/* v141: Reward Points visual dots + safe reward-zone drag target */
.rewardPointsModeZone{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  flex-wrap:wrap;
  min-height:42px;
  padding:5px 4px !important;
}
.rewardPointTitleSpacer{
  display:none;
}
.rewardPointDotsPanel{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  padding:5px 4px;
  pointer-events:none;
}
.rewardPointDot{
  width:10px;
  height:10px;
  border-radius:999px;
  background:rgba(148,163,184,.24);
  border:1px solid rgba(226,232,240,.34);
  box-shadow:inset 0 1px 1px rgba(255,255,255,.12), 0 1px 3px rgba(0,0,0,.26);
}
.rewardPointDot.isLit{
  background:linear-gradient(180deg,#fde68a,#facc15);
  border-color:rgba(255,255,255,.82);
  box-shadow:0 0 9px rgba(250,204,21,.62), inset 0 1px 0 rgba(255,255,255,.7);
}
.rewardPointsModeZone .manualRewardCardInPointsMode{
  width:26px !important;
  min-width:26px !important;
  height:36px !important;
  margin-top:2px;
}