:root{
  --green-900:#003b00;
  --green-700:#006400;
  --accent:#ffd700;
  --card-bg:rgba(255,255,255,0.95);
  --text:#1b1b1b;
  --max-width:1100px;
}

/* Reset */
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:Inter, "Segoe UI", Arial, sans-serif;color:var(--text);margin:0;background:linear-gradient(180deg,#0b3b12 0%,#0f6b2a 60%);-webkit-font-smoothing:antialiased}

/* LOGIN */
.page-login .login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px}
.login-card{width:360px;background:var(--card-bg);border-radius:14px;padding:28px;box-shadow:0 10px 30px rgba(0,0,0,0.35);text-align:center}
.logo-circle{width:64px;height:64px;border-radius:50%;background:linear-gradient(135deg,var(--accent),#ffb84d);display:flex;align-items:center;justify-content:center;font-size:28px}
.field input{width:100%;padding:12px;border-radius:10px;border:1px solid #e6e6e6;font-size:15px}
.btn-primary{width:100%;padding:12px;border-radius:10px;border:none;background:var(--green-700);color:white;font-weight:700;cursor:pointer;margin-top:10px}
.muted{color:#666;font-size:13px;margin-top:10px}

/* TOPBAR */
.topbar{position:sticky;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 20px;background:linear-gradient(90deg,rgba(0,0,0,0.25),rgba(0,0,0,0.15));backdrop-filter:blur(6px);box-shadow:0 4px 12px rgba(0,0,0,0.25);z-index:40}
.left{display:flex;align-items:center;gap:14px}
.logo-text{font-weight:700;color:white;font-size:18px}
.icon-btn{background:transparent;border:none;color:white;font-size:18px;cursor:pointer}
.avatar{width:36px;height:36px;border-radius:50%;background:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:700;color:#222}

/* hamburger */
.hamburger{width:44px;height:36px;border-radius:8px;border:none;background:linear-gradient(180deg,var(--green-700),var(--green-900));display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;cursor:pointer}
.hamburger span{display:block;width:20px;height:2px;background:white;border-radius:2px;transition:all .25s}

/* SIDEBAR */
.sidebar{position:fixed;left:0;top:0;height:100%;width:260px;padding:28px;background:linear-gradient(180deg,var(--green-900),#002b00);color:white;box-shadow:2px 0 20px rgba(0,0,0,0.45);transform:translateX(-110%);z-index:50}
.sidebar.hidden{transform:translateX(-110%);transition:transform .32s cubic-bezier(.2,.9,.3,1)}
.sidebar-header{font-size:14px;margin-bottom:18px}
.nav-list{list-style:none;padding:0;margin:0}
.nav-list li{padding:12px 8px;border-radius:8px;cursor:pointer;margin-bottom:8px;transition:all .18s}
.nav-list li:hover{background:rgba(255,255,255,0.04);transform:translateX(6px)}
.nav-list li#logout{margin-top:18px;color:#ffd7a6}

/* overlay */
.overlay{position:fixed;inset:0;background:rgba(0,0,0,0.45);z-index:45;transition:opacity .25s;opacity:0;pointer-events:none}
.overlay:not(.hidden){opacity:1;pointer-events:auto}

/* CONTENT */
.content{max-width:var(--max-width);margin:28px auto;padding:0 20px}
.card{background:var(--card-bg);padding:20px;border-radius:12px;box-shadow:0 8px 20px rgba(0,0,0,0.18);margin-bottom:18px}
.card h2{margin:0 0 12px;color:var(--green-700);font-size:18px;border-bottom:3px solid var(--accent);display:inline-block;padding-bottom:6px}

/* FIGURINHAS */
.figurinhas{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
.figurinha-card{display:flex;flex-direction:column;align-items:center;gap:10px;background:linear-gradient(180deg,#fff,#fafafa);border-radius:12px;padding:12px;border:1px solid #e6e6e6;box-shadow:0 8px 18px rgba(0,0,0,0.08);transition:transform .18s,box-shadow .18s}
.figurinha-card:hover{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,0,0,0.15)}
.figurinha-img img{width:100%;max-width:160px;height:auto;border-radius:8px;display:block}
.player-name{display:block;color:#0b5a1a;font-weight:700}
.player-meta{font-size:13px;color:#666;margin-top:4px}
.rarity{font-weight:700;padding:4px 8px;border-radius:12px;font-size:12px}
.rarity.comum{background:#e6f7ea;color:#0b5a1a}
.rarity.rara{background:#fff4cc;color:#8a5b00}
.rarity.épica{background:#e8d7ff;color:#4b1f7a}
.rarity.lendária{background:#ffd9d9;color:#7a1f1f}

/* botões pequenos */
.btn-small{padding:8px 10px;font-size:13px;border-radius:8px;margin:4px}
.btn-outline{background:transparent;border:1px solid #ccc;color:#333}

/* responsividade */
@media (max-width:900px){.sidebar{width:220px}.content{margin:18px auto;padding:0 14px}}
@media (max-width:600px){.hamburger{width:40px;height:36px}.logo-text{font-size:15px}.figurinhas{grid-template-columns:repeat(2,1fr)}.login-card{width:320px}}

/* overlay */
.overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 40; /* menor que o sidebar */
  transition: opacity .25s;
  opacity: 0;
  pointer-events: none;
}
.overlay:not(.hidden) {
  opacity: 1;
  pointer-events: auto;
}

/* sidebar */
.sidebar {
  position: fixed;
  left: 0;
  top: 0;
  height: 100%;
  width: 260px;
  padding: 24px;
  background: linear-gradient(180deg,#003b00,#002200);
  color: #fff;
  box-shadow: 2px 0 20px rgba(0,0,0,0.45);
  transform: translateX(-110%);
  transition: transform .32s cubic-bezier(.2,.9,.3,1);
  z-index: 50; /* maior que o overlay */
}
.sidebar.visible {
  transform: translateX(0);
}