/* ═══════════════════════════════════════════════════════════════
   ENTRY FX — boot sequence + card deal choreography
   Shared skyline backdrop, CRT power-on, auth juice, card table.
   Driven by js/00-entry-fx.js. Animations are transform/opacity
   only; prefers-reduced-motion collapses every beat to a fade.
   ═══════════════════════════════════════════════════════════════ */

/* ── Shared backdrop (auth is z1200, title z1100) ── */
#entry-bg{position:fixed;inset:0;width:100%;height:100%;z-index:1050;display:none;image-rendering:pixelated;pointer-events:none}
#entry-scanlines{position:fixed;inset:0;z-index:1290;display:none;pointer-events:none;
  background:repeating-linear-gradient(0deg,transparent,transparent 3px,rgba(0,0,0,.16) 3px,rgba(0,0,0,.16) 4px)}
body.entry-fx #entry-bg,body.entry-fx #entry-scanlines{display:block}
/* Let the skyline show through while the entry screens are up */
body.entry-fx #auth-overlay{background:linear-gradient(160deg,rgba(4,8,20,.78),rgba(8,26,16,.72))}
body.entry-fx #title-overlay{background:linear-gradient(160deg,rgba(4,8,20,.78) 0%,rgba(10,18,40,.66) 55%,rgba(8,26,16,.74) 100%)}

/* ── CRT power-on: white line snaps open, flash decays ── */
.crt-on{position:relative;transform-origin:50% 50%;animation:crtOn .32s steps(6,end) both}
@keyframes crtOn{
  0%{transform:scaleY(.006) scaleX(.55)}
  45%{transform:scaleY(.006) scaleX(1)}
  70%{transform:scaleY(1.06)}
  100%{transform:scaleY(1)}
}
.crt-on::after{content:'';position:absolute;inset:0;background:#fff;pointer-events:none;z-index:99;animation:crtFlash .55s steps(5,end) both}
@keyframes crtFlash{0%{opacity:.95}55%{opacity:.18}100%{opacity:0}}

/* ── Field cascade: .casc children stagger in via --i index.
     Without .cascade-in on the container, .casc is inert (instant). ── */
.cascade-in .casc{opacity:0;animation:cascIn .26s steps(4,end) forwards;animation-delay:calc(.36s + var(--i,0)*40ms)}
@keyframes cascIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}

/* ── Auth micro-juice: tab flip, error shake, register stamp ── */
#auth-inner{perspective:900px}
#auth-form{position:relative}
.auth-tabflip{animation:authTabFlip .24s cubic-bezier(.4,0,.6,1) both;backface-visibility:hidden}
@keyframes authTabFlip{0%{transform:rotateY(0)}50%{transform:rotateY(90deg)}100%{transform:rotateY(0)}}
.auth-shake{animation:authShake .24s steps(6,end)}
@keyframes authShake{0%,100%{transform:translateX(0)}17%{transform:translateX(-8px)}50%{transform:translateX(8px)}83%{transform:translateX(-5px)}}
.stamp-in{position:absolute;top:38%;left:50%;z-index:50;pointer-events:none;white-space:nowrap;
  font-family:var(--px);font-size:13px;color:var(--accent);text-shadow:2px 2px 0 #000;
  border:4px solid var(--accent);padding:12px 16px;background:rgba(4,12,8,.92);box-shadow:6px 6px 0 #000;
  opacity:0;transform:translate(-50%,-50%) rotate(-8deg) scale(.2);
  animation:stampIn .38s cubic-bezier(.2,1.8,.4,1) forwards}
@keyframes stampIn{to{opacity:1;transform:translate(-50%,-50%) rotate(-8deg) scale(1)}}

/* ═══ Card table (title screen) ═══ */
#title-inner{width:min(1060px,96vw)}
.title-hero{margin-bottom:10px}
.title-hero img{width:56px!important;height:56px!important}
.title-name{font-size:24px}
.entry-hidden{display:none!important}

