:root { --bg:#12151f; --panel:#1c2133; --ink:#eef1fa; --mute:#9aa3bd; --accent:#ffcb05; --cw:104px; --ch:146px; }
* { box-sizing:border-box; }
html,body { margin:0; height:100%; background:var(--bg); color:var(--ink); font-family:system-ui,Segoe UI,Roboto,sans-serif; overflow-x:hidden; }
body { background:radial-gradient(circle at 50% 0,#252c47,#12151f 60%); }
.hidden { display:none !important; }
.screen { min-height:100%; padding:20px 16px 40px; max-width:1100px; margin:0 auto; }
h1 { font-size:2.2rem; margin:.4em 0 0; color:var(--accent); text-shadow:0 2px 0 #3b4cca; }
h2 { margin:1.4em 0 .2em; }
.sub,.hint { color:var(--mute); margin:.3em 0 1em; }
.btn { background:#2a3150; color:var(--ink); border:1px solid #3a4268; border-radius:10px; padding:10px 16px; font:inherit; cursor:pointer; display:inline-block; }
.btn:hover { background:#343c62; }
.btn.primary { background:var(--accent); color:#222; border-color:#d9a900; font-weight:700; }
.btn.small { padding:6px 12px; font-size:.9rem; }
.btn:disabled { opacity:.5; cursor:default; }
.menu-btns { display:flex; gap:12px; flex-wrap:wrap; margin:1em 0; }
.grid { display:flex; flex-wrap:wrap; gap:14px; }
.col-item { display:flex; flex-direction:column; align-items:center; gap:6px; }

/* ---------- card ---------- */
.card { position:relative; width:var(--cw); height:var(--ch); flex:none; border-radius:10px; user-select:none; touch-action:none;
  background:linear-gradient(160deg,color-mix(in srgb,var(--tc,#888) 70%,#fff),var(--tc,#888)); border:3px solid #f2d36b;
  box-shadow:0 4px 10px #0008; color:#1b1b1b; overflow:hidden; }
.card .art { position:absolute; inset:22px 8px 44px; background-color:#dcecff; background-image:linear-gradient(#ffffff12,#07111f38),var(--rarity-art); background-position:center; background-size:cover; border:1px solid #ffffff99; border-radius:6px; display:grid; place-items:center; overflow:hidden; box-shadow:inset 0 0 12px #07111f44; }
.card .art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#fff2 0%,transparent 42%,#02081755 100%); pointer-events:none; }
.card .art img { position:relative; z-index:1; width:100%; height:100%; object-fit:contain; pointer-events:none; filter:drop-shadow(0 3px 2px #0008); }
.card.rarity-1 { --rarity-art:url('assets/cards/rarity/rarity-1-route.webp'); border-color:#c7d0d7; }
.card.rarity-2 { --rarity-art:url('assets/cards/rarity/rarity-2-forest.webp'); border-color:#77d59a; }
.card.rarity-3 { --rarity-art:url('assets/cards/rarity/rarity-3-cave.webp'); border-color:#74cfff; box-shadow:0 4px 12px #0009,0 0 8px #45bfff55; }
.card.rarity-4 { --rarity-art:url('assets/cards/rarity/rarity-4-volcano.webp'); border-color:#b48cff; box-shadow:0 5px 14px #0009,0 0 11px #875cff88; }
.card.rarity-5 { --rarity-art:url('assets/cards/rarity/rarity-5-ruins.webp'); border-color:#ffd45c; box-shadow:0 6px 16px #000a,0 0 14px #ffbf3988; }
.card.rarity-6 { --rarity-art:url('assets/cards/rarity/rarity-6-rift.webp'); border-color:#f8efff; box-shadow:0 7px 18px #000a,0 0 17px #dc70ffbb; }
.card.rarity-4 .art,.card.rarity-5 .art,.card.rarity-6 .art { border-color:#fff; }
.card.rarity-5::after,.card.rarity-6::after { content:''; position:absolute; inset:0; z-index:3; border-radius:7px; background:linear-gradient(115deg,transparent 18%,#ffffff55 31%,transparent 43%); background-size:240% 100%; pointer-events:none; animation:raritySheen 3.8s ease-in-out infinite; }
@keyframes raritySheen { 0%,55% { background-position:160% 0; } 100% { background-position:-80% 0; } }
.card .name { position:absolute; left:6px; right:30px; top:3px; font-weight:700; font-size:.78rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.card .type { position:absolute; left:8px; right:8px; bottom:25px; font-size:.62rem; text-align:center; opacity:.75; }
.card .grade { position:absolute; right:3px; top:2px; padding:0 6px; height:20px; border-radius:10px; background:#3b4cca; color:#ffd84a; font-weight:800; font-size:.72rem; display:grid; place-items:center; border:2px solid #fff; z-index:2; }
.card .star { position:absolute; left:4px; top:22px; color:#ffcb05; font-size:.9rem; z-index:2; text-shadow:0 0 3px #000; }
.card .atk,.card .hp { position:absolute; bottom:3px; font-weight:800; font-size:.8rem; padding:1px 6px; border-radius:8px; color:#fff; }
.card .atk { left:4px; background:#c0392b; } .card .hp { right:4px; background:#2e9e4f; }
.card.back { background:repeating-linear-gradient(45deg,#3b4cca,#3b4cca 8px,#2c3aa0 8px,#2c3aa0 16px); border-color:#f2d36b; }

/* ---------- game layout ---------- */
.topbar { display:flex; align-items:center; gap:12px; }
#log { flex:1; text-align:center; color:var(--accent); font-weight:600; }

/* hand fan */
.hand { position:relative; height:calc(var(--ch) + 30px); flex:none; }
.hand .card { position:absolute; left:calc(50% - var(--cw) / 2); bottom:0; cursor:grab;
  transform:translate(var(--x),var(--y)) rotate(var(--r)); transform-origin:50% 120%; transition:transform .18s ease, box-shadow .18s; }
.hand .card:hover:not(.dragging) { transform:translate(var(--x),-70px) scale(1.45); z-index:100 !important; }
.hand .card.playable { box-shadow:0 0 0 3px #4cff7a,0 4px 10px #0008; }
.hand .card.dragging { transition:none; cursor:grabbing; z-index:200 !important;
  transform:translate(calc(var(--x) + var(--dx,0px)),calc(var(--y) + var(--dy,0px))) scale(1.2); }
.float { position:fixed; font-weight:900; font-size:1.8rem; pointer-events:none; text-shadow:0 2px 4px #000; transform:translate(-50%,0); animation:float .9s ease-out forwards; z-index:500; }
@keyframes float { to { transform:translate(-50%,-50px); opacity:0; } }

/* overlays */
.overlay { position:fixed; inset:0; background:#000b; display:grid; place-items:center; z-index:400; padding:12px; overflow:auto; }
.panel { background:var(--panel); border-radius:16px; padding:20px; text-align:center; width:100%; max-width:420px; }
.scan-panel { max-width:520px; text-align:left; max-height:100%; overflow:auto; }
.scan-head { display:flex; justify-content:space-between; align-items:center; } .scan-head h2 { margin:0; }
.cam-wrap { position:relative; width:100%; aspect-ratio:4/3; background:#000; border-radius:10px; overflow:hidden; margin:10px 0; }
.cam-wrap video { width:100%; height:100%; display:block; object-fit:fill; }
.guide { position:absolute; border:3px dashed var(--accent); border-radius:14px; box-shadow:0 0 0 999px #0006; pointer-events:none; }
.guide::after { content:"Pokémon logo at the bottom"; position:absolute; left:0; right:0; bottom:-26px; text-align:center; font-size:.7rem; color:#fff; text-shadow:0 1px 3px #000; }
.scan-btns,.search-row { display:flex; gap:10px; flex-wrap:wrap; margin:8px 0; }
.search-row input { flex:1; min-width:0; padding:8px 10px; border-radius:8px; border:1px solid #3a4268; background:#12151f; color:var(--ink); font:inherit; }
.results { flex-direction:column; gap:8px; }
.result { display:flex; align-items:center; gap:10px; text-align:left; background:#2a3150; color:var(--ink); border:1px solid #3a4268; border-radius:10px; padding:6px; cursor:pointer; font:inherit; }
.result img { height:64px; border-radius:4px; } .result.added { border-color:#4cff7a; opacity:.7; }

@media (max-width:640px) { :root { --cw:84px; --ch:118px; } .card .name { font-size:.68rem; } .hero { gap:8px; padding:4px 10px; font-size:.9rem; } }
@media (max-height:700px) { :root { --cw:84px; --ch:118px; } }

/* ---------- v2: swift, summon, reveal ---------- */
.card .type { font-size:.58rem; }
.card.reveal { animation:reveal 1.2s ease-out; }
@keyframes reveal { 0% { transform:scale(.3) rotateY(180deg); box-shadow:0 0 0 0 #ffcb05; } 60% { transform:scale(1.15); box-shadow:0 0 40px 12px #ffcb05; } 100% { transform:none; } }

/* ---------- battle intro ---------- */
.intro { position:fixed; inset:0; z-index:350; display:grid; place-items:center; cursor:pointer; overflow:hidden; background:#000; }
.intro-bg { position:absolute; inset:-5%; background-size:cover; background-position:center; filter:brightness(.55) saturate(1.2); }
.intro.play .intro-bg { animation:introZoom 2.8s ease-out forwards; }
@keyframes introZoom { from { transform:scale(1.15); } to { transform:scale(1); } }
.intro-vs { position:relative; display:flex; align-items:center; gap:18px; font-size:clamp(1.6rem,6vw,3.4rem); font-weight:900; text-shadow:0 4px 0 #000; }
.intro-vs .side { padding:8px 22px; border-radius:12px; }
.intro-vs .l { background:#3b4cca; } .intro-vs .r { background:#c0392b; }
.intro.play .l { animation:inL .6s cubic-bezier(.2,1.2,.4,1) both; } .intro.play .r { animation:inR .6s cubic-bezier(.2,1.2,.4,1) both; }
.intro.play .vs { animation:vsPop .5s .45s cubic-bezier(.2,2,.4,1) both; color:var(--accent); }
@keyframes inL { from { transform:translateX(-120vw); } } @keyframes inR { from { transform:translateX(120vw); } } @keyframes vsPop { from { transform:scale(0); opacity:0; } }
.intro-text { position:absolute; bottom:12%; left:0; right:0; text-align:center; font-size:1.1rem; padding:0 16px; text-shadow:0 2px 4px #000; animation:fadeIn .8s .9s both; }
@keyframes fadeIn { from { opacity:0; } }


/* ================= v3: Yu-Gi-Oh style duel field ================= */
#field { flex:1; min-height:0; display:flex; flex-direction:column; position:relative; border-radius:16px; background:var(--arena) center/cover; box-shadow:inset 0 0 0 2px #ffffff30, 0 6px 20px #0008; }
#field::before { content:''; position:absolute; inset:0; border-radius:16px; background:linear-gradient(#000b,#0003 42%,#0003 58%,#000b); pointer-events:none; }
#field::after { content:''; position:absolute; left:6%; right:6%; top:50%; height:2px; background:linear-gradient(90deg,transparent,#ffffff55,transparent); pointer-events:none; }
#field .board { position:relative; z-index:1; flex:1; min-height:0; background:none; border:2px dashed transparent; }
#field.shake { animation:fieldShake .35s; }
@keyframes fieldShake { 0%,100% { transform:none; } 20% { transform:translate(-5px,2px); } 40% { transform:translate(5px,-2px); } 60% { transform:translate(-3px,1px); } 80% { transform:translate(3px,-1px); } }

.mon { position:relative; z-index:2; flex:none; width:clamp(92px,12.5vw,126px); display:flex; flex-direction:column; align-items:center; transition:transform .15s; user-select:none; }
.mon-sprite { position:relative; width:100%; height:clamp(60px,13vh,118px); display:flex; align-items:flex-end; justify-content:center; }
.mon-sprite::after { content:''; position:absolute; left:6%; right:6%; bottom:-7px; height:16px; border-radius:50%; background:radial-gradient(closest-side,var(--tc),transparent); opacity:.85; transition:box-shadow .15s; }
.mon-sprite img { position:relative; z-index:1; image-rendering:pixelated; max-width:100%; filter:drop-shadow(0 6px 4px #000a); }
.mon-sprite img.art { image-rendering:auto; height:100%; }
.mon-plate { position:relative; margin-top:8px; width:100%; background:#10162de8; border:2px solid var(--tc); border-radius:8px; padding:2px 5px 3px; font-size:.68rem; text-align:center; transition:box-shadow .15s; }
.mon-plate b { display:block; font-size:.76rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.tchips { display:flex; gap:3px; justify-content:center; margin:1px 0; }
.tchip { font-size:.54rem; padding:0 5px; border-radius:6px; color:#fff; text-shadow:0 1px 1px #0008; text-transform:uppercase; }
.mon-stats { display:flex; justify-content:space-between; gap:4px; font-weight:800; }
.mon-stats .a { color:#ff8a7a; } .mon-stats .h { color:#7dffa0; } .mon-stats .e { color:#ffd84a; }
.bar { height:6px; background:#0007; border-radius:6px; overflow:hidden; margin:2px 0; }
.bar i { display:block; height:100%; background:linear-gradient(90deg,#4cff7a,#a8ff5a); transition:width .6s ease-out; }
.mon.hurt .bar i { background:linear-gradient(90deg,#ffb04a,#ffd84a); }
.mon .mult { position:absolute; left:-6px; top:-8px; z-index:4; min-width:34px; padding:1px 6px; border-radius:10px; font-weight:900; font-size:.8rem; text-align:center; color:#fff; border:2px solid #fff; box-shadow:0 2px 6px #000a; }
.mult.x2, .mult.x4 { background:#2e9e4f; } .mult.x1 { background:#6b7390; } .mult.xh, .mult.xq { background:#c0392b; } .mult.x0 { background:#333; }
.mon.can-attack { cursor:pointer; }
.mon.can-attack .mon-sprite::after { box-shadow:0 0 16px 6px #4cff7a; }
.mon.can-attack .mon-plate { border-color:#4cff7a; box-shadow:0 0 10px #4cff7a99; }
.mon.selected { transform:translateY(-8px); }
.mon.selected .mon-sprite::after { box-shadow:0 0 18px 8px var(--accent); }
.mon.selected .mon-plate { border-color:var(--accent); box-shadow:0 0 12px var(--accent); }
.mon.targetable { cursor:crosshair; }
.mon.targetable .mon-plate { border-color:#ff5a5a; box-shadow:0 0 10px #ff5a5acc; }

/* materialise: light pillar + hologram scan-in, ring on the ground */
.mon.summon::before { content:''; position:absolute; left:18%; right:18%; bottom:36px; top:-30px; z-index:0; background:linear-gradient(to top,var(--tc),#fff9 40%,transparent); filter:blur(3px); transform-origin:bottom; animation:pillar .9s ease-out forwards; pointer-events:none; }
.mon.summon .mon-sprite::after { animation:ring .9s ease-out; }
.mon.summon .mon-sprite img { animation:materialize .9s ease-out; }
.mon.summon .mon-plate { animation:fadeIn .6s .4s both; }
@keyframes pillar { 0% { transform:scaleY(0); opacity:1; } 45% { transform:scaleY(1); opacity:1; } 100% { transform:scaleY(1) scaleX(.2); opacity:0; } }
@keyframes ring { 0% { transform:scale(.2); opacity:1; } 100% { transform:scale(1.6); opacity:.85; } }
@keyframes materialize { 0% { opacity:0; clip-path:inset(100% 0 0 0); filter:brightness(6) saturate(0) blur(4px); } 50% { opacity:1; clip-path:inset(30% 0 0 0); filter:brightness(3) saturate(.3) blur(1px); } 100% { opacity:1; clip-path:inset(0); filter:drop-shadow(0 6px 4px #000a); } }
.mon.dematerialize .mon-sprite img { animation:dematerialize .55s ease-in forwards; }
.mon.dematerialize .mon-plate { opacity:0; transition:.3s; }
@keyframes dematerialize { to { opacity:0; clip-path:inset(0 0 100% 0); filter:brightness(5) saturate(0) blur(3px); } }
.mon-sprite.hit img { animation:hitShake .5s; }
@keyframes hitShake { 0%,100% { transform:none; filter:drop-shadow(0 6px 4px #000a); } 15% { transform:translateX(-12px); filter:brightness(3); } 35% { transform:translateX(10px); } 55% { transform:translateX(-7px); filter:brightness(2); } 75% { transform:translateX(4px); } }

/* board effects (fixed-position so they can cross from one row to the other) */
.fx { position:fixed; width:96px; height:96px; background-repeat:no-repeat; transform:translate(-50%,-50%) scale(1.7); pointer-events:none; z-index:300; }
.pop { position:fixed; z-index:310; transform:translate(-50%,-50%); font-weight:900; pointer-events:none; text-shadow:0 2px 3px #000; animation:popUp 1s ease-out forwards; white-space:nowrap; }
.pop.dmg { font-size:2rem; color:#ff5a5a; -webkit-text-stroke:2px #000; paint-order:stroke fill; }
.pop.move { font-size:.85rem; padding:3px 12px; border-radius:14px; background:var(--tc,#888); color:#fff; animation:movePop 1.1s ease-out forwards; }
.pop.eff { font-size:.95rem; } .pop.eff.good { color:#ffd84a; } .pop.eff.bad { color:#b8c4dd; } .pop.miss { font-size:1.3rem; color:#9ad7ff; }
@keyframes popUp { 0% { opacity:0; margin-top:10px; } 15% { opacity:1; } 100% { opacity:0; margin-top:-54px; } }
@keyframes movePop { 0% { opacity:0; margin-top:8px; } 15%,70% { opacity:1; margin-top:0; } 100% { opacity:0; margin-top:-8px; } }

/* ================= dice (Poké Ball call, same as PokeBattleArena's Destiny roll) ================= */
.dice { position:fixed; z-index:320; transform:translate(-50%,-50%); width:min(330px,92vw); background:#10162df2; border:2px solid #ffffff44; border-radius:16px; padding:12px 14px 14px; text-align:center; box-shadow:0 12px 40px #000c; animation:diceIn .25s ease-out; }
@keyframes diceIn { from { opacity:0; transform:translate(-50%,-46%) scale(.94); } }
.dice-title { font-weight:800; } .dice-sub { display:block; color:var(--mute); font-size:.75rem; margin-top:2px; }
.pokeball { width:82px; height:82px; margin:14px auto 28px; position:relative; border:6px solid #19364a; border-radius:50%; background:linear-gradient(#f6555d 0 43%,#19364a 43% 57%,#fff 57%); box-shadow:0 10px 24px #0008; display:grid; place-items:center; }
.pokeball::before { content:""; position:absolute; width:30px; height:30px; border:6px solid #19364a; border-radius:50%; background:#fff; z-index:1; }
.pokeball i { position:absolute; width:15px; height:15px; border-radius:50%; background:#aeeaff; z-index:2; box-shadow:inset 0 0 0 3px #fff; }
.pokeball span { position:absolute; bottom:-30px; font-size:1.5rem; font-weight:950; color:#fff; }
.pokeball.roll { animation:ballRoll .9s cubic-bezier(.3,.8,.4,1); }
.pokeball.caught i { background:#65e8a9; box-shadow:0 0 20px #26cf86, inset 0 0 0 3px #fff; }
.pokeball.caught { animation:ballCaught .6s; }
@keyframes ballRoll { 0% { transform:translateX(-110px) rotate(-360deg) scale(.75); } 55% { transform:translateX(18px) rotate(25deg); } 75% { transform:translateX(-10px) rotate(-18deg); } 100% { transform:none; } }
@keyframes ballCaught { 25%,75% { transform:rotate(-12deg); } 50% { transform:rotate(12deg); } }
.faces { display:flex; gap:6px; justify-content:center; margin:6px 0 10px; }
.face { width:34px; height:34px; display:grid; place-items:center; border-radius:8px; background:#2a3150; color:#9aa3bd; font-weight:900; border:2px solid transparent; transition:.15s; }
.face.on { background:#2e9e4f; color:#fff; border-color:#8dffae; }
.face.rolled { outline:3px solid var(--accent); transform:scale(1.15); }
.dice-actions { display:flex; gap:10px; justify-content:center; }
.dice-actions .btn { flex:1; font-weight:800; }
#dice-result { min-height:24px; margin:8px 0 0; font-weight:800; color:var(--accent); }


/* ================= v4: Mezastar flow — areas, team lanes, 3v3 field, Get Time ================= */
.topbar h2 { font-size:1.2rem; }
.topmid { flex:1; text-align:center; min-width:0; }
.area-label { font-size:.8rem; color:var(--mute); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.turn-no { background:#3b4cca; padding:3px 12px; border-radius:12px; font-weight:800; font-size:.85rem; white-space:nowrap; }

#battle { display:flex; flex-direction:column; min-height:100dvh; padding:8px 12px 12px; max-width:1200px; overflow-x:hidden; }
#field .board { display:flex; flex-direction:row; flex-wrap:nowrap; gap:clamp(8px,3vw,36px); justify-content:center; align-items:center; }
.mon-empty { flex:none; width:clamp(92px,12.5vw,126px); height:60px; align-self:center; }
.mon.boss { width:clamp(104px,14vw,142px); }
.mon.boss .mon-sprite { transform:scale(1.15); transform-origin:bottom; }
.mon.boss .mon-plate { box-shadow:0 0 12px var(--tc); }
.mon-stats .g { color:#ffd84a; }

/* area select */
.areas { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:16px; }
.area { position:relative; border-radius:16px; overflow:hidden; min-height:260px; background:var(--bg) center/cover; box-shadow:0 6px 20px #0008; display:flex; }
.area::before { content:''; position:absolute; inset:0; background:linear-gradient(#0003,#000c); }
.area-body { position:relative; margin-top:auto; padding:14px; width:100%; }
.area h3 { margin:0 0 4px; font-size:1.3rem; }
.area .hint { margin:0 0 8px; color:#dfe5f5; font-size:.85rem; }
.area-bosses, .team-info { display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin-bottom:10px; }
.team-info { justify-content:center; color:var(--mute); }
.boss-chip { display:inline-flex; flex-direction:column; align-items:center; background:#10162dcc; border:1px solid #ffffff33; border-radius:10px; padding:2px 4px; }
.boss-chip img { width:44px; height:44px; object-fit:contain; }
.boss-chip b { font-size:.6rem; color:#ffd84a; }

/* team select */
.lanes { display:flex; gap:clamp(8px,2vw,20px); justify-content:center; margin:6px 0 10px; }
.lane { position:relative; width:calc(var(--cw) + 24px); height:calc(var(--ch) + 24px); border:2px dashed #ffffff33; border-radius:14px; display:grid; place-items:center; background:#ffffff08; transition:.15s; }
.lane .lane-no { position:absolute; top:4px; left:8px; font-size:.7rem; color:var(--mute); }
.lane.filled { border-style:solid; border-color:#4cff7a88; }
.lane.armed { border-color:#ffcb05aa; background:#ffcb0514; }
.lane.over { background:#ffcb0530; border-color:var(--accent); }
.lane .card.placed { cursor:pointer; }
.pager { display:flex; gap:10px; align-items:center; justify-content:center; margin:6px 0; }
#team-hand { margin-top:14px; }
#team { min-height:100vh; }

/* get time */
.get-panel { max-width:640px; }
.get-cards { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin:10px 0; }
.get-item { display:flex; flex-direction:column; align-items:center; gap:6px; padding:6px; border-radius:12px; border:2px solid transparent; transition:.2s; }
.get-item.now { border-color:var(--accent); box-shadow:0 0 14px #ffcb0577; }
.get-item.caught { border-color:#4cff7a; background:#4cff7a14; }
.get-item.escaped { opacity:.55; filter:grayscale(.6); }
.get-status { font-weight:800; font-size:.8rem; }
.get-who { font-weight:700; margin:8px 0 4px; }
.get-result { min-height:24px; font-weight:800; color:var(--accent); }
.get-actions { gap:10px; justify-content:center; margin-top:14px; }
#get-stage .pokeball { margin-bottom:12px; }
#get-ball { background:linear-gradient(var(--bc,#f6555d) 0 43%,#19364a 43% 57%,#fff 57%); }
.pokeball.wobble { animation:ballCaught .6s; }
.pokeball.open { animation:breakFree .5s forwards; }
@keyframes breakFree { 50% { transform:scale(1.25) rotate(18deg); } 100% { transform:scale(.7) rotate(40deg); opacity:.3; } }

@media (max-width:640px) { .lane { width:calc(var(--cw) + 10px); height:calc(var(--ch) + 12px); } .get-cards .card { --cw:78px; --ch:110px; } }

/* ================= v5: telegraphed attacker, area attacks, random areas ================= */
.schedule { display:flex; gap:8px; align-items:center; justify-content:center; flex-wrap:wrap; margin:4px 0 6px; min-height:40px; }
.sch-label { font-size:.7rem; color:var(--mute); text-transform:uppercase; letter-spacing:.06em; }
.sch { display:flex; align-items:center; gap:6px; background:#10162dcc; border:1px solid #ffffff2a; border-radius:12px; padding:2px 10px 2px 4px; opacity:.8; }
.sch img { width:32px; height:32px; object-fit:contain; }
.sch small { display:block; font-size:.6rem; color:var(--mute); line-height:1; }
.sch b { font-size:.8rem; }
.sch.now { opacity:1; border-color:#ff5a5a; box-shadow:0 0 12px #ff5a5a88; }
.sch.now small { color:#ff9a9a; font-weight:800; }
.sch.ko { opacity:.5; text-decoration:line-through; }
.actionbar { display:flex; justify-content:center; margin-top:8px; }
.actionbar .btn { min-width:260px; font-size:1.05rem; padding:12px 22px; }

.mon.will-attack .mon-plate { border-color:#ff5a5a; box-shadow:0 0 12px #ff5a5acc; animation:threat 1s ease-in-out infinite alternate; }
.mon.will-attack .mon-plate::after { content:'⚔ ATTACKS'; position:absolute; left:50%; top:-20px; transform:translateX(-50%); background:#c0392b; color:#fff; font-size:.6rem; font-weight:900; padding:1px 8px; border-radius:8px; white-space:nowrap; }
@keyframes threat { to { box-shadow:0 0 22px #ff5a5a; } }
.mon.targetable { cursor:default; }
.mon .inc { position:absolute; left:-6px; top:-8px; z-index:4; padding:1px 6px; border-radius:10px; font-weight:900; font-size:.7rem; color:#fff; background:#6b7390; border:2px solid #fff; box-shadow:0 2px 6px #000a; }
.mon .inc.bad { background:#c0392b; } .mon .inc.good { background:#2e9e4f; }
.mon .fatigue { position:absolute; right:-7px; top:-8px; z-index:5; padding:2px 7px; border-radius:10px; border:2px solid #fff; background:#7b4bb7; color:#fff; font-size:.6rem; font-weight:950; box-shadow:0 2px 8px #0009; }
.mon.fatigued:not(.selected) { opacity:.82; }

.banner { position:fixed; left:50%; top:30%; transform:translate(-50%,-50%); z-index:330; background:#c0392bee; color:#fff; font-weight:900; font-size:clamp(1.1rem,3.6vw,1.8rem); padding:10px 26px; border-radius:14px; text-shadow:0 2px 3px #0008; box-shadow:0 8px 30px #000a; pointer-events:none; animation:bannerIn 1.7s ease-out forwards; white-space:nowrap; }
@keyframes bannerIn { 0% { opacity:0; transform:translate(-120%,-50%); } 15% { opacity:1; transform:translate(-50%,-50%); } 80% { opacity:1; } 100% { opacity:0; transform:translate(-50%,-70%); } }

/* dice: one row per target */
.dice { width:min(380px,94vw); }
.faces { display:flex; flex-direction:column; gap:4px; margin:6px 0 10px; }
.frow { display:flex; align-items:center; gap:6px; justify-content:space-between; background:#ffffff0d; border-radius:8px; padding:2px 6px; text-align:left; }
.frow.hit { background:#2e9e4f33; } .frow.miss { background:#c0392b22; }
.fname { font-size:.75rem; font-weight:700; flex:1; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.fname .mult { position:static; display:inline-block; font-size:.62rem; min-width:0; padding:0 5px; border-width:1px; vertical-align:middle; }
.fchips { display:flex; gap:3px; }
.face { width:22px; height:22px; font-size:.72rem; border-radius:6px; }
.fres { width:16px; font-weight:900; text-align:center; }

/* areas */
.area { min-height:340px; }
.area-teams { display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.team-prev { background:#10162dcc; border:1px solid #ffffff2a; border-radius:12px; padding:4px 8px; text-align:left; }
.team-prev small { display:block; font-size:.65rem; color:var(--mute); text-transform:uppercase; letter-spacing:.05em; }
.tp-row { display:flex; align-items:flex-end; justify-content:center; gap:10px; }
.tp { display:flex; flex-direction:column; align-items:center; }
.tp img { width:44px; height:44px; object-fit:contain; }
.tp b { font-size:.58rem; color:#ffd84a; }
.tp.boss img { width:62px; height:62px; filter:drop-shadow(0 0 6px #ffcb05); }
.tp.boss::before { content:'BOSS'; font-size:.55rem; font-weight:900; background:#c0392b; color:#fff; padding:0 6px; border-radius:6px; }
.team-info { flex-wrap:wrap; gap:10px; margin-bottom:6px; }
.team-info .team-prev { min-width:200px; }

.area h3, .area .hint { text-shadow:0 2px 4px #000, 0 0 8px #000; }

/* ================= v6: arena broadcast visual system ================= */
:root {
  --bg:#070b16; --panel:#11182a; --panel2:#172036; --ink:#f7f8ff; --mute:#9ca9c4;
  --accent:#ffc928; --cyan:#54dcff; --line:#ffffff18;
}
html,body { background:#070b16; }
body { background:
  radial-gradient(circle at 16% 0%,#17274d 0,transparent 34%),
  radial-gradient(circle at 90% 18%,#38204b55 0,transparent 31%),
  linear-gradient(180deg,#0a1020,#070b16 48%,#0b1120); }
body::before { content:''; position:fixed; inset:0; pointer-events:none; opacity:.22; z-index:-1;
  background-image:linear-gradient(#ffffff08 1px,transparent 1px),linear-gradient(90deg,#ffffff08 1px,transparent 1px);
  background-size:48px 48px; mask-image:linear-gradient(to bottom,#000,transparent 70%); }
.screen { max-width:1240px; padding:22px clamp(16px,3vw,38px) 56px; }

.eyebrow { display:flex; align-items:center; gap:8px; color:var(--cyan); font-size:.68rem; font-weight:900; letter-spacing:.16em; text-transform:uppercase; }
.eyebrow > span { width:24px; height:2px; background:var(--cyan); box-shadow:0 0 10px var(--cyan); }
.btn { position:relative; border:1px solid #ffffff1f; background:#1c2741cc; border-radius:8px; font-weight:750; letter-spacing:.01em; box-shadow:inset 0 1px #ffffff12,0 8px 24px #0003; transition:transform .16s,background .16s,border-color .16s,box-shadow .16s; }
.btn:hover { transform:translateY(-2px); background:#263554; border-color:#ffffff42; }
.btn.primary { border-color:#ffe67a; color:#111827; background:linear-gradient(135deg,#ffe56b,#ffbd1f); box-shadow:0 10px 28px #ffbd1f30,inset 0 1px #fff9; }
.btn.primary:hover { background:linear-gradient(135deg,#fff08d,#ffd148); box-shadow:0 12px 32px #ffbd1f48; }
.btn.glass { backdrop-filter:blur(12px); }

.menu-hero { position:relative; min-height:450px; overflow:hidden; display:flex; align-items:flex-end; padding:clamp(28px,5vw,64px); border-radius:24px; border:1px solid #ffffff24;
  background-image:linear-gradient(90deg,#070c19f5 0%,#08101ecc 38%,#07101a28 72%),linear-gradient(0deg,#070b16d9,transparent 55%),url('assets/arenas/arena-nexus.webp');
  background-size:cover; background-position:center; box-shadow:0 30px 70px #0008,inset 0 0 0 1px #ffffff08; isolation:isolate; }
.menu-hero::before { content:''; position:absolute; inset:0; z-index:-1; background:linear-gradient(120deg,transparent 45%,#54dcff10 45.3%,transparent 45.7%); }
.menu-hero::after { content:'ARENA // 01'; position:absolute; right:22px; top:20px; color:#ffffff88; letter-spacing:.18em; font-size:.62rem; font-weight:800; }
.hero-copy { width:min(610px,75%); }
.menu-hero h1 { margin:12px 0 8px; color:#fff; font-size:clamp(2.8rem,7vw,5.6rem); line-height:.86; letter-spacing:-.065em; text-shadow:0 8px 28px #000; }
.menu-hero h1 em { display:block; color:var(--accent); font-style:normal; }
.menu-hero p { color:#d5def1; max-width:560px; line-height:1.55; text-shadow:0 2px 12px #000; }
.menu-btns { margin:22px 0 20px; }
.menu-btns .btn { padding:13px 20px; }
.menu-btns .btn span { margin-left:18px; }
.loop-strip { display:flex; align-items:center; flex-wrap:wrap; gap:10px; color:#dce5f7; font-size:.72rem; text-transform:uppercase; letter-spacing:.06em; }
.loop-strip span { padding:7px 9px; background:#08101dbd; border:1px solid #ffffff18; border-radius:6px; backdrop-filter:blur(8px); }
.loop-strip b { color:var(--cyan); margin-right:5px; }
.loop-strip i { color:var(--accent); font-style:normal; font-size:1.2rem; }
.hero-sigil { position:absolute; right:6%; bottom:14%; width:154px; height:154px; border:1px solid #ffffff44; border-radius:50%; display:flex; align-items:center; justify-content:center; gap:8px; color:#fff; font-size:2.25rem; font-weight:950; text-shadow:0 2px 12px #000; backdrop-filter:blur(5px); background:#07101a42; box-shadow:0 0 0 10px #ffffff0b,0 0 54px #54dcff38; }
.hero-sigil::after { content:''; position:absolute; inset:18px; border:1px dashed #ffffff60; border-radius:50%; animation:sigilSpin 18s linear infinite; }
.hero-sigil small { font-size:.66rem; color:var(--accent); z-index:1; }
@keyframes sigilSpin { to { transform:rotate(360deg); } }

.collection-head { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin:38px 0 18px; border-bottom:1px solid var(--line); padding-bottom:12px; }
.collection-head h2 { margin:6px 0 0; font-size:1.55rem; }
.collection-head h2 span { color:var(--mute); font-size:.78rem; font-weight:600; }
.collection-head .hint { margin:0; font-size:.78rem; }
#collection.grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(var(--cw),1fr)); gap:18px 14px; align-items:start; }
#collection .card { margin:auto; }
.card { border-width:2px; box-shadow:0 10px 24px #0008,0 0 0 1px #ffffff18; transition:transform .18s,filter .18s,box-shadow .18s; }
#collection .card:hover { transform:translateY(-8px) scale(1.04); filter:saturate(1.1); box-shadow:0 18px 30px #000a,0 0 0 2px #ffe266; z-index:3; }

.topbar { min-height:58px; border-bottom:1px solid var(--line); padding-bottom:10px; }
.screen-title { flex:1; }
.screen-title h2 { margin:3px 0 0; font-size:1.45rem; }
.live-pill { color:#8ff1b3; background:#58dd8d14; border:1px solid #58dd8d55; border-radius:20px; padding:6px 10px; font-size:.63rem; font-weight:900; letter-spacing:.11em; white-space:nowrap; }
.live-pill::before { content:''; display:inline-block; width:6px; height:6px; margin-right:6px; border-radius:50%; background:#63ef9a; box-shadow:0 0 8px #63ef9a; }
.section-lede { max-width:680px; line-height:1.55; margin:18px 0 22px; }

.areas { gap:22px; }
.area { min-height:410px; border-radius:20px; border:1px solid #ffffff22; box-shadow:0 20px 42px #0007; transform:translateZ(0); transition:transform .22s,border-color .22s,box-shadow .22s; }
.area:hover { transform:translateY(-7px); border-color:#ffffff66; box-shadow:0 26px 52px #0009,0 0 30px #54dcff14; }
.area::before { background:linear-gradient(180deg,#07101a0d 16%,#08101a80 48%,#060b15f5 83%); }
.area::after { content:'BOSS SIGNAL'; position:absolute; left:14px; top:14px; padding:5px 8px; border:1px solid #ff696966; border-radius:20px; color:#ff9b9b; background:#290a12b8; font-size:.59rem; font-weight:900; letter-spacing:.13em; backdrop-filter:blur(8px); }
.area-body { padding:18px; }
.area h3 { font-size:1.5rem; }
.area .btn { width:100%; margin-top:3px; }
.team-prev { background:#08101ad9; border-color:#ffffff1e; backdrop-filter:blur(12px); }
.tp.boss img { filter:drop-shadow(0 0 9px #ffcb05); }

#team { position:relative; }
#team::before { content:''; position:fixed; inset:0; z-index:-1; opacity:.18; background:linear-gradient(#070b16aa,#070b16ee),url('assets/arenas/arena-nexus.webp') center/cover; }
.lane { background:linear-gradient(#17223b99,#0b1325cc); border-color:#6c7b9a66; box-shadow:inset 0 0 24px #0006,0 10px 28px #0004; }
.lane::after { content:''; position:absolute; inset:9px; border:1px solid #ffffff0d; border-radius:9px; pointer-events:none; }
.lane.filled { border-color:#62eda2aa; box-shadow:0 0 24px #4cff7a22,inset 0 0 24px #0006; }

#battle .topbar { background:#07101add; border:1px solid #ffffff1a; border-radius:12px; padding:7px 9px; backdrop-filter:blur(14px); }
#field { flex:none; align-self:center; width:min(100%,calc((100dvh - 170px) * 1.7768)); aspect-ratio:1672/941; border-radius:20px; border:1px solid #ffffff38; box-shadow:inset 0 0 0 1px #0008,inset 0 -100px 100px #0007,0 16px 38px #0008; overflow:hidden; }
#field .board { justify-content:space-around; gap:0; padding-inline:4%; }
#field::before { background:linear-gradient(#02050bbd,#02050b10 37%,#02050b14 62%,#02050bcc),radial-gradient(circle at center,#54dcff00 40%,#02050b99 100%); }
#field::after { height:1px; box-shadow:0 0 14px #fff; }
.mon-plate { backdrop-filter:blur(10px); background:#07101adb; border-radius:7px; box-shadow:0 8px 20px #0008; }
.schedule { background:#07101a88; border:1px solid #ffffff12; border-radius:12px; padding:4px 8px; }
.actionbar .btn { border-radius:10px; text-transform:uppercase; letter-spacing:.05em; }
.panel,.dice { background:linear-gradient(145deg,#17213af5,#0a1122f5); border:1px solid #ffffff2c; box-shadow:0 24px 70px #000c,inset 0 1px #ffffff10; backdrop-filter:blur(18px); }

/* Attack cut-in: official artwork + animated speed field before damage resolves. */

@media (max-width:700px) {
  .menu-hero { min-height:530px; align-items:flex-end; padding:26px 20px; background-position:58% center; }
  .hero-copy { width:100%; }
  .hero-sigil { width:92px; height:92px; right:18px; top:22px; bottom:auto; font-size:1.45rem; }
  .hero-sigil::after { inset:11px; }
  .loop-strip i { display:none; }
  .collection-head { align-items:flex-start; flex-direction:column; gap:8px; }
  .collection-head .hint { line-height:1.45; }
  .topbar { flex-wrap:wrap; }
  .live-pill { order:3; margin-left:auto; }
  .area { min-height:380px; }
  #battle { min-height:100dvh; height:auto; }
  #field { width:100%; }
}

@media (prefers-reduced-motion:reduce) {
  *,*::before,*::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; }
}

/* ================= v7: phone layout for the battle =================
   The v6 field is a fixed 16:9 picture, which on a phone is only ~220px tall -- too short for two rows of
   Pokémon plus plates, so sprites overlapped each other and the name plates. On phones the field is tall
   instead (the arena art simply crops to "cover"), lanes are three equal columns, and the chrome is compact. */
@media (max-width:700px) {
  #battle { padding:6px 8px 12px; }
  #battle .topbar { gap:6px; padding:6px 8px; min-height:0; }
  #battle .topmid { order:5; flex-basis:100%; }
  #log { font-size:.78rem; line-height:1.25; }
  .area-label { font-size:.66rem; }
  .turn-no { margin-left:auto; }
  .schedule { flex-wrap:nowrap; gap:5px; padding:4px; min-height:0; overflow:hidden; }
  .sch-label { display:none; }
  .sch { flex:1 1 0; min-width:0; gap:4px; padding:2px 6px 2px 3px; }
  .sch img { width:24px; height:24px; flex:none; }
  .sch > span:last-child { min-width:0; }
  .sch b { display:block; font-size:.68rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .sch small { display:block; font-size:.52rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

  #field { aspect-ratio:auto; width:100%; height:clamp(430px,calc(100dvh - 260px),580px); background-position:center; }
  #field .board { padding-inline:1%; justify-content:space-between; gap:4px; }
  .mon, .mon.boss, .mon-empty { width:31.5%; }
  .mon-sprite { height:clamp(52px,10.5dvh,92px); }
  .mon.boss .mon-sprite { transform:scale(1.08); }
  .mon-plate { margin-top:6px; padding:1px 3px 2px; border-width:1.5px; }
  .mon-plate b { font-size:.66rem; }
  .tchips { gap:2px; }
  .tchip { font-size:.46rem; padding:0 3px; }
  .mon-stats { font-size:.6rem; gap:2px; }
  .mon .mult, .mon .inc { font-size:.62rem; min-width:0; padding:0 4px; left:-3px; top:-6px; }
  .mon .badge-swift, .mon .fatigue { transform:scale(.85); }
  .mon.will-attack .mon-plate::after { font-size:.5rem; top:-15px; padding:0 5px; }

  .actionbar { position:sticky; bottom:6px; z-index:5; }
  .actionbar .btn { min-width:0; width:100%; font-size:.95rem; padding:11px; }
  .dice { padding:10px; }
  .face { width:20px; height:20px; font-size:.66rem; }
  .fname { font-size:.68rem; }
  .banner { white-space:normal; max-width:90vw; text-align:center; font-size:1rem; padding:8px 16px; }
}

/* the scanner shows the ポケエネ badge it read so the player can sanity-check the number */
.energy-peek { height:56px; width:auto; max-width:200px; border-radius:6px; border:1px solid #ffffff33; background:#000; }

/* scanner polish: guide only exists once the camera has sized it; energy row wraps instead of squeezing the input */
.guide { display:none; }
.guide.on { display:block; }
#energy-row { flex-wrap:wrap; align-items:center; gap:8px; }
#energy-row label { flex-basis:100%; font-size:.85rem; }
#energy-row input { flex:none; width:110px; max-width:110px; }

/* ★ selector in the scanner: the stars printed on the disc */
#grade-row { flex-wrap:wrap; align-items:center; gap:8px; }
#grade-row label { flex-basis:100%; font-size:.85rem; }
.grade-pick { display:flex; gap:6px; flex-wrap:wrap; }
.gbtn { border:1px solid #ffffff2a; background:#1c2741cc; color:#ffd84a; border-radius:8px; padding:6px 10px; font:inherit; font-weight:800; cursor:pointer; }
.gbtn.on { background:linear-gradient(135deg,#ffe56b,#ffbd1f); color:#111827; border-color:#ffe67a; }

/* roulette wheel (catch): an SVG wheel that spins under a fixed pointer */
.wheel { position:relative; width:min(250px,72vw); aspect-ratio:1; margin:18px auto 10px; }
.wheel svg { width:100%; height:100%; display:block; filter:drop-shadow(0 8px 16px #000a); will-change:transform; }
.wheel path.picked { stroke:#fff; stroke-width:3.5; filter:drop-shadow(0 0 6px #fff); }
.wheel-pointer { position:absolute; left:50%; top:-12px; transform:translateX(-50%); width:0; height:0; border-left:13px solid transparent; border-right:13px solid transparent; border-top:26px solid #fff; filter:drop-shadow(0 3px 4px #000); z-index:2; }

/* catch quiz modal (ported from DigiAdventure's math gate) */
.ag-mathgate-backdrop { position:fixed; inset:0; z-index:700; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(3,6,20,.8); backdrop-filter:blur(4px); }
.ag-mathgate-backdrop.is-open { display:flex; }
.ag-mathgate-card { width:100%; max-width:340px; background:var(--panel); border:2px solid var(--accent); border-radius:20px; box-shadow:0 24px 70px #000c; padding:22px 20px 18px; text-align:center; }
.ag-mathgate-card.is-shake { animation:gateShake .32s ease; }
@keyframes gateShake { 0%,100% { transform:none; } 20% { transform:translateX(-9px); } 40% { transform:translateX(8px); } 60% { transform:translateX(-5px); } 80% { transform:translateX(4px); } }
.ag-mathgate-lock { font-size:30px; margin-bottom:6px; }
.ag-mathgate-title { font-weight:900; font-size:19px; margin:0 0 4px; }
.ag-mathgate-sub { font-size:13px; color:var(--mute); margin:0 0 16px; line-height:1.45; }
.ag-mathgate-sum { font-size:28px; font-weight:900; margin-bottom:16px; letter-spacing:.02em; }
.ag-mathgate-answer { display:flex; gap:8px; margin-bottom:12px; }
.ag-mathgate-input { flex:1; min-width:0; padding:12px 10px; background:var(--panel2,#172036); border:2px solid #ffffff2a; color:var(--ink); border-radius:12px; font:900 20px system-ui,sans-serif; text-align:center; }
.ag-mathgate-input:focus { outline:none; border-color:var(--cyan,#54dcff); }
.ag-mathgate-input.correct { background:rgba(85,230,165,.18); border-color:#55e6a5; color:#55e6a5; }
.ag-mathgate-input.wrong { background:rgba(255,85,116,.18); border-color:#ff5574; color:#ff5574; }
.ag-mathgate-submit { padding:12px 16px; background:linear-gradient(180deg,#ffe56b,#ffbd1f); border:0; color:#1c0d00; border-radius:12px; font-weight:900; font-size:15px; cursor:pointer; }
.ag-mathgate-submit:disabled { opacity:.6; cursor:default; }
.ag-mathgate-msg { min-height:18px; font-size:13px; font-weight:800; color:#ff5574; margin:0 0 8px; }
.lgrow { display:inline-block; margin:6px 0; }
.lg { display:inline-flex; align-items:center; gap:4px; margin:2px 7px; font-weight:800; color:var(--ink); }
.lg::before { content:''; width:12px; height:12px; border-radius:50%; background:var(--c); border:2px solid #0b1120; box-shadow:0 0 0 1px #ffffff55; }

/* friend battle + save chip */
.save-chip { font-size:.55em; font-weight:600; opacity:.7; margin-left:6px; white-space:nowrap; }
.friend-box { max-width:560px; margin:0 auto; padding:0 16px 40px; display:flex; flex-direction:column; gap:14px; align-items:center; text-align:center; }
.friend-team { display:flex; gap:10px; justify-content:center; flex-wrap:wrap; }
.friend-team .card { transform:scale(.78); transform-origin:top center; margin:0 -14px -40px; }
.friend-actions { display:flex; flex-direction:column; gap:12px; align-items:center; width:100%; margin-top:10px; }
.friend-join { display:flex; gap:8px; width:100%; max-width:320px; }
.friend-join input { flex:1; min-width:0; font:inherit; font-size:1.2em; letter-spacing:.25em; text-align:center; padding:10px; border-radius:12px; border:1px solid #ffffff30; background:#0a1122; color:inherit; }
.friend-code { font-size:2.6em; font-weight:800; letter-spacing:.18em; }
.friend-room { display:flex; flex-direction:column; gap:10px; align-items:center; }
/* scanner guide: green once a disc has been read */
.guide { transition:border-color .2s, box-shadow .2s; }
.guide.ok { border-style:solid; border-color:#3ddc84; box-shadow:0 0 0 999px #0006, 0 0 18px 2px #3ddc84aa inset; }

/* attack cut-in: slanted type-coloured panel with the Pokémon and a Mezastar-style move ribbon */
.attack-cutin { position:absolute; inset:0; z-index:40; overflow:hidden; display:flex; align-items:center; isolation:isolate; pointer-events:none; background:#070b16ee; border-radius:inherit; animation:cutinIn .18s ease-out both; }
.attack-cutin::before { content:''; position:absolute; inset:-15%; z-index:-2; background:linear-gradient(110deg,#050815 0 25%,color-mix(in srgb,var(--tc) 72%,#111) 25% 68%,#050815 68%); transform:skewX(-12deg); }
.attack-cutin::after { content:''; position:absolute; left:-5%; right:-5%; top:50%; height:3px; background:#fff; box-shadow:0 0 10px #fff,0 0 32px var(--tc); }
.attack-cutin .cutin-lines { position:absolute; inset:0; opacity:.7; background:repeating-linear-gradient(0deg,transparent 0 14px,#fff 15px 17px,transparent 18px 27px); transform:skewX(-18deg) scaleX(1.2); animation:cutinLines .3s linear infinite; mix-blend-mode:overlay; }
.attack-cutin .cutin-glow { position:absolute; width:62%; aspect-ratio:1; left:2%; top:50%; transform:translateY(-50%); border-radius:50%; background:radial-gradient(circle,#fff8 0, var(--tc) 18%,transparent 64%); filter:blur(8px); }
.attack-cutin img { position:absolute; z-index:2; left:5%; bottom:-10%; width:46%; height:94%; object-fit:contain; object-position:center bottom; filter:drop-shadow(14px 18px 0 #0005) drop-shadow(0 0 22px #fff5); animation:cutinMon .5s cubic-bezier(.15,.9,.25,1) both; }
.attack-cutin .cutin-copy { position:absolute; z-index:3; right:8%; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:flex-end; text-transform:uppercase; text-shadow:0 5px 0 #0008; }
.attack-cutin small { color:#fff; font-weight:900; letter-spacing:.25em; font-size:clamp(.7rem,1.3vw,1rem); }
.attack-cutin strong { font-size:clamp(2rem,7vw,5rem); line-height:.85; letter-spacing:-.06em; }
.attack-cutin.foe img { left:auto; right:8%; transform:scaleX(-1); }
.attack-cutin.foe .cutin-copy { right:auto; left:8%; align-items:flex-start; }
.attack-cutin.out { animation:cutinOut .24s ease-in forwards; }
/* the ribbon: blue banner, spinning starburst and yellow stars, like the Mezastar "Allies' Attack" tag */
.attack-cutin .ribbon { position:relative; margin-top:14px; padding:6px 22px 5px 44px; background:linear-gradient(#2f6fe0,#1c47a8); border-top:3px solid #fff; border-bottom:3px solid #0d2a6e; transform:rotate(-4deg); box-shadow:0 6px 14px #000a; text-shadow:none; text-transform:none; animation:ribbonIn .35s .2s ease-out both; }
.attack-cutin .ribbon b { display:block; color:#fff; font-style:italic; font-weight:950; font-size:clamp(1rem,3.2vw,2rem); -webkit-text-stroke:4px #0d2a6e; paint-order:stroke fill; white-space:nowrap; }
.attack-cutin .burst { position:absolute; left:-14px; top:50%; margin-top:-26px; width:52px; height:52px; background:var(--tc); clip-path:polygon(50% 0,60% 18%,80% 8%,78% 30%,100% 38%,82% 52%,96% 72%,74% 72%,70% 94%,52% 80%,34% 98%,30% 76%,6% 80%,20% 58%,0 42%,22% 34%,18% 12%,38% 22%); filter:drop-shadow(0 2px 0 #fff); animation:burstSpin 1.2s linear infinite; }
.attack-cutin .star { position:absolute; color:#ffd84a; -webkit-text-stroke:1px #7a5a00; text-shadow:0 2px 0 #7a5a00; font-size:1.2rem; }
.attack-cutin .star.s1 { right:-8px; top:-12px; } .attack-cutin .star.s2 { right:14px; bottom:-14px; font-size:.9rem; }
.attack-cutin .cutin-tired { position:absolute; right:-14px; top:-24px; z-index:6; }
.attack-cutin.foe .ribbon { transform:rotate(4deg); }
@keyframes cutinIn { from { opacity:0; clip-path:inset(45% 0); } }
@keyframes cutinOut { to { opacity:0; clip-path:inset(48% 0); } }
@keyframes cutinMon { from { opacity:0; translate:-22vw 4%; scale:.7; } }
@keyframes cutinLines { to { background-position:0 27px; } }
@keyframes ribbonIn { from { opacity:0; translate:30% 0; } }
@keyframes burstSpin { to { rotate:360deg; } }
@media (max-width:700px) {
  .attack-cutin img { left:0; width:54%; height:82%; bottom:0; }
  .attack-cutin.foe img { left:auto; right:0; }
  .attack-cutin .cutin-copy { right:5%; }
  .attack-cutin.foe .cutin-copy { left:5%; }
  .attack-cutin .ribbon { padding-left:38px; }
}

/* fatigue: a sweat drop and red "strain" marks, like a worn-out face */
.mon .sweat { position:absolute; right:-4%; top:-20px; z-index:5; width:48px; height:48px; pointer-events:none; filter:drop-shadow(0 2px 2px #0009); }
.mon .sweat .dr { animation:sweatDrip 1.1s ease-in infinite; transform-origin:center; }
.mon .sweat .st { stroke:#ff4d6d; stroke-width:3.5; stroke-linecap:round; animation:strain .55s ease-in-out infinite alternate; stroke-width:4.5; }
.mon.fatigued .mon-sprite img { filter:saturate(.6) drop-shadow(0 6px 4px #000a); }
.mon.fatigued .mon-sprite { transform:rotate(-3deg); transform-origin:bottom; }
.mon .fatigue { top:auto; bottom:-9px; right:-5px; background:#2b6cb0; font-size:.55rem; }

/* Championship artwork: keeps every non-battle screen visually grounded while
   preserving a dark, readable layer beneath the existing interface. */
#friend,
#areas-screen,
#team,
.tournament-screen {
  position:relative;
  isolation:isolate;
}
#friend::before,
#areas-screen::before,
#team::before,
.tournament-screen::before {
  content:'';
  position:fixed;
  inset:0;
  z-index:-1;
  pointer-events:none;
  background:
    linear-gradient(180deg,#050914d9 0%,#07101aba 42%,#050914f2 100%),
    radial-gradient(circle at 50% 42%,transparent 0 25%,#050914b8 78%),
    url('assets/arenas/arena-championship-v2.webp') center/cover no-repeat;
}
#friend::before { background-position:center 35%; }
#areas-screen::before { background-position:center 42%; }
#team::before { opacity:.78; background-position:center 48%; }
@keyframes sweatDrip { 0% { transform:translateY(-2px); opacity:1; } 80% { transform:translateY(5px); opacity:1; } 100% { transform:translateY(7px); opacity:0; } }
@keyframes strain { to { opacity:.35; } }
.attack-cutin .sweat { width:30px; height:30px; filter:drop-shadow(0 2px 2px #0009); }
.attack-cutin .sweat .dr { animation:sweatDrip 1.1s ease-in infinite; }
.attack-cutin .sweat .st { stroke:#ff4d6d; stroke-width:4.5; stroke-linecap:round; animation:strain .55s ease-in-out infinite alternate; }
.mon-plate .sweat-mini { display:inline-block; width:15px; height:15px; margin-left:3px; vertical-align:-3px; overflow:visible; }
.mon-plate .sweat-mini .dr { animation:sweatDrip 1.1s ease-in infinite; }
.mon-plate .sweat-mini .st { stroke:#ff4d6d; stroke-width:4.5; stroke-linecap:round; animation:strain .55s ease-in-out infinite alternate; }

/* Tournament */
.tournament-btn { color:#ffe476; border-color:#f6c94577; background:linear-gradient(135deg,#3c2c0fcc,#17233dcc); }
.tournament-panel { margin-top:22px; padding:clamp(14px,2vw,24px); border:1px solid #ffffff20; border-radius:18px; background:#07101ad9; box-shadow:0 24px 70px #0009; backdrop-filter:blur(15px); }
.tournament-copy { display:flex; align-items:end; justify-content:space-between; gap:18px; margin-bottom:18px; }
.tournament-copy h3 { margin:3px 0 5px; font-size:clamp(1.25rem,3vw,2rem); }
.tournament-kicker { color:#ffd65a; text-transform:uppercase; font-size:.67rem; font-weight:900; letter-spacing:.14em; }
.trainer-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); gap:10px; }
.trainer-choice { position:relative; min-height:190px; padding:0; overflow:hidden; border:1px solid #ffffff1f; border-radius:13px; background:linear-gradient(#1a2742,#0b1325); color:var(--ink); cursor:pointer; text-align:left; transition:.16s; }
.trainer-choice:hover,.trainer-choice.selected { transform:translateY(-3px); border-color:#ffd65a; box-shadow:0 0 0 2px #ffd65a33,0 14px 30px #0007; }
.trainer-choice img { position:absolute; inset:0 0 39px; width:100%; height:calc(100% - 39px); object-fit:contain; object-position:center top; filter:drop-shadow(0 8px 8px #0008); }
.trainer-choice span { position:absolute; inset:auto 0 0; padding:7px 9px; background:#07101af2; display:flex; flex-direction:column; }
.trainer-choice b { font-size:.83rem; }.trainer-choice small { color:#9eabc6; text-transform:capitalize; font-size:.67rem; }
.bracket { display:flex; gap:12px; overflow-x:auto; padding:4px 2px 12px; align-items:stretch; }
.bracket-round { min-width:210px; flex:1; display:flex; flex-direction:column; justify-content:space-around; gap:10px; }
.bracket-round h4 { margin:0 0 4px; color:#ffd65a; text-align:center; font-size:.72rem; text-transform:uppercase; letter-spacing:.1em; }
.bracket-match { border:1px solid #ffffff1c; border-radius:10px; overflow:hidden; background:#0c1728cc; }
.bracket-entry { display:grid; grid-template-columns:28px 1fr 18px; align-items:center; gap:6px; min-height:34px; padding:3px 6px; color:#9eabc6; font-size:.7rem; }
.bracket-entry + .bracket-entry { border-top:1px solid #ffffff12; }
.bracket-entry img { width:27px; height:27px; object-fit:contain; }.bracket-entry i { font-style:normal; text-align:center; }
.bracket-entry.is-player { color:#fff; background:#2b67bf30; font-weight:800; }.bracket-entry.is-winner { color:#86efac; }.bracket-entry.is-winner i { color:#5bea91; }
@media(max-width:600px){.tournament-copy{align-items:stretch;flex-direction:column}.tournament-copy .btn{width:100%}.trainer-grid{grid-template-columns:repeat(2,1fr)}.trainer-choice{min-height:210px}}

/* evolution */
.card.can-evolve { cursor:pointer; box-shadow:0 0 0 2px #ffd84a,0 0 18px 3px #ffd84aaa,0 10px 24px #0008; animation:evoGlow 1.6s ease-in-out infinite alternate; }
.card .evo-badge { position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:6; padding:1px 8px; border-radius:10px; background:linear-gradient(#ffe36b,#f2a900); color:#4a2f00; font-size:.58rem; font-weight:950; border:1.5px solid #fff; white-space:nowrap; box-shadow:0 2px 6px #000a; }
@keyframes evoGlow { to { box-shadow:0 0 0 2px #fff3a8,0 0 26px 6px #ffd84acc,0 10px 24px #0008; } }
.evo-panel { max-width:560px; }
.evo-row { display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap; margin:12px 0; }
.evo-from { display:flex; gap:6px; }
.evo-from .card, #evo-to .card { transform:scale(.8); transform-origin:center; margin:-14px -10px; }
#evo-to .card { transform:scale(.95); box-shadow:0 0 0 2px #ffd84a,0 0 22px 4px #ffd84aaa; }
.evo-arrow { font-size:1.8rem; color:#ffd84a; }
.evo-stats { font-weight:800; font-size:.8rem; color:#ffd84a; }
.evo-btns { display:flex; gap:10px; justify-content:center; margin-top:8px; }
@media (max-width:600px) { .evo-from .card { transform:scale(.62); margin:-30px -22px; } #evo-to .card { transform:scale(.8); } .evo-arrow { transform:rotate(90deg); } }
/* card detail pop-up: artwork banner on top, details below */
.card.tappable { cursor:pointer; }
.detail-panel { position:relative; max-width:560px; text-align:left; max-height:94dvh; overflow:auto; }
.detail-x { position:absolute; right:12px; top:12px; z-index:3; }
.detail-main { display:flex; flex-direction:column; gap:14px; }
.detail-art { position:relative; height:clamp(190px,34dvh,280px); border-radius:14px; border:3px solid #fff8; overflow:hidden; background:#dcecff var(--rarity-art) center/cover; box-shadow:inset 0 0 24px #0007; }
.detail-art::after { content:''; position:absolute; inset:0; background:linear-gradient(180deg,#fff2 0%,transparent 45%,#02081766 100%); pointer-events:none; }
.detail-art img { position:absolute; left:50%; bottom:4%; height:90%; max-width:92%; transform:translateX(-50%); object-fit:contain; z-index:1; filter:drop-shadow(0 8px 6px #000a); }
.detail-star { position:absolute; right:12px; bottom:12px; z-index:2; padding:2px 12px; border-radius:14px; background:#3b4cca; color:#ffd84a; font-weight:900; font-size:1.05rem; border:2px solid #fff; }
.detail-origin { position:absolute; left:12px; top:10px; z-index:2; font-size:1.3rem; text-shadow:0 0 4px #000; }
.detail-art.rarity-1 { --rarity-art:url('assets/cards/rarity/rarity-1-route.webp'); border-color:#c7d0d7; }
.detail-art.rarity-2 { --rarity-art:url('assets/cards/rarity/rarity-2-forest.webp'); border-color:#77d59a; }
.detail-art.rarity-3 { --rarity-art:url('assets/cards/rarity/rarity-3-cave.webp'); border-color:#74cfff; }
.detail-art.rarity-4 { --rarity-art:url('assets/cards/rarity/rarity-4-volcano.webp'); border-color:#b48cff; }
.detail-art.rarity-5 { --rarity-art:url('assets/cards/rarity/rarity-5-ruins.webp'); border-color:#ffd45c; }
.detail-art.rarity-6 { --rarity-art:url('assets/cards/rarity/rarity-6-rift.webp'); border-color:#f8efff; box-shadow:0 0 18px #dc70ffbb,inset 0 0 24px #0007; }
.detail-info { min-width:0; }
.detail-dex { color:#9eabc6; font-size:.78rem; font-weight:800; letter-spacing:.06em; }
.detail-info h2 { margin:2px 0 6px; font-size:1.7rem; }
.detail-info .tchips { justify-content:flex-start; margin:0 0 10px; }
.detail-info .tchip { font-size:.7rem; padding:1px 8px; }
.detail-stats { margin:0 0 10px; display:grid; grid-template-columns:1fr 1fr; gap:6px; }
.detail-stats div { display:flex; justify-content:space-between; gap:8px; padding:6px 10px; border-radius:8px; background:#ffffff0d; font-size:.85rem; }
.detail-stats dt { color:#9eabc6; } .detail-stats dd { margin:0; font-weight:800; text-align:right; }
.detail-stats div:last-child { grid-column:1 / -1; }
.detail-match { margin:0; font-size:.74rem; line-height:1.9; color:#c6d0e6; }
.detail-match b { color:#ffd84a; font-size:.68rem; text-transform:uppercase; letter-spacing:.08em; }
@media (max-width:420px) { .detail-info h2 { font-size:1.4rem; } .detail-stats { grid-template-columns:1fr; } }
.evo-options { display:flex; flex-wrap:wrap; gap:6px; justify-content:center; margin:6px 0; }
.evo-options .hint { flex-basis:100%; margin:0; }
.evo-opt { display:flex; align-items:center; gap:4px; padding:2px 8px 2px 2px; border-radius:999px; border:2px solid #ffffff2a; background:#ffffff0d; color:inherit; font:inherit; font-size:.72rem; font-weight:800; cursor:pointer; }
.evo-opt img { width:34px; height:34px; object-fit:contain; }
.evo-opt.on { border-color:#ffd84a; background:#ffd84a22; }

/* Mega Evolution */
.mon.megaing .mon-sprite::after { box-shadow:0 0 34px 16px #ff7bd8, 0 0 70px 30px #7be0ff88; opacity:1; }
.mon.megaing { z-index:30; }
.mon.mega-burst .mon-sprite::after { animation:ring .9s ease-out; }
.mon.is-mega .mon-plate { border-color:#ff7bd8; box-shadow:0 0 12px #ff7bd899; }
.mon.is-mega .mon-plate b { color:#ffc2ef; }
.mega-panel { max-width:520px; }
.mega-list { display:grid; gap:8px; margin:10px 0; }
.mega-row { display:grid; grid-template-columns:56px 1fr 56px; align-items:center; gap:8px; padding:6px 10px; border-radius:12px; background:#ffffff0d; text-align:left; }
.mega-row > img { width:56px; height:56px; object-fit:contain; filter:drop-shadow(0 3px 3px #0008); }
.mega-row .to { filter:drop-shadow(0 0 8px #ff7bd8); }
.mega-row small { margin-left:6px; color:#ffd84a; font-weight:800; }
.mega-forms { font-size:.78rem; color:#ffc2ef; font-weight:800; display:flex; gap:6px; flex-wrap:wrap; margin-top:3px; }
.mega-timer { position:relative; height:26px; border-radius:13px; background:#ffffff14; overflow:hidden; margin:8px 0; }
.mega-timer i { position:absolute; inset:0 auto 0 0; width:100%; background:linear-gradient(90deg,#ff7bd8,#7be0ff); transition:width .1s linear; }
.mega-timer i.low { background:linear-gradient(90deg,#ff4d4d,#ff9a3d); }
.mega-timer b { position:absolute; inset:0; display:grid; place-items:center; font-size:.85rem; text-shadow:0 1px 3px #000; }
.mega-dots { display:flex; gap:8px; justify-content:center; margin:6px 0; }
.mega-dots span { width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-weight:900; background:#ffffff14; border:2px solid #ffffff33; }
.mega-dots span.on { background:#2e9e4f; border-color:#7dffa0; }
.mega-q { font-size:2.2rem; font-weight:900; margin:8px 0; letter-spacing:.04em; }
.mega-answer { display:flex; gap:8px; justify-content:center; }
.mega-answer input { width:130px; font:inherit; font-size:1.5rem; text-align:center; padding:8px; border-radius:12px; border:2px solid #ffffff30; background:#0a1122; color:inherit; }
.mega-row.pick { cursor:pointer; border:2px solid transparent; }
.mega-row.pick.on { border-color:#ff7bd8; background:#ff7bd822; }

/* Mega ability badge: the Mega Evolution symbol on its rainbow orb */
.card .mega-tag { position:absolute; right:2px; top:23px; z-index:6; width:26px; height:26px; border-radius:50%; border:1.5px solid #fff; box-shadow:0 0 8px #ff7bd8cc, 0 2px 4px #0009; pointer-events:none; }
.detail-mega { position:absolute; left:10px; bottom:10px; z-index:2; width:52px; height:52px; border-radius:50%; border:2px solid #fff; box-shadow:0 0 14px #ff7bd8cc, 0 3px 6px #0009; }
.mega-ico { width:1.1em; height:1.1em; vertical-align:-.15em; border-radius:50%; }
.detail-art img.detail-mega { left:10px; right:auto; bottom:10px; top:auto; width:52px; height:52px; max-width:none; transform:none; object-fit:cover; filter:none; }

/* Mega Evolution cinematic (timed like DigiAdventure's digivolve) */
.mega-dim { position:absolute; inset:0; z-index:25; pointer-events:none; opacity:0; transition:opacity .25s; background:radial-gradient(circle at var(--ex,50%) var(--ey,50%), transparent 0 9%, rgba(0,0,20,.74) 26%); border-radius:inherit; }
.mega-dim.on { opacity:1; }
.mon.megaing { z-index:30; }
.mon.megaing .mon-plate { opacity:0; }
.mon.megaing .mon-sprite img { animation:megaGlow .2s steps(2) infinite; }
@keyframes megaGlow { 0% { filter:brightness(0) invert(1) drop-shadow(0 0 8px #fff); } 100% { filter:brightness(0) invert(1) drop-shadow(0 0 18px #ff7bd8); } }
.mega-banner { position:absolute; left:50%; bottom:5%; transform:translateX(-50%); z-index:35; text-align:center; pointer-events:none; display:flex; flex-direction:column; gap:6px; width:92%; }
.mega-banner span { font-size:clamp(.8rem,2.4vw,1.1rem); font-weight:900; color:#fff; text-shadow:2px 2px 0 #000, 0 0 10px #000; }
.mega-banner b { font-size:clamp(1.2rem,4.2vw,2rem); font-weight:950; color:#ffd84a; text-shadow:3px 3px 0 #000; min-height:1.2em; animation:megaName .4s ease-out; }
.mega-banner.foe b { color:#ff9aa8; }
@keyframes megaName { from { scale:1.6; opacity:0; } }
.mega-particle { position:fixed; z-index:340; width:8px; height:8px; border-radius:50%; background:#fff; box-shadow:0 0 8px #ff7bd8; pointer-events:none; }
.mega-ring { position:fixed; z-index:340; width:70px; height:70px; border-radius:50%; border:4px solid #fff; box-shadow:0 0 14px #ff7bd8, inset 0 0 14px #ff7bd8; pointer-events:none; }
/* still artwork (no animated sprite exists for it, e.g. the newest Megas) gets a gentle idle "breathing" so it does not look frozen */
.mon:not(.megaing) .mon-sprite:not(.hit) img.art { transform-origin:50% 100%; animation:idleBreath 2.2s ease-in-out infinite; }
@keyframes idleBreath { 0%,100% { transform:translateY(0) scale(1,1); } 50% { transform:translateY(-3px) scale(1.025,1.04); } }
.mon.foe:not(.megaing) .mon-sprite:not(.hit) img.art { animation-delay:-.7s; }
@media (prefers-reduced-motion: reduce) { .mon .mon-sprite img.art { animation:none !important; } }

.ag-mathgate-cancel { display:block; margin:6px auto 0; padding:8px 18px; background:transparent; border:1px solid #ffffff33; border-radius:10px; color:var(--mute); font:inherit; font-weight:700; cursor:pointer; }
.ag-mathgate-cancel.hidden { display:none; }

/* sorting */
.col-tools { display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.col-tools .hint { margin:0; }
.sortbox { display:inline-flex; align-items:center; gap:6px; font-size:.78rem; font-weight:800; color:var(--mute); }
.sortbox select { font:inherit; font-weight:800; color:inherit; background:#0a1122; border:1px solid #ffffff30; border-radius:10px; padding:6px 8px; max-width:150px; }
@media (max-width:640px) { .col-tools { align-items:flex-start; } .pager { flex-wrap:wrap; } }

/* Gigantamax: a giant sprite with a hot-pink aura (same transformation scene as Mega Evolution) */
.mon.is-gmax { z-index:12; }
.mon.is-gmax .mon-sprite { transform:scale(2); transform-origin:50% 100%; } /* a Gigantamax Pokémon is drawn twice as big, 1.5x on a phone (battle.js fitGiants keeps it inside the field) */
@media (max-width:700px) { .mon.is-gmax .mon-sprite { transform:scale(1.5); } }
.mon.is-gmax .mon-sprite::after { box-shadow:0 0 24px 10px #ff3d9acc; }
.mon.is-gmax .mon-plate { border-color:#ff3d9a; box-shadow:0 0 12px #ff3d9a99; }
.mon.is-gmax .mon-plate b { color:#ffb3d6; }
.card .gmax-tag { box-shadow:0 0 8px #ff3d9acc, 0 2px 4px #0009; }
.mega-panel.gmax .mega-timer i { background:linear-gradient(90deg,#ff3d9a,#ffb347); }
.mega-panel.gmax .mega-row .to { filter:drop-shadow(0 0 8px #ff3d9a); }
.mega-panel.gmax .mega-forms { color:#ffb3d6; }


/* Gigantamax scene: the whole arena turns into a hazy Dynamax storm */
.gmax-haze { position:absolute; inset:0; z-index:24; pointer-events:none; opacity:0; transition:opacity .7s ease; border-radius:inherit; overflow:hidden;
  background:
    radial-gradient(ellipse at var(--ex,50%) var(--ey,60%), transparent 0 16%, rgba(110,0,100,.26) 40%, rgba(35,0,55,.6) 100%),
    linear-gradient(180deg, rgba(85,10,140,.42) 0%, rgba(150,10,90,.34) 58%, rgba(35,0,50,.6) 100%); }
.gmax-haze.on { opacity:1; }
.gmax-haze .swirl { position:absolute; left:-30%; top:-30%; width:160%; height:160%; filter:blur(16px); mix-blend-mode:screen; opacity:.4;
  background:radial-gradient(circle at 28% 38%, #ff3d9acc 0 9%, transparent 34%), radial-gradient(circle at 72% 62%, #8a3dffcc 0 10%, transparent 36%), radial-gradient(circle at 52% 16%, #ff5a5aaa 0 8%, transparent 32%), radial-gradient(circle at 22% 80%, #c23dffaa 0 8%, transparent 30%);
  animation:gmaxSwirl 9s linear infinite; }
.gmax-haze .swirl.b { animation-duration:13s; animation-direction:reverse; opacity:.3; filter:blur(24px); }
.gmax-haze .flash { position:absolute; inset:0; background:radial-gradient(circle at 70% 20%, #ffd0f0, #ff3d9a 40%, transparent 70%); opacity:0; mix-blend-mode:screen; animation:gmaxFlash 1.7s steps(1) infinite; }
@keyframes gmaxSwirl { to { transform:rotate(360deg); } }
@keyframes gmaxFlash { 0%,90%,100% { opacity:0; } 92% { opacity:.38; } 94% { opacity:0; } 96% { opacity:.24; } 98% { opacity:0; } }

/* spectator controls (watching a CPU vs CPU tournament match) */
.spec-bar { display:flex; gap:8px; align-items:center; justify-content:center; margin-top:8px; font-weight:800; font-size:.8rem; color:var(--mute); }
.spec-bar.hidden { display:none; }
.spec-bar .btn.on { background:linear-gradient(180deg,#ffe56b,#ffbd1f); color:#1c0d00; }

/* tournament: resume panel, watch-or-skip prompt, locked squads */
.tr-btns { display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:10px; }
.tw-panel { max-width:640px; }
.tw-teams { display:flex; gap:10px; align-items:center; justify-content:center; margin:12px 0; flex-wrap:wrap; }
.tw-team { flex:1; min-width:150px; padding:8px; border-radius:12px; background:#ffffff0d; }
.tw-team b { display:block; margin-bottom:6px; }
.tw-vs { font-weight:900; color:#ffd84a; }
.squad { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
.sq { position:relative; display:flex; flex-direction:column; align-items:center; width:72px; font-size:.64rem; }
.sq img { width:60px; height:60px; object-fit:contain; filter:drop-shadow(0 3px 3px #0008); }
.sq small { font-weight:800; text-align:center; }
.sq em { font-style:normal; font-size:.58rem; font-weight:900; color:#ffc2ef; }
.bracket-entry { cursor:pointer; }
.sq .sq-star { color:#ffd84a; font-weight:900; }