/* --- Tokens ------------------------------------------------------------- 
   --rf-bg               Main app background color
   --rf-surface          Card and elevated surface background
   --rf-surface-elevated Higher elevation surface, like active tabs
   --rf-text             Primary text color
   --rf-text-muted       Secondary, muted text color
   --rf-accent           Main accent color
   --rf-accent-text      Text color on accent backgrounds
   --rf-accent-2         Secondary accent color
   --rf-line             Line and border color
   --rf-danger           Error/danger status color
   --rf-success          Success status color
   --rf-radius-card      Border radius for large cards
   --rf-radius-btn       Border radius for buttons
   --rf-radius-chip      Border radius for small chips/badges
   --rf-shadow-card      Card drop shadow
   --rf-font-display     Font for headings/display text
   --rf-font-sans        Font for body text
   --rf-gradient-bg      Page/hero background gradient
------------------------------------------------------------------------- */
:root {
  /* Free tier (default): light "sky", matching the bot picture and game
     photo (docs/botfather, owner pick 2026-10-12). */
  --rf-bg: #EEF3F9;
  --rf-surface: #FFFFFF;
  --rf-surface-elevated: #E3ECF7;
  --rf-text: #1B2740;
  --rf-text-muted: #66748F;
  --rf-muted: #66748F;
  --rf-accent: #2A8FD0;
  --rf-accent-text: #FFFFFF;
  --rf-accent-2: #1C76B8;
  --rf-line: #DCE5F1;
  --rf-danger: #E0483E;
  --rf-success: #23A55A;
  --rf-radius-card: 18px;
  --rf-radius-btn: 12px;
  --rf-radius-chip: 8px;
  --rf-shadow-card: 0 2px 10px rgba(27, 39, 64, 0.08);
  --rf-font-display: 'Playfair Display', Georgia, serif;
  --rf-font-sans: 'Manrope', system-ui, -apple-system, sans-serif;
  --rf-gradient-bg: radial-gradient(130% 55% at 50% -12%, #FFFFFF 0%, #EEF3F9 62%);
  /* Measured from the designs */
  --rf-text-2: #33415C;      /* secondary text on cards */
  --rf-sub: #5B6A86;         /* subtitles under titles */
  --rf-surface-2: #E8EFF8;   /* icon tiles */
  --rf-line-2: #C9D6E8;      /* chip borders */
  --rf-card-line: #DCE5F1;   /* card borders */
  --rf-hot: #E0664B;         /* streaks, losses */
  --rf-ava-a: #F2F6FC;       /* letter avatars, light centre */
  --rf-ava-b: #D3DEEF;       /* letter avatars, edge */
}

/* Dark mode of the free tier (Settings > Appearance, or Telegram's dark
   colours on Auto): the same sky look at night. Wardrobes keep their own. */
html[data-mode="dark"]:not([data-tier="premium"]) {
  --rf-bg: #0E1524;
  --rf-surface: #162036;
  --rf-surface-elevated: #1E2A44;
  --rf-text: #E8EEF8;
  --rf-text-muted: #8A98B3;
  --rf-muted: #8A98B3;
  --rf-accent: #3A9FE0;
  --rf-accent-text: #FFFFFF;
  --rf-accent-2: #6CBCF0;
  --rf-line: #24314B;
  --rf-danger: #FF6B5E;
  --rf-success: #34C77B;
  --rf-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.35);
  --rf-gradient-bg: radial-gradient(130% 55% at 50% -12%, #1A2640 0%, #0E1524 62%);
  --rf-text-2: #C3CEE2;
  --rf-sub: #8E9CB8;
  --rf-surface-2: #1E2A44;
  --rf-line-2: #2E3D5C;
  --rf-card-line: #24314B;
  --rf-hot: #FF8A6B;
  --rf-ava-a: #2E3D5C;
  --rf-ava-b: #172036;
}

[data-tier="premium"] {
  /* Premium-specific token overrides. Wardrobes stay dark: these keep the
     dark design's values that the free tier now sets light. */
  --rf-text-2: #CFC6B3;
  --rf-sub: #A79E8B;
  --rf-surface-2: #221F19;
  --rf-line-2: #3A3326;
  --rf-card-line: #2B2720;
  --rf-accent-text: #1A1408;
  --rf-shadow-card: 0 4px 12px rgba(0, 0, 0, 0.4);
  --rf-ava-a: #3B3454;
  --rf-ava-b: #1A1729;
  --rf-bg: #0C0807;
  --rf-surface: #0C0B09;
  --rf-surface-elevated: #1E1C18;
  --rf-text: #F3ECDD;
  --rf-text-muted: #8A8272;
  --rf-line: color-mix(in srgb, var(--rf-accent) 15%, #24130D);
  --rf-font-display: 'Grenze Gotisch', system-ui, sans-serif;
  --rf-gradient-bg: radial-gradient(90% 40% at 50% 105%, color-mix(in srgb, var(--rf-accent) 25%, transparent) 0%, transparent 70%), radial-gradient(120% 60% at 50% 0%, color-mix(in srgb, var(--rf-accent) 15%, #0C0807) 0%, #0C0807 60%);
}

/* --- Shared Components -------------------------------------------------- */
html, body {
  background: var(--rf-bg) !important;
  min-height: 100vh;
}
#app { padding: 0; }
body {
  color: var(--rf-text);
  font-family: var(--rf-font-sans);
}
.screen {
  min-height: 100vh;
  box-sizing: border-box;
}

/* Typography resets */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--rf-font-display);
  font-weight: 700;
  color: var(--rf-text);
  margin: 0;
}

/* Top bars / Headers */
header.top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--rf-bg);
  position: sticky;
  top: 0;
  z-index: 10;
}

