/* ===== Общее оформление «Сказаний о Нави»: холодная палитра, шрифт заголовков, ассеты UI MMORPG Dark Templar ===== */
/* Alegreya SC (SIL OFL): кириллица и латиница, заголовки */
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/shared/ui/fontcyr.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Alegreya SC"; font-weight: 700; font-style: normal; font-display: swap; src: url("/assets/shared/ui/fontlat.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --navia-bg: #06080a; --navia-surface: #0c1013; --navia-raised: #151b20; --navia-well: #080b0d;
  --navia-line: rgba(205, 222, 232, .10); --navia-line-strong: rgba(190, 212, 226, .24);
  --navia-text: #e3eaef; --navia-text-2: #a3afb8; --navia-muted: #6f7c86;
  --navia-accent: #9fc0d2; --navia-accent-bright: #cfe6f2; --navia-accent-soft: #4d6677; --navia-accent-ink: #0b1218;
  --navia-danger: #e8a070;
  --navia-serif: "Alegreya SC", Georgia, serif;
  --navia-spring: cubic-bezier(.34, 1.45, .5, 1);

  /* профиль, гадание, руны */
  --hf-bg: #06080a; --hf-bg-glow: #0d151b; --hf-wood: #0c1013; --hf-wood-deep: #080b0d;
  --hf-panel: #0c1013; --hf-panel-light: #151b20; --hf-slot: #0a0e11; --hf-slot-hover: #151b20;
  --hf-ink: #e3eaef; --hf-muted: #a3afb8; --hf-dim: #6f7c86;
  --hf-gold: #9fc0d2; --hf-gold-bright: #cfe6f2; --hf-gold-soft: #4d6677;
  --hf-line: rgba(190, 212, 226, .24); --hf-line-soft: rgba(190, 212, 226, .16);
  --hf-red: #c9876f; --hf-blue: #9fc0d2; --hf-green: #95a881; --hf-purple: #b99ad0;
  --hf-common: #7b8a94; --hf-uncommon: #8ca469; --hf-rare: #86a9bd; --hf-epic: #b99ad0; --hf-special: #e0b46a;
  --hf-danger: #e8a070;
  --hf-serif: "Alegreya SC", Georgia, serif;

  /* навыки */
  --bg-crypt: #06080a; --bg-slate: #0c1013; --iron-dark: #10171c; --iron-rim: #2b3a45;
  --gold-antique: #6f8ea1; --gold-bright: #cfe6f2;

  /* карта */
  --ink: #e3eaef; --muted: #a3afb8; --dim: #6f7c86; --gold: #9fc0d2; --line: rgba(190, 212, 226, .24);
  --panel: #0c1013; --wood: #0c1013; --blue: #9fc0d2;
}

/* фон: текстура камня, сверху холодный отсвет, по краям затемнение */
html { background: #05070a; }
body {
  background: radial-gradient(ellipse 80% 55% at 50% -8%, rgba(40, 72, 94, .34), transparent 70%), linear-gradient(rgba(4, 6, 9, .38), rgba(4, 6, 9, .38)), #05070a url("/assets/shared/ui/bg.webp") center top / cover fixed no-repeat;
}

/* заголовки */
h1, h2, h3, h4 { font-family: var(--navia-serif); font-weight: 700; letter-spacing: .02em; }

/* верхние вкладки страниц: плашка-индикатор скользит с пружинным перелётом */
.navia-page-navigation { position: relative; gap: 2px; padding: 10px 12px 12px; background: none; border-bottom: 0; }
.navia-page-navigation::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(150, 182, 202, .7) 18%, rgba(150, 182, 202, .7) 82%, transparent); }
.navia-nav-tab { position: relative; z-index: 1; min-width: 92px; border-radius: 0; color: var(--navia-text-2); font: 700 14px/1.25 var(--navia-serif); letter-spacing: .02em; transition: color .3s, transform .16s var(--navia-spring); }
.navia-nav-tab[href]:hover { color: var(--navia-text); background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .1)); }
.navia-nav-tab[aria-current="page"] { color: var(--navia-text); background: none; box-shadow: none; }
.navia-nav-tab:active { transform: scale(.96); }
.navia-nav-tab:focus-visible { outline-color: var(--navia-accent-bright); }
.navia-page-navigation.has-ind .navia-nav-tab[aria-current="page"] { background: none !important; box-shadow: none !important; }

