/* ============================================================================
   HoodFox — фабл-раунд-4 (2026-09-01): красота и порядок.
   Подключается ПОСЛЕ fable3.css и потому выигрывает каскад.
   Содержит: пиксельную типографику ВСЕГО сайта (VT323 для абзацев + FennecPixel
   для заголовков/кнопок/HUD), светлую ЗАКАТНУЮ тему из старого редактора
   трейтханта, компактный верх, плавный переход в дюны, роадмап строками,
   кейс-открытие ролла как в CS, витрину коллекции и легенду пиццы.
   ========================================================================== */

/* ---------- 0. Шрифты: пиксель везде, system sans запрещён ---------- */
@font-face{
  font-family:'PixelBody';
  src:url(fonts/vt323-latin.woff2) format('woff2');
  /* The visible page must not paint a fallback and then reflow into VT323. */
  font-weight:400;font-style:normal;font-display:block}
@font-face{
  /* Keep the first paint lower-case and metrically close to VT323. */
  font-family:'PixelBody Fallback';
  src:local('Consolas'),local('Courier New');
  size-adjust:73%;
  font-weight:400;font-style:normal;font-display:swap}
:root{
  --pxb:'PixelBody','PixelBody Fallback',Consolas,monospace; /* читаемый пиксель для абзацев */
}
body{font-family:var(--pxb);font-size:20px;line-height:1.55}
.display{font-family:var(--pxf);font-weight:400;letter-spacing:.01em;line-height:1.08}
h1.display{font-size:clamp(28px,4.4vw,52px)}
h2.display{font-size:clamp(24px,3.2vw,40px)}
.btn{font-family:var(--pxf);font-size:13px;line-height:1.4;font-weight:400}
.hud,.steps .st,.wl-label,.strip .k,.safety b,.stage-row .rule,.wall-hint,
.tested .subhead,.revlist .st,.check .tick,.check .cross,.level .rule,
details.unlock-details summary,.pager .idx,.chip.none{font-family:var(--pxf)}
.steps .sn,.stage-row .n,.mechanic-no,.swap .arr,.revlist .src{font-family:var(--pxf)}
.wl-input,.formula code,.counter,.strip .v,table.tt td.amt,.burnbar,.burn-legend,
.supplyrows .sv,.fractal-chip{font-family:var(--pxb)}
/* размерная шкала под VT323: он мельче обычных шрифтов на том же кегле */
.section-note{font-size:21px;line-height:1.6}
.hero-sub{font-size:21px}
.card p,.rule-card p,.presale-card p,.guide-card p,.season-panel>p,
.heist-card ul,.heist-card p,.roadmap-card p,.pathcard .pd,.steps .sd,
.week span,.season-lock span,.hero-metric span,.cost-card span,
.character p,.stage-row .who,.mock-note,.wl-note,.close-note{font-size:18px;line-height:1.5}
table.season-table td,table.token-table td,table.tt td{font-size:18px}
.formula,.small-note,.disclaimer,.safety,.card .foot-note,.fine,.foot .fine,
.plate figcaption,.hunt-stage p{font-size:17px;line-height:1.5}
.rule-card b,.presale-card b,.heist-card h4,.season-lock b,.guide-card b,
.feature-link b,.week b{font-size:17px}
.card b{font-size:20px}
.stat .lbl{font-size:17px}
.wl-status{font-size:18px}
.sim-side p{font-size:18px}
.sim-honest{font-size:17px}
.task b{font-size:18px}
.task .t-sub{font-size:15px}
.pizza-legend .pk{font-size:18px}
.pizza-legend .pk small{font-size:15px}
.foot-brand p{font-size:17px}
.foot-brand p.fine{font-size:15px}
.foot-col a{font-size:17px}
.wl-input{font-size:20px}
.rm-list li{font-size:17px}
.pathcard b{font-size:19px}
.stage-row b{font-size:18px}
.stage-row .who{font-size:16px}
.counter{font-size:17px}
.strip .v{font-size:17px}
.hunt-stage p{font-size:16px}
.roadmap-card b{font:16px/1.35 var(--pxf)}
.steps .sd{font-size:17px}
.mock-note{font-size:16px}
.safety{font-size:16px}
.wall-hint{font-size:12px}
.placard{font-size:15px}
.tbl-note{font-size:15px}
.token-item .token-label b{font:clamp(13px,.9vw,15px)/1.3 var(--pxf)}

