:root {
  color-scheme: dark;
  --bg: #070816;
  --panel: rgba(18, 20, 43, 0.82);
  --panel-strong: #151733;
  --line: rgba(255, 255, 255, 0.08);
  --text: #f7f5ff;
  --muted: #9ca1c8;
  --gold: #ffd66b;
  --cyan: #4de6ff;
  --violet: #aa6cff;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  color: var(--text);
  background:
    radial-gradient(circle at 90% -5%, rgba(98, 76, 255, .35), transparent 32%),
    radial-gradient(circle at -10% 45%, rgba(35, 204, 255, .16), transparent 30%),
    var(--bg);
}

button { font: inherit; }

.app-shell {
  width: min(100%, 540px);
  min-height: 100vh;
  margin: 0 auto;
  padding: 20px 18px calc(98px + var(--safe-bottom));
  position: relative;
}

.topbar, .section-heading, .profile-card { display: flex; align-items: center; justify-content: space-between; }
.topbar h1 { margin: 2px 0 0; font-size: 22px; letter-spacing: -.03em; }
.eyebrow { margin: 0; font-size: 10px; letter-spacing: .18em; color: #7e86b6; font-weight: 800; }

.balance-pill {
  border: 1px solid rgba(255, 214, 107, .28);
  background: rgba(255, 214, 107, .08);
  color: var(--text);
  border-radius: 18px;
  padding: 8px 11px;
  display: grid;
  grid-template-columns: auto auto;
  gap: 0 7px;
  text-align: left;
}
.balance-pill .mini-star { color: var(--gold); grid-row: 1 / 3; align-self: center; font-size: 20px; }
.balance-pill strong { font-size: 15px; line-height: 1; }
.balance-pill small { font-size: 8px; color: #aa9c6b; letter-spacing: .12em; }

.demo-banner {
  margin: 18px 0;
  border: 1px solid rgba(77, 230, 255, .16);
  background: rgba(77, 230, 255, .06);
  color: #b9eff8;
  border-radius: 12px;
  padding: 10px 12px;
  font-size: 11px;
  display: flex;
  gap: 8px;
  align-items: center;
}
.pulse-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 14px var(--cyan); }

.page { display: none; animation: fade .25s ease; }
.page.active { display: block; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } }

