@layer components{.hc{--rx:0deg;--ry:0deg;--mx:50%;--my:50%;--hov:0;--mp:var(--pack-grape);aspect-ratio:63/88;color:var(--inverse);transform-style:preserve-3d;-webkit-tap-highlight-color:transparent;text-decoration:none;display:block;position:relative}.hc-body{transform-style:preserve-3d;transform:rotateX(var(--rx)) rotateY(var(--ry));position:absolute;inset:0}.hc-body:before,.hc-body:after{content:"";border-radius:var(--radius-card);position:absolute;inset:0}.hc-body:before{background:var(--edge);transform:translateZ(-2px)}.hc-body:after{background:var(--card-back);box-shadow:var(--shadow);transform:translateZ(-4px)}.hc-face{border-radius:var(--radius-card);background:var(--stock);transform-style:preserve-3d;flex-direction:column;padding:9px 9px 0;display:flex;position:absolute;inset:0}.hc-win{border-radius:var(--radius-md);background-color:var(--mp);background-image:radial-gradient(circle at 30% 20%, color-mix(in srgb, var(--stock) 45%, transparent), transparent 55%), radial-gradient(circle, color-mix(in srgb, var(--stock) 20%, transparent) 1.6px, transparent 2px);transform-style:preserve-3d;background-size:auto,14px 14px;flex:auto;position:relative}.hc-win:after{content:"";border-radius:inherit;pointer-events:none;box-shadow:inset 0 0 0 2px var(--line), inset 0 -40px 50px -30px var(--card-shade);position:absolute;inset:0}.hc-holo{border-radius:inherit;pointer-events:none;opacity:calc(.28 + var(--hov) * .5);mix-blend-mode:color-dodge;background-image:repeating-linear-gradient(115deg, var(--holo-pink) 0%, var(--holo-gold) 7%, var(--holo-mint) 14%, var(--holo-sky) 21%, var(--holo-violet) 28%, var(--holo-pink) 35%), radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--stock) 70%, transparent), transparent 50%);background-size:240% 240%,100% 100%;background-position:calc(var(--mx) * 1.2) calc(var(--my) * 1.2), 0 0;position:absolute;inset:0}.hc-art{pointer-events:none;width:100%;height:116%;position:absolute;bottom:0;left:0;right:0;transform:translateZ(18px)}.hc-art img{object-fit:cover;object-position:50% 0;width:100%;height:100%}.hc-foot{flex-direction:column;gap:3px;padding:10px 6px 12px;display:flex;position:relative;transform:translateZ(8px)}.hc-foil{border-radius:var(--radius-card);pointer-events:none;opacity:0;mix-blend-mode:multiply;background:linear-gradient(calc(100deg + (var(--mx) - 50%) * .6), transparent 20%, color-mix(in srgb, var(--holo-gold) 35%, transparent) 35%, color-mix(in srgb, var(--holo-mint) 35%, transparent) 50%, color-mix(in srgb, var(--holo-sky) 38%, transparent) 65%, transparent 80%);position:absolute;inset:0;transform:translateZ(2px)}.hc[data-rare] .hc-foil{opacity:.55}.hc-glare{border-radius:var(--radius-card);pointer-events:none;opacity:calc(var(--hov) * .9);mix-blend-mode:soft-light;background:radial-gradient(circle at var(--mx) var(--my), color-mix(in srgb, var(--stock) 55%, transparent), color-mix(in srgb, var(--stock) 12%, transparent) 28%, transparent 55%);position:absolute;inset:0;transform:translateZ(34px)}:root[data-motion=static] .hc-body{transform:none}.hh-stage{z-index:2;perspective:1300px;place-items:center;height:clamp(440px,128vw,520px);margin-top:8px;display:grid;position:relative}.hh-fan{width:var(--cw);aspect-ratio:63/88;transform-style:preserve-3d;--cw:min(300px, 74vw);position:relative}.hh-fan>*{position:absolute;inset:0}.hh-fan>.b2{transform:translate3d(-18%,4%,-40px)rotate(-12deg)}.hh-fan>.b1{transform:translate3d(14%,2%,-20px)rotate(9deg)}.hh-fan>.b0{transform:rotate(-3deg)}@media (min-width:60rem){.hh-stage{height:640px;margin:0}.hh-fan{--cw:360px}}[data-entrance] .hh-fan>*{animation:hh-deal .72s var(--ease-out) both}[data-entrance] .hh-fan>.b2{animation-delay:60ms}[data-entrance] .hh-fan>.b1{animation-delay:.14s}[data-entrance] .hh-fan>.b0{animation-delay:.22s}@keyframes hh-deal{0%{opacity:0;transform:translate(46vw,60vh)rotate(38deg)scale(.55)}}.hh-mini{border-radius:var(--radius-md);background:var(--stock);color:var(--inverse);box-shadow:var(--shadow-sm);min-width:0;transition:transform var(--dur-fast) var(--ease-out);align-items:center;gap:10px;padding:8px 14px 8px 8px;text-decoration:none;display:flex}@media (hover:hover){.hh-mini:hover{transform:translateY(-3px)rotate(-1deg)}}.hh-mini-art{border-radius:var(--radius-sm);background:var(--mp);flex:none;place-items:center;width:44px;height:44px;display:grid}.hh-bar{background:color-mix(in srgb, currentColor 18%, transparent);max-width:520px;height:6px;transform:skewX(var(--lean));overflow:hidden}.hh-live{background:var(--live);color:var(--on-live)}.hh-live-dot{background:var(--on-live);animation:1.2s steps(2,jump-none) infinite hh-blink}@keyframes hh-blink{50%{opacity:.25}}.hh-theme{line-height:1.02}.hh-theme:lang(ko){transform:skewX(var(--lean));transform-origin:0 100%}.hh-theme:lang(en),.hh-theme:lang(ru){line-height:.94}[data-hub-hero]:is([data-hub-hero=tangerine],[data-hub-hero=sky],[data-hub-hero=bubble],[data-hub-hero=lime],[data-hub-hero=sun]){--odo-sec:var(--on-live);--odo-colon:currentColor}.hh-bar>i{transform-origin:0;height:100%;transition:transform var(--dur-reveal) var(--ease-out);background:currentColor;display:block}[data-stale] .hh-values{opacity:.35}}:root[data-motion=static] .hh-live-dot{animation:none}.hh-marquee [data-kinetic-active=true] .ktq,.hh-marquee [data-kinetic-active=true] .ktq.sun{transform:none}.hh-marquee .ktq-it b{font-family:var(--font-num-italic);font-weight:var(--weight-num-italic);font-variant-numeric:tabular-nums;font-size:1.3em;font-style:italic}
