/* home.css — Dungeonlog: masmorra em pixel art, no grafite do app. Cenário: ansimuz (Luis Zuno), CC0. */
:root{ --bg:#282828; --panel:#323232; --panel2:#3D3D3D; --line:#4A4A4A; --text:#FAFAFA; --muted:#C2C2C2; --dim:#909090; --gold:#ffffff; --pink:#ffffff; --ink:#141414; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }
body{ background:var(--bg); color:var(--text); font-family:'Outfit',system-ui,sans-serif; font-size:17px; line-height:1.6; }
h1,h2,h3{ font-family:'Outfit',system-ui,sans-serif; font-weight:800; letter-spacing:-.015em; }
a{ color:var(--text); }
:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px; }
.skip{ position:absolute; left:-999px; top:8px; background:#fff; color:#111; padding:8px 12px; border-radius:4px; z-index:20; }
.skip:focus{ left:8px; }

/* ---------- topo ---------- */
.topbar{ position:absolute; inset:0 0 auto 0; z-index:5; display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 28px; }
.topbar .brand{ display:flex; align-items:center; gap:10px; text-decoration:none; }
.topbar .brand img{ width:30px; height:30px; border-radius:4px; image-rendering:auto; }
.topbar .brand span{ font-family:'Outfit',sans-serif; font-weight:800; font-size:1.3rem; line-height:1; color:#fff; }
.topbar nav{ display:flex; align-items:center; gap:24px; font-size:.98rem; font-weight:600; }
.topbar nav a{ color:#e4e4e4; text-decoration:none; text-shadow:0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.6); }
.topbar nav a:hover{ color:#fff; }
.lang{ display:flex; align-items:center; gap:4px; font-size:.9rem; }
.lang a{ color:var(--dim); text-decoration:none; padding:3px 8px; border-radius:3px; }
.lang a.active{ color:#fff; background:rgba(255,255,255,.12); }
.lang .sep{ color:var(--dim); }
.menu-btn{ display:none; width:42px; height:42px; margin-left:6px; padding:0; border:1px solid #4a4a4a; border-radius:12px; background:rgba(20,20,20,.55); align-items:center; justify-content:center; flex-direction:column; gap:5px; }
.menu-btn i{ display:block; width:20px; height:2px; border-radius:2px; background:#fff; transition:transform .2s, opacity .2s; }
.menu-btn[aria-expanded="true"] i:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-btn[aria-expanded="true"] i:nth-child(2){ opacity:0; }
.menu-btn[aria-expanded="true"] i:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }
.menu{ position:fixed; z-index:40; top:66px; left:0; right:0; bottom:0; display:flex; flex-direction:column; background:#1f1f1f; border-top:1px solid #3a3a3a; transform:translateX(100%); visibility:hidden; transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s linear .32s; overflow-y:auto; overscroll-behavior:contain; }
.menu.open{ transform:none; visibility:visible; transition:transform .32s cubic-bezier(.4,0,.2,1), visibility 0s; }
.menu .mi{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:22px 24px; border-bottom:1px solid #333; font-size:1.12rem; font-weight:500; color:#fff; text-decoration:none; }
.menu a.mi::after{ content:""; width:9px; height:9px; border-top:2px solid #bdbdbd; border-right:2px solid #bdbdbd; transform:rotate(45deg); margin-right:4px; flex:0 0 auto; }
.menu a.mi:active{ background:#2c2c2c; }
.menu .mi.off{ color:var(--dim); }
.menu .mi em{ font-style:normal; font-size:.78rem; font-weight:600; color:var(--muted); border:1px solid #4a4a4a; border-radius:999px; padding:2px 10px; }
.menu .mhelp{ margin-top:auto; background:#2a2a2a; border-bottom:0; border-top:1px solid #3a3a3a; padding-bottom:calc(22px + env(safe-area-inset-bottom)); }
body.menu-open{ overflow:hidden; }
body.menu-open .topbar{ position:fixed; z-index:50; background:#1f1f1f; }
@media (max-width:720px){ .topbar nav .lnk{ display:none; } .menu-btn{ display:flex; } }
@media (min-width:721px){ .menu{ display:none !important; } body.menu-open{ overflow:auto; } }

/* ---------- cenário em camadas (parallax horizontal) ---------- */
.hero{ position:relative; overflow:hidden; isolation:isolate; min-height:100svh; display:flex; align-items:center; padding:120px 24px 130px; background:#17171a; }
.scene{ position:absolute; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
.layer{ position:absolute; top:0; bottom:0; left:-6%; right:-6%; will-change:transform; image-rendering:pixelated;
  background-repeat:repeat-x; background-position:center bottom; background-size:auto max(100%, calc(100vw * .5834)); }
.layer.pc{ top:-80px; bottom:-80px; left:-600px; right:-600px; background-size:auto max(100%, calc(100vw * .5625)); }
.pc0{ background-image:url(/img/cave/L0.png); }
.pc1{ background-image:url(/img/cave/L1.png); }
.pc2{ background-image:url(/img/cave/L2.png); }
.pc3{ background-image:url(/img/cave/L3.png); }
.pc4{ background-image:url(/img/cave/L4.png); }
.pc5{ background-image:url(/img/cave/L5.png); }
.pc6{ background-image:url(/img/cave/L6.png); }
.pc7{ background-image:url(/img/cave/L7.png); }
.hero .inner{ position:relative; z-index:2; width:100%; max-width:1120px; margin:0 auto; }
.hero .col{ max-width:540px; }
.hero h1{ font-size:clamp(2.5rem,5.4vw,4.4rem); line-height:1.04; color:#fff; text-shadow:0 2px 0 rgba(0,0,0,.55), 0 4px 22px rgba(0,0,0,.7); }
.hero h1 em{ font-style:normal; color:var(--gold); }
.hero .lead{ margin-top:22px; font-size:1.2rem; line-height:1.55; color:#f0f0f0; text-shadow:0 1px 2px rgba(0,0,0,.95), 0 2px 14px rgba(0,0,0,.8); }
.cta{ display:flex; flex-wrap:wrap; gap:14px; margin-top:30px; align-items:center; }
.btn{ display:inline-flex; align-items:center; font-family:'Outfit',sans-serif; font-weight:800; font-size:1.05rem; line-height:1; text-decoration:none; color:#1a1a1a; background:#fff;
  padding:.95rem 1.7rem; border-radius:14px; box-shadow:0 2px 0 #b9b9b9, 0 8px 24px rgba(0,0,0,.35); transition:transform .15s, background .15s; }
.btn:hover{ background:#f0f0f0; transform:translateY(1px); }
.soon{ display:inline-flex; align-items:center; font-size:1rem; font-weight:600; color:var(--muted); border:2px dashed #6a6a6a; padding:.85rem 1.3rem; border-radius:14px; background:rgba(20,20,20,.6); }
.hero .note{ margin-top:20px; max-width:480px; color:#c9c9c9; font-size:.95rem; text-shadow:0 1px 3px rgba(0,0,0,.9); }
.hero::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:clamp(220px,40vh,400px); z-index:1; pointer-events:none;
  /* névoa na cor da caverna que se dissolve no fundo do site (sem passar pelo preto) */
  background:linear-gradient(180deg, rgba(74,72,92,0) 0%, rgba(74,72,92,.28) 26%, rgba(56,55,68,.6) 54%, rgba(43,43,49,.88) 80%, #282828 100%); }
@media (max-width:820px){
  .hero{ align-items:flex-end; padding:300px 20px 80px; }
  .hero h1{ font-size:clamp(2.6rem,12vw,3.6rem); }
  .hero .lead{ font-size:1.15rem; }
}

/* ---------- seções ---------- */
section.block{ padding:84px 24px; }
.wrapL{ max-width:1040px; margin:0 auto; }
h2{ font-size:clamp(1.9rem,4.2vw,2.8rem); line-height:1.08; color:#fff; }
.sub{ color:var(--muted); margin-top:10px; max-width:640px; font-size:1.08rem; }
.steps{ margin-top:36px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.card, .feat, .faq details{ background:var(--panel); border:1px solid var(--line); border-radius:18px; box-shadow:0 6px 18px rgba(0,0,0,.25); }
.card{ padding:24px; }
.card .n{ font-family:'Outfit',sans-serif; font-weight:800; color:var(--gold); font-size:2.3rem; line-height:1; }
.card h3{ margin:8px 0 6px; font-size:1.3rem; line-height:1.2; color:#fff; }
.card p, .feat p{ color:var(--muted); font-size:1rem; }
.gallery{ margin-top:30px; display:flex; gap:38px; overflow-x:auto; scroll-snap-type:x mandatory; padding:34px 44px 26px; margin-left:-24px; margin-right:-24px; scrollbar-width:none; cursor:grab; }
.gallery::-webkit-scrollbar{ display:none; }
.gallery.drag{ cursor:grabbing; user-select:none; }
.phone{ flex:0 0 auto; width:262px; margin:0; scroll-snap-align:center; perspective:1100px; }
.phone .view{ position:relative; height:524px; -webkit-mask-image:linear-gradient(180deg,#000 70%,transparent 94%); mask-image:linear-gradient(180deg,#000 70%,transparent 94%); overflow:hidden; transform:rotateY(var(--ry,-10deg)) rotateX(3deg); transform-origin:50% 100%; transition:transform .5s ease; }
.phone:hover .view{ transform:rotateY(0deg) rotateX(0deg); }
.phone .frame{ position:relative; width:262px; height:1000px; box-sizing:border-box; padding:9px; border-radius:48px 48px 0 0;
  background:linear-gradient(152deg,#62636d 0%,#2c2d34 20%,#16161a 46%,#30313a 78%,#52535d 100%);
  box-shadow:inset 0 0 0 1.5px #7b7c86, inset 0 0 0 4px #0a0a0d; }
.phone .bt{ position:absolute; width:4px; background:linear-gradient(90deg,#55565f,#2a2b31); border-radius:2px; }
.phone .b1{ left:-3px; top:112px; height:30px; }
.phone .b2{ left:-3px; top:168px; height:56px; }
.phone .b3{ left:-3px; top:238px; height:56px; }
.phone .b4{ right:-3px; top:196px; height:86px; }
.phone .screen{ position:relative; border-radius:40px 40px 0 0; overflow:hidden; background:#1c1c1e; }
.phone .screen img{ display:block; width:100%; height:auto; }
.phone .screen::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(118deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,0) 30%); }
.phone .island{ position:absolute; left:50%; top:10px; width:88px; height:26px; transform:translateX(-50%); background:#000; border-radius:16px; z-index:3; box-shadow:0 0 0 1px rgba(255,255,255,.06); }
.phone .island::after{ content:""; position:absolute; right:10px; top:50%; width:9px; height:9px; margin-top:-4.5px; border-radius:50%; background:radial-gradient(circle at 35% 35%, #3a4a78 0, #141a33 55%, #05070f 100%); box-shadow:0 0 0 1.5px #0b0d16; }
.phone .st-time{ position:absolute; left:24px; top:15px; z-index:3; font:700 13px/1 'Outfit',system-ui,sans-serif; color:#fff; letter-spacing:.2px; }
.phone .st-bat{ position:absolute; right:22px; top:16px; z-index:3; width:24px; height:11px; border:1.5px solid rgba(255,255,255,.75); border-radius:4px; }
.phone .st-bat::before{ content:""; position:absolute; inset:1.5px 4px 1.5px 1.5px; background:#fff; border-radius:1.5px; }
.phone .st-bat::after{ content:""; position:absolute; right:-4px; top:2.5px; width:2px; height:4px; background:rgba(255,255,255,.75); border-radius:0 1px 1px 0; }
.phone .st-sig{ position:absolute; right:56px; top:17px; z-index:3; width:16px; height:10px; background:linear-gradient(90deg,#fff 0 3px,transparent 3px 4.5px,#fff 4.5px 7.5px,transparent 7.5px 9px,#fff 9px 12px,transparent 12px 13.5px,#fff 13.5px 16px); clip-path:polygon(0 100%,0 70%,24% 70%,24% 45%,52% 45%,52% 20%,76% 20%,76% 0,100% 0,100% 100%); }
.phone figcaption{ margin-top:16px; text-align:center; font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem; line-height:1.2; color:#fff; }
@media (max-width:820px){ .gallery{ gap:30px; padding:30px 34px 22px; } }
.features{ margin-top:36px; display:grid; grid-template-columns:repeat(2,1fr); gap:18px; }
.feat{ padding:22px 24px; }
.feat h3{ font-size:1.3rem; line-height:1.2; margin-bottom:6px; color:#fff; }
.who{ margin-top:28px; display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.alt{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.2) 22%, rgba(0,0,0,.2) 78%, rgba(0,0,0,0) 100%); }
@media (max-width:820px){ .steps,.features,.who{ grid-template-columns:1fr; } section.block{ padding:60px 22px; } }

/* ---------- FAQ ---------- */
.faq{ margin-top:30px; max-width:800px; }
.faq details{ padding:0 20px; margin-bottom:10px; }
.faq summary{ list-style:none; padding:16px 0; font-weight:600; font-size:1.08rem; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; color:var(--gold); font-family:'Outfit',sans-serif; font-weight:600; font-size:1.5rem; line-height:1; }
.faq details[open] summary::after{ content:"–"; }
.faq .ans{ color:var(--muted); padding:0 0 18px; font-size:1.06rem; }
.faq .ans a{ color:var(--gold); }

/* ---------- chamada final e rodapé ---------- */
.final{ text-align:center; }
.final .cta{ justify-content:center; }
footer.site{ background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.25) 40%, rgba(0,0,0,.25) 100%); padding:48px 0 40px; }
footer.site .wrap{ max-width:1040px; }
footer.site .footlabel{ font-family:'Outfit',sans-serif; font-weight:600; font-size:.78rem; letter-spacing:.12em; color:var(--dim); }
footer.site a{ color:var(--muted); font-size:1rem; }
footer.site .copy{ color:var(--dim); font-size:.9rem; }
.credit{ display:block; margin-top:6px; color:var(--dim); font-size:.9rem; }
.credit a{ color:var(--muted); }

/* ---------- bestiário (faixas de monstros que andam) ---------- */
.bestiary{ position:relative; overflow:hidden; padding:76px 0 64px; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 22%, rgba(0,0,0,.22) 78%, rgba(0,0,0,0) 100%); }
.bestiary .wrapL{ padding:0 24px; }
.strip{ display:block; margin-top:28px; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); mask-image:linear-gradient(90deg,transparent,#000 9%,#000 91%,transparent); }
.strip.s2{ margin-top:14px; }
.shift{ width:max-content; will-change:transform; }
.track{ display:flex; gap:20px; width:max-content; padding-right:20px; animation:slide 100s linear infinite; }
.track.rev{ animation-direction:reverse; animation-duration:130s; }
.track i{ flex:0 0 auto; width:96px; height:96px; background:url(/img/bestiary.png) no-repeat; background-size:calc(63 * 96px) 96px; background-position:calc(var(--i) * -96px) 0; image-rendering:pixelated; }
.strip:hover .track{ animation-play-state:paused; }
@keyframes slide{ to{ transform:translateX(-50%); } }
@media (max-width:820px){ .track i{ width:72px; height:72px; background-size:calc(63 * 72px) 72px; background-position:calc(var(--i) * -72px) 0; } }

/* ---------- cursor de espada (só com mouse) ---------- */
@media (hover:hover) and (pointer:fine){
  html, body{ cursor:url(/cursors/cursor.png) 1 1, auto; cursor:-webkit-image-set(url(/cursors/cursor.png) 1x, url(/cursors/cursor@2x.png) 2x) 1 1, auto; cursor:image-set(url(/cursors/cursor.png) 1x, url(/cursors/cursor@2x.png) 2x) 1 1, auto; }
  html a, html button, html summary, html .btn, html [role="button"], html label, html .menu .mi{ cursor:url(/cursors/cursor-hover.png) 1 1, pointer; cursor:-webkit-image-set(url(/cursors/cursor-hover.png) 1x, url(/cursors/cursor-hover@2x.png) 2x) 1 1, pointer; cursor:image-set(url(/cursors/cursor-hover.png) 1x, url(/cursors/cursor-hover@2x.png) 2x) 1 1, pointer; }
}
.spark{ position:fixed; width:4px; height:4px; background:#ffffff; pointer-events:none; z-index:60; animation:spark .45s steps(5) forwards; }
@keyframes spark{ to{ transform:translate(var(--dx), var(--dy)); opacity:0; } }
@media (prefers-reduced-motion:reduce){ .track{ animation:none !important; } }

/* ---------- galeria: tela ampliada (lightbox) ---------- */
.phone{ cursor:zoom-in; }
.gallery.drag .phone{ cursor:grabbing; }
.phone:focus-visible{ outline:2px solid var(--gold); outline-offset:6px; border-radius:20px; }
body.lb-open{ overflow:hidden; }
.lb{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:24px 72px; background:rgba(10,10,12,.9); }
.lb[hidden]{ display:none; }
.lb-fig{ margin:0; text-align:center; }
.lb-fig img{ display:block; width:auto; height:auto; max-width:min(92vw,560px); max-height:calc(100svh - 120px); border-radius:30px; box-shadow:0 0 0 1px rgba(255,255,255,.1), 0 24px 70px rgba(0,0,0,.65); background:#282828; }
.lb-fig figcaption{ margin-top:14px; font-family:'Outfit',sans-serif; font-weight:600; font-size:1.05rem; color:#fff; text-shadow:0 1px 3px rgba(0,0,0,.8); }
.lb-x, .lb-nav{ position:absolute; display:flex; align-items:center; justify-content:center; border:1px solid rgba(255,255,255,.22); background:rgba(40,40,40,.85); color:#fff; border-radius:50%; cursor:pointer; font-family:'Outfit',sans-serif; line-height:1; }
.lb-x:hover, .lb-nav:hover{ background:#4a4a4a; }
.lb-x:focus-visible, .lb-nav:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
.lb-x{ top:18px; right:20px; width:46px; height:46px; font-size:2rem; }
.lb-nav{ top:50%; width:52px; height:52px; margin-top:-26px; font-size:2.4rem; padding-bottom:4px; }
.lb-prev{ left:20px; }
.lb-next{ right:20px; }
@media (max-width:640px){
  .lb{ padding:64px 12px 24px; }
  .lb-nav{ top:auto; bottom:18px; margin-top:0; width:48px; height:48px; }
  .lb-prev{ left:calc(50% - 64px); }
  .lb-next{ right:calc(50% - 64px); left:auto; }
  .lb-fig img{ max-height:calc(100svh - 190px); }
}