/* Shop thumbnails share the exact face artwork used by the WebGL dice. */
.dice-skin-preview { width:128px;height:104px;position:relative;display:grid;place-items:center;--skin-accent:#edce80;isolation:isolate; }
.dice-skin-aura { position:absolute;inset:3px 17px 19px;background:radial-gradient(ellipse,color-mix(in srgb,var(--skin-accent) 22%,transparent),transparent 69%);z-index:-1; }
.shop-art .dice-skin-face { width:60px;height:60px;object-fit:contain;image-rendering:pixelated;transform:translateY(-8px) rotate(-8deg);filter:drop-shadow(0 7px 3px #0007); }
.dice-skin-gleam { position:absolute;top:14px;width:60px;height:60px;transform:rotate(-8deg);background:linear-gradient(115deg,transparent 30%,#fff7 48%,transparent 61%);background-size:300% 100%;animation:skinShopShimmer 5s ease-in-out infinite;pointer-events:none;mix-blend-mode:screen; }
.dice-skin-fx { position:absolute;bottom:1px;inset-inline:0;font-size:13px;line-height:1.2;color:var(--skin-accent);text-align:center;white-space:nowrap; }
.dice-skin-preview i { position:absolute;left:20px;top:48px;width:3px;height:3px;background:var(--skin-accent);box-shadow:0 0 5px var(--skin-accent);animation:skinShopMote 3s ease-in-out infinite; }
.dice-skin-preview i:nth-of-type(2) { left:102px;top:31px;animation-delay:-1.1s; }
.dice-skin-preview i:nth-of-type(3) { left:92px;top:75px;animation-delay:-2.1s; }
.dice-skin-preview[data-skin="dice-jade"] i { border-radius:50%;background:#a4ffd0; }
.dice-skin-preview[data-skin="dice-amethyst"] i { width:5px;height:5px;background:none;border:1px solid #d7b2ff;transform:rotate(45deg); }
.dice-skin-preview[data-skin="dice-frost"] i { background:#e0ffff;box-shadow:2px 0 #9be7ff,-2px 0 #9be7ff,0 2px #9be7ff,0 -2px #9be7ff; }
.dice-skin-preview[data-skin="dice-magma"] i { background:#ffae56;box-shadow:0 0 6px #f97316;animation-duration:1.8s; }
.dice-skin-card .shop-art { min-height:104px;overflow:visible; }
.dice-skin-card { padding:16px 14px; }
.dice-skin-card h3 { margin:10px 0 8px;font-size:20px; }
.shop-grid.dice-skin-grid { max-height:none;flex:none;align-items:stretch;grid-template-columns:repeat(3,minmax(0,1fr)); }
.dice-skin-card .shop-item-desc { font-size:13px;line-height:1.4;min-height:3.9em;max-width:240px;margin-inline:auto; }
.gift-code-open { margin-top:8px;font-size:14px;padding:8px 12px;line-height:1.1; }
@keyframes skinShopShimmer { 0%,18%{background-position:130% 0;opacity:0}35%,50%{opacity:.45}70%,100%{background-position:-80% 0;opacity:0} }
@keyframes skinShopMote { 0%,100%{translate:0 3px;opacity:.15}50%{translate:2px -7px;opacity:.8} }
.reduced-motion .dice-skin-preview i,.reduced-motion .dice-skin-gleam { animation:none; }
.reduced-motion .dice-skin-gleam { display:none; }
@media(prefers-reduced-motion:reduce) { .dice-skin-preview i,.dice-skin-gleam{animation:none}.dice-skin-gleam{display:none} }
@media(max-width:700px) { .shop-grid.dice-skin-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.dice-skin-card{padding:12px 7px}.dice-skin-card h3{font-size:16px} }

/* ===== Upgraded shop previews: Ngà cổ điển, Ngọc lục bảo, Pha lê tím ===== */
@keyframes skinAuraBreath { 0%,100%{transform:scale(.9);opacity:.65}50%{transform:scale(1.14);opacity:1} }
@keyframes skinAuraHue { from{filter:hue-rotate(0deg)}to{filter:hue-rotate(360deg)} }
@keyframes skinStarTwinkle { 0%,100%{transform:scale(0) rotate(0deg);opacity:0}45%,55%{transform:scale(1.35) rotate(45deg);opacity:1} }
@keyframes skinFirefly { 0%{translate:0 0;opacity:0}18%{opacity:1}45%{translate:9px -11px;opacity:.3}72%{translate:-7px -21px;opacity:1}100%{translate:3px -32px;opacity:0} }
@keyframes skinRuneOrbit { from{transform:rotate(0deg) translateX(var(--r,38px)) rotate(0deg) scale(1)}50%{transform:rotate(180deg) translateX(var(--r,38px)) rotate(-180deg) scale(.65)}to{transform:rotate(360deg) translateX(var(--r,38px)) rotate(-360deg) scale(1)} }
@keyframes skinGlintSweep { 0%,25%{background-position:140% 0;opacity:0}40%{opacity:.85}60%,100%{background-position:-90% 0;opacity:0} }
.dice-skin-preview[data-skin] .dice-skin-aura { animation:skinAuraBreath 3.6s ease-in-out infinite; }
/* Ngà: vệt vàng quét ngang + sao 4 cánh lấp lánh */
.dice-skin-preview[data-skin="dice-ivory"] .dice-skin-gleam { background:linear-gradient(115deg,transparent 38%,#fff6c8e6 50%,transparent 62%);background-size:300% 100%;animation:skinGlintSweep 2.8s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-ivory"] i { width:3px;height:3px;background:#fff0c4;box-shadow:0 0 6px #f2be62,3px 0 #f2be62,-3px 0 #f2be62,0 3px #f2be62,0 -3px #f2be62;animation:skinStarTwinkle 2.4s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-ivory"] i:nth-of-type(2) { animation-delay:-.8s; }
.dice-skin-preview[data-skin="dice-ivory"] i:nth-of-type(3) { animation-delay:-1.6s; }
/* Ngọc: thở nhẹ + đom đóm lượn lên */
.dice-skin-preview[data-skin="dice-jade"] .dice-skin-aura { animation-duration:4.2s; }
.dice-skin-preview[data-skin="dice-jade"] i { width:4px;height:4px;box-shadow:0 0 8px 2px #82dfaa;background:#e6ffd0;animation:skinFirefly 3.6s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-jade"] i:nth-of-type(2) { animation-delay:-1.2s;animation-duration:4.2s; }
.dice-skin-preview[data-skin="dice-jade"] i:nth-of-type(3) { animation-delay:-2.4s;animation-duration:3.1s; }
/* Pha lê tím: hào quang đổi sắc + cổ tự xoay quanh viên */
.dice-skin-preview[data-skin="dice-amethyst"] .dice-skin-aura { animation:skinAuraBreath 3.6s ease-in-out infinite,skinAuraHue 7s linear infinite; }
.dice-skin-preview[data-skin="dice-amethyst"] i { left:60px;top:42px;width:5px;height:5px;border:1px solid #d7b2ff;background:none;box-shadow:0 0 6px #b57bff,inset 0 0 3px #f58fe0;transform:rotate(45deg);animation:skinRuneOrbit 5.2s linear infinite; }
.dice-skin-preview[data-skin="dice-amethyst"] i:nth-of-type(2) { --r:44px;animation-duration:6.4s;animation-delay:-2s;border-color:#f58fe0; }
.dice-skin-preview[data-skin="dice-amethyst"] i:nth-of-type(3) { --r:32px;animation-duration:4.4s;animation-delay:-3.2s;border-color:#9be7ff; }
.reduced-motion .dice-skin-preview[data-skin] i,.reduced-motion .dice-skin-preview[data-skin] .dice-skin-aura,.reduced-motion .dice-skin-preview[data-skin] .dice-skin-gleam { animation:none; }
@media(prefers-reduced-motion:reduce) { .dice-skin-preview[data-skin] i,.dice-skin-preview[data-skin] .dice-skin-aura,.dice-skin-preview[data-skin] .dice-skin-gleam{animation:none} }

/* ===== Upgraded shop previews: Ánh hoàng kim, Băng lam vĩnh cửu, Hỏa long dung nham ===== */
@keyframes skinRays { from{transform:rotate(0deg) scale(1)}50%{transform:rotate(180deg) scale(1.12)}to{transform:rotate(360deg) scale(1)} }
@keyframes skinGoldRise { 0%{translate:0 10px;opacity:0;transform:scale(.4)}25%{opacity:1;transform:scale(1.2)}60%{translate:6px -14px;opacity:.9;transform:scale(.8)}100%{translate:-4px -34px;opacity:0;transform:scale(.3)} }
@keyframes skinSnowFall { 0%{translate:0 -26px;opacity:0}20%{opacity:1}55%{translate:8px 0}100%{translate:-5px 26px;opacity:0} }
@keyframes skinFrostFlash { 0%,70%,100%{opacity:0;background-position:140% 0}78%{opacity:.8}90%{opacity:0;background-position:-60% 0} }
@keyframes skinEmberRise { 0%{translate:0 14px;opacity:0;transform:scale(1)}15%{opacity:1}100%{translate:var(--dx,6px) -42px;opacity:0;transform:scale(.3)} }
@keyframes skinHeartbeat { 0%,40%,100%{transform:scale(.92);opacity:.6}12%{transform:scale(1.2);opacity:1}24%{transform:scale(.98);opacity:.75}30%{transform:scale(1.12);opacity:.95} }
/* Hoàng kim: tia nắng xoay + bụi vàng xoáy lên */
.dice-skin-preview[data-skin="dice-sun"] .dice-skin-aura { background:conic-gradient(from 0deg,color-mix(in srgb,var(--skin-accent) 38%,transparent),transparent 12%,color-mix(in srgb,var(--skin-accent) 38%,transparent) 25%,transparent 37%,color-mix(in srgb,var(--skin-accent) 38%,transparent) 50%,transparent 62%,color-mix(in srgb,var(--skin-accent) 38%,transparent) 75%,transparent 87%,color-mix(in srgb,var(--skin-accent) 38%,transparent));border-radius:50%;inset:-4px 10px 8px;-webkit-mask:radial-gradient(circle,#000 25%,transparent 70%);mask:radial-gradient(circle,#000 25%,transparent 70%);animation:skinRays 9s linear infinite; }
.dice-skin-preview[data-skin="dice-sun"] .dice-skin-gleam { background:linear-gradient(115deg,transparent 38%,#fff2b8f0 50%,transparent 62%);background-size:300% 100%;animation:skinGlintSweep 2.4s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-sun"] i { width:3px;height:3px;background:#ffe182;box-shadow:0 0 6px #f1c66a,2px 0 #fff0bd,-2px 0 #fff0bd,0 2px #fff0bd,0 -2px #fff0bd;animation:skinGoldRise 3s ease-out infinite; }
.dice-skin-preview[data-skin="dice-sun"] i:nth-of-type(1) { left:34px;top:70px; }
.dice-skin-preview[data-skin="dice-sun"] i:nth-of-type(2) { left:92px;top:76px;animation-delay:-1s; }
.dice-skin-preview[data-skin="dice-sun"] i:nth-of-type(3) { left:62px;top:80px;animation-delay:-2s; }
/* Băng lam: tuyết rơi + tia lóe tinh thể */
.dice-skin-preview[data-skin="dice-frost"] .dice-skin-aura { animation-duration:5s; }
.dice-skin-preview[data-skin="dice-frost"] .dice-skin-gleam { background:linear-gradient(120deg,transparent 40%,#e8ffffcc 50%,transparent 60%);background-size:300% 100%;animation:skinFrostFlash 3.6s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-frost"] i { top:20px;width:3px;height:3px;background:#efffff;box-shadow:3px 0 #9be7ff,-3px 0 #9be7ff,0 3px #9be7ff,0 -3px #9be7ff;animation:skinSnowFall 3.8s linear infinite; }
.dice-skin-preview[data-skin="dice-frost"] i:nth-of-type(1) { left:26px; }
.dice-skin-preview[data-skin="dice-frost"] i:nth-of-type(2) { left:98px;animation-delay:-1.3s; }
.dice-skin-preview[data-skin="dice-frost"] i:nth-of-type(3) { left:64px;top:14px;animation-delay:-2.5s;animation-duration:4.6s; }
/* Hỏa long: tim dung nham đập + tàn lửa bay vút */
.dice-skin-preview[data-skin="dice-magma"] .dice-skin-aura { background:radial-gradient(ellipse,color-mix(in srgb,#ff5a2a 45%,transparent),transparent 68%);animation:skinHeartbeat 2s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-magma"] .dice-skin-gleam { background:linear-gradient(115deg,transparent 38%,#ffb35acc 50%,transparent 62%);background-size:300% 100%; }
.dice-skin-preview[data-skin="dice-magma"] i { width:3px;height:3px;border-radius:0;background:#ffbd50;box-shadow:0 0 6px #f97316;animation:skinEmberRise 2.2s ease-out infinite; }
.dice-skin-preview[data-skin="dice-magma"] i:nth-of-type(1) { left:42px;top:72px;--dx:-8px; }
.dice-skin-preview[data-skin="dice-magma"] i:nth-of-type(2) { left:84px;top:68px;animation-delay:-.7s;--dx:9px;background:#ef7c36; }
.dice-skin-preview[data-skin="dice-magma"] i:nth-of-type(3) { left:64px;top:74px;animation-delay:-1.4s;--dx:3px;background:#ffe399; }
.reduced-motion .dice-skin-preview[data-skin] i,.reduced-motion .dice-skin-preview[data-skin] .dice-skin-aura,.reduced-motion .dice-skin-preview[data-skin] .dice-skin-gleam { animation:none; }
@media(prefers-reduced-motion:reduce) { .dice-skin-preview[data-skin] i,.dice-skin-preview[data-skin] .dice-skin-aura,.dice-skin-preview[data-skin] .dice-skin-gleam{animation:none} }

/* ===== Themed dice result banner ("3 + 5 = 8 bước") per dice skin ===== */
@keyframes bannerPop { 0%{transform:translateY(10px) scale(.55);opacity:0}60%{transform:translateY(-1px) scale(1.08);opacity:1}100%{transform:none;opacity:1} }
@keyframes bannerTotal { 0%{transform:scale(2.4);opacity:0}55%{transform:scale(.88);opacity:1}100%{transform:scale(1)} }
@keyframes bannerGlint { 0%,25%{background-position:130% 0}60%,100%{background-position:-40% 0} }
@keyframes bannerTwinkle { 0%,100%{opacity:.15}50%{opacity:1} }
@keyframes bannerBreathJade { 0%,100%{box-shadow:0 4px 16px #000a,0 0 8px #39a97a55,inset 0 0 8px #39a97a22}50%{box-shadow:0 4px 16px #000a,0 0 22px #82dfaa99,inset 0 0 14px #82dfaa44} }
@keyframes bannerFireflies { to{background-position:14px -9px,-11px 12px,8px 15px} }
@keyframes bannerVein { from{background-position:0 0}to{background-position:-200% 0} }
@keyframes bannerHue { from{filter:hue-rotate(-25deg)}to{filter:hue-rotate(45deg)} }
@keyframes bannerRune { 0%,100%{transform:translateY(-3px) rotate(45deg) scale(.8);opacity:.5}50%{transform:translateY(3px) rotate(225deg) scale(1.2);opacity:1} }
@keyframes bannerSpin { to{transform:rotate(360deg)} }
@keyframes bannerSun { 0%,100%{text-shadow:0 0 6px #ffe182,0 1px 3px #000}50%{text-shadow:0 0 14px #fff0bd,0 0 4px #ffe182,0 1px 3px #000} }
@keyframes bannerSnow { to{background-position:0 22px,9px 36px} }
@keyframes bannerBeat { 0%,40%,100%{box-shadow:0 4px 16px #000a,0 0 8px #ef7c3655}12%{box-shadow:0 4px 16px #000a,0 0 26px #ff5a2acc}26%{box-shadow:0 4px 16px #000a,0 0 14px #ef7c3699} }
@keyframes bannerEmbers { to{background-position:0 -22px,11px -22px} }
@keyframes bannerFlicker { 0%,100%{opacity:1}30%{opacity:.78}55%{opacity:1}75%{opacity:.88} }
@keyframes bannerBadge { 0%,100%{transform:scale(1)}50%{transform:scale(1.12)} }

#dice-banner[data-skin] { position:relative;overflow:hidden;isolation:isolate;animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1) both;--bn:#f7d286;--bn2:#fff0c4; }
#dice-banner[data-skin]>* { position:relative;z-index:2; }
#dice-banner[data-skin]::before,#dice-banner[data-skin]::after { content:'';position:absolute;pointer-events:none;z-index:1; }
#dice-banner[data-skin] .dice-total { display:inline-block;font-size:1.3em;line-height:1;margin:0 .08em;color:var(--bn2);text-shadow:0 0 8px var(--bn),0 1px 2px #000;animation:bannerTotal .7s cubic-bezier(.2,1.2,.4,1) .12s both; }
#dice-banner[data-skin] #dice-banner-double { animation:bannerBadge 1.1s ease-in-out infinite; }

/* Ngà cổ điển: viền kép vàng, vệt lóe quét ngang, sao nhỏ nhấp nháy */
#dice-banner[data-skin="dice-ivory"] { --bn:#f2be62;--bn2:#fff0c4;border-color:#e8c36a;background:linear-gradient(180deg,#223350,#101c2e);box-shadow:0 4px 16px #000a,0 0 14px #f2be6238,inset 0 0 0 2px #0c1624,inset 0 0 0 3px #f2be6270; }
#dice-banner[data-skin="dice-ivory"]::after { inset:0;background:linear-gradient(110deg,transparent 40%,#fff3c0b0 50%,transparent 60%);background-size:250% 100%;animation:bannerGlint 2.6s ease-in-out .4s infinite; }
#dice-banner[data-skin="dice-ivory"]::before { inset:0;background:radial-gradient(circle at 8% 28%,#fff 0 1.4px,transparent 2.2px),radial-gradient(circle at 93% 72%,#ffe9a8 0 1.4px,transparent 2.2px),radial-gradient(circle at 70% 18%,#fff 0 1px,transparent 2px);animation:bannerTwinkle 1.9s ease-in-out infinite; }
#dice-banner[data-skin="dice-ivory"] #dice-banner-double { background:#c8892f; }

/* Ngọc lục bảo: thở nhịp, đom đóm trôi, mạch lá chạy dưới đáy */
#dice-banner[data-skin="dice-jade"] { --bn:#82dfaa;--bn2:#e4ffe3;border-color:#5ec79a;color:#d8ffe8;background:linear-gradient(180deg,#123f3b,#071f22);animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1) both,bannerBreathJade 3.2s ease-in-out .55s infinite; }
#dice-banner[data-skin="dice-jade"]::before { inset:0;background:radial-gradient(circle,#c8ffd8 0 1.3px,transparent 2.4px) 0 0/34px 22px,radial-gradient(circle,#e6e57a 0 1.2px,transparent 2.2px) 12px 8px/47px 26px,radial-gradient(circle,#82dfaa 0 1px,transparent 2px) 5px 14px/29px 31px;animation:bannerFireflies 4s ease-in-out infinite alternate; }
#dice-banner[data-skin="dice-jade"]::after { left:0;right:0;bottom:0;height:2px;background:linear-gradient(90deg,transparent,#82dfaa,#e6e57a,#82dfaa,transparent) 0 0/200% 100%;animation:bannerVein 3s linear infinite; }
#dice-banner[data-skin="dice-jade"] #dice-banner-double { background:#1d6b55; }

/* Pha lê tím: sắc lăng kính trôi, hai cổ tự xoay hai bên */
#dice-banner[data-skin="dice-amethyst"] { --bn:#cba3e8;--bn2:#f5e2ff;border-color:#cba3e8;background:linear-gradient(180deg,#3a2757,#1c1230);box-shadow:0 4px 16px #000a,0 0 16px #9a6ec188,inset 0 0 10px #cba3e833;animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1) both,bannerHue 5s ease-in-out .55s infinite alternate; }
#dice-banner[data-skin="dice-amethyst"]::before { left:9px;top:calc(50% - 4px);width:7px;height:7px;border:1px solid #f58fe0;box-shadow:0 0 6px #cba3e8,inset 0 0 3px #f58fe0;animation:bannerRune 2.4s ease-in-out infinite; }
#dice-banner[data-skin="dice-amethyst"]::after { right:9px;top:calc(50% - 4px);width:7px;height:7px;border:1px solid #9be7ff;box-shadow:0 0 6px #9be7ff,inset 0 0 3px #9be7ff;animation:bannerRune 2.4s ease-in-out -1.2s infinite; }
#dice-banner[data-skin="dice-amethyst"] { padding-inline:28px; }
#dice-banner[data-skin="dice-amethyst"] #dice-banner-double { background:#694a91; }

/* Ánh hoàng kim: tia nắng xoay phía sau, vệt kim loại, chữ tỏa sáng */
#dice-banner[data-skin="dice-sun"] { --bn:#ffe182;--bn2:#fff7cf;border-color:#f1c66a;color:#fff0bd;background:linear-gradient(180deg,#6a4220,#3b2430);box-shadow:0 4px 16px #000a,0 0 18px #f1c66a66,inset 0 0 0 2px #3b243099; }
#dice-banner[data-skin="dice-sun"]::before { left:50%;top:50%;width:300px;height:300px;margin:-150px 0 0 -150px;background:repeating-conic-gradient(#ffe18244 0 9deg,transparent 9deg 30deg);-webkit-mask:radial-gradient(circle,#000 8%,transparent 62%);mask:radial-gradient(circle,#000 8%,transparent 62%);animation:bannerSpin 14s linear infinite; }
#dice-banner[data-skin="dice-sun"]::after { inset:0;background:linear-gradient(110deg,transparent 40%,#fff6c8cc 50%,transparent 60%);background-size:250% 100%;animation:bannerGlint 2.2s ease-in-out .3s infinite; }
#dice-banner[data-skin="dice-sun"] #dice-banner-text { animation:bannerSun 2s ease-in-out infinite; }
#dice-banner[data-skin="dice-sun"] #dice-banner-double { background:#aa642b; }

/* Băng lam: tuyết rơi trong khung, viền băng sáng, vệt lạnh quét ngang */
#dice-banner[data-skin="dice-frost"] { --bn:#9be7ff;--bn2:#efffff;border-color:#a4e9ef;color:#e6fbff;background:linear-gradient(180deg,#245a7a,#10253b);box-shadow:0 4px 16px #000a,0 0 16px #66bed188,inset 0 1px 0 #efffffcc,inset 0 0 12px #a4e9ef33; }
#dice-banner[data-skin="dice-frost"]::before { inset:0;background:radial-gradient(circle,#fff 0 1px,transparent 1.7px) 0 0/30px 22px,radial-gradient(circle,#c9f6ff 0 1.3px,transparent 2.1px) 9px 6px/47px 30px;opacity:.6;animation:bannerSnow 3.2s linear infinite; }
#dice-banner[data-skin="dice-frost"]::after { inset:0;background:linear-gradient(115deg,transparent 42%,#e8ffffaa 50%,transparent 58%);background-size:260% 100%;animation:bannerGlint 3.4s ease-in-out 1s infinite; }
#dice-banner[data-skin="dice-frost"] #dice-banner-double { background:#3885a4; }

/* Hỏa long: tim dung nham đập, tàn lửa bay lên, chữ chập chờn */
#dice-banner[data-skin="dice-magma"] { --bn:#ff8a3a;--bn2:#ffe399;border-color:#ef7c36;color:#ffe3b8;background:linear-gradient(180deg,#3a2230,#191a28);animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1) both,bannerBeat 2s ease-in-out .55s infinite; }
#dice-banner[data-skin="dice-magma"]::before { inset:0;background:radial-gradient(circle,#ffbd50 0 1.3px,transparent 2.2px) 0 0/34px 22px,radial-gradient(circle,#ef7c36 0 1.2px,transparent 2.1px) 11px 9px/47px 29px;opacity:.65;animation:bannerEmbers 2.2s linear infinite; }
#dice-banner[data-skin="dice-magma"]::after { inset:auto 0 0 0;height:60%;background:linear-gradient(0deg,#ef7c3666,transparent);animation:bannerFlicker 1.3s ease-in-out infinite; }
#dice-banner[data-skin="dice-magma"] .dice-total { text-shadow:0 0 10px #ff5a2a,0 0 3px #ffbd50,0 1px 2px #000; }
#dice-banner[data-skin="dice-magma"] #dice-banner-double { background:#ab4235; }

.reduced-motion #dice-banner[data-skin],.reduced-motion #dice-banner[data-skin]::before,.reduced-motion #dice-banner[data-skin]::after,.reduced-motion #dice-banner[data-skin] .dice-total,.reduced-motion #dice-banner[data-skin] #dice-banner-text,.reduced-motion #dice-banner[data-skin] #dice-banner-double { animation:none; }
@media(prefers-reduced-motion:reduce) { #dice-banner[data-skin],#dice-banner[data-skin]::before,#dice-banner[data-skin]::after,#dice-banner[data-skin] .dice-total,#dice-banner[data-skin] #dice-banner-text,#dice-banner[data-skin] #dice-banner-double{animation:none} }

/* =====================================================================
   Skin cao cấp: Thiên hà tinh vân (dice-galaxy) · Anh đào vạn cánh (dice-sakura)
   Hiệu ứng lớn nằm SAU canvas (z-index:-1) nên không bao giờ che chấm xúc xắc.
   ===================================================================== */
@keyframes skinNebulaDrift { 0%{transform:scale(.92) rotate(0deg);filter:hue-rotate(0deg)}50%{transform:scale(1.18) rotate(8deg)}100%{transform:scale(.92) rotate(0deg);filter:hue-rotate(40deg)} }
@keyframes skinPetalFall { 0%{translate:0 -30px;rotate:0deg;opacity:0}15%{opacity:1}60%{translate:12px 6px;rotate:200deg;opacity:1}100%{translate:-8px 32px;rotate:380deg;opacity:0} }
@keyframes skinSakuraBreath { 0%,100%{transform:scale(.92);opacity:.7}50%{transform:scale(1.16);opacity:1} }

/* --- Xem trước trong cửa hàng --- */
.dice-skin-preview[data-skin="dice-galaxy"] .dice-skin-aura { inset:-8px -2px 4px;background:radial-gradient(ellipse at 28% 55%,#5b3fb0cc,transparent 55%),radial-gradient(ellipse at 72% 45%,#3fd0ff88,transparent 55%),radial-gradient(ellipse at 50% 15%,#ff7fe366,transparent 50%);animation:skinNebulaDrift 6s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-galaxy"] .dice-skin-gleam { background:linear-gradient(115deg,transparent 36%,#9be7ffcc 47%,#ff7fe3cc 53%,transparent 64%);background-size:300% 100%;animation:skinGlintSweep 2.6s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-galaxy"] i { left:60px;top:44px;width:4px;height:4px;background:#fff;box-shadow:0 0 8px 2px #3fd0ff,2px 0 #fff,-2px 0 #fff,0 2px #fff,0 -2px #fff;transform:none;border:0;animation:skinRuneOrbit 4.8s linear infinite; }
.dice-skin-preview[data-skin="dice-galaxy"] i:nth-of-type(2) { --r:50px;animation-duration:6.2s;animation-delay:-2s;background:#ff7fe3;box-shadow:0 0 8px 2px #ff7fe3,2px 0 #ffd0f5,-2px 0 #ffd0f5,0 2px #ffd0f5,0 -2px #ffd0f5; }
.dice-skin-preview[data-skin="dice-galaxy"] i:nth-of-type(3) { --r:36px;animation-duration:3.9s;animation-delay:-1.2s;background:#3fd0ff; }

.dice-skin-preview[data-skin="dice-sakura"] .dice-skin-aura { inset:-8px -2px 4px;background:radial-gradient(ellipse,#f598b8aa,transparent 62%),radial-gradient(ellipse at 20% 30%,#ffd0e077,transparent 50%);animation:skinSakuraBreath 3.4s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-sakura"] .dice-skin-gleam { background:linear-gradient(115deg,transparent 38%,#fff6f8e6 50%,transparent 62%);background-size:300% 100%;animation:skinGlintSweep 2.8s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-sakura"] i { top:14px;width:7px;height:5px;border-radius:90% 0 90% 0;background:#ffb3cf;box-shadow:inset -1px -1px 0 #ff8fb5;animation:skinPetalFall 4s linear infinite; }
.dice-skin-preview[data-skin="dice-sakura"] i:nth-of-type(1) { left:22px; }
.dice-skin-preview[data-skin="dice-sakura"] i:nth-of-type(2) { left:96px;animation-delay:-1.4s;animation-duration:4.6s;background:#ffd0e0; }
.dice-skin-preview[data-skin="dice-sakura"] i:nth-of-type(3) { left:62px;top:8px;animation-delay:-2.8s;animation-duration:3.6s; }

/* --- Hào quang lớn quanh xúc xắc khi gieo (đằng sau canvas) --- */
#dice-box-3d-wrap[data-skin="dice-galaxy"],#dice-box-3d-wrap[data-skin="dice-sakura"] { overflow:visible; }
#dice-box-3d-wrap[data-skin="dice-galaxy"]::before,#dice-box-3d-wrap[data-skin="dice-sakura"]::before,
#dice-box-3d-wrap[data-skin="dice-galaxy"]::after,#dice-box-3d-wrap[data-skin="dice-sakura"]::after { content:'';position:absolute;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s; }
#dice-box-3d-wrap[data-skin="dice-galaxy"]::before,#dice-box-3d-wrap[data-skin="dice-sakura"]::before { inset:-46% -34%;border-radius:50%; }
#dice-box-3d-wrap[data-skin="dice-galaxy"].dice-rolling::before,#dice-box-3d-wrap[data-skin="dice-galaxy"].dice-settled::before,
#dice-box-3d-wrap[data-skin="dice-sakura"].dice-rolling::before,#dice-box-3d-wrap[data-skin="dice-sakura"].dice-settled::before { opacity:1; }
#dice-box-3d-wrap[data-skin="dice-galaxy"]::before { background:radial-gradient(ellipse at 28% 50%,#5b3fb0cc,transparent 52%),radial-gradient(ellipse at 72% 50%,#3fd0ff77,transparent 52%),radial-gradient(ellipse at 50% 12%,#ff7fe366,transparent 46%),radial-gradient(circle,#fff 0 1.2px,transparent 2px) 0 0/46px 34px,radial-gradient(circle,#9be7ff 0 1.2px,transparent 2px) 17px 13px/61px 43px;-webkit-mask:radial-gradient(ellipse,#000 30%,transparent 72%);mask:radial-gradient(ellipse,#000 30%,transparent 72%);animation:skinNebulaDrift 7s ease-in-out infinite; }
#dice-box-3d-wrap[data-skin="dice-sakura"]::before { background:radial-gradient(ellipse,#f598b8aa,transparent 58%),radial-gradient(ellipse at 22% 30%,#ffd0e077,transparent 46%),radial-gradient(ellipse at 80% 70%,#ff8fb577,transparent 46%);-webkit-mask:radial-gradient(ellipse,#000 30%,transparent 72%);mask:radial-gradient(ellipse,#000 30%,transparent 72%);animation:skinSakuraBreath 4s ease-in-out infinite; }
/* Sóng xung kích khi xúc xắc dừng: supernova / gió cuốn cánh hoa */
#dice-box-3d-wrap[data-skin="dice-galaxy"]::after,#dice-box-3d-wrap[data-skin="dice-sakura"]::after { left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%; }
#dice-box-3d-wrap[data-skin="dice-galaxy"]::after { border:4px solid #fff;box-shadow:0 0 26px 6px #3fd0ff,0 0 60px 14px #8f6cf0aa,inset 0 0 22px #ff7fe3; }
#dice-box-3d-wrap[data-skin="dice-sakura"]::after { border:4px solid #ffd0e0;box-shadow:0 0 26px 6px #ff8fb5,0 0 60px 14px #f598b8aa,inset 0 0 22px #fff6f8; }
#dice-box-3d-wrap[data-skin="dice-galaxy"].dice-settled::after { animation:diceNova 1.7s cubic-bezier(.15,.7,.3,1) both; }
#dice-box-3d-wrap[data-skin="dice-sakura"].dice-settled::after { animation:diceNova 1.9s cubic-bezier(.15,.7,.3,1) both; }
@keyframes diceNova { 0%{transform:scale(.6);opacity:1}100%{transform:scale(15);opacity:0} }

/* --- Khung kết quả "3 + 5 = 8 bước" --- */
@keyframes bannerNebula { 0%,100%{background-position:0% 50%}50%{background-position:100% 50%} }
@keyframes bannerOrbit { 0%{transform:translateX(0)}50%{transform:translateX(10px)}100%{transform:translateX(0)} }
@keyframes bannerStarBlink { 0%,100%{opacity:.25}50%{opacity:1} }
@keyframes bannerGalaxyGlow { 0%,100%{box-shadow:0 4px 18px #000a,0 0 16px #5b3fb0aa,0 0 30px #3fd0ff44,inset 0 0 12px #8f6cf055}50%{box-shadow:0 4px 18px #000a,0 0 28px #8f6cf0,0 0 56px #3fd0ff88,inset 0 0 18px #ff7fe366} }
@keyframes bannerSakuraGlow { 0%,100%{box-shadow:0 4px 18px #000a,0 0 14px #f598b888,inset 0 0 10px #fff6f877}50%{box-shadow:0 4px 18px #000a,0 0 30px #ff8fb5cc,0 0 54px #f598b866,inset 0 0 16px #fff6f8cc} }
@keyframes bannerPetals { to{background-position:0 28px,13px 44px} }

#dice-banner[data-skin="dice-galaxy"] { --bn:#3fd0ff;--bn2:#fff;border-color:#8f6cf0;border-width:2px;color:#e6defc;font-size:1.12em;padding-inline:22px;background:linear-gradient(120deg,#0b0722,#2f2a85 40%,#5b3fb0 55%,#191548 80%,#0b0722) 0 50%/260% 100%;animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1) both,bannerNebula 8s ease-in-out .55s infinite,bannerGalaxyGlow 3s ease-in-out .55s infinite; }
#dice-banner[data-skin="dice-galaxy"]::before { inset:0;background:radial-gradient(circle,#fff 0 1.3px,transparent 2.2px) 0 0/31px 21px,radial-gradient(circle,#9be7ff 0 1.2px,transparent 2.1px) 11px 8px/43px 27px,radial-gradient(circle,#ff7fe3 0 1.1px,transparent 2px) 5px 14px/37px 33px;animation:bannerStarBlink 2.1s ease-in-out infinite; }
#dice-banner[data-skin="dice-galaxy"]::after { inset:0;background:linear-gradient(110deg,transparent 38%,#9be7ffaa 47%,#ff7fe3aa 53%,transparent 62%);background-size:250% 100%;animation:bannerGlint 2.4s ease-in-out .3s infinite; }
#dice-banner[data-skin="dice-galaxy"] .dice-total { font-size:1.7em;text-shadow:0 0 8px #3fd0ff,0 0 20px #ff7fe3,0 1px 2px #000; }
#dice-banner[data-skin="dice-galaxy"] #dice-banner-double { background:#5b3fb0; }

#dice-banner[data-skin="dice-sakura"] { --bn:#fff;--bn2:#7c2c4c;border-color:#d45f86;border-width:2px;color:#4a1633;font-size:1.12em;padding-inline:22px;text-shadow:0 1px 0 #fff8;background:linear-gradient(180deg,#fff6f8,#ffd0e0 55%,#f598b8);animation:bannerPop .55s cubic-bezier(.2,1.4,.4,1) both,bannerSakuraGlow 3.2s ease-in-out .55s infinite; }
#dice-banner[data-skin="dice-sakura"]::before { inset:0;background:radial-gradient(ellipse 5px 3px at 50% 50%,#ff8fb5 0 60%,transparent 70%) 0 0/38px 24px,radial-gradient(ellipse 4px 2.5px at 50% 50%,#d45f86 0 60%,transparent 70%) 13px 9px/53px 31px;opacity:.75;animation:bannerPetals 4.5s linear infinite; }
#dice-banner[data-skin="dice-sakura"]::after { inset:0;background:linear-gradient(110deg,transparent 40%,#fffc 50%,transparent 60%);background-size:250% 100%;animation:bannerGlint 2.6s ease-in-out .4s infinite; }
#dice-banner[data-skin="dice-sakura"] .dice-total { font-size:1.7em;color:#7c2c4c;text-shadow:0 0 10px #fff,0 0 4px #ffd0e0,0 1px 0 #fff; }
#dice-banner[data-skin="dice-sakura"] #dice-banner-double { background:#d45f86; }

/* Giảm chuyển động: tắt toàn bộ hào quang/sóng xung kích của hai skin mới */
.reduced-motion #dice-box-3d-wrap[data-skin]::before,.reduced-motion #dice-box-3d-wrap[data-skin]::after { animation:none !important; }
.reduced-motion #dice-box-3d-wrap[data-skin]::after { display:none; }
@media(prefers-reduced-motion:reduce) { #dice-box-3d-wrap[data-skin]::before,#dice-box-3d-wrap[data-skin]::after{animation:none !important}#dice-box-3d-wrap[data-skin]::after{display:none} }
/* Xem trước cửa hàng: làm mờ rìa hào quang để không lộ khung chữ nhật */
.dice-skin-preview[data-skin="dice-galaxy"] .dice-skin-aura,.dice-skin-preview[data-skin="dice-sakura"] .dice-skin-aura { -webkit-mask:radial-gradient(ellipse,#000 38%,transparent 72%);mask:radial-gradient(ellipse,#000 38%,transparent 72%); }

/* =====================================================================
   SSS · Hỗn mang thần quyển (dice-tempest): lốc xoáy, khung thông báo tràn viền
   ===================================================================== */
@keyframes tempestSpin { to{transform:rotate(360deg)} }
/* Cửa hàng */
.dice-skin-preview[data-skin="dice-tempest"] .dice-skin-aura { inset:-12px -8px 0;border-radius:50%;background:conic-gradient(from 0deg,#e8452c00,#e8452ccc 14%,#ffb21e00 30%,#ffb21eaa 52%,#e8452c00 70%,#ff7a2acc 88%,#e8452c00);-webkit-mask:radial-gradient(circle,transparent 18%,#000 34%,transparent 70%);mask:radial-gradient(circle,transparent 18%,#000 34%,transparent 70%);animation:tempestSpin 2.6s linear infinite; }
.dice-skin-preview[data-skin="dice-tempest"] .dice-skin-gleam { background:linear-gradient(115deg,transparent 40%,#fff1b8e6 50%,transparent 60%);background-size:300% 100%;animation:skinGlintSweep 1.8s ease-in-out infinite; }
.dice-skin-preview[data-skin="dice-tempest"] i { left:60px;top:46px;width:4px;height:4px;background:#ffe66b;box-shadow:0 0 8px 2px #ff7a2a;animation:skinRuneOrbit 2.4s linear infinite; }
.dice-skin-preview[data-skin="dice-tempest"] i:nth-of-type(2) { --r:48px;animation-duration:3.1s;animation-delay:-1s;background:#ff5a2a; }
.dice-skin-preview[data-skin="dice-tempest"] i:nth-of-type(3) { --r:34px;animation-duration:1.9s;animation-delay:-.5s;background:#fff1b8; }
.dice-skin-card:has([data-skin="dice-tempest"]) { border-color:#ffb21e;box-shadow:inset 0 0 22px #e8452c22,0 0 16px #ffb21e33; }
.dice-skin-card:has([data-skin="dice-tempest"]) h3::after { content:'SSS';margin-left:8px;padding:1px 7px;border-radius:4px;font-size:.6em;letter-spacing:.08em;color:#2a0a14;background:linear-gradient(180deg,#ffe66b,#ff9b1e);vertical-align:middle; }

/* Lốc xoáy sau canvas: 2 vòng xoáy ngược chiều + sóng xung kích vàng */
#dice-box-3d-wrap[data-skin="dice-tempest"] { overflow:visible; }
#dice-box-3d-wrap[data-skin="dice-tempest"]::before,#dice-box-3d-wrap[data-skin="dice-tempest"]::after { content:'';position:absolute;pointer-events:none;z-index:-1;opacity:0;transition:opacity .4s; }
#dice-box-3d-wrap[data-skin="dice-tempest"]::before { inset:-62% -40%;border-radius:50%;background:repeating-conic-gradient(from 0deg,#e8452c00 0 12deg,#e8452cbb 24deg,#ffb21e00 40deg),radial-gradient(circle,#ffb21e55,transparent 60%);-webkit-mask:radial-gradient(circle,transparent 14%,#000 36%,transparent 72%);mask:radial-gradient(circle,transparent 14%,#000 36%,transparent 72%);animation:tempestSpin 2.2s linear infinite; }
#dice-box-3d-wrap[data-skin="dice-tempest"]::after { left:50%;top:50%;width:48px;height:48px;margin:-24px 0 0 -24px;border-radius:50%;border:5px solid #ffe66b;box-shadow:0 0 30px 8px #ff7a2a,0 0 70px 18px #e8452caa,inset 0 0 24px #fff1b8; }
#dice-box-3d-wrap[data-skin="dice-tempest"].dice-rolling::before,#dice-box-3d-wrap[data-skin="dice-tempest"].dice-settled::before { opacity:1; }
#dice-box-3d-wrap[data-skin="dice-tempest"].dice-settled::after { animation:diceNova 1.5s cubic-bezier(.1,.8,.3,1) both; }

/* Pixel fire hugs the result banner, outside its text and badge. */
#dice-banner[data-skin="dice-tempest"] {
  --bn: #ffb21e;
  --bn2: #fff1b8;
  overflow: visible;
  border: 2px solid #ffb21e;
  color: #ffe9b0;
  padding-inline: 16px;
  background: linear-gradient(180deg, #3a0f18, #13080b);
  box-shadow: 0 4px 18px #000a, 0 0 12px #e8452c99;
}

#dice-banner[data-skin="dice-tempest"]::before,
#dice-banner[data-skin="dice-tempest"]::after { content: none; }
#dice-banner[data-skin="dice-tempest"] #dice-banner-double { background: #a31d28; }

.bn-fx { display: none; }
#dice-banner[data-skin="dice-tempest"] .bn-fx {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.bn-flame {
  position: absolute;
  bottom: -5px;
  width: 26px;
  height: 40px;
  transform-origin: bottom center;
  background: #c93021;
  clip-path: polygon(
    0 100%, 0 80%, 12% 80%, 12% 65%, 25% 65%, 25% 50%, 12% 50%, 12% 30%,
    25% 30%, 25% 15%, 37% 15%, 37% 0, 50% 0, 50% 25%, 37% 25%, 37% 42%,
    50% 42%, 50% 55%, 62% 55%, 62% 38%, 75% 38%, 75% 63%, 87% 63%,
    87% 78%, 100% 78%, 100% 100%
  );
  animation: bannerFlame .72s steps(4, end) infinite alternate;
}

.bn-flame::before,
.bn-flame::after {
  content: '';
  position: absolute;
  inset: 0;
  clip-path: inherit;
  transform-origin: bottom;
  transform: scale(.78, .72);
  background: #ff711e;
}

.bn-flame::after {
  transform: scale(.46, .49);
  background: #ffda61;
}

.bn-flame-left { left: -16px; }
.bn-flame-right {
  right: -16px;
  scale: -1 1;
  animation-delay: -.38s;
}

.bn-fireline {
  position: absolute;
  bottom: -4px;
  inset-inline: 4px;
  height: 3px;
  background: repeating-linear-gradient(90deg, #ffb21e 0 5px, #e8452c 5px 10px, transparent 10px 16px);
  animation: bannerFireline .65s steps(4, end) infinite;
}

.bn-ember {
  position: absolute;
  bottom: 6px;
  width: 3px;
  height: 3px;
  color: #ff751f;
  background: #ffe68c;
  box-shadow: -7px -8px currentColor, 7px -15px currentColor;
  animation: bannerEmber 1s steps(8, end) infinite;
}

.bn-ember-left { left: -9px; }
.bn-ember-right { right: -9px; animation-delay: -.5s; }

/* The vortex is as tall as the banner and rides above its text. */
.bn-vortex {
  position: absolute;
  bottom: 65%;
  left: 0;
  height: 100%;
  aspect-ratio: 1.6;
  opacity: 0;
  animation: bannerVortexSweep .54s linear .28s both;
}

.bn-vortex i {
  position: absolute;
  left: 50%;
  height: 42%;
  background: linear-gradient(180deg, #ffeb86 0 25%, #ffae2c 25% 50%, #ff651c 50% 75%, #bd2724 75%);
  clip-path: polygon(
    0 24%, 12% 24%, 12% 12%, 33% 12%, 33% 0, 72% 0, 72% 12%, 94% 12%, 94% 26%,
    100% 26%, 100% 62%, 87% 62%, 87% 80%, 67% 80%, 67% 100%, 22% 100%,
    22% 80%, 52% 80%, 52% 61%, 77% 61%, 77% 40%, 65% 40%, 65% 26%, 27% 26%, 27% 39%, 0 39%
  );
  animation: bannerVortexSpin .14s steps(2, end) 4;
}

.bn-vortex i:nth-child(1) { top: 0; width: 100%; }
.bn-vortex i:nth-child(2) { top: 29%; width: 78%; animation-delay: -.045s; }
.bn-vortex i:nth-child(3) { top: 58%; width: 51%; animation-delay: -.09s; }

@keyframes bannerVortexSweep {
  0% { left: 0; transform: translateX(-50%) scale(.65); opacity: 0; }
  12% { opacity: 1; }
  78% { opacity: 1; }
  100% { left: 100%; transform: translateX(-50%) scale(1.1); opacity: 0; }
}

@keyframes bannerVortexSpin {
  0%, 100% { transform: translateX(-50%) scaleX(1); }
  50% { transform: translateX(-50%) scaleX(-1); }
}

@keyframes bannerFlame {
  0% { transform: scaleY(.77); }
  55% { transform: scaleY(1); }
  100% { transform: scaleY(.87); }
}

@keyframes bannerFireline { to { background-position: 16px 0; } }
@keyframes bannerEmber {
  0% { transform: translateY(0); opacity: 0; }
  25% { opacity: 1; }
  100% { transform: translateY(-24px); opacity: 0; }
}

.reduced-motion #dice-banner[data-skin="dice-tempest"] .bn-fx > * { animation: none; }
.reduced-motion #dice-banner[data-skin="dice-tempest"] .bn-ember,
.reduced-motion #dice-banner[data-skin="dice-tempest"] .bn-vortex { display: none; }

@media (prefers-reduced-motion: reduce) {
  #dice-banner[data-skin="dice-tempest"] .bn-fx > * { animation: none; }
  #dice-banner[data-skin="dice-tempest"] .bn-ember,
  #dice-banner[data-skin="dice-tempest"] .bn-vortex { display: none; }
}