/* Light free tier (owner, 2026-10-12: "sky", matching the bot picture and
   game photo in docs/botfather). The hero cards had their own dark
   gradients; these are their light versions. Wardrobes (data-tier=premium)
   keep the dark ones. */
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home #go-online.card.online {
  background: radial-gradient(90% 70% at 100% 0%, rgba(35, 165, 90, .14) 0%, transparent 60%), linear-gradient(160deg, #FFFFFF 0%, #EAF7F0 100%);
  border-color: #CFEBDB; box-shadow: var(--rf-shadow-card);
}
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home .card.online .label { color: #1E8C4E; }
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home .card.online .live-dot { background: #23A55A; }
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home .online-faces > * { box-shadow: 0 0 0 2px #FFFFFF; }
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home .online-faces .more { background: #D8F0E3; color: #1E6B40; }

html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home .card.bots,
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-puzzles #mode-daily,
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-play .hero {
  background: linear-gradient(160deg, #FFFFFF 0%, #E6EEFA 100%);
  border-color: #D3DEEF; box-shadow: var(--rf-shadow-card);
}
html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-home .bots-right {
  background: radial-gradient(circle at 40% 35%, #F2F6FC 0%, #D3DEEF 72%);
}

html:not([data-tier="premium"]):not([data-mode="dark"]) #screen-friends .match.card {
  background: linear-gradient(150deg, #FFFFFF 0%, #E3EFFA 100%);
  border-color: color-mix(in srgb, var(--rf-accent) 35%, transparent); box-shadow: var(--rf-shadow-card);
}

/* The older style.css tokens follow Telegram's own colours; in the free
   tier they follow the light or dark tokens instead. */
html:not([data-tier="premium"])[data-theme="classic"] {
  --bg: var(--rf-bg); --bg2: var(--rf-surface-2); --card: var(--rf-surface);
  --text: var(--rf-text); --muted: var(--rf-muted); --line: var(--rf-line);
  --accent: var(--rf-accent); --accent-text: var(--rf-accent-text);
  color-scheme: light;
}
html[data-mode="dark"]:not([data-tier="premium"])[data-theme="classic"] { color-scheme: dark; }

/* The hero cards at night. */
html[data-mode="dark"]:not([data-tier="premium"]) #screen-home #go-online.card.online {
  background: radial-gradient(90% 70% at 100% 0%, rgba(52, 199, 123, .16) 0%, transparent 60%), linear-gradient(160deg, #13261E 0%, #0F1A17 100%);
  border-color: #1F4031;
}
html[data-mode="dark"]:not([data-tier="premium"]) #screen-home .card.online .label { color: #5BD79A; }
html[data-mode="dark"]:not([data-tier="premium"]) #screen-home .online-faces > * { box-shadow: 0 0 0 2px #13261E; }
html[data-mode="dark"]:not([data-tier="premium"]) #screen-home .online-faces .more { background: #1E3A2E; color: #BFEBD3; }
html[data-mode="dark"]:not([data-tier="premium"]) #screen-home .card.bots,
html[data-mode="dark"]:not([data-tier="premium"]) #screen-puzzles #mode-daily,
html[data-mode="dark"]:not([data-tier="premium"]) #screen-play .hero {
  background: linear-gradient(160deg, #1A2542 0%, #121A2E 100%); border-color: #2A3858;
}
html[data-mode="dark"]:not([data-tier="premium"]) #screen-home .bots-right {
  background: radial-gradient(circle at 40% 35%, #2E3D5C 0%, #172036 72%);
}
html[data-mode="dark"]:not([data-tier="premium"]) #screen-friends .match.card {
  background: linear-gradient(150deg, #16263E 0%, #111A2C 100%);
  border-color: color-mix(in srgb, var(--rf-accent) 40%, transparent);
}