/* App mode (<html class="app">, see /js/app-mode.js): the Telegram Mini App renders as one immersive app screen.
   The website chrome (header, sidebar, footer, tab bar, chat bubble, announcement) is hidden; features/app-shell.js
   adds the app's bottom nav. Premium arcade look: deep navy-violet, gold coin, violet UI accent. */
:root {
  --app-h: 100dvh;
  --app-nav-h: 64px;
  --app-bg: #0b0820;
  --app-card: linear-gradient(180deg, rgba(40, 30, 92, 0.72), rgba(20, 15, 50, 0.82));
  --app-edge: rgba(177, 140, 255, 0.18);
  --sa-top: env(safe-area-inset-top, 0px);
  --sa-bottom: env(safe-area-inset-bottom, 0px);
}

html.app, html.app body { background: var(--app-bg); }
html.app body {
  min-height: var(--app-h);
  padding-bottom: calc(var(--app-nav-h) + var(--sa-bottom));
  background-image:
    radial-gradient(120% 60% at 50% 0%, rgba(139, 92, 255, 0.32), transparent 70%),
    radial-gradient(90% 50% at 50% 100%, rgba(31, 30, 120, 0.5), transparent 70%),
    linear-gradient(180deg, #120b33 0%, #0b0820 55%, #07051a 100%);
  overscroll-behavior: none;
}
html.app .top, html.app .announce, html.app .side, html.app .side-backdrop, html.app .tabbar, html.app .foot,
html.app .chat-fab, html.app #chat-root, html.app .install-btn { display: none !important; }
html.app .shell { display: block; max-width: 640px; margin: 0 auto; background: none; }
html.app main.page { padding: calc(10px + var(--sa-top)) 16px 12px; }

/* ---- bottom nav ---- */
.appnav { display: none; }
html.app .appnav {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  height: calc(var(--app-nav-h) + var(--sa-bottom)); padding: 6px 8px var(--sa-bottom);
  background: rgba(12, 9, 34, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  box-shadow: 0 -1px 0 var(--app-edge), 0 -18px 40px -20px rgba(0, 0, 0, 0.9);
}
.appnav-item {
  display: grid; justify-items: center; align-content: center; gap: 2px; border-radius: 16px; text-decoration: none;
  color: var(--mute); font-weight: 800; font-size: 0.72rem; letter-spacing: 0.01em; -webkit-tap-highlight-color: transparent;
  transition: color var(--fast), background var(--fast);
}
.appnav-icon { font-size: 1.35rem; line-height: 1; filter: grayscale(0.6) opacity(0.75); transition: filter var(--fast), transform var(--fast); }
.appnav-item[aria-current="page"] { color: #fff; background: rgba(139, 92, 255, 0.2); box-shadow: inset 0 0 0 1px rgba(177, 140, 255, 0.35); }
.appnav-item[aria-current="page"] .appnav-icon { filter: none; transform: translateY(-1px) scale(1.08); }
.appnav-item:active { transform: scale(0.96); }
.appnav-item:focus-visible { outline: 2px solid var(--violet-2); outline-offset: 2px; }

/* ---- cards on Do'stlar (/referral) and Top (/contest) ---- */
html.app .card, html.app .vcard, html.app .c-stat { border-radius: 22px; background: var(--app-card); box-shadow: inset 0 0 0 1px var(--app-edge), 0 18px 40px -24px rgba(0, 0, 0, 0.9); }
html.app .c-hero { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 4px 2px 0; }
html.app .c-hero h1 { font-size: 1.45rem; line-height: 1.1; }
html.app .c-hero .muted, html.app .rc-how, html.app .c-hero .kicker, html.app .c-hero-text > p:not(.kicker) { display: none; }
html.app .c-clock { padding: 12px 16px; }
html.app .c-count { font-size: 1.6rem; }
html.app .c-prize-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
html.app .c-prize-grid > * { padding: 12px; border-radius: 18px; }
html.app .c-amount { font-size: 1.05rem; }
html.app .som { margin-top: 10px; }
html.app .som h2 { font-size: 1.3rem; }
html.app .sm-top .c-stat strong { font-size: 2rem; font-weight: 900; }
html.app .table-wrap { border-radius: 18px; }

/* ---- order inside the app: what the tab is about comes first ---- */
html.app main.page-referral, html.app main.page-contest { display: flex; flex-direction: column; gap: 12px; }
html.app main.page-referral > *, html.app main.page-contest > * { margin-top: 0; margin-bottom: 0; }
html.app .page-referral #som { order: -2; }               /* Do'stlar: the so'm reward card first */
html.app .page-referral .c-hero { order: -1; }
html.app .page-contest .c-hero { order: -3; }
html.app .page-contest .c-table { order: -2; }            /* Top: the leaderboard right under the countdown */
html.app .page-contest .c-me { order: -1; }
html.app .page-contest .c-hero h1, html.app .page-referral .c-hero h1 { font-size: 1.15rem; }
html.app .sp-card.sp-ad { display: none; }                 /* no ad placeholder inside the app */
html.app main.page-referral > *, html.app main.page-contest > * { width: 100%; align-self: stretch; }
html.app main.page-referral > .card, html.app main.page-contest > .card { padding: 16px; }
html.app .c-table .table-wrap { margin: 0 -6px; }