:root{
  --bg:#0b0f14;
  --card:#121823;
  --ink:#eaf2ff;
  --muted:#a8b3c7;
  --accent:#5dd8ff;
  --accent-2:#8fff9b;
  --danger:#ff6b6b;
  --success:#68f4a6;
  --shadow: 12px 12px 24px #0a0e13, -12px -12px 24px #0c1017;
  --radius:16px;
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, Apple Color Emoji, Segoe UI Emoji;
  color:var(--ink);
  background:linear-gradient(180deg,#0b0f14,#0d1220 40%,#0b0f14);
  padding-top: calc(56px + var(--safe-top));
  padding-bottom: calc(72px + var(--safe-bottom));
}
.topbar{
  position:fixed;top:0;left:0;right:0;z-index:10;
  height:56px;padding:8px 12px;display:flex;align-items:center;gap:12px;
  background:rgba(11,15,20,.6);backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.topbar h1{font-size:18px;margin:0;flex:1}
.back-btn{
  border:0;background:rgba(255,255,255,.06);color:var(--ink);
  padding:8px 10px;border-radius:12px;
  box-shadow: inset 6px 6px 12px #0a0e13, inset -6px -6px 12px #0c1017;
}
.ad-slot{min-width:120px;min-height:28px;border-radius:10px;background:rgba(255,255,255,.04)}
.container{max-width:960px;margin:0 auto;padding:16px}
.card{
  background: var(--card);
  border-radius: var(--radius);
  padding:16px;
  box-shadow: var(--shadow);
  margin-bottom:16px;
}
.hero{display:grid;gap:12px;place-items:center;text-align:center}
.hero-art{width:220px;max-width:80%;filter:drop-shadow(0 6px 18px rgba(0,0,0,.3))}
.row{display:flex;gap:10px;align-items:center;margin:10px 0;flex-wrap:wrap}
.row.actions{justify-content:flex-end}
.btn{
  border:0; padding:10px 14px;border-radius:12px;
  background: #131a28; color:var(--ink);
  box-shadow: inset 6px 6px 12px #0a0e13, inset -6px -6px 12px #0c1017;
  cursor:pointer; transition: transform .05s ease, filter .15s ease;
}
.btn:active{transform:scale(.98)}
.btn.primary{background: linear-gradient(180deg, #1c2338, #0f1527);}
.btn.success{background: linear-gradient(180deg, #1f3a2e, #153224);}
.btn.danger{background: linear-gradient(180deg, #3a1f1f, #2a1717);}
.badge{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.08);font-size:12px}
.hint{color:var(--muted);font-size:12px}
.list{display:grid;gap:8px}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chip{padding:6px 10px;border-radius:999px;background:rgba(255,255,255,.06);}
.grid-2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
input, select{
  width:100%;padding:10px;border-radius:12px;border:1px solid rgba(255,255,255,.06);
  background:#0f1420;color:var(--ink);
}
select{appearance:none;background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
background-position: calc(100% - 20px) calc(1em + 2px), calc(100% - 15px) calc(1em + 2px);
background-size:5px 5px, 5px 5px;background-repeat:no-repeat}
.tabbar{
  position:fixed;bottom:0;left:0;right:0;display:flex;justify-content:space-around;
  background:rgba(11,15,20,.8);backdrop-filter: blur(8px);
  padding:10px 6px; border-top:1px solid rgba(255,255,255,.06);
}
.tabbar button{
  background: #121826; color:var(--ink); border:0;border-radius:12px;padding:10px;
  box-shadow: inset 6px 6px 12px #0a0e13, inset -6px -6px 12px #0c1017;
}
.achievements-grid{
  display:grid;grid-template-columns: repeat(5,1fr);gap:10px;
}
.badge-tile{
  height:64px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background: #0e1624; color:#72809a; position:relative; box-shadow: var(--shadow);
}
.badge-tile.unlocked{background: linear-gradient(180deg,#1a263e,#122038);color:#fff; outline:1px solid rgba(140,235,160,.35)}
.badge-tile .emoji{font-size:22px;margin-right:6px}
.badge-tile .label{font-size:12px;text-align:center;padding:0 4px}
.lightbox[aria-hidden="true"]{display:none}
.lightbox{
  position:fixed;inset:0;background:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;
}
.lightbox-content{max-width:90vw;max-height:80vh}
.lightbox-close{
  position:fixed;top:8px;right:8px;border:0;background:rgba(255,255,255,.08);
  color:#fff;border-radius:12px;padding:10px
}
.fade-in{animation:fade .4s ease both}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
#toast-container{position:fixed;bottom:calc(80px + var(--safe-bottom));left:0;right:0;display:grid;place-items:center;gap:8px;z-index:99999}
.toast{background:#0f1626;color:#fff;padding:10px 14px;border-radius:12px;box-shadow: var(--shadow);}
canvas#wheel{display:block;margin:auto;filter: drop-shadow(0 8px 24px rgba(0,0,0,.35));border-radius:50%;background: radial-gradient(circle at 50% 50%, rgba(255,255,255,.04), rgba(0,0,0,.12));}
.list-item{padding:10px;border-radius:12px;background:#0f1626;display:flex;justify-content:space-between;align-items:center}
@media (max-width:680px){ .achievements-grid{grid-template-columns: repeat(4,1fr);} }