/* assets/css/site.css
   Space Novel — design system CSS.
   Ported from the imported "Спираль Аэдон" reference design.
   Brand text from the source design is NOT reproduced anywhere here;
   site brand is "SPACE NOVEL". Accent-tied glows (originally cyan
   rgba(69,214,222,*)) are recolored to gold rgba(224,169,74,*) to match
   the site's --accent. Structural panel borders (rgba(90,180,210,*)),
   card background gradients, and the ambient blue/cyan body glow
   (rgba(58,127,224,*) / rgba(69,214,222,.08) in the body background)
   are kept as in the original — dark theme only. */

:root { --accent: #e0a94a; --bg: #06090f; --fg: #d7e2ef; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; background:
    radial-gradient(1200px 700px at 78% -8%, rgba(58,127,224,.14), transparent 60%),
    radial-gradient(900px 600px at 10% 12%, rgba(69,214,222,.08), transparent 55%),
    var(--bg);
  color: var(--fg);
  font-family: 'IBM Plex Sans', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3 { margin: 0; }
a { color: var(--accent); text-decoration: none; }
::selection { background: rgba(224,169,74,.28); color: #eaf6f7; }

@keyframes scan { 0% { transform: translateY(-100%);} 100% { transform: translateY(2200%);} }
@keyframes drift { 0% { background-position: 0 0;} 100% { background-position: 60px 60px;} }

.sn-grid-bg { position: fixed; inset: 0; pointer-events: none; z-index: 0; opacity:.5;
  background-image: linear-gradient(rgba(88,150,180,.055) 1px, transparent 1px),
                    linear-gradient(90deg, rgba(88,150,180,.055) 1px, transparent 1px);
  background-size: 60px 60px; animation: drift 24s linear infinite;
  mask-image: radial-gradient(circle at 50% 30%, #000 0%, transparent 80%); }
.sn-scanline { position: fixed; left:0; right:0; top:0; height:90px; z-index:0;
  pointer-events:none; background: linear-gradient(180deg, rgba(224,169,74,.09), transparent);
  animation: scan 9s linear infinite; }

/* ---------- Nav ---------- */
.sn-nav { position: sticky; top:0; z-index:40; display:flex; align-items:center;
  justify-content:space-between; gap:24px; padding:16px clamp(20px,5vw,64px);
  background: linear-gradient(180deg, rgba(6,9,15,.92), rgba(6,9,15,.55));
  backdrop-filter: blur(10px); border-bottom:1px solid rgba(90,180,210,.16); }
.sn-nav__links { display:flex; align-items:center; gap: clamp(14px,2.4vw,34px);
  font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.12em;
  text-transform:uppercase; }
.sn-nav__links a { color:#9fb0c6; }
.sn-nav__links a:hover { color: var(--accent); }
.sn-logo { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:20px;
  letter-spacing:.28em; color:#eaf3fb; display:flex; align-items:center; gap:12px; }
.sn-diamond { width:26px; height:26px; border:1.5px solid var(--accent);
  transform: rotate(45deg); box-shadow:0 0 14px rgba(224,169,74,.4); position:relative;
  display:inline-block; }
.sn-diamond::after { content:''; position:absolute; inset:5px; background: var(--accent); opacity:.55; }
.sn-logo-icon { width:30px; height:30px; display:block; border-radius:7px;
  border:1px solid rgba(224,169,74,.35); box-shadow:0 0 12px rgba(224,169,74,.22); }

/* ---------- Section shell ---------- */
.sn-section { position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding: clamp(50px,8vh,90px) clamp(20px,5vw,64px); }
.sn-eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.28em;
  color: var(--accent); margin-bottom:10px; }
.sn-section-head { display:flex; align-items:baseline; justify-content:space-between;
  gap:20px; flex-wrap:wrap; margin-bottom:40px; border-bottom:1px solid rgba(90,180,210,.14);
  padding-bottom:18px; }
.sn-section-head h2 { font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size: clamp(34px,5vw,58px); margin:0; letter-spacing:.01em; color:#eef5fb; }
.sn-section-head p { max-width:380px; margin:0; font-size:14.5px; line-height:1.65; color:#8ea0b6; }

/* ---------- Cards / grid / tags ---------- */
.sn-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(300px,1fr)); gap:18px; }
.sn-card { position:relative; background: linear-gradient(180deg, rgba(16,26,42,.9), rgba(8,13,22,.9));
  border:1px solid rgba(90,180,210,.18);
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  overflow:hidden; transition: border-color .25s; }
.sn-card:hover { border-color: rgba(224,169,74,.55); }

/* Иллюстрации на кремовой бумаге и разных пропорций — показываем целиком
   (contain) на подложке под цвет бумаги, чтобы ничего не обрезалось. */
.sn-card--race img { width:100%; height:190px; object-fit:contain; display:block;
  background:#efe9db; }
.sn-card--race .sn-card__media { position:relative; height:190px; overflow:hidden;
  background: repeating-linear-gradient(135deg, rgba(224,169,74,.07) 0 9px, transparent 9px 18px),
              radial-gradient(140px 90px at 70% 20%, rgba(58,127,224,.22), transparent), #0a1220; }
.sn-card__coord { position:absolute; bottom:10px; left:14px; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.12em; color:#55627a; }
.sn-card__code { position:absolute; top:12px; right:14px; font-family:'IBM Plex Mono',monospace;
  font-size:10.5px; letter-spacing:.12em; color: var(--accent); opacity:.8; }
.sn-card__body { padding:20px 22px 24px; }
.sn-card__body h3 { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:27px;
  letter-spacing:.02em; color:#eef5fb; }
.sn-card__epithet { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.1em;
  color: var(--accent); margin:4px 0 14px; }
.sn-card__desc { margin:0 0 16px; font-size:14px; line-height:1.62; color:#a6b6c9; }
.sn-card__tags { display:flex; flex-wrap:wrap; gap:7px; }

.sn-tag { font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:.08em;
  text-transform:uppercase; color:#8ea0b6; padding:4px 9px; border:1px solid rgba(90,180,210,.22);
  background: rgba(224,169,74,.05); }

/* Optional faith/icon card variant (bonus, not part of the required contract) */
.sn-card--faith { padding:26px 26px 28px; }
.sn-card--faith .sn-icon-diamond { width:40px; height:40px; border:1.5px solid var(--accent);
  transform: rotate(45deg); margin-bottom:22px; display:grid; place-items:center;
  box-shadow: 0 0 18px rgba(224,169,74,.25); }
.sn-card--faith .sn-icon-diamond span { transform: rotate(-45deg); font-family:'Rajdhani',sans-serif;
  font-weight:700; font-size:18px; color: var(--accent); }
.sn-card--faith .sn-card__kind { font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#55627a; margin-bottom:6px; }
.sn-card--faith h3 { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:24px;
  margin:0 0 12px; color:#eef5fb; }
.sn-card--faith p { margin:0; font-size:14px; line-height:1.65; color:#a6b6c9; }

/* ---------- Hero ---------- */
.sn-hero { position:relative; z-index:1; max-width:1240px; margin:0 auto;
  padding: clamp(70px,12vh,150px) clamp(20px,5vw,64px) clamp(60px,9vh,110px); }
.sn-hero__meta { position:absolute; top:40px; right:clamp(20px,5vw,64px);
  font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.18em; color:#55627a;
  text-align:right; line-height:1.9; }
.sn-hero__meta .sn-accent { color: var(--accent); }
.sn-hero__eyebrow { font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.34em;
  color: var(--accent); margin-bottom:26px; }
.sn-hero__title { font-family:'Rajdhani',sans-serif; font-weight:700;
  font-size: clamp(56px,12vw,172px); line-height:.92; letter-spacing:.02em; margin:0;
  color:#f0f6fc; text-shadow: 0 0 60px rgba(58,127,224,.35); }
.sn-hero__title .sn-accent { color: var(--accent); text-shadow: 0 0 50px rgba(224,169,74,.5); }
.sn-hero__row { display:flex; flex-wrap:wrap; align-items:flex-end; gap:40px; margin-top:42px; }
.sn-hero__lead { max-width:620px; margin:0; font-size: clamp(16px,1.7vw,19px); line-height:1.7;
  color:#b6c4d6; }
.sn-hero__lead strong, .sn-hero__lead em { color:#eaf3fb; font-style:normal; font-weight:inherit; }
.sn-hero__era { font-family:'Rajdhani',sans-serif; letter-spacing:.04em; }
.sn-hero__era-label { font-size:13px; font-family:'IBM Plex Mono',monospace; letter-spacing:.2em;
  color:#55627a; margin-bottom:6px; }
.sn-hero__era-value { font-size: clamp(28px,4vw,44px); font-weight:600; color:#eaf3fb; line-height:1; }
.sn-hero__era-value small { font-size:.5em; color:#7f8fa6; }
.sn-hero__era-sub { font-size:13px; color:#7f8fa6; margin-top:4px; }
.sn-hero__stats { display:flex; flex-wrap:wrap; gap:14px; margin-top:50px; }

/* ---------- Stat chip (hero stat / KPI chip) ---------- */
.sn-stat { display:flex; align-items:baseline; gap:12px; padding:14px 22px;
  background: linear-gradient(180deg, rgba(16,26,42,.85), rgba(9,15,25,.7));
  border:1px solid rgba(90,180,210,.18);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px)); }
.sn-stat__value { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:30px;
  color: var(--accent); }
.sn-stat__label { font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:.14em;
  text-transform:uppercase; color:#8ea0b6; }

/* ---------- State row (list row, e.g. governance/state entries) ---------- */
.sn-state-row { display:grid; grid-template-columns: 62px 1fr auto; gap:24px; align-items:center;
  padding:22px 26px; background: linear-gradient(90deg, rgba(16,26,42,.85), rgba(8,13,22,.7));
  border:1px solid rgba(90,180,210,.16);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
  transition: border-color .25s; }
.sn-state-row:hover { border-color: rgba(224,169,74,.5); }
.sn-state-row__id { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:34px;
  color: rgba(90,180,210,.3); text-align:center; line-height:1; }
.sn-state-row__body h3 { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:24px;
  margin:0 0 6px; letter-spacing:.01em; color:#eef5fb; }
.sn-state-row__body p { margin:0; font-size:14px; line-height:1.55; color:#a6b6c9; max-width:640px; }
.sn-state-row__meta { text-align:right; min-width:150px; }
.sn-state-row__meta .sn-state-row__type { font-family:'IBM Plex Mono',monospace; font-size:10.5px;
  letter-spacing:.12em; text-transform:uppercase; color:#55627a; margin-bottom:5px; }
.sn-state-row__meta .sn-state-row__seat { font-family:'Rajdhani',sans-serif; font-weight:600;
  font-size:16px; color: var(--accent); }

/* ---------- Timeline ---------- */
.sn-timeline { position:relative; padding-left:34px; display:grid; gap:30px; }
.sn-timeline::before { content:''; position:absolute; left:6px; top:6px; bottom:6px; width:1px;
  background: linear-gradient(180deg, transparent, rgba(90,180,210,.5), transparent); }
.sn-timeline__node { position:relative; }
.sn-timeline__marker { position:absolute; left:-34px; top:6px; width:13px; height:13px;
  transform: translateX(-1px) rotate(45deg); border:1.5px solid var(--accent); background: #06090f;
  box-shadow: 0 0 12px rgba(224,169,74,.5); display:block; }
.sn-timeline__head { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; }
.sn-timeline__year { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:26px;
  color: var(--accent); letter-spacing:.02em; }
.sn-timeline__era { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:#55627a; }
.sn-timeline__title { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:22px;
  margin:6px 0 6px; color:#eef5fb; }
.sn-timeline__desc { margin:0; font-size:14.5px; line-height:1.65; color:#a6b6c9; max-width:680px; }

/* ---------- Footer ---------- */
.sn-footer { position:relative; z-index:1; border-top:1px solid rgba(90,180,210,.16); margin-top:40px; }
.sn-footer__inner { max-width:1240px; margin:0 auto; padding:46px clamp(20px,5vw,64px);
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; }
.sn-footer__brand { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:22px;
  letter-spacing:.24em; color:#eaf3fb; }
.sn-footer__tagline { font-size:13px; color:#7f8fa6; margin-top:6px; max-width:460px; line-height:1.6; }
.sn-footer__meta { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.14em;
  color:#55627a; text-align:right; line-height:1.9; }
.sn-footer__meta .sn-accent { color: var(--accent); }

/* ---------- Lightbox (invented; no direct source markup in the reference,
   built to match the same HUD panel language — cut-corner border, mono
   labels, gold-glow diamond close glyph). JS-toggled via [hidden]: one
   overlay <div class="sn-lightbox"> is built once by assets/js/lightbox.js,
   shown/hidden by toggling its `hidden` attribute (no :target mechanism). */
.sn-lightbox { position:fixed; inset:0; z-index:100; display:flex; align-items:center;
  justify-content:center; padding:40px; background: rgba(6,9,15,.9); backdrop-filter: blur(6px); }
.sn-lightbox[hidden] { display:none; }
.sn-lightbox__fig { display:flex; flex-direction:column; align-items:center; gap:14px;
  max-width:100%; max-height:100%; margin:0; }
.sn-lightbox img { display:block; max-width:100%; max-height:100%; width:auto; height:auto;
  min-height:0; object-fit:contain; box-shadow: 0 0 60px rgba(224,169,74,.18);
  border:1px solid rgba(90,180,210,.24); }
.sn-lightbox__cap { flex:0 0 auto; max-width:min(720px, 92vw); max-height:26vh; overflow:auto;
  text-align:center; white-space:pre-line; color:#cfd6e2;
  font:400 14px/1.55 'IBM Plex Sans',sans-serif; letter-spacing:.1px; }
.sn-lightbox__cap[hidden] { display:none; }
.sn-lightbox__nav { position:fixed; top:50%; transform:translateY(-50%); z-index:101;
  width:52px; height:72px; display:grid; place-items:center; cursor:pointer;
  border:1px solid rgba(90,180,210,.3); background:rgba(6,9,15,.7); color:var(--accent);
  font:400 40px/1 'Rajdhani',sans-serif; padding-bottom:6px; transition:background .15s; }
.sn-lightbox__nav:hover { background:rgba(224,169,74,.18); }
.sn-lightbox__nav[hidden] { display:none; }
.sn-lightbox__prev { left:clamp(8px,3vw,40px); }
.sn-lightbox__next { right:clamp(8px,3vw,40px); }
@media (max-width:700px) { .sn-lightbox__nav { width:40px; height:56px; font-size:30px; } }
.sn-lightbox__close { position:fixed; top:28px; right:clamp(20px,5vw,64px); width:42px; height:42px;
  display:grid; place-items:center; border:1.5px solid var(--accent);
  clip-path: polygon(0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px));
  background: rgba(6,9,15,.75); box-shadow: 0 0 14px rgba(224,169,74,.4); color: var(--accent);
  font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px; line-height:1; cursor:pointer; }

/* ---------- Catalog search + faction filters ---------- */
.sn-catalog-controls { display:flex; flex-wrap:wrap; align-items:center; gap:16px; margin-bottom:32px; }
.sn-input { flex:1 1 260px; min-width:220px; background: rgba(16,26,42,.65);
  border:1px solid rgba(90,180,210,.25); color:#eaf3fb; padding:13px 18px;
  font-family:'IBM Plex Mono',monospace; font-size:13.5px; letter-spacing:.02em; }
.sn-input::placeholder { color:#66748c; }
.sn-input:focus { outline:none; border-color: var(--accent); }
.sn-filters { display:flex; flex-wrap:wrap; gap:8px; }
.sn-filter-btn { font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.1em;
  text-transform:uppercase; padding:10px 16px; border:1px solid rgba(90,180,210,.22);
  background: rgba(16,26,42,.55); color:#8ea0b6; cursor:pointer; transition: border-color .2s, color .2s; }
.sn-filter-btn:hover { border-color: rgba(224,169,74,.5); color: var(--accent); }
.sn-filter-btn.is-active { border-color: var(--accent); color: var(--accent);
  background: rgba(224,169,74,.08); }

/* ---------- Race detail page ---------- */
.sn-race-hero-head { padding-top:60px; padding-bottom:34px; }
.sn-race-layout { display:grid; grid-template-columns: minmax(0,2fr) minmax(260px,1fr);
  gap:34px; align-items:start; }
.sn-race-layout__main { display:flex; flex-direction:column; gap:24px; min-width:0; }

.sn-race-hero__frame { display:block; background: linear-gradient(180deg,#e6e2d4,#cfcabb);
  border:1px solid rgba(90,180,210,.22); padding:clamp(14px,3vw,28px);
  clip-path: polygon(0 0, calc(100% - 22px) 0, 100% 22px, 100% 100%, 22px 100%, 0 calc(100% - 22px));
  text-align:center; }
.sn-race-hero__frame img { display:block; margin:0 auto; max-height:70vh; width:100%;
  object-fit:contain; }
.sn-race-hero__frame--placeholder { background: linear-gradient(180deg, rgba(16,26,42,.9), rgba(8,13,22,.9)); }
.sn-race-hero__frame--placeholder img { width:auto; max-width:100%; max-height:46vh; }

.sn-gallery { display:grid; grid-template-columns: repeat(auto-fill, minmax(110px,1fr)); gap:10px; }
.sn-gallery a { display:block; border:1px solid rgba(90,180,210,.18); overflow:hidden; }
.sn-gallery img { width:100%; height:112px; object-fit:cover; display:block; transition: opacity .2s; }
.sn-gallery a:hover img { opacity:.82; }

.sn-dossier { background: linear-gradient(180deg, rgba(16,26,42,.9), rgba(8,13,22,.9));
  border:1px solid rgba(90,180,210,.18); padding:26px 26px 22px;
  clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 16px 100%, 0 calc(100% - 16px));
  position: sticky; top:96px; }
.sn-dossier__list { display:flex; flex-direction:column; }
.sn-dossier__row { display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:11px 0; border-bottom:1px solid rgba(90,180,210,.12); }
.sn-dossier__row:last-child { border-bottom:none; }
.sn-dossier__row dt { margin:0; font-family:'IBM Plex Mono',monospace; font-size:11px;
  letter-spacing:.1em; text-transform:uppercase; color:#55627a; }
.sn-dossier__row dd { margin:0; font-family:'Rajdhani',sans-serif; font-weight:600; font-size:15.5px;
  color:#eaf3fb; text-align:right; }

.sn-race-body { max-width:68ch; }
.sn-race-body p { margin:0 0 18px; font-size:15.5px; line-height:1.78; color:#c3cede; }
.sn-race-body h3 { font-family:'Rajdhani',sans-serif; font-weight:600; font-size:22px;
  color:#eef5fb; margin:28px 0 10px; }

@media (max-width: 900px) {
  .sn-race-layout { grid-template-columns: 1fr; }
  .sn-dossier { position:static; }
}

/* ---------- In-page edit mode (only visible via edit_server) ---------- */
.sn-editbtn { position:fixed; right:20px; bottom:20px; z-index:200;
  padding:10px 16px; border:1.5px solid var(--accent); background:rgba(6,9,15,.85);
  color:var(--accent); font:700 14px/1 'Rajdhani',sans-serif; letter-spacing:.5px;
  cursor:pointer; box-shadow:0 0 14px rgba(224,169,74,.35); }
.sn-editbtn--on { background:var(--accent); color:#0a0f18; }
body.sn-editing [data-edit] { outline:1px dashed rgba(90,180,210,.5); outline-offset:3px; }
body.sn-editing [contenteditable="true"]:focus { outline:2px solid var(--accent);
  background:rgba(90,180,210,.08); }
body:not(.sn-editing) .sn-edit-empty { display:none; }
body.sn-editing .sn-edit-empty { display:block; opacity:.6; }
body.sn-editing .sn-edit-empty [data-edit]:empty::before,
body.sn-editing .sn-edit-empty[data-edit]:empty::before,
body.sn-editing [data-edit]:empty::before { content:'— добавить —'; color:#6b7688; }
.sn-traits-edit { display:none; }
body.sn-editing .sn-traits-view { display:none; }
body.sn-editing .sn-traits-edit { display:block; white-space:pre-line;
  border:1px dashed rgba(90,180,210,.5); padding:6px 8px; min-height:1.4em; }
.sn-cap-edit { margin-top:6px; font:400 12px/1.4 'IBM Plex Sans',sans-serif;
  color:#cfd6e2; white-space:pre-line; border:1px dashed rgba(90,180,210,.4); padding:5px 7px; }
.sn-del { position:absolute; top:4px; right:4px; width:26px; height:26px; z-index:5;
  border:none; border-radius:50%; background:rgba(180,30,30,.92); color:#fff;
  font:700 13px/1 sans-serif; cursor:pointer; box-shadow:0 1px 6px rgba(0,0,0,.5); }
.sn-toast { position:fixed; left:50%; bottom:76px; transform:translateX(-50%); z-index:210;
  padding:10px 18px; background:rgba(20,120,60,.95); color:#fff;
  font:500 14px/1 'IBM Plex Sans',sans-serif; border-radius:4px; }
.sn-toast--bad { background:rgba(170,40,40,.96); }

/* ---------- Language switcher ---------- */
.sn-lang { position:relative; }
.sn-lang__btn { display:flex; gap:6px; align-items:center; background:transparent;
  border:1px solid rgba(90,180,210,.3); color:var(--accent); padding:6px 10px;
  font:600 13px/1 'Rajdhani',sans-serif; cursor:pointer; }
.sn-lang__dropdown { position:absolute; right:0; top:110%; display:none;
  background:rgba(6,9,15,.98); border:1px solid rgba(90,180,210,.3); min-width:120px; z-index:60; }
.sn-lang__dropdown.active { display:block; }
.sn-lang__dropdown a { display:block; padding:8px 12px; color:#cfd6e2;
  font:400 13px/1 'IBM Plex Sans',sans-serif; text-decoration:none; }
.sn-lang__dropdown a:hover { background:rgba(90,180,210,.12); color:var(--accent); }

/* ---------- Clickable state row (старые империи -> страница) ---------- */
.sn-state-row--link { text-decoration:none; color:inherit; cursor:pointer;
  transition: border-color .2s, background .2s, transform .2s; }
.sn-state-row--link:hover { border-color: rgba(224,169,74,.55);
  background: rgba(224,169,74,.05); }
.sn-state-row--link .sn-state-row__body h3 { color:#eef5fb; }
.sn-state-row--link:hover .sn-state-row__body h3 { color: var(--accent); }

/* ---------- Empire flag ---------- */
.sn-empire-flag img { width:100%; max-width:460px; height:auto; display:block;
  border:1px solid rgba(90,180,210,.24); box-shadow:0 0 44px rgba(224,169,74,.12); }

/* ---------- Sub-heading inside a section (напр. группы держав) ---------- */
.sn-subhead { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:15px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--accent);
  margin:26px 0 14px; padding-bottom:8px; border-bottom:1px solid rgba(224,169,74,.22); }
.sn-subhead:first-of-type { margin-top:10px; }

/* ---------- Game section sub-nav ---------- */
.sn-subnav { display:flex; align-items:center; justify-content:space-between; gap:20px;
  flex-wrap:wrap; padding:10px clamp(16px,5vw,64px); border-bottom:1px solid rgba(90,180,210,.14);
  background:rgba(6,9,15,.6); }
.sn-subnav__links { display:flex; gap:22px; flex-wrap:wrap; }
.sn-subnav__links a { color:#8b97ab; text-decoration:none;
  font:600 13px/1 'Rajdhani',sans-serif; letter-spacing:1px; text-transform:uppercase; }
.sn-subnav__links a:hover { color:var(--accent); }

/* ---------- Landing hero ---------- */
.sn-landing-hero { display:grid; grid-template-columns: 1.1fr 1fr; gap:36px; align-items:center; }
.sn-landing-hero__art img { width:100%; height:auto; border:1px solid rgba(90,180,210,.24);
  box-shadow:0 0 60px rgba(224,169,74,.14); }
.sn-cta-row { display:flex; flex-wrap:wrap; gap:14px; margin:22px 0; }
.sn-btn { display:inline-block; padding:12px 22px; border:1.5px solid var(--accent);
  color:var(--accent); font:700 14px/1 'Rajdhani',sans-serif; letter-spacing:.5px;
  text-decoration:none; }
.sn-btn--accent { background:var(--accent); color:#0a0f18; }
.sn-btn:hover { box-shadow:0 0 16px rgba(224,169,74,.4); }
.sn-social-row { display:flex; flex-wrap:wrap; gap:16px; }
.sn-social { color:#8b97ab; font:500 13px/1 'IBM Plex Mono',monospace; text-decoration:none; }
.sn-social:hover { color:var(--accent); }

/* ---------- Feature + character cards ---------- */
.sn-feature { text-align:left; padding:26px 26px 28px; transition: border-color .25s, transform .2s; }
.sn-feature:hover { transform: translateY(-3px); }
.sn-feature__icon { width:46px; height:46px; margin-bottom:18px; display:grid; place-items:center;
  border:1px solid rgba(224,169,74,.4); border-radius:11px; background:rgba(224,169,74,.09);
  color:var(--accent); box-shadow:0 0 16px rgba(224,169,74,.12) inset; }
.sn-feature__icon svg { width:24px; height:24px; display:block; }
.sn-feature h3 { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:21px;
  letter-spacing:.02em; color:#eef5fb; margin:0 0 8px; }
.sn-feature p { margin:0; font-size:14px; line-height:1.6; color:#a6b6c9; }
.sn-char-grid { display:grid; grid-template-columns: repeat(auto-fill,minmax(150px,1fr)); gap:16px; }
.sn-char { border:1px solid rgba(90,180,210,.18); }
.sn-char img { width:100%; height:280px; object-fit:contain; object-position:center bottom;
  display:block; background:#0a0f18; }
.sn-char h3 { padding:10px; font:600 15px/1.2 'Rajdhani',sans-serif; }

@media (max-width: 900px) { .sn-landing-hero { grid-template-columns:1fr; } }

/* --- RU|EN language toggle (top-right in nav) --- */
.sn-lang-toggle {
  margin-left: 18px;
  display: flex; gap: 7px; align-items: center;
  font: 600 13px/1 'IBM Plex Mono', monospace; letter-spacing: 1.5px;
}
.sn-lang-toggle a { color: #8b97ab; text-decoration: none; padding: 3px 2px; }
.sn-lang-toggle a:hover { color: #dce3ee; }
.sn-lang-toggle a.is-active { color: #e0a94a; border-bottom: 1px solid #e0a94a; }
.sn-lang-toggle__sep { color: rgba(90, 180, 210, .35); }

/* ---- About page (авторский лонгрид «О моей вселенной») ---- */
.sn-nav__links { flex-wrap: wrap; row-gap: 6px; }
.sn-about-lead { max-width: 680px; margin-top: 18px; color:#b9c6d8; font-size:16px; line-height:1.7; }
.sn-about-split { display:grid; grid-template-columns: 1fr; gap:28px; align-items:start; }
@media (min-width: 880px) {
  .sn-about-split { grid-template-columns: 1.35fr .9fr; }
  .sn-about-split .sn-about-fig { position: sticky; top: 88px; }
}
.sn-about-fig { margin:0; }
.sn-about-fig > a {
  display:block; overflow:hidden;
  border:1px solid rgba(90,180,210,.18);
  background: linear-gradient(180deg,#e6e2d4,#cfcabb);
}
.sn-about-fig img { display:block; width:100%; height:auto; }
.sn-about-fig figcaption {
  margin-top:9px; font-family:'IBM Plex Mono',monospace;
  font-size:12px; line-height:1.55; color:#8ea0b6; letter-spacing:.2px;
}
.sn-about-links .sn-cta-row { flex-wrap:wrap; gap:12px; margin-top:20px; }

/* ---- Внутренние ссылки в тексте (авто-перелинковка) ---- */
.sn-race-body p a, .sn-sec-body p a, .sn-timeline__desc a {
  border-bottom: 1px solid rgba(224,169,74,.38);
}
.sn-race-body p a:hover, .sn-sec-body p a:hover, .sn-timeline__desc a:hover {
  border-bottom-color: var(--accent);
}

/* ---- Страница соцсетей ---- */
.sn-social-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.sn-social-card { display:flex; align-items:center; gap:14px; padding:16px 18px;
  border:1px solid rgba(90,180,210,.18); background:rgba(13,20,32,.5);
  text-decoration:none; transition:border-color .2s, box-shadow .2s; }
.sn-social-card:hover { border-color:var(--accent); box-shadow:0 0 16px rgba(224,169,74,.18); }
.sn-social-card__icon { width:26px; height:26px; flex:0 0 auto; color:var(--accent); }
.sn-social-card__text { display:flex; flex-direction:column; gap:5px; min-width:0; }
.sn-social-card__name { font-family:'Rajdhani',sans-serif; font-weight:700; font-size:18px;
  letter-spacing:.05em; color:#eaf3fb; }
.sn-social-card__handle { font-family:'IBM Plex Mono',monospace; font-size:12px;
  color:#8b97ab; word-break:break-all; }
/* инлайн-иконки соцсетей (ряд на странице игры) + иконки в кнопках */
.sn-social { display:inline-flex; align-items:center; gap:7px; }
.sn-social__icon { width:15px; height:15px; flex:0 0 auto; }
.sn-btn--icon { display:inline-flex; align-items:center; gap:9px; }
.sn-btn__icon { width:16px; height:16px; flex:0 0 auto; }

/* ---- Уведомление о хранении данных (privacy notice) ---- */
.sn-cookie { position:fixed; left:0; right:0; bottom:0; z-index:60;
  display:flex; align-items:center; gap:16px; flex-wrap:wrap;
  padding:13px clamp(16px,4vw,48px);
  background:rgba(6,9,15,.97); backdrop-filter:blur(10px);
  border-top:1px solid rgba(224,169,74,.35);
  transform:translateY(110%); transition:transform .32s ease; }
.sn-cookie--in { transform:translateY(0); }
.sn-cookie__msg { margin:0; flex:1 1 320px; font-size:13px; line-height:1.55; color:#b9c6d8; }
.sn-cookie__btn { flex:0 0 auto; padding:9px 22px; border:1.5px solid var(--accent);
  background:var(--accent); color:#0a0f18; font:600 13px/1 'IBM Plex Sans',sans-serif;
  cursor:pointer; }
.sn-cookie__btn:hover { box-shadow:0 0 16px rgba(224,169,74,.4); }

/* ---- About: чередующиеся ряды «текст + иллюстрация» (расы/державы) ---- */
.sn-about-split + .sn-about-split,
.sn-race-body + .sn-about-split { margin-top: 34px; }
@media (min-width: 880px) {
  .sn-about-split--rev { grid-template-columns: .9fr 1.35fr; }
  .sn-about-split--rev .sn-about-fig { order: -1; }
}

/* ---- About split: сбалансированные ряды «текст + иллюстрация» ---- */
.sn-about-fig { text-align: center; }
.sn-about-fig > a { display: inline-block; }
.sn-about-fig img { display: block; width: auto; height: auto; max-height: 460px; max-width: 100%; }
.sn-about-fig figcaption { text-align: left; }
@media (min-width: 880px) {
  .sn-about-split { grid-template-columns: 1fr auto; align-items: center; gap: 44px; }
  .sn-about-split .sn-about-fig { order: 2; position: static; }
  .sn-about-split--rev { grid-template-columns: auto 1fr; }
  .sn-about-split--rev .sn-about-fig { order: -1; }
  .sn-about-fig img { max-width: 40vw; }
  /* вступление/премиса: длинный текст рядом с одним фото — картинка сверху колонки */
  #intro .sn-about-split, #galaxy .sn-about-split, #novella .sn-about-split { align-items: start; }
}

/* ---- About split: flexbox (устойчиво к портретным И широким картинкам) ---- */
.sn-about-split { display: flex; flex-direction: column; gap: 26px; align-items: stretch; }
.sn-about-fig { text-align: center; margin: 0; }
.sn-about-fig > a { display: inline-block; max-width: 100%; }
.sn-about-fig img { display: block; width: auto; height: auto; max-height: 460px; max-width: 100%; }
.sn-about-fig figcaption { text-align: left; }
@media (min-width: 880px) {
  .sn-about-split { flex-direction: row; gap: 44px; align-items: center; }
  .sn-about-split > .sn-race-body { flex: 1 1 auto; min-width: 0; }
  .sn-about-split > .sn-about-fig { flex: 0 1 auto; max-width: 44%; }
  .sn-about-split--rev > .sn-about-fig { order: -1; }
  #intro .sn-about-split, #galaxy .sn-about-split, #novella .sn-about-split { align-items: start; }
}

/* ---- Галерея: отдельная страница (about/gallery.html) ---- */
.sn-hero-cta { margin-top: 26px; }
.sn-gallery-grid {
  display: grid; gap: 26px;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}
.sn-shot { margin: 0; }
.sn-shot > a {
  display: block; overflow: hidden;
  border: 1px solid rgba(90,180,210,.18);
  background: linear-gradient(180deg,#e6e2d4,#cfcabb);
  clip-path: polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 14px 100%, 0 calc(100% - 14px));
}
.sn-shot > a:hover { border-color: rgba(224,169,74,.55); }
.sn-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 7 / 6;
  object-fit: cover; transition: opacity .2s, transform .35s;
}
.sn-shot > a:hover img { opacity: .9; transform: scale(1.02); }
.sn-shot figcaption {
  margin-top: 10px; font-family: 'IBM Plex Mono', monospace;
  font-size: 12px; line-height: 1.55; color: #8ea0b6; letter-spacing: .2px;
}

/* ---- Врезка-ссылка на отдельную страницу (статья / галерея) ---- */
.sn-teaser {
  display: flex; flex-direction: column; gap: 22px;
  padding: 22px; text-decoration: none;
  background: linear-gradient(180deg, rgba(16,26,42,.9), rgba(8,13,22,.9));
  border: 1px solid rgba(90,180,210,.18);
  clip-path: polygon(0 0, calc(100% - 18px) 0, 100% 18px, 100% 100%, 18px 100%, 0 calc(100% - 18px));
  transition: border-color .2s;
}
.sn-teaser:hover { border-color: rgba(224,169,74,.55); }
.sn-teaser__shots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.sn-teaser__shots img {
  display: block; width: 100%; height: 100%; aspect-ratio: 1 / 1;
  object-fit: cover; border: 1px solid rgba(90,180,210,.18);
}
.sn-teaser__body p { margin: 0 0 14px; font-size: 15px; line-height: 1.65; color: #a6b6c9; }
.sn-teaser__cta {
  font-family: 'Rajdhani', sans-serif; font-weight: 600; font-size: 17px;
  letter-spacing: .04em; color: var(--accent);
}
@media (min-width: 880px) {
  .sn-teaser { flex-direction: row; align-items: center; gap: 32px; padding: 26px 30px; }
  .sn-teaser__shots { flex: 0 0 46%; }
  .sn-teaser__body { flex: 1 1 auto; min-width: 0; }
}