/* индикатор вкладок (создаётся скриптом navia-motion.js) */
.tab-host > button, .tab-host > a, .tab-host > span { position: relative; z-index: 1; }
.tab-ind { position: absolute; left: 0; top: 0; z-index: 0; width: 0; height: 0; background: linear-gradient(rgba(150, 182, 202, 0), rgba(150, 182, 202, .22)); box-shadow: inset 0 -2px 0 var(--navia-accent), 0 8px 14px -10px rgba(150, 182, 202, .6); pointer-events: none; opacity: 0; will-change: transform, width; }
.tab-ind.bar { background: var(--navia-accent); box-shadow: 0 0 10px rgba(159, 192, 210, .5); }
.tab-ind.ready { opacity: 1; transition: transform .46s var(--navia-spring), width .46s var(--navia-spring); }
@media (prefers-reduced-motion: reduce) { .tab-ind.ready { transition: none; } }

/* ползунки: дорожка и бегунок из пака, бегунок слегка вытягивается при перетаскивании */
input[type=range] { -webkit-appearance: none; appearance: none; display: block; width: 100%; height: 28px; margin: 0; background: transparent; cursor: pointer; }
input[type=range]::-webkit-slider-runnable-track { height: 28px; background: url("/assets/shared/ui/sltrack.webp") center / 100% 100% no-repeat; }
input[type=range]::-moz-range-track { height: 28px; background: url("/assets/shared/ui/sltrack.webp") center / 100% 100% no-repeat; }
input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 48px; height: 20px; margin-top: 4px; border: 0; background: url("/assets/shared/ui/slthumb.webp") center / 100% 100% no-repeat; transition: transform .22s var(--navia-spring); }
input[type=range]::-moz-range-thumb { width: 48px; height: 20px; border: 0; background: url("/assets/shared/ui/slthumb.webp") center / 100% 100% no-repeat; transition: transform .22s var(--navia-spring); }
input[type=range].drag::-webkit-slider-thumb, input[type=range]:active::-webkit-slider-thumb { transform: scale(1.18, 1.32); }
input[type=range].drag::-moz-range-thumb { transform: scale(1.18, 1.32); }
input[type=range]:focus-visible { outline: 2px solid var(--navia-accent-bright); outline-offset: 2px; }

