/* Página pública de apresentação: conteúdo real no HTML inicial para
   visitantes e mecanismos de busca, antes do app autenticado.
   v2 — mais "JoJo": linhas de velocidade, retícula (halftone), ゴゴゴ,
   letreiro em movimento, cartas com brilho e animações de entrada. */

.landing-page{
    --pad:clamp(20px,5.5vw,84px);
    --violet:#8558ff;
    --violet-deep:#3b1f9e;
    --ease:cubic-bezier(.2,.75,.2,1);
    max-width:1500px;
    margin:0 auto;
    padding:0 var(--pad);
    position:relative;
    isolation:isolate;
    background:transparent;
}

/* O fundo ocupa a viewport toda, mesmo com o conteúdo central limitado. */
body:has(.landing-page){
    overflow-x:clip;
    background:
        radial-gradient(ellipse at 78% 8%,rgba(109,67,213,.22),transparent 38%),
        radial-gradient(ellipse at 6% 62%,rgba(201,168,79,.06),transparent 36%),
        #0c0c0f;
    background-attachment:fixed;
}

/* Usuários com sessão salva veem o jogo assim que a sessão é validada,
   sem um flash da landing durante o carregamento inicial. */
.has-cached-session .landing-page{visibility:hidden}
.landing-page{font-weight:500}

/* ---------- animação de entrada (só ativa se o JS rodar) ---------- */
.js-reveal [data-reveal]{opacity:0;translate:0 34px;transition:opacity .85s var(--ease) var(--rd,0s),translate .85s var(--ease) var(--rd,0s)}
.js-reveal [data-reveal].is-in{opacity:1;translate:0 0}

