/* ============================================================
   Ace Penguins TCG — showcase site
   Recreates the "Ace Penguins.dc.html" design: navy + gold,
   bright/playful, white content background, aurora hero.
   ============================================================ */

:root{
  --navy-900:#06182F; --navy-800:#0A2348; --navy-700:#0A2A66; --navy-600:#0C2C57;
  --navy-500:#0C3C84; --blue-600:#1763B6; --blue-500:#2E7BD6; --blue-400:#39A7F0;
  --blue-300:#7CC4FF; --blue-200:#BFE0FF; --blue-100:#EAF4FF;
  --gold-400:#FFD34D; --gold-500:#F5B315; --gold-600:#E0930C;
  --mint:#34D6A0; --ink:#0C2C57; --muted:#42618C;
  --shadow-card:0 16px 34px rgba(8,28,62,.22);
  --maxw:1200px;
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  margin:0; background:#fff; color:var(--ink);
  font-family:'Nunito',system-ui,sans-serif;
  overflow-x:hidden; -webkit-font-smoothing:antialiased;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
h1,h2,h3{ font-family:'Baloo 2',system-ui,sans-serif; margin:0; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding:0 28px; }
.display{ font-family:'Baloo 2',sans-serif; }
.eyebrow{ font:800 13px 'Nunito'; letter-spacing:.16em; text-transform:uppercase; }

/* ---------- keyframes ---------- */
@keyframes ap-blob{ 0%,100%{ transform:translate(0,0) scale(1);} 50%{ transform:translate(30px,-24px) scale(1.12);} }
@keyframes ap-float{ 0%,100%{ transform:translateY(0) rotate(var(--r,0deg)); } 50%{ transform:translateY(-16px) rotate(var(--r,0deg)); } }
@keyframes ap-spin{ to{ transform:rotate(360deg);} }
@keyframes ap-streak{ 0%{ transform:translateX(-120%) skewX(-18deg);} 100%{ transform:translateX(320%) skewX(-18deg);} }
@keyframes ap-aurora{ 0%{ transform:translateX(-9%) skewY(-3.5deg); opacity:.45; } 50%{ transform:translateX(9%) skewY(-3.5deg); opacity:.9; } 100%{ transform:translateX(-9%) skewY(-3.5deg); opacity:.45; } }
@keyframes ap-snow{ 0%{ transform:translate3d(0,-14vh,0); opacity:0; } 8%{ opacity:var(--op,.8); } 92%{ opacity:var(--op,.8); } 100%{ transform:translate3d(var(--drift,18px),106vh,0); opacity:0; } }

/* ---------- nav ---------- */
.nav{
  position:sticky; top:0; z-index:50; backdrop-filter:blur(12px);
  background:rgba(11,30,63,.82); border-bottom:1px solid rgba(124,196,255,.22);
}
.nav-inner{ max-width:var(--maxw); margin:0 auto; padding:11px 28px;
  display:flex; align-items:center; justify-content:space-between; gap:20px; }
.nav-logo{ height:46px; cursor:pointer; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.nav-links{ display:flex; align-items:center; gap:26px; font:800 14px 'Nunito'; }
.nav-links a, .nav-links .lnk{ cursor:pointer; color:var(--blue-200); text-decoration:none; transition:color .15s; }
.nav-links a:hover, .nav-links .lnk:hover{ color:#fff; }
.btn-gold{
  text-decoration:none; display:inline-flex; align-items:center; gap:7px;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); color:#0A2348;
  font:800 14px 'Nunito'; padding:9px 18px; border-radius:999px;
  box-shadow:0 5px 14px rgba(245,179,21,.4); border:none; cursor:pointer;
}
.btn-gold.lg{ font-size:16px; padding:14px 26px; box-shadow:0 10px 24px rgba(245,179,21,.42); }
.btn-ghost{
  cursor:pointer; display:inline-flex; align-items:center; gap:10px;
  background:rgba(255,255,255,.12); border:1.5px solid rgba(255,255,255,.45);
  color:#fff; font:800 16px 'Nunito'; padding:14px 24px; border-radius:999px;
}
.btn-dark{ text-decoration:none; display:inline-flex; align-items:center; gap:9px;
  background:#0A2348; color:#fff; font:800 15px 'Nunito'; padding:13px 24px;
  border-radius:999px; box-shadow:0 10px 24px rgba(10,35,72,.25); }

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden;
  background:linear-gradient(155deg,#06182F 0%,#0A2A66 38%,#1763B6 70%,#39A7F0 100%); }
.px{ position:absolute; inset:0; z-index:0; pointer-events:none; }
.aurora{ position:absolute; left:-15%; width:130%; height:240px; filter:blur(34px);
  background:linear-gradient(90deg,transparent,rgba(52,214,160,0) 12%,rgba(52,214,160,.55) 38%,rgba(57,167,240,.6) 55%,rgba(124,255,212,.55) 72%,transparent);
  animation:ap-aurora 9s ease-in-out infinite; }
.aurora.b{ top:40%; height:170px; opacity:.6; filter:blur(40px); animation:ap-aurora 12s ease-in-out infinite reverse; }
.aurora.a{ top:8%; }
.blob{ position:absolute; border-radius:50%; }
.blob.a{ top:-120px; left:-70px; width:440px; height:440px; opacity:.45; filter:blur(10px);
  background:radial-gradient(circle,var(--blue-300),transparent 66%); animation:ap-blob 11s ease-in-out infinite; }
.blob.b{ bottom:-160px; right:-50px; width:480px; height:480px; opacity:.32; filter:blur(12px);
  background:radial-gradient(circle,var(--gold-400),transparent 66%); animation:ap-blob 13s ease-in-out infinite reverse; }
.hero-glow{ position:absolute; inset:0; z-index:0;
  background:radial-gradient(circle at 72% 28%, rgba(255,255,255,.18), transparent 54%); }
.snow-layer{ position:absolute; inset:0; z-index:1; overflow:hidden; pointer-events:none; }
.flake{ position:absolute; top:0; border-radius:50%;
  background:radial-gradient(circle,#fff,var(--blue-200)); box-shadow:0 0 6px rgba(190,224,255,.9);
  opacity:0; animation:ap-snow linear infinite; }

.hero-grid{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto;
  padding:64px 28px 86px; display:grid; grid-template-columns:1.04fr .96fr; gap:34px; align-items:center; }
.hero-logo{ width:min(430px,86%); filter:drop-shadow(0 8px 18px rgba(0,0,0,.45)); margin-bottom:18px; }
.badge{ display:inline-flex; align-items:center; gap:9px; background:rgba(124,196,255,.16);
  border:1px solid rgba(124,196,255,.4); backdrop-filter:blur(6px); padding:7px 15px; border-radius:999px;
  font:800 12px 'Nunito'; letter-spacing:.12em; text-transform:uppercase; color:var(--blue-100); margin-bottom:18px; }
.badge .dot{ width:8px; height:8px; border-radius:50%; background:var(--mint); box-shadow:0 0 10px var(--mint); }
.hero h1{ font:800 52px/1.02 'Baloo 2'; color:#fff; text-shadow:0 4px 16px rgba(0,0,0,.4); }
.hero h1 .y{ color:var(--gold-400); }
.hero-sub{ margin:18px 0 0; font:600 18px/1.55 'Nunito'; color:rgba(234,244,255,.95); max-width:460px; }
.hero-cta{ display:flex; gap:14px; margin-top:28px; flex-wrap:wrap; }
.play-ico{ width:24px; height:24px; border-radius:50%; background:#fff; color:var(--blue-600);
  display:flex; align-items:center; justify-content:center; font-size:11px; }
.hero-stats{ display:flex; align-items:center; gap:24px; margin-top:32px; }
.hero-stats .v{ font:800 26px 'Baloo 2'; color:var(--gold-400); line-height:1; }
.hero-stats .l{ font:700 12px 'Nunito'; color:rgba(234,244,255,.8); text-transform:uppercase; letter-spacing:.07em; margin-top:3px; }
.hero-stats .sep{ width:1px; height:34px; background:rgba(255,255,255,.28); }
/* Card fan — fluid widths (% of the showcase) + % offsets so all three stay
   fully visible and scale on every screen. Center keeps its own keyframe so the
   float animation doesn't strip its translateX(-50%) centering. */
.hero-show{ position:relative; height:clamp(330px, 46vw, 500px); }
.hero-show .slot{ position:absolute; }
.hero-show .left{ top:15%; left:1%; width:clamp(138px,38%,200px); --r:-12deg; z-index:1;
  animation:ap-float 7s ease-in-out infinite; }
.hero-show .right{ top:17%; right:1%; width:clamp(138px,38%,200px); --r:12deg; z-index:1;
  animation:ap-float 7.6s ease-in-out infinite .6s; }
.hero-show .center{ top:1%; left:50%; width:clamp(190px,54%,288px); z-index:3;
  filter:drop-shadow(0 26px 42px rgba(0,0,0,.55));
  animation:ap-float-c 6.4s ease-in-out infinite .3s; }
@keyframes ap-float-c{ 0%,100%{ transform:translate(-50%,0); } 50%{ transform:translate(-50%,-16px); } }
.hero-hint{ position:relative; text-align:center; padding-bottom:18px; z-index:2;
  font:800 11px 'Nunito'; letter-spacing:.16em; text-transform:uppercase; color:rgba(234,244,255,.72); }

/* ---------- sections ---------- */
.section{ position:relative; }
.center{ text-align:center; }
.sec-overview{ max-width:1080px; margin:0 auto; padding:80px 28px 54px; text-align:center; }
.sec-overview h2{ margin:0 auto; max-width:760px; font:800 40px/1.14 'Baloo 2'; color:var(--navy-600); }
.sec-overview h2 .g{ color:var(--gold-500); }
.lead{ margin:16px auto 0; max-width:640px; font:500 18px/1.6 'Nunito'; color:var(--muted); }
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:46px; }
.stat-card{ background:#fff; border:1px solid rgba(12,44,87,.08); border-radius:20px; padding:26px 16px;
  box-shadow:0 12px 26px rgba(12,44,87,.06); }
.stat-card .v{ font:800 38px 'Baloo 2'; line-height:1; }
.stat-card .l{ font:700 13px 'Nunito'; color:var(--muted); text-transform:uppercase; letter-spacing:.06em; margin-top:9px; }

.type-chips{ margin-top:42px; display:flex; flex-wrap:wrap; justify-content:center; gap:11px; }
.type-chip{ display:inline-flex; align-items:center; gap:9px; background:#fff; border:1px solid rgba(12,44,87,.09);
  padding:8px 16px 8px 9px; border-radius:999px; box-shadow:0 5px 13px rgba(12,44,87,.06); }
.type-badge{ width:26px; height:26px; border-radius:7px; background:linear-gradient(180deg,#16407C,#0A2247);
  font:800 14px 'Baloo 2'; display:flex; align-items:center; justify-content:center; }
.type-chip .nm{ font:800 15px 'Baloo 2'; color:var(--navy-600); }

/* gameplay hero screenshot */
.gameplay-hero{ max-width:880px; margin:44px auto 6px; }
.gameplay-hero .frame{ position:relative; border-radius:20px; overflow:hidden;
  border:1.5px solid rgba(124,196,255,.5);
  box-shadow:0 30px 60px rgba(8,28,62,.35), 0 0 0 6px rgba(124,196,255,.08);
  transition:transform .4s cubic-bezier(.2,.8,.3,1), box-shadow .4s; }
.gameplay-hero .frame:hover{ transform:translateY(-4px);
  box-shadow:0 42px 84px rgba(8,28,62,.42), 0 0 0 6px rgba(124,196,255,.16); }
.gameplay-hero .frame img{ width:100%; display:block; }
.gameplay-hero .live{ position:absolute; top:14px; left:14px; display:inline-flex; align-items:center; gap:7px;
  background:rgba(6,24,47,.72); backdrop-filter:blur(6px); border:1px solid rgba(124,196,255,.4);
  color:#EAF4FF; font:800 11px 'Nunito'; letter-spacing:.12em; text-transform:uppercase;
  padding:6px 12px; border-radius:999px; }
.gameplay-hero .live .d{ width:8px; height:8px; border-radius:50%; background:#FF5A5A;
  box-shadow:0 0 10px #FF5A5A; animation:ap-pulse 1.6s ease-in-out infinite; }
@keyframes ap-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
.gameplay-hero .shot-cap{ text-align:center; margin-top:14px; font:600 14px 'Nunito'; color:var(--muted); }

/* mechanics */
.mech-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; }
.mech{ position:relative; overflow:hidden; border-radius:24px; box-shadow:var(--shadow-card);
  display:flex; flex-direction:column; }
.mech .shot{ position:relative; height:160px; overflow:hidden; background:#06182F; }
.mech .shot img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
.mech:hover .shot img{ transform:scale(1.06); }
.mech .shot::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(6,24,47,0) 52%,rgba(6,24,47,.55)); }
.mech-body{ position:relative; flex:1; padding:0 26px 28px; color:#fff; }
.mech-body::after{ content:""; position:absolute; top:8px; right:-30px; width:150px; height:150px;
  border-radius:50%; background:rgba(255,255,255,.1); pointer-events:none; }
.mech .ico{ position:relative; z-index:2; width:54px; height:54px; border-radius:14px;
  background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.45);
  display:flex; align-items:center; justify-content:center; font:800 24px 'Baloo 2';
  margin:-28px 0 16px; box-shadow:0 10px 20px rgba(0,0,0,.4); }
.mech h3{ position:relative; margin:0 0 8px; font:800 23px 'Baloo 2'; }
.mech p{ position:relative; margin:0; font:600 15px/1.5 'Nunito'; color:rgba(255,255,255,.92); }

/* captains */
.sec-captains{ background:linear-gradient(180deg,#F2F8FF,#FFFFFF); border-top:1px solid rgba(12,44,87,.07);
  padding:78px 0 30px; }
.cap-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:34px; }
.cap{ position:relative; overflow:hidden; border-radius:22px; padding:26px 24px; background:#fff;
  border:1px solid rgba(12,44,87,.08); box-shadow:0 12px 26px rgba(12,44,87,.07); cursor:pointer;
  transition:transform .25s, box-shadow .25s; }
.cap:hover{ transform:translateY(-5px); box-shadow:0 22px 40px rgba(12,44,87,.16); }
.cap .accent{ position:absolute; top:0; left:0; right:0; height:6px; }
.cap .ring{ width:60px; height:60px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font:800 26px 'Baloo 2'; color:#fff; margin:8px 0 16px; }
.cap .badge-ico{ position:relative; width:72px; height:72px; margin:6px 0 18px; }
.cap .badge-ico .coin{ position:absolute; left:0; bottom:0; width:72px; height:72px; border-radius:50%; }
.cap .badge-ico img{ position:absolute; left:50%; bottom:-2px; transform:translateX(-50%);
  height:86px; width:auto; object-fit:contain; filter:drop-shadow(0 4px 6px rgba(0,0,0,.32)); transition:transform .25s; }
.cap:hover .badge-ico img{ transform:translateX(-50%) translateY(-4px) scale(1.04); }
.cap h3{ font:800 24px 'Baloo 2'; color:var(--navy-600); }
.cap .sub{ font:800 12px 'Nunito'; letter-spacing:.04em; text-transform:uppercase; margin-top:4px; }
.cap p{ margin:12px 0 0; font:600 14px/1.55 'Nunito'; color:var(--muted); }

/* featured rail */
.sec-featured{ position:relative; overflow:hidden; background:linear-gradient(180deg,#F2F8FF,#FFFFFF);
  border-top:1px solid rgba(12,44,87,.07); padding:60px 0 84px; }
.rail-head{ position:relative; z-index:2; max-width:var(--maxw); margin:0 auto 30px; padding:0 28px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.rail-nav{ display:flex; gap:10px; }
.rail-btn{ cursor:pointer; width:46px; height:46px; border-radius:50%; background:#fff;
  border:1px solid rgba(12,44,87,.1); display:flex; align-items:center; justify-content:center;
  font-size:18px; color:var(--blue-600); box-shadow:0 6px 14px rgba(12,44,87,.08); }
.rail{ position:relative; z-index:2; display:flex; gap:24px; overflow-x:auto; padding:8px 28px 22px;
  scroll-snap-type:x mandatory; scrollbar-width:none; }
.rail::-webkit-scrollbar{ display:none; }
.rail .item{ flex:none; width:260px; scroll-snap-align:center; }
.rail .cap-name{ text-align:center; margin-top:14px; }
.rail .cap-name .t{ font:800 17px 'Baloo 2'; color:var(--navy-600); }
.rail .cap-name .s{ font:700 12px 'Nunito'; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-600); margin-top:2px; }

/* products */
.sec-products{ max-width:var(--maxw); margin:0 auto; padding:82px 28px; }
.prod-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.prod{ background:#fff; border:1px solid rgba(12,44,87,.08); border-radius:24px; overflow:hidden;
  box-shadow:0 14px 32px rgba(12,44,87,.08); display:flex; flex-direction:column; }
.prod .top{ position:relative; height:236px; background:linear-gradient(160deg,#0A2A66,#06182F);
  display:flex; align-items:center; justify-content:center; overflow:hidden; }
.prod .ring{ position:absolute; width:220px; height:220px; border-radius:50%;
  border:2px dashed rgba(124,196,255,.28); animation:ap-spin 26s linear infinite; }
.prod .streak{ position:absolute; top:-30%; left:20%; width:24%; height:160%;
  background:linear-gradient(90deg,transparent,rgba(180,235,255,.45),transparent); filter:blur(2px);
  animation:ap-streak 4.5s ease-in-out infinite; }
.prod .pack{ position:relative; border-radius:10px; box-shadow:0 16px 32px rgba(0,0,0,.45); }
.prod .tag{ position:absolute; bottom:12px; left:50%; transform:translateX(-50%);
  font:800 9px 'Nunito'; letter-spacing:.1em; color:#0A2348;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); padding:4px 11px; border-radius:999px; }
.prod .body{ padding:22px 22px 24px; display:flex; flex-direction:column; flex:1; }
.prod h3{ margin:0 0 6px; font:800 21px 'Baloo 2'; color:var(--navy-600); }
.prod p{ margin:0 0 16px; font:600 14px/1.5 'Nunito'; color:var(--muted); flex:1; }
.prod .price{ font:800 22px 'Baloo 2'; color:var(--navy-600); }
.prod .order{ background:linear-gradient(180deg,#2E7BD6,#0C3C84); color:#fff; font:800 13px 'Nunito';
  padding:10px 18px; border-radius:999px; box-shadow:0 6px 14px rgba(12,60,132,.35); }

/* card-list preview */
.sec-list{ background:#fff; border-top:1px solid rgba(12,44,87,.07); padding:78px 0 86px; }
.list-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px;
  margin-bottom:32px; flex-wrap:wrap; }
.preview-grid{ display:grid; grid-template-columns:repeat(5,1fr); gap:22px; }

/* trailer */
.sec-trailer{ position:relative; overflow:hidden; background:#fff; border-top:1px solid rgba(12,44,87,.07);
  padding:84px 28px; }
.trailer-box{ position:relative; max-width:1000px; margin:0 auto; text-align:center; }
.trailer-frame{ cursor:pointer; position:relative; border-radius:24px; overflow:hidden; aspect-ratio:16/9;
  background:linear-gradient(150deg,#06182F,#0C3C84 50%,#39A7F0); box-shadow:0 30px 70px rgba(10,35,72,.28);
  border:1.5px solid rgba(124,196,255,.3); }
.trailer-frame .poster{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.trailer-frame video{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; background:#000; }
.trailer-frame .scrim{ position:absolute; inset:0; background:radial-gradient(circle at 50% 50%, rgba(0,0,0,.05), rgba(3,12,30,.5)); }
.trailer-frame .poster,.trailer-frame .scrim,.trailer-frame .logo,
.trailer-frame .trailer-play,.trailer-frame .trailer-meta{ transition:opacity .3s ease; }
.trailer-frame.playing .poster,.trailer-frame.playing .scrim,.trailer-frame.playing .logo,
.trailer-frame.playing .trailer-play,.trailer-frame.playing .trailer-meta{ opacity:0; pointer-events:none; }
.trailer-frame .logo{ position:absolute; top:20px; left:24px; height:42px; filter:drop-shadow(0 3px 6px rgba(0,0,0,.4)); }
.trailer-play{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; }
.trailer-play .circle{ width:88px; height:88px; border-radius:50%;
  background:linear-gradient(180deg,var(--gold-400),var(--gold-500)); display:flex; align-items:center; justify-content:center;
  box-shadow:0 12px 30px rgba(0,0,0,.4); }
.trailer-play .tri{ width:0; height:0; border-left:26px solid #0A2348; border-top:16px solid transparent;
  border-bottom:16px solid transparent; margin-left:6px; }
.trailer-meta{ position:absolute; bottom:18px; left:24px; right:24px; display:flex; align-items:center;
  justify-content:space-between; color:#fff; font:700 13px 'Nunito'; }

/* newsletter */
.sec-news{ background:linear-gradient(150deg,#0A2A66,#1763B6 60%,#39A7F0); padding:72px 28px;
  position:relative; overflow:hidden; }
.news-box{ position:relative; max-width:900px; margin:0 auto; text-align:center; color:#fff; }
.news-box h2{ font:800 38px 'Baloo 2'; }
.news-box p{ margin:0 auto 26px; max-width:480px; font:600 17px/1.5 'Nunito'; color:rgba(234,244,255,.95); }
.news-form{ display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; justify-content:center; }
.news-form input{ flex:1; min-width:220px; border:none; border-radius:999px; padding:15px 22px;
  font:600 15px 'Nunito'; color:var(--ink); outline:none; box-shadow:0 8px 20px rgba(6,24,47,.3); }
.news-form button{ border:none; cursor:pointer; background:linear-gradient(180deg,var(--gold-400),var(--gold-500));
  color:#0A2348; font:800 15px 'Nunito'; padding:15px 28px; border-radius:999px; box-shadow:0 8px 20px rgba(6,24,47,.3); }
.retailers{ margin-top:38px; }
.retailers .lbl{ font:800 12px 'Nunito'; letter-spacing:.14em; text-transform:uppercase;
  color:rgba(234,244,255,.82); margin-bottom:16px; }
.retailers .row{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; }
.retailers .pill{ background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.34);
  backdrop-filter:blur(6px); padding:11px 20px; border-radius:14px; font:800 16px 'Baloo 2'; color:#fff; }

/* footer */
.footer{ background:#06182F; color:rgba(191,224,255,.7); padding:40px 28px; }
.footer-inner{ max-width:var(--maxw); margin:0 auto; display:flex; align-items:center;
  justify-content:space-between; gap:20px; flex-wrap:wrap; }
.footer .note{ font:600 13px 'Nunito'; }

/* ============ CARD COMPONENT (flip + tilt around rendered art) ============ */
.ace-card{ position:relative; width:100%; aspect-ratio:5/7; perspective:1200px;
  user-select:none; cursor:pointer; }
.ace-card-inner{ position:absolute; inset:0; transition:transform .45s cubic-bezier(.2,.8,.3,1); transform-style:preserve-3d; }
.ace-card.hover .ace-card-inner{ transition:transform .08s ease-out; }
.ace-card-flip{ position:absolute; inset:0; transition:transform .5s cubic-bezier(.4,.1,.3,1); transform-style:preserve-3d; }
.ace-card.flipped .ace-card-flip{ transform:rotateY(180deg); }
.ace-face{ position:absolute; inset:0; border-radius:5.5%; overflow:hidden; backface-visibility:hidden;
  -webkit-backface-visibility:hidden; box-shadow:0 18px 34px rgba(6,22,52,.45); }
.ace-front{ background:#050810; }
.ace-front .flat-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }

/* layered art (matches Card Designer's CardFace useLayeredArt) */
.lyr-stack{ position:absolute; inset:0; overflow:hidden; }
.lyr{ position:absolute; inset:0; will-change:transform; transform-origin:center center; backface-visibility:hidden; }
.lyr img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lyr-bob{ position:absolute; inset:0; }
.lyr-fx{ mix-blend-mode:screen; }
.lyr-frame{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.lyr-bg{ animation:acePxBg 8s ease-in-out infinite; }
.lyr-fx{ animation:aceFxPulse 2.6s ease-in-out infinite; }
.lyr-subj{ animation:acePxSubj 8s ease-in-out infinite; }
.lyr-bob{ animation:aceBob 5.6s ease-in-out infinite; }
@keyframes acePxBg{ 0%,100%{ transform:translate3d(-0.8%,0,0) scale(1.02); } 50%{ transform:translate3d(0.8%,0,0) scale(1.035); } }
@keyframes acePxSubj{ 0%,100%{ transform:translate3d(1.7%,0,0); } 50%{ transform:translate3d(-1.7%,0,0); } }
@keyframes aceBob{ 0%,100%{ transform:translate3d(0,0.8%,0) scale(1); } 50%{ transform:translate3d(0,-1.05%,0) scale(1.026); } }
@keyframes aceFxPulse{ 0%,100%{ transform:scale(1); opacity:.82; } 50%{ transform:scale(1.035); opacity:1; } }
@media (prefers-reduced-motion: reduce){ .lyr, .lyr-bob{ animation:none !important; } }
/* the sleeve art is a complete card back (its own frame + logo) — show it full-bleed */
.ace-back{ transform:rotateY(180deg); background:#06182F; }
.ace-back .inner{ position:absolute; inset:0; background-position:center; background-size:cover; background-repeat:no-repeat; }
.ace-card .glare{ position:absolute; inset:0; border-radius:5.5%; pointer-events:none; opacity:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35),transparent 70%);
  transition:opacity .2s; mix-blend-mode:screen; }
.ace-card.hover .glare{ opacity:1; }
.card-skeleton{ position:absolute; inset:0; border-radius:5.5%;
  background:linear-gradient(180deg,#13386E,#0A2247); display:flex; align-items:center; justify-content:center; }
.card-skeleton span{ font:800 13px 'Nunito'; letter-spacing:.1em; color:rgba(190,224,255,.5); text-transform:uppercase; }

/* ============ CARD BROWSER ============ */
.browser-hero{ background:linear-gradient(150deg,#06182F,#0A2A66 55%,#1763B6); color:#fff;
  padding:46px 28px 30px; position:relative; overflow:hidden; }
.browser-hero h1{ font:800 42px 'Baloo 2'; }
.browser-hero p{ margin:8px 0 0; font:600 16px 'Nunito'; color:rgba(234,244,255,.9); }
.controls{ position:sticky; top:69px; z-index:40; background:rgba(255,255,255,.96); backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(12,44,87,.1); padding:16px 0; }
.controls-inner{ max-width:1280px; margin:0 auto; padding:0 28px; display:flex; flex-direction:column; gap:14px; }
.search-row{ display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.search{ flex:1; min-width:240px; position:relative; }
.search input{ width:100%; border:1.5px solid rgba(12,44,87,.15); border-radius:999px; padding:12px 18px 12px 42px;
  font:600 15px 'Nunito'; color:var(--ink); outline:none; }
.search input:focus{ border-color:var(--blue-400); }
.search .ic{ position:absolute; left:16px; top:50%; transform:translateY(-50%); color:var(--muted); }
.select{ border:1.5px solid rgba(12,44,87,.15); border-radius:999px; padding:11px 16px; font:700 14px 'Nunito';
  color:var(--ink); background:#fff; cursor:pointer; outline:none; }
.filter-row{ display:flex; gap:8px; flex-wrap:wrap; align-items:center; }
.filter-label{ font:800 11px 'Nunito'; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-right:2px; }
.chip{ cursor:pointer; border:1.5px solid rgba(12,44,87,.14); background:#fff; color:var(--navy-600);
  font:800 13px 'Nunito'; padding:7px 14px; border-radius:999px; display:inline-flex; align-items:center; gap:7px;
  transition:all .15s; }
.chip:hover{ border-color:var(--blue-400); }
.chip.active{ background:var(--navy-700); color:#fff; border-color:var(--navy-700); }
.chip .dot{ width:11px; height:11px; border-radius:3px; }
.chip.cap.active{ color:#fff; }
.result-count{ font:700 14px 'Nunito'; color:var(--muted); }
.grid-page{ max-width:1280px; margin:0 auto; padding:28px; }
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:26px 22px; }
.grid-cell{ display:flex; flex-direction:column; }
.grid-cell .meta{ text-align:center; margin-top:12px; }
.grid-cell .meta .t{ font:800 16px 'Baloo 2'; color:var(--navy-600); line-height:1.15; }
.grid-cell .meta .s{ font:700 11px 'Nunito'; letter-spacing:.04em; text-transform:uppercase; color:var(--blue-600); margin-top:3px; }
.empty{ text-align:center; padding:80px 20px; color:var(--muted); font:700 18px 'Nunito'; }

/* ---------- play demo (itch.io embed) ---------- */
.sec-demo{ background:linear-gradient(180deg,#F2F8FF,#FFFFFF); border-top:1px solid rgba(12,44,87,.07); padding:78px 0; }
/* demo banner with the Play button overlaid at the bottom */
.demo-frame{ position:relative; display:block; width:100%; max-width:600px; margin:0 auto; aspect-ratio:630/500;
  border-radius:18px; overflow:hidden; background:#0a1a33;
  border:1.5px solid rgba(124,196,255,.5);
  box-shadow:0 26px 54px rgba(8,28,62,.3), 0 0 0 5px rgba(124,196,255,.08); }
.demo-frame img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.demo-play{ position:absolute; left:50%; bottom:20px; transform:translateX(-50%); z-index:2;
  display:inline-flex; align-items:center; gap:7px; white-space:nowrap;
  background:linear-gradient(180deg,#FFD34D,#F5B315); color:#0A2348;
  font:800 16px 'Nunito'; padding:13px 26px; border-radius:999px; text-decoration:none;
  box-shadow:0 10px 24px rgba(6,24,47,.5); transition:transform .15s, box-shadow .15s; }
.demo-play:hover{ transform:translateX(-50%) translateY(-2px); box-shadow:0 16px 32px rgba(6,24,47,.6); }

/* ---------- responsive ---------- */
@media (max-width:960px){
  .hero-grid{ grid-template-columns:1fr; gap:18px; }
  .hero-show{ margin:6px auto 0; max-width:560px; width:100%; }
  .mech-grid,.cap-grid,.prod-grid{ grid-template-columns:1fr; }
  .stat-grid{ grid-template-columns:repeat(2,1fr); }
  .preview-grid{ grid-template-columns:repeat(3,1fr); }
  .hero h1{ font-size:clamp(34px,7vw,48px); }
  .hero-grid{ padding:48px 22px 64px; }
}
@media (max-width:640px){
  .nav-links a:not(.btn-gold), .nav-links .lnk{ display:none; }
  .preview-grid{ grid-template-columns:repeat(2,1fr); }
  .sec-overview{ padding:54px 20px 40px; }
  .sec-overview h2{ font-size:30px; }
  /* inline-styled section headings -> shrink on phones */
  .sec-captains h2, .rail-head h2, .sec-products h2, .list-head h2,
  .sec-trailer h2, .news-box h2, .sec-demo h2, .browser-hero h1{ font-size:30px !important; line-height:1.15; }
  .sec-captains, .sec-featured, .sec-products, .sec-list, .sec-trailer{ padding-left:0; padding-right:0; }
  .sec-products{ padding:56px 20px; }
  .sec-trailer{ padding:56px 20px; }
  .sec-news{ padding:56px 20px; }
  .wrap{ padding:0 20px; }
  .list-head{ gap:14px; }
  .hero-sub, .lead{ font-size:16px; }
  .hero-stats{ gap:16px; }
  .hero-stats .v, .stat-card .v{ font-size:30px; }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:20px 16px; }
}
@media (max-width:380px){
  .stat-grid{ grid-template-columns:1fr 1fr; gap:12px; }
  .type-chip{ padding:7px 12px 7px 8px; }
  .card-grid{ grid-template-columns:repeat(auto-fill,minmax(140px,1fr)); }
}