/* ==========================================================================
   Service Rat – style «МУЛЬТ» for the web.
   1930s printed paper, 3px ink outlines, hard blur-free offset shadows,
   lollipop buttons on a cushion, cat characters.
   Tokens mirror composeApp/ui/kit/MultStyle.kt (MultColors / MultMetrics) –
   keep them in sync with the app, it is the same brand surface.
   ========================================================================== */

@import url("/fonts/mplus.css");

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  /* --- MultColors ------------------------------------------------------- */
  --paper:      #F7ECD4;
  --paper-hi:   #FFF9EC;
  --paper-dim:  #EFE0C2;
  --ink:        #28211C;
  --ink-soft:   rgba(40, 33, 28, .66);
  --ink-faint:  rgba(40, 33, 28, .32);
  --night:      #241E19;

  --cat:        #2E7E8C;   /* MultColors.Lib  – the Cat side   */
  --cat-deep:   #1F5A66;
  --cat-soft:   #8FBDC6;
  --sell:       #D8432C;   /* MultColors.Fas  – the Rat Pack   */
  --sell-deep:  #A62B1B;
  --sell-soft:  #E8926F;
  --rat:        #8E1F1F;   /* MultColors.Hit  – the Service Rat */
  --rat-deep:   #641114;
  --gold:       #E8B54A;
  --gold-deep:  #B9832A;
  --mustard:    #D9A441;
  --scarlet:    #B4301F;   /* the store-art ground */
  --discord:    #5865F2;   /* the one off-brand colour: Discord's own blurple */
  --discord-dp: #3C45A5;

  /* --- MultMetrics ------------------------------------------------------ */
  --stroke:     3px;
  --radius:     26px;
  --radius-sm:  16px;
  --shadow:     6px;
  --cushion:    6px;
  --font:       'M PLUS Rounded 1c', 'Mult Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- legacy aliases ---------------------------------------------------
     The pages carry thousands of inline `var(--slate-*)` declarations from the
     previous dark theme. Re-pointing the old names inverts them onto paper in
     one place, so a page renders correctly even before its markup is touched. */
  --slate-950: var(--paper);
  --slate-900: var(--paper-hi);
  --slate-800: var(--ink);
  --slate-700: var(--ink);
  --slate-600: var(--ink-faint);
  --slate-500: var(--ink-soft);
  --slate-400: var(--ink-soft);
  --slate-300: var(--ink);
  --slate-200: var(--ink);
  --slate-100: var(--ink);
  --blue:      var(--cat);
  --blue-l:    var(--cat-deep);
  --orange:    var(--sell);
  --orange-l:  var(--sell-deep);
  --red:       var(--sell);
  --red-l:     var(--rat);
  --green:     var(--cat-deep);
  --yellow:    var(--gold-deep);
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--font);
  font-weight: 500;
  background-color: var(--paper);
  /* the printed dot grid – one 22px tile, same as MultBackground */
  background-image: radial-gradient(circle at 11px 11px, rgba(40, 33, 28, .09) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
  color: var(--ink);
  line-height: 1.65;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
}

.container, .wrap { max-width: 900px; margin: 0 auto; padding: 0 24px; }

::selection { background: var(--gold); color: var(--ink); }

/* The ring takes the shape of what it rings — `outline` follows the element's own
   border-radius, so a lollipop is ringed as a lollipop. The 4px fallback is wrapped
   in :where() so it carries no specificity: a bare text link picks it up, a pill or
   a card keeps its own radius instead of being squared off into a rectangle. */
:focus-visible { outline: 3px solid var(--cat-deep); outline-offset: 3px; }
:where(:focus-visible) { border-radius: 4px; }

/* ==========================================================================
   Type
   ========================================================================== */

h1, h2, h3, h4, h5 { font-weight: 900; color: var(--ink); line-height: 1.08; letter-spacing: -.01em; }

p { color: var(--ink-soft); }
strong, b { color: var(--ink); font-weight: 800; }

a { color: var(--cat-deep); }

.lead {
  font-size: 17px; color: var(--ink); font-weight: 500;
  max-width: 700px; line-height: 1.7; margin-bottom: 18px;
}

.eyebrow, .section-kicker, .hero-eyebrow, .page-kicker, .role-eyebrow {
  display: inline-block;
  font-size: 12px; font-weight: 900;
  letter-spacing: .12em; text-transform: uppercase;
  color: var(--sell-deep);
  margin-bottom: 12px;
}

.section-title {
  font-size: clamp(28px, 4.4vw, 44px);
  font-weight: 900; color: var(--ink);
  line-height: 1.05; margin-bottom: 14px;
}

.section-desc { font-size: 16px; color: var(--ink-soft); max-width: 620px; }

/* A word lifted out of a heading: gold plate with an ink ring, as on the store art. */
.pop {
  color: var(--gold);
  text-shadow:
    -.028em -.028em 0 var(--ink),  .028em -.028em 0 var(--ink),
    -.028em  .028em 0 var(--ink),  .028em  .028em 0 var(--ink),
     .055em  .065em 0 var(--ink);
}

