/* ==== GiftX — modern compact UI ================================================== */
:root{
  --bg-1:#0a0b14;
  --bg-2:#121327;
  --glass:rgba(255,255,255,.06);
  --card:#1a1c33;
  --card-border:rgba(255,255,255,.12);
  --accent:#9b8cff;
  --accent-2:#00d2ff;
  --good:#4ade80;
  --warn:#ffd166;
  --bad:#ff6b6b;
  --text:#eef1ff;
  --text-dim:#c9cfde;
  --shadow:0 10px 30px rgba(0,0,0,.35);
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--text); background:
    radial-gradient(1000px 600px at 20% -20%, #2b1d5a 0%, transparent 60%),
    radial-gradient(1000px 700px at 120% 0%, #0b2c4d 0%, transparent 60%),
    var(--bg-1);
  font:16px/1.35 system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}

a{color:inherit}
.hidden{display:none !important}
.mt4{margin-top:.25rem}.mt8{margin-top:.5rem}.mt12{margin-top:.75rem}

.container{padding:16px 16px 100px}

/* Cards / chips / buttons */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.03));
  border:1px solid var(--card-border);
  border-radius:16px; padding:12px; box-shadow:var(--shadow);
}
.title{font-size:1.6rem; font-weight:900; display:flex; align-items:center; gap:.5rem}
.subtitle{font-size:1.15rem; font-weight:800}
.muted-sm{color:var(--text-dim); font-size:.9rem}
.row{display:flex; align-items:center; justify-content:space-between}
.grid-auto{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:.75rem}

.btn{background:var(--glass); border:1px solid var(--card-border); color:var(--text);
     padding:.55rem .8rem; border-radius:12px; cursor:pointer}
