/* KeyRota landing — Windows 11 Design Guidelines, nothing from the old site palette.
   Neutrals: WinUI 3 theme resources (Common_themeresources_any.xaml), the same values the Windows app
   uses in windows/src/fluent_win.cpp palette(). Accent: the Windows 11 default accent (blue) shades as the
   Windows UI kit uses them; the site is dark only, so fills use Light2.
   Structure: "top navigation" silhouette — navigation on the base layer (Mica), content on the content layer. */

:root {
  --accent-light3: #99ebff;
  --accent-light2: #60cdff;
  --accent-light1: #0093f9;
  --accent-base: #0078d4;
  --accent-dark1: #005fb8;
  --accent-dark2: #003e92;
  --accent-dark3: #001a68;

  --font-text: "Segoe UI Variable Text", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
  --font-small: "Segoe UI Variable Small", "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI Variable", "Segoe UI", -apple-system, BlinkMacSystemFont, "SF Pro Display", system-ui, sans-serif;
  --font-mono: "Cascadia Mono", "Cascadia Code", Consolas, ui-monospace, "SF Mono", Menlo, monospace;

  /* Windows motion: fast in, point to point, fade. */
  --ease-in: cubic-bezier(0, 0, 0, 1);
  --ease-move: cubic-bezier(.55, .55, 0, 1);
  --t-fade: 83ms;
  --t-fast: 167ms;
  --t-normal: 250ms;
  --t-slow: 333ms;

  --r-control: 4px;
  --r-overlay: 8px;
  --container: 1120px;

  /* The site is always dark (decision 17 Oct). */
  color-scheme: dark;
  --base: #202020;
  --base-alt: #1c1c1c;
  --layer: rgba(58, 58, 58, .3);
  --card: rgba(255, 255, 255, .051);
  --card-2: rgba(255, 255, 255, .031);
  --card-hover: rgba(255, 255, 255, .082);
  --card-stroke: rgba(0, 0, 0, .1);
  --card-stroke-visible: rgba(255, 255, 255, .07);
  --surface-stroke: rgba(117, 117, 117, .4);
  --divider: rgba(255, 255, 255, .084);
  --text-1: #fff;
  --text-2: rgba(255, 255, 255, .773);
  --text-3: rgba(255, 255, 255, .529);
  --text-off: rgba(255, 255, 255, .365);
  --control: rgba(255, 255, 255, .059);
  --control-hover: rgba(255, 255, 255, .082);
  --control-pressed: rgba(255, 255, 255, .031);
  --control-stroke: rgba(255, 255, 255, .07);
  --control-stroke-bottom: rgba(255, 255, 255, .094);
  --control-strong: rgba(255, 255, 255, .545);
  --control-input: rgba(30, 30, 30, .7);
  --subtle-hover: rgba(255, 255, 255, .059);
  --subtle-pressed: rgba(255, 255, 255, .039);
  --accent: var(--accent-light2);
  --accent-text: var(--accent-light3);
  --spark-1: #c4f4ff;
  --spark-2: var(--accent-light2);
  --on-accent: #000;
  --accent-stroke-bottom: rgba(0, 0, 0, .137);
  --success: #6ccb5f;
  --success-back: #393d1b;
  --caution: #fce100;
  --caution-back: #433519;
  --critical: #ff99a4;
  --solid-senary: #373737; /* SolidBackgroundFillColorSenary: opaque, a step above the cards (the trial InfoBar) */
  --mica: rgba(32, 32, 32, .78);
  --mica-inactive: #202020;
  --flyout: #2c2c2c;
  --shadow-window: 0 32px 64px rgba(0, 0, 0, .56), 0 0 8px rgba(0, 0, 0, .4);
  --shadow-flyout: 0 8px 16px rgba(0, 0, 0, .26), 0 0 2px rgba(0, 0, 0, .24);
  --mica-tint: rgba(0, 120, 212, .07);
  --wp-1: #0b2a55;
  --wp-2: #061630;
  --wp-3: #030a18;
  --wp-glow: rgba(76, 194, 255, .30);
  --wp-petal-1: #99ebff;
  --wp-petal-2: #0078d4;
  --wp-petal-3: #003e92;
}


/* --- base ----------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 64px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Base layer = Mica: the neutral base, faintly tinted the way Mica picks up the desktop wallpaper. */
body {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column;
  background: var(--base) radial-gradient(1400px 900px at 70% -300px, var(--mica-tint), transparent 70%) fixed no-repeat;
  color: var(--text-1);
  font: 400 14px/20px var(--font-text);
  -webkit-font-smoothing: antialiased;
}
img, svg { display: block; max-width: 100%; }
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
p { margin: 0 0 12px; }
h1, h2, h3 { margin: 0; font-weight: 600; font-family: var(--font-display); }
code, kbd { font-family: var(--font-mono); }
b, strong { font-weight: 600; } /* Windows type ramp: Semibold, never Bold */
code { font-size: .9em; }
:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; box-shadow: 0 0 0 1px var(--base); border-radius: var(--r-control); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.icon { width: 20px; height: 20px; flex: none; fill: currentColor; }
.icon-16 { width: 16px; height: 16px; }

/* Content margins: 16 epx on phones, 32 on medium, 56 on wide windows (as in the silhouettes). */
.container { width: 100%; max-width: calc(var(--container) + 112px); margin: 0 auto; padding: 0 16px; }
@media (min-width: 640px) { .container { padding: 0 32px; } }
@media (min-width: 1008px) { .container { padding: 0 56px; } }

/* Content layer: LayerFillColorDefault + stroke; flush with the window edges, so no rounding there. */
.layer { flex: 1; background: var(--layer); border-top: 1px solid var(--card-stroke-visible); }

/* Windows type ramp. */
.t-caption { font: 400 12px/16px var(--font-small); }
.t-body-large { font-size: 18px; line-height: 24px; }
.t-subtitle { font: 600 20px/28px var(--font-display); }
.t-title { font: 600 28px/36px var(--font-display); }
.t-title-large { font: 600 40px/52px var(--font-display); }
.t-display { font: 600 clamp(40px, 6.4vw, 68px) / 1.2 var(--font-display); letter-spacing: -.01em; }
.muted { color: var(--text-2); }
.faint { color: var(--text-3); }

