/*MC 2026-10-10 The Animated set: card finishes, card backs, tables, Region claim effects, turn auras and the shop's
  rarity labels. Kept out of style.css so the profile and share work going on at the same time can't collide with it.
  Every moving layer only animates transform or opacity, so phones move them on the graphics chip without repainting the
  card or the table. Reduce Motion stops all of it (style.css kills every animation); each look's resting frame is a
  finished still, so nothing looks broken when it's off. */

/* ===================== rarity labels ===================== */
.rar{display:inline-flex;align-items:center;gap:4px;margin-inline-start:6px;padding:2px 7px;border-radius:99px;font:800 9.5px/1.3 "Inter",sans-serif;letter-spacing:.08em;text-transform:uppercase;vertical-align:middle;white-space:nowrap}
.rar::before{content:"";width:5px;height:5px;transform:rotate(45deg);background:currentColor;border-radius:1px}
.rar.r-rare{color:#7fe3ff;background:rgba(63,190,255,.14);box-shadow:inset 0 0 0 1px rgba(127,227,255,.35)}
.rar.r-epic{color:#d4b4ff;background:rgba(139,92,246,.18);box-shadow:inset 0 0 0 1px rgba(196,160,255,.4)}
.rar.r-legendary{color:#ffd877;background:rgba(242,195,91,.16);box-shadow:inset 0 0 0 1px rgba(255,216,119,.45)}
.rar.r-mythic{color:#fff1e6;background:linear-gradient(110deg,#c8102e,#ff6b3d 50%,#c8102e);box-shadow:0 0 12px -2px rgba(255,90,60,.8),inset 0 0 0 1px rgba(255,230,210,.5)}
.item.rr-mythic{box-shadow:0 0 0 1px rgba(255,107,61,.55),0 14px 34px -18px rgba(255,80,40,.7)}
.item.rr-legendary{box-shadow:0 0 0 1px rgba(255,216,119,.4)}
.it-txt .rar{margin-inline-start:0;margin-top:3px}
/* two taps to buy anything this expensive */
.btn.armed{background:#fff3e0!important;color:#7a1020!important;box-shadow:0 0 0 2px #ff6b3d,0 0 16px -2px rgba(255,107,61,.8)!important}

/* ===================== Animated card finishes (.cf.vf-*) ===================== */
.cf[class*="vf-"]::before,.cf[class*="vf-"]::after{backface-visibility:hidden}
/*MC 2026-10-10 no blend modes on the moving layers: blending a layer that moves made the browser redo it every frame. Plain alpha looks the same on this art */
/* Ink Bleed: ink seeps in from the edges and pulls back */
.vf-ink img{filter:grayscale(.35) sepia(.25) contrast(1.12)}
.vf-ink::before{opacity:1;inset:-14%;background:radial-gradient(ellipse 62% 60% at 50% 50%,transparent 50%,rgba(20,14,10,.55) 66%,rgba(10,7,5,.92) 82%);transform:scale(1.04);animation:vfInk 6s ease-in-out infinite;will-change:transform}
.vf-ink::after{opacity:.85;background:radial-gradient(circle at 6% 92%,rgba(12,8,6,.85) 0 7%,transparent 16%),radial-gradient(circle at 94% 8%,rgba(12,8,6,.8) 0 5%,transparent 13%),radial-gradient(circle at 88% 96%,rgba(200,16,46,.55) 0 3%,transparent 7%);transform-origin:50% 50%;animation:vfInkB 6s ease-in-out infinite;will-change:transform,opacity}
.vf-ink{box-shadow:inset 0 0 0 2px rgba(20,14,10,.6)}
@keyframes vfInk{0%,100%{transform:scale(1.04)}50%{transform:scale(.9)}}
@keyframes vfInkB{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.18);opacity:1}}
/* Vermilion Seal: the hanko stamps the corner */
.vf-seal img{filter:sepia(.28) saturate(1.1) contrast(1.05)}
.vf-seal::before{opacity:.0;z-index:2;background:radial-gradient(circle at 82% 76%,rgba(200,16,46,.5),transparent 30%);animation:vfSealGlow 3.4s ease-out infinite}
.vf-seal::after{opacity:1;z-index:3;inset:auto 5% 7% auto;width:24%;aspect-ratio:1;height:auto;border-radius:12%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='2' y='2' width='36' height='36' rx='5' fill='%23c8102e'/><rect x='5' y='5' width='30' height='30' rx='3' fill='none' stroke='%23fff3e0' stroke-width='1.6'/><text x='20' y='28' text-anchor='middle' font-family='serif' font-weight='900' font-size='22' fill='%23fff3e0'>印</text></svg>") center/100% 100% no-repeat;transform:rotate(-6deg);animation:vfSeal 3.4s cubic-bezier(.2,.9,.3,1.2) infinite;will-change:transform,opacity;filter:drop-shadow(0 2px 3px rgba(0,0,0,.35))}
@keyframes vfSeal{0%{transform:scale(1.9) rotate(-14deg);opacity:0}12%{transform:scale(.92) rotate(-5deg);opacity:1}18%{transform:scale(1) rotate(-6deg)}80%{transform:scale(1) rotate(-6deg);opacity:1}100%{transform:scale(1) rotate(-6deg);opacity:0}}
@keyframes vfSealGlow{0%,10%{opacity:0}14%{opacity:1}40%,100%{opacity:0}}
/* Smoke Wisp: incense smoke curls up across the art */
.vf-smoke img{filter:grayscale(.55) brightness(.86) contrast(1.15)}
.vf-smoke::before,.vf-smoke::after{opacity:.7;inset:auto 0 0 0;height:300%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='160' viewBox='0 0 120 160' preserveAspectRatio='none'><defs><radialGradient id='a'><stop offset='0' stop-color='%23fff' stop-opacity='.85'/><stop offset='1' stop-color='%23fff' stop-opacity='0'/></radialGradient></defs><ellipse cx='30' cy='40' rx='34' ry='22' fill='url(%23a)'/><ellipse cx='88' cy='96' rx='40' ry='26' fill='url(%23a)'/><ellipse cx='40' cy='140' rx='30' ry='18' fill='url(%23a)'/></svg>") 0 0/100% 33.334% repeat-y;animation:vfSmoke 9s linear infinite;will-change:transform}
.vf-smoke::after{opacity:.75;transform:scaleX(-1);animation:vfSmoke2 14s linear infinite}
@keyframes vfSmoke{0%{transform:translateY(0)}100%{transform:translateY(33.334%)}}
@keyframes vfSmoke2{0%{transform:scaleX(-1) translateY(0)}100%{transform:scaleX(-1) translateY(33.334%)}}
.vf-smoke::before{bottom:auto;top:-200%}.vf-smoke::after{bottom:auto;top:-200%}
/* Kintsugi: gold-mended cracks that glow and fade */
.vf-kintsugi img{filter:sepia(.18) contrast(1.06) brightness(.97)}
.vf-kintsugi::before{opacity:1;z-index:2;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 80' preserveAspectRatio='none'><g fill='none' stroke='%23c8902e' stroke-width='1.3' stroke-linecap='round' stroke-linejoin='round'><path d='M-2 22 18 26 30 18 46 31 58 27 70 40'/><path d='M70 40 84 36 96 48 112 44 132 56'/><path d='M46 31 50 50 42 64 47 82'/><path d='M96 48 92 62 100 82'/><path d='M84 36 88 18 100 10 104 -2'/></g></svg>") center/100% 100% no-repeat}
.vf-kintsugi::after{opacity:0;z-index:3;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 80' preserveAspectRatio='none'><g fill='none' stroke='%23fff2b8' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M-2 22 18 26 30 18 46 31 58 27 70 40'/><path d='M70 40 84 36 96 48 112 44 132 56'/><path d='M46 31 50 50 42 64 47 82'/><path d='M96 48 92 62 100 82'/><path d='M84 36 88 18 100 10 104 -2'/></g></svg>") center/100% 100% no-repeat;filter:drop-shadow(0 0 3px rgba(255,214,120,.95));animation:vfKin 3.8s ease-in-out infinite;will-change:opacity}
.vf-kintsugi{box-shadow:inset 0 0 0 2px rgba(200,144,46,.7)}
@keyframes vfKin{0%,100%{opacity:0}45%,55%{opacity:1}}
/* Sakura Drift: petals drift across the card */
.vf-sakura img{filter:saturate(1.05) brightness(1.03)}
.vf-sakura::before,.vf-sakura::after{opacity:1;inset:-90px 0 0 -90px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='90' height='90'><g fill='%23ffb3c6'><path d='M14 16c5-7 13-5 11 2-2 6-9 7-11-2z'/><path d='M62 8c6-4 12 0 8 6-3 4-9 3-8-6z' fill='%23ff8fab'/><path d='M44 52c5-7 13-5 11 2-2 6-9 7-11-2z'/><path d='M78 70c4-5 10-3 8 2-2 4-7 4-8-2z' fill='%23ffd1dc'/><path d='M10 74c4-6 11-4 9 2-2 5-8 5-9-2z' fill='%23ff8fab'/></g></svg>") 0 0/90px 90px;animation:vfPetal 7s linear infinite;will-change:transform}
.vf-sakura::after{opacity:.75;background-size:140px 140px;inset:-140px 0 0 -140px;animation:vfPetalB 11s linear infinite}
.vf-sakura{box-shadow:inset 0 0 0 2px rgba(255,179,198,.6)}
@keyframes vfPetal{0%{transform:translate(0,0)}100%{transform:translate(90px,90px)}}
@keyframes vfPetalB{0%{transform:translate(0,0)}100%{transform:translate(140px,140px)}}
/* Ember Rise: sparks climb off the art over a low fire glow */
.vf-ember img{filter:sepia(.35) saturate(1.5) hue-rotate(-14deg) contrast(1.12) brightness(.92)}
.vf-ember::before{opacity:.55;background:radial-gradient(ellipse 80% 55% at 50% 112%,rgba(255,120,40,.95),rgba(200,30,20,.5) 45%,transparent 70%);transform-origin:50% 100%;animation:vfGlow 2.2s ease-in-out infinite alternate;will-change:transform,opacity}
.vf-ember::after{opacity:1;inset:0 0 -80px 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80'><g fill='%23ffcf6b'><circle cx='10' cy='12' r='2.6'/><circle cx='44' cy='30' r='2' fill='%23ff8a3d'/><circle cx='66' cy='8' r='2.8'/><circle cx='28' cy='58' r='2.2' fill='%23ff6a2b'/><circle cx='58' cy='66' r='1.8'/><circle cx='76' cy='44' r='2.1' fill='%23ff8a3d'/></g></svg>") 0 0/80px 80px;filter:drop-shadow(0 0 2px #ff8a3d);animation:vfRise 3.2s linear infinite;will-change:transform}
@keyframes vfGlow{0%{opacity:.55;transform:scaleY(.9)}100%{opacity:.95;transform:scaleY(1.08)}}
@keyframes vfRise{0%{transform:translateY(0)}100%{transform:translateY(-80px)}}
/* Frost Creep: frost grows in from the corners, glints, melts */
.vf-frost img{filter:saturate(.6) brightness(1.04) contrast(1.05)}
.vf-frost::before{opacity:1;inset:-10%;background:radial-gradient(circle at 0 0,rgba(235,250,255,.95) 0 6%,rgba(170,220,255,.55) 16%,transparent 32%),radial-gradient(circle at 100% 100%,rgba(235,250,255,.95) 0 6%,rgba(170,220,255,.55) 16%,transparent 32%),radial-gradient(circle at 100% 0,rgba(210,240,255,.6),transparent 22%),url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g stroke='%23eaf8ff' stroke-width='.8' opacity='.55' fill='none'><path d='M30 4v52M7 17l46 26M7 43l46-26'/><path d='M30 12l-5-5M30 12l5-5M30 48l-5 5M30 48l5 5'/></g></svg>") 0 0/38px 38px,linear-gradient(180deg,rgba(130,190,255,.25),rgba(130,190,255,.1));transform:scale(1);animation:vfFrost 7s ease-in-out infinite;will-change:transform,opacity}
.vf-frost::after{opacity:1;z-index:2;inset:0 auto 0 0;width:260%;background:linear-gradient(110deg,transparent 40%,rgba(255,255,255,.7) 46%,transparent 52%);transform:translateX(-80%);animation:vfFrostG 7s ease-in-out infinite;will-change:transform}
.vf-frost{box-shadow:inset 0 0 0 2px rgba(200,236,255,.75)}
@keyframes vfFrost{0%,100%{transform:scale(1.18);opacity:.55}50%{transform:scale(1);opacity:1}}
@keyframes vfFrostG{0%,45%{transform:translateX(-80%)}70%,100%{transform:translateX(15%)}}
/* Koi Pond: ripples spread while two koi circle below */
.vf-koi img{filter:saturate(.85) brightness(.95)}
.vf-koi::before{opacity:1;z-index:2;left:50%;top:50%;right:auto;bottom:auto;width:120%;aspect-ratio:1;height:auto;margin:-60% 0 0 -60%;background:radial-gradient(circle,transparent 30%,rgba(220,250,255,.55) 31.5%,transparent 34%,transparent 48%,rgba(220,250,255,.35) 49.5%,transparent 52%,transparent 66%,rgba(220,250,255,.2) 67.5%,transparent 70%);transform:scale(.4);animation:vfRipple 4s ease-out infinite;will-change:transform,opacity}
.vf-koi::after{opacity:.9;left:50%;top:50%;right:auto;bottom:auto;width:110%;aspect-ratio:1;height:auto;margin:-55% 0 0 -55%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g transform='translate(50 9) rotate(90)'><path d='M0 0c6-5 16-5 22 0-6 5-16 5-22 0z' fill='%23ff7a2f'/><path d='M22 0l7-5v10z' fill='%23ff9a5c'/><circle cx='6' cy='-1' r='2' fill='%23fff3e0'/></g><g transform='translate(50 91) rotate(-90)'><path d='M0 0c6-5 16-5 22 0-6 5-16 5-22 0z' fill='%23fff3e0'/><path d='M8 -2c3-2 6-2 8 0-2 2-5 2-8 0z' fill='%23e8432a'/><path d='M22 0l7-5v10z' fill='%23ffe3cc'/></g></svg>") center/100% 100% no-repeat;animation:vfKoi 16s linear infinite;will-change:transform}
.vf-koi{box-shadow:inset 0 0 0 2px rgba(120,220,230,.6),inset 0 0 26px rgba(20,90,110,.55)}
@keyframes vfRipple{0%{transform:scale(.35);opacity:.9}100%{transform:scale(1.25);opacity:0}}
@keyframes vfKoi{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
/* Raijin Crackle: lightning snaps across and lights the card */
.vf-raijin img{filter:saturate(.75) contrast(1.22) brightness(.84)}
.vf-raijin::before,.vf-raijin::after{opacity:0;z-index:2;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 130 80' preserveAspectRatio='none'><defs><radialGradient id='g' cx='.42' cy='.4' r='.6'><stop offset='0' stop-color='%23cfe6ff' stop-opacity='.55'/><stop offset='1' stop-color='%23cfe6ff' stop-opacity='0'/></radialGradient></defs><rect width='130' height='80' fill='url(%23g)'/><path d='M58 -2 50 22 62 24 44 52 56 54 38 84' fill='none' stroke='%239fd0ff' stroke-width='4' stroke-linejoin='round' opacity='.6'/><path d='M58 -2 50 22 62 24 44 52 56 54 38 84' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linejoin='round'/><path d='M62 24 78 30 86 44' fill='none' stroke='%23fff' stroke-width='1' /></svg>") center/100% 100% no-repeat;animation:vfBolt 3.6s steps(1,end) infinite;will-change:opacity}
.vf-raijin::after{transform:scaleX(-1) translateX(-18%);animation:vfBolt2 3.6s steps(1,end) infinite}
.vf-raijin{box-shadow:inset 0 0 0 2px rgba(159,208,255,.6),inset 0 0 22px rgba(80,140,255,.35)}
@keyframes vfBolt{0%{opacity:0}58%{opacity:1}63%{opacity:0}66%{opacity:.9}74%,100%{opacity:0}}
@keyframes vfBolt2{0%{opacity:0}18%{opacity:.9}24%{opacity:.3}27%{opacity:.8}31%,100%{opacity:0}}
/* Glitch Scan: a scanline rolls down, colours split and snap back */
.vf-glitch img{filter:saturate(1.35) contrast(1.12);animation:vfJit 2.8s steps(1,end) infinite;will-change:transform}
.vf-glitch::before{opacity:1;z-index:2;background:repeating-linear-gradient(0deg,rgba(0,0,0,.22) 0 1px,transparent 1px 3px),linear-gradient(90deg,rgba(255,0,90,.16),transparent 30% 70%,rgba(0,255,240,.16));mix-blend-mode:hard-light}
.vf-glitch::after{opacity:1;z-index:3;inset:0 0 auto 0;height:22%;background:linear-gradient(180deg,transparent,rgba(0,255,240,.35) 40%,rgba(255,255,255,.55) 50%,rgba(255,0,140,.35) 60%,transparent);transform:translateY(-120%);animation:vfScan 2.8s linear infinite;will-change:transform}
.vf-glitch{box-shadow:inset 0 0 0 2px rgba(0,255,240,.45)}
@keyframes vfScan{0%{transform:translateY(-120%)}100%{transform:translateY(520%)}}
@keyframes vfJit{0%{transform:none}31%{transform:translate(2px,0) skewX(-2deg)}33%{transform:translate(-3px,0)}35%{transform:none}77%{transform:translate(-2px,1px)}79%{transform:translate(3px,0) skewX(3deg)}81%{transform:none}}
/* Aurora Veil: northern lights roll over the art */
.vf-aurora img{filter:brightness(.78) saturate(.85) hue-rotate(-10deg)}
.vf-aurora::before{opacity:.45;inset:auto;left:0;top:-30%;width:300%;height:160%;background:linear-gradient(100deg,transparent 5%,rgba(46,240,176,.65) 15%,rgba(63,246,255,.4) 25%,transparent 35%,rgba(139,92,246,.6) 48%,rgba(255,111,216,.35) 56%,transparent 66%,rgba(46,240,176,.6) 80%,transparent 92%);transform:translateX(0) skewY(-6deg);animation:vfAur 9s linear infinite;will-change:transform}
.vf-aurora::after{opacity:.35;inset:-20% 0;background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 10px,rgba(200,255,240,.25) 12px,rgba(255,255,255,0) 16px 26px);transform:translateX(0);animation:vfAur2 5s ease-in-out infinite alternate;will-change:transform}
.vf-aurora{box-shadow:inset 0 0 0 2px rgba(46,240,176,.5)}
@keyframes vfAur{0%{transform:translateX(0) skewY(-6deg)}100%{transform:translateX(-66.667%) skewY(-6deg)}}
@keyframes vfAur2{0%{transform:translateX(-6%)}100%{transform:translateX(6%)}}
/* Night Sky: a deep starfield, a slow nebula, a shooting star */
.vf-cosmos img{filter:brightness(.42) saturate(.5) contrast(1.3) sepia(.2) hue-rotate(185deg)}
.vf-cosmos::before{opacity:1;inset:-60px 0 0 -60px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60'><g fill='%23fff'><circle cx='6' cy='8' r='1.3'/><circle cx='38' cy='14' r='.9'/><circle cx='22' cy='34' r='1.5'/><circle cx='52' cy='40' r='1'/><circle cx='12' cy='52' r='.9'/><circle cx='44' cy='56' r='1.3' fill='%23ffe6a8'/><circle cx='30' cy='4' r='.7'/><circle cx='56' cy='24' r='.8' fill='%23cfe0ff'/></g></svg>") 0 0/60px 60px,radial-gradient(ellipse at 30% 40%,rgba(139,92,246,.55),transparent 55%),radial-gradient(ellipse at 75% 70%,rgba(255,93,115,.35),transparent 50%);animation:vfStars 24s linear infinite,vfTw 3s ease-in-out infinite alternate;will-change:transform,opacity}
.vf-cosmos::after{opacity:0;z-index:2;inset:auto;left:10%;top:6%;width:46%;height:2px;border-radius:2px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.95));box-shadow:0 0 6px #fff;transform:rotate(24deg) translateX(-60%);transform-origin:0 50%;animation:vfShoot 4.6s ease-in infinite;will-change:transform,opacity}
.vf-cosmos{box-shadow:inset 0 0 0 2px rgba(196,170,255,.55),inset 0 0 30px rgba(60,30,140,.6)}
@keyframes vfStars{0%{transform:translate(0,0)}100%{transform:translate(60px,60px)}}
@keyframes vfTw{0%{opacity:.7}100%{opacity:1}}
@keyframes vfShoot{0%,70%{opacity:0;transform:rotate(24deg) translateX(-60%)}74%{opacity:1}88%,100%{opacity:0;transform:rotate(24deg) translateX(160%)}}

/* the small finish dots on card tiles and the finish rows in a card's popup */
.fd-anim{background:conic-gradient(#ff5d73,#ffd166,#2ef0b0,#8b5cf6,#ff5d73)!important;opacity:.35}
.fd-anim.on{opacity:1;box-shadow:0 0 6px rgba(255,209,102,.7)}
.fin-h{margin:14px 0 6px;font:800 11px "Inter",sans-serif;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.fin-list li .rar{margin-inline-start:6px}
/* the Animated finishes showroom on the Finishes tab */
.afin{margin:14px 0 18px}
.afin-hd{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap}
.afin-hd p{margin:0;color:var(--muted);font-size:12.5px}
.afin-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:10px}
.afin-t{display:grid;gap:6px;padding:8px;border-radius:14px;background:rgba(255,255,255,.04);border:1px solid var(--line);text-align:start;color:inherit;font:inherit;cursor:pointer;min-width:0}
.afin-t:hover,.afin-t.on{border-color:var(--gold);background:rgba(242,195,91,.08)}
.afin-t .cf{aspect-ratio:13/8;border-radius:9px}
.afin-t b{font-size:13px;line-height:1.2}
.afin-t .afin-p{display:flex;align-items:center;justify-content:space-between;gap:6px;flex-wrap:wrap}
.afin-t .afin-p small{color:var(--muted);font-size:11px}
.afin-t .rar{margin:0}
.afin-pv{display:flex;align-items:center;gap:8px;margin:8px 0 0;padding:8px 12px;border-radius:12px;background:rgba(242,195,91,.08);border:1px solid rgba(242,195,91,.3);font-size:12.5px}
.afin-pv button{margin-inline-start:auto}
@media (max-width:520px){.afin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.afin-t{padding:6px}.afin-t b{font-size:12px}}

/* ===================== Animated card backs (.cb-*) ===================== */
.cb[class*="cb-"]::before{content:"";position:absolute;inset:0;pointer-events:none}
.cb.cb-tide{background:linear-gradient(170deg,#0f3b6b,#06182f)}
.cb.cb-tide::before{right:-24px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='12'><g fill='none' stroke='%23a8e4ff' stroke-width='1.3'><path d='M0 12a12 12 0 0 1 24 0'/><path d='M5 12a7 7 0 0 1 14 0'/><path d='M-12 6a12 12 0 0 1 24 0'/><path d='M12 6a12 12 0 0 1 24 0'/></g></svg>") 0 0/12px 6px;opacity:.85;animation:cbTide 3s linear infinite;will-change:transform}
.cb.cb-tide::after{content:"潮";background:#0b2a4a;color:#dff5ff;box-shadow:inset 0 0 0 2px #a8e4ff,0 0 10px rgba(168,228,255,.5)}
@keyframes cbTide{0%{transform:translateX(0)}100%{transform:translateX(-12px)}}
.cb.cb-lantern{background:radial-gradient(ellipse 60% 45% at 50% 50%,#ff9a3d,#c8102e 60%,#3a0610 100%)}
.cb.cb-lantern::before{background:repeating-linear-gradient(0deg,rgba(60,8,8,.45) 0 1px,transparent 1px 5px),radial-gradient(circle at 50% 50%,rgba(255,226,154,.9),transparent 45%);animation:cbFlick 1.8s ease-in-out infinite alternate;will-change:opacity,transform}
.cb.cb-lantern::after{content:"灯";border-radius:50%;background:#2a0508;color:#ffd77a;box-shadow:inset 0 0 0 2px #ffb24a,0 0 12px rgba(255,178,74,.8)}
@keyframes cbFlick{0%{opacity:.6;transform:scale(.96)}40%{opacity:.95}60%{opacity:.75}100%{opacity:1;transform:scale(1.04)}}
.cb.cb-mon{background:radial-gradient(circle at 50% 50%,#2a1a0a,#0c0805 70%);box-shadow:inset 0 0 0 2px #c8902e,0 4px 10px -3px rgba(0,0,0,.6)}
.cb.cb-mon::before{inset:auto;left:50%;top:50%;width:84%;aspect-ratio:1;margin:-42% 0 0 -42%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-50 -50 100 100'><g fill='none' stroke='%23f2c35b' stroke-width='3'><circle r='46'/><circle r='12'/></g><g fill='%23f2c35b'><path id='p' d='M0 -14C10 -24 12 -36 0 -42C-12 -36 -10 -24 0 -14Z'/><use href='%23p' transform='rotate(45)'/><use href='%23p' transform='rotate(90)'/><use href='%23p' transform='rotate(135)'/><use href='%23p' transform='rotate(180)'/><use href='%23p' transform='rotate(225)'/><use href='%23p' transform='rotate(270)'/><use href='%23p' transform='rotate(315)'/></g></svg>") center/100% 100% no-repeat;filter:drop-shadow(0 0 3px rgba(242,195,91,.6));animation:cbSpin 14s linear infinite;will-change:transform}
.cb.cb-mon::after{display:none}
@keyframes cbSpin{0%{transform:rotate(0)}100%{transform:rotate(360deg)}}
.cb.cb-cascade{background:linear-gradient(170deg,#3a1f0a,#120802)}
.cb.cb-cascade::before{top:-30px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='30' height='30'><g stroke='%23a8741e' stroke-width='1'><ellipse cx='8' cy='8' rx='5' ry='3.2' fill='%23ffd56b'/><ellipse cx='23' cy='22' rx='5' ry='3.2' fill='%23f2c35b'/></g></svg>") 0 0/22px 22px;animation:cbFall 2.6s linear infinite;will-change:transform}
.cb.cb-cascade::after{content:"金";background:linear-gradient(135deg,#ffe29a,#c8902e);color:#3b2206;box-shadow:inset 0 0 0 2px rgba(255,255,255,.5),0 0 10px rgba(255,214,107,.7)}
@keyframes cbFall{0%{transform:translateY(0)}100%{transform:translateY(22px)}}
.cb.cb-eye{background:radial-gradient(circle at 50% 46%,#3b1a6b,#0d0620 70%);box-shadow:inset 0 0 0 2px #8b5cf6,0 4px 10px -3px rgba(0,0,0,.6)}
.cb.cb-eye::before{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 50 70'><path d='M25 14 46 54H4Z' fill='none' stroke='%23f2c35b' stroke-width='2'/><g stroke='%23f2c35b' stroke-width='1' opacity='.6'><path d='M25 4v6M8 30l5 3M42 30l-5 3M25 62v4'/></g></svg>") center/100% 100% no-repeat,radial-gradient(circle at 50% 56%,rgba(242,195,91,.45),transparent 40%);animation:cbBreathe 3.4s ease-in-out infinite;will-change:transform,opacity}
.cb.cb-eye::after{content:"";left:50%;top:57%;width:44%;aspect-ratio:2/1.1;border-radius:50%;transform:translate(-50%,-50%);background:radial-gradient(circle at 50% 50%,#120a26 0 18%,#2ef0b0 19% 34%,#fff8e6 36%);box-shadow:0 0 8px rgba(46,240,176,.7);animation:cbBlink 4.6s ease-in-out infinite;will-change:transform}
@keyframes cbBreathe{0%,100%{transform:scale(1);opacity:.85}50%{transform:scale(1.06);opacity:1}}
@keyframes cbBlink{0%,44%,52%,100%{transform:translate(-50%,-50%) scaleY(1)}48%{transform:translate(-50%,-50%) scaleY(.08)}}
.cb.cb-phoenix{background:linear-gradient(0deg,#ffb23d,#e0301e 40%,#4a0610)}
.cb.cb-phoenix::before{top:auto;height:300%;bottom:-200%;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'><g fill='%23ffe08a' opacity='.75'><path d='M8 40C2 30 10 26 8 16 16 24 16 32 12 40Z'/><path d='M28 40C22 28 32 24 30 10 40 22 38 32 34 40Z' fill='%23fff3c4'/></g></svg>") 0 0/26px 26px;animation:cbRise 1.8s linear infinite;will-change:transform}
.cb.cb-phoenix::after{content:"鳳";background:linear-gradient(135deg,#ffe29a,#c8902e);color:#7a1020;box-shadow:inset 0 0 0 2px #fff3c4,0 0 14px rgba(255,178,61,.95);animation:cbPulse 1.8s ease-in-out infinite;will-change:transform}
@keyframes cbRise{0%{transform:translateY(0)}100%{transform:translateY(-33.334%)}}
@keyframes cbPulse{0%,100%{transform:translate(-50%,-50%) rotate(-5deg) scale(1)}50%{transform:translate(-50%,-50%) rotate(-5deg) scale(1.1)}}

/* ===================== Animated tables (.game.tb-* with a .tbfx layer) ===================== */
.game.tbx{isolation:isolate}
.tbfx{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none;border-radius:inherit;contain:strict}
.tbfx > i{position:absolute;display:block;pointer-events:none;backface-visibility:hidden}
.pv-table .tbfx{z-index:0}
.pv-table .tbfx ~ i{opacity:.28}
.pv-table.tb-festival .tbfx > i:nth-child(1){top:-10px;opacity:1}
.pv-table .tbfx > i:nth-child(n){width:auto;height:auto;left:0;top:0;border-radius:0;opacity:1;background:none}
/* Rain on Washi */
.game.tb-rain,.pv-table.tb-rain{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><g stroke='%23d9cfb8' stroke-width='.6' opacity='.12' fill='none'><path d='M0 20c40 6 80-8 140 4'/><path d='M0 74c30-8 90 10 140-2'/><path d='M10 120c50 4 70-10 130 0'/><path d='M40 0c-6 40 10 90-4 140'/><path d='M104 0c8 50-6 80 6 140'/></g></svg>") 0 0/140px 140px,radial-gradient(circle at 50% -10%,rgba(200,210,230,.22),transparent 55%),linear-gradient(170deg,#2b3140,#12151d)}
.tb-rain .tbfx > i:nth-child(1),.tb-rain .tbfx > i:nth-child(2){inset:-120px 0 0 -60px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='120'><g stroke='%23cfe0ff' stroke-linecap='round'><path d='M8 6l-4 18' stroke-width='1.1' opacity='.26'/><path d='M40 40l-4 18' stroke-width='.9' opacity='.2'/><path d='M24 78l-4 18' stroke-width='1.2' opacity='.28'/><path d='M54 100l-4 16' stroke-width='.8' opacity='.18'/></g></svg>") 0 0/60px 120px;animation:tbRain .7s linear infinite;will-change:transform}
.tb-rain .tbfx > i:nth-child(2){opacity:.5!important;background-size:40px 80px;inset:-80px 0 0 -40px;animation:tbRain2 1.3s linear infinite}
@keyframes tbRain{0%{transform:translate(0,0)}100%{transform:translate(30px,120px)}}
@keyframes tbRain2{0%{transform:translate(0,0)}100%{transform:translate(20px,80px)}}
/* Festival Night */
.game.tb-festival,.pv-table.tb-festival{background:radial-gradient(ellipse 120% 40% at 50% 0,rgba(255,120,60,.28),transparent 60%),linear-gradient(175deg,#1d1640,#0b0820)}
.tb-festival .tbfx > i:nth-child(1){left:-6%;right:-6%;top:-22px;height:74px;opacity:.5;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='74'><path d='M0 10Q60 30 120 10' stroke='%23584a3a' stroke-width='1.4' fill='none'/><g><line x1='30' y1='16' x2='30' y2='24' stroke='%23584a3a'/><rect x='19' y='24' width='22' height='30' rx='10' fill='%23e0301e'/><rect x='19' y='24' width='22' height='30' rx='10' fill='none' stroke='%23ffb24a' stroke-width='1'/><path d='M19 32h22M19 39h22M19 46h22' stroke='%237a1020' stroke-width='.8'/><rect x='25' y='54' width='10' height='4' fill='%23222'/></g><g><line x1='90' y1='16' x2='90' y2='24' stroke='%23584a3a'/><rect x='79' y='24' width='22' height='30' rx='10' fill='%23f2a33a'/><path d='M79 32h22M79 39h22M79 46h22' stroke='%23a55a10' stroke-width='.8'/><rect x='85' y='54' width='10' height='4' fill='%23222'/></g></svg>") 0 0/120px 74px repeat-x;transform-origin:50% 0;animation:tbSway 4s ease-in-out infinite alternate;will-change:transform}
.tb-festival .tbfx > i:nth-child(2){left:0;right:0;top:0;height:120px;background:radial-gradient(circle at 15% 46px,rgba(255,150,60,.45),transparent 40px),radial-gradient(circle at 40% 46px,rgba(255,190,90,.4),transparent 40px),radial-gradient(circle at 65% 46px,rgba(255,150,60,.45),transparent 40px),radial-gradient(circle at 90% 46px,rgba(255,190,90,.4),transparent 40px);animation:tbGlow 2.4s ease-in-out infinite alternate;will-change:opacity}
.tb-festival .tbfx > i:nth-child(3){inset:0 0 -200px 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='200' height='200'><g fill='%23ffd28a'><circle cx='20' cy='30' r='2' opacity='.5'/><circle cx='120' cy='80' r='3' opacity='.35'/><circle cx='70' cy='150' r='2.4' opacity='.45'/><circle cx='170' cy='170' r='1.8' opacity='.5'/></g></svg>") 0 0/200px 200px;animation:tbUp 14s linear infinite;will-change:transform}
@keyframes tbSway{0%{transform:rotate(-1.2deg)}100%{transform:rotate(1.2deg)}}
@keyframes tbGlow{0%{opacity:.55}100%{opacity:1}}
@keyframes tbUp{0%{transform:translateY(0)}100%{transform:translateY(-200px)}}
/* Ink Moon */
.game.tb-inkmoon,.pv-table.tb-inkmoon{background:radial-gradient(circle at 78% 12%,#f3ead6 0 46px,rgba(243,234,214,.28) 48px,transparent 120px),linear-gradient(175deg,#1c1a20,#09080b)}
.pv-table.tb-inkmoon{background:radial-gradient(circle at 78% 18%,#f3ead6 0 18px,rgba(243,234,214,.28) 19px,transparent 50px),linear-gradient(175deg,#1c1a20,#09080b)}
.tb-inkmoon .tbfx > i:nth-child(1),.tb-inkmoon .tbfx > i:nth-child(2){top:0;left:0;width:calc(100% + 420px);height:220px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='220'><g fill='%230b0a0e'><ellipse cx='70' cy='60' rx='90' ry='14' opacity='.85'/><ellipse cx='120' cy='48' rx='50' ry='12' opacity='.8'/><ellipse cx='300' cy='96' rx='110' ry='16' opacity='.75'/><ellipse cx='250' cy='84' rx='46' ry='10' opacity='.8'/></g></svg>") 0 0/420px 220px repeat-x;animation:tbDrift 40s linear infinite;will-change:transform}
.tb-inkmoon .tbfx > i:nth-child(2){top:20px;opacity:.6!important;animation-duration:64s;animation-direction:reverse}
.tb-inkmoon .tbfx > i:nth-child(3){left:auto;right:calc(22% - 110px);top:-40px;width:220px;height:220px;border-radius:50%;background:radial-gradient(circle,rgba(243,234,214,.32),transparent 62%);animation:tbHalo 5s ease-in-out infinite alternate;will-change:transform,opacity}
.pv-table.tb-inkmoon .tbfx > i:nth-child(3){right:calc(22% - 45px);top:-25px;width:90px;height:90px}
@keyframes tbDrift{0%{transform:translateX(-420px)}100%{transform:translateX(0)}}
@keyframes tbHalo{0%{opacity:.5;transform:scale(.92)}100%{opacity:1;transform:scale(1.08)}}
/* War Room: radar sweep over a plotting grid */
.game.tb-radar,.pv-table.tb-radar{background:linear-gradient(rgba(46,240,176,.07) 1px,transparent 1px) 0 0/28px 28px,linear-gradient(90deg,rgba(46,240,176,.07) 1px,transparent 1px) 0 0/28px 28px,radial-gradient(circle at 50% 45%,#0f2a22,#050d0a 75%)}
.tb-radar .tbfx > i:nth-child(1){left:50%;top:45%;width:min(520px,150%);aspect-ratio:1;height:auto;transform-origin:50% 50%;translate:-50% -50%;border-radius:50%;-webkit-mask:radial-gradient(circle,#000 58%,transparent 71%);mask:radial-gradient(circle,#000 58%,transparent 71%);background:conic-gradient(from 0deg,rgba(46,240,176,0) 0 300deg,rgba(46,240,176,.05) 320deg,rgba(46,240,176,.32) 359deg,rgba(160,255,220,.6) 360deg);animation:cbSpin 6s linear infinite;will-change:transform}
.tb-radar .tbfx > i:nth-child(2){left:50%;top:45%;width:min(900px,180vw);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;background:radial-gradient(circle,transparent 19.6%,rgba(46,240,176,.18) 20%,transparent 20.6%,transparent 39.6%,rgba(46,240,176,.14) 40%,transparent 40.6%,transparent 59.6%,rgba(46,240,176,.1) 60%,transparent 60.6%)}
.tb-radar .tbfx > i:nth-child(3){inset:0;background:radial-gradient(circle at 30% 30%,#7dffc9 0 3px,rgba(46,240,176,.4) 4px,transparent 9px),radial-gradient(circle at 72% 58%,#ff6b5d 0 3px,rgba(255,93,115,.4) 4px,transparent 9px),radial-gradient(circle at 58% 22%,#7dffc9 0 2px,transparent 7px),radial-gradient(circle at 22% 72%,#ffd166 0 2.5px,transparent 8px);animation:tbBlip 3s ease-in-out infinite;will-change:opacity}
@keyframes tbBlip{0%,100%{opacity:.25}20%{opacity:1}60%{opacity:.4}}
/* Ember Night */
.game.tb-ember,.pv-table.tb-ember{background:radial-gradient(ellipse 120% 50% at 50% 115%,rgba(200,40,20,.55),transparent 60%),linear-gradient(175deg,#1d0c0a,#070303)}
.tb-ember .tbfx > i:nth-child(1),.tb-ember .tbfx > i:nth-child(2){inset:0 0 -160px 0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><g fill='%23ffb04a'><circle cx='14' cy='20' r='1.8'/><circle cx='70' cy='60' r='1.3' fill='%23ff7a2f'/><circle cx='130' cy='16' r='2.2'/><circle cx='40' cy='110' r='1.5' fill='%23ff5a2a'/><circle cx='110' cy='130' r='1.2'/><circle cx='150' cy='90' r='1.6' fill='%23ff7a2f'/></g></svg>") 0 0/160px 160px;animation:tbUp 7s linear infinite;will-change:transform}
.tb-ember .tbfx > i:nth-child(2){opacity:.55!important;background-size:90px 90px;inset:0 0 -90px 0;animation:tbUp2 4.5s linear infinite}
.tb-ember .tbfx > i:nth-child(3){left:0;right:0;bottom:0;height:45%;background:radial-gradient(ellipse 70% 100% at 50% 100%,rgba(255,110,40,.4),transparent 70%);transform-origin:50% 100%;animation:vfGlow 2.6s ease-in-out infinite alternate;will-change:transform,opacity}
@keyframes tbUp2{0%{transform:translateY(0)}100%{transform:translateY(-90px)}}
/* Raijin Storm */
.game.tb-storm,.pv-table.tb-storm{background:radial-gradient(ellipse 100% 40% at 50% 0,rgba(120,150,220,.3),transparent 70%),linear-gradient(175deg,#1a1f33,#07080f)}
.tb-storm .tbfx > i:nth-child(1){top:-20px;left:0;width:calc(100% + 500px);height:200px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='500' height='200'><g fill='%23050609' opacity='.9'><ellipse cx='80' cy='40' rx='120' ry='40'/><ellipse cx='200' cy='30' rx='90' ry='34'/><ellipse cx='360' cy='50' rx='140' ry='42'/><ellipse cx='470' cy='30' rx='80' ry='30'/></g></svg>") 0 0/500px 200px repeat-x;animation:tbDrift2 30s linear infinite;will-change:transform}
.tb-storm .tbfx > i:nth-child(2){inset:-120px 0 0 -60px;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='120'><g stroke='%23b7c9ff' stroke-linecap='round'><path d='M8 6l-6 22' stroke-width='1.1' opacity='.22'/><path d='M40 40l-6 22' stroke-width='.9' opacity='.18'/><path d='M24 78l-6 22' stroke-width='1.2' opacity='.25'/></g></svg>") 0 0/60px 120px;animation:tbRainS .55s linear infinite;will-change:transform}
.tb-storm .tbfx > i:nth-child(3){inset:0;background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='xMidYMin meet'><path d='M62 0 54 22 64 23 48 48 58 49 42 78' fill='none' stroke='%23e6eeff' stroke-width='1.4' stroke-linejoin='round'/><path d='M62 0 54 22 64 23 48 48 58 49 42 78' fill='none' stroke='%239fb8ff' stroke-width='4' opacity='.35' stroke-linejoin='round'/></svg>") 70% 0/auto 70% no-repeat,radial-gradient(ellipse at 60% 10%,rgba(220,232,255,.55),transparent 60%);opacity:0;animation:tbFlash 6s steps(1,end) infinite;will-change:opacity}
@keyframes tbDrift2{0%{transform:translateX(-500px)}100%{transform:translateX(0)}}
@keyframes tbRainS{0%{transform:translate(0,0)}100%{transform:translate(30px,120px)}}
@keyframes tbFlash{0%{opacity:0}70%{opacity:1}71.5%{opacity:0}73%{opacity:.7}75%,100%{opacity:0}}
/* phones: one moving layer less on the busiest tables, to keep the graphics memory down */
@media (max-width:760px){.tb-rain .tbfx > i:nth-child(2),.tb-ember .tbfx > i:nth-child(2),.tb-inkmoon .tbfx > i:nth-child(2){display:none}}
/* the table effects rest while a menu or the shop covers the table */
.game.g-ov .tbfx > i,html.shop-open .game .tbfx > i{animation-play-state:paused}

/* ===================== turn auras (.tu-fx inside your hand, or a rival's tile) ===================== */
.g-hand-wrap.has-tu,.g-rival.has-tu{position:relative}
.tu-fx{position:absolute;inset:-4px;z-index:0;border-radius:18px;pointer-events:none;overflow:hidden;opacity:0;transition:opacity .35s}
.g-hand-wrap.has-tu > :not(.tu-fx){position:relative;z-index:1}
.game.my-turn .g-hand-wrap > .tu-fx,.g-rival.active > .tu-fx{opacity:1}
.tu-fx::before{content:"";position:absolute;inset:0;border-radius:inherit;border:2px solid var(--tu1,#fff);box-shadow:0 0 14px -2px var(--tu1,#fff),inset 0 0 14px -4px var(--tu1,#fff);animation:tuPulse 2s ease-in-out infinite alternate;will-change:opacity}
.tu-fx b{position:absolute;left:0;top:0;width:40%;height:3px;border-radius:3px;animation:tuRun 2.8s linear infinite;will-change:transform}
.tu-fx b + b{top:auto;bottom:0;animation-delay:-1.4s;animation-direction:reverse}
.tu-fx s{position:absolute;left:0;bottom:-60px;width:12px;height:calc(100% + 60px);opacity:.85;background:var(--tup) 0 0/12px 60px repeat-y;animation:tuUp 4s linear infinite;will-change:transform}
.tu-fx s + s{left:auto;right:0;animation-delay:-2s}
@keyframes tuPulse{0%{opacity:.55}100%{opacity:1}}
@keyframes tuRun{0%{transform:translateX(-100%)}100%{transform:translateX(250%)}}
@keyframes tuUp{0%{transform:translateY(0)}100%{transform:translateY(-60px)}}
.tu-ink{--tu1:#c8102e;--tup:radial-gradient(circle at 6px 50px,rgba(12,8,6,.8) 0 4px,transparent 5px)}
.tu-ink b{background:linear-gradient(90deg,transparent,#1a1210 30%,#c8102e 80%,transparent)}
.tu-sakura{--tu1:#ff8fab;--tup:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='60'><g fill='%23ffb3c6'><path d='M2 12c3-4 8-3 6 1-1 3-5 4-6-1z'/><path d='M3 42c3-4 8-3 6 1-1 3-5 4-6-1z' fill='%23ff8fab'/></g></svg>")}
.tu-sakura b{background:linear-gradient(90deg,transparent,#fff 50%,transparent)}
.tu-gold{--tu1:#f2c35b;--tup:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='60'><g fill='%23ffe29a'><circle cx='6' cy='50' r='1.6'/><circle cx='4' cy='20' r='1.1'/><circle cx='8' cy='34' r='1.3'/></g></svg>")}
.tu-gold b{background:linear-gradient(90deg,transparent,#fffbe8 50%,transparent);box-shadow:0 0 10px #ffd877}
.tu-spirit{--tu1:#3fb8ff;--tup:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='60'><g fill='%237fd8ff'><path d='M5 58c-5-5-2-10 1-13 0 5 5 5 3 10-1 2-3 3-4 3z' opacity='.85'/><path d='M6 26c-5-5-2-10 1-13 0 5 5 5 3 10-1 2-3 3-4 3z' opacity='.6'/></g></svg>")}
.tu-spirit b{height:4px;background:linear-gradient(90deg,transparent,#e6fbff 50%,transparent);box-shadow:0 0 12px #3fb8ff}
.g-rival > .tu-fx{inset:-1px;border-radius:inherit}
.g-rival > .tu-fx s{display:none}

/* ===================== Region claim effects (.capfx) ===================== */
.capfx{position:absolute;left:50%;top:50%;z-index:6;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none}
.capfx > i{position:absolute;inset:0;display:block}
.capfx.go > i{animation-duration:1.7s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
.cap-stamp > i:nth-child(1){background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='2' y='2' width='36' height='36' rx='5' fill='%23c8102e'/><rect x='5' y='5' width='30' height='30' rx='3' fill='none' stroke='%23fff3e0' stroke-width='1.6'/><text x='20' y='28' text-anchor='middle' font-family='serif' font-weight='900' font-size='22' fill='%23fff3e0'>領</text></svg>") center/80% no-repeat;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation-name:capStamp}
.cap-stamp > i:nth-child(2){border-radius:50%;box-shadow:0 0 0 3px rgba(200,16,46,.75);animation-name:capRing}
@keyframes capStamp{0%{transform:scale(2.6) rotate(-16deg);opacity:0}16%{transform:scale(.9) rotate(-6deg);opacity:1}22%{transform:scale(1) rotate(-7deg)}58%{opacity:1;transform:scale(1) rotate(-7deg)}70%,100%{opacity:0;transform:scale(.96) rotate(-7deg)}}
@keyframes capRing{0%,14%{transform:scale(.4);opacity:0}18%{opacity:1}50%,100%{transform:scale(1.9);opacity:0}}
.cap-enso > i:nth-child(1){background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><path d='M50 18C42 6 20 6 12 20 4 34 12 54 32 56 50 58 60 40 54 26' fill='none' stroke='%23110b08' stroke-width='6' stroke-linecap='round'/><path d='M50 18C42 6 20 6 12 20 4 34 12 54 32 56 50 58 60 40 54 26' fill='none' stroke='%23fff3e0' stroke-width='1.2' stroke-linecap='round' opacity='.35'/></svg>") center/100% no-repeat;filter:drop-shadow(0 0 4px rgba(255,243,224,.55));animation-name:capEnso}
.cap-enso > i:nth-child(2){background:radial-gradient(circle,#c8102e 0 5px,transparent 6px) 78% 22%/100% no-repeat;animation-name:capDot}
@keyframes capEnso{0%{transform:rotate(-200deg) scale(.5);opacity:0}30%{transform:rotate(0) scale(1.1);opacity:1}60%{opacity:1;transform:rotate(8deg) scale(1.1)}75%,100%{opacity:0;transform:rotate(12deg) scale(1.2)}}
@keyframes capDot{0%,26%{transform:scale(0)}34%{transform:scale(1.3)}40%,60%{transform:scale(1);opacity:1}75%,100%{opacity:0}}
.cap-petals > i{background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'><path d='M10 2c5 4 5 12 0 16-5-4-5-12 0-16z' fill='%23ff9ab0'/><path d='M10 6v8' stroke='%23e63958' stroke-width='.8'/></svg>") center/14px no-repeat;animation-name:capPetal;--a:0deg}
.cap-petals > i:nth-child(2){--a:45deg}.cap-petals > i:nth-child(3){--a:90deg}.cap-petals > i:nth-child(4){--a:135deg}.cap-petals > i:nth-child(5){--a:180deg}.cap-petals > i:nth-child(6){--a:225deg}.cap-petals > i:nth-child(7){--a:270deg}.cap-petals > i:nth-child(8){--a:315deg}
@keyframes capPetal{0%{transform:rotate(var(--a)) translateY(0) scale(.3);opacity:0}12%{opacity:1}55%{transform:rotate(calc(var(--a) + 40deg)) translateY(-40px) scale(1.15);opacity:1}75%,100%{transform:rotate(calc(var(--a) + 60deg)) translateY(-48px) scale(.9);opacity:0}}
.cap-banner{width:40px;height:88px;margin:-70px 0 0 -20px}
.cap-banner > i:nth-child(1){background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 88'><rect x='3' y='0' width='2.5' height='88' fill='%233a2a1a'/><rect x='5' y='4' width='30' height='4' fill='%233a2a1a'/><path d='M6 8h28v62l-14-6-14 6z' fill='%23c8102e'/><circle cx='20' cy='30' r='9' fill='none' stroke='%23fff3e0' stroke-width='2'/><circle cx='20' cy='30' r='3.5' fill='%23fff3e0'/><path d='M8 46h24M8 52h24' stroke='%23fff3e0' stroke-width='1.2' opacity='.6'/></svg>") center/100% 100% no-repeat;transform-origin:10% 100%;filter:drop-shadow(0 3px 6px rgba(0,0,0,.5));animation-name:capBanner}
@keyframes capBanner{0%{transform:translateY(40px) scaleY(.2);opacity:0}20%{transform:translateY(0) scaleY(1.05);opacity:1}30%{transform:skewY(-4deg)}40%{transform:skewY(3deg)}50%{transform:skewY(-2deg)}62%{transform:none;opacity:1}78%,100%{transform:translateY(10px);opacity:0}}
.cap-thunder{width:80px;height:110px;margin:-96px 0 0 -40px}
.cap-thunder > i:nth-child(1){background:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 110'><path d='M48 0 36 38 50 40 30 76 44 78 34 110' fill='none' stroke='%239fd0ff' stroke-width='7' stroke-linejoin='round' opacity='.5'/><path d='M48 0 36 38 50 40 30 76 44 78 34 110' fill='none' stroke='%23fff' stroke-width='2.5' stroke-linejoin='round'/></svg>") center/100% 100% no-repeat;filter:drop-shadow(0 0 6px #9fd0ff);animation-name:capBolt;animation-timing-function:steps(1,end)!important}
.cap-thunder > i:nth-child(2){inset:auto -10px -10px;height:60px;border-radius:50%;background:radial-gradient(circle,rgba(220,240,255,.95),rgba(120,180,255,.4) 40%,transparent 70%);animation-name:capFlash}
@keyframes capBolt{0%{opacity:0}6%{opacity:1}12%{opacity:0}16%{opacity:1}36%{opacity:.8}46%,100%{opacity:0}}
@keyframes capFlash{0%,5%{transform:scale(.2);opacity:0}10%{transform:scale(1.1);opacity:1}55%,100%{transform:scale(1.8);opacity:0}}

/* ===================== shop previews ===================== */
.pv-cap,.pv-turn{background:radial-gradient(circle at 50% 50%,rgba(255,255,255,.07),transparent 70%),#140c24}
.pv-cap .pv-n{position:relative;display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:rgba(255,255,255,.06);border:1px solid var(--line);font:800 22px "Bricolage Grotesque",sans-serif;color:var(--mint)}
.pv-cap .pv-n small{display:block;margin-top:-6px;font:700 9px "Inter",sans-serif;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.pv-cap .capfx{transform:scale(1.25)}
.pv-cap .capfx > i{animation-duration:2s;animation-iteration-count:infinite;animation-fill-mode:both;animation-timing-function:cubic-bezier(.2,.8,.3,1)}
.pv-cap .pv-play{z-index:7}
.pv-turn .pv-hand{position:relative;display:flex;gap:5px;padding:9px 10px;border-radius:14px;background:rgba(255,255,255,.04)}
.pv-turn .pv-hand > span{position:relative;z-index:1;width:30px;height:42px;border-radius:5px;background:linear-gradient(170deg,#f3ead6,#d9c9a6);box-shadow:inset 0 0 0 1px rgba(0,0,0,.2)}
.pv-turn .pv-hand > span:nth-child(3){transform:translateY(-4px)}
.pv-turn .tu-fx{opacity:1;inset:-3px;border-radius:16px}
.pv-fx[class*="fx-"]::before{content:"";position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;pointer-events:none;background:center/contain no-repeat}
.pv-fx .pv-play{position:relative;z-index:2}
.pv-fx.fx-seal{background:radial-gradient(circle,rgba(200,16,46,.45),#1e0810 70%)}
.pv-fx.fx-seal::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'><rect x='2' y='2' width='36' height='36' rx='5' fill='%23c8102e'/><rect x='5' y='5' width='30' height='30' rx='3' fill='none' stroke='%23fff3e0' stroke-width='1.6'/><text x='20' y='28' text-anchor='middle' font-family='serif' font-weight='900' font-size='22' fill='%23fff3e0'>勝</text></svg>");animation:capStamp 2.6s cubic-bezier(.2,.8,.3,1) infinite}
.pv-fx.fx-ink{background:radial-gradient(circle,#efe3c8 0 30%,#c9b997 70%)}
.pv-fx.fx-ink::before{width:90px;height:90px;margin:-45px 0 0 -45px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><g fill='%23110b08'><circle cx='50' cy='50' r='22'/><circle cx='26' cy='38' r='8'/><circle cx='74' cy='62' r='10'/><circle cx='70' cy='28' r='5'/><circle cx='30' cy='72' r='6'/><circle cx='86' cy='40' r='3'/><circle cx='14' cy='60' r='3'/></g><circle cx='62' cy='44' r='5' fill='%23c8102e'/></svg>");animation:pvSplat 2.6s ease-out infinite}
.pv-fx.fx-ink .pv-play{color:#fff;background:rgba(17,11,8,.6)}
@keyframes pvSplat{0%{transform:scale(.2);opacity:0}25%{transform:scale(1.05);opacity:1}70%{opacity:1}100%{transform:scale(1.1);opacity:0}}
.pv-fx.fx-crane{background:linear-gradient(180deg,#2a3a6b,#f2a37a 120%)}
.pv-fx.fx-crane::before{width:46px;height:30px;margin:-15px 0 0 -23px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 30'><path d='M2 16 22 14 26 2 30 15 44 12 30 19 24 28 21 18Z' fill='%23fff8ec' stroke='%23c8102e' stroke-width='.8'/><path d='M44 12l-4 1 4 1z' fill='%23c8102e'/></svg>");animation:pvFly 3s ease-in-out infinite}
@keyframes pvFly{0%{transform:translate(-70px,14px) scaleY(1)}25%{transform:translate(-30px,0) scaleY(.6)}50%{transform:translate(0,-6px) scaleY(1)}75%{transform:translate(35px,-2px) scaleY(.6)}100%{transform:translate(80px,-12px) scaleY(1)}}
.pv-fx.fx-katana{background:radial-gradient(circle,rgba(255,255,255,.18),#0b0a12 70%)}
.pv-fx.fx-katana::before{width:120px;height:4px;margin:-2px 0 0 -60px;border-radius:4px;background:linear-gradient(90deg,transparent,#fff 40%,#cfe6ff 60%,transparent);box-shadow:0 0 10px #fff;transform:rotate(-28deg) scaleX(0);animation:pvSlash 2.2s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes pvSlash{0%,10%{transform:rotate(-28deg) scaleX(0);opacity:1}28%{transform:rotate(-28deg) scaleX(1);opacity:1}70%,100%{transform:rotate(-28deg) scaleX(1);opacity:0}}
.pv-fx.fx-kobanburst{background:radial-gradient(circle,rgba(242,195,91,.55),#1e1408 70%)}
.pv-fx.fx-kobanburst::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><g stroke='%23a8741e' stroke-width='1.4'><ellipse cx='32' cy='32' rx='12' ry='17' fill='%23ffd56b'/><ellipse cx='12' cy='14' rx='6' ry='8.5' fill='%23f2c35b'/><ellipse cx='52' cy='16' rx='6' ry='8.5' fill='%23f2c35b'/><ellipse cx='14' cy='50' rx='5' ry='7' fill='%23ffe29a'/><ellipse cx='52' cy='50' rx='5' ry='7' fill='%23ffe29a'/></g><path d='M32 20v24M27 26h10M27 38h10' stroke='%23a8741e' stroke-width='1.2'/></svg>");animation:pvBurst 2s cubic-bezier(.2,.9,.3,1) infinite}
@keyframes pvBurst{0%{transform:scale(.3);opacity:0}30%{transform:scale(1.15);opacity:1}70%{transform:scale(1);opacity:1}100%{transform:scale(1.3);opacity:0}}
.pv-fx.fx-kanji{background:radial-gradient(circle,rgba(255,111,216,.3),#0b0820 70%)}
.pv-fx.fx-kanji::before{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 64'><defs><pattern id='d' width='3' height='3' patternUnits='userSpaceOnUse'><circle cx='1.5' cy='1.5' r='1' fill='%23ffe08a'/></pattern></defs><text x='32' y='48' text-anchor='middle' font-family='serif' font-weight='900' font-size='46' fill='url(%23d)'>天</text></svg>");filter:drop-shadow(0 0 4px #ff6fd8);animation:pvBurst 2.4s ease-out infinite}
.pv-fx.fx-dragon{background:radial-gradient(circle at 50% 80%,rgba(200,16,46,.5),#12060a 70%)}
.pv-fx.fx-dragon::before{width:60px;height:96px;margin:-48px 0 0 -30px;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 100'><path d='M30 98C10 84 50 70 30 56S10 28 30 14' fill='none' stroke='%23c8102e' stroke-width='9' stroke-linecap='round'/><path d='M30 98C10 84 50 70 30 56S10 28 30 14' fill='none' stroke='%23f2c35b' stroke-width='2.5' stroke-dasharray='3 4' stroke-linecap='round'/><path d='M22 16 30 2 38 16 30 12Z' fill='%23f2c35b'/><circle cx='27' cy='12' r='1.6' fill='%23fff'/><path d='M24 10C16 6 12 10 8 6M36 10C44 6 48 10 52 6' stroke='%23ffe29a' stroke-width='1' fill='none'/></svg>");animation:pvAscend 2.8s ease-in-out infinite}
@keyframes pvAscend{0%{transform:translateY(46px);opacity:0}25%{opacity:1}75%{opacity:1}100%{transform:translateY(-46px);opacity:0}}

/* the table shakes when a Seal Slam or a Katana Slash lands */
.fx2-shake{animation:fx2Shake .42s cubic-bezier(.36,.07,.19,.97)}
@keyframes fx2Shake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(4px,-2px)}30%,50%,70%{transform:translate(-6px,2px)}40%,60%{transform:translate(6px,-1px)}}

/*MC 2026-10-10 translations*/
/* the armed "Tap again to buy" label clipped on both ends in de and ru (188px of text in a 110px phone button). The
   labels were shortened in tr48.py; this lets anything still too long wrap inside the button instead of clipping */
.btn.armed{white-space:normal;line-height:1.1;text-align:center}

/*MC 2026-10-10 Rain on Washi read too strong through the see-through panels and buttons on phones; softer streaks keep the cards and buttons clean*/
.game.tb-rain .tbfx > i:nth-child(1){opacity:.45!important}
.game.tb-rain .tbfx > i:nth-child(2){opacity:.22!important}