/* ===== DATA CLASH — modern, clean dark UI (design tokens borrowed from the haisham.design portfolio) ===== */
:root {
  --bg:#07070b; --fg:#f2f2f5; --muted:#b9b9c4; --dim:#9a9aa8; --accent:#8d86ff; --brand:#301ce9; --brand2:#4330ff;
  --line:rgba(255,255,255,.12); --line2:rgba(255,255,255,.3); --card:#15151c; --chip:rgba(255,255,255,.06); --chip2:rgba(255,255,255,.1); --chip3:rgba(255,255,255,.2);
  --glow:rgba(48,28,233,.22); --foe:#ff6b7a; --good:#4ade9a; --warn:#fbbf24;
  --glass:color-mix(in srgb, #15151c 62%, transparent);
  --display:'Space Grotesk','Inter',sans-serif; --ui:'Inter','Segoe UI',sans-serif;
  --ease:cubic-bezier(.2,.8,.2,1);
}
* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html, body { margin:0; height:100%; overflow:hidden; background:#000; color:var(--fg); font-family:var(--ui); font-weight:500; user-select:none; }
::selection { background:var(--brand); color:#fff; }
.hidden { display:none !important; }
#viewport { position:fixed; inset:0; overflow:hidden; }
#stage { position:absolute; left:50%; top:50%; width:1280px; height:720px; transform-origin:center; transform:translate(-50%,-50%); background:var(--bg); overflow:hidden; }
#bg { position:absolute; inset:0; background:radial-gradient(ellipse 70% 55% at 50% -8%, rgba(48,28,233,.30), transparent 70%), radial-gradient(ellipse 50% 40% at 85% 110%, rgba(141,134,255,.10), transparent 70%), var(--bg); }
#bg::before { content:''; position:absolute; inset:0; opacity:.5; background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px); background-size:64px 64px; -webkit-mask:radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%); mask:radial-gradient(ellipse at 50% 30%, #000 10%, transparent 75%); }

/* shared bits */
.glass { background:var(--glass); backdrop-filter:blur(18px) saturate(1.4); -webkit-backdrop-filter:blur(18px) saturate(1.4); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.1); }
.eyebrow, #hdr-t, .sup b, .dk, .cm-t, .sup-h { font-family:var(--display); font-weight:600; font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--dim); }

/* ===== HUD ===== */
#hud { position:absolute; inset:0; }
#header { position:absolute; left:0; right:0; top:0; height:48px; display:flex; align-items:center; gap:14px; padding:0 20px; background:rgba(7,7,11,.72); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line); z-index:3; font-size:15px; }
#hdr-t { display:flex; align-items:center; gap:10px; color:var(--dim); }
#hdr-t::before { content:''; width:8px; height:8px; background:var(--accent); display:inline-block; }
#header span { color:var(--fg); font-weight:500; }
.hbtns { margin-left:auto; display:flex; gap:8px; }
.hbtns button { height:30px; min-width:34px; padding:0 14px; border:0; border-radius:999px; background:var(--chip); color:var(--muted); font:500 13px var(--ui); cursor:pointer; backdrop-filter:blur(12px); transition:background .15s, color .15s; }
.hbtns button:hover { background:var(--chip2); color:var(--fg); }

.side { position:absolute; top:58px; width:560px; height:656px; z-index:2; }
#side-p { left:12px; } #side-o { left:708px; }
#mid { position:absolute; left:580px; top:58px; width:120px; height:656px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; }
#turnlab { font:600 11px var(--display); letter-spacing:.16em; padding:7px 12px; border-radius:999px; text-align:center; min-height:28px; color:var(--fg); background:var(--chip); border:1px solid var(--line); }
#turnlab:empty { visibility:hidden; }
#mid .big { width:116px; padding:13px 6px; font-size:13px; }
.tip { font-size:12px; color:var(--dim); text-align:center; line-height:1.4; }

.deckbar { display:flex; align-items:center; gap:10px; height:38px; padding:0 14px 0 16px; border-radius:12px; background:var(--chip); border:1px solid var(--line); box-shadow:inset 3px 0 0 var(--accent); font:600 12px var(--display); letter-spacing:.14em; color:var(--fg); }
.side.o .deckbar { box-shadow:inset 3px 0 0 var(--foe); }
.deckbar .dc { margin-left:auto; font:500 12px var(--ui); letter-spacing:.06em; color:var(--dim); } .deckbar .dc i { font-style:normal; margin-left:10px; }
.kos { display:flex; gap:5px; } .kos i { width:10px; height:10px; border-radius:50%; border:1.5px solid var(--accent); } .kos i.on { background:var(--accent); box-shadow:0 0 10px var(--accent); }
.side.o .kos i { border-color:var(--foe); } .side.o .kos i.on { background:var(--foe); box-shadow:0 0 10px var(--foe); }

.field { position:relative; margin-top:8px; height:318px; display:grid; grid-template-columns:58px 200px 1fr; gap:10px; padding:10px; border-radius:20px; background:var(--glass); backdrop-filter:blur(18px); -webkit-backdrop-filter:blur(18px); border:1px solid var(--line); box-shadow:inset 0 1px 0 rgba(255,255,255,.08), 0 20px 50px rgba(0,0,0,.45); }
.slots { display:flex; flex-direction:column; gap:8px; }
.slot { flex:1; border:1px dashed rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.02); display:flex; align-items:center; justify-content:center; text-align:center; font:600 8.5px var(--display); letter-spacing:.14em; color:rgba(255,255,255,.3); line-height:1.2; padding:3px; }
.slot.on { border:1px solid var(--accent); color:var(--fg); background:rgba(141,134,255,.14); box-shadow:0 0 18px rgba(141,134,255,.25); animation:slotin .35s var(--ease); }
.slot.bad { border-color:var(--foe); background:rgba(255,107,122,.12); }
@keyframes slotin { from { transform:scale(.6); opacity:0 } }

.stats { display:flex; flex-direction:column; min-width:0; }
.stats .nm { height:32px; display:flex; align-items:center; justify-content:space-between; padding:0 2px; margin-bottom:5px; font:700 21px var(--display); letter-spacing:-.02em; color:var(--fg); white-space:nowrap; overflow:hidden; }
.stats .nm small { font:600 10px var(--display); color:var(--dim); letter-spacing:.2em; padding:4px 9px; border-radius:999px; background:var(--chip); }
.row { --c:var(--accent); display:flex; align-items:center; height:36px; margin-bottom:4px; padding:0 12px 0 14px; border-radius:11px; color:var(--fg); background:var(--chip); border:1px solid var(--line); box-shadow:inset 3px 0 0 var(--c); }
.row i { font-style:normal; font-size:15px; width:24px; opacity:.9; }
.row em { font-style:normal; font:500 12px var(--ui); color:var(--muted); flex:1; padding-left:2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.row b { font:700 20px var(--display); letter-spacing:-.02em; min-width:52px; text-align:right; }
.row.o { --c:#ff6b7a; } .row.t { --c:#4ade9a; } .row.x { --c:#8d86ff; }
.row.boost b { color:var(--warn); text-shadow:0 0 14px rgba(251,191,36,.5); }
.sup { height:62px; margin-bottom:5px; padding:7px 11px; border-radius:11px; background:var(--chip); border:1px solid var(--line); overflow:hidden; }
.sup b { display:block; color:var(--accent); font-size:9px; }
.sup span { display:block; font:500 12px var(--ui); line-height:1.25; color:var(--muted); margin-top:2px; max-height:30px; overflow:hidden; }
.sup em { display:block; font:600 10px var(--display); font-style:normal; letter-spacing:.1em; color:var(--dim); margin-top:3px; }
.hpbar { position:relative; height:26px; border-radius:999px; margin-top:2px; background:rgba(255,255,255,.07); border:1px solid var(--line); overflow:hidden; }
.hpfill { position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:999px; background:linear-gradient(90deg,#2fcf86,#6af0b3); transition:width .8s var(--ease), background .4s; }
.hpfill.mid { background:linear-gradient(90deg,#e8a516,#fbd24a); } .hpfill.low { background:linear-gradient(90deg,#e8384a,#ff7a86); }
.hpbar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 12px var(--display); letter-spacing:.08em; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.6); }
.dp { display:flex; align-items:center; margin-top:5px; height:22px; padding:0 4px; }
.dp label { font:600 10px var(--display); color:var(--dim); letter-spacing:.2em; }
.apbar { position:relative; flex:1; height:6px; border-radius:999px; background:rgba(255,255,255,.08); margin:0 10px; }
.apbar .apfill { position:absolute; left:0; top:0; bottom:0; width:0; border-radius:999px; background:linear-gradient(90deg,var(--brand2),var(--accent)); box-shadow:0 0 12px rgba(141,134,255,.7); transition:width .5s var(--ease); }
.apbar u { position:absolute; top:-3px; bottom:-3px; width:1px; background:rgba(255,255,255,.4); text-decoration:none; }
.dp b { font:700 14px var(--display); color:var(--fg); min-width:30px; text-align:right; }

.first { position:absolute; left:74px; top:-12px; padding:4px 12px; border-radius:999px; background:var(--brand); color:#fff; font:600 10px var(--display); letter-spacing:.16em; box-shadow:0 0 22px rgba(48,28,233,.7); z-index:5; display:none; }
#firstlab { font:600 10px var(--display); letter-spacing:.16em; color:var(--accent); text-align:center; line-height:1.5; min-height:30px; }

.hand { position:relative; margin-top:8px; height:272px; }
.hc { position:absolute; bottom:6px; width:130px; border-radius:12px; cursor:pointer; transition:transform .2s var(--ease), left .25s, filter .15s; filter:brightness(.62) saturate(.8); box-shadow:0 10px 24px rgba(0,0,0,.6); }
.hc.ok { filter:none; outline:2px solid var(--accent); outline-offset:-1px; box-shadow:0 0 0 1px rgba(141,134,255,.4), 0 0 24px rgba(141,134,255,.35), 0 10px 24px rgba(0,0,0,.6); }
.hc:hover { transform:translateY(-30px) scale(1.06); z-index:60 !important; filter:none; }
.hc.dealt { animation:dealt .5s var(--ease); }
@keyframes dealt { from { transform:translate(260px,-140px) scale(.5) rotate(25deg); opacity:0 } }
.side.o .hand .back { position:absolute; top:4px; width:70px; border-radius:8px; box-shadow:0 6px 16px rgba(0,0,0,.6); transition:left .25s; filter:brightness(.7); }

#preview { position:absolute; left:488px; top:50px; width:262px; opacity:0; transform:scale(.95); transition:opacity .15s, transform .15s var(--ease); pointer-events:none; z-index:25; filter:drop-shadow(0 20px 40px rgba(0,0,0,.7)); }
#preview.show { opacity:1; transform:scale(1); }
#preview img { width:100%; display:block; border-radius:14px; } #preview .zx { text-align:center; margin-top:6px; background:var(--glass); backdrop-filter:blur(14px); border:1px solid var(--line); border-radius:10px; padding:5px; font-size:13px; color:var(--muted); }
.zdet { margin-top:6px; background:var(--glass); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:14px; padding:8px; }
.zr { --c:var(--accent); display:flex; align-items:center; gap:7px; padding:5px 8px; margin-bottom:4px; border-radius:9px; background:var(--chip); box-shadow:inset 3px 0 0 var(--c); font:500 12px var(--ui); }
.zr i { font-style:normal; width:16px; } .zr span { flex:1; line-height:1.15; } .zr u { text-decoration:none; color:var(--dim); font-size:10.5px; display:block; } .zr b { font:700 16px var(--display); letter-spacing:-.02em; }
.zr.o { --c:#ff6b7a; } .zr.t { --c:#4ade9a; } .zr.x { --c:#8d86ff; }
.zs { font:500 11.5px var(--ui); color:var(--muted); line-height:1.3; margin-top:5px; } .zs b { color:var(--accent); font:600 9px var(--display); letter-spacing:.18em; }
.zk { font:600 9.5px var(--display); letter-spacing:.14em; color:var(--dim); margin-top:4px; }

#cardmenu { position:absolute; z-index:40; width:270px; padding:12px; border-radius:18px; background:var(--glass); backdrop-filter:blur(22px) saturate(1.4); -webkit-backdrop-filter:blur(22px) saturate(1.4); border:1px solid var(--line2); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 24px 60px rgba(0,0,0,.7); animation:pop .18s var(--ease); }
@keyframes pop { from { transform:translateY(8px) scale(.96); opacity:0 } }
#cardmenu .cm-t { margin-bottom:8px; color:var(--fg); }
#cardmenu button { display:block; width:100%; text-align:left; margin-bottom:6px; padding:9px 12px; border-radius:12px; border:1px solid var(--line); background:var(--chip); color:var(--fg); cursor:pointer; font:600 14px var(--ui); transition:background .15s, border-color .15s; }
#cardmenu button:hover:not(:disabled) { background:var(--chip2); border-color:var(--accent); }
#cardmenu button:disabled { opacity:.4; cursor:not-allowed; }
#cardmenu button small { display:block; font:400 12px var(--ui); color:var(--dim); margin-top:1px; } #cardmenu button small.why { color:var(--foe); }
.abinfo { font:400 12px var(--ui); color:var(--dim); margin-top:6px; line-height:1.35; } .abinfo b { color:var(--muted); } .abinfo i { color:var(--accent); font-style:normal; }

#phase-big { position:absolute; right:24px; bottom:14px; text-align:right; font:700 46px var(--display); letter-spacing:-.04em; color:var(--fg); pointer-events:none; z-index:5; line-height:1; }
#phase-big small { display:block; font:500 12px var(--display); color:var(--dim); letter-spacing:.2em; text-transform:uppercase; margin-top:8px; }
#phase-big.pop { animation:phasepop .55s var(--ease); } @keyframes phasepop { from { transform:translateX(80px); opacity:0 } }

#logbox { position:absolute; right:12px; top:58px; width:330px; max-height:300px; overflow:auto; z-index:30; background:var(--glass); backdrop-filter:blur(18px); border:1px solid var(--line); border-radius:16px; padding:10px 14px; font-size:13px; line-height:1.4; }
#logbox .l { margin:3px 0; color:var(--dim); } #logbox .l.p { color:var(--accent); } #logbox .l.o { color:var(--foe); } #logbox .l.ko { color:var(--warn); }

/* ===== buttons ===== */
button.big { font:600 14px var(--ui); letter-spacing:.01em; color:#fff; background:var(--brand); border:0; border-radius:999px; padding:14px 26px; cursor:pointer; transition:background .15s, transform .15s var(--ease); }
button.big:hover:not(:disabled) { background:var(--brand2); transform:translateY(-1px); }
button.big.alt { color:var(--muted); background:var(--chip2); backdrop-filter:blur(12px); }
button.big.alt:hover:not(:disabled) { color:var(--fg); background:var(--chip3); }
button.big:disabled { opacity:.35; cursor:not-allowed; }
button.link { background:none; border:0; color:var(--dim); font:inherit; text-decoration:underline; cursor:pointer; margin-top:10px; }

#move-menu { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); z-index:35; max-width:1000px; background:var(--glass); backdrop-filter:blur(24px) saturate(1.4); -webkit-backdrop-filter:blur(24px) saturate(1.4); border:1px solid var(--line2); border-radius:24px; padding:20px 24px; text-align:center; box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.7); animation:popc .22s var(--ease); }
@keyframes popc { from { transform:translate(-50%,-46%) scale(.96); opacity:0 } }
.mm-title { font:600 12px var(--display); letter-spacing:.2em; margin-bottom:12px; color:var(--fg); text-transform:uppercase; }
#mm-eff { display:block; margin-top:6px; font:400 13px var(--ui); color:var(--dim); letter-spacing:0; text-transform:none; }
.mvrow { display:flex; gap:12px; justify-content:center; }
button.mv { width:176px; padding:14px 10px; background:var(--chip); border:1px solid var(--line); border-radius:16px; color:var(--fg); cursor:pointer; display:flex; flex-direction:column; align-items:center; gap:3px; font-family:var(--ui); transition:transform .15s var(--ease), border-color .15s, background .15s; }
button.mv:hover:not(:disabled) { transform:translateY(-3px); border-color:var(--accent); background:var(--chip2); box-shadow:0 0 28px rgba(141,134,255,.25); }
button.mv:disabled { opacity:.35; cursor:not-allowed; }
button.mv .sym { font-size:28px; line-height:1.1; } button.mv .mn { font:600 12px var(--display); letter-spacing:.2em; color:var(--fg); } button.mv small { font:400 12px var(--ui); color:var(--dim); text-align:center; line-height:1.3; }
.sup-h { margin-top:14px; color:var(--accent); } .sup-h i { font:400 12px var(--ui); letter-spacing:0; text-transform:none; color:var(--dim); }
#sup-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-top:8px; max-width:900px; }
button.supbtn { width:128px; min-height:78px; padding:8px 10px; border-radius:14px; border:1px solid var(--line); background:var(--chip); color:var(--fg); cursor:pointer; text-align:left; font:500 13px var(--ui); transition:border-color .15s, background .15s; }
button.supbtn b { display:block; font:600 13px var(--ui); } button.supbtn small { display:block; font:400 11.5px var(--ui); color:var(--dim); line-height:1.3; margin-top:2px; } button.supbtn small.c { color:var(--foe); }
button.supbtn:hover:not(:disabled) { border-color:var(--accent); } button.supbtn.sel { border-color:var(--accent); background:rgba(141,134,255,.16); box-shadow:0 0 20px rgba(141,134,255,.3); }
button.supbtn:disabled { opacity:.35; cursor:not-allowed; }

#banner { position:absolute; left:0; right:0; top:262px; text-align:center; pointer-events:none; opacity:0; transform:scale(1.1); transition:opacity .25s, transform .3s var(--ease); z-index:60; padding:18px 0; background:linear-gradient(90deg,transparent,rgba(7,7,11,.9) 18%,rgba(7,7,11,.9) 82%,transparent); }
#banner.show { opacity:1; transform:scale(1); }
#banner .bt { font:700 58px var(--display); letter-spacing:-.04em; color:var(--fg); line-height:1.05; }
#banner .bs { font:500 14px var(--display); letter-spacing:.24em; color:var(--dim); margin-top:8px; text-transform:uppercase; }
#banner.turn.o .bt, #banner.atk.o .bt { color:var(--foe); } #banner.ko .bt { color:var(--warn); } #banner.turn.p .bt { color:var(--fg); }
#toast { position:absolute; left:50%; top:604px; transform:translate(-50%,10px); background:var(--glass); backdrop-filter:blur(18px); border:1px solid var(--line2); color:var(--fg); padding:9px 22px; border-radius:999px; font:500 15px var(--ui); opacity:0; pointer-events:none; transition:opacity .2s, transform .25s var(--ease); z-index:70; white-space:nowrap; }
#toast.show { opacity:1; transform:translate(-50%,0); }
#played { position:absolute; left:50%; top:50%; width:300px; transform:translate(-50%,-50%); z-index:50; pointer-events:none; }
#played img { width:100%; display:block; border-radius:16px; filter:drop-shadow(0 0 40px var(--g,#8d86ff)); animation:playedin .5s var(--ease) forwards; }
#played img.out { animation:playedout .45s ease-in forwards; }
@keyframes playedin { from { transform:translateY(200px) scale(.4); opacity:0 } to { transform:none; opacity:1 } }
@keyframes playedout { to { transform:scale(1.25); opacity:0; filter:brightness(3) blur(4px) } }
.float { position:absolute; z-index:15; pointer-events:none; font:700 32px var(--display); letter-spacing:-.02em; text-shadow:0 2px 10px rgba(0,0,0,.8); white-space:nowrap; }

/* ===== 3D beast card ===== */
.card3d { position:relative; height:100%; perspective:900px; }
.card3d .sway { position:absolute; inset:0; transform-style:preserve-3d; animation:sway 6s ease-in-out infinite; }
@keyframes sway { 0%,100% { transform:rotateY(-9deg) rotateX(3deg) } 50% { transform:rotateY(9deg) rotateX(-3deg) } }
.card3d .slab { position:absolute; inset:0; transform-style:preserve-3d; transition:transform .12s ease-out; cursor:grab; touch-action:none; }
.card3d .slab.spring { transition:transform .8s cubic-bezier(.2,1.9,.4,1); }
.card3d .slab:active { cursor:grabbing; }
.card3d .face { position:absolute; inset:0; border-radius:14px; backface-visibility:hidden; }
.card3d .front { transform:translateZ(8px); background-size:100% 100%; background-position:center; background-color:#0c0c12; }
.card3d .back { transform:rotateY(180deg) translateZ(8px); display:grid; place-items:center; font:700 60px var(--display); color:var(--accent); border:1px solid var(--line2); background:radial-gradient(circle at 50% 40%, #22204a, #07070b 80%); }
.card3d .edge { position:absolute; background:linear-gradient(90deg, #07070b, var(--ac,#8d86ff), #07070b); }
.card3d .edge.l, .card3d .edge.r { top:6px; bottom:6px; width:16px; transform:rotateY(90deg); } .card3d .edge.l { left:-8px; } .card3d .edge.r { right:-8px; }
.card3d .edge.t, .card3d .edge.b { left:6px; right:6px; height:16px; transform:rotateX(90deg); } .card3d .edge.t { top:-8px; } .card3d .edge.b { bottom:-8px; }
.card3d .glare { position:absolute; inset:0; border-radius:14px; transform:translateZ(9px); pointer-events:none; background:radial-gradient(circle at var(--mx,30%) var(--my,20%), rgba(255,255,255,.28), transparent 55%); mix-blend-mode:overlay; }
.card3d .hitov { position:absolute; inset:0; border-radius:14px; transform:translateZ(70px); pointer-events:none; background:rgba(255,60,80,.45); opacity:0; }
.card3d .empty { position:absolute; inset:0; display:grid; place-items:center; font:600 11px var(--display); letter-spacing:.24em; color:rgba(255,255,255,.25); text-align:center; transform:translateZ(12px); }
.card3d .shadow3d { position:absolute; left:8%; right:8%; bottom:-12px; height:20px; border-radius:50%; background:radial-gradient(ellipse, rgba(0,0,0,.7), transparent 70%); }
.card3d.none .slab { opacity:.25; } .card3d:not(.none) .empty { display:none; } .card3d.none .frameov { display:none; }
.card3d.fx-hit { animation:cshake .5s; } .card3d.fx-hit .hitov { animation:hitov .5s; }
@keyframes cshake { 0%,100% { transform:translateX(0) } 20% { transform:translateX(-12px) } 40% { transform:translateX(10px) } 60% { transform:translateX(-6px) } 80% { transform:translateX(4px) } }
@keyframes hitov { 0%,100% { opacity:0 } 20% { opacity:1 } }
.card3d.fx-summon .slab { animation:summon3d .9s var(--ease); } @keyframes summon3d { 0% { transform:scale(.2) rotateY(-270deg); opacity:0 } 100% { transform:none; opacity:1 } }
.card3d.fx-evolve .slab { animation:evo3d 1.3s ease-in-out; } @keyframes evo3d { 0% { transform:none } 50% { transform:rotateY(540deg) scale(1.18) } 100% { transform:rotateY(720deg) } }
.card3d.fx-evolve .front, .card3d.fx-heal .front, .card3d.fx-buff .front { animation:glowfx 1s; }
.card3d.fx-heal .front { --gc:#4ade9a; } .card3d.fx-buff .front { --gc:#8d86ff; } .card3d.fx-evolve .front { --gc:#ffffff; animation-duration:1.3s; }
@keyframes glowfx { 40% { box-shadow:inset 0 0 70px var(--gc), 0 0 40px var(--gc); } }
.card3d.fx-ko { animation:kofx 1s forwards; } @keyframes kofx { to { opacity:0; transform:translateY(30px) scale(.9); } }

/* animated element frame (only while the card is in play) */
@property --a { syntax:'<angle>'; inherits:false; initial-value:0deg; }
.frameov { position:absolute; inset:-2px; border-radius:16px; padding:5px; transform:translateZ(11px); pointer-events:none;
  background:conic-gradient(from var(--a), var(--f1), var(--f2), var(--f3), var(--f2), var(--f1));
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask:linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
  animation:spinf var(--fs,4s) linear infinite, glowp var(--gs,2.4s) ease-in-out infinite; }
@keyframes spinf { to { --a:360deg; } }
@keyframes glowp { 0%,100% { filter:drop-shadow(0 0 4px var(--f2)) brightness(.9); } 50% { filter:drop-shadow(0 0 14px var(--f2)) brightness(1.25); } }
.card3d[data-attr=fire]  { --f1:#c4631f; --f2:#ffb347; --f3:#4a1a08; --fs:3.2s; --gs:1.1s; }
.card3d[data-attr=water] { --f1:#1f4f8c; --f2:#e6f2ff; --f3:#0a2244; --fs:7s; --gs:3.4s; }
.card3d[data-attr=plant] { --f1:#2f7a36; --f2:#b6e06a; --f3:#2a1c0e; --fs:9s; --gs:4s; }
.card3d[data-attr=plasma]  { --f1:#6a3cff; --f2:#5ee8ff; --f3:#1a1050; --fs:1.8s; --gs:.9s; }
.card3d[data-attr=fire] .frameov { animation-timing-function:linear, steps(6,end); }
.card3d[data-attr=plasma] .frameov { animation:spinf var(--fs) linear infinite, zap 1.4s steps(1,end) infinite; }
@keyframes zap { 0%{filter:drop-shadow(0 0 4px #5ee8ff) brightness(1);} 8%{filter:drop-shadow(0 0 20px #fff) brightness(1.8);} 12%{filter:drop-shadow(0 0 4px #5ee8ff) brightness(.8);} 40%{filter:drop-shadow(0 0 10px #5ee8ff) brightness(1.2);} 44%{filter:drop-shadow(0 0 24px #fff) brightness(2);} 50%{filter:drop-shadow(0 0 6px #5ee8ff) brightness(1);} 100%{filter:drop-shadow(0 0 8px #5ee8ff) brightness(1.1);} }
.card3d[data-attr=fire] .edge { background:linear-gradient(90deg,#150c06,#c4631f,#150c06); } .card3d[data-attr=water] .edge { background:linear-gradient(90deg,#08121f,#8fb4d8,#08121f); }
.card3d[data-attr=plant] .edge { background:linear-gradient(90deg,#0c1308,#5a8a3a,#0c1308); } .card3d[data-attr=plasma] .edge { background:linear-gradient(90deg,#0a0818,#7a5cff,#0a0818); }

/* ===== attack scene ===== */
#battle { position:absolute; inset:0; z-index:45; background:radial-gradient(ellipse 70% 60% at 50% 105%, rgba(48,28,233,.35), transparent 70%), radial-gradient(ellipse at 50% 30%, #12121c, #07070b 75%); animation:fadein .3s; overflow:hidden; }
@keyframes fadein { from { opacity:0 } }
#battle::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(255,255,255,.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.03) 1px, transparent 1px); background-size:64px 64px; -webkit-mask:linear-gradient(transparent 20%, #000 90%); mask:linear-gradient(transparent 20%, #000 90%); }
#bs-dim { position:absolute; inset:0; background:#000; opacity:0; transition:opacity .4s; }
#bs-floor { position:absolute; left:0; right:0; top:560px; bottom:0; background:linear-gradient(rgba(141,134,255,.10), rgba(7,7,11,.9)); border-top:1px solid var(--line2); }
.bs-hp { position:absolute; top:40px; width:520px; z-index:2; } .bs-hp.l { left:40px; } .bs-hp.r { right:40px; }
.bs-hp .bn { font:700 26px var(--display); letter-spacing:-.03em; margin-bottom:8px; }
.bs-hp.r .bn { text-align:right; }
.bs-hp .bar { position:relative; height:22px; border-radius:999px; background:rgba(255,255,255,.08); border:1px solid var(--line); overflow:hidden; }
.bs-hp .fill { position:absolute; left:0; top:0; bottom:0; width:100%; border-radius:999px; background:linear-gradient(90deg,#2fcf86,#6af0b3); transition:width .9s var(--ease); } .bs-hp .fill.mid { background:linear-gradient(90deg,#e8a516,#fbd24a); } .bs-hp .fill.low { background:linear-gradient(90deg,#e8384a,#ff7a86); }
.bs-hp.r .fill { left:auto; right:0; }
.bs-hp .bar span { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font:600 12px var(--display); letter-spacing:.1em; text-shadow:0 1px 3px rgba(0,0,0,.7); }
.spr { position:absolute; top:230px; width:400px; height:400px; object-fit:contain; object-position:bottom; filter:drop-shadow(0 18px 24px rgba(0,0,0,.7)); }
#bs-l { left:130px; } #bs-r { left:750px; } .spr.flip { transform:scaleX(-1); }
#bs-fx { position:absolute; inset:0; pointer-events:none; }
#bs-flash { position:absolute; inset:0; background:#fff; opacity:0; pointer-events:none; }
.orb { position:absolute; border-radius:50%; pointer-events:none; }
.bubble { position:absolute; width:340px; height:340px; border-radius:50%; background:radial-gradient(circle, rgba(141,134,255,.05), rgba(141,134,255,.22)); border:2px solid rgba(200,196,255,.9); box-shadow:0 0 40px rgba(141,134,255,.8), inset 0 0 40px rgba(141,134,255,.6); pointer-events:none; }
.dmgnum { position:absolute; font:700 76px var(--display); letter-spacing:-.04em; text-shadow:0 0 8px #000, 0 4px 0 rgba(0,0,0,.6); pointer-events:none; white-space:nowrap; }
.ring { position:absolute; border-radius:50%; pointer-events:none; border:6px solid #fff; width:200px; height:200px; }
.rays { position:absolute; width:700px; height:700px; border-radius:50%; pointer-events:none; -webkit-mask:radial-gradient(circle, #000 20%, transparent 68%); mask:radial-gradient(circle, #000 20%, transparent 68%); }
.hitlabel { position:absolute; font:700 22px var(--display); letter-spacing:.14em; text-transform:uppercase; pointer-events:none; text-shadow:0 0 14px currentColor, 0 3px 0 #000; white-space:nowrap; }

/* ===== screens ===== */
.screen { position:absolute; inset:0; z-index:80; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; background:rgba(7,7,11,.82); backdrop-filter:blur(10px); padding:16px; }
.logo { font:700 92px var(--display); letter-spacing:-.05em; line-height:.95; color:var(--fg); }
.logo span { color:var(--accent); margin-left:.1em; text-shadow:0 0 60px rgba(141,134,255,.45); }
.tag { display:flex; align-items:center; gap:12px; font:500 12px var(--display); letter-spacing:.3em; color:var(--dim); text-transform:uppercase; }
.tag::before, .sel-h::before { content:''; width:8px; height:8px; background:var(--accent); display:inline-block; }
.sel-h { display:flex; align-items:center; gap:12px; font:500 11px var(--display); letter-spacing:.24em; color:var(--dim); margin-top:2px; }
.btnrow { display:flex; gap:12px; margin-top:6px; }
.card-panel { width:720px; padding:28px 32px; border-radius:24px; background:var(--glass); backdrop-filter:blur(24px); border:1px solid var(--line2); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.7); }
.card-panel h2 { font:700 34px var(--display); letter-spacing:-.04em; margin:0 0 10px; }
.card-panel ul { padding-left:18px; margin:0 0 18px; font-size:15px; line-height:1.45; color:var(--muted); } .card-panel li { margin:6px 0; } .card-panel b { color:var(--fg); font-weight:600; }
#howto { z-index:90; } #end { z-index:85; background:rgba(7,7,11,.9); }
#end-title { font:700 120px var(--display); letter-spacing:-.05em; line-height:1; }
#end.win #end-title { color:var(--fg); text-shadow:0 0 80px rgba(141,134,255,.6); } #end.lose #end-title { color:var(--foe); text-shadow:0 0 80px rgba(255,107,122,.5); }
#end-why { font:500 13px var(--display); letter-spacing:.24em; color:var(--dim); text-transform:uppercase; }
#end-stats { display:flex; gap:40px; margin:14px 0; } #end-stats div { text-align:center; } #end-stats b { display:block; font:700 40px var(--display); letter-spacing:-.03em; } #end-stats span { color:var(--dim); font:500 11px var(--display); letter-spacing:.2em; text-transform:uppercase; }

/* battle portraits are tall framed artwork */
.spr { top:160px; width:470px; height:470px; }
#bs-l { left:95px; } #bs-r { left:715px; }

img.isym { height:1.05em; width:auto; vertical-align:-.17em; margin:0 .1em; filter:drop-shadow(0 0 4px currentColor); }
.bs-hp .bn img.isym { height:.9em; }

/* ---- deck pile + hand: cards deal out of the pile ---- */
@keyframes dealt { from { transform:translate(var(--dx,260px),-6px) scale(.55) rotate(-8deg); opacity:0 } 25% { opacity:1 } }
.pile { position:absolute; bottom:6px; width:84px; height:118px; }
.pile img { position:absolute; left:0; top:0; width:84px; border-radius:7px; box-shadow:0 4px 10px rgba(0,0,0,.7); }
.pile img:nth-child(1) { transform:translate(0,0); } .pile img:nth-child(2) { transform:translate(3px,-3px); } .pile img:nth-child(3) { transform:translate(6px,-6px); }
.pile b { position:absolute; left:6px; right:0; top:42px; text-align:center; font:700 26px var(--display); color:#fff; text-shadow:0 2px 8px #000; z-index:3; }
.pile small { position:absolute; left:6px; right:0; top:76px; text-align:center; font:600 9px var(--display); letter-spacing:.22em; color:rgba(255,255,255,.7); z-index:3; }
.pile.empty img { opacity:.25; }
.side.o .hand .pile { top:4px; bottom:auto; } .side.o .hand .back { top:4px; }

/* ===== slimmer layout: no slot column, wider middle with just the stage + buttons ===== */
.side { width:520px; } #side-o { left:748px; }
#mid { left:540px; width:200px; gap:12px; }
.field { grid-template-columns:200px 1fr; position:relative; }
#phase-big { position:static; right:auto; bottom:auto; text-align:center; font-size:36px; line-height:1; margin-bottom:6px; }
#phase-big small { font-size:11px; margin-top:8px; }
#mid .big { width:170px; padding:14px 6px; font-size:13px; }
#btn-back { font-size:12px; margin-top:0; }
#rd { margin-left:auto; font:600 11px var(--display); letter-spacing:.22em; color:var(--dim); font-style:normal; }
.hbtns { margin-left:18px; }
.fa { display:none; align-items:center; margin-left:10px; padding:3px 10px; border-radius:999px; background:var(--brand); color:#fff; font:600 9.5px var(--display); letter-spacing:.16em; box-shadow:0 0 16px rgba(48,28,233,.6); }
.deckbar .kos { margin-left:auto; }
.chips { position:absolute; left:16px; bottom:16px; display:flex; flex-direction:column; gap:5px; z-index:4; pointer-events:none; }
.chip { align-self:flex-start; padding:3px 9px; border-radius:999px; font:600 9px var(--display); letter-spacing:.12em; color:#fff; background:rgba(141,134,255,.85); box-shadow:0 0 12px rgba(141,134,255,.6); animation:slotin .35s var(--ease); }
.chip.bad { background:rgba(255,107,122,.9); }
.hc.sel { transform:translateY(-34px) scale(1.06); outline:3px solid #ffe27a; outline-offset:-1px; z-index:70 !important; filter:none; box-shadow:0 0 28px rgba(255,226,122,.7), 0 10px 24px rgba(0,0,0,.6); }
.pile .cnt { position:absolute; left:0; right:0; top:-26px; display:flex; gap:10px; justify-content:center; font:600 13px var(--display); color:var(--fg); }
.pile .cnt span { display:inline-flex; align-items:center; gap:4px; padding:2px 8px; border-radius:999px; background:var(--chip2); } .pile .cnt svg { width:14px; height:14px; } .pile .cnt b { font-weight:600; }
.side.o .hand .pile .cnt { top:124px; }
.pile .cnt b { position:static; display:inline; width:auto; text-align:left; font:600 13px var(--display); color:var(--fg); text-shadow:none; }
.pile small { display:none; }

.card3d .back { background:var(--cardback) center/100% 100% no-repeat, radial-gradient(circle at 50% 40%, #22204a, #07070b 80%); font-size:0; border:0; }


/* ===================== ARENA UI (revamp) ===================== */
#bg { background:#05050c url(assets/arena.webp) center 38%/cover no-repeat; }
#bg::before { content:''; position:absolute; inset:0; opacity:1; background:linear-gradient(rgba(5,5,14,.55), rgba(5,5,14,.12) 22%, rgba(5,5,14,.25) 60%, rgba(5,5,14,.7)); -webkit-mask:none; mask:none; background-size:auto; animation:none; }
#bg::after { background:radial-gradient(ellipse at 50% 45%, transparent 40%, rgba(0,0,0,.6) 100%); }

#header { height:64px; padding:0 40px; background:linear-gradient(rgba(5,5,14,.85), transparent); border:0; box-shadow:none; backdrop-filter:none; -webkit-backdrop-filter:none; }
.hlogo { height:46px; width:auto; filter:drop-shadow(0 0 12px rgba(120,90,255,.5)); }
#stepper { position:absolute; left:50%; top:12px; transform:translateX(-50%); display:flex; align-items:center; gap:14px; padding:10px 28px; border-radius:999px; background:rgba(10,10,28,.7); border:1px solid var(--line); backdrop-filter:blur(14px); }
#stepper span { display:flex; align-items:center; gap:9px; font:600 11px var(--display); letter-spacing:.2em; color:rgba(255,255,255,.42); transition:color .3s; }
#stepper span i { width:10px; height:10px; border-radius:50%; background:rgba(255,255,255,.28); transition:all .3s var(--ease); }
#stepper span.done { color:rgba(255,255,255,.6); } #stepper span.done i { background:#8d86ff; }
#stepper span.on { color:#fff; } #stepper span.on i { width:16px; height:16px; background:#6a4aff; box-shadow:0 0 0 3px rgba(141,134,255,.35), 0 0 18px #8d6bff; }
#stepper u { width:14px; height:1px; background:rgba(255,255,255,.25); }
#hintline { position:absolute; left:0; right:0; top:68px; text-align:center; z-index:3; pointer-events:none; }
#hdr-m { font:500 14px var(--ui); color:#cfcbe8; text-shadow:0 2px 8px #000; padding:3px 14px; border-radius:999px; background:rgba(5,5,14,.45); }
#hdr-m:empty { display:none; }
.hbtns { margin-left:auto; }
.hbtns button { background:rgba(10,10,28,.7); border:1px solid var(--line); }

.side { top:104px; width:500px; height:600px; }
#side-p { left:48px; } #side-o { left:732px; }
.deckbar { background:rgba(10,10,28,.78); backdrop-filter:blur(12px); height:36px; border-radius:10px; }
.field { background:rgba(8,8,24,.78); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); margin-top:8px; border-radius:14px; }
#mid { left:548px; top:146px; width:184px; height:318px; gap:10px; justify-content:center; }
#rd { text-align:center; font:600 12px var(--display); letter-spacing:.24em; color:var(--muted); }
#rd small { display:block; margin-top:4px; font-size:9px; letter-spacing:.2em; color:var(--dim); }
#phase-big { font-size:34px; margin:2px 0; text-shadow:0 0 24px rgba(141,134,255,.45); }
#vs { display:flex; align-items:center; gap:10px; font:700 13px var(--display); color:#d9d2ff; letter-spacing:.18em; }
#vs i { width:44px; height:1px; background:linear-gradient(90deg, transparent, rgba(160,140,255,.8)); } #vs i:last-child { background:linear-gradient(90deg, rgba(160,140,255,.8), transparent); }
#mid .big { width:164px; }

.hlabel { position:absolute; top:392px; font:600 11px var(--display); letter-spacing:.24em; color:var(--muted); text-shadow:0 2px 8px #000; }
#side-p .hlabel { left:176px; } #side-o .hlabel { left:28px; }
.hand { position:absolute !important; left:0; top:416px; width:660px; height:168px; margin:0 !important; }
.hc { width:112px; bottom:0; }
.side.o .hand .back { width:80px; top:auto; bottom:0; }
.pile { bottom:0; top:auto; width:84px; height:118px; }
.side.o .hand .pile { top:auto; bottom:0; }
.pile .plabel { position:absolute; left:-6px; right:-6px; top:-26px; display:block; text-align:center; font:600 10px var(--display); letter-spacing:.2em; color:var(--muted); text-shadow:0 2px 8px #000; z-index:3; }
.pile .plabel b { position:static; display:inline; font:700 14px var(--display); color:#fff; letter-spacing:.04em; margin-left:6px; }
#side-p .pile.deck { left:-14px; } #side-p .pile.disc { left:80px; }
#side-o .pile.disc { left:356px; } #side-o .pile.deck { left:450px; }
.pile.disc img { filter:brightness(.65) saturate(.7); }
#preview { left:509px; top:70px; }

/* attack scene: we are standing inside the arena — the image is zoomed in on the glossy floor and keeps pushing in */
#battle { background:#05050c; }
#battle::before { content:''; position:absolute; inset:0; background:url(assets/arena.webp) 50% 60%/cover no-repeat; transform:scale(1.5); transform-origin:50% 70%; animation:arenaPush 9s ease-out forwards; -webkit-mask:none; mask:none; opacity:1; }
@keyframes arenaPush { from { transform:scale(1.35); } to { transform:scale(1.85); } }
#battle::after { background:radial-gradient(ellipse at 50% 55%, transparent 35%, rgba(0,0,0,.65) 100%), linear-gradient(rgba(5,5,14,.5), transparent 30%); }
#bs-floor { background:linear-gradient(transparent, rgba(5,5,14,.45)); border-top:0; }
#hdr-t { display:none !important; }
#rd { margin:0 !important; }
@keyframes phasepop { from { transform:scale(.8); opacity:0 } }

/* smaller piles, face-up rival hand */
.pile { width:60px; height:86px; } .pile img { width:60px; }
.pile .plabel { top:-20px; left:-10px; right:-10px; font-size:8.5px; letter-spacing:.14em; } .pile .plabel b { font-size:12px; margin-left:4px; }
#side-p .pile.deck { left:-14px; } #side-p .pile.disc { left:54px; }
#side-o .pile.disc { left:388px; } #side-o .pile.deck { left:456px; }
#side-p .hlabel { left:132px; } #side-o .hlabel { left:24px; }
.side.o .hand .back { width:88px; cursor:pointer; border-radius:6px; filter:none; }

/* ---- both beast cards face off in the middle; stats on the outer sides ---- */
#side-p .field { grid-template-columns:1fr 200px; }
#side-p .field .stats { order:1; } #side-p .field .card3d { order:2; }
#side-p .chips { left:auto; right:16px; }
/* ---- discard: last card face-up, turned sideways, sitting above the deck ---- */
.pile.disc { top:-8px !important; bottom:auto !important; width:96px; height:64px; }
.pile.disc .dtop { position:absolute; inset:0; }
.pile.disc .dtop img { position:absolute; width:64px; left:16px; top:-16px; transform:rotate(90deg); border-radius:7px; box-shadow:0 4px 14px rgba(0,0,0,.75); filter:none; }
.pile.disc.empty .dtop::after { content:''; position:absolute; inset:2px; border:1.5px dashed rgba(255,255,255,.25); border-radius:8px; }
.pile.disc .plabel { top:-22px; left:0; right:0; }
#side-p .pile.deck { left:-14px; } #side-p .pile.disc { left:-32px; }
#side-o .pile.deck { left:456px; } #side-o .pile.disc { left:438px; }
#side-p .hlabel { left:84px; } #side-o .hlabel { left:16px; }

.card3d[data-attr=alloy]  { --f1:#d9a820; --f2:#fff6c8; --f3:#5a4208; --fs:8s; --gs:3s; }
.card3d[data-attr=shadow] { --f1:#a01020; --f2:#ff5a6a; --f3:#1a0408; --fs:5s; --gs:2s; }
.card3d[data-attr=alloy] .edge { background:linear-gradient(90deg,#100c04,#e8c860,#100c04); } .card3d[data-attr=shadow] .edge { background:linear-gradient(90deg,#0a0204,#c02438,#0a0204); }

/* ---- in-game confirm dialog ---- */
#confirm { position:absolute; inset:0; z-index:200; display:grid; place-items:center; background:rgba(3,3,10,.65); backdrop-filter:blur(6px); }
.cf-box { width:420px; padding:28px 30px 24px; border-radius:22px; text-align:center; background:var(--glass); backdrop-filter:blur(22px); border:1px solid var(--line2); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.75); animation:pop .2s var(--ease); }
#cf-t { font:700 24px var(--display); letter-spacing:-.02em; } .cf-box p { margin:10px 0 22px; color:var(--muted); font:400 15px var(--ui); }
.cf-btns { display:flex; gap:12px; justify-content:center; } .cf-btns .big { padding:12px 22px; font-size:13px; }
/* ---- hover details on the right-hand side ---- */
#preview { left:auto !important; right:18px; top:78px !important; width:270px; z-index:60; }

/* ===== buttons: PLAY-style gradient pill with a subtle breathing glow and a passing glimmer ===== */
button.big { position:relative; overflow:hidden; display:inline-flex; align-items:center; justify-content:center; gap:10px; border-radius:999px; border:0; padding:15px 28px; color:#fff; font:600 13px var(--display); letter-spacing:.22em; text-transform:uppercase;
  background:linear-gradient(90deg,#7e5fff,#4a2cff); box-shadow:0 0 26px rgba(110,70,255,.45), inset 0 1px 0 rgba(255,255,255,.3); animation:btnGlow 3.6s ease-in-out infinite; transition:transform .2s var(--ease), box-shadow .2s, filter .2s; }
button.big::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:38%; pointer-events:none; transform:skewX(-20deg);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation:btnGlimmer 4.8s ease-in-out infinite; }
button.big:hover:not(:disabled) { transform:translateY(-2px) scale(1.03); box-shadow:0 0 44px rgba(130,90,255,.75), inset 0 1px 0 rgba(255,255,255,.35); filter:none; }
button.big.alt { color:#e9e6ff; background:linear-gradient(90deg, rgba(255,255,255,.12), rgba(255,255,255,.06)); border:1.5px solid rgba(255,255,255,.35); box-shadow:0 0 18px rgba(141,134,255,.2), inset 0 1px 0 rgba(255,255,255,.15); animation:btnGlowAlt 3.6s ease-in-out infinite; }
button.big.alt:hover:not(:disabled) { background:linear-gradient(90deg, rgba(255,255,255,.2), rgba(255,255,255,.1)); border-color:#fff; box-shadow:0 0 30px rgba(160,140,255,.5); }
button.big:disabled { animation:none; box-shadow:none; opacity:.38; filter:grayscale(.6); cursor:not-allowed; } button.big:disabled::after { display:none; }
@keyframes btnGlow { 0%,100% { box-shadow:0 0 18px rgba(110,70,255,.32), inset 0 1px 0 rgba(255,255,255,.3); } 50% { box-shadow:0 0 38px rgba(130,90,255,.62), inset 0 1px 0 rgba(255,255,255,.34); } }
@keyframes btnGlowAlt { 0%,100% { box-shadow:0 0 10px rgba(141,134,255,.12), inset 0 1px 0 rgba(255,255,255,.15); } 50% { box-shadow:0 0 24px rgba(141,134,255,.34), inset 0 1px 0 rgba(255,255,255,.2); } }
@keyframes btnGlimmer { 0%,55% { left:-60%; } 100% { left:140%; } }
#mid .big { width:168px; padding:15px 6px; font-size:12px; }
.cf-btns .big, .btnrow .big { padding:13px 24px; }
/* landing PLAY / HOW TO PLAY get the same breathing glow + glimmer */
.lp-play { position:relative; overflow:hidden; animation:btnGlow 3.6s ease-in-out infinite; }
.lp-play::after { content:''; position:absolute; top:0; bottom:0; left:-60%; width:38%; pointer-events:none; transform:skewX(-20deg); background:linear-gradient(90deg, transparent, rgba(255,255,255,.34), transparent); animation:btnGlimmer 4.8s ease-in-out infinite; }
.lp-how { animation:btnGlowAlt 3.6s ease-in-out infinite; }
.calm button.big, .calm button.big::after, .calm .lp-play, .calm .lp-play::after, .calm .lp-how { animation:none !important; }

/* ---- hover preview: centred, card on the left and details in their own panel on the right, over a softly blurred backdrop ---- */
#preview { position:absolute !important; inset:0 !important; left:0 !important; right:0 !important; top:0 !important; width:auto !important; display:flex; align-items:center; justify-content:center; z-index:90; pointer-events:none; filter:none !important;
  background:rgba(4,4,14,.5); backdrop-filter:blur(7px); -webkit-backdrop-filter:blur(7px); }
#preview:not(.show) { opacity:0; }
#preview .pv { display:flex; align-items:center; gap:22px; transform:scale(.97); transition:transform .18s var(--ease); }
#preview.show .pv { transform:none; }
#preview .pv img { width:300px; height:auto; border-radius:16px; filter:drop-shadow(0 18px 44px rgba(0,0,0,.8)); }
#preview .pvside { width:340px; display:flex; flex-direction:column; gap:10px; }
#preview .zname { font:700 26px var(--display); letter-spacing:-.02em; color:#fff; } #preview .zname small { display:block; margin-top:4px; font:600 10px var(--display); letter-spacing:.22em; color:var(--dim); }
#preview .zdet { margin:0; padding:14px; border-radius:16px; background:rgba(14,14,34,.85); border:1px solid var(--line2); box-shadow:inset 0 1px 0 rgba(255,255,255,.1), 0 18px 50px rgba(0,0,0,.6); }
#preview .zr { padding:8px 10px; margin-bottom:6px; font-size:14px; } #preview .zr b { font-size:20px; } #preview .zr u { font-size:12px; }
#preview .zs { font-size:14px; margin-top:8px; line-height:1.4; } #preview .zk { font-size:11px; margin-top:8px; }
#preview .zx { margin:0; padding:8px 12px; border-radius:12px; background:rgba(14,14,34,.85); border:1px solid var(--line); font-size:13px; color:var(--muted); text-align:center; }

/* ---- preview: back to the earlier compact size; only a soft, feathered patch around it is blurred and dimmed ---- */
#preview { background:none !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; }
#preview .pv { position:relative; gap:16px; }
#preview .pv::before { content:''; position:absolute; inset:-70px -90px; z-index:-1; border-radius:50%; pointer-events:none;
  background:rgba(4,4,14,.42); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
  -webkit-mask:radial-gradient(ellipse at center, #000 38%, rgba(0,0,0,.6) 62%, transparent 100%); mask:radial-gradient(ellipse at center, #000 38%, rgba(0,0,0,.6) 62%, transparent 100%); }
#preview .pv img { width:262px; }
#preview .pvside { width:290px; gap:8px; }
#preview .zname { font-size:22px; }
#preview .zr { padding:6px 9px; margin-bottom:4px; font-size:13px; } #preview .zr b { font-size:18px; }
#preview .zs { font-size:12.5px; }

/* ---- preview: ONE combined card — artwork on the left, details filling the same height on the right ---- */
#preview .pv { gap:0; align-items:stretch; padding:10px; border-radius:22px; background:linear-gradient(135deg, rgba(20,20,48,.92), rgba(10,10,28,.92)); border:1px solid var(--line2);
  backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); box-shadow:inset 0 1px 0 rgba(255,255,255,.12), 0 30px 80px rgba(0,0,0,.7); }
#preview .pv::before { display:none; }
#preview .pv img { align-self:center; border-radius:14px; filter:none; }
#preview .pvside { width:300px; padding:6px 10px 6px 22px; justify-content:center; gap:12px; }
#preview .zdet { background:none; border:0; box-shadow:none; padding:0; }
#preview .zname { padding-bottom:10px; border-bottom:1px solid var(--line); }
#preview .zx { background:rgba(255,255,255,.06); border:0; }

#preview .zname span:first-child { display:block; }
.zchips { display:flex; gap:8px; margin-top:10px; }
.zc { padding:5px 11px; border-radius:999px; font:600 10px var(--display); letter-spacing:.14em; color:var(--muted); background:rgba(255,255,255,.07); border:1px solid var(--line); } .zc b { font-weight:700; letter-spacing:.06em; color:#fff; font-size:12px; }
.zc.asc { border-color:rgba(141,134,255,.55); background:rgba(106,74,255,.18); } .zc.asc b { color:#c8c0ff; }
.zc.chg { border-color:rgba(143,232,255,.45); background:rgba(80,190,220,.14); } .zc.chg b { color:#8fe8ff; }

img.mi { height:1.1em; width:auto; vertical-align:-.2em; filter:drop-shadow(0 0 3px rgba(255,255,255,.25)); }
.row i img.mi, .zr i img.mi { height:22px; width:22px; object-fit:contain; vertical-align:middle; filter:drop-shadow(0 1px 3px rgba(0,0,0,.6)); }
.row i { width:30px; } .zr i { width:24px; }
button.mv .sym img.mi.big { height:46px; width:auto; filter:drop-shadow(0 2px 8px rgba(141,134,255,.55)); }
img.mi.bn { height:1.15em; margin-right:.2em; }

/* the icons inside the preview must not inherit the big-card image sizing */
#preview .pv > img { width:262px; height:auto; }
#preview .pv img.mi, #preview .zr img.mi { width:22px !important; height:22px !important; border-radius:0; align-self:auto; }
#preview.act .pv { pointer-events:auto; }
.pvacts { display:flex; flex-direction:column; gap:7px; margin-top:4px; }
.pvacts:empty { display:none; }
.pvbtn { text-align:left; padding:9px 13px; border-radius:12px; border:1px solid rgba(141,134,255,.6); background:linear-gradient(90deg, rgba(126,95,255,.55), rgba(74,44,255,.45)); color:#fff; cursor:pointer; font:600 12px var(--display); letter-spacing:.14em; transition:transform .15s var(--ease), box-shadow .15s, border-color .15s; }
.pvbtn b { display:block; font-weight:700; } .pvbtn small { display:block; margin-top:3px; font:500 12px var(--ui); letter-spacing:0; color:rgba(255,255,255,.7); text-transform:none; }
.pvbtn.fuelb { border-color:rgba(143,232,255,.5); background:linear-gradient(90deg, rgba(70,170,200,.35), rgba(40,110,150,.3)); }
.pvbtn:hover:not(:disabled) { transform:translateY(-1px); box-shadow:0 0 22px rgba(130,90,255,.55); border-color:#fff; }
.pvbtn:disabled { opacity:.4; cursor:not-allowed; } .pvbtn:disabled small { color:#ff9aa6; }

/* ---- smaller hand cards; deck piles lie on their side like the discard ---- */
.hc { width:96px; }
.side.o .hand .back { width:76px; }
.pile.deck { top:auto !important; bottom:8px !important; width:96px; height:64px; }
.pile.deck img { position:absolute; width:64px; left:16px; top:-16px; border-radius:7px; box-shadow:0 4px 12px rgba(0,0,0,.75); }
.pile.deck img:nth-child(1) { transform:rotate(90deg) translate(0,6px); }
.pile.deck img:nth-child(2) { transform:rotate(90deg) translate(0,3px); }
.pile.deck img:nth-child(3) { transform:rotate(90deg); }
.pile.deck .plabel { top:-22px; left:0; right:0; }
#side-p .pile.deck { left:-32px; } #side-o .pile.deck { left:438px; }
#side-p .pile.disc { top:18px !important; } #side-o .pile.disc { top:18px !important; }

/* ===== HP in the middle: each top bar = [name + pack] [KOs] [HP bar toward the centre] [1ST badge at the centre edge] ===== */
.deckbar { gap:10px; padding:0 12px 0 14px; height:42px; }
.deckbar .dn { flex:none; font-size:10.5px; letter-spacing:.12em; white-space:nowrap; } .deckbar .dn b { font-weight:700; margin-right:2px; }
.deckbar .kos { margin-left:0; flex:none; }
.deckbar .hpbar { flex:1; min-width:120px; height:24px; margin:0; }
.deckbar .hpbar span { font-size:11px; }
.deckbar .fa { flex:none; margin-left:0; padding:3px 9px; font-size:9px; }
.side.o .deckbar { flex-direction:row-reverse; padding:0 14px 0 12px; box-shadow:inset -3px 0 0 var(--foe); }
.side.o .deckbar .hpfill { left:auto; right:0; }

/* ===== knock-out dots + 1st-attack badge sit at the centre edge of each top bar; name and pack on the outer side ===== */
.deckbar { height:38px; padding:0 14px; }
.deckbar .dn { font-size:11.5px; letter-spacing:.12em; }
.deckbar .mid { margin-left:auto; display:flex; align-items:center; gap:10px; }
.side.o .deckbar { flex-direction:row-reverse; box-shadow:inset -3px 0 0 var(--foe); }
.side.o .deckbar .mid { margin-left:0; margin-right:auto; flex-direction:row-reverse; }
.deckbar .fa { order:0; margin:0; font-size:9.5px; padding:3px 10px; }
.deckbar .kos { margin:0; }

/* ===== HP bar sits above the beast card; the freed room goes to the Support description ===== */
.field { height:332px; grid-template-columns:184px 1fr; }
#side-p .field { grid-template-columns:1fr 184px; }
#side-p .field .cardcol { order:2; } #side-p .field .stats { order:1; }
.cardcol { display:flex; flex-direction:column; gap:8px; min-height:0; height:100%; }
.cardcol .hpbar { flex:none; margin:0; height:26px; } .cardcol .card3d { flex:1; min-height:0; height:auto; }
.stats { height:100%; }
.stats .sup { flex:1; height:auto; min-height:70px; overflow:visible; display:flex; flex-direction:column; }
.stats .sup span { max-height:none; overflow:visible; font-size:13px; line-height:1.3; }
.stats .sup em { margin-top:auto; padding-top:4px; }
#mid { height:332px; }

/* ===== field beast: the card stays still; only the artwork reacts (parallax + zoom + light sweep) ===== */
.card3d .sway { animation:none !important; } .card3d .slab { cursor:default; transition:none; }
.card3d .front { background:none !important; overflow:visible; }
.fartwrap { position:absolute; left:2.73%; right:2.73%; top:1.82%; bottom:1.82%; overflow:hidden; border-radius:10px; }
.fart { position:absolute; inset:-7%; background-size:100% 100%; background-position:center; transform:translate(calc(var(--px,0) * -14px), calc(var(--py,0) * -12px)) scale(1.02); transition:transform .35s var(--ease); will-change:transform; }
.card3d.hot .fart { transform:translate(calc(var(--px,0) * -14px), calc(var(--py,0) * -12px)) scale(1.1); transition:transform .12s ease-out; }
.fui { position:absolute; inset:0; background-size:100% 100%; pointer-events:none; }
.fglow { position:absolute; left:2.73%; right:2.73%; top:1.82%; bottom:1.82%; border-radius:10px; pointer-events:none; opacity:0; transition:opacity .3s; mix-blend-mode:screen;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28), transparent 45%); }
.card3d.hot .fglow { opacity:1; }
.card3d .glare { display:none; }

/* ===== lives as crystals ===== */
.deckbar .lv { font:600 9.5px var(--display); letter-spacing:.2em; color:var(--muted); }
.deckbar .kos { display:flex; gap:7px; align-items:center; filter:drop-shadow(0 0 6px rgba(141,134,255,.55)); }
.side.o .deckbar .kos { filter:drop-shadow(0 0 6px rgba(255,90,110,.55)); }
.kos i { width:15px; height:24px; border:0 !important; border-radius:0; transform:none !important; box-shadow:none !important; background:linear-gradient(135deg,#3a3a4c,#1b1b26); clip-path:polygon(50% 0,100% 36%,50% 100%,0 36%); position:relative; transition:background .4s, transform .3s; }
.kos i.on { background:linear-gradient(90deg, rgba(255,255,255,.4) 0 50%, rgba(255,255,255,0) 50%), linear-gradient(160deg,#e4dcff,#8d6bff 55%,#4a2cff); animation:crystal 3.2s ease-in-out infinite; }
.side.o .kos i.on { background:linear-gradient(90deg, rgba(255,255,255,.4) 0 50%, rgba(255,255,255,0) 50%), linear-gradient(160deg,#ffd0d6,#ff4a5e 55%,#a0102a); }
.kos i:nth-child(2).on { animation-delay:-1s; } .kos i:nth-child(3).on { animation-delay:-2s; }
@keyframes crystal { 50% { filter:brightness(1.3); } }
.deckbar .mid { gap:12px; }
.side.o .deckbar .kos { flex-direction:row-reverse; }

/* ===== starter deck screen ===== */
#deckpick { z-index:84; gap:12px; background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--c) 22%, rgba(7,7,11,.9)), rgba(5,5,12,.96) 70%); transition:background .5s; }
.dp-head { text-align:center; } .dp-head h2 { margin:6px 0 0; font:700 34px var(--display); letter-spacing:-.03em; }
#dp-body { display:flex; gap:34px; align-items:center; width:1040px; }
.dp-art { position:relative; flex:none; width:330px; height:430px; border-radius:22px; overflow:hidden; border:2px solid var(--c); box-shadow:0 0 50px color-mix(in srgb, var(--c) 40%, transparent), 0 24px 60px rgba(0,0,0,.7); }
.dp-art img { width:100%; height:100%; object-fit:cover; display:block; animation:dpIn .5s var(--ease); } @keyframes dpIn { from { opacity:0; transform:scale(1.06); } }
.dp-fade { position:absolute; inset:0; background:linear-gradient(transparent 60%, rgba(5,5,12,.7)); }
.dp-info { flex:1; min-width:0; }
.dp-tags { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:10px; }
.dp-t { padding:5px 12px; border-radius:999px; font:600 10px var(--display); letter-spacing:.16em; background:rgba(255,255,255,.08); border:1px solid var(--line); color:var(--muted); }
.dp-t.el { color:#fff; border-color:var(--c); background:color-mix(in srgb, var(--c) 25%, transparent); } .dp-t img.isym { height:1em; }
.dp-t.d-beginner { color:#8dffbf; border-color:rgba(141,255,191,.5); } .dp-t.d-intermediate { color:#ffe08a; border-color:rgba(255,224,138,.5); } .dp-t.d-advanced { color:#ff9aa8; border-color:rgba(255,154,168,.5); }
.dp-t.rec { color:#fff; background:linear-gradient(90deg, rgba(126,95,255,.7), rgba(74,44,255,.6)); border-color:rgba(190,170,255,.7); }
.dp-info h3 { margin:0; font:700 40px var(--display); letter-spacing:-.04em; }
.dp-style { margin:8px 0 14px; font:400 16px/1.45 var(--ui); color:var(--muted); max-width:620px; }
.dp-line { display:flex; align-items:center; gap:12px; margin-bottom:14px; } .dp-line b { color:var(--dim); font-size:20px; }
.dp-line figure { margin:0; text-align:center; } .dp-line img { width:104px; border-radius:9px; box-shadow:0 8px 20px rgba(0,0,0,.6); display:block; } .dp-line figcaption { margin-top:6px; font:600 9px var(--display); letter-spacing:.2em; color:var(--dim); }
.dp-keys { list-style:none; margin:0; padding:0; display:grid; gap:7px; } .dp-keys li { padding:9px 13px; border-radius:11px; background:rgba(255,255,255,.05); border:1px solid var(--line); font:400 14px var(--ui); color:var(--muted); }
.dp-keys b { display:inline-block; min-width:76px; font:600 10px var(--display); letter-spacing:.18em; color:var(--c); }
#dp-rail { display:flex; gap:10px; }
.dpr { --c:#fff; display:flex; align-items:center; gap:8px; padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:rgba(255,255,255,.05); color:var(--muted); cursor:pointer; font:600 11px var(--display); letter-spacing:.18em; transition:all .2s var(--ease); }
.dpr img.isym { height:16px; } .dpr:hover { color:#fff; border-color:var(--c); } .dpr.on { color:#fff; border-color:var(--c); background:color-mix(in srgb, var(--c) 24%, transparent); box-shadow:0 0 20px color-mix(in srgb, var(--c) 45%, transparent); }
#deckpick .btnrow { margin-top:4px; }

/* crystal lives: real artwork (assets/crystals), keyed at load into --crys-you / --crys-foe */
.kos i { width:18px; height:30px; clip-path:none; background:var(--crys-you) center/contain no-repeat; }
.kos i.on { background:var(--crys-you) center/contain no-repeat; animation:crystal 3.2s ease-in-out infinite; }
.side.o .kos i, .side.o .kos i.on { background-image:var(--crys-foe); }
.kos i:not(.on) { filter:grayscale(1) brightness(.35) contrast(.9); opacity:.7; animation:none; }
.deckbar .kos { gap:5px; }
.side.o .kos i, .side.o .kos i.on { background:var(--crys-foe) center/contain no-repeat; }

.dp-keys .mu { display:inline-flex; align-items:center; gap:6px; margin-right:18px; } .dp-keys .mu img.isym { height:16px; width:auto; }
.dp-keys .mu.s { color:#9dffc4; } .dp-keys .mu.w { color:#ffa3ae; }

/* ===== victory / defeat screen ===== */
#end { align-items:flex-start; justify-content:center; background:linear-gradient(90deg, rgba(5,5,12,.92) 0%, rgba(5,5,12,.7) 45%, rgba(5,5,12,.35) 100%), url(assets/arena.webp) center/cover; backdrop-filter:none; padding:0; }
#end.lose { background:linear-gradient(90deg, rgba(10,4,8,.92) 0%, rgba(14,4,10,.7) 45%, rgba(30,6,12,.4) 100%), url(assets/arena.webp) center/cover; }
#end-logo { position:absolute; left:42px; top:26px; height:30px; }
#end-panel { position:absolute; left:88px; top:132px; width:470px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.end-eye { color:#a9a2ff; letter-spacing:.34em; }
#end-title { font:700 92px var(--display); letter-spacing:-.04em; margin:2px 0 0; }
#end.win #end-title { color:#fff; text-shadow:0 0 50px rgba(141,134,255,.8), 0 0 100px rgba(100,80,255,.5); }
#end.lose #end-title { color:#fff3f5; text-shadow:0 0 40px rgba(255,60,90,.75), 0 0 90px rgba(255,40,80,.4); }
#end-why { font:500 15px var(--display); letter-spacing:.2em; text-transform:none; color:var(--muted); margin-bottom:16px; }
.end-sub { font:600 10px var(--display); letter-spacing:.3em; color:#a9a2ff; margin:8px 0 10px; }
#end-lives { display:flex; gap:26px; margin-bottom:20px; }
#end-lives i { width:72px; height:124px; background:var(--crys-you) center/contain no-repeat; filter:drop-shadow(0 0 14px rgba(141,107,255,.7)); }
#end-lives i:not(.on) { background-image:var(--crys-you); filter:grayscale(1) brightness(.5); opacity:.8; }
#end.lose #end-lives i:not(.on) { filter:grayscale(1) brightness(.55); }
#end-stats { display:flex; width:100%; gap:0; margin:0 0 20px; padding:16px 0; border-top:1px solid var(--line); } #end-stats div { flex:1; border-right:1px solid var(--line); } #end-stats div:last-child { border:0; }
#end-stats b { font:700 34px var(--display); } #end-stats span { display:block; font:600 9px var(--display); letter-spacing:.26em; text-transform:uppercase; color:var(--dim); margin-top:2px; }
#end .btnrow { gap:14px; margin:0; } #end .btnrow .big { min-width:190px; }
.endlink { margin-top:18px; background:none; border:0; border-bottom:1px solid var(--line); color:var(--muted); cursor:pointer; font:600 11px var(--display); letter-spacing:.3em; padding:4px 2px; } .endlink:hover { color:#fff; border-color:#fff; }
#end-hero { position:absolute; right:60px; bottom:60px; height:600px; max-width:640px; object-fit:contain; filter:drop-shadow(0 0 40px rgba(120,100,255,.6)); animation:endFloat 6s ease-in-out infinite; }
#end-hero.lose { filter:drop-shadow(0 0 40px rgba(255,40,90,.55)); }
#end-hero.fallback { filter:grayscale(.85) brightness(.55) drop-shadow(0 0 40px rgba(255,40,90,.5)); animation:none; }
@keyframes endFloat { 50% { transform:translateY(-12px); } }

#end.lose { background:linear-gradient(90deg, rgba(8,3,8,.9) 0%, rgba(10,3,8,.6) 38%, rgba(0,0,0,0) 62%), url(assets/end/defeat.png) center/cover; }
#end-hero.lose { display:none; }
#end-hero.art { height:560px; width:auto; max-width:500px; bottom:80px; right:110px; border-radius:22px; border:2px solid rgba(141,134,255,.7); object-fit:cover; box-shadow:0 0 60px rgba(120,100,255,.55), 0 24px 60px rgba(0,0,0,.7); }

/* end screen crystals: pop in one by one, then float and pulse; lost ones jolt once and go dark */
#end-lives i { position:relative; opacity:0; animation:lifeIn .7s var(--ease) forwards, lifeFloat 4.2s ease-in-out .9s infinite, lifeGlow 2.6s ease-in-out .9s infinite; }
#end-lives i::before { content:''; position:absolute; inset:-30% -60%; background:radial-gradient(closest-side, rgba(150,120,255,.45), transparent 70%); animation:lifeHalo 2.6s ease-in-out infinite; z-index:-1; pointer-events:none; }
#end-lives i::after { content:''; position:absolute; inset:0; background:linear-gradient(115deg, transparent 40%, rgba(255,255,255,.75) 50%, transparent 60%) -150% 0/250% 100% no-repeat; -webkit-mask:var(--crys-you) center/contain no-repeat; mask:var(--crys-you) center/contain no-repeat; animation:lifeShine 4.5s ease-in-out 1.2s infinite; }
#end-lives i:nth-child(2), #end-lives i:nth-child(2)::before, #end-lives i:nth-child(2)::after { animation-delay:.18s, 1.2s, 1.2s; } #end-lives i:nth-child(3) { animation-delay:.36s, 1.5s, 1.5s; }
#end-lives i:nth-child(2)::before { animation-delay:.4s; } #end-lives i:nth-child(3)::before { animation-delay:.8s; } #end-lives i:nth-child(2)::after { animation-delay:2s; } #end-lives i:nth-child(3)::after { animation-delay:2.8s; }
#end-lives i:not(.on) { animation:lifeIn .7s var(--ease) forwards, lifeLost .6s ease-out 1s; } #end-lives i:not(.on)::before, #end-lives i:not(.on)::after { display:none; }
#end.lose #end-lives i::before { background:radial-gradient(closest-side, rgba(255,60,90,.35), transparent 70%); }
@keyframes lifeIn { from { opacity:0; transform:translateY(-34px) scale(.4) rotate(-12deg); } to { opacity:1; transform:none; } }
@keyframes lifeFloat { 50% { transform:translateY(-9px) rotate(2deg); } }
@keyframes lifeGlow { 0%,100% { filter:drop-shadow(0 0 10px rgba(141,107,255,.6)) brightness(1); } 50% { filter:drop-shadow(0 0 24px rgba(170,140,255,.95)) brightness(1.25); } }
@keyframes lifeHalo { 0%,100% { opacity:.45; transform:scale(.9); } 50% { opacity:1; transform:scale(1.15); } }
@keyframes lifeShine { 0% { background-position:-150% 0; } 35%,100% { background-position:150% 0; } }
@keyframes lifeLost { 0% { transform:translateX(0); } 20% { transform:translateX(-6px) rotate(-4deg); } 40% { transform:translateX(6px) rotate(4deg); } 60% { transform:translateX(-4px); } 80% { transform:translateX(3px); } }

/* neighbouring buttons shouldn't shimmer in sync: the second one runs half a cycle behind */
.btnrow .big:nth-of-type(2), .lp-how, .cf-btns .big:nth-child(2) { animation-delay:-1.8s; }
.btnrow .big:nth-of-type(2)::after, .lp-how::after, .cf-btns .big:nth-child(2)::after { animation-delay:-2.4s; }

.dp-keys .mu.n { color:var(--muted); }
.dp-keys li:last-child { display:flex; flex-wrap:wrap; align-items:center; gap:4px 0; }

/* full-bleed: the stage never clips, and every background layer extends by --ex / --ey so there are no empty bars */
#viewport { background:#05040c; }
#stage { overflow:visible; background:transparent; --ex:0px; --ey:0px; }
#bg { inset:calc(-1 * var(--ey)) calc(-1 * var(--ex)); }
#title, #end, #deckpick, #howto { overflow:visible !important; }
#title { background:transparent !important; } #title::before { content:''; position:absolute; inset:calc(-1 * var(--ey)) calc(-1 * var(--ex)); background:#05040c; z-index:-1; }
#title #lp-glow { inset:calc(-1 * var(--ey)) calc(-1 * var(--ex)); background:
  radial-gradient(ellipse 538px 432px at calc(var(--ex) + 870px) calc(var(--ey) + 331px), color-mix(in srgb, var(--el) 38%, transparent), transparent 72%),
  radial-gradient(ellipse 896px 274px at calc(var(--ex) + 794px) calc(var(--ey) + 778px), color-mix(in srgb, var(--el) 30%, transparent), transparent 70%),
  radial-gradient(ellipse 640px 432px at var(--ex) var(--ey), rgba(48,28,233,.22), transparent 70%); }
#title #lp-grid { left:calc(-10% - var(--ex)); right:calc(-10% - var(--ex)); bottom:calc(-40px - var(--ey)); }
#deckpick, #howto { inset:calc(-1 * var(--ey)) calc(-1 * var(--ex)); }
#end { inset:calc(-1 * var(--ey)) calc(-1 * var(--ex)); }
#end-logo { left:calc(42px + var(--ex)); top:calc(26px + var(--ey)); }
#end-panel { left:calc(88px + var(--ex)); top:calc(132px + var(--ey)); }
#end-hero { right:calc(60px + var(--ex)); bottom:calc(60px + var(--ey)); } #end-hero.art { right:calc(110px + var(--ex)); bottom:calc(80px + var(--ey)); }

/* ===== loading screen ===== */
#loader { position:absolute; inset:0; z-index:500; display:flex; align-items:center; justify-content:center; background:radial-gradient(ellipse at 50% 42%, #1a1340 0%, #07060f 62%); transition:opacity .6s ease, visibility .6s; }
#loader.gone { opacity:0; visibility:hidden; pointer-events:none; }
.ld-in { width:min(420px, 78vw); text-align:center; }
.ld-logo { width:min(300px, 70vw); height:auto; display:block; margin:0 auto 34px; animation:ldPulse 2.4s ease-in-out infinite; filter:drop-shadow(0 0 24px rgba(126,95,255,.55)); }
.ld-track { height:4px; border-radius:99px; background:rgba(255,255,255,.1); overflow:hidden; }
#ld-bar { display:block; height:100%; width:0; border-radius:99px; background:linear-gradient(90deg, #6a4dff, #b79bff); box-shadow:0 0 16px rgba(150,120,255,.8); transition:width .25s ease; }
.ld-row { display:flex; justify-content:space-between; margin-top:12px; font:600 10px var(--display); letter-spacing:.3em; color:var(--dim); } #ld-pct { color:#a9a2ff; }
@keyframes ldPulse { 50% { opacity:.72; transform:scale(.985); } }

/* loading finished: the bar fades, the logo ignites (flash, shine, shock rings), holds, then everything lifts away */
.ld-mark { position:relative; width:min(300px, 70vw); margin:0 auto 34px; }
.ld-mark .ld-logo { margin:0; position:relative; width:100%; }
.ld-mark::after { content:''; position:absolute; inset:0; pointer-events:none; opacity:0; background:linear-gradient(115deg, transparent 38%, rgba(255,255,255,.95) 50%, transparent 62%) -160% 0/260% 100% no-repeat; -webkit-mask:url(assets/logo.webp) center/contain no-repeat; mask:url(assets/logo.webp) center/contain no-repeat; }
.ld-ring { position:absolute; left:50%; top:50%; width:120px; height:120px; margin:-60px 0 0 -60px; border-radius:50%; border:2px solid rgba(170,140,255,.9); opacity:0; pointer-events:none; box-shadow:0 0 30px rgba(140,110,255,.7), inset 0 0 20px rgba(140,110,255,.4); }
.ld-track, .ld-row { transition:opacity .35s ease, transform .35s ease; }
#loader.done .ld-track, #loader.done .ld-row { opacity:0; transform:translateY(8px); }
#loader.done .ld-logo { animation:ldIgnite 1.3s var(--ease) forwards; }
#loader.done .ld-mark::after { animation:ldShine 1s ease-out .15s forwards; }
#loader.done .ld-ring { animation:ldRing 1.3s ease-out .1s forwards; } #loader.done .ld-ring.r2 { animation-delay:.38s; }
#loader.done { background:radial-gradient(ellipse at 50% 46%, #2a1c6a 0%, #07060f 62%); }
#loader.done .ld-in { transform:translateY(34px); transition:transform .5s var(--ease); }
#loader.gone .ld-logo { animation:none; transform:scale(1.5); opacity:0; transition:transform .8s ease-in, opacity .7s ease-in; }
#loader.gone .ld-ring { animation:none; opacity:0; }
@keyframes ldIgnite { 0% { transform:scale(.94); filter:drop-shadow(0 0 10px rgba(126,95,255,.4)) brightness(1); } 30% { transform:scale(1.12); filter:drop-shadow(0 0 60px rgba(170,140,255,1)) brightness(1.7); } 100% { transform:scale(1.04); filter:drop-shadow(0 0 34px rgba(150,120,255,.85)) brightness(1.15); } }
@keyframes ldShine { 0% { opacity:1; background-position:-160% 0; } 100% { opacity:1; background-position:160% 0; } }
@keyframes ldRing { 0% { opacity:.9; transform:scale(.4); } 100% { opacity:0; transform:scale(5.5); } }