/* ═══════════════════════════════════════════════════════════════
   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}
/* 2x the shipped 56/24. THIS is the live path — body.entry-fx is on for every boot,
   so the !important here wins over main.css's .title-hero img / .title-name and the
   inline width on the <img>. Changing main.css alone is a silent no-op; both are
   updated together so the fallback (entry-fx off) stays in proportion. */
.title-hero img{width:112px!important;height:112px!important}
/* clamp, not a flat 48px: Press Start 2P advances ~1em per glyph, so "FINNACLE" at
   48px is ~384px wide and overflows a 360px phone. The ceiling is the full 2x on any
   viewport wide enough to hold it (~534px+); below that it scales instead of clipping. */
.title-name{font-size:clamp(24px,9vw,48px)}
.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}

/* ═══ Card art — the montage still of the real Trading Floor ═══
   Full-bleed across the top of the card face. The face is a padded, centred
   flex column, so the art is taken OUT of the flow (absolute) and the face is
   given a matching padding-top instead — that way the type below stays
   optically centred in whatever height is left.
   ⚠ Both must come from --art-h in PIXELS. A percentage height resolves against
   the containing block's height while a percentage padding resolves against its
   WIDTH — set that way the two disagree and the art lands on top of the title. */
#mode-tf2{--art-h:102px}
.ec-art{position:absolute;top:0;left:0;width:100%;height:var(--art-h);overflow:hidden;pointer-events:none;
  border-bottom:2px solid rgba(164,77,224,.5)}
/* The floor is lit by braziers in a dark hall; at 200px wide it needs a lift
   to stay readable as a PLACE rather than a dark rectangle. */
.ec-art img{width:100%;height:100%;object-fit:cover;object-position:50% 44%;display:block;
  image-rendering:pixelated;filter:saturate(1.14) contrast(1.06) brightness(1.16)}
/* Scrim: darkens the top edge under the card frame and melts the bottom edge
   into the card body, so the type never lands on busy pixels. */
.ec-art::after{content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(6,9,20,.3) 0%,rgba(6,9,20,0) 26%,rgba(13,19,34,.46) 74%,#0d1322 100%)}
.ec-art-tag{position:absolute;left:6px;top:6px;z-index:2;font-family:var(--px);font-size:5px;
  color:#ffd84d;background:rgba(4,8,18,.82);border:1px solid rgba(255,216,77,.45);padding:3px 5px;
  letter-spacing:.5px;text-shadow:1px 1px 0 #000}
.mode-sub{font-size:6px;color:#c9a0ff;letter-spacing:1px;text-align:center;margin-top:-6px}
/* Cards carrying art hang their content off the bottom of the art, and must not
   scroll — .ec-back's default overflow-y:auto would let the montage slide away. */
#mode-tf2 .ec-front,#mode-tf2 .ec-back{padding-top:calc(var(--art-h) + 10px);gap:6px;overflow:hidden}
#mode-tf2 .ec-front,#mode-tf2 .ec-back{border-color:rgba(164,77,224,.55)}
#mode-tf2{--sem:rgba(164,77,224,.6)}
#mode-tf2 .ec-go{background:#a44de0;color:#fff;text-shadow:1px 1px 0 #000}
#mode-tf2.tilt{filter:drop-shadow(0 0 14px rgba(164,77,224,.4))}
/* The inset hatch overlay is drawn over the whole front face and would sit on
   top of the montage; keep it to the type half. */
#mode-tf2 .ec-front::before{top:var(--art-h)}
.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}
}

/* ═══ Coverflow picker — 3 cards, TF2 centered (js/00 setupCoverflow) ═══
   The card transform lives on .ecard (position in the flow); the flip lives on
   .ec-inner (rotateY 180) — separate elements, so they never fight. --off is the
   signed distance from centre the controller writes each move. */
#card-table{gap:0;perspective:1200px;align-items:center;min-height:300px}
#card-table .ecard{
  transition:transform .42s cubic-bezier(.3,1,.4,1),opacity .4s ease,filter .4s ease;
  transform:translateX(calc(var(--off,0) * -40px)) rotateY(calc(var(--off,0) * -22deg)) scale(.72);
  opacity:.45;z-index:1;
}
#card-table .ecard.is-center{transform:translateX(0) rotateY(0) scale(1);opacity:1;z-index:6}
/* Idle breathing glow only on the centred card — four fighting glows read as
   noise in a carousel. Overrides the all-cards rule above (L96). */