/* ==========================================================================
   Nav
   ========================================================================== */

nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--paper-hi);
  border-bottom: var(--stroke) solid var(--ink);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  height: 64px; max-width: 900px; margin: 0 auto; padding: 0 24px;
}
.nav-logo {
  font-size: 19px; font-weight: 900; letter-spacing: .02em;
  color: var(--ink); text-decoration: none; white-space: nowrap;
  flex: 0 0 auto;
}
.nav-logo span { color: var(--sell); }
.nav-links { display: flex; gap: 22px; align-items: center; flex: 1 1 auto; justify-content: flex-end; min-width: 0; }
.nav-links a {
  font-size: 13px; font-weight: 800;
  letter-spacing: .02em;
  color: var(--ink-soft); text-decoration: none;
  transition: color .15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--ink); }

/* the one lollipop in the nav */
.nav-links .nav-download {
  position: relative;
  user-select: none; -webkit-tap-highlight-color: transparent;
  padding: 8px 16px;
  background: var(--gold);
  color: var(--ink);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .02em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  box-shadow: 0 4px 0 var(--gold-deep), 0 4px 0 var(--stroke) var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.nav-links .nav-download:hover { color: var(--ink); }
.nav-links .nav-download:active { transform: translateY(4px); box-shadow: 0 0 0 var(--stroke) var(--ink); }

/* the community ticket — the one link that survives the mobile fold next to
   the lollipop, so Discord is reachable from every page. */
.nav-links .nav-discord {
  display: inline-flex; align-items: center; gap: 7px;
  user-select: none; -webkit-tap-highlight-color: transparent;
  flex: 0 0 auto;
  padding: 7px 13px;
  background: var(--discord);
  color: var(--paper-hi);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .02em;
  white-space: nowrap;
  box-shadow: 0 4px 0 var(--discord-dp), 0 4px 0 var(--stroke) var(--ink);
  transition: transform .12s, box-shadow .12s;
}
.nav-links .nav-discord:hover { color: var(--paper-hi); }
.nav-links .nav-discord:active { transform: translateY(4px); box-shadow: 0 0 0 var(--stroke) var(--ink); }
.nav-links .nav-discord svg { width: 16px; height: 16px; flex: 0 0 auto; }

/* language picker */
.lang-switch { position: relative; margin-left: 2px; }
.lang-switch summary {
  list-style: none;
  padding: 5px 14px;
  background: var(--paper);
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  font-size: 12px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
  cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::after { content: ' ▾'; font-size: 10px; }
.lang-switch summary:hover { background: var(--gold); }
.lang-switch[open] summary { background: var(--gold); }
.lang-menu {
  position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--paper-hi);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  min-width: 170px; padding: 6px 0;
  box-shadow: 0 var(--shadow) 0 var(--ink-faint);
  z-index: 110;
  /* подсветка пункта прямоугольная: без клипа её углы вылезали за скругление
     меню на первом и последнем языке */
  overflow: hidden;
}
.lang-menu a {
  display: block; padding: 8px 16px;
  font-size: 13px; font-weight: 700;
  color: var(--ink-soft); text-decoration: none;
}
.lang-menu a:hover { background: var(--paper-dim); color: var(--ink); }
.lang-menu a.active { color: var(--sell-deep); font-weight: 900; }

/* ==========================================================================
   Buttons – lollipop on a cushion
   ========================================================================== */

.btn, .store-badge {
  position: relative;
  user-select: none; -webkit-tap-highlight-color: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px;
  font-family: var(--font); font-size: 14px; font-weight: 900;
  letter-spacing: .01em;
  text-decoration: none; cursor: pointer;
  border: var(--stroke) solid var(--ink);
  border-radius: 999px;
  background: var(--paper-hi); color: var(--ink);
  box-shadow: 0 var(--cushion) 0 var(--paper-dim), 0 var(--cushion) 0 var(--stroke) var(--ink);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover, .store-badge:hover { transform: translateY(-2px); }
.btn:active, .store-badge:active {
  transform: translateY(var(--cushion));
  box-shadow: 0 0 0 var(--stroke) var(--ink);
}
.btn svg, .store-badge svg { width: 20px; height: 20px; flex-shrink: 0; }

.btn-primary, .store-badge {
  background: var(--gold); color: var(--ink);
  box-shadow: 0 var(--cushion) 0 var(--gold-deep), 0 var(--cushion) 0 var(--stroke) var(--ink);
}
.btn-outline {
  background: var(--paper-hi); color: var(--ink);
  box-shadow: 0 var(--cushion) 0 var(--paper-dim), 0 var(--cushion) 0 var(--stroke) var(--ink);
}
.btn-cat {
  background: var(--cat); color: var(--paper-hi);
  box-shadow: 0 var(--cushion) 0 var(--cat-deep), 0 var(--cushion) 0 var(--stroke) var(--ink);
}

/* store rows keep the cushion clear of the next element */
.hero-cta, .store-badges, .store-row, .download-row, .actions {
  display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  padding-bottom: var(--cushion);
}

/* ==========================================================================
   Badges / chips
   ========================================================================== */

.badge {
  display: inline-block;
  font-size: 12px; font-weight: 900;
  letter-spacing: .03em; text-transform: uppercase;
  padding: 5px 13px; border-radius: 999px;
  border: var(--stroke) solid var(--ink);
  background: var(--paper-hi); color: var(--ink);
}
.badge-blue   { background: var(--cat);  color: var(--paper-hi); }
.badge-orange { background: var(--gold); color: var(--ink); }
.badge-red    { background: var(--sell); color: var(--paper-hi); }

/* ==========================================================================
   Cards – paper, ink outline, hard offset shadow
   ========================================================================== */

.role-card, .feature-card, .step, .directive-card, .prerogative-card, .dir-card, .faq-item,
.pc-card, .res-card, .what-card, .cta-band, .callout, .goal-box, .app-card,
.quote-block, .verdict-box, .track-block, .policy-section, .step-list {
  background: var(--paper-hi);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius);
  box-shadow: 0 var(--shadow) 0 var(--ink-faint);
}

/* A card sets its own rhythm: the page-level heading margins do not apply
   inside one, and the last line never hangs below the padding. */
.role-card > :first-child, .feature-card > :first-child, .step-body > :first-child,
.directive-card > :first-child, .prerogative-card > :first-child, .dir-card > :first-child,
.faq-item > :first-child, .pc-card > :first-child, .res-card > :first-child,
.what-card > :first-child, .callout > :first-child, .goal-box > :first-child,
.app-card > :first-child, .quote-block > :first-child, .verdict-box > :first-child,
.policy-section > :first-child, .step-list > :first-child, .cta-band > :first-child {
  margin-top: 0;
}
.role-card > :last-child, .feature-card > :last-child, .step-body > :last-child,
.directive-card > :last-child, .prerogative-card > :last-child, .dir-card > :last-child,
.pc-card > :last-child, .res-card > :last-child, .what-card > :last-child,
.callout > :last-child, .goal-box > :last-child, .app-card > :last-child,
.quote-block > :last-child, .verdict-box > :last-child, .policy-section > :last-child,
.step-list > :last-child {
  margin-bottom: 0;
}

/* stacked cards need air between them, not just the 6px shadow */
.app-card, .policy-section, .step-list, .faq-item { margin-bottom: 16px; }
.app-card + .app-card, .step-list + .step-list { margin-top: 0; }

.role-card, .feature-card, .directive-card, .prerogative-card, .dir-card, .pc-card, .res-card, .what-card, .app-card {
  padding: 26px 24px;
  position: relative; overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}
.role-card:hover, .feature-card:hover, .directive-card:hover, .prerogative-card:hover, .dir-card:hover,
.pc-card:hover, .res-card:hover, .what-card:hover, .app-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 calc(var(--shadow) + 3px) 0 var(--ink-faint);
}

