/* Torreta wiki. The palette and frames are the game's own
   (menu_panel.gd, guide_style.gd, reward_card_style.gd). The panels' pipe grips
   are not: they drag a window in the game and have nothing to drag here. */

@font-face {
  font-family: "Kenney Future Narrow";
  src: url("/fonts/kenney-future-narrow.ttf") format("truetype");
  font-display: swap;
}

:root {
  color-scheme: dark;
  --ink: #191b22;          /* menu_panel INK */
  --panel: #26262e;        /* window plates, Color(.15,.15,.18) */
  --paper: #1c222b;        /* guide PAPER */
  --well: #13181f;         /* guide WELL */
  --edge: #39424d;         /* guide EDGE */
  --line: #484b54;
  --text: #ebe4d6;         /* menu_panel TEXT */
  --text-hi: #eeeae2;      /* guide TEXT */
  --muted: #a5a8ad;
  --muted-2: #b4bdc9;
  --accent: #efaa45;       /* menu_panel ACCENT */
  --orange: #ed8c24;       /* window border, Color(.93,.55,.14) */
  --orange-dim: rgba(237, 140, 36, 0.55);
  --gold: #ffd700;
  --hostile: #e5453a;
  --selected: #302c25;
  --common: #9e9e9e;
  --uncommon: #388e3c;
  --rare: #1565c0;
  --epic: #6a1b9a;
  --legendary: #e65100;
  --radius: 8px;
  --body: "Noto Sans", "Noto Sans SC", "Noto Sans JP", "Noto Sans KR", "Noto Sans Arabic", system-ui, sans-serif;
  --display: "Kenney Future Narrow", var(--body);
  --page: min(1240px, calc(100vw - 32px));
}

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

html { scroll-padding-top: 96px; }

body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 50% -10%, rgba(237, 140, 36, 0.10), transparent 55%),
    linear-gradient(#141820, #0e1116 60%);
  background-color: #0e1116;
  color: var(--text);
  font: 400 16px/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--accent); text-decoration: none; }
