/* ═══════════════ THE TOYSGZ — thetoys.codder.com.br (v3) ═══════════════ */

@font-face { font-family:'Anton'; src:url('../fonts/anton.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Marker'; src:url('../fonts/marker.woff2') format('woff2'); font-display:swap; }
@font-face { font-family:'Grotesk'; src:url('../fonts/grotesk.woff2') format('woff2'); font-weight:300 700; font-display:swap; }

:root {
  --bg:      #050505;
  --bg-2:    #0b0b0c;
  --red:     #ff1e2d;
  --red-dk:  #b30f1b;
  --white:   #f5f2ee;
  --grey:    #6f6b68;
  --line:    #1c1b1b;
  --purple:  #9b5cff;
  --blue:    #3fa9ff;
  --green:   #35d07f;
  --gold:    #ffb300;
  --anton:   'Anton', Impact, sans-serif;
  --marker:  'Marker', cursive;
  --body:    'Grotesk', system-ui, sans-serif;
  --mono:    ui-monospace, 'SF Mono', 'JetBrains Mono', Menlo, monospace;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
html, body { overflow-x:clip; }
body {
  background:var(--bg); color:var(--white);
  font-family:var(--body); font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
main > * { min-width:0; }
::selection { background:var(--red); color:#000; }
button { font-family:inherit; cursor:pointer; }
a { color:inherit; text-decoration:none; }
em { font-style:normal; }

/* imagem "sem cara de imagem": bordas derretem no fundo */
.feather {
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to bottom, transparent 0, #000 5%, #000 94%, transparent 100%),
    linear-gradient(to right, transparent 0, #000 6%, #000 94%, transparent 100%);
  mask-composite: intersect;
}

/* ── overlays ── */
.grain {
  position:fixed; inset:-50%; width:200%; height:200%; z-index:90; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
  opacity:.05; animation:grain 8s steps(10) infinite; will-change:transform;
}
@keyframes grain {
  0%,100% { transform:translate(0,0) } 10% { transform:translate(-2%,1%) } 20% { transform:translate(1%,-2%) }
  30% { transform:translate(-1%,2%) } 40% { transform:translate(2%,1%) } 50% { transform:translate(-2%,-1%) }
  60% { transform:translate(1%,2%) } 70% { transform:translate(-1%,-2%) } 80% { transform:translate(2%,-1%) } 90% { transform:translate(-2%,2%) }
}
.vignette { position:fixed; inset:0; z-index:89; pointer-events:none;
  background:radial-gradient(ellipse 90% 70% at 50% 40%, transparent 55%, rgba(0,0,0,.55) 100%); }

/* spotlight que segue o mouse (desktop) */
.spot {
  position:fixed; inset:0; z-index:88; pointer-events:none; display:none;
  background:radial-gradient(560px at var(--sx,50%) var(--sy,40%), rgba(255,30,45,.06), transparent 65%);
}
@media (pointer:fine) { .spot { display:block; } }

/* barra de progresso do scroll */
.scroll-progress {
  position:fixed; top:0; left:0; right:0; height:3px; z-index:120;
  background:var(--red); transform:scaleX(0); transform-origin:left;
  box-shadow:0 0 12px rgba(255,30,45,.7);
}

/* cursor X (desktop) — o nativo só some quando o X custom está ativo e rastreando */
.cursor {
  position:fixed; left:0; top:0; z-index:130; width:22px; height:22px;
  margin:-11px 0 0 -11px; color:var(--red); pointer-events:none; display:none; opacity:0;
  transition:width .2s, height .2s, margin .2s, color .2s, opacity .2s;
  filter:drop-shadow(0 0 6px rgba(255,30,45,.6));
}
.cursor.big { width:44px; height:44px; margin:-22px 0 0 -22px; color:var(--white); }
@media (pointer:fine) {
  .cursor { display:block; }
  body.cursor-on .cursor { opacity:1; }
  body.cursor-on, body.cursor-on a, body.cursor-on button, body.cursor-on .pack { cursor:none; }
}

/* flashzão do easter egg (tecla X) */
.xflash {
  position:fixed; inset:0; z-index:140; display:flex; align-items:center; justify-content:center;
  font-family:var(--anton); font-size:min(80vh,80vw); color:var(--red);
  background:rgba(0,0,0,.85); opacity:0; pointer-events:none; user-select:none;
}

/* ── preloader ── */
.loader {
  position:fixed; inset:0; z-index:200; background:var(--bg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px;
  transition:opacity .6s ease, visibility .6s;
}
.loader.done { opacity:0; visibility:hidden; }
.loader-x { width:64px; height:64px; color:var(--red); animation:spinX 1.6s cubic-bezier(.7,0,.3,1) infinite; }
@keyframes spinX { to { transform:rotate(360deg) } }
.loader-num { font-family:var(--anton); font-size:64px; letter-spacing:.04em; }
.loader-bar { width:min(320px,70vw); height:3px; background:var(--line); overflow:hidden; }
.loader-bar span { display:block; height:100%; width:0%; background:var(--red); }
.loader-tag { font-family:var(--mono); font-size:11px; letter-spacing:.35em; color:var(--grey); }

/* ── nav ── */
.nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  display:flex; align-items:center; gap:24px;
  padding:16px clamp(16px,4vw,48px);
  transition:background .4s, border-color .4s;
  border-bottom:1px solid transparent;
}
.nav.scrolled { background:rgba(5,5,5,.88); backdrop-filter:blur(12px); border-color:var(--line); }
.nav-logo { display:flex; align-items:center; gap:12px; }
.nav-x { width:34px; height:34px; color:var(--red); flex:none; filter:drop-shadow(0 0 10px rgba(255,30,45,.6)); }
.nav-name { font-family:var(--anton); font-size:22px; letter-spacing:.02em; line-height:1; display:flex; flex-direction:column; }
.nav-name em { color:var(--red); }
.nav-name small { font-family:var(--mono); font-size:8px; letter-spacing:.32em; color:var(--grey); margin-top:4px; font-weight:400; }
.nav-links { display:flex; gap:28px; margin-left:auto; font-family:var(--mono); font-size:12px; letter-spacing:.18em; text-transform:uppercase; }
.nav-links a { color:var(--grey); transition:color .2s; position:relative; }
.nav-links a:hover { color:var(--white); }
.nav-links a:hover::after { content:''; position:absolute; left:0; right:0; bottom:-6px; height:2px; background:var(--red); }
.nav-clock { font-family:var(--mono); font-size:11px; letter-spacing:.18em; color:var(--grey); font-variant-numeric:tabular-nums; }
.nav-cta { flex:none; }

/* ── botões ── */
.btn {
  font-family:var(--anton); font-size:15px; letter-spacing:.08em;
  padding:14px 26px; border:none; position:relative;
  transition:box-shadow .2s, background .2s, color .2s;
  clip-path:polygon(8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%, 0 8px);
}
.btn:active { transform:scale(.96); }
.btn-red { background:var(--red); color:#fff; box-shadow:0 0 24px rgba(255,30,45,.35); }
.btn-red:hover { background:#fff; color:var(--red); box-shadow:0 0 42px rgba(255,30,45,.55); }
.btn-ghost { background:transparent; color:var(--white); outline:1px solid var(--line); outline-offset:-1px; }
.btn-ghost:hover { outline-color:var(--red); color:var(--red); }
.btn-big { font-size:20px; padding:20px 44px; }

.mono-tag { font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--red); margin-bottom:18px; }
.sec-title { font-family:var(--anton); font-size:clamp(42px,7vw,88px); line-height:.95; letter-spacing:.01em; }
.sec-title em { color:var(--red); }

/* ═══ HERO ═══ */
.hero {
  min-height:100vh; min-height:100dvh;
  position:relative; display:flex; flex-direction:column;
  align-items:center; justify-content:center; overflow:clip;
  padding:110px 16px 110px;
  background:
    radial-gradient(ellipse 60% 45% at 50% 58%, rgba(255,30,45,.10), transparent 70%),
    linear-gradient(var(--bg), var(--bg));
}
.hero-bg-x {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  font-family:var(--anton); font-size:min(120vh,120vw); color:transparent;
  -webkit-text-stroke:1px rgba(255,30,45,.10); user-select:none; pointer-events:none;
  animation:xspin 60s linear infinite; will-change:transform;
}
@keyframes xspin { to { transform:rotate(360deg) } }

.hero-title {
  position:relative; z-index:2; text-align:center;
  font-family:var(--anton); line-height:.82; user-select:none;
}
.ht-line { display:block; }
.ht-the {
  font-size:clamp(28px,4.5vw,64px); color:transparent;
  -webkit-text-stroke:2px var(--white); letter-spacing:.45em; padding-left:.45em;
}
.ht-main {
  position:relative;
  font-size:clamp(84px,16vw,290px); color:var(--red); letter-spacing:.01em;
  filter:url(#roughen) drop-shadow(0 0 60px rgba(255,30,45,.35));
}
.ht-main em { color:var(--white); }
/* glitch (JS liga a classe por ~0.4s) */
.ht-main.glitch::before, .ht-main.glitch::after {
  content:attr(data-text); position:absolute; inset:0; opacity:.35; pointer-events:none;
}
.ht-main.glitch::before { color:var(--white); transform:translate(-14px,3px); clip-path:inset(18% 0 74% 0); animation:glitchA .12s steps(2) infinite; }
.ht-main.glitch::after { color:var(--red); transform:translate(14px,-4px); clip-path:inset(72% 0 16% 0); animation:glitchB .1s steps(2) infinite; }
@keyframes glitchA { 50% { transform:translate(10px,-2px); clip-path:inset(44% 0 48% 0); } }
@keyframes glitchB { 50% { transform:translate(-12px,4px); clip-path:inset(8% 0 84% 0); } }

/* palco: anel girando + embalagem flutuando */
.hero-stage { position:relative; z-index:3; margin-top:clamp(-100px,-5vw,-16px); display:flex; align-items:center; justify-content:center; }
.hero-ring {
  position:absolute; width:min(64vw,560px); aspect-ratio:1; z-index:0;
  animation:ringspin 26s linear infinite; opacity:.3;
}
.hero-ring text { font-family:var(--mono); font-size:8px; letter-spacing:.5em; fill:var(--grey); }
@keyframes ringspin { to { transform:rotate(360deg) } }
.hero-pack-wrap { position:relative; z-index:1; will-change:transform; }
.hero-pack {
  height:min(48vh,440px); width:auto; display:block;
  animation:packfloat 5.5s ease-in-out infinite;
}
.hero-glow {
  position:absolute; inset:-10% -26%; z-index:0; border-radius:50%;
  background:radial-gradient(ellipse, rgba(63,214,176,.13), transparent 65%);
  animation:pulse 3.2s ease-in-out infinite;
}
@keyframes pulse { 0%,100%{opacity:.6; transform:scale(1)} 50%{opacity:1; transform:scale(1.06)} }
@keyframes packfloat {
  0%,100% { transform:translateY(0) rotate(-1.2deg) }
  50% { transform:translateY(-16px) rotate(1.1deg) }
}

.hero-meta {
  position:relative; z-index:4; display:flex; gap:clamp(20px,6vw,80px);
  margin-top:34px; flex-wrap:wrap; justify-content:center;
}
.hero-meta-item { display:flex; flex-direction:column; align-items:center; gap:4px; }
.hero-meta-item b { font-family:var(--anton); font-size:20px; letter-spacing:.05em; }
.hero-meta-item:first-child b { color:var(--red); animation:blink 1.4s steps(2) infinite; }
@keyframes blink { 50% { opacity:.35 } }
.hero-meta-item span { font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--grey); }

.hero-scroll {
  position:absolute; bottom:22px; left:50%; transform:translateX(-50%);
  display:flex; flex-direction:column; align-items:center; gap:8px; z-index:4;
  font-family:var(--mono); font-size:10px; letter-spacing:.4em; color:var(--grey);
}
.hero-scroll i { width:1px; height:40px; background:linear-gradient(var(--red), transparent); animation:drip 1.6s ease-in-out infinite; }
@keyframes drip { 0%{transform:scaleY(0); transform-origin:top} 50%{transform:scaleY(1); transform-origin:top} 51%{transform-origin:bottom} 100%{transform:scaleY(0); transform-origin:bottom} }

/* ═══ MARQUEES ═══ */
.marquee { overflow:clip; padding:14px 0; position:relative; z-index:5; }
.marquee-red { background:var(--red); box-shadow:0 0 60px rgba(255,30,45,.35); transform:rotate(-1.5deg) scale(1.02); }
.marquee-track { display:flex; white-space:nowrap; animation:marq 22s linear infinite; will-change:transform; }
.marquee-track span {
  font-family:var(--anton); font-size:clamp(18px,2.6vw,30px); color:#050505; letter-spacing:.12em; flex:none;
}
@keyframes marq { to { transform:translateX(-33.333%) } }

/* ═══ BANNER LANTERNA ═══ */
.banner { position:relative; overflow:clip; }
.banner-img { width:100%; display:block; }
.banner-dim { filter:brightness(.18) saturate(.75); }
.banner-lit {
  position:absolute; inset:0;
  -webkit-mask-image:radial-gradient(circle var(--br,240px) at var(--bx,50%) var(--by,50%), #000 0 40%, transparent 78%);
  mask-image:radial-gradient(circle var(--br,240px) at var(--bx,50%) var(--by,50%), #000 0 40%, transparent 78%);
}
.banner-hint {
  position:absolute; left:0; right:0; bottom:18px; display:flex; justify-content:center; pointer-events:none;
}
.banner-hint span {
  font-family:var(--mono); font-size:10px; letter-spacing:.34em; color:var(--grey);
  background:rgba(5,5,5,.55); padding:8px 16px;
}

/* ═══ MANIFESTO ═══ */
.manifesto { padding:clamp(110px,16vh,200px) clamp(20px,6vw,90px); max-width:1500px; margin:0 auto; }
.mf-line {
  font-family:var(--anton); font-size:clamp(25px,7vw,110px); line-height:1.06;
  color:#1d1c1c; position:relative; letter-spacing:.01em; width:fit-content; max-width:100%;
  white-space:nowrap;
}
.mf-line .fill {
  position:absolute; inset:0; color:var(--white); overflow:clip; white-space:nowrap;
  clip-path:inset(0 100% 0 0);
}
.mf-line .fill em, .mf-line em { color:var(--red); }
.mf-sub { margin-top:44px; max-width:560px; color:var(--grey); font-size:17px; }
.mf-sub b { color:var(--red); }

/* ═══ DROP ═══ */
.drop { padding:clamp(60px,10vh,140px) clamp(16px,4vw,60px); display:flex; justify-content:center; }
.drop-card {
  position:relative; width:min(1100px,100%); overflow:clip;
  background:linear-gradient(135deg, #120607 0%, var(--bg-2) 55%);
  border:1px solid #2a1214;
  padding:clamp(36px,6vw,80px);
  clip-path:polygon(28px 0, 100% 0, 100% calc(100% - 28px), calc(100% - 28px) 100%, 0 100%, 0 28px);
}
.drop-head { font-family:var(--mono); font-size:12px; letter-spacing:.3em; color:var(--red); display:flex; align-items:center; gap:10px; }
.live-dot { width:9px; height:9px; border-radius:50%; background:var(--red); box-shadow:0 0 12px var(--red); animation:blink 1.2s steps(2) infinite; }
.drop-title { font-family:var(--anton); font-size:clamp(64px,11vw,160px); line-height:.88; margin:28px 0 40px; letter-spacing:.01em; }
.drop-title em { color:var(--red); filter:drop-shadow(0 0 30px rgba(255,30,45,.5)); }
.drop-count { display:flex; gap:clamp(8px,2vw,28px); align-items:flex-start; margin-bottom:44px; }
.drop-count > div:not(.dc-sep) { display:flex; flex-direction:column; align-items:center; gap:6px; }
.drop-count b {
  font-family:var(--anton); font-size:clamp(34px,6.5vw,92px); line-height:1;
  background:var(--bg); border:1px solid var(--line); padding:10px clamp(8px,1.4vw,16px); min-width:2ch; text-align:center;
  font-variant-numeric:tabular-nums;
}
.drop-count span { font-family:var(--mono); font-size:10px; letter-spacing:.3em; color:var(--grey); }
.dc-sep { font-family:var(--anton); font-size:clamp(26px,4.6vw,64px); color:var(--red); padding-top:14px; }
.drop-actions { display:flex; gap:16px; flex-wrap:wrap; }
.drop-x {
  position:absolute; right:-4%; top:-16%; font-family:var(--anton);
  font-size:clamp(200px,32vw,480px); color:transparent; -webkit-text-stroke:1px rgba(255,30,45,.16);
  pointer-events:none; user-select:none; line-height:1;
}

/* ═══ COLEÇÃO — embalagens soltas, sempre rolando ═══ */
.toys { position:relative; }
.toys-head { padding:clamp(70px,10vh,130px) clamp(20px,6vw,90px) 10px; display:flex; flex-wrap:wrap; align-items:flex-end; gap:20px; }
.toys-head .mono-tag { width:100%; margin-bottom:0; }
.toys-hint { margin-left:auto; font-family:var(--mono); font-size:11px; letter-spacing:.26em; color:var(--grey); }
.packs-rail { overflow:clip; padding:40px 0 80px; }
.packs-rail.static { overflow-x:auto; }
.packs-track {
  display:flex; align-items:flex-start; gap:clamp(44px,5.5vw,90px);
  width:max-content; padding:0 44px; will-change:transform;
}
.pack {
  --pk:#7ee0c3;
  flex:none; position:relative; margin:0; cursor:pointer;
  animation:packfloat 6s ease-in-out infinite;
  animation-delay:var(--fd,0s);
}
.pack:nth-child(even) { margin-top:34px; }
.pack img {
  height:min(44vh,410px); width:auto; display:block;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), filter .35s;
}
.pack:hover img { transform:scale(1.06) rotate(.6deg); filter:brightness(1.12); }
.pack-glow {
  position:absolute; left:-18%; right:-18%; top:-10%; bottom:4%; z-index:-1;
  background:radial-gradient(ellipse, color-mix(in srgb, var(--pk) 15%, transparent), transparent 68%);
}
.pack-info { display:flex; align-items:center; justify-content:center; gap:12px; margin-top:16px; }
.pack-id { font-family:var(--mono); font-size:11px; letter-spacing:.22em; color:var(--pk); }
.badge {
  font-family:var(--mono); font-size:9px; letter-spacing:.22em; padding:5px 10px; font-weight:700;
  clip-path:polygon(5px 0,100% 0,100% calc(100% - 5px),calc(100% - 5px) 100%,0 100%,0 5px);
}
.b-legendary { background:rgba(255,30,45,.16); color:var(--red); }
.b-epic { background:rgba(155,92,255,.14); color:var(--purple); }
.b-rare { background:rgba(63,169,255,.14); color:var(--blue); }
.b-uncommon { background:rgba(53,208,127,.14); color:var(--green); }
.b-gold { background:rgba(255,179,0,.14); color:var(--gold); }

/* ═══ O JOGO ═══ */
.jogo { padding:clamp(80px,12vh,160px) clamp(20px,6vw,90px); max-width:1400px; margin:0 auto; }
.jogo-head { margin-bottom:clamp(36px,5vw,64px); }
.jogo-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:clamp(28px,4vw,72px); align-items:start; }
.steps { display:flex; flex-direction:column; gap:clamp(22px,3vw,38px); }
.step { display:grid; grid-template-columns:auto 1fr; gap:20px; align-items:start; }
.step-num {
  font-family:var(--anton); font-size:clamp(38px,4.5vw,62px); line-height:1; color:transparent;
  -webkit-text-stroke:2px var(--red);
}
.step h3 { font-family:var(--anton); font-size:clamp(20px,2.4vw,28px); letter-spacing:.04em; margin-bottom:6px; }
.step p { color:var(--grey); font-size:15px; max-width:44ch; }
.arcade {
  position:relative; background:linear-gradient(150deg,#120607,var(--bg-2) 60%);
  border:1px solid #2a1214; padding:clamp(28px,4vw,52px); overflow:clip;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  display:flex; flex-direction:column; align-items:flex-start; gap:16px;
}
.arcade-pre { font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--red); }
.arcade-title { font-family:var(--anton); font-size:clamp(52px,7vw,96px); line-height:.9; letter-spacing:.01em; }
.arcade-title em { color:var(--red); filter:drop-shadow(0 0 26px rgba(255,30,45,.5)); }
#arcadeHeads { width:100%; max-width:440px; height:auto; }
.arcade-txt { color:var(--grey); font-size:15px; max-width:52ch; }

/* ═══ TOYVERSE ═══ */
.toyverse {
  min-height:88vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; padding:100px 16px; position:relative; overflow:clip;
  background:radial-gradient(ellipse 65% 55% at 50% 62%, rgba(255,30,45,.14), transparent 70%);
}
.tv-pre { font-family:var(--anton); font-size:clamp(26px,4vw,54px); letter-spacing:.5em; padding-left:.5em; }
.tv-title {
  font-family:var(--marker); font-weight:400; color:var(--red);
  font-size:clamp(72px,15vw,280px); line-height:1; margin:4px 0 12px;
  transform:rotate(-3deg);
  filter:url(#roughen) drop-shadow(0 0 70px rgba(255,30,45,.45));
  user-select:none;
}
.tv-sub { font-family:var(--mono); font-size:clamp(11px,1.4vw,14px); letter-spacing:.32em; color:var(--grey); margin-bottom:44px; line-height:2.1; }

/* ═══ FOOTER ═══ */
.footer { border-top:1px solid var(--line); padding:40px clamp(20px,6vw,90px); display:flex; align-items:center; gap:24px; flex-wrap:wrap; }
.f-logo { font-family:var(--anton); font-size:26px; }
.f-logo em { color:var(--red); }
.f-cols { margin-left:auto; display:flex; gap:28px; flex-wrap:wrap; font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--grey); }
.f-hint { color:var(--red); animation:blink 2.4s steps(2) infinite; }

/* ═══ MODAIS ═══ */
.modal { position:fixed; inset:0; z-index:150; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(0,0,0,.8); backdrop-filter:blur(8px); }
.modal[hidden] { display:none; }
.modal-card {
  position:relative; background:var(--bg-2); border:1px solid #2a1214; text-align:center;
  padding:clamp(36px,6vw,64px); max-width:520px; width:100%;
  clip-path:polygon(22px 0,100% 0,100% calc(100% - 22px),calc(100% - 22px) 100%,0 100%,0 22px);
  animation:popIn .35s cubic-bezier(.2,1.4,.3,1);
}
@keyframes popIn { from { transform:scale(.8) rotate(-2deg); opacity:0 } }
.modal-x { font-family:var(--anton); font-size:64px; color:var(--red); line-height:1; filter:drop-shadow(0 0 20px rgba(255,30,45,.6)); }
.modal-card h3 { font-family:var(--anton); font-size:clamp(28px,5vw,40px); line-height:1.05; margin:16px 0 14px; letter-spacing:.02em; }
.modal-card h3 em { color:var(--red); }
.modal-card p { color:var(--grey); font-size:15px; margin-bottom:28px; }
.modal-close { position:absolute; top:14px; right:16px; background:none; border:none; color:var(--grey); font-size:18px; z-index:2; }
.modal-close:hover { color:var(--red); }

/* ficha do toy */
.ficha-card { max-width:860px; text-align:left; padding:clamp(24px,4vw,44px); }
.ficha-grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.1fr); gap:clamp(20px,4vw,44px); align-items:center; }
.ficha-img img { width:100%; max-height:62vh; object-fit:contain; display:block; }
.ficha-num { font-family:var(--mono); font-size:11px; letter-spacing:.3em; color:var(--grey); margin-bottom:8px; }
.ficha-name { font-family:var(--anton); font-size:clamp(30px,4.5vw,52px); line-height:1; margin-bottom:14px; }
.ficha-lore { color:var(--grey); font-size:15px; margin:18px 0 14px; max-width:40ch; }
.ficha-specs { font-family:var(--mono); font-size:10px; letter-spacing:.22em; color:var(--grey); margin-bottom:14px; }
.ficha-traits { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
.ficha-traits i {
  font-style:normal; font-family:var(--mono); font-size:9px; letter-spacing:.18em; font-weight:700;
  color:var(--white); border:1px solid var(--line); padding:6px 10px;
}
.ficha-game { font-family:var(--mono); font-size:10px; letter-spacing:.2em; color:var(--red); margin-bottom:24px; }
.ficha-stats { display:flex; flex-direction:column; gap:12px; margin-bottom:28px; }
.fs-row { display:grid; grid-template-columns:72px 1fr; align-items:center; gap:14px;
  font-family:var(--mono); font-size:10px; letter-spacing:.24em; color:var(--grey); }
.fs-row i { display:block; height:8px; background:var(--line); overflow:hidden;
  clip-path:polygon(3px 0,100% 0,100% calc(100% - 3px),calc(100% - 3px) 100%,0 100%,0 3px); }
.fs-row b { display:block; height:100%; width:0%; background:linear-gradient(90deg, var(--red-dk), var(--red)); }

/* ═══ reveals (JS liga) ═══ */
.rv { opacity:0; transform:translateY(46px); }

/* ═══ MOBILE ═══ */
@media (max-width: 760px) {
  .nav { gap:12px; padding:12px 14px; }
  .nav-links, .nav-clock { display:none; }
  .nav-cta { margin-left:auto; font-size:12px; padding:11px 16px; }
  .hero { padding-top:96px; padding-bottom:96px; }
  .hero-stage { margin-top:-8px; }
  .hero-pack { height:min(40vh,340px); }
  .hero-ring { width:min(92vw,420px); }
  .hero-meta { gap:18px 28px; margin-top:26px; }
  .marquee-red { transform:rotate(-1.5deg) scale(1.04); }
  .packs-track { gap:34px; padding:0 24px; }
  .pack img { height:290px; }
  .pack:nth-child(even) { margin-top:22px; }
  .toys-hint { margin-left:0; }
  .jogo-grid { grid-template-columns:1fr; }
  .banner-hint span { letter-spacing:.2em; }
  .drop-x { display:none; }
  .drop-count { flex-wrap:nowrap; }
  .f-cols { margin-left:0; }
  .ficha-grid { grid-template-columns:1fr; }
  .ficha-img img { max-height:34vh; margin:0 auto; }
  .ficha-card { text-align:center; }
  .ficha-lore { margin-left:auto; margin-right:auto; }
  .fs-row { text-align:left; }
}

@media (prefers-reduced-motion: reduce) {
  .grain, .hero-bg-x, .marquee-track, .loader-x, .pack, .hero-pack, .hero-glow, .hero-ring, .f-hint { animation:none; }
  html { scroll-behavior:auto; }
}