:root {
  color-scheme: light;
  --background: #eef6fb;
  --surface: #ffffff;
  --surface-soft: #f8fafc;
  --text: #192843;
  --muted: #718096;
  --line: #e7eef5;
  --primary: #1daeed;
  --primary-dark: #173e82;
  --primary-soft: #e7f8ff;
  --cyan: #06b6d4;
  --gold: #f4bd18;
  --danger: #ef4444;
  --purple: #a855f7;
  --shadow: 0 22px 55px rgb(21 76 112 / 13%);
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 32px;
  --radius-xl: 40px;
}

* { box-sizing: border-box; }

.sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }

html, body { min-height: 100%; }

body {
  margin: 0;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% -15%, #cbeeff 0, transparent 42%),
    var(--background);
  color: var(--text);
  font-family: Inter, ui-rounded, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; }
button { color: inherit; }
button:focus-visible, a:focus-visible { outline: 3px solid rgb(29 174 237 / 35%); outline-offset: 3px; }

.edge-glow {
  position: fixed;
  z-index: 0;
  top: 0;
  bottom: 0;
  width: 6px;
  background: linear-gradient(180deg, #7ee9ff, #169ee9 48%, #a7efff);
  box-shadow: 0 0 28px #29c7ff;
}
.edge-glow--left { left: 0; }
.edge-glow--right { right: 0; }

.app-shell {
  position: relative;
  z-index: 1;
  width: min(100%, 448px);
  height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  background: var(--surface-soft);
  box-shadow: 0 0 90px rgb(19 78 116 / 18%);
}

.topbar {
  position: absolute;
  z-index: 20;
  inset: 0 0 auto;
  height: calc(74px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgb(255 255 255 / 94%);
  border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px);
}

.brand { display: flex; align-items: center; gap: 9px; color: var(--primary-dark); text-decoration: none; }
.brand img { width: 42px; height: 42px; border-radius: 50%; box-shadow: 0 8px 18px rgb(29 174 237 / 22%); }
.brand__wordmark { font-size: 14px; font-weight: 950; letter-spacing: .08em; }

.balance-pill {
  min-height: 46px;
  padding: 7px 14px;
  border: 1px solid #c8efff;
  border-radius: 18px;
  background: linear-gradient(145deg, #f6fdff, #e5f8ff);
  text-align: right;
  cursor: pointer;
  box-shadow: inset 0 1px #fff, 0 8px 20px rgb(29 174 237 / 10%);
}
.balance-pill span { display: block; color: var(--muted); font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.balance-pill strong { color: var(--primary-dark); font-size: 14px; }

.main-scroll {
  position: absolute;
  inset: calc(74px + env(safe-area-inset-top)) 0 calc(74px + env(safe-area-inset-bottom));
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px 48px;
  scroll-behavior: smooth;
}

.hero__media {
  position: relative;
  height: 320px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #0b83d8;
  box-shadow: var(--shadow);
}
.hero__slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.03); transition: opacity .6s ease, transform 1.2s ease; }
.hero__slide.is-active { opacity: 1; transform: scale(1); }
.hero__shade { position: absolute; inset: 45% 0 0; background: linear-gradient(transparent, rgb(4 32 67 / 65%)); }
.hero__content { position: absolute; inset: auto 20px 25px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.eyebrow { margin: 0 0 4px; color: #fff; font-size: 11px; font-weight: 900; letter-spacing: .13em; text-shadow: 0 2px 12px rgb(0 0 0 / 45%); }
.primary-cta {
  min-height: 48px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 18px;
  padding: 0 18px;
  background: linear-gradient(135deg, #41d0ff, var(--primary));
  color: #fff;
  font-size: 13px;
  font-weight: 950;
  letter-spacing: .04em;
  cursor: pointer;
  box-shadow: 0 12px 30px rgb(0 162 229 / 42%), inset 0 1px rgb(255 255 255 / 45%);
  animation: pulse-cta 1.6s ease-in-out infinite;
}

.carousel-dots { position: absolute; z-index: 3; top: 16px; right: 17px; display: flex; gap: 6px; }
.carousel-dots button { width: 8px; height: 8px; padding: 0; border: 1px solid rgb(255 255 255 / 80%); border-radius: 999px; background: rgb(255 255 255 / 38%); cursor: pointer; }
.carousel-dots button.is-active { width: 23px; background: #fff; }

.section { margin-top: 34px; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin: 0 5px 14px; }
.section-kicker { margin: 0 0 2px; color: var(--gold); font-size: 11px; font-weight: 950; letter-spacing: .08em; }
.section-heading h1 { margin: 0; color: var(--primary-dark); font-size: 21px; font-weight: 950; letter-spacing: -.03em; text-transform: uppercase; }
.countdown { margin: 2px 0 0; color: var(--muted); font-size: 11px; font-weight: 700; text-transform: uppercase; }
.countdown strong { color: var(--primary); }
.text-button { padding: 8px 0; border: 0; background: transparent; color: var(--primary); font-size: 11px; font-weight: 950; text-transform: uppercase; cursor: pointer; }

.ranking-card { margin: 0; padding: 8px 0; overflow: hidden; list-style: none; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: 0 14px 40px rgb(38 81 110 / 8%); }
.ranking-card li { min-height: 54px; padding: 0 22px; display: grid; grid-template-columns: 42px 1fr auto; align-items: center; border-bottom: 1px solid #edf2f7; }
.ranking-card li:last-child { border-bottom: 0; }
.ranking-card strong { font-size: 14px; }
.ranking-card li > span:last-child { color: var(--primary); font-size: 13px; font-weight: 900; }
.ranking-card small { font-size: 11px; }
.rank { color: #9aa8b8; font-size: 14px; font-weight: 950; }
.rank--gold { color: var(--gold); }
.rank--bronze { color: #f1842a; }

.mission-card { position: relative; min-height: 254px; margin-top: 24px; overflow: hidden; border-radius: var(--radius-xl); box-shadow: var(--shadow); }
.mission-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mission-card__shade { position: absolute; inset: 0; background: linear-gradient(90deg, rgb(8 31 63 / 89%), rgb(8 31 63 / 32%)); }
.mission-card__content { position: relative; z-index: 1; width: 72%; padding: 30px 25px; color: #fff; }
.section-kicker--light { color: #8be8ff; }
.mission-card h2 { margin: 5px 0 8px; font-size: 24px; line-height: 1.02; text-transform: uppercase; }
.mission-card p:not(.section-kicker) { margin: 0; color: rgb(255 255 255 / 78%); font-size: 13px; line-height: 1.45; }
.mission-button { min-height: 42px; margin-top: 18px; padding: 0 15px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 15px; background: rgb(255 255 255 / 16%); color: #fff; font-size: 11px; font-weight: 900; text-transform: uppercase; backdrop-filter: blur(8px); }

.preview-note { margin-top: 24px; padding: 18px 20px; display: flex; flex-direction: column; gap: 3px; border: 1px dashed #a4dff7; border-radius: 20px; background: var(--primary-soft); }
.preview-note strong { color: var(--primary-dark); font-size: 13px; }
.preview-note span { color: var(--muted); font-size: 12px; line-height: 1.4; }

.about-card {
  margin-top: 26px;
  padding: 28px 20px 30px;
  border: 1px solid var(--line);
  border-radius: var(--radius-xl);
  background: var(--surface);
  box-shadow: 0 16px 45px rgb(38 81 110 / 8%);
}
.about-card__intro { padding: 4px 8px 12px; }
.about-card__intro h2 { margin: 2px 0 6px; color: var(--primary-dark); font-size: 26px; letter-spacing: -.04em; text-transform: uppercase; }
.about-card__intro > p:last-child { margin: 0; color: var(--muted); font-size: 13px; line-height: 1.5; }
.guide-group { --guide-accent: var(--primary); margin-top: 28px; }
.guide-group--red { --guide-accent: var(--danger); }
.guide-group--cyan { --guide-accent: var(--cyan); }
.guide-group--purple { --guide-accent: var(--purple); }
.guide-group__title { margin: 0 8px 12px; display: flex; align-items: center; gap: 9px; color: var(--guide-accent); }
.guide-group__title span { width: 30px; height: 30px; display: grid; place-items: center; border-radius: 11px; background: color-mix(in srgb, var(--guide-accent) 12%, white); }
.guide-group__title h3 { margin: 0; font-size: 15px; font-weight: 950; letter-spacing: .025em; text-transform: uppercase; }
.guide-item { position: relative; min-height: 236px; margin-bottom: 15px; overflow: hidden; border-radius: var(--radius-md); background: #e8f4fa; isolation: isolate; }
.guide-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.guide-item__effect { position: absolute; inset: 0; display: grid; place-items: center; overflow: hidden; background: radial-gradient(circle at 50% 43%, rgb(255 255 255 / 86%) 0 8%, transparent 9% 18%, rgb(255 255 255 / 24%) 19% 20%, transparent 21%), linear-gradient(145deg, #6e5de8, #b88aff 48%, #e7ddff); }
.guide-item__effect::before,
.guide-item__effect::after { content: ""; position: absolute; width: 154px; height: 154px; border: 2px solid rgb(255 255 255 / 48%); border-radius: 50%; box-shadow: 0 0 42px rgb(255 255 255 / 42%); }
.guide-item__effect::after { width: 205px; height: 205px; opacity: .45; }
.guide-item__effect i { position: relative; z-index: 1; margin-top: -34px; color: #fff; font-size: 82px; font-style: normal; font-weight: 950; line-height: 1; text-shadow: 0 10px 28px rgb(44 27 111 / 38%); }
.guide-item--slowmo .guide-item__effect { background: radial-gradient(circle at 50% 43%, rgb(255 255 255 / 86%) 0 8%, transparent 9% 18%, rgb(255 255 255 / 24%) 19% 20%, transparent 21%), linear-gradient(145deg, #0f9bc7, #56def1 48%, #d9f8ff); }
.guide-item--revive .guide-item__effect { background: radial-gradient(circle at 50% 42%, rgb(255 255 255 / 92%) 0 9%, transparent 10% 23%, rgb(255 241 171 / 42%) 24% 26%, transparent 27%), linear-gradient(145deg, #f0a91d, #ffda63 50%, #fff5bd); color: #855600; }
.guide-item::after { content: ""; position: absolute; z-index: 1; inset: 34% 0 0; background: linear-gradient(transparent, rgb(255 255 255 / 94%) 56%, #fff 76%); }
.guide-item > div { position: absolute; z-index: 2; inset: auto 18px 17px; }
.guide-item h4 { margin: 0 0 4px; color: var(--text); font-size: 17px; font-weight: 950; text-transform: uppercase; }
.guide-item p { margin: 0; color: #5c6b7e; font-size: 13px; line-height: 1.42; }

.demo-banner { margin-top: 22px; padding: 17px 18px; display: flex; gap: 12px; border: 1px solid #bceafe; border-radius: 22px; background: #ebfaff; color: var(--primary-dark); }
.demo-banner > span { flex: 0 0 auto; width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: #d2f2ff; color: var(--primary); }
.demo-banner strong { font-size: 13px; }
.demo-banner p { margin: 3px 0 0; color: var(--muted); font-size: 12px; line-height: 1.4; }

.site-footer { padding: 30px 10px 5px; display: grid; justify-items: center; gap: 7px; text-align: center; }
.site-footer img { border-radius: 50%; }
.site-footer p { margin: 0; color: #8a98a9; font-size: 11px; }
.site-footer a { color: var(--primary); font-size: 11px; font-weight: 850; text-decoration: none; }

.overlay {
  position: fixed;
  z-index: 1000;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: rgb(7 23 42 / 62%);
  backdrop-filter: blur(9px);
  animation: overlay-in .22s ease-out;
}
.overlay--drawer { justify-content: flex-end; padding: 0; }
.modal {
  width: min(100%, 390px);
  max-height: min(760px, calc(100dvh - 36px));
  overflow: auto;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 32px;
  background: rgb(255 255 255 / 96%);
  box-shadow: 0 30px 90px rgb(0 18 43 / 28%);
  animation: modal-in .26s ease-out;
}
.modal--wide { width: min(100%, 420px); }
.modal__header { position: sticky; z-index: 3; top: 0; padding: 22px 23px 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; background: rgb(255 255 255 / 94%); backdrop-filter: blur(14px); }
.modal__header p { margin: 0 0 2px; color: var(--primary); font-size: 10px; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.modal__header h2 { margin: 0; color: var(--primary-dark); font-size: 22px; letter-spacing: -.035em; }
.icon-button { flex: 0 0 auto; width: 38px; height: 38px; border: 1px solid var(--line); border-radius: 14px; background: #f8fbfd; color: #698096; cursor: pointer; }
.modal__body { padding: 6px 23px 24px; }
.modal__lead { margin: 0 0 18px; color: var(--muted); font-size: 13px; line-height: 1.52; }

.drawer { width: min(84vw, 330px); height: 100dvh; overflow: auto; border-left: 1px solid var(--line); background: #fff; box-shadow: -25px 0 70px rgb(0 18 43 / 25%); animation: drawer-in .28s ease-out; }
.drawer__hero { padding: 26px 22px 20px; color: #fff; background: linear-gradient(145deg, var(--primary-dark), #119cde); }
.drawer__hero .icon-button { float: right; border-color: rgb(255 255 255 / 25%); background: rgb(255 255 255 / 12%); color: #fff; }
.drawer__hero img { width: 56px; height: 56px; margin: 14px 0 8px; border-radius: 50%; border: 3px solid rgb(255 255 255 / 55%); }
.drawer__hero h2 { margin: 0; font-size: 20px; }
.drawer__hero p { margin: 3px 0 0; color: rgb(255 255 255 / 75%); font-size: 12px; }
.drawer__body { padding: 20px 17px 30px; }
.drawer-label { margin: 8px 8px 7px; color: #9aa8b8; font-size: 10px; font-weight: 900; letter-spacing: .11em; text-transform: uppercase; }
.drawer-link { width: 100%; min-height: 52px; padding: 0 14px; display: flex; align-items: center; gap: 12px; border: 0; border-radius: 17px; background: transparent; text-align: left; font-weight: 800; cursor: pointer; }
.drawer-link:hover { background: #f1f9fd; color: var(--primary); }
.drawer-link > span:first-child { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 12px; background: var(--primary-soft); }
.drawer-link > span:last-child { margin-left: auto; color: #b0bac6; }
.drawer-link--danger { color: var(--danger); }
.drawer-link--danger > span:first-child { background: #fff0f0; }

.form-grid { display: grid; gap: 14px; }
.form-field { display: grid; gap: 7px; }
.form-field label { color: #667589; font-size: 11px; font-weight: 900; letter-spacing: .05em; text-transform: uppercase; }
.form-field input, .form-field select, .form-field textarea { width: 100%; min-height: 50px; padding: 0 15px; border: 1px solid #dce7ef; border-radius: 17px; background: #f8fbfd; color: var(--text); outline: none; }
.form-field textarea { min-height: 90px; padding-top: 13px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: #6bd2f6; box-shadow: 0 0 0 4px rgb(29 174 237 / 10%); }
.quick-values { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.quick-values button, .stake-chips button { min-height: 45px; border: 1px solid #cfeaf7; border-radius: 15px; background: #f0fbff; color: var(--primary-dark); font-size: 13px; font-weight: 900; cursor: pointer; }
.quick-values button.is-active, .stake-chips button.is-active { border-color: var(--primary); background: var(--primary); color: #fff; box-shadow: 0 9px 18px rgb(29 174 237 / 22%); }
.quick-values small { display: block; color: #1ea75b; font-size: 9px; }
.action-button { width: 100%; min-height: 51px; margin-top: 17px; border: 0; border-radius: 17px; background: linear-gradient(135deg, #43cdf8, var(--primary)); color: #fff; font-size: 13px; font-weight: 950; letter-spacing: .045em; text-transform: uppercase; cursor: pointer; box-shadow: 0 12px 28px rgb(29 174 237 / 24%); }
.action-button--secondary { background: #edf8fd; color: var(--primary-dark); box-shadow: none; }
.action-button--danger { background: linear-gradient(135deg, #ff7373, var(--danger)); }
.security-note { margin-top: 14px; padding: 12px 13px; border-radius: 15px; background: #f2f8fb; color: #7a8a9b; font-size: 11px; line-height: 1.45; }

.summary-card { padding: 17px; display: flex; align-items: center; justify-content: space-between; border-radius: 20px; background: linear-gradient(145deg, #e5f8ff, #f8fdff); border: 1px solid #cbeefd; }
.summary-card span { color: var(--muted); font-size: 11px; font-weight: 800; text-transform: uppercase; }
.summary-card strong { display: block; margin-top: 2px; color: var(--primary-dark); font-size: 20px; }
.summary-card b { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 15px; background: #fff; color: var(--primary); }

.reward-podium { padding: 20px 10px 12px; display: grid; grid-template-columns: repeat(4, 1fr); align-items: end; gap: 7px; text-align: center; }
.podium-place { padding: 12px 4px; border-radius: 17px 17px 10px 10px; background: #eef6fb; }
.podium-place:nth-child(1) { min-height: 125px; background: linear-gradient(#fff4ba, #ffd54a); }
.podium-place:nth-child(2) { min-height: 105px; }
.podium-place:nth-child(3) { min-height: 90px; background: #fff1e8; }
.podium-place:nth-child(4) { min-height: 78px; }
.podium-place span { display: block; font-size: 22px; }
.podium-place strong { display: block; margin-top: 7px; font-size: 12px; }
.podium-place small { color: #69788a; font-size: 9px; }

.history-list { display: grid; gap: 10px; }
.history-card { padding: 15px; border: 1px solid var(--line); border-radius: 19px; background: #fff; }
.history-card__head { display: flex; justify-content: space-between; align-items: center; }
.history-card__head strong { font-size: 12px; }
.status-pill { padding: 5px 8px; border-radius: 999px; background: #e9f9ef; color: #20a55a; font-size: 9px; font-weight: 950; }
.status-pill--lost { background: #fff0f0; color: var(--danger); }
.history-card dl { margin: 12px 0 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.history-card dt { color: #9aa8b8; font-size: 9px; text-transform: uppercase; }
.history-card dd { margin: 2px 0 0; font-size: 11px; font-weight: 850; }

.referral-link { padding: 12px; display: grid; grid-template-columns: 1fr auto; gap: 8px; border-radius: 16px; background: #f2f8fb; }
.referral-link code { align-self: center; overflow: hidden; color: #5e6f82; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.referral-link button { border: 0; border-radius: 12px; padding: 0 11px; background: #fff; color: var(--primary); font-size: 11px; font-weight: 900; cursor: pointer; }
.referral-stats { margin: 15px 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; }
.referral-stat { padding: 13px; border: 1px solid var(--line); border-radius: 16px; }
.referral-stat span { display: block; color: var(--muted); font-size: 9px; text-transform: uppercase; }
.referral-stat strong { font-size: 17px; }

.memory-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.memory-card { aspect-ratio: 1; border: 0; border-radius: 15px; background: linear-gradient(145deg, var(--primary-dark), var(--primary)); color: transparent; font-size: 22px; cursor: pointer; transform-style: preserve-3d; transition: transform .25s, background .25s; }
.memory-card.is-flipped, .memory-card.is-matched { background: #eefbff; color: inherit; transform: rotateY(180deg); }
.memory-card.is-matched { box-shadow: inset 0 0 0 2px #45ca82; }

.game-modal { position: relative; width: min(920px, calc(100vw - 18px)); height: min(820px, calc(100dvh - 18px)); overflow: hidden; overscroll-behavior: none; border: 1px solid rgb(255 255 255 / 24%); border-radius: 34px; color: #fff; background: linear-gradient(180deg, #061d4c 0%, #087bc5 50%, #d9f6ff 100%); box-shadow: 0 35px 100px rgb(0 12 44 / 45%); isolation: isolate; }
.game-modal::before { content: ""; position: absolute; z-index: 0; inset: 36% -12% -18%; background: linear-gradient(155deg, transparent 38%, rgb(255 255 255 / 86%) 39% 54%, transparent 55%), linear-gradient(205deg, transparent 32%, rgb(215 246 255 / 82%) 33% 55%, transparent 56%); opacity: .68; }
.game-top { position: relative; z-index: 30; min-height: 72px; padding: 14px 18px; display: flex; align-items: center; justify-content: space-between; }
.game-top__stats { display: flex; gap: 7px; }
.game-stat { padding: 8px 11px; border: 1px solid rgb(255 255 255 / 22%); border-radius: 13px; background: rgb(5 31 67 / 42%); backdrop-filter: blur(10px); }
.game-stat span { display: block; color: rgb(255 255 255 / 65%); font-size: 8px; text-transform: uppercase; }
.game-stat strong { font-size: 13px; }
.game-top .icon-button { border-color: rgb(255 255 255 / 24%); background: rgb(0 0 0 / 18%); color: #fff; }
.game-stage { position: absolute; z-index: 2; inset: 72px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 24px; text-align: center; }
.game-stage:not(.game-stage--world) { overflow-y: auto; }
.game-stage__eyebrow { margin: 0; color: #8eeeff; font-size: 11px; font-weight: 950; letter-spacing: .16em; }
.game-stage h2 { margin: 6px 0; font-size: 34px; letter-spacing: -.05em; text-shadow: 0 4px 16px rgb(0 20 55 / 30%); }
.game-stage__copy { max-width: 310px; margin: 0; color: rgb(255 255 255 / 76%); font-size: 13px; line-height: 1.48; }
.mascot-wrap { position: relative; width: 230px; height: 265px; margin: 8px auto -4px; display: grid; place-items: center; }
.mascot-wrap::after { content: ""; position: absolute; bottom: 20px; width: 130px; height: 22px; border-radius: 50%; background: rgb(0 33 88 / 28%); filter: blur(7px); }
.mascot-wrap img { position: relative; z-index: 1; max-width: 190px; max-height: 270px; object-fit: contain; filter: drop-shadow(0 18px 18px rgb(0 26 74 / 25%)); }
.mascot-wrap--clean { width: 190px; height: 190px; margin: 18px auto 8px; }
.mascot-wrap--clean::after { bottom: 5px; }
.mascot-wrap--clean img { width: 168px; height: 168px; border-radius: 50%; }
.stake-chips { width: min(100%, 570px); margin-top: 8px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.stake-chips button { border-color: rgb(255 255 255 / 23%); background: rgb(5 42 90 / 40%); color: #fff; backdrop-filter: blur(8px); }
.stake-chips button:disabled { opacity: .38; cursor: not-allowed; }
.game-start { width: min(100%, 570px); min-height: 54px; margin-top: 10px; border: 1px solid rgb(255 255 255 / 50%); border-radius: 18px; background: linear-gradient(135deg, #4ae7ff, #13a9ee); color: #fff; font-weight: 950; letter-spacing: .05em; text-transform: uppercase; cursor: pointer; box-shadow: 0 14px 32px rgb(0 72 132 / 32%); }
.game-start:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; filter: saturate(.45); }
.game-demo-label { margin-top: 9px; color: rgb(255 255 255 / 62%); font-size: 9px; font-weight: 850; text-transform: uppercase; }

.game-stage--world { inset: 72px 0 0; display: block; padding: 0; text-align: initial; }
.game-world { position: absolute; inset: 0; overflow: hidden; background: radial-gradient(ellipse at 50% 2%, rgb(255 255 255 / 74%) 0 4%, transparent 28%), linear-gradient(180deg, #148dd6 0%, #5bc8ec 30%, #c7eff8 31%, #eefcff 100%); outline: none; touch-action: none; user-select: none; -webkit-user-select: none; }
.game-world:focus-visible { box-shadow: inset 0 0 0 4px rgb(115 239 255 / 78%); }
.game-world::before, .game-world::after { content: ""; position: absolute; z-index: 1; top: 21%; width: 44%; height: 44%; background: rgb(241 252 255 / 94%); filter: drop-shadow(0 7px 0 rgb(139 210 231 / 42%)); }
.game-world::before { left: -18%; transform: rotate(26deg); }
.game-world::after { right: -18%; transform: rotate(-26deg); }
.game-sky { position: absolute; z-index: 0; inset: 0; color: rgb(255 255 255 / 58%); font-size: 18px; }
.game-sky span { position: absolute; animation: game-sparkle 2.8s ease-in-out infinite; }
.game-sky span:nth-child(1) { top: 7%; left: 14%; }
.game-sky span:nth-child(2) { top: 12%; right: 17%; animation-delay: -.9s; }
.game-sky span:nth-child(3) { top: 26%; left: 26%; animation-delay: -1.7s; }
.game-track { position: absolute; z-index: 2; inset: 23% 0 0; overflow: hidden; clip-path: polygon(43% 0, 57% 0, 100% 100%, 0 100%); background: linear-gradient(90deg, #c4eaf3 0 2%, #f9feff 3% 48%, #d9f4fa 50%, #f9feff 52% 97%, #c4eaf3 98%); box-shadow: inset 0 0 50px rgb(40 155 196 / 18%); }
.game-track i { position: absolute; top: -40%; width: 4px; height: 180%; background: repeating-linear-gradient(180deg, rgb(75 181 216 / 38%) 0 18px, transparent 18px 42px); transform-origin: top; }
.game-track i:nth-child(1) { left: 8%; transform: rotate(11deg); }
.game-track i:nth-child(2) { left: 29%; transform: rotate(6deg); }
.game-track i:nth-child(3) { left: 50%; }
.game-track i:nth-child(4) { left: 71%; transform: rotate(-6deg); }
.game-track i:nth-child(5) { left: 92%; transform: rotate(-11deg); }
.is-running .game-track i { animation: track-scroll .42s linear infinite; }
.game-scenery { position: absolute; z-index: 3; inset: 25% 0 0; pointer-events: none; }
.game-scenery span { position: absolute; font-size: clamp(22px, 5vw, 50px); filter: drop-shadow(0 8px 5px rgb(31 119 153 / 20%)); }
.game-scenery span:nth-child(1) { top: 18%; left: 3%; }
.game-scenery span:nth-child(2) { top: 4%; left: 27%; color: #fff; }
.game-scenery span:nth-child(3) { top: 28%; right: 3%; }
.game-scenery span:nth-child(4) { top: 2%; right: 25%; color: #fff; }

.game-hud { position: absolute; z-index: 18; inset: 9px 12px auto; display: grid; grid-template-columns: minmax(102px, 1fr) minmax(170px, 1.4fr) minmax(102px, 1fr); align-items: start; gap: 9px; pointer-events: none; }
.game-hud__chip, .game-goal { min-height: 53px; padding: 8px 11px; border: 1px solid rgb(255 255 255 / 42%); border-radius: 14px; background: rgb(2 41 92 / 68%); color: #fff; box-shadow: 0 8px 22px rgb(0 35 78 / 18%); backdrop-filter: blur(9px); }
.game-hud__chip span, .game-goal > span { display: block; color: #9cecff; font-size: 8px; font-weight: 950; letter-spacing: .1em; }
.game-hud__chip strong, .game-goal strong { display: block; margin-top: 2px; font-size: clamp(12px, 2vw, 17px); font-variant-numeric: tabular-nums; }
.game-hud__chip--right { text-align: right; }
.game-goal { text-align: center; }
.game-goal i { height: 5px; margin-top: 6px; display: block; overflow: hidden; border-radius: 999px; background: rgb(255 255 255 / 18%); }
.game-goal b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #50ecff, #55f19c); box-shadow: 0 0 12px #58e8f8; transition: width .18s ease-out; }

.game-entities { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.game-entity { position: absolute; left: 50%; top: 16%; display: grid; place-items: center; will-change: left, top, transform; filter: drop-shadow(0 8px 5px rgb(0 48 76 / 28%)); }
.game-entity--coin { width: 42px; height: 42px; border: 4px solid #fff0a8; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fffab8 0 10%, #ffc720 32%, #e89000 75%); color: #9f5d00; font-size: 21px; font-weight: 1000; box-shadow: inset 0 0 0 3px rgb(174 93 0 / 22%), 0 0 18px rgb(255 211 37 / 72%); }
.game-entity--diamond { color: #5ff4ff; font-size: 42px; text-shadow: 0 0 4px #fff, 0 0 18px #00bade; }
.game-entity--rock, .game-entity--log, .game-entity--snowman { font-size: 44px; }
.game-entity--lake { width: 74px; height: 34px; border: 3px solid rgb(255 255 255 / 70%); border-radius: 50%; background: radial-gradient(ellipse, #0c91c9, #7adcf1 64%, #e5fbff 68%); color: #fff; font-size: 18px; }
.game-entity--spike { width: 52px; height: 43px; color: #dffbff; font-size: 44px; text-shadow: 0 4px 0 #79c9dd, 0 0 10px #fff; }

.game-slingshot { position: absolute; z-index: 8; inset: 0; pointer-events: none; }
.game-slingshot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.game-slingshot line { stroke: #8f4f25; stroke-width: 1.8; stroke-linecap: round; filter: drop-shadow(0 2px 1px rgb(0 0 0 / 24%)); }
.game-sling-post { position: absolute; top: 61%; width: 20px; height: 92px; border: 4px solid #7a421e; border-radius: 12px 12px 8px 8px; background: linear-gradient(90deg, #8a4b24, #d78c46 48%, #6c3518); box-shadow: 0 10px 12px rgb(0 38 62 / 25%); }
.game-sling-post--left { left: calc(42% - 10px); transform: rotate(-8deg); }
.game-sling-post--right { left: calc(58% - 10px); transform: rotate(8deg); }

.game-player { --player-lean: 0deg; position: absolute; z-index: 11; left: 50%; top: 69%; width: clamp(76px, 12vw, 104px); aspect-ratio: 1; padding: 0; border: 0; border-radius: 50%; background: transparent; cursor: grab; touch-action: none; transform: translate(-50%, -50%) rotate(var(--player-lean)); transition: left .07s linear, transform .07s linear; filter: drop-shadow(0 13px 8px rgb(0 58 87 / 28%)); }
.game-player.is-grabbed { cursor: grabbing; transition: none; }
.game-player img { position: absolute; z-index: 2; inset: 3% 11% auto; width: 78%; height: 78%; border-radius: 50%; pointer-events: none; -webkit-user-drag: none; }
.game-player__sled { position: absolute; z-index: 1; left: 6%; bottom: 5%; width: 88%; height: 33%; border: 3px solid #75f1f3; border-radius: 50% 50% 44% 44%; background: linear-gradient(180deg, #1ed3d1, #087caa); box-shadow: inset 0 4px rgb(255 255 255 / 35%), 0 7px 0 #075a83; transform: perspective(60px) rotateX(23deg); }
.is-running .game-player { animation: game-player-glide .8s ease-in-out infinite; }
.is-crashing .game-player { animation: game-crash .8s ease-in forwards; }
.is-sinking .game-player { animation: game-sink .8s ease-in forwards; }

.game-power { position: absolute; z-index: 14; left: 50%; bottom: 86px; width: min(280px, 64%); transform: translateX(-50%); text-align: center; }
.game-power > span { display: block; margin-bottom: 5px; color: #0d5a85; font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.game-power i { height: 10px; padding: 2px; display: block; overflow: hidden; border-radius: 999px; background: rgb(4 58 92 / 28%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 18%); }
.game-power b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #34cffa, #4ce98e, #ffcf3e, #ff6c5f); }
.game-instruction { position: absolute; z-index: 15; left: 50%; bottom: 22px; width: min(440px, 88%); margin: 0; padding: 10px 14px; border: 1px solid rgb(255 255 255 / 58%); border-radius: 15px; background: rgb(2 55 92 / 68%); text-align: center; transform: translateX(-50%); backdrop-filter: blur(8px); pointer-events: none; }
.game-instruction strong, .game-instruction span { display: block; }
.game-instruction strong { font-size: 11px; letter-spacing: .08em; }
.game-instruction span { margin-top: 2px; color: rgb(255 255 255 / 76%); font-size: 10px; }
.is-running .game-instruction, .is-crashing .game-instruction, .is-sinking .game-instruction { top: 74px; bottom: auto; width: min(340px, 64%); }

.game-cashout { position: absolute; z-index: 22; left: 50%; bottom: 57px; min-width: min(330px, 78%); min-height: 58px; padding: 8px 25px; border: 2px solid rgb(255 255 255 / 72%); border-radius: 18px; background: linear-gradient(135deg, #34d36e, #0baf55); color: #fff; cursor: pointer; transform: translateX(-50%); box-shadow: 0 12px 32px rgb(4 119 56 / 38%), inset 0 1px rgb(255 255 255 / 35%); animation: cashout-in .32s ease-out; }
.game-cashout span, .game-cashout strong { display: block; }
.game-cashout span { font-size: 10px; font-weight: 950; letter-spacing: .09em; }
.game-cashout strong { font-size: 18px; }
.game-cashout:disabled { opacity: .6; cursor: wait; }
.game-run-stats { position: absolute; z-index: 16; right: 12px; bottom: 14px; left: 12px; display: flex; justify-content: space-between; gap: 8px; color: #0d5a85; font-size: 11px; font-weight: 900; pointer-events: none; }
.game-run-stats span { min-width: 72px; padding: 7px 9px; border: 1px solid rgb(255 255 255 / 74%); border-radius: 12px; background: rgb(255 255 255 / 62%); text-align: center; box-shadow: 0 5px 14px rgb(16 102 136 / 13%); backdrop-filter: blur(7px); }
.game-demo-label--world { position: absolute; z-index: 15; right: 0; bottom: 2px; left: 0; margin: 0; color: rgb(4 74 108 / 55%); text-align: center; pointer-events: none; }
.is-pulsing { animation: hud-pulse .28s ease-out; }

.game-stage--result { overflow-y: auto; justify-content: flex-start; padding: 18px 24px 28px; }
.game-result { width: min(100%, 570px); margin-top: auto; padding: 22px; border: 1px solid rgb(255 255 255 / 34%); border-radius: 24px; background: rgb(0 30 75 / 48%); text-align: center; box-shadow: 0 24px 60px rgb(0 31 75 / 22%); backdrop-filter: blur(14px); }
.game-result__icon { display: block; font-size: 38px; }
.game-result > p { margin: 5px 0 2px; color: #83edff; font-size: 10px; font-weight: 950; letter-spacing: .15em; }
.game-result h2 { margin: 4px 0 8px; font-size: clamp(18px, 4vw, 27px); letter-spacing: -.025em; }
.game-result > strong { display: block; color: #8dffbd; font-size: clamp(27px, 5vw, 40px); }
.game-result--lost > strong { color: #fff; font-size: 20px; }
.game-result dl { margin: 18px 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.game-result dl div { padding: 10px 5px; border: 1px solid rgb(255 255 255 / 16%); border-radius: 13px; background: rgb(255 255 255 / 8%); }
.game-result dt { color: rgb(255 255 255 / 59%); font-size: 8px; text-transform: uppercase; }
.game-result dd { margin: 4px 0 0; font-size: 12px; font-weight: 900; }
.game-result__balance { margin-top: 12px; padding: 11px 14px; display: flex; justify-content: space-between; border-radius: 14px; background: rgb(255 255 255 / 10%); font-size: 12px; }
.game-result__loss-note { margin: 10px 0 0; color: #d9f6ff; font-size: 11px; }
.game-result__actions { width: min(100%, 570px); margin-top: 4px; }
.game-result__actions .action-button { margin-top: 8px; }
.game-text-button { min-height: 44px; margin-top: 5px; padding: 0 20px; border: 0; background: transparent; color: rgb(255 255 255 / 74%); font-size: 11px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.game-stage--result > .game-demo-label { margin-bottom: auto; }

.toast { position: fixed; z-index: 1500; left: 50%; bottom: 24px; width: min(360px, calc(100% - 32px)); padding: 14px 16px; border: 1px solid rgb(255 255 255 / 72%); border-radius: 16px; background: rgb(19 40 65 / 94%); color: #fff; font-size: 12px; line-height: 1.4; box-shadow: 0 18px 45px rgb(0 18 43 / 30%); transform: translateX(-50%); animation: toast-in .25s ease-out; }

.bottom-nav {
  position: absolute;
  z-index: 30;
  inset: auto 0 0;
  height: calc(74px + env(safe-area-inset-bottom));
  padding: 7px 15px env(safe-area-inset-bottom);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  align-items: center;
  background: rgb(255 255 255 / 96%);
  border-top: 1px solid var(--line);
  backdrop-filter: blur(18px);
  box-shadow: 0 -12px 38px rgb(21 76 112 / 9%);
}
.nav-item { min-height: 54px; border: 0; background: transparent; color: #a6b2bf; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; }
.nav-item > span { font-size: 22px; font-weight: 800; line-height: 1; }
.nav-item small { font-size: 10px; font-weight: 850; text-transform: uppercase; }
.nav-item.is-active { color: var(--primary); transform: scale(1.04); }
.diamond-button { width: 58px; height: 58px; justify-self: center; border: 5px solid #e9f9ff; border-radius: 50%; background: radial-gradient(circle at 38% 30%, #dfffff, #42c8f6 45%, #0e94dd); box-shadow: 0 12px 28px rgb(29 174 237 / 36%); cursor: pointer; transform: translateY(-13px); }
.diamond-button span { display: block; font-size: 22px; animation: diamond-float 2.4s ease-in-out infinite; }

@keyframes pulse-cta { 0%,100% { transform: scale(1); } 50% { transform: scale(1.035); } }
@keyframes diamond-float { 0%,100% { transform: translateY(1px) rotate(-7deg); } 50% { transform: translateY(-2px) rotate(7deg); } }
@keyframes overlay-in { from { opacity: 0; } }
@keyframes modal-in { from { opacity: 0; transform: translateY(16px) scale(.98); } }
@keyframes drawer-in { from { transform: translateX(100%); } }
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 12px); } }
@keyframes track-scroll { to { background-position-y: 42px; } }
@keyframes game-sparkle { 0%,100% { opacity: .28; transform: scale(.75); } 50% { opacity: 1; transform: scale(1.12); } }
@keyframes game-player-glide { 0%,100% { margin-top: 0; } 50% { margin-top: -5px; } }
@keyframes game-crash { 30% { transform: translate(-50%, -50%) rotate(18deg) scale(1.05); } 100% { transform: translate(-50%, 70%) rotate(110deg) scale(.7); opacity: .15; } }
@keyframes game-sink { to { transform: translate(-50%, 60%) scale(.5); opacity: 0; } }
@keyframes hud-pulse { 50% { color: #fff58f; transform: scale(1.16); } }
@keyframes cashout-in { from { opacity: 0; transform: translate(-50%, 12px) scale(.96); } }

@media (max-width: 390px) {
  .brand__wordmark { display: none; }
  .hero__media { height: 292px; }
  .mission-card__content { width: 82%; }
  .section-heading { align-items: flex-start; }
  .game-modal { width: 100vw; height: 100dvh; border: 0; border-radius: 0; }
  .game-top { min-height: 66px; padding: 10px 12px; }
  .game-stage, .game-stage--world { top: 66px; }
  .game-stat { padding: 7px 8px; }
  .game-stat:nth-child(2) { display: none; }
  .game-hud { grid-template-columns: 92px 1fr 88px; gap: 5px; inset-inline: 6px; }
  .game-hud__chip, .game-goal { padding: 7px 6px; }
  .game-hud__chip strong, .game-goal strong { font-size: 11px; }
  .game-stage { padding-inline: 16px; }
  .game-stage--world { padding: 0; }
  .mascot-wrap--clean { width: 142px; height: 142px; margin: 8px auto 3px; }
  .mascot-wrap--clean img { width: 126px; height: 126px; }
  .stake-chips { gap: 5px; }
  .stake-chips button { min-height: 41px; font-size: 11px; }
  .game-result { padding: 17px 13px; }
  .game-result dl { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 391px) and (max-width: 460px) {
  .game-hud { grid-template-columns: minmax(0, 92px) minmax(0, 1fr) minmax(0, 88px); gap: 5px; inset-inline: 6px; }
  .game-hud__chip, .game-goal { min-width: 0; padding: 7px 6px; }
  .game-hud__chip strong, .game-goal strong { font-size: 11px; }
}

@media (max-height: 600px) {
  .game-stage:not(.game-stage--world):not(.game-stage--result) { justify-content: flex-start; padding-top: 7px; }
  .game-stage__eyebrow { font-size: 9px; }
  .game-stage h2 { margin-block: 3px; font-size: 24px; }
  .game-stage__copy { font-size: 11px; }
  .mascot-wrap--clean { width: 82px; height: 82px; margin: 3px auto; }
  .mascot-wrap--clean img { width: 72px; height: 72px; }
  .stake-chips button { min-height: 38px; }
  .game-start { min-height: 46px; }
}

@media (min-width: 700px) {
  .overlay--drawer { justify-content: center; padding-left: min(50vw, 448px); }
  .drawer { height: min(820px, calc(100dvh - 30px)); border: 1px solid var(--line); border-radius: 30px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; transition-duration: .01ms !important; }
}

/* Polar Rush 3D */
.overlay--game {
  display: block;
  padding: 0;
  overflow: hidden;
  background: #eaf2f7;
}

.overlay--game .game-modal {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100dvh;
  max-width: none;
  max-height: none;
  overflow: hidden;
  border: 0;
  border-radius: 0;
  background: #eaf2f7;
  box-shadow: none;
  color: #15345c;
  isolation: isolate;
}

.overlay--game .game-modal::before { display: none; }

.game-menu-scene {
  position: absolute;
  z-index: 0;
  inset: 0;
  background: #edf3f7 url("/assets/slingshot.jpg") center 42% / cover no-repeat;
  transform: scale(1.025);
  filter: saturate(.88) contrast(.92);
}

.game-menu-scene::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgb(212 235 248 / 16%), rgb(21 70 117 / 33%));
  backdrop-filter: blur(1.5px);
}

.overlay--game .game-stage {
  position: absolute;
  z-index: 2;
  inset: 0;
  padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}

.game-stage--menu {
  display: grid;
  place-items: center;
  overflow-y: auto;
}

.game-menu-card {
  position: relative;
  width: min(384px, 100%);
  max-height: calc(100dvh - 28px);
  padding: 30px 32px 25px;
  overflow-y: auto;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 24px;
  background: rgb(255 255 255 / 90%);
  box-shadow: 0 24px 75px rgb(27 64 99 / 27%), inset 0 1px rgb(255 255 255 / 90%);
  color: #163a65;
  text-align: center;
  backdrop-filter: blur(18px) saturate(1.1);
}

.game-close {
  position: absolute;
  z-index: 25;
  top: 13px;
  right: 13px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgb(80 121 155 / 18%);
  border-radius: 50%;
  background: rgb(255 255 255 / 68%);
  color: #7690a8;
  font-size: 16px;
  font-weight: 800;
  cursor: pointer;
  backdrop-filter: blur(10px);
}

.game-close--world {
  position: fixed;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  right: max(14px, calc(env(safe-area-inset-right) + 8px));
  background: rgb(255 255 255 / 72%);
  color: #254a6c;
  box-shadow: 0 8px 24px rgb(37 77 111 / 13%);
}

.game-audio-controls {
  position: fixed;
  z-index: 26;
  top: max(76px, calc(env(safe-area-inset-top) + 68px));
  right: max(14px, calc(env(safe-area-inset-right) + 8px));
  display: grid;
  gap: 8px;
}
.game-sound {
  position: relative;
  width: 42px;
  height: 42px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid rgb(80 121 155 / 22%);
  border-radius: 50%;
  background: rgb(255 255 255 / 76%);
  color: #315a79;
  font-size: 20px;
  font-weight: 950;
  cursor: pointer;
  box-shadow: 0 8px 24px rgb(37 77 111 / 13%);
  backdrop-filter: blur(10px);
  touch-action: manipulation;
}
.game-sound::after {
  content: "";
  position: absolute;
  right: 1px;
  bottom: 1px;
  width: 9px;
  height: 9px;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #f59e5b;
  box-shadow: 0 1px 5px rgb(15 49 74 / 25%);
}
.game-sound.is-audible { color: #087c6e; background: rgb(240 255 251 / 88%); }
.game-sound.is-audible::after { background: #16c784; }
.game-sound.is-muted { color: #7c8e9f; background: rgb(240 244 247 / 82%); }
.game-sound.is-muted::after { background: #9aa8b4; }
.game-music.is-audible { color: #6e45b9; background: rgb(248 243 255 / 90%); }
.game-music.is-audible::after { background: #9a63e7; }
.game-sound:not(.is-muted)[data-audio-state="blocked"],
.game-sound:not(.is-muted)[data-audio-state="unsupported"] { color: #a34646; animation: game-sound-attention 1.15s ease-in-out infinite; }
.game-sound:not(.is-muted)[data-audio-state="blocked"]::after,
.game-sound:not(.is-muted)[data-audio-state="unsupported"]::after { background: #ef6258; }

.game-menu-balance { margin-top: 4px; }
.game-menu-balance span,
.game-menu-best span,
.game-menu-label {
  display: block;
  margin: 0;
  color: #8292a3;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
}
.game-menu-balance strong {
  display: block;
  margin-top: 5px;
  color: #20aceb;
  font-size: clamp(28px, 4vw, 36px);
  font-weight: 950;
  letter-spacing: -.045em;
  font-variant-numeric: tabular-nums;
}
.game-menu-best { margin-top: 7px; color: #64809a; font-size: 12px; }
.game-menu-best span { display: inline; margin-right: 6px; font-size: 9px; }
.game-menu-best b { font-size: 12px; }
.game-menu-divider { width: 48px; height: 3px; margin: 20px auto 18px; border-radius: 99px; background: #d9edf7; }
.game-menu-label { margin-bottom: 10px; color: #25496c; text-align: left; }

.overlay--game .stake-chips {
  width: 100%;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
}
.overlay--game .stake-chips button {
  min-width: 0;
  min-height: 43px;
  padding: 0 5px;
  border: 2px solid #edf2f6;
  border-radius: 13px;
  background: #fff;
  color: #8a98a8;
  font-size: 12px;
  font-weight: 900;
  cursor: pointer;
  box-shadow: none;
  transition: transform .16s ease, border-color .16s ease, color .16s ease, background .16s ease;
}
.overlay--game .stake-chips button:hover:not(:disabled) { transform: translateY(-1px); border-color: #a7e1f8; color: #159edc; }
.overlay--game .stake-chips button.is-active {
  border-color: #1daeed;
  background: #eefaff;
  color: #0ba3e6;
  transform: scale(1.045);
  box-shadow: 0 7px 18px rgb(29 174 237 / 14%);
}
.overlay--game .stake-chips button:disabled { opacity: .35; cursor: not-allowed; }

.game-menu-rule {
  margin: 15px 4px 0;
  color: #75899d;
  font-size: 12px;
  line-height: 1.45;
}

.overlay--game .game-start {
  width: 100%;
  min-height: 60px;
  margin-top: 18px;
  border: 1px solid rgb(255 255 255 / 65%);
  border-radius: 28px;
  background: linear-gradient(135deg, #3bc9f4, #159fe1);
  color: #fff;
  font-size: 15px;
  font-weight: 950;
  letter-spacing: .13em;
  text-transform: uppercase;
  cursor: pointer;
  box-shadow: 0 14px 30px rgb(16 154 216 / 27%), inset 0 1px rgb(255 255 255 / 42%);
}

.game-menu-link {
  width: 100%;
  min-height: 46px;
  margin-top: 10px;
  border: 0;
  border-radius: 17px;
  background: rgb(215 243 252 / 58%);
  color: #1f5c7d;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  cursor: pointer;
}
.game-menu-link--muted { margin-top: 6px; background: transparent; color: #9aa6b2; }
.game-menu-card .game-demo-label { display: block; margin-top: 12px; color: #a5afb9; font-size: 9px; letter-spacing: .08em; }

.game-stage--world { display: block; padding: 0 !important; }
.game-world--3d {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #eaf2f7;
  outline: none;
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
  cursor: grab;
}
.game-world--3d::before,
.game-world--3d::after { content: none; display: none; }
.game-world--3d:active { cursor: grabbing; }
.game-world--3d:focus-visible { box-shadow: inset 0 0 0 4px rgb(29 174 237 / 70%); }
.game-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.game-color-shift {
  position: absolute;
  z-index: 2;
  inset: 0;
  background: #fff;
  opacity: 0;
  mix-blend-mode: difference;
  pointer-events: none;
  transition: opacity .18s ease;
}
.is-color-trap .game-color-shift { opacity: 1; }

.game-loading {
  position: absolute;
  z-index: 30;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: rgb(225 238 247 / 64%);
  color: #fff;
  text-shadow: 0 2px 14px rgb(31 61 88 / 48%);
  backdrop-filter: blur(2px);
}
.game-loading[hidden] { display: none; }
.game-loading__mountain { width: 78px; height: 78px; display: grid; place-items: center; border-radius: 50%; background: rgb(255 255 255 / 86%); color: #45aacd; font-size: 38px; text-shadow: none; box-shadow: 0 14px 35px rgb(41 86 117 / 20%); }
.game-loading strong { font-size: 20px; font-weight: 950; letter-spacing: -.02em; }
.game-loading > i { width: min(200px, 45vw); height: 5px; overflow: hidden; border-radius: 99px; background: rgb(255 255 255 / 35%); }
.game-loading > i b { display: block; width: 45%; height: 100%; border-radius: inherit; background: #fff; animation: game-loading-bar 1.2s ease-in-out infinite; }
.game-loading > span:last-child { color: #274f6e; font-size: 13px; text-shadow: none; }

.game-hud--3d {
  position: absolute;
  z-index: 18;
  top: max(14px, calc(env(safe-area-inset-top) + 8px));
  right: max(66px, calc(env(safe-area-inset-right) + 58px));
  left: max(14px, calc(env(safe-area-inset-left) + 8px));
  display: grid;
  grid-template-columns: 145px minmax(230px, 1fr) 128px;
  align-items: start;
  gap: 12px;
  pointer-events: none;
}
.game-hud__left { width: 145px; display: flex; flex-direction: column; align-items: stretch; gap: 7px; }
.game-hud--3d .game-hud__chip,
.game-hud--3d .game-goal,
.game-hud__diamonds {
  min-height: 57px;
  padding: 10px 14px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 17px;
  background: rgb(255 255 255 / 72%);
  color: #193e63;
  box-shadow: 0 10px 28px rgb(37 76 108 / 13%);
  backdrop-filter: blur(12px) saturate(1.1);
}
.game-hud--3d .game-hud__chip span,
.game-hud--3d .game-goal > span {
  display: block;
  color: #7790a5;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .13em;
}
.game-hud--3d .game-hud__chip strong,
.game-hud--3d .game-goal strong {
  display: block;
  margin-top: 3px;
  color: #173f68;
  font-size: clamp(14px, 1.6vw, 20px);
  font-weight: 950;
  font-variant-numeric: tabular-nums;
}
.game-hud--3d .game-hud__chip--right { width: 128px; justify-self: end; text-align: right; }
.game-hud--3d .game-goal { width: min(320px, 100%); justify-self: center; text-align: center; }
.game-hud--3d .game-goal i { height: 6px; margin-top: 7px; display: block; overflow: hidden; border-radius: 99px; background: rgb(57 104 137 / 13%); }
.game-hud--3d .game-goal b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #19aee9, #31d58a); box-shadow: 0 0 12px rgb(34 194 218 / 45%); transition: width .2s ease-out; }
.game-hud__diamonds { width: 100%; min-width: 0; min-height: 48px; display: flex; align-items: center; justify-content: flex-start; gap: 8px; padding-inline: 13px; color: #10bce8; }
.game-hud__diamonds span { color: #1dd8f2; font-size: 19px; text-shadow: 0 0 12px rgb(25 191 232 / 58%); }
.game-hud__diamonds strong { font-size: 14px; font-variant-numeric: tabular-nums; }

.game-powerups {
  position: absolute;
  z-index: 23;
  top: max(139px, calc(env(safe-area-inset-top) + 130px));
  left: max(14px, calc(env(safe-area-inset-left) + 8px));
  max-width: 220px;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.game-traps {
  position: absolute;
  z-index: 23;
  top: max(178px, calc(env(safe-area-inset-top) + 169px));
  right: max(14px, calc(env(safe-area-inset-right) + 8px));
  max-width: 220px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-items: flex-start;
  gap: 8px;
  pointer-events: none;
}
.game-powerup {
  --bonus: #af7cff;
  --bonus-glow: rgb(124 77 255 / 48%);
  width: 66px;
  display: grid;
  justify-items: center;
  gap: 6px;
  color: #183f63;
  transform-origin: center;
}
.game-powerup[hidden] { display: none; }
.game-powerup--boost { --bonus: #ffba42; --bonus-glow: rgb(255 157 28 / 52%); }
.game-powerup--jump { --bonus: #33daf4; --bonus-glow: rgb(22 188 232 / 50%); }
.game-powerup--intangible { --bonus: #a894ff; --bonus-glow: rgb(133 108 255 / 55%); }
.game-powerup--slowmo { --bonus: #5ee7ff; --bonus-glow: rgb(54 206 244 / 54%); }
.game-powerup--revive { --bonus: #ffda63; --bonus-glow: rgb(255 196 47 / 62%); }
.game-powerup--revive.is-timed-persistent { --bonus: #6cf4ff; --bonus-glow: rgb(66 222 255 / 68%); }
.game-powerup--trap { --bonus: #ff7468; --bonus-glow: rgb(255 79 65 / 52%); }
.game-powerup--color-trap { --bonus: #d78cff; --bonus-glow: rgb(183 82 255 / 48%); }
.game-powerup--controls-trap { --bonus: #ffb242; --bonus-glow: rgb(255 145 29 / 48%); }
.game-powerup__dial {
  position: relative;
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 25%), transparent 29%), linear-gradient(145deg, #245778, #102c48);
  box-shadow: 0 10px 24px rgb(17 45 68 / 31%), 0 0 19px var(--bonus-glow), inset 0 1px rgb(255 255 255 / 25%);
}
.game-powerup__ring { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; transform: rotate(-90deg); }
.game-powerup__ring-track,
.game-powerup__ring-value { fill: none; stroke-width: 4; }
.game-powerup__ring-track { stroke: rgb(255 255 255 / 18%); }
.game-powerup__ring-value { stroke: var(--bonus); stroke-dasharray: 100; stroke-dashoffset: 0; stroke-linecap: round; filter: drop-shadow(0 0 3px var(--bonus-glow)); transition: stroke-dashoffset .09s linear; }
.game-powerup__glyph { width: 29px; height: 29px; fill: none; stroke: #fff; stroke-width: 2.15; stroke-linecap: round; stroke-linejoin: round; filter: drop-shadow(0 2px 4px rgb(0 0 0 / 28%)); }
.game-powerup__glyph--filled { fill: #fff; stroke: none; }
.game-powerup__symbol { position: relative; z-index: 1; color: #fff; font-size: 29px; font-weight: 950; line-height: 1; text-shadow: 0 3px 8px rgb(0 0 0 / 28%), 0 0 13px var(--bonus-glow); }
.game-powerup time,
.game-powerup__ready {
  position: absolute;
  left: 50%;
  bottom: -7px;
  min-width: 41px;
  padding: 2px 5px;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 999px;
  background: rgb(255 255 255 / 95%);
  color: #234761;
  box-shadow: 0 3px 8px rgb(20 48 69 / 23%);
  font-size: 9px;
  font-weight: 950;
  font-variant-numeric: tabular-nums;
  line-height: 1.25;
  text-align: center;
  transform: translateX(-50%);
}
.game-powerup__ready { color: #8b5c00; letter-spacing: .03em; }
.game-powerup > strong { max-width: 72px; color: #173e61; font-size: 8px; font-weight: 950; line-height: 1.05; letter-spacing: .035em; text-align: center; text-shadow: 0 1px 3px #fff, 0 0 9px #fff; }
.game-powerup.is-active { animation: powerup-token-in .38s cubic-bezier(.16,1,.3,1) both; }
.game-powerup.is-leaving { animation: powerup-token-out .2s ease-in both; }
.game-powerup--magnet.is-active .game-powerup__glyph { animation: powerup-glyph-pulse .9s ease-in-out infinite; }
.game-powerup--magnet.is-active .game-powerup__symbol,
.game-powerup--intangible.is-active .game-powerup__symbol,
.game-powerup--slowmo.is-active .game-powerup__symbol { animation: powerup-glyph-pulse .9s ease-in-out infinite; }
.game-powerup--revive.is-active .game-powerup__dial { animation: revive-token-ready 1.35s ease-in-out infinite; }
.game-powerup--revive.is-active .game-powerup__symbol { animation: revive-token-cross 1.35s ease-in-out infinite; }
.game-powerup--revive.is-timed-persistent .game-powerup__dial { background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 32%), transparent 29%), linear-gradient(145deg, #177c94, #113a63); }
.game-powerup--revive.is-timed-persistent .game-powerup__symbol { animation: revive-shield-pulse .7s ease-in-out infinite alternate; }
.game-powerup.is-consuming { z-index: 4; animation: revive-token-consume .55s cubic-bezier(.2,.8,.2,1) both; }
.game-powerup--trap .game-powerup__dial { background: radial-gradient(circle at 34% 28%, rgb(255 255 255 / 22%), transparent 29%), linear-gradient(145deg, #5f2430, #261827); }
.game-powerup--trap > strong { color: #7e2c32; text-shadow: 0 1px 3px #fff, 0 0 9px #fff; }
.game-powerup.is-ending .game-powerup__dial { animation: powerup-ending .46s ease-in-out infinite alternate; }
.game-powerup--trap.is-active:not(.is-ending) .game-powerup__dial { animation: trap-token-pulse 1.05s ease-in-out infinite; }
.game-powerup--color-trap.is-active .game-powerup__symbol { animation: trap-color-symbol 1.1s linear infinite; }
.game-powerup--speed-trap.is-active .game-powerup__symbol { animation: trap-speed-symbol .56s ease-in-out infinite alternate; }
.game-powerup--controls-trap.is-active .game-powerup__symbol { animation: trap-controls-symbol .72s ease-in-out infinite; }

.game-aim-ui[hidden] { display: none; }
.is-aiming .game-hud--3d,
.is-aiming .game-powerups,
.is-aiming .game-traps,
.is-aiming .game-speed,
.is-aiming .game-coin-count { opacity: 0; visibility: hidden; }
.game-power {
  position: absolute;
  z-index: 22;
  left: 50%;
  bottom: max(116px, calc(env(safe-area-inset-bottom) + 102px));
  width: min(285px, 66vw);
  transform: translateX(-50%);
  text-align: center;
  pointer-events: none;
}
.game-power > span { display: block; margin-bottom: 6px; color: #315f80; font-size: 10px; font-weight: 950; letter-spacing: .16em; }
.game-power i { height: 11px; padding: 2px; display: block; overflow: hidden; border-radius: 99px; background: rgb(24 67 96 / 26%); box-shadow: inset 0 1px 3px rgb(0 0 0 / 13%); }
.game-power b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #23c7f3, #48dc87, #ffd43b, #fb6b57); transition: width .04s linear; }
.game-instruction {
  position: absolute;
  z-index: 21;
  left: 50%;
  bottom: max(28px, calc(env(safe-area-inset-bottom) + 18px));
  width: min(430px, calc(100vw - 34px));
  margin: 0;
  padding: 13px 20px;
  border: 1px solid rgb(255 255 255 / 78%);
  border-radius: 17px;
  background: rgb(255 255 255 / 82%);
  color: #234f73;
  text-align: center;
  transform: translateX(-50%);
  box-shadow: 0 14px 36px rgb(31 65 92 / 20%);
  backdrop-filter: blur(12px);
  pointer-events: none;
}
.game-instruction strong,
.game-instruction span { display: block; }
.game-instruction strong { color: #16a9e7; font-size: 11px; font-weight: 950; letter-spacing: .2em; }
.game-instruction span { margin-top: 4px; color: #173f68; font-size: 14px; font-weight: 800; }

.game-speed,
.game-coin-count {
  position: absolute;
  z-index: 17;
  bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px));
  min-width: 82px;
  padding: 9px 12px;
  border: 1px solid rgb(255 255 255 / 72%);
  border-radius: 15px;
  background: rgb(255 255 255 / 62%);
  color: #244e70;
  text-align: center;
  box-shadow: 0 8px 22px rgb(33 73 105 / 10%);
  backdrop-filter: blur(10px);
  pointer-events: none;
}
.game-speed { right: max(16px, calc(env(safe-area-inset-right) + 10px)); }
.game-speed strong { display: block; font-size: 21px; font-variant-numeric: tabular-nums; line-height: 1; }
.game-speed span { display: block; margin-top: 2px; color: #738da2; font-size: 9px; font-weight: 900; letter-spacing: .1em; }
.game-coin-count { left: max(16px, calc(env(safe-area-inset-left) + 10px)); display: flex; align-items: center; justify-content: center; gap: 7px; }
.game-coin-count span { width: 20px; height: 20px; display: grid; place-items: center; border: 3px solid #ffdf59; border-radius: 50%; background: #f8b900; color: transparent; box-shadow: inset 0 0 0 2px #de8f00, 0 0 10px rgb(255 192 0 / 35%); }
.game-coin-count strong { font-size: 16px; font-variant-numeric: tabular-nums; }

.game-cashout {
  position: absolute;
  z-index: 26;
  left: 50%;
  bottom: max(25px, calc(env(safe-area-inset-bottom) + 15px));
  min-width: min(340px, calc(100vw - 190px));
  min-height: 62px;
  padding: 8px 27px;
  border: 2px solid rgb(255 255 255 / 82%);
  border-radius: 20px;
  background: linear-gradient(135deg, #32d56e, #0ba755);
  color: #fff;
  cursor: pointer;
  transform: translateX(-50%);
  box-shadow: 0 14px 36px rgb(7 135 67 / 34%), inset 0 1px rgb(255 255 255 / 34%);
  animation: cashout-3d-in .38s cubic-bezier(.2,.9,.25,1.2);
}
.game-cashout span,
.game-cashout strong { display: block; }
.game-cashout span { font-size: 10px; font-weight: 950; letter-spacing: .12em; }
.game-cashout strong { margin-top: 2px; font-size: 19px; }
.game-cashout.is-confirming { pointer-events: none; animation: cashout-confirm .42s cubic-bezier(.2,.85,.25,1.2) both; }

.is-cashing-out .game-hud--3d,
.is-cashing-out .game-powerups,
.is-cashing-out .game-traps,
.is-cashing-out .game-speed,
.is-cashing-out .game-coin-count,
.is-cashing-out .game-event,
.is-cashing-out .game-demo-label--world,
.is-cashing-out .game-close--world,
.is-cashing-out .game-audio-controls {
  opacity: 0;
  pointer-events: none;
  transition: opacity .28s ease;
}
.is-cashing-out .game-cashout { opacity: 0; transform: translate(-50%, -18px) scale(.9); transition: opacity .24s ease .2s, transform .24s ease .2s; }

.game-cashout-celebration {
  position: absolute;
  z-index: 34;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 55%, rgb(255 241 125 / 52%), transparent 35%), linear-gradient(rgb(17 66 92 / 12%), rgb(8 54 78 / 48%));
  backdrop-filter: blur(3px) saturate(.88);
  pointer-events: none;
  animation: withdraw-flash 1.95s ease-out both;
}
.game-cashout-celebration__rays {
  position: absolute;
  left: 50%;
  top: 52%;
  width: min(760px, 120vw);
  aspect-ratio: 1;
  border-radius: 50%;
  background: repeating-conic-gradient(from 0deg, rgb(255 242 135 / 0%) 0deg 10deg, rgb(255 242 135 / 24%) 10deg 17deg);
  opacity: .75;
  transform: translate(-50%, -50%);
  animation: withdraw-rays 9s linear infinite, withdraw-rays-in .72s ease-out both;
}
.game-cashout-celebration__halo {
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(470px, 80vw);
  aspect-ratio: 1;
  border: 4px solid rgb(255 239 118 / 62%);
  border-radius: 50%;
  box-shadow: 0 0 0 18px rgb(87 236 204 / 13%), 0 0 80px rgb(255 219 71 / 48%);
  animation: withdraw-halo 1.45s .18s ease-out both;
}
.game-cashout-celebration__card {
  position: relative;
  z-index: 2;
  width: min(390px, calc(100vw - 42px));
  padding: 35px 28px 25px;
  border: 1px solid rgb(255 255 255 / 92%);
  border-radius: 26px;
  background: rgb(255 255 255 / 91%);
  color: #173f68;
  text-align: center;
  box-shadow: 0 28px 80px rgb(19 70 94 / 35%), inset 0 1px rgb(255 255 255 / 90%);
  backdrop-filter: blur(16px) saturate(1.25);
  animation: withdraw-card .66s .12s cubic-bezier(.16,1,.3,1) both;
}
.game-cashout-celebration__card::after {
  content: "";
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  background: linear-gradient(108deg, transparent 31%, rgb(255 255 255 / 74%) 47%, transparent 62%);
  transform: translateX(-115%);
  animation: withdraw-sheen .72s .56s ease-out both;
  pointer-events: none;
}
.game-cashout-celebration__badge {
  position: static;
  min-width: 150px;
  margin: -2px auto 11px;
  padding: 7px 14px;
  display: table;
  border: 3px solid #fff;
  border-radius: 99px;
  background: linear-gradient(135deg, #ffd84b, #ffae24);
  color: #744600;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .14em;
  box-shadow: 0 8px 18px rgb(148 96 4 / 22%);
}
.game-cashout-celebration__check {
  width: 66px;
  height: 66px;
  margin: -69px auto 13px;
  display: grid;
  place-items: center;
  border: 5px solid #fff;
  border-radius: 50%;
  background: linear-gradient(145deg, #42df83, #0aad59);
  color: #fff;
  font-size: 34px;
  font-weight: 950;
  box-shadow: 0 13px 28px rgb(7 152 73 / 35%);
  animation: withdraw-check .62s .74s cubic-bezier(.2,1.35,.35,1) both;
}
.game-cashout-celebration__card p { margin: 0; color: #12a65b; font-size: 11px; font-weight: 950; letter-spacing: .16em; }
.game-cashout-celebration__card strong { display: block; margin-top: 7px; color: #0eaa58; font-size: clamp(34px, 6vw, 49px); font-variant-numeric: tabular-nums; letter-spacing: -.035em; line-height: 1.08; text-shadow: 0 8px 22px rgb(14 170 88 / 18%); }
.game-cashout-celebration__card small { margin: 13px auto 0; padding: 7px 11px; display: inline-flex; align-items: center; gap: 6px; border-radius: 99px; background: #edf9f2; color: #577467; font-size: 11px; font-weight: 850; }
.game-cashout-celebration__card small span { width: 17px; height: 17px; display: grid; place-items: center; border-radius: 50%; background: #1cc469; color: #fff; font-size: 10px; }
.game-cashout-celebration.is-complete .game-cashout-celebration__card { animation: withdraw-complete .46s cubic-bezier(.2,.9,.25,1.2) both; }
.game-cashout-celebration.is-complete .game-cashout-celebration__check { box-shadow: 0 0 0 15px rgb(34 206 114 / 0%), 0 13px 28px rgb(7 152 73 / 35%); transition: box-shadow .55s ease-out; }
.game-cashout-celebration__coins { position: absolute; z-index: 3; inset: 0; }
.game-cashout-celebration__coins i {
  --x: 0vw;
  --y: 36vh;
  --d: 0s;
  position: absolute;
  left: 50%;
  top: 53%;
  width: 21px;
  height: 21px;
  border: 4px solid #ffe46a;
  border-radius: 50%;
  background: #f2b400;
  opacity: 0;
  box-shadow: inset 0 0 0 2px #cf8500, 0 0 17px rgb(255 208 44 / 68%);
  animation: withdraw-coin 1.05s var(--d) cubic-bezier(.2,.75,.25,1) both;
}
.game-cashout-celebration__coins i:nth-child(1) { --x: -42vw; --y: 31vh; --d: .02s; }
.game-cashout-celebration__coins i:nth-child(2) { --x: -32vw; --y: -36vh; --d: .14s; }
.game-cashout-celebration__coins i:nth-child(3) { --x: -17vw; --y: 43vh; --d: .24s; }
.game-cashout-celebration__coins i:nth-child(4) { --x: -9vw; --y: -44vh; --d: .08s; }
.game-cashout-celebration__coins i:nth-child(5) { --x: 12vw; --y: 45vh; --d: .18s; }
.game-cashout-celebration__coins i:nth-child(6) { --x: 24vw; --y: -42vh; --d: .28s; }
.game-cashout-celebration__coins i:nth-child(7) { --x: 41vw; --y: 28vh; --d: .1s; }
.game-cashout-celebration__coins i:nth-child(8) { --x: 45vw; --y: -19vh; --d: .22s; }
.game-cashout-celebration__coins i:nth-child(9) { --x: -45vw; --y: -13vh; --d: .3s; }
.game-cashout-celebration__coins i:nth-child(10) { --x: 5vw; --y: -47vh; --d: .34s; }
.game-cashout-celebration__sparks { position: absolute; inset: 0; }
.game-cashout-celebration__sparks i {
  --x: 0px;
  --y: -180px;
  --d: 0s;
  position: absolute;
  left: 50%;
  top: 52%;
  width: 11px;
  height: 11px;
  border-radius: 3px;
  background: #ffe25e;
  opacity: 0;
  box-shadow: 0 0 12px currentColor;
  animation: withdraw-spark 1.05s var(--d) cubic-bezier(.2,.7,.2,1) both;
}
.game-cashout-celebration__sparks i:nth-child(2n) { border-radius: 50%; background: #55e6cf; }
.game-cashout-celebration__sparks i:nth-child(3n) { background: #fff; }
.game-cashout-celebration__sparks i:nth-child(1) { --x: -225px; --y: -155px; --d: .04s; }
.game-cashout-celebration__sparks i:nth-child(2) { --x: -150px; --y: -225px; --d: .12s; }
.game-cashout-celebration__sparks i:nth-child(3) { --x: -55px; --y: -245px; --d: .01s; }
.game-cashout-celebration__sparks i:nth-child(4) { --x: 65px; --y: -240px; --d: .1s; }
.game-cashout-celebration__sparks i:nth-child(5) { --x: 170px; --y: -205px; --d: .03s; }
.game-cashout-celebration__sparks i:nth-child(6) { --x: 230px; --y: -115px; --d: .14s; }
.game-cashout-celebration__sparks i:nth-child(7) { --x: -235px; --y: 55px; --d: .16s; }
.game-cashout-celebration__sparks i:nth-child(8) { --x: -165px; --y: 155px; --d: .08s; }
.game-cashout-celebration__sparks i:nth-child(9) { --x: -55px; --y: 205px; --d: .18s; }
.game-cashout-celebration__sparks i:nth-child(10) { --x: 65px; --y: 195px; --d: .06s; }
.game-cashout-celebration__sparks i:nth-child(11) { --x: 175px; --y: 145px; --d: .15s; }
.game-cashout-celebration__sparks i:nth-child(12) { --x: 235px; --y: 35px; --d: .02s; }

.game-event {
  position: absolute;
  z-index: 24;
  top: max(105px, calc(env(safe-area-inset-top) + 96px));
  left: 50%;
  min-width: min(360px, calc(100vw - 38px));
  padding: 12px 20px;
  border: 1px solid rgb(255 255 255 / 80%);
  border-radius: 18px;
  background: rgb(18 58 88 / 78%);
  color: #fff;
  text-align: center;
  opacity: 0;
  transform: translate(-50%, -12px) scale(.96);
  box-shadow: 0 16px 38px rgb(23 55 82 / 24%);
  backdrop-filter: blur(12px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.game-event.is-visible { opacity: 1; transform: translate(-50%, 0) scale(1); }
.game-event strong,
.game-event span { display: block; }
.game-event strong { color: #74edff; font-size: 13px; font-weight: 950; letter-spacing: .13em; }
.game-event span { margin-top: 3px; font-size: 12px; }

.game-trap-warning {
  --trap-accent: #ff6f61;
  position: absolute;
  z-index: 32;
  top: 50%;
  left: 50%;
  width: min(470px, calc(100vw - 36px));
  min-height: 138px;
  padding: 22px 24px;
  display: grid;
  grid-template-columns: 78px 1fr;
  align-items: center;
  gap: 18px;
  overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--trap-accent) 48%, white);
  border-radius: 24px;
  background: linear-gradient(135deg, rgb(20 23 43 / 93%), rgb(72 22 37 / 91%));
  color: #fff;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.82);
  box-shadow: 0 30px 90px rgb(5 10 30 / 54%), 0 0 55px color-mix(in srgb, var(--trap-accent) 24%, transparent), inset 0 1px rgb(255 255 255 / 18%);
  backdrop-filter: blur(14px) saturate(1.15);
  pointer-events: none;
  transition: opacity .2s ease, transform .34s cubic-bezier(.16,1,.3,1);
}
.game-trap-warning[hidden] { display: none; }
.game-trap-warning.is-visible { opacity: 1; transform: translate(-50%, -50%) scale(1); }
.game-trap-warning--color { --trap-accent: #c98bff; }
.game-trap-warning--speed { --trap-accent: #ff6558; }
.game-trap-warning--controls { --trap-accent: #ffb03d; }
.game-trap-warning__burst { position: absolute; top: 50%; left: 50%; width: 125px; height: 125px; border: 3px solid var(--trap-accent); border-radius: 50%; opacity: 0; transform: translate(-50%, -50%); animation: trap-warning-burst .82s ease-out both; }
.game-trap-warning__icon { position: relative; z-index: 1; width: 72px; height: 72px; display: grid; place-items: center; border: 3px solid rgb(255 255 255 / 72%); border-radius: 22px; background: linear-gradient(145deg, color-mix(in srgb, var(--trap-accent) 85%, white), var(--trap-accent)); color: #fff; font-size: 40px; font-weight: 950; box-shadow: 0 12px 28px color-mix(in srgb, var(--trap-accent) 34%, transparent); transform: rotate(-5deg); }
.game-trap-warning > div { position: relative; z-index: 1; }
.game-trap-warning small { display: block; color: color-mix(in srgb, var(--trap-accent) 42%, white); font-size: 10px; font-weight: 950; letter-spacing: .2em; }
.game-trap-warning strong { display: block; margin-top: 4px; font-size: clamp(21px, 4vw, 30px); line-height: 1.05; }
.game-trap-warning p { margin: 7px 0 0; color: rgb(255 255 255 / 72%); font-size: 12px; line-height: 1.35; }
.game-trap-warning time { margin-top: 8px; display: inline-flex; align-items: center; gap: 7px; padding: 4px 9px; border: 1px solid color-mix(in srgb, var(--trap-accent) 45%, transparent); border-radius: 999px; background: color-mix(in srgb, var(--trap-accent) 16%, transparent); color: #fff; font-variant-numeric: tabular-nums; }
.game-trap-warning time b { font-size: 13px; }
.game-trap-warning time span { color: color-mix(in srgb, var(--trap-accent) 38%, white); font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.game-trap-warning.is-visible .game-trap-warning__icon { animation: trap-warning-icon 1.55s cubic-bezier(.16,1,.3,1) both; }
.is-speed-trap .game-speed { border-color: rgb(255 100 85 / 65%); color: #b62424; box-shadow: 0 8px 22px rgb(168 35 30 / 17%), 0 0 24px rgb(255 86 70 / 22%); }
.game-world--3d.is-controls-trap { cursor: ew-resize; }

.game-revive-transition {
  position: absolute;
  z-index: 35;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 57%, rgb(255 222 99 / 35%), transparent 31%), linear-gradient(rgb(5 44 68 / 8%), rgb(5 42 66 / 46%));
  opacity: 1;
  backdrop-filter: blur(1.5px) saturate(1.08);
  pointer-events: none;
  transition: opacity .38s ease;
  animation: revive-overlay-in .32s ease-out both;
}
.game-revive-transition.is-complete { opacity: 0; }
.game-revive-transition__aurora { position: absolute; inset: -35%; background: conic-gradient(from 45deg, transparent, rgb(102 232 249 / 20%), transparent 34%, rgb(255 220 99 / 24%), transparent 68%); filter: blur(24px); animation: revive-aurora 2.2s linear infinite; }
.game-revive-transition__rings { position: absolute; top: 54%; left: 50%; width: min(340px, 72vw); aspect-ratio: 1; transform: translate(-50%, -50%); }
.game-revive-transition__rings i { position: absolute; inset: 0; border: 3px solid rgb(255 224 112 / 78%); border-radius: 50%; opacity: 0; box-shadow: 0 0 34px rgb(255 205 62 / 36%); animation: revive-ring 1.3s ease-out infinite; }
.game-revive-transition__rings i:nth-child(2) { animation-delay: .2s; }
.game-revive-transition__rings i:nth-child(3) { animation-delay: .4s; }
.game-revive-transition__card { position: relative; z-index: 2; width: min(390px, calc(100vw - 38px)); padding: 25px 26px 22px; border: 1px solid rgb(255 232 143 / 72%); border-radius: 25px; background: linear-gradient(145deg, rgb(15 63 81 / 88%), rgb(10 41 70 / 92%)); color: #fff; text-align: center; box-shadow: 0 28px 80px rgb(0 30 54 / 38%), 0 0 58px rgb(255 208 67 / 28%), inset 0 1px rgb(255 255 255 / 22%); animation: revive-card-in .62s cubic-bezier(.16,1,.3,1) both; }
.game-revive-transition__icon { width: 68px; height: 68px; margin: -57px auto 12px; display: grid; place-items: center; border: 4px solid rgb(255 255 255 / 88%); border-radius: 50%; background: linear-gradient(145deg, #fff7c2, #ffc83d); color: #8b5a00; font-size: 39px; font-weight: 950; box-shadow: 0 14px 35px rgb(255 196 47 / 42%); animation: revive-icon-pop .72s cubic-bezier(.16,1,.3,1) both; }
.game-revive-transition__card small { display: block; color: #7cecff; font-size: 10px; font-weight: 950; letter-spacing: .2em; }
.game-revive-transition__card strong { display: block; margin-top: 5px; color: #ffe47f; font-size: clamp(28px, 5vw, 38px); line-height: 1.05; text-shadow: 0 0 22px rgb(255 204 57 / 34%); }
.game-revive-transition__card p { margin: 8px 0 0; color: rgb(255 255 255 / 78%); font-size: 12px; line-height: 1.4; }
.is-reviving .game-canvas { animation: revive-camera 1.65s ease-in-out both; }
.is-reviving .game-hud--3d,
.is-reviving .game-traps,
.is-reviving .game-event { opacity: .25; transition: opacity .2s ease; }

.game-crash-transition {
  --crash-accent: #ff7569;
  position: absolute;
  z-index: 34;
  inset: 0;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: radial-gradient(circle at 50% 57%, rgb(112 213 255 / 20%), transparent 28%), linear-gradient(rgb(5 28 52 / 12%), rgb(5 26 49 / 76%));
  pointer-events: none;
  animation: crash-overlay-in .52s ease-out both;
}
.game-crash-transition--lake { --crash-accent: #5de0ff; background: linear-gradient(rgb(16 81 113 / 12%), rgb(1 42 71 / 82%)); }
.game-crash-transition__pulse {
  position: absolute;
  left: 50%;
  top: 53%;
  width: min(240px, 56vw);
  aspect-ratio: 1;
  border: 3px solid color-mix(in srgb, var(--crash-accent) 64%, white);
  border-radius: 50%;
  box-shadow: 0 0 0 18px color-mix(in srgb, var(--crash-accent) 12%, transparent), 0 0 80px color-mix(in srgb, var(--crash-accent) 36%, transparent);
  animation: crash-pulse 1.25s .08s ease-out both;
}
.game-crash-transition__panel {
  position: relative;
  z-index: 2;
  width: min(390px, calc(100vw - 38px));
  padding: 26px 26px 23px;
  border: 1px solid rgb(255 255 255 / 26%);
  border-radius: 25px;
  background: rgb(10 38 66 / 78%);
  color: #fff;
  text-align: center;
  box-shadow: 0 28px 80px rgb(0 18 39 / 42%), inset 0 1px rgb(255 255 255 / 18%);
  backdrop-filter: blur(17px) saturate(1.1);
  animation: crash-panel-in .56s .12s cubic-bezier(.16,1,.3,1) both;
}
.game-crash-transition__panel::before { content: ""; position: absolute; top: 0; right: 22%; left: 22%; height: 2px; border-radius: 99px; background: linear-gradient(90deg, transparent, var(--crash-accent), transparent); box-shadow: 0 0 20px var(--crash-accent); animation: crash-scan 1.1s .2s ease-out both; }
.game-crash-transition__icon { width: 62px; height: 62px; margin: -58px auto 14px; display: grid; place-items: center; border: 4px solid rgb(255 255 255 / 88%); border-radius: 50%; background: linear-gradient(145deg, color-mix(in srgb, var(--crash-accent) 78%, white), var(--crash-accent)); font-size: 32px; font-weight: 950; box-shadow: 0 14px 32px color-mix(in srgb, var(--crash-accent) 32%, transparent); }
.game-crash-transition__panel p { margin: 0; color: color-mix(in srgb, var(--crash-accent) 55%, white); font-size: 10px; font-weight: 950; letter-spacing: .18em; }
.game-crash-transition__panel strong { display: block; margin-top: 5px; font-size: clamp(26px, 5vw, 36px); line-height: 1.1; }
.game-crash-transition__panel small { display: block; margin-top: 9px; color: rgb(255 255 255 / 67%); font-size: 12px; }
.game-crash-transition__snow { position: absolute; inset: 0; }
.game-crash-transition__snow i { --sx: 50%; --delay: 0s; position: absolute; top: -8%; left: var(--sx); width: 7px; height: 7px; border-radius: 50%; background: #fff; opacity: 0; box-shadow: 0 0 11px rgb(173 235 255 / 80%); animation: crash-snow 1.45s var(--delay) ease-in both; }
.game-crash-transition__snow i:nth-child(1) { --sx: 7%; --delay: .04s; }
.game-crash-transition__snow i:nth-child(2) { --sx: 18%; --delay: .22s; }
.game-crash-transition__snow i:nth-child(3) { --sx: 29%; --delay: .1s; }
.game-crash-transition__snow i:nth-child(4) { --sx: 39%; --delay: .31s; }
.game-crash-transition__snow i:nth-child(5) { --sx: 48%; --delay: .16s; }
.game-crash-transition__snow i:nth-child(6) { --sx: 59%; --delay: .01s; }
.game-crash-transition__snow i:nth-child(7) { --sx: 69%; --delay: .26s; }
.game-crash-transition__snow i:nth-child(8) { --sx: 78%; --delay: .12s; }
.game-crash-transition__snow i:nth-child(9) { --sx: 88%; --delay: .34s; }
.game-crash-transition__snow i:nth-child(10) { --sx: 96%; --delay: .2s; }
.is-crashing .game-canvas { animation: crash-camera .48s ease-out both; }
.is-sinking .game-canvas { animation: lake-camera 1.5s ease-in both; }
.is-crashing .game-powerups,
.is-sinking .game-powerups,
.is-crashing .game-traps,
.is-sinking .game-traps { opacity: 0; transform: translateY(-10px); transition: opacity .2s ease, transform .2s ease; }

.game-demo-label--world {
  position: absolute;
  z-index: 15;
  right: 0;
  bottom: 3px;
  left: 0;
  margin: 0;
  color: rgb(28 75 105 / 46%);
  font-size: 9px;
  font-weight: 850;
  letter-spacing: .06em;
  text-align: center;
  text-transform: uppercase;
  pointer-events: none;
}
.is-launching .game-demo-label--world,
.is-running .game-demo-label--world { opacity: .6; }

.overlay--game .game-stage--result {
  position: absolute;
  inset: 0;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  overflow-y: auto;
  background: linear-gradient(180deg, rgb(216 235 247 / 32%), rgb(35 83 122 / 37%));
  color: #173b61;
}
.game-result-ambience { position: fixed; z-index: -1; inset: 0; overflow: hidden; pointer-events: none; }
.game-result-ambience i { --x: 50%; --s: 18px; --d: 0s; position: absolute; bottom: -45px; left: var(--x); width: var(--s); height: var(--s); border: 1px solid rgb(137 225 255 / 50%); background: linear-gradient(145deg, rgb(255 255 255 / 37%), rgb(61 185 230 / 14%)); opacity: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); filter: drop-shadow(0 0 12px rgb(82 208 248 / 40%)); animation: result-crystal-float 4.8s var(--d) ease-in-out infinite; }
.game-result-ambience i:nth-child(1) { --x: 8%; --s: 28px; --d: -.8s; }
.game-result-ambience i:nth-child(2) { --x: 21%; --s: 13px; --d: -3.1s; }
.game-result-ambience i:nth-child(3) { --x: 36%; --s: 21px; --d: -1.7s; }
.game-result-ambience i:nth-child(4) { --x: 53%; --s: 15px; --d: -4.1s; }
.game-result-ambience i:nth-child(5) { --x: 69%; --s: 24px; --d: -2.4s; }
.game-result-ambience i:nth-child(6) { --x: 84%; --s: 16px; --d: -.2s; }
.game-result-ambience i:nth-child(7) { --x: 94%; --s: 31px; --d: -3.6s; }
.overlay--game .game-stage--result-lost {
  position: absolute;
  isolation: isolate;
  background: radial-gradient(circle at 50% 29%, rgb(69 191 232 / 30%), transparent 28%), linear-gradient(160deg, #071f3b, #123b5d 54%, #0b2947);
  color: #fff;
}
.overlay--game .game-stage--result-lost::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: radial-gradient(circle at 15% 20%, rgb(255 255 255 / 12%) 0 2px, transparent 3px), radial-gradient(circle at 83% 34%, rgb(255 255 255 / 10%) 0 3px, transparent 4px), radial-gradient(circle at 63% 82%, rgb(97 218 255 / 12%) 0 3px, transparent 4px);
  background-size: 130px 130px, 180px 180px, 210px 210px;
  animation: result-snow-drift 12s linear infinite;
}
.overlay--game .game-result {
  width: min(570px, 100%);
  margin: auto 0 0;
  padding: 24px;
  border: 1px solid rgb(255 255 255 / 82%);
  border-radius: 25px;
  background: rgb(255 255 255 / 88%);
  color: #173b61;
  box-shadow: 0 26px 70px rgb(21 61 94 / 25%);
  backdrop-filter: blur(18px);
}
.overlay--game .game-result--win { animation: result-pop .52s cubic-bezier(.16,1,.3,1) both; }
.overlay--game .game-result--win .game-result__icon { animation: trophy-bounce .72s .08s cubic-bezier(.2,1.35,.35,1) both; }
.overlay--game .game-result--win dl div { animation: stat-rise .36s .18s ease-out both; }
.overlay--game .game-result--win dl div:nth-child(2) { animation-delay: .24s; }
.overlay--game .game-result--win dl div:nth-child(3) { animation-delay: .3s; }
.overlay--game .game-result--win dl div:nth-child(4) { animation-delay: .36s; }
.overlay--game .game-result--lost {
  position: relative;
  overflow: hidden;
  border-color: rgb(102 220 255 / 30%);
  background: linear-gradient(145deg, rgb(11 45 76 / 92%), rgb(18 59 88 / 84%));
  color: #fff;
  box-shadow: 0 30px 90px rgb(0 13 34 / 48%), inset 0 1px rgb(255 255 255 / 15%);
  animation: gameover-card-in .62s cubic-bezier(.16,1,.3,1) both;
}
.overlay--game .game-result--lost::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 50% 0, rgb(90 218 255 / 17%), transparent 35%); pointer-events: none; }
.overlay--game .game-result__emblem { position: relative; width: 82px; height: 82px; margin: -2px auto 7px; display: grid; place-items: center; }
.overlay--game .game-result__emblem::before,
.overlay--game .game-result__emblem i { content: ""; position: absolute; inset: 4px; border: 1px solid rgb(104 225 255 / 44%); border-radius: 50%; }
.overlay--game .game-result__emblem::before { animation: gameover-ring 1.6s .18s ease-out infinite; }
.overlay--game .game-result__emblem i { inset: 12px; background: linear-gradient(145deg, rgb(113 226 255 / 33%), rgb(23 114 164 / 24%)); box-shadow: 0 0 35px rgb(62 202 245 / 25%); }
.overlay--game .game-result__emblem span { position: relative; z-index: 2; font-size: 36px; filter: drop-shadow(0 8px 12px rgb(0 20 42 / 36%)); animation: gameover-emblem-in .7s .1s cubic-bezier(.2,1.3,.35,1) both; }
.overlay--game .game-result--lost > p { position: relative; color: #77e6ff; }
.overlay--game .game-result--lost h2 { position: relative; margin-top: 6px; color: #fff; font-size: clamp(24px, 4.5vw, 32px); }
.overlay--game .game-result h2:focus { outline: none; }
.overlay--game .game-result__loss { position: relative; margin: 17px 0 0; padding: 14px 18px; border: 1px solid rgb(255 130 116 / 27%); border-radius: 17px; background: linear-gradient(115deg, rgb(255 117 105 / 16%), rgb(255 255 255 / 5%)); animation: gameover-loss-in .45s .2s ease-out both; }
.overlay--game .game-result__loss span,
.overlay--game .game-result__loss strong,
.overlay--game .game-result__loss small { display: block; }
.overlay--game .game-result__loss span { color: #ffc6be; font-size: 9px; font-weight: 950; letter-spacing: .14em; }
.overlay--game .game-result__loss strong { margin-top: 3px; color: #ff8d7d; font-size: clamp(27px, 5vw, 38px); font-variant-numeric: tabular-nums; line-height: 1.05; }
.overlay--game .game-result__loss small { margin-top: 5px; color: rgb(255 255 255 / 60%); font-size: 10px; }
.overlay--game .game-result--lost dl div { border-color: rgb(111 217 245 / 17%); background: rgb(255 255 255 / 7%); animation: stat-rise .38s .32s ease-out both; }
.overlay--game .game-result--lost dl div:nth-child(2) { animation-delay: .39s; }
.overlay--game .game-result--lost dl div:nth-child(3) { animation-delay: .46s; }
.overlay--game .game-result--lost dl div:nth-child(4) { animation-delay: .53s; }
.overlay--game .game-result--lost dt { color: rgb(191 229 242 / 58%); }
.overlay--game .game-result--lost dd { color: #fff; }
.overlay--game .game-result--lost .game-result__balance { position: relative; border: 1px solid rgb(104 224 255 / 15%); background: rgb(4 29 55 / 38%); color: #c5edfa; }
.overlay--game .game-result--lost .game-result__balance b { color: #fff; }
.overlay--game .game-result--lost .game-result__loss-note { position: relative; color: rgb(210 239 247 / 68%); }
.overlay--game .game-stage--result-lost .game-result__actions { animation: result-actions-in .45s .48s ease-out both; }
.overlay--game .game-result__icon { font-size: 42px; }
.overlay--game .game-result > p { color: #18aee9; }
.overlay--game .game-result h2 { color: #173b61; }
.overlay--game .game-result > strong { color: #13a85a; }
.overlay--game .game-result--lost > strong { color: #7b8fa2; }
.overlay--game .game-result dl div { border-color: #dceaf3; background: rgb(236 247 252 / 76%); }
.overlay--game .game-result dt { color: #7d91a4; }
.overlay--game .game-result dd { color: #1f4568; }
.overlay--game .game-result__balance { background: #edf8fc; color: #315877; }
.overlay--game .game-result__loss-note { color: #6e8396; }
.overlay--game .game-stage--result-lost .game-result--lost h2 { color: #fff; text-shadow: 0 5px 22px rgb(0 14 34 / 36%); }
.overlay--game .game-stage--result-lost .game-result--lost dl div { border-color: rgb(111 217 245 / 17%); background: rgb(255 255 255 / 7%); }
.overlay--game .game-stage--result-lost .game-result--lost dt { color: rgb(191 229 242 / 58%); }
.overlay--game .game-stage--result-lost .game-result--lost dd { color: #fff; }
.overlay--game .game-result__actions { width: min(570px, 100%); margin: 0 0 auto; }
.overlay--game .game-result__actions .action-button--secondary { border-color: rgb(255 255 255 / 75%); background: rgb(255 255 255 / 82%); color: #245272; }
.overlay--game .game-text-button { color: rgb(255 255 255 / 88%); }
.overlay--game .game-stage--result > .game-demo-label { color: rgb(255 255 255 / 72%); }

@keyframes game-loading-bar {
  0% { transform: translateX(-115%); }
  55%, 100% { transform: translateX(250%); }
}
@keyframes game-sound-attention {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 24px rgb(37 77 111 / 13%); }
  50% { transform: scale(1.08); box-shadow: 0 0 0 7px rgb(239 98 88 / 13%), 0 9px 25px rgb(37 77 111 / 18%); }
}
@keyframes trap-token-pulse {
  0%, 100% { transform: scale(1); box-shadow: 0 10px 24px rgb(17 45 68 / 31%), 0 0 14px var(--bonus-glow), inset 0 1px rgb(255 255 255 / 25%); }
  50% { transform: scale(1.075); box-shadow: 0 12px 28px rgb(17 45 68 / 36%), 0 0 27px var(--bonus-glow), inset 0 1px rgb(255 255 255 / 34%); }
}
@keyframes trap-color-symbol { to { transform: rotate(360deg); filter: hue-rotate(360deg); } }
@keyframes trap-speed-symbol { from { transform: translateX(-3px) scaleX(.82); } to { transform: translateX(3px) scaleX(1.16); } }
@keyframes trap-controls-symbol { 0%, 100% { transform: rotateY(0); } 50% { transform: rotateY(180deg); } }
@keyframes trap-warning-icon {
  0% { opacity: 0; transform: rotate(-18deg) scale(.35); }
  24% { opacity: 1; transform: rotate(7deg) scale(1.13); }
  52% { transform: rotate(-5deg) scale(1); }
  78% { transform: rotate(3deg) scale(1.06); }
  100% { transform: rotate(-3deg) scale(1); }
}
@keyframes cashout-3d-in {
  from { opacity: 0; transform: translate(-50%, 16px) scale(.92); }
}
@keyframes cashout-confirm {
  45% { transform: translateX(-50%) scale(1.08); box-shadow: 0 0 0 12px rgb(61 221 124 / 18%), 0 18px 44px rgb(7 135 67 / 42%); }
}
@keyframes withdraw-flash {
  0% { opacity: 0; }
  12%, 82% { opacity: 1; }
  100% { opacity: .92; }
}
@keyframes withdraw-rays { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes withdraw-sheen { to { transform: translateX(115%); } }
@keyframes withdraw-rays-in { from { opacity: 0; scale: .55; } }
@keyframes withdraw-halo {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.18); }
  42% { opacity: 1; }
  to { opacity: 0; transform: translate(-50%, -50%) scale(1.35); }
}
@keyframes withdraw-card {
  from { opacity: 0; transform: translateY(30px) scale(.82); }
}
@keyframes withdraw-complete { 50% { transform: scale(1.035); filter: brightness(1.04); } }
@keyframes withdraw-check {
  from { opacity: 0; transform: scale(.25) rotate(-24deg); }
}
@keyframes withdraw-spark {
  0% { opacity: 0; transform: translate(-50%, -50%) scale(.25) rotate(0); }
  16% { opacity: 1; }
  100% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(1.15) rotate(210deg); }
}
@keyframes withdraw-coin {
  0% { opacity: 0; transform: translate(calc(-50% + var(--x)), calc(-50% + var(--y))) scale(.45) rotate(0); }
  18% { opacity: 1; }
  78% { opacity: 1; transform: translate(-50%, -50%) scale(.9) rotate(520deg); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(.2) rotate(620deg); }
}
@keyframes powerup-token-in { from { opacity: 0; transform: translateY(-10px) scale(.58); } 70% { transform: translateY(0) scale(1.08); } }
@keyframes powerup-token-out { to { opacity: 0; transform: translateY(-7px) scale(.78); } }
@keyframes powerup-glyph-pulse { 50% { transform: scale(1.12) rotate(-5deg); } }
@keyframes powerup-ending { to { filter: brightness(1.2); transform: scale(.94); } }
@keyframes revive-token-ready { 50% { transform: scale(1.06); box-shadow: 0 10px 24px rgb(17 45 68 / 31%), 0 0 28px rgb(255 204 61 / 78%), inset 0 1px rgb(255 255 255 / 35%); } }
@keyframes revive-token-cross { 50% { transform: scale(1.18) rotate(90deg); } }
@keyframes revive-token-consume { 45% { opacity: 1; transform: translateY(10px) scale(1.35); filter: brightness(1.5); } to { opacity: 0; transform: translate(42px, 48vh) scale(.35) rotate(160deg); } }
@keyframes revive-shield-pulse { to { transform: scale(1.18); text-shadow: 0 0 19px #fff, 0 0 28px var(--bonus-glow); } }
@keyframes revive-overlay-in { from { opacity: 0; } }
@keyframes revive-aurora { to { transform: rotate(360deg); } }
@keyframes revive-ring { from { opacity: .9; transform: scale(.18); } to { opacity: 0; transform: scale(1.25); } }
@keyframes revive-card-in { from { opacity: 0; transform: translateY(26px) scale(.76); filter: blur(4px); } }
@keyframes revive-icon-pop { from { opacity: 0; transform: scale(.2) rotate(-45deg); } 72% { transform: scale(1.12) rotate(6deg); } }
@keyframes revive-camera { 0%, 100% { filter: none; } 28% { filter: brightness(.58) saturate(.62); } 58% { filter: brightness(1.45) saturate(1.2); } }
@keyframes trap-warning-burst { from { opacity: .9; transform: translate(-50%, -50%) scale(.25); } to { opacity: 0; transform: translate(-50%, -50%) scale(3.7); } }
@keyframes crash-overlay-in { from { opacity: 0; } }
@keyframes crash-scan { from { opacity: 0; transform: scaleX(.1); } 55% { opacity: 1; } to { opacity: .45; transform: scaleX(1); } }
@keyframes crash-panel-in { from { opacity: 0; transform: translateY(28px) scale(.86); } }
@keyframes crash-pulse { from { opacity: 1; transform: translate(-50%, -50%) scale(.1); } to { opacity: 0; transform: translate(-50%, -50%) scale(2.4); } }
@keyframes crash-snow { 0% { opacity: 0; transform: translateY(0) scale(.5); } 18% { opacity: .9; } 100% { opacity: 0; transform: translate(34px, 112vh) scale(1.3); } }
@keyframes crash-camera { 18% { transform: translateX(-7px) rotate(-.45deg); filter: brightness(1.3); } 36% { transform: translateX(6px) rotate(.35deg); } 58% { transform: translateX(-3px); } 100% { filter: brightness(.72) saturate(.72); } }
@keyframes lake-camera { to { transform: translateY(10px) scale(1.025); filter: blur(2px) brightness(.64) saturate(.7); } }
@keyframes gameover-card-in { from { opacity: 0; transform: translateY(28px) scale(.9); filter: blur(5px); } }
@keyframes gameover-emblem-in { from { opacity: 0; transform: scale(.25) rotate(-30deg); } }
@keyframes gameover-ring { from { opacity: .8; transform: scale(.65); } to { opacity: 0; transform: scale(1.4); } }
@keyframes gameover-loss-in { from { opacity: 0; transform: translateY(12px) scale(.96); } }
@keyframes result-actions-in { from { opacity: 0; transform: translateY(15px); } }
@keyframes result-snow-drift { to { background-position: 25px 130px, -35px 180px, 20px 210px; } }
@keyframes result-crystal-float { 0% { opacity: 0; transform: translate3d(0, 0, 0) rotate(0); } 18% { opacity: .55; } 78% { opacity: .22; } 100% { opacity: 0; transform: translate3d(24px, -112vh, 0) rotate(210deg); } }
@keyframes result-pop {
  from { opacity: 0; transform: translateY(22px) scale(.9); }
}
@keyframes trophy-bounce {
  from { opacity: 0; transform: translateY(18px) scale(.35) rotate(-12deg); }
  65% { transform: translateY(-5px) scale(1.12) rotate(5deg); }
}
@keyframes stat-rise {
  from { opacity: 0; transform: translateY(12px); }
}

@media (max-width: 680px) {
  .game-menu-card { padding: 25px 22px 20px; }
  .game-hud--3d {
    right: max(54px, calc(env(safe-area-inset-right) + 48px));
    grid-template-columns: 104px minmax(142px, 1fr) 88px;
    gap: 6px;
  }
  .game-hud--3d .game-hud__chip,
  .game-hud--3d .game-goal,
  .game-hud__diamonds { min-height: 51px; padding: 8px 9px; border-radius: 14px; }
  .game-hud--3d .game-hud__chip span,
  .game-hud--3d .game-goal > span { font-size: 8px; }
  .game-hud--3d .game-hud__chip strong,
  .game-hud--3d .game-goal strong { font-size: 12px; }
  .game-hud__left { width: 104px; }
  .game-hud--3d .game-hud__chip--right { width: 88px; }
  .game-powerups { top: max(122px, calc(env(safe-area-inset-top) + 113px)); left: max(8px, calc(env(safe-area-inset-left) + 5px)); max-width: 190px; gap: 6px; }
  .game-traps { top: max(172px, calc(env(safe-area-inset-top) + 163px)); right: max(8px, calc(env(safe-area-inset-right) + 5px)); max-width: 190px; gap: 6px; }
  .game-powerup { width: 56px; }
  .game-powerup__dial { width: 52px; height: 52px; }
  .game-powerup__glyph { width: 24px; height: 24px; }
  .game-powerup__symbol { font-size: 24px; }
  .game-powerup > strong { max-width: 58px; font-size: 7px; }
  .game-powerup time { bottom: -5px; min-width: 35px; font-size: 8px; }
  .game-cashout { min-width: min(300px, calc(100vw - 172px)); padding-inline: 15px; }
}

@media (max-width: 440px) {
  .game-menu-scene { background-position: 50% center; }
  .game-menu-card { width: 100%; border-radius: 22px; }
  .game-menu-balance strong { font-size: 29px; }
  .overlay--game .stake-chips { gap: 6px; }
  .overlay--game .stake-chips button { min-height: 41px; font-size: 11px; }
  .game-hud--3d {
    top: max(9px, calc(env(safe-area-inset-top) + 5px));
    right: max(49px, calc(env(safe-area-inset-right) + 45px));
    left: max(7px, calc(env(safe-area-inset-left) + 5px));
    grid-template-columns: 82px minmax(126px, 1fr) 72px;
    gap: 4px;
  }
  .game-hud--3d .game-hud__chip,
  .game-hud--3d .game-goal { min-height: 47px; padding: 7px 6px; border-radius: 12px; }
  .game-hud--3d .game-hud__chip strong,
  .game-hud--3d .game-goal strong { font-size: 10px; }
  .game-hud__left { width: 82px; }
  .game-hud--3d .game-hud__chip--right { width: 72px; }
  .game-hud__diamonds { min-height: 41px; padding: 6px; }
  .game-powerups { top: max(108px, calc(env(safe-area-inset-top) + 101px)); max-width: 174px; gap: 4px; }
  .game-traps { top: max(158px, calc(env(safe-area-inset-top) + 151px)); max-width: 134px; gap: 4px; }
  .game-event {
    top: max(64px, calc(env(safe-area-inset-top) + 58px));
    width: min(230px, calc(100vw - 150px));
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .game-event strong { font-size: 10px; letter-spacing: .1em; }
  .game-event span { margin-top: 2px; font-size: 9px; line-height: 1.15; }
  .game-trap-warning { min-height: 124px; padding: 18px; grid-template-columns: 60px 1fr; gap: 13px; border-radius: 20px; }
  .game-trap-warning__icon { width: 58px; height: 58px; border-radius: 18px; font-size: 31px; }
  .game-trap-warning p { font-size: 11px; }
  .overlay--game .game-result { padding: 19px 16px; }
  .overlay--game .game-result dl { grid-template-columns: repeat(2, 1fr); }
  .overlay--game .game-result__emblem { width: 70px; height: 70px; }
  .overlay--game .game-result__loss { margin-top: 12px; padding: 11px 13px; }
  .game-cashout-celebration__card { padding-inline: 19px; }
  .game-close--world { top: max(9px, calc(env(safe-area-inset-top) + 5px)); right: 7px; width: 36px; height: 36px; }
  .game-audio-controls { top: max(61px, calc(env(safe-area-inset-top) + 56px)); right: 7px; gap: 7px; }
  .game-sound { width: 42px; height: 42px; }
  .game-speed,
  .game-coin-count { min-width: 65px; padding: 7px 8px; border-radius: 12px; }
  .game-speed strong { font-size: 17px; }
  .game-coin-count span { width: 17px; height: 17px; }
  .game-cashout { min-width: min(250px, calc(100vw - 176px)); min-height: 55px; padding-inline: 12px; }
  .game-cashout strong { font-size: 16px; }
}

/* Portal competitivo v22 */
body {
  background:
    radial-gradient(circle at 10% 0, rgb(57 196 255 / 18%), transparent 31%),
    radial-gradient(circle at 92% 12%, rgb(47 226 201 / 12%), transparent 28%),
    #edf5fa;
}

.app-shell--portal {
  width: 100%;
  max-width: none;
  background: transparent;
  box-shadow: none;
}

.portal-topbar {
  height: calc(82px + env(safe-area-inset-top));
  padding: calc(14px + env(safe-area-inset-top)) max(24px, calc((100vw - 1240px) / 2)) 12px;
  border-bottom-color: rgb(205 224 235 / 76%);
  background: rgb(250 253 255 / 89%);
  box-shadow: 0 10px 34px rgb(21 76 112 / 6%);
}

.portal-topbar .brand > span { display: grid; gap: 1px; }
.portal-topbar .brand small { color: #7890a3; font-size: 9px; font-weight: 850; letter-spacing: .16em; }
.portal-topbar .brand img { width: 46px; height: 46px; }
.desktop-nav { display: flex; align-items: center; gap: 30px; }
.desktop-nav a { position: relative; padding: 12px 0; color: #5e7488; font-size: 13px; font-weight: 750; text-decoration: none; }
.desktop-nav a::after { content: ""; position: absolute; right: 50%; bottom: 4px; left: 50%; height: 2px; border-radius: 9px; background: var(--primary); transition: right .2s ease, left .2s ease; }
.desktop-nav a:hover { color: var(--primary-dark); }
.desktop-nav a:hover::after { right: 0; left: 0; }
.topbar-account { display: flex; align-items: center; gap: 10px; }
.diamond-balance { min-height: 46px; padding: 7px 13px; display: grid; grid-template-columns: auto auto; align-items: center; gap: 0 7px; border: 1px solid #cbeef7; border-radius: 14px; background: #f4fcff; color: #19acd9; cursor: pointer; }
.diamond-balance > span { grid-row: 1 / 3; font-size: 22px; text-shadow: 0 4px 13px rgb(26 183 219 / 28%); transform: rotate(45deg); }
.diamond-balance strong { color: #164166; font-size: 14px; line-height: 1; text-align: left; }
.diamond-balance small { color: #8195a6; font-size: 8px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.portal-topbar .balance-pill { min-height: 46px; border-radius: 14px; }
.profile-shortcut { width: 42px; height: 42px; border: 1px solid #bfe9f7; border-radius: 14px; background: linear-gradient(145deg, #164b78, #1aaee7); color: #fff; font-size: 11px; font-weight: 900; cursor: pointer; box-shadow: 0 8px 20px rgb(29 174 237 / 19%); }

.portal-main {
  inset: calc(82px + env(safe-area-inset-top)) 0 0;
  padding: 32px max(24px, calc((100vw - 1240px) / 2)) 70px;
  overflow-x: hidden;
}

.portal-hero { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(360px, .85fr); gap: 22px; align-items: stretch; }
.hero--premium { min-width: 0; }
.hero--premium .hero__media { height: 590px; border-radius: 26px; background: #0b4d85; box-shadow: 0 30px 70px rgb(15 61 94 / 18%); }
.hero--premium .hero__slide { object-position: center 44%; }
.hero--premium .hero__shade { inset: 0; background: linear-gradient(90deg, rgb(4 21 46 / 88%) 0, rgb(4 25 54 / 58%) 47%, rgb(4 30 60 / 5%) 78%), linear-gradient(0deg, rgb(3 23 48 / 40%), transparent 48%); }
.hero--premium .hero__content { inset: 0; padding: 52px; display: flex; flex-direction: column; align-items: stretch; justify-content: space-between; }
.hero__copy { width: min(560px, 78%); margin-top: auto; margin-bottom: auto; }
.hero__copy .eyebrow { display: flex; align-items: center; gap: 8px; color: #79eaff; font-size: 12px; }
.hero__copy .eyebrow span { width: 8px; height: 8px; border: 2px solid rgb(255 255 255 / 70%); background: #27cee9; transform: rotate(45deg); }
.hero__copy h1 { margin: 14px 0 14px; color: #fff; font-size: clamp(38px, 4.2vw, 61px); line-height: .98; letter-spacing: -.055em; text-wrap: balance; text-shadow: 0 10px 35px rgb(0 14 33 / 26%); }
.hero__copy > p:not(.eyebrow) { max-width: 500px; margin: 0; color: rgb(235 248 255 / 77%); font-size: 16px; line-height: 1.55; }
.hero__actions { margin-top: 26px; display: flex; flex-wrap: wrap; gap: 10px; }
.hero--premium .primary-cta { min-height: 54px; padding: 0 22px; border-radius: 14px; font-size: 14px; animation: none; }
.secondary-cta { min-height: 54px; padding: 0 20px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 14px; background: rgb(255 255 255 / 12%); color: #fff; font-size: 13px; font-weight: 850; cursor: pointer; backdrop-filter: blur(8px); }
.primary-cta:hover, .secondary-cta:hover { transform: translateY(-2px); }
.hero__status { display: flex; align-self: flex-start; gap: 1px; overflow: hidden; border: 1px solid rgb(255 255 255 / 24%); border-radius: 14px; background: rgb(4 29 57 / 34%); backdrop-filter: blur(12px); }
.hero__status > span { min-width: 130px; padding: 11px 14px; display: grid; gap: 3px; border-right: 1px solid rgb(255 255 255 / 15%); }
.hero__status > span:last-child { border-right: 0; }
.hero__status small { color: rgb(222 244 255 / 65%); font-size: 9px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; }
.hero__status strong { color: #fff; font-size: 13px; font-variant-numeric: tabular-nums; }

.championship-card { position: relative; min-width: 0; padding: 26px; overflow: hidden; border: 1px solid rgb(255 255 255 / 80%); border-radius: 26px; background: linear-gradient(160deg, rgb(255 255 255 / 98%), rgb(241 250 255 / 94%)); box-shadow: 0 28px 68px rgb(15 61 94 / 13%); isolation: isolate; }
.championship-card::before { content: ""; position: absolute; z-index: -1; top: -120px; right: -105px; width: 260px; height: 260px; border-radius: 50%; background: radial-gradient(circle, rgb(58 210 243 / 20%), transparent 69%); }
.championship-card__header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.championship-card__header h2 { margin: 4px 0 0; color: #102f51; font-size: 26px; letter-spacing: -.04em; }
.live-pill { padding: 7px 9px; display: inline-flex; align-items: center; gap: 6px; border: 1px solid #bbefd9; border-radius: 999px; background: #edfff7; color: #138657; font-size: 8px; font-weight: 950; letter-spacing: .08em; }
.live-pill i { width: 6px; height: 6px; border-radius: 50%; background: #1fc979; box-shadow: 0 0 0 4px rgb(31 201 121 / 12%); animation: live-pulse 1.8s ease-in-out infinite; }
.player-rank-card { margin-top: 20px; padding: 15px; display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 5px 13px; border: 1px solid #cbeef8; border-radius: 18px; background: linear-gradient(145deg, #e8faff, #f9feff); }
.player-rank-card__badge { grid-row: 1 / 3; min-width: 76px; padding: 10px 8px; border-radius: 13px; background: #143d66; color: #fff; text-align: center; }
.player-rank-card__badge small { display: block; color: #91ddf5; font-size: 7px; font-weight: 900; letter-spacing: .1em; }
.player-rank-card__badge strong { display: block; margin-top: 4px; font-size: 22px; }
.player-rank-card > div:nth-child(2) > span { display: block; color: #7b8fa2; font-size: 10px; }
.player-rank-card > div:nth-child(2) > strong { display: block; margin-top: 3px; color: #153d63; font-size: 21px; }
.player-rank-card > div:nth-child(2) i, .leaderboard-row__score i, .ranking-snapshot__player i, .leaderboard-summary i, .leaderboard-player-sticky i { color: #18c1de; font-style: normal; }
.player-rank-card > small { color: #6e8294; font-size: 9px; line-height: 1.35; }
.podium-preview { min-height: 155px; margin: 20px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); align-items: end; gap: 8px; list-style: none; }
.podium-preview__place { min-width: 0; padding: 12px 6px 11px; display: grid; justify-items: center; gap: 4px; border: 1px solid #deebf2; border-radius: 16px; background: #f5f9fc; text-align: center; }
.podium-preview__place--1 { min-height: 145px; padding-top: 16px; border-color: #f4db7e; background: linear-gradient(180deg, #fff9dd, #fff1ab); }
.podium-preview__place--2 { min-height: 127px; }
.podium-preview__place--3 { min-height: 113px; border-color: #f1d9c7; background: #fff7f1; }
.podium-preview__medal { font-size: 19px; }
.podium-preview__avatar { width: 35px; height: 35px; display: grid; place-items: center; border-radius: 12px; background: linear-gradient(145deg, #173d65, #1aaee7); color: #fff; font-size: 9px; font-weight: 900; }
.podium-preview__place strong { max-width: 80px; overflow: hidden; color: #263f58; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }
.podium-preview__place small { color: #199ec9; font-size: 10px; font-weight: 900; }
.podium-preview__place small i { font-style: normal; }
.prize-preview { margin-top: 11px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; }
.prize-preview > span { padding: 9px 5px; border-radius: 11px; background: #eef6fa; text-align: center; }
.prize-preview small, .prize-preview strong { display: block; }
.prize-preview small { color: #8b9aaa; font-size: 7px; font-weight: 850; text-transform: uppercase; }
.prize-preview strong { margin-top: 3px; color: #243f5c; font-size: 10px; }
.championship-card__actions { margin-top: 17px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.championship-card__actions button { min-height: 42px; border: 1px solid #ccebf6; border-radius: 12px; background: #fff; color: #17668d; font-size: 10px; font-weight: 900; cursor: pointer; }
.championship-card__actions button:first-child { border-color: #1aaee7; background: #1aaee7; color: #fff; }
.championship-card__update { margin: 12px 0 0; color: #94a4b2; font-size: 8px; text-align: center; }

.performance-strip { margin-top: 22px; padding: 12px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)) auto; gap: 8px; border: 1px solid #dceaf2; border-radius: 20px; background: rgb(255 255 255 / 76%); box-shadow: 0 16px 42px rgb(29 76 108 / 8%); backdrop-filter: blur(12px); }
.award-banner { position: relative; margin-top: 22px; padding: 18px 54px 18px 19px; display: flex; align-items: center; gap: 14px; overflow: hidden; border: 1px solid #f0d16d; border-radius: 20px; background: linear-gradient(110deg, #fff8cf, #fffdf2 55%, #e9fbff); box-shadow: 0 18px 42px rgb(171 123 21 / 13%); animation: award-banner-in .45s cubic-bezier(.2,1.2,.3,1) both; }
.award-banner[hidden] { display: none; }
.award-banner__icon { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 15px; background: #fff0a8; font-size: 24px; box-shadow: inset 0 0 0 1px #f1d16d; }
.award-banner small, .award-banner strong { display: block; }
.award-banner small { color: #a37c16; font-size: 8px; font-weight: 950; letter-spacing: .12em; }
.award-banner strong { margin-top: 3px; color: #3d371e; font-size: 16px; }
.award-banner p { margin: 3px 0 0; color: #7f7859; font-size: 10px; }
.award-banner > button { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border: 1px solid rgb(152 123 37 / 18%); border-radius: 10px; background: rgb(255 255 255 / 60%); color: #8c7a43; cursor: pointer; }
.performance-strip article { min-height: 62px; padding: 9px 12px; display: flex; align-items: center; gap: 10px; border-right: 1px solid #e5eef4; }
.performance-strip__icon { width: 35px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 11px; background: #e8f8fd; color: #11abd9; font-size: 14px; }
.performance-strip small, .performance-strip strong { display: block; }
.performance-strip small { color: #8192a2; font-size: 9px; }
.performance-strip strong { margin-top: 2px; color: #1c3e5e; font-size: 17px; }
.performance-strip > button { min-width: 142px; border: 0; border-radius: 13px; background: #143d66; color: #fff; font-size: 10px; font-weight: 900; cursor: pointer; }

.home-grid { margin-top: 22px; display: grid; grid-template-columns: minmax(0, 1.13fr) minmax(360px, .87fr); gap: 22px; }
.mission-card--compact { min-height: 430px; margin: 0; border-radius: 24px; }
.mission-card--compact .mission-card__shade { background: linear-gradient(90deg, rgb(5 25 54 / 94%), rgb(5 37 72 / 34%)); }
.mission-card--compact .mission-card__content { width: 66%; height: 100%; padding: 45px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.mission-card--compact h2 { margin: 8px 0 10px; font-size: 34px; text-transform: none; }
.mission-card--compact p:not(.section-kicker) { font-size: 15px; line-height: 1.55; }
.mission-card--compact .mission-button { min-height: 49px; margin-top: 24px; padding: 0 18px; border-radius: 13px; font-size: 11px; cursor: pointer; }
.mission-button.is-complete { border-color: rgb(94 234 173 / 48%); background: rgb(19 154 99 / 24%); color: #bfffe2; }
.ranking-snapshot { padding: 24px; border: 1px solid #dceaf2; border-radius: 24px; background: #fff; box-shadow: 0 22px 56px rgb(29 76 108 / 10%); }
.ranking-snapshot > header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ranking-snapshot h2 { margin: 3px 0 0; color: #193a5b; font-size: 24px; letter-spacing: -.035em; }
.ranking-snapshot > header button { padding: 8px 0; border: 0; background: transparent; color: #139fd7; font-size: 10px; font-weight: 900; cursor: pointer; text-transform: uppercase; }
.ranking-card--snapshot { margin-top: 14px; padding: 0; border-radius: 15px; box-shadow: none; }
.ranking-card--snapshot li { min-height: 48px; padding: 0 13px; grid-template-columns: 36px 1fr auto; }
.ranking-card--snapshot li.is-player { background: #ecfaff; }
.ranking-card--snapshot strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.ranking-card--snapshot li > span:last-child { font-size: 11px; }
.ranking-snapshot__player { margin-top: 12px; padding: 12px 13px; display: flex; justify-content: space-between; border-radius: 13px; background: #153e67; color: #fff; font-size: 11px; }
.ranking-snapshot__player strong { color: #b9f4ff; }

.about-card--accordion { margin-top: 22px; padding: 35px; border-radius: 24px; }
.about-card--accordion .about-card__intro { max-width: 680px; padding: 0; }
.about-card--accordion .about-card__intro h2 { margin-top: 5px; font-size: 34px; text-transform: none; }
.about-card--accordion .about-card__intro > p:last-child { font-size: 15px; }
.guide-accordion-grid { margin-top: 25px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: start; }
.guide-panel { overflow: hidden; border: 1px solid #dfebf2; border-radius: 16px; background: #fafdff; }
.guide-panel summary { min-height: 72px; padding: 13px 16px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 12px; cursor: pointer; list-style: none; }
.guide-panel summary::-webkit-details-marker { display: none; }
.guide-panel summary > span { width: 39px; height: 39px; display: grid; place-items: center; border-radius: 12px; background: #e5f8ff; color: #13a9db; }
.guide-panel summary strong, .guide-panel summary small { display: block; }
.guide-panel summary strong { color: #213e5a; font-size: 14px; }
.guide-panel summary small { margin-top: 2px; color: #8495a5; font-size: 10px; }
.guide-panel summary > i { color: #9aa9b7; font-size: 17px; font-style: normal; transition: transform .2s ease; }
.guide-panel[open] summary > i { transform: rotate(45deg); }
.guide-panel__body { padding: 0 12px 12px; display: grid; gap: 7px; }
.guide-panel__body article { min-height: 66px; padding: 7px; display: flex; align-items: center; gap: 11px; border-radius: 12px; background: #fff; }
.guide-panel__body img { width: 54px; height: 54px; flex: 0 0 auto; border-radius: 10px; object-fit: cover; }
.guide-panel__body h3 { margin: 0; color: #28445f; font-size: 12px; }
.guide-panel__body p, .guide-panel__copy p { margin: 3px 0 0; color: #708294; font-size: 11px; line-height: 1.42; }
.guide-chip-list { padding: 0 14px 15px; display: flex; flex-wrap: wrap; gap: 7px; }
.guide-chip-list span { padding: 8px 10px; border: 1px solid #d9eaf2; border-radius: 999px; background: #fff; color: #5e7387; font-size: 10px; font-weight: 750; }
.guide-panel__copy { padding: 0 16px 18px; }
.guide-panel__copy p { font-size: 12px; }
.portal-main .demo-banner { margin-top: 22px; border-radius: 16px; }
.portal-main .site-footer { padding: 28px 10px 0; }

.portal-bottom-nav { display: none; }
.diamond-button--play span { color: #fff; font-size: 18px; animation: none; }

.modal--leaderboard { width: min(100%, 560px); max-height: min(850px, calc(100dvh - 30px)); }
.leaderboard-header { padding-bottom: 13px; }
.leaderboard-summary { margin: 0 22px 12px; padding: 12px; display: grid; grid-template-columns: 1fr 1fr auto; align-items: center; gap: 8px; border-radius: 16px; background: linear-gradient(145deg, #133c64, #176f9b); color: #fff; }
.leaderboard-summary > div { padding: 2px 8px; border-right: 1px solid rgb(255 255 255 / 17%); }
.leaderboard-summary small, .leaderboard-summary strong { display: block; }
.leaderboard-summary small { color: #96def3; font-size: 7px; font-weight: 850; letter-spacing: .1em; }
.leaderboard-summary strong { margin-top: 3px; font-size: 17px; }
.leaderboard-summary button { min-height: 36px; padding: 0 10px; border: 1px solid rgb(255 255 255 / 28%); border-radius: 10px; background: rgb(255 255 255 / 12%); color: #fff; font-size: 9px; font-weight: 900; cursor: pointer; }
.leaderboard-body { padding-top: 0; }
.leaderboard-list { margin: 0; padding: 0; overflow: hidden; border: 1px solid #e2edf3; border-radius: 16px; list-style: none; }
.leaderboard-row { min-height: 58px; padding: 7px 12px; display: grid; grid-template-columns: 34px 36px minmax(0, 1fr) auto; align-items: center; gap: 9px; border-bottom: 1px solid #ebf1f5; }
.leaderboard-row:last-child { border-bottom: 0; }
.leaderboard-row.is-player { background: #eafaff; box-shadow: inset 3px 0 #17b4e1; }
.leaderboard-row__rank { color: #778a9b; font-size: 11px; font-weight: 900; text-align: center; }
.leaderboard-row__avatar { width: 34px; height: 34px; display: grid; place-items: center; border-radius: 11px; background: #e5f5fb; color: #1787b0; font-size: 8px; font-weight: 950; }
.leaderboard-row__name { min-width: 0; }
.leaderboard-row__name strong, .leaderboard-row__name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.leaderboard-row__name strong { color: #29445f; font-size: 11px; }
.leaderboard-row__name small { margin-top: 2px; color: #97a5b2; font-size: 8px; }
.leaderboard-row__score { color: #169fc8; font-size: 11px; white-space: nowrap; }
.leaderboard-unranked { margin-top: 10px; padding: 13px; display: grid; gap: 3px; border: 1px dashed #b9deeb; border-radius: 13px; background: #f1fbff; text-align: center; }
.leaderboard-unranked strong { color: #244765; font-size: 11px; }
.leaderboard-unranked span { color: #7690a3; font-size: 9px; }
.leaderboard-player-sticky { position: sticky; bottom: -1px; margin-top: 10px; padding: 12px 14px; display: flex; justify-content: space-between; border-radius: 13px; background: #123b62; color: #fff; font-size: 11px; box-shadow: 0 8px 25px rgb(10 51 84 / 20%); }
.leaderboard-player-sticky strong { color: #a9efff; }
.leaderboard-reset { margin: 11px 4px 0; color: #8b9ba8; font-size: 9px; text-align: center; }
.reward-podium { grid-template-columns: repeat(3, 1fr); }
.reward-podium .podium-place:nth-child(1) { min-height: 135px; }
.reward-podium .podium-place:nth-child(2) { min-height: 115px; }
.reward-podium .podium-place:nth-child(3) { min-height: 98px; }
.history-card dl { grid-template-columns: repeat(4, 1fr); }
.history-empty { padding: 32px 16px; display: grid; justify-items: center; text-align: center; }
.history-empty > span { width: 58px; height: 58px; display: grid; place-items: center; border-radius: 18px; background: #e8f8fd; color: #16a9d6; font-size: 25px; }
.history-empty > strong { margin-top: 14px; color: #234461; font-size: 15px; }
.history-empty > p { max-width: 230px; margin: 6px 0 0; color: #7d8fa0; font-size: 11px; line-height: 1.45; }
.history-empty .action-button { width: min(220px, 100%); }
.profile-season { margin-top: 16px; padding: 10px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; border: 1px solid rgb(255 255 255 / 18%); border-radius: 14px; background: rgb(0 24 53 / 18%); }
.profile-season > span { text-align: center; }
.profile-season small, .profile-season strong { display: block; }
.profile-season small { color: #9de7fb; font-size: 7px; font-weight: 850; letter-spacing: .08em; }
.profile-season strong { margin-top: 4px; color: #fff; font-size: 11px; }
.mission-complete-state { padding-top: 18px; display: grid; justify-items: center; text-align: center; }
.mission-complete-state > span { width: 74px; height: 74px; display: grid; place-items: center; border-radius: 24px; background: #e4faff; color: #18b5dc; font-size: 36px; transform: rotate(45deg); }
.mission-complete-state > strong { margin-top: 18px; color: #143f63; font-size: 25px; }
.mission-complete-state > p { margin: 8px 0 4px; color: #6f8293; font-size: 13px; line-height: 1.5; }
.game-menu-season { margin: 14px 0 4px; padding: 10px; display: grid; grid-template-columns: 1fr 1fr; gap: 1px; border: 1px solid #e1edf3; border-radius: 13px; background: #f5fbfd; }
.game-menu-season > span { padding: 3px 8px; border-right: 1px solid #dcebf2; }
.game-menu-season > span:last-child { border-right: 0; }
.game-menu-season small, .game-menu-season strong { display: block; }
.game-menu-season small { color: #8a9aab; font-size: 7px; font-weight: 900; letter-spacing: .08em; }
.game-menu-season strong { margin-top: 3px; color: #174467; font-size: 12px; }
.game-result__loss-note strong { display: block; margin-top: 5px; color: #4ed59b; }

@keyframes live-pulse { 50% { opacity: .5; transform: scale(.82); } }
@keyframes award-banner-in { from { opacity: 0; transform: translateY(-8px) scale(.985); } }

@media (max-width: 980px) {
  .desktop-nav { gap: 15px; }
  .desktop-nav a { font-size: 11px; }
  .portal-hero { grid-template-columns: minmax(0, 1.25fr) minmax(330px, .75fr); }
  .hero--premium .hero__content { padding: 36px; }
  .home-grid { grid-template-columns: 1fr 1fr; }
  .performance-strip { grid-template-columns: repeat(3, 1fr); }
  .performance-strip > button { grid-column: 1 / -1; min-height: 46px; }
}

@media (max-width: 760px) {
  .edge-glow { display: none; }
  .portal-topbar { height: calc(68px + env(safe-area-inset-top)); padding: calc(9px + env(safe-area-inset-top)) 13px 8px; }
  .portal-topbar .brand img { width: 42px; height: 42px; }
  .portal-topbar .brand > span { display: none; }
  .desktop-nav { display: none; }
  .topbar-account { gap: 6px; }
  .diamond-balance { min-height: 43px; padding: 5px 9px; border-radius: 13px; }
  .diamond-balance small { display: none; }
  .diamond-balance > span { grid-row: auto; font-size: 16px; }
  .diamond-balance strong { font-size: 13px; }
  .portal-topbar .balance-pill { min-height: 43px; padding: 6px 10px; }
  .portal-topbar .balance-pill span { font-size: 7px; }
  .portal-topbar .balance-pill strong { font-size: 12px; }
  .profile-shortcut { display: none; }
  .portal-main { inset: calc(68px + env(safe-area-inset-top)) 0 calc(74px + env(safe-area-inset-bottom)); padding: 13px 12px 35px; }
  .portal-hero { display: grid; grid-template-columns: 1fr; gap: 12px; }
  .hero--premium .hero__media { height: 450px; border-radius: 20px; }
  .hero--premium .hero__shade { background: linear-gradient(0deg, rgb(4 21 46 / 92%) 0, rgb(4 25 54 / 42%) 66%, transparent 100%); }
  .hero--premium .hero__content { padding: 25px 22px; }
  .hero__copy { width: 100%; margin-top: auto; margin-bottom: 18px; }
  .hero__copy h1 { max-width: 350px; font-size: 37px; }
  .hero__copy > p:not(.eyebrow) { font-size: 14px; }
  .hero__status { width: 100%; align-self: stretch; }
  .hero__status > span { min-width: 0; flex: 1; }
  .championship-card { padding: 20px; border-radius: 20px; }
  .championship-card__header h2 { font-size: 23px; }
  .performance-strip { margin-top: 12px; padding: 8px; grid-template-columns: repeat(3, 1fr); border-radius: 17px; }
  .award-banner { margin-top: 12px; padding: 15px 45px 15px 14px; border-radius: 16px; }
  .award-banner__icon { width: 41px; height: 41px; font-size: 20px; }
  .award-banner strong { font-size: 13px; }
  .performance-strip article { min-height: 58px; padding: 7px 5px; justify-content: center; border-right: 1px solid #e5eef4; text-align: center; }
  .performance-strip__icon { display: none; }
  .performance-strip small { font-size: 8px; }
  .performance-strip strong { font-size: 15px; }
  .performance-strip > button { min-height: 42px; }
  .home-grid { margin-top: 12px; grid-template-columns: 1fr; gap: 12px; }
  .mission-card--compact { min-height: 330px; }
  .mission-card--compact .mission-card__content { width: 82%; padding: 29px 23px; }
  .mission-card--compact h2 { font-size: 28px; }
  .mission-card--compact p:not(.section-kicker) { font-size: 13px; }
  .ranking-snapshot { padding: 19px; border-radius: 20px; }
  .about-card--accordion { margin-top: 12px; padding: 24px 18px; border-radius: 20px; }
  .about-card--accordion .about-card__intro h2 { font-size: 28px; }
  .guide-accordion-grid { grid-template-columns: 1fr; }
  .portal-bottom-nav { display: grid; }
  .portal-bottom-nav .diamond-button--play { background: linear-gradient(145deg, #24c8f3, #087cbf); }
  .modal--leaderboard { max-height: 92dvh; border-radius: 24px; }
}

@media (max-width: 430px) {
  .hero--premium .hero__media { height: 420px; }
  .hero__copy h1 { margin-block: 10px; font-size: 32px; }
  .hero__copy > p:not(.eyebrow) { font-size: 12px; line-height: 1.48; }
  .hero__actions { margin-top: 18px; }
  .hero--premium .primary-cta, .secondary-cta { min-height: 48px; padding-inline: 15px; font-size: 11px; }
  .hero__status > span { padding: 9px 10px; }
  .hero__status strong { font-size: 11px; }
  .championship-card { padding: 17px; }
  .player-rank-card { grid-template-columns: auto 1fr; }
  .player-rank-card > small { grid-column: 1 / -1; }
  .podium-preview { min-height: 138px; }
  .podium-preview__place--1 { min-height: 132px; }
  .podium-preview__place--2 { min-height: 116px; }
  .podium-preview__place--3 { min-height: 105px; }
  .prize-preview strong { font-size: 9px; }
  .championship-card__actions { grid-template-columns: 1fr; }
  .history-card dl { grid-template-columns: repeat(2, 1fr); }
  .leaderboard-summary { margin-inline: 14px; grid-template-columns: 1fr 1fr; }
  .leaderboard-summary button { grid-column: 1 / -1; }
  .leaderboard-row { padding-inline: 9px; grid-template-columns: 30px 32px minmax(0, 1fr) auto; gap: 7px; }
  .leaderboard-row__avatar { width: 31px; height: 31px; }
}

@media (max-width: 360px) {
  .game-hud--3d { grid-template-columns: 70px minmax(112px, 1fr) 66px; }
  .game-hud__left { width: 70px; }
  .game-hud--3d .game-hud__chip--right { width: 66px; }
  .game-hud--3d .game-hud__chip,
  .game-hud--3d .game-goal,
  .game-hud__diamonds { padding-inline: 4px; }
  .game-hud--3d .game-hud__chip strong,
  .game-hud--3d .game-goal strong { font-size: 9px; }
  .game-powerup { width: 30px; }
  .game-powerup__dial { width: 28px; height: 28px; }
  .game-powerup__symbol { font-size: 15px; }
  .game-powerup time,
  .game-powerup__ready { min-width: 26px; font-size: 6px; }
}

@media (max-height: 650px) {
  .game-menu-card { max-height: calc(100dvh - 16px); padding-block: 18px; }
  .game-menu-divider { margin-block: 11px; }
  .game-menu-rule { margin-top: 10px; }
  .overlay--game .game-start { min-height: 50px; margin-top: 12px; }
  .game-menu-link { min-height: 40px; margin-top: 6px; }
  .game-power { bottom: 91px; }
  .game-instruction { bottom: 14px; padding-block: 9px; }
  .game-instruction span { font-size: 12px; }
}

@media (max-width: 900px), (max-height: 650px) {
  .game-powerups,
  .game-traps { max-width: none; flex-wrap: nowrap; gap: 3px; }
  .game-powerup { width: 34px; gap: 0; }
  .game-powerup__dial { width: 32px; height: 32px; }
  .game-powerup__symbol { font-size: 17px; }
  .game-powerup > strong { display: none; }
  .game-powerup time { bottom: -6px; min-width: 29px; padding: 1px 3px; font-size: 6.5px; }
  .game-powerup__ready { bottom: -6px; min-width: 29px; padding: 1px 3px; font-size: 6.5px; }
  .game-traps { top: max(170px, calc(env(safe-area-inset-top) + 161px)); max-width: 134px; }
  .game-traps .game-powerup { width: 42px; flex: 0 0 42px; }
  .game-traps .game-powerup__dial { width: 40px; height: 40px; }
  .game-traps .game-powerup__symbol { font-size: 21px; }
  .game-traps .game-powerup time { min-width: 34px; padding: 2px 4px; font-size: 8px; }
  .game-event { top: max(84px, calc(env(safe-area-inset-top) + 77px)); }
}

@media (max-width: 440px) {
  .game-powerups,
  .game-traps { gap: 2px; }
  .game-powerup { width: 30px; }
  .game-powerup__dial { width: 28px; height: 28px; }
  .game-powerup__symbol { font-size: 15px; }
  .game-powerup time,
  .game-powerup__ready { min-width: 26px; font-size: 6px; }
  .game-event {
    top: max(64px, calc(env(safe-area-inset-top) + 58px));
    width: min(230px, calc(100vw - 150px));
    min-width: 0;
    padding: 8px 10px;
    border-radius: 12px;
  }
  .game-event strong { font-size: 10px; letter-spacing: .1em; }
  .game-event span { margin-top: 2px; font-size: 9px; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .game-color-shift,
  .game-trap-warning { transition: none; }
  .game-trap-warning__burst { animation: none; }
  .game-revive-transition,
  .game-revive-transition__aurora,
  .game-revive-transition__rings i,
  .game-revive-transition__card,
  .game-revive-transition__icon,
  .game-powerup--revive.is-active .game-powerup__dial,
  .game-powerup--revive.is-active .game-powerup__symbol,
  .game-powerup.is-consuming { animation: none; }
  .game-powerup--magnet.is-active .game-powerup__symbol,
  .game-powerup--intangible.is-active .game-powerup__symbol,
  .game-powerup--slowmo.is-active .game-powerup__symbol { animation: none; }
}

/* Portal Polar Arena v25 — reconstrução visual mobile-first */
.icon-sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

.skip-link {
  position: fixed;
  z-index: 3000;
  top: 10px;
  left: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fff;
  color: #08243f;
  font-weight: 800;
  text-decoration: none;
  transform: translateY(-150%);
}

.skip-link:focus { transform: translateY(0); }

body {
  background:
    radial-gradient(circle at 14% -6%, rgb(25 201 238 / 20%), transparent 28%),
    radial-gradient(circle at 92% 22%, rgb(38 99 235 / 17%), transparent 30%),
    #04101f;
}

.app-shell--portal {
  background:
    radial-gradient(circle at 7% 8%, rgb(26 201 231 / 15%), transparent 24%),
    radial-gradient(circle at 95% 24%, rgb(89 78 232 / 13%), transparent 25%),
    linear-gradient(180deg, #07182c 0, #071526 52%, #050f1d 100%);
}

.app-shell--portal::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background-image: radial-gradient(circle, rgb(255 255 255 / 17%) 0 1px, transparent 1.4px);
  background-size: 42px 42px;
  mask-image: linear-gradient(#000, transparent 70%);
  opacity: .18;
}

.portal-topbar {
  height: calc(78px + env(safe-area-inset-top));
  padding: calc(12px + env(safe-area-inset-top)) max(24px, calc((100vw - 1240px) / 2)) 10px;
  border-bottom: 1px solid rgb(128 202 231 / 13%);
  background: rgb(5 18 35 / 88%);
  box-shadow: 0 14px 42px rgb(0 0 0 / 20%);
  backdrop-filter: blur(20px) saturate(130%);
}

.portal-topbar .brand {
  gap: 11px;
  color: #f4fbff;
}

.portal-topbar .brand img {
  width: 46px;
  height: 46px;
  border: 2px solid rgb(103 230 255 / 52%);
  box-shadow: 0 0 0 5px rgb(32 197 231 / 8%), 0 10px 28px rgb(0 0 0 / 28%);
}

.portal-topbar .brand__wordmark {
  color: #fff;
  font-size: 15px;
  letter-spacing: .12em;
}

.portal-topbar .brand small {
  color: #77dff4;
  font-size: 10px;
  letter-spacing: .17em;
}

.desktop-nav a {
  color: #9cb2c5;
  font-size: 14px;
}

.desktop-nav a:hover { color: #68e7ff; }
.desktop-nav a::after { background: #3bdaf3; }

.topbar-account { gap: 9px; }

.diamond-balance,
.portal-topbar .balance-pill,
.profile-shortcut {
  min-height: 48px;
  border: 1px solid rgb(119 213 239 / 19%);
  border-radius: 15px;
  background: rgb(14 39 65 / 72%);
  color: #fff;
  box-shadow: inset 0 1px rgb(255 255 255 / 5%);
}

.diamond-balance {
  padding: 6px 13px 6px 8px;
  grid-template-columns: auto auto;
  gap: 0 9px;
}

.diamond-balance .account-icon {
  grid-row: 1 / 3;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #34e6f2, #159bd8);
  color: #03223b;
  transform: none;
  box-shadow: 0 7px 18px rgb(27 200 232 / 20%);
}

.diamond-balance svg,
.portal-topbar .balance-pill svg,
.profile-shortcut svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.diamond-balance strong {
  color: #f5fcff;
  font-size: 16px;
}

.diamond-balance small {
  color: #87a5ba;
  font-size: 10px;
  letter-spacing: .08em;
}

.portal-topbar .balance-pill {
  min-width: 126px;
  padding: 7px 13px;
  text-align: left;
}

.portal-topbar .balance-pill span {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #86a5ba;
  font-size: 10px;
}

.portal-topbar .balance-pill span svg {
  width: 13px;
  height: 13px;
  color: #3bd9ef;
}

.portal-topbar .balance-pill strong {
  margin-top: 2px;
  color: #fff;
  font-size: 14px;
}

.profile-shortcut {
  width: auto;
  padding: 5px 9px 5px 6px;
  display: flex;
  align-items: center;
  gap: 7px;
}

.profile-shortcut > span {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: linear-gradient(145deg, #187bc8, #18c8df);
  font-size: 11px;
  font-weight: 900;
}

.profile-shortcut svg { width: 14px; color: #82a4ba; }

.portal-main {
  inset: calc(78px + env(safe-area-inset-top)) 0 0;
  padding: 28px max(24px, calc((100vw - 1240px) / 2)) 72px;
  overflow-x: clip;
  scrollbar-color: #1aaeca #08182a;
}

.portal-main button { -webkit-tap-highlight-color: transparent; }

.portal-hero--v25 {
  display: grid;
  grid-template-columns: minmax(0, 1.56fr) minmax(360px, .74fr);
  gap: 20px;
  align-items: stretch;
}

.campaign-banner {
  position: relative;
  min-width: 0;
  aspect-ratio: 3 / 2;
  margin: 0;
  overflow: hidden;
  border: 1px solid rgb(118 229 255 / 24%);
  border-radius: 28px;
  background: #071d38;
  box-shadow: 0 30px 78px rgb(0 0 0 / 34%);
  isolation: isolate;
}

.campaign-banner::after {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 7%), inset 0 -50px 90px rgb(1 11 27 / 18%);
}

.campaign-banner .hero__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center center;
  opacity: 1;
  transform: none;
  transition: none;
}

.play-panel {
  position: relative;
  min-width: 0;
  padding: clamp(27px, 3vw, 40px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(100 215 239 / 18%);
  border-radius: 28px;
  background:
    radial-gradient(circle at 100% 0, rgb(35 210 235 / 18%), transparent 34%),
    linear-gradient(155deg, #102b48 0, #0a1c33 58%, #07172b 100%);
  box-shadow: 0 30px 78px rgb(0 0 0 / 30%);
}

.play-panel::after {
  content: "";
  position: absolute;
  right: -45px;
  bottom: -65px;
  width: 230px;
  height: 230px;
  border: 1px solid rgb(79 222 245 / 11%);
  border-radius: 50%;
  box-shadow: 0 0 0 30px rgb(62 215 242 / 3%), 0 0 0 68px rgb(62 215 242 / 2%);
  pointer-events: none;
}

.play-panel__topline {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.play-panel__topline > span,
.section-kicker {
  display: flex;
  align-items: center;
  gap: 7px;
  color: #65e5f5;
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .12em;
}

.play-panel__topline svg,
.section-kicker svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.play-panel__topline > i {
  padding: 6px 9px;
  border: 1px solid rgb(74 238 181 / 24%);
  border-radius: 999px;
  background: rgb(36 211 146 / 9%);
  color: #65efbd;
  font-size: 11px;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .08em;
}

.play-panel__copy {
  position: relative;
  z-index: 1;
  margin: auto 0;
  padding: 26px 0;
}

.play-panel__copy h1 {
  margin: 0;
  color: #f7fcff;
  font-size: clamp(36px, 3.5vw, 53px);
  line-height: .98;
  letter-spacing: -.055em;
}

.play-panel__copy h1 em {
  color: #5ee7f4;
  font-style: normal;
}

.play-panel__copy p {
  max-width: 410px;
  margin: 18px 0 0;
  color: #9fb5c8;
  font-size: 16px;
  line-height: 1.55;
}

.play-panel__actions {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 9px;
}

.primary-cta--play,
.secondary-cta--ranking {
  width: 100%;
  min-height: 56px;
  padding: 0 10px 0 19px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 15px;
  font-size: 14px;
  font-weight: 900;
  letter-spacing: .01em;
  cursor: pointer;
  animation: none;
  transition: transform .18s ease, filter .18s ease, border-color .18s ease;
}

.primary-cta--play {
  border: 1px solid #83f4ff;
  background: linear-gradient(135deg, #53e5f6, #17b3e7);
  color: #04213a;
  box-shadow: 0 13px 30px rgb(15 181 226 / 24%), inset 0 1px rgb(255 255 255 / 65%);
}

.primary-cta--play svg {
  width: 38px;
  height: 38px;
  padding: 9px;
  border-radius: 11px;
  background: #06243c;
  fill: #fff;
  stroke: none;
}

.secondary-cta--ranking {
  min-height: 50px;
  justify-content: center;
  border: 1px solid rgb(134 205 226 / 19%);
  background: rgb(255 255 255 / 5%);
  color: #d8e8f2;
}

.secondary-cta--ranking svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #64deef;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.primary-cta--play:hover,
.secondary-cta--ranking:hover {
  transform: translateY(-2px);
  filter: brightness(1.06);
}

.season-telemetry {
  position: relative;
  z-index: 1;
  margin-top: 18px;
  padding-top: 16px;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  border-top: 1px solid rgb(144 204 223 / 13%);
}

.season-telemetry > span { min-width: 0; }
.season-telemetry small,
.season-telemetry strong { display: block; }
.season-telemetry small {
  color: #6e8da4;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.season-telemetry strong {
  margin-top: 4px;
  overflow: hidden;
  color: #e8f5fb;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.award-banner {
  margin-top: 20px;
  border-color: rgb(249 206 75 / 38%);
  background: linear-gradient(115deg, #382c0e, #17233a 64%, #0d3041);
  color: #fff;
  box-shadow: 0 18px 50px rgb(0 0 0 / 25%);
}

.award-banner strong { color: #fff; }
.award-banner p { color: #aebdca; font-size: 12px; }

.performance-strip {
  margin-top: 20px;
  padding: 8px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  border: 1px solid rgb(115 196 220 / 14%);
  border-radius: 20px;
  background: #0a1d33;
  box-shadow: 0 18px 48px rgb(0 0 0 / 22%);
  backdrop-filter: none;
}

.performance-strip article,
.performance-strip > button {
  min-width: 0;
  min-height: 72px;
  padding: 10px 14px;
  border: 1px solid rgb(125 202 225 / 9%);
  border-radius: 15px;
  background: rgb(255 255 255 / 3%);
}

.performance-strip article {
  gap: 11px;
  border-right: 1px solid rgb(125 202 225 / 9%);
}

.performance-strip__icon {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: linear-gradient(145deg, rgb(57 220 240 / 18%), rgb(17 118 184 / 14%));
  color: #5be1f1;
}

.performance-strip__icon svg,
.performance-strip > button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.performance-strip small {
  color: #809bb0;
  font-size: 12px;
}

.performance-strip strong {
  color: #f2f9fd;
  font-size: 21px;
}

.performance-strip > button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  color: #6fe7f4;
  font-size: 13px;
  font-weight: 850;
  cursor: pointer;
}

.experience-grid,
.home-grid {
  margin-top: 20px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  align-items: stretch;
}

.championship-card {
  min-width: 0;
  padding: 28px;
  border: 1px solid rgb(89 218 239 / 17%);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0, rgb(26 209 232 / 19%), transparent 30%),
    linear-gradient(150deg, #112a47, #081b31 62%, #061527);
  box-shadow: 0 26px 66px rgb(0 0 0 / 28%);
}

.championship-card::before {
  top: auto;
  right: -70px;
  bottom: -100px;
  background: radial-gradient(circle, rgb(28 197 225 / 14%), transparent 68%);
}

.championship-card__header h2 {
  color: #f6fbff;
  font-size: clamp(27px, 2.4vw, 35px);
}

.championship-card .section-kicker { margin-bottom: 5px; }
.live-pill {
  padding: 7px 10px;
  border-color: rgb(60 232 172 / 25%);
  background: rgb(30 211 143 / 8%);
  color: #62eeb7;
  font-size: 11px;
}

.player-rank-card {
  margin-top: 20px;
  padding: 14px;
  grid-template-columns: auto 1fr;
  border: 1px solid rgb(93 222 239 / 18%);
  border-radius: 18px;
  background: rgb(35 187 220 / 7%);
}

.player-rank-card__badge {
  min-width: 86px;
  border-radius: 14px;
  background: linear-gradient(145deg, #35d8ed, #159bd9);
  color: #03213a;
}

.player-rank-card__badge small { color: #075077; font-size: 10px; }
.player-rank-card__badge strong { font-size: 25px; }
.player-rank-card > div:nth-child(2) > span { color: #87a4b8; font-size: 12px; }
.player-rank-card > div:nth-child(2) > strong {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #f4fbff;
  font-size: 23px;
}

.player-rank-card > div:nth-child(2) svg {
  width: 19px;
  height: 19px;
  fill: none;
  stroke: #4be0ef;
  stroke-width: 1.9;
  stroke-linejoin: round;
}

.player-rank-card > small {
  color: #89a3b6;
  font-size: 12px;
}

.podium-preview {
  min-height: 177px;
  margin-top: 22px;
  gap: 9px;
}

.podium-preview__place {
  min-height: 136px;
  padding: 13px 7px;
  align-content: start;
  gap: 6px;
  border: 1px solid rgb(126 199 220 / 13%);
  border-radius: 16px;
  background: rgb(255 255 255 / 4%);
}

.podium-preview__place--1 {
  grid-column: 2;
  grid-row: 1;
  min-height: 174px;
  padding-top: 15px;
  border-color: rgb(249 204 71 / 43%);
  background: linear-gradient(180deg, rgb(250 205 75 / 17%), rgb(255 255 255 / 4%));
}

.podium-preview__place--2 {
  grid-column: 1;
  grid-row: 1;
  min-height: 152px;
  align-self: end;
}

.podium-preview__place--3 {
  grid-column: 3;
  grid-row: 1;
  min-height: 136px;
  align-self: end;
  border-color: rgb(230 152 90 / 24%);
  background: rgb(225 125 61 / 6%);
}

.podium-preview__medal {
  position: relative;
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgb(255 255 255 / 8%);
  color: #b6cad7;
}

.podium-preview__place--1 .podium-preview__medal { background: #eec148; color: #493403; }
.podium-preview__place--3 .podium-preview__medal { color: #e9a069; }
.podium-preview__medal svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.podium-preview__medal b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 16px;
  height: 16px;
  display: grid;
  place-items: center;
  border: 2px solid #0b1e34;
  border-radius: 50%;
  background: #fff;
  color: #10263d;
  font-size: 9px;
}

.podium-preview__avatar {
  width: 42px;
  height: 42px;
  border: 2px solid rgb(94 224 241 / 22%);
  border-radius: 13px;
  background: linear-gradient(145deg, #183e62, #1a99bd);
  color: #eafdff;
  font-size: 11px;
}

.podium-preview__place strong {
  max-width: 100%;
  color: #eff8fd;
  font-size: 13px;
}

.podium-preview__place small {
  display: flex;
  align-items: center;
  gap: 4px;
  color: #61deed;
  font-size: 12px;
}

.podium-preview__place small svg {
  width: 13px;
  height: 13px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.prize-preview { gap: 8px; }
.prize-preview > span {
  padding: 10px 7px;
  border: 1px solid rgb(230 190 65 / 13%);
  border-radius: 12px;
  background: rgb(239 197 68 / 6%);
}

.prize-preview small { color: #899fb0; font-size: 10px; }
.prize-preview strong { color: #f4d673; font-size: 13px; }

.championship-card__actions { margin-top: 18px; gap: 9px; }
.championship-card__actions button {
  min-height: 48px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-color: rgb(91 217 237 / 17%);
  border-radius: 13px;
  background: rgb(255 255 255 / 5%);
  color: #cce1ec;
  font-size: 12px;
}

.championship-card__actions button:first-child {
  border-color: #31cfeb;
  background: linear-gradient(135deg, #43d9ef, #159edb);
  color: #06213a;
}

.championship-card__actions svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.championship-card__update { color: #748fa4; font-size: 11px; }

.mission-card--compact {
  min-height: 100%;
  margin: 0;
  border: 1px solid rgb(116 223 248 / 24%);
  border-radius: 26px;
  background: #0b6aaa;
  box-shadow: 0 26px 66px rgb(0 0 0 / 28%);
}

.mission-card--compact .mission-card__shade {
  background:
    linear-gradient(90deg, rgb(4 27 54 / 92%) 0, rgb(4 36 69 / 70%) 45%, rgb(4 30 58 / 13%) 76%),
    linear-gradient(0deg, rgb(4 20 38 / 36%), transparent 55%);
}

.mission-card--compact .mission-card__content {
  width: 65%;
  padding: clamp(30px, 4vw, 52px);
}

.mission-card--compact h2 {
  margin: 10px 0 12px;
  font-size: clamp(31px, 3vw, 43px);
  letter-spacing: -.045em;
}

.mission-card--compact p:not(.section-kicker) { color: #c8dfea; font-size: 15px; }
.mission-card--compact .mission-button {
  min-height: 52px;
  margin-top: 25px;
  padding: 0 12px 0 18px;
  display: inline-flex;
  align-items: center;
  gap: 16px;
  border-color: #7bf0fa;
  border-radius: 14px;
  background: #eafcff;
  color: #083153;
  font-size: 13px;
  cursor: pointer;
  backdrop-filter: none;
}

.mission-button svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.home-grid { align-items: start; }

.ranking-snapshot,
.about-card--accordion {
  min-width: 0;
  margin: 0;
  padding: 28px;
  border: 1px solid rgb(154 214 231 / 18%);
  border-radius: 24px;
  background: linear-gradient(160deg, #f9fdff, #eaf5fa);
  box-shadow: 0 24px 60px rgb(0 0 0 / 25%);
}

.ranking-snapshot h2,
.about-card--accordion .about-card__intro h2 {
  margin-top: 6px;
  color: #102e4a;
  font-size: 30px;
  letter-spacing: -.045em;
  text-transform: none;
}

.ranking-snapshot .section-kicker,
.about-card--accordion .section-kicker { color: #0f9fca; }

.ranking-snapshot > header button {
  min-height: 44px;
  padding: 0 4px 0 12px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #087fae;
  font-size: 12px;
}

.ranking-snapshot > header button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
}

.ranking-card--snapshot {
  margin-top: 16px;
  padding: 6px;
  border-color: #d7e8f0;
  border-radius: 17px;
  background: rgb(255 255 255 / 72%);
}

.ranking-card--snapshot li {
  min-height: 51px;
  border-radius: 11px;
  border-bottom: 0;
}

.ranking-card--snapshot li:nth-child(even) { background: rgb(222 240 247 / 45%); }
.ranking-card--snapshot li.is-player { background: #d7f6fb; box-shadow: inset 3px 0 #11afd3; }
.ranking-card--snapshot strong { color: #1d3a54; font-size: 13px; }
.ranking-card--snapshot li > span:last-child {
  display: flex;
  align-items: center;
  gap: 5px;
  color: #087fae;
  font-size: 13px;
}

.ranking-card--snapshot li > span:last-child svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.ranking-snapshot__player {
  min-height: 48px;
  padding: 12px 15px;
  align-items: center;
  border-radius: 13px;
  background: #0b2947;
  font-size: 13px;
}

.ranking-snapshot__player strong { display: flex; align-items: center; gap: 7px; color: #69e7f4; }
.ranking-snapshot__player strong > i { width: 1px; height: 17px; background: rgb(255 255 255 / 15%); }
.ranking-snapshot__player svg {
  width: 15px;
  height: 15px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
}

.about-card--accordion .about-card__intro { padding: 0; }
.about-card--accordion .about-card__intro > p:last-child { color: #637b8e; font-size: 14px; }
.guide-accordion-grid {
  margin-top: 20px;
  grid-template-columns: 1fr;
  gap: 9px;
}

.guide-panel {
  border-color: #d5e6ed;
  border-radius: 15px;
  background: rgb(255 255 255 / 68%);
  transition: border-color .18s ease, box-shadow .18s ease;
}

.guide-panel[open] {
  border-color: #a6d9e8;
  box-shadow: 0 10px 25px rgb(34 91 119 / 8%);
}

.guide-panel summary {
  min-height: 70px;
  padding: 11px 13px;
  gap: 12px;
}

.guide-panel summary > .guide-icon {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: #dbf6fb;
  color: #078eb8;
}

.guide-panel summary > .guide-icon--danger { background: #ffeced; color: #db4851; }
.guide-panel summary > .guide-icon--power { background: #fff5d6; color: #b27a05; }
.guide-panel summary > .guide-icon--controls { background: #eae9ff; color: #6557c8; }
.guide-panel summary > .guide-icon svg,
.guide-panel summary > i svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.guide-panel summary strong { color: #17354f; font-size: 15px; }
.guide-panel summary small { color: #72889a; font-size: 12px; }
.guide-panel summary > i {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: #edf4f7;
  color: #70889b;
  font-size: 0;
  transition: transform .2s ease, background .2s ease;
}

.guide-panel[open] summary > i { background: #def5fa; color: #098bad; transform: rotate(180deg); }
.guide-panel__body { padding: 2px 10px 10px; gap: 8px; }
.guide-panel__body article { min-height: 72px; padding: 8px; border: 1px solid #e4eef2; }
.guide-panel__body img { width: 56px; height: 56px; }
.guide-panel__body h3 { font-size: 14px; }
.guide-panel__body p,
.guide-panel__copy p { color: #657b8c; font-size: 13px; }
.guide-chip-list { padding: 2px 13px 14px; gap: 7px; }
.guide-chip-list span { padding: 8px 10px; font-size: 12px; }
.guide-panel__copy { padding: 2px 15px 18px; }

.portal-main .demo-banner {
  margin-top: 20px;
  padding: 17px 19px;
  align-items: center;
  border-color: rgb(93 210 235 / 16%);
  border-radius: 16px;
  background: #0a1d32;
  color: #e9f6fb;
}

.portal-main .demo-banner > span {
  width: 40px;
  height: 40px;
  background: rgb(68 217 239 / 10%);
  color: #58dfef;
}

.portal-main .demo-banner svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.portal-main .demo-banner strong { font-size: 14px; }
.portal-main .demo-banner p { color: #849eb2; font-size: 12px; }
.portal-main .site-footer { padding-top: 30px; }
.portal-main .site-footer p { color: #668198; font-size: 12px; }

.portal-bottom-nav { display: none; }

@media (max-width: 1040px) {
  .portal-hero--v25 { grid-template-columns: minmax(0, 1.32fr) minmax(340px, .68fr); }
  .play-panel { padding: 28px; }
  .play-panel__copy h1 { font-size: 37px; }
  .season-telemetry { gap: 8px; }
  .experience-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 880px) {
  .desktop-nav { display: none; }
  .portal-hero--v25 { grid-template-columns: 1fr; }
  .campaign-banner { aspect-ratio: 16 / 8.6; }
  .play-panel__copy { padding-block: 30px; }
  .play-panel__actions { grid-template-columns: 1fr 1fr; }
  .season-telemetry { grid-template-columns: repeat(3, 1fr); }
  .experience-grid,
  .home-grid { grid-template-columns: 1fr; }
  .mission-card--compact { min-height: 390px; }
}

@media (max-width: 760px) {
  .portal-topbar {
    height: calc(68px + env(safe-area-inset-top));
    padding: calc(8px + env(safe-area-inset-top)) 12px 8px;
    backdrop-filter: blur(16px);
  }

  .portal-topbar .brand img { width: 43px; height: 43px; }
  .portal-topbar .brand > span { display: none; }
  .topbar-account { min-width: 0; gap: 6px; }
  .diamond-balance,
  .portal-topbar .balance-pill { min-height: 44px; border-radius: 13px; }
  .diamond-balance { padding: 5px 9px 5px 5px; gap: 7px; }
  .diamond-balance .account-icon { width: 32px; height: 32px; border-radius: 10px; }
  .diamond-balance .account-icon svg { width: 17px; height: 17px; }
  .diamond-balance strong { font-size: 14px; }
  .diamond-balance small { display: none; }
  .portal-topbar .balance-pill { min-width: 112px; padding: 5px 10px; }
  .portal-topbar .balance-pill span { font-size: 9px; }
  .portal-topbar .balance-pill strong { font-size: 13px; }
  .profile-shortcut { display: none; }

  .portal-main {
    inset: calc(68px + env(safe-area-inset-top)) 0 calc(76px + env(safe-area-inset-bottom));
    padding: 12px 12px 35px;
  }

  .portal-hero--v25 { gap: 0; }
  .campaign-banner {
    aspect-ratio: 3 / 2;
    border-radius: 22px;
    box-shadow: 0 20px 48px rgb(0 0 0 / 32%);
  }

  .campaign-banner .hero__slide { object-position: center center; }
  .play-panel {
    z-index: 3;
    margin: -18px 9px 0;
    padding: 24px 19px 19px;
    border-radius: 20px;
    box-shadow: 0 20px 48px rgb(0 0 0 / 36%);
  }

  .play-panel__topline > span { font-size: 11px; }
  .play-panel__topline > i { padding: 5px 8px; font-size: 10px; }
  .play-panel__copy { padding: 21px 0 19px; }
  .play-panel__copy h1 { font-size: clamp(30px, 9.2vw, 38px); line-height: 1; }
  .play-panel__copy p { margin-top: 12px; font-size: 14px; line-height: 1.48; }
  .play-panel__actions { grid-template-columns: 1fr; gap: 8px; }
  .primary-cta--play { min-height: 54px; }
  .secondary-cta--ranking { min-height: 46px; }
  .season-telemetry { margin-top: 14px; padding-top: 13px; }
  .season-telemetry small { font-size: 9px; }
  .season-telemetry strong { font-size: 12px; }

  .performance-strip {
    margin-top: 12px;
    padding: 7px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 7px;
    border-radius: 17px;
  }

  .performance-strip article,
  .performance-strip > button {
    min-height: 69px;
    padding: 9px 10px;
  }

  .performance-strip article { justify-content: flex-start; text-align: left; }
  .performance-strip__icon { display: grid; width: 36px; height: 36px; }
  .performance-strip small { font-size: 11px; }
  .performance-strip strong { font-size: 18px; }
  .performance-strip > button { grid-column: auto; font-size: 12px; }

  .experience-grid,
  .home-grid { margin-top: 12px; gap: 12px; }
  .experience-grid,
  .home-grid,
  .portal-main .demo-banner,
  .portal-main .site-footer { content-visibility: auto; contain-intrinsic-size: auto 520px; }

  .championship-card,
  .ranking-snapshot,
  .about-card--accordion { padding: 20px 17px; border-radius: 20px; }
  .championship-card__header h2 { font-size: 26px; }
  .live-pill { font-size: 10px; }
  .player-rank-card { margin-top: 16px; }
  .player-rank-card__badge { min-width: 78px; }
  .player-rank-card > div:nth-child(2) > strong { font-size: 21px; }
  .podium-preview { min-height: 159px; margin-top: 18px; }
  .podium-preview__place--1 { min-height: 157px; }
  .podium-preview__place--2 { min-height: 142px; }
  .podium-preview__place--3 { min-height: 128px; }
  .podium-preview__avatar { width: 38px; height: 38px; }
  .podium-preview__place strong { font-size: 12px; }
  .prize-preview strong { font-size: 12px; }

  .mission-card--compact { min-height: 340px; border-radius: 20px; }
  .mission-card--compact .mission-card__content { width: 82%; padding: 28px 22px; }
  .mission-card--compact h2 { font-size: 32px; }
  .mission-card--compact p:not(.section-kicker) { font-size: 14px; }
  .mission-card--compact .mission-button { min-height: 49px; margin-top: 20px; }

  .ranking-snapshot h2,
  .about-card--accordion .about-card__intro h2 { font-size: 26px; }
  .ranking-card--snapshot li { padding-inline: 10px; }
  .guide-accordion-grid { margin-top: 17px; }

  .portal-bottom-nav {
    height: calc(76px + env(safe-area-inset-bottom));
    padding: 6px 6px env(safe-area-inset-bottom);
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    align-items: stretch;
    border-top: 1px solid rgb(111 196 219 / 14%);
    background: rgb(5 19 35 / 96%);
    box-shadow: 0 -14px 38px rgb(0 0 0 / 30%);
    backdrop-filter: blur(18px) saturate(130%);
  }

  .portal-bottom-nav .nav-item,
  .portal-bottom-nav .diamond-button--play {
    width: 100%;
    min-width: 0;
    height: auto;
    min-height: 62px;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    border: 0;
    border-radius: 12px;
    background: transparent;
    color: #8099ad;
    box-shadow: none;
    cursor: pointer;
    transform: none;
  }

  .portal-bottom-nav .nav-item > span,
  .portal-bottom-nav .diamond-button--play > span {
    width: 34px;
    height: 30px;
    display: grid;
    place-items: center;
    border-radius: 10px;
    font-size: 0;
    animation: none;
  }

  .portal-bottom-nav svg {
    width: 22px;
    height: 22px;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.8;
    stroke-linecap: round;
    stroke-linejoin: round;
  }

  .portal-bottom-nav small {
    display: block;
    max-width: 100%;
    overflow: hidden;
    color: inherit;
    font-size: 11px;
    font-weight: 750;
    line-height: 1.1;
    text-overflow: ellipsis;
    text-transform: none;
    white-space: nowrap;
  }

  .portal-bottom-nav .nav-item.is-active { color: #55ddeb; transform: none; }
  .portal-bottom-nav .nav-item.is-active > span { background: rgb(63 218 239 / 11%); }
  .portal-bottom-nav .diamond-button--play { color: #eafcff; }
  .portal-bottom-nav .diamond-button--play > span {
    background: linear-gradient(145deg, #4ce2ee, #179fdb);
    color: #052039;
    box-shadow: 0 7px 17px rgb(17 175 216 / 21%);
  }
  .portal-bottom-nav .diamond-button--play svg { fill: currentColor; stroke: none; }
}

@media (max-width: 430px) {
  .portal-topbar { padding-inline: 10px; }
  .portal-topbar .brand img { width: 41px; height: 41px; }
  .topbar-account { gap: 5px; }
  .diamond-balance { padding-right: 8px; }
  .diamond-balance .account-icon { width: 30px; height: 30px; }
  .portal-topbar .balance-pill { min-width: 106px; padding-inline: 8px; }
  .portal-main { padding-inline: 10px; }
  .play-panel { margin-inline: 7px; }
  .play-panel__copy h1 { font-size: clamp(29px, 9vw, 35px); }
  .play-panel__copy p { font-size: 13px; }
  .season-telemetry { gap: 5px; }
  .season-telemetry > span:nth-child(2) { text-align: center; }
  .season-telemetry > span:nth-child(3) { text-align: right; }
  .performance-strip__icon { width: 33px; height: 33px; }
  .performance-strip__icon svg { width: 18px; height: 18px; }
  .performance-strip small { font-size: 10px; }
  .performance-strip strong { font-size: 17px; }
  .championship-card__actions { grid-template-columns: 1fr; }
  .championship-card__actions button { font-size: 12px; }
  .podium-preview__place { padding-inline: 4px; }
  .podium-preview__place small { font-size: 11px; }
  .prize-preview > span { padding-inline: 3px; }
  .prize-preview small { font-size: 9px; }
  .prize-preview strong { font-size: 11px; }
  .mission-card--compact { min-height: 330px; }
  .mission-card--compact .mission-card__content { width: 88%; }
  .ranking-snapshot > header button { padding-left: 7px; }
  .ranking-card--snapshot li { grid-template-columns: 34px 1fr auto; }
  .portal-bottom-nav small { font-size: 10px; }
}

@media (max-width: 355px) {
  .portal-topbar .balance-pill { min-width: 98px; }
  .portal-topbar .balance-pill span svg { display: none; }
  .portal-topbar .balance-pill strong { font-size: 12px; }
  .diamond-balance .account-icon { display: none; }
  .performance-strip article,
  .performance-strip > button { padding-inline: 8px; }
  .performance-strip__icon { display: none; }
  .season-telemetry small { font-size: 8px; }
  .season-telemetry strong { font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .primary-cta--play,
  .secondary-cta--ranking,
  .guide-panel,
  .guide-panel summary > i { transition: none; }
}

/* Guia visual de poderes */

.power-guide {
  margin-top: 20px;
  padding: 34px;
}

.power-guide__header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
}

.power-guide__header .about-card__intro { max-width: 720px; }
.effect-guide {
  margin-top: 30px;
  padding-top: 27px;
  border-top: 1px solid #d8e8ef;
}

.effect-guide > header,
.effect-guide > header > div {
  display: flex;
  align-items: center;
}

.effect-guide > header { justify-content: space-between; gap: 16px; }
.effect-guide > header > div { gap: 12px; }
.effect-guide > header > div > span {
  width: 46px;
  height: 46px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #3bd9eb, #139acc);
  color: #04213a;
  box-shadow: 0 10px 24px rgb(21 163 204 / 18%);
}

.effect-guide > header svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effect-guide > header p,
.effect-guide > header h3 { margin: 0; }
.effect-guide > header p {
  color: #1595bb;
  font-size: 11px;
  font-weight: 950;
  letter-spacing: .13em;
}

.effect-guide > header h3 {
  margin-top: 3px;
  color: #17334b;
  font-size: 21px;
  letter-spacing: -.03em;
}

.effect-guide > header > small {
  color: #708798;
  font-size: 12px;
  font-weight: 750;
}

.effect-guide--trap > header > div > span {
  background: linear-gradient(145deg, #ff7c86, #df3f55);
  color: #fff;
  box-shadow: 0 10px 24px rgb(213 55 79 / 18%);
}

.effect-guide--trap > header p { color: #d5485b; }

.effect-card-grid {
  margin-top: 17px;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.effect-card-grid--traps { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.effect-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid #dbeaf0;
  border-radius: 17px;
  background: #fff;
  box-shadow: 0 10px 28px rgb(21 67 93 / 7%);
  transition: transform .2s ease, box-shadow .2s ease;
}

.effect-card:hover { transform: translateY(-3px); box-shadow: 0 17px 35px rgb(21 67 93 / 12%); }

.effect-card__media {
  position: relative;
  aspect-ratio: 16 / 9.5;
  overflow: hidden;
  background: linear-gradient(145deg, #102f4d, #0b6f9e);
}

.effect-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(5 24 42 / 44%), transparent 56%);
}

.effect-card__media > img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center 46%;
  transition: transform .35s ease;
}

.effect-card:hover .effect-card__media > img { transform: scale(1.035); }

.effect-card__media > span {
  position: absolute;
  z-index: 2;
  bottom: 10px;
  left: 10px;
  width: 40px;
  height: 40px;
  display: grid;
  place-items: center;
  border: 1px solid rgb(255 255 255 / 68%);
  border-radius: 12px;
  background: rgb(239 253 255 / 91%);
  color: #087fa8;
  box-shadow: 0 8px 22px rgb(0 0 0 / 19%);
}

.effect-card__media > span svg {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.effect-card__media > small {
  position: absolute;
  z-index: 2;
  top: 9px;
  right: 9px;
  padding: 6px 8px;
  border: 1px solid rgb(255 255 255 / 22%);
  border-radius: 9px;
  background: rgb(5 25 43 / 74%);
  color: #eafcff;
  font-size: 11px;
  font-weight: 900;
}

.effect-card__copy { padding: 15px 15px 17px; }
.effect-card__copy p,
.effect-card__copy h4,
.effect-card__copy > span { margin: 0; }
.effect-card__copy p {
  color: #1495ba;
  font-size: 10px;
  font-weight: 950;
  letter-spacing: .09em;
}

.effect-card__copy h4 {
  margin-top: 4px;
  color: #17354e;
  font-size: 16px;
  letter-spacing: -.02em;
}

.effect-card__copy > span {
  display: block;
  margin-top: 7px;
  color: #677d8e;
  font-size: 13px;
  line-height: 1.43;
}

.effect-card--phase .effect-card__media > img { opacity: .66; filter: hue-rotate(42deg) saturate(1.35); }
.effect-card--slow .effect-card__media > img { filter: saturate(.62) contrast(1.04) hue-rotate(16deg); }
.effect-card--revive .effect-card__media { background: radial-gradient(circle, #58e9f2, #1477b7 68%, #0b2747); }
.effect-card--revive .effect-card__media > img { object-fit: contain; object-position: center 28%; filter: drop-shadow(0 12px 16px rgb(0 0 0 / 28%)); transform: scale(1.18); }
.effect-card--revive:hover .effect-card__media > img { transform: scale(1.22); }
.effect-card--color-trap .effect-card__media > img { filter: invert(1) hue-rotate(158deg) saturate(1.45); }
.effect-card--speed-trap .effect-card__media > img { filter: saturate(1.45) contrast(1.12); transform: scale(1.08); }
.effect-card--speed-trap:hover .effect-card__media > img { transform: scale(1.12); }
.effect-card--controls-trap .effect-card__media > img { transform: scaleX(-1); }
.effect-card--controls-trap:hover .effect-card__media > img { transform: scaleX(-1) scale(1.035); }
.effect-guide--trap .effect-card { border-color: #efd9dc; }
.effect-guide--trap .effect-card__media > span { color: #d33d54; }
.effect-guide--trap .effect-card__copy p { color: #d34658; }

.guide-accordion-grid--basics {
  margin-top: 28px;
  padding-top: 27px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid #d8e8ef;
}

.award-banner__icon svg,
.reward-podium .podium-place__medal svg,
.leaderboard-medal svg,
.leaderboard-row__score svg {
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.award-banner__icon { color: #a97607; }
.reward-podium .podium-place__medal {
  position: relative;
  width: 43px;
  height: 43px;
  display: grid;
  place-items: center;
  margin-inline: auto;
  border-radius: 13px;
  background: #f3c84f;
  color: #543b04;
}

.reward-podium .podium-place:nth-child(2) .podium-place__medal { background: #dce7ed; color: #506674; }
.reward-podium .podium-place:nth-child(3) .podium-place__medal { background: #efb07e; color: #6d371c; }
.reward-podium .podium-place__medal > b {
  position: absolute;
  right: -5px;
  bottom: -5px;
  width: 18px;
  height: 18px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #173956;
  color: #fff;
  font-size: 9px;
}

.leaderboard-medal {
  position: relative;
  width: 27px;
  height: 27px;
  display: inline-grid;
  place-items: center;
  border-radius: 9px;
  background: #f3c84f;
  color: #573d04;
  font-style: normal;
}

.leaderboard-medal--2 { background: #e3edf2; color: #617481; }
.leaderboard-medal--3 { background: #f3c19d; color: #76452a; }
.leaderboard-medal svg { width: 15px; height: 15px; }
.leaderboard-medal > b {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 14px;
  height: 14px;
  display: grid;
  place-items: center;
  border: 2px solid #fff;
  border-radius: 50%;
  background: #173956;
  color: #fff;
  font-size: 7px;
}

.leaderboard-row__score {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}

.leaderboard-row__score svg { width: 14px; height: 14px; }

@media (max-width: 880px) {
  .power-guide { padding: 27px; }
  .effect-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .effect-card-grid--traps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 760px) {
  .power-guide { margin-top: 12px; padding: 23px 16px; border-radius: 20px; }
  .power-guide__header { align-items: flex-start; }
  .effect-guide { margin-top: 23px; padding-top: 21px; }
  .effect-guide > header > div > span { width: 42px; height: 42px; }
  .effect-guide > header h3 { font-size: 19px; }
  .effect-guide > header > small { font-size: 10px; }
  .effect-card-grid,
  .effect-card-grid--traps {
    margin-inline: -16px;
    padding: 0 16px 8px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    overscroll-behavior-inline: contain;
  }
  .effect-card-grid::-webkit-scrollbar { display: none; }
  .effect-card { width: min(78vw, 290px); flex: 0 0 min(78vw, 290px); scroll-snap-align: start; }
  .effect-card:hover { transform: none; }
  .effect-card__copy > span { font-size: 12px; }
  .guide-accordion-grid--basics { margin-top: 20px; padding-top: 20px; grid-template-columns: 1fr; }
}

@media (max-width: 430px) {
  .effect-guide > header { align-items: flex-start; }
  .effect-guide > header > small { max-width: 92px; padding-top: 4px; text-align: right; }
}

@media (prefers-reduced-motion: reduce) {
  .effect-card,
  .effect-card__media > img { transition: none; }
}

/* Arena de jogo e demonstrações reais v26 */
.portal-hero--v26 {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.portal-hero--v26 .campaign-banner {
  width: 100%;
  height: clamp(350px, 43vw, 520px);
  aspect-ratio: auto;
  flex: 0 0 auto;
  border-color: rgb(85 225 255 / 42%);
  background: #03152c;
  box-shadow: 0 28px 85px rgb(0 0 0 / 42%), 0 0 0 1px rgb(77 218 248 / 8%);
}

.portal-hero--v26 .campaign-banner::before {
  content: "";
  position: absolute;
  z-index: 2;
  top: -65%;
  left: -25%;
  width: 24%;
  height: 230%;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgb(166 250 255 / 20%), transparent);
  transform: rotate(18deg);
  animation: banner-scan 7.8s ease-in-out infinite;
}

.portal-hero--v26 .campaign-banner .hero__slide {
  object-position: center 51%;
}

.campaign-banner__status {
  position: absolute;
  z-index: 4;
  top: 22px;
  left: 22px;
  min-width: 176px;
  padding: 10px 14px;
  display: grid;
  gap: 2px;
  border: 1px solid rgb(135 237 255 / 32%);
  border-radius: 13px;
  background: rgb(3 20 41 / 72%);
  color: #fff;
  box-shadow: 0 13px 34px rgb(0 0 0 / 28%);
  backdrop-filter: blur(12px) saturate(140%);
}

.campaign-banner__status span {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #72f0bd;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .11em;
}

.campaign-banner__status span i,
.power-guide__live i,
.effect-demo-live i {
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #55ecad;
  box-shadow: 0 0 0 4px rgb(85 236 173 / 13%), 0 0 14px #55ecad;
  animation: live-pulse 1.7s ease-in-out infinite;
}

.campaign-banner__status strong {
  font-size: 14px;
  letter-spacing: .04em;
}

.portal-hero--v26 .play-panel {
  z-index: 5;
  width: min(calc(100% - 64px), 1130px);
  min-height: 206px;
  margin: -54px auto 0;
  padding: 25px 27px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(230px, .56fr) minmax(250px, .68fr);
  grid-template-rows: auto 1fr;
  grid-template-areas:
    "topline actions telemetry"
    "copy actions telemetry";
  align-items: center;
  column-gap: 28px;
  border-color: rgb(101 231 251 / 27%);
  background:
    radial-gradient(circle at 12% -10%, rgb(48 224 241 / 21%), transparent 36%),
    linear-gradient(145deg, rgb(16 47 78 / 98%), rgb(5 21 40 / 98%));
  box-shadow: 0 28px 70px rgb(0 0 0 / 43%), inset 0 1px rgb(255 255 255 / 7%);
  backdrop-filter: blur(18px) saturate(130%);
}

.portal-hero--v26 .play-panel__topline { grid-area: topline; align-self: start; }
.portal-hero--v26 .play-panel__copy { grid-area: copy; margin: 0; padding: 11px 0 0; align-self: start; }
.portal-hero--v26 .play-panel__copy h1 { font-size: clamp(31px, 3vw, 43px); }
.portal-hero--v26 .play-panel__copy p { max-width: 470px; margin-top: 10px; font-size: 14px; }
.portal-hero--v26 .play-panel__actions { grid-area: actions; }
.portal-hero--v26 .season-telemetry {
  grid-area: telemetry;
  height: 100%;
  margin: 0;
  padding: 0 0 0 25px;
  grid-template-columns: 1fr;
  align-content: center;
  gap: 13px;
  border-top: 0;
  border-left: 1px solid rgb(144 204 223 / 13%);
}

.portal-hero--v26 .season-telemetry > span {
  padding-bottom: 9px;
  border-bottom: 1px solid rgb(144 204 223 / 9%);
}

.portal-hero--v26 .season-telemetry > span:last-child { padding-bottom: 0; border-bottom: 0; }
.portal-hero--v26 .season-telemetry strong { font-size: 15px; }

.mission-card__media {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.mission-card__media img { object-position: center center; }
.home-grid { grid-template-columns: 1fr; }

.power-guide__live {
  min-height: 42px;
  padding: 0 13px;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex: 0 0 auto;
  border: 1px solid #b7dfea;
  border-radius: 12px;
  background: #e2f7fb;
  color: #087fa7;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .08em;
}

.effect-card__media > button {
  position: absolute;
  z-index: 4;
  right: 10px;
  bottom: 10px;
  min-width: 42px;
  min-height: 39px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  border: 1px solid rgb(255 255 255 / 70%);
  border-radius: 12px;
  background: rgb(4 30 51 / 86%);
  color: #e9fcff;
  box-shadow: 0 9px 24px rgb(0 0 0 / 24%);
  cursor: pointer;
  backdrop-filter: blur(9px);
  transition: background .18s ease, transform .18s ease;
}

.effect-card__media > button:hover,
.effect-card__media > button:focus-visible {
  background: #22c9e4;
  color: #06223b;
  transform: translateY(-2px);
}

.effect-card__media > button svg {
  width: 15px;
  height: 15px;
  fill: currentColor;
  stroke: none;
}

.effect-card__media > button b {
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .07em;
  white-space: nowrap;
}

.effect-card__media > span { bottom: 10px; }
.effect-card--revive .effect-card__media > img { object-fit: cover; object-position: center 48%; filter: none; transform: none; }
.effect-card--revive:hover .effect-card__media > img { transform: scale(1.035); }

.modal--effect-demo {
  width: min(100%, 860px);
  max-height: min(900px, calc(100dvh - 30px));
  overflow: auto;
  border-color: rgb(91 226 246 / 27%);
  background: #071a2e;
  color: #fff;
}

.modal--effect-demo .modal__header {
  border-bottom: 1px solid rgb(105 219 239 / 13%);
  background: rgb(7 26 46 / 97%);
}

.modal--effect-demo .modal__header p { color: #5de2ef; }
.modal--effect-demo .modal__header h2 { color: #f8fdff; }
.modal--effect-demo-trap { border-color: rgb(255 101 115 / 32%); }
.modal--effect-demo-trap .modal__header p { color: #ff8f98; }
.modal--effect-demo .icon-button { border-color: rgb(129 211 231 / 16%); background: rgb(255 255 255 / 5%); color: #cce1eb; }
.modal--effect-demo .modal__body { padding: 19px; }

.effect-demo-player {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border: 1px solid rgb(102 223 241 / 24%);
  border-radius: 20px;
  background: #e7f1f6;
  box-shadow: 0 24px 52px rgb(0 0 0 / 30%);
  isolation: isolate;
}

.effect-demo-player canvas {
  width: 100%;
  height: 100%;
  display: block;
  pointer-events: none;
}

.effect-demo-player::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%), inset 0 -74px 80px rgb(3 17 31 / 28%);
}

.effect-demo-player.is-color-trap-demo::before {
  content: "";
  position: absolute;
  z-index: 2;
  inset: 0;
  pointer-events: none;
  background: #fff;
  mix-blend-mode: difference;
  opacity: .94;
}

.effect-demo-player.is-speed-trap-demo canvas { filter: saturate(1.28) contrast(1.08); }
.effect-demo-player.is-controls-trap-demo { box-shadow: 0 24px 52px rgb(117 21 45 / 28%), inset 0 0 0 2px rgb(255 76 99 / 26%); }

.effect-demo-loading {
  position: absolute;
  z-index: 7;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 12px;
  background: linear-gradient(145deg, #0d3556, #071a30);
  color: #dffaff;
}

.effect-demo-loading[hidden] { display: none; }
.effect-demo-loading i {
  width: 34px;
  height: 34px;
  border: 3px solid rgb(102 225 243 / 18%);
  border-top-color: #5de1ee;
  border-radius: 50%;
  animation: effect-loader .8s linear infinite;
}

.effect-demo-loading strong { font-size: 10px; letter-spacing: .12em; }
.effect-demo-live,
.effect-demo-speed,
.effect-demo-directions,
.effect-demo-hud { position: absolute; z-index: 5; }

.effect-demo-live {
  top: 13px;
  left: 13px;
  padding: 7px 9px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid rgb(255 255 255 / 34%);
  border-radius: 9px;
  background: rgb(4 24 43 / 71%);
  color: #eaffff;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .08em;
  backdrop-filter: blur(9px);
}

.effect-demo-speed {
  top: 13px;
  right: 13px;
  padding: 7px 9px;
  border: 1px solid rgb(255 255 255 / 33%);
  border-radius: 9px;
  background: rgb(4 24 43 / 71%);
  color: #eaffff;
  font-size: 11px;
  font-weight: 900;
  font-variant-numeric: tabular-nums;
  backdrop-filter: blur(9px);
}

.effect-demo-hud {
  right: 14px;
  bottom: 14px;
  left: 14px;
  padding: 11px 12px;
  display: grid;
  grid-template-columns: auto auto;
  align-items: center;
  justify-content: space-between;
  gap: 6px 14px;
  border: 1px solid rgb(255 255 255 / 25%);
  border-radius: 12px;
  background: rgb(4 24 43 / 76%);
  backdrop-filter: blur(10px) saturate(130%);
}

.effect-demo-hud > span { color: #8fdfea; font-size: 9px; font-weight: 900; letter-spacing: .08em; }
.effect-demo-hud > strong { color: #fff; font-size: 12px; font-variant-numeric: tabular-nums; }
.effect-demo-hud > i {
  grid-column: 1 / -1;
  height: 4px;
  overflow: hidden;
  border-radius: 999px;
  background: rgb(255 255 255 / 12%);
}
.effect-demo-hud > i > b { width: 0; height: 100%; display: block; border-radius: inherit; background: linear-gradient(90deg, #43dff0, #5cf2b6); transition: width .1s linear; }

.effect-demo-directions {
  top: 50%;
  left: 50%;
  padding: 8px 11px;
  display: flex;
  gap: 10px;
  border: 1px solid rgb(255 255 255 / 43%);
  border-radius: 10px;
  background: rgb(72 6 29 / 72%);
  color: #fff;
  font-size: 10px;
  font-weight: 900;
  transform: translate(-50%, -50%);
  backdrop-filter: blur(8px);
}
.effect-demo-directions strong { color: #ffb1bb; }

.effect-demo-copy {
  margin-top: 15px;
  padding: 15px;
  display: flex;
  align-items: center;
  gap: 13px;
  border: 1px solid rgb(105 217 238 / 13%);
  border-radius: 15px;
  background: rgb(255 255 255 / 4%);
}

.effect-demo-copy > span {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: linear-gradient(145deg, #4ae0ef, #149fd8);
  color: #062039;
}

.modal--effect-demo-trap .effect-demo-copy > span { background: linear-gradient(145deg, #ff929a, #e33c54); color: #fff; }
.effect-demo-copy svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.effect-demo-copy small { color: #62dfea; font-size: 10px; font-weight: 900; letter-spacing: .09em; }
.modal--effect-demo-trap .effect-demo-copy small { color: #ff909a; }
.effect-demo-copy p { margin: 5px 0 0; color: #b4c8d5; font-size: 14px; line-height: 1.48; }
.effect-demo-note { margin: 12px 3px 0; color: #7f9aab; font-size: 12px; line-height: 1.45; }
.effect-demo-actions { margin-top: 15px; display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.effect-demo-actions button {
  min-height: 50px;
  padding: 0 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 1px solid rgb(101 216 237 / 18%);
  border-radius: 13px;
  background: rgb(255 255 255 / 5%);
  color: #d9edf5;
  font-size: 12px;
  font-weight: 850;
  cursor: pointer;
}
.effect-demo-actions button:last-child { border-color: #66e8f2; background: linear-gradient(135deg, #4be0ee, #17a8df); color: #05223a; }
.effect-demo-actions button:disabled { cursor: wait; opacity: .5; }
.effect-demo-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.effect-demo-actions button:last-child svg { fill: currentColor; stroke: none; }

@keyframes banner-scan {
  0%, 34% { opacity: 0; transform: translateX(-35vw) rotate(18deg); }
  48% { opacity: 1; }
  72%, 100% { opacity: 0; transform: translateX(150vw) rotate(18deg); }
}

@keyframes live-pulse { 50% { opacity: .48; transform: scale(.78); } }
@keyframes effect-loader { to { transform: rotate(360deg); } }

@media (max-width: 1040px) {
  .portal-hero--v26 .play-panel {
    grid-template-columns: minmax(0, 1fr) minmax(230px, .62fr);
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "topline actions"
      "copy actions"
      "telemetry telemetry";
  }
  .portal-hero--v26 .season-telemetry {
    height: auto;
    margin-top: 16px;
    padding: 14px 0 0;
    grid-template-columns: repeat(3, 1fr);
    border-top: 1px solid rgb(144 204 223 / 13%);
    border-left: 0;
  }
  .portal-hero--v26 .season-telemetry > span { padding: 0; border: 0; }
}

@media (max-width: 760px) {
  .portal-main { padding-top: 10px; }
  .portal-hero--v26 .campaign-banner {
    height: clamp(215px, 57vw, 270px);
    border-radius: 19px;
  }
  .portal-hero--v26 .campaign-banner .hero__slide { object-position: center 50%; }
  .campaign-banner__status { top: 13px; left: 13px; min-width: 0; padding: 8px 10px; border-radius: 10px; }
  .campaign-banner__status span { font-size: 8px; }
  .campaign-banner__status strong { font-size: 11px; }
  .portal-hero--v26 .play-panel {
    width: calc(100% - 14px);
    min-height: 0;
    margin: -14px auto 0;
    padding: 18px 16px 16px;
    grid-template-columns: 1fr;
    grid-template-rows: auto;
    grid-template-areas: "topline" "copy" "actions" "telemetry";
    row-gap: 0;
    border-radius: 18px;
  }
  .portal-hero--v26 .play-panel__copy { padding: 13px 0 14px; }
  .portal-hero--v26 .play-panel__copy h1 { font-size: clamp(27px, 8vw, 33px); }
  .portal-hero--v26 .play-panel__copy p { margin-top: 8px; font-size: 13px; line-height: 1.4; }
  .portal-hero--v26 .play-panel__actions { grid-template-columns: 1fr 1fr; }
  .portal-hero--v26 .primary-cta--play,
  .portal-hero--v26 .secondary-cta--ranking { min-height: 49px; border-radius: 13px; font-size: 12px; }
  .portal-hero--v26 .primary-cta--play svg { width: 34px; height: 34px; }
  .portal-hero--v26 .season-telemetry { margin-top: 13px; padding-top: 12px; gap: 5px; }
  .portal-hero--v26 .season-telemetry strong { font-size: 11px; }

  .experience-grid { content-visibility: visible; contain-intrinsic-size: none; }
  .mission-card--compact {
    min-height: 0;
    display: grid;
    grid-template-rows: auto auto;
    overflow: hidden;
  }
  .mission-card--compact .mission-card__media {
    position: relative;
    inset: auto;
    grid-row: 1;
    aspect-ratio: 960 / 587;
    background: #20b7ee;
  }
  .mission-card--compact .mission-card__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
  }
  .mission-card--compact .mission-card__shade { display: none; }
  .mission-card--compact .mission-card__content {
    grid-row: 2;
    width: 100%;
    padding: 22px 18px 20px;
    background: linear-gradient(145deg, #0c3153, #071b31);
  }
  .mission-card--compact h2 { margin-block: 7px 8px; font-size: 28px; }
  .mission-card--compact p:not(.section-kicker) { font-size: 13px; line-height: 1.45; }
  .mission-card--compact .mission-button { width: 100%; min-height: 48px; margin-top: 16px; justify-content: space-between; }

  .power-guide__header { display: block; }
  .power-guide__live { margin-top: 14px; }
  .effect-card__media > button { min-width: 40px; min-height: 40px; padding-inline: 12px; }
  .effect-card__media > button b { display: inline; }
  .modal--effect-demo {
    width: 100%;
    max-height: 94dvh;
    border-radius: 24px;
  }
  .modal--effect-demo .modal__body { padding: 13px; }
  .effect-demo-player { border-radius: 16px; }
  .effect-demo-live,
  .effect-demo-speed,
  .effect-demo-hud,
  .effect-demo-directions {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgb(4 24 43 / 91%);
  }
  .effect-demo-player.is-speed-trap-demo canvas { filter: none; }
  .effect-demo-live { top: 9px; left: 9px; font-size: 8px; }
  .effect-demo-speed { top: 9px; right: 9px; font-size: 10px; }
  .effect-demo-hud { right: 9px; bottom: 9px; left: 9px; padding: 9px 10px; }
  .effect-demo-copy { margin-top: 11px; padding: 12px; align-items: flex-start; }
  .effect-demo-copy > span { width: 42px; height: 42px; border-radius: 12px; }
  .effect-demo-copy p { font-size: 13px; }
  .effect-demo-actions { grid-template-columns: 1fr; gap: 7px; }
  .effect-demo-actions button { min-height: 47px; }
}

@media (max-width: 760px) and (max-height: 650px) {
  .modal--effect-demo { max-height: calc(100dvh - 20px); border-radius: 18px; }
  .modal--effect-demo .modal__header { padding: 14px 15px 10px; }
  .modal--effect-demo .modal__body { padding: 10px 13px 13px; }
  .effect-demo-player { aspect-ratio: 2 / 1; }
  .effect-demo-copy { margin-top: 8px; padding: 10px; }
  .effect-demo-copy > span { width: 36px; height: 36px; }
  .effect-demo-copy p { font-size: 12px; }
  .effect-demo-note { margin-top: 8px; font-size: 10px; }
  .effect-demo-actions { grid-template-columns: 1fr 1fr; gap: 6px; }
  .effect-demo-actions button { min-height: 44px; padding-inline: 6px; font-size: 10px; }
}

@media (max-width: 430px) {
  .portal-hero--v26 .play-panel__actions { grid-template-columns: 1fr; }
  .portal-hero--v26 .secondary-cta--ranking { min-height: 44px; }
  .effect-card__media > button b { display: none; }
  .effect-card__media > button { min-width: 40px; padding: 0; }
  .effect-demo-live { max-width: 122px; line-height: 1.15; }
}

@media (prefers-reduced-motion: reduce) {
  .portal-hero--v26 .campaign-banner::before,
  .campaign-banner__status span i,
  .power-guide__live i,
  .effect-demo-live i,
  .effect-demo-loading i { animation: none; }
  .effect-card__media > button,
  .effect-demo-hud > i > b { transition: none; }
}

/* Acabamento final da interface pré-jogo v29 */
.diamond-balance {
  min-width: 108px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 9px;
}

.diamond-balance > .account-icon {
  grid-row: auto;
  flex: 0 0 auto;
  transform: none;
}

.diamond-balance > .diamond-balance__copy {
  min-width: 0;
  display: grid;
  align-content: center;
  justify-items: start;
  gap: 3px;
  grid-row: auto;
  color: inherit;
  font-size: inherit;
  text-shadow: none;
  transform: none;
}

.diamond-balance__copy small,
.diamond-balance__copy strong {
  display: block;
  margin: 0;
  line-height: 1;
  text-align: left;
}

.diamond-balance__copy small {
  color: #8ea9bb;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.diamond-balance__copy strong {
  color: #f7fdff;
  font-size: 17px;
  font-variant-numeric: tabular-nums;
}

.mission-card--compact {
  min-height: 0;
  display: grid;
  grid-template-rows: auto 1fr;
  overflow: hidden;
  border-color: rgb(92 225 244 / 31%);
  background: linear-gradient(145deg, #0b3154, #06192d);
  box-shadow: 0 28px 68px rgb(0 0 0 / 32%), inset 0 1px rgb(255 255 255 / 7%);
}

.mission-card--compact .mission-card__media {
  position: relative;
  inset: auto;
  z-index: 1;
  grid-row: 1;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: #071c43;
}

.mission-card--compact .mission-card__media::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(0deg, rgb(5 22 43 / 54%), transparent 42%),
    linear-gradient(125deg, rgb(25 218 235 / 8%), transparent 40%);
}

.mission-card--compact .mission-card__media picture,
.mission-card--compact .mission-card__media img {
  width: 100%;
  height: 100%;
  display: block;
}

.mission-card--compact .mission-card__media img {
  position: static;
  object-fit: cover;
  object-position: center 51%;
  transition: transform .5s ease;
}

.mission-card--compact:hover .mission-card__media img { transform: scale(1.018); }
.mission-card--compact .mission-card__shade { display: none; }

.mission-card__art-badge {
  position: absolute;
  z-index: 2;
  bottom: 14px;
  left: 14px;
  min-width: 132px;
  padding: 9px 11px;
  display: grid;
  gap: 4px;
  border: 1px solid rgb(142 239 252 / 39%);
  border-radius: 12px;
  background: rgb(5 24 51 / 76%);
  color: #fff;
  box-shadow: 0 10px 26px rgb(0 0 0 / 25%);
  backdrop-filter: blur(12px) saturate(125%);
}

.mission-card__art-badge small {
  color: #8ceefa;
  font-size: 8px;
  font-weight: 900;
  letter-spacing: .1em;
}

.mission-card__art-badge strong {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 17px;
}

.mission-card__art-badge svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: #55e4f2;
  stroke-width: 2;
}

.mission-card--compact .mission-card__content {
  position: relative;
  z-index: 2;
  grid-row: 2;
  width: 100%;
  height: auto;
  padding: 24px 25px 25px;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  background:
    radial-gradient(circle at 100% 0, rgb(44 213 234 / 14%), transparent 35%),
    linear-gradient(145deg, #0b3153, #06192d 72%);
}

.mission-card--compact h2 { margin: 8px 0 9px; font-size: clamp(29px, 3vw, 37px); }
.mission-card--compact p:not(.section-kicker) { max-width: 540px; color: #c5dce8; font-size: 14px; line-height: 1.5; }

.mission-card__facts {
  margin-top: 15px;
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.mission-card__facts span {
  min-height: 31px;
  padding: 0 10px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgb(112 220 237 / 18%);
  border-radius: 9px;
  background: rgb(255 255 255 / 5%);
  color: #afd0de;
  font-size: 10px;
  font-weight: 750;
}

.mission-card__facts svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: #4de0ec;
  stroke-width: 2;
}

.mission-card--compact .mission-button {
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  border: 1px solid #8af2f8;
  background: linear-gradient(135deg, #e9ffff, #c7f8fb);
  color: #082742;
  box-shadow: 0 11px 28px rgb(20 205 226 / 18%);
}

.effect-card {
  border-color: #cfe5ed;
  box-shadow: 0 13px 32px rgb(16 61 91 / 10%);
}

.effect-card__media { aspect-ratio: 16 / 9; }
.effect-card__media::after { background: linear-gradient(0deg, rgb(4 19 34 / 63%), transparent 52%); }
.effect-card__media > img { object-position: center center; image-rendering: auto; }
.effect-card--phase .effect-card__media > img,
.effect-card--slow .effect-card__media > img,
.effect-card--revive .effect-card__media > img,
.effect-card--color-trap .effect-card__media > img,
.effect-card--speed-trap .effect-card__media > img,
.effect-card--controls-trap .effect-card__media > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1;
  filter: none;
  transform: none;
}

.effect-card--phase:hover .effect-card__media > img,
.effect-card--slow:hover .effect-card__media > img,
.effect-card--revive:hover .effect-card__media > img,
.effect-card--color-trap:hover .effect-card__media > img,
.effect-card--speed-trap:hover .effect-card__media > img,
.effect-card--controls-trap:hover .effect-card__media > img { transform: scale(1.035); }

.effect-card__live {
  position: absolute;
  z-index: 3;
  top: 9px;
  left: 9px;
  min-height: 25px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid rgb(255 255 255 / 29%);
  border-radius: 8px;
  background: rgb(4 26 45 / 78%);
  color: #eaffff;
  font-size: 8px;
  font-style: normal;
  font-weight: 950;
  letter-spacing: .07em;
  box-shadow: 0 7px 18px rgb(0 0 0 / 18%);
  backdrop-filter: blur(8px);
}

.effect-card__live i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5df1b8;
  box-shadow: 0 0 0 4px rgb(93 241 184 / 12%);
}

.effect-guide--trap .effect-card__live i { background: #ff7888; box-shadow: 0 0 0 4px rgb(255 120 136 / 12%); }
.effect-card__copy { min-height: 148px; }

.track-manuals {
  margin-top: 30px;
  padding-top: 29px;
  display: grid;
  gap: 18px;
  border-top: 1px solid #d7e8ef;
}

.track-manual {
  --manual-accent: #13b8d9;
  --manual-soft: #e4faff;
  min-width: 0;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(300px, .82fr) minmax(0, 1.18fr);
  border: 1px solid #d8e8ef;
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 18px 45px rgb(19 64 92 / 9%);
}

.track-manual--hazards { --manual-accent: #e44e5c; --manual-soft: #fff0f1; }
.track-manual--mechanics { --manual-accent: #7166dc; --manual-soft: #efedff; }

.track-manual__visual {
  position: relative;
  min-height: 350px;
  overflow: hidden;
  background: #082039;
}

.track-manual__visual picture,
.track-manual__visual img { width: 100%; height: 100%; display: block; }
.track-manual__visual img { object-fit: cover; object-position: center; }
.track-manual__visual--course img { object-position: 59% center; }
.track-manual__visual--mechanics img { object-position: 38% center; }

.track-manual__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(0deg, rgb(3 18 36 / 55%), transparent 52%);
}

.track-manual__visual-badge {
  position: absolute;
  z-index: 2;
  top: 15px;
  left: 15px;
  min-height: 34px;
  padding: 0 11px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border: 1px solid rgb(144 239 251 / 39%);
  border-radius: 10px;
  background: rgb(4 28 52 / 78%);
  color: #9af5ff;
  font-size: 9px;
  font-weight: 950;
  letter-spacing: .09em;
  box-shadow: 0 10px 25px rgb(0 0 0 / 25%);
  backdrop-filter: blur(10px);
}

.track-manual__visual-badge svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.track-manual__visual-badge--danger { border-color: rgb(255 159 168 / 43%); color: #ffc0c6; }
.track-manual__visual-badge--mechanics { border-color: rgb(195 187 255 / 42%); color: #d7d1ff; }

.track-manual__content { min-width: 0; padding: 24px; }
.track-manual__header { display: flex; align-items: flex-start; gap: 14px; }

.track-manual__header > span {
  width: 48px;
  height: 48px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: var(--manual-soft);
  color: var(--manual-accent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--manual-accent) 12%, transparent);
}

.track-manual__header svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.track-manual__header small { color: var(--manual-accent); font-size: 9px; font-weight: 950; letter-spacing: .12em; }
.track-manual__header h3 { margin: 3px 0 5px; color: #16354f; font-size: 23px; letter-spacing: -.035em; }
.track-manual__header p { margin: 0; color: #6b8091; font-size: 12px; line-height: 1.48; }

.guide-info-grid {
  margin-top: 19px;
  display: grid;
  gap: 8px;
}

.guide-info-grid--three { grid-template-columns: 1fr; }
.guide-info-grid--hazards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.guide-info-card {
  min-width: 0;
  padding: 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  border: 1px solid #e1ebf0;
  border-radius: 13px;
  background: #f9fcfd;
}

.guide-info-card > span {
  width: 37px;
  height: 37px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: var(--manual-soft);
  color: var(--manual-accent);
}

.guide-info-card > span svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.guide-info-card small { color: #91a1ae; font-size: 7px; font-weight: 950; letter-spacing: .1em; }
.guide-info-card h4 { margin: 2px 0 3px; color: #1d3b54; font-size: 13px; }
.guide-info-card p { margin: 0; color: #6e8292; font-size: 10px; line-height: 1.42; }
.guide-info-card--coin > span { background: #fff4ce; color: #c48704; }
.guide-info-card--diamond > span { background: #e1faff; color: #049ec7; }
.guide-info-card--box > span { background: #f0eaff; color: #7149ca; }
.guide-info-card--fatal { border-color: #ffd6d9; background: #fff7f7; }

.guide-tip {
  margin-top: 12px;
  padding: 11px 12px;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  border: 1px solid #dfeaf0;
  border-radius: 12px;
  background: #f5fafc;
  color: #567083;
}

.guide-tip svg { width: 18px; height: 18px; flex: 0 0 auto; fill: none; stroke: var(--manual-accent); stroke-width: 1.9; }
.guide-tip p { margin: 0; font-size: 10px; line-height: 1.45; }
.guide-tip strong { color: #29475e; }
.guide-tip--danger { border-color: #ffd9dc; background: #fff7f8; }

.mechanics-flow {
  margin: 19px 0 0;
  padding: 0;
  display: grid;
  gap: 8px;
  list-style: none;
}

.mechanics-flow li {
  min-width: 0;
  padding: 10px;
  display: grid;
  grid-template-columns: 30px 38px 1fr;
  align-items: center;
  gap: 9px;
  border: 1px solid #e1e9f2;
  border-radius: 13px;
  background: #fafbff;
}

.mechanics-flow li > b { color: #8b84df; font-size: 9px; letter-spacing: .08em; }
.mechanics-flow li > span { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 10px; background: #efedff; color: #6b5ed4; }
.mechanics-flow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mechanics-flow h4 { margin: 0 0 3px; color: #213d55; font-size: 12px; }
.mechanics-flow p { margin: 0; color: #718494; font-size: 10px; line-height: 1.4; }

@media (max-width: 880px) {
  .track-manual { grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr); }
  .track-manual__content { padding: 20px; }
  .guide-info-grid--hazards { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .diamond-balance { min-width: 94px; min-height: 46px; padding: 5px 9px 5px 5px; }
  .diamond-balance > .account-icon { width: 32px; height: 32px; }
  .diamond-balance__copy small { display: block; font-size: 7px; }
  .diamond-balance__copy strong { font-size: 15px; }

  .mission-card--compact { border-radius: 21px; }
  .mission-card--compact .mission-card__media { aspect-ratio: 16 / 9; }
  .mission-card--compact .mission-card__media img { position: static; object-position: center; }
  .mission-card__art-badge { bottom: 11px; left: 11px; min-width: 118px; padding: 8px 9px; backdrop-filter: none; }
  .mission-card--compact .mission-card__content { width: 100%; padding: 20px 18px 19px; }
  .mission-card--compact h2 { margin-block: 7px 8px; font-size: 29px; }
  .mission-card--compact p:not(.section-kicker) { font-size: 13px; }
  .mission-card__facts { margin-top: 13px; }
  .mission-card--compact .mission-button { min-height: 49px; margin-top: 15px; }

  .power-guide { padding-inline: 13px; }
  .effect-card { width: min(82vw, 310px); flex-basis: min(82vw, 310px); }
  .effect-card__copy { min-height: 142px; }
  .effect-card__live { backdrop-filter: none; }

  .track-manuals { margin-top: 22px; padding-top: 22px; gap: 14px; }
  .track-manual { grid-template-columns: 1fr; border-radius: 18px; }
  .track-manual__visual { min-height: 0; aspect-ratio: 16 / 9; }
  .track-manual__visual--course img { object-position: 58% center; }
  .track-manual__visual--mechanics img { object-position: 35% center; }
  .track-manual__visual-badge { top: 10px; left: 10px; min-height: 30px; padding-inline: 9px; font-size: 8px; backdrop-filter: none; }
  .track-manual__content { padding: 17px 15px 16px; }
  .track-manual__header { gap: 11px; }
  .track-manual__header > span { width: 43px; height: 43px; border-radius: 12px; }
  .track-manual__header h3 { font-size: 21px; }
  .track-manual__header p { font-size: 11px; }
  .guide-info-grid--hazards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .guide-info-card { padding: 9px; }
  .guide-info-card p { font-size: 9px; }
  .mechanics-flow li { grid-template-columns: 27px 36px 1fr; gap: 8px; padding: 9px; }
}

@media (max-width: 430px) {
  .portal-topbar { padding-inline: 10px; }
  .topbar-account { gap: 5px; }
  .diamond-balance { min-width: 91px; padding-right: 7px; }
  .diamond-balance > .account-icon { width: 31px; height: 31px; display: grid; }
  .portal-topbar .balance-pill { min-width: 108px; }
  .guide-info-grid--hazards { grid-template-columns: 1fr; }
  .effect-card__live { min-height: 23px; font-size: 7px; }
}

@media (max-width: 355px) {
  .diamond-balance { min-width: 75px; gap: 5px; }
  .diamond-balance > .account-icon { width: 27px; height: 27px; display: grid; }
  .diamond-balance__copy small { font-size: 6px; letter-spacing: .06em; }
  .diamond-balance__copy strong { font-size: 13px; }
  .portal-topbar .balance-pill { min-width: 94px; }
  .mission-card__facts { display: grid; grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mission-card--compact .mission-card__media img { transition: none; }
}