a:hover { color: #fff; }
img { max-width: 100%; height: auto; }
h1, h2, h3 { line-height: 1.2; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.muted { color: var(--muted); }
.gold { color: var(--gold); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ── Top bar: the HUD strip, one line with an orange rule underneath ───────── */
.topbar {
  position: sticky; top: 0; z-index: 20;
  background: rgba(25, 27, 34, 0.96);
  border-bottom: 2px solid var(--orange);
  backdrop-filter: blur(6px);
}
.topbar-inner {
  width: var(--page); margin: 0 auto; min-height: 64px;
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.brand { display: flex; align-items: center; gap: 10px; padding: 8px 0; }
.brand-logo { height: 38px; width: auto; }
.brand-plate {
  font: 400 15px/1 var(--display); letter-spacing: 0.12em; color: var(--orange);
  border: 1px solid var(--orange-dim); border-radius: 4px; padding: 5px 7px 4px;
}
.tabs { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; }
.tab {
  font: 600 14px/1 var(--body); color: var(--muted-2);
  padding: 12px 12px 10px; border-bottom: 3px solid transparent; border-radius: 4px 4px 0 0;
  white-space: nowrap;
}
.tab:hover { color: #fff; background: #28313b; }
.tab.is-active { color: var(--text-hi); background: var(--selected); border-bottom-color: var(--accent); }
.tools { display: flex; gap: 10px; align-items: center; margin-inline-start: auto; }
.search { position: relative; }
.search input, .lang select {
  font: 400 14px/1 var(--body); color: var(--text);
  background: #12171e; border: 1px solid var(--line); border-radius: 5px;
  height: 38px; padding: 0 12px;
}
.search input { width: 220px; }
.search input:focus, .lang select:focus { border-color: var(--accent); outline: none; background: #171c24; }
.lang select { padding-inline-end: 28px; max-width: 150px; }
.search-results {
  position: absolute; inset-inline-end: 0; top: calc(100% + 8px); width: min(420px, calc(100vw - 32px));
  max-height: 70vh; overflow: auto; z-index: 30;
  background: var(--panel); border: 2px solid var(--orange); border-radius: var(--radius);
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); padding: 6px;
}
.search-results a { display: block; padding: 9px 10px; border-radius: 5px; color: var(--text); }
.search-results a:hover, .search-results a.is-active { background: var(--selected); color: #fff; }
.search-results small { display: block; color: var(--muted); font-size: 12px; }
.search-results .kind { color: var(--accent); font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em; }
.search-results p { margin: 10px; color: var(--muted); }
.menu-toggle { display: none; }

/* ── Plates ────────────────────────────────────────────────────────────────── */
.page { width: var(--page); margin: 0 auto; padding: 28px 0 56px; display: grid; gap: 24px; }

/* The window plate: orange 2px border and 8px corners. */
.panel {
  position: relative;
  background: rgba(38, 38, 46, 0.98);
  border: 2px solid var(--orange); border-radius: var(--radius);
  padding: 26px 24px;
  min-width: 0;
}

.page-head { text-align: center; padding: 6px 0 0; }
.page-head h1, .panel h1 {
  margin: 0; color: var(--accent); font: 700 clamp(28px, 4vw, 40px)/1.15 var(--body);
}
.kicker {
  margin: 0 0 8px; font: 400 13px/1 var(--display); letter-spacing: 0.14em; text-transform: uppercase; color: var(--orange);
}
.kicker a { color: inherit; }
.lede { color: var(--muted-2); max-width: 760px; margin: 12px auto 0; font-size: 17px; }
.page-head .lede { text-align: center; }
.detail .lede, .manual-article .lede { margin-inline: 0; }
.plate {
  margin: 0 0 18px; font: 400 20px/1.1 var(--display); letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--accent);
}
.subplate { font: 600 15px/1.2 var(--body); color: var(--muted-2); text-transform: uppercase; letter-spacing: 0.08em; margin: 22px 0 10px; }
.detail .plate { margin-top: 30px; }
.note {
  background: var(--selected); border-inline-start: 3px solid var(--accent); padding: 8px 12px; border-radius: 4px;
  color: var(--muted-2); font-size: 14px;
}

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 42px; padding: 0 18px;
  font: 600 15px/1 var(--body); color: var(--text);
  background: #242831; border: 1px solid var(--line); border-radius: 5px;
}
.btn:hover { background: #45382a; border-color: var(--accent); color: #fff; }
.btn.primary { background: #393225; border-color: #79613f; color: #fff; }
.btn.primary:hover { background: #59432d; border-color: var(--accent); }

/* ── Home ──────────────────────────────────────────────────────────────────── */
.hero {
  position: relative; border: 2px solid var(--orange); border-radius: var(--radius); overflow: hidden;
  background: linear-gradient(180deg, rgba(14, 17, 22, 0.15), rgba(14, 17, 22, 0.85)), var(--hero) center / cover no-repeat, #1a1510;
  min-height: 380px; display: grid; place-items: center; text-align: center;
}
.hero-inner { padding: 40px 20px; max-width: 820px; }
.hero-logo { width: min(620px, 86%); filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.7)); }
.hero-tagline { font-size: clamp(17px, 2.2vw, 21px); color: var(--text-hi); text-shadow: 0 2px 8px #000; margin: 18px auto 24px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.tile {
  display: grid; grid-template-columns: 72px 1fr; grid-template-rows: auto 1fr; column-gap: 14px; align-items: center;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 6px; padding: 14px; color: var(--text);
}
.tile:hover { border-color: var(--accent); background: #28313b; color: #fff; }
.tile-art { grid-row: span 2; width: 72px; height: 72px; background: var(--well); border-radius: 6px; display: grid; place-items: center; overflow: hidden; }
.tile-art img { width: 100%; height: 100%; object-fit: contain; }
.tile-name { font: 700 17px/1.2 var(--body); color: var(--accent); }
.tile-text { font-size: 14px; color: var(--muted-2); line-height: 1.4; }

.article-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.article-list li { background: var(--paper); border: 1px solid var(--edge); border-radius: 6px; padding: 12px 14px; }
.article-list a { font-weight: 700; font-size: 17px; }
.article-list span { display: block; color: var(--muted-2); font-size: 14px; margin-top: 4px; line-height: 1.45; }

.gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.shot { display: block; border: 1px solid var(--edge); border-radius: 6px; overflow: hidden; aspect-ratio: 16 / 9; background: var(--well); }
.shot img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.25s ease; }
.shot:hover { border-color: var(--accent); }
.shot:hover img { transform: scale(1.03); }

/* ── Guide ─────────────────────────────────────────────────────────────────── */
.entries { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.entry {
  display: flex; flex-direction: column; background: var(--well); border: 1px solid var(--edge);
  border-radius: 6px; overflow: hidden; color: var(--text);
}
.entry:hover { border-color: var(--accent); color: #fff; }
.entry-art { aspect-ratio: 16 / 9; background: #0f1319; display: grid; place-items: center; overflow: hidden; }
.entry-art img { width: 100%; height: 100%; object-fit: cover; }
.entry-art:empty::after { content: ""; width: 38px; height: 38px; border: 2px solid var(--edge); border-radius: 50%; }
.entry-title { padding: 10px 12px; font-weight: 600; font-size: 15px; }

.manual { display: grid; grid-template-columns: 280px minmax(0, 1fr); gap: 20px; align-items: start; }
.manual-index {
  position: sticky; top: 90px; max-height: calc(100vh - 110px); overflow: auto;
  background: var(--paper); border: 1px solid var(--edge); border-radius: 8px; padding: 10px;
}
.index-group summary {
  cursor: pointer; list-style: none; padding: 8px 10px; font: 400 13px/1.2 var(--display);
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--orange);
}
.index-group summary::-webkit-details-marker { display: none; }
.index-group summary::before { content: "▸ "; }
.index-group[open] summary::before { content: "▾ "; }
.index-group ul { list-style: none; margin: 0 0 8px; padding: 0; }
.index-group a { display: block; padding: 7px 12px; color: var(--muted-2); border-radius: 4px; font-size: 14px; line-height: 1.3; }
.index-group a:hover { background: #28313b; color: #fff; }
.index-group a[aria-current] { background: var(--selected); color: var(--text-hi); border-inline-start: 3px solid var(--accent); }
.manual-article h1 { margin-bottom: 18px; }
.photo { margin: 0 0 22px; background: var(--well); border: 1px solid var(--edge); border-radius: 6px; padding: 10px; text-align: center; }
.photo img { max-height: 420px; width: auto; border-radius: 4px; }
.prose { font-size: 17px; line-height: 1.7; color: var(--text-hi); max-width: 78ch; }
.prose p { margin: 0 0 1em; }
.prose h2 { font: 400 19px/1.2 var(--display); letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin: 1.8em 0 0.6em; }
.prose h3 { font-size: 17px; color: var(--accent); margin: 1.4em 0 0.4em; }
.prose ul, .prose ol { padding-inline-start: 1.3em; margin: 0 0 1em; }
.prose li { margin: 0.25em 0; }
.prose strong { color: #fff; }
.prose table { border-collapse: collapse; margin: 0 0 1.2em; font-size: 15px; }
.prose th, .prose td { border: 1px solid var(--edge); padding: 6px 10px; text-align: start; }
.prose th { background: var(--well); color: var(--accent); }
.prose kbd {
  font: 600 13px/1 var(--body); color: var(--text-hi); background: #242831; border: 1px solid var(--line);
  border-bottom-width: 3px; border-radius: 4px; padding: 3px 6px; white-space: nowrap;
}
.inline-icon { height: 1.75em; width: auto; vertical-align: middle; margin: -0.2em 0.1em 0; }
.pager { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 30px; border-top: 1px solid var(--edge); padding-top: 18px; }
.pager [rel="next"] { margin-inline-start: auto; }

/* ── Filter chips (guide navigation buttons) ───────────────────────────────── */
.chips { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 12px; }
.chips-label { color: var(--muted); font-size: 13px; margin-inline-end: 4px; }
.chip {
  font: 600 13px/1 var(--body); color: var(--muted-2); cursor: pointer;
  background: var(--well); border: 1px solid transparent; border-radius: 5px; padding: 10px 12px;
}
.chip:hover { background: #28313b; border-color: var(--edge); color: #fff; }
.chip.is-active { background: var(--selected); color: var(--text-hi); box-shadow: inset 3px 0 0 var(--accent); }
.chip.r-common { color: var(--common); } .chip.r-uncommon { color: #5fbf63; } .chip.r-rare { color: #5c9ae6; }
.chip.r-epic { color: #b36ad8; } .chip.r-legendary { color: #ff8a3d; }
.count { color: var(--muted); font-size: 13px; margin: 0 0 14px; }

/* ── Playing cards (reward_card_style: 248x364 silhouette) ─────────────────── */
.cardgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(208px, 1fr)); gap: 18px; margin-top: 18px; }
.gcard { --r: var(--line); display: flex; flex-direction: column; gap: 8px; color: var(--text); min-width: 0; }
.gcard.r-common { --r: var(--common); } .gcard.r-uncommon { --r: var(--uncommon); } .gcard.r-rare { --r: var(--rare); }
.gcard.r-epic { --r: var(--epic); } .gcard.r-legendary { --r: var(--legendary); }
.gcard[hidden] { display: none; }
.gcard-rarity { text-align: center; font: 600 13px/1 var(--body); color: var(--r); min-height: 13px; }
.gcard.r-common .gcard-rarity { color: #c8c8c8; } .gcard.r-uncommon .gcard-rarity { color: #6cc970; }
.gcard.r-rare .gcard-rarity { color: #7aa9e8; } .gcard.r-epic .gcard-rarity { color: #bf7fe0; }
.gcard.r-legendary .gcard-rarity { color: #ff9b52; } .gcard.r-none .gcard-rarity { color: var(--muted); }
.gcard-frame {
  position: relative; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; text-align: center;
  background: color-mix(in srgb, var(--paper) 94%, var(--r));
  border: 1px solid var(--r); border-top-width: 3px; border-radius: 6px; padding: 14px 12px 14px;
  min-height: 300px;
}
a.gcard:hover .gcard-frame, .gcard:focus-within .gcard-frame { box-shadow: 0 0 0 1px var(--r), 0 10px 26px rgba(0, 0, 0, 0.45); }
.gcard-art {
  position: relative; width: 100%; aspect-ratio: 16 / 10; background: var(--well); border: 1px solid #262c35;
  border-radius: 6px; display: grid; place-items: center; overflow: hidden;
}
.gcard-art img { width: 78%; height: 78%; object-fit: contain; }
.gcard-art.portrait { aspect-ratio: 1; }
.gcard-art.portrait img { width: 100%; height: 100%; }
.gcard-art.small img { width: 58%; height: 58%; }
/* The white focus brackets of the reward screen. */
a.gcard:hover .gcard-art::before, a.gcard:hover .gcard-art::after {
  content: ""; position: absolute; width: 14px; height: 14px; border: 2px solid #e8e8e8; top: 6px;
}
a.gcard:hover .gcard-art::before { left: 6px; border-right: 0; border-bottom: 0; }
a.gcard:hover .gcard-art::after { right: 6px; border-left: 0; border-bottom: 0; }
.gcard-name { font: 700 18px/1.2 var(--body); color: #ffe699; }
.gcard-text { font: 600 16px/1.45 var(--body); color: var(--text-hi); flex: 1; display: flex; align-items: center; justify-content: center; }
.gcard-art + .gcard-text { border-top: 1px solid #3a414c; padding-top: 12px; width: 100%; }
.gcard-name + .gcard-text { font-weight: 400; font-size: 14px; color: var(--muted-2); align-items: flex-start; }
.gcard-meta { font-size: 12px; color: var(--muted); line-height: 1.4; }
.gcard-band {
  width: 100%; font: 700 13px/1 var(--body); letter-spacing: 0.08em; color: #fff1ec;
  background: #bd3930; border: 1px solid #e96a61; border-radius: 4px; padding: 7px 6px;
}
.gcard.is-hostile .gcard-frame { border-color: var(--hostile); background: color-mix(in srgb, var(--paper) 90%, var(--hostile)); }
.gcard-duration {
  font: 600 12px/1 var(--body); color: #dec298; background: #302c25; border: 1px solid #5c503b; border-radius: 4px; padding: 6px 8px;
}

/* ── Detail pages ──────────────────────────────────────────────────────────── */
/* 3D models (viewer3d.js): the game's own towers and insects, turned by hand. */
.model3d { margin: 24px 0 6px; max-width: 640px; }
.model3d-stage { position: relative; aspect-ratio: 4 / 3; border: 1px solid var(--edge); border-radius: var(--radius);
  background: radial-gradient(ellipse at 50% 58%, #303843 0%, #1f262f 46%, var(--well) 100%); overflow: hidden; }
.model3d-poster { position: absolute; inset: 0; margin: auto; width: 62%; height: 62%; object-fit: contain;
  transition: opacity .35s; }
.model3d-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; opacity: 0;
  transition: opacity .35s; }
.model3d-canvas:active { cursor: grabbing; }
.model3d.is-ready .model3d-canvas { opacity: 1; }
.model3d.is-ready .model3d-poster { opacity: 0; }
.model3d-stage::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 0; background: var(--orange);
  transition: width .4s; }
.model3d.is-loading .model3d-stage::after { width: 60%; transition: width 2.4s ease-out; }
.model3d-hint { margin: 6px 2px 0; font-size: 13px; color: var(--muted); }
button.level, button.form { appearance: none; background: none; border: 0; padding: 0; font: inherit; color: inherit;
  cursor: pointer; }
button.level[aria-pressed="true"] .gcard-art, button.form[aria-pressed="true"] .gcard-art {
  box-shadow: 0 0 0 2px var(--orange); }
button.level:focus-visible .gcard-art, button.form:focus-visible .gcard-art { box-shadow: 0 0 0 2px var(--accent); }
.levels { display: grid; grid-template-columns: repeat(3, minmax(0, 170px)); gap: 14px; margin: 24px 0 8px; }
.level { margin: 0; text-align: center; min-width: 0; }
.level .gcard-art { aspect-ratio: 1; }
.level .gcard-art img { width: 86%; height: 86%; }
.level figcaption, .level-caption { display: block; margin-top: 6px; font-size: 13px; color: var(--muted); }
.facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; margin: 18px 0 0; }
.fact { background: var(--well); border: 1px solid #262c35; border-radius: 6px; padding: 10px 12px; }
.fact-wide { grid-column: 1 / -1; }
.fact dt { font-size: 12px; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted); margin-bottom: 4px; }
.fact dt:empty { display: none; }
.fact dd { margin: 0; font-size: 16px; color: var(--text-hi); display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.t-common { color: #c8c8c8; } .t-uncommon { color: #6cc970; } .t-rare { color: #7aa9e8; } .t-epic { color: #bf7fe0; } .t-legendary { color: #ff9b52; }
.mat {
  display: inline-flex; align-items: center; gap: 6px; background: #1f252e; border: 1px solid var(--edge);
  border-radius: 5px; padding: 3px 9px 3px 4px; color: var(--text-hi); font-size: 14px; line-height: 1.3;
}
.mat:hover { border-color: var(--accent); color: #fff; }
.chip-icon { width: 26px; height: 26px; object-fit: contain; }
.qty { color: var(--accent); font-weight: 700; }
.table-wrap { overflow-x: auto; }
.stats { width: 100%; border-collapse: separate; border-spacing: 0 4px; font-size: 15px; }
.stats th, .stats td { padding: 10px 12px; text-align: center; white-space: nowrap; }
.stats thead th { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); font-weight: 600; }
.stats tbody tr { background: var(--well); }
.stats tbody th { color: var(--accent); font-weight: 700; }
.stats tbody tr > :first-child { border-radius: 6px 0 0 6px; }
.stats tbody tr > :last-child { border-radius: 0 6px 6px 0; }
.stats.recipes td { text-align: start; white-space: normal; }
.stats.recipes td:last-child { white-space: nowrap; color: var(--muted-2); }
.traits { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; padding: 0; margin: 16px 0 0; }
.traits li { background: var(--selected); border: 1px solid #5c503b; color: #dec298; border-radius: 4px; padding: 5px 10px; font-size: 14px; }
.forms { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px; }
.form { margin: 0; text-align: center; }
.form figcaption, .form-caption { display: block; margin-top: 6px; color: var(--muted-2); font-size: 14px; }

/* ── Skill tree ────────────────────────────────────────────────────────────── */
.tree, .tree ul { list-style: none; margin: 0; padding: 0; }
.tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 14px; }
.tree ul { margin-inline-start: 26px; padding-inline-start: 16px; border-inline-start: 2px solid #5c503b; }
.tree ul > li { position: relative; margin-top: 10px; }
.tree ul > li::before {
  content: ""; position: absolute; inset-inline-start: -18px; top: 30px; width: 16px; border-top: 2px solid #5c503b;
}
.node {
  display: flex; gap: 12px; align-items: flex-start;
  background: #202630; border: 1px solid #66533a; border-radius: 6px; padding: 12px;
}
.node:target { border-color: var(--accent); box-shadow: 0 0 0 2px rgba(239, 170, 69, 0.35); }
.node-icon { width: 52px; height: 52px; object-fit: contain; background: var(--well); border-radius: 6px; flex: none; }
.node-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.node-name { font-weight: 700; color: var(--accent); }
.node-desc { font-size: 14px; color: var(--muted-2); line-height: 1.45; }
.node-effect { font-size: 13px; color: #9ee29a; }
.node-level { font-size: 12px; color: var(--muted); }

/* ── Achievements ─────────────────────────────────────────────────────────── */
.achievements { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.achievement { display: flex; gap: 14px; align-items: center; background: var(--paper); border: 1px solid var(--edge); border-radius: 6px; padding: 12px; }
.achievement:target { border-color: var(--accent); }
.achievement img { width: 64px; height: 64px; flex: none; object-fit: contain; }
.achievement h3 { margin: 0 0 4px; font-size: 16px; color: var(--accent); }
.achievement p { margin: 0; font-size: 14px; color: var(--muted-2); line-height: 1.45; }

/* ── Language chooser, footer, lightbox ────────────────────────────────────── */
.choose { text-align: center; max-width: 760px; margin: 40px auto 0; }
.choose .hero-logo { width: min(420px, 80%); }
.choose h1 { margin: 18px 0; }
.langs { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.langs a { display: block; background: var(--well); border: 1px solid var(--edge); border-radius: 5px; padding: 12px; color: var(--text); }
.langs a:hover { border-color: var(--accent); color: #fff; }

.footer { border-top: 2px solid var(--orange); background: var(--ink); }
.footer-inner { width: var(--page); margin: 0 auto; padding: 28px 0 36px; display: grid; gap: 10px; justify-items: start; color: var(--muted); font-size: 14px; }
.footer p { margin: 0; }
.footer-langs { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.footer-langs a { color: var(--muted-2); }
.footer-langs a:hover { color: #fff; }

.lightbox {
  position: fixed; inset: 0; z-index: 50; background: rgba(8, 10, 13, 0.92);
  display: grid; place-items: center; padding: 24px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border: 2px solid var(--orange); border-radius: var(--radius); }

/* ── Narrow screens ───────────────────────────────────────────────────────── */
@media (max-width: 1000px) {
  .manual { grid-template-columns: 1fr; }
  .manual-index { position: static; max-height: none; }
  .index-group:not([open]) { border-bottom: 1px solid var(--edge); }
}
@media (max-width: 860px) {
  .topbar-inner { gap: 10px; padding: 6px 0; }
  .menu-toggle {
    display: inline-flex; margin-inline-start: auto; align-items: center; min-height: 38px; padding: 0 14px;
    font: 400 14px/1 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
    color: var(--orange); background: #242831; border: 1px solid var(--orange-dim); border-radius: 5px; cursor: pointer;
  }
  .tabs { order: 3; flex-basis: 100%; display: none; flex-direction: column; padding-bottom: 8px; }
  .tabs.is-open { display: flex; }
  .tab { border-bottom: 0; border-inline-start: 3px solid transparent; border-radius: 4px; }
  .tab.is-active { border-inline-start-color: var(--accent); }
  .tools { order: 2; flex-basis: 100%; margin: 0; }
  .search { flex: 1; }
  .search input { width: 100%; }
  .panel { padding: 30px 14px 28px; }
  .cardgrid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; }
  .gcard-frame { min-height: 0; padding: 12px 8px; }
  .gcard-text { font-size: 14px; }
  .gcard-name { font-size: 15px; }
  .tree { grid-template-columns: 1fr; }
  .hero { min-height: 300px; }
  .tiles { grid-template-columns: 1fr; }
}