/* кнопки-мазки пака: общий класс .navia-btn для кнопок, где нет своего стиля */
.navia-btn { position: relative; isolation: isolate; min-height: 44px; padding: 8px 22px; border: 0; background: none; color: var(--navia-text); font: 700 15px/1.15 var(--navia-serif); letter-spacing: .02em; text-shadow: 0 1px 2px #000; cursor: pointer; transition: transform .16s var(--navia-spring), color .15s; }
.navia-btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(#1d252c, #0a0e11); -webkit-mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; mask: url("/assets/shared/ui/btndark.webp") center / 100% 100% no-repeat; transition: filter .15s; }
.navia-btn:hover::before { filter: brightness(1.4); }
.navia-btn.primary::before { background: linear-gradient(#46627a, #1f3040); }
.navia-btn:active:not([disabled]) { transform: scale(.96); }
.navia-btn[disabled] { opacity: .5; cursor: default; }

/* общая верхняя строка страниц */
.navia-top { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 6px 16px 8px; max-width: 1280px; margin: 0 auto; z-index: 30; }
.navia-top::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(150, 182, 202, .7) 18%, rgba(150, 182, 202, .7) 82%, transparent); }
.navia-who { display: flex; align-items: center; gap: 10px; min-width: 0; flex: 1 1 0; }
.navia-avatar { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: #151b20; box-shadow: inset 0 0 0 1px var(--navia-line-strong); overflow: hidden; flex: none; }
.navia-avatar img { width: 100%; height: 100%; object-fit: cover; }
.navia-who strong { display: block; font: 700 17px/20px var(--navia-serif); color: var(--navia-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px; }
.navia-who span:not(.navia-avatar) { display: block; font: 400 12px/16px "Segoe UI", Arial, sans-serif; color: var(--navia-muted); }
.navia-top-tabs { flex: none; }
.navia-top-spacer { flex: 1 1 0; }
.navia-top .navia-page-navigation { padding: 0 !important; background: none !important; border: 0 !important; }
.navia-top .navia-page-navigation::after { display: none !important; }
.navia-top .navia-nav-tab { display: inline-flex; align-items: center; justify-content: center; height: 34px; min-height: 0; padding: 0 14px; color: var(--navia-text-2); text-decoration: none; }
.navia-top .navia-nav-tab[aria-current="page"] { color: var(--navia-text); }
@media (max-width: 760px) { .navia-top { flex-wrap: wrap; } .navia-top-tabs { order: 3; flex-basis: 100%; overflow-x: auto; } .navia-top-spacer { display: none; } .navia-top .navia-nav-tab { padding: 0 10px; font-size: 13px; } }
.has-navia-top .map-header, .has-navia-top .map-brand { display: none !important; }

/* ===== шрифты: основной текст системный, как в макапе; Alegreya SC только для заголовков, вкладок и кнопок ===== */
body { font: 13px/1.4 "Segoe UI", Arial, sans-serif; font-variant-numeric: tabular-nums; }
button, input, select, textarea { font-family: inherit; }
.map-app, .map-app *, .app, .app *, .rn-app, .rn-app * { font-family: "Segoe UI", Arial, sans-serif; }
.font-mono, .font-sans, .font-cinzel, [class*="font-["] { font-family: "Segoe UI", Arial, sans-serif; }
.map-app h1, .map-app h2, .map-app .map-pin-name, .map-app .map-tools button, .map-app .map-pin-ordinal, .map-app .map-row-num, .map-app .map-brand strong,
.app h1, .app h2, .app h3, .app .navia-nav-tab, .app .primary, .app .actions button, .app .categories button, .app .local-tabs button, .app .forge-kind,
.rn-app h1, .rn-app h2, .rn-app h3, .rn-app .navia-nav-tab, .rn-app .dv-btn, .rn-app .dv-btn span, .rn-app .dv-skip, .rn-app .rn-details-button, .rn-app .rn-purse, .rn-app .dv-reveal h2,
.rn-app .dv-card-name, .rn-app .dv-detail h3, .navia-top .navia-nav-tab, .navia-who strong, .font-cinzel, h1.font-cinzel, .navia-nav-tab { font-family: var(--navia-serif) !important; }
.dv-btn small { font-family: var(--navia-serif) !important; }

/* верхняя строка и вкладки: размеры как в макапе */
.navia-top .navia-nav-tab, .navia-page-navigation .navia-nav-tab { font-size: 13px !important; letter-spacing: 0 !important; height: 32px; padding: 0 12px; min-width: 0; font-weight: 700; }
.navia-top { max-width: 1280px; padding: 12px 16px 8px; min-height: 56px; }
.navia-top .navia-page-navigation { gap: 2px; }
.navia-top-actions { display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.navia-top-actions > div { display: flex; align-items: center; gap: 8px; }
.navia-top-actions [class*="rounded"] { border-radius: 2px !important; }
.navia-top-actions .stone-button { font-family: var(--navia-serif) !important; }
.navia-top-actions #sync-header-label { display: none !important; }
.navia-top-actions { flex: 1 1 0; }
.navia-top-tabs { flex: 0 0 auto; }
.navia-top { width: 100%; box-sizing: border-box; flex: none; align-self: stretch; }
.navia-top-actions { flex: 1 1 0; justify-content: flex-end; }

/* плавный вход и выход содержимого страницы; шапка со вкладками остаётся на месте */
@media (prefers-reduced-motion: no-preference) {
  main, .reference-main, .map-layout, .hero, .ledger, .local-tabs, .rn-purses { animation: navia-in .26s ease-out backwards; }
  html.navia-leaving main, html.navia-leaving .reference-main, html.navia-leaving .map-layout, html.navia-leaving .hero, html.navia-leaving .ledger, html.navia-leaving .local-tabs, html.navia-leaving .rn-purses { opacity: 0; transition: opacity .14s ease-in; animation: none; }
}
@keyframes navia-in { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: none; } }
body { min-height: 100vh; min-height: 100dvh; }
.rn-app { min-height: 0; display: block; }
.rn-app .dv { display: block; width: 100%; }
.rn-app .dv-stage { flex: none; height: calc(100dvh - 190px) !important; min-height: 440px; }

/* ===== единая верхняя строка: вкладки на всех страницах стоят в одном месте и не прыгают ===== */
.navia-top { display: grid !important; grid-template-columns: 300px auto minmax(0, 1fr); align-items: center; column-gap: 12px; height: 64px; min-height: 64px !important; padding: 12px 16px 8px !important; box-sizing: border-box; }
.navia-top .navia-who { min-width: 0; }
.navia-top .navia-top-tabs { grid-column: 2; }
.navia-top .navia-top-spacer, .navia-top .navia-top-actions { grid-column: 3; justify-self: end; display: flex; align-items: center; justify-content: flex-end; gap: 8px; min-width: 0; }
.navia-top .navia-nav-tab { height: 32px; line-height: 32px; padding: 0 12px !important; min-width: 0 !important; font-size: 13px !important; }
@media (max-width: 899px) { .navia-top { grid-template-columns: 1fr auto; height: auto; } .navia-top .navia-top-tabs { grid-column: 1 / -1; grid-row: 2; } .navia-top .navia-top-spacer, .navia-top .navia-top-actions { grid-column: 2; grid-row: 1; } }