.feature-card { text-align: center; }
.feature-card h4, .what-card h4 { font-size: 15px; font-weight: 900; margin-bottom: 6px; }
.feature-card p, .what-card p { font-size: 14px; color: var(--ink-soft); }
.feature-icon, .directive-icon, .prerogative-icon { margin-bottom: 12px; }
.feature-icon svg, .directive-icon svg, .prerogative-icon svg { width: 38px; height: 38px; display: block; margin: 0 auto 2px; }

/* the old dark-theme glows have no place on paper */
.role-glow, .hero-glow, .cta-glow, .page-header-glow, .glow { display: none !important; }

/* --- role cards ------------------------------------------------------ */
.roles, .role-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; margin-top: 44px; }
.role-card { padding-top: 22px; }
.role-card::before {
  content: ''; position: absolute; inset: 0 0 auto; height: 10px;
  border-bottom: var(--stroke) solid var(--ink);
}
.role-card.worker::before, .role-card.cat::before     { background: var(--cat); }
.role-card.saboteur::before, .role-card.sellout::before { background: var(--sell); }
.role-card.rat::before                                 { background: var(--rat); }
.role-card > :first-child { margin-top: 14px; }
.role-icon {
  width: 96px; height: 96px; display: block;
  margin: 0 0 14px;
  object-fit: contain;
}
.role-name {
  font-size: 22px; font-weight: 900;
  letter-spacing: .01em; text-transform: uppercase;
  margin-bottom: 8px; color: var(--ink);
}
.role-card.worker .role-name, .role-card.cat .role-name       { color: var(--cat-deep); }
.role-card.saboteur .role-name, .role-card.sellout .role-name { color: var(--sell-deep); }
.role-card.rat .role-name                                     { color: var(--rat); }
.role-tagline {
  font-size: 14px; font-weight: 800;
  color: var(--ink-soft); margin-bottom: 12px;
}
.role-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* Cards that are themselves links must not read as a wall of underlined text. */
a.role-card, a.res-card, a.pc-card, a.dir-card, a.what-card, a.app-card {
  display: block; text-decoration: none; color: inherit;
}
/* the stacked link-cards keep their column layout despite the a.* display above */
a.res-card, a.dir-card, a.pc-card { display: flex; flex-direction: column; gap: 5px; }
a.role-card p, a.res-card span, a.pc-card span, a.pc-card p, a.dir-card p { color: var(--ink-soft); }
.pc-card strong { color: var(--ink); font-size: 16px; font-weight: 900; }
.pc-card span { color: var(--ink-soft); font-size: 14px; line-height: 1.5; }
a.role-card:hover .role-name, a.res-card:hover strong { text-decoration: underline; text-underline-offset: 3px; }
.role-more {
  display: inline-block; margin-top: 12px;
  font-size: 13px; font-weight: 900; text-transform: uppercase;
  color: var(--cat-deep);
}
.role-card.sellout .role-more { color: var(--sell-deep); }
.role-card.rat .role-more { color: var(--rat); }
.res-card { display: flex; flex-direction: column; gap: 4px; padding: 18px 20px; }
.res-card strong { color: var(--ink); font-size: 15px; font-weight: 900; }
.res-card span { color: var(--ink-soft); font-size: 14px; }

