/* ═══════════════════════════════════════════════════════════════
   WU LEGACY — identidade visual
   武 (wǔ, "marcial") é a marca, não ornamento. Santuário à noite:
   ouro cerimonial sobre carvão, brasa de lanterna. O ouro marca o
   sagrado (títulos, ações), nunca decora à toa.
   ═══════════════════════════════════════════════════════════════ */
:root{
  --tinta:#e8e3d6; --mut:#8b8578;
  --ouro:#d4a017; --ouro2:#f0c94a; --brasa:#c8471f;
  --carvao:#0c0b09; --carvao2:#15130f;
  --linha:rgba(212,160,23,.16);
  --sombra:0 14px 44px rgba(0,0,0,.6);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  background:var(--carvao); color:var(--tinta);
  font-family:"Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif;
  min-height:100vh; overflow-x:hidden; position:relative;
  -webkit-font-smoothing:antialiased;
}
.wl-ambient{position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
   radial-gradient(55% 40% at 12% -5%, rgba(200,71,31,.11), transparent 70%),
   radial-gradient(50% 40% at 92% 8%, rgba(212,160,23,.08), transparent 70%),
   radial-gradient(90% 60% at 50% 118%, rgba(200,71,31,.06), transparent 70%);}
.wl-ambient::before,.wl-ambient::after{
  content:"武";position:fixed;top:9%;font-size:150px;line-height:1;
  color:rgba(212,160,23,.03);font-family:"SimSun",serif;z-index:-1;}
.wl-ambient::before{left:2%}
.wl-ambient::after{content:"道";right:2%}

/* ── topo ─────────────────────────────────────────────────── */
.wl-top{display:flex;align-items:center;justify-content:space-between;
  padding:14px 18px;border-bottom:1px solid var(--linha);position:sticky;top:0;z-index:10;
  background:linear-gradient(180deg,rgba(12,11,9,.97),rgba(12,11,9,.82));
  backdrop-filter:blur(8px)}
.wl-logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.wl-logo-img{height:38px;width:auto;display:block}
.wl-logo .wu{font-family:"SimSun",serif;font-size:26px;color:var(--brasa);
  text-shadow:0 0 16px rgba(200,71,31,.4);line-height:1}
