/* StrainBorn website, styled after the game's own UI (Theme.swift): the plum BioBackground with drifting motes,
   tinted "membrane" cards, SF Rounded black titles, chunky pill buttons and notch-labelled menu sections.
   The main site sums each feature up and points into the wiki (/wiki, styled by wiki.css on top of this file),
   so the header, the phone menu sheet, the footer, buttons and the screenshot viewer here are shared by both. */
:root {
  --deep: #120812; --plum: #331229; --tissue: #C2617A; --green: #3DDB85; --mint: #7DFFB3; --modifier: #5EEAD4;
  --xp: #BF85FC; --lab: #63D1FF; --gold: #FFD166; --chal: #FFD60A; --codex: #8F9CFF; --store: #FF70B5;
  --pandemic: #FF5E7A; --orange: #FF9F0A; --cancer: #FF6B9A; --notch: #291221;
  --font: ui-rounded, "SF Pro Rounded", "Nunito", "Varela Round", system-ui, -apple-system, "Segoe UI", sans-serif;
  --spring: cubic-bezier(.34, 1.56, .64, 1);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --max: 1240px;
  --pad: clamp(16px, 4vw, 32px);
  --sec: clamp(56px, 8vw, 104px);
  /* shared with wiki.css: keep these names (values may change) */
  --body-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, system-ui, sans-serif;
  --surface: rgba(30, 13, 28, .72); --surface-2: rgba(44, 19, 40, .82);
  --line: rgba(255, 255, 255, .09); --line-2: rgba(255, 255, 255, .16);
  --text: #fff; --text-2: rgba(255, 255, 255, .78); --text-3: rgba(255, 255, 255, .56);
  --radius: 20px; --radius-sm: 12px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font-family: var(--font); font-size: 16px; line-height: 1.55;
  background: radial-gradient(circle at 35% 40%, var(--plum) 0, var(--deep) 75vmax) fixed, var(--deep);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden;
}
#bio { position: fixed; inset: 0; width: 100%; height: 100%; z-index: -1; pointer-events: none; }
img, video { max-width: 100%; display: block; }
h1, h2, h3, h4 { font-family: var(--font); text-wrap: balance; }
p, li { text-wrap: pretty; }
a { color: var(--mint); text-decoration: none; }
::selection { background: rgba(61, 219, 133, .35); color: #fff; }
:focus-visible { outline: 2.5px solid var(--mint); outline-offset: 3px; }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--pad); }
main { display: block; }
main [id] { scroll-margin-top: calc(var(--stick, 64px) + 14px); }
/* sections land with their heading just under the sticky bars, not their whole top padding */
main .sec[id] { scroll-margin-top: calc(var(--stick, 64px) - var(--sec) + 20px); }
main .topic[id] { scroll-margin-top: calc(var(--stick, 64px) - var(--tpad) + 20px); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.98); } to { opacity: 1; transform: none; } }
@keyframes float { 50% { transform: translateY(-8px); } }

/* ---------- icons ---------- */
svg.ico, svg.arrow, svg.chev { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }
svg.ico { width: 18px; height: 18px; stroke-width: 1.7; }
svg.arrow { width: 12px; height: 12px; stroke-width: 2.2; transition: transform .25s var(--ease); }
svg.chev { width: 12px; height: 12px; stroke-width: 2.2; transition: transform .2s; }

/* ---------- surfaces ---------- */
/* glass: the game's frosted panel with a tinted gradient border (legal pages, the wiki) */
.glass {
  --tint: #ffffff; position: relative; border-radius: 16px;
  background: linear-gradient(color-mix(in srgb, var(--tint) 10%, transparent), color-mix(in srgb, var(--tint) 10%, transparent)), rgba(18, 8, 18, .5);
  backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.glass::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; pointer-events: none;
  background: linear-gradient(180deg, color-mix(in srgb, var(--tint) 70%, transparent), color-mix(in srgb, var(--tint) 15%, transparent));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
}
/* mem: a membrane card tinted with its --c colour; links and .lift cards rise a little under the pointer */
.mem {
  --c: var(--mint); position: relative; border-radius: var(--radius); color: var(--text);
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 11%, rgba(32, 13, 30, .78)), rgba(20, 8, 20, .74));
  border: 1px solid color-mix(in srgb, var(--c) 26%, rgba(255, 255, 255, .08));
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 12px 32px rgba(0, 0, 0, .22);
  transition: transform .3s var(--ease), border-color .25s, box-shadow .3s;
}
a.mem:hover, .lift:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 18px 40px rgba(0, 0, 0, .3), 0 0 28px color-mix(in srgb, var(--c) 18%, transparent);
}
a.mem:hover svg.arrow, .lift:hover .go svg.arrow, .endcard:hover > svg.arrow { transform: translateX(3px); }

