/* ============================================================
   Duelo de Mutretas — Visual premium (favela + dourado)
   ============================================================ */
:root{
  --gold:#e9c14a; --gold2:#b8881f; --gold3:#7a5a12;
  --ink:#13110c; --ink2:#1c1812; --panel:#211c14; --panel2:#2b2419;
  --line:#4a3d22; --line2:#6b562f;
  --txt:#f3ead2; --muted:#b6a984;
  --nerd:#36c2a6; --torcedor:#e8b800; --agiota:#b06fd6; --fazendeiro:#6fae54; --neutra:#b8b09a;
  --r-comum:#c9c2ad; --r-rara:#5aa6e0; --r-epica:#c77dff; --r-lendaria:#ffba45;
  --hp:#e0584f; --jeit:#46c0e0; --pila:#6fd08a;
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{
  font-family:"Oswald","Segoe UI",system-ui,Arial,sans-serif;color:var(--txt);
  background:
    radial-gradient(1200px 700px at 50% -8%, #3b2f12 0%, rgba(59,47,18,0) 55%),
    radial-gradient(900px 600px at 12% 100%, #241a10 0%, rgba(0,0,0,0) 60%),
    linear-gradient(180deg,#15120c 0%, #0e0c08 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;letter-spacing:.2px;
}
body::before{ /* fios e textura sutil */
  content:"";position:fixed;inset:0;pointer-events:none;opacity:.06;z-index:0;
  background-image:repeating-linear-gradient(115deg,#fff 0 1px,transparent 1px 90px),
                   repeating-linear-gradient(72deg,#fff 0 1px,transparent 1px 120px);
}
.boot{display:grid;place-items:center;height:100vh;color:var(--muted);font-size:1.1em}
#app{position:relative;z-index:1}
h1,h2,h3,h4{margin:.2em 0;font-family:"Cinzel",serif;letter-spacing:.5px}
.serif{font-family:"Cinzel",serif}

/* ---- botões ---- */
button{font-family:"Oswald",sans-serif;cursor:pointer;border:none;border-radius:9px;padding:11px 18px;
  font-weight:700;font-size:.96em;letter-spacing:.4px;text-transform:uppercase;color:#241a05;
  background:linear-gradient(180deg,#f4d469,var(--gold2));border:1px solid #5a4413;
  box-shadow:0 2px 0 #5a4413,0 6px 14px #0007;transition:.12s}
button:hover{filter:brightness(1.08);transform:translateY(-1px)}
button:active{transform:translateY(1px);box-shadow:0 1px 0 #5a4413}
button.ghost{background:transparent;color:var(--gold);border:1px solid var(--line2);box-shadow:none}
button.ghost:hover{background:#2a2113;color:#ffd76a}
button.sec{background:linear-gradient(180deg,#36302180,#221d14);color:var(--txt);border:1px solid var(--line);box-shadow:0 2px 8px #0005}
button:disabled{opacity:.4;cursor:not-allowed;filter:grayscale(.4)}

input,select{font-family:inherit;padding:11px;border-radius:9px;border:1px solid var(--line2);
  background:#15110b;color:var(--txt);width:100%;font-size:1em}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 2px #e9c14a33}
a{color:var(--gold)}
.wrap{max-width:1180px;margin:0 auto;padding:18px 18px 90px}
.center{max-width:460px;margin:5vh auto;padding:0 18px}
.muted{color:var(--muted);font-size:.92em}
.ok{color:var(--pila)} .err{color:#ff8a7a;min-height:1.2em;font-size:.92em}
.row{display:flex;gap:12px;flex-wrap:wrap}
.between{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}

/* ---- painel ornamentado ---- */
.panel{position:relative;background:linear-gradient(180deg,var(--panel2),var(--panel));
  border:1px solid var(--line2);border-radius:16px;padding:22px;
  box-shadow:inset 0 0 0 1px #00000060, inset 0 1px 0 #ffffff10, 0 14px 40px #000a}
.panel::before{content:"";position:absolute;inset:6px;border:1px solid #6b562f55;border-radius:11px;pointer-events:none}
.gold{background:linear-gradient(180deg,#fff2c0,#e9c14a 45%,#a9781a);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 1px 0 #00000030}
.pill{background:#2a2114;border:1px solid var(--line2);padding:6px 13px;border-radius:30px;font-size:.85em;display:inline-flex;gap:6px;align-items:center}

/* ============ LOGO ============ */
.logo{position:relative;text-align:center;padding:6px 0 2px}
.logo .crown{font-size:2.1em;filter:drop-shadow(0 2px 3px #000a)}
.logo .l1{font-size:1.05em;letter-spacing:5px;color:#efe4c4;font-weight:700;margin-top:-6px}
.logo .l2{font-family:"Cinzel",serif;font-weight:900;font-size:2.9em;line-height:.9;margin:2px 0;
  background:linear-gradient(180deg,#fff4cc,#eac24c 50%,#9c6e16);-webkit-background-clip:text;background-clip:text;color:transparent;
  text-shadow:0 2px 0 #3a2a07,0 4px 12px #000;filter:drop-shadow(0 1px 0 #000)}
.logo .ribbon{display:inline-block;margin-top:4px;background:linear-gradient(180deg,#2f6f4f,#1c4e36);color:#dff5e6;
  border:1px solid #0c2e1f;padding:4px 16px;border-radius:6px;font-size:.78em;letter-spacing:3px;font-weight:600;
  box-shadow:0 3px 8px #0007}
.logo .tag{margin-top:10px;font-family:"Cinzel",serif;font-style:italic;color:#e9c14a;font-size:1em}
.logo .tag b{color:#ffe08a}

/* ============ AUTH / CLASSES ============ */
.classes{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin:10px 0}
.classpick{position:relative;border-radius:14px;padding:0 0 14px;cursor:pointer;overflow:hidden;
  background:linear-gradient(180deg,#241d12,#15110b);border:2px solid var(--line);transition:.15s;text-align:center}
.classpick:hover{transform:translateY(-3px)}
.classpick .port{height:120px;display:grid;place-items:center;font-size:3.4em;
  background:radial-gradient(120px 90px at 50% 30%, #ffffff18, transparent 70%);border-bottom:1px solid #0007}
.classpick h4{font-size:1.25em;margin:8px 0 4px;text-transform:uppercase}
.classpick .icon{font-size:1.3em;margin-top:6px;opacity:.85}
.classpick.nerd{border-color:var(--nerd)} .classpick.nerd .port{background:linear-gradient(180deg,#0e3b34,#0a221e)}
.classpick.torcedor{border-color:var(--torcedor)} .classpick.torcedor .port{background:linear-gradient(180deg,#4a3b06,#241d05)}
.classpick.agiota{border-color:var(--agiota)} .classpick.agiota .port{background:linear-gradient(180deg,#3a1f4a,#1f1228)}
.classpick.fazendeiro{border-color:var(--fazendeiro)} .classpick.fazendeiro .port{background:linear-gradient(180deg,#2c4516,#16240b)}
.classpick.sel{box-shadow:0 0 0 3px var(--gold),0 10px 24px #000a;transform:translateY(-3px)}
.classpick.sel::after{content:"✓";position:absolute;top:8px;right:10px;background:var(--gold);color:#241a05;
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;font-weight:900}

.tabs{display:flex;gap:8px;margin:8px 0 16px;flex-wrap:wrap}
.field{margin:12px 0}.field label{display:block;font-size:.82em;color:var(--muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:1px}

/* ============ NAV / TOPBAR ============ */
.topbar{position:sticky;top:0;z-index:20;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:10px 16px;margin:-18px -18px 16px;flex-wrap:wrap;
  background:linear-gradient(180deg,#1d1810ee,#161109cc);backdrop-filter:blur(6px);border-bottom:1px solid var(--line2)}
.topbar .mini{font-family:"Cinzel",serif;font-weight:900;font-size:1.15em}
.topbar .mini b{color:var(--gold)}
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav .nb{display:flex;flex-direction:column;align-items:center;gap:2px;background:transparent;border:1px solid transparent;
  color:var(--muted);box-shadow:none;padding:6px 12px;border-radius:10px;font-size:.72em}
.nav .nb .ic{font-size:1.25em}
.nav .nb:hover{color:var(--txt);background:#2a2114}
.nav .nb.on{color:#ffe08a;background:#2e2412;border-color:var(--line2)}
.stats-mini{display:flex;gap:8px;align-items:center}

/* ============ CARTA (anatomia) ============ */
.gc{position:relative;width:180px;border-radius:16px;padding:9px 9px 12px;
  background:linear-gradient(180deg,#3a3120,#221b11);
  border:2px solid var(--line2);box-shadow:0 8px 20px #000a, inset 0 0 0 1px #00000050;
  display:flex;flex-direction:column;gap:5px;transition:.14s}
.gc .art{height:78px;border-radius:10px;display:grid;place-items:center;font-size:2.4em;
  background:radial-gradient(90px 60px at 50% 35%,#ffffff14,transparent 70%),linear-gradient(180deg,#2b2517,#191309);
  border:1px solid #0007;box-shadow:inset 0 0 14px #000a}
.gc .type{align-self:center;margin-top:-10px;background:linear-gradient(180deg,#3a2f17,#221a0c);
  border:1px solid var(--line2);color:#e7d9af;font-size:.62em;letter-spacing:2px;text-transform:uppercase;
  padding:2px 12px;border-radius:20px;box-shadow:0 2px 6px #0007}
.gc .nm{text-align:center;font-family:"Cinzel",serif;font-weight:700;font-size:.92em;line-height:1.05;color:#fff3d2;
  text-shadow:0 1px 2px #000}
.gc .tx{font-size:.74em;line-height:1.22;color:#e7ddc4;background:#00000035;border-radius:8px;padding:6px 8px;flex:1;
  border:1px solid #ffffff10}
.gc .tx b{color:var(--gold)}
.gc .fl{font-size:.68em;color:var(--muted);font-style:italic;text-align:center;line-height:1.15}
.gc .kw{font-size:.66em;color:var(--r-rara);text-align:center;font-weight:600}
/* gem de custo */
.gc .cost{position:absolute;top:-12px;left:-12px;width:38px;height:38px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#9fe0f5,#2b86b0 60%,#16506e);
  color:#04222f;font-weight:900;font-size:1.25em;display:grid;place-items:center;
  border:2px solid #0a3243;box-shadow:0 3px 8px #000a, inset 0 1px 2px #fff8}
/* gems de classe + raridade */
.gc .gemL,.gc .gemR{position:absolute;top:-9px;width:18px;height:18px;transform:rotate(45deg);border:1px solid #0008;border-radius:4px}
.gc .gemL{left:34px} .gc .gemR{right:10px}
/* atk / res */
.gc .atk,.gc .res{position:absolute;bottom:-10px;width:34px;height:34px;border-radius:50%;font-weight:900;font-size:1.05em;
  display:grid;place-items:center;border:2px solid #0008;box-shadow:0 3px 7px #000a, inset 0 1px 2px #fff6}
.gc .atk{left:-10px;background:radial-gradient(circle at 35% 30%,#ffe08a,#d39a1e 60%,#8a5f0f);color:#3a2600}
.gc .res{right:-10px;background:radial-gradient(circle at 35% 30%,#ff9a8f,#cf463c 60%,#7e231c);color:#fff}
/* raridade na borda */
.gc.rara{border-color:var(--r-rara);box-shadow:0 8px 20px #000a, inset 0 0 0 1px #5aa6e055,0 0 14px #5aa6e033}
.gc.epica{border-color:var(--r-epica);box-shadow:0 8px 20px #000a, inset 0 0 0 1px #c77dff55,0 0 16px #c77dff44}
.gc.lendaria{border-color:var(--r-lendaria);box-shadow:0 8px 22px #000a, inset 0 0 0 1px #ffba4566,0 0 22px #ffba4555}
.gc .ribbonR{position:absolute;bottom:6px;right:8px;font-size:.6em;text-transform:uppercase;letter-spacing:1px}
.gc.dim{opacity:.4;filter:grayscale(.7)}
.gc .own{position:absolute;top:6px;right:8px;background:#000b;border:1px solid var(--line2);padding:1px 8px;border-radius:12px;font-size:.74em;color:var(--gold)}
.gc .add{display:flex;gap:8px;align-items:center;justify-content:center;margin-top:4px}
.gc .add button{padding:3px 11px;font-size:.95em;border-radius:7px}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:20px 16px;justify-items:center;margin-top:18px}

/* ============ BOARD / PARTIDA ============ */
.arena{background:
  radial-gradient(700px 300px at 50% 50%, #2a2414aa, transparent 70%),
  linear-gradient(180deg,#1a150d,#0e0b07);
  border:1px solid var(--line2);border-radius:16px;padding:12px;margin-top:8px;box-shadow:inset 0 0 40px #000a}
.hero{display:flex;align-items:center;gap:12px;background:linear-gradient(180deg,#241d12,#15100a);
  border:1px solid var(--line2);border-radius:12px;padding:8px 12px;box-shadow:0 4px 12px #0007}
.hero .ava{width:48px;height:48px;border-radius:50%;display:grid;place-items:center;font-size:1.6em;
  background:radial-gradient(circle at 40% 30%,#ffffff20,transparent),#2a2114;border:2px solid var(--gold2)}
.hp{display:flex;align-items:center;gap:5px;font-weight:900;font-size:1.35em;color:#fff;
  text-shadow:0 1px 2px #000}
.hp .heart{color:var(--hp);font-size:1.1em}
.jeitbar{display:flex;gap:3px;align-items:center}
.jeitbar .g{width:14px;height:14px;border-radius:50%;background:#22303a;border:1px solid #0a2733}
.jeitbar .g.f{background:radial-gradient(circle at 35% 30%,#bfeafc,#2b86b0);box-shadow:0 0 6px #46c0e0aa}
.terr{font-family:"Cinzel",serif;text-align:center;color:#e8d9a8;font-size:.85em;
  background:linear-gradient(180deg,#2a2113,#1a140b);border:1px solid var(--line2);border-radius:10px;padding:6px 14px}
.lane{min-height:150px;border-radius:14px;border:1px dashed #5a4a2a66;margin:10px 0;padding:10px;
  display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap;background:
  repeating-linear-gradient(90deg,#ffffff05 0 2px,transparent 2px 60px),#0003}
.lane.me{background:repeating-linear-gradient(90deg,#6fae5410 0 2px,transparent 2px 60px),#16240b22;border-color:#6fae5455}

.unit{width:118px;min-height:140px;border-radius:12px;padding:8px;position:relative;cursor:default;
  background:linear-gradient(180deg,#3a3120,#201a10);border:2px solid var(--line2);
  box-shadow:0 6px 14px #000a;transition:.12s}
.unit .uart{height:62px;border-radius:8px;display:grid;place-items:center;font-size:1.9em;
  background:radial-gradient(70px 45px at 50% 35%,#ffffff14,transparent),#191309;border:1px solid #0007}
.unit .un{text-align:center;font-family:"Cinzel",serif;font-size:.74em;font-weight:700;margin-top:4px;line-height:1;color:#fff3d2}
.unit .ks{position:absolute;top:4px;left:0;right:0;text-align:center;font-size:.62em;color:var(--jeit);text-shadow:0 1px 2px #000}
.unit .a,.unit .r{position:absolute;bottom:-9px;width:30px;height:30px;border-radius:50%;font-weight:900;
  display:grid;place-items:center;border:2px solid #0008;box-shadow:0 2px 6px #000a;font-size:.95em}
.unit .a{left:-8px;background:radial-gradient(circle at 35% 30%,#ffe08a,#cf9a1e);color:#3a2600}
.unit .r{right:-8px;background:radial-gradient(circle at 35% 30%,#ff9a8f,#cf463c);color:#fff}
.unit.guard{border-color:var(--jeit);box-shadow:0 0 0 2px #46c0e066,0 0 16px #46c0e055}
.unit.guard::before{content:"🛡";position:absolute;top:-12px;left:50%;transform:translateX(-50%);font-size:1.1em;filter:drop-shadow(0 1px 2px #000)}
.unit.fresh{opacity:.72}
.unit.canatk{box-shadow:0 0 0 2px var(--fazendeiro),0 0 16px #6fae5466;cursor:pointer}
.unit.canatk:hover{transform:translateY(-4px)}
.unit.sel{box-shadow:0 0 0 3px var(--gold),0 0 22px var(--gold);transform:translateY(-4px)}
.unit.tgt{box-shadow:0 0 0 3px var(--hp),0 0 18px #e0584f88;cursor:crosshair}
.facecard{width:118px;min-height:140px;border-radius:12px;display:grid;place-content:center;justify-items:center;gap:6px;
  background:linear-gradient(180deg,#3a1414,#1c0a0a);border:2px solid #6b2a2a;cursor:default}
.facecard.tgt{box-shadow:0 0 0 3px var(--hp),0 0 22px #e0584faa;cursor:crosshair}
.facecard .big{font-size:2.1em;font-weight:900;color:#fff}

.hand{display:flex;gap:10px;overflow-x:auto;padding:18px 6px 10px;margin-top:6px;scrollbar-width:thin}
.hand .gc{min-width:150px;width:150px;flex:0 0 auto}
.hand .gc.playable{cursor:pointer;box-shadow:0 0 0 2px #6fae5466,0 10px 22px #000a,0 0 18px #6fae5444}
.hand .gc.playable:hover{transform:translateY(-12px)}
.hand .gc.nope{opacity:.5}
.actionbar{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-top:8px}
.endbtn{font-size:1.05em;padding:13px 26px}
.log{background:#0007;border:1px solid var(--line);border-radius:10px;padding:8px 12px;font-size:.8em;
  max-height:90px;overflow-y:auto;margin-top:10px;color:var(--muted)}
.log b{color:var(--gold)}

/* ============ CARDS DE LISTA (campanha/decks) ============ */
.tile{background:linear-gradient(180deg,#241d12,#16110a);border:1px solid var(--line2);border-radius:14px;padding:16px 18px;
  box-shadow:0 6px 16px #0007}
.stagebadge{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;font-family:"Cinzel",serif;font-weight:900;
  background:radial-gradient(circle at 35% 30%,#ffe08a,#b8881f);color:#3a2600;border:2px solid #5a4413}

/* ============ RODAPÉ ============ */
.foot{margin-top:26px;border-top:1px solid var(--line2);padding:16px;display:flex;justify-content:space-between;
  align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted)}
.foot .gue{font-family:"Cinzel",serif;font-weight:900;color:var(--fazendeiro);font-size:1.2em}
.foot .checks{display:flex;gap:14px;flex-wrap:wrap;font-size:.82em}
.foot .checks span::before{content:"✓ ";color:var(--pila);font-weight:900}

/* ============ MODAIS / TOAST ============ */
.toast{position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:80;max-width:92%;
  background:linear-gradient(180deg,#2a2113,#16110a);border:1px solid var(--gold);color:#ffe6a6;
  padding:11px 20px;border-radius:12px;box-shadow:0 10px 30px #000c;font-weight:600}
.modal{position:fixed;inset:0;background:#000c;display:grid;place-items:center;z-index:90;padding:18px}
.modal .panel{max-width:460px;text-align:center}
.big{font-family:"Cinzel",serif;font-size:2.1em;font-weight:900}

@media(max-width:780px){
  .classes{grid-template-columns:repeat(2,1fr)}
  .logo .l2{font-size:2.1em}
  .gc{width:150px}.hand .gc{width:138px;min-width:138px}
  .unit,.facecard{width:96px}
}