/* ---------- 0б. ПРАВКИ ПО QA4 (Сол-QA-САЙТ4, 2026-09-01) ---------- */
/* HIGH-3: плашки тропы — фолбэк до полной загрузки baked-арта. Чип тёмный в
   обеих темах (rgba(23,13,32,.9) поверх тёмного низа сцены), поэтому текст
   ФИКСИРОВАННО светлый, а не var(--cream), которая днём чернильная. */
.roadmap-marker{color:#ffedd2}
.roadmap-marker .roadmap-goal{font-size:13px;text-shadow:2px 2px 0 #170d20}
.roadmap-marker .roadmap-chip{font-size:13px}
.roadmap-marker.later{color:#dcc8d2}
/* MEDIUM-2: hunt payout table читается на 1280 без горизонтальной прокрутки:
   снят min-width, шапке и числовым клеткам разрешён перенос (внутри чисел
   пробелов нет — «2,100,000» не ломается, переносится только между словами). */
#trait-hunt .table-wrap{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch}
#trait-hunt table.season-table{width:100%;min-width:541px}
#trait-hunt table.season-table th{white-space:normal}
#trait-hunt table.season-table .value{white-space:normal}
/* MEDIUM-1: словесная строка редкости в таблице полос I–VI на HEIST */
table.season-table td.rarity-word{white-space:normal;color:var(--faded);
  font-size:14px;line-height:1.45;min-width:88px;vertical-align:top}
/* HIGH-5: мини-лоадер кейса, пока превью ленты догружаются */
.case-idle.loading{color:var(--sand)}
.case-idle.loading::after{content:'';display:inline-block;width:8px;height:8px;
  margin-left:8px;background:var(--sand);animation:st-blink 1s steps(2) infinite}

/* ---------- 1. Компактный верх: контент сразу, без пустого неба ---------- */
.sky-band{height:clamp(64px,6vw,86px)}
.sky-band .band-sun{width:clamp(56px,4.8vw,72px);top:16px}
.sky-band .band-moon{width:clamp(62px,5.2vw,80px);top:12px}
.subpage-top{display:none}
.sky-band + .subpage-top{display:none}
.hero{padding-top:clamp(14px,2vw,24px);padding-bottom:clamp(16px,2.2vw,28px)}
section.block{padding-top:clamp(24px,2.8vw,40px);padding-bottom:clamp(24px,2.8vw,40px)}
.hero-head .hud{margin-bottom:10px}
.hero-sub{margin-top:12px}

/* ---------- 2. Бейдж/eyebrow: пиксель-плашка в потоке, без текста-на-тексте ---------- */
.hero-shell .hero-head .hud,
.sec-head .eyebrow{
  display:inline-block;padding:6px 12px;background:var(--dusk);
  border:2px solid var(--shadow);box-shadow:0 3px 0 var(--shadow);color:var(--sand)}
/* фабл3 давал этим элементам полупрозрачные тёмные чипы только днём — больше не нужно */
html[data-theme="day"] .sec-head .section-note{background:none;padding:0}
html[data-theme="day"] .sec-head .eyebrow{background:var(--dusk);padding:6px 12px}
html[data-theme="day"] .hero-shell .hero-sub{background:none;padding:0}

/* ---------- 3. Меню: компактная шапка ---------- */
header .page{padding-top:10px;padding-bottom:10px}
nav{gap:4px}
nav a{padding:8px 9px}

/* ---------- 4. СВЕТЛАЯ ТЕМА: закатная розоватая гамма редактора трейтханта ----------
   Палитра снята с assets-site/desert-sky-3x.png (закат старого редактора):
   слива #2d1a35 → роза #7c3f4d → персик #e08a4a, поднятая в светлый регистр.
   Полярность переворачивается целиком: поверхности светлеют, акценты темнеют —
   каждая пара «акцент × поверхность» сохраняет контраст автоматически. */
html[data-theme="day"]{
  --night:#ffe9cb;   /* самая светлая поверхность (бывший самый тёмный фон) */
  --dusk:#f7d6ae;    /* панели: светлый персик */
  --shadow:#5c2b40;  /* границы и пиксель-тени: пыльная слива */
  --sand:#8f4d10;    /* песочный акцент-текст: тёмный янтарь */
  --fox:#942f08;     /* фирменный оранжевый как текст: тёмный закат */
  --cream:#33132a;   /* основной текст: чернильная слива */
  --faded:#6f3a4d;   /* вторичный текст: розово-сливовый */
  --mint:#0d6b47;    /* успех: тёмная мята */
  --line:#dfab8a;    /* тонкие линии: розовый песок */
}
html[data-theme="day"] body{background:#f2b98c;color:var(--cream)}
html[data-theme="day"] body .skygrad{
  background:linear-gradient(180deg,#e2837c 0%,#eda06f 55%,#f6c184 100%)!important}
html[data-theme="day"] .skyfield{
  background:linear-gradient(180deg,#e2837c 0%,#eda06f 55%,#f6c184 100%)}
/* панель-исключения, где тьма была зашита числом, а не переменной */
html[data-theme="day"] .pathcard[aria-pressed="true"]{background:#fbc9a0}
html[data-theme="day"] .token-art{background:linear-gradient(180deg,#f7c9a0 0,#f2b98c 68%,#eda06f 100%)}
html[data-theme="day"] .roadmap-cards{background:none}
html[data-theme="day"] .safety{background:rgba(255,240,216,.9)}
html[data-theme="day"] .hero-shell .hero-head .hud{background:var(--dusk)}
html[data-theme="day"] .roadmap-scroll{scrollbar-color:var(--line) #f2b98c}
/* футер остаётся вечерним низом сцены — текст в нём светлый в обеих темах */
html[data-theme="day"] footer{background:#40203a}
html[data-theme="day"] footer .foot-col a{color:#e9c6ba}
html[data-theme="day"] footer .foot-brand p{color:#e9c6ba}
html[data-theme="day"] footer .foot-col a:hover,
html[data-theme="day"] footer .foot-col a:focus-visible{color:#ffe9cb;border-bottom-color:#ff8b3d}
html[data-theme="day"] footer .foot-col .hud{color:#f2c377}
html[data-theme="day"] footer .logo b{color:#ffe9cb}
html[data-theme="day"] footer .logo b span{color:#ff9d59}
html[data-theme="day"] .foot-base{border-top-color:#5c2b40}
/* шапка адаптируется к теме: светлый закатный верх */
html[data-theme="day"] header{background:#ffe3bd;border-bottom-color:var(--shadow)}
html[data-theme="day"] nav a{color:#6f3a4d}
html[data-theme="day"] nav a:not(.cta):hover,html[data-theme="day"] nav a:not(.cta):focus-visible{color:#33132a}
html[data-theme="day"] .logo b{color:#33132a}
html[data-theme="day"] .logo b span{color:#b03d0b}
html[data-theme="day"] .theme-toggle{background:#f7d6ae}
/* мелочи контраста светлой темы */
html[data-theme="day"] .foot-base .hud,html[data-theme="day"] .foot-brand p.fine{color:#c8a496}
html[data-theme="day"] ::selection{background:#b03d0b;color:#ffe9cb}
html[data-theme="day"] .wl-status.bad{border-color:#a3330f;color:#8f2d0d}
html[data-theme="day"] .wl-status.bad .st-ic{color:#a3330f}
html[data-theme="day"] .sim-honest{color:var(--faded)}
html[data-theme="day"] .dune-band{filter:none}
/* тёмный текст на тёмных футерных полосах ночи — чуть светлее в обеих темах */
.foot-base .hud{color:#a8938c}
.foot-brand p.fine{color:#a8938c}

/* ---------- 5. Дюны: плавный переход неба в песок ---------- */
.dune-band{border-bottom:none;margin-top:clamp(20px,3vw,44px)}
.dune-band::after{content:'';position:absolute;left:0;right:0;top:0;height:48%;
  background:linear-gradient(180deg,var(--sky-bottom,#241530) 0%,rgba(36,21,48,0) 100%);
  pointer-events:none}
html[data-theme="day"] .dune-band::after{
  background:linear-gradient(180deg,#f6c184 0%,rgba(246,193,132,0) 100%)}
html[data-theme="night"] .dune-band::after{
  background:linear-gradient(180deg,#241530 0%,rgba(36,21,48,0) 100%)}

/* ---------- 6. Роадмап: каждый пункт — строка во всю ширину ---------- */
.roadmap-rows{display:grid;grid-template-columns:minmax(0,1fr);gap:12px;margin-top:22px}
.roadmap-rows .roadmap-card{display:grid;grid-template-columns:auto minmax(0,1fr) auto;
  grid-template-areas:"state title jump" "state list jump";column-gap:clamp(16px,2.4vw,34px);row-gap:8px;
  align-items:center;margin:0;min-height:0;padding:16px clamp(16px,2.2vw,26px);
  background:var(--dusk);border:2px solid var(--shadow);box-shadow:0 4px 0 var(--shadow);
  color:inherit;text-decoration:none}
.roadmap-rows .roadmap-card:hover{border-color:var(--fox)}
.roadmap-rows .roadmap-state{grid-area:state;margin:0;align-self:center;min-width:96px;justify-content:center}
.roadmap-rows .roadmap-card b{grid-area:title;font:clamp(16px,1.6vw,20px)/1.3 var(--pxf);color:var(--cream)}
.roadmap-rows .rm-list{grid-area:list;display:flex;flex-wrap:wrap;gap:6px 26px;margin:0;text-align:left}
.roadmap-rows .jump{grid-area:jump;margin:0;white-space:nowrap}
@media (max-width:760px){
  .roadmap-rows .roadmap-card{grid-template-columns:minmax(0,1fr);grid-template-areas:"state" "title" "list" "jump"}
  .roadmap-rows .roadmap-state{justify-self:start}
}

/* ---------- 7. Ролл: кейс-открытие как в CS ---------- */
.simulator .sim-grid{grid-template-columns:minmax(0,1fr);gap:18px}
.case-window{width:100%}
.case-frame{position:relative;height:172px;background:var(--night);border:3px solid var(--shadow);
  box-shadow:0 8px 0 var(--shadow),0 0 0 3px var(--line);overflow:hidden}
.case-frame::before,.case-frame::after{content:'';position:absolute;top:0;bottom:0;width:120px;z-index:4;pointer-events:none}
.case-frame::before{left:0;background:linear-gradient(90deg,var(--night),transparent)}
.case-frame::after{right:0;background:linear-gradient(270deg,var(--night),transparent)}
.case-tape{position:absolute;left:0;top:50%;transform:translateY(-50%);display:flex;gap:10px;will-change:transform}
.case-card{position:relative;flex:0 0 auto;width:124px;height:140px;background:var(--dusk);
  border:2px solid var(--line);border-bottom:6px solid var(--rar,#7b9dd4);
  display:grid;place-items:center;padding-bottom:4px}
.case-card img{width:100px;height:100px;image-rendering:pixelated;display:block}
.case-pointer{position:absolute;left:50%;top:0;bottom:0;width:0;transform:translateX(-50%);z-index:5;pointer-events:none}
.case-pointer::before{content:'';position:absolute;left:-8px;top:-1px;border:8px solid transparent;border-top:10px solid var(--fox)}
.case-pointer::after{content:'';position:absolute;left:-8px;bottom:-1px;border:8px solid transparent;border-bottom:10px solid var(--fox)}
.case-pointer i{position:absolute;left:-1px;top:0;bottom:0;width:2px;background:var(--fox);opacity:.85}
.case-card.winner{border-color:var(--rar,#7b9dd4);
  box-shadow:0 0 0 3px var(--rar,#7b9dd4),0 0 26px var(--rar-glow,rgba(123,157,212,.55));z-index:2}
@media (prefers-reduced-motion:no-preference){
  .case-card.winner{animation:case-pop .34s steps(3)}
  @keyframes case-pop{0%{transform:scale(.92)}60%{transform:scale(1.05)}100%{transform:scale(1)}}
}
.case-idle{position:absolute;inset:0;display:grid;place-items:center;z-index:3;
  color:var(--faded);font:14px/1.7 var(--pxf);text-align:center;text-transform:uppercase;
  background:var(--night)}
.case-idle[hidden]{display:none}
.sim-plate{display:flex;justify-content:center;align-items:baseline;gap:14px;min-height:0}
.sim-plate .sim-name{display:inline}
.sim-plate .sim-slot-name{display:inline;margin-top:0}
.sim-rar{font:13px/1 var(--pxf);text-transform:uppercase;letter-spacing:.06em;color:var(--rar-tx,var(--sand))}
.sim-side{text-align:center}
.sim-side h3{text-align:center}
.sim-side p{margin:0 auto}
.sim-actions{justify-content:center}
/* легенда редкости под лентой */
.case-bands{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 14px;margin-top:14px}
.case-bands span{display:inline-flex;align-items:center;gap:7px;font:13px/1.4 var(--pxf);
  letter-spacing:.05em;text-transform:uppercase;color:var(--faded)}
.case-bands i{width:12px;height:12px;border:2px solid var(--shadow)}

/* ---------- 8. Витрина коллекции: ровная и полная ---------- */
.gallery{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;margin-top:22px;
  padding:0;overflow:visible}
.gallery img{width:100%;height:auto;aspect-ratio:1/1;
  background:var(--dusk);border:2px solid var(--shadow)}
@media (max-width:760px){.gallery{grid-template-columns:repeat(3,minmax(0,1fr))}}
.gallery-cta .btn{display:inline-block;width:auto}
/* стена-музей на странице коллекции: без дыры в конце */
.wall{padding:26px 24px 18px;scroll-padding-inline:24px}
.exhibit{scroll-snap-align:start}

/* ---------- 9. Пицца токеномики: арт вместо canvas ---------- */
.pizza-wrap{grid-template-columns:minmax(0,1fr);justify-items:center}
.pizza-wrap.has-art{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center}
.pizza-art{display:none;justify-self:center;width:min(100%,480px)}
.pizza-wrap.has-art .pizza-art{display:block}
.pizza-art img{display:block;width:100%;height:auto;image-rendering:pixelated}
.pizza-legend{width:min(100%,640px)}
@media (max-width:900px){.pizza-wrap.has-art{grid-template-columns:minmax(0,1fr)}}

/* ---------- 10. Полировка ---------- */
/* прогон-1 приёмки: пиксель-шрифт добит до последних узлов */
code,.formula code{font-family:var(--pxb)}
.pager button,.pager .idx{font-family:var(--pxf)}
.chip .tag{font-family:var(--pxf);color:#ffedd2}
/* табличка результата ролла тёмная в обеих темах — текст фиксированно светлый */
.sim-plate .sim-name{color:#ffedd2}
.sim-plate .sim-slot-name{color:#f2c377}
/* светлая тема: текст, лежащий прямо на закатном небе, и жёлтые ценники */
html[data-theme="day"] .mock-note,html[data-theme="day"] #mockNote{color:var(--faded)}
html[data-theme="day"] .presale-amount strong{color:#8f4d10}
/* сетка статов ханта без дырок при пяти карточках */
.stat-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
/* подпись контраста таблиц в светлой теме */
html[data-theme="day"] table.season-table th,html[data-theme="day"] table.token-table th,
html[data-theme="day"] table.tt th{color:var(--sand)}