/**
 * Lifetime Ad-Free Pass UI shared by the homepage, level pages and leaderboard.
 * Ezoic renders checkout/account screens; these components provide polished,
 * game-native entry points and mirror the visitor's entitlement state.
 */

:root {
  --sub-blue: #2563eb;
  --sub-blue-dark: #1d4ed8;
  --sub-navy: #17243b;
  --sub-navy-hover: #0f1b30;
  --sub-gold: #f3c969;
  --sub-ink: #101828;
  --sub-muted: #667085;
  --sub-border: #dfe5ee;
  --sub-border-strong: #cbd5e1;
  --sub-surface: #ffffff;
  --sub-surface-soft: #f7f9fc;
  --sub-blue-soft: #eef4ff;
}

/* Component display rules can otherwise override the browser's [hidden] rule. */
[data-sub-state][hidden],
[data-sub-upgrade][hidden],
[data-sub-account][hidden],
[data-ezoic-login][hidden],
.sub-pass-card[hidden] {
  display: none !important;
}

/* Shared interactive elements */
.sub-premium-trigger,
.sub-pass-button,
.sub-profile-trigger,
.sub-profile-action {
  appearance: none;
  -webkit-appearance: none;
  box-sizing: border-box;
  font-family: inherit;
}

.sub-premium-trigger,
.sub-pass-button,
.sub-profile-trigger,
button.sub-profile-action {
  cursor: pointer;
}

.sub-premium-trigger:focus-visible,
.sub-pass-button:focus-visible,
.sub-profile-trigger:focus-visible,
.sub-profile-action:focus-visible,
.sub-link:focus-visible {
  outline: 3px solid #93c5fd;
  outline-offset: 3px;
}

.sub-link {
  border: 0;
  background: none;
  color: var(--sub-muted);
  padding: 0;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  text-decoration: none;
  cursor: pointer;
}

.sub-link:hover {
  color: var(--sub-blue-dark);
  text-decoration: underline;
}

/* Homepage header: brand left, premium/account utilities right, nav below. */
.header--premium-home {
  width: 100%;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  justify-content: normal;
  column-gap: 24px;
  row-gap: 10px;
  padding: 12px clamp(16px, 4vw, 48px);
}

.header--premium-home .home-link {
  grid-column: 1;
  grid-row: 1;
  min-width: 0;
  justify-self: start;
}

.header--premium-home .home-link h1 {
  margin: 0;
}

.header--premium-home .logo {
  width: 64px;
  height: 52px;
}

.header--premium-home .sub-header-actions--home {
  grid-column: 2;
  grid-row: 1;
  justify-self: end;
}

.header--premium-home .nav-links {
  grid-column: 1 / -1;
  grid-row: 2;
  margin-top: 2px;
}

/* Header premium and account controls */
.sub-header-actions {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1200;
}

