/* Shared Won shell and the current home composition. */
:root { --won-unit: clamp(.85px, calc((min(100vw, 448px) - 36px) / 354), 1.155px); }
html, body { background: #141518; }
.app-shell { padding-left: 18px; padding-right: 18px; padding-top: var(--tg-safe-top); padding-bottom: calc(115 * var(--won-unit) + max(env(safe-area-inset-bottom), var(--tg-safe-bottom))); background: #141518; }
.app-header, .home-screen .app-header {
  position: sticky; top: 0; height: calc(88 * var(--won-unit));
  width: calc(100% + 36px); margin: 0 -18px calc(16 * var(--won-unit));
  padding: calc(20 * var(--won-unit)) 18px;
  background: #141518; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.wordmark > .won-wordmark, .home-screen .wordmark > .won-wordmark { width: calc(116 * var(--won-unit)); height: calc(46 * var(--won-unit)); }
.header-actions, .home-screen .header-actions { gap: calc(13 * var(--won-unit)); }
.avatar-button, .home-screen .avatar-button { width: calc(44 * var(--won-unit)); height: calc(44 * var(--won-unit)); background: #2b3345; font-size: calc(16 * var(--won-unit)); }
.app-header .icon-button, .home-screen .app-header .icon-button { width: calc(44 * var(--won-unit)); height: calc(44 * var(--won-unit)); }
.app-header .ui-icon, .home-screen .app-header .ui-icon { width: calc(25 * var(--won-unit)); height: calc(25 * var(--won-unit)); }

.dock-wrap { left: 0; right: 0; margin-inline: auto; transform: none; width: min(416px, calc(100% - 32px)); bottom: calc(20 * var(--won-unit) + max(env(safe-area-inset-bottom), var(--tg-safe-bottom))); }
.dock {
  height: calc(67 * var(--won-unit)); padding: calc(5.5 * var(--won-unit)); border-radius: calc(26.5 * var(--won-unit));
  border: 1px solid #ffffff12; background: #17191d;
  box-shadow: inset 0 1px 0 #ffffff08; overflow: hidden;
  clip-path: none;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.dock::before, .dock::after, .dock-wrap::before { content: none; }
.dock-selection {
  display: block; left: calc(5.5 * var(--won-unit) + var(--dock-index, 0) * (100% - 11 * var(--won-unit)) / 4); top: calc(5.5 * var(--won-unit));
  width: calc((100% - 11 * var(--won-unit)) / 4); height: calc(54 * var(--won-unit));
  border-radius: calc(20 * var(--won-unit)); border: 1px solid #337cd53d;
  background: #144487; box-shadow: inset 0 1px 0 #90b6ff0d; pointer-events: none;
  /* This small absolute pill repaints independently; transforming it can
     re-rasterize the stationary SVG labels in a shared compositor layer. */
  transform: none; transition: left .24s cubic-bezier(.2, 0, 0, 1);
}
.nav-button {
  height: calc(54 * var(--won-unit)); gap: calc(6 * var(--won-unit));
  border-radius: calc(20 * var(--won-unit)); border: 1px solid transparent;
  color: #b9c1d0; font-size: calc(11 * var(--won-unit)); line-height: 1.2; letter-spacing: 0;
  transition: none; filter: none;
}
.nav-button .nav-icon { display: block; flex-shrink: 0; width: calc(24 * var(--won-unit)); height: calc(24 * var(--won-unit)); fill: currentColor; opacity: 1; filter: none; }
.nav-button.active { color: #fff; font-weight: 650; }
.nav-button:active:not(:disabled) { transform: none; }
.nav-button:focus-visible { outline-offset: -2px; }

/* Chosen 853x1844 concept: dimensions scale with width, never with viewport height. */
.home-screen { padding-inline: calc(16 * var(--won-unit)); padding-bottom: calc(103 * var(--won-unit) + max(env(safe-area-inset-bottom), var(--tg-safe-bottom))); background: #141518; }
.home-screen .app-header {
  width: calc(100% + 32 * var(--won-unit)); margin: 0 calc(-16 * var(--won-unit)) calc(4 * var(--won-unit));
  height: calc(72 * var(--won-unit)); padding: calc(16 * var(--won-unit));
  background: #141518; backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home-screen .wordmark { margin-left: calc(-14.5 * var(--won-unit)); }
.home-screen .wordmark > .won-wordmark { width: calc(126 * var(--won-unit)); height: calc(54 * var(--won-unit)); }
.home-screen .avatar-button { display: grid; place-items: center; width: calc(44 * var(--won-unit)); height: calc(44 * var(--won-unit)); padding: 0; border-radius: 50%; background: linear-gradient(110deg, #2e3441, #2a2e38 60%, #262a32) padding-box, linear-gradient(135deg, #8a96ad, #68768e 20%, #3b4453 48%, #2b303a 72%, #3a414d) border-box; border: 1px solid transparent; box-shadow: inset 0 1px 0 #d1dcf00c, 0 1px 2px #00000016; font-size: calc(17 * var(--won-unit)); line-height: 1; font-weight: 400; color: #d2d9e6; }
.home-screen .header-actions { gap: calc(9 * var(--won-unit)); transform: translateY(calc(2 * var(--won-unit))); }
.home-screen .app-header .icon-button { width: calc(40 * var(--won-unit)); height: calc(40 * var(--won-unit)); }
.home-screen #main {
  display: grid; gap: 0; align-content: stretch;
  height: calc(100svh - 179 * var(--won-unit) - var(--tg-safe-top) - max(env(safe-area-inset-bottom), var(--tg-safe-bottom)));
  min-height: calc(594 * var(--won-unit));
  grid-template-rows: calc(144 * var(--won-unit)) minmax(calc(172 * var(--won-unit)), 1fr) calc(196 * var(--won-unit)) calc(82 * var(--won-unit));
}
.home-screen #main > * { margin: 0; min-width: 0; }
.home-screen #main:not(:has(.home-event-carousel)) { grid-template-rows: minmax(calc(172 * var(--won-unit)), 1fr) calc(196 * var(--won-unit)) calc(82 * var(--won-unit)); min-height: calc(450 * var(--won-unit)); }
.home-event-carousel { min-width: 0; }
.home-event-track { display: flex; height: 100%; gap: calc(8 * var(--won-unit)); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; border-radius: calc(15 * var(--won-unit)); }
.home-event-banner {
  position: relative; isolation: isolate; overflow: hidden; flex: 0 0 100%; height: 100%; padding: 0;
  scroll-snap-align: start; scroll-snap-stop: always; border-radius: calc(15 * var(--won-unit));
  border: 1px solid #34475d; color: #fff; text-align: left;
  background: #0b192d; box-shadow: none;
}
.home-event-banner::after, .home-screen .referral-card::after { content: ''; position: absolute; inset: -1px; z-index: 4; padding: 1px; border-radius: inherit; pointer-events: none; background: linear-gradient(135deg, #badcffb3, #7d9cbe85 16%, #6e839c80 46%, #29374985 73%, #566a8159); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); mask-composite: exclude; box-shadow: none; }
.home-event-title { position: absolute; z-index: 2; left: calc(17 * var(--won-unit)); right: calc(16 * var(--won-unit)); top: calc(20 * var(--won-unit)); font-size: calc(20 * var(--won-unit)); font-weight: 750; line-height: 1.15; letter-spacing: calc(-.45 * var(--won-unit)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.home-event-prize { position: absolute; z-index: 2; left: calc(17 * var(--won-unit)); top: calc(47 * var(--won-unit)); font-size: calc(43 * var(--won-unit)); line-height: 1.15; font-weight: 800; letter-spacing: calc(-1.2 * var(--won-unit)); white-space: nowrap; }
.home-event-prize small { font-size: 1em; }
.home-event-prize-wide { font-size: calc(32 * var(--won-unit)); }
.home-event-time { position: absolute; z-index: 2; top: calc(98 * var(--won-unit)); left: calc(17 * var(--won-unit)); font-size: calc(14 * var(--won-unit)); line-height: 1.2; color: #b7c4db; white-space: nowrap; font-variant-numeric: normal; font-kerning: normal; }
.home-event-dots { position: absolute; z-index: 2; bottom: calc(10 * var(--won-unit)); left: calc(17 * var(--won-unit)); display: flex; gap: calc(7 * var(--won-unit)); }
.home-event-dots i { width: calc(6 * var(--won-unit)); height: calc(6 * var(--won-unit)); border-radius: 50%; background: #a9b7cb66; }
.home-event-dots i.current { background: #fff; }
.home-event-scene { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; pointer-events: none; }
.home-screen .balance-block { position: relative; isolation: isolate; height: 100%; padding: 0; display: block; text-align: center; }
.home-screen .balance-block::before {
  content: ''; position: absolute; z-index: -1; pointer-events: none;
  width: calc(340 * var(--won-unit)); height: calc(180 * var(--won-unit));
  left: 50%; top: 50%; transform: translate(-50%, -50%);
  background: radial-gradient(ellipse at 50% 58%, #ffffff0e 0%, #ffffff04 42%, transparent 74%);
  filter: blur(36px);
}
.home-screen .balance-block > * { z-index: 1; }
.home-screen .balance-caption { position: absolute; left: 0; right: 0; top: calc(50% - 60 * var(--won-unit)); height: calc(22 * var(--won-unit)); justify-content: center; gap: calc(7 * var(--won-unit)); color: #d2d9e3; font-size: calc(14 * var(--won-unit)); }
.home-screen .balance-caption .icon-button { width: calc(30 * var(--won-unit)); height: calc(30 * var(--won-unit)); }
.home-screen .balance-caption .ui-icon { width: calc(18 * var(--won-unit)); height: calc(18 * var(--won-unit)); }
.home-screen .balance-number { position: absolute; top: calc(50% - 35 * var(--won-unit)); left: 0; right: 0; margin: 0; line-height: 1; font-size: calc(60 * var(--won-unit)); font-weight: 700; letter-spacing: calc(-2.5 * var(--won-unit)); }
.home-screen .balance-number .decimal { color: #a8b1c4; font-size: calc(43 * var(--won-unit)); font-weight: 600; letter-spacing: calc(-1.5 * var(--won-unit)); }
.home-screen .balance-number .currency { color: #a8b1c4; font-size: calc(39 * var(--won-unit)); font-weight: 600; margin-left: calc(8 * var(--won-unit)); }
.rounded-ruble { display: inline-block; width: .85em; height: 1em; vertical-align: -.02em; }
.balance-stars { display: inline-block; font-size: .78em; letter-spacing: .05em; vertical-align: -.12em; }
.home-screen .balance-number.balance-wide { font-size: calc(42 * var(--won-unit)); }
.home-screen .balance-number.balance-wide .decimal { font-size: calc(30 * var(--won-unit)); }
.home-screen .balance-number.balance-wide .currency { font-size: calc(28 * var(--won-unit)); }
.home-screen .balance-sub { position: absolute; left: 0; right: 0; top: calc(50% + 27 * var(--won-unit)); justify-content: center; width: max-content; min-height: calc(36 * var(--won-unit)); padding: 0 12px; margin: 0 auto; font-size: calc(14 * var(--won-unit)); color: #209aff; }
.home-screen .balance-sub .ui-icon { display: none; }

.home-screen .referral-card {
  position: relative; display: block; isolation: isolate; overflow: hidden;
  padding: 0; border: 1px solid #344253; border-radius: calc(15 * var(--won-unit));
  background: radial-gradient(ellipse at 86% 66%, #144e8c38, #154c7f13 37%, transparent 72%), linear-gradient(130deg, #202833, #18202b 55%, #171f2a);
  backdrop-filter: none; box-shadow: none;
}
.home-screen .referral-card::before { content: ''; position: absolute; z-index: 0; pointer-events: none; width: calc(196 * var(--won-unit)); height: calc(140 * var(--won-unit)); top: calc(45 * var(--won-unit)); right: calc(-10 * var(--won-unit)); border-radius: 50%; background: radial-gradient(ellipse, #1676dc28 0%, #14579a12 44%, transparent 72%); filter: blur(18px); }
.referral-title-row { position: absolute; z-index: 2; left: calc(16 * var(--won-unit)); right: calc(14 * var(--won-unit)); top: calc(18 * var(--won-unit)); display: flex; align-items: center; gap: calc(10 * var(--won-unit)); }
.home-screen .referral-card h1 { margin: 0; max-width: none; font-size: calc(23 * var(--won-unit)); line-height: 1.2; letter-spacing: calc(-.6 * var(--won-unit)); font-weight: 750; white-space: nowrap; }
.home-screen .referral-level-button { display: inline-flex; align-items: center; justify-content: center; gap: calc(4 * var(--won-unit)); flex-shrink: 0; margin-left: auto; min-height: calc(28 * var(--won-unit)); padding: 0 calc(7 * var(--won-unit)); color: #c1cad7; border: 1px solid #b9cbe214; border-radius: calc(9 * var(--won-unit)); background: #ffffff05; font-size: calc(12 * var(--won-unit)); white-space: nowrap; }
.home-screen .referral-level-button .ui-icon { width: calc(10 * var(--won-unit)); height: calc(10 * var(--won-unit)); opacity: .7; }
.home-screen .referral-reward-line { position: absolute; z-index: 2; left: calc(16 * var(--won-unit)); top: calc(58 * var(--won-unit)); margin: 0; display: block; }
.home-screen .referral-reward-line strong { display: block; font-size: calc(44 * var(--won-unit)); font-weight: 800; line-height: 1; letter-spacing: calc(-1 * var(--won-unit)); }
.home-screen .referral-reward-line span { display: block; margin-top: calc(4 * var(--won-unit)); font-size: calc(14 * var(--won-unit)); line-height: 1.2; color: #c0c9db; }
.home-screen .referral-object { display: block; position: absolute; z-index: 1; width: calc(146 * var(--won-unit)); height: calc(146 * var(--won-unit)); right: calc(5 * var(--won-unit)); top: calc(34 * var(--won-unit)); bottom: auto; object-fit: contain; transform: none; pointer-events: none; }
.home-screen .referral-card > .primary-button { position: absolute; z-index: 3; bottom: calc(14 * var(--won-unit)); left: calc(16 * var(--won-unit)); right: calc(16 * var(--won-unit)); width: auto; height: calc(40 * var(--won-unit)); min-height: 0; margin: 0; padding: 0; border-radius: calc(12 * var(--won-unit)); justify-content: center; color: #fff; font-size: calc(14 * var(--won-unit)); font-weight: 600; background: linear-gradient(110deg, #008aff, #007dfe); box-shadow: none; }
.home-screen .home-tasks-link { display: flex; align-items: center; gap: calc(14 * var(--won-unit)); width: 100%; height: calc(66 * var(--won-unit)); margin-top: calc(16 * var(--won-unit)) !important; padding: calc(12 * var(--won-unit)); text-align: left; border-radius: calc(15 * var(--won-unit)); border: 1px solid #ffffff09; background: #1c1f23; }
.home-tasks-icon { display: grid; place-items: center; width: calc(42 * var(--won-unit)); height: calc(42 * var(--won-unit)); flex-shrink: 0; border: 1px solid #ffffff0b; border-radius: calc(10 * var(--won-unit)); background: #22262c; color: #bac6dd; }
.home-tasks-icon .nav-icon { width: calc(28 * var(--won-unit)); height: calc(28 * var(--won-unit)); fill: currentColor; }
.home-tasks-copy { display: flex; flex-direction: column; gap: calc(5 * var(--won-unit)); flex: 1; min-width: 0; }
.home-tasks-copy strong { font-size: calc(14 * var(--won-unit)); font-weight: 700; line-height: 1.2; }
.home-tasks-copy > span { font-size: calc(12 * var(--won-unit)); line-height: 1.2; color: #a9b5c9; white-space: nowrap; }
.home-tasks-link .home-tasks-arrow { width: calc(16 * var(--won-unit)); height: calc(16 * var(--won-unit)); opacity: .8; }
.home-screen .primary-button:active, .home-event-banner:active, .home-tasks-link:active { transform: scale(.96); }
.profile-hero { display: flex; align-items: center; gap: 15px; padding: 17px; margin: 6px 0 20px; text-align: left; border: 1px solid #ffffff09; border-radius: 17px; background: #1e2229; }
.profile-hero .big-avatar { width: 58px; height: 58px; margin: 0; flex-shrink: 0; font-size: 24px; }
.profile-identity { min-width: 0; }
.profile-hero h1 { margin: 0; font-size: 23px; line-height: 1.2; overflow-wrap: anywhere; }
.profile-hero p { margin: 5px 0 0; color: #a8b0bf; font-size: 14px; overflow-wrap: anywhere; }
.page-heading { margin: 0 0 24px; align-items: flex-start; }
.page-heading h1 { font-size: 28px; line-height: 1.2; }
.page-heading p { font-size: 14px; line-height: 1.45; margin-top: 8px; }
.primary-button, .secondary-button { font-size: 14px; min-height: 46px; border-radius: 12px; }
.menu-row { font-size: 14px; line-height: 1.4; min-height: 60px; }
.menu-list, .details-list, .stat-card { border-radius: 17px; }
.stat-card p { font-size: 12px; line-height: 1.4; }
.stat-card strong { font-size: 26px; }
.detail-row { font-size: 13px; line-height: 1.45; }
.sheet-head h2 { font-size: 22px; line-height: 1.25; }
.sheet-head .icon-button { width: 40px; height: 40px; flex-shrink: 0; }
.sheet p { font-size: 14px; }
.form-label { font-size: 13px; }
.sheet .field { font-size: 16px; }
.sheet .small-muted { font-size: 12px !important; }
/* The native dialog stays viewport-sized; only its inner panel can change
   height or move. The backdrop never follows the panel's geometry. */
.sheet-modal { position: fixed; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; border-radius: 0; overflow: hidden; background: transparent; color: inherit; box-shadow: none; transform: none; }
.sheet { opacity: 1; backdrop-filter: none; -webkit-backdrop-filter: none; }
.sheet-modal[open] > .sheet { animation: sheet-rise .22s cubic-bezier(.22, 1, .36, 1) both; }
.sheet-modal::backdrop { position: fixed; inset: 0; background: #00000080; backdrop-filter: none; -webkit-backdrop-filter: none; opacity: 1; animation: none; transition: none; }
@keyframes sheet-rise { from { transform: translateY(24px); } to { transform: translateY(0); } }
.sheet .invite-level-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 48px; margin: 16px 0; padding: 10px 12px; border: 1px solid #ffffff0c; border-radius: 12px; background: #ffffff04; color: #d4dbe6; font-size: 13px; text-align: left; }
.invite-level-copy { display: flex; flex-direction: column; gap: 4px; }
.invite-level-copy strong { font-size: 13px; font-weight: 550; }
.invite-level-copy > span { font-size: 11px; color: #9da9bb; }
.sheet .invite-level-link > .ui-icon { width: 14px; height: 14px; color: #9da9bb; }
.screen-enter { animation: none; }
@media (prefers-reduced-motion: reduce) { .dock-selection { transition: none; } }

/* Blur the source once. Panel movement never resamples a backdrop filter. */
body:has(.sheet-modal[open]) > .app-shell,
body:has(.sheet-modal[open]) > .dock-wrap { filter: blur(3px); }

/* The glass appears only once content actually crosses beneath the header. */
.app-shell .app-header { isolation: isolate; overflow: clip; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-shell .app-header::before { content: ''; position: absolute; inset: 0; z-index: -1; background: #141518; pointer-events: none; }
.app-shell .app-header.header-over-content::before { background: #141518bd; backdrop-filter: blur(14px) saturate(125%); -webkit-backdrop-filter: blur(14px) saturate(125%); }
.app-header .notification-dot { width: calc(9 * var(--won-unit)); height: calc(9 * var(--won-unit)); top: calc(8 * var(--won-unit)); right: calc(8 * var(--won-unit)); border: 0; box-shadow: none; }

/* Home's two bottom panels. Other screens and the existing shell stay unchanged. */
.app-shell.home-screen #main:has(.home-bottom-panels) {
  grid-template-rows: auto minmax(calc(164 * var(--won-unit)), 1fr) auto;
}
.home-bottom-panels { display: grid; gap: calc(16 * var(--won-unit)); align-self: end; }
.home-bottom-panels > section {
  min-width: 0; padding: calc(16 * var(--won-unit));
  border: 1px solid #ffffff0b; border-radius: calc(16 * var(--won-unit));
  background: #1d1f23; color: #f5f6fa;
}
.home-bottom-panels h2 { margin: 0; font-size: calc(18 * var(--won-unit)); font-weight: 700; line-height: 1.25; letter-spacing: -.25px; }
.home-invite-panel { display: grid; gap: calc(12 * var(--won-unit)); }
.home-invite-rewards { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
.home-invite-rewards p { margin: 0; font-size: calc(18 * var(--won-unit)); line-height: 1.3; color: #a8b1c4; }
.home-invite-rewards strong { color: #f5f6fa; font-size: calc(22 * var(--won-unit)); font-weight: 650; }
.home-invite-rewards .home-invite-fixed { color: #209aff; }
.home-invite-level { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; padding: 0; border: 0; background: transparent; color: #209aff; font-size: calc(13 * var(--won-unit)); line-height: 1.4; }
.home-invite-level svg { width: 12px; height: 12px; }
.home-invite-link { display: flex; align-items: center; min-height: 44px; border: 1px solid #414752; border-radius: calc(10 * var(--won-unit)); background: #191b1f; overflow: hidden; }
.home-invite-link input { flex: 1; width: 0; min-width: 0; padding: 0 calc(14 * var(--won-unit)); background: transparent; border: 0; color: #d2d8e4; font: inherit; font-size: calc(14 * var(--won-unit)); text-overflow: ellipsis; }
.home-invite-link button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; background: transparent; border: 0; color: #a1a7b2; }
.home-invite-link svg { width: 21px; height: 21px; }
.home-invite-actions { display: grid; grid-template-columns: minmax(0, 1fr) 44px; gap: calc(12 * var(--won-unit)); }
.home-invite-actions button, .home-contest-action { display: grid; place-items: center; min-height: 44px; margin: 0; padding: 0 12px; border: 1px solid transparent; border-radius: calc(10 * var(--won-unit)); font-size: calc(14 * var(--won-unit)); font-weight: 650; line-height: 1.2; color: #fff; }
.home-invite-share { background: #087cff; }
.home-invite-actions .home-invite-statistics { width: 44px; height: 44px; padding: 0; background: #2c2f35; border-color: #454a53; color: #b5bdce; }
.home-invite-statistics svg { width: 22px; height: 22px; }
.home-contest-panel { display: grid; gap: calc(8 * var(--won-unit)); }
.home-contest-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-width: 0; }
.home-contest-fund { display: grid; gap: 2px; min-width: 0; }
.home-contest-fund strong { color: #209aff; font-size: calc(29 * var(--won-unit)); line-height: 1.15; font-weight: 700; letter-spacing: -.6px; overflow-wrap: anywhere; }
.home-contest-fund span { color: #98a2b3; font-size: calc(12 * var(--won-unit)); line-height: 1.3; }
.home-contest-action { flex: 0 0 auto; min-width: calc(128 * var(--won-unit)); background: #2c2f35; border-color: #ffffff08; }
.home-bottom-panels button:focus-visible, .home-invite-link:focus-within { outline: 2px solid #8ebcff; outline-offset: 3px; }
.home-bottom-panels button:active { opacity: .8; }
.home-referral-stats h3 { margin: 24px 0 4px; font-size: 16px; font-weight: 650; }
.home-referral-stats .history-row > div { min-width: 0; overflow-wrap: anywhere; }

/* On short windows the added panels scroll with the page, never clip the banner. */
@media (max-height: 700px) {
  html:has(.app-shell.home-screen .home-bottom-panels),
  body:has(.app-shell.home-screen .home-bottom-panels) { height: auto; overflow: visible; }
  .app-shell.home-screen:has(.home-bottom-panels) { height: auto; min-height: 100dvh; overflow: visible; }
  .app-shell.home-screen #main:has(.home-bottom-panels) { flex: none; grid-template-rows: auto calc(164 * var(--won-unit)) auto; }
}

/* Requested blue pills in the existing banners only. */
.app-shell.home-screen .referral-card.roman-banner .referral-reward-line > span,
.app-shell.tasks-screen .tasks-summary.roman-banner .roman-summary-status {
  color: #76baff; background: #10335d; border-color: #3989e955; box-shadow: none;
}
.app-shell :is(.roman-banner--race, .roman-banner--referral, .roman-banner--tasks) .roman-surface { box-shadow: none; }
.app-shell :is(.roman-banner--race, .roman-banner--referral, .roman-banner--tasks) .roman-surface::before { content: none; }
.app-shell :is(.roman-banner--race, .roman-banner--referral, .roman-banner--tasks) .roman-surface::after {
  background: linear-gradient(90deg, #171c25db, #17213285 36%, #12234026 70%, transparent);
}

/* A distinct header asset leaves the loading wordmark untouched. */
.app-shell .app-header .wordmark:has(.great-header-wordmark) { margin-left: calc(-6 * var(--won-unit)); }
.app-shell .app-header .wordmark > .great-header-wordmark { display: block; width: calc(154 * var(--won-unit)); height: calc(54 * var(--won-unit)); object-fit: contain; }
.home-screen .balance-sub:active:not(:disabled) { transform: translateX(-50%); }

.home-invite-income-label { display: inline-block; margin-left: calc(7 * var(--won-unit)); font-size: calc(13 * var(--won-unit)); white-space: nowrap; }
.home-invite-actions .home-invite-statistics { border-color: transparent; }