/* --- steps ----------------------------------------------------------- */
.steps, .step-list { display: grid; gap: 14px; margin-top: 44px; }
.step { display: flex; gap: 20px; align-items: flex-start; padding: 22px 24px; }
.step-num {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--gold); border: var(--stroke) solid var(--ink);
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; font-weight: 900; color: var(--ink);
}
.step-body h4 { font-size: 16px; font-weight: 900; margin-bottom: 4px; }
.step-body p { font-size: 14px; color: var(--ink-soft); }

/* --- grids ----------------------------------------------------------- */
.features, .directives, .prerogatives, .card-grid, .what-grid, .res-grid, .eq-band {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 16px; margin-top: 44px;
}

.directive-card h4, .prerogative-card h4, .dir-card h4 {
  font-size: 14px; font-weight: 900;
  letter-spacing: .02em; text-transform: uppercase;
  color: var(--sell-deep); margin-bottom: 6px;
}
.directive-card p, .prerogative-card p, .dir-card p { font-size: 14px; color: var(--ink-soft); line-height: 1.6; }

/* --- call-outs ------------------------------------------------------- */
.callout, .goal-box, .quote-block, .verdict-box {
  padding: 22px 24px; margin: 20px 0 26px;
}
.policy-section { padding: 26px 24px; margin-bottom: 22px; }
.policy-section h2 { margin-top: 0; }
.goal-box { border-color: var(--cat-deep); box-shadow: 0 var(--shadow) 0 var(--cat-soft); }
.goal-box h2 { margin: 0 0 8px; color: var(--cat-deep); font-size: 19px; }
.goal-box p { margin: 0; color: var(--ink); font-size: 15px; line-height: 1.7; }
.quote-block { background: var(--paper-dim); font-style: normal; }
.verdict-box { border-color: var(--gold-deep); box-shadow: 0 var(--shadow) 0 var(--gold); }

.cta-band, .cta-section {
  padding: 32px 26px; text-align: center; margin: 48px 0 24px;
}
.cta-band p { max-width: 560px; margin: 0 auto 20px; color: var(--ink); font-size: 16px; }

/* the full-bleed download band */
.cta-section {
  background: var(--night);
  border: none; border-top: var(--stroke) solid var(--ink); border-bottom: var(--stroke) solid var(--ink);
  border-radius: 0; box-shadow: none;
  margin: 0; padding: 80px 0;
  background-image: radial-gradient(circle at 11px 11px, rgba(255, 249, 236, .07) 1.4px, transparent 1.5px);
  background-size: 22px 22px;
}
.cta-section h2 { color: var(--paper-hi); font-size: clamp(30px, 5vw, 50px); margin-bottom: 12px; }
.cta-section p { color: var(--paper-dim); font-size: 16px; margin-bottom: 34px; }

/* ==========================================================================
   Law tracks – the board
   ========================================================================== */

.tracks { display: flex; gap: 28px; margin-top: 44px; flex-wrap: wrap; }
.track-block { flex: 1; min-width: 230px; max-width: 380px; padding: 18px 20px; }
.track-name {
  font-size: 13px; font-weight: 900;
  letter-spacing: .04em; text-transform: uppercase;
  margin-bottom: 12px; color: var(--ink);
}
.track-name.blue-text   { color: var(--cat-deep); }
.track-name.orange-text { color: var(--sell-deep); }
.track-slots { display: flex; gap: 7px; }
.slot {
  flex: 1; height: 42px; border-radius: 8px;
  border: var(--stroke) solid var(--ink);
}
.slot-blue-empty   { background: var(--paper-dim); }
.slot-blue-fill    { background: var(--cat); }
.slot-orange-empty { background: var(--paper-dim); }
.slot-orange-fill  { background: var(--sell); }
.track-caption { font-size: 13px; color: var(--ink-soft); margin-top: 10px; }

/* ==========================================================================
   Long-form content
   ========================================================================== */

