/* 1064 px reference artboard. Every internal distance scales with card width. */
:root {
  --ease-out: cubic-bezier(.23, 1, .32, 1);
  --roman-enter-duration: 1200ms;
  --roman-enter-step-1: 200ms; --roman-enter-step-2: 340ms;
  --roman-enter-step-3: 520ms; --roman-enter-step-4: 710ms; --roman-enter-step-5: 900ms;
}
.wordmark > .won-wordmark { width: calc(146 * var(--won-unit)); height: calc(50 * var(--won-unit)); object-fit: contain; }
:is(.home-screen, .tasks-screen) .wordmark > .won-wordmark { width: calc(154 * var(--won-unit)); height: calc(54 * var(--won-unit)); }
#main { container-type: inline-size; }
.roman-banner {
  --roman-unit: calc(100cqw / 1064);
  container-type: inline-size;
  position: relative; isolation: isolate; overflow: visible;
  border: 0; background: transparent; box-shadow: none;
  border-radius: calc(28 * var(--roman-unit));
}
.home-event-banner.roman-banner::before,
.home-event-banner.roman-banner::after,
.home-screen .referral-card.roman-banner::before,
.home-screen .referral-card.roman-banner::after,
.tasks-screen .tasks-summary.roman-banner::before,
.tasks-screen .tasks-summary.roman-banner::after { content: none; }
.roman-layers { position: absolute; inset: 0; z-index: 1; border-radius: inherit; pointer-events: none; }
.roman-layers * { pointer-events: none; }
.roman-surface {
  position: absolute; inset: 0; z-index: 0; isolation: isolate; overflow: hidden; border-radius: inherit;
  border: 1px solid #8198b249; background: linear-gradient(110deg, #1c222c, #12213d 58%, #0738af);
}
.roman-field { position: absolute; inset: -25%; opacity: .78; }
.roman-field > .roman-sprite { width: 100%; height: 100%; object-fit: cover; }
.roman-surface::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(90deg, #171c25db, #17213285 36%, #12234026 70%, transparent);
  pointer-events: none;
}
.roman-part { position: absolute; display: block; }
.roman-sprite { display: block; width: 100%; height: 100%; object-fit: contain; max-width: none; }
.roman-frame { position: relative; display: block; width: 100%; height: auto; overflow: hidden; }
.roman-frame > .roman-sprite {
  position: absolute; width: var(--roman-source-width); height: auto;
  left: var(--roman-source-left); top: var(--roman-source-top); object-fit: initial;
  mask-image: var(--roman-mask); mask-mode: alpha; mask-size: 100% 100%; mask-repeat: no-repeat;
}
/* Retained optional source; currently omitted from visible markup at user's request. */
.roman-part--column {
  width: calc(450 * var(--roman-unit)); height: calc(860 * var(--roman-unit));
  top: calc(-72 * var(--roman-unit)); right: calc(155 * var(--roman-unit));
  opacity: .28; transform: rotate(-13deg); z-index: 1;
}
.roman-hero-mask {
  position: absolute; z-index: 1; left: 0; right: calc(-24 * var(--roman-unit));
  top: calc(-160 * var(--roman-unit)); bottom: 0; overflow: hidden;
  border-radius: 0 0 calc(28 * var(--roman-unit)) calc(28 * var(--roman-unit));
}
.roman-part--hero { z-index: 1; height: auto; }
.roman-part--leaf, .roman-part--tile-blue, .roman-part--tile-ivory, .roman-part--coin { height: auto; }
.roman-part--hero > .roman-sprite { height: auto; object-fit: initial; }
.roman-part--leaf, .roman-part--confetti, .roman-part--tile-blue,
.roman-part--tile-ivory, .roman-part--coin { z-index: 2; }
.roman-part--trophy {
  width: calc(510 * var(--roman-unit)); right: calc(-16 * var(--roman-unit));
  top: calc(136 * var(--roman-unit)); transform: rotate(10deg);
}
.roman-part--leaf {
  width: calc(126 * var(--roman-unit)); height: auto;
  left: 49.5%; top: calc(254 * var(--roman-unit)); transform: rotate(-75deg) scale(1.35);
}
.roman-part--leaf > .roman-sprite { height: auto; mask: none; object-fit: contain; overflow: visible; filter: brightness(1.55) contrast(.8) saturate(1.2); }
.roman-part--confetti { width: calc(44 * var(--roman-unit)); height: calc(64 * var(--roman-unit)); }
.roman-part--confetti > i {
  position: relative; display: block; width: 100%; height: 100%;
  background: linear-gradient(104deg, #ffe88b 0%, #ffd45a 10%, #ffbe32 44%, #f2a41e 45%, #ffce4d 82%, #ffe591 100%);
  clip-path: polygon(0 5%, 92% 0, 100% 47%, 91% 100%, 5% 94%, 10% 46%);
  box-shadow: inset calc(2 * var(--roman-unit)) 0 #fff0a7;
}
.roman-part--confetti > i::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(110deg, #ffe88a, #f5ad28);
  clip-path: polygon(10% 46%, 100% 47%, 91% 100%, 5% 94%);
}
.roman-part--confetti > i::after {
  content: ''; position: absolute; left: 9%; right: 0; top: 45%; height: 3%;
  background: #fff0a8b3; transform: rotate(1deg);
}
.roman-part--confetti-a { left: 52.5%; top: calc(-12 * var(--roman-unit)); transform: rotate(-34deg); }
.roman-part--confetti-b { width: calc(46 * var(--roman-unit)); height: calc(68 * var(--roman-unit)); right: calc(52 * var(--roman-unit)); top: calc(316 * var(--roman-unit)); transform: rotate(27deg); }
.roman-part--envelope {
  width: calc(430 * var(--roman-unit)); right: calc(44 * var(--roman-unit));
  top: calc(144 * var(--roman-unit)); transform: rotate(-4deg);
}
.roman-part--tile-blue {
  width: calc(100 * var(--roman-unit)); height: calc(108 * var(--roman-unit));
  left: 45.5%; top: calc(108 * var(--roman-unit)); transform: rotate(-18deg);
}
.roman-part--tile-ivory {
  width: calc(88 * var(--roman-unit)); height: calc(96 * var(--roman-unit));
  right: calc(34 * var(--roman-unit)); top: calc(-48 * var(--roman-unit)); transform: rotate(13deg);
}
.roman-part--clipboard {
  width: calc(455 * var(--roman-unit)); right: calc(-5 * var(--roman-unit));
  top: calc(34 * var(--roman-unit)); transform: rotate(11deg);
}
.roman-coin--small {
  width: calc(76 * var(--roman-unit)); height: calc(80 * var(--roman-unit));
  left: 61%; top: calc(-58 * var(--roman-unit)); transform: rotate(-17deg);
}
.roman-coin--large {
  width: calc(120 * var(--roman-unit)); height: calc(128 * var(--roman-unit));
  right: calc(-8 * var(--roman-unit)); top: calc(235 * var(--roman-unit)); transform: rotate(14deg);
}

/* Height follows the selected artboard, independently of viewport height. */
.home-screen #main:has(.home-event-carousel) {
  height: auto;
  min-height: calc(100svh - 179 * var(--won-unit) - var(--tg-safe-top) - max(env(safe-area-inset-bottom), var(--tg-safe-bottom)));
  grid-template-rows: auto minmax(calc(164 * var(--won-unit)), 1fr) calc(82 * var(--won-unit));
  gap: 0;
}
.home-screen #main:not(:has(.home-event-carousel)) {
  height: auto; min-height: 0;
  grid-template-rows: calc(164 * var(--won-unit)) auto calc(82 * var(--won-unit)); gap: 0;
}
.home-event-carousel:has(.roman-banner), .home-event-track:has(.roman-banner) { height: auto; }
.home-event-track:has(.roman-banner) {
  padding-top: calc(140 * 100cqw / 1064);
  margin-top: calc(-140 * 100cqw / 1064);
}
.home-screen:has(.roman-banner--race) #main { position: relative; z-index: 1; }
.home-screen:has(.roman-banner--race) { overflow: clip; }
.home-screen:has(.roman-banner--race) .app-header {
  position: sticky; top: 0; z-index: 10; margin-bottom: calc(8 * var(--won-unit));
  isolation: isolate; overflow: visible; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.home-screen:has(.roman-banner--race) .app-header::before { content: none; }
.home-screen:has(.roman-banner--race) .app-header.header-over-content::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #141518ed; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.tasks-screen .app-header {
  z-index: 10; margin-bottom: calc(8 * var(--won-unit));
  isolation: isolate; overflow: visible; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.tasks-screen .app-header::before { content: none; }
.tasks-screen .app-header.header-over-content::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #141518ed; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}



.home-event-slide:has(.roman-banner) { height: auto; padding-top: 0; }
.home-event-banner.roman-banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  height: auto; aspect-ratio: auto; padding: calc(48 * var(--roman-unit));
}
.home-event-banner.roman-banner .home-event-title {
  position: relative; z-index: 3; inset: auto; flex-shrink: 0;
  width: 100%; max-height: none; display: block; overflow: hidden; text-overflow: ellipsis;
  margin: 0 0 calc(8 * var(--roman-unit));
  font-size: calc(66 * var(--roman-unit)); line-height: 1.1; font-weight: 700;
  letter-spacing: calc(-1.5 * var(--roman-unit)); white-space: nowrap; text-wrap: nowrap; -webkit-line-clamp: unset;
}
.home-event-banner.roman-banner .home-event-prize {
  position: relative; z-index: 3; inset: auto; flex-shrink: 0;
  margin: 0 0 calc(16 * var(--roman-unit));
  font-size: calc(112 * var(--roman-unit)); font-weight: 750; line-height: 1; letter-spacing: calc(-1.4 * var(--roman-unit));
}
.home-event-banner.roman-banner .home-event-prize-wide { font-size: calc(58 * var(--roman-unit)); }
.home-event-banner.roman-banner .home-event-time {
  position: relative; z-index: 3; inset: auto; flex-shrink: 0;
  width: max-content; max-width: 100%; margin: 0 0 calc(40 * var(--roman-unit));
  padding: calc(8.4 * var(--roman-unit)) calc(16.8 * var(--roman-unit));
  border: 1px solid #f6cc655c; border-radius: calc(15 * var(--roman-unit));
  background: linear-gradient(110deg, #8e651e4d, #68481745); color: #f8d676;
  box-shadow: inset 0 1px 0 #ffffff0d;
  font-size: calc(36 * var(--roman-unit)); line-height: 1.1;
}
.home-event-banner.roman-banner .home-event-dots {
  position: relative; z-index: 3; inset: auto; flex-shrink: 0;
  margin: 0; gap: calc(12 * var(--roman-unit)); height: calc(20 * var(--roman-unit));
}
.home-event-banner.roman-banner .home-event-dots i { width: calc(20 * var(--roman-unit)); height: calc(20 * var(--roman-unit)); border-radius: calc(3 * var(--roman-unit)); }

.home-screen .referral-card.roman-banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0;
  height: auto; min-height: 0; aspect-ratio: auto;
  padding: calc(48 * var(--roman-unit)); overflow: visible;
}
.home-screen .referral-card.roman-banner .referral-title-row {
  position: relative; z-index: 3; inset: auto; display: block;
  width: 100%; margin: 0 0 calc(8 * var(--roman-unit));
}
.home-screen .referral-card.roman-banner :is(h1, .roman-referral-title) {
  max-width: none; margin: 0; color: #f4f6fb;
  font-size: calc(66 * var(--roman-unit)); font-weight: 700; line-height: 1.1;
  letter-spacing: calc(-1.5 * var(--roman-unit)); white-space: nowrap;
}
.home-screen .referral-card.roman-banner .referral-reward-line {
  position: relative; z-index: 3; inset: auto; display: flex;
  flex-direction: column; align-items: flex-start; gap: calc(28 * var(--roman-unit));
  width: auto; max-width: none; margin: 0 0 calc(28 * var(--roman-unit)); line-height: 1;
}
.home-screen .referral-card.roman-banner .referral-reward-line strong {
  display: block; margin: 0; color: #f4f6fb;
  font-size: calc(112 * var(--roman-unit)); font-weight: 750; line-height: 1;
  font-variant-numeric: proportional-nums; font-feature-settings: "pnum" 1, "tnum" 0;
  font-kerning: normal;
  letter-spacing: calc(-1.4 * var(--roman-unit)); white-space: nowrap;
}
.home-screen .referral-card.roman-banner .referral-reward-line > span {
  display: block; width: max-content; max-width: 100%; margin: 0;
  padding: calc(8.4 * var(--roman-unit)) calc(16.8 * var(--roman-unit));
  font-size: calc(36 * var(--roman-unit)); line-height: 1.1; color: #a9d6ff;
  border: 1px solid #71b2ef38; border-radius: calc(15 * var(--roman-unit));
  background: linear-gradient(110deg, #194d7945, #12366138);
  box-shadow: inset 0 1px 0 #ffffff08; white-space: nowrap;
}
.roman-banner--referral .roman-layers {
  clip-path: inset(calc(-160 * var(--roman-unit)) 0 0 0 round 0 0 calc(28 * var(--roman-unit)) calc(28 * var(--roman-unit)));
}
.roman-banner--referral .roman-part--envelope {
  width: calc(520 * var(--roman-unit)); right: 0;
  top: calc(144 * var(--roman-unit)); transform: rotate(-25deg);
}
.roman-banner--referral .roman-part--tile-blue {
  width: calc(98 * var(--roman-unit)); height: auto;
  left: 42.5%; top: calc(178 * var(--roman-unit)); transform: rotate(-24deg); opacity: .84;
}
.roman-banner--referral .roman-part--tile-ivory {
  width: calc(82 * var(--roman-unit)); height: auto;
  right: calc(120 * var(--roman-unit)); top: calc(-40 * var(--roman-unit)); transform: rotate(19deg);
}
.roman-referral-actions {
  position: relative; z-index: 4; inset: auto; width: 100%;
  margin: calc(32 * var(--roman-unit)) 0 0;
  display: grid; grid-template-columns: minmax(0, 1fr) calc(112 * var(--roman-unit));
  gap: calc(20 * var(--roman-unit)); height: calc(112 * var(--roman-unit));
}
.home-screen .roman-referral-actions .primary-button {
  position: relative; inset: auto; width: 100%; height: 100%; min-height: 0;
  padding: 0; margin: 0; justify-content: center;
  font-size: calc(42 * var(--roman-unit)); font-weight: 550; color: #fff;
  border-radius: calc(20 * var(--roman-unit)); border: 1px solid #69bdff4d;
  background: linear-gradient(115deg, #078aff, #0868ed);
  box-shadow: inset 0 1px 0 #c2e8ff14, 0 2px 5px #00173622;
}
.home-screen .roman-referral-actions .referral-level-button {
  position: relative; display: grid; place-items: center;
  width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0;
  border: 1px solid #829bbd40; border-radius: calc(20 * var(--roman-unit));
  background: linear-gradient(140deg, #293a52, #20314a); color: #bdc6d9;
  box-shadow: inset 0 1px 0 #d8e7ff0d;
}
.roman-referral-actions button::after { content: ''; position: absolute; inset: -7px 0; }
.roman-level-arrow { display: block; width: calc(60 * var(--roman-unit)); height: calc(60 * var(--roman-unit)); }

.tasks-screen #main:has(.tasks-summary.roman-banner) { position: relative; z-index: 1; padding-top: 0; }
.tasks-screen .tasks-summary.tasks-summary-emphasis.roman-banner {
  overflow: visible; height: auto; min-height: 0; aspect-ratio: 1064 / 396;
  padding: calc(48 * var(--roman-unit)); margin-bottom: calc(20 * var(--won-unit));
}
.tasks-screen .tasks-summary.roman-banner .tasks-summary-copy {
  position: relative; inset: auto; z-index: 3;
  width: 100%; height: 100%; max-width: none; display: block;
}
.tasks-screen .tasks-summary.roman-banner .task-summary-content {
  display: flex; flex-direction: column; align-items: flex-start; gap: 0; height: 100%; animation: none;
}
.tasks-screen .tasks-summary.roman-banner .tasks-summary-label {
  min-height: 0; max-width: none; margin: 0;
  font-size: calc(60 * var(--roman-unit)); line-height: 1.1; color: #f4f6fb;
  font-weight: 700; white-space: nowrap; letter-spacing: calc(-1.5 * var(--roman-unit));
}
.tasks-screen .tasks-summary.roman-banner .tasks-summary-amount {
  margin: calc(8 * var(--roman-unit)) 0 0;
  font-size: calc(var(--summary-amount-size, 112) * var(--roman-unit)); font-weight: 750;
  line-height: 1; letter-spacing: calc(-1.4 * var(--roman-unit));
}
.tasks-screen .tasks-summary.roman-banner .roman-summary-status {
  display: block; width: max-content; max-width: 100%; margin-top: calc(16 * var(--roman-unit));
  padding: calc(8.4 * var(--roman-unit)) calc(16.8 * var(--roman-unit));
  border: 1px solid #71b2ef38; border-radius: calc(15 * var(--roman-unit));
  background: linear-gradient(110deg, #194d7945, #12366138);
  color: #a9d6ff; font-size: calc(36 * var(--roman-unit)); line-height: 1.1; white-space: nowrap;
}
.tasks-screen .tasks-summary.roman-banner .roman-summary-meta {
  display: block; margin-top: auto; padding: 0;
  color: #a4b5ce; font-size: calc(36 * var(--roman-unit)); line-height: 1.2;
}
.roman-banner--tasks .roman-layers {
  clip-path: inset(calc(-80 * var(--roman-unit)) 0 0 0 round 0 0 calc(28 * var(--roman-unit)) calc(28 * var(--roman-unit)));
}
.roman-banner--tasks .roman-hero-mask { right: 0; }
.roman-banner--tasks .roman-part--clipboard {
  width: calc(392 * var(--roman-unit)); right: calc(14 * var(--roman-unit));
  top: calc(138 * var(--roman-unit)); transform: rotate(9deg);
}
.roman-banner--tasks .roman-part--coin { height: auto; opacity: 1; }
.roman-banner--tasks [data-roman-motion] { opacity: var(--roman-opacity, 1); }
.roman-banner--tasks .roman-coin--small {
  width: calc(118 * var(--roman-unit)); left: 59.5%; top: calc(-42 * var(--roman-unit));
  transform: rotate(-20deg);
}
.roman-banner--tasks .roman-task-tile--title {
  --roman-opacity: .28;
  width: calc(80 * var(--roman-unit)); height: auto; left: 19.2%; top: calc(-22 * var(--roman-unit));
  transform: rotate(18deg);
}
.roman-banner--tasks .roman-task-coin--left {
  --roman-opacity: .16;
  width: calc(52 * var(--roman-unit)); left: calc(-16 * var(--roman-unit)); top: calc(186 * var(--roman-unit));
  transform: rotate(-26deg);
}
.roman-banner--tasks .roman-task-tile--bottom {
  --roman-opacity: .70;
  width: calc(96 * var(--roman-unit)); height: auto; left: 40.2%; top: calc(352 * var(--roman-unit));
  transform: rotate(-20deg);
}
.roman-banner--tasks.roman-awaiting .task-summary-content { visibility: hidden; }
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--tasks.roman-entering .roman-part [data-roman-motion] { animation-name: roman-task-detail-enter; animation-duration: var(--roman-enter-duration); }
  .roman-banner--tasks.roman-entering .roman-part--clipboard [data-roman-motion] { animation-delay: 0ms; }
  .roman-banner--tasks.roman-entering .roman-coin--small [data-roman-motion] { animation-delay: var(--roman-enter-step-1); }
  .roman-banner--tasks.roman-entering .roman-task-tile--bottom [data-roman-motion] { animation-delay: var(--roman-enter-step-2); }
  .roman-banner--tasks.roman-entering .roman-task-tile--title [data-roman-motion] { animation-delay: var(--roman-enter-step-3); }
  .roman-banner--tasks.roman-entering .roman-task-coin--left [data-roman-motion] { animation-delay: var(--roman-enter-step-4); }
  .roman-banner--tasks.roman-entering :is(.tasks-summary-label, .tasks-summary-amount, .roman-summary-status, .roman-summary-meta) { animation: roman-copy-enter 900ms cubic-bezier(.22, .61, .36, 1) both; }
  .roman-banner--tasks.roman-entering .tasks-summary-label { animation-delay: 100ms; }
  .roman-banner--tasks.roman-entering .tasks-summary-amount { animation-delay: 220ms; }
  .roman-banner--tasks.roman-entering .roman-summary-status { animation-delay: 340ms; }
  .roman-banner--tasks.roman-entering .roman-summary-meta { animation-delay: 460ms; }
}
@keyframes roman-task-detail-enter {
  from { opacity: 0; transform: translate3d(calc(48 * var(--roman-unit)), calc(56 * var(--roman-unit)), 0) scale(.6); }
  to { opacity: var(--roman-opacity, 1); transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: reduce) {
  .roman-banner--tasks.roman-entering [data-roman-motion] { animation: none; }
}
.tasks-banner-decoration { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }

/* Keep the entrance frame ready before boot reveal and before a neighboring slide is exposed. */
.roman-banner.roman-awaiting .roman-part [data-roman-motion],
.roman-banner.roman-awaiting :is(.home-event-title, .home-event-prize, .home-event-time, .referral-title-row),
.roman-banner.roman-awaiting .referral-reward-line > :is(strong, span) { opacity: 0; }

/* Decorative entrance; the carousel replays it on each visit. */
.roman-entering [data-roman-motion] { animation: roman-detail-enter 1200ms cubic-bezier(.22, .61, .36, 1) both; }
.roman-entering .roman-part--hero [data-roman-motion] { animation-delay: 120ms; }
.roman-entering .roman-part--leaf [data-roman-motion],
.roman-entering .roman-part--tile-blue [data-roman-motion],
.roman-entering .roman-coin--small [data-roman-motion] { animation-delay: 240ms; }
.roman-entering .roman-part--confetti [data-roman-motion],
.roman-entering .roman-part--tile-ivory [data-roman-motion],
.roman-entering .roman-coin--large [data-roman-motion] { animation-delay: 360ms; }
@keyframes roman-detail-enter { from { opacity: 0; transform: translate3d(calc(48 * var(--roman-unit)), calc(56 * var(--roman-unit)), 0) scale(.78); } to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); } }
@keyframes roman-detail-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .roman-banner.roman-entering [data-roman-motion] { animation-name: roman-detail-fade; animation-duration: 180ms; animation-delay: 0ms; }
}

.roman-part--leaf.roman-leaf--second {
  width: calc(88 * var(--roman-unit)); left: 18%; top: calc(-36 * var(--roman-unit));
  transform: rotate(-28deg); z-index: 2; opacity: .4;
}
.roman-leaf--second > .roman-sprite { filter: brightness(1.35) contrast(.85) saturate(1.15); }
.roman-part--confetti-c {
  width: calc(42 * var(--roman-unit)); height: calc(64 * var(--roman-unit));
  left: 28.3%; top: calc(348 * var(--roman-unit)); transform: rotate(64deg); opacity: .48;
}
.roman-part--confetti-d {
  width: calc(34 * var(--roman-unit)); height: calc(54 * var(--roman-unit));
  left: -1%; top: calc(110 * var(--roman-unit)); transform: rotate(-22deg); opacity: .14;
}
.roman-part--confetti-c > i { background: linear-gradient(108deg, #fff1b5, #efb533 48%, #d78a17 49%, #ffdb75); }
.roman-part--confetti-d > i { background: linear-gradient(100deg, #ffdc83, #f3ae32 64%, #ffe8a3 65%); }

.roman-inner-decor { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; pointer-events: none; z-index: 2; }





.roman-part--confetti-a { --foil: #65b5ec; --foil-light: #c7eaff; --foil-shadow: #3485c3; }
.roman-part--confetti-b { --foil: #ed9689; --foil-light: #ffd4c7; --foil-shadow: #ca6b70; }
.roman-part--confetti-c { --foil: #a397d8; --foil-light: #e0d9fa; --foil-shadow: #756aab; }
.roman-part--confetti-d { --foil: #df91b0; --foil-light: #f9cede; --foil-shadow: #a96185; }
.roman-part--confetti > i {
  filter: none;
  background: linear-gradient(104deg, var(--foil-light), var(--foil) 44%, var(--foil-shadow) 45%, var(--foil) 82%, var(--foil-light));
  box-shadow: inset calc(2 * var(--roman-unit)) 0 var(--foil-light);
}
.roman-part--confetti > i::before { background: linear-gradient(110deg, var(--foil-light), var(--foil-shadow)); }
.roman-part--confetti > i::after { background: var(--foil-light); opacity: .7; }
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--race.roman-entering .roman-part--confetti-d [data-roman-motion] { animation-delay: 780ms; }
  .roman-banner--race.roman-entering .roman-leaf--second [data-roman-motion] { animation-delay: 650ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-c [data-roman-motion] { animation-delay: 520ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-a [data-roman-motion] { animation-delay: 390ms; }
  .roman-banner--race.roman-entering .roman-part--leaf:not(.roman-leaf--second) [data-roman-motion] { animation-delay: 260ms; }
  .roman-banner--race.roman-entering .roman-part--trophy [data-roman-motion] { animation-delay: 130ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-b [data-roman-motion] { animation-delay: 0ms; }
}
.roman-entering .roman-field > [data-roman-motion] { animation-name: roman-detail-fade; animation-delay: 0ms; }


.home-event-prize .home-event-ruble { display: inline; font-size: 1em; }
.home-event-prize .home-event-ruble .rounded-ruble {
  display: inline-block; width: .754em; height: .88em; vertical-align: -.045em;
}

@media (prefers-reduced-motion: no-preference) {
  .roman-banner--race.roman-entering .roman-part--confetti-b [data-roman-motion] { animation-delay: 0ms; }
  .roman-banner--race.roman-entering .roman-part--trophy [data-roman-motion] { animation-delay: 550ms; }
  .roman-banner--race.roman-entering .roman-part--leaf:not(.roman-leaf--second) [data-roman-motion] { animation-delay: 1100ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-a [data-roman-motion] { animation-delay: 1650ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-c [data-roman-motion] { animation-delay: 2200ms; }
  .roman-banner--race.roman-entering .roman-leaf--second [data-roman-motion] { animation-delay: 2750ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-d [data-roman-motion] { animation-name: roman-detail-enter-last; animation-delay: 3300ms; }
}
@keyframes roman-detail-enter-last {
  from { opacity: 0; transform: translate3d(calc(-48 * var(--roman-unit)), calc(56 * var(--roman-unit)), 0) scale(.78); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--race.roman-entering .roman-part--trophy [data-roman-motion] { animation-delay: 0ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-b [data-roman-motion] { animation-delay: 200ms; }
  .roman-banner--race.roman-entering .roman-part--leaf:not(.roman-leaf--second) [data-roman-motion] { animation-delay: 340ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-a [data-roman-motion] { animation-delay: 480ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-c [data-roman-motion] { animation-delay: 650ms; }
  .roman-banner--race.roman-entering .roman-leaf--second [data-roman-motion] { animation-delay: 790ms; }
  .roman-banner--race.roman-entering .roman-part--confetti-d [data-roman-motion] { animation-delay: 950ms; }
}
.roman-banner--race.roman-entering .home-event-title,
.roman-banner--race.roman-entering .home-event-prize,
.roman-banner--race.roman-entering .home-event-time,
.roman-banner--race.roman-entering .home-event-dots {
  animation: roman-copy-enter 900ms cubic-bezier(.22, .61, .36, 1) both;
}
.roman-banner--race.roman-entering .home-event-title { animation-delay: 100ms; }
.roman-banner--race.roman-entering .home-event-prize { animation-delay: 220ms; }
.roman-banner--race.roman-entering .home-event-time { animation-delay: 340ms; }
.roman-banner--race.roman-entering .home-event-dots { animation-delay: 460ms; }
@keyframes roman-copy-enter {
  from { opacity: 0; transform: translateY(calc(18 * var(--roman-unit))); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .roman-banner--race.roman-entering .home-event-title,
  .roman-banner--race.roman-entering .home-event-prize,
  .roman-banner--race.roman-entering .home-event-time,
  .roman-banner--race.roman-entering .home-event-dots {
    animation-name: roman-detail-fade; animation-duration: 180ms; animation-delay: 0ms;
  }
}
.home-event-banner.roman-banner:active { transform: scale(.96); }

.roman-entering .roman-field > [data-roman-motion] { animation: none; }
.roman-banner--race.roman-entering .home-event-dots { animation: none; }
.home-screen .balance-block::before { content: none; }




.roman-banner--race .roman-layers {
  clip-path: inset(calc(-160 * var(--roman-unit)) 0 0 0 round 0 0 calc(28 * var(--roman-unit)) calc(28 * var(--roman-unit)));
}




.home-event-banner.roman-banner:active { filter: none; }
.home-event-banner.roman-banner {
  transition: transform 180ms cubic-bezier(.22, .61, .36, 1);
}
.home-event-banner.roman-banner:active {
  transform: scale(.96);
  filter: none;
}




@media (prefers-reduced-motion: reduce) {
  .home-event-banner.roman-banner { transition: none; }
}




.home-event-banner.roman-banner {
  transform-origin: 50% 50%; translate: none;
}
.home-event-banner.roman-banner:active { translate: none; transform: scale(.96); }
.home-event-banner.roman-banner,
.home-event-banner.roman-banner:active {
  animation: none;
  transform: none;
  translate: none;
  transform-origin: center;
  transition: scale 180ms cubic-bezier(.22, .61, .36, 1);
}
.home-event-banner.roman-banner { scale: 1; }
.home-event-banner.roman-banner:active { scale: .96; }


@media (prefers-reduced-motion: reduce) {
  .home-event-banner.roman-banner,
  .home-event-banner.roman-banner:active { transition: none; }
}




/* Glass rim: local reflections, a shaded bevel, and a faint inner reflection. */





:is(.roman-banner--race, .roman-banner--referral, .roman-banner--tasks) .roman-surface {
  border: 0; backdrop-filter: none; -webkit-backdrop-filter: none;
  box-shadow: inset 0 1px 2px #ffffff0c, inset -1px -1px 2px #00000055, 0 2px 12px #00000018;
}
:is(.roman-banner--race, .roman-banner--referral, .roman-banner--tasks) .roman-surface::before {
  content: ''; position: absolute; inset: 0; z-index: 4;
  padding: 1.25px; border-radius: inherit;
  background:
    radial-gradient(ellipse at 0% 0%, #8d9aa645, transparent 38%),
    radial-gradient(ellipse at 100% 100%, #7e94a537, transparent 40%),
    linear-gradient(135deg, #6d7f8d36, #ffffff04 28%, #00000065 52%, #40668924 75%, #8496a540);
  -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; pointer-events: none; filter: blur(.15px);
}
:is(.roman-banner--race, .roman-banner--referral, .roman-banner--tasks) .roman-surface::after {
  background: linear-gradient(130deg, #ffffff09, transparent 28%, #ffffff02 65%, transparent),
    linear-gradient(90deg, #171c25db, #17213285 36%, #12234026 70%, transparent);
}
.roman-banner--referral.roman-entering .referral-title-row,
.roman-banner--referral.roman-entering .referral-reward-line > strong,
.roman-banner--referral.roman-entering .referral-reward-line > span,
.roman-banner--referral.roman-entering .roman-referral-actions > .primary-button {
  animation: roman-copy-enter 900ms cubic-bezier(.22, .61, .36, 1) both;
}
.roman-banner--referral.roman-entering .referral-title-row { animation-delay: 100ms; }
.roman-banner--referral.roman-entering .referral-reward-line > strong { animation-delay: 220ms; }
.roman-banner--referral.roman-entering .referral-reward-line > span { animation-delay: 340ms; }
.roman-banner--referral.roman-entering .roman-referral-actions > .primary-button { animation-delay: 440ms; }
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--referral.roman-entering .roman-part--envelope [data-roman-motion] { animation-delay: 0ms; }
  .roman-banner--referral.roman-entering .roman-part--tile-ivory [data-roman-motion] { animation-delay: 200ms; }
  .roman-banner--referral.roman-entering .roman-part--tile-blue [data-roman-motion] { animation-delay: 420ms; }
}
@media (prefers-reduced-motion: reduce) {
  .roman-banner--referral.roman-entering .referral-title-row,
  .roman-banner--referral.roman-entering .referral-reward-line > strong,
  .roman-banner--referral.roman-entering .referral-reward-line > span,
  .roman-banner--referral.roman-entering .roman-referral-actions > .primary-button {
    animation-name: roman-detail-fade; animation-duration: 180ms; animation-delay: 0ms;
  }
}
.home-screen .roman-referral-actions .referral-level-button,
.home-screen .roman-referral-actions .referral-level-button:active {
  animation: none; transition: none; transform: none; scale: 1; translate: none;
}
.home-screen .roman-referral-actions .primary-button {
  background:
    url('./assets/button-grain.svg') 0 0 / 64px 64px repeat,
    linear-gradient(110deg, #a2e5ff14, transparent 38%, #00369c14),
    linear-gradient(115deg, #078aff, #0868ed);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 1px 0 #c2e8ff2b, inset 0 -1px 1px #00318f55, 0 2px 5px #00173622;
}
.roman-banner--referral .roman-referral-tile--far {
  width: calc(50 * var(--roman-unit)); left: calc(-12 * var(--roman-unit));
  top: calc(164 * var(--roman-unit)); transform: rotate(22deg); opacity: .18;
}
.roman-banner--referral .roman-referral-tile--middle {
  width: calc(58 * var(--roman-unit)); left: 31%; right: auto;
  top: auto; bottom: calc(-22 * var(--roman-unit)); transform: rotate(-24deg); opacity: .52;
}
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--referral.roman-entering .roman-referral-tile--middle [data-roman-motion] { animation-delay: 650ms; }
  .roman-banner--referral.roman-entering .roman-referral-tile--far [data-roman-motion] { animation-delay: 800ms; }
}
.roman-banner--referral.roman-entering .roman-referral-actions > .primary-button {
  animation: none;
}
.home-screen .roman-referral-actions .primary-button,
.home-screen .roman-referral-actions .primary-button:active {
  animation: none; transition: none; transform: none; scale: 1; translate: none;
  background:
    linear-gradient(180deg, #a1dcff1c, transparent 30%, #0038a019),
    linear-gradient(110deg, #078affdf, #0868edea),
    url('./assets/roman/background.webp') center / 300px auto;
  background-blend-mode: normal;
  border-color: #8bceff3b;
  box-shadow: inset 0 1px 0 #ccefff3b, inset 0 2px 4px #72cbff10,
    inset 0 -2px 3px #003d9e40, 0 1px 2px #0000001a;
}
.roman-banner--referral .roman-referral-tile--edge {
  width: calc(68 * var(--roman-unit)); height: auto;
  left: 13.5%; right: auto; top: calc(-32 * var(--roman-unit));
  transform: rotate(-16deg); opacity: .62;
}
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--referral.roman-entering .roman-referral-tile--edge [data-roman-motion] { animation-delay: 710ms; }
}
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--referral.roman-entering .roman-part--envelope [data-roman-motion] { animation-delay: 0ms; }
  .roman-banner--referral.roman-entering .roman-part--tile-ivory:not(.roman-referral-tile--middle):not(.roman-referral-tile--far):not(.roman-referral-tile--edge) [data-roman-motion] { animation-delay: 200ms; }
  .roman-banner--referral.roman-entering .roman-part--tile-blue:not(.roman-referral-tile--edge):not(.roman-referral-tile--far) [data-roman-motion] { animation-delay: 340ms; }
  .roman-banner--referral.roman-entering .roman-referral-tile--middle [data-roman-motion] { animation-delay: 520ms; }
  .roman-banner--referral.roman-entering .roman-referral-tile--edge [data-roman-motion] { animation-delay: 710ms; }
  .roman-banner--referral.roman-entering .roman-referral-tile--far [data-roman-motion] { animation-name: roman-detail-enter-last; animation-delay: 900ms; }
}
@media (prefers-reduced-motion: no-preference) {
  .roman-banner--referral.roman-entering .roman-part [data-roman-motion] {
    animation-name: roman-referral-detail-enter;
    animation-duration: 1200ms;
    animation-timing-function: cubic-bezier(.22, .61, .36, 1);
    transform-origin: 50% 65%;
  }
  .roman-banner--referral.roman-entering .roman-part--envelope [data-roman-motion] {
    animation-name: roman-referral-envelope-enter;
    transform-origin: 50% 80%;
  }
  .roman-banner--referral.roman-entering .roman-referral-tile--far [data-roman-motion] {
    animation-name: roman-referral-detail-enter-last;
  }
}
@keyframes roman-referral-envelope-enter {
  from { opacity: 0; transform: translate3d(calc(48 * var(--roman-unit)), calc(56 * var(--roman-unit)), 0) scale(.5); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes roman-referral-detail-enter {
  from { opacity: 0; transform: translate3d(calc(48 * var(--roman-unit)), calc(56 * var(--roman-unit)), 0) scale(.6); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
@keyframes roman-referral-detail-enter-last {
  from { opacity: 0; transform: translate3d(calc(-48 * var(--roman-unit)), calc(56 * var(--roman-unit)), 0) scale(.6); }
  to { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}
.home-screen .roman-referral-actions {
  gap: 0; min-height: 44px; padding: 0;
  border: 1px solid #69bdff4d; border-radius: calc(20 * var(--roman-unit));
  overflow: hidden;
  background:
    url('./assets/button-grain.svg') 0 0 / 64px 64px repeat,
    linear-gradient(110deg, #a2e5ff14, transparent 38%, #00369c14),
    linear-gradient(115deg, #078aff, #0868ed);
  background-blend-mode: soft-light, normal, normal;
  box-shadow: inset 0 1px 0 #c2e8ff2b, inset 0 -1px 1px #00318f55, 0 2px 5px #00173622;
}
.home-screen .roman-referral-actions .primary-button,
.home-screen .roman-referral-actions .primary-button:active,
.home-screen .roman-referral-actions .referral-level-button,
.home-screen .roman-referral-actions .referral-level-button:active {
  background: transparent; border: 0; border-radius: 0; box-shadow: none;
  animation: none; transition: none; transform: none; scale: 1; translate: none;
}
.home-screen .roman-referral-actions .referral-level-button,
.home-screen .roman-referral-actions .referral-level-button:active {
  border-left: 1px solid #b7e2ff30;
  background: #042b6614; color: #e6f3ff;
}
.home-screen .roman-referral-actions {
  grid-template-columns: minmax(0, 1fr) max(44px, calc(112 * var(--roman-unit)));
  gap: calc(16 * var(--roman-unit)); padding: calc(8 * var(--roman-unit));
  height: calc(128 * var(--roman-unit)); min-height: 52px;
  background: #122038c7; background-blend-mode: normal;
  border: 1px solid #85a9d122; border-radius: calc(26 * var(--roman-unit));
  box-shadow: none;
}
.home-screen .roman-referral-actions .primary-button,
.home-screen .roman-referral-actions .primary-button:active {
  background: #087fff;
  border: 1px solid #79c5ff2e; border-radius: calc(18 * var(--roman-unit));
  box-shadow: none;
}
.home-screen .roman-referral-actions .referral-level-button,
.home-screen .roman-referral-actions .referral-level-button:active {
  background: #253852; color: #c7d5e8;
  border: 1px solid #94afcf2e; border-radius: calc(18 * var(--roman-unit));
  box-shadow: none;
}
.roman-banner--referral .roman-part--tile-blue .roman-sprite {
  filter: none;
}
.roman-banner--referral .roman-part--tile-ivory .roman-sprite {
  filter: saturate(0) brightness(1.1);
}

/* Both home cards share one slide height and the same quiet pagination. */
.home-event-viewport {
  padding-top: calc(140 * 100cqw / 1064);
  margin-top: calc(-140 * 100cqw / 1064);
  overflow: hidden;
}
.home-event-viewport .home-event-track:has(.roman-banner) {
  width: 100%; padding-top: 0; margin-top: 0;
  overflow: visible; scroll-snap-type: none; scroll-behavior: auto;
  touch-action: pan-y; user-select: none;
}
.home-event-track:is(.is-moving, .is-dragging) { will-change: transform; }
.home-event-track.is-dragging { cursor: grabbing; }
.home-event-track.is-dragging .home-event-banner.roman-banner { scale: 1; transition: none; }
.home-event-slide .roman-banner--referral .roman-part--envelope {
  width: calc(490 * var(--roman-unit)); right: calc(-28 * var(--roman-unit));
  top: calc(122 * var(--roman-unit)); transform: rotate(-20deg);
}
.home-event-slide .roman-banner--referral .roman-part--tile-blue:not(.roman-referral-tile--far) {
  width: calc(112 * var(--roman-unit)); left: 46%; top: calc(256 * var(--roman-unit));
  transform: rotate(-20deg); opacity: 1;
}
.home-event-slide .roman-banner--referral .roman-part--tile-ivory:not(.roman-referral-tile--middle):not(.roman-referral-tile--edge) {
  width: calc(66 * var(--roman-unit)); left: 53%; right: auto;
  top: calc(-24 * var(--roman-unit)); transform: rotate(24deg); opacity: 1;
}
.home-event-slide .roman-banner--referral .roman-referral-tile--edge {
  width: calc(54 * var(--roman-unit)); left: 16%;
  top: calc(-28 * var(--roman-unit)); transform: rotate(-29deg); opacity: .28;
}
.home-event-slide .roman-banner--referral .roman-referral-tile--middle {
  width: calc(60 * var(--roman-unit)); left: 29%;
  top: calc(346 * var(--roman-unit)); bottom: auto; transform: rotate(-32deg); opacity: .48;
}
.home-event-slide .roman-banner--referral .roman-referral-tile--far {
  width: calc(46 * var(--roman-unit)); left: calc(-10 * var(--roman-unit));
  top: calc(166 * var(--roman-unit)); transform: rotate(27deg); opacity: .28;
}

/* Home fits the viewport; dialogs and notification content retain their own scrolling. */
html:has(.app-shell) {
  --won-unit: clamp(.65px, min(calc((min(100vw, 448px) - 36px) / 354), calc(100dvh / 640)), 1.155px);
}
html:has(.home-screen), body:has(.home-screen) { height: 100dvh; overflow: hidden; overscroll-behavior-y: none; }
.app-shell.home-screen {
  height: 100dvh; min-height: 0; display: flex; flex-direction: column;
  overflow: hidden;
}
.home-screen .app-header { flex-shrink: 0; }
.home-screen #main:has(.home-event-carousel) {
  flex: 1; height: auto; min-height: 0;
  grid-template-rows: auto minmax(0, 1fr) calc(82 * var(--won-unit));
}
.home-screen .balance-caption { justify-content: center; width: 100%; }
.home-screen .balance-caption .icon-button {
  position: absolute; left: calc(50% + 30 * var(--won-unit)); top: 50%;
  transform: translateY(-50%);
}
.home-screen .balance-number { width: 100%; text-align: center; }
.home-screen .balance-sub { left: 50%; right: auto; margin: 0; transform: translateX(-50%); }
/* One Great shell keeps the header and content aligned in every section. */
.app-shell {
  padding-inline: calc(16 * var(--won-unit));
  padding-bottom: calc(103 * var(--won-unit) + max(env(safe-area-inset-bottom), var(--tg-safe-bottom)));
}
.app-shell .app-header {
  width: calc(100% + 32 * var(--won-unit)); height: calc(72 * var(--won-unit));
  margin: 0 calc(-16 * var(--won-unit)) calc(8 * var(--won-unit)); padding: calc(16 * var(--won-unit));
  z-index: 10; isolation: isolate; overflow: visible; background: transparent;
  backdrop-filter: none; -webkit-backdrop-filter: none;
}
.app-shell .app-header::before { content: none; }
.app-shell .app-header.header-over-content::before {
  content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #141518ed; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.app-shell .wordmark { margin-left: calc(-14.5 * var(--won-unit)); }
.app-shell .wordmark > .won-wordmark { width: calc(154 * var(--won-unit)); height: calc(54 * var(--won-unit)); }
.app-shell .header-actions { gap: calc(9 * var(--won-unit)); transform: translateY(calc(2 * var(--won-unit))); }
.app-shell .app-header .icon-button { width: calc(40 * var(--won-unit)); height: calc(40 * var(--won-unit)); }
.app-shell .avatar-button {
  display: grid; place-items: center; width: calc(44 * var(--won-unit)); height: calc(44 * var(--won-unit));
  padding: 0; border-radius: 50%; border: 1px solid transparent;
  background: linear-gradient(110deg, #2e3441, #2a2e38 60%, #262a32) padding-box, linear-gradient(135deg, #8a96ad, #68768e 20%, #3b4453 48%, #2b303a 72%, #3a414d) border-box;
  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;
}
@media (min-width: 620px) {
  html, body { background: #141518; }
  .app-shell { border: 0; box-shadow: none; background: transparent; }
}
@media (max-height: 460px) {
  .app-shell { max-width: min(448px, 90dvh); }
}

.home-event-viewport > .home-event-track {
  overflow: visible; scroll-snap-type: none; scroll-behavior: auto;
  touch-action: pan-y pinch-zoom; user-select: none;
}
.home-event-viewport .home-event-banner { touch-action: pan-y pinch-zoom; }

/* Fill spare height above the dock, and scroll only when the content cannot fit. */
html:has(.home-bottom-panels), body:has(.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: 1; min-height: min-content; grid-template-rows: auto minmax(calc(164 * var(--won-unit)), 1fr) auto;
}

.app-shell.home-screen:has(.home-bottom-panels) { padding-bottom: calc(95 * var(--won-unit) + max(env(safe-area-inset-bottom), var(--tg-safe-bottom))); }