:root {
  color-scheme: dark;
  --bg: #070707;
  --card: #0b0b0c;
  --line: #303034;
  --muted: #8e8e93;
  --text: #f4f4f5;
  --red: #f13140;
  --red-deep: #a31723;
  --safe-bottom: env(safe-area-inset-bottom, 0px);
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; background: var(--bg); }
body {
  font-family: Inter, ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  overflow-x: hidden;
  background:
    radial-gradient(100% 40% at 104% 24%, rgba(106, 0, 7, .13), transparent 48%),
    radial-gradient(80% 28% at 30% 76%, rgba(78, 0, 4, .09), transparent 55%),
    #070707;
}
button { font: inherit; color: inherit; }
button:focus-visible { outline: 2px solid rgba(241,49,64,.82); outline-offset: 2px; }

.app-shell {
  width: min(100%, 426px);
  margin: 0 auto;
  min-height: 100vh;
  padding: max(28px, env(safe-area-inset-top)) 15px calc(104px + var(--safe-bottom));
}

.profile-row {
  height: 83px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.profile-left { display: flex; align-items: center; min-width: 0; }
.avatar-wrap { position: relative; width: 63px; height: 63px; flex: 0 0 auto; }
.avatar {
  width: 63px; height: 63px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(241,49,64,.58); filter: saturate(1.08) contrast(1.07);
  box-shadow: 0 0 0 1px rgba(90,0,7,.2), inset 0 0 22px rgba(241,49,64,.1);
}
.status-dot {
  position: absolute; right: 1px; bottom: 5px; width: 11px; height: 11px;
  border-radius: 50%; background: var(--red); box-shadow: 0 0 0 4px #090909;
}
.profile-copy { margin-left: 14px; min-width: 0; }
.eyebrow { font-size: 10px; letter-spacing: .09em; font-weight: 600; }
.eyebrow.red { color: #d74852; }
.eyebrow.spaced { letter-spacing: .24em; }
.name-line { display: flex; align-items: baseline; gap: 7px; }
.name-line h1 { margin: 4px 0 0; font-size: 24px; line-height: 1; letter-spacing: -.02em; }
.balance { font-size: 11px; color: #9c9ca2; font-weight: 600; }
.is-hidden { display: none; }

.brand-pill {
  height: 43px; min-width: 119px; padding: 5px 13px 5px 7px;
  display: inline-flex; align-items: center; gap: 9px;
  border-radius: 17px; background: linear-gradient(180deg, #111214, #0a0a0a);
  border: 1px solid #2f3034; box-shadow: inset 0 0 0 1px rgba(255,255,255,.015);
}
.brand-pill img { width: 35px; height: 35px; object-fit: cover; border-radius: 10px; }
.brand-pill > span { font-size: 10px; letter-spacing: .21em; font-weight: 900; white-space: nowrap; }
.brand-pill > span > span { color: var(--red); }

.wallet-card {
  position: relative; width: 100%; height: 82px; margin-top: 11px; padding: 13px 17px 13px 14px;
  display: flex; align-items: center; text-align: left;
  border: 1px solid #3a3b3f; border-radius: 24px; overflow: hidden;
  background: linear-gradient(110deg, #101011 0%, #0a0a0b 58%, #16090b 100%);
  box-shadow: inset -1px 0 0 rgba(241,49,64,.76);
}
.wallet-card::after {
  content:""; position:absolute; inset:-30% -12% -40% 72%; pointer-events:none;
  background: radial-gradient(circle, rgba(241,49,64,.17), transparent 62%);
}
.ton-tile {
  width: 52px; height: 52px; flex: 0 0 auto; border-radius: 16px; overflow: hidden;
  box-shadow: 0 0 24px rgba(241,49,64,.12); border: 1px solid rgba(241,49,64,.12);
}
.ton-tile img { width: 100%; height: 100%; object-fit: cover; }
.wallet-copy { margin-left: 14px; display: flex; flex-direction: column; min-width: 0; z-index: 1; }
.wallet-copy strong { font-size: 16px; line-height: 1.2; margin-top: 5px; letter-spacing: -.01em; }
.wallet-copy small { margin-top: 5px; font-size: 10px; color: #939399; }
.chevron { margin-left: auto; z-index: 1; color: #77777b; font-size: 35px; font-weight: 200; line-height: 1; transform: translateY(-1px); }

.games-section { margin-top: 24px; }
.section-kicker { color: #747478; font-size: 9px; font-weight: 700; letter-spacing: .33em; margin: 0 4px 7px; }
.section-title-row { display: flex; align-items: center; justify-content: space-between; margin: 0 3px 12px; }
.section-title-row h2 { font-size: 28px; line-height: 1; letter-spacing: -.035em; margin: 0; }
.live { display: flex; align-items: center; gap: 8px; font-size: 9px; font-weight: 800; color: #b9b9bd; letter-spacing: .24em; padding-right: 3px; }
.live span { width: 7px; height: 7px; border-radius: 50%; background: var(--red); box-shadow: 0 0 11px rgba(241,49,64,.45); }

.cards-grid { display: flex; flex-wrap: wrap; gap: 11px; }
.game-card {
  position: relative; appearance: none; border: 1px solid #303136; background: #0b0b0c;
  padding: 0; overflow: hidden; text-align: left; border-radius: 26px; cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.012), 0 7px 24px rgba(0,0,0,.13);
}
.game-card-small { height: 248px; width: 48.5%; flex: 0 0 48.5%; }
.game-card::after {
  content:""; position:absolute; inset:0; pointer-events:none; border-radius:inherit;
  box-shadow: inset 0 0 0 1px rgba(241,49,64,.035);
}
.game-card.mines { border-top-color: #5a2026; }
.game-art { position:absolute; left:0; top:23px; width:100%; height:168px; object-fit:cover; object-position:center; filter:saturate(1.03) contrast(1.06); }
.crash .game-art { top:14px; height:183px; object-position:center 34%; }
.tag {
  position:absolute; z-index:3; left:13px; top:13px; padding:6px 11px 5px; border-radius:12px;
  font-size:8px; font-weight:800; letter-spacing:.22em;
}
.tag-dark { background:#18191b; color:#d2d2d5; }
.tag-red { background:linear-gradient(180deg,#ba2633,#8d111b); color:#fff; box-shadow:0 0 15px rgba(241,49,64,.13); }
.card-footer {
  position:absolute; z-index:3; left:14px; right:13px; bottom:14px;
  display:flex; align-items:flex-end; justify-content:space-between; gap:6px;
}
.card-footer > span:first-child { min-width:0; }
.card-footer strong { display:block; font-size:18px; line-height:1.05; letter-spacing:-.02em; }
.card-footer small { display:block; margin-top:6px; font-size:9px; color:#85858b; white-space:nowrap; }
.play {
  width:36px; height:36px; flex:0 0 auto; border-radius:50%; display:grid; place-items:center;
  background:#18191b; border:1px solid #202126; box-shadow:0 5px 20px rgba(0,0,0,.24);
}
.play span { color:var(--red); font-size:12px; transform:translateX(1px); }

.race { width: 100%; flex: 0 0 100%; height:185px; }
.race-art { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 45%; filter:saturate(1.05) contrast(1.08); }
.race-shade { position:absolute; inset:0; background:linear-gradient(180deg,transparent 40%,rgba(5,5,5,.72) 74%,rgba(6,6,6,.97) 100%); }
.race-footer { bottom:14px; align-items:center; }
.race-footer strong { font-size:19px; }
.race-footer small { margin-top:7px; font-size:9px; }
.race .play { width:39px; height:39px; }

.bottom-nav {
  position: fixed; z-index: 20; left: 50%; bottom: calc(12px + var(--safe-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 30px), 396px); height: 73px; padding: 7px 6px 5px;
  display: flex; align-items: stretch;
  border: 1px solid #27282c; border-radius: 29px;
  background: rgba(13,13,14,.96); backdrop-filter: blur(18px);
  box-shadow: 0 8px 30px rgba(0,0,0,.48), inset 0 0 0 1px rgba(255,255,255,.018);
}
.bottom-nav::before { content:""; position:absolute; inset:7px; border:1px solid #1c1d20; border-radius:22px; pointer-events:none; }
.nav-item {
  position:relative; z-index:1; flex: 1 1 25%; border:0; background:transparent; color:#77777d;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px;
  font-size:10px; font-weight:700; cursor:pointer;
}
.nav-item:not(:last-child)::after { content:""; position:absolute; right:0; top:11px; bottom:11px; width:1px; background:#1c1c1f; }
.nav-item svg { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.nav-item.active { color: var(--red); }
.nav-item.active::before {
  content:""; position:absolute; left:18%; right:18%; bottom:-5px; height:2px; border-radius:2px;
  background:var(--red); box-shadow:0 0 8px rgba(241,49,64,.4);
}

.toast {
  position:fixed; z-index:99; left:50%; bottom:104px; transform:translate(-50%, 12px);
  max-width:calc(100% - 44px); padding:9px 13px; border-radius:12px; opacity:0; pointer-events:none;
  background:#19191b; border:1px solid #343438; color:#e8e8e9; font-size:11px; text-align:center;
  transition:opacity .18s ease, transform .18s ease;
}
.toast.show { opacity:1; transform:translate(-50%, 0); }

@media (max-width: 370px) {
  .app-shell { padding-left: 12px; padding-right: 12px; }
  .brand-pill { min-width: 106px; padding-right: 9px; }
  .brand-pill > span { font-size: 9px; letter-spacing: .16em; }
  .game-card-small { height: 231px; }
  .game-art { height: 154px; }
  .card-footer strong { font-size: 16px; }
  .card-footer small { font-size: 8px; }
}