/* ===================================================================
   Landing page (tela de login) — Cuteidleland
   Paleta "Noite & Ouro" (a mesma do jogo): fundo azul-noite quase preto,
   a arte da vila atrás de um véu escuro, molduras e destaques em dourado
   envelhecido, turquesa nos detalhes. Botões como os do Poke Idle World:
   jogar em bronze-dourado, secundário em azul-petróleo.
   =================================================================== */
.landing { display: block; padding: 0; min-height: 100vh; overflow-x: hidden; scroll-behavior: smooth; position: relative;
  --bg: #0a0e15; --bg2: #080b12; --ink: #e9e2d0; --muted: #9fb0c2; --dim: #8a93a0; --soft: #c3cdd8;
  --gold: #c9a86a; --gold-bright: #e0c084; --gold-hi: #f0e6d2; --gold-warm: #f0d99a; --teal: #0ac8b9; --teal-hi: #7fe6dd;
  --card: rgba(13,20,30,.7); --card-border: rgba(140,165,190,.14); --field: rgba(0,0,0,.34); --field-border: rgba(140,165,190,.16);
  --frame-img: linear-gradient(#c4a566, #997530, #87704c); --danger: #e2756b;
  color: var(--ink); background: var(--bg); }

/* Cinzel nos títulos, na navegação, nos botões e nos números; texto corrido em Barlow (vem do body) */
.landing .btn, .ld-links a, .ld-hero-text h1, .ld-h2, .ld-feat h3, .ld-stats b, .ld-why-title, .auth-tabs button, .ld-line-head b, .ld-line.novice .ld-line-text h3, .ld-job .t b, .ld-map .body > b, .ld-rank th, .ld-vip-card h3, .ld-cta-art h2 { font-family: var(--font-display); }
.landing .muted2 { color: var(--dim); }
.landing a { color: inherit; }
.ld-wrap { width: min(1120px, 100% - 32px); margin: 0 auto; position: relative; z-index: 1; }

/* ---------- nav (barra escura com fio dourado) ---------- */
.ld-nav { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 18px; padding: 8px 20px; background: linear-gradient(180deg, rgb(10,20,28), rgb(6,12,20)); border-bottom: 1px solid #785a28; box-shadow: 0 1px 0 rgba(244,226,168,.12), 0 8px 24px rgba(0,0,0,.5); }
.ld-brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.ld-brand img { height: 44px; width: auto; image-rendering: auto; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.ld-brand b { display: none; }
.ld-tag { font-size: 10px; font-weight: 900; letter-spacing: 1.5px; background: rgba(10,200,185,.14); color: var(--teal-hi); padding: 3px 8px; border-radius: 999px; border: 1px solid var(--teal); }
.ld-links { display: flex; gap: 2px; margin-left: auto; }
.ld-links a { text-decoration: none; font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; color: #c8aa6e; padding: 6px 12px; border-radius: 8px; transition: color .15s, text-shadow .15s; }
.ld-links a:hover { color: var(--gold-hi); text-shadow: 0 0 10px rgba(240,230,210,.35); }
.ld-playbtn { text-decoration: none; }

/* ---------- botões ---------- */
/* os dois botões do Poke Idle World: "JOGAR AGORA" em bronze-dourado com moldura de ouro e gemas turquesa;
   "CRIAR CONTA" em azul-petróleo com moldura de aço. Cantos retos, letras espaçadas em caixa alta. */
.landing .btn { position: relative; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border-radius: 0 !important; border-width: 2px; border-style: solid; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; transition: filter .15s, transform .12s; }
.landing .btn.big { font-size: 16px; padding: 14px 28px; }
.landing .btn.primary { background: linear-gradient(180deg, #6b5324 0%, #4a3814 48%, #33260d 100%); border-color: #c8a24e; border-image: linear-gradient(180deg, #f4e2a8, #e8cd8d 26%, #c8a24e 56%, #9c7a34 82%, #6a5223) 1; color: #f6e8c4; box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 0 18px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.landing .btn.primary:hover { filter: brightness(1.12) drop-shadow(0 0 12px rgba(200,170,110,.45)); transform: translateY(-1px); color: #fff3d6; }
.landing .btn.primary:active { transform: translateY(0); }
.landing .btn.primary.big::before, .landing .btn.primary.big::after { content: ''; position: absolute; left: 50%; width: 9px; height: 9px; margin-left: -5px; transform: rotate(45deg); border: 1px solid #7fe6dd; background: radial-gradient(circle at 40% 35%, #d6fbf6, #0ac8b9 55%, #0a7d78); box-shadow: 0 0 7px rgba(10,200,185,.8); pointer-events: none; }
.landing .btn.primary.big::before { top: -6px; } .landing .btn.primary.big::after { bottom: -6px; }
.landing .btn.ghost, .landing .btn:not(.primary):not(.ghost) { background: linear-gradient(180deg, #1d3b55 0%, #12283c 50%, #0c1c2b 100%); color: #dfe7ee; border-color: #6f8292; border-image: linear-gradient(180deg, #a9b7c2, #6f8292 50%, #3d4d5c) 1; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), inset 0 0 16px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45); text-shadow: 0 1px 2px rgba(0,0,0,.7); }
.landing .btn.ghost:hover, .landing .btn:not(.primary):not(.ghost):hover { filter: brightness(1.12) drop-shadow(0 0 10px rgba(120,205,245,.4)); transform: translateY(-1px); color: #fff; }

/* ---------- hero ---------- */
.ld-hero { position: relative; min-height: calc(100vh - 64px); display: flex; align-items: center; overflow: hidden; }
/* arte da vila atrás do topo, sob um véu escuro: vinheta nas bordas, mais fechado atrás do texto, some no fundo da página embaixo */
.ld-hero-art { position: absolute; inset: 0; background: url(/banner/vila.jpg) center 30% / cover no-repeat; image-rendering: auto; }
.ld-hero-art::before { content: ''; position: absolute; inset: 0; background:
  linear-gradient(90deg, rgba(6,9,14,.66) 0%, rgba(6,9,14,.3) 52%, rgba(6,9,14,.42) 100%),
  radial-gradient(120% 80% at 50% 38%, rgba(6,9,14,.1), rgba(6,9,14,.7) 92%),
  linear-gradient(180deg, rgba(6,9,14,.5), rgba(6,9,14,.22) 40%, var(--bg) 100%); }
.ld-hero-art::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 120px; background: linear-gradient(transparent, var(--bg)); }
@media (max-width: 640px) { .ld-hero-art { background-image: url(/banner/vila-960.jpg); background-position: center 20%; } }
.ld-parade { position: absolute; left: 0; right: 0; bottom: 0; width: 100%; height: 190px; image-rendering: pixelated; pointer-events: none; z-index: 1; }
.ld-hero-inner { position: relative; z-index: 2; width: min(1120px, 100% - 32px); margin: 0 auto; padding: 36px 0 210px; display: grid; grid-template-columns: 1.15fr .85fr; gap: 40px; align-items: center; }
.ld-logo-big { display: block; width: min(520px, 100%); height: auto; margin: -10px 0 8px -12px; filter: drop-shadow(0 0 18px rgba(125,208,248,.28)) drop-shadow(0 10px 26px rgba(0,0,0,.65)); animation: ld-float 6s ease-in-out infinite; }
.ld-kicker { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .26em; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ld-hero-text h1 { font-size: clamp(26px, 3vw, 38px); line-height: 1.1; margin: 0 0 14px; color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.ld-hero-text h1 em { font-style: normal; background: linear-gradient(180deg, #f6e8c4, #ddc082 40%, #c8aa6e 60%, #a98741 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-bright); text-shadow: none; filter: drop-shadow(0 2px 6px rgba(0,0,0,.6)); }
.ld-lead { font-size: 16px; line-height: 1.6; color: #d6dbe2; max-width: 580px; margin: 0 0 22px; text-shadow: 0 2px 10px rgba(0,0,0,.7); }
.ld-lead b { color: var(--gold-warm); }
/* faixa de números: placas escuras com fio dourado, número em gradiente de ouro */
.ld-stats { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.ld-stats div { background: linear-gradient(180deg, rgba(6,12,20,.88), rgba(4,9,15,.93)); border: 1px solid rgba(153,117,48,.6); border-radius: 4px; padding: 9px 14px; min-width: 124px; box-shadow: inset 0 0 0 3px rgba(4,9,15,.9), inset 0 0 0 4px rgba(153,117,48,.28); }
.ld-stats b { display: block; font-size: 24px; line-height: 1.15; background: linear-gradient(180deg, #f6e8c4 0%, #ddc082 30%, #c8aa6e 50%, #a98741 76%, #7e5f28 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--gold-bright); }
.ld-stats span { font-size: 11px; color: var(--dim); text-transform: uppercase; letter-spacing: .6px; font-weight: 700; }
.ld-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
/* o botão principal do topo respira de leve para puxar o olho (para ao passar o mouse; some com "reduzir movimento") */
.ld-hero-cta .btn.primary.big { animation: ld-cta-pulse 2.4s ease-in-out infinite; }
.ld-hero-cta .btn.primary.big:hover { animation: none; }
@keyframes ld-cta-pulse { 0%, 100% { box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 0 18px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45), 0 0 0 0 rgba(232,205,141,.55); } 50% { box-shadow: inset 0 1px 0 rgba(255,236,170,.35), inset 0 0 18px rgba(0,0,0,.35), 0 6px 14px rgba(0,0,0,.45), 0 0 0 10px rgba(232,205,141,0); } }
@media (prefers-reduced-motion: reduce) { .ld-hero-cta .btn.primary.big, .ld-logo-big, .ld-cta-logo, .ld-scrollhint { animation: none; } }
@keyframes ld-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* card de login: painel escuro com moldura dourada dupla (fio de fora + fio fino por dentro) */
.landing .auth-card.ld-card { position: relative; margin-top: 0 !important; width: 100% !important; background: linear-gradient(180deg, rgba(10,16,24,.92), rgba(6,11,18,.95)) !important; border: 2px solid #997530 !important; border-image: var(--frame-img) 1 !important; border-radius: 0 !important; color: var(--ink) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); box-shadow: 0 18px 50px rgba(0,0,0,.55) !important; padding: 26px 26px 20px !important; }
.landing .auth-card.ld-card::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(153,117,48,.35); pointer-events: none; }
.landing .ld-card .logo { justify-content: center; }
.landing .ld-card .logo img { width: auto; height: 64px; object-fit: contain !important; object-position: center !important; transform: none; image-rendering: auto; filter: drop-shadow(0 0 12px rgba(125,208,248,.35)) drop-shadow(0 4px 10px rgba(0,0,0,.6)); }
.landing .ld-card .logo h1 { display: none; }
.landing .ld-card .tagline { text-align: center; color: var(--muted); }
.landing .ld-card .tagline b { color: var(--gold-warm); }
.landing .ld-card label { color: var(--ink); }
.landing .ld-card input { background: var(--field) !important; color: var(--ink) !important; border: 1px solid var(--field-border) !important; border-radius: 8px !important; padding: 8px 10px !important; width: 100%; }
.landing .ld-card input::placeholder { color: #7c8794; }
.landing .ld-card input:focus { border-color: rgba(201,168,106,.65) !important; }
.landing .ld-card .btn { border-radius: 0 !important; }
/* Discord: roxo da marca só como tom, sem brigar com o botão de criar conta */
.landing .ld-card .discord-cta { border-radius: 9px; background: rgba(88,101,242,.14); border: 1px solid rgba(138,147,255,.45); box-shadow: none; color: #c9cffb; }
.landing .ld-card .discord-cta b { color: #fff; }
.landing .ld-card .discord-cta:hover { background: rgba(88,101,242,.24); filter: none; }
.landing .ld-card .error { color: var(--danger); }
.ld-card-foot { display: flex; gap: 6px; justify-content: center; font-size: 11px; color: #7c8794; margin-top: 10px; flex-wrap: wrap; }
/* um modo por vez: abas Criar conta / Já tenho conta */
.auth-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; margin: 12px 0 4px; padding: 4px; background: var(--field); border: 1px solid var(--field-border); border-radius: 9px; }
.auth-tabs button { border: 1px solid transparent; background: transparent; border-radius: 6px; padding: 8px 6px; font-weight: 800; font-size: 14px; color: #9aa6b3; cursor: pointer; transition: background .15s, color .15s, border-color .15s; }
.auth-tabs button:hover { color: var(--gold-hi); }
.auth-tabs button.on { background: linear-gradient(180deg, rgba(120,92,38,.5), rgba(66,50,22,.55)); color: var(--gold-hi); border-color: #c8a24e; box-shadow: inset 0 1px 0 rgba(255,255,255,.12), 0 0 9px rgba(232,205,141,.22); }
.auth-tabs button:disabled { opacity: .45; cursor: not-allowed; }
/* campo = ícone + input (+ olho), com a borda no conjunto */
.landing .ld-card .field { display: flex; align-items: center; gap: 4px; margin: 10px 0; padding: 0 6px 0 10px; background: var(--field); border: 1px solid var(--field-border); border-radius: 8px; transition: border-color .15s; }
.landing .ld-card .field:focus-within { border-color: rgba(201,168,106,.65); }
.landing .ld-card .field .ic { flex: none; font-size: 16px; opacity: .8; }
.landing .ld-card .field input { flex: 1; min-width: 0; border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 12px 4px !important; outline: none; font-size: 16px; }
/* o olho é um emoji escuro: invertido para aparecer no fundo escuro; aceso (opaco) quando a senha está à mostra */
.landing .ld-card .field .eye { flex: none; border: 0; background: transparent; cursor: pointer; font-size: 17px; padding: 6px; border-radius: 8px; line-height: 1; filter: grayscale(1) invert(1); opacity: .55; transition: opacity .15s; }
.landing .ld-card .field .eye:hover, .landing .ld-card .field .eye.on { opacity: 1; }
.auth-hint { font-size: 12px; color: var(--gold-warm); min-height: 0; }
.auth-hint:empty { display: none; }
.auth-reflink { display: block; border: 0; background: none; padding: 2px 0; margin: 2px 0 0; font-size: 12px; font-weight: 700; color: var(--gold); cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.auth-reflink:hover { color: var(--gold-bright); }
.landing .ld-card .auth-submit { display: flex; width: 100%; justify-content: center; margin-top: 12px; }
.landing .ld-card .auth-submit:disabled { opacity: .7; cursor: progress; transform: none; }
.landing .ld-card .error a { color: #9fd0ff; font-weight: 800; white-space: nowrap; }
/* "por que jogar": faixa de confiança logo abaixo dos botões */
.ld-why { margin-top: 24px; max-width: 580px; }
.ld-why-title { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); text-shadow: 0 2px 10px rgba(0,0,0,.8); white-space: nowrap; }
.ld-why-title i { flex: 1; height: 1px; background: linear-gradient(90deg, transparent, #c8aa6e); }
.ld-why-title i:last-child { background: linear-gradient(90deg, #c8aa6e, transparent); }
.ld-why .ld-stats { margin-bottom: 0; }
.ld-why .ld-stats div { flex: 1 1 0; min-width: 118px; }
.ld-why .ld-stats b { font-size: 17px; white-space: nowrap; }
.ld-scrollhint { position: absolute; left: 50%; bottom: 10px; transform: translateX(-50%); color: rgba(200,170,110,.65); font-size: 14px; animation: ld-bounce 1.6s ease-in-out infinite; z-index: 2; }
@keyframes ld-bounce { 0%, 100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* ---------- seções (claras = fundo da página; "alt" = faixa um tom mais escura) ---------- */
.ld-section { padding: 78px 0; position: relative; }
.ld-section.ld-alt { background: var(--bg2); border-top: 1px solid rgba(140,165,190,.1); border-bottom: 1px solid rgba(140,165,190,.1); }
.ld-h2 { margin: 0 0 12px; font-size: clamp(26px, 3.2vw, 38px); line-height: 1.12; color: #fff; letter-spacing: .2px; }
.ld-h2 span { display: block; width: fit-content; font-size: 12px; font-weight: 700; letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: 10px; }
.ld-sub { color: var(--soft); font-size: 16px; line-height: 1.6; max-width: 720px; margin: 0 0 34px; }
.ld-sub b { color: var(--gold-warm); }

/* cartões (vidro escuro, borda fria que acende em dourado) */
.ld-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ld-feat { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 22px 20px; transition: transform .15s ease, border-color .15s ease; }
.ld-feat:hover { transform: translateY(-4px); border-color: rgba(201,168,106,.5); }
.ld-feat .ic { font-size: 28px; width: 56px; height: 56px; display: grid; place-items: center; border-radius: 12px; background: rgba(200,170,110,.1); border: 1px solid rgba(200,170,110,.35); margin-bottom: 14px; }
.ld-feat h3 { margin: 0 0 8px; font-size: 18px; color: #fff; }
.ld-feat p { margin: 0; color: var(--muted); line-height: 1.55; font-size: 14px; }
.ld-feat p b { color: var(--ink); }

/* reveal on scroll */
.landing .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.landing .reveal.in { opacity: 1; transform: none; }

/* classes */
.ld-classes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.ld-line { background: var(--card); border: 1px solid var(--card-border); border-radius: 14px; padding: 14px; }
.ld-line.novice { grid-column: 1 / -1; display: flex; gap: 20px; align-items: center; background: linear-gradient(180deg, rgba(120,92,38,.3), rgba(66,50,22,.34)); border-color: #997530; }
.ld-line.novice .ld-job { flex: none; width: 220px; }
.ld-line.novice .ld-line-text h3 { margin: 0 0 6px; color: var(--gold-hi); font-size: 22px; }
.ld-line.novice .ld-line-text p { margin: 0; color: var(--soft); line-height: 1.55; }
.ld-line-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; padding: 0 4px; }
.ld-line-head b { color: var(--gold-hi); font-size: 17px; }
.ld-line-head small { color: var(--gold); font-size: 11px; text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.ld-line-jobs { display: grid; gap: 10px; }
.ld-job { display: flex; gap: 12px; align-items: flex-start; background: rgba(10,16,26,.72); border: 1px solid var(--field-border); border-radius: 12px; padding: 10px; cursor: default; transition: transform .15s, border-color .15s; }
.ld-job:hover { transform: translateY(-2px); border-color: rgba(201,168,106,.5); }
.ld-job canvas { width: 84px; height: 98px; image-rendering: pixelated; flex: none; background: radial-gradient(circle at 50% 88%, rgba(200,170,110,.34), rgba(13,20,30,0) 66%), #0d141e; border-radius: 10px; border: 1px solid var(--field-border); }
.ld-job .t b { display: block; color: #fff; font-size: 15px; }
.ld-job .t small { display: block; color: var(--muted); font-size: 12px; line-height: 1.4; margin: 3px 0 6px; }
.ld-job .t .tier { font-size: 10px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--teal-hi); }
.ld-chips { display: flex; flex-wrap: wrap; gap: 4px; }
.ld-chips span { font-size: 10px; font-weight: 700; color: #cdd6e0; background: #0f1a26; border: 1px solid #2b3b4d; border-radius: 999px; padding: 2px 7px; }
.ld-arrow { text-align: center; color: var(--gold); font-size: 11px; font-weight: 700; margin: 4px 0 0; letter-spacing: .12em; }

/* mapas */
.ld-maps { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.ld-map { position: relative; border-radius: 14px; overflow: hidden; border: 1px solid var(--card-border); background: var(--card); display: flex; flex-direction: column; transition: transform .15s ease, border-color .15s ease; }
.ld-map:hover { transform: translateY(-4px); border-color: rgba(201,168,106,.5); }
.ld-map .bg { height: 130px; background-size: cover; background-position: center; image-rendering: pixelated; position: relative; border-bottom: 1px solid var(--card-border); }
.ld-map .lv { position: absolute; top: 10px; left: 10px; background: rgba(6,11,18,.86); border: 1px solid #c8a24e; color: var(--gold-warm); font-weight: 800; font-size: 12px; padding: 3px 9px; border-radius: 999px; z-index: 1; }
.ld-map .mobs { position: absolute; right: 8px; bottom: 4px; display: flex; align-items: flex-end; gap: 2px; z-index: 1; }
.ld-map .mobbox { position: relative; display: inline-block; flex: none; }
.ld-map .mobimg { image-rendering: pixelated; flex: none; }
.ld-map .mob { position: absolute; left: 0; top: 0; image-rendering: pixelated; background-repeat: no-repeat; transform-origin: 0 0; }
.ld-map .body { padding: 12px 14px 14px; }
.ld-map .body b { color: #fff; font-size: 17px; display: block; }
.ld-map .body p { margin: 4px 0 8px; color: var(--muted); font-size: 13px; line-height: 1.45; }
.ld-map .boss { display: flex; align-items: center; gap: 8px; font-size: 12px; color: var(--soft); background: var(--field); border: 1px solid var(--field-border); border-radius: 10px; padding: 4px 8px; }
.ld-map .boss .mobbox { flex: none; }
.ld-map .boss b { color: var(--gold-bright); font-size: 12px; display: inline; }

/* ranking (quadro escuro com moldura dourada) */
.ld-rank-wrap { display: grid; grid-template-columns: 1fr 1.1fr; gap: 40px; align-items: center; }
.ld-rank { background: linear-gradient(180deg, rgba(10,16,24,.92), rgba(6,11,18,.95)); border: 2px solid #997530; border-image: var(--frame-img) 1; overflow: hidden; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.ld-rank table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ld-rank th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .12em; color: var(--gold); background: linear-gradient(#141c27, #0c121a); padding: 10px 12px; border-bottom: 1px solid #785a28; }
.ld-rank td { padding: 9px 12px; border-bottom: 1px solid rgba(140,165,190,.1); }
.ld-rank tr:last-child td { border-bottom: 0; }
.ld-rank .pos { width: 34px; font-weight: 900; color: var(--dim); }
.ld-rank tr:nth-child(1) .pos { color: #f4e2a8; } .ld-rank tr:nth-child(2) .pos { color: #b9c3ce; } .ld-rank tr:nth-child(3) .pos { color: #c07a3a; }
.ld-rank .nm { font-weight: 800; color: var(--gold-hi); }
.ld-rank .pw { text-align: right; font-weight: 800; color: var(--gold-bright); font-variant-numeric: tabular-nums; }
.ld-rank .job { color: var(--dim); font-size: 12px; }
.ld-rank-loading, .ld-rank-empty { padding: 30px; text-align: center; color: var(--dim); }

/* vip (placa de ouro escuro, moldura em bisel dourado) */
.ld-vip-wrap { display: grid; grid-template-columns: .9fr 1.1fr; gap: 40px; align-items: center; }
.ld-vip-card { position: relative; background: linear-gradient(180deg, #3a2e0a, #1f1806); border: 2px solid #c8a24e; border-image: linear-gradient(#fce7a2, #c8a24e, #6f5220) 1; padding: 26px; box-shadow: 0 0 22px rgba(255,210,94,.16), 0 24px 50px rgba(0,0,0,.5); color: var(--gold-hi); }
.ld-vip-badge { display: inline-block; background: rgba(0,0,0,.3); color: #ffe39a; font-weight: 900; padding: 4px 12px; border-radius: 999px; font-size: 13px; border: 1px solid #c8a24e; }
.ld-vip-card h3 { margin: 12px 0 10px; font-size: 28px; color: #ffe39a; }
.ld-vip-card ul { list-style: none; padding: 0; margin: 0 0 14px; display: grid; gap: 8px; }
.ld-vip-card li { padding-left: 26px; position: relative; font-weight: 600; }
.ld-vip-card li::before { content: '✔'; position: absolute; left: 0; color: #1a1206; background: linear-gradient(#e6cd8e, #c8a24e); border-radius: 50%; width: 18px; height: 18px; display: grid; place-items: center; font-size: 11px; }
.ld-vip-card li b { color: #ffe39a; }
.ld-vip-card p { margin: 0; font-size: 13px; line-height: 1.5; color: #cbbf9f; }
.ld-vip-card p b { color: var(--gold-hi); }

/* convite final: a arte da vila bem apagada atrás de um véu */
.ld-cta-art { position: relative; padding: 90px 0; background: url(/banner/vila.jpg) center 60% / cover no-repeat; border-top: 1px solid rgba(140,165,190,.1); overflow: hidden; }
.ld-cta-art::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg), rgba(10,14,21,.72), var(--bg)); }
.ld-cta-inner { text-align: center; color: #fff; }
.ld-cta-logo { height: 120px; width: auto; filter: drop-shadow(0 0 16px rgba(125,208,248,.3)) drop-shadow(0 8px 18px rgba(0,0,0,.6)); animation: ld-float 6s ease-in-out infinite; }
.ld-cta-art h2 { margin: 10px 0 8px; font-size: clamp(26px, 3.4vw, 38px); color: #fff; text-shadow: 0 2px 14px rgba(0,0,0,.8); }
.ld-cta-art p { margin: 0 auto 22px; max-width: 560px; font-size: 16px; line-height: 1.55; color: var(--soft); text-shadow: 0 2px 8px rgba(0,0,0,.7); }
@media (max-width: 640px) { .ld-cta-art { padding: 60px 0; background-image: url(/banner/vila-960.jpg); } .ld-cta-logo { height: 90px; } }

/* aviso de manutenção no card de login */
.ld-maint { background: rgba(200,170,110,.12); border: 1px solid #c8a24e; border-radius: 9px; padding: 10px 12px; margin: 10px 0 4px; color: var(--gold-hi); font-size: 13px; line-height: 1.4; }
.ld-maint b { display: block; font-size: 14px; margin-bottom: 2px; color: var(--gold-warm); }
.ld-hero-note { max-width: 560px; margin: 10px 0 0; padding: 6px 10px; font-size: 12.5px; line-height: 1.35; }
.ld-hero-note b { display: inline; font-size: inherit; margin: 0; }

/* footer */
.ld-footer { padding: 26px 0 34px; background: var(--bg2); border-top: 1px solid rgba(140,165,190,.1); color: var(--dim); font-size: 13px; }
.ld-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.ld-footer .ld-brand img { height: 40px; }

/* ---------- responsivo ---------- */
@media (max-width: 980px) {
  .ld-features, .ld-classes { grid-template-columns: repeat(2, 1fr); }
  .ld-hero-inner { grid-template-columns: 1fr; padding-bottom: 200px; }
  .ld-rank-wrap, .ld-vip-wrap { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 640px) {
  .ld-links { display: none; }
  .ld-nav { padding: 6px 12px; }
  .ld-brand img { height: 36px; }
  .ld-features, .ld-classes { grid-template-columns: 1fr; }
  .ld-line.novice { flex-direction: column; align-items: stretch; }
  .ld-line.novice .ld-job { width: auto; }
  .ld-hero { min-height: 0; }
  .ld-hero-inner { padding: 22px 0 170px; gap: 24px; }
  .ld-logo-big { margin-left: 0; }
  .ld-parade { height: 150px; }
  .ld-section { padding: 48px 0; }
  .ld-stats div { min-width: calc(50% - 5px); }
  /* celular: logo menor e os botões logo abaixo do título — o "Jogar agora" tem que caber na primeira tela */
  .ld-hero-text { display: flex; flex-direction: column; }
  .ld-logo-big { width: min(250px, 66%); margin: 0 auto 6px; }
  .ld-kicker { align-self: center; text-align: center; letter-spacing: .18em; font-size: 11px; }
  .ld-hero-text h1 { text-align: center; }
  .ld-hero-cta { order: 1; margin-bottom: 16px; }
  .ld-hero-cta .btn { flex: 1 1 auto; justify-content: center; }
  .ld-lead { order: 2; font-size: 15px; }
  .ld-why { order: 3; margin-top: 2px; }
  .ld-why .ld-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .ld-why .ld-stats div { min-width: 0; padding: 7px 8px; }
  .ld-why .ld-stats b { font-size: 13px; }
  .ld-why .ld-stats span { font-size: 9.5px; letter-spacing: .3px; }
  .ld-why .ld-stats #ld-online-box { grid-column: 1 / -1; }
}
.landing h3 { border-bottom: 0; }

/* U33 (b, Vitrine no estresse de 25/10): em PC de tela baixa (1366x768, 1280x720), com os avisos da manutenção no cartão, o ENTRAR ficava
   abaixo da dobra: o cartão era centralizado na altura do bloco do logo e começava em y 282. Em duas colunas e até 900 px de altura, ele
   sobe para o topo da grade; nas telas altas segue centralizado. */
@media (min-width: 981px) and (max-height: 900px) { .ld-hero-inner .auth-card.ld-card { align-self: start; } }