/* BodoBazi – Gaming UI v6.0 (visual refresh) */
@font-face{
  font-family:'DejaBodo';
  src:url('/assets/fonts/DejaVuSans-Bold.ttf') format('truetype');
  font-weight:700; font-style:normal; font-display:swap;
}

:root{
  --bg1:#070b1a; --bg2:#0e1636;
  --glass:#10183a; --glass2:#0e2257;
  --brand:#69b0ff; --brand2:#50aaff;
  --accent:#3bd671; --warn:#ffd25c;
  --text:#eaf3ff; --muted:#a8b3c7;
  --ring:rgba(105,176,255,.28);
  --card-border:rgba(255,255,255,.08);
  --shadow:0 18px 46px rgba(0,0,0,.45);
  --radius:18px;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --bn-h:64px;
}

*{box-sizing:border-box}
html,body{
  margin:0;padding:0;
  background:
    radial-gradient(1200px 900px at 70% -10%, rgba(80,170,255,.22), transparent),
    linear-gradient(180deg,var(--bg1),var(--bg2));
  color:var(--text);
  font-family:'Vazirmatn', system-ui, Segoe UI, Roboto, Arial;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}
a{color:inherit;text-decoration:none}
button{font-family:inherit}
[hidden]{display:none !important}
.muted{color:var(--muted)}
img{max-width:100%; height:auto; display:block}

/* Decorative background (subtle, non-interactive) */
.bg-decor{
  position:fixed; inset:-10% -5% -5% -5%; pointer-events:none; z-index:-1;
  background:
    conic-gradient(from 210deg at 70% 10%, rgba(80,170,255,.10), transparent 20%),
    radial-gradient(420px 360px at 85% 25%, rgba(59,214,113,.10), transparent 60%),
    radial-gradient(520px 360px at 15% 75%, rgba(105,176,255,.10), transparent 60%);
  filter: blur(30px);
  opacity:.9;
  animation: decorFloat 18s ease-in-out infinite alternate;
}
@keyframes decorFloat{to{transform:translateY(-10px) translateX(-6px)}}

/* ---------- Topbar ---------- */
.topbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px calc(10px + var(--safe-bottom));
  background:rgba(9,13,35,.38);
  backdrop-filter:blur(10px) saturate(120%);
  border-bottom:1px solid rgba(255,255,255,.06);
  flex-wrap:nowrap;
}
.topbar > *{min-width:0}
.logo{height:36px;filter:drop-shadow(0 2px 8px rgba(100,170,255,.4))}
.profile{display:flex;align-items:center;gap:10px;margin-inline-start:auto;min-width:0}
#profile img{width:38px !important;height:38px !important;object-fit:cover;border-radius:50%;border:2px solid var(--brand);box-shadow:0 0 0 3px var(--ring)}
.profile .button{padding:8px 12px;border-radius:10px;font-size:12px;white-space:nowrap}

.container{padding:16px;max-width:1140px;margin:0 auto}

/* ---------- Buttons / Chips ---------- */
.button, .btn, button{
  appearance:none;border:none;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:10px 14px;border-radius:12px;
  background:
    linear-gradient(90deg,var(--brand),var(--brand2));
  color:#07132b;font-weight:800;letter-spacing:.2px;
  box-shadow:0 8px 24px rgba(105,176,255,.25);
  transition:transform .12s ease, box-shadow .12s ease, filter .12s ease;
}
.button:hover{transform:translateY(-1px); box-shadow:0 12px 30px rgba(105,176,255,.32)}
.button:active{transform:translateY(0)}
.button.ghost{
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.04)) padding-box,
             linear-gradient(120deg, rgba(255,255,255,.18), rgba(105,176,255,.35), rgba(59,214,113,.25)) border-box;
  border:1px solid transparent; color:var(--text); box-shadow:none;
}
.button.small{padding:8px 12px;font-size:12px;border-radius:10px}