/* ---------- buttons ---------- */
.pill {
  --c: var(--green); display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px; padding: 0 20px;
  border-radius: 14px; font: 800 16px/1.15 var(--font); color: #fff; white-space: nowrap; cursor: pointer;
  background: color-mix(in srgb, var(--c) 14%, transparent); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform .25s var(--spring), background .2s, border-color .2s;
}
.pill:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--c) 24%, transparent); border-color: var(--c); }
.pill:active { transform: scale(.97); }
.pill svg.ico { color: color-mix(in srgb, var(--c) 70%, #fff); }
.pill.big { min-height: 58px; padding: 0 26px; font-size: 18px; border-radius: 16px; }
.pill.prominent { color: #120812; border-color: transparent; font-weight: 900;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 92%, #fff), var(--c));
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 45%, transparent); }
.pill.prominent svg.ico { color: currentColor; }
.cta {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; height: 54px; padding: 0 26px;
  border-radius: 16px; font: 900 18px var(--font); letter-spacing: .3px; color: #05240F !important; white-space: nowrap;
  background: linear-gradient(180deg, #8CFFC0, #3DDC84 55%, #23A85E); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6), 0 0 32px rgba(61, 219, 133, .34);
  overflow: hidden; transition: transform .25s var(--spring), box-shadow .25s;
}
.cta:hover { transform: translateY(-1px) scale(1.02); box-shadow: inset 0 1.5px 0 rgba(255, 255, 255, .6), 0 0 44px rgba(61, 219, 133, .5); }
.cta:active { transform: scale(.97); }
.cta::before { content: ""; position: absolute; top: -30px; left: -80px; width: 40px; height: 130px; transform: rotate(20deg);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .55), transparent); animation: sheen 3.4s ease-in-out infinite; }
@keyframes sheen { 0%, 62% { left: -80px; } 100% { left: 120%; } }
.cta.big { height: 62px; min-width: 250px; font-size: 20px; }
.cta > svg:not([class]), .pill > svg:not([class]) { width: 16px; height: 16px; fill: currentColor; flex: none; }
.btns { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* ---------- text ---------- */
.caps { font: 900 11.5px/1.3 var(--font); letter-spacing: .17em; text-transform: uppercase; color: var(--c, var(--text-3)); margin: 0 0 8px; }
.lead { color: var(--text-2); font-size: clamp(17px, 1.5vw, 19px); line-height: 1.55; max-width: 62ch; }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font: 800 12px/1.4 var(--font);
  color: color-mix(in srgb, var(--c, var(--mint)) 65%, #fff); background: rgba(0, 0, 0, .32); border: 1px solid color-mix(in srgb, var(--c, var(--mint)) 40%, transparent); }
.go { display: inline-flex; align-items: center; gap: 7px; font: 800 14px/1.3 var(--font); color: var(--c, var(--mint)); }
.go svg.ico { width: 17px; height: 17px; }

/* ---------- header ---------- */
.top { position: sticky; top: 0; z-index: 50; background: rgba(18, 8, 18, .74); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); transition: background .3s, box-shadow .3s; }
.top.scrolled { background: rgba(18, 8, 18, .9); box-shadow: 0 10px 30px rgba(0, 0, 0, .3); }
.top .bar { display: flex; align-items: center; gap: 10px; height: 64px; }
.top .spacer { flex: 1 1 0; min-width: 0; }
.wordmark { display: inline-flex; align-items: center; flex: 0 1 auto; min-width: 0; }
.wordmark img { width: 206px; max-width: 100%; height: auto; }
.top .wordmark { margin-right: 6px; }
.top .pill { min-height: 40px; padding: 0 14px; font-size: 14.5px; border-radius: 12px; }
.top .reddit-top { display: none; }
.top .beta { height: 42px; padding: 0 16px; font-size: 15px; border-radius: 13px; flex: none; }
.menu-btn { display: grid; width: 44px; height: 44px; flex: none; place-items: center; border-radius: 13px; cursor: pointer; padding: 0;
  background: rgba(255, 255, 255, .07); border: 1px solid var(--line-2); color: #fff; transition: background .2s; }
.menu-btn:hover { background: rgba(255, 255, 255, .13); }
.menu-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
@media (min-width: 640px) and (max-width: 1079px), (min-width: 1300px) { .top .reddit-top { display: inline-flex; } }
@media (max-width: 380px) { .top .beta { height: 40px; padding: 0 12px; font-size: 13.5px; } .top .bar { gap: 8px; } }

/* wide screens: two dropdowns of page tiles plus three links */
.mainnav { display: none; align-items: center; gap: 2px; }
.ng { position: relative; }
.ng-btn, .ng-link { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 12px; border-radius: 12px; border: 0;
  background: none; color: var(--text-2); font: 800 15px var(--font); cursor: pointer; white-space: nowrap; transition: background .2s, color .2s; }
.ng-btn:hover, .ng-link:hover, .ng.open .ng-btn { background: rgba(255, 255, 255, .07); color: #fff; }
.ng-btn.on, .ng-link.on { color: var(--mint); }
.ng.open .chev { transform: rotate(180deg); }
.ng-panel { position: absolute; top: calc(100% + 10px); left: -8px; z-index: 60; display: none; padding: 10px; border-radius: 20px;
  background: #1E0C1C; border: 1px solid var(--line-2); box-shadow: 0 24px 60px rgba(0, 0, 0, .55); }
.ng.open .ng-panel { display: block; animation: pop .18s var(--ease); }
.ng-grid { display: grid; grid-template-columns: 268px; gap: 6px; }
.ng-grid.two { grid-template-columns: 268px 268px; }
.ng-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 11px 14px; border-radius: 14px; color: var(--text-2);
  font: 800 14px var(--font); background: rgba(143, 156, 255, .08); border: 1px solid rgba(143, 156, 255, .22); transition: background .2s, color .2s; }
.ng-foot svg.ico { color: var(--codex); }
.ng-foot span { flex: 1; }
.ng-foot:hover { color: #fff; background: rgba(143, 156, 255, .16); }
.ng-foot:hover svg.arrow { transform: translateX(3px); }
/* a page tile: art, name and a short line, tinted with the page's colour */
.nt { --c: var(--mint); display: flex; align-items: center; gap: 12px; min-height: 60px; padding: 9px 12px 9px 9px; border-radius: 14px; color: #fff;
  background: color-mix(in srgb, var(--c) 8%, transparent); border: 1px solid color-mix(in srgb, var(--c) 26%, transparent);
  transition: transform .2s var(--spring), background .2s, border-color .2s; }
.nt:hover { transform: scale(1.02); background: color-mix(in srgb, var(--c) 16%, transparent); border-color: color-mix(in srgb, var(--c) 55%, transparent); }
.nt.on { border-color: var(--c); background: color-mix(in srgb, var(--c) 18%, transparent); }
.nt img { width: 40px; height: 40px; flex: none; object-fit: contain; }
.nt > span:last-child { min-width: 0; }
.nt b { display: block; font: 900 15px/1.2 var(--font); }
.nt small { display: block; font: 700 12px/1.3 var(--font); color: var(--text-3); }
.nt-ico { width: 40px; height: 40px; flex: none; display: grid; place-items: center; border-radius: 12px; color: var(--c, var(--codex));
  background: color-mix(in srgb, var(--c, var(--codex)) 18%, transparent); }
.nt-ico svg.ico { width: 24px; height: 24px; }

/* phones and tablets: the menu button opens a full-screen sheet of the same tiles */
.sheet { position: fixed; inset: 0; z-index: 70; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  background: radial-gradient(circle at 30% 15%, #331229, #120812 70%); }  /* opaque: nothing of the page shows through the tiles */
.sheet[hidden] { display: none; }
.sheet:not([hidden]) .sheet-in { animation: pop .2s var(--ease); }
.sheet-in { max-width: 680px; margin: 0 auto; padding: calc(env(safe-area-inset-top) + 10px) var(--pad) calc(env(safe-area-inset-bottom) + 28px); }
.sheet-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 54px; margin-bottom: 10px; }
.sheet-top .wordmark img { width: 190px; }
.sheet .caps { margin: 22px 0 8px 4px; }
.sheet-home { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
.sheet-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px; }
@media (min-width: 440px) { .sheet-home { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 560px) { .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.sheet-cta { width: 100%; margin-top: 26px; }
.sheet-foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 0 6px; margin-top: 16px; }
.sheet-foot a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; color: var(--text-2); font: 800 14.5px var(--font); }
.sheet-foot a:hover { color: #fff; }
body.sheet-open { overflow: hidden; }
@media (min-width: 1080px) {
  .mainnav { display: flex; }
  .top .menu-btn { display: none; }
  .sheet { display: none !important; }
}

/* ---------- languages: a menu in the bar (from tablets up), a row in the phone sheet, the wiki's drawer and the footer ---------- */
.top .lang { display: none; flex: none; }
@media (min-width: 640px) { .top .lang { display: block; } }
.lang-btn { padding: 0 10px; }
.lang-btn svg.ico { width: 18px; height: 18px; }
.lang-btn span { font: 900 13px var(--font); letter-spacing: .08em; }
.lang .ng-panel { left: auto; right: -8px; min-width: 200px; padding: 6px; }
.lang-list { display: flex; flex-direction: column; gap: 2px; }
.lang-list a { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 0 14px; border-radius: 12px;
  color: var(--text-2); font: 800 15px var(--font); transition: background .2s, color .2s; }
.lang-list a:hover { background: rgba(255, 255, 255, .07); color: #fff; }
.lang-list a.on { color: var(--mint); }
.lang-list a.on::after { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mint); box-shadow: 0 0 8px var(--mint); }
.langs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.langs > svg.ico { margin-right: 4px; color: var(--text-3); }
.langs a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 13px; border-radius: 999px; color: var(--text-2); font: 800 14px var(--font);
  transition: background .2s, color .2s; }
.langs a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.langs a.on { color: var(--mint); background: rgba(61, 219, 133, .1); box-shadow: inset 0 0 0 1px rgba(61, 219, 133, .35); }
.sheet-lang { justify-content: center; margin: 0 0 12px; }
.foot-base .foot-lang { gap: 2px; }
.foot-base .foot-lang a { min-height: 36px; padding: 0 11px; font-size: 13.5px; }
.foot-base .foot-lang a.on { color: var(--mint); }
/* Spanish and German run longer: a word too long for its box breaks instead of spilling out of it. German, with its
   long compounds, also hyphenates by the page's language (<html lang>); Spanish words are short enough to wrap whole,
   as Spanish sites do, which also keeps StrainBorn in one piece */
html:lang(de) { -webkit-hyphens: auto; hyphens: auto; }
html:lang(es) body, html:lang(de) body { overflow-wrap: anywhere; }
.lang-list a, .langs a { -webkit-hyphens: manual; hyphens: manual; }

/* ---------- footer ---------- */
.foot { position: relative; padding: clamp(44px, 6vw, 64px) 0 calc(env(safe-area-inset-bottom) + 28px); color: var(--text-3); font-size: 14.5px;
  background: linear-gradient(180deg, rgba(14, 6, 14, .55), rgba(10, 4, 10, .85)); border-top: 1px solid var(--line); }
.foot-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 24px; }
.foot-brand { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.foot-brand .wordmark img { width: 190px; }
.foot-brand p { margin: 0; max-width: 36ch; color: var(--text-2); font-size: 15px; }
.foot-brand .cta { height: 48px; padding: 0 20px; font-size: 16px; }
.foot-grid nav { display: flex; flex-direction: column; align-items: flex-start; }
.foot-grid nav .caps { margin: 0 0 6px; }
.foot-grid nav a + .caps { margin-top: 20px; }
.foot-grid nav a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-2); font: 700 15px/1.3 var(--font); }
.foot a:hover { color: #fff; }
.foot-base { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 24px; margin-top: 36px;
  padding-top: 18px; font-size: 13.5px; }
.foot-base::before { content: ""; position: absolute; top: 0; left: var(--pad); right: var(--pad); height: 1px; background: var(--line); }
.foot-base nav { display: flex; flex-wrap: wrap; gap: 0 18px; }
.foot-base a { display: inline-flex; align-items: center; min-height: 40px; color: var(--text-3); font-weight: 700; }
@media (min-width: 760px) { .foot-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .foot-grid { grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); } .foot-brand { grid-column: auto; } }

/* ---------- a feature page's own bar: its name, its topics (chips on wide screens, a dropdown on phones), the wiki ---------- */
.subbar { position: sticky; top: var(--top, 64px); z-index: 40; background: rgba(18, 8, 18, .82); border-bottom: 1px solid var(--line);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); }
.sb { position: relative; display: flex; align-items: center; gap: 12px; height: 52px; }
.sb-title { display: inline-flex; align-items: center; gap: 9px; flex: 1 1 auto; min-width: 0; color: #fff; font: 900 15px var(--font); }
.sb-title img { width: 28px; height: 28px; flex: none; object-fit: contain; }
.sb-title span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-title .sb-short { display: none; }
@media (max-width: 479px) { .sb-title .sb-long { display: none; } .sb-title .sb-short { display: inline; } }
@media (max-width: 400px) { .sb-title.tight img { display: none; } }
.sb-chips { position: relative; display: none; flex: 1 1 auto; min-width: 0; align-items: center; gap: 4px; overflow-x: auto; scrollbar-width: none; overscroll-behavior-x: contain;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent);
  mask-image: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 24px), transparent); padding: 0 14px; }