main h1, .page-header h1 {
  font-size: clamp(36px, 6.4vw, 58px);
  margin: 0 0 14px;
}
main h2 { font-size: clamp(23px, 3.4vw, 30px); margin: 52px 0 12px; }
main h3 { font-size: clamp(18px, 2.4vw, 21px); margin: 30px 0 8px; }
main p { font-size: 16px; color: var(--ink-soft); margin-bottom: 15px; max-width: 700px; }
main ul, main ol { padding-left: 24px; margin-bottom: 16px; max-width: 700px; }
main li { font-size: 16px; color: var(--ink-soft); margin-bottom: 9px; }
main li::marker { color: var(--sell); font-weight: 900; }

.breadcrumb {
  font-size: 13px; color: var(--ink-soft); font-weight: 700;
  padding: 28px 0 10px;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }

.page-header { padding: 8px 0 0; }

.related, .prevnext { font-size: 15px; color: var(--ink-soft); margin-top: 32px; font-weight: 700; }
.prevnext {
  display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  border-top: 3px solid var(--paper-dim); padding-top: 18px;
}
.prevnext a { white-space: nowrap; }
.related a, .prevnext a { color: var(--cat-deep); text-decoration: none; border-bottom: 2px solid var(--cat-soft); }
.related a:hover, .prevnext a:hover { border-bottom-color: var(--cat-deep); }

.meta-line { font-size: 13px; color: var(--ink-faint); font-weight: 700; }

.divider {
  height: var(--stroke);
  background: var(--ink);
  opacity: .14;
  border-radius: 999px;
}

section { padding: 76px 0; position: relative; }

/* ==========================================================================
   FAQ
   ========================================================================== */

.faq-item { padding: 22px 24px; overflow: hidden; }
.step-list { padding: 20px 24px; }
.step-list h3, .step-list h4 { font-size: 17px; margin-bottom: 6px; }
/* a <details> card keeps its padding on the two halves instead */
details.faq-item { padding: 0; }
.faq-item summary {
  list-style: none; cursor: pointer;
  padding: 18px 22px;
  font-size: 17px; font-weight: 900; color: var(--ink);
  display: flex; justify-content: space-between; align-items: center; gap: 14px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 24px; font-weight: 900; color: var(--sell);
  line-height: 1; flex-shrink: 0;
}
.faq-item[open] summary { background: var(--gold); border-bottom: var(--stroke) solid var(--ink); }
.faq-item[open] summary::after { content: '–'; color: var(--ink); }
.faq-answer { padding: 18px 22px; }
.faq-answer p { font-size: 15px; color: var(--ink-soft); }
.faq-answer p:last-child { margin-bottom: 0; }

/* ==========================================================================
   Tables
   ========================================================================== */

.table-wrap, .cmp-table-wrap { overflow-x: auto; margin: 24px 0 34px; padding-bottom: var(--shadow); }
table {
  width: 100%; border-collapse: separate; border-spacing: 0;
  background: var(--paper-hi);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 var(--shadow) 0 var(--ink-faint);
  margin: 24px 0 34px;               /* a bare table carries its own air */
}
.table-wrap table, .cmp-table-wrap table { margin: 0; }
thead th {
  background: var(--ink); color: var(--paper-hi);
  font-size: 13px; font-weight: 900; letter-spacing: .03em; text-transform: uppercase;
  padding: 13px 16px; text-align: left;
}
th.th-cat                   { background: var(--cat);  color: var(--paper-hi); }
th.th-sellout               { background: var(--sell); color: var(--paper-hi); }
th.th-rat                   { background: var(--rat);  color: var(--paper-hi); }
tbody td, tbody th {
  padding: 13px 16px; font-size: 15px; color: var(--ink-soft);
  border-bottom: 2px solid var(--paper-dim);
}
tbody th { color: var(--ink); font-weight: 800; text-align: left; }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: none; }
tbody tr:nth-child(even) td, tbody tr:nth-child(even) th { background: var(--paper); }

.pros, .cons { font-weight: 800; }
.pros { color: var(--cat-deep); }
.cons { color: var(--sell-deep); }

/* ==========================================================================
   Screenshots
   ========================================================================== */

.screenshots { display: flex; gap: 18px; overflow-x: auto; padding: 24px 4px 16px; scroll-snap-type: x mandatory; }
.screenshots figure { flex: 0 0 210px; margin: 0; scroll-snap-align: start; }
/* the press kit lists bare <a><img> instead of figures */
.screenshots > a { flex: 0 0 200px; display: block; scroll-snap-align: start; }
.screenshots img {
  width: 100%; height: auto; display: block;
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--shadow) 0 var(--ink-faint);
  background: var(--night);
}
.screenshots figcaption { font-size: 13px; color: var(--ink-soft); margin-top: 14px; line-height: 1.45; font-weight: 700; }

/* ==========================================================================
   Hero – the scarlet stage, as on the store art
   ========================================================================== */