header.top h1, header.top b {
  font-size: 24px;
}

header.top button.icon {
  background: transparent;
  color: var(--rf-text);
  padding: 8px;
  border-radius: var(--rf-radius-btn);
}

/* Cards */
/* No !important and no side margin: screens already pad 20px, and each screen
   sets its own card look. */
.card {
  background: var(--rf-surface);
  border-radius: var(--rf-radius-card);
  padding: 20px;
  margin: 0 0 16px;
  box-shadow: none;
  border: 1px solid var(--rf-line);
}

/* Tab pages (Games, Settings, ...) — measured from the designs. */
#screen-archive.active, #screen-settings.active {
  display: block; padding: 16px 20px 108px; min-height: 100vh; box-sizing: border-box;
  background: var(--rf-gradient-bg);
}
#screen-archive > header.top, #screen-settings > header.top {
  position: static; height: 44px; padding: 0; margin: 0 0 6px; background: none;
  display: flex; align-items: center; justify-content: space-between;
}
#screen-archive > header.top b, #screen-settings > header.top b {
  font: 700 28px var(--rf-font-display); color: var(--rf-text); letter-spacing: 0; text-transform: none;
}
#screen-archive > .body, #screen-settings > .body {
  display: flex; flex-direction: column; gap: 10px; padding: 0; margin: 0;
}
#screen-archive > .body > h2, #screen-settings > .body > h2, #screen-archive .hdr-row h2 {
  margin: 10px 0 0; font: 800 12px var(--rf-font-sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rf-sub);
}
#screen-archive > .body > h2:first-child, #screen-settings > .body > h2:first-child { margin-top: 4px; }
#screen-archive .hdr-row { display: flex; align-items: center; justify-content: space-between; height: 32px; margin: 2px 0 0; }
#screen-archive .hdr-row h2 { margin: 0; color: var(--rf-text-2); }
/* The Archive's filters (owner, 2026-10-11): result, then opponent. */
#screen-archive .archive-filters { display: flex; flex-direction: column; gap: 8px; margin: 8px 0 10px; }
#screen-archive .af-row { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; }
#screen-archive .af-row button {
  flex: none; height: 32px; padding: 0 14px; border-radius: 16px; box-shadow: none;
  background: var(--rf-surface); border: 1px solid var(--rf-line-2); color: var(--rf-text-2); font: 700 13px var(--rf-font-sans);
}
#screen-archive .af-row button.on { background: var(--rf-accent); border-color: var(--rf-accent); color: var(--rf-accent-text); }
#screen-archive .archive-more { justify-content: center; border: 0 !important; background: none !important; }
#screen-archive .archive-more button { font: 700 14px var(--rf-font-sans); color: var(--rf-accent); padding: 10px 16px; }
#screen-archive .hdr-row .link { display: flex; align-items: center; height: 32px; padding: 0 !important; background: none; font: 700 14px var(--rf-font-sans); color: var(--rf-accent); }