/* ---------- navegação ---------- */
.landing-nav{
    position:sticky;top:0;z-index:30;
    height:84px;display:flex;align-items:center;justify-content:space-between;gap:24px;
    margin:0 calc(-1*var(--pad));padding:0 var(--pad);
    border-bottom:1px solid rgba(255,255,255,.07);
    transition:background .3s,backdrop-filter .3s,height .3s,border-color .3s;
}
.landing-nav.is-stuck{height:68px;background:rgba(12,12,15,.78);backdrop-filter:blur(14px) saturate(1.3);-webkit-backdrop-filter:blur(14px) saturate(1.3);border-color:rgba(201,168,79,.22)}
.landing-brand{display:inline-flex;align-items:center;gap:9px;color:var(--text);text-decoration:none;flex-shrink:0}
.landing-brand svg{width:27px;height:27px;fill:var(--gold);filter:drop-shadow(0 0 8px rgba(201,168,79,.5))}
.landing-brand span{display:flex;flex-direction:column;line-height:.95}
.landing-brand b{font:900 1.38rem/1 var(--font-sfx);letter-spacing:.04em}
.landing-brand small{margin-top:4px;color:var(--text-secondary);font-size:.64rem;letter-spacing:.2em}
.landing-nav-links,.landing-nav-actions{display:flex;align-items:center;gap:clamp(14px,2.5vw,34px)}
.landing-nav-links a,.landing-login{position:relative;color:#c9c8d0;text-decoration:none;font:600 .84rem "Poppins",sans-serif;transition:color .2s}
.landing-nav-links button{position:relative;padding:0;border:0;background:none;color:#c9c8d0;font:600 .84rem "Poppins",sans-serif;cursor:pointer;transition:color .2s}
.landing-nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.landing-nav-links button::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.landing-nav-links a:hover::after{transform:scaleX(1)}
.landing-nav-links button:hover::after{transform:scaleX(1)}
.landing-nav-links a:hover,.landing-nav-links button:hover,.landing-login:hover{color:var(--gold-light)}
.landing-nav-actions .lang-switch-slot{margin:0}
.landing-nav-actions .lang-switch-label{display:none}
.landing-login{background:none;border:0;cursor:pointer;padding:10px 0}

/* ---------- botões ---------- */
.landing-signup,.landing-primary,.landing-outline{position:relative;overflow:hidden;display:inline-flex;align-items:center;justify-content:center;gap:17px;min-height:48px;padding:0 21px;border-radius:8px;font:700 .86rem "Poppins",sans-serif;cursor:pointer;transition:transform .25s var(--ease),filter .2s,border-color .2s,box-shadow .25s}
.landing-signup,.landing-primary{border:1px solid #e3c770;background:linear-gradient(135deg,#f6e09a,#bd963c);color:#17130a;box-shadow:0 8px 26px rgba(201,168,79,.2)}
.landing-primary{min-height:58px;padding:0 28px;font-size:1rem;animation:landing-pulse 3.2s ease-out infinite}
.landing-signup::after,.landing-primary::after{content:"";position:absolute;inset:0;background:linear-gradient(105deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%);transform:translateX(-120%)}
.landing-signup:hover::after,.landing-primary:hover::after{transform:translateX(120%);transition:transform .7s var(--ease)}
.landing-signup:hover,.landing-primary:hover,.landing-outline:hover{transform:translateY(-3px);filter:brightness(1.07)}
.landing-signup b,.landing-primary b,.landing-outline b{font-size:1.1rem;transition:transform .25s var(--ease)}
.landing-primary:hover b,.landing-outline:hover b{transform:translate(3px,-3px)}
.landing-outline{border:1px solid rgba(222,193,104,.55);background:transparent;color:#eddbab;text-decoration:none}
.landing-outline:hover{border-color:var(--gold);background:rgba(201,168,79,.08)}
@keyframes landing-pulse{0%{box-shadow:0 10px 34px rgba(201,168,79,.28),0 0 0 0 rgba(201,168,79,.45)}70%,100%{box-shadow:0 10px 34px rgba(201,168,79,.28),0 0 0 18px rgba(201,168,79,0)}}

/* ---------- títulos ---------- */
.landing-eyebrow{display:flex;align-items:center;gap:10px;margin:0 0 18px;color:#d5b85e;font-size:.69rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase}
.landing-eyebrow i{display:block;width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 13px var(--gold)}
.landing-hero h1,.landing-section h2,.landing-collection h2,.landing-how h2,.landing-final h2{margin:0;font:700 clamp(2.5rem,4.8vw,4.3rem)/1.04 "Cinzel",serif;letter-spacing:-.025em;text-transform:uppercase;color:#f4f0e5;text-shadow:0 7px 34px rgba(0,0,0,.45)}
.landing-hero h1{font-size:clamp(3.2rem,5.6vw,5.4rem)}
.landing-hero h1 em,.landing-section h2 em,.landing-collection h2 em,.landing-how h2 em,.landing-final h2 em{font-style:italic;color:transparent;background:linear-gradient(100deg,#fff2c1 0%,#d4b45b 46%,#a57c27 100%);background-clip:text;-webkit-background-clip:text}
.landing-collection h2 em{display:block;max-width:100%;overflow-wrap:anywhere}
/* sombra "dura" roxa estilo mangá atrás do dourado */
.landing-hero h1 em{display:inline-block;filter:drop-shadow(3px 4px 0 var(--violet-deep)) drop-shadow(0 0 30px rgba(201,168,79,.22))}

/* ---------- hero ---------- */
.landing-hero{position:relative;min-height:640px;display:grid;grid-template-columns:1.03fr .97fr;align-items:center}
.landing-hero-bg{position:absolute;inset:0 calc(-1*var(--pad));pointer-events:none;overflow:hidden}
.landing-hero-bg::before{ /* linhas de velocidade girando bem devagar */
    content:"";position:absolute;width:1500px;height:1500px;left:calc(74% - 750px);top:calc(50% - 750px);
    background:repeating-conic-gradient(rgba(255,255,255,.055) 0deg .7deg,transparent .7deg 5deg);
    mask-image:radial-gradient(circle,#000 6%,transparent 52%);-webkit-mask-image:radial-gradient(circle,#000 6%,transparent 52%);
    animation:landing-spin 120s linear infinite;
}
.landing-hero-bg::after{ /* retícula (halftone) roxa */
    content:"";position:absolute;inset:0;
    background:radial-gradient(rgba(133,88,255,.5) 1.3px,transparent 1.8px) 0 0/15px 15px;
    mask-image:radial-gradient(ellipse at 88% 100%,#000,transparent 55%);-webkit-mask-image:radial-gradient(ellipse at 88% 100%,#000,transparent 55%);
    opacity:.55;
}
.landing-ghost{position:absolute;left:-1%;bottom:-6%;font:clamp(7rem,19vw,17rem)/1 var(--font-sfx);letter-spacing:.04em;color:transparent;-webkit-text-stroke:1px rgba(133,88,255,.26);white-space:nowrap;transform:rotate(-5deg);user-select:none}
.landing-hero-copy{position:relative;z-index:2;padding:72px 0 80px;max-width:670px}
.landing-hero-lead{max-width:560px;margin:26px 0 0;color:#cdcbd5;font-size:1.04rem;font-weight:500;line-height:1.8}
.landing-hero-actions{display:flex;align-items:center;gap:26px;flex-wrap:wrap;margin-top:34px}
.landing-secondary{display:inline-flex;align-items:center;gap:11px;color:#e2d9bd;text-decoration:none;font-size:.88rem;font-weight:600;transition:color .2s}
.landing-secondary:hover{color:var(--gold-light)}
.landing-play-icon{display:grid;place-items:center;width:34px;height:34px;padding-left:2px;border:1px solid rgba(235,209,137,.5);border-radius:50%;color:var(--gold-light);font-size:.62rem;transition:background .25s,transform .25s var(--ease)}
.landing-secondary:hover .landing-play-icon{background:rgba(235,209,137,.14);transform:scale(1.1)}
.landing-platform-note{display:flex;align-items:center;gap:9px;margin:30px 0 0;color:#96939f;font-size:.76rem}.landing-platform-note span:first-child{color:var(--gold)}

.landing-hero-art{position:relative;z-index:1;height:560px;align-self:stretch;isolation:isolate;transform:perspective(1100px) rotateY(calc(var(--mx,0)*11deg)) rotateX(calc(var(--my,0)*-9deg));transition:transform .25s ease-out}
.landing-art-glow{position:absolute;width:80%;aspect-ratio:1;left:8%;top:10%;border-radius:50%;background:radial-gradient(circle,rgba(125,76,244,.46),rgba(125,76,244,.1) 46%,transparent 72%);filter:blur(14px);animation:landing-breathe 6s ease-in-out infinite}
.landing-card{position:absolute;top:50%;left:50%;width:clamp(160px,19vw,262px);aspect-ratio:63/88;overflow:hidden;border:2px solid rgba(239,203,100,.8);border-radius:13px;background:#19151e;box-shadow:0 30px 60px rgba(0,0,0,.65);transform-origin:50% 80%;transition:transform .6s var(--ease),filter .4s;animation:landing-float 7s ease-in-out infinite}
.landing-card img{display:block;width:100%;height:100%;object-fit:cover}
.landing-card::after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 32%,rgba(255,255,255,.34) 47%,rgba(150,110,255,.26) 53%,transparent 68%);transform:translateX(-130%);pointer-events:none}
.landing-hero-art:hover .landing-card::after{transform:translateX(130%);transition:transform 1s var(--ease)}
.landing-card-kira{transform:translate(-114%,-44%) rotate(-20deg) scale(.82);filter:brightness(.7);animation-delay:-1.2s}
.landing-card-johnny{transform:translate(-84%,-48%) rotate(-12deg) scale(.9);filter:brightness(.84);animation-delay:-3.1s}
.landing-card-giorno{transform:translate(-38%,-54%) rotate(7deg) scale(.94);filter:brightness(.9);animation-delay:-4.6s}
.landing-card-jotaro{z-index:2;transform:translate(-6%,-49%) rotate(9deg);box-shadow:0 30px 74px rgba(0,0,0,.8),0 0 55px rgba(201,168,79,.3);animation-delay:-2s}
.landing-hero-art:hover .landing-card{filter:brightness(1)}
.landing-hero-art:hover .landing-card-kira{transform:translate(-132%,-48%) rotate(-26deg) scale(.84)}
.landing-hero-art:hover .landing-card-johnny{transform:translate(-97%,-54%) rotate(-16deg) scale(.92)}
.landing-hero-art:hover .landing-card-giorno{transform:translate(-43%,-60%) rotate(3deg) scale(.96)}
.landing-hero-art:hover .landing-card-jotaro{transform:translate(-1%,-53%) rotate(13deg) scale(1.03)}
.landing-art-stamp{position:absolute;right:0;bottom:9%;z-index:3;display:flex;flex-direction:column;align-items:center;gap:3px;transform:rotate(-9deg);text-shadow:0 3px 6px #000;animation:landing-stamp 3.6s ease-in-out infinite}
.landing-art-stamp b{color:#b394ff;font:2.5rem var(--font-sfx);letter-spacing:.12em;-webkit-text-stroke:1px #2a1470;paint-order:stroke fill}
.landing-art-stamp small{color:#f0e2b6;font-size:.6rem;line-height:1.25;font-weight:800;letter-spacing:.13em;text-align:center}
@keyframes landing-float{0%,100%{translate:0 0}50%{translate:0 -13px}}
@keyframes landing-breathe{0%,100%{opacity:.85;scale:1}50%{opacity:1;scale:1.07}}
@keyframes landing-stamp{0%,100%{rotate:0deg;scale:1}50%{rotate:2deg;scale:1.07}}
@keyframes landing-spin{to{transform:rotate(360deg)}}

/* ---------- letreiro ---------- */
.landing-marquee{position:relative;z-index:3;margin:0 calc(-1*var(--pad));width:calc(100% + 2*var(--pad));overflow:hidden;transform:rotate(-1.4deg);background:linear-gradient(95deg,#f3dc92,#caa545 55%,#f0d482);border-block:2px solid #17130a;box-shadow:0 12px 40px rgba(0,0,0,.5)}
.landing-marquee-track{display:flex;width:max-content;animation:landing-marquee 38s linear infinite}
.landing-marquee-track>div{display:flex;align-items:center;gap:26px;padding:13px 26px 13px 0;flex-shrink:0}
.landing-marquee span{font:1.15rem var(--font-sfx);letter-spacing:.08em;color:#17130a;white-space:nowrap}
.landing-marquee i{font-style:normal;color:#5b3fc4;font-size:.9rem}
@keyframes landing-marquee{to{transform:translateX(-50%)}}

/* ---------- números ---------- */
.landing-stats{display:grid;grid-template-columns:repeat(4,1fr);padding:60px 0 36px}
.landing-stats div{display:flex;flex-direction:column;align-items:center;gap:6px;border-right:1px solid rgba(255,255,255,.09)}.landing-stats div:last-child{border:0}
.landing-stats strong{font:700 clamp(2.3rem,4.4vw,3.6rem)/1 "Cinzel",serif;background:var(--gold-gradient);background-clip:text;-webkit-background-clip:text;color:transparent;filter:drop-shadow(2px 3px 0 rgba(59,31,158,.7))}
.landing-stats strong span{color:transparent;background:linear-gradient(180deg,#c7b0ff,#8558ff);background-clip:text;-webkit-background-clip:text}
.landing-stats div>span{color:#aaa7b1;font-size:.78rem;letter-spacing:.04em}

/* ---------- seções ---------- */
.landing-section{padding:100px 0 90px}
.landing-section-heading{text-align:center;max-width:720px;margin:0 auto 48px}.landing-section-heading .landing-eyebrow{justify-content:center}
.landing-section-heading>p:last-child{max-width:520px;margin:19px auto 0;color:#aaa7b1;line-height:1.7}

/* modos */
.landing-mode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;max-width:1100px;margin:0 auto}
.landing-mode-card{position:relative;min-height:335px;padding:32px 36px;border:1px solid rgba(255,255,255,.11);border-radius:16px;background:linear-gradient(145deg,rgba(30,26,42,.96),rgba(16,15,21,.98));overflow:hidden;transition:transform .45s var(--ease),border-color .3s,box-shadow .45s}
.landing-mode-card:hover{transform:translateY(-8px);box-shadow:0 26px 60px rgba(0,0,0,.5),0 0 0 1px var(--mode-line)}
.landing-mode-card::before{content:var(--ghost);position:absolute;right:26px;top:8px;font:5.6rem/1 var(--font-sfx);color:transparent;-webkit-text-stroke:1px var(--mode-line);opacity:.55;pointer-events:none}
.landing-mode-card::after{content:"";position:absolute;width:300px;height:300px;right:-100px;bottom:-160px;border-radius:50%;background:var(--mode-glow);filter:blur(48px);pointer-events:none;transition:transform .6s var(--ease)}
.landing-mode-card:hover::after{transform:scale(1.35)}
.landing-duel{--mode-glow:rgba(102,78,205,.34);--mode-line:rgba(160,135,255,.55);--ghost:"VS"}
.landing-war{--mode-glow:rgba(201,168,79,.28);--mode-line:rgba(224,195,107,.55);--ghost:"×4"}
.landing-mode-card.landing-rules{display:block;color:inherit;text-decoration:none;--mode-glow:rgba(201,168,79,.2);--mode-line:rgba(224,195,107,.45);--ghost:"§";background:linear-gradient(145deg,rgba(34,29,38,.98),rgba(17,15,21,.98))}
.landing-rules .landing-mode-icon{border-color:rgba(224,195,107,.38);background:rgba(201,168,79,.1);color:#e5c66d}
.landing-rules .landing-mode-icon svg{fill:none;stroke:currentColor}
.landing-rules-cta{position:absolute;z-index:1;left:36px;bottom:29px;display:flex;align-items:center;gap:9px;color:#e5c66d;font-size:.78rem;font-weight:700;letter-spacing:.03em}
.landing-rules-cta b{font-size:1.1rem;transition:transform .3s var(--ease)}
.landing-rules:hover .landing-rules-cta b{transform:translate(3px,-3px)}
.landing-rules-mark{position:absolute;right:38px;bottom:6px;color:rgba(224,195,107,.14);font:italic 6.6rem/1 "Cinzel",serif;pointer-events:none}
.landing-rules:focus-visible{outline:2px solid #e5c66d;outline-offset:4px}
.landing-mode-icon{display:grid;place-items:center;width:50px;height:50px;margin-bottom:25px;border:1px solid rgba(181,153,255,.35);border-radius:12px;background:rgba(116,80,215,.16);color:#c0a8ff;font-size:1.4rem}.landing-mode-icon svg{width:24px;height:24px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}.landing-war .landing-mode-icon{display:flex;flex-wrap:wrap;gap:3px;padding:12px;border-color:rgba(224,195,107,.38);background:rgba(201,168,79,.1)}.landing-four{align-content:center}.landing-four i,.landing-war-board i{width:9px;height:9px;border-radius:2px;background:#4f8fe8}.landing-four i:nth-child(2),.landing-war-board i:nth-child(2){background:#e8674f}.landing-four i:nth-child(3),.landing-war-board i:nth-child(3){background:#4fbf7a}.landing-four i:nth-child(4),.landing-war-board i:nth-child(4){background:#b07be8}
.landing-mode-card>small{color:#b2a9c6;font-size:.66rem;font-weight:700;letter-spacing:.18em}.landing-mode-card h3{margin:6px 0 10px;font:700 2.3rem "Cinzel",serif;color:#f6ebc9}.landing-mode-card p{position:relative;z-index:1;max-width:390px;margin:0;color:#b0adb8;font-size:.9rem;font-weight:500;line-height:1.7}
.landing-duel-board,.landing-war-board{position:absolute;right:34px;bottom:26px;display:grid;grid-template-columns:repeat(3,29px);gap:4px;opacity:.7;transform:perspective(320px) rotateX(14deg) rotateZ(-8deg);transition:transform .6s var(--ease),opacity .3s}.landing-mode-card:hover .landing-duel-board{transform:perspective(320px) rotateX(4deg) rotateZ(-3deg) scale(1.08);opacity:1}.landing-mode-card:hover .landing-war-board{transform:rotate(0) scale(1.1);opacity:1}
.landing-duel-board i{height:36px;border:1px solid rgba(182,163,255,.4);border-radius:4px;background:rgba(91,68,153,.24)}.landing-duel-board i:nth-child(2),.landing-duel-board i:nth-child(5){background:rgba(201,168,79,.36);border-color:rgba(201,168,79,.55)}.landing-war-board{grid-template-columns:repeat(2,32px);grid-auto-rows:32px}.landing-war-board i{width:32px;height:32px;flex-shrink:0}
.landing-gameplay-demos{max-width:1100px;margin:62px auto 0}
.landing-demo-heading{margin:0 0 22px;text-align:center;color:#f3e8c9;font:700 clamp(1.35rem,2.4vw,1.8rem)/1.2 "Cinzel",serif}
.landing-demo-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
.landing-demo-card{margin:0;overflow:hidden;border:1px solid rgba(255,255,255,.12);border-radius:14px;background:linear-gradient(145deg,rgba(30,26,42,.96),rgba(16,15,21,.98));box-shadow:0 16px 38px rgba(0,0,0,.24)}
.landing-demo-card img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#17151c}

/* Partes — cartas coloridas com as cores que o jogo usa nas bordas */
.landing-parts{padding-top:40px}
.landing-parts-row{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:clamp(8px,1.4vw,18px);max-width:1180px;margin:0 auto}
.landing-part{--c:#C9A84F;position:relative;aspect-ratio:63/88;display:flex;flex-direction:column;align-items:center;justify-content:space-between;padding:16px 8px 14px;border:2px solid var(--c);border-radius:12px;background:radial-gradient(ellipse at 50% 30%,color-mix(in srgb,var(--c) 34%,#16131c),#0f0e13 72%);text-align:center;overflow:hidden;transition:transform .45s var(--ease),box-shadow .45s}
.landing-part::before{content:"";position:absolute;inset:0;background:radial-gradient(color-mix(in srgb,var(--c) 55%,transparent) 1px,transparent 1.5px) 0 0/9px 9px;mask-image:linear-gradient(180deg,transparent 30%,#000);-webkit-mask-image:linear-gradient(180deg,transparent 30%,#000);opacity:.35}
.landing-part b{position:relative;margin-top:22%;font:clamp(1.5rem,3.2vw,2.8rem)/1 var(--font-sfx);color:var(--c);text-shadow:0 0 22px color-mix(in srgb,var(--c) 70%,transparent),2px 3px 0 rgba(0,0,0,.6)}
.landing-part span{position:relative;font:700 clamp(.58rem,.95vw,.76rem)/1.25 "Poppins",sans-serif;letter-spacing:.07em;text-transform:uppercase;color:#ece6d4}
.landing-part small{display:block;margin-top:5px;font-size:.68em;font-weight:500;letter-spacing:.02em;text-transform:none;color:#b9b2a2}
.landing-part:nth-child(odd){translate:0 14px}
.landing-part:hover{transform:translateY(-14px) rotate(-2deg);box-shadow:0 22px 44px rgba(0,0,0,.55),0 0 36px color-mix(in srgb,var(--c) 45%,transparent)}

/* coleção */
.landing-collection{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:clamp(35px,7vw,100px);padding:56px clamp(24px,7vw,100px);border:1px solid rgba(201,168,79,.22);border-radius:22px;background:radial-gradient(ellipse at 22% 52%,rgba(116,72,204,.24),transparent 50%),linear-gradient(120deg,#17141f,#100f14);overflow:hidden}
.landing-collection-copy{min-width:0;max-width:100%}
.landing-collection h2{font-size:clamp(2.2rem,3.9vw,3.6rem)}
.landing-collection-copy>p:not(.landing-eyebrow){max-width:500px;color:#b4b1ba;line-height:1.8}
.landing-collection ul{display:grid;gap:12px;padding:0;margin:22px 0 28px;list-style:none;color:#ddd8c9;font-size:.9rem}
.landing-collection li::before{content:"✓";display:inline-grid;place-items:center;width:20px;height:20px;margin-right:10px;border-radius:50%;background:rgba(99,184,131,.14);color:#7cce9a;font-size:.72rem;font-weight:bold}
.landing-collection-art{position:relative;height:410px;display:flex;align-items:center;justify-content:center}
.landing-collection-art::before{content:"";position:absolute;width:310px;aspect-ratio:1;border-radius:50%;background:rgba(131,83,245,.26);filter:blur(52px)}
.landing-collection-art img{position:absolute;width:clamp(145px,17vw,225px);aspect-ratio:63/88;object-fit:cover;border:2px solid #c3a45c;border-radius:11px;box-shadow:0 24px 48px rgba(0,0,0,.6);transition:transform .6s var(--ease)}
.landing-collection-art img:nth-child(1){transform:translate(-60%,-5%) rotate(-16deg)}
.landing-collection-art img:nth-child(2){transform:translate(-2%,-15%) rotate(2deg);z-index:2}
.landing-collection-art img:nth-child(3){transform:translate(53%,-2%) rotate(15deg)}
.landing-collection:hover .landing-collection-art img:nth-child(1){transform:translate(-72%,-6%) rotate(-22deg)}
.landing-collection:hover .landing-collection-art img:nth-child(2){transform:translate(-2%,-22%) rotate(0deg) scale(1.04)}
.landing-collection:hover .landing-collection-art img:nth-child(3){transform:translate(64%,-3%) rotate(21deg)}
.landing-collection-art>span{position:absolute;z-index:3;right:2%;bottom:5%;color:#b394ff;font:3rem var(--font-sfx);letter-spacing:.1em;transform:rotate(-8deg);-webkit-text-stroke:1px #2a1470;text-shadow:0 4px 14px #000}

/* como jogar */
.landing-how{padding-bottom:80px}
.landing-steps{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;max-width:1080px;margin:0 auto}
.landing-steps article{position:relative;padding:30px 30px 32px;border:1px solid rgba(255,255,255,.09);border-radius:16px;background:linear-gradient(160deg,rgba(26,23,36,.9),rgba(15,14,19,.9));overflow:hidden;transition:transform .4s var(--ease),border-color .3s}
.landing-steps article:hover{transform:translateY(-6px);border-color:rgba(201,168,79,.5)}
.landing-steps article>span{display:block;font:900 4.6rem/1 var(--font-display);color:transparent;-webkit-text-stroke:1px rgba(201,168,79,.65);letter-spacing:-.02em;transition:color .4s}
.landing-steps article:hover>span{color:rgba(201,168,79,.16)}
.landing-steps h3{margin:12px 0 8px;color:#f0e6c8;font:800 1.3rem var(--font-display)}
.landing-steps p{margin:0;color:#aaa7b1;font-size:.88rem;line-height:1.7}

/* perguntas */
.landing-faq{display:grid;grid-template-columns:.8fr 1.2fr;gap:65px;padding:60px 0 90px}
.landing-faq h2{margin:0;color:#eee7d6;font:700 clamp(1.8rem,3.2vw,2.6rem)/1.1 "Cinzel",serif}
.landing-faq-list details{border-bottom:1px solid rgba(255,255,255,.1)}
.landing-faq-list summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:20px 0;cursor:pointer;list-style:none;color:#e9e4d8;font-weight:600;transition:color .2s}
.landing-faq-list summary::-webkit-details-marker{display:none}
.landing-faq-list summary::after{content:"+";flex-shrink:0;display:grid;place-items:center;width:28px;height:28px;border:1px solid rgba(201,168,79,.45);border-radius:50%;color:var(--gold);font-size:1.15rem;transition:transform .3s var(--ease),background .3s}
.landing-faq-list summary:hover{color:var(--gold-light)}
.landing-faq-list details[open] summary::after{transform:rotate(45deg);background:rgba(201,168,79,.14)}
.landing-faq-list details p{margin:0 0 20px;color:#aaa7b1;font-size:.92rem;line-height:1.75;max-width:620px}

/* chamada final */
.landing-final{position:relative;display:flex;flex-direction:column;align-items:center;padding:90px 22px 96px;border:1px solid rgba(201,168,79,.3);border-radius:22px;text-align:center;overflow:hidden;background:radial-gradient(ellipse at 50% 105%,rgba(120,76,217,.34),transparent 60%),linear-gradient(140deg,#191622,#101014)}
.landing-final::before{content:"";position:absolute;inset:-50%;background:repeating-conic-gradient(from 0deg at 50% 62%,rgba(255,255,255,.05) 0 .8deg,transparent .8deg 6deg);mask-image:radial-gradient(circle at 50% 62%,#000 8%,transparent 46%);-webkit-mask-image:radial-gradient(circle at 50% 62%,#000 8%,transparent 46%);pointer-events:none}
.landing-final>*{position:relative}
.landing-final .landing-eyebrow{justify-content:center}
.landing-final h2{margin:0 0 30px;font-size:clamp(2.3rem,4.6vw,4rem)}
.landing-footer{display:flex;align-items:center;justify-content:space-between;gap:25px;padding:34px 0 38px}
.landing-footer p{color:#85828d;font-size:.72rem;text-align:center}
.landing-footer .lang-switch-slot{display:none}
.landing-tier-list-link{color:#d9bd69;font-size:.76rem;font-weight:700;text-decoration:none;white-space:nowrap}.landing-tier-list-link:hover{color:#f0dda0}

/* usado pelas telas de login/cadastro para voltar */
.landing-back-link{display:block;margin:15px auto 0;padding:6px;border:0;background:none;color:#bdb2d9;font:500 .82rem "Poppins",sans-serif;text-decoration:underline;cursor:pointer}.landing-back-link:hover{color:var(--gold-light)}

.public-collection-shell{min-height:100vh;padding-bottom:48px;background:radial-gradient(ellipse at 80% 0,rgba(109,67,213,.16),transparent 38%),#0c0c0f}
.public-collection-toolbar{max-width:1200px;margin:0 auto;padding:24px 42px 0;display:flex;align-items:center;justify-content:space-between;gap:20px}
.public-collection-back{display:inline-block;padding:10px 14px;border:1px solid rgba(201,168,79,.35);border-radius:8px;background:rgba(255,255,255,.03);color:#e7d6aa;font:600 .84rem "Poppins",sans-serif;text-decoration:none;cursor:pointer;transition:background .2s,border-color .2s}
.public-collection-back:hover{border-color:var(--gold);background:rgba(201,168,79,.1)}
.public-collection-shell .collection-page{padding-top:20px}

/* ---------- responsivo ---------- */
@media(max-width:980px){
    .landing-parts-row{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}
    .landing-part:nth-child(odd){translate:0 0}
}
@media(max-width:900px){
    .landing-page{--pad:24px}
    .landing-mode-grid{grid-template-columns:1fr;gap:14px}
    .landing-mode-card{min-height:290px;padding:24px}
    .landing-mode-card::before{font-size:4.2rem}
    .landing-mode-card p{max-width:76%;font-size:.84rem}
    .landing-rules-cta{left:24px}
    .landing-hero{min-height:560px;grid-template-columns:1fr .85fr}
    .landing-hero-art{height:480px}
    .landing-card{width:clamp(145px,21vw,205px)}
    .landing-collection{padding:40px 28px;gap:35px}
    .landing-collection-art{height:330px}
    .landing-faq{gap:35px}
}
@media(max-width:680px){
    .landing-page{--pad:17px}
    .landing-nav{height:68px;gap:10px}.landing-nav.is-stuck{height:60px}
    .landing-brand svg{width:23px}.landing-brand b{font-size:1.12rem}.landing-brand small{font-size:.54rem}
    .landing-nav-links{display:none}
    .landing-nav-actions{gap:12px}.landing-login{font-size:.78rem}
    .landing-signup{min-height:40px;padding:0 12px;font-size:.75rem}
    .landing-nav-actions .lang-switch{gap:2px}.landing-nav-actions .lang-switch-option{padding:5px 7px;font-size:.68rem}.landing-nav-actions .lang-switch-slot{display:flex}
    .landing-hero{display:flex;flex-direction:column;align-items:stretch;min-height:0;padding-top:40px}
    .landing-hero-copy{padding:0}
    .landing-eyebrow{font-size:.6rem;letter-spacing:.12em}
    .landing-hero h1{font-size:clamp(2.75rem,13vw,4.1rem)}
    .landing-hero-lead{margin-top:17px;font-size:.92rem}
    .landing-hero-actions{gap:17px;margin-top:24px}
    .landing-primary{min-height:52px;padding:0 20px;font-size:.88rem}
    .landing-secondary{font-size:.78rem}
    .landing-platform-note{margin:18px 0 0;font-size:.68rem}
    .landing-hero-art{height:370px;margin-top:10px;margin-bottom:34px}
    .landing-card{width:clamp(140px,42vw,190px)}
    .landing-card-kira{transform:translate(-105%,-45%) rotate(-19deg) scale(.78)}
    .landing-card-johnny{transform:translate(-79%,-48%) rotate(-11deg) scale(.86)}
    .landing-card-giorno{transform:translate(-37%,-53%) rotate(6deg) scale(.92)}
    .landing-card-jotaro{transform:translate(-5%,-48%) rotate(10deg)}
    .landing-art-stamp{right:0;bottom:3%}.landing-art-stamp b{font-size:1.8rem}
    .landing-marquee span{font-size:.95rem}
    .landing-stats{grid-template-columns:repeat(2,1fr);row-gap:26px;padding:42px 0 18px}
    .landing-stats div:nth-child(2){border:0}
    .landing-stats div>span{font-size:.7rem}
    .landing-section{padding:70px 0 64px}
    .landing-section-heading{margin-bottom:30px}
    .landing-section-heading>p:last-child{font-size:.88rem}
    .landing-gameplay-demos{margin-top:42px}
    .landing-demo-grid{grid-template-columns:1fr;gap:16px}
    .landing-parts{padding-top:20px}
    .landing-parts-row{display:flex;overflow-x:auto;gap:12px;padding:16px var(--pad) 22px;margin:0 calc(-1*var(--pad));scroll-snap-type:x mandatory;scrollbar-width:none}
    .landing-parts-row::-webkit-scrollbar{display:none}
    .landing-part{flex:0 0 138px;scroll-snap-align:center}
    .landing-part b{font-size:2.2rem}.landing-part span{font-size:.66rem}
    .landing-collection{grid-template-columns:minmax(0,1fr);min-width:0;padding:30px clamp(16px,4vw,21px);gap:20px}
    .landing-collection h2{max-width:100%;font-size:clamp(1.65rem,6.7vw,2.5rem);line-height:1.08;letter-spacing:-.04em;overflow-wrap:break-word}
    .landing-collection-copy>p:not(.landing-eyebrow){max-width:100%;overflow-wrap:anywhere}
    .landing-collection-art{height:300px;grid-row:2}
    .landing-collection-art img{width:clamp(140px,39vw,190px)}
    .landing-collection-copy>p:not(.landing-eyebrow){font-size:.89rem;line-height:1.7}
    .landing-collection ul{font-size:.82rem}
    .landing-how{padding-bottom:60px}
    .landing-steps{grid-template-columns:1fr;gap:12px}
    .landing-steps article{padding:22px 22px 24px}
    .landing-steps article>span{font-size:3.4rem}
    .landing-faq{grid-template-columns:1fr;gap:14px;padding:40px 0 62px}
    .landing-faq h2{font-size:1.8rem}
    .landing-faq-list summary{font-size:.92rem}
    .landing-final{padding:62px 16px 66px}
    .landing-footer{flex-wrap:wrap;justify-content:center;padding:24px 0;text-align:center}
    .landing-footer p{order:3;flex-basis:100%;margin:0}
    .public-collection-toolbar{padding:18px 10px 0}
}
@media(prefers-reduced-motion:reduce){
    .landing-card,.landing-art-glow,.landing-art-stamp,.landing-primary,.landing-hero-bg::before,.landing-marquee-track{animation:none}
    .landing-card,.landing-signup,.landing-primary,.landing-outline,.landing-mode-card,.landing-part,.landing-steps article,.landing-hero-art{transition:none}
    .landing-hero-art{transform:none}
    .js-reveal [data-reveal]{opacity:1;translate:0 0;transition:none}
}