.sub-header-tools {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.sub-premium-trigger,
.sub-active-pass {
  min-height: 42px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border-radius: 12px;
  padding: 0 14px;
  white-space: nowrap;
  font-size: 13px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: 0.01em;
}

.sub-premium-trigger {
  border: 1px solid var(--sub-navy);
  background: var(--sub-navy);
  color: #ffffff;
  box-shadow: 0 6px 16px rgba(23, 36, 59, 0.18);
  transition:
    background-color 160ms ease,
    border-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.sub-premium-trigger:hover {
  border-color: var(--sub-navy-hover);
  background: var(--sub-navy-hover);
  box-shadow: 0 9px 22px rgba(23, 36, 59, 0.24);
  transform: translateY(-1px);
}

.sub-premium-trigger:active {
  transform: translateY(0);
}

.sub-premium-trigger .sub-control-icon {
  color: var(--sub-gold);
}

.sub-active-pass {
  border: 1px solid #c9d8f3;
  background: var(--sub-blue-soft);
  color: #234a91;
}

.sub-active-pass .sub-control-icon {
  color: var(--sub-blue);
}

.sub-control-icon {
  width: 19px;
  height: 19px;
  flex: 0 0 19px;
  overflow: visible;
}

.sub-control-icon > path:first-child {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sub-control-icon__detail {
  fill: currentColor !important;
  stroke: none !important;
}

.sub-control-icon__check {
  fill: none !important;
  stroke: currentColor !important;
  stroke-width: 2.1 !important;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Player account dropdown */
.sub-profile {
  position: relative;
  flex: 0 0 auto;
}

.sub-profile-trigger {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  position: relative;
  border: 1px solid var(--sub-border-strong);
  border-radius: 12px;
  background: var(--sub-surface);
  color: #344054;
  padding: 0;
  list-style: none;
  box-shadow: 0 3px 10px rgba(15, 23, 42, 0.07);
  transition:
    border-color 160ms ease,
    background-color 160ms ease,
    box-shadow 160ms ease,
    color 160ms ease;
}

.sub-profile-trigger::-webkit-details-marker {
  display: none;
}

.sub-profile-trigger::marker {
  content: "";
}

.sub-profile-trigger:hover,
.sub-profile[open] > .sub-profile-trigger {
  border-color: #a9b8cc;
  background: var(--sub-surface-soft);
  color: var(--sub-ink);
  box-shadow: 0 5px 14px rgba(15, 23, 42, 0.11);
}

.sub-profile-icon {
  width: 21px;
  height: 21px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sub-profile-status {
  width: 8px;
  height: 8px;
  position: absolute;
  right: 5px;
  bottom: 5px;
  box-sizing: border-box;
  border: 2px solid #ffffff;
  border-radius: 50%;
  background: #16a34a;
}

.sub-profile-menu {
  width: 286px;
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 2000;
  box-sizing: border-box;
  border: 1px solid var(--sub-border);
  border-radius: 16px;
  background: var(--sub-surface);
  color: var(--sub-ink);
  padding: 18px;
  text-align: left;
  box-shadow:
    0 20px 45px rgba(15, 23, 42, 0.16),
    0 3px 10px rgba(15, 23, 42, 0.06);
  transform-origin: top right;
  animation: sub-menu-in 150ms ease-out;
}

.sub-profile-menu::before {
  content: "";
  width: 10px;
  height: 10px;
  position: absolute;
  top: -6px;
  right: 15px;
  border-top: 1px solid var(--sub-border);
  border-left: 1px solid var(--sub-border);
  background: var(--sub-surface);
  transform: rotate(45deg);
}

.sub-profile-eyebrow {
  margin: 0 0 7px;
  color: #7c5c13;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 0.12em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sub-profile-title {
  display: block;
  margin: 0;
  color: var(--sub-ink);
  font-size: 16px;
  line-height: 1.3;
}

.sub-profile-copy {
  margin: 6px 0 15px;
  color: var(--sub-muted);
  font-size: 13px;
  line-height: 1.5;
}

.sub-profile-action {
  width: 100%;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--sub-blue);
  border-radius: 10px;
  background: var(--sub-blue);
  color: #ffffff;
  padding: 9px 14px;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition:
    border-color 150ms ease,
    background-color 150ms ease,
    box-shadow 150ms ease;
}

.sub-profile-action:hover {
  border-color: var(--sub-blue-dark);
  background: var(--sub-blue-dark);
  color: #ffffff;
  text-decoration: none;
  box-shadow: 0 6px 14px rgba(37, 99, 235, 0.2);
}

@keyframes sub-menu-in {
  from {
    opacity: 0;
    transform: translateY(-4px) scale(0.98);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* Level header: Back/Home left, centered brand, premium utilities right. */
.header--with-subscription {
  position: relative;
}

.header--with-subscription .back-btn {
  top: 50%;
  right: auto;
  left: 20px;
  border: 1px solid var(--sub-border);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.88);
  color: #475467;
  padding: 9px 12px;
  font-size: 13px;
  font-weight: 750;
  transform: translateY(-50%);
}

.header--with-subscription .back-btn::before {
  content: "←";
  margin-right: 6px;
}

.header--with-subscription .back-btn:hover {
  border-color: var(--sub-border-strong);
  background: #ffffff;
  color: var(--sub-ink);
}

.sub-header-actions--level {
  position: absolute;
  top: 50%;
  right: 20px;
  left: auto;
  transform: translateY(-50%);
}

/* Level-selection introduction and integrated premium banner */
.level-discovery {
  width: 100%;
  max-width: 1080px;
  margin: 30px auto 0;
  padding: 0 15px;
  box-sizing: border-box;
  text-align: left;
}

.level-discovery-heading {
  max-width: 620px;
}

.level-discovery-kicker {
  margin: 0 0 5px;
  color: var(--sub-blue-dark);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.3;
  text-transform: uppercase;
}

.level-discovery-heading h2 {
  margin: 0;
  color: var(--sub-ink);
  font-size: clamp(26px, 3.2vw, 36px);
  line-height: 1.15;
  letter-spacing: -0.025em;
}

.level-discovery-heading > p:last-child {
  margin: 7px 0 0;
  color: var(--sub-muted);
  font-size: 15px;
  line-height: 1.5;
}

/* Lifetime Ad-Free Pass card: illustration panel on the left, offer on the
   right. Shared by the homepage and every level page. */
.sub-pass-card {
  width: 100%;
  margin: 18px 0 5px;
  position: relative;
  box-sizing: border-box;
  display: grid;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1fr);
  overflow: hidden;
  border: 1px solid var(--sub-border);
  border-radius: 26px;
  /* Matches the sky in the illustration so any rounding gap is invisible. */
  background: #8fd0f4;
  color: var(--sub-ink);
  box-shadow:
    0 18px 40px rgba(15, 23, 42, 0.1),
    0 2px 6px rgba(15, 23, 42, 0.04);
}

.sub-pass-art {
  position: relative;
  overflow: hidden;
  /* Floor for the rare case where the offer copy is shorter than this. */
  min-height: 280px;
}

/* Absolute so the square illustration contributes no intrinsic height. The
   offer copy sets the card height and the artwork crops to fill, instead of a
   1:1 image forcing dead space below the content. */
.sub-pass-art img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center top;
}

.sub-pass-body {
  position: relative;
  z-index: 1;
  min-width: 0;
  /* Negative margin lets the white panel sit over the illustration edge. */
  margin-left: -26px;
  padding: 20px 30px 15px;
  border-radius: 26px 0 0 26px;
  background: var(--sub-surface);
  box-shadow: -14px 0 30px rgba(15, 23, 42, 0.1);
}

.sub-pass-kicker {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 15px 7px 12px;
  border-radius: 999px;
  background: #fbe7b4;
  color: #7c5c13;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.13em;
  line-height: 1.2;
  text-transform: uppercase;
}

.sub-pass-kicker svg {
  width: 15px;
  height: 15px;
  fill: #b5851a;
  flex: 0 0 auto;
}

.sub-pass-title {
  margin: 11px 0 0;
  color: var(--sub-ink);
  font-size: clamp(25px, 3.1vw, 36px);
  font-weight: 850;
  line-height: 1.12;
  letter-spacing: -0.025em;
}

.sub-pass-subtitle {
  margin: 7px 0 0;
  max-width: 44ch;
  color: var(--sub-muted);
  font-size: 15.5px;
  line-height: 1.45;
}

.sub-pass-features {
  margin: 15px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 13px 22px;
}

.sub-pass-feature {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  min-width: 0;
}

.sub-pass-icon {
  flex: 0 0 auto;
  width: 45px;
  height: 45px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Nothing inherited can nudge the glyph off centre. */
  line-height: 0;
  border-radius: 50%;
}

/* display:block keeps the glyph off the text baseline, so flex centring is the
   only thing positioning it. Each icon path is drawn symmetrically inside the
   24x24 viewBox, which is what makes them look centred rather than just being
   centred as boxes. */
.sub-pass-icon svg {
  width: 35px;
  height: 35px;
  display: block;
}

.sub-pass-icon--noads {
  background: #fde5e5;
  color: #e5484d;
}

.sub-pass-icon--hints {
  background: #ece7fd;
  color: #7c5cf0;
}

.sub-pass-icon--lifetime {
  background: #dbeafe;
  color: #2563eb;
}

.sub-pass-icon--support {
  background: #d8f2e3;
  color: #16a34a;
}

.sub-pass-feature-text {
  min-width: 0;
  display: block;
}

.sub-pass-feature-text strong {
  display: block;
  color: var(--sub-ink);
  font-size: 14.5px;
  font-weight: 800;
  line-height: 1.25;
}

.sub-pass-feature-text span {
  display: block;
  margin-top: 3px;
  color: var(--sub-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.sub-pass-cta {
  margin: 16px 0 0;
  padding: 11px 15px;
  display: flex;
  align-items: center;
  gap: 18px;
  border-radius: 20px;
  background: linear-gradient(135deg, #2f80f2 0%, #1f62dd 100%);
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.24);
}

.sub-pass-price {
  margin: 0;
  padding-right: 16px;
  border-right: 1px solid rgba(255, 255, 255, 0.35);
  line-height: 1;
  white-space: nowrap;
}

.sub-pass-price strong {
  display: block;
  color: #ffffff;
  font-size: 28px;
  font-weight: 850;
  letter-spacing: -0.03em;
}

.sub-pass-price span {
  display: block;
  margin-top: 6px;
  color: rgba(255, 255, 255, 0.88);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.sub-pass-button {
  margin-left: auto;
  min-height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  color: var(--sub-blue-dark);
  padding: 0 22px;
  font-size: 15px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 6px 14px rgba(15, 23, 42, 0.16);
  transition:
    background-color 160ms ease,
    box-shadow 160ms ease,
    transform 160ms ease;
}

.sub-pass-button:hover {
  background: #f4f8ff;
  box-shadow: 0 9px 20px rgba(15, 23, 42, 0.22);
  transform: translateY(-1px);
}

.sub-pass-button:active {
  transform: translateY(0);
}

.sub-pass-arrow {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 160ms ease;
}

.sub-pass-button:hover .sub-pass-arrow {
  transform: translateX(2px);
}

.sub-pass-footnote {
  margin: 10px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  color: var(--sub-muted);
  font-size: 12.5px;
  line-height: 1.4;
}

.sub-pass-footnote svg {
  width: 14px;
  height: 14px;
  fill: #ef4444;
  flex: 0 0 auto;
}

/* Footer intentionally retains paid account access only. */
.sub-controls {
  margin: 14px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
}

.sub-controls [hidden] {
  display: none !important;
}

@media (max-width: 1100px) {
  .header--with-subscription {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 10px 16px;
    padding: 12px 16px;
  }

  .header--with-subscription .home-link {
    grid-column: 1 / -1;
    grid-row: 1;
    justify-self: center;
  }

  .header--with-subscription .back-btn {
    grid-column: 1;
    grid-row: 2;
    position: static;
    justify-self: start;
    margin: 0;
    transform: none;
  }

  .sub-header-actions--level {
    grid-column: 2;
    grid-row: 2;
    width: auto;
    position: static;
    justify-self: end;
    margin: 0;
    transform: none;
  }
}

@media (max-width: 900px) {
  /* Stack the illustration above the offer so neither column gets squeezed. */
  .sub-pass-card {
    grid-template-columns: minmax(0, 1fr);
  }

  .sub-pass-art {
    min-height: 0;
    height: clamp(150px, 30vw, 210px);
  }

  /* Frame the character's face. Sitting lower would slice through the sign
     lettering, which reads as a cropping accident. */
  .sub-pass-art img {
    object-position: center 12%;
  }

  .sub-pass-body {
    margin-left: 0;
    margin-top: -26px;
    border-radius: 26px 26px 0 0;
    box-shadow: 0 -14px 30px rgba(15, 23, 42, 0.1);
  }
}

@media (max-width: 600px) {
  .header--premium-home {
    grid-template-columns: minmax(0, 1fr) auto auto;
    column-gap: 8px;
    row-gap: 10px;
    padding: 10px 12px;
  }

  .header--premium-home .home-link {
    width: auto;
    max-width: 100%;
    flex-direction: row;
    gap: 7px;
    text-align: left;
  }

  .header--premium-home .logo {
    width: 43px;
    height: 38px;
    flex: 0 0 43px;
  }

  .header--premium-home .home-link h1 {
    width: auto;
    max-width: 100%;
    font-size: clamp(17px, 5vw, 20px);
    line-height: 1.05;
    white-space: nowrap;
  }

  .header--premium-home .header-play-online {
    display: none;
  }

  .header--premium-home .sub-header-actions--home {
    grid-column: 2;
    grid-row: 1;
    width: auto;
    justify-self: end;
  }

  .header--premium-home .menu-toggle {
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
  }

  .header--premium-home .nav-links {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 0;
  }

  .header--with-subscription {
    grid-template-columns: minmax(0, 1fr) auto;
    padding: 10px 12px;
  }

  .header--with-subscription .back-btn {
    margin: 0;
    font-size: 12px;
    padding: 8px 10px;
  }

  .sub-header-actions,
  .sub-header-actions--level {
    width: auto;
    min-height: 42px;
  }

  .sub-premium-trigger,
  .sub-active-pass {
    width: 42px;
    min-width: 42px;
    padding: 0;
  }

  .sub-premium-label,
  .sub-active-pass__label {
    display: none;
  }

  .sub-profile-menu {
    width: min(252px, calc(100vw - 24px));
    padding: 16px;
  }

  .level-discovery {
    margin-top: 24px;
    padding: 0 10px;
  }

  .level-discovery-heading h2 {
    font-size: clamp(25px, 8vw, 31px);
  }

  .level-discovery-heading > p:last-child {
    font-size: 14px;
  }

  .sub-pass-card {
    margin-top: 15px;
    border-radius: 20px;
  }

  .sub-pass-body {
    margin-top: -20px;
    padding: 17px 16px 13px;
    border-radius: 20px 20px 0 0;
  }

  .sub-pass-title {
    font-size: clamp(21px, 6.4vw, 26px);
  }

  .sub-pass-subtitle {
    font-size: 14px;
  }

  /* One column of features reads better than two cramped ones. */
  .sub-pass-features {
    grid-template-columns: minmax(0, 1fr);
    gap: 11px;
    margin-top: 13px;
  }

  /* Icon sizing stays 45/35 on every screen. */

  .sub-pass-cta {
    margin-top: 14px;
  }

  .sub-pass-price strong {
    font-size: 25px;
  }
}

@media (max-width: 420px) {
  .header--premium-home .home-link h1 {
    font-size: 17px;
  }

  /* Very narrow screens: price above a full-width button. */
  .sub-pass-cta {
    align-items: stretch;
    flex-direction: column;
    gap: 13px;
  }

  .sub-pass-price {
    padding-right: 0;
    padding-bottom: 12px;
    border-right: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.35);
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
  }

  .sub-pass-price span {
    margin-top: 0;
  }

  .sub-pass-button {
    margin-left: 0;
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .sub-premium-trigger,
  .sub-pass-button,
  .sub-profile-trigger,
  .sub-profile-action,
  .sub-pass-arrow {
    transition: none;
  }

  .sub-profile-menu {
    animation: none;
  }
}