:root {
  color-scheme: dark;
  background: #000;
  --ink: #eef5ff;
  --muted: #a0adc5;
  --mint: #9ff5dd;
  --line: #283752;
  --safe-top: 0px;
  --safe-bottom: 0px;
  --safe-left: 0px;
  --safe-right: 0px;
}
.mobile {
  --safe-top: calc(max(env(safe-area-inset-top, 0px), var(--tg-safe-area-inset-top, 0px)) + var(--tg-content-safe-area-inset-top, 0px));
  --safe-bottom: calc(max(env(safe-area-inset-bottom, 0px), var(--tg-safe-area-inset-bottom, 0px)) + var(--tg-content-safe-area-inset-bottom, 0px));
  --safe-left: calc(max(env(safe-area-inset-left, 0px), var(--tg-safe-area-inset-left, 0px)) + var(--tg-content-safe-area-inset-left, 0px));
  --safe-right: calc(max(env(safe-area-inset-right, 0px), var(--tg-safe-area-inset-right, 0px)) + var(--tg-content-safe-area-inset-right, 0px));
}
* { box-sizing: border-box }
[hidden] { display: none !important }
body {
  margin: 0;
  min-width: 280px;
  min-height: 100dvh;
  color: var(--ink);
  background: radial-gradient(ellipse at 45% 0%, #192742 0%, #0c1427 46%, #090e1b 83%);
  font: 15px/1.45 system-ui, sans-serif;
}
body:not(.authorized) { background: #000 }
main {
  width: min(100%, 420px);
  margin: auto;
  padding: calc(17px + var(--safe-top)) calc(17px + var(--safe-right))
           calc(110px + var(--safe-bottom)) calc(17px + var(--safe-left));
}
.mobile main { width: 100%; min-height: var(--tg-viewport-stable-height, 100dvh) }
h1, h2, h3, p { margin: 0 }
button { font: inherit; color: inherit; cursor: pointer }
button:focus-visible { outline: 2px solid var(--mint); outline-offset: 3px }
.masthead { display: flex; align-items: center; gap: 9px; margin-bottom: 23px }
.masthead h1 { font-size: 16px; letter-spacing: -.02em; white-space: nowrap }
.brand-mark {
  display: grid; place-items: center; width: 28px; height: 28px; flex-shrink: 0;
  color: var(--mint); border: 1px solid #385467; border-radius: 9px; background: #1e354a;
}
.season-tag {
  margin-left: auto; padding: 4px 8px; color: #c3cfe3; background: #202d46;
  border: 1px solid #374766; border-radius: 999px; font-size: 11px; font-weight: 750;
  white-space: nowrap;
}
.screen-heading { margin-bottom: 14px }
.screen-heading h2 { font-size: clamp(26px, 7.2vw, 34px); line-height: 1.08; letter-spacing: -.045em }
.eyebrow { margin-bottom: 5px; color: var(--mint); font-size: 10px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase }
.muted { color: var(--muted); font-size: 13px }
.screen-heading .muted { margin-top: 7px }
.surface {
  overflow: hidden; background: linear-gradient(165deg, #192641, #121c31 72%);
  border: 1px solid var(--line); border-radius: 19px; box-shadow: 0 14px 28px #04091440;
}

.glass-nav {
  position: fixed; z-index: 10; left: calc((100% + var(--safe-left) - var(--safe-right)) / 2);
  bottom: calc(12px + var(--safe-bottom)); transform: translateX(-50%);
  width: min(calc(100% - 24px), 396px); padding: 4px;
  border: 1px solid #bacbff50; border-radius: 24px;
  background: linear-gradient(155deg, #354360e8 0%, #17223bee 43%, #1a2540ed 100%);
  box-shadow: 0 12px 28px #030816ba, inset 0 1px 1px #e3eeff65, inset 0 -1px 1px #7aa1e034;
}
.mobile .glass-nav { width: calc(100% - 24px - var(--safe-left) - var(--safe-right)) }
@supports (backdrop-filter: blur(18px)) {
  .glass-nav { background: linear-gradient(155deg, #5b71996e, #243653b5 45%, #24304da8); backdrop-filter: blur(22px) saturate(165%) }
}
.glass-nav [role="tablist"] { display: grid; grid-template-columns: 1fr 1.14fr 1fr; gap: 3px }
.glass-nav button {
  display: grid; justify-items: center; align-content: center; gap: 3px; min-height: 55px; min-width: 0;
  padding: 4px 2px; border: 1px solid transparent; border-radius: 19px; background: transparent;
  color: #b1c0d7; font-size: 11px; font-weight: 720; -webkit-tap-highlight-color: transparent;
}
.glass-nav svg { width: 21px; height: 21px; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round }
.glass-nav button[aria-selected="true"] {
  color: var(--ink); border-color: #c0d5ff44;
  background: linear-gradient(148deg, #dcecff3b, #a4c6ff12 65%, #a1ebee22);
  box-shadow: inset 0 1px #e1efff3f, 0 3px 10px #0c173849;
}
.glass-nav button[aria-selected="true"] svg { color: var(--mint) }

.status, .progress { padding: 13px 15px }
.status, .progress > div { display: flex; align-items: center; justify-content: space-between; gap: 12px }
.status span { display: block; margin-top: 2px; color: var(--muted); font-size: 12px }
.status strong { color: var(--mint); font-size: 13px }
.streak { font-size: 22px; font-weight: 800; white-space: nowrap }
.profile-card video { display: block; width: 100%; aspect-ratio: 1; object-fit: contain; background: #0c1528 }
.mobile .profile-card video { max-height: 52dvh }
.progress strong { font-size: 24px }
.progress span { color: var(--muted) }
progress { width: 100%; height: 9px; margin-top: 8px; accent-color: var(--mint) }
.archive { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 11px; margin-top: 12px; padding: 13px 14px }
.archive h3 { font-size: 15px }
.archive .muted { margin-top: 2px; font-size: 12px }
.text-button {
  padding: 9px 11px; border: 1px solid #518476; border-radius: 11px; color: var(--mint);
  background: #214740; font-size: 12px; font-weight: 750; white-space: nowrap;
}
.text-button:disabled { cursor: wait; opacity: .65 }
.export-message { flex-basis: 100%; color: #b9c9e0; font-size: 12px }
.agent-admin { margin-top: 12px; padding: 13px 14px }
.agent-admin summary { cursor: pointer; font-size: 15px; font-weight: 750 }
.agent-admin .muted { margin-top: 7px }
.agent-field { display: block; margin-top: 14px; font-size: 13px; font-weight: 750 }
.agent-admin select, .agent-admin textarea {
  display: block; width: 100%; margin: 7px 0 0; padding: 10px;
  background: #0c1528; border: 1px solid var(--line); border-radius: 11px;
  color: var(--ink); font: inherit; font-size: 16px;
}
.agent-admin textarea { margin-bottom: 10px; resize: vertical }
#agent-active-model:empty { display: none }
.agent-admin :focus-visible { outline: 2px solid var(--mint); outline-offset: 2px }
.agent-admin .export-message { margin-top: 7px }
.agent-admin .export-message:empty { display: none }

.section-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 13px 14px 9px }
.section-head h3, .podium-head h3 { font-size: 14px }
.section-head span, .podium-head span { color: var(--muted); font-size: 11px }
.league-list { padding: 0 12px 8px; margin: 0; list-style: none }
.league-list li { display: flex; align-items: center; gap: 10px; min-height: 48px; border-top: 1px solid #34445e80 }
.league-list .place { min-width: 27px; color: #d1bc91; font-size: 12px; font-weight: 800; text-align: center }
.league-list strong { font-size: 14px }
.league-list .points { margin-left: auto; color: var(--mint); font-size: 13px; font-weight: 750; white-space: nowrap }
.league-list .points.waiting { color: var(--muted); font-weight: 500; font-size: 11px }
.rewards { margin-top: 13px }
.reward-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; padding: 5px 9px 16px; text-align: center }
.reward-grid > div { display: grid; justify-items: center; align-content: start; gap: 2px; min-width: 0 }
.reward-grid strong { font-size: 13px }
.reward-grid small { color: var(--muted); font-size: 10px }
.medal {
  display: grid; place-items: center; width: 39px; height: 39px; margin: 0 auto 5px;
  border: 1px solid #e3cc97; border-radius: 50%; color: #24180f; font: 850 15px/1 Georgia, serif;
  box-shadow: inset 0 0 0 3px #10172d33, 0 4px 10px #04081077;
}
.gold { background: linear-gradient(145deg, #ffe3a0, #bc7e36) }
.silver { background: linear-gradient(145deg, #f1f5ff, #829cb5); border-color: #cdddef }
.bronze { background: linear-gradient(145deg, #ffc39c, #9e553b); border-color: #dc9777 }

.board-heading { display: flex; align-items: end; justify-content: space-between; gap: 10px; margin-bottom: 6px }
.icon-button {
  display: grid; place-items: center; width: 31px; height: 31px; padding: 0;
  background: #202f4b; border: 1px solid #3a4c6a; border-radius: 10px; color: #cad8ea;
  font-size: 14px;
}
.carousel-stage {
  position: relative; isolation: isolate; overflow: hidden; height: clamp(245px, 48dvh, 340px);
  margin: 0 -10px; mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent);
}
.player-card {
  position: absolute; inset: 9px auto 11px 50%; width: min(74%, 267px);
  display: flex; flex-direction: column; padding: 0; text-align: left; overflow: hidden;
  border: 1px solid #4c6389; border-radius: 20px; background: #132039;
  transition: transform .58s cubic-bezier(.22,.75,.23,1), opacity .45s ease, border-color .45s ease;
  box-shadow: 0 12px 26px #020714ad;
}
.player-card[data-position="center"] { transform: translateX(-50%); opacity: 1; z-index: 3; border-color: #8ff6df7d }
.player-card[data-position="left"] { transform: translateX(-113%) scale(.82) rotate(-5deg); opacity: .64; z-index: 2 }
.player-card[data-position="right"] { transform: translateX(13%) scale(.82) rotate(5deg); opacity: .64; z-index: 2 }
.player-card[data-position="off-left"] { transform: translateX(-160%) scale(.7); opacity: 0; z-index: 1 }
.player-card[data-position="off-right"] { transform: translateX(60%) scale(.7); opacity: 0; z-index: 1 }
.player-card.wrapping { transition: none }
.player-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px }
.player-name { font-size: 17px; line-height: 1.1; white-space: nowrap }
.player-rank { color: #f3cc81; font-size: 11px; font-weight: 800; white-space: nowrap }
.player-media { display: grid; flex: 1; min-height: 0; overflow: hidden; place-items: center; background: #0b1427 }
.player-media video { width: 100%; height: 100%; object-fit: cover; object-position: center 46%; transform: scale(1.28); transform-origin: 50% 46% }
.player-empty {
  width: 100%; height: 100%; display: grid; place-items: center; font-size: 38px; color: #7392b1;
  background: radial-gradient(ellipse at center, #294264 0%, #131e35 55%, #0d1629 90%);
}
.player-stats { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 2px 8px; padding: 10px 12px 12px }
.player-animal { grid-column: 1 / -1; color: #bac8df; font-size: 12px }
.player-xp { font-size: 19px; font-weight: 850 }
.player-streak { font-size: 14px; font-weight: 750 }
.player-season { grid-column: 1 / -1; color: var(--muted); font-size: 11px }
.podium-head { display: flex; justify-content: space-between; align-items: center; gap: 7px; margin: 6px 0 8px }
.podium { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: end; gap: 6px; padding: 0; margin: 0; list-style: none }
.podium li {
  display: grid; justify-items: center; align-content: start; gap: 2px; padding: 7px 3px;
  min-width: 0; min-height: 68px; border: 1px solid #465b80; border-radius: 13px;
  background: linear-gradient(160deg, #31466a, #182844); text-align: center;
}
.podium li:nth-child(2) { min-height: 91px; border-color: #a48358; background: linear-gradient(160deg, #6b543e, #2d2935 78%) }
.podium li:last-child { min-height: 60px; border-color: #755b5b; background: linear-gradient(160deg, #513b42, #272534) }
.podium .place { color: #ead5b2; font: 800 13px/1.2 Georgia, serif }
.podium strong { font-size: 12px; line-height: 1.2; overflow-wrap: anywhere }
.podium small { color: #ced8ec; font-size: 10px }
@media (prefers-reduced-motion: reduce) { .player-card { transition: none } }