.hero {
  position: relative;
  padding: 84px 0 76px;
  text-align: center;
  background-color: var(--scarlet);
  background-image: radial-gradient(circle at 11px 11px, rgba(255, 249, 236, .10) 1.5px, transparent 1.6px);
  background-size: 22px 22px;
  border-bottom: var(--stroke) solid var(--ink);
  overflow: hidden;
}
.hero .hero-eyebrow { color: var(--gold); font-size: 13px; }
.hero h1 {
  font-size: clamp(48px, 10vw, 104px);
  font-weight: 900; letter-spacing: -.01em;
  color: var(--paper-hi); line-height: .96;
  margin-bottom: 10px;
  text-shadow:
    -.026em -.026em 0 var(--ink),  .026em -.026em 0 var(--ink),
    -.026em  .026em 0 var(--ink),  .026em  .026em 0 var(--ink),
     .05em   .058em 0 var(--ink);
}
.hero h1 em { font-style: normal; color: var(--gold); }
.hero-tagline {
  font-size: clamp(13px, 2vw, 15px);
  font-weight: 900; letter-spacing: .06em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 28px;
}
.hero-desc {
  font-size: clamp(15px, 2vw, 18px);
  color: var(--paper-hi); font-weight: 500;
  max-width: 540px; margin: 0 auto 34px;
}
.hero p { color: var(--paper-dim); }
.hero-badges { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; margin-bottom: 34px; }
.hero .badge { border-color: var(--ink); }
.hero-stores-note {
  font-size: 12px; font-weight: 800; letter-spacing: .04em;
  color: var(--gold); margin: 14px 0 0;
}
.hero-bylaws {
  display: inline-block; margin-top: 22px;
  font-size: 13px; font-weight: 900; letter-spacing: .04em; text-transform: uppercase;
  color: var(--paper-hi); text-decoration: none;
  border-bottom: 3px solid rgba(255, 249, 236, .4);
}
.hero-bylaws:hover { border-bottom-color: var(--gold); color: var(--gold); }

/* an inner page keeps the paper ground and only carries a title */
.page-header .hero { background: none; border: none; padding: 0; }

/* ==========================================================================
   Footer
   ========================================================================== */

footer {
  padding: 44px 0 52px;
  text-align: center;
  font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  background: var(--paper-hi);
  border-top: var(--stroke) solid var(--ink);
  margin-top: 56px;
}
footer a { color: var(--ink-soft); text-decoration: none; border-bottom: 2px solid var(--ink-faint); }
footer a:hover { color: var(--ink); border-bottom-color: var(--ink); }
footer p { font-size: 14px; color: var(--ink-soft); max-width: none; margin-bottom: 10px; }
footer p strong { color: var(--ink); }

/* ==========================================================================
   Store-CTA ordering + mobile sticky bar
   ========================================================================== */

.is-ios .hero-cta a[href*="apps.apple.com"]      { order: -1; }
.is-android .hero-cta a[href*="play.google.com"] { order: -1; }

.sticky-cta { display: none; }

@media (max-width: 768px) {
  .nav-links { gap: 14px; }
  .nav-links a { font-size: 12px; }
  .hero { padding: 54px 0 48px; }
  section { padding: 44px 0; }
  main h2 { margin-top: 38px; }

  body { padding-bottom: 82px; }
  .sticky-cta {
    display: flex; gap: 10px;
    position: fixed; bottom: 0; left: 0; right: 0;
    background: var(--paper-hi);
    border-top: var(--stroke) solid var(--ink);
    padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 100;
  }
  .sticky-cta .store-badge {
    flex: 1; padding: 11px 14px; font-size: 13px;
    box-shadow: 0 4px 0 var(--gold-deep), 0 4px 0 var(--stroke) var(--ink);
  }
  .is-ios .sticky-cta a[href*="play.google.com"],
  .is-android .sticky-cta a[href*="apps.apple.com"] { display: none; }
}
/* Первый экран телефона: переводы длиннее английского и выталкивали кнопки
   магазинов за сгиб. Ужимаем только интервалы, не размер текста. */
@media (max-width: 480px) {
  .hero { padding: 32px 0 40px; }
  .hero h1 { font-size: clamp(42px, 11vw, 104px); margin-bottom: 6px; }
  .hero .hero-eyebrow { font-size: 11px; letter-spacing: .02em; }
  .hero-tagline { font-size: 11px; letter-spacing: .02em; margin-bottom: 14px; }
  .hero-desc { font-size: 14px; line-height: 1.5; margin-bottom: 20px; }
  .hero-badges { gap: 7px; margin-bottom: 16px; }
  .hero .badge { font-size: 11px; letter-spacing: .01em; padding: 4px 10px; }
  .hero-stores-note { font-size: 11px; margin-top: 10px; }
}
@media (max-width: 600px) {
  .nav-inner { height: 60px; padding: 0 16px; gap: 10px; }
  .nav-logo { font-size: 17px; }
}
@media (max-width: 680px) { .nav-links a[href*="compare"] { display: none; } }
@media (max-width: 600px) {
  .nav-links a:not(.nav-download):not(.nav-discord) { display: none; }
  /* the text links are gone, the two pills plus the picker have to fit a phone */
  .nav-links .nav-discord { padding: 8px 10px; }
  .nav-links .nav-discord span { display: none; }
}
@media (max-width: 400px) {
  .nav-inner { padding: 0 12px; gap: 8px; }
  .nav-logo { font-size: 15px; letter-spacing: 0; }
  .nav-links .nav-download { padding: 7px 12px; font-size: 11px; }
  .nav-links .nav-discord { padding: 7px 8px; }
  .nav-links .nav-discord svg { width: 15px; height: 15px; }
  .lang-switch summary { padding: 5px 10px; font-size: 11px; }
  .lang-switch { margin-left: 0; }
}
/* 320px: the longest download label (DE) only fits if everything gives a pixel */
@media (max-width: 360px) {
  .nav-inner { padding: 0 10px; gap: 6px; }
  .nav-links { gap: 6px; }
  .nav-links .nav-download { padding: 7px 10px; }
  .nav-links .nav-discord { padding: 6px 7px; }
  .nav-links .nav-discord svg { width: 14px; height: 14px; }
}

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

