.popup{position:fixed;inset:0;margin:auto;width:min(460px,calc(100% - 28px));max-width:none;max-height:none;height:fit-content;padding:0;border:0;background:transparent;color:var(--text);overflow:visible}.popup.wide{width:min(1040px,calc(100% - 28px))}.popup::backdrop{background:radial-gradient(ellipse 60% 55% at 50% 50%,color-mix(in srgb,var(--tone,#e8cf9a) 16%,#05070bcc),#05070be6);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}.popup[open]{animation:popup-in .42s cubic-bezier(.2,.9,.3,1.25) both}.popup-rays{position:absolute;left:50%;top:50%;width:min(900px,170vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;pointer-events:none;background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--tone) 22%,transparent) 0 6deg,transparent 6deg 18deg);-webkit-mask:radial-gradient(circle,#000 12%,transparent 62%);mask:radial-gradient(circle,#000 12%,transparent 62%);animation:popup-settle 14s cubic-bezier(.2,.6,.3,1) both}.popup.wide .popup-rays{display:none}.popup-card{position:relative;margin-top:46px;padding:62px 26px 26px;border-radius:24px;background:radial-gradient(ellipse 80% 45% at 50% 0,color-mix(in srgb,var(--tone) 20%,transparent),transparent 70%),linear-gradient(180deg,#1c2030f7,#11141df7);border:1px solid color-mix(in srgb,var(--tone) 50%,transparent);box-shadow:0 30px 90px #000c,inset 0 0 0 4px #0b0e16,inset 0 0 0 5px color-mix(in srgb,var(--tone) 22%,transparent)}.popup-card:after,.popup-card:before{content:"";position:absolute;top:50%;width:12px;height:12px;rotate:45deg;background:var(--tone);box-shadow:0 0 12px var(--tone)}.popup-card:before{left:-7px}.popup-card:after{right:-7px}.popup.wide .popup-card{margin-top:40px;padding:56px 26px 26px}.popup-emblem{position:absolute;left:50%;top:0;width:92px;height:92px;translate:-50% -50%;display:grid;place-items:center;border-radius:50%;color:#2b2521;background:radial-gradient(circle at 35% 30%,#fff7dd,color-mix(in srgb,var(--tone) 85%,#fff) 45%,color-mix(in srgb,var(--tone) 70%,#3a2a10));border:3px solid #fff3d2;box-shadow:0 0 0 6px #0b0e16,0 0 0 7px color-mix(in srgb,var(--tone) 60%,transparent),0 0 40px color-mix(in srgb,var(--tone) 70%,transparent)}.popup-emblem:after{content:"";position:absolute;inset:-3px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 6px #0b0e16,0 0 0 7px color-mix(in srgb,var(--tone) 80%,transparent),0 0 60px color-mix(in srgb,var(--tone) 90%,transparent);opacity:0;animation:emblem-glow 2.2s ease-in-out 6 alternate}.popup-emblem svg{width:40px;height:40px}.popup-close{position:absolute;top:12px;right:12px;width:34px;height:34px;display:grid;place-items:center;border-radius:50%;color:#bdb7c6;background:#ffffff0a;border:1px solid #ffffff14}.popup-close:hover{color:#fff;border-color:#ffffff33}.popup-ribbon{text-align:center}.popup-ribbon small{display:block;font-size:12px;letter-spacing:1.6px;color:color-mix(in srgb,var(--tone) 80%,#fff);text-transform:uppercase}:lang(th) .popup-ribbon small{letter-spacing:.3px}.popup-ribbon h2{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:6px;font:400 25px/1.25 var(--serif);color:#fff8ee}.popup-ribbon h2 span{text-wrap:balance}.popup-ribbon h2:after,.popup-ribbon h2:before{content:"";flex:0 1 34px;min-width:12px;height:1px;background:linear-gradient(90deg,transparent,var(--tone))}.popup-ribbon h2:after{background:linear-gradient(90deg,var(--tone),transparent)}.popup-body{margin-top:14px}.popup-body>p{text-align:center;font-size:13.5px;line-height:1.7;color:#c9c4cf}.popup-note{margin-top:12px;font-size:11.5px!important;color:#9a96a5!important}.popup-cta{display:flex;width:100%;height:52px;margin-top:20px;border-radius:14px;font-size:15px}.power-check{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:4px 0 14px}.power-check span{display:grid;justify-items:center;gap:4px;padding:12px 8px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff14}.power-check small{font-size:11.5px;color:#a9a5b2}.power-check strong{display:inline-flex;align-items:center;gap:6px;font:400 22px var(--serif);color:#fff8ee}.power-check .power-low{color:#f0a07a}.popup-alt,.power-anyway{display:flex;align-items:center;justify-content:center;gap:6px;width:100%;margin-top:10px;padding:8px 0;font-size:13px;color:#b9b4c2}.reward-tiles{display:flex;justify-content:center;gap:12px;margin-top:18px}.reward-tile{position:relative;overflow:hidden;width:112px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:16px 8px 12px;border-radius:16px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--item) 26%,transparent),#ffffff06 72%);border:1px solid color-mix(in srgb,var(--item) 45%,transparent);animation:tile-pop .5s calc(.25s + var(--i) * .12s) cubic-bezier(.2,.9,.3,1.4) both}.reward-tile:after{content:"";position:absolute;top:0;bottom:0;left:-60%;width:40%;background:linear-gradient(100deg,transparent,#ffffff40,transparent);animation:tile-shine 2.8s calc(.9s + var(--i) * .15s) ease-in-out 3}.reward-icon{color:var(--item);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--item) 70%,transparent))}.reward-icon svg{width:34px;height:34px}.reward-tile strong{font:400 21px var(--serif);color:#fff8ee}.reward-tile small{font-size:11.5px;color:#b9b4c2}.energy-meter{margin-top:18px;padding:16px 18px;border-radius:16px;background:#8fd8f20d;border:1px solid #8fd8f22e}.energy-meter-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}.energy-meter-top strong{font:400 34px var(--serif);color:#e8fbff}.energy-meter-top strong small{font-size:16px;color:#8fb6c4}.energy-meter-top span{font-size:12.5px;color:#9fd7ea}.energy-cells{display:grid;grid-template-columns:repeat(20,1fr);gap:3px;margin-top:10px}.energy-cells i{height:10px;border-radius:3px;background:#ffffff14}.energy-cells i.on{background:linear-gradient(#bff2ff,#5fb6dc);box-shadow:0 0 6px #5fc8f288}.popup.wide .popup-body{margin-top:18px;max-height:calc(94dvh - 170px);overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff1f transparent}@keyframes popup-in{0%{opacity:0;transform:translateY(24px) scale(.9)}}@keyframes popup-settle{0%{rotate:-70deg}}@keyframes emblem-glow{to{opacity:1}}@keyframes tile-pop{0%{opacity:0;transform:translateY(14px) scale(.7)}}@keyframes tile-shine{0%,60%{transform:none}to{transform:translateX(475%)}}@media(max-width:520px){.popup-card{padding:56px 18px 20px}.popup-ribbon h2{font-size:23px}.reward-tiles{gap:8px}.reward-tile{width:auto;flex:1;padding:14px 4px 10px}.reward-tile strong{font-size:17px}.popup-emblem{width:80px;height:80px}.popup.wide .popup-card{padding:50px 14px 16px}}@media(prefers-reduced-motion:reduce){.popup-rays,.reward-tile:after{display:none}}.res-pill:has(.top-up-plus){padding-right:5px;gap:10px}.top-up-plus{position:relative;width:26px;height:26px;display:grid;place-items:center;border-radius:50%;color:#2b2521;background:radial-gradient(circle at 35% 30%,#fff7dd,#e8cf9a 55%,#b8955a);box-shadow:0 0 0 1px #fff3d266,0 2px 8px #0008}.top-up-plus:hover{filter:brightness(1.12)}.top-up-plus:after{content:"";position:absolute;inset:-7px -5px}.top-up-plus:not(:disabled):active{transform:scale(.9)}.popup.top-up{width:min(640px,calc(100% - 28px))}.top-up .popup-emblem svg{width:40px;height:40px}.top-up-tabs{display:flex;gap:6px;margin-top:16px;padding:4px;border-radius:14px;background:#ffffff08;border:1px solid #ffffff10}.top-up-tabs button{flex:1;height:38px;display:flex;align-items:center;justify-content:center;gap:7px;border-radius:10px;color:#a9a4b4;font-size:13px;font-weight:600}.top-up-tabs button svg{color:var(--item)}.top-up-tabs button:hover{color:#e9e3d8}.top-up-tabs button.on{color:#fff8ee;background:color-mix(in srgb,var(--item) 18%,#ffffff08);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--item) 50%,transparent)}.top-up-blocked{display:flex;align-items:center;justify-content:center;gap:7px;margin-top:12px;padding:8px 12px;border-radius:10px;font-size:12px;color:#ffc9a8;background:#ff8a5a14;border:1px solid #ff8a5a40;text-align:center}.top-up-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-top:14px}.top-up-grid.n4{grid-template-columns:repeat(4,1fr)}.top-up-pack{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 8px 10px;border-radius:16px;text-align:center;background:radial-gradient(circle at 50% 28%,color-mix(in srgb,var(--item) 22%,transparent),#ffffff05 70%);border:1px solid color-mix(in srgb,var(--item) 34%,transparent);animation:tile-pop .45s calc(.05s + var(--i) * .06s) cubic-bezier(.2,.9,.3,1.4) both}.top-up-pack:not(:disabled):hover{transform:translateY(-2px);border-color:color-mix(in srgb,var(--item) 75%,transparent)}.top-up-pack>small{font-size:11.5px;color:#b9b4c2;line-height:1.3;min-height:1.3em}.top-up-tag{position:absolute;top:-8px;left:50%;translate:-50%;padding:2px 9px;border-radius:8px;font:normal 800 10px var(--sans);white-space:nowrap;color:#2b2521;background:#e8cf9a;box-shadow:0 2px 8px #0008}.top-up-tag.best{color:#fff;background:linear-gradient(110deg,#e0627a,#b23f8f)}.top-up-price{width:100%;margin-top:4px;padding:7px 0;border-radius:10px;font-size:14px;font-weight:700;color:#302b29;background:linear-gradient(110deg,#e7d3a9,#c8aa70);box-shadow:inset 0 1px #fff6}.top-up-face{display:flex;flex-direction:column;align-items:center;gap:3px}.top-up-art{position:relative;height:46px;width:70px;color:var(--item);filter:drop-shadow(0 0 10px color-mix(in srgb,var(--item) 65%,transparent))}.top-up-art i{position:absolute;left:50%;top:50%;translate:-50% -50%}.top-up-art.pile2 i:first-child{translate:-85% -45%}.top-up-art.pile2 i:nth-child(2){translate:-15% -55%}.top-up-art.pile3 i:first-child{translate:-110% -35%;scale:.85}.top-up-art.pile3 i:nth-child(2){translate:10% -35%;scale:.85}.top-up-art.pile3 i:nth-child(3){translate:-50% -62%;scale:1.1}.top-up-face strong{font:400 21px var(--serif);color:#fff8ee}.top-up-bonus{min-height:17px;padding:1px 7px;border-radius:7px;font-size:10.5px;font-weight:700;color:var(--item);background:color-mix(in srgb,var(--item) 14%,transparent)}.top-up-bonus.none{background:none}.top-up-review{margin-top:16px}.top-up-review-head{display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px;border-radius:16px;background:radial-gradient(circle at 50% 30%,color-mix(in srgb,var(--item) 22%,transparent),#ffffff05 72%);border:1px solid color-mix(in srgb,var(--item) 40%,transparent)}.top-up-review-head>strong{font-size:14px;color:#e9e3d8}.top-up-bill{margin:14px 0 0;padding:4px 14px;border-radius:14px;background:#ffffff06;border:1px solid #ffffff10}.top-up-bill>div{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 0;font-size:13.5px}.top-up-bill>div+div{border-top:1px solid #ffffff0d}.top-up-bill dt{color:#a9a4b4}.top-up-bill dd{display:flex;align-items:center;gap:6px;margin:0;color:#f3ede2;font-weight:600}.top-up-bill dd b,.top-up-bill dd svg,.top-up-bill dd.bonus{color:var(--item)}.top-up-bill .total{padding:12px 0}.top-up-bill .total dt{color:#e9e3d8;font-weight:600}.top-up-bill .total dd{font:400 22px var(--serif);color:#fff8ee}.top-up-result{display:flex;flex-direction:column;align-items:center;gap:10px;margin-top:12px;text-align:center}.top-up-result>p{max-width:420px;font-size:13.5px;line-height:1.7;color:#c9c4cf}.top-up-result .reward-tiles{margin-top:4px}.top-up-fail{display:grid;place-items:center;width:58px;height:58px;border-radius:50%;color:#ffb38a;background:#ff8a5a18;border:1px solid #ff8a5a44}.top-up-spin{animation:top-up-spin 1s linear infinite;color:var(--tone)}.primary-btn .top-up-spin{color:inherit}@keyframes top-up-spin{to{rotate:1turn}}.top-up-actions{display:flex;gap:10px;width:100%;margin-top:10px}.top-up-actions>*{flex:1;height:48px;border-radius:14px;font-size:14px;gap:8px}.top-up-actions .primary-btn svg:last-child{margin-left:0}@media(max-width:799px){.res-pill:has(.top-up-plus){padding-right:3px;gap:6px}.top-up-plus{width:22px;height:22px}.top-up-plus svg{width:11px;height:11px}}@media(max-width:440px){.lobby-top .lobby-res{gap:4px}.res-pill:has(.top-up-plus){padding:0 2px 0 8px;gap:4px}.res-pill:has(.top-up-plus) .resource{gap:4px}.top-up-plus{width:18px;height:18px}.top-up-plus svg{width:10px;height:10px}}@media(max-width:560px){.top-up-grid,.top-up-grid.n4{grid-template-columns:repeat(2,1fr)}.top-up-tabs button{font-size:12px;gap:5px}.popup.top-up .popup-body{max-height:calc(92dvh - 150px);overflow-y:auto;overscroll-behavior:contain;padding-top:8px;scrollbar-width:none}}@media(prefers-reduced-motion:reduce){.top-up-pack{animation:none}.top-up-spin{animation-duration:3s}}.app-shell.game-screen{--nav:0px;--glass:linear-gradient(125deg,#161b28c4,#10141e8c);--glass-solid:linear-gradient(125deg,#1a2030eb,#121722db);--edge:#ffffff1f;--bar:calc(80px + env(safe-area-inset-top))}.app-shell.game-screen .topbar{display:none}.app-shell.game-screen main,.app-shell.game-screen main:has(.battle-page.mini){max-width:none;margin:0;padding:0}@media(min-width:1100px){.app-shell.game-screen .sidebar{display:none}.app-shell.game-screen .main-shell{margin-left:0}}.app-shell.game-screen .battle-page.mini{top:var(--bar);bottom:auto;right:28px}@media(min-width:800px){.app-shell.on-heroes .battle-page.mini,.app-shell.on-inventory .battle-page.mini{top:auto;bottom:calc(var(--nav) + 24px)}}.game-page{position:relative;height:100dvh;min-height:600px;overflow:hidden;isolation:isolate;background:#0b0e15}.glass{background:var(--glass);border:1px solid var(--edge);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.rail-icon,.res-pill,.round-btn{background:var(--glass-solid);border:1px solid var(--edge)}.res-pill{height:40px;display:flex;align-items:center;padding:0 16px 0 13px;border-radius:20px;box-shadow:0 8px 26px #0005;white-space:nowrap}.res-pill .resource{font-size:13.5px;gap:8px}.round-btn{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;color:#ddd7cd}.round-btn:hover{color:var(--gold);border-color:#d3bb8566}.rail-btn{position:relative;display:flex;flex-direction:column;align-items:center;gap:7px;width:62px}.rail-icon{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;color:#f1e3c2;border-color:#e8cf9a3d;box-shadow:0 8px 22px #0008;transition:transform .2s,border-color .2s}.rail-btn:not(:disabled):hover .rail-icon{transform:translateY(-2px);border-color:#e8cf9aa6}.rail-btn small{font-size:11.5px;color:#e6dfd4;text-shadow:0 1px 6px #000}.rail-btn.on .rail-icon{border-color:#e8cf9a;box-shadow:0 0 0 1px #e8cf9a66,0 8px 22px #0008}.rail-badge{top:-4px;right:0;min-width:20px;padding:2px 6px;border-radius:9px;color:#0d1a22;font-size:10px;font-weight:800;box-shadow:0 2px 8px #0008}.rail-badge,.rail-dot{position:absolute;background:#8fd8f2}.rail-dot{top:1px;right:6px;width:9px;height:9px;border-radius:50%;box-shadow:0 0 0 2px #0d111a,0 2px 8px #0008}.screen-bar{position:absolute;z-index:5;top:0;left:0;right:0;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:calc(18px + env(safe-area-inset-top)) 28px 0;pointer-events:none;animation:hud-in-down .6s both}.screen-bar>*{pointer-events:auto}.screen-title{display:flex;align-items:center;gap:14px;min-width:0;text-shadow:0 2px 12px #000}.screen-title>.round-btn{flex-shrink:0}.screen-title>div{min-width:0}.screen-title small{display:block;font-size:11px;letter-spacing:1.6px;color:#e5d0a2}:lang(th) .screen-title small{font-size:12px;letter-spacing:.3px}.screen-title h1{margin:2px 0 0;font:400 26px/1.15 var(--serif);color:#fff8ee;letter-spacing:-.3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.screen-res{display:flex;align-items:center;gap:10px}@keyframes hud-in-down{0%{opacity:0;transform:translateY(-14px)}}@keyframes hud-in-up{0%{opacity:0;transform:translateY(18px)}}@keyframes hud-in-left{0%{opacity:0;transform:translateX(-22px)}}@keyframes hud-in-right{0%{opacity:0;transform:translateX(22px)}}@media(max-width:1099px){.app-shell.game-screen{--nav:calc(64px + env(safe-area-inset-bottom))}.app-shell.game-screen .battle-page.mini{right:16px}}@media(max-width:799px){.app-shell.game-screen{--bar:calc(62px + env(safe-area-inset-top))}.app-shell.game-screen .battle-page.mini{top:calc(66px + env(safe-area-inset-top));right:12px}.game-page{min-height:560px}.screen-bar{padding:calc(12px + env(safe-area-inset-top)) 12px 0;gap:8px}.screen-title{gap:8px}.screen-title small{display:none}.screen-title h1{font-size:19px}.screen-res{gap:6px}.res-pill{height:32px;padding:0 10px 0 9px}.res-pill .resource{font-size:11.5px;gap:5px}.res-pill .resource svg{width:14px;height:14px}.res-pill .resource.energy small{display:none}.round-btn{width:32px;height:32px}.round-btn svg{width:16px;height:16px}}@media(max-width:520px){.round-btn.hide-sm,.screen-res .res-pill:nth-last-child(2){display:none}}@media(max-width:360px){.lobby-res .res-pill:nth-child(3){display:none}}.gain-pill{position:relative;--hue:#ffd36a;--hue-deep:#e0982a;--hue-glow:#f5c55a}.gain-pill.crystals{--hue:#e4cfff;--hue-deep:#9d78e6;--hue-glow:#b892ff}.gain-pill .gain-mark{display:inline-flex}.gain-pill .gain-num{font-variant-numeric:tabular-nums;transition:color .3s,text-shadow .3s}.gain-pill.gaining{border-color:color-mix(in srgb,var(--hue) 60%,transparent);box-shadow:0 8px 26px #0005,0 0 18px color-mix(in srgb,var(--hue-glow) 45%,transparent),inset 0 0 12px color-mix(in srgb,var(--hue-glow) 22%,transparent)}.gain-pill.gaining .gain-num{color:#fff3cf;text-shadow:0 0 10px var(--hue-glow),0 0 2px #fff}.gain-pill.crystals.gaining .gain-num{color:#f3eaff}.gain-tag{position:absolute;z-index:6;left:50%;top:calc(100% + 10px);translate:-50% 0;display:flex;align-items:center;gap:7px;padding:5px 13px 5px 7px;border-radius:999px;pointer-events:none;overflow:hidden;white-space:nowrap;background:linear-gradient(180deg,#3b2d14f2,#1a140af2);border:1px solid color-mix(in srgb,var(--hue) 85%,#fff);box-shadow:0 0 0 1px #0008,0 8px 24px #000b,0 0 26px color-mix(in srgb,var(--hue-glow) 55%,transparent),inset 0 1px #fff5,inset 0 -6px 12px #0006;animation:gain-tag 1.5s cubic-bezier(.3,1.4,.5,1) both}.gain-pill.crystals .gain-tag{background:linear-gradient(180deg,#2c2140f2,#140f22f2)}.gain-tag i{width:16px;height:16px;border-radius:50%;flex:none;background:radial-gradient(circle at 34% 30%,#fff8d8,#ffd560 34%,#d9971f 70%,#7d4f0c);box-shadow:inset 0 0 0 1.5px #ffe08a,inset 0 0 0 3px #a8701a,0 0 8px #ffcf5a99}.gain-pill.crystals .gain-tag i{width:13px;height:13px;margin:0 1px;border-radius:2px;rotate:45deg;background:linear-gradient(135deg,#fff,#d9c4ff 30%,#9b74ec 65%,#5b3aa8);box-shadow:0 0 8px #b892ffaa}.gain-tag b{font:900 16px/1 var(--sans);letter-spacing:.3px;font-variant-numeric:tabular-nums;background:linear-gradient(180deg,#fffbe8 8%,var(--hue) 52%,var(--hue-deep) 92%);-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 1px 0 #0009) drop-shadow(0 0 6px color-mix(in srgb,var(--hue-glow) 60%,transparent))}.gain-tag:after{content:"";position:absolute;inset:-2px auto -2px -40%;width:34%;background:linear-gradient(100deg,transparent,#fff8 50%,transparent);skew:-18deg;animation:gain-shine .75s ease-in-out .22s both}@keyframes gain-tag{0%{opacity:0;transform:translateY(12px) scale(.35);filter:blur(3px)}14%{opacity:1;transform:translateY(-3px) scale(1.12);filter:blur(0)}22%{transform:translateY(0) scale(1)}58%{opacity:1;transform:translateY(0) scale(1);filter:blur(0)}66%{opacity:1;transform:translateY(-10px) scale(1.04)}84%{opacity:0;transform:translateY(-38px) scale(.42);filter:blur(2px)}to{opacity:0;transform:translateY(-38px) scale(.42)}}@keyframes gain-shine{to{left:120%}}.gain-ring{position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;border:2px solid var(--hue);box-shadow:0 0 16px var(--hue-glow),inset 0 0 12px var(--hue-glow);opacity:0;animation:gain-ring .7s var(--merge) ease-out forwards}@keyframes gain-ring{0%{opacity:.95;transform:scale(1)}to{opacity:0;transform:scale(1.35,1.9)}}.gain-burst{position:fixed;inset:0;z-index:1000;pointer-events:none;overflow:hidden}.gain-coin{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;opacity:0;will-change:transform,opacity}.gain-coin i{display:block;width:100%;height:100%;border-radius:50%;background:radial-gradient(circle at 34% 30%,#fffbe0,#ffd75e 32%,#dc9a22 68%,#7d4f0c);box-shadow:inset 0 0 0 2px #ffe08a,inset 0 0 0 3.5px #a8701a,0 0 10px #ffcf5acc,0 0 22px #ffb83a55;animation:gain-spin .55s linear infinite}.gain-coin:nth-child(3n) i{animation-duration:.42s;animation-direction:reverse}.gain-coin:nth-child(3n+1) i{animation-duration:.68s}.gain-burst.crystals .gain-coin{width:15px;height:15px;margin:-7.5px 0 0 -7.5px}.gain-burst.crystals .gain-coin i{border-radius:2px;rotate:45deg;background:linear-gradient(135deg,#fff,#e1d0ff 28%,#9b74ec 64%,#4f3296);box-shadow:0 0 10px #b892ffcc,0 0 20px #8f6bff55;animation:gain-twinkle .5s ease-in-out infinite alternate}@keyframes gain-spin{0%{transform:scaleX(1)}25%{transform:scaleX(.15);filter:brightness(1.35)}50%{transform:scaleX(-1)}75%{transform:scaleX(.15);filter:brightness(.8)}to{transform:scaleX(1)}}@keyframes gain-twinkle{to{filter:brightness(1.6)}}@media(max-width:799px){.gain-tag{top:calc(100% + 7px);padding:4px 10px 4px 6px;gap:5px}.gain-tag b{font-size:13.5px}.gain-tag i{width:13px;height:13px}.gain-coin{width:16px;height:16px;margin:-8px 0 0 -8px}}@media(prefers-reduced-motion:reduce){.gain-tag{animation:gain-fade 1.5s both}.gain-ring,.gain-tag:after{display:none}}@keyframes gain-fade{0%,to{opacity:0}12%,70%{opacity:1}}.card-face{--card-ar:13/20;position:relative;width:100%;aspect-ratio:var(--card-ar);border-radius:5%/3.4%;container-type:inline-size;--badge-x:23%;--badge-y:12.6%}.card-face.rarity-SR{--badge-x:24.5%;--badge-y:12%}.card-face.rarity-R{--badge-x:20.5%;--badge-y:12.4%}.card-art{position:absolute;inset:6% 6.5% 30% 6.5%;overflow:hidden;background:radial-gradient(circle at 50% 40%,color-mix(in srgb,var(--hero-color) 40%,#141722),#0b0d15)}.card-art .hero-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 16%;aspect-ratio:auto}.card-art:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 70%,#0b0d15aa)}.card-face.rarity-R .card-art .hero-portrait{filter:saturate(.9)}.card-frame{position:absolute;inset:0;pointer-events:none;background:url(/art/summon/frame-ssr.webp) 0 0/100% 100% no-repeat;filter:drop-shadow(0 2px 4px #0009)}.rarity-SR>.card-frame{background-image:url(/art/summon/frame-sr.webp)}.rarity-R>.card-frame{background-image:url(/art/summon/frame-r.webp)}.card-rarity{position:absolute;left:var(--badge-x);top:var(--badge-y);translate:-50% -50%;font:700 italic 8.4cqi/1 var(--serif);letter-spacing:-.02em;color:var(--rarity);text-shadow:0 1px 2px #000,0 0 8px var(--rarity)}.card-face.rarity-SSR .card-rarity{background:linear-gradient(180deg,#fffbe8,#f3cd6b 60%,#c8902e);-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none;filter:drop-shadow(0 0 3px #f3cd6b) drop-shadow(0 1px 1px #000)}.card-new{top:9.5%;padding:2.4% 4.5%;border-radius:3px;font:700 6.6cqi/1 var(--sans);letter-spacing:.1em;color:#13261b;background:linear-gradient(180deg,#c8f5d9,#7fd6a4);box-shadow:0 0 10px #a5e3bf99}.card-new,.card-plate{position:absolute;right:10%}.card-plate{left:10%;top:73%;bottom:6%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center}.card-plate strong{font:400 11.5cqi/1.1 var(--serif);color:#fbf3e2;text-shadow:0 1px 3px #000,0 0 10px color-mix(in srgb,var(--rarity) 40%,transparent)}.card-plate small,.card-plate strong{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.card-plate small{margin-top:2.5%;font-size:6cqi;color:#b9b6c6}.card-glyphs{display:block;margin-top:2%;font-size:5.6cqi;letter-spacing:.15em;color:var(--rarity);text-shadow:0 0 6px var(--rarity)}.card-bonus{position:absolute;left:0;right:0;top:63%;display:flex;justify-content:center;align-items:center;gap:3px;font:600 6.5cqi var(--sans);font-style:normal;color:#f3dfb3;text-shadow:0 1px 3px #000,0 0 6px #000}.card-foil{position:absolute;inset:0;z-index:1;overflow:hidden;pointer-events:none;mix-blend-mode:color-dodge;opacity:.16}.card-foil:before{content:"";position:absolute;left:0;top:0;width:250%;height:250%;background:linear-gradient(115deg,transparent 20%,#ff9de2 32%,#9df3ff 42%,#fff59d 52%,transparent 64%);animation:foil 3.2s ease-in-out infinite}@keyframes foil{0%,to{transform:translate(-60%,-60%)}50%{transform:none}}.summon-sky{position:absolute;inset:0;z-index:-1;background:radial-gradient(ellipse 46% 62% at 66% 48%,#6a45a840,transparent 70%),linear-gradient(160deg,#141827aa,#0b0d15cc 70%),#0b0d15 url(/art/summon/sanctum-wide.webp) 50% 78%/cover no-repeat}@media(max-aspect-ratio:1/1){.summon-sky{background-image:radial-gradient(ellipse 46% 62% at 66% 48%,#6a45a840,transparent 70%),linear-gradient(160deg,#141827aa,#0b0d15cc 70%),url(/art/summon/sanctum-tall.webp)}}.summon-sky:before{content:"";position:absolute;inset:0;opacity:.55;background-image:radial-gradient(1px 1px at 12% 22%,#fff,transparent),radial-gradient(1px 1px at 28% 68%,#fff,transparent),radial-gradient(1.5px 1.5px at 44% 14%,#ffe9b8,transparent),radial-gradient(1px 1px at 57% 82%,#fff,transparent),radial-gradient(1.5px 1.5px at 73% 30%,#d9c6f6,transparent),radial-gradient(1px 1px at 86% 62%,#fff,transparent),radial-gradient(1px 1px at 93% 12%,#fff,transparent),radial-gradient(1.5px 1.5px at 6% 88%,#ffe9b8,transparent),radial-gradient(1px 1px at 36% 42%,#fff,transparent),radial-gradient(1px 1px at 64% 56%,#fff,transparent);animation:twinkle 6s ease-in-out infinite alternate}.summon-sky:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#0b0d15d9,#0b0d1566 30%,transparent 50%),linear-gradient(0deg,#0b0d15e6,transparent 30%)}.banner-stage{position:absolute;inset:0 0 0 34%;display:grid;place-items:center;pointer-events:none}.banner-portal{position:absolute;left:50%;top:48%;width:min(62vh,640px);aspect-ratio:1;translate:-50% -50%;mix-blend-mode:screen}.portal-ring{position:absolute;inset:0;background:url(/art/summon/summon-circle.webp) 50%/contain no-repeat;opacity:.75;animation:spin 90s linear infinite}.portal-ring.inner{inset:22%;background-image:url(/art/summon/summon-circle-sr.webp);opacity:.55;animation-duration:40s;animation-direction:reverse}.portal-core{position:absolute;inset:36%;background:url(/art/summon/summon-core.webp) 50%/contain no-repeat;animation:spin 14s linear infinite reverse,breathe 4s ease-in-out infinite}.banner-portal:after{content:"";position:absolute;inset:10%;border-radius:50%;background:radial-gradient(circle,#b98cf040,#6a45a81a 45%,transparent 70%);filter:blur(10px)}:lang(th) .banner-copy>.eyebrow{font-size:12.5px;letter-spacing:.3px}.banner-cards{position:relative;display:flex;justify-content:center;align-items:center;translate:0 -3vh;pointer-events:auto;animation:hud-in-up .8s .1s both}.banner-card{width:clamp(150px,15vw,230px);margin:0 calc(clamp(150px,15vw,230px) * -.14);rotate:calc((var(--i) - 1) * 9deg);translate:0 22px;transition:transform .3s;filter:drop-shadow(0 18px 30px #000c)}.banner-card:nth-child(2){z-index:-1;width:clamp(134px,13.4vw,205px);translate:0 0}.banner-card:first-child{z-index:1;width:clamp(170px,17vw,260px);translate:0 -6px}.banner-card:hover{transform:translateY(-12px) scale(1.04)}.banner-copy{position:absolute;z-index:2;left:56px;top:clamp(110px,18vh,180px);max-width:min(600px,42vw);animation:hud-in-left .7s .08s both}.banner-copy>.eyebrow{display:flex;align-items:center;gap:10px;font-size:12px;letter-spacing:1.4px;color:#d9c6f6}.banner-copy>.eyebrow:before{content:"";width:28px;height:1px;background:currentColor}.banner-copy h2{margin:16px 0;font:400 clamp(40px,4vw,62px)/1.1 var(--serif);letter-spacing:-1px;color:#fff8ee;text-shadow:0 4px 30px #000b}.banner-copy h2 em{color:#ebd5a4}.banner-copy p{max-width:420px;color:#d3cfda;font-size:14px;line-height:1.8;text-shadow:0 1px 8px #000}.pity{max-width:380px;margin-top:26px;font-size:13px;color:#d0cbd8}.pity b{color:var(--gold);font-size:15px}.pity-track{height:5px;margin-top:10px;border-radius:3px;background:#ffffff14;overflow:hidden}.pity-track i{display:block;height:100%;background:linear-gradient(90deg,#b98cf0,#f3cd6b);box-shadow:0 0 10px #f3cd6b88}.summon-dock{position:absolute;z-index:3;left:56px;right:36px;bottom:32px;display:flex;align-items:flex-end;justify-content:space-between;gap:16px;pointer-events:none}.summon-dock>*{pointer-events:auto}.summon-links{display:flex;gap:10px;animation:hud-in-up .7s .2s both}.glass-chip{display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 18px;border-radius:22px;color:#ece4f6;font-size:13px;box-shadow:0 8px 24px #0007}.glass-chip svg{color:#d9c6f6}.glass-chip b{font-size:11px;font-weight:700;padding:2px 7px;border-radius:9px;background:#ffffff14;color:#e7d3a3}.glass-chip:hover{border-color:#d9c6f680}.banner-actions{display:flex;gap:12px;animation:hud-in-right .7s .14s both}.summon-btn{position:relative;display:inline-flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:4px;min-width:170px;min-height:58px;padding:8px 18px;border-radius:6px;text-align:left;color:#ece6f5;border:1px solid #b98cf066;background:linear-gradient(110deg,#3a2c57,#251d39);box-shadow:inset 0 1px #ffffff1a}.summon-btn span{font-size:12px;font-weight:600}.summon-btn b{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:#d9c6f6}.summon-btn small{font-size:8px;letter-spacing:.06em;color:#c9b07c}.summon-btn.ten{color:#302b29;border-color:#f3dfb3;background:linear-gradient(110deg,#efdcb2,#c8aa70)}.summon-btn.ten b{color:#4a3a63}.summon-btn.ten small{color:#5a4a33}.summon-btn:not(:disabled):hover{filter:brightness(1.1);transform:translateY(-1px)}.summon-btn:disabled{opacity:.45;filter:grayscale(.6);cursor:default}.summon-btn.compact{min-height:45px;min-width:0;flex-direction:row;align-items:center;gap:12px}.banner-actions .summon-btn{min-width:220px;min-height:76px;padding:10px 22px;border-radius:16px;background:linear-gradient(120deg,#4a3870e6,#2a2042e6);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);box-shadow:0 14px 36px #000a,inset 0 1px #ffffff26}.banner-actions .summon-btn.ten{background:linear-gradient(110deg,#f2deb1,#c8aa70);box-shadow:0 14px 40px #d3bb8540,inset 0 1px #fff9}.banner-actions .summon-btn span{font-size:16px;font-weight:700}.banner-actions .summon-btn b{font-size:14px}.banner-actions .summon-btn small{font-size:11px;letter-spacing:0}.modal.collection-modal{width:min(820px,calc(100% - 28px))}.rate-row{display:flex;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid #ffffff08}.rate-row>span:nth-child(2){flex:1;font-size:13px}.rate-row small{display:block;margin-top:4px;font-size:11px;color:var(--muted)}.rate-row b{font:20px var(--serif);color:var(--rarity)}.rates-modal .muted{margin-top:14px;font-size:12px;line-height:1.7}.collection-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;margin-bottom:10px}.collection-card{position:relative}.collection-card.missing .card-face{filter:grayscale(1) brightness(.45)}.collection-lock{position:absolute;inset:6% 6.5% 30%;display:grid;place-items:center;color:#d3bb85}@keyframes twinkle{to{opacity:.85}}@media(max-height:780px) and (min-width:800px){.banner-copy{top:96px}.banner-copy h2{font-size:clamp(38px,3.8vw,52px)}.banner-copy p{display:none}.banner-card{width:clamp(130px,13vw,190px)}.banner-card:first-child{width:clamp(150px,15vw,214px)}.banner-card:nth-child(2){width:clamp(118px,11.6vw,170px)}}@media(max-width:1099px){.banner-copy{left:32px}.summon-dock{left:28px;right:24px;bottom:calc(var(--nav) + 22px)}.banner-stage{inset:0 0 0 30%}}@media(max-width:799px){.summon-sky:after{background:linear-gradient(180deg,#0b0d15cc,transparent 28%),linear-gradient(0deg,#0b0d15f2,transparent 36%)}.banner-copy{left:18px;right:18px;top:var(--bar);max-width:none}.banner-copy>.eyebrow{font-size:11px}.banner-copy h2{margin:8px 0 0;font-size:28px;letter-spacing:-.3px}.banner-copy p{display:none}.pity{margin-top:12px;font-size:12px;max-width:none}.banner-stage{inset:calc(var(--bar) + 120px) 0 calc(var(--nav) + 150px)}.banner-portal{width:min(86vw,420px)}.banner-cards{translate:0 0}.banner-card{width:min(30vw,150px);margin:0 calc(min(30vw,150px) * -.12)}.banner-card:first-child{width:min(34vw,170px)}.banner-card:nth-child(2){width:min(27vw,134px)}.summon-dock{left:12px;right:12px;bottom:calc(var(--nav) + 12px);flex-direction:column;align-items:stretch;gap:10px}.summon-links{justify-content:center}.glass-chip{height:38px;padding:0 14px;font-size:12px}.banner-actions{gap:10px}.banner-actions .summon-btn{flex:1;min-width:0;min-height:64px;padding:8px 14px;border-radius:14px}.banner-actions .summon-btn span{font-size:14px}.collection-row{gap:6px}}.summon-ceremony{position:fixed;inset:0;width:100vw;height:100dvh;max-width:none;max-height:none;margin:0;padding:0;border:0;overflow:hidden;overflow:clip;color:var(--text);background:#05060b;--card-ar:13/20}.summon-ceremony::backdrop{background:#05060b}.ceremony-stage{position:absolute;inset:0;overflow:hidden}.stage-art{position:absolute;inset:0;background:#0b0d1c url(/art/summon/sanctum-wide.webp) 50% 80%/cover no-repeat;animation:stage-in 4s cubic-bezier(.2,.7,.2,1) both}@media(max-aspect-ratio:1/1){.stage-art{background-image:url(/art/summon/sanctum-tall.webp)}}.stage-tint{position:absolute;inset:0;background:radial-gradient(ellipse 60% 50% at 50% 42%,color-mix(in srgb,var(--stage) 22%,transparent),transparent 70%),linear-gradient(180deg,#05060b55,#05060b22 40%,#05060b88);transition:opacity .8s}.stage-tint:after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 80% 70% at 50% 46%,#05060b99,#05060be6);opacity:0;transition:opacity 1s}.summon-ceremony:not(.phase-portal) .stage-tint:after{opacity:1}.ceremony-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;mix-blend-mode:screen;mix-blend-mode:plus-lighter}.ceremony-fx.back{z-index:1}.ceremony-fx.front{z-index:3}.ceremony-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:14px;z-index:7;color:#cfc8d8}.ceremony-portal{position:absolute;inset:0;z-index:4;display:grid;place-items:start center;padding-top:calc(11dvh + env(safe-area-inset-top));cursor:pointer}.gate-text{font:italic clamp(18px,2.2vw,26px) var(--serif);letter-spacing:.04em;color:#fff6e4;text-shadow:0 0 18px var(--stage),0 0 42px var(--stage),0 2px 6px #000;animation:gate-text 1s both}:lang(th) .gate-text{font-style:normal;letter-spacing:0}.gate-still{position:absolute;left:50%;top:40%;width:min(60vw,320px);aspect-ratio:1;translate:-50% -50%;background:url(/art/summon/summon-circle.webp) 50%/contain no-repeat;mix-blend-mode:screen}.ceremony-cards{position:absolute;inset:0 0 96px;z-index:2;display:grid;grid-template-columns:repeat(5,minmax(0,min(158px,(100dvh - 190px)/2 * var(--card-ar))));grid-auto-rows:min-content;align-content:center;justify-content:center;gap:26px 20px;padding:64px 24px 0;perspective:1600px}.ceremony-cards.single{grid-template-columns:minmax(0,min(250px,(100dvh - 170px) * var(--card-ar)))}.summon-card{position:relative;width:100%;aspect-ratio:var(--card-ar);padding:0;background:none;animation:deal .62s calc(var(--i) * 80ms) cubic-bezier(.18,.85,.25,1.04) both;cursor:pointer}.summon-card:disabled{cursor:default}.card-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .35s cubic-bezier(.3,1.3,.5,1)}.summon-card.flipped .card-inner{animation:flip .72s cubic-bezier(.3,.9,.3,1.05) both}.summon-card:not(.flipped):not(:disabled):hover .card-inner{transform:translateY(-8px) rotateY(-10deg) rotateX(4deg)}.card-back,.card-front{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:5%/3.4%}.card-front{transform:rotateY(180deg)}.card-back{overflow:hidden;background:url(/art/summon/card-back.webp) 50%/100% 100% no-repeat,radial-gradient(circle,#2a2f4a,#11131f 70%);box-shadow:0 14px 30px #000c}.back-sheen{position:absolute;inset:-50%;background:linear-gradient(115deg,transparent 42%,#fff3d040 49%,#ffffff70 50%,#fff3d040 51%,transparent 58%);animation:sheen 4.5s calc(var(--i) * .23s + 1s) ease-in-out infinite}.back-crack{position:absolute;inset:0;background:url(/art/summon/summon-crack.webp) 50%/cover no-repeat;mix-blend-mode:screen;opacity:0}.phase-reveal .summon-card:not(.flipped) .card-back{box-shadow:0 14px 30px #000c,0 0 0 1px color-mix(in srgb,var(--rarity) 60%,transparent),0 0 22px color-mix(in srgb,var(--rarity) 50%,transparent)}.phase-reveal .summon-card.rarity-SSR:not(.flipped) .card-back{animation:ssr-hum 1.6s ease-in-out infinite alternate}.summon-card.charging .card-inner{animation:charge-sr .55s ease-in both}.summon-card.charging .card-back{box-shadow:0 0 30px 6px var(--rarity),inset 0 0 26px var(--rarity)}.summon-card.charging.rarity-SSR .card-inner{animation:charge-ssr 1.5s cubic-bezier(.5,0,.9,.5) both}.summon-card.charging.rarity-SSR .back-crack{animation:crack 1.5s step-end both}.summon-card.flipped.rarity-SSR .card-front:after{content:"";position:absolute;inset:-2px;border-radius:inherit;pointer-events:none;box-shadow:0 0 34px 6px #f3cd6bcc;opacity:0;animation:ssr-glow 2.2s ease-in-out .8s infinite alternate}.summon-card.flipped.rarity-SR .card-front{box-shadow:0 0 24px #b98cf099}.summon-card.flipped.rarity-SSR{z-index:1}.ceremony-bar{position:absolute;left:0;right:0;bottom:0;z-index:4;display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;min-height:96px;padding:16px 20px calc(16px + env(safe-area-inset-bottom));background:linear-gradient(0deg,#05060bf0,transparent);animation:fade-in .5s .3s both}.ceremony-hint{font:italic 15px var(--serif);color:#e6dcc4;text-shadow:0 0 12px #f3cd6b66}:lang(th) .ceremony-hint{font-style:normal}.ceremony-bar .secondary-btn{min-width:120px}.ceremony-summary{display:flex;gap:16px;font-size:12px;color:#e7dcc4}.ceremony-summary b{display:inline-flex;align-items:center;gap:5px;font-weight:600}.ceremony-summary .sum-new{color:#a5e3bf}.spotlight{position:absolute;inset:0;z-index:6;display:block;padding:0;cursor:pointer;overflow:hidden;text-align:left;background:radial-gradient(ellipse 55% 60% at 38% 48%,color-mix(in srgb,var(--rarity) 34%,#05060b),#05060bf7 75%);animation:fade-in .3s both}.spotlight:before{content:"";position:absolute;inset:-4%;background:url(/art/summon/sanctum-wide.webp) 50% 70%/cover;opacity:.28;filter:blur(6px) saturate(.8);animation:stage-in 6s ease-out both}@media(max-aspect-ratio:1/1){.spotlight:before{background-image:url(/art/summon/sanctum-tall.webp)}}.spot-rays{top:48%;width:170vmax;height:170vmax;opacity:.36;animation:spin 60s linear infinite,fade-in 1s both}.spot-burst,.spot-rays{position:absolute;left:36%;translate:-50% -50%;max-width:none;mix-blend-mode:screen;pointer-events:none}.spot-burst{top:46%;width:110vmin;height:110vmin;animation:spot-burst .95s cubic-bezier(.1,.7,.3,1) both}.spot-art{position:absolute;left:36%;top:50%;height:min(96dvh,64vw * 9/8);aspect-ratio:8/9;translate:-50% -50%;-webkit-mask:radial-gradient(ellipse 50% 50% at 50% 44%,#000 52%,#0008 72%,transparent 100%);mask:radial-gradient(ellipse 50% 50% at 50% 44%,#000 52%,#0008 72%,transparent 100%);animation:spot-art 1.1s cubic-bezier(.15,.8,.25,1) both}.spot-art .hero-portrait{width:100%;height:100%;object-fit:cover;object-position:50% 20%}.rarity-SSR .spot-art{filter:drop-shadow(0 0 30px #f3cd6b55)}.spot-flash{position:absolute;inset:0;background:#fff;pointer-events:none;animation:screen-flash .7s ease-out both}.spot-copy{position:absolute;z-index:1;isolation:isolate;right:7vw;top:50%;width:min(36vw,460px);translate:0 -50%;animation:spot-copy .8s cubic-bezier(.2,.8,.2,1) .45s both}.spot-copy:before{content:"";position:absolute;inset:-30% -25%;z-index:-1;background:radial-gradient(closest-side,#05060bd0,#05060b80 60%,transparent);pointer-events:none}.spot-copy small{display:block;font-size:11px;font-weight:700;letter-spacing:.26em;color:var(--rarity);text-shadow:0 0 10px var(--rarity)}:lang(th) .spot-copy small{letter-spacing:.04em;font-size:13px}.spot-tier{display:flex;align-items:baseline;gap:14px;margin-top:14px;font:700 italic clamp(44px,6vw,78px)/1 var(--serif);background:linear-gradient(180deg,#fffaf0 10%,var(--rarity) 55%,color-mix(in srgb,var(--rarity) 60%,#000));-webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 0 16px color-mix(in srgb,var(--rarity) 70%,transparent))}.spot-tier i{font:normal 16px var(--sans);letter-spacing:.2em;color:var(--rarity);-webkit-text-fill-color:var(--rarity)}.spot-copy strong{display:block;margin-top:8px;font:400 clamp(44px,6.4vw,84px)/1 var(--serif);color:#fff8e8;text-shadow:0 0 30px var(--rarity),0 4px 18px #000}.spot-copy em{display:block;margin-top:12px;font:italic 19px var(--serif);color:#e2d8c6}:lang(th) .spot-copy em{font-style:normal}.spot-rarity{display:block;margin-top:22px;padding-top:16px;border-top:1px solid color-mix(in srgb,var(--rarity) 45%,transparent);font-size:13px;line-height:1.8;color:#ddd7e6;text-shadow:0 1px 4px #000}.spot-continue{position:absolute;bottom:calc(26px + env(safe-area-inset-bottom));left:0;right:0;text-align:center;font-size:11px;letter-spacing:.2em;color:#d6cfe0;text-shadow:0 1px 6px #000,0 0 12px #000;animation:breathe 2s ease-in-out 1.2s infinite both}@keyframes spin{to{rotate:1turn}}@keyframes breathe{0%,to{opacity:.6}50%{opacity:1}}@keyframes fade-up{0%{opacity:0;translate:0 12px}to{opacity:1;translate:0 0}}@keyframes fade-in{0%{opacity:0}}@keyframes stage-in{0%{transform:scale(1.12);opacity:.3}}@keyframes gate-text{0%{opacity:0;transform:translateY(10px) scale(.96);letter-spacing:.3em}to{opacity:1;transform:none}}@keyframes deal{0%{transform:translate(var(--fx,0),var(--fy,-40vh)) scale(.08) rotate(-160deg);opacity:0}15%{opacity:1}70%{transform:translateY(-6%) scale(1.04) rotate(4deg)}to{transform:none;opacity:1}}@keyframes flip{0%{transform:rotateY(0)}45%{transform:translateZ(80px) rotateY(100deg) scale(1.12)}to{transform:rotateY(180deg)}}@keyframes sheen{0%,70%{transform:translateX(-60%)}to{transform:translateX(60%)}}@keyframes ssr-hum{to{box-shadow:0 14px 30px #000c,0 0 0 1px #f3cd6b,0 0 34px 4px #f3cd6bbb}}@keyframes charge-sr{0%{transform:none}to{transform:translateY(-10px) scale(1.08)}}@keyframes charge-ssr{0%{transform:none}20%{transform:translateY(-12px) scale(1.06) rotate(-1deg)}30%{transform:translateY(-12px) scale(1.07) rotate(1.5deg)}40%{transform:translateY(-14px) scale(1.08) rotate(-1.5deg)}50%{transform:translateY(-14px) scale(1.09) rotate(2deg)}60%{transform:translateY(-16px) scale(1.1) rotate(-2deg)}70%{transform:translateY(-16px) scale(1.12) rotate(2.5deg)}80%{transform:translateY(-18px) scale(1.13) rotate(-2.5deg)}90%{transform:translateY(-18px) scale(1.15) rotate(3deg)}to{transform:translateY(-20px) scale(1.18) rotate(0)}}@keyframes crack{0%{opacity:0}30%{opacity:.35}55%{opacity:.6}75%{opacity:.85}90%{opacity:1}}@keyframes ssr-glow{to{opacity:1}}@keyframes screen-flash{0%{opacity:.9}to{opacity:0}}@keyframes spot-burst{0%{transform:scale(.15) rotate(-20deg);opacity:.85}40%{opacity:.6}to{transform:scale(1.5) rotate(10deg);opacity:0}}@keyframes spot-art{0%{transform:translateX(10%) scale(1.08);opacity:0}to{transform:none;opacity:1}}@keyframes spot-copy{0%{transform:translateX(-30px);opacity:0}to{transform:none;opacity:1}}.ascend-stars{color:#f3cd6b;margin-left:4px;letter-spacing:0}.placeholder-portrait{display:block;width:100%;height:auto;aspect-ratio:8/9}.shield-bar{display:block;height:3px;margin-top:2px;border-radius:2px;background:linear-gradient(90deg,#e8ecf5,#9fc4ee);box-shadow:0 0 6px #9fc4ee88;transition:width .2s}.log-shield{color:#a9cdf2}@media(max-width:799px){.ceremony-cards{grid-template-columns:repeat(5,minmax(0,min((100vw - 44px)/5,(100dvh - 176px)/2 * var(--card-ar))));gap:12px 6px;padding:60px 10px 0}.ceremony-cards.single{grid-template-columns:minmax(0,min(220px,(100dvh - 160px) * var(--card-ar)))}.spot-art,.spot-burst,.spot-rays{left:50%;top:34%}.spot-art{height:min(64dvh,100vw * 9/8)}.spot-copy{left:20px;right:20px;top:auto;bottom:calc(64px + env(safe-area-inset-bottom));width:auto;translate:none;text-align:center}.spot-tier{justify-content:center}.spot-copy strong,.spot-tier{font-size:42px}.spot-copy em{font-size:16px}.spot-rarity{margin-top:12px;padding-top:10px;font-size:12px}.ceremony-summary{width:100%;justify-content:center}}@media(prefers-reduced-motion:reduce){.back-sheen,.spot-burst,.spot-flash{display:none}}