.wl-logo .txt{font-size:18px;letter-spacing:3px;text-transform:uppercase;font-weight:700}
.wl-logo .txt b{color:var(--ouro2);font-weight:700}
.wl-logo .txt{color:#c9c6bd}
.wl-nav{display:flex;align-items:center;gap:14px;font-size:13px}
.wl-moedas{color:var(--ouro);letter-spacing:.5px}
.wl-sair{color:var(--mut);text-decoration:none;border:1px solid var(--linha);
  padding:5px 11px;border-radius:20px;font-size:12px}
.wl-sair:hover{color:var(--tinta);border-color:var(--ouro)}

/* ── flash ────────────────────────────────────────────────── */
.wl-flash{margin:14px auto 0;max-width:440px;padding:11px 15px;border-radius:9px;
  font-size:13.5px;border-left:3px solid var(--ouro);background:rgba(212,160,23,.08)}
.wl-flash.error{border-left-color:var(--brasa);background:rgba(200,71,31,.1)}
.wl-flash.success{border-left-color:#3fa66a;background:rgba(63,166,106,.1)}

/* ── main / rodapé ────────────────────────────────────────── */
.wl-main{max-width:960px;margin:0 auto;padding:24px 18px 60px}
.wl-foot{text-align:center;color:var(--mut);font-size:12px;
  padding:24px;border-top:1px solid var(--linha)}

/* ── portão (entrar/cadastro) ─────────────────────────────── */
.wl-gate{max-width:400px;margin:5vh auto 0;text-align:center}
/* logo real da marca: ouro + prata, enso e 武. Fundo preto casa com
   o --carvao, então ela "flutua" sem moldura. */
.wu-logo{width:100%;max-width:340px;height:auto;display:block;margin:0 auto 6px;
  filter:drop-shadow(0 8px 30px rgba(200,71,31,.25))}
.wu-brasao{font-family:"SimSun",serif;font-size:68px;color:var(--brasa);
  text-shadow:0 0 34px rgba(200,71,31,.55);margin-bottom:2px;line-height:1;
  animation:respira 4s ease-in-out infinite}
@keyframes respira{0%,100%{opacity:.85}50%{opacity:1;text-shadow:0 0 46px rgba(200,71,31,.72)}}
.wl-gate h1{font-size:32px;letter-spacing:6px;text-transform:uppercase;
  margin:6px 0 4px;color:var(--ouro2);font-weight:700}
.wl-gate .tag{color:var(--mut);font-size:14px;margin-bottom:22px;font-style:italic}

.wl-card{background:linear-gradient(180deg,var(--carvao2),#100e0b);
  border:1px solid var(--linha);border-radius:16px;padding:24px;
  box-shadow:var(--sombra);text-align:left}
.wl-card h2{font-size:17px;letter-spacing:1px;margin:0 0 18px;font-weight:600}

.wl-campo{margin-bottom:15px}
.wl-campo label{display:block;font-size:12px;letter-spacing:.6px;text-transform:uppercase;
  color:var(--mut);margin-bottom:6px}
.wl-campo input{width:100%;padding:12px 13px;border-radius:9px;border:1px solid var(--linha);
  background:rgba(0,0,0,.35);color:var(--tinta);font-size:15px;font-family:inherit}
.wl-campo input:focus{outline:none;border-color:var(--ouro);
  box-shadow:0 0 0 3px rgba(212,160,23,.12)}

.wl-btn{width:100%;padding:13px;border:none;border-radius:10px;cursor:pointer;
  background:linear-gradient(90deg,var(--ouro),var(--ouro2));color:#1a1305;
  font-size:15px;font-weight:700;letter-spacing:1px;text-transform:uppercase;
  font-family:inherit;margin-top:6px}
.wl-btn:hover{filter:brightness(1.08)}
.wl-btn:active{transform:translateY(1px)}

.wl-alt{text-align:center;margin-top:18px;font-size:13.5px;color:var(--mut)}
.wl-alt a{color:var(--ouro);text-decoration:none}
.wl-alt a:hover{text-decoration:underline}

.wl-erro{background:rgba(200,71,31,.12);border:1px solid rgba(200,71,31,.35);
  color:#f0b8a5;padding:10px 13px;border-radius:9px;font-size:13.5px;margin-bottom:16px}

/* ── salão ────────────────────────────────────────────────── */
.wl-hero{text-align:center;padding:24px 0 30px}
.wl-hero h1{font-size:26px;letter-spacing:2px;color:var(--ouro2);margin:0 0 6px}
.wl-hero p{color:var(--mut);font-size:14px;margin:0}
.wl-menu{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;
  margin-top:22px}
.wl-tile{background:var(--carvao2);border:1px solid var(--linha);border-radius:14px;
  padding:22px 16px;text-align:center;text-decoration:none;color:var(--tinta);
  transition:border-color .15s,transform .15s}
.wl-tile:hover{border-color:var(--ouro);transform:translateY(-2px)}
.wl-tile .ic{font-size:30px;margin-bottom:8px}
.wl-tile .t{font-size:15px;letter-spacing:.5px;font-weight:600}
.wl-tile .d{font-size:12px;color:var(--mut);margin-top:3px}
.wl-tile.breve{opacity:.55;pointer-events:none}
.wl-tile.breve .d{color:var(--brasa)}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ═══════════════════════════════════════════════════════════════
   CARTAS & COLEÇÃO (Camada 2)
   ═══════════════════════════════════════════════════════════════ */
.wl-selo{display:flex;align-items:center;gap:11px;padding:12px 14px;border-radius:12px;
  background:rgba(212,160,23,.06);border:1px solid var(--linha);margin-bottom:18px;
  font-size:12.5px;max-width:520px;margin-left:auto;margin-right:auto}
.wl-selo .anel{display:flex;gap:6px;flex-shrink:0}
.wl-selo .p{width:12px;height:12px;border-radius:50%;background:rgba(255,255,255,.12);transition:.3s}
.wl-selo .p.on{background:var(--ouro);box-shadow:0 0 9px var(--ouro)}

.wl-grade{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:14px}
.wl-carta{position:relative;border-radius:14px;overflow:hidden;background:var(--carvao2);
  border:1px solid var(--linha);transition:transform .15s,box-shadow .15s,border-color .15s}
.wl-carta:hover{transform:translateY(-3px);box-shadow:var(--sombra)}
.wl-carta .arte{position:relative;aspect-ratio:3/4;overflow:hidden;background:#0f0d0a}
.wl-carta .arte img{width:100%;height:100%;object-fit:cover;object-position:center top;display:block}
.wl-carta .arte::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,transparent 40%,rgba(12,11,9,.92))}
.wl-carta .faixa{position:absolute;left:0;right:0;bottom:0;padding:10px 11px;z-index:2}
.wl-carta .nome{font-size:13px;font-weight:600;line-height:1.2;margin-bottom:5px}
.wl-carta .rar{display:inline-block;font-size:9px;letter-spacing:.7px;text-transform:uppercase;
  padding:2px 7px;border-radius:20px;font-weight:700}
.wl-carta .qtd{position:absolute;top:8px;right:8px;z-index:3;background:rgba(0,0,0,.72);
  color:var(--ouro);font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px}
.rar.lendario{background:rgba(212,160,23,.2);color:#d4a017}
.rar.raro{background:rgba(91,140,255,.18);color:#5b8cff}
.rar.comum{background:rgba(154,164,191,.14);color:#9aa4bf}
.wl-carta.lendario{border-color:rgba(212,160,23,.45)}
.wl-carta.lendario .arte{box-shadow:inset 0 0 44px rgba(212,160,23,.14)}
.wl-carta.raro{border-color:rgba(91,140,255,.3)}

.wl-carta .stats{display:flex;gap:9px;margin-top:6px;font-size:11px;color:var(--tinta);opacity:.9}
.wl-carta .comprar{margin-top:8px}
.btn-comprar{width:100%;padding:9px;border:none;border-radius:8px;cursor:pointer;
  background:linear-gradient(90deg,var(--ouro),var(--ouro2));color:#1a1305;
  font-family:inherit;font-size:14px;font-weight:700;letter-spacing:.5px}
.btn-comprar:hover{filter:brightness(1.08)}
.btn-comprar:active{transform:translateY(1px)}

.wl-vazio{text-align:center;color:var(--mut);padding:40px 20px;font-size:13.5px;line-height:1.6}

/* ═══════════════════════════════════════════════════════════════
   DUELO / ARENA (Camada 3)
   ═══════════════════════════════════════════════════════════════ */
.wl-carta-btn{background:none;border:none;padding:0;cursor:pointer;font-family:inherit;
  display:block;width:100%}
.wl-arena{max-width:520px;margin:0 auto;background:linear-gradient(180deg,var(--carvao2),#100e0b);
  border:1px solid var(--linha);border-radius:18px;padding:18px;box-shadow:var(--sombra)}
.wl-arena .placar{text-align:center;font-size:14px;letter-spacing:1px;color:var(--mut);margin-bottom:6px}
.wl-arena .rounds{display:flex;justify-content:center;gap:9px;margin-bottom:16px}
.wl-arena .pip{width:14px;height:14px;border-radius:50%;border:1px solid var(--linha)}
.wl-arena .pip.d{background:var(--ouro);border-color:var(--ouro)}
.wl-arena .pip.o{background:var(--brasa);border-color:var(--brasa)}

.wl-arena .confronto{display:grid;grid-template-columns:1fr auto 1fr;gap:12px;align-items:center;margin-bottom:18px}
.wl-arena .lutador{text-align:center}
.wl-arena .retrato{aspect-ratio:3/4;border-radius:12px;border:1px solid var(--linha);
  background-size:cover;background-position:center top;background-color:#0f0d0a;margin-bottom:7px;
  position:relative}
.wl-arena .retrato::after{content:"";position:absolute;inset:0;border-radius:12px;
  background:linear-gradient(180deg,transparent 55%,rgba(12,11,9,.55))}
.wl-arena .rn{font-size:12.5px;font-weight:600;line-height:1.2}
.wl-arena .rr{font-size:9.5px;letter-spacing:.6px;text-transform:uppercase;margin-top:2px}
.wl-arena .duelo-vs{font-family:"SimSun",serif;font-size:26px;color:var(--brasa);
  text-shadow:0 0 14px rgba(200,71,31,.4)}

.wl-arena .narracao{text-align:center;font-size:13.5px;color:var(--tinta);min-height:42px;
  line-height:1.55;margin-bottom:16px;padding:0 6px}
.wl-arena .narracao .win{color:var(--ouro2);font-weight:600}
.wl-arena .narracao .lose{color:var(--brasa)}

.wl-arena .golpes{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wl-arena .golpe{padding:15px 8px;border-radius:12px;background:rgba(255,255,255,.03);
  border:1px solid var(--linha);text-align:center;cursor:pointer;font-family:inherit;
  color:var(--tinta);transition:.15s}
.wl-arena .golpe:hover{background:rgba(212,160,23,.12);border-color:var(--ouro)}
.wl-arena .golpe:active{transform:scale(.96)}
.wl-arena .golpe .gi{font-size:18px;margin-bottom:2px}
.wl-arena .golpe .gl{font-size:11px;letter-spacing:.6px;text-transform:uppercase;color:var(--mut);margin-bottom:3px}
.wl-arena .golpe .gv{font-size:22px;font-weight:800;color:var(--ouro2)}
.wl-arena .ciclo{text-align:center;font-size:11px;color:var(--mut);margin-top:12px;line-height:1.5}

.wl-arena .fim-duelo{text-align:center;padding-top:8px}
.wl-arena .fim-titulo{font-size:26px;letter-spacing:2px;margin-bottom:6px}
.wl-arena .fim-titulo.vit{color:var(--ouro2)}
.wl-arena .fim-titulo.der{color:var(--brasa)}
.wl-arena .fim-sub{font-size:13.5px;color:var(--tinta);line-height:1.7}