/* ---------- Hero ---------- */
.hero{
  position:relative; overflow:hidden;
  padding:22px;border-radius:var(--radius);
  background:
    linear-gradient(180deg,var(--glass),var(--glass2)) padding-box,
    linear-gradient(120deg, rgba(255,255,255,.14), rgba(105,176,255,.38), rgba(59,214,113,.28)) border-box;
  border:1px solid transparent; box-shadow:var(--shadow);
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.display{font-size:28px; font-weight:900; letter-spacing:.8px}
.hero .hero-actions{display:flex;gap:10px;margin-top:10px;flex-wrap:wrap}
.hero-visual{position:absolute; inset:0; pointer-events:none}
.hero-visual .orb{
  position:absolute; width:220px; height:220px; border-radius:50%;
  filter:blur(20px); opacity:.55;
}
.hero-visual .orb-1{left:-60px; top:-40px; background:radial-gradient(circle, rgba(105,176,255,.45), transparent 60%)}
.hero-visual .orb-2{right:-40px; bottom:-60px; background:radial-gradient(circle, rgba(59,214,113,.45), transparent 60%)}
.hero-visual .gridlines{
  position:absolute; inset:-20px; background-image:
    linear-gradient(transparent 0 95%, rgba(255,255,255,.06) 96%),
    linear-gradient(90deg, transparent 0 95%, rgba(255,255,255,.06) 96%);
  background-size:24px 24px; opacity:.35; mask-image: radial-gradient(500px 300px at 80% 50%, #000 10%, transparent 70%);
}
.neon .spark{filter:drop-shadow(0 0 10px rgba(255,255,255,.5))}
.hero:after{
  content:""; position:absolute; left:0; right:0; bottom:-6px; height:1px;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.25), transparent);
  opacity:.6
}

/* ---------- Wallet / Forge ---------- */
.wallet{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  background:linear-gradient(180deg,rgba(34,46,98,.6),rgba(21,29,70,.6)) padding-box,
             linear-gradient(120deg, rgba(255,255,255,.14), rgba(105,176,255,.35)) border-box;
  backdrop-filter:blur(8px);
  border:1px solid transparent;border-radius:16px;padding:12px;margin:14px 0;box-shadow:0 8px 24px rgba(0,0,0,.35)
}
.coins-pill{font-weight:800}
.btn-buy{background:linear-gradient(90deg,var(--accent),#2cc460);color:#06201a}
.forge .forge-row{display:flex;align-items:center;justify-content:space-between;gap:12px}

/* ---------- Toolbar ---------- */
.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:14px 0}
.searchbar{
  flex:1 1 260px; min-width:220px;
  border-radius:12px;padding:12px 14px;background:#11193c;color:var(--text);
  border:1px solid var(--card-border); outline:none;
}
.searchbar:focus{box-shadow:0 0 0 3px var(--ring)}
.chips{display:flex;gap:8px;flex-wrap:wrap;max-width:100%}
.chip{
  padding:8px 12px;border-radius:999px;border:1px solid var(--card-border);
  background:rgba(255,255,255,.04);cursor:pointer; transition:box-shadow .15s ease, background .15s ease
}
.chip.is-active{background:rgba(105,176,255,.14); box-shadow:0 0 0 3px var(--ring)}
[data-scrollable]{overflow:auto hidden; -webkit-overflow-scrolling:touch}
[data-scrollable]::-webkit-scrollbar{height:6px}
[data-scrollable]::-webkit-scrollbar-thumb{background:rgba(255,255,255,.12); border-radius:999px}

/* ---------- Cards / Grid ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:18px}
@media (max-width:420px){ .grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))} }

.card{
  background:
    linear-gradient(180deg,var(--glass),var(--glass2)) padding-box,
    linear-gradient(120deg, rgba(255,255,255,.12), rgba(105,176,255,.30), rgba(59,214,113,.20)) border-box;
  border:1px solid transparent;border-radius:var(--radius);
  padding:12px;box-shadow:var(--shadow);
  transition:transform .18s ease, box-shadow .18s ease, filter .18s ease
}
.card:hover{transform:translateY(-4px) scale(1.01); box-shadow:0 28px 64px rgba(0,0,0,.5)}
.card .title{font-weight:900;margin-top:10px;letter-spacing:.2px}
.card .desc{color:var(--muted);font-size:12px}
.thumb{
  width:100%;aspect-ratio:1/1;border-radius:14px;overflow:hidden;position:relative;
  background:#0b1231 center/cover no-repeat;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.06);
}
.thumb:after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(120deg, transparent 0%, rgba(255,255,255,.06) 35%, transparent 70%);
  transform:translateX(-100%); animation:shine 2.4s linear infinite;
}
@keyframes shine{to{transform:translateX(100%)}}

/* Skeleton while loading games */
#games[data-state="loading"]{
  min-height:220px;
  position:relative;
}
#games[data-state="loading"]::before{
  content:""; position:absolute; inset:0; border-radius:14px;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05), rgba(255,255,255,.08), rgba(255,255,255,.05));
  background-size:240% 100%;
  animation: shimmer 1.6s linear infinite;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  padding:8px; border:1px dashed rgba(255,255,255,.06);
  opacity:.5;
}
@keyframes shimmer{to{background-position: -240% 0}}

