/* Angular neon reveal: idle gate -> charge on tear -> release on reveal.
   This sheet precedes play-opener.css; shell overrides use extra specificity. */
.sf-op.sf-op {
  --op-cyan: #00ffff;
  --stage-card: min(380px, 69vw, calc((100dvh - var(--op-top) - var(--op-bottom) - 48px) * 5 / 7));
}
.sf-op .sf-op-bg { background: #0a0014; }
.sf-op .sf-op-stars { opacity: .12; }
.sf-op .sf-op-stars i { animation: none; opacity: .65; }
/* Pause covered decoration; card entrance transforms must finish so the
   landing target is stable even if the user opens immediately. */
.sf-op.is-cinematic .sf-op-bg *, .sf-op.is-cinematic .sf-op-bg *::before, .sf-op.is-cinematic .sf-op-bg *::after,
.sf-op.is-cinematic .sf-op-holo, .sf-op.is-cinematic .sf-op-holo::after,
.sf-op.is-cinematic .sf-op-gcard::after, .sf-op.is-cinematic .sf-op-scan::before { animation-play-state: paused !important; }
.sf-mg-fly.sf-mg-fly { will-change: transform; }
.sf-op .sf-op-landed { animation: sf-stage-landed .4s ease-out; }
@keyframes sf-stage-landed { from { opacity: .82; } to { opacity: 1; } }
.sf-op .sf-op-rays { display: none; }
.sf-op .sf-op-gcard { width: var(--stage-card); }
.sf-op.is-pack { --stage-card: min(370px, 69vw, calc((100dvh - var(--op-top) - var(--op-bottom) - 64px) * 794 / 1217)); }
.sf-op .sf-op-pack { width: var(--stage-card); }
/* One card of a pack (single()) stands in the same gate as the pack: the pack's width, centred on
   the gate. Its caption hangs below without pushing the card up, and the drag hint sits on the
   card's foot like the gacha card's (owner 2026-10-07: "เหมือนมันเลยออกนอกกรอบ" — sized
   min(340px, 74vw, 46vh) it crossed the frame on phones and the hint lay on the frame line). */
.sf-op .sf-op-rone { width: var(--stage-card); }
.sf-op .sf-op-rone .sf-op-rcap { position: absolute; top: calc(100% + 8px); left: 0; right: 0; margin: 0; }
.sf-op .sf-op-rone .sf-op-rhint { top: auto; bottom: 14px; }
.sf-op .sf-op-gcard::after {
  inset: -3px; border-radius: 13px;
  box-shadow: -2px 0 0 #00ffff8c, 2px 0 0 #ff006e8c, -15px 0 48px #00ffff22, 15px 0 48px #ff006e22, 0 24px 48px #000b;
}
.sf-op .sf-op-gcard.is-revealed::after { box-shadow: -2px 0 0 #00ffff, 2px 0 0 #ff006e, -16px 0 58px #00ffff40, 16px 0 58px #ff006e40; }
.sf-op .sf-op-gcard.is-best::after { box-shadow: 0 0 0 2px #ffe29c, -18px 0 65px #00ffff45, 18px 0 65px #ff006e45, 0 0 30px #ffd07060; }

/* Controls borrow the angular treatment of the storefront hero. */
.sf-op .sf-op-head { padding-top: calc(28px + env(safe-area-inset-top, 0px)); background: linear-gradient(#0a0014e8, #0a001400); }
.sf-op .sf-op-title {
  font-size: clamp(22px, 3vw, 32px); line-height: 1.45; letter-spacing: 0;
  color: #f5f0ff; -webkit-text-fill-color: currentColor; background: none;
  filter: none; text-shadow: 0 2px 20px #000; animation: none;
}
.sf-op .sf-op-title.is-new { animation: sf-stage-title .35s ease-out both; }
.sf-op .sf-op-kicker { color: #00ffff; -webkit-text-fill-color: currentColor; letter-spacing: 1px; font-size: 11px; margin-bottom: 7px; }
.sf-op.sf-op.is-best .sf-op-title { color: #fff3d3; background: none; filter: none; }
.sf-op.is-best .sf-op-kicker { color: #ffe29c; }
.sf-op .sf-op-head::after {
  content: ''; position: absolute; bottom: 0; left: 50%; width: 78px; height: 2px; translate: -50% 0;
  background: linear-gradient(90deg, #00ffff 0 47%, transparent 47% 53%, #ff006e 53%); box-shadow: 0 0 16px #00ffff30;
}
.sf-op .sf-op-x, .sf-op .sf-op-mute { width: 44px; height: 44px; background: #10081de6; }
.sf-op .sf-op-x { border-color: #ff006e80; }
.sf-op .sf-op-mute { border-color: #ffffff30; }
.sf-op .sf-op-foot { flex-direction: column; gap: 14px; padding-bottom: calc(22px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(0deg, #0a0014f7, #0a001400); }
.sf-op .sf-op-btn { min-height: 48px; padding: 12px 26px; background: #10081de6; border-color: #8c6ba144; }
.sf-op .sf-op-btn.is-hot {
  min-width: 180px; color: #0a0014; background: #00ffff; border: 0;
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  box-shadow: none;
}
.sf-op .sf-op-btn.is-hot:hover { background: #b6ffff; }
.sf-op .sf-op-btn:focus-visible { outline: 2px solid #fff; outline-offset: -5px; }
.sf-op .sf-op-btn.is-hot:focus-visible { outline-color: #0a0014; }
.sf-op.is-best .sf-op-btn.is-hot { background: #ffe29c; }
.sf-op .sf-op-note { flex-basis: auto; width: 100%; color: #b9accb; max-width: 650px; line-height: 1.75; }
.sf-op .sf-op-foilhint { justify-content: flex-end; padding-bottom: 24px; gap: 9px; }
.sf-op .sf-op-hand .icon { width: 28px; height: 28px; }
.sf-op .sf-op-pill { background: #0a0014ed; color: #fff; border-color: #00ffff66; font-size: 11px; padding: 7px 14px; }

/* One decorative scene for the foil, wrapper and full-card reveal. */
.sf-holo {
  --scene-card: var(--stage-card, min(390px, 70vw, 52vh));
  --scene-height: calc(var(--scene-card) * 1.4);
  --scene-y: calc((100% + var(--op-top, 0px) - var(--op-bottom, 0px)) / 2 + var(--scene-offset, 0px));
  position: absolute; inset: 0; overflow: hidden; pointer-events: none; isolation: isolate;
  background: #0a0014;
}
.sf-op.is-gacha .sf-holo { --scene-offset: -18.7px; }
.sf-op.is-pack .sf-holo { --scene-height: calc(var(--scene-card) * 1217 / 794); }
.sf-op:has(.sf-op-row, .sf-op-orbit) .sf-holo-gate { opacity: .3; }
.sf-holo::before {
  content: ''; position: absolute; inset: 0; z-index: 5; opacity: .2; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 3px, #030009 3px 4px);
}
.sf-holo::after {
  content: ''; position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(ellipse at 50% 48%, transparent 32%, #0a001438 62%, #05000ddd 100%);
}
.sf-holo-atmosphere {
  position: absolute; inset: -10%;
  background:
    radial-gradient(ellipse at 31% 44%, #00ffff19, transparent 37%),
    radial-gradient(ellipse at 72% 49%, #ff006e20, transparent 39%),
    radial-gradient(ellipse at 50% 50%, #39215942, transparent 53%);
  animation: sf-stage-breathe 7s ease-in-out infinite alternate;
}
.sf-holo-blades { position: absolute; inset: 0; }
.sf-holo-blades i {
  position: absolute; top: -30%; bottom: -30%; width: clamp(110px, 17vw, 300px);
  left: calc(50% - var(--scene-card) / 2 - 48px);
  translate: -100% 0; transform: skewX(-24deg); transform-origin: center;
  background: linear-gradient(90deg, transparent 3%, #00ffff06 48%, #00ffff26 100%);
  border-right: 2px solid #00ffff8c; box-shadow: 14px 0 60px #00ffff16;
  mask-image: linear-gradient(transparent 8%, #000 32% 67%, transparent 92%);
  animation: sf-stage-blade 6s ease-in-out infinite alternate;
}
.sf-holo-blades i:nth-child(2) { margin-left: -74px; opacity: .33; width: 90px; animation-delay: -3s; }
.sf-holo-blades i:nth-child(3), .sf-holo-blades i:nth-child(4) {
  left: calc(50% + var(--scene-card) / 2 + 48px); translate: 0 0;
  background: linear-gradient(90deg, #ff006e29, #ff006e05 52%, transparent);
  border-left: 2px solid #ff006e99; border-right: 0; box-shadow: -14px 0 60px #ff006e20;
  animation-delay: -2s;
}
.sf-holo-blades i:nth-child(4) { margin-left: 74px; opacity: .33; width: 90px; animation-delay: -4s; }
.sf-holo-grid {
  position: absolute; left: -40%; right: -40%; top: calc(var(--scene-y) + var(--scene-height) / 2 + 28px); height: 60vh;
  transform: perspective(480px) rotateX(64deg); transform-origin: 50% 0;
  background-image: linear-gradient(#00ffff26 1px, transparent 1px), linear-gradient(90deg, #ff006e26 1px, transparent 1px);
  background-size: 60px 52px; opacity: .6;
  mask-image: radial-gradient(ellipse at 50% 0, #000 8%, transparent 65%);
}
.sf-holo-gate {
  position: absolute; left: 50%; top: var(--scene-y); translate: -50% -50%;
  width: calc(var(--scene-card) + 144px); height: calc(var(--scene-height) + 130px);
  overflow: visible; color: #00ffff; transform-origin: center;
  filter: drop-shadow(-4px 0 12px #00ffff38) drop-shadow(4px 0 12px #ff006e38);
}
.sf-holo-gate path { fill: none; vector-effect: non-scaling-stroke; stroke-linecap: square; }
.sf-holo-gate-outer { stroke: #be92da24; stroke-width: 1; }
.sf-holo-gate-inner { stroke: #00ffff26; stroke-width: 1; }
.sf-holo-gate-cyan { stroke: #00ffff; stroke-width: 2; }
.sf-holo-gate-pink { stroke: #ff006e; stroke-width: 2; }
.sf-holo-gate-white { stroke: #dcffff; stroke-width: 3; opacity: .8; }
.sf-holo-gate-core { opacity: .8; }
.sf-holo-motes { position: absolute; inset: 0; }
.sf-holo-motes i {
  position: absolute; left: var(--x); top: var(--y); width: 2px; height: var(--size);
  color: #00ffff; background: linear-gradient(transparent, currentColor); opacity: .4;
  box-shadow: 0 0 9px currentColor; rotate: 24deg;
  animation: sf-stage-flow var(--life) ease-out var(--delay) infinite;
}
.sf-holo-motes i:nth-child(2n) { color: #ff006e; }
.sf-holo-impact {
  position: absolute; left: 50%; top: var(--scene-y); width: 150vmax; aspect-ratio: 1; translate: -50% -50%; opacity: 0;
  background: repeating-conic-gradient(from 20deg, #00ffff80 0deg .3deg, transparent .3deg 12deg, #ff006e70 12deg 12.4deg, transparent 12.4deg 24deg);
  mask-image: radial-gradient(closest-side, transparent 16%, #000 36%, transparent 70%);
}
.sf-holo-wave {
  position: absolute; left: 50%; top: var(--scene-y); translate: -50% -50%;
  width: calc(var(--scene-card) + 100px); height: calc(var(--scene-height) + 90px); opacity: 0;
  clip-path: polygon(0 12%, 12% 0, 88% 0, 100% 12%, 100% 88%, 88% 100%, 12% 100%, 0 88%);
  background: linear-gradient(120deg, #00ffff75, transparent 35% 65%, #ff006e75);
}
/* Animate the complete SVG so its filtered glow can be cached as one layer. */
.sf-holo.is-charging .sf-holo-gate { animation: sf-stage-charge .9s ease-in-out infinite alternate; }
.sf-holo.is-charging .sf-holo-blades i { animation-duration: .7s; }
.sf-holo.is-charging .sf-holo-motes i { animation-duration: .75s; }
.sf-holo.is-revealing .sf-holo-impact { animation: sf-stage-impact 1.15s cubic-bezier(.15,.65,.3,1) both; }
.sf-holo.is-revealing .sf-holo-wave { animation: sf-stage-wave .85s cubic-bezier(.15,.65,.3,1) both; }
.sf-holo.is-revealing .sf-holo-gate { animation: sf-stage-release 1.1s cubic-bezier(.16,.7,.3,1) both; }
:is(.sf-op, .sf-mg).is-best .sf-holo-gate-white { stroke: #ffe29c; filter: drop-shadow(0 0 6px #ffd070); }

/* Panels build anticipation, then clear away for the actual card. */
.sf-mg.sf-mg { --scene-card-width: min(560px, 88vw, calc((100dvh - 150px) * 5 / 7)); overflow: hidden; background: #0a0014; }
.sf-mg > .sf-holo { --scene-card: calc(var(--scene-card-width) * .82); --scene-y: 50%; }
.sf-mg > .sf-mg-page { z-index: 2; width: var(--scene-card-width); background: transparent; box-shadow: none; overflow: visible; }
.sf-mg .sf-mg-full { width: 82%; border-color: #e6ffff; border-width: 2px; box-shadow: -10px 0 50px #00ffff45, 10px 0 50px #ff006e45, 0 20px 70px #000; }
.sf-mg .sf-mg-burst { display: none; }
.sf-mg .sf-mg-glow { inset: -10%; }
.sf-mg .sf-mg-big.in .sf-mg-glow { opacity: .35; }
.sf-mg .sf-mg-scan { opacity: .3; }
.sf-mg .sf-mg-scan::after, .sf-op .sf-op-scan::before { top: -24%; animation-name: sf-stage-scan; }
.sf-mg .sf-mg-gutter { height: 12px; background: #0a0014; }
.sf-mg.is-revealed .sf-mg-wedge { animation: sf-stage-panel-out .4s ease-out forwards; }
.sf-mg.is-revealed .sf-mg-gutter, .sf-mg.is-revealed .sf-mg-scan { opacity: 0; transition: opacity .3s; }
.sf-mg.is-revealed .sf-mg-s1, .sf-mg.is-revealed .sf-mg-s2,
.sf-mg.is-revealed .sf-mg-s3, .sf-mg.is-revealed .sf-mg-s4, .sf-mg.is-revealed .sf-mg-gogo { visibility: hidden; }
.sf-mg .sf-mg-boom { white-space: nowrap; bottom: 2%; font-size: clamp(32px, 8vw, 55px); }
.sf-mg .sf-mg-name {
  top: 0; max-width: 90%; padding: 9px 18px; transform: translateX(-50%); color: #fff;
  background: #10071e; border: 1px solid #ffffff30; border-left: 2px solid #00ffff; border-right: 2px solid #ff006e;
  box-shadow: 0 6px 24px #0006; font-size: clamp(12px, 2.6vw, 16px);
}
.sf-mg.is-best .sf-mg-name { top: -16px; }
.sf-mg > .sf-mg-hint { z-index: 3; color: #d4c6e4; font-size: 12px; }
.sf-mg .sf-mg-hint.show { animation: sf-stage-hint 1.8s ease-in-out infinite; }

/* Move a cached foil sheen instead of repainting the card's background. */
.sf-mg .sf-mg-holo, .sf-op .sf-op-gcard .sf-op-holo, .sf-op .sf-op-gcard.is-revealed .sf-op-holo { background: none; overflow: hidden; animation: none; }
.sf-mg .sf-mg-holo::after, .sf-op .sf-op-gcard.is-revealed .sf-op-holo::after {
  content: ''; position: absolute; inset: -75%;
  background: linear-gradient(115deg, transparent 25%, #00f0ff66 40%, #ff006e59 50%, #ffcf0059 60%, transparent 75%);
  animation: sf-stage-sheen 3.2s ease-in-out infinite alternate;
}
.sf-mg.is-revealed .sf-mg-scan::after { animation: none; }

@keyframes sf-stage-title { from { opacity: 0; transform: translateY(8px); } }
@keyframes sf-stage-hint { 0%, 100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes sf-stage-breathe { from { opacity: .7; transform: scale(.96); } to { opacity: 1; transform: scale(1.05); } }
@keyframes sf-stage-blade { from { opacity: .45; transform: skewX(-24deg) translateX(-8px); } to { opacity: .85; transform: skewX(-24deg) translateX(8px); } }
@keyframes sf-stage-sheen { from { transform: translate(-24%, -24%); } to { transform: translate(24%, 24%); } }
@keyframes sf-stage-scan { 0% { transform: translateY(0); opacity: 0; } 15% { opacity: 1; } 70% { transform: translateY(700%); opacity: 1; } 100% { transform: translateY(700%); opacity: 0; } }
@keyframes sf-stage-flow { 0% { opacity: 0; transform: translate(-16px, 50px) scaleY(.6); } 40% { opacity: .6; } 100% { opacity: 0; transform: translate(28px, -80px) scaleY(1); } }
@keyframes sf-stage-charge { from { transform: scale(1); } to { transform: scale(.94); } }
@keyframes sf-stage-release { 0% { transform: scale(.94); } 40% { transform: scale(1.12); } 100% { transform: scale(1); } }
@keyframes sf-stage-impact { 0% { opacity: 0; transform: scale(.6); } 18% { opacity: .85; } 100% { opacity: 0; transform: scale(1.4); } }
@keyframes sf-stage-wave { 0% { opacity: 0; transform: scale(.6); } 20% { opacity: .55; } 100% { opacity: 0; transform: scale(2.3); } }
@keyframes sf-stage-panel-out { from { opacity: 1; transform: translate(0, 0); } to { opacity: 0; transform: translate(var(--fx, 0), var(--fy, 0)); } }

/* Open-all carousel: projected depth, readable art, a deliberate front stop.
   JS only updates transforms/depth while travelling; there is no idle loop. */
.sf-op .sf-op-orbit {
  inset: calc(var(--op-top) + 12px) 0 calc(var(--op-bottom) + 12px);
  perspective: none; animation: sf-stage-title .45s ease-out both;
}
.sf-op.has-orbit .sf-holo-gate { opacity: 0; }
.sf-op .sf-op-orbit-ring {
  top: 48%; transform: none; transform-style: flat; animation: none;
}
.sf-op.has-orbit .sf-op-orbit-card {
  width: var(--orbit-card); animation: none; transform-style: flat;
  border: 1px solid #ccfaff55; background: #0a0014; border-radius: 9px;
  opacity: calc(.64 + var(--orbit-depth, 1) * .36);
  filter: brightness(calc(.7 + var(--orbit-depth, 1) * .3));
  box-shadow: -2px 0 14px #00ffff1a, 2px 0 14px #ff006e1a, 0 18px 28px #0008;
  transition: opacity .24s, box-shadow .3s; will-change: transform;
}
.sf-op.has-orbit .sf-op-orbit-card::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(120deg, #dcffff12, transparent 28% 70%, #ff006e0d);
}
.sf-op.has-orbit .sf-op-orbit-card.is-current {
  border-color: #baffff; box-shadow: -4px 0 26px #00ffff55, 4px 0 26px #ff006e44, 0 20px 40px #0009;
}
.sf-op.has-orbit .sf-op-orbit-card.is-best { border-color: #ffe29c; }
.sf-op.has-orbit .sf-op-orbit-card.is-out { opacity: 0; }
.sf-op.has-orbit .sf-op-oface { box-shadow: none; border-radius: 8px; }
.sf-op .sf-op-orbit-track {
  position: absolute; left: 50%; top: calc(48% + var(--orbit-floor)); translate: -50% -50%;
  width: var(--orbit-width); height: var(--orbit-height); border-radius: 50%; border: 1px solid #00ffff40;
  background: radial-gradient(ellipse, #00ffff06 10%, #0a001480 65%, #00ffff0c);
  box-shadow: 0 0 34px #00ffff08, inset 0 0 26px #ff006e08;
}
.sf-op .sf-op-orbit-track::before {
  content: ''; position: absolute; inset: -12px -22px; border-radius: inherit; border: 1px solid #ff006e30;
}
.sf-op .sf-op-orbit-track::after {
  content: ''; position: absolute; inset: 10px 18px; border-radius: inherit; border: 1px solid #be92da14;
}
.sf-op .sf-op-orbit-light {
  position: absolute; left: 50%; top: calc(48% + var(--orbit-floor) + var(--orbit-height) / 2 - 14px);
  translate: -50% -50%; width: calc(var(--orbit-card) * 1.25); height: 38px;
  background: radial-gradient(ellipse, #00ffff3b, #00ffff0c 45%, transparent 70%);
}
.sf-op .sf-op-orbit-progress {
  position: absolute; bottom: 0; left: 50%; translate: -50% 0; display: flex; flex-wrap: wrap;
  gap: 7px; justify-content: center; max-width: 80%;
}
.sf-op .sf-op-orbit-progress i { width: 17px; height: 3px; background: #ab8eb338; transition: background .25s; }
.sf-op .sf-op-orbit-progress i.is-open { background: #00ffff; box-shadow: 0 0 8px #00ffff38; }
.sf-op .sf-op-orbit-progress i.is-current { background: #ff83b9; box-shadow: 0 0 10px #ff006e66; }

@media (max-width: 640px) {
  .sf-op.sf-op { --stage-card: min(65vw, calc((100dvh - var(--op-top) - var(--op-bottom) - 42px) * 5 / 7)); }
  .sf-op .sf-op-head { padding: calc(20px + env(safe-area-inset-top, 0px)) 12px 15px; }
  .sf-op .sf-op-title { padding-inline: 48px; font-size: 21px; line-height: 1.45; }
  .sf-op .sf-op-kicker { font-size: 10px; margin-bottom: 5px; }
  .sf-op .sf-op-x, .sf-op .sf-op-mute { width: 38px; height: 40px; }
  .sf-op .sf-op-foot { gap: 10px; padding: 12px 14px calc(16px + env(safe-area-inset-bottom, 0px)); }
  .sf-op .sf-op-actions { gap: 8px; }
  .sf-op .sf-op-btn { font-size: 12px; padding: 10px 18px; }
  .sf-op .sf-op-btn.is-hot { min-width: 160px; }
  .sf-op .sf-op-note { font-size: 10px; }
  .sf-op .sf-op-foilhint { padding-bottom: 16px; }
  .sf-holo-gate { width: calc(var(--scene-card) + 84px); height: calc(var(--scene-height) + 96px); }
  .sf-holo-blades { opacity: .7; }
  .sf-holo-blades i { left: calc(50% - var(--scene-card) / 2 - 18px); }
  .sf-holo-blades i:nth-child(3), .sf-holo-blades i:nth-child(4) { left: calc(50% + var(--scene-card) / 2 + 18px); }
  .sf-holo-motes i:nth-child(n+13) { display: none; }
  .sf-mg.sf-mg { --scene-card-width: min(90vw, calc((100dvh - 170px) * 5 / 7)); }
}
@media (max-height: 520px) {
  .sf-op .sf-op-head { padding-top: 8px; padding-bottom: 10px; }
  .sf-op .sf-op-title { font-size: 18px; }
  .sf-op .sf-op-foot { padding-top: 8px; padding-bottom: 8px; gap: 5px; }
  .sf-op .sf-op-note { font-size: 9px; }
  .sf-op .sf-op-btn { min-height: 38px; padding-block: 7px; }
  .sf-op .sf-op-foilhint { padding-bottom: 10px; }
  .sf-op .sf-op-hand { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .sf-holo *, .sf-holo *::before, .sf-holo *::after { animation: none !important; }
  .sf-holo-impact, .sf-holo-wave { display: none; }
  .sf-op .sf-op-title.is-new { animation: none; }
  .sf-op .sf-op-gcard .sf-op-holo::after, .sf-op .sf-op-scan::before, .sf-mg .sf-mg-holo::after, .sf-mg .sf-mg-scan::after { animation: none; }
}
.effects-off .sf-op .sf-op-gcard .sf-op-holo::after, .effects-off .sf-op .sf-op-scan::before,
.effects-off .sf-mg .sf-mg-holo::after, .effects-off .sf-mg .sf-mg-scan::after { animation: none; }
.effects-off .sf-holo *, .effects-off .sf-holo *::before, .effects-off .sf-holo *::after { animation: none !important; }
.effects-off .sf-holo-impact, .effects-off .sf-holo-wave { display: none; }