:root{
  --bg: var(--tg-theme-bg-color, #0f1115);
  --text: var(--tg-theme-text-color, #ffffff);
  --muted:#8b93a7;
  --card: var(--tg-theme-secondary-bg-color, #161a22);
  --btn: var(--tg-theme-button-color, #32a852);
  --btn-text: var(--tg-theme-button-text-color, #fff);
  --accent:#7c4dff; --danger:#e24a4a; --primary:#4f46e5;
  --radius:14px; --shadow:0 6px 24px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,'Helvetica Neue',Arial,'Noto Sans';background:var(--bg);color:var(--text)}
#app{min-height:100dvh;display:flex;flex-direction:column}

.topbar{position:sticky;top:0;z-index:10;display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:linear-gradient(0deg,rgba(0,0,0,0) 0%, rgba(15,17,21,.9) 100%),var(--bg);border-bottom:1px solid rgba(255,255,255,.06);backdrop-filter:blur(6px)}
.topbar .brand{font-weight:700}
.topbar .balance{background:var(--card);padding:6px 10px;border-radius:999px;font-weight:600;border:1px solid rgba(255,255,255,.08)}

.content{flex:1;padding:16px 14px 90px}
h2{margin:10px 2px 14px;font-size:20px}
.muted{color:var(--muted);margin:4px 2px 16px}

.task-list{display:grid;gap:12px}
.task{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:12px;box-shadow:var(--shadow);display:grid;gap:8px}
.task .title{font-weight:600}
.task .desc{color:var(--muted);font-size:14px}
.task .bottom{display:flex;justify-content:space-between;align-items:center;gap:8px}
.reward{font-weight:700}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 14px;border-radius:12px;border:none;cursor:pointer;font-weight:700;letter-spacing:.2px}
.btn.primary{background:var(--btn);color:var(--btn-text)}
.btn.ghost{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.12)}
.btn.outline{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.18)}
.btn.wide{width:100%}

.screen{display:none}
.screen.active{display:block}

.tabbar{position:fixed;left:0;right:0;bottom:0;display:grid;grid-template-columns:repeat(4,1fr);background:rgba(15,17,21,.9);backdrop-filter:blur(8px);border-top:1px solid rgba(255,255,255,.06);padding:8px;gap:8px}
.tab{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.08);border-radius:12px;padding:8px 6px;font-weight:600;display:grid;place-items:center;gap:4px}
.tab.active{border-color:rgba(124,77,255,.55);box-shadow:0 0 0 2px rgba(124,77,255,.18) inset}

/* Кейсы */
.cases-head{display:flex;align-items:center;justify-content:space-between;gap:12px}
.filters{display:flex;gap:8px;overflow:auto;padding-bottom:6px}
.chip{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.12);padding:8px 12px;border-radius:999px;cursor:pointer;white-space:nowrap}
.chip.active{border-color:rgba(124,77,255,.6);box-shadow:0 0 0 2px rgba(124,77,255,.2) inset}

.cases-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:10px}
@media(min-width:520px){.cases-grid{grid-template-columns:1fr 1fr 1fr}}
.case{
  background:linear-gradient(180deg, rgba(124,77,255,.15), rgba(124,77,255,.04));
  border:1px solid rgba(124,77,255,.25);
  border-radius:18px;padding:12px;box-shadow:var(--shadow);display:grid;gap:10px
}
.case .cover{height:140px;border-radius:14px;background:#0b0e13;display:grid;place-items:center;overflow:hidden;border:1px solid rgba(255,255,255,.06)}
.case img{width:100%;height:100%;object-fit:cover;display:block}
.case .row{display:flex;justify-content:space-between;align-items:center}
.case .title{font-weight:700}
.case .price{opacity:.9}

/* Модалка */
.modal{position:fixed;inset:0;display:grid;place-items:center;z-index:100}
.modal.hidden{display:none}
.modal__backdrop{position:absolute;inset:0;background:rgba(0,0,0,.6);backdrop-filter:blur(3px)}
.modal__card{position:relative;width:min(520px,92vw);max-height:86vh;overflow:auto;background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:16px;box-shadow:var(--shadow);padding:14px}
.modal__header{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.modal__title{font-weight:800}
.modal__close{background:transparent;color:var(--text);border:1px solid rgba(255,255,255,.14);border-radius:10px;padding:4px 10px;cursor:pointer}
.modal__body{display:grid;gap:14px}
.case-preview{position:relative}
.case-preview img{width:100%;height:auto;border-radius:12px;border:1px solid rgba(255,255,255,.08)}
.case-preview .price{position:absolute;left:12px;bottom:12px;background:rgba(0,0,0,.45);backdrop-filter:blur(4px);padding:6px 10px;border-radius:999px;border:1px solid rgba(255,255,255,.1)}

.drops__title{font-weight:700;margin-bottom:6px}
.drops__list{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.drop{background:#10141c;border:1px solid rgba(255,255,255,.06);border-radius:10px;padding:8px;display:flex;justify-content:space-between;align-items:center}
.drop .name{opacity:.95}
.drop .value{font-weight:700}

/* Открытие */
.open-area{display:grid;gap:10px}
.spinner{width:100%;height:44px;border-radius:10px;border:1px dashed rgba(255,255,255,.25);display:grid;place-items:center}
.spinner::after{content:'Открываем...';animation:pulse 1.2s infinite ease-in-out}
@keyframes pulse{0%{opacity:.3}50%{opacity:1}100%{opacity:.3}}
.result{background:rgba(76,175,80,.1);border:1px solid rgba(76,175,80,.25);padding:10px;border-radius:10px;font-weight:700}
.result.bad{background:rgba(226,74,74,.1);border-color:rgba(226,74,74,.25)}