/* ==========================================================================
   Page-local components
   These used to live in each page's own <style> block; they moved here when
   the inline dark theme was dropped, so keep them in sync with the markup in
   compare/, players/, powers/ and the standalone pages.
   ========================================================================== */

.content { padding: 48px 0 80px; }
@media (max-width: 768px) { .content { padding: 28px 0 48px; } }

/* an inline link inside running text */
a.inline {
  color: var(--cat-deep); text-decoration: none;
  border-bottom: 2px solid var(--cat-soft);
}
a.inline:hover { border-bottom-color: var(--cat-deep); }

/* numbered headings on the listicles */
h2 .num { color: var(--sell); margin-right: 8px; }

/* role-count chips on the player-count pages */
.split { display: flex; gap: 14px; flex-wrap: wrap; margin: 20px 0 26px; }
.split .chip {
  flex: 1; min-width: 130px;
  background: var(--paper-hi);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  box-shadow: 0 var(--shadow) 0 var(--ink-faint);
  padding: 16px 18px; text-align: center;
}
.split .chip .n { display: block; font-size: 34px; font-weight: 900; line-height: 1; color: var(--ink); }
.split .chip .lbl {
  display: block; margin-top: 8px;
  font-size: 13px; font-weight: 900;
  letter-spacing: .03em; text-transform: uppercase; color: var(--ink-soft);
}
.split .chip.w .n { color: var(--cat-deep); }
.split .chip.s .n { color: var(--sell-deep); }
.split .chip.r .n { color: var(--rat); }

/* comparison tables (compare/) and the prerogative grid (powers/, players/) */
table.cmp, table.dir { min-width: 540px; }
/* Those two are written as bare tables on some pages, with no .table-wrap around
   them, so they have to do their own scrolling instead of widening the page. */
@media (max-width: 700px) {
  table { display: block; overflow-x: auto; max-width: 100%; width: max-content; min-width: 100%; }
}
table.cmp th, table.cmp td, table.dir th, table.dir td { vertical-align: top; }
/* cell modifiers – the same set on every table, whatever its class */
td.row-label, td.l { color: var(--ink); font-weight: 800; text-align: left; }
th.l { text-align: left; }   /* header text stays paper on the ink bar */
table.cmp td.row-label { width: 26%; }
td.adv-ours, td.yes { color: var(--cat-deep); font-weight: 800; }
td.no { color: var(--sell-deep); font-weight: 800; }
td.adv-theirs { color: var(--gold-deep); font-weight: 800; }  /* the rival's plus, not a minus */
td.partial { color: var(--gold-deep); font-weight: 800; }
th.c, td.c { text-align: center; }
td.muted { text-align: center; color: var(--ink-faint); }
td.danger { text-align: center; color: var(--sell-deep); font-weight: 800; }
td.blue { text-align: center; color: var(--cat-deep); font-weight: 800; }
td.orange { text-align: center; color: var(--gold-deep); font-weight: 800; }
td.red { text-align: center; color: var(--rat); font-weight: 800; }

/* the prerogative cards on the powers hub */
.dir-card { display: flex; flex-direction: column; gap: 6px; padding: 20px 22px; }
.dir-card strong { color: var(--ink); font-size: 16px; font-weight: 900; }
.dir-card .eq { color: var(--ink-faint); font-size: 13px; font-weight: 700; }
.dir-card span.desc { color: var(--ink-soft); font-size: 14px; line-height: 1.55; }

/* app cards on the "games like" listicle */
.app-card .meta {
  font-size: 13px; color: var(--ink-soft); font-weight: 800;
  letter-spacing: .03em; margin-bottom: 12px;
}
.app-card .meta a { color: var(--cat-deep); text-decoration: none; }
.app-card.featured { border-color: var(--sell); box-shadow: 0 var(--shadow) 0 var(--sell-soft); }
.app-card.featured h3 { color: var(--sell-deep); }

.quote-block .attrib {
  display: block; margin-top: 10px;
  font-size: 13px; color: var(--ink-faint);
  font-weight: 800; letter-spacing: .03em; text-transform: uppercase;
}