/* ---------- Section title ---------- */
.section-title{
  display:inline-flex; align-items:center; gap:8px; font-weight:900;
  position:relative; margin:10px 0 8px; font-size:18px;
}
.section-title span{
  background:linear-gradient(90deg, var(--brand), var(--brand2));
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.section-title::after{
  content:""; flex:1; height:1px; margin-inline-start:10px;
  background:linear-gradient(90deg, rgba(255,255,255,.18), transparent);
  opacity:.6;
}

/* ---------- Leaderboard ---------- */
.lb-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.leaderboard select{
  min-width:160px;border-radius:12px;padding:10px 12px;background:#11193c;color:var(--text);border:1px solid var(--card-border)
}
.lb-list{margin:0;padding:0 0 0 18px}
.lb-list li{margin:6px 0;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.06)}

.podium{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:10px 0 6px}
.podium .slot{
  text-align:center;padding:10px;border-radius:14px;
  background:rgba(255,255,255,.04);border:1px solid var(--card-border)
}
.podium .avatar{
  width:54px;height:54px;border-radius:50%;border:2px solid var(--brand);
  box-shadow:0 0 0 3px var(--ring); object-fit:cover
}
.podium .name{margin-top:6px;font-weight:700}
.podium .score{font-size:12px;color:var(--muted)}

/* ---------- Game Canvas/HUD ---------- */
#game{width:100%;max-width:360px;border-radius:16px;display:block;margin:8px auto;
  box-shadow:0 22px 60px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.06) inset;background:#0b1231}
.hud{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:8px auto 0;max-width:360px}
.hud .btn{background:linear-gradient(90deg,var(--accent),#2cc460);color:#06201a}

/* ---------- Sections / Empty / Footer ---------- */
section.card{padding:14px;border-radius:16px}
h1,h2,h3{margin:10px 0 8px}
.empty{
  text-align:center;padding:18px;border-radius:12px;border:1px dashed rgba(255,255,255,.06);
  margin-top:8px;background:rgba(255,255,255,.02)
}
.footer{opacity:.8;text-align:center;padding:32px 12px calc(32px + var(--safe-bottom))}

/* ---------- Bottom nav ---------- */
.bottom-nav{
  position:sticky;bottom:0;z-index:30;
  display:none;
  background:rgba(9,13,35,.7);backdrop-filter:blur(10px);
  border-top:1px solid rgba(255,255,255,.06);
  padding:8px 10px calc(8px + var(--safe-bottom));
}
.bottom-nav .nav-item{
  flex:1;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;
  gap:4px;padding:8px;border-radius:10px;background:transparent;border:none;color:var(--text);position:relative
}
.bottom-nav .nav-item.is-active{background:rgba(255,255,255,.06)}
.bottom-nav .nav-item.is-active::after{
  content:""; position:absolute; bottom:4px; width:24px; height:3px; border-radius:999px;
  background:linear-gradient(90deg,var(--brand),var(--brand2));
}
.bottom-nav .icon{font-size:18px;line-height:1}
.bottom-nav .label{font-size:12px}
@media (max-width:720px){
  .bottom-nav{display:flex;gap:8px;justify-content:space-between}
  main.container{padding-bottom:calc(var(--bn-h) + 24px + var(--safe-bottom))}
}

/* ---------- Focus & Reduced motion ---------- */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}
@media (prefers-reduced-motion: reduce){
  .card:hover{transform:none}
  .thumb:after{animation:none}
  .bg-decor{animation:none}
}