/* ===== Chem Clash ANIME prototype (chain-anime.html only) ===== */
/* --- FX layer --- */
.ax-host{position:fixed;inset:0;pointer-events:none;z-index:80;overflow:hidden;--c1:#fff;--c2:#ffd66b}
.ax-catcher{position:fixed;inset:0;z-index:81;background:transparent;touch-action:none}
.ax-host>*,.ax-stage>*,.ax-summon>*{position:absolute;pointer-events:none;will-change:transform,opacity}
.ax-stage,.ax-summon{inset:0}
.ax-dim{inset:0;background:radial-gradient(ellipse at 50% 45%,rgba(10,8,30,.55),rgba(3,4,14,.9));opacity:0}
.ax-band{left:-10%;right:-10%;top:24%;height:46%;opacity:1;transform-origin:50% 50%;
  background:linear-gradient(100deg,transparent 0 6%,var(--c1) 6% 9%,rgba(0,0,0,0) 9% 11%,color-mix(in srgb,var(--c1) 85%,#000) 11% 89%,rgba(0,0,0,0) 89% 91%,var(--c2) 91% 94%,transparent 94%)}
.ax-band i{position:absolute;left:0;right:0;height:6px;background:#fff;opacity:.85}
.ax-band i:first-child{top:-14px}.ax-band i:last-child{bottom:-14px}
.ax-lines{left:50%;top:47%;width:max(170vw,170vh);height:max(170vw,170vh);opacity:0;mix-blend-mode:screen}
.ax-fig{left:0;right:0;margin:auto;bottom:16%;height:min(74vh,720px);max-width:96vw;width:auto;object-fit:contain;opacity:0;
  border-radius:18px;filter:drop-shadow(0 0 0 #fff) drop-shadow(6px 0 0 var(--c1)) drop-shadow(0 18px 30px rgba(0,0,0,.7))}
.ax-stage.foe .ax-fig{transform:scaleX(-1)}
.ax-title{left:5%;right:5%;bottom:10%;color:#fff;text-align:left;opacity:0}
.ax-stage.foe .ax-title{text-align:right}
.ax-title small{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.2em;background:var(--c1);color:#0a0e1e;padding:2px 10px;border-radius:3px}
.ax-title b{display:block;font-size:clamp(34px,10vw,64px);font-weight:900;line-height:1.05;letter-spacing:.04em;font-style:italic;
  -webkit-text-stroke:6px #0a0e1e;paint-order:stroke fill;text-shadow:6px 6px 0 var(--c1)}
.ax-title em{display:inline-block;font-style:normal;font-weight:800;font-size:14px;color:#0a0e1e;background:#fff;padding:2px 10px;border-radius:3px;margin-top:4px}
.ax-invert{inset:0;opacity:0;backdrop-filter:invert(1) contrast(1.6) saturate(0);-webkit-backdrop-filter:invert(1) contrast(1.6) saturate(0)}
.ax-white{inset:0;background:#fff;opacity:0}
.ax-burst{opacity:0}
.ax-p{display:block}
.ax-drop{border-radius:50% 50% 50% 50%/62% 62% 38% 38%}
.ax-star{clip-path:polygon(50% 0,61% 38%,100% 50%,61% 62%,50% 100%,39% 62%,0 50%,39% 38%)}
.ax-chip{clip-path:polygon(10% 0,100% 20%,80% 100%,0 75%)}
.ax-ring{border-radius:50%;border:3px solid}
.ax-streak{height:5px!important;width:34px!important;border-radius:3px}
.ax-flame{border-radius:50% 50% 50% 50%/62% 62% 38% 38%}
.ax-puff{border-radius:50%;opacity:.7}
.ax-orb{border-radius:50%}
.ax-tri{clip-path:polygon(50% 0,100% 100%,0 100%)}
.ax-hex{clip-path:polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%)}
.ax-cube{border-radius:3px;border:2px solid rgba(0,0,0,.35)}
.ax-dmg{color:#fff;font-weight:900;opacity:0;text-align:center;white-space:nowrap}
.ax-dmg b{display:block;font-size:64px;line-height:1;font-style:italic;-webkit-text-stroke:7px #c0102e;paint-order:stroke fill;text-shadow:5px 5px 0 #0a0e1e}
.ax-dmg.big b{font-size:84px}.ax-dmg.ko b{font-size:92px}
.ax-dmg small{display:inline-block;font-size:13px;background:#0a0e1e;color:#bff7e8;padding:2px 8px;border-radius:4px;margin-bottom:2px}
.ax-dmg em{display:block;font-style:italic;font-size:30px;color:#ffd66b;-webkit-text-stroke:5px #0a0e1e;paint-order:stroke fill}
/* summon */
.ax-sbg{inset:0;opacity:0;background:radial-gradient(circle at 50% 42%,color-mix(in srgb,var(--c1) 35%,#1a1040) 0,#0b0820 45%,#03040c 100%)}
.ax-mat{left:50%;top:42%;width:min(30vw,150px);margin-left:calc(min(30vw,150px)/-2);margin-top:calc(min(30vw,150px)*-.7);aspect-ratio:5/7;object-fit:cover;object-position:50% 0;border-radius:12px;border:2px solid rgba(255,255,255,.7);opacity:0}
.ax-orb{left:50%;top:42%;width:160px;height:160px;border-radius:50%;opacity:0;background:radial-gradient(circle,#fff 0 18%,var(--c2) 38%,color-mix(in srgb,var(--c1) 60%,transparent) 58%,transparent 70%)}
.ax-e{left:50%;top:42%;width:26px;height:8px;margin:-4px -13px;border-radius:6px;background:linear-gradient(90deg,transparent,#3FD7FF 40%,#fff);opacity:0}
.ax-ionlbl{display:none}
.ax-pair{width:24px;height:24px;border-radius:50%;background:radial-gradient(circle,#fff 0 30%,#3FD7FF 60%,transparent 72%);opacity:0}
.ax-rays{left:50%;top:42%;width:max(160vw,160vh);height:max(160vw,160vh);opacity:0}
.ax-sfig{left:50%;top:44%;height:min(64vh,640px);max-width:92vw;width:auto;object-fit:contain;opacity:0;border-radius:18px;
  filter:drop-shadow(0 0 2px #fff) drop-shadow(0 0 22px var(--c2))}
.ax-tcard{left:50%;bottom:7%;transform:translateX(-50%);text-align:center;color:#fff;opacity:0;white-space:nowrap}
.ax-tcard small{display:inline-block;font-size:11px;font-weight:800;letter-spacing:.2em;background:linear-gradient(90deg,#ffd66b,#fff2c4);color:#2a1a00;padding:2px 12px;border-radius:3px}
.ax-tcard b{display:block;font-size:clamp(36px,11vw,60px);font-weight:900;-webkit-text-stroke:6px #0a0e1e;paint-order:stroke fill;text-shadow:0 0 18px var(--c2)}
.ax-tcard i{display:block;font-style:italic;font-weight:700;letter-spacing:.12em;color:#e8eefc;font-size:14px}
.ax-tcard em{display:inline-block;margin-top:6px;font-style:normal;font-weight:800;font-size:16px;background:rgba(10,14,30,.85);border:1px solid #ffd66b;padding:3px 12px;border-radius:6px}
.ax-tcard em.faint{font-size:11px;opacity:.6}
@media (prefers-reduced-motion:reduce){.ax-p,.ax-burst,.ax-invert,.ax-white,.ax-lines,.ax-rays,.ax-e,.ax-pair,.ax-orb,.ax-mat{display:none!important}}

/* --- Battle screen: dark stylised arena, minimal --- */
html.anime body.ptcg-battle{background:#070816!important}
html.anime body.ptcg-battle .chem-scenery{display:none!important}
html.anime body.ptcg-battle .ptcg-battle-root{
  background:
   radial-gradient(ellipse 70% 22% at 50% 52%,rgba(120,150,255,.20),transparent 70%),
   radial-gradient(ellipse 90% 40% at 50% 100%,rgba(255,200,120,.10),transparent 70%),
   radial-gradient(ellipse 90% 40% at 50% 0%,rgba(255,80,120,.10),transparent 70%),
   linear-gradient(180deg,#120c2a 0%,#0b0b22 46%,#0d1430 54%,#090a1c 100%)!important;color:#eef2ff}
html.anime body.ptcg-battle .ptcg-battle-root::before{content:"";position:absolute;left:6%;right:6%;top:50%;height:1px;background:linear-gradient(90deg,transparent,rgba(255,214,107,.55),transparent);pointer-events:none}
html.anime body.ptcg-battle .ptcg-battle-root::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:repeating-linear-gradient(115deg,rgba(255,255,255,.025) 0 2px,transparent 2px 22px)}
html.anime body.ptcg-battle .ptcg-b-top .ptcg-chip{background:rgba(255,255,255,.06)!important;border:1px solid rgba(255,255,255,.12)!important;color:#dfe6ff!important;backdrop-filter:none!important}
html.anime body.ptcg-battle .ptcg-b-top .ptcg-iconbtn{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important}
html.anime body.ptcg-battle .ptcg-card .ptcg-in{border:1.5px solid rgba(255,255,255,.35)!important;border-radius:12px!important;box-shadow:0 10px 24px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.6)!important}
html.anime body.ptcg-battle .ptcg-zone.active .ptcg-card .ptcg-in{border:2px solid rgba(255,230,170,.75)!important}
html.anime body.ptcg-battle .ptcg-card.glow-ready .ptcg-in{border-color:#ffd66b!important;box-shadow:0 0 0 2px #ffd66b,0 0 24px rgba(255,214,107,.55),0 10px 24px rgba(0,0,0,.55)!important}
html.anime body.ptcg-battle .pip-free{display:none!important}
html.anime body.ptcg-battle .ptcg-card .ptcg-bot{background:linear-gradient(0deg,rgba(6,8,20,.85),transparent)!important}
html.anime body.ptcg-battle .ptcg-card .bar{height:5px!important;background:rgba(255,255,255,.15)!important}
html.anime body.ptcg-battle .ptcg-card .bar i{background:linear-gradient(90deg,#4cf0b0,#b8ffde)!important}
html.anime body.ptcg-battle .ptcg-zone.opp-bench,html.anime body.ptcg-battle .ptcg-zone.my-bench{gap:8px!important;opacity:.95}
html.anime body.ptcg-battle .ptcg-zone.active{position:relative}
html.anime body.ptcg-battle .ptcg-zone.active::before{content:"";position:absolute;left:50%;bottom:-6px;width:200px;height:26px;transform:translateX(-50%);border-radius:50%;
  background:radial-gradient(ellipse,rgba(120,170,255,.35),transparent 70%);pointer-events:none}
html.anime body.ptcg-battle .ptcg-dock{padding:6px 12px!important}
html.anime body.ptcg-battle .ptcg-dock .ptcg-fusebtn,html.anime body.ptcg-battle .ptcg-dock .ptcg-endbtn{background:linear-gradient(180deg,rgba(255,255,255,.10),rgba(255,255,255,.03))!important;border:1px solid rgba(255,255,255,.18)!important;border-radius:999px!important;color:#fff!important;backdrop-filter:none!important}
html.anime body.ptcg-battle .ptcg-dock .ptcg-fusebtn:not(:disabled){border-color:rgba(255,214,107,.8)!important;color:#ffd66b!important;background:linear-gradient(180deg,rgba(255,214,107,.22),rgba(255,214,107,.06))!important}
html.anime body.ptcg-battle .ptcg-dock .ptcg-endbtn small{font-size:9.5px!important;color:#aab4d4!important}
html.anime body.ptcg-battle .ptcg-hand{background:linear-gradient(0deg,rgba(0,0,0,.55),transparent)!important}
html.anime body.ptcg-battle .ptcg-coach .bub{background:rgba(255,255,255,.08)!important;border:1px solid rgba(255,214,107,.4)!important}
html.anime body.ptcg-battle .tutorial-banner{background:rgba(255,255,255,.07)!important;color:#fff!important}
html.anime body.ptcg-battle .ptcg-ai-bar button{background:rgba(255,255,255,.08)!important;color:#fff!important;border:1px solid rgba(255,255,255,.15)!important}
html.anime body.ptcg-battle .afx-layer,html.anime body.ptcg-battle .afx-ui{display:none}
/* --- iteration 3: portraits are full-bleed scenes, so frame them as tilted cut-in panels (never cropped: contain) --- */
.ax-dim{background:radial-gradient(ellipse at 50% 45%,rgba(14,10,40,.88),rgba(3,4,14,.97))!important}
.ax-band{top:20%!important;height:50%!important;background:linear-gradient(100deg,transparent 0 4%,var(--c1) 4% 6%,transparent 6% 8%,#141a3a 8% 92%,transparent 92% 94%,var(--c2) 94% 96%,transparent 96%)!important}
.ax-band::after{content:"";position:absolute;inset:0 8%;background:repeating-linear-gradient(100deg,rgba(255,255,255,.06) 0 3px,transparent 3px 16px),linear-gradient(90deg,var(--c1),transparent 70%);opacity:.55}
.ax-fig{bottom:auto!important;top:13%!important;height:min(60vh,600px)!important;border:4px solid #fff!important;border-radius:10px!important;
  filter:none!important;box-shadow:10px 10px 0 var(--c1),0 24px 40px rgba(0,0,0,.7)!important;rotate:-4deg}
.ax-stage.foe .ax-fig{transform:none;rotate:4deg}
.ax-title{bottom:auto!important;top:calc(13% + min(60vh,600px) - 40px)!important}
.ax-title b{font-size:clamp(38px,11vw,68px)!important}
.ax-burst{filter:drop-shadow(0 6px 0 rgba(0,0,0,.5))}
.ax-orb{width:120px!important;height:120px!important;background:radial-gradient(circle,#fff 0 22%,var(--c2) 34%,color-mix(in srgb,var(--c1) 70%,transparent) 48%,transparent 62%)!important}
.ax-orb::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:3px solid rgba(255,255,255,.85)}
.ax-mat{box-shadow:0 0 0 3px var(--c2),0 12px 24px rgba(0,0,0,.6)}
.ax-e{width:40px!important;height:10px!important;margin:-5px -20px!important}
.ax-rays{opacity:0}
.ax-sfig{top:40%!important;height:min(54vh,560px)!important;border:4px solid #fff!important;border-radius:12px!important;filter:none!important;box-shadow:0 0 0 3px #ffd66b,0 0 40px rgba(255,214,107,.6),0 24px 40px rgba(0,0,0,.7)!important}
/* iteration 5: bigger hero cards on tall phones/tablets, platform glow */
@media (min-height:800px){
  html.anime body.ptcg-battle .ptcg-zone.active:nth-child(2) .ptcg-card{--w:126px!important}
  html.anime body.ptcg-battle .ptcg-zone.active:nth-child(3) .ptcg-card{--w:158px!important}
}
@media (min-width:700px) and (min-height:1000px){
  html.anime body.ptcg-battle .ptcg-zone.active:nth-child(2) .ptcg-card{--w:170px!important}
  html.anime body.ptcg-battle .ptcg-zone.active:nth-child(3) .ptcg-card{--w:210px!important}
  html.anime body.ptcg-battle .opp-bench .ptcg-card,html.anime body.ptcg-battle .my-bench .ptcg-card{--w:92px!important}
  html.anime body.ptcg-battle .ptcg-hand .ptcg-card{--w:84px!important}
}
html.anime body.ptcg-battle .ptcg-zone.active::before{width:78%!important;max-width:280px;height:34px!important;bottom:-12px!important;
  background:radial-gradient(ellipse,rgba(140,180,255,.42),rgba(140,180,255,.08) 55%,transparent 72%)!important}
html.anime body.ptcg-battle .ptcg-zone.active:nth-child(2)::before{background:radial-gradient(ellipse,rgba(255,120,150,.38),rgba(255,120,150,.06) 55%,transparent 72%)!important}

/* contrast/playtest: cut-in title not clipped; covalent O=C=O; claw; lattice clap */
.ax-host{overflow:visible!important;padding:0 12px;box-sizing:border-box}
.ax-stage,.ax-summon{overflow:visible!important}
.ax-title{left:8%!important;right:4%!important;overflow:visible!important;padding-left:12px}
.ax-title b{overflow:visible!important;padding-left:.12em;margin-left:-.08em}
.ax-atom{width:44px;height:44px;border-radius:50%;border:3px solid #fff;display:flex;align-items:center;justify-content:center;
  font-weight:900;font-size:18px;color:#0a0e1e;box-shadow:0 0 18px rgba(159,231,255,.6);z-index:4}
.ax-bond{width:32px;height:4px;border-radius:2px;background:linear-gradient(90deg,transparent,#9FE7FF,#fff,#9FE7FF,transparent);opacity:0;z-index:3}
.ax-pair{border-radius:50%!important;background:radial-gradient(circle,#fff 0 28%,#3FD7FF 55%,rgba(63,215,255,0) 72%)!important;
  box-shadow:0 0 22px rgba(63,215,255,.85),0 0 40px rgba(159,231,255,.45)!important;opacity:0}
.ax-orb.soft{opacity:.35!important;filter:brightness(1.1)}
.ax-cube{border-radius:3px;border:2px solid rgba(0,0,0,.35);box-shadow:0 0 8px rgba(255,255,255,.35)}
.ax-clap{font-size:28px;font-weight:900;color:#ffd66b;-webkit-text-stroke:4px #0a0e1e;paint-order:stroke fill;opacity:0}
.ax-claw{width:10px;height:70px;border-radius:6px 6px 2px 2px;background:linear-gradient(180deg,#E6F59A,#C6E04A 60%,transparent);
  box-shadow:0 0 8px rgba(198,224,74,.8);transform-origin:50% 0;opacity:0}
.ax-p.ax-claw{clip-path:polygon(40% 0,70% 0,55% 100%,20% 100%)}