.hero {
  min-height: 198px;
  border: 1px solid var(--line);
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: linear-gradient(135deg, #191d44, #11132b 56%, #29194a);
  box-shadow: 0 24px 60px rgba(0, 0, 0, .25);
}
.hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(8,9,24,.96) 5%, rgba(8,9,24,.3) 70%, transparent); }
.hero-copy { position: relative; z-index: 2; width: 65%; padding: 27px 0 24px 24px; }
.hero-kicker { color: var(--gold); font-weight: 800; font-size: 10px; letter-spacing: .2em; }
.hero h2 { margin: 12px 0 9px; font-size: 31px; line-height: .98; letter-spacing: -.05em; }
.hero p { margin: 0; color: #adb0cf; font-size: 12px; line-height: 1.5; }
.hero-art { position: absolute; right: -12%; top: -8%; width: 74%; height: 116%; background: url('./assets/reward-sprites.png') 100% center / 400% 100% no-repeat; filter: drop-shadow(0 0 28px rgba(255,202,65,.3)); }

.section-heading { margin: 26px 2px 14px; }
.section-heading h3 { margin: 4px 0 0; font-size: 20px; }
.section-heading.compact { margin: 0 0 12px; }
.ready-count { font-size: 10px; color: #9be9d5; background: rgba(68,211,167,.1); border: 1px solid rgba(68,211,167,.2); padding: 6px 9px; border-radius: 999px; }

.case-list { display: grid; gap: 13px; }
.case-card {
  display: grid;
  grid-template-columns: 92px 1fr;
  min-height: 126px;
  border: 1px solid var(--line);
  border-radius: 22px;
  background: linear-gradient(145deg, rgba(25,28,61,.95), rgba(13,15,34,.96));
  overflow: hidden;
  position: relative;
}
.case-card::before { content: ""; position: absolute; width: 160px; height: 160px; border-radius: 50%; left: -70px; top: -20px; background: var(--glow); filter: blur(40px); opacity: .2; }
.case-art { margin: 17px 4px 17px 13px; position: relative; z-index: 1; filter: drop-shadow(0 10px 14px rgba(0,0,0,.35)); }
.sprite { background-image: url('./assets/reward-sprites.png'); background-repeat: no-repeat; background-size: 400% 100%; }
.daily-sprite { background-position: 0 50%; }
.hourly-sprite { background-position: 33.333% 50%; }
.friends-sprite { background-position: 66.666% 50%; }
.star-sprite { background-position: 100% 50%; }
.case-copy { padding: 18px 15px 15px 7px; position: relative; z-index: 2; }
.case-topline { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.case-card h4 { margin: 0; font-size: 17px; }
.case-card p { margin: 5px 0 12px; color: var(--muted); font-size: 11px; }
.case-meta { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.reward-range { color: var(--gold); font-size: 11px; font-weight: 800; }
.open-button { border: 0; border-radius: 11px; padding: 9px 13px; color: #090a17; background: linear-gradient(135deg, #f6df88, #f0b83e); font-size: 11px; font-weight: 900; box-shadow: 0 7px 18px rgba(240,184,62,.18); }
.open-button:disabled { color: #777d9c; background: #242743; box-shadow: none; }
.status-badge { font-size: 9px; color: var(--accent); }

.balance-card, .profile-card, .admin-hero {
  border: 1px solid var(--line);
  border-radius: 27px;
  background: linear-gradient(145deg, #1b1d42, #101226);
  padding: 26px;
}
.balance-card { text-align: center; }
.balance-star { width: 110px; height: 110px; margin: 0 auto 4px; filter: drop-shadow(0 0 24px rgba(255,204,74,.45)); }
.balance-card p { color: var(--muted); margin: 4px 0; }
.balance-card strong { display: block; font-size: 37px; }
.balance-card strong small { font-size: 12px; color: var(--gold); }
.balance-card > span { font-size: 10px; color: #777eaa; }
.panel { margin-top: 14px; padding: 19px; border: 1px solid var(--line); border-radius: 20px; background: var(--panel); }
.panel h3 { margin: 0 0 7px; }
.panel p, .panel li { color: var(--muted); font-size: 12px; line-height: 1.55; }
.disabled-button, .primary-button { width: 100%; border: 0; border-radius: 13px; padding: 13px; font-weight: 900; }
.disabled-button { color: #666b8b; background: #22243c; }
.primary-button { color: #11101a; background: linear-gradient(135deg, #ffe49a, #f4b93e); }

.history-block { margin-top: 24px; }
.text-button { border: 0; color: #8e94b9; background: transparent; font-size: 11px; }
.history-list { display: grid; gap: 8px; }
.history-item { display: flex; justify-content: space-between; align-items: center; padding: 13px 14px; border-radius: 14px; background: rgba(255,255,255,.035); border: 1px solid rgba(255,255,255,.05); }
.history-item div { display: grid; gap: 3px; }
.history-item b { font-size: 12px; }
.history-item span { color: var(--muted); font-size: 9px; }
.history-item strong { color: var(--gold); }
.empty-state { text-align: center; color: var(--muted); padding: 28px; border: 1px dashed var(--line); border-radius: 16px; font-size: 12px; }

.profile-card { justify-content: flex-start; gap: 16px; }
.avatar { width: 58px; height: 58px; border-radius: 19px; display: grid; place-items: center; font-size: 24px; font-weight: 900; color: #0b0c1a; background: linear-gradient(145deg, var(--cyan), var(--violet)); }
.profile-card h2 { margin: 4px 0; font-size: 20px; }
.profile-card span { color: var(--muted); font-size: 10px; }
.stats-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-top: 12px; }
.stats-grid div { padding: 16px 8px; text-align: center; border: 1px solid var(--line); border-radius: 16px; background: var(--panel); }
.stats-grid strong { display: block; font-size: 21px; }
.stats-grid span { display: block; color: var(--muted); font-size: 9px; margin-top: 4px; }
.info-panel ul { margin: 8px 0 0; padding-left: 17px; }

.admin-hero h2 { margin: 8px 0; }
.admin-hero p:last-child { color: var(--muted); font-size: 12px; line-height: 1.5; margin-bottom: 0; }
.admin-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 13px; }
.admin-grid button { border: 1px solid var(--line); background: var(--panel); color: var(--text); border-radius: 17px; padding: 18px 10px; display: grid; gap: 4px; }
.admin-grid button b { color: var(--cyan); font-size: 21px; }
.admin-grid button span { color: var(--muted); font-size: 10px; }
.admin-grid button.danger b { color: #ff6f91; }
pre { white-space: pre-wrap; word-break: break-word; color: #a9f3de; font-size: 10px; margin-bottom: 0; }

.bottom-nav {
  position: fixed;
  z-index: 20;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  width: min(calc(100% - 24px), 516px);
  padding: 8px 8px calc(8px + var(--safe-bottom));
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 22px;
  background: rgba(12,13,30,.88);
  backdrop-filter: blur(20px);
  box-shadow: 0 18px 40px rgba(0,0,0,.45);
}
.bottom-nav button { border: 0; background: transparent; color: #6f759a; border-radius: 15px; padding: 8px 3px; display: grid; gap: 3px; }
.bottom-nav button span { font-size: 18px; }
.bottom-nav button b { font-size: 9px; }
.bottom-nav button.active { color: var(--text); background: rgba(255,255,255,.07); }
.bottom-nav button.active span { color: var(--gold); }

.modal { position: fixed; z-index: 50; inset: 0; display: none; place-items: end center; }
.modal.open { display: grid; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(3,4,13,.8); backdrop-filter: blur(8px); }
.reward-dialog { position: relative; width: min(100% - 20px, 500px); margin-bottom: 10px; border: 1px solid rgba(255,255,255,.12); border-radius: 30px; padding: 29px 24px 22px; background: linear-gradient(160deg,#21244d,#101124 72%); text-align: center; animation: rise .35s cubic-bezier(.2,.8,.2,1); overflow: hidden; }
@keyframes rise { from { transform: translateY(35px) scale(.96); opacity: 0; } }
.reward-visual { width: 184px; height: 184px; margin: 7px auto -4px; position: relative; display: grid; place-items: center; }
.reward-rays { position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255,217,105,.16) 0 10deg, transparent 10deg 24deg); animation: spin 8s linear infinite; mask-image: radial-gradient(circle, black 15%, transparent 72%); }
@keyframes spin { to { transform: rotate(360deg); } }
.reward-star { width: 145px; height: 145px; position: relative; animation: pop .55s cubic-bezier(.2,1.5,.4,1); filter: drop-shadow(0 0 30px rgba(255,205,78,.55)); }
@keyframes pop { from { transform: scale(.2) rotate(-25deg); opacity: 0; } }
.reward-visual.empty .reward-star { filter: grayscale(1); opacity: .23; }
.reward-dialog h2 { margin: 0; font-size: 29px; }
.reward-dialog > p:not(.eyebrow) { color: var(--muted); font-size: 12px; margin: 8px 0 20px; }

@media (min-width: 700px) {
  body { padding: 22px 0; }
  .app-shell { min-height: calc(100vh - 44px); border: 1px solid rgba(255,255,255,.07); border-radius: 34px; background: rgba(7,8,22,.74); box-shadow: 0 40px 100px rgba(0,0,0,.4); }
}