.sb-chips::-webkit-scrollbar { display: none; }
.sb-chips a { flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 13px; border-radius: 999px; white-space: nowrap;
  color: var(--text-3); font: 800 13.5px var(--font); transition: background .2s, color .2s, box-shadow .2s; }
.sb-chips a:hover { color: #fff; background: rgba(255, 255, 255, .06); }
.sb-chips a.on { color: #fff; background: color-mix(in srgb, var(--c) 20%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--c) 55%, transparent); }
.sb-menu { flex: none; position: static; }  /* its list hangs from the bar's right edge, not from the button */
.sb-menu .ng-btn { height: 38px; font-size: 14px; color: #fff; background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); }
.sb-panel { left: auto; right: var(--pad); top: calc(100% + 8px); width: min(380px, calc(100% - 2 * var(--pad))); padding: 8px;
  max-height: calc(100vh - var(--stick, 116px) - 24px); overflow-y: auto; overscroll-behavior: contain; }
.sb-list { display: flex; flex-direction: column; gap: 2px; }
.sb-list a { display: block; padding: 9px 12px; border-radius: 12px; color: #fff; }
.sb-list a:hover { background: rgba(255, 255, 255, .07); }
.sb-list a.on { background: color-mix(in srgb, var(--c) 14%, transparent); box-shadow: inset 3px 0 0 var(--c); }
.sb-list small { display: block; font: 900 10px/1.5 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.sb-list b { font: 800 15px/1.25 var(--font); }
.sb-wiki { flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 13px; border-radius: 12px; color: #D5DAFF;
  font: 800 14px var(--font); background: rgba(143, 156, 255, .12); border: 1px solid rgba(143, 156, 255, .4); transition: background .2s; }
.sb-wiki:hover { background: rgba(143, 156, 255, .24); color: #fff; }
@media (min-width: 900px) {
  .sb-title { flex: none; }
  .sb-chips { display: flex; }
  .sb-menu { display: none; }
}
@media (max-width: 380px) { .sb { gap: 8px; } .sb-menu .ng-btn { padding: 0 10px; } .sb-wiki { padding: 0 10px; } }

/* ---------- a feature page's hero ---------- */
.phero { --c: var(--mint); position: relative; padding: clamp(36px, 6vw, 80px) 0 clamp(40px, 6vw, 72px);
  background: radial-gradient(ellipse 70% 90% at 85% 10%, color-mix(in srgb, var(--c) 16%, transparent), transparent 70%); }
.phero-row { display: grid; gap: clamp(28px, 4vw, 56px); align-items: center; }
.phero-text .caps { margin-bottom: 12px; }
.phero h1 { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 18px); margin: 0 0 16px; font: 900 clamp(38px, 5.6vw, 66px)/1.02 var(--font); letter-spacing: -.01em; }
.phero h1 span { background: linear-gradient(180deg, #fff 30%, color-mix(in srgb, var(--c) 55%, #fff)); -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em; }
.phero-icon { width: clamp(52px, 6vw, 76px); height: auto; aspect-ratio: 1; flex: none; filter: drop-shadow(0 0 18px color-mix(in srgb, var(--c) 45%, transparent)); }
.phero .lead { margin: 0 0 28px; }
.phero-shot { margin: 0; border-radius: 22px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 35%, rgba(255, 255, 255, .1));
  box-shadow: 0 30px 80px rgba(0, 0, 0, .45), 0 0 70px color-mix(in srgb, var(--c) 16%, transparent); background: #000; }
.phero-shot img { width: 100%; height: auto; aspect-ratio: 1600 / 736; object-fit: cover; }
@media (min-width: 980px) { .phero-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
@media (max-width: 560px) { .phero .btns > a { flex: 1 1 100%; } }

/* ---------- a feature page's topics: words, points and wiki links beside a screenshot, sides alternating ---------- */
.topic { --c: var(--mint); --tpad: clamp(44px, 6.5vw, 84px); position: relative; padding: var(--tpad) 0; }
.topic::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--max), 100%); transform: translateX(-50%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, .1) 80%, transparent); }
.topic-row { display: grid; gap: clamp(26px, 4vw, 64px); align-items: center; }
.topic-main { min-width: 0; }
.topic-main h2 { margin: 0 0 14px; font: 900 clamp(28px, 3.6vw, 44px)/1.1 var(--font); letter-spacing: -.005em; color: #fff; }
.tlead { margin: 0 0 20px; color: var(--text-2); font-size: clamp(16.5px, 1.4vw, 18px); line-height: 1.6; max-width: 62ch; }
.points { list-style: none; margin: 0 0 24px; padding: 0; display: grid; gap: 11px; }
.points li { position: relative; padding-left: 28px; color: var(--text-2); font: 500 15.5px/1.5 var(--font); }
.points b { color: #fff; font-weight: 800; }
.points li::before { content: ""; position: absolute; left: 3px; top: .42em; width: 11px; height: 11px; border-radius: 50%;
  border: 2.5px solid var(--c); box-shadow: 0 0 10px color-mix(in srgb, var(--c) 55%, transparent); }
.glance { padding: clamp(20px, 3vw, 28px); }
.glance .points { margin: 0; }
.shot { margin: 0; min-width: 0; }
.shot .zoom { border-radius: 18px; overflow: hidden; border: 1px solid color-mix(in srgb, var(--c) 30%, rgba(255, 255, 255, .1)); background: #000;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .4), 0 0 50px color-mix(in srgb, var(--c) 12%, transparent); }
.shot img { width: 100%; height: auto; }
.shot figcaption { display: flex; align-items: center; gap: 8px; margin-top: 12px; color: var(--text-3); font: 700 13.5px/1.4 var(--font); }
.shot figcaption::before { content: ""; width: 6px; height: 6px; flex: none; border-radius: 50%; background: var(--c); }
.topic-links { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.wiki-btn { --c: var(--codex); white-space: normal; text-align: left; padding: 10px 18px; max-width: 100%; font-weight: 700; font-size: 15px; }
.wiki-btn b { font-weight: 900; }
.wchips { display: flex; flex-wrap: wrap; gap: 8px; }
.wchip { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; color: var(--text-2); font: 700 13.5px var(--font);
  background: rgba(255, 255, 255, .04); border: 1px solid var(--line-2); transition: color .2s, border-color .2s, background .2s; }
.wchip:hover { color: #fff; border-color: rgba(143, 156, 255, .6); background: rgba(143, 156, 255, .1); }
.topic .vlineup, .topic .route { margin-top: clamp(28px, 4vw, 44px); }
@media (min-width: 900px) {
  .topic-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .topic.flip .topic-main { order: 2; }
  .topic.solo .topic-row { grid-template-columns: minmax(0, 820px); }
}

/* the Viruses page's lineup */
.vlineup { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .vlineup { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.vl { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 20px 12px 18px; text-align: center; }
.vl b { font: 900 clamp(17px, 1.6vw, 20px)/1.2 var(--font); }
.vl .caps { margin: 0; font-size: 10.5px; }
html:lang(es) .vl .caps { letter-spacing: .06em; }   /* (so EL SUPERCONTAGIADOR fits a phone's half-width card) */
.vl .chip { margin-top: 8px; }
.vart { display: grid; place-items: center; width: 92px; height: 92px; flex: none; border-radius: 50%; margin-bottom: 8px;
  background: radial-gradient(circle, color-mix(in srgb, var(--c) 32%, transparent), transparent 70%); }
.vart img { width: 74%; height: 74%; object-fit: contain; transition: transform .6s var(--ease); }
a:hover .vart img { transform: rotate(25deg) scale(1.06); }

/* the eight organs, nose to brain */
.route { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
@media (min-width: 900px) { .route { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
.route li { display: flex; min-width: 0; }
.stop { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 16px 16px 18px; min-width: 0; }
.stop .n { font: 900 11px/1.3 var(--font); letter-spacing: .16em; text-transform: uppercase; color: var(--c); }
.stop img { width: 52px; height: 52px; object-fit: contain; margin: 8px 0 6px; filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 35%, transparent)); }
.stop b { font: 900 17px/1.2 var(--font); }
.stop small { color: var(--text-3); font: 700 13px/1.35 var(--font); }

/* the end of a feature page: what's next and the wiki */
.endband { position: relative; padding: clamp(44px, 6vw, 72px) 0 clamp(56px, 8vw, 96px); }
.endband::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--max), 100%); transform: translateX(-50%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, .1) 80%, transparent); }
.endgrid { display: grid; gap: 14px; }
@media (min-width: 760px) { .endgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } }
.endcard { display: flex; align-items: center; gap: 16px; padding: 20px 22px; }
.endcard > img { width: 56px; height: 56px; flex: none; object-fit: contain; }
.endcard .nt-ico { width: 56px; height: 56px; border-radius: 16px; }
.endcard .nt-ico svg.ico { width: 30px; height: 30px; }
.ec-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ec-text .caps { margin: 0; }
.ec-text b { font: 900 clamp(18px, 1.8vw, 21px)/1.2 var(--font); }
.ec-text small { color: var(--text-3); font: 700 14px/1.4 var(--font); }
.endcard > svg.arrow { width: 16px; height: 16px; color: var(--c); }

/* ---------- home: the title screen ---------- */
/* The pitch and the buttons beside real gameplay in a phone frame, over the game's drifting cells, with a card of
   facts and badges underneath. One column below 1080px: the gameplay comes after the buttons. */
.hero { position: relative; isolation: isolate; overflow-x: clip; padding: clamp(28px, 4.6vw, 60px) 0 clamp(44px, 5.5vw, 72px); }
.hero::before { content: ""; position: absolute; inset: 0 0 -14% 0; z-index: -2; pointer-events: none;
  background: radial-gradient(ellipse 50% 60% at 22% 32%, rgba(140, 22, 52, .46), transparent 70%), radial-gradient(ellipse 46% 56% at 74% 46%, rgba(61, 219, 133, .1), transparent 70%);
  -webkit-mask-image: linear-gradient(#000 70%, transparent); mask-image: linear-gradient(#000 70%, transparent); }
/* the drifting cells (BioBackground in the game): each one crosses left to right in --d, starting --p of the way along,
   bobbing as it goes; the green ones are spiked like virions. With less motion they rest where they start. */
.hero-bio { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none;
  -webkit-mask-image: linear-gradient(#000 76%, transparent); mask-image: linear-gradient(#000 76%, transparent); }
.hero-bio i { position: absolute; left: 0; top: var(--y); width: var(--s); height: var(--s); margin: calc(var(--s) / -2) 0 0 calc(var(--s) / -2);
  border-radius: 50%; translate: calc(var(--p) * 120vw - 10vw) 0;
  animation: hb-drift var(--d) linear calc(var(--d) * var(--p) * -1) infinite, hb-bob var(--b) ease-in-out calc(var(--b) * var(--p) * -2) infinite alternate; }
.hero-bio .mote { background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 26%, transparent), color-mix(in srgb, var(--c) 6%, transparent) 70%, transparent),
  radial-gradient(closest-side, transparent 82%, color-mix(in srgb, var(--c) 22%, transparent) 83.5% 86%, transparent 87.5%); }
.hero-bio .vir::after { content: ""; position: absolute; inset: 0; border-radius: 50%; animation: spin 36s linear infinite;
  background: repeating-conic-gradient(color-mix(in srgb, var(--c) 38%, transparent) 0 3.5deg, transparent 3.5deg 36deg);
  -webkit-mask: radial-gradient(closest-side, transparent 87%, #000 88% 99%, transparent); mask: radial-gradient(closest-side, transparent 87%, #000 88% 99%, transparent); }
.hero-bio .rbc { background: radial-gradient(closest-side, rgba(120, 14, 40, .2) 28%, rgba(196, 42, 74, .26) 60%, rgba(196, 42, 74, .1) 80%, transparent); }
@keyframes hb-drift { from { translate: -10vw 0; } to { translate: 110vw 0; } }
@keyframes hb-bob { from { transform: translateY(-16px); } to { transform: translateY(16px); } }
@keyframes ping { 70%, 100% { transform: scale(2.8); opacity: 0; } }
@keyframes breathe { from { opacity: .55; } }
/* (out of view nothing in it moves: site.js marks it idle) */
.hero.idle *, .hero.idle *::before, .hero.idle *::after { animation-play-state: paused; }

.hero-grid { display: grid; grid-template-areas: "copy" "media"; gap: 32px; justify-items: center; text-align: center; }
.hero-copy { grid-area: copy; display: flex; flex-direction: column; align-items: center; min-width: 0; }
.hero-kicker { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 clamp(16px, 2vw, 22px); padding: 6px 14px 6px 12px; border-radius: 999px;
  font: 800 13.5px/1.25 var(--font); color: var(--mint); background: rgba(61, 219, 133, .1); border: 1px solid rgba(61, 219, 133, .34); }
.hero-kicker i { position: relative; width: 8px; height: 8px; flex: none; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px var(--green); }
.hero-kicker i::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--green); animation: ping 2.2s ease-out infinite; }
.hero .logo { width: min(100%, 560px); margin: 0; line-height: 0; }
.hero .logo img { width: 100%; height: auto; filter: drop-shadow(0 10px 40px rgba(61, 219, 133, .25)); }
.tagline { margin: clamp(14px, 1.8vw, 22px) 0 0; font: 900 clamp(31px, 3.3vw, 46px)/1.06 var(--font); letter-spacing: -.012em; color: #fff; }
.tagline span { display: block; padding-bottom: .06em; background: linear-gradient(90deg, var(--mint), var(--green) 60%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { margin: 14px 0 26px; max-width: 44ch; }
.hero-btns { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; align-items: stretch; }
.hero-btns > a { min-width: 240px; }
.hero-more { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-top: 12px; }
.hero-more .pill { min-height: 44px; font-size: 15px; padding: 0 18px; }
@media (max-width: 380px) { .hero-more { gap: 8px; } .hero-more .pill { padding: 0 12px; font-size: 14px; } }
@media (max-width: 560px) { .hero-btns > a { flex: 1 1 100%; min-width: 0; } }

/* the gameplay: an iPhone Duo (below), glowing, with the game's virion peeking out behind it */
.hero-media { grid-area: media; position: relative; isolation: isolate; width: 100%; max-width: 720px; margin: 0; }
.hero-media::before { content: ""; position: absolute; inset: -24% -12%; z-index: -2; pointer-events: none; animation: breathe 6s ease-in-out infinite alternate;
  background: radial-gradient(closest-side, rgba(61, 219, 133, .3), rgba(61, 219, 133, .07) 55%, transparent), radial-gradient(closest-side at 78% 72%, rgba(255, 94, 122, .2), transparent); }
/* (its middle sits just above the Duo's top edge, 7u down the figure: a margin in % follows the figure's width, as u does) */
.hero-virion { position: absolute; z-index: -1; left: -10px; top: 0; margin-top: calc(4.7% - clamp(72px, 12vw, 170px) / 2); width: clamp(72px, 12vw, 170px);
  height: auto; aspect-ratio: 1; pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(61, 219, 133, .5)); animation: spin 60s linear infinite; }
@media (min-width: 600px) { .hero-virion { left: -5%; } }

/* ---------- home: the hero's iPhone Duo ---------- */
/* Apple's foldable, drawn in CSS 3D. .duo-dev is the open phone: its right half (.duo-half) stays put while the left
   half (.duo-flap) swings shut over it on the hinge, the flap's inner side (.duo-front) and its outside, the cover
   screen (.duo-cover), back to back with its edge (.duo-edge) between them. Every screen is a box that clips a picture
   (.duo-pic): the game, with the poster under its video or canvas and a tiny blurred copy of it (--ph, inlined by
   build.py) under that, so no screen is ever dark, even before anything has loaded. The flat inner screen
   (.duo-inner) lies over the open phone and plays the video; while the phone folds or unfolds, the halves' screens
   (.duo-scr) show the game instead, drawn into their canvases from the playing video. The cover screen's game
   (.duo-rot) is turned a quarter, so it reads right when the phone is held sideways. site.js runs the loop (Web
   Animations: transforms, opacity, and the pictures' blur, brightness and zoom) and plays one video at a time. Every
   size is in --u, a hundredth of the open phone's width (from the width of .duo), so it all scales together; the
   perspective (330u), the half width (50u), the inner screen's shape (96u by 67.4u) and the halves' overlap at the
   hinge (a tenth of a half) are also in site.js. Without the script, or with less motion, it stays open and still. */
.duo { --u: 3.4px; --rim: calc(var(--u) * .42); --R: calc(var(--u) * 4.6); --sr: calc(var(--u) * 2.7); --rs: calc(var(--u) * 1.6);
  --metal: linear-gradient(145deg, #f0f0f3, #a9a9b1 16%, #6f6f78 40%, #8f8f98 62%, #d9d9de 82%, #8a8a93); --ph: none;
  position: relative; container-type: inline-size; }
@supports (width: 1cqw) { .duo { --u: .96cqw; } }
.duo-body { position: relative; width: calc(var(--u) * 100); height: calc(var(--u) * 71); margin: calc(var(--u) * 7) auto calc(var(--u) * 6);
  perspective: calc(var(--u) * 330); }
.duo-body i, .duo-body b { position: absolute; display: block; }
.duo-dev { position: absolute; inset: 0; transform-style: preserve-3d; transform-origin: 75% 50%; }
/* (the hinge sits a hair in front of the screens, so the folded halves never share a plane) */
.duo-flap { position: absolute; top: 0; left: 0; width: 50%; height: 100%; transform-style: preserve-3d; transform-origin: 100% 50% calc(var(--u) * .25); }
/* each face: the bright metal rim (one gradient across both halves of the open phone, so it runs on unbroken at the
   hinge), the black bezel (::before) and the screen */
.duo-half, .duo-front, .duo-cover { position: absolute; top: 0; height: 100%; isolation: isolate; background: var(--metal); }
.duo-half { left: 50%; width: 50%; border-radius: 0 var(--R) var(--R) 0; background-size: 200% 100%; background-position: 100% 0;
  transform: translateZ(0); }  /* (its own layer in the 3D scene: without one, Safari never shows its canvas) */
.duo-front, .duo-cover { left: 0; width: 100%; -webkit-backface-visibility: hidden; backface-visibility: hidden; }
.duo-front { border-radius: var(--R) 0 0 var(--R); background-size: 200% 100%; }
.duo-half::before, .duo-front::before, .duo-cover::before { content: ""; position: absolute; background: #040405; }
.duo-half::before { inset: var(--rim) var(--rim) var(--rim) 0; border-radius: 0 calc(var(--R) - var(--rim)) calc(var(--R) - var(--rim)) 0; }
.duo-front::before { inset: var(--rim) 0 var(--rim) var(--rim); border-radius: calc(var(--R) - var(--rim)) 0 0 calc(var(--R) - var(--rim)); }
/* the screens: each one's picture clipped to the glass, over the tiny copy of the game (and the game's dark red, the
   poster's average colour), with a soft reflection and the hinge's faint crease on top. The halves' screens share
   out the flat screen's, so the open phone's two halves look just like it */
.duo-scr, .duo-inner, .duo-cscr { z-index: 1; overflow: hidden; background: var(--ph) center / cover no-repeat, #31151b; }
.duo-scr { top: calc(var(--u) * 1.8); bottom: calc(var(--u) * 1.8); background-size: 200% 100%; }
.duo-half .duo-scr { left: 0; right: calc(var(--u) * 2); border-radius: 0 var(--sr) var(--sr) 0; background-position: 100% 0; }
.duo-front .duo-scr { left: calc(var(--u) * 2); right: 0; border-radius: var(--sr) 0 0 var(--sr); background-position: 0 0; }
.duo-scr::after, .duo-inner::after, .duo-cscr::after { content: ""; position: absolute; z-index: 1; inset: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent calc(50% - var(--u) * .6), rgba(255, 255, 255, .05) 50%, transparent calc(50% + var(--u) * .6)),
    linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 30%, transparent 46%); }
.duo-scr::after { background-size: 200% 100%; }
.duo-half .duo-scr::after { background-position: 100% 0; }
.duo-cscr::after { background: linear-gradient(115deg, rgba(255, 255, 255, .1), rgba(255, 255, 255, .025) 30%, transparent 46%); }
/* a screen's picture: the game, on the poster (set by build.py) for the moment before it has a frame of its own.
   site.js blurs, dims and zooms it while the screen wakes */
.duo-pic { inset: 0; background: center / cover no-repeat; }
.duo-pic > video, .duo-pic > canvas { display: block; width: 100%; height: 100%; object-fit: cover; }
/* (each half's picture reaches a tenth of its width past the hinge, under the other half, so blurred it fades only at
   the screen's edges, as the flat screen's does; it zooms about the middle of the hinge, the flat screen's centre) */
.duo-scr .duo-pic { width: 110%; background-size: 181.818% 100%; opacity: 0; }
.duo-half .duo-pic { left: -10%; background-position: 100% 0; transform-origin: 9.091% 50%; }
.duo-front .duo-pic { left: 0; background-position: 0 0; transform-origin: 90.909% 50%; }
/* the light on a turning half: darker as it turns away (all but its metal rim), a glint as it catches the light */
.duo-shade, .duo-sheen { inset: 0; z-index: 2; border-radius: inherit; opacity: 0; pointer-events: none; }
.duo-shade { background: #000; }
.duo-half .duo-shade { inset: var(--rim) var(--rim) var(--rim) 0; border-radius: 0 calc(var(--R) - var(--rim)) calc(var(--R) - var(--rim)) 0; }
.duo-front .duo-shade { inset: var(--rim) 0 var(--rim) var(--rim); border-radius: calc(var(--R) - var(--rim)) 0 0 calc(var(--R) - var(--rim)); }
.duo-cover .duo-shade { inset: var(--rim); border-radius: calc(var(--rs) - var(--rim)) calc(var(--R) - var(--rim)) calc(var(--R) - var(--rim)) calc(var(--rs) - var(--rim)); }
.duo-sheen { background: linear-gradient(105deg, transparent 16%, rgba(255, 255, 255, .15) 44%, rgba(255, 255, 255, .05) 58%, transparent 72%); }
/* the flap's outer edge, its thickness, seen as it swings */
.duo-edge { left: 0; top: var(--R); width: calc(var(--u) * 2.2); height: calc(100% - var(--R) * 2); border-radius: calc(var(--u) * 1.1);
  background: linear-gradient(90deg, #45454d, #9c9ca4 30%, #e2e2e7 52%, #8a8a92 74%, #3e3e46);
  transform-origin: 0 50%; transform: translateZ(calc(var(--u) * -2.2)) rotateY(-90deg); -webkit-backface-visibility: hidden; backface-visibility: hidden; }
/* the cover screen, on the back of the flap: the hinge's side (left when folded) is squarer, with a wider bezel */
.duo-cover { border-radius: var(--rs) var(--R) var(--R) var(--rs); transform: translateZ(calc(var(--u) * -2.2)) rotateY(180deg); }
.duo-cover::before { inset: var(--rim); border-radius: calc(var(--rs) - var(--rim)) calc(var(--R) - var(--rim)) calc(var(--R) - var(--rim)) calc(var(--rs) - var(--rim)); }
.duo-cscr { position: absolute; top: calc(var(--u) * 1.7); bottom: calc(var(--u) * 1.7); left: calc(var(--u) * 2.1); right: calc(var(--u) * 1.6);
  border-radius: calc(var(--u) * 1.1) calc(var(--u) * 3) calc(var(--u) * 3) calc(var(--u) * 1.1); background: #31151b; }
.duo-rot { position: absolute; left: 50%; top: 50%; width: calc(var(--u) * 67.6); height: calc(var(--u) * 46.3); transform: translate(-50%, -50%) rotate(90deg);
  background: var(--ph) center / cover no-repeat; }
.duo-cam { top: calc(var(--u) * 1.9); right: calc(var(--u) * 2.1); width: calc(var(--u) * 2.3); height: calc(var(--u) * 2.3); border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #2a2e3a, #050507 58%); box-shadow: 0 0 0 calc(var(--u) * .22) rgba(255, 255, 255, .05); }
/* the buttons, on the right half's top and outer edges (the top and right of the folded phone) */
.duo-btn { background: linear-gradient(#e4e4e8, #8d8d95); }
.duo-vol, .duo-vol2 { top: calc(var(--u) * -.5); width: calc(var(--u) * 6); height: calc(var(--u) * .6); border-radius: calc(var(--u) * .3) calc(var(--u) * .3) 0 0; }
.duo-vol { left: calc(var(--u) * 22); }
.duo-vol2 { left: calc(var(--u) * 31); }
.duo-side { right: calc(var(--u) * -.5); top: calc(var(--u) * 20); width: calc(var(--u) * .6); height: calc(var(--u) * 7.5);
  border-radius: 0 calc(var(--u) * .3) calc(var(--u) * .3) 0; background: linear-gradient(90deg, #8d8d95, #e4e4e8); }
/* the inner screen: flat over the open phone */
.duo-inner { position: absolute; left: calc(var(--u) * 2); top: calc(var(--u) * 1.8); width: calc(var(--u) * 96); height: calc(var(--u) * 67.4); border-radius: var(--sr); }
/* its shadow, which narrows as it folds and rises as it turns sideways */
.duo-shadow { left: 0; width: 100%; top: calc(var(--u) * 62); height: calc(var(--u) * 18); border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0, 0, 0, .55), rgba(0, 0, 0, .24) 55%, transparent); }
@media (prefers-reduced-motion: no-preference) {
  .duo-dev, .duo-flap, .duo-shadow, .duo-pic { will-change: transform; }
  .duo-inner, .duo-shade, .duo-sheen { will-change: opacity; }
}

.hero-media figcaption { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 14px; margin-top: 16px; color: var(--text-3); font: 700 13.5px/1.3 var(--font); }
.hero-toggle { display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 999px; cursor: pointer; color: var(--text-2);
  font: 800 13.5px var(--font); background: rgba(255, 255, 255, .06); border: 1px solid var(--line-2); transition: background .2s, color .2s; }
.hero-toggle:hover { background: rgba(255, 255, 255, .12); color: #fff; }
.hero-toggle[hidden] { display: none; }
.hero-toggle span { display: inline-flex; align-items: center; gap: 7px; }
.hero-toggle svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.hero-toggle .hy, .hero-toggle.off .hp { display: none; }
.hero-toggle.off .hy { display: inline-flex; }

/* the facts card: what's in the game, with the badges along its foot */
.facts { margin-top: clamp(34px, 4.5vw, 56px); overflow: hidden; border-radius: 22px; background: linear-gradient(180deg, rgba(40, 16, 36, .72), rgba(20, 8, 20, .76));
  border: 1px solid var(--line-2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 20px 50px rgba(0, 0, 0, .3); }
.facts-grid { list-style: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 0; padding: 0; }
@media (min-width: 760px) { .facts-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* (each cell draws the lines on its left and top; the card's edge clips the outer ones) */
.facts-grid li { display: flex; min-width: 0; box-shadow: -1px 0 0 var(--line), 0 -1px 0 var(--line); }
.facts-grid a { --c: var(--mint); flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-width: 0; min-height: 100px;
  padding: 16px 10px; text-align: center; color: #fff; transition: background .2s; }
.facts-grid a:hover { background: color-mix(in srgb, var(--c) 9%, transparent); }
.facts-grid b { font: 900 clamp(34px, 3.6vw, 44px)/1 var(--font); color: var(--c); text-shadow: 0 0 26px color-mix(in srgb, var(--c) 50%, transparent); }
.facts-grid svg.devs { height: clamp(34px, 3.6vw, 44px); width: auto; padding: 4px 0; fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  filter: drop-shadow(0 0 10px color-mix(in srgb, var(--c) 50%, transparent)); }
.facts-grid small { color: var(--text-2); font: 800 14px/1.3 var(--font); letter-spacing: .02em; }
.facts .badges { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 10px; margin: 0; padding: 12px 14px;
  border-top: 1px solid var(--line); background: rgba(0, 0, 0, .16); }
.badges li { --c: var(--green); display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; font: 800 13px var(--font);
  background: rgba(0, 0, 0, .28); border: 1px solid var(--line-2); color: var(--text-2); }
.badges svg.ico { width: 17px; height: 17px; color: var(--c); }

@media (min-width: 1080px) {
  /* the words on the left, the gameplay on the right */
  .hero-grid { grid-template-columns: minmax(450px, 1fr) minmax(0, 1.3fr); grid-template-areas: "copy media"; column-gap: clamp(40px, 4vw, 64px);
    align-items: center; text-align: left; }
  .hero-copy { align-items: flex-start; justify-self: start; }
  .hero-media { max-width: none; }
  .hero .hero-btns, .hero-more { justify-content: flex-start; }
  .hero .hero-btns > a { min-width: 0; }
}

/* ---------- home: sections ---------- */
.sec { position: relative; padding: var(--sec) 0; }
.sec::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--max), 100%); transform: translateX(-50%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, .1) 80%, transparent); }
.sec-head { max-width: 780px; margin: 0 0 clamp(26px, 3.5vw, 40px); }
.sec-head h2, .wiki-pitch h2 { margin: 0 0 12px; font: 900 clamp(28px, 4vw, 46px)/1.1 var(--font); letter-spacing: -.005em; color: #fff; }
.sec-head p:not(.caps) { margin: 0; color: var(--text-2); font-size: clamp(16px, 1.4vw, 18px); }
.sec-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.more-links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: clamp(20px, 3vw, 28px); }
.more-links.center { justify-content: center; }
@media (max-width: 560px) { .more-links .pill { flex: 1 1 100%; white-space: normal; padding-block: 8px; text-align: center; } }

.trailer { max-width: 1080px; margin: 0 auto; padding: 8px; border-radius: 24px; background: rgba(0, 0, 0, .3);
  border: 1px solid rgba(255, 94, 122, .35); box-shadow: 0 30px 80px rgba(0, 0, 0, .4), 0 0 70px rgba(255, 94, 122, .12); }
.trailer video { width: 100%; height: auto; aspect-ratio: 1280 / 590; border-radius: 17px; background: #000; }

/* how it plays */
.loop { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 560px) { .loop { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .loop { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.step { display: flex; flex-direction: column; padding: 20px 20px 18px; }
.step-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.step-top img { width: 52px; height: 52px; object-fit: contain; }
.step .n { padding: 3px 10px; border-radius: 999px; font: 900 11px/1.4 var(--font); letter-spacing: .14em; text-transform: uppercase; color: var(--c);
  background: color-mix(in srgb, var(--c) 12%, transparent); }
.step h3 { margin: 14px 0 4px; font: 900 23px/1.15 var(--font); }
.step p { margin: 0 0 16px; color: var(--text-2); font-size: 15px; }
.step .go { margin-top: auto; }
@media (max-width: 559px) {
  /* phones: the icon beside the words, so the four steps stay short */
  .step { display: grid; grid-template-columns: 48px minmax(0, 1fr); column-gap: 14px; align-items: start; padding: 16px 16px 14px; }
  .step-top { display: contents; }
  .step-top img { grid-row: 1 / span 4; width: 48px; height: 48px; }
  .step .n { grid-column: 2; justify-self: start; }
  .step h3 { grid-column: 2; margin: 6px 0 2px; font-size: 20px; }
  .step p { grid-column: 2; margin-bottom: 10px; }
  .step .go { grid-column: 2; }
}

/* the game's main menu, laid out like the game (two columns when there's room, stacked on phones) */
.menu-section { position: relative; display: flex; flex-direction: column; gap: 10px; padding: 22px 10px 10px; border-radius: 20px;
  background: rgba(255, 255, 255, .05); border: 1.5px solid rgba(255, 255, 255, .32); margin-top: 10px; }
.menu-section > .label { position: absolute; top: 0; left: 50%; transform: translate(-50%, -50%); padding: 1px 10px; border-radius: 999px;
  background: var(--notch); font: 900 10px/14px var(--font); letter-spacing: 3px; color: rgba(255, 255, 255, .85); white-space: nowrap; }
.gm { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px 24px; align-items: start; max-width: 560px; }
@media (min-width: 860px) { .gm { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); max-width: none; } }
.gm-left, .gm-right { display: flex; flex-direction: column; gap: 12px; }
.gm-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; }
.gm-big { --c: var(--green); display: flex; align-items: center; justify-content: center; gap: 12px; min-height: 108px; padding: 12px 14px; border-radius: 18px;
  color: rgba(0, 0, 0, .85); background: linear-gradient(180deg, color-mix(in srgb, var(--c) 95%, transparent), color-mix(in srgb, var(--c) 72%, transparent));
  box-shadow: 0 0 26px color-mix(in srgb, var(--c) 32%, transparent); transition: transform .25s var(--spring), box-shadow .25s; }
.gm-big:hover { transform: scale(1.02); box-shadow: 0 0 38px color-mix(in srgb, var(--c) 50%, transparent); }
.gm-big img { width: 46px; height: 46px; flex: none; object-fit: contain; }
.gm-big b { display: block; font: 900 28px/1.1 var(--font); }
.gm-big.two { min-height: 92px; flex-direction: column; gap: 4px; text-align: center; }
.gm-big.two img { width: 30px; height: 30px; }
.gm-big.two b { font-size: 21px; }
.gm-collect { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 4px 6px; margin-top: 4px; font: 800 12.5px var(--font); color: rgba(0, 0, 0, .55); }
.gm-collect i { font-style: normal; padding: 2px 9px; border-radius: 999px; background: rgba(0, 0, 0, .6); color: var(--k); }
.gm-tile { --c: var(--lab); display: flex; align-items: center; gap: 12px; min-height: 66px; padding: 0 14px 0 11px; border-radius: 16px; color: #fff;
  font: 800 17px var(--font); background: color-mix(in srgb, var(--c) 13%, transparent); border: 1px solid color-mix(in srgb, var(--c) 50%, transparent);
  transition: transform .25s var(--spring), background .2s; }
.gm-tile.neutral { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.gm-tile:hover { transform: scale(1.02); background: color-mix(in srgb, var(--c) 20%, transparent); }
.gm-ico { width: 42px; height: 42px; flex: none; display: grid; place-items: center; border-radius: 12px; background: color-mix(in srgb, var(--c) 22%, rgba(0, 0, 0, .3)); }
.gm-ico img { width: 34px; height: 34px; object-fit: contain; }
.gm-tile b { flex: 1; min-width: 0; }
.gm-note { min-width: 96px; text-align: center; padding: 3px 10px; border-radius: 999px; font: 800 12px var(--font); color: var(--c); background: rgba(0, 0, 0, .35);
  border: 1px solid color-mix(in srgb, var(--c) 45%, transparent); white-space: nowrap; }
.gm-go { width: 14px; height: 14px; flex: none; fill: none; stroke: rgba(255, 255, 255, .5); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.gm-lineage { --c: var(--green); display: flex; align-items: center; gap: 14px; padding: 14px 16px; border-radius: 18px; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c) 12%, rgba(30, 12, 28, .7)), rgba(20, 8, 20, .7));
  border: 1px solid color-mix(in srgb, var(--c) 50%, transparent); transition: transform .25s var(--spring); }
.gm-lineage:hover { transform: scale(1.015); }
.gm-lineage > img { width: 64px; height: 64px; flex: none; object-fit: contain; animation: spin 30s linear infinite; }
.gm-lineage > span:first-of-type { flex: 1; min-width: 0; }
.gm-lineage b { display: block; font: 900 20px var(--font); }
.gm-lineage em { font: 800 13px var(--font); font-style: normal; color: var(--green); margin-left: 6px; }
.gm-lineage small { display: block; color: var(--text-3); font: 700 13px var(--font); }
@media (max-width: 420px) {
  .gm-big b { font-size: 23px; } .gm-big.two b { font-size: 18px; } .gm-big img { width: 38px; height: 38px; }
  .gm-lineage em { display: block; margin: 0; } .gm-note { min-width: 0; }
  /* Spanish names and notes run longer: the name keeps its words whole, and the note wraps instead */
  html:lang(es) .gm-tile b { min-width: auto; overflow-wrap: normal; }
  html:lang(es) .gm-note { white-space: normal; }
  /* German names are single long words: tile names shrink a little so Herausforderungen stays whole */
  html:lang(de) .gm-tile { font-size: clamp(14px, 3.9vw, 17px); }
}
/* ...and the lineage card's note (Abstammungslinie) drops under its text instead of squeezing it, the epithet stays in
   one piece, and the menu keeps one column until its right half is wide enough for them */
@media (max-width: 520px) {
  html:lang(de) .gm-lineage { flex-wrap: wrap; row-gap: 6px; }
  html:lang(de) .gm-lineage > span:first-of-type { flex-basis: 160px; }
  html:lang(de) .gm-lineage .gm-note { margin-left: 78px; }
}
html:lang(de) .gm-lineage em { white-space: nowrap; }
@media (min-width: 860px) and (max-width: 999px) { html:lang(de) .gm { grid-template-columns: minmax(0, 1fr); max-width: 560px; } }

/* the nine feature pages: the whole card opens the page, its own small button opens that part of the wiki */
.overview { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 620px) { .overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .overview { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; } }
.ov { display: flex; flex-direction: column; overflow: hidden; }
.ov .pic { width: 100%; height: auto; aspect-ratio: 1600 / 736; object-fit: cover; border-bottom: 1px solid var(--line); transition: transform .5s var(--ease); }
.ov:hover .pic { transform: scale(1.04); }
.ov .body { display: flex; flex-direction: column; gap: 8px; flex: 1; padding: 16px 18px 16px; }
.ov .ttl { display: flex; align-items: center; gap: 10px; }
.ov .ttl img { width: 38px; height: 38px; flex: none; object-fit: contain; }
.ov h3 { margin: 0; font: 900 21px/1.2 var(--font); }
.ov h3 a { color: #fff; }
.ov h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.ov:has(h3 a:focus-visible) { outline: 2.5px solid var(--mint); outline-offset: 3px; }
.ov h3 a:focus-visible { outline: none; }
.ov p { margin: 0; color: var(--text-2); font-size: 15px; }
.ov-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 8px; }
.ov-wiki { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 12px; border-radius: 12px;
  color: #D5DAFF; font: 800 13.5px var(--font); background: rgba(143, 156, 255, .1); border: 1px solid rgba(143, 156, 255, .35); transition: background .2s; }
.ov-wiki:hover { background: rgba(143, 156, 255, .22); color: #fff; }
.ov-wiki svg.ico { width: 16px; height: 16px; }

/* the playable viruses */
.virus-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 600px) { .virus-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .virus-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; } }
.vcard { display: flex; flex-direction: column; padding: 22px 20px 20px; }
.vcard .vart { width: 104px; height: 104px; margin-bottom: 12px; }
.vbody { display: flex; flex-direction: column; align-items: flex-start; flex: 1; min-width: 0; }
.vbody .caps { margin: 0 0 2px; }
.vbody h3 { margin: 0 0 10px; font: 900 24px/1.15 var(--font); }
.vsum { margin: 12px 0 16px; color: var(--text-2); font-size: 15px; }
.vbody .go { margin-top: auto; }
@media (max-width: 599px) {
  .vcard { flex-direction: row; align-items: flex-start; gap: 14px; padding: 18px 16px; }
  .vcard .vart { width: 76px; height: 76px; margin: 0; }
}

/* the wiki teaser: counts, a search box and its sections */
.wikibox { display: grid; gap: clamp(26px, 4vw, 48px); padding: clamp(22px, 4vw, 48px); border-radius: 28px;
  background: radial-gradient(ellipse 80% 70% at 0% 0%, rgba(143, 156, 255, .18), transparent 70%), linear-gradient(180deg, rgba(38, 17, 42, .86), rgba(22, 9, 24, .86));
  border: 1px solid rgba(143, 156, 255, .32); box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
@media (min-width: 1000px) { .wikibox { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); align-items: center; } }
.wiki-pitch { min-width: 0; }
.wiki-pitch > p:not(.caps) { margin: 0; color: var(--text-2); font-size: clamp(16px, 1.4vw, 18px); }
.wiki-stats { display: flex; gap: 10px; margin: 22px 0; }
.wiki-stats div { flex: 1; min-width: 0; display: flex; flex-direction: column-reverse; justify-content: flex-end; padding: 12px 14px; border-radius: 14px;
  background: rgba(0, 0, 0, .25); border: 1px solid var(--line); }
.wiki-stats dt { color: var(--text-3); font: 800 12px/1.3 var(--font); }
.wiki-stats dd { margin: 0; color: #DDE1FF; font: 900 clamp(22px, 3vw, 32px)/1.1 var(--font); font-variant-numeric: tabular-nums; }
.wsearch { display: flex; align-items: center; gap: 4px; height: 56px; padding: 0 5px 0 0; border-radius: 16px; background: rgba(0, 0, 0, .35);
  border: 1px solid var(--line-2); transition: border-color .2s, box-shadow .2s; }
.wsearch:focus-within { border-color: var(--codex); box-shadow: 0 0 0 4px rgba(143, 156, 255, .2); }
.wsearch input { flex: 1; min-width: 0; height: 100%; padding: 0 16px; border: 0; background: none; color: #fff; font: 700 16px var(--font);
  text-overflow: ellipsis; -webkit-appearance: none; appearance: none; }
.wsearch input:focus { outline: none; }
.wsearch input::placeholder { color: var(--text-3); }
.wsearch input::-webkit-search-cancel-button { -webkit-appearance: none; }
.wsearch button { width: 46px; height: 46px; flex: none; display: grid; place-items: center; border: 0; border-radius: 12px; cursor: pointer;
  background: var(--codex); color: #120812; transition: transform .2s var(--spring); }
.wsearch button:hover { transform: scale(1.05); }
.wsearch button svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.wiki-pitch .btns { margin-top: 16px; }
.portal-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; min-width: 0; }
@media (min-width: 520px) { .portal-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.portal { --c: var(--mint); display: flex; align-items: center; gap: 10px; min-height: 64px; padding: 10px 12px; border-radius: 14px; color: #fff;
  font: 800 14.5px/1.25 var(--font); background: color-mix(in srgb, var(--c) 8%, rgba(0, 0, 0, .2)); border: 1px solid color-mix(in srgb, var(--c) 28%, transparent);
  transition: transform .25s var(--spring), background .2s, border-color .2s; }
.portal:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--c) 16%, rgba(0, 0, 0, .2)); border-color: color-mix(in srgb, var(--c) 60%, transparent); }
.portal img { width: 34px; height: 34px; flex: none; object-fit: contain; }
.portal span { min-width: 0; }
html:lang(es) .portal span { -webkit-hyphens: auto; hyphens: auto; }   /* (a tile beside the pitch is too narrow for huéspedes) */
.portal.codex { grid-column: 1 / -1; padding: 12px 16px; }
.portal.codex span { flex: 1; font-size: 16px; }
.portal.codex small { display: block; color: var(--text-3); font: 700 13px/1.3 var(--font); }
.portal.codex svg.arrow { width: 14px; height: 14px; color: var(--codex); }
.portal.codex:hover svg.arrow { transform: translateX(3px); }
@media (max-width: 519px) {
  .portal.codex { grid-column: auto; padding: 10px 12px; }
  .portal.codex span { font-size: inherit; }
  .portal.codex small, .portal.codex svg.arrow { display: none; }
}
@media (max-width: 440px) {
  .wikibox { padding: 20px 14px; border-radius: 22px; }
  .portal { gap: 8px; padding: 8px 10px; font-size: 14px; }
  .portal img { width: 28px; height: 28px; }
}

/* screenshots */
.gallery { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .gallery { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } }
@media (min-width: 1200px) { .gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery figure { position: relative; margin: 0; border-radius: 16px; overflow: hidden; background: #000; border: 1px solid var(--line-2); }
.gallery img { width: 100%; height: auto; aspect-ratio: 1600 / 736; object-fit: cover; transition: transform .5s var(--ease); }
.gallery figure:hover img { transform: scale(1.04); }
.gallery figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 12px 9px; pointer-events: none; color: #fff;
  font: 800 13.5px/1.3 var(--font); background: linear-gradient(transparent, rgba(0, 0, 0, .78)); }
.gallery .zoom::after { top: 8px; bottom: auto; right: 8px; }
@media (max-width: 520px) { .gallery figcaption { font-size: 12px; padding: 20px 8px 7px; } }

/* controls */
.ctrl { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
@media (min-width: 1000px) { .ctrl { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; } }
.dev { padding: 20px 20px 14px; }
.dev-head { display: flex; align-items: center; gap: 14px; }
.dev-head img { width: 48px; height: 48px; flex: none; object-fit: contain; }
.dev-head h3 { margin: 0 0 4px; font: 900 20px/1.2 var(--font); }
@media (max-width: 400px) { .dev { padding: 16px 16px 12px; } .dev-head { gap: 12px; } .dev-head img { width: 40px; height: 40px; } }
.keys { width: 100%; border-collapse: collapse; margin-top: 12px; }
.keys td { padding: 8px 4px; border-top: 1px solid var(--line); color: var(--text-2); font-size: 14.5px; vertical-align: middle; }
.keys td:first-child { width: 1%; white-space: nowrap; padding-right: 14px; color: #fff; font-weight: 800; }
kbd { display: inline-block; min-width: 26px; padding: 1px 7px; margin: 0 2px 2px 0; border-radius: 7px; background: #2a1219; border: 1px solid rgba(255, 255, 255, .22);
  border-bottom-width: 3px; font: 800 12px/1.5 var(--font); color: #fff; text-align: center; }
kbd.a { background: #2F9E44; border-color: #6BE38A; } kbd.b { background: #C92A2A; border-color: #FF8787; }
kbd.x { background: #1C7ED6; border-color: #74C0FC; } kbd.y { background: #E8B100; border-color: #FFE066; color: #111; }

/* the closing call */
.band { position: relative; padding: clamp(64px, 9vw, 120px) 0; text-align: center;
  background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(61, 219, 133, .14), transparent 70%); }
.band::before { content: ""; position: absolute; top: 0; left: 50%; width: min(var(--max), 100%); transform: translateX(-50%); height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .1) 20%, rgba(255, 255, 255, .1) 80%, transparent); }
.band h2 { margin: 0; font: 900 clamp(34px, 5vw, 58px)/1.05 var(--font); background: linear-gradient(180deg, var(--mint), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.band .lead { margin: 14px auto 0; }
.band .hero-btns { margin-top: 30px; }
.band .virion { width: 96px; height: 96px; margin: 0 auto 18px; animation: spin 20s linear infinite; filter: drop-shadow(0 0 18px rgba(191, 133, 252, .6)); }

/* ---------- legal pages ---------- */
.legal { padding: clamp(28px, 5vw, 56px) 0; }
.legal .wrap { max-width: 900px; }
.legal .doc { --tint: #fff; padding: clamp(22px, 4vw, 44px); }
.legal h1 { margin: 0 0 4px; font: 900 clamp(30px, 5vw, 44px)/1.1 var(--font); background: linear-gradient(90deg, var(--mint), var(--green));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.legal .updated { color: var(--text-3); margin: 0 0 24px; }
.legal h2 { font: 900 21px var(--font); margin: 32px 0 8px; color: var(--mint); }
.legal p, .legal li { color: rgba(255, 255, 255, .85); }
.legal a { text-decoration: underline; text-decoration-color: rgba(125, 255, 179, .4); text-underline-offset: 3px; }
.legal a:hover { text-decoration-color: currentColor; }
.legal .note { padding: 14px 16px; border-radius: 14px; background: rgba(61, 219, 133, .08); border: 1px solid rgba(61, 219, 133, .3); }
/* a translated page says the English one is the binding version */
.legal .lang-note { margin: 0 0 24px; padding: 12px 16px; border-radius: 14px; color: var(--text-2); font-size: 14.5px; background: rgba(255, 255, 255, .04);
  border: 1px dashed var(--line-2); }
.faq details { margin: 10px 0; border-radius: 14px; background: rgba(255, 255, 255, .05); border: 1px solid var(--line); }
.faq summary { display: flex; align-items: center; min-height: 48px; padding: 10px 16px; cursor: pointer; font-weight: 800; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; margin-left: auto; padding-left: 12px; color: var(--mint); font: 900 20px/1 var(--font); }
.faq details[open] summary::after { content: "\2212"; }
.faq details p { margin: 0; padding: 0 16px 14px; }

/* ---------- 404 ---------- */
.notfound { padding: clamp(60px, 10vw, 120px) 0; text-align: center; }
.notfound img { width: 120px; height: 120px; margin: 0 auto 18px; animation: float 4s ease-in-out infinite; filter: drop-shadow(0 0 22px rgba(255, 94, 122, .4)); }
.notfound h1 { margin: 0; font: 900 clamp(42px, 7vw, 76px)/1.02 var(--font); background: linear-gradient(180deg, #fff, var(--pandemic));
  -webkit-background-clip: text; background-clip: text; color: transparent; }
.notfound .lead { margin: 14px auto 28px; }
.notfound .wsearch { max-width: 540px; margin: 0 auto 24px; text-align: left; }

/* ---------- screenshots open big: a magnifier shows on hover (always on touch screens), the viewer fills the screen ---------- */
.zoom { display: block; position: relative; cursor: zoom-in; }
.zoom:hover img { filter: brightness(1.08); }
.zoom::after { content: ""; position: absolute; right: 10px; bottom: 10px; width: 32px; height: 32px; border-radius: 10px; opacity: 0; transition: opacity .2s;
  background: rgba(0, 0, 0, .6) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='white' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17M8.5 6v5M6 8.5h5'/%3E%3C/svg%3E") center / 17px no-repeat; }
.zoom:hover::after, .zoom:focus-visible::after { opacity: 1; }
@media (hover: none) { .zoom::after { opacity: .9; } }
.lightbox { position: fixed; inset: 0; z-index: 80; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: calc(env(safe-area-inset-top) + 64px) 16px calc(env(safe-area-inset-bottom) + 20px); background: rgba(8, 3, 8, .95); }
.lightbox[hidden] { display: none; }
.lb-stage { max-width: 100%; max-height: calc(100vh - 170px); overflow: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; }
.lightbox img { display: block; max-width: min(1600px, 100%); max-height: calc(100vh - 170px); object-fit: contain; border-radius: 12px; cursor: zoom-in;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .6); border: 1px solid rgba(255, 255, 255, .12); }
.lightbox.full .lb-stage { width: 100%; }
.lightbox.full img { max-width: none; max-height: none; width: auto; height: auto; cursor: zoom-out; }
.lb-hint { display: none; margin: 0; font: 700 12.5px var(--font); color: rgba(255, 255, 255, .55); text-align: center; }
@media (hover: none) and (orientation: portrait) { .lb-hint { display: block; } }
.lb-cap { margin: 4px 0 0; font: 800 15px var(--font); color: rgba(255, 255, 255, .88); text-align: center; }
.lb-count { margin: 0; font: 800 12px var(--font); color: rgba(255, 255, 255, .5); }
.lb-btn { position: absolute; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 14px; cursor: pointer;
  border: 1px solid rgba(255, 255, 255, .22); background: rgba(255, 255, 255, .08); color: #fff; }
.lb-btn:hover { background: rgba(255, 255, 255, .16); }
.lb-btn[hidden] { display: none; }
.lb-btn svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.lb-close { top: calc(env(safe-area-inset-top) + 12px); right: 16px; }
.lb-prev, .lb-next { top: 50%; transform: translateY(-50%); }
.lb-prev { left: 16px; } .lb-next { right: 16px; }
@media (max-width: 700px) {
  .lightbox { padding-bottom: calc(env(safe-area-inset-bottom) + 84px); }
  .lb-prev, .lb-next { top: auto; bottom: calc(env(safe-area-inset-bottom) + 18px); transform: none; }
  .lb-prev { left: calc(50% - 58px); } .lb-next { right: calc(50% - 58px); }
}

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

/* ---------- touch screens: every tap target at least 44px tall ---------- */
@media (pointer: coarse) {
  .foot-grid nav a, .foot-base a, .wchip, .ov-wiki, .top .pill { min-height: 44px; }
  .top .beta, .sb-wiki, .sb-menu .ng-btn, .sb-chips a, .lang-btn { height: 44px; }
  .top .wordmark, .foot-brand .wordmark, .sb-title { min-height: 44px; }
  .langs a, .foot-base .foot-lang a { min-height: 44px; }
}