/* Общая оболочка страниц: палитра, топбар, подвал.
   Страница подключает файл и дописывает только своё. */

:root {
  --a: #f55464;
  --a-dim: color-mix(in srgb, var(--a) 22%, transparent);
  --a-fog: color-mix(in srgb, var(--a) 9%, transparent);
  --f-disp: "Oswald", "Arial Narrow", sans-serif;
  --f-body: "Rubik", system-ui, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, monospace;
}
[data-theme="dark"] {
  --bg: #060809; --panel: #0d1012; --panel2: #111517;
  --line: #1d2325; --line2: #2e3639;
  --tx: #d7dedf; --tx2: #8b989b; --tx3: #5c686b;
  --shadow: 0 18px 50px -24px #000; --grain: .5;
  --c-default: #8b989b; --c-newbie: #75de75; --c-stalker: #8a8afb;
  --c-veteran: #d867c3; --c-master: #f55464; --c-legend: #ffdc66;
}
[data-theme="light"] {
  --bg: #e7e6df; --panel: #f4f3ee; --panel2: #eae9e2;
  --line: #cdcbc0; --line2: #aeac9f;
  --tx: #191c1d; --tx2: #5b615f; --tx3: #8b8f89;
  --shadow: 0 18px 40px -28px #6c6a5e; --grain: .3;
  --c-default: #5b615f; --c-newbie: #2f9b3f; --c-stalker: #4a4ad4;
  --c-veteran: #a83c95; --c-master: #cf2c3e; --c-legend: #9d7a12;
}

* { box-sizing: border-box; scrollbar-width: thin; scrollbar-color: var(--line2) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--line2); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--a); border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-corner { background: transparent; }
/* явный display у элемента перебивает hidden, поэтому гасим отдельно */
[hidden] { display: none !important; }
body {
  margin: 0; min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--tx);
  font-family: var(--f-body); font-weight: 300; font-size: 15px; line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  transition: background .35s ease, color .35s ease;
}
body::before {
  content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9;
  opacity: var(--grain); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.28'/%3E%3C/svg%3E");
}
h1, h2, h3 { font-family: var(--f-disp); font-weight: 500; margin: 0; letter-spacing: .04em; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--a); outline-offset: 2px; }

/* угловые скобы */
.cx { position: relative; }
.cx > .cnr { position: absolute; inset: 0; pointer-events: none; }
.cx::before, .cx::after, .cx > .cnr::before, .cx > .cnr::after {
  content: ""; position: absolute; width: 13px; height: 13px;
  border: 0 solid var(--line2);
  transition: width .25s ease, height .25s ease, border-color .25s ease;
  pointer-events: none;
}
.cx::before { top: -1px; left: -1px; border-top-width: 2px; border-left-width: 2px; }
.cx::after { bottom: -1px; right: -1px; border-bottom-width: 2px; border-right-width: 2px; }
.cx > .cnr::before { top: -1px; right: -1px; border-top-width: 2px; border-right-width: 2px; }
.cx > .cnr::after { bottom: -1px; left: -1px; border-bottom-width: 2px; border-left-width: 2px; }
.cx:hover::before, .cx:hover::after,
.cx:hover > .cnr::before, .cx:hover > .cnr::after { width: 22px; height: 22px; border-color: var(--a); }

/* топбар */
.top { position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); }
.top-in { width: min(1180px, 100% - 48px); margin: 0 auto; display: flex; align-items: center; gap: 26px; height: 68px; }
.brand { display: flex; align-items: center; gap: 11px; flex: none; }
.brand-ico { width: 30px; height: 30px; object-fit: contain; display: block; }
.brand-tx { font-family: var(--f-disp); font-size: 23px; font-weight: 600; letter-spacing: .16em; line-height: 1; }
.brand-tx b { font-weight: 600; color: var(--a); }
.top-nav { display: flex; align-items: center; gap: 4px; }
.top-ctl { display: flex; align-items: center; gap: 9px; margin-left: auto; }
.dd-btn { display: flex; align-items: center; gap: 8px; height: 38px; padding: 0 13px; font-family: var(--f-disp); font-size: 14px; letter-spacing: .1em; text-transform: uppercase; color: var(--tx2); border: 1px solid transparent; transition: color .2s, border-color .2s, background .2s; }
.dd-btn:hover { color: var(--tx); border-color: var(--line); }
.dd.open .dd-btn { color: var(--tx); border-color: var(--a); background: var(--a-fog); }

