/* ===== Cinematic intro (js/cinematic.mjs) — neon, readable on any screen shape ===== */
.cine-host { padding: 0 !important; }
.cine-host::after, .cine-host::before { display: none !important; }
.cine { position: absolute; inset: 0; overflow: hidden; background: #02040a; container-type: size; perspective: 1200px; font-family: Orbitron, Inter, sans-serif; color: #fff; }
.cn-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; z-index: 1; }
.cn-layer { position: absolute; inset: 0; z-index: 2; }
.cn-skip { position: absolute; top: max(12px, env(safe-area-inset-top)); right: 12px; z-index: 40; min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,.35); background: rgba(2,4,10,.6); color: #fff; font: 700 14px Inter, sans-serif; letter-spacing: .06em; cursor: pointer; backdrop-filter: blur(6px); }
.cn-skip:hover, .cn-skip:focus-visible { border-color: #3fe6ff; outline: none; }
.cn-shot { position: absolute; visibility: hidden; z-index: 6; }
.cn-shot.in { visibility: visible; }
.cn-shot.out { animation: cnOut .16s forwards !important; }
@keyframes cnOut { to { opacity: 0; visibility: hidden; } }
.cn-flash { inset: 0; background: #fff; z-index: 30; pointer-events: none; }
.cn-flash.in { animation: cnFlash .7s forwards; }
@keyframes cnFlash { from { opacity: .95; } to { opacity: 0; } }
.cn-skipped .cn-flash { display: none; }
/* every text block sits on a soft dark backing so the moving numbers never cross the letters */
.cn-txt::before { content: ""; position: absolute; inset: -18% -8%; z-index: -1; border-radius: 50%; background: radial-gradient(closest-side, rgba(2,4,10,.85), rgba(2,4,10,0)); }
.cn-ttl { font-weight: 900; font-size: min(9cqw, 11cqmin); letter-spacing: .05em; line-height: 1; white-space: nowrap; text-shadow: -1px 0 #ff2e88, 1px 0 #3fe6ff, 0 0 2.4cqmin rgba(63,230,255,.75); }
.cn-sub { margin-top: 1.4cqmin; font-weight: 800; font-size: min(2.6cqw, 3.4cqmin); letter-spacing: .26em; color: #ffc45b; text-shadow: 0 0 1.4cqmin rgba(255,196,91,.6); white-space: nowrap; }
.cn-small { font-weight: 800; font-size: min(2.4cqw, 3.4cqmin); letter-spacing: .3em; color: #9ef5ff; text-shadow: 0 0 1.4cqmin rgba(63,230,255,.8); white-space: nowrap; }
.cn-big { font-weight: 900; font-size: min(7.6cqw, 9cqmin); letter-spacing: .06em; color: #ffe08a; text-shadow: 0 0 2cqmin #ffc45b, 0 0 5cqmin #ff7a00; white-space: nowrap; }
.cn-mid { font-weight: 800; font-size: min(3.8cqw, 5cqmin); letter-spacing: .12em; line-height: 1.35; color: #fff; text-shadow: 0 0 1.6cqmin rgba(63,230,255,.9); }
.cn-gold { color: #ffc45b; text-shadow: 0 0 1.6cqmin rgba(255,196,91,.9); }
.cn-presents { left: 50%; top: 50%; translate: -50% -50%; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 3cqmin; }
.cn-presents .bvs-logo-glow { width: min(56cqw, 70cqmin); animation: none; }
.cn-title { left: 4%; right: 4%; top: max(4%, 62px); text-align: center; } /* clear of the Skip button */
.cn-card { left: 50%; top: 26%; height: 64cqh; aspect-ratio: 1365 / 2048; translate: -50% 0; z-index: 7; }
.cn-tcard { position: relative; width: 100%; height: 100%; container-type: inline-size; }
.cn-tcard img { width: 100%; height: 100%; display: block; border-radius: 3.5%; box-shadow: 0 0 3cqw rgba(63,230,255,.55), 0 2cqw 5cqw rgba(0,0,0,.7); }
.cn-rcard { width: 100%; height: 100%; background: var(--art) center / cover no-repeat; border-radius: 4%; border: .35cqmin solid var(--c); filter: drop-shadow(0 0 1.2cqmin var(--c)); }
.cn-ring { left: 50%; top: 57%; width: 0; height: 0; transform-style: preserve-3d; --rr: min(36cqw, 64cqh); z-index: 6; }
.cn-slot { position: absolute; left: 0; top: 0; width: 11.5cqmin; height: 19.1cqmin; transform-style: preserve-3d; }
.cn-caption { left: 0; right: 0; top: max(4%, 62px); text-align: center; }
.cn-card { transition: scale .55s cubic-bezier(.2,1,.3,1); }
.cn-ringmode .cn-card { scale: .6; }
.cn-vs { left: 50%; top: 52%; translate: -50% -50%; width: min(92cqw, calc(62cqh * 1.6)); aspect-ratio: 1.6 / 1; }
.cn-vspair { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; gap: 3%; }
.cn-vspair .cn-tcard { height: 100%; width: auto; aspect-ratio: 1365 / 2048; }
.cn-vcard { height: 100%; aspect-ratio: .6; }
.cn-vsx { font-weight: 900; font-style: italic; font-size: min(10cqw, 11cqmin); -webkit-text-stroke: .3cqmin #ffc45b; text-shadow: 0 0 3cqmin #ffc45b, 0 0 6cqmin #ff7a00; }
.cn-battle { left: 50%; top: 52%; translate: -50% -50%; width: min(94cqw, calc(68cqh * 1.5)); }
.cn-battle img { width: 100%; height: auto; display: block; border-radius: 1.2cqmin; }
.cn-lbl { position: absolute; left: 2%; top: -1cqmin; translate: 0 -100%; font-weight: 800; font-size: min(2cqw, 2.8cqmin); letter-spacing: .18em; padding: .6cqmin 1.4cqmin; border: 1px solid #ffc45b; color: #ffc45b; background: rgba(2,4,10,.85); border-radius: .6cqmin; white-space: nowrap; }
.cn-enter { left: 3%; right: 3%; top: 34%; text-align: center; }
.cn-next { left: 3%; right: 3%; top: 56%; text-align: center; }
.cn-final { left: 50%; top: 4%; height: 78cqh; aspect-ratio: 1365 / 2048; translate: -50% 0; z-index: 7; }
.cn-final-q { left: 3%; width: 27%; top: 38%; text-align: left; }
.cn-lines > div { white-space: nowrap; }
.cn-final-q .cn-mid { font-size: min(2.6cqw, 4.4cqmin); }
.cn-start { right: 4%; width: 27%; top: 44%; display: flex; justify-content: flex-end; }
.cn-press { font: 800 min(2.2cqw, 3.6cqmin) Orbitron, sans-serif; letter-spacing: .16em; color: #02040a; background: linear-gradient(90deg, #3fe6ff, #9ef5ff); border: 0; border-radius: 999px; padding: 1.6cqmin 4cqmin; min-height: 44px; cursor: pointer; box-shadow: 0 0 2.6cqmin rgba(63,230,255,.6); white-space: nowrap; }
.cn-start.in .cn-press { animation: cnPulse 1.5s .6s infinite; }
@keyframes cnPulse { 50% { box-shadow: 0 0 5cqmin rgba(63,230,255,.95); scale: 1.05; } }
.cn-press:focus-visible { outline: 3px solid #ffc45b; outline-offset: 3px; }
.cn-site { left: 50%; bottom: 1.8%; translate: -50% 0; z-index: 8; }
.cn-site a { display: flex; align-items: center; gap: 1.6cqmin; text-decoration: none; color: #bfe9ff; font: 800 min(1.6cqw, 2.6cqmin) Inter, sans-serif; letter-spacing: .06em; padding: .6cqmin 1.4cqmin; border-radius: 1cqmin; background: rgba(2,4,10,.7); white-space: nowrap; }
.cn-site .bvs-logo-glow { width: min(13cqw, 20cqmin); }
/* tall screens (phones) */
@container (max-aspect-ratio: 1/1) {
  .cn-title { top: 9%; }
  .cn-card { top: 23%; height: min(50cqh, calc(80cqw * 1.5)); }
  .cn-ring { top: 49%; --rr: 32cqw; } /* ring + card width stays inside the screen */
  .cn-slot { width: 17cqw; height: 28.3cqw; }
  .cn-vs { width: auto; height: 82cqh; aspect-ratio: auto; top: 54%; }
  .cn-vspair { flex-direction: column; gap: 1.5cqh; }
  .cn-vspair .cn-tcard, .cn-vcard { height: 37cqh; }
  .cn-vsx { font-size: 9cqw; line-height: 1; }
  .cn-battle { width: 94cqw; }
  .cn-final { top: 17%; height: min(54cqh, calc(80cqw * 1.5)); }
  .cn-final-q { left: 4%; right: 4%; width: auto; top: 5%; text-align: center; }
  .cn-final-q .cn-mid { font-size: min(4.6cqw, 4cqmin); line-height: 1.25; }
  .cn-ringmode .cn-card { scale: .55; }
  .cn-start { left: 4%; right: 4%; width: auto; top: auto; bottom: 12%; justify-content: center; }
  .cn-press { font-size: min(4.6cqw, 3.6cqmin); padding: 2.4cqmin 7cqmin; }
  .cn-site a { font-size: min(3.2cqw, 2.6cqmin); }
  .cn-site .bvs-logo-glow { width: 30cqw; }
}
/* entry animations */
.cn-slam.in { animation: cnSlam .8s cubic-bezier(.2,1.3,.4,1) both; }
@keyframes cnSlam { 0% { opacity: 0; scale: 3; filter: blur(10px); } 60% { opacity: 1; filter: none; } 100% { opacity: 1; scale: 1; } }
.cn-rise.in { animation: cnRise .7s cubic-bezier(.2,1.2,.3,1) both; }
@keyframes cnRise { 0% { opacity: 0; transform: translateY(40%) rotateX(35deg); } 100% { opacity: 1; transform: none; } }
.cn-fade.in { animation: cnFade .5s both; }
@keyframes cnFade { from { opacity: 0; } to { opacity: 1; } }
.cn-cut.in { animation: cnPunch .35s ease-out both; }
@keyframes cnPunch { 0% { scale: 1.12; filter: brightness(2); } 100% { scale: 1; filter: none; } }
.cn-up.in { animation: cnUp .5s both; }
@keyframes cnUp { 0% { opacity: 0; transform: translateY(30%); } 100% { opacity: 1; transform: none; } }
.cn-type.in { animation: cnType .9s steps(22) both; }
@keyframes cnType { from { clip-path: inset(-20% 100% -20% 0); } to { clip-path: inset(-20% -2% -20% 0); } }
.cn-skipped .cn-shot.in { animation-duration: .01s !important; animation-delay: 0s !important; }
body.reduce-motion .cine *, body.reduce-motion .cine *::before { animation-duration: .01s !important; animation-iteration-count: 1 !important; }