#card-table .ecard .ec-front{animation:none}
#card-table .ecard.is-center .ec-front{animation:ecIdleGlow 3s ease-in-out infinite}

/* ═══ How-To-Play overlay (evicted help card) ═══ */
#htp-overlay{position:fixed;inset:0;z-index:1150;display:none;align-items:center;justify-content:center;
  background:linear-gradient(160deg,rgba(4,8,20,.9),rgba(8,26,16,.86));padding:20px}
#htp-overlay.on{display:flex}
#htp-overlay .htp-panel{width:min(560px,94vw);max-height:88vh;overflow-y:auto;
  background:linear-gradient(165deg,#131a30,#0d1322);border:4px solid var(--border);box-shadow:6px 6px 0 #000;padding:18px}
#htp-overlay .htp-head{display:flex;align-items:center;justify-content:space-between;
  font-family:var(--px);font-size:11px;color:#fff;margin-bottom:14px;text-shadow:2px 2px 0 #000}
#htp-overlay .htp-close{font-family:var(--px);font-size:10px;color:var(--muted);background:transparent;
  border:2px solid var(--border);padding:5px 9px;cursor:pointer}
#htp-overlay .htp-close:hover{color:#fff;border-color:var(--accent)}
#htp-overlay .ec-htp{gap:10px;display:flex;flex-direction:column}
#htp-overlay .htp-row{display:flex;gap:10px;text-align:left;font-size:12px;color:var(--text);line-height:1.6}
#htp-overlay .htp-ic{font-size:20px;flex:0 0 auto}

/* 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}

/* "Save my record" is the one HUD button with something to lose — it gets the
   accent treatment and a slow pulse so a guest notices it without a modal. */
#entry-hud .ehud-save{color:#ffd84d;border-color:rgba(255,216,77,.55);
  background:linear-gradient(180deg,rgba(60,44,4,.92),rgba(24,17,2,.92));
  animation:ehudSaveNudge 3.2s ease-in-out infinite}
