/* ---- cardbattle.css: Goop Card Battle (js/games/cards.js). A card table in plain HTML: the rival's bar, three lanes each,
   your bar, and your hand fanned along the bottom (or down the right side on a wide screen). */
.cb{ position:relative; height:100%; width:100%; display:grid; grid-template-rows:minmax(0, 1fr) auto; grid-template-columns:minmax(0, 1fr); overflow:hidden; user-select:none; -webkit-user-select:none; touch-action:manipulation;
  color:#f6f1ff; font:500 14px/1.3 var(--f-body);
  background:
    radial-gradient(120% 70% at 50% 0%, rgba(255,79,140,.16), transparent 60%),
    radial-gradient(120% 70% at 50% 100%, rgba(157,255,46,.12), transparent 60%),
    radial-gradient(80% 60% at 50% 50%, #251538, #120a1e 75%); }
.cb::before{ content:''; position:absolute; inset:0; pointer-events:none; opacity:.35; mix-blend-mode:overlay;
  background:repeating-radial-gradient(circle at 30% 40%, rgba(255,255,255,.06) 0 1px, transparent 1px 3px); }
.cb-wait{ display:grid; place-items:center; height:100%; padding:24px; text-align:center; color:#b9aed6; font:600 16px var(--f-head); }
.cb button{ font:inherit; color:inherit; }

/* ---------- the table */
.cb-table{ position:relative; display:grid; grid-template-rows:auto minmax(0, 1fr) auto; grid-template-columns:minmax(0, 1fr); min-height:0; min-width:0; }
.cb-bar{ display:flex; align-items:center; gap:10px; padding:6px 12px; min-height:44px; z-index:2; }
.cb-bar.op{ background:linear-gradient(180deg, rgba(60,12,40,.9), rgba(40,10,32,.55)); border-bottom:1px solid rgba(255,90,140,.25); justify-content:space-between; }
.cb-bar.me{ background:linear-gradient(0deg, rgba(14,40,18,.85), rgba(12,30,20,.5)); border-top:1px solid rgba(157,255,46,.22); padding-right:136px; }
.cb-who{ display:flex; align-items:center; gap:8px; min-width:0; }
.cb-who img{ width:34px; height:34px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid #ff7aa8; box-shadow:0 0 0 2px #0008; background:#2a1838; flex:none; }
.cb-who span{ display:grid; min-width:0; }
.cb-who b{ font:700 14px/1.1 var(--f-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-who small{ font-size:11px; color:#d9b3cf; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-stats{ display:flex; align-items:center; gap:12px; }
.cb-hand-n, .cb-deck-n{ display:inline-flex; align-items:center; gap:4px; font:700 13px var(--f-head); color:#e2d6f5; }
.cb-deck-n svg{ width:16px; height:16px; color:#b9a4dc; }
.cb-backs{ position:relative; width:16px; height:18px; display:inline-block; }
.cb-backs::before, .cb-backs::after{ content:''; position:absolute; inset:0; border-radius:3px; border:1.5px solid #ffd76a; background:linear-gradient(135deg,#5b2a8a,#2b1450); }
.cb-backs::before{ transform:rotate(-12deg) translateX(-3px); }
.cb-backs::after{ transform:rotate(8deg) translateX(2px); }
.cb-hp{ display:inline-flex; align-items:center; gap:5px; }
.cb-hp svg{ width:22px; height:22px; color:#ff4f7c; filter:drop-shadow(0 1px 0 #0009); }
.cb-hp b{ font:400 22px/1 'Lilita One', var(--f-head); min-width:1.4em; text-shadow:0 2px 0 #0008; }
.cb-hpbar{ width:62px; height:8px; border-radius:6px; background:#0007; overflow:hidden; box-shadow:inset 0 0 0 1px #fff2; }
.cb-hpbar i{ display:block; height:100%; width:100%; border-radius:6px; background:linear-gradient(90deg,#ff3d6e,#ff8fa8); transition:width .35s ease; }
.cb-bar.me .cb-hpbar i{ background:linear-gradient(90deg,#46d36b,#b8ff5c); }
.cb-hp.low b{ color:#ff8a8a; animation:cbPulse 1s ease-in-out infinite; }
@keyframes cbPulse{ 50%{ transform:scale(1.15); } }
.cb-energy{ display:inline-flex; align-items:center; gap:2px; }
.cb-energy i{ width:12px; height:20px; display:grid; place-items:center; color:#4b3b63; }
.cb-energy i svg{ width:14px; height:14px; }
.cb-energy i.on{ color:#ffd23f; filter:drop-shadow(0 0 5px rgba(255,210,63,.7)); }
.cb-energy b{ margin-left:5px; font:400 20px/1 'Lilita One', var(--f-head); color:#ffd23f; text-shadow:0 2px 0 #0008; }

/* ---------- the lanes */
.cb-board{ position:relative; display:grid; grid-template-rows:1fr auto 1fr; padding:6px 10px; gap:4px; min-height:0; }
.cb-row{ display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:10px; min-height:0; }
.cb-lane{ position:relative; display:grid; place-items:center; min-height:0; padding:5px; border-radius:16px; border:2px dashed rgba(255,255,255,.12); background:rgba(0,0,0,.14); }
button.cb-lane{ cursor:default; }
.cb-row.op .cb-lane{ border-color:rgba(255,110,150,.18); }
.cb-row.me .cb-lane{ border-color:rgba(157,255,46,.18); }
.cb-lane.full{ border-style:solid; border-color:transparent; background:transparent; }
.cb-lane.drop{ cursor:pointer; border-color:#b8ff5c; border-style:dashed; background:rgba(157,255,46,.1); animation:cbDrop 1.1s ease-in-out infinite; }
.cb-lane.drop.swap{ border-color:#ffb347; background:rgba(255,179,71,.08); }
.cb-lane.drop.over{ background:rgba(157,255,46,.26); transform:scale(1.03); }
.cb-lane.drop::after{ content:'Put it here'; position:absolute; bottom:6px; left:0; right:0; text-align:center; font:700 11px var(--f-head); color:#d8ff9e; pointer-events:none; text-shadow:0 1px 2px #000; }
.cb-lane.drop.swap::after{ content:'Swap out'; color:#ffd59e; }
.cb-lane.drop.swap.confirm{ border-color:#ffd23f; border-style:solid; background:rgba(255,210,63,.18); }
.cb-lane.drop.swap.confirm::after{ content:'Tap again to swap'; color:#ffe9a3; display:block; }
.cb-lane.drop.swap::after{ z-index:4; bottom:auto; top:40%; padding:3px 0; background:rgba(20,8,34,.8); }
@keyframes cbDrop{ 50%{ box-shadow:0 0 0 4px rgba(157,255,46,.18), 0 0 22px rgba(157,255,46,.25); } }
.cb-lane:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* a Goop on the table: its painting, Power (sword) and health (heart) */
.cb-u{ position:relative; display:block; height:100%; max-width:100%; aspect-ratio:.84; border-radius:14px; border:3px solid var(--tc,#9dff2e);
  background:#140b22; box-shadow:0 0 0 2px #000a, 0 8px 16px rgba(0,0,0,.55), 0 0 18px color-mix(in srgb, var(--tc,#9dff2e) 45%, transparent); }
.cb-art{ position:absolute; inset:0; border-radius:11px; background-size:200% auto; background-position:50% 17%; background-repeat:no-repeat; }
.cb-art::after{ content:''; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(180deg, transparent 52%, rgba(10,4,20,.92)); }
.cb-nm{ position:absolute; left:6px; right:6px; bottom:22px; text-align:center; font:700 11px/1.1 var(--f-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-shadow:0 1px 2px #000; }
.cb-ty{ position:absolute; top:4px; right:4px; padding:1px 6px; border-radius:8px; font:700 9px/1.4 var(--f-head); letter-spacing:.04em; text-transform:uppercase; color:#120a1e; background:var(--tc); box-shadow:0 1px 3px #0008; }
.cb-abil{ position:absolute; top:4px; left:4px; max-width:62%; padding:1px 6px; border-radius:8px; font:700 9px/1.4 var(--f-head); color:#ffe9a3; background:rgba(20,8,34,.85); border:1px solid rgba(255,215,90,.5); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cb-pw, .cb-life, .cb-shield{ position:absolute; bottom:-9px; display:grid; place-items:center; width:34px; height:34px; }
.cb-pw{ left:-9px; } .cb-life{ right:-9px; }
.cb-pw svg, .cb-life svg, .cb-shield svg{ position:absolute; inset:0; width:100%; height:100%; filter:drop-shadow(0 2px 0 #000a); }
.cb-pw svg{ color:#ffb02e; transform:rotate(0deg); }
.cb-pw::before{ content:''; position:absolute; inset:3px; border-radius:50%; background:radial-gradient(circle at 35% 30%, #ffcf6b, #e0761a 70%); box-shadow:0 0 0 2px #1a0d00, 0 2px 4px #000a; }
.cb-pw svg{ display:none; }
.cb-life svg{ color:#ff4f7c; }
.cb-pw b, .cb-life b, .cb-shield b{ position:relative; font:400 18px/1 'Lilita One', var(--f-head); color:#fff; -webkit-text-stroke:3px #1a0a12; paint-order:stroke fill; }
.cb-pw.up b{ color:#c6ff7a; } .cb-pw.down b{ color:#ff9b9b; } .cb-life.hurt b{ color:#ffb3c2; }
.cb-shield{ left:-11px; bottom:auto; top:38%; width:30px; height:30px; }
.cb-shield svg{ color:#7fd2ff; }
.cb-shield b{ font-size:14px; }
.cb-stun{ position:absolute; inset:0; display:grid; place-items:center; border-radius:11px; background:rgba(20,30,60,.45); }
.cb-stun svg{ width:40%; height:40%; color:#bfe3ff; filter:drop-shadow(0 0 6px #6ab8ff); animation:cbZz 1.6s ease-in-out infinite; }
@keyframes cbZz{ 50%{ transform:translateY(-4px) rotate(-6deg); opacity:.7; } }
.cb-u.fresh{ filter:saturate(.75) brightness(.85); }
.cb-u.fresh::after{ content:'Ready next turn'; position:absolute; left:50%; top:42%; transform:translate(-50%,-50%); white-space:nowrap; padding:2px 7px; border-radius:9px; font:700 10px var(--f-head); background:rgba(10,4,20,.85); color:#d9cff0; }
.cb-u.casting{ box-shadow:0 0 0 2px #000a, 0 0 0 6px color-mix(in srgb, var(--tc) 60%, transparent), 0 0 34px var(--tc); }
.cb-lane.hitting{ z-index:5; }

/* what each Goop will do */
.cb-it{ position:absolute; left:50%; transform:translateX(-50%); display:inline-flex; align-items:center; gap:3px; padding:2px 8px 2px 5px; border-radius:12px;
  font:400 15px/1 'Lilita One', var(--f-head); white-space:nowrap; z-index:3; background:#2a1a42; border:2px solid #a98fd6; box-shadow:0 2px 6px #000a; pointer-events:none; }
.cb-row.me .cb-it{ top:-13px; }
.cb-row.op .cb-it{ bottom:-15px; }
.cb-row.op .cb-it::after{ content:''; position:absolute; left:50%; bottom:-7px; margin-left:-5px; border:5px solid transparent; border-top-color:inherit; }
.cb-row.me .cb-it::after{ content:''; position:absolute; left:50%; top:-7px; margin-left:-5px; border:5px solid transparent; border-bottom-color:inherit; }
.cb-it svg{ width:15px; height:15px; color:#ffcf6b; }
.cb-it.face{ background:#4a1030; border-color:#ff6f9a; } .cb-it.face svg{ color:#ff6f9a; }
.cb-it.kill{ background:#401018; border-color:#ff5050; } .cb-it.kill svg{ color:#ffd0d0; }
.cb-it.sup{ border-color:#ffd23f; box-shadow:0 0 10px rgba(255,210,63,.6), 0 2px 6px #000a; }
.cb-it.wait{ padding:3px 6px; background:#1e2a44; border-color:#6f8fc8; } .cb-it.wait svg{ color:#bfe3ff; }
.cb-it.threat{ background:#3a0f1c; border-color:#ff7a7a; } .cb-it.threat svg{ color:#ff9b9b; }

/* the strip between the rows */
.cb-mid{ display:flex; align-items:center; gap:10px; min-height:30px; padding:0 4px; }
.cb-turn{ flex:none; font:400 13px/1 var(--f-label); letter-spacing:.06em; color:#cbbbe6; padding:4px 8px; border-radius:8px; background:rgba(0,0,0,.3); }
.cb-turn:empty{ display:none; }
.cb-say{ flex:1; min-width:0; font-size:12.5px; line-height:1.25; color:#efe7ff; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.cb-say b{ color:#ffe28a; } .cb-say em{ color:#ffb3b3; font-style:normal; }
.cb-coach{ display:inline; } .cb-coach img{ width:20px; height:20px; border-radius:50%; object-fit:cover; vertical-align:-5px; margin-right:6px; border:1.5px solid #ffd23f; }

/* ---------- your hand */
.cb-handzone{ position:relative; height:clamp(112px, 23vh, 186px); }
.cb-hand{ position:absolute; inset:0 6px 0 6px; }
.cb-card{ position:absolute; padding:0; border:0; background:none; border-radius:7%; cursor:pointer; transform:rotate(var(--r,0deg)); transform-origin:50% 120%;
  transition:transform .18s cubic-bezier(.2,.8,.2,1), filter .18s, top .25s, left .25s; filter:drop-shadow(0 6px 10px rgba(0,0,0,.6)); touch-action:none; }
.cb-card img{ display:block; width:100%; border-radius:6%; pointer-events:none; }
.cb-cost{ position:absolute; right:3.5%; top:1.2%; width:19%; aspect-ratio:1; display:grid; place-items:center; border-radius:50%;
  font:400 clamp(13px, 1.6em, 22px)/1 'Lilita One', var(--f-head); color:#fff; -webkit-text-stroke:3px #1a0a20; paint-order:stroke fill; background:radial-gradient(circle at 35% 30%, #ffe680, #f0a400 70%); box-shadow:0 0 0 2px #1a0a20; }
.cb-card.can{ filter:drop-shadow(0 0 7px rgba(157,255,46,.55)) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.cb-card.dim{ filter:grayscale(.65) brightness(.62) drop-shadow(0 6px 10px rgba(0,0,0,.6)); }
.cb-card.dim .cb-cost{ background:radial-gradient(circle at 35% 30%, #a99ac2, #5e4f78 70%); }
.cb-card:hover:not(.dim), .cb-card:focus-visible{ transform:translateY(-8%) rotate(0deg) scale(1.04); z-index:5; }
.cb-card.sel{ transform:translateY(-16%) rotate(0deg) scale(1.08); z-index:6; filter:drop-shadow(0 0 12px rgba(255,226,120,.9)) drop-shadow(0 10px 14px rgba(0,0,0,.7)); }
.cb-card.lifted{ opacity:.25; }
.cb-card:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.cb-go{ position:absolute; right:8px; bottom:calc(100% + 4px); z-index:4; display:grid; justify-items:center; align-content:center; gap:0; min-width:116px; min-height:44px; padding:4px 14px; border-radius:14px;
  border:0; cursor:pointer; color:#1a0d00; background:linear-gradient(180deg,#ffe36a,#ff9f1c); box-shadow:0 0 0 3px #3a1a00, 0 6px 0 #9a4b00, 0 10px 18px rgba(0,0,0,.5); transition:transform .12s, filter .12s; }
.cb-go b{ font:400 20px/1 'Lilita One', var(--f-head); letter-spacing:.02em; }
.cb-go small{ font:700 10px/1.2 var(--f-head); opacity:.75; }
.cb-go:hover:not(:disabled){ transform:translateY(-2px); filter:brightness(1.08); }
.cb-go:active:not(:disabled){ transform:translateY(3px); box-shadow:0 0 0 3px #3a1a00, 0 2px 0 #9a4b00; }
.cb-go:disabled{ cursor:default; filter:grayscale(.85) brightness(.6); }
.cb-go.nudge{ animation:cbNudge 1.4s ease-in-out infinite; }
@keyframes cbNudge{ 50%{ transform:translateY(-3px); box-shadow:0 0 0 3px #3a1a00, 0 6px 0 #9a4b00, 0 0 26px rgba(255,200,60,.8); } }
.cb-go:focus-visible{ outline:3px solid #fff; outline-offset:3px; }

/* ---------- effects */
.cb-fx{ position:absolute; inset:0; pointer-events:none; z-index:20; overflow:hidden; }
.cb-float{ position:absolute; font:400 20px/1 'Lilita One', var(--f-head); color:#fff; -webkit-text-stroke:4px #170a1e; paint-order:stroke fill; white-space:nowrap; }
.cb-float.dmg{ color:#ff5a6e; } .cb-float.big{ font-size:32px; }
.cb-float.heal, .cb-float.up{ color:#9dff5c; } .cb-float.shield{ color:#8fd6ff; } .cb-float.energy, .cb-float.sup{ color:#ffd23f; } .cb-float.sup{ font-size:24px; }
.cb-float.zap{ color:#ffa64d; } .cb-float.info{ font-size:14px; color:#e8ddff; }
.cb-drop{ position:absolute; border-radius:50%; box-shadow:inset -2px -2px 0 rgba(0,0,0,.25), inset 2px 2px 0 rgba(255,255,255,.4); }
.cb-fly, .cb-drag{ position:absolute; border-radius:6%; box-shadow:0 14px 30px rgba(0,0,0,.6); }
.cb-drag{ z-index:30; transform:rotate(-4deg) scale(1.05); }
.cb-banner{ position:absolute; inset:0; display:grid; place-items:center; pointer-events:none; z-index:25; opacity:0; }
.cb-banner b{ font:400 clamp(30px, 8vw, 54px)/1 var(--f-display); color:#c6ff5a; -webkit-text-stroke:6px #12081e; paint-order:stroke fill; text-shadow:0 6px 0 #0008; padding:10px 26px; }
.cb-banner.op b{ color:#ff8fb3; }

/* ---------- start, end, a card up close, pause */
.cb-ov{ position:absolute; inset:0; z-index:40; display:grid; place-items:center; padding:12px; background:rgba(10,4,20,.72); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); overflow:auto; }
.cb-ov[hidden]{ display:none; }
.cb-panel{ width:min(560px, 100%); max-height:100%; overflow:auto; display:grid; gap:10px; justify-items:center; text-align:center; padding:18px 18px 16px; border-radius:22px;
  background:linear-gradient(180deg,#2b1a44,#1a0f2b); box-shadow:0 0 0 2px rgba(198,255,90,.25), 0 20px 50px rgba(0,0,0,.6); }
.cb-kick{ font:400 13px var(--f-label); letter-spacing:.08em; color:#c6ff5a; }
.cb-title{ margin:0; font:400 clamp(26px, 6vw, 36px)/1.05 var(--f-display); color:#fff; text-shadow:0 3px 0 #0008; }
.cb-how{ margin:0; padding-left:20px; text-align:left; display:grid; gap:5px; font-size:13.5px; color:#e6dcf7; max-width:470px; }
.cb-sum{ display:none; margin:0; font-size:13px; color:#e6dcf7; max-width:440px; } .cb-sum b{ color:#fff; }
.cb-small{ margin:0; font-size:12px; color:#b9aed6; }
.cb-rival{ display:flex; align-items:center; gap:10px; text-align:left; max-width:470px; }
.cb-rival img{ width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2.5px solid #ff7aa8; flex:none; background:#2a1838; }
.cb-rival p{ margin:0; font-size:13.5px; color:#efe6ff; } .cb-rival b{ color:#ffb3cd; }
.cb-deckline{ display:grid; gap:4px; justify-items:center; } .cb-deckline > span:first-child{ font:400 12px var(--f-label); letter-spacing:.08em; color:#b9aed6; }
.cb-mini{ display:flex; flex-wrap:wrap; justify-content:center; gap:4px; }
.cb-mini img{ width:46px; border-radius:4px; box-shadow:0 3px 6px #0008; }
.cb-btns{ display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.cb-btn{ min-height:46px; padding:10px 22px; border-radius:14px; border:2px solid rgba(255,255,255,.2); background:#2f2047; cursor:pointer; font:700 16px var(--f-head) !important; color:#fff; }
.cb-btn.primary{ border:0; color:#102000; background:linear-gradient(180deg,#d4ff7a,#86e61f); box-shadow:0 0 0 3px #1d3a00, 0 5px 0 #4f8a0e; }
.cb-btn:focus-visible{ outline:3px solid #fff; outline-offset:3px; }
.cb-result b{ font:400 clamp(36px, 9vw, 56px)/1 var(--f-display); -webkit-text-stroke:6px #12081e; paint-order:stroke fill; }
.cb-result.win b{ color:#c6ff5a; } .cb-result.lose b{ color:#ff8fb3; } .cb-result.draw b{ color:#ffd23f; }
.cb-rows{ margin:0; display:grid; grid-template-columns:1fr 1fr; gap:6px; width:min(380px, 100%); }
.cb-rows div{ display:flex; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:10px; background:rgba(0,0,0,.25); font-size:13px; }
.cb-rows dt{ color:#cbbbe6; } .cb-rows dd{ margin:0; font:400 16px 'Lilita One', var(--f-head); }
.cb-score{ margin:0; font:700 16px var(--f-head); } .cb-score b{ font:400 28px 'Lilita One', var(--f-head); color:#ffd23f; }
.cb-best{ margin-left:6px; padding:2px 8px; border-radius:8px; background:#ffd23f; color:#2a1600; font:700 12px var(--f-head); }
.cb-look{ width:min(720px, 100%); grid-template-columns:minmax(0, 300px) 1fr; text-align:left; justify-items:start; align-items:center; }
.cb-bigcard{ width:100%; border-radius:6%; box-shadow:0 14px 34px rgba(0,0,0,.6); }
.cb-lookt{ display:grid; gap:8px; } .cb-lookt p{ margin:0; font-size:14px; color:#efe6ff; } .cb-lookt b{ color:#ffe28a; }

/* ---------- a wide screen: the hand down the right side */
.cb.wide{ grid-template-rows:minmax(0, 1fr); grid-template-columns:minmax(0, 1fr) minmax(200px, 32%); }
.cb.wide .cb-handzone{ height:auto; border-left:1px solid rgba(255,255,255,.08); background:rgba(0,0,0,.18); }
.cb.wide .cb-hand{ inset:8px 8px 76px 8px; }
.cb.wide .cb-go{ bottom:12px; right:50%; transform:translateX(50%); width:calc(100% - 24px); }
.cb.wide .cb-go:hover:not(:disabled){ transform:translateX(50%) translateY(-2px); }
.cb.wide .cb-go:active:not(:disabled){ transform:translateX(50%) translateY(3px); }
.cb.wide .cb-bar.me{ padding-right:12px; }
.cb.wide .cb-card{ transform-origin:50% 50%; }

/* ---------- small and short screens */
.cb.short .cb-bar{ min-height:34px; padding-top:3px; padding-bottom:3px; }
.cb.short .cb-who img{ width:26px; height:26px; } .cb.short .cb-who small{ display:none; }
.cb.short .cb-hp b, .cb.short .cb-energy b{ font-size:17px; } .cb.short .cb-hpbar{ width:44px; }
.cb.short .cb-nm, .cb.short .cb-abil, .cb.short .cb-ty{ display:none; }
.cb.short .cb-pw, .cb.short .cb-life{ width:28px; height:28px; } .cb.short .cb-pw b, .cb.short .cb-life b{ font-size:15px; }
.cb.short .cb-mid{ min-height:24px; } .cb.short .cb-say{ -webkit-line-clamp:1; font-size:12px; }
.cb.short .cb-how{ display:none; } .cb.short .cb-sum{ display:block; } .cb.short .cb-panel{ padding:12px 14px; gap:7px; }
.cb.short .cb-rival img{ width:38px; height:38px; } .cb.short .cb-mini img{ width:32px; }
.cb.short .cb-look{ grid-template-columns:minmax(0, 170px) 1fr; }
.cb.short .cb-lane.drop::after{ display:none; }
.cb.tiny .cb-who small, .cb.tiny .cb-hpbar{ display:none; }
.cb.tiny .cb-nm{ font-size:10px; } .cb.tiny .cb-ty{ display:none; }
.cb.tiny .cb-energy i{ width:13px; } .cb.tiny .cb-energy i svg{ width:13px; height:13px; }
@media (max-width:520px){ .cb-look{ grid-template-columns:1fr; justify-items:center; text-align:center; } .cb-bigcard{ max-width:260px; } }

@media (prefers-reduced-motion:reduce){ .cb-lane.drop, .cb-go.nudge, .cb-hp.low b, .cb-stun svg{ animation:none; } .cb-card{ transition:none; } }
html.calm .cb-lane.drop, html.calm .cb-go.nudge, html.calm .cb-hp.low b, html.calm .cb-stun svg{ animation:none; }

/* ---------- the rival ladder on the start card */
.cb-ladder{ display:grid; grid-template-columns:repeat(7, minmax(0, 1fr)); gap:4px; width:100%; max-width:620px; }
@media (max-width:559px){ .cb-rung{ padding:5px 1px 4px; border-radius:11px; } .cb-rung img{ width:30px; height:30px; } .cb-rung b{ font-size:8.5px; letter-spacing:-.2px; text-overflow:clip; } .cb-rung small{ font-size:8.5px; } .cb-rung.locked::after{ top:15px; width:14px; height:11px; margin-left:-7px; } .cb-rung.locked::before{ top:8px; width:8px; height:10px; margin-left:-6px; } }
.cb-rung{ position:relative; display:grid; justify-items:center; gap:2px; padding:6px 2px 5px; border-radius:14px; border:2px solid rgba(255,255,255,.12); background:rgba(0,0,0,.25); cursor:pointer; min-height:44px; }
.cb-rung img{ width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:50% 20%; border:2px solid var(--tc); background:#2a1838; }
.cb-rung b{ font:700 11px/1.1 var(--f-head); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.cb-rung small{ font:700 10px/1 var(--f-head); color:#b9aed6; }
.cb-rung[aria-checked="true"]{ border-color:var(--tc); background:color-mix(in srgb, var(--tc) 18%, rgba(0,0,0,.3)); box-shadow:0 0 14px color-mix(in srgb, var(--tc) 40%, transparent); }
.cb-rung.done small{ color:#c6ff5a; } .cb-rung.done small::before{ content:'✓ '; }
.cb-rung.locked{ cursor:not-allowed; opacity:.55; } .cb-rung.locked img{ filter:grayscale(1) brightness(.5); }
.cb-rung.locked::after{ content:''; position:absolute; top:19px; left:50%; width:18px; height:14px; margin-left:-9px; border-radius:3px; background:#ffd23f; box-shadow:0 -7px 0 -3px transparent, 0 0 0 2px #1a0d00; }
.cb-rung.locked::before{ content:''; position:absolute; top:10px; left:50%; width:10px; height:12px; margin-left:-7px; border:2px solid #ffd23f; border-bottom:0; border-radius:6px 6px 0 0; }
.cb-rung:focus-visible{ outline:3px solid #fff; outline-offset:2px; }
.cb-tip{ display:block; margin-top:3px; font-size:12px; color:#c8bbe4; }
.cb-prize{ margin:0; font-size:13px; color:#ffe9a3; } .cb-prize b{ color:#ffd23f; }

/* ---------- the first-win prize on the result card */
.cb-won{ display:grid; justify-items:center; gap:6px; width:min(420px, 100%); padding:10px; border-radius:16px; background:linear-gradient(135deg, rgba(255,210,63,.18), rgba(255,79,216,.12)); box-shadow:inset 0 0 0 1.5px rgba(255,210,63,.45); }
.cb-won-row{ display:flex; align-items:center; justify-content:center; gap:10px; }
.cb-won-card{ width:84px; border-radius:6%; box-shadow:0 6px 16px rgba(0,0,0,.55); animation:cbWon .7s cubic-bezier(.2,.9,.3,1.4) both; }
.cb-won-card.full{ width:104px; box-shadow:0 0 18px rgba(255,200,90,.7), 0 6px 16px rgba(0,0,0,.55); }
.cb-won-packs{ display:grid; place-items:center; width:74px; height:96px; border-radius:10px; font:700 12px/1.2 var(--f-head); text-align:center; color:#1a0d00;
  background:linear-gradient(160deg, #ffe36a, #ff9f1c 55%, #ff4fd8); box-shadow:0 6px 16px rgba(0,0,0,.55); animation:cbWon .7s .15s cubic-bezier(.2,.9,.3,1.4) both; }
.cb-won-packs b{ display:block; font:400 26px/1 'Lilita One', var(--f-head); }
@keyframes cbWon{ from{ transform:scale(.4) rotate(-12deg); opacity:0; } to{ transform:none; opacity:1; } }

/* ---------- keep the opening hand or swap it */
.cb-mull{ position:absolute; left:50%; bottom:calc(100% + 8px); transform:translateX(-50%); z-index:8; display:grid; justify-items:center; gap:8px; width:min(360px, calc(100% - 16px));
  padding:10px 12px; border-radius:16px; background:rgba(20,10,34,.94); box-shadow:0 0 0 2px rgba(198,255,90,.35), 0 10px 26px rgba(0,0,0,.6); text-align:center; }
.cb-mull p{ margin:0; font-size:13px; color:#efe6ff; }
.cb[data-phase="mull"] .cb-go{ visibility:hidden; }
.cb.wide .cb-mull{ bottom:10px; }

/* ---------- your best version of a card shines in your hand */
.cb-foil{ position:absolute; inset:0; border-radius:6%; pointer-events:none; mix-blend-mode:color-dodge; opacity:.45;
  background:linear-gradient(115deg, transparent 15%, rgba(255,80,200,.6) 30%, rgba(255,220,90,.6) 42%, rgba(120,255,140,.55) 54%, rgba(80,220,255,.6) 66%, transparent 82%) 0 0 / 260% 260%; animation:gcFoil 5s ease-in-out infinite; }
.cb-card.full .cb-foil{ opacity:.25; }
@media (prefers-reduced-motion:reduce){ .cb-foil, .cb-won-card, .cb-won-packs{ animation:none; } }
html.calm .cb-foil{ animation:none; }

/* Chapter 2: evolving */
.cb-cost.evo{ background:radial-gradient(circle at 35% 30%, #e6c8ff, #8f4bff 70%) !important; color:#fff; box-shadow:0 0 0 2px #170a1e, 0 0 12px #c48aff; }
.cb-card.evo.can{ box-shadow:0 0 0 2px #c48aff, 0 0 18px rgba(196,138,255,.7); }
.cb-lane.evo{ outline:3px solid #c48aff; outline-offset:-3px; background:radial-gradient(closest-side, rgba(196,138,255,.32), transparent) !important; }
.cb-lane.evo::after{ content:'EVOLVE'; position:absolute; left:50%; bottom:6px; transform:translateX(-50%); padding:3px 8px; border-radius:99px; background:linear-gradient(135deg, #8f4bff, #ff5fd2); color:#fff; font:800 10px/1 var(--f-head, sans-serif); letter-spacing:.08em; pointer-events:none; z-index:4; }
.cb-float.evo{ font-size:30px; color:#e6c8ff; text-shadow:0 0 16px #c48aff; }
.cb-evotxt{ color:#e2c8ff; }