/* Grouped list: one card, rows divided by a hairline. */
.menu-list {
  display: flex; flex-direction: column; margin: 0; padding: 0; gap: 0; list-style: none; overflow: hidden;
  background: var(--rf-surface); border: 1px solid var(--rf-card-line); border-radius: 18px;
}
.menu-list > .item {
  display: flex; align-items: center; gap: 14px; width: 100%; min-height: 62px; box-sizing: border-box;
  margin: 0; padding: 0 14px; text-align: left; color: var(--rf-text);
  background: transparent; border: 0; border-top: 1px solid var(--rf-line); border-radius: 0 !important; box-shadow: none;
}
.menu-list > .item:first-child { border-top: 0; }
.menu-list > .item.row-setting { padding: 8px 10px 8px 14px; }
.menu-list > .item > .icon, .menu-list > .item > .icon-wrap {
  width: 36px; height: 36px; flex: none; display: grid; place-items: center; box-sizing: border-box;
  border-radius: 10px; background: var(--rf-surface-2); color: var(--rf-accent); border: 0; font-size: 18px; filter: none;
}
.menu-list > .item > .icon svg, .menu-list > .item > .icon-wrap svg { width: 20px; height: 20px; }
.menu-list > .item > .text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-list > .item > .text b, .menu-list > .item > .text > div > b { display: block; font: 700 15px var(--rf-font-sans); color: var(--rf-text); margin: 0; }
.menu-list > .item > .text .muted, .menu-list > .item > .text span, .menu-list > .item > .text small {
  font: 400 12px/1.35 var(--rf-font-sans); color: var(--rf-sub);
}
.menu-list > .item > .text span:empty { display: none; }
.menu-list > .item > .val-preview { flex: none; font: 400 14px var(--rf-font-sans); color: var(--rf-sub); margin: 0; }
.menu-list > .item > .chev { flex: none; display: grid; place-items: center; width: 18px; color: var(--rf-sub); font-size: 18px; }
.menu-list > .item > .chev svg { width: 18px; height: 18px; }

/* Buttons */
button, html button {
  font-family: var(--rf-font-sans);
  border: none;
  cursor: pointer;
  border-radius: var(--rf-radius-btn) !important;
  font-weight: 600;
  transition: transform 0.1s, opacity 0.1s;
}

button.back, .back {
  border-radius: 50% !important;
  width: 44px;
  height: 44px;
}

button:active {
  transform: scale(0.97);
}

button.primary, html button.primary {
  background: var(--rf-accent) !important;
  color: var(--rf-accent-text) !important;
  padding: 14px 20px !important;
  font-size: 16px !important;
  width: 100%;
  box-shadow: none !important;
  border: none !important;
  text-transform: none !important;
}

button.secondary, html button.secondary {
  background: var(--rf-surface-elevated) !important;
  color: var(--rf-text) !important;
  padding: 12px 16px !important;
  border: none !important;
  box-shadow: none !important;
}

.btn-sec {
  background: transparent;
  border: 1px solid var(--rf-border, var(--rf-line-2));
  color: var(--rf-text, var(--rf-text));
  border-radius: var(--rf-btn-radius, 12px);
}

