body:before{background-image:url('./pattern.svg');background-size:96px 96px;opacity:.035}
.card-art{aspect-ratio:302/346}
.played-slot img,.empty-card{aspect-ratio:302/346}
.arena .rule-reversal{color:var(--gold);font:11px Arial,sans-serif;border:1px solid var(--gold);border-radius:20px;padding:6px 14px;display:inline-block;margin-bottom:12px}
.crystal-flight{position:absolute;width:8px;height:13px;top:80px;left:50%;pointer-events:none;animation:crystal-flight var(--duration) ease-out both;background:linear-gradient(110deg,#f7e9b6,#c29136);clip-path:polygon(50% 0,100% 35%,72% 100%,28% 100%,0 35%)}
.crystal-flight:nth-child(2){animation-delay:.08s;margin-left:-20px}.crystal-flight:nth-child(3){animation-delay:.16s;margin-left:20px}
@keyframes crystal-flight{from{transform:translateY(-70px) scale(1.5);opacity:0}30%{opacity:1}to{transform:translateY(20px) scale(.6);opacity:0}}
@media(max-width:700px){#settings{display:block;font-size:0;padding:8px}#settings:after{content:'⚙';font-size:16px}.topbar nav{gap:0}.brand{letter-spacing:.12em}.topbar nav select{width:77px}.topbar{padding-left:14px;padding-right:14px}.topbar nav button{padding:8px 5px}}
.quick-play-hint{text-align:center;color:var(--muted);font:11px/1.6 Arial,'Microsoft JhengHei','Yu Gothic',sans-serif;margin:0 0 12px}
.hand-card{touch-action:manipulation}
.hand-card.selected:hover{transform:translateY(-9px)}
.winner-celebration{--celebration-duration:4200ms;--celebration-delay:0ms;position:absolute;inset:0;z-index:5;pointer-events:none;display:grid;place-items:center;overflow:hidden;border-radius:inherit;background:radial-gradient(ellipse at center,#071c29ed 0%,#071c29c9 36%,#071c2900 75%);animation:celebration-veil var(--celebration-duration) linear var(--celebration-delay) both}
.element-orbit{position:absolute;left:50%;top:50%;width:0;height:0}
.orbit-element{--orbit-start:0deg;position:absolute;width:80px;height:80px;margin:-40px;animation:elements-unite var(--celebration-duration) cubic-bezier(.35,.05,.25,1) var(--celebration-delay) both}
.orbit-fire{--orbit-start:-90deg;--element-light:#e87d39}
.orbit-water{--orbit-start:30deg;--element-light:#65cced}
.orbit-wood{--orbit-start:150deg;--element-light:#a3d35b}
.element-mascot{width:100%;height:100%;overflow:hidden;border-radius:50%;border:2px solid var(--gold);box-shadow:0 0 26px var(--element-light),0 0 3px #fff8;background:#102b39}
.element-mascot img{width:100%;height:100%;object-fit:cover;transform:scale(1.9);object-position:center 46%}
.orbit-fire .element-mascot img{transform-origin:50% 72%}
.orbit-water .element-mascot img{transform-origin:50% 56%}
.sound-settings{margin-top:25px;padding-top:22px;border-top:1px solid var(--line)}
.sound-settings h3{margin-bottom:14px}.sound-settings output{color:var(--gold);margin-left:10px}
#sound-volume{display:block;width:100%;accent-color:var(--gold);margin:10px 0 18px;padding:0}
#sound-toggle[aria-pressed=true]{color:var(--gold)}
@media(max-width:700px){#sound-toggle{font-size:0;padding:8px 5px}#sound-toggle:after{content:'♪';font-size:19px}#sound-toggle[aria-pressed=false]:after{text-decoration:line-through}}
.merged-star{width:200px;height:200px;overflow:visible;filter:drop-shadow(0 0 18px #e9c675a0);animation:star-emerges var(--celebration-duration) ease-out var(--celebration-delay) both}
.star-halo{fill:none;stroke:var(--gold);stroke-width:1;stroke-dasharray:2 7;opacity:.7}
.star-triangles{fill:#e6bf6940;stroke:#f4d99b;stroke-width:8;stroke-linejoin:round}
.star-heart{fill:#102b39;stroke:var(--gold);stroke-width:2}.star-seeds{fill:#f4d99b}
.merge-flash{position:absolute;left:50%;top:50%;width:90px;height:90px;margin:-45px;border-radius:50%;background:radial-gradient(circle,#fff1c8aa,#e5bc5e33 45%,transparent 70%);animation:merge-glow var(--celebration-duration) ease-out var(--celebration-delay) both}
:root[data-motion=fast] .winner-celebration{--celebration-duration:2600ms}
@keyframes elements-unite{
  0%{opacity:0;transform:rotate(var(--orbit-start)) translateX(120px) rotate(calc(-1 * var(--orbit-start))) scale(.4)}
  12%{opacity:1;transform:rotate(calc(var(--orbit-start) + 50deg)) translateX(118px) rotate(calc(-1 * var(--orbit-start) - 50deg)) scale(1)}
  40%{opacity:1;transform:rotate(calc(var(--orbit-start) + 240deg)) translateX(90px) rotate(calc(-1 * var(--orbit-start) - 240deg)) scale(.9)}
  56%,100%{opacity:0;transform:rotate(calc(var(--orbit-start) + 400deg)) translateX(0) rotate(calc(-1 * var(--orbit-start) - 400deg)) scale(.08)}
}
@keyframes star-emerges{0%,45%{opacity:0;transform:scale(.08) rotate(-40deg)}60%{opacity:1;transform:scale(1.1) rotate(3deg)}70%,85%{opacity:1;transform:scale(1) rotate(0)}100%{opacity:0;transform:scale(1.12) rotate(0)}}
@keyframes celebration-veil{0%{opacity:0}12%,84%{opacity:1}100%{opacity:0}}
@keyframes merge-glow{0%,44%{opacity:0;transform:scale(.1)}55%{opacity:.8;transform:scale(1.8)}72%,100%{opacity:0;transform:scale(2.5)}}
:root[data-motion=off] .winner-celebration{inset:10px 14px auto auto;width:65px;height:65px;background:none;opacity:1}
:root[data-motion=off] .winner-celebration .element-orbit,:root[data-motion=off] .winner-celebration .merge-flash{display:none}
:root[data-motion=off] .merged-star{width:65px;height:65px;opacity:1;filter:none}
@media(prefers-reduced-motion:reduce){.winner-celebration{inset:10px 14px auto auto;width:65px;height:65px;background:none;opacity:1}.winner-celebration .element-orbit,.winner-celebration .merge-flash{display:none}.merged-star{width:65px;height:65px;opacity:1;filter:none}}
@media(max-width:700px){.orbit-element{width:65px;height:65px;margin:-32.5px}.merged-star{width:165px;height:165px}.quick-play-hint{font-size:10px;padding:0 6px}}