.ibtn { display: grid; place-items: center; width: 38px; height: 38px; background: var(--panel); border: 1px solid var(--line); color: var(--tx2); transition: color .2s, border-color .2s, background .2s; }
.ibtn:hover { color: var(--tx); border-color: var(--a); background: var(--a-fog); }
.ibtn svg { width: 17px; height: 17px; }
[data-theme="dark"] .sun { display: none; }
[data-theme="light"] .moon { display: none; }

.login { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 15px; background: var(--a-fog); border: 1px solid var(--a-dim); font-family: var(--f-disp); font-size: 14px; letter-spacing: .11em; text-transform: uppercase; color: var(--tx); transition: background .2s, border-color .2s; }
.login:hover { background: var(--a-dim); border-color: var(--a); }
.login svg { width: 15px; height: 15px; color: var(--a); }
.login .nick { text-transform: none; letter-spacing: .04em; }

/* выпадашки */
.dd { position: relative; }
.dd-chev { width: 9px; height: 9px; flex: none; color: var(--tx3); transition: transform .25s ease; }
.dd.open .dd-chev { transform: rotate(180deg); color: var(--a); }
.sel-btn { display: flex; align-items: center; gap: 9px; height: 38px; padding: 0 11px; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.sel-btn:hover { border-color: var(--line2); }
.dd.open .sel-btn { border-color: var(--a); }
.sel-cap { font-family: var(--f-mono); font-size: 9px; letter-spacing: .16em; text-transform: uppercase; color: var(--tx3); }
.sel-val { font-family: var(--f-disp); font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--tx); }
.sel-stack { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.sw { width: 11px; height: 11px; min-width: 11px; flex: 0 0 11px; border: 1px solid rgba(128,128,128,.45); display: block; }
.emo { font-family: "Noto Color Emoji", "Apple Color Emoji", "Segoe UI Emoji", sans-serif; font-size: 16px; line-height: 1; display: inline-block; }
.menu {
  position: absolute; top: calc(100% + 7px); right: 0; min-width: 156px;
  background: var(--panel); border: 1px solid var(--line2); box-shadow: var(--shadow);
  padding: 5px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-7px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}
.open > .menu { opacity: 1; visibility: visible; transform: translateY(0); }
.menu-i { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; text-align: left; color: var(--tx2); position: relative; transition: background .16s, color .16s; }
.menu-i::after { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--a); transform: scaleY(0); transition: transform .18s ease; }
.menu-i:hover { background: var(--panel2); color: var(--tx); }
.menu-i:hover::after, .menu-i[aria-selected="true"]::after { transform: scaleY(1); }
.menu-i[aria-selected="true"] { color: var(--tx); }
.menu.wide { min-width: 240px; }
.menu-i svg { width: 15px; height: 15px; flex: none; color: var(--tx3); }
.menu-i:hover svg { color: var(--a); }
.menu-i.soon { color: var(--tx3); cursor: default; }
.menu-i.soon:hover { background: none; color: var(--tx3); }
.menu-i.soon:hover::after { transform: scaleY(0); }
.menu-i.soon:hover svg { color: var(--tx3); }
@media (max-width: 900px) { .top-nav { display: none; } }

/* каркас страницы */
main { flex: 1; width: min(1180px, 100% - 48px); margin: 0 auto; padding: 44px 0 80px; }

/* во всю ширину экрана: топбар и содержимое, как на картах */
body.wide .top-in { width: 100%; padding: 0 24px; }
body.wide main { width: 100%; padding: 34px 24px 60px; }
body.wide .foot-in { width: 100%; padding: 20px 24px; }
.crumb { font-family: var(--f-mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--tx3); margin-bottom: 10px; }
.crumb a:hover { color: var(--a); }
.head { display: flex; align-items: baseline; gap: 18px; margin-bottom: 26px; }
.head h1 { font-size: 30px; letter-spacing: .06em; }
.head .rule { flex: 1; height: 1px; background: var(--line); }
.head .meta { font-family: var(--f-mono); font-size: 12px; color: var(--tx3); letter-spacing: .1em; }

/* цвет редкости предмета */
.c-Default { color: var(--c-default); }
.c-Newbie { color: var(--c-newbie); }
.c-Stalker { color: var(--c-stalker); }
.c-Veteran { color: var(--c-veteran); }
.c-Master { color: var(--c-master); }
.c-Legend, .c-Quest { color: var(--c-legend); }

footer { border-top: 1px solid var(--line); }
.foot-in { width: min(1180px, 100% - 48px); margin: 0 auto; display: flex; justify-content: space-between; gap: 20px; padding: 20px 0; font-size: 12px; color: var(--tx3); }

@media (max-width: 620px) {
  .head { flex-wrap: wrap; }
  .foot-in { flex-direction: column; gap: 8px; }
}