/* --- buttons (WinUI Button / AccentButton / HyperlinkButton) ------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 32px; padding: 5px 11px 6px;
  border-radius: var(--r-control); border: 1px solid transparent;
  font: 400 14px/20px var(--font-text); color: var(--text-1); text-decoration: none; white-space: nowrap;
  background: var(--control) padding-box;
  border-color: var(--control-stroke);
  border-bottom-color: var(--control-stroke-bottom);
  cursor: pointer; user-select: none;
  transition: background-color var(--t-fade) linear, color var(--t-fade) linear;
}
.btn:hover { background-color: var(--control-hover); text-decoration: none; }
.btn:active, .btn.is-pressed { background-color: var(--control-pressed); color: var(--text-2); border-bottom-color: var(--control-stroke); }
.btn[disabled], .btn.is-disabled { color: var(--text-off); background-color: var(--control-pressed); pointer-events: none; }
.btn-accent {
  background: var(--accent); color: var(--on-accent);
  border-color: rgba(255, 255, 255, .08); border-bottom-color: var(--accent-stroke-bottom);
}
.btn-accent:hover { background: color-mix(in srgb, var(--accent) 90%, transparent); }
.btn-accent:active, .btn-accent.is-pressed { background: color-mix(in srgb, var(--accent) 80%, transparent); color: color-mix(in srgb, var(--on-accent) 75%, transparent); border-bottom-color: transparent; }
.btn-accent[disabled], .btn-accent.is-disabled { background: var(--control-pressed); color: var(--text-off); border-color: transparent; }
.btn-subtle { background: transparent; border-color: transparent; }
.btn-subtle:hover { background: var(--subtle-hover); }
.btn-subtle:active { background: var(--subtle-pressed); color: var(--text-2); }
.btn-large { min-height: 40px; padding: 9px 19px 10px; font-size: 15px; }
.btn-icon { padding: 5px 7px 6px; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }

kbd {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 6px;
  font: 600 12px/1 var(--font-small); color: var(--text-1);
  background: var(--control); border: 1px solid var(--control-stroke); border-bottom-width: 2px; border-bottom-color: var(--control-stroke-bottom);
  border-radius: var(--r-control);
}
.badge {
  display: inline-flex; align-items: center; gap: 4px; height: 20px; padding: 0 8px;
  font: 600 12px/16px var(--font-small); border-radius: 10px;
  background: var(--control); color: var(--text-2); border: 1px solid var(--control-stroke);
}
.badge-accent { background: var(--accent); color: var(--on-accent); border-color: transparent; }
.badge-success { background: var(--success-back); color: var(--success); border-color: transparent; }
.badge-beta { height: 22px; padding: 0 9px 0 6px; gap: 4px; background: var(--accent); color: var(--on-accent); border-color: transparent; font-style: normal; }
.badge-beta .icon { width: 14px; height: 14px; }

/* --- header (top NavigationView over Mica Alt) ------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--base) 88%, transparent);
  -webkit-backdrop-filter: blur(30px) saturate(125%);
  backdrop-filter: blur(30px) saturate(125%);
}
.site-header .container { display: flex; align-items: center; gap: 8px; height: 48px; }
.brand { display: flex; align-items: baseline; color: var(--text-1); font: 400 18px/24px var(--font-display); letter-spacing: -.01em; margin-right: 16px; white-space: nowrap; }
.brand b { font-weight: 600; }
.brand:hover { text-decoration: none; }
.nav { position: relative; display: flex; align-items: center; gap: 2px; }
.nav a {
  position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 12px;
  color: var(--text-2); border-radius: var(--r-control); transition: background-color var(--t-fade) linear;
}
.nav a:hover { background: var(--subtle-hover); color: var(--text-1); text-decoration: none; }
.nav-indicator {
  position: absolute; left: 0; bottom: 2px; width: 16px; height: 3px; border-radius: 2px; background: var(--accent);
  transform: translateX(var(--x, 0)) scaleX(var(--w, 1)); transform-origin: 0 50%;
  transition: transform var(--t-normal) var(--ease-move);
}
.nav:not(.ready) .nav-indicator { opacity: 0; }
.nav a[aria-current] { color: var(--text-1); }
.header-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; }
/* Phones: no download button in the header (decision 17 Oct), the hero's own buttons are right below. */
@media (max-width: 639px) { .header-actions [data-download-auto] { display: none; } }
.nav-toggle { display: none; }
@media (max-width: 1100px) { /* the menu button up to 1100 px: with "Documentation" the German and French labels need the room */
  .nav { display: none; }
  .nav.open {
    display: flex; position: absolute; top: 48px; left: 0; right: 0; flex-direction: column; align-items: stretch;
    padding: 4px 8px 8px; background: var(--flyout); border-bottom: 1px solid var(--divider); box-shadow: var(--shadow-flyout);
  }
  .nav.open a { height: 40px; }
  .nav.open a[aria-current]::after { content: ""; position: absolute; left: 0; top: 12px; width: 3px; height: 16px; border-radius: 2px; background: var(--accent); }
  .nav-indicator { display: none; }
  .nav-toggle { display: inline-flex; }
  .header-actions .btn-check { display: none; }
}

/* --- hero ------------------------------------------------------------------- */
.hero { padding: 40px 0 0; }
.hero-copy { max-width: 960px; }
.hero h1 { margin-bottom: 12px; }
.hero .lead { color: var(--text-2); max-width: 600px; margin-bottom: 24px; }
.hero-meta { margin-top: 12px; color: var(--text-3); display: flex; flex-wrap: wrap; gap: 4px 20px; }
@media (min-width: 1008px) { .hero { padding-top: 56px; } }

/* Free trial: WinUI InfoBar (Informational icon, not closable, no action button), enlarged for the first screen.
   Opaque neutral surface one step above the cards, so the Mica tint does not show through; the accent is only the
   severity icon. Card radius 8 and stroke, 16 / 20-24 epx padding, icon 24 + 16 to the text, title Subtitle 20/28,
   message Body Large 18/24, both in the primary text colour. */
.infobar {
  display: flex; align-items: flex-start; gap: 16px;
  margin-bottom: 32px; padding: 16px;
  background: var(--solid-senary); border: 1px solid var(--card-stroke-visible); border-radius: var(--r-overlay);
}
.infobar[hidden] { display: none; }
.infobar-icon { width: 24px; height: 24px; flex: none; margin-top: 2px; } /* centred on the title line */
.infobar-icon .sev { fill: var(--accent); }
.infobar-icon .glyph { fill: var(--on-accent); }
.infobar-text { flex: 1; min-width: 0; margin: 0; font-size: 18px; line-height: 24px; color: var(--text-1); }
.infobar-text b { display: block; margin-bottom: 4px; font: 600 20px/28px var(--font-display); }
@media (min-width: 640px) { .infobar { padding: 20px 24px; } }
/* The InfoBar is the first thing under the header: the hero starts closer to it. */
.hero:has(> .container > .infobar:not([hidden])) { padding-top: 24px; }
@media (min-width: 1008px) {
  .hero:has(> .container > .infobar:not([hidden])) { padding-top: 32px; }
  .infobar { margin-bottom: 40px; }
}

/* Desktop frame: our own wallpaper, the game window behind and KeyRota in front. */
.desktop {
  --s: 1;
  position: relative; margin-top: 40px; overflow: hidden;
  aspect-ratio: 1088 / 680;
  border-radius: var(--r-overlay); border: 1px solid var(--surface-stroke);
  background: var(--wp-3);
}
.wallpaper { position: absolute; inset: 0; width: 100%; height: 100%; }
.stage {
  position: absolute; left: 0; top: 0; width: 1088px; height: 680px;
  transform: scale(var(--s)); transform-origin: 0 0;
}
.demo-replay { margin-top: 12px; display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap; }