/* language row at the foot of the 404 page */
.languages { margin-top: 40px; font-size: 14px; color: var(--ink-soft); font-weight: 700; }
.languages a { color: var(--ink-soft); text-decoration: none; margin: 0 6px; padding: 4px 6px; }
.languages a:hover { color: var(--ink); }

/* ==========================================================================
   Definition grid (the press fact sheet) – same frame as a table
   ========================================================================== */

dl.fact-grid {
  display: grid; grid-template-columns: minmax(140px, max-content) 1fr;
  margin: 24px 0 34px;
  background: var(--paper-hi);
  border: var(--stroke) solid var(--ink);
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 var(--shadow) 0 var(--ink-faint);
}
dl.fact-grid dt, dl.fact-grid dd {
  padding: 13px 16px; font-size: 15px;
  border-bottom: 2px solid var(--paper-dim);
}
dl.fact-grid dt { color: var(--ink); font-weight: 900; background: var(--paper); }
dl.fact-grid dd { color: var(--ink-soft); }
dl.fact-grid dt:nth-last-of-type(1), dl.fact-grid dd:nth-last-of-type(1) { border-bottom: none; }
@media (max-width: 560px) {
  dl.fact-grid { grid-template-columns: 1fr; }
  dl.fact-grid dt { border-bottom: none; padding-bottom: 2px; }
}

/* ==========================================================================
   Opening a question – the card unfolds instead of snapping
   ========================================================================== */

details.faq-item summary::after { transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); }
details.faq-item[open] summary::after { transform: rotate(180deg); }
details.faq-item[open] > .faq-answer,
details.faq-item[open] > p { animation: multUnfold .26s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes multUnfold {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}
details.faq-item summary { transition: background .15s; }
details.faq-item:not([open]) summary:hover { background: var(--paper-dim); }
@media (prefers-reduced-motion: reduce) {
  details.faq-item[open] > .faq-answer, details.faq-item[open] > p { animation: none; }
}

/* ==========================================================================
   Right-to-left (Persian)
   ========================================================================== */

[dir="rtl"] body { font-family: 'Vazirmatn', 'M PLUS Rounded 1c', 'Mult Fallback', sans-serif; }
[dir="rtl"] .breadcrumb, [dir="rtl"] main p, [dir="rtl"] main li,
[dir="rtl"] .lead, [dir="rtl"] .section-desc { text-align: right; }
[dir="rtl"] main ul, [dir="rtl"] main ol { padding-left: 0; padding-right: 24px; }
[dir="rtl"] thead th, [dir="rtl"] tbody th, [dir="rtl"] td.row-label, [dir="rtl"] td.l, [dir="rtl"] th.l { text-align: right; }
[dir="rtl"] .step { flex-direction: row-reverse; }
[dir="rtl"] .prevnext { flex-direction: row-reverse; }
[dir="rtl"] .faq-item summary { flex-direction: row-reverse; }
[dir="rtl"] .nav-inner { flex-direction: row-reverse; }
/* Шапка в RTL остаётся в визуальном порядке LTR (латинский логотип слева,
   переключатель справа), поэтому меню прижимается к правому краю так же,
   как в остальных локалях. С left:0 оно уезжало за экран вместе с текстом. */
[dir="rtl"] .lang-menu { right: 0; left: auto; text-align: right; }
[dir="rtl"] .role-icon { margin-left: auto; margin-right: 0; }
/* the cartoon art is drawn left-to-right and must not mirror */

/* Korean: M PLUS Rounded carries no Hangul, so name the fallbacks explicitly
   instead of leaving it to whatever the platform picks (same as the app). */
html[lang="ko"] body {
  font-family: 'M PLUS Rounded 1c', 'Apple SD Gothic Neo', 'Noto Sans KR',
               'Malgun Gothic', 'Mult Fallback', sans-serif;
  word-break: keep-all;          /* CJK breaks anywhere by default and orphans a syllable */
}

/* ==========================================================================
   404 – a standalone page, so it centres itself instead of using the shell
   ========================================================================== */

.notfound {
  min-height: 100vh;
  max-width: 660px;
  margin: 0 auto;
  padding: 48px 24px calc(48px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
}
.notfound img { width: 150px; height: auto; display: block; margin-bottom: 18px; }
.notfound .eyebrow { margin-bottom: 6px; }
.notfound-code {
  font-size: clamp(96px, 22vw, 170px);
  line-height: .86; letter-spacing: -.02em;
  color: var(--gold);
  margin: 0 0 14px;
  text-shadow:
    -.026em -.026em 0 var(--ink),  .026em -.026em 0 var(--ink),
    -.026em  .026em 0 var(--ink),  .026em  .026em 0 var(--ink),
     .05em   .058em 0 var(--ink);
}
.notfound h2 { font-size: clamp(22px, 4vw, 30px); margin: 0 0 12px; }
.notfound p { font-size: 16px; max-width: 480px; margin: 0 auto 10px; }
.notfound .actions { margin: 26px 0 8px; }
.notfound .languages { margin-top: 26px; }
.notfound .languages + .languages { margin-top: 10px; font-size: 13px; }