button.link, html button.link {
  background: transparent !important;
  color: var(--rf-accent) !important;
  padding: 8px !important;
  box-shadow: none !important;
}

/* Bottom Tab Bar */
#tab-bar.tabs-bottom, nav#tab-bar {
  display: flex;
  justify-content: space-around;
  align-items: center;
  background: color-mix(in srgb, var(--rf-bg) 96%, transparent) !important;
  height: 84px;
  padding: 6px 8px calc(22px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--rf-line) !important;
  position: fixed;
  bottom: 0;
  width: 100%;
  z-index: 100;
  box-sizing: border-box;
}

#tab-bar.tabs-bottom button, nav#tab-bar button {
  background: transparent !important;
  color: var(--rf-text-muted) !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-family: var(--rf-font-sans);
  font-size: 11px;
  font-weight: 700;
  padding: 6px 12px;
  border-radius: 16px;
  opacity: 1 !important;
}

#tab-bar.tabs-bottom button .icon, nav#tab-bar button .icon {
  width: 56px;
  height: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 15px;
  background: transparent;
  transition: 0.2s;
  filter: none !important; /* override old telegram theme grayscale */
}

#tab-bar.tabs-bottom button .icon svg, nav#tab-bar button .icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  stroke-width: 1.8px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
}

#tab-bar.tabs-bottom button.on, nav#tab-bar button.on {
  color: var(--rf-accent) !important;
  font-weight: 800;
}

#tab-bar.tabs-bottom button.on .icon, nav#tab-bar button.on .icon {
  background: color-mix(in srgb, var(--rf-accent) 18%, transparent);
}

/* Badges / Chips */
.badge, .chip {
  background: color-mix(in srgb, var(--rf-accent) 15%, transparent);
  color: var(--rf-accent);
  padding: 4px 8px;
  border-radius: var(--rf-radius-chip);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Toggles — 52x32 track, 26px knob (Settings design). */
.toggle {
  appearance: none; position: relative; flex: none; cursor: pointer; outline: none;
  width: 52px !important; min-width: 52px !important; height: 32px !important; padding: 0 !important; margin: 0 0 0 8px;
  font-size: 0 !important; color: transparent !important; border: 0 !important;
  border-radius: 16px !important; background: var(--rf-line-2); box-shadow: inset 0 0 0 1px var(--rf-line-2);
  transition: background .2s;
}
.toggle::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%;
  background: #8A8272; transition: transform .2s, background .2s;
}
.toggle.on { background: var(--rf-accent); box-shadow: none; }
.toggle.on::after { left: 3px; transform: translateX(20px); background: var(--rf-accent-text); }

/* Toast */
.toast {
  position: fixed;
  top: auto !important;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--rf-text);
  color: var(--rf-bg);
  padding: 12px 20px;
  border-radius: 24px;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 8px 16px rgba(0,0,0,0.3);
  z-index: 1000;
}

/* Sheets */
.sheet-screen .sheet {
  background: var(--rf-surface);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  padding-top: 12px;
}

.sheet-screen .handle {
  width: 40px;
  height: 4px;
  background: var(--rf-text-muted);
  border-radius: 2px;
  margin: 0 auto 16px;
  opacity: 0.5;
}

/* Loading / Messages */
#screen-loading.active, #screen-message.active, .screen.loading.active, .screen.message.active {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  color: var(--rf-text-muted);
  height: 100vh;
}

#screen-loading:not(.active), #screen-message:not(.active) {
  display: none !important;
}

@media (prefers-reduced-motion: reduce) {
  button:active, html button:active {
    transform: none !important;
  }
  button, html button {
    transition: opacity 0.1s ease !important;
  }
  .toggle::after {
    transition: background 0.15s ease !important;
  }
  .toast {
    transition: opacity 0.18s ease !important;
  }
}