/* Window chrome (8px overlay radius, Mica). */
.win {
  position: absolute; display: flex; flex-direction: column; overflow: hidden;
  border-radius: var(--r-overlay); border: 1px solid var(--surface-stroke);
  box-shadow: var(--shadow-window);
}
.win-titlebar { flex: none; display: flex; align-items: center; height: 32px; padding-left: 12px; gap: 10px; font: 400 12px/16px var(--font-small); color: var(--text-1); }
.win-caption { margin-left: auto; display: flex; height: 100%; }
.win-caption span { width: 46px; display: grid; place-items: center; color: var(--text-1); }
.win-caption .icon { width: 10px; height: 10px; }

/* The game window: dim, inactive, drawn as an abstract scene (no Blizzard artwork). */
.win-game { left: 32px; top: 76px; width: 640px; height: 430px; background: #1a1a1a; border-color: rgba(117, 117, 117, .4); }
.win-game .win-titlebar { color: rgba(255, 255, 255, .5); background: #202020; }
.game-scene { position: relative; flex: 1; overflow: hidden; background: linear-gradient(180deg, #0c1626 0%, #18263d 45%, #2a3956 72%, #0d121b 100%); }
.game-scene svg { position: absolute; inset: 0; width: 100%; height: 100%; }

/* A generic action bar at the bottom of the game; the pressed key lights up. */
.actionbar { position: absolute; left: 50%; bottom: 22px; transform: translateX(-50%); display: flex; gap: 4px; padding: 4px; border-radius: 6px; background: rgba(0, 0, 0, .45); }
.actionbar span {
  --h: 210;
  position: relative; width: 38px; height: 38px; border-radius: 4px; display: flex; align-items: flex-end; justify-content: flex-end; padding: 2px 4px;
  background: linear-gradient(140deg, hsl(var(--h) 32% 36%), hsl(var(--h) 38% 16%));
  border: 1px solid rgba(0, 0, 0, .6); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
  font: 600 11px/12px var(--font-small); color: #fff; text-shadow: 0 1px 1px #000;
  transition: box-shadow var(--t-fast) linear, filter var(--t-fast) linear;
}
.actionbar span.hit { box-shadow: inset 0 0 0 2px #fff, 0 0 12px rgba(255, 255, 255, .45); filter: brightness(1.35); }

.keycap {
  position: absolute; left: 50%; top: 120px; margin-left: -40px; width: 80px; padding: 10px 0 8px;
  display: grid; justify-items: center; gap: 4px; border-radius: 8px;
  background: #f3f3f3; color: #1a1a1a;
  box-shadow: 0 3px 0 #9a9a9a, 0 10px 24px rgba(0, 0, 0, .45);
  opacity: 0; transform: translateY(6px) scale(.9);
}
.keycap b { font: 600 22px/26px var(--font-display); }
.keycap small { font: 400 11px/14px var(--font-small); color: #555; white-space: nowrap; }
.keycap.is-down { animation: key-press 560ms var(--ease-in); }
@keyframes key-press {
  0% { opacity: 0; transform: translateY(6px) scale(.9); }
  20% { opacity: 1; transform: translateY(0) scale(1); box-shadow: 0 3px 0 #9a9a9a, 0 10px 24px rgba(0, 0, 0, .45); }
  38% { transform: translateY(2px) scale(.97); box-shadow: 0 1px 0 #9a9a9a, 0 6px 16px rgba(0, 0, 0, .4); }
  70% { opacity: 1; transform: translateY(0) scale(1); }
  100% { opacity: 0; transform: translateY(-4px) scale(1); }
}

/* KeyRota window: the real one-window layout (windows/src/main_win.cpp, Windows 11 redesign). */
.win-app {
  left: 640px; top: 20px; width: 420px; height: 640px;
  background: var(--mica);
  -webkit-backdrop-filter: blur(60px) saturate(140%);
  backdrop-filter: blur(60px) saturate(140%);
}
.kr-body { flex: 1; display: flex; flex-direction: column; padding: 4px 12px 0; min-height: 0; }
.kr-head { padding: 12px 14px; border-radius: var(--r-overlay); background: var(--card); border: 1px solid var(--card-stroke-visible); }
.kr-head-top { display: flex; align-items: center; gap: 12px; }
.kr-head-text { flex: 1; min-width: 0; }
.kr-title { font: 600 20px/26px var(--font-display); }
/* Two lines at most: the live line (target HP, enemies, presses, GCD) is longer than the mock window is wide. */
.kr-sub { color: var(--text-2); font: 400 12px/16px var(--font-small); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.kr-run { min-width: 128px; min-height: 36px; }
.kr-keys { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 10px; color: var(--text-2); font: 400 12px/16px var(--font-small); }
.kr-keys > span { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.kr-keys kbd { height: 20px; min-width: 22px; padding: 0 5px; font-weight: 400; color: var(--text-1); background: var(--control); }
.kr-h { display: flex; align-items: center; gap: 8px; margin: 10px 2px 6px; font: 600 14px/20px var(--font-text); }
.kr-h .faint { font: 400 12px/16px var(--font-small); }
.kr-tools { margin-left: auto; display: flex; }
.kr-tools .btn { min-height: 28px; padding: 3px 6px; }
.kr-journal-h { margin-bottom: 4px; }

.kr-rot { padding: 10px 12px; border-radius: var(--r-overlay); background: var(--card); border: 1px solid var(--card-stroke-visible); }
.kr-rot-row { display: flex; gap: 8px; }
.kr-rot-row .btn { flex: none; }
/* Second row as in the app: New, Duplicate, Delete on the left, Import, Export on the right. */
.kr-rot-actions { margin-top: 8px; gap: 6px; flex-wrap: wrap; } /* narrow phones: Import, Export go to a second line */
.kr-rot-actions .btn { min-height: 26px; padding: 2px 9px 3px; font-size: 12px; line-height: 16px; }
.kr-spacer { flex: 1; min-width: 0; }
.combo {
  flex: 1; display: flex; align-items: center; justify-content: space-between; height: 32px; padding: 0 11px;
  border-radius: var(--r-control); background: var(--control);
  border: 1px solid var(--control-stroke); border-bottom-color: var(--control-stroke-bottom);
}
.combo .icon { color: var(--text-2); }

.kr-log {
  flex: 1; min-height: 0; overflow: hidden; padding: 6px 10px; display: flex; flex-direction: column; justify-content: flex-end;
  border-radius: var(--r-control); background: var(--control-input); border: 1px solid var(--control-stroke);
  font: 400 11px/17px var(--font-mono); color: var(--text-1);
}
.kr-log div { display: flex; gap: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; animation: log-in var(--t-fast) var(--ease-in); }
.kr-log time { flex: none; }
.kr-log time { color: var(--text-3); }
@keyframes log-in { from { opacity: 0; transform: translateY(4px); } }
.kr-footer { flex: none; display: flex; align-items: center; justify-content: space-between; height: 40px; margin: 0 -12px; padding: 0 6px 0 14px; color: var(--text-2); font: 400 12px/16px var(--font-small); }
.kr-footer > span:first-child { display: inline-flex; align-items: center; gap: 8px; }

/* Quick settings panel over the game, the app's own colours (main_win.cpp, fluent_win.cpp palette):
   header red #C42B1C stopped, green #0F7B0F running; flyout #2C2C2C; a lit button uses the accent. */
.qpanel {
  position: absolute; left: 20px; top: 18px; width: 100px; padding-bottom: 2px; overflow: hidden;
  border-radius: var(--r-control); background: var(--flyout); border: 1px solid var(--surface-stroke);
  box-shadow: var(--shadow-flyout); font: 400 11px/19px var(--font-small); color: var(--text-2); text-align: center;
}
.qpanel-head { height: 20px; margin-bottom: 3px; background: #c42b1c; color: #fff; font: 600 12px/20px var(--font-text); transition: background-color var(--t-normal) linear; }
.qpanel-head.running { background: #0f7b0f; }
.qpanel-btn { display: block; height: 19px; margin: 0 4px 2px; border-radius: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.qpanel-btn.on { background: var(--accent); color: var(--on-accent); }
.qpanel-more { display: grid; place-items: center; height: 11px; color: var(--text-3); }
.qpanel-more .icon { width: 12px; height: 12px; }

.cursor { position: absolute; left: 0; top: 0; width: 22px; height: 30px; opacity: 0; pointer-events: none; z-index: 5; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.cursor.is-moving { transition: transform 720ms var(--ease-move), opacity var(--t-fast) linear; }

/* Phone: only the app window, unscaled, on the wallpaper. */
@media (max-width: 859px) {
  .desktop { aspect-ratio: auto; padding: 24px 12px; }
  .stage { position: relative; width: auto; height: auto; transform: none; display: flex; justify-content: center; }
  .win-game, .cursor { display: none; }
  .win-app { position: relative; left: auto; top: auto; width: 100%; max-width: 420px; height: 620px; }
}

/* --- sections --------------------------------------------------------------- */
/* Sections: Title → 12 epx → Body Large → 24 epx → content; 12 epx between content areas. */
.section { padding-top: 56px; }
.section:last-child { padding-bottom: 56px; }
@media (min-width: 1008px) { .section { padding-top: 80px; } .section:last-child { padding-bottom: 80px; } }
/* Right after the hero the "play again" row already adds 44 epx under the demo: a full section gap looked empty. */
.hero + .section { padding-top: 40px; }
@media (min-width: 1008px) { .hero + .section { padding-top: 48px; } }
.section-head { max-width: 880px; margin-bottom: 24px; } /* wide enough for the long subtitles (decision 17 Oct) */
.section-head h2 { margin-bottom: 12px; }
.section-head p { color: var(--text-2); margin: 0; }

.card { background: var(--card); border: 1px solid var(--card-stroke); border-radius: var(--r-overlay); padding: 16px; }
.card, .card-group { border-color: var(--card-stroke-visible); }

.steps { display: grid; gap: 12px; }
@media (min-width: 900px) { .steps { grid-template-columns: repeat(3, 1fr); } }
.step { display: flex; flex-direction: column; gap: 8px; }
.step-num { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font: 600 12px/1 var(--font-small); margin-bottom: 4px; }
.step h3 { font: 600 20px/28px var(--font-display); }
.step p { color: var(--text-2); }
.step-ui { margin-top: auto; padding-top: 12px; }
.file-list { display: grid; gap: 8px; }
.kbd-row { display: inline-flex; gap: 4px; }
.file-row { color: var(--text-1); text-decoration: none; transition: background-color var(--t-fade) linear; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--r-control); background: var(--card-2); border: 1px solid var(--control-stroke); }
.file-row .icon { color: var(--text-2); }
.file-row > span { color: var(--text-1); }
.file-row .btn .icon { color: var(--text-1); }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 8px; border-radius: 14px; background: var(--card-2); border: 1px solid var(--control-stroke); }
.chip .icon { color: var(--success); }

/* Feature tiles (cards in a grid, 12 epx apart). */
.tiles { display: grid; gap: 12px; }
@media (min-width: 600px) { .tiles { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tile { display: flex; flex-direction: column; gap: 8px; padding: 20px 16px 18px; border-radius: var(--r-overlay); background: var(--card); border: 1px solid var(--card-stroke-visible); transition: background-color var(--t-fade) linear; }
.tile:hover { background: var(--card-hover); }
.tile > .icon { width: 28px; height: 28px; color: var(--accent-text); margin-bottom: 4px; }
.tile h3 { font: 600 20px/28px var(--font-display); }
.tile p { margin: 0; color: var(--text-2); }

/* SegmentedControl. */
.segmented { display: flex; padding: 2px; gap: 2px; border-radius: var(--r-control); background: var(--control-pressed); border: 1px solid var(--control-stroke); }
.segmented > * { flex: 1 1 auto; height: 30px; padding: 0 12px; display: flex; align-items: center; justify-content: center; gap: 6px; border: 0; border-radius: 3px; background: transparent; color: var(--text-2); font: 400 14px/20px var(--font-text); white-space: nowrap; cursor: pointer; transition: background-color var(--t-fade) linear, color var(--t-fade) linear; }
.segmented > button:hover:not(.on) { background: var(--subtle-hover); color: var(--text-1); }
.segmented > .on { background: var(--control); color: var(--text-1); box-shadow: 0 0 0 1px var(--control-stroke); font-weight: 600; }
.spark { color: var(--accent-text); }

/* SelectorBar + panels. */
.selector { display: flex; gap: 4px; margin-bottom: 16px; }
.selector button {
  position: relative; height: 40px; padding: 0 12px; border: 0; border-radius: var(--r-control); background: transparent;
  font: 400 14px/20px var(--font-text); color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; gap: 8px;
}
.selector button:hover { background: var(--subtle-hover); color: var(--text-1); }
.selector button[aria-selected="true"] { color: var(--text-1); font-weight: 600; }
.selector button[aria-selected="true"]::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 16px; height: 3px; margin-left: -8px; border-radius: 2px; background: var(--accent); }
.panel { display: grid; gap: 24px; align-items: center; }
.panel[hidden] { display: none; }
.panel:not([hidden]) { animation: panel-in var(--t-normal) var(--ease-in); }
@keyframes panel-in { from { opacity: 0; transform: translateY(8px); } }
@media (min-width: 900px) { .panel { grid-template-columns: 1fr 1.15fr; gap: 48px; } }
.panel-text p { color: var(--text-2); }
.panel-text ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.panel-text li { display: flex; gap: 10px; color: var(--text-2); }
.panel-text li .icon { color: var(--accent-text); margin-top: 2px; }
/* HyperlinkButton to the documentation under the advanced tab's list: accent text, subtle hover, aligned with the list. */
.panel-text .doc-link { margin: 16px 0 0 -11px; color: var(--accent-text); white-space: normal; text-align: left; justify-content: flex-start; }
.panel-text .doc-link:hover { color: var(--accent-text); }
.panel-text .doc-link .icon { color: var(--accent-text); }

/* --- the rotation at work (Blizzard tab): what KeyRota presses, one ability per GCD, looped by initFlow() -------
   A card next to the text, like the code sample of the advanced tab. The game's own spell icons (Wowhead, 56 px)
   with the key bound in the corner, as on an action bar: the newest press big on the left with an accent frame, the
   earlier ones slide right, shrink and fade. A GCD bar refills with every press. Windows motion only. */
.feed { display: grid; gap: 14px; min-width: 0; padding: 16px; border-radius: var(--r-overlay); background: var(--card); border: 1px solid var(--card-stroke-visible); }
.feed-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-width: 0; }
.feed-spec { display: inline-flex; align-items: center; gap: 8px; min-width: 0; color: var(--text-2); font: 400 12px/16px var(--font-small); white-space: nowrap; }
.feed-spec img { flex: none; width: 20px; height: 20px; border-radius: 4px; }
.feed-why { flex: none; padding: 2px 8px; border-radius: var(--r-control); background: var(--control); border: 1px solid var(--control-stroke); color: var(--text-1); font: 400 12px/16px var(--font-small); white-space: nowrap; }
.feed-why, .feed-name { transition: opacity var(--t-fast) var(--ease-in); }
.feed-why.is-swapping, .feed-name.is-swapping { opacity: 0; transition-duration: var(--t-fade); }

/* Without JS a plain row; with JS every icon is placed by initFlow() (translate + scale). */
.feed-strip { position: relative; display: flex; align-items: flex-end; gap: 8px; height: 64px; overflow: hidden; }
html.js .feed-strip { display: block; }
.feed-item { position: relative; flex: none; width: 64px; height: 64px; }
.feed-item + .feed-item { width: 44px; height: 44px; }
html.js .feed-item { position: absolute; left: 0; top: 0; width: 64px; height: 64px; transform-origin: left bottom; transition: transform var(--t-normal) var(--ease-move), opacity var(--t-normal) linear; }
.feed-icon { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: 6px; border: 1px solid rgba(0, 0, 0, .7); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .12); }
.feed-icon img { display: block; width: 100%; height: 100%; }
.feed-key { position: absolute; right: 4px; bottom: 2px; font: 600 13px/16px var(--font-small); color: #fff; text-shadow: 0 1px 2px #000, 0 0 2px #000; }
.feed-item.now .feed-icon { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.feed-item.enter .feed-icon { animation: feed-in var(--t-slow) var(--ease-in); }
@keyframes feed-in { from { opacity: 0; transform: scale(.7); } }

.feed-name { font: 600 20px/28px var(--font-display); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.feed-foot { display: flex; align-items: center; gap: 16px; color: var(--text-3); font: 400 12px/16px var(--font-small); }
.feed-gcd { flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0; }
.feed-bar { flex: 1; height: 4px; overflow: hidden; border-radius: 2px; background: var(--control); }
.feed-bar span { display: block; height: 100%; background: var(--accent); transform-origin: left center; }
.feed-bar span.run { animation: feed-gcd 1000ms linear; }
@keyframes feed-gcd { from { transform: scaleX(0); } }
.feed-count { white-space: nowrap; }

.code {
  margin: 0; padding: 16px; overflow-x: auto;
  border-radius: var(--r-overlay); background: var(--control-input); border: 1px solid var(--card-stroke-visible);
  font: 400 13px/20px var(--font-mono); color: var(--text-2); white-space: pre;
}
.code .k { color: var(--accent-text); }
.code .c { color: var(--text-3); }
.code .n { color: var(--text-1); }

/* Games: logo tiles. Text stands in until the logo file is there. */
.games-card { margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.games { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.game {
  position: relative; aspect-ratio: 16 / 9; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 12px; text-align: center;
  border-radius: var(--r-overlay); border: 1px solid var(--card-stroke-visible);
  background: radial-gradient(120% 90% at 50% 0%, rgba(96, 205, 255, .14), transparent 70%), #141414;
  color: #fff;
}
.game span { font: 600 12px/16px var(--font-small); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .7); }
.game b { font: 600 20px/26px var(--font-display); }
/* The logo is out of flow in a box of its own: Safari treats max-height: 100% inside an aspect-ratio tile as
   indefinite, so an in-flow logo kept its natural height and made the tall logos' tiles taller. */
.game.has-logo img { position: absolute; left: 14px; top: 10px; width: calc(100% - 28px); height: calc(100% - 20px); object-fit: contain; }

/* Support matrix. */
.support { display: grid; gap: 12px; }
@media (min-width: 720px) { .support { grid-template-columns: repeat(2, 1fr); } }
.support .card { display: flex; flex-direction: column; gap: 12px; }
.support-head { display: flex; align-items: center; gap: 10px; color: var(--text-2); }
.support-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.support-list li { display: grid; grid-template-columns: 1fr auto; gap: 2px 12px; }
.support-list li > span:not(.badge) { grid-column: 1; color: var(--text-2); font: 400 12px/16px var(--font-small); }
.support-list li .badge, .support-list li > .icon { grid-column: 2; grid-row: 1 / span 2; align-self: center; }
.support-list li > .ok { color: var(--success); }
/* Operating systems: the official logo before the name, no tile or outline (Windows logos, the Finder icon for macOS). */
.os-list li { grid-template-columns: auto 1fr auto; align-items: center; }
.support-list li > .os-logo { grid-column: 1; width: 28px; height: 28px; display: block; }
.support-list li > svg.os-logo { padding: 2px; } /* the square Windows marks look larger than the rounded Finder icon */
.os-list li > b { grid-column: 2; }
.os-list li > .icon { grid-column: 3; grid-row: auto; }

/* Pricing: radio cards. */
.plans { display: grid; gap: 12px; grid-template-columns: repeat(2, 1fr); max-width: 860px; }
@media (min-width: 720px) { .plans { grid-template-columns: repeat(4, 1fr); } }
.plan { position: relative; display: block; cursor: pointer; }
.plan input { position: absolute; opacity: 0; pointer-events: none; }
.plan-box {
  display: flex; flex-direction: column; gap: 4px; height: 100%; padding: 16px;
  border-radius: var(--r-overlay); background: var(--card); border: 1px solid var(--card-stroke-visible);
  transition: background-color var(--t-fade) linear, border-color var(--t-fade) linear;
}
.plan:hover .plan-box { background: var(--card-hover); }
.plan input:checked + .plan-box { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); }
.plan input:focus-visible + .plan-box { outline: 2px solid var(--text-1); outline-offset: 2px; }
.plan-term { color: var(--text-2); }
.plan-price { font: 600 20px/28px var(--font-display); }
.plan-note { color: var(--text-3); font: 400 12px/16px var(--font-small); }
.plan-note .save { color: var(--success); margin-left: 8px; }
.buy { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.buy .field { flex: 1 1 240px; max-width: 320px; }

/* Currency and payment method: SegmentedControl. */
.pay-options { margin-top: 16px; display: flex; flex-wrap: wrap; gap: 12px; }
.pay-options[hidden], .seg button[hidden] { display: none; }
.seg { display: inline-flex; flex-wrap: wrap; gap: 2px; padding: 2px; border-radius: var(--r-control); background: var(--control); border: 1px solid var(--control-stroke); }
.seg button {
  min-height: 32px; padding: 5px 14px 6px; border: 0; border-radius: 3px; background: transparent; cursor: pointer;
  color: var(--text-2); font: 400 14px/20px var(--font-text); transition: background-color var(--t-fade) linear;
}
.seg button:hover { background: var(--subtle-hover); color: var(--text-1); }
.seg button[aria-checked="true"] { background: var(--accent); color: var(--on-accent); }
.seg button:focus-visible { outline: 2px solid var(--text-1); outline-offset: 1px; }
.buy-error { margin: 8px 0 0; color: var(--critical); }
.buy-note { margin: 8px 0 0; }

/* TextBox. */
.field {
  min-width: 0; height: 40px; padding: 0 11px;
  border-radius: var(--r-control); border: 1px solid var(--control-stroke); border-bottom-color: var(--control-strong);
  background: var(--control); color: var(--text-1); font: 400 14px/20px var(--font-text);
}
.field::placeholder { color: var(--text-3); }
.field:hover { background: var(--control-hover); }
.field:focus { outline: none; background: var(--control-input); border-bottom-color: var(--accent); box-shadow: inset 0 -1px 0 var(--accent); }
.field[aria-invalid="true"] { border-bottom-color: var(--critical); box-shadow: inset 0 -1px 0 var(--critical); }

/* /pay: the order of a purchase. Windows 11 type ramp on a 4 px grid: title 28/36, lead 18/24, body 14/20, caption 12/16;
   controls 32 px high, the main actions and the key 40 px; the 20 px spinner of the ProgressRing family (32 px, 4 px stroke). */
.pay [hidden] { display: none; }
.pay-head { display: flex; align-items: center; gap: 16px; }
.pay-head h1 { margin: 0; }
.pay .lead { margin: 8px 0 0; max-width: 640px; }
.ring { width: 32px; height: 32px; flex: none; color: var(--accent); }
.ring svg { display: block; width: 100%; height: 100%; animation: ring-turn 2s linear infinite; }
.ring circle { fill: none; stroke: currentColor; stroke-width: 4; }
.ring-track { opacity: .18; }
.ring-arc { stroke-linecap: round; stroke-dasharray: 4 88; animation: ring-sweep 1.5s ease-in-out infinite; }
@keyframes ring-turn { to { transform: rotate(360deg); } }
@keyframes ring-sweep { 0% { stroke-dasharray: 4 88; stroke-dashoffset: 0; } 50% { stroke-dasharray: 56 88; stroke-dashoffset: -16; } 100% { stroke-dasharray: 4 88; stroke-dashoffset: -88; } }
.pay-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 24px 0 0; }
.pay-key code {
  padding: 7px 16px; border-radius: var(--r-control); background: var(--control-input); border: 1px solid var(--card-stroke-visible);
  font: 600 18px/24px var(--font-mono); letter-spacing: .04em; color: var(--text-1); user-select: all; overflow-wrap: anywhere;
}
.pay-mailed { margin: 12px 0 0; }
.pay .btn-row { margin-top: 24px; }
.pay-save { margin-top: 32px; }
.pay-save h2 { margin: 0 0 4px; font: 600 14px/20px var(--font-text); color: var(--text-1); }
.pay-save p { margin: 0 0 12px; max-width: 640px; }
.pay-link { display: flex; flex-wrap: wrap; gap: 8px; }
.pay-link .field { flex: 1 1 320px; max-width: 520px; height: 32px; }
.pay-order { margin: 24px 0 0; }
.pay-note { margin: 8px 0 0; color: var(--text-3); max-width: 640px; }
.pay-help { margin: 8px 0 0; max-width: 640px; } /* the order, the renewal and the help are one group: the same 8 px between them */
.pay-save + .pay-order { margin-top: 24px; }
.link-btn { padding: 0; border: 0; background: none; font: inherit; color: var(--accent-text); cursor: pointer; } /* looks like a link: the colour of the Discord and e-mail links of the page */
.link-btn:hover { text-decoration: underline; }
.link-btn.is-disabled { pointer-events: none; opacity: .6; }
.link-btn:focus-visible { outline: 2px solid var(--text-1); outline-offset: 2px; border-radius: 2px; }

/* /cancel: «Отменить подписку». Windows 11 RadioButtons (20 px mark, 32 px rows), the 40 px TextBox of the buy form, a compact
   InfoBar (14/20) for the answers. */
.cancel-form { margin-top: 24px; max-width: 520px; }
.radios { display: flex; flex-direction: column; gap: 4px; margin: 0 0 16px -8px; }
.radio { position: relative; display: flex; align-items: center; gap: 8px; min-height: 32px; padding: 6px 8px; border-radius: var(--r-control); color: var(--text-1); font: 400 14px/20px var(--font-text); cursor: pointer; }
.radio:hover { background: var(--subtle-hover); }
.radio input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.radio-mark { width: 20px; height: 20px; flex: none; box-sizing: border-box; border-radius: 50%; border: 1px solid var(--control-strong); background: var(--control); }
.radio:hover .radio-mark { background: var(--control-hover); }
.radio input:checked + .radio-mark { border-color: var(--accent); background: radial-gradient(circle, var(--on-accent) 0 4px, var(--accent) 4.5px); }
.radio input:focus-visible + .radio-mark { outline: 2px solid var(--text-1); outline-offset: 2px; }
.cancel-field { margin-top: 16px; }
.cancel-label { display: block; margin-bottom: 8px; color: var(--text-1); font: 400 14px/20px var(--font-text); }
.cancel-field .field { width: 100%; }
.cancel-hint { margin: 8px 0 0; }
.cancel .buy-error { margin: 12px 0 0; }
.cancel .infobar { margin: 16px 0 0; }
.infobar-sm { gap: 12px; padding: 12px 16px; }
.infobar-sm .infobar-icon { width: 16px; height: 16px; margin-top: 2px; }
.infobar-sm .infobar-text { font-size: 14px; line-height: 20px; color: var(--text-2); }
.infobar-sm .infobar-text b { display: inline; margin: 0; font: 600 14px/20px var(--font-text); color: var(--text-1); }
.infobar-ok .sev { fill: var(--success); }
.cancel .btn-row { margin-top: 24px; }
.cancel .btn-row[hidden] { display: none; } /* the button goes while the captcha is shown: solving it sends the request */
.cancel-captcha { margin-top: 16px; }
.cancel-captcha .cancel-hint { margin: 0 0 8px; }
.cancel-captcha [data-cancel-captcha-widget] { min-height: 65px; } /* the Turnstile widget is 300 x 65 */
.cancel .pay-help { margin-top: 32px; }

/* FAQ: Expander. */
.faq { display: grid; gap: 4px; max-width: 860px; }
.faq details { border-radius: var(--r-control); background: var(--card); border: 1px solid var(--card-stroke-visible); }
.faq summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 12px 16px; cursor: pointer; border-radius: var(--r-control); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--subtle-hover); }
.faq summary .icon { color: var(--text-2); transition: transform var(--t-fast) var(--ease-in); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq details > div { padding: 12px 16px 16px; border-top: 1px solid var(--divider); color: var(--text-2); }
.faq details > div p:last-child { margin: 0; }
/* "Didn't find an answer?" under the FAQ: text on the left, the Discord buttons on the right; stacked when narrow. */
.ask { max-width: 860px; margin-top: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px 24px; }
.ask-text { flex: 1 1 320px; min-width: 0; }
.ask-text h3 { margin: 0 0 4px; }
.ask-text p { margin: 0; color: var(--text-2); }
@media (min-width: 640px) { .ask { padding: 20px 24px; } }


/* --- footer ------------------------------------------------------------------ */
.site-footer { padding: 24px 0 40px; color: var(--text-2); border-top: 1px solid var(--divider); }
.footer-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin-bottom: 12px; }
.footer-row a { color: var(--text-2); }
.footer-row a:hover, .footer-row .brand { color: var(--text-1); }
.site-footer .brand { margin-right: 8px; }
.legal { margin: 0; color: var(--text-3); }
.legal + .legal { margin-top: 4px; }
.legal a { color: inherit; }
.legal a:hover { color: var(--text-1); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; }
  .ring circle { animation: none; }
  [data-pending]::before { animation: none; background-position: 50% 0; }
  .ring .ring-arc { stroke-dasharray: 44 88; }
}

/* Screenshot mode (?still=1): no transitions, so captures show the final frame. */
html[data-still] *, html[data-still] *::before, html[data-still] *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
html[data-still] .ring .ring-arc { stroke-dasharray: 44 88; } /* the spinner in a screenshot: a quarter of the ring, not a dot */

/* Step widgets: clickable downloads, run toggle, rebindable start key. */
a.file-row:hover { background: var(--card-hover); text-decoration: none; }
a.file-row:active { background: var(--control-pressed); color: var(--text-2); }
.file-row .file-dl { color: var(--accent-text); margin-left: 4px; }
.file-row > .btn { margin-left: auto; }
/* «VirusTotal: Windows macOS»: the reports of the files the download buttons give (site.js, by SHA-256). The line is there from the
   first paint (a link has no address until its SHA-256 arrives, so it does not react), the green shield says "no viruses found". */
.vt-links a { margin-left: 6px; }
.vt-links a:not([href]) { pointer-events: none; }
.vt-ok { display: inline-block; margin-right: 6px; vertical-align: -3px; color: var(--success); }
.file-vt { margin-top: 10px; color: var(--text-3); }
/* Waits for its text (the version): a skeleton in the place of the text (the placeholder in the HTML has the width of a real one and is
   transparent): a rounded neutral bar with a soft sweep, like the Fluent placeholders. */
[data-pending] { position: relative; color: transparent; user-select: none; }
[data-pending]::before {
  content: ""; position: absolute; inset: 3px 0; border-radius: 4px;
  background: linear-gradient(90deg, rgba(255, 255, 255, .06) 25%, rgba(255, 255, 255, .13) 37%, rgba(255, 255, 255, .06) 63%) 100% 0 / 300% 100%;
  animation: skeleton-sweep 1.6s ease-in-out infinite;
}
@keyframes skeleton-sweep { to { background-position: 0 0; } }
.kr-toggle { min-width: 136px; }
.kbd-btn {
  min-width: 44px; height: 32px; padding: 0 10px; cursor: pointer;
  font: 600 13px/1 var(--font-small); color: var(--text-1);
  background: var(--control); border: 1px solid var(--control-stroke); border-bottom-width: 2px; border-bottom-color: var(--control-stroke-bottom);
  border-radius: var(--r-control); transition: background-color var(--t-fade) linear, box-shadow var(--t-fast) var(--ease-in);
}
.kbd-btn:hover { background: var(--control-hover); }
.kbd-btn.listening { box-shadow: 0 0 0 2px var(--accent); color: var(--accent-text); animation: listen 1s ease-in-out infinite; }
@keyframes listen { 50% { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 35%, transparent); } }
.rebind-hint { min-height: 16px; margin: 8px 0 0; color: var(--text-3); }
.rebind-hint:empty { display: none; } /* an empty hint must not lift the Start button above the other steps' controls */

/* "Something special" mark for the advanced rotation: the accent pill with a sparkle, no text. */
.badge-spark { width: 30px; padding: 0; justify-content: center; vertical-align: 1px; }
.badge-spark .icon { width: 14px; height: 14px; }
.selector .badge-spark { margin-left: 2px; }
.segmented .badge-spark { height: 20px; width: 26px; }
.support-list li > .badge-spark { grid-column: 2; grid-row: 1 / span 2; align-self: center; }


/* Classes: class icons with role marks (tank and damage only). */
.classes-card { margin-bottom: 12px; display: flex; flex-direction: column; gap: 12px; }
.role-legend { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font: 400 12px/16px var(--font-small); }
.role-legend > span { margin-right: 10px; }
.role-legend > span:last-child { margin-right: 0; }
.role { width: 18px; height: 18px; flex: none; }
.classes { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(108px, 1fr)); }
.cls {
  position: relative; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 12px 6px 10px;
  border-radius: var(--r-overlay); background: var(--card-2); border: 1px solid var(--card-stroke-visible);
  outline: none; transition: background-color var(--t-fade) linear;
}
.cls > img { width: 48px; height: 48px; border-radius: 6px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .6); }
.cls .role { width: 20px; height: 20px; }
.cls .roles { display: flex; gap: 4px; margin-top: auto; }
.cls-name { font: 400 13px/18px var(--font-text); color: var(--text-1); text-align: center; }

/* Language: the page stays hidden for a moment until the strings of a non-Russian language are in (the script in <head> sets the class). */
html.i18n-wait body { opacity: 0; }
body { transition: opacity var(--t-fast) linear; }
:lang(zh) {
  --font-text: "Segoe UI Variable Text", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-small: "Segoe UI Variable Small", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Microsoft YaHei UI", "PingFang SC", "Noto Sans CJK SC", system-ui, sans-serif;
}
/* Traditional Chinese and Korean: own CJK fonts (the zh rule above is Simplified and comes first, these override it). */
:lang(zh-TW) {
  --font-text: "Segoe UI Variable Text", "Segoe UI", "Microsoft JhengHei UI", "PingFang TC", "Noto Sans CJK TC", system-ui, sans-serif;
  --font-small: "Segoe UI Variable Small", "Segoe UI", "Microsoft JhengHei UI", "PingFang TC", "Noto Sans CJK TC", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Microsoft JhengHei UI", "PingFang TC", "Noto Sans CJK TC", system-ui, sans-serif;
}
:lang(ko) {
  --font-text: "Segoe UI Variable Text", "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", system-ui, sans-serif;
  --font-small: "Segoe UI Variable Small", "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", system-ui, sans-serif;
  --font-display: "Segoe UI Variable Display", "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans CJK KR", system-ui, sans-serif;
}
html:lang(ko) body { word-break: keep-all; } /* Korean wraps between words, not inside them */

/* Language picker in the footer: MenuFlyout with radio items, opens upwards. */
.lang-picker { position: relative; margin-left: auto; }
.lang-btn { gap: 8px; }
.lang-btn .icon-16 { transition: transform var(--t-fast) var(--ease-in); }
.lang-btn[aria-expanded="true"] .icon-16 { transform: rotate(180deg); }
.menu {
  position: absolute; z-index: 40; min-width: 180px; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  background: var(--flyout); border: 1px solid var(--surface-stroke); border-radius: var(--r-overlay); box-shadow: var(--shadow-flyout);
}
.menu[hidden] { display: none; }
.menu-up { right: 0; bottom: calc(100% + 4px); }
.menu-item {
  display: flex; align-items: center; gap: 8px; width: 100%; min-height: 32px; padding: 0 11px 0 8px; cursor: pointer;
  font: 400 14px/20px var(--font-text); color: var(--text-1); text-align: left; background: transparent; border: 0; border-radius: var(--r-control);
}
.menu-item:hover { background: var(--subtle-hover); }
.menu-item:active { background: var(--subtle-pressed); color: var(--text-2); }
.menu-item .icon { visibility: hidden; color: var(--accent-text); }
.menu-item[aria-checked="true"] .icon { visibility: visible; }

/* Footer preferences: language and region side by side at the right edge, the region to the right of the language. */
.footer-prefs { margin-left: auto; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.footer-prefs .lang-picker { margin-left: 0; }
.region-picker { position: relative; }
.region-btn { gap: 8px; }
.region-btn .icon-16 { transition: transform var(--t-fast) var(--ease-in); }
.region-btn[aria-expanded="true"] .icon-16 { transform: rotate(180deg); }
.flag { width: 20px; height: 20px; flex: none; border-radius: 50%; }
.flag[hidden], svg[hidden] { display: none; } /* the hidden attribute does nothing on an svg element by itself */
.flag-globe { width: 20px; height: 20px; flex: none; fill: currentColor; }
.region-menu { width: 320px; max-width: calc(100vw - 32px); gap: 4px; }
.menu-search { padding: 2px 2px 0; }
.menu-field { width: 100%; height: 32px; }
.menu-list { position: relative; display: flex; flex-direction: column; gap: 2px; max-height: min(60vh, 400px); overflow-y: auto; overscroll-behavior: contain; }
.menu-list[hidden], .menu-empty[hidden] { display: none; }
.menu-empty { margin: 0; padding: 12px 11px; color: var(--text-3); font: 400 14px/20px var(--font-text); }
.region-menu > * { flex: none; }
.menu-group { display: flex; flex-direction: column; gap: 2px; }
.menu-group + .menu-group { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--divider); }
.menu-head { padding: 6px 11px 4px 8px; font: 600 12px/16px var(--font-small); color: var(--text-3); }
.menu-label { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.buy-note a { color: var(--accent-text); }

/* --- CSP: the server allows styles from 'self' only, so no style="" attributes in the markup ----- */
.sprite { position: absolute; }
.nav-indicator[hidden] { display: none; }
.stop-wp-1 { stop-color: var(--wp-1); }
.stop-wp-2 { stop-color: var(--wp-2); }
.stop-wp-3 { stop-color: var(--wp-3); }
.stop-wp-glow { stop-color: var(--wp-glow); }
.stop-wp-petal-1 { stop-color: var(--wp-petal-1); }
.stop-wp-petal-2 { stop-color: var(--wp-petal-2); }
.stop-wp-petal-3 { stop-color: var(--wp-petal-3); }
.actionbar [data-key="1"] { --h: 214; }
.actionbar [data-key="2"] { --h: 0; }
.actionbar [data-key="3"] { --h: 130; }
.actionbar [data-key="4"] { --h: 30; }
.actionbar [data-key="5"] { --h: 270; }
.actionbar [data-key="E"] { --h: 350; }
.actionbar [data-key="F"] { --h: 5; }
.actionbar [data-key="⇧1"] { --h: 190; }
/* --- other pages (privacy, 404): one column of text on the content layer -------------------- */
/* Title 28/36, Subtitle 20/28 between parts, Body in the secondary text colour; 12 epx under headings. */
.page { padding: 40px 0 56px; }
@media (min-width: 1008px) { .page { padding: 56px 0 80px; } }
.prose { max-width: 720px; }
.prose h1 { margin-bottom: 12px; font: 600 28px/36px var(--font-display); }
.prose h2 { margin: 32px 0 12px; font: 600 20px/28px var(--font-display); }
.prose .lead { font-size: 18px; line-height: 24px; color: var(--text-2); }
.prose p, .prose li { color: var(--text-2); }
.prose strong { color: var(--text-1); }
.prose ul { margin: 0 0 12px; padding-left: 20px; }
.prose li { margin-bottom: 8px; }
.prose .btn-row { margin-top: 24px; }
.prose h3 { margin: 24px 0 8px; font: 600 16px/22px var(--font-display); }
.prose .legal-date { color: var(--text-3); }

/* /terms carries every language; only the page language is shown (data-lang comes from lang.js, Russian without JS). */
.legal-doc { display: none; }
html:not([data-lang]) .legal-doc[data-l="ru"], html[data-lang="ru"] .legal-doc[data-l="ru"],
html[data-lang="en"] .legal-doc[data-l="en"], html[data-lang="de"] .legal-doc[data-l="de"],
html[data-lang="fr"] .legal-doc[data-l="fr"], html[data-lang="es"] .legal-doc[data-l="es"],
html[data-lang="it"] .legal-doc[data-l="it"], html[data-lang="pt"] .legal-doc[data-l="pt"],
html[data-lang="ko"] .legal-doc[data-l="ko"], html[data-lang="zh"] .legal-doc[data-l="zh"],
html[data-lang="zh-TW"] .legal-doc[data-l="zh-TW"] { display: block; }