#card-table{display:flex;flex-wrap:wrap;gap:18px;justify-content:center;align-items:stretch;margin-top:16px;perspective:1100px}
.ecard{position:relative;width:200px;height:280px;padding:0;background:transparent;border:none;cursor:pointer;font-family:var(--px);-webkit-tap-highlight-color:transparent}
.ecard-help{width:150px}
.ec-inner{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d;transition:transform .34s cubic-bezier(.3,1.3,.4,1)}
.ec-front,.ec-back{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:16px;box-sizing:border-box;
  background:linear-gradient(165deg,#131a30,#0d1322);border:4px solid var(--border);box-shadow:5px 5px 0 #000}
.ec-front::before{content:'';position:absolute;inset:6px;border:2px solid rgba(255,255,255,.06);
  background:repeating-linear-gradient(45deg,transparent,transparent 7px,rgba(255,255,255,.025) 7px,rgba(255,255,255,.025) 9px);pointer-events:none}
.ec-back{transform:rotateY(180deg);overflow-y:auto;justify-content:center;gap:12px}
.ecard.flipped .ec-inner{transform:rotateY(180deg)}
.ecard .mode-ic{font-size:38px}
.ecard img.mode-ic{width:52px;height:52px;image-rendering:pixelated}
.ecard .mode-name{font-size:8px;color:#fff;line-height:1.8;text-align:center}
.ecard .mode-desc{font-size:6px;color:var(--text);line-height:1.9;text-align:center}
.ec-go{font-size:8px;color:#000;background:var(--accent);border:3px solid #fff;padding:8px 12px;box-shadow:3px 3px 0 #000;margin-top:4px}
.ec-q{font-size:44px;color:var(--muted);text-shadow:3px 3px 0 #000}
.ec-htp{gap:8px;padding:12px;justify-content:flex-start}
.ec-htp .htp-row{text-align:left;margin-bottom:0}

/* semantic colors: SP green, MP blue, tournament gold, help neutral.
   --sem also drives the flip glow-flash + spark burst (js sets spark fill). */
#mode-single .ec-front,#mode-single .ec-back{border-color:rgba(0,255,136,.5)}
#mode-multi .ec-front,#mode-multi .ec-back{border-color:rgba(77,208,225,.5)}
#mode-multi .ec-go{background:#4dd0e1}
#mode-tournament .ec-front,#mode-tournament .ec-back{border-color:rgba(255,215,0,.45)}
#mode-tournament .ec-go{background:#ffd700}
.ecard.sel .ec-front{border-color:var(--accent)}
#mode-single{--sem:rgba(0,255,136,.6)}
#mode-multi{--sem:rgba(77,208,225,.6)}
#mode-tournament{--sem:rgba(255,215,0,.55)}
.ecard-help{--sem:rgba(200,200,240,.45)}

/* ═══ Juice layer: idle glow · gloss sweep · flip pop · spark burst · CTA pulse ═══ */

/* At-rest breathing: each card front pulses its own semantic glow so the
   table looks alive the instant it's dealt — no hover/flip required.
   Staggered per card via --gd for a gentle wave down the row. */
#mode-single .ec-front   {--gd:0s}
#mode-multi .ec-front    {--gd:.5s}
#mode-tournament .ec-front{--gd:1s}
.ecard-help .ec-front    {--gd:1.5s}
.ecard .ec-front{animation:ecIdleGlow 3s ease-in-out var(--gd,0s) infinite}
@keyframes ecIdleGlow{
  0%,100%{box-shadow:5px 5px 0 #000,0 0 2px var(--sem,transparent)}
  50%{box-shadow:5px 5px 0 #000,0 0 18px var(--sem,transparent)}
}
/* Pause the breathing while a card is actively lifted or committed */
.ecard.tilt .ec-front,.ecard.flipped .ec-front{animation-play-state:paused}

/* Gloss sweep rakes across the front face while the card is lifted */
.ecard .ec-front{overflow:hidden}
.ecard .ec-front::after{content:'';position:absolute;top:0;left:-70%;width:48%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.16),transparent);
  transform:skewX(-18deg);opacity:0;pointer-events:none;z-index:2}
.ecard.tilt .ec-front::after{opacity:1;animation:ecShine .6s ease-out}
@keyframes ecShine{from{left:-70%}to{left:140%}}

/* Commit flip lands with a semantic glow pulse; card sits above the table */
.ecard.flipped{z-index:5;animation:ecFlipFlash .5s ease-out}
@keyframes ecFlipFlash{
  0%{filter:drop-shadow(0 0 0 transparent)}
  28%{filter:drop-shadow(0 0 22px var(--sem,rgba(255,255,255,.5)))}
  100%{filter:drop-shadow(0 0 0 transparent)}
}

/* Once flipped, the commit CTA breathes so the next click reads as obvious */
.ecard.flipped .ec-go,.ecard.flipped .title-start{animation:ecCtaPulse 1.5s ease-in-out .35s infinite}
@keyframes ecCtaPulse{
  0%,100%{transform:translateY(0);box-shadow:3px 3px 0 #000}
  50%{transform:translateY(-2px);box-shadow:3px 5px 0 #000,0 0 15px rgba(255,255,255,.4)}
}

/* Spark burst spawned by cardBurst() — screen-space pixel confetti */
.ec-spark{position:fixed;width:6px;height:6px;z-index:1300;pointer-events:none;border-radius:1px;
  box-shadow:0 0 5px rgba(255,255,255,.45);transform:translate(-50%,-50%);
  animation:ecSpark .6s cubic-bezier(.2,.7,.3,1) forwards}
@keyframes ecSpark{
  from{opacity:1;transform:translate(-50%,-50%) scale(1.1)}
  to{opacity:0;transform:translate(calc(-50% + var(--dx,0)),calc(-50% + var(--dy,0))) scale(.35)}
}

/* hover lift + tilt + glow (JS drives --tx/--ty; disabled on touch/reduced motion) */
.ecard.tilt .ec-inner{transform:translateY(-10px) rotateX(var(--tx,0deg)) rotateY(var(--ty,0deg))}
.ecard.tilt{z-index:3}
#mode-single.tilt{filter:drop-shadow(0 0 14px rgba(0,255,136,.35))}
#mode-multi.tilt{filter:drop-shadow(0 0 14px rgba(77,208,225,.35))}
#mode-tournament.tilt{filter:drop-shadow(0 0 14px rgba(255,215,0,.35))}
.ecard-help.tilt{filter:drop-shadow(0 0 14px rgba(200,200,240,.25))}

/* resume: slim fifth card (06-systems rewrites its text + shows it) */
.ecard-slim{flex-basis:100%;max-width:640px;margin:0 auto;padding:13px;background:linear-gradient(180deg,#1565C0,#0D47A1);
  border:4px solid #1976D2;color:#fff;font-size:8px;font-family:var(--px);cursor:pointer;box-shadow:4px 4px 0 #000;text-shadow:1px 1px 0 #000}
.ecard-slim:active{transform:translate(3px,3px);box-shadow:0 0 0 #000}

/* the deal: cards fly in from a deck off-right, land with a squash */
.deal-in{animation:dealIn .42s cubic-bezier(.2,1.25,.4,1) both;animation-delay:var(--d,0ms)}
@keyframes dealIn{
  0%{transform:translate(64vw,-16vh) rotate(22deg) scale(.72);opacity:0}
  55%{transform:translate(0,0) rotate(0deg) scale(1.05);opacity:1}
  72%{transform:scale(.97,.93)}
  100%{transform:none;opacity:1}
}

/* start button: hosted on the SP card back once the flip-gate lands */
.ec-back .title-start{margin-top:6px;font-size:8px;padding:11px;width:auto}

/* corner HUD */
#entry-hud{position:fixed;right:14px;bottom:12px;z-index:6;display:flex;gap:8px;align-items:center;font-family:var(--px)}
#entry-hud .ehud-btn{padding:8px 11px;background:rgba(8,14,28,.88);border:2px solid var(--border);color:var(--muted);
  font-size:6px;font-family:var(--px);cursor:pointer;box-shadow:3px 3px 0 #000}
#entry-hud .ehud-btn:hover{color:#fff;border-color:var(--accent)}
#title-user-bar{display:flex;align-items:center;gap:8px;font-size:6px;color:var(--muted)}
#title-user-label{padding:0 4px}

/* VN body text on card faces */
body.lang-vn .ecard .mode-name{font-size:10px!important}
body.lang-vn .ecard .mode-desc{font-size:11px!important;line-height:1.7!important}

/* ── Auth→deal handoff: panel flips away before title takes over ── */
#auth-overlay.auth-away #auth-inner{animation:authAway .25s cubic-bezier(.6,0,.9,.4) both}
@keyframes authAway{to{transform:rotateY(88deg) scale(.92);opacity:0}}

/* ── Mobile: vertical card stack, HUD becomes a bottom bar ── */
@media (max-width:720px){
  #title-inner{padding-bottom:56px}
  #card-table{flex-direction:column;align-items:center;gap:14px;perspective:900px}
  .ecard,.ecard-help{width:86vw;height:150px}
  .ec-front,.ec-back{flex-direction:row;gap:14px;padding:12px 16px;justify-content:flex-start;text-align:left}
  .ecard .mode-name,.ecard .mode-desc{text-align:left}
  .ec-q{font-size:30px}
  .ec-htp{flex-direction:column;gap:6px;padding:10px;justify-content:flex-start;text-align:left}
  .ecard-slim{max-width:86vw}
  .ec-back .title-start{font-size:7px;padding:9px;margin:0 0 0 auto}
  #entry-hud{left:0;right:0;bottom:0;justify-content:center;gap:6px;padding:7px;
    background:rgba(4,8,16,.94);border-top:2px solid var(--border)}
}

/* ── Reduced motion: every beat becomes a short fade ── */
@keyframes entryFade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .crt-on{animation:entryFade .18s ease both}
  .crt-on::after{animation:none;opacity:0}
  .cascade-in .casc{animation:entryFade .18s ease both;animation-delay:0s}
  .auth-tabflip,.auth-shake{animation:none}
  .stamp-in{animation:entryFade .18s ease forwards}
  .deal-in{animation:entryFade .18s ease both;animation-delay:0ms}
  #auth-overlay.auth-away #auth-inner{animation:none}
  /* NOTE: the card-table juice (flip, tilt, shine, spark, breathing glow,
     CTA pulse) is intentionally NOT disabled here. It's interactive UI
     feedback — consistent with the rest of the game, which keeps its coin/
     flash/celebrate juice regardless of this setting. Only the big screen
     entrance beats above (CRT, cascade, deal) calm down under reduced motion. */
}