.btn-primary{background:linear-gradient(135deg, var(--accent) 0%, #ff6bd5 100%); border:none; color:#fff}
.btn-ghost{background:transparent; border:1px solid var(--card-border)}
.chip{background:var(--glass); border:1px solid var(--card-border); padding:.35rem .6rem; border-radius:999px}

/* KPI cards — brighter */
.kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem}
.kpi-card{
  position:relative; overflow:hidden; border-radius:16px; padding:14px;
  background:linear-gradient(135deg, #6f42ff, #b14dff 40%, #ff6b9a 100%);
  color:#fff; box-shadow:0 10px 28px rgba(145,110,255,.25);
}
.kpi-card::after{
  content:""; position:absolute; inset:0;
  background:radial-gradient(300px 220px at 120% -40%, rgba(255,255,255,.35), transparent 60%);
  pointer-events:none;
}
.kpi-title{opacity:.95; font-weight:700; letter-spacing:.2px}
.kpi-stat{font-size:1.9rem; font-weight:900; margin-top:.2rem}

/* Vault tiles */
.vault-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.55rem}
@media (min-width:520px){ .vault-grid{grid-template-columns:repeat(4,1fr)} }
.tile{position:relative; border-radius:14px; overflow:hidden; border:1px solid var(--card-border); background:var(--card)}
.tile img{display:block; width:100%; height:100%; aspect-ratio:1/1; object-fit:cover}
.tile .overlay{position:absolute; right:.4rem; bottom:.4rem; background:rgba(0,0,0,.55);
  border:1px solid var(--card-border); padding:.2rem .45rem; border-radius:999px; font-weight:700}

/* Battle slots — compact and image-focused */
.slots{display:grid; grid-template-columns:repeat(3,1fr); gap:.35rem}
.slot{position:relative; aspect-ratio:1/1; border-radius:14px; border:1px dashed rgba(255,255,255,.18);
  display:flex; align-items:center; justify-content:center; background:rgba(255,255,255,.03)}
.slot.taken{border-style:solid; border-color:rgba(255,255,255,.12); background:rgba(255,255,255,.04)}
.slot.plus{font-weight:900; color:#c9cfde}
.slot-inner{width:88%; height:88%; border-radius:12px; overflow:hidden; display:flex; align-items:center; justify-content:center}
.slot-img{width:100%; height:100%; object-fit:cover; display:block}

/* Battle card tweaks */
.battle-card{padding:10px}
.win-badge{background:#ffbf00; color:#1f1400; padding:.3rem .55rem; border-radius:10px; font-weight:900}

/* Badges */
.badge{display:inline-flex; align-items:center; gap:.35rem; padding:.2rem .45rem; border-radius:999px;
  border:1px solid var(--card-border); background:var(--glass); font-weight:800}
.badge.cyan{background:linear-gradient(135deg, #00d2ff, #6f42ff); color:#fff; border:none}
.badge.yellow{background:linear-gradient(135deg, #ffd166, #ff9e38); color:#382100; border:none}

/* Segmented control */
.seg{display:inline-flex; background:var(--glass); border:1px solid var(--card-border); border-radius:999px; padding:.2rem}
.seg>button{background:transparent; border:none; color:var(--text-dim); padding:.35rem .7rem; border-radius:999px; cursor:pointer}
.seg>button.on{background:rgba(255,255,255,.12); color:#fff; font-weight:800}

/* Sheet (join/create) */
.scrim{position:fixed; inset:0; background:rgba(0,0,0,.45); backdrop-filter:saturate(120%) blur(3px); z-index:30}
.sheet{position:fixed; left:0; right:0; bottom:0; z-index:31; background:var(--bg-2); color:var(--text);
  border-top-left-radius:18px; border-top-right-radius:18px; border:1px solid var(--card-border); padding:14px}
.mini-trash{position:absolute;right:.28rem;top:.28rem;background:rgba(0,0,0,.55);border:1px solid var(--card-border);border-radius:999px;font-size:.85rem;line-height:1;padding:.18rem .34rem;cursor:pointer}
.sel-outline{outline:2px solid #fff}
.tile.disabled{opacity:.5;pointer-events:none}

/* Bottom nav — single line, compact, Tournament centered */
.bottom-nav{position:fixed; left:0; right:0; bottom:0; padding:10px 12px 12px; background:linear-gradient(180deg, transparent, rgba(0,0,0,.45) 40%, rgba(0,0,0,.65) 100%); z-index:40}
.bottom-nav .bar{display:flex; align-items:center; justify-content:space-between; gap:6px}
.nav-btn{
  flex:1; min-width:0; display:flex; flex-direction:column; align-items:center; gap:4px;
  padding:6px 0; border-radius:12px; border:1px solid transparent; background:transparent; color:var(--text-dim);
  font-weight:700; font-size:.78rem;
}
.nav-emoji{font-size:18px; line-height:1}
.nav-btn.active{color:#fff; background:rgba(255,255,255,.08); border-color:rgba(255,255,255,.16)}
.nav-text{white-space:nowrap; overflow:hidden; text-overflow:ellipsis}

/* Toast */
.toast{position:fixed; left:50%; bottom:86px; transform:translateX(-50%); background:#111827; color:#fff;
  padding:.55rem .8rem; border-radius:10px; border:1px solid rgba(255,255,255,.12); box-shadow:var(--shadow); z-index:50}

/* Collection chips */
.collection-scroller{display:flex; gap:.4rem; overflow:auto; padding-bottom:.2rem}
.coll-chip{padding:.4rem .7rem; border-radius:999px; border:1px solid var(--card-border); background:var(--glass); white-space:nowrap; cursor:pointer}
.coll-chip.on{background:linear-gradient(135deg, var(--accent), #ff6bd5); border:none; color:#fff; font-weight:900}

/* Helper paddings */
.with-bottom-pad{padding-bottom:110px}
.section{display:block}
/* --- Fix: sheet above bottom nav & always-visible actions --- */
.bottom-nav{ z-index:40; }          /* keep nav high, but sheet higher */
.scrim{ z-index:60; }
.sheet{
  z-index:61;
  padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
.sheet-actions{
  position: sticky;
  bottom: 0;
  display: flex;
  gap: .5rem;
  justify-content: space-between;
  background: linear-gradient(180deg, transparent, rgba(0,0,0,.25));
  padding-top: .6rem;
  padding-bottom: env(safe-area-inset-bottom);
  margin-top: .8rem;
}
.sheet-x{
  position:absolute; right:.5rem; top:.5rem;
  width:32px; height:32px; border-radius:999px;
  background:rgba(0,0,0,.55); border:1px solid var(--card-border);
  color:#fff; font-weight:900; line-height:32px; text-align:center;
}

/* --- Make KPI cards bright & readable --- */
.kpi-card{
  background: radial-gradient(90% 120% at 20% 0%, #7b5cff 0%, #ff7ac3 60%, #ff8a7a 100%);
  color:#fff;
}
.kpi-title{opacity:.95; font-weight:800}
.kpi-stat{font-size:2.1rem; font-weight:900; margin-top:.2rem}

/* --- Compact battle cards (keep images prominent) --- */
.battle-card{ padding:8px; }
.battle-card .slots{ gap:.28rem; }
.slot-inner{ width:90%; height:90%; }