#entry-hud .ehud-save:hover{color:#fff;border-color:#ffd84d}
@keyframes ehudSaveNudge{
  0%,100%{box-shadow:3px 3px 0 #000}
  50%{box-shadow:3px 3px 0 #000,0 0 14px rgba(255,216,77,.45)}
}

/* ═══ OUR SOCIALS popover (opens upward out of the bottom HUD) ═══ */
#ehud-social{position:relative}
#ehud-social-menu{position:absolute;bottom:calc(100% + 8px);right:0;z-index:12;width:300px;
  background:linear-gradient(165deg,#131a30,#0b1020);border:3px solid var(--border);box-shadow:5px 5px 0 #000;
  padding:8px;display:flex;flex-direction:column;gap:4px;
  opacity:0;visibility:hidden;transform:translateY(6px) scale(.97);transform-origin:100% 100%;
  transition:opacity .16s ease,transform .16s cubic-bezier(.3,1.3,.4,1),visibility 0s linear .16s}
#ehud-social.open #ehud-social-menu{opacity:1;visibility:visible;transform:none;transition-delay:0s}
#ehud-social.open .ehud-btn{color:#fff;border-color:var(--accent2)}
.esoc-head{font-family:var(--px);font-size:5px;color:var(--muted);letter-spacing:1px;padding:3px 4px 6px}
.esoc-row{display:flex;align-items:center;gap:9px;padding:7px 6px;text-decoration:none;
  border:2px solid transparent;background:rgba(255,255,255,.02)}
.esoc-row:hover,.esoc-row:focus-visible{border-color:var(--soc);background:rgba(255,255,255,.07);outline:none}
.esoc-ic{flex:0 0 auto;width:20px;height:20px;display:flex;align-items:center;justify-content:center;
  font-family:var(--px);font-size:9px;color:#0a0e1a;background:var(--soc);box-shadow:2px 2px 0 #000}
.esoc-txt{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px}
.esoc-txt b{font-family:var(--px);font-size:6px;color:#fff;font-weight:400}
/* Sized so the longest handle we carry — the full gmail address — fits on one
   line without the ellipsis kicking in. */
.esoc-txt i{font-style:normal;font-size:8px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.esoc-go{flex:0 0 auto;font-size:10px;color:var(--muted)}
.esoc-row:hover .esoc-go{color:var(--soc)}

/* 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}
/* …but the TF2 card only has ~60% of its height for type now, and VN copy runs
   longer than EN, so it gets its own smaller step instead of the shared one. */
body.lang-vn #mode-tf2 .mode-name{font-size:8px!important}
body.lang-vn #mode-tf2 .mode-desc{font-size:9px!important;line-height:1.6!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}
  /* The bar carries up to five buttons now (socials + the guest save prompt),
     so it wraps instead of pushing itself off-screen. */
  #entry-hud{left:0;right:0;bottom:0;justify-content:center;gap:5px;padding:6px;flex-wrap:wrap;
    background:rgba(4,8,16,.94);border-top:2px solid var(--border)}
  #entry-hud .ehud-btn{padding:7px 8px;font-size:5px}
  /* Anchoring the popover to its own button would run it off the screen edge;
     on a phone it spans the bar instead. */
  #ehud-social{position:static}
  #ehud-social-menu{right:8px;left:8px;width:auto;bottom:calc(100% + 4px);transform-origin:50% 100%}
}

/* ── 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. */
}

/* ── Mobile coverflow: keep the carousel horizontal (the generic mobile block
   above stacks the old 5-card grid vertically). Placed last so it wins. ── */
@media (max-width:720px){
  /* Taller than the old text-only card: the montage needs real estate and the
     copy below it still has to fit without clipping. */
  #card-table{flex-direction:row;flex-wrap:nowrap;min-height:252px;gap:0}
  #card-table .ecard{width:58vw;height:200px}
  #card-table #mode-tf2{height:232px}
  #card-table .ecard .ec-front,#card-table .ecard .ec-back{flex-direction:column;justify-content:center;text-align:center;padding:14px}
  #card-table .ecard .mode-name,#card-table .ecard .mode-desc{text-align:center}
  /* The `padding:14px` shorthand above out-specifies the art card's padding-top
     (it carries two classes to our one), so restate it here or the montage sits
     on top of the type on every phone. */
  #mode-tf2{--art-h:76px}
  #card-table #mode-tf2 .ec-front,#card-table #mode-tf2 .ec-back{padding-top:calc(var(--art-h) + 8px);gap:6px}
  #mode-tf2 .mode-desc{font-size:5px;line-height:1.8}
  #mode-tf2 .mode-sub{font-size:5px}
  .ec-art-tag{font-size:4px;padding:2px 4px}
  #htp-overlay .htp-panel{padding:14px}
}

/* ═══ TF2-ONLY MENU (2026-08-04; this is the launch state as of 08-05) ════
   The picker is down to one card — Trading Floor v2. Life Simulation and the
   legacy class/friend Trading Floor (Multiplayer) are pulled from the menu.

   Reversible, but not temporary: on 2026-08-05 the ?tf2 flag was retired and
   the floor became unconditional, so one card is the shipped product rather
   than a week-long experiment. Restoring the other modes is a product
   decision, not cleanup.

   ⚠ DO NOT "FINISH THE JOB" by deleting the nodes. That failure is silent —
   the menu still looks correct while most of the game's init is dead. If you
   are about to try it, run tools/menu-tf2-only-e2e.js first: it asserts on
   page errors precisely because pixels cannot catch this.

   Hidden, NOT deleted. js/05-cards.js reaches for #mode-single, #mode-multi
   and #title-start-btn with an UNGUARDED getElementById at file scope
   (L1972/1975/1978/2010) — removing any of those nodes throws there and takes
   the rest of that file's init down with it, which is most of the game. So the
   nodes stay in the DOM, keep their listeners, and only stop rendering.

   #title-resume-btn is a single-player resume: js/06-systems-v2.js L1421 sets
   `style.display=''` on it whenever a valid save exists, so it needs the
   !important here to stay down — an inline style on the element would lose.

   js/00-entry-fx.js setupCoverflow() filters on computed display, so these
   three drop out of the carousel's index, arrow-key nav and swipe too.

   TO RESTORE: delete this block and the `_cfVisible` filter in
   js/00-entry-fx.js setupCoverflow(), then bump the ?v= tokens in index.html
   for entry.css and 00-entry-fx.js. Nothing else changed. */
#mode-single,
#mode-multi,
#title-resume-btn{display:none!important}