/* ============================================================================
   HoodFox — фабл-раунд-10 (2026-09-02): мобильная шапка с меню, карточка
   «Roll, then pick a door» в одну колонку, подписи сундуков без обрезки,
   кегль интерактивных кнопок ≥ 14px.
   Подключается ПОСЛЕ fable7.css и потому выигрывает каскад.
   Источник замечаний: ВОЛТ-СИСТЕМА/ОТЧЁТ-СОЛ-САЙТ-ПРИЁМКА-8.md (новые дефекты 1–4, п.13/21/22).
   ========================================================================== */

/* ---------- П1. Мобильная шапка: бренд | бургер | тема, ссылки — панелью под шапкой ----------
   Было (inline @media ≤900px): nav{position:absolute;left:50%;translateX(-50%);width:max-content}
   — 612px ссылок поверх 390px шапки: бренд под PRE-REGISTER, переключатель под HEIST,
   реальный тап по переключателю попадал в глиф ссылки. Теперь ссылки скрыты за кнопкой
   #navBurger (fable10.js ставит header.menu-open) и раскрываются панелью во всю ширину:
   шесть строк-ссылок по 44px, активная — с оранжевой планкой слева. На десктопе всё как было. */
.nav-burger{display:none}
@media (max-width:900px){
  header{position:sticky}
  header .page{display:flex;position:static;align-items:center;justify-content:flex-start;gap:10px;padding-top:10px;padding-bottom:10px}
  header .logo{flex:0 1 auto;min-width:0;margin-right:auto}
  /* justify-self:center из inline-правила nav центрирует и абсолютную панель по max-content —
     поэтому явно stretch, иначе панель сжимается до 188px посередине */
  header nav{position:absolute;left:0;right:0;top:100%;transform:none;width:auto;max-width:none;margin:0;
    justify-self:stretch;align-self:auto;
    display:none;flex-direction:column;align-items:stretch;gap:0;overflow:visible;
    -webkit-mask-image:none;mask-image:none;
    background:var(--night);border-top:2px solid var(--shadow);border-bottom:2px solid var(--shadow);
    box-shadow:0 6px 0 var(--shadow);padding:6px 0 8px}
  header.menu-open nav{display:flex}
  html[data-theme="day"] header nav{background:#ffe3bd}
  header nav a{display:block;padding:13px 22px 13px 18px;border:0;border-left:4px solid transparent;font-size:13px;letter-spacing:.12em}
  header nav a:not(.cta):hover,header nav a:not(.cta):focus-visible{border-color:transparent;border-left-color:var(--line);color:var(--cream)}
  header nav a.active,header nav a.active:hover,header nav a.active:focus-visible{border-color:transparent;border-left-color:var(--fox);color:var(--sand)}
  html[data-theme="day"] header nav a:not(.cta):hover,html[data-theme="day"] header nav a:not(.cta):focus-visible{color:#33132a}
  html[data-theme="day"] header nav a.active,html[data-theme="day"] header nav a.active:hover{color:#33132a}
  .nav-burger{display:grid;place-content:center;gap:4px;width:44px;height:44px;flex:0 0 auto;padding:0;cursor:pointer;
    background:var(--dusk);border:2px solid var(--shadow);box-shadow:0 3px 0 var(--shadow);color:var(--cream);
    transition:transform .08s ease,box-shadow .08s ease}
  html[data-theme="day"] .nav-burger{background:#f7d6ae;color:#33132a}
  .nav-burger i{display:block;width:20px;height:4px;background:currentColor;transition:transform .12s ease,opacity .12s ease}
  .nav-burger:hover{transform:translateY(1px);box-shadow:0 2px 0 var(--shadow)}
  .nav-burger:focus-visible{outline:2px solid var(--fox);outline-offset:2px}
  header.menu-open .nav-burger{background:var(--fox);color:var(--night);transform:translateY(3px);box-shadow:none}
  html[data-theme="day"] header.menu-open .nav-burger{background:#ff8b3d;color:#33132a}
  header.menu-open .nav-burger i:nth-child(1){transform:translateY(8px) rotate(45deg)}
  header.menu-open .nav-burger i:nth-child(2){opacity:0}
  header.menu-open .nav-burger i:nth-child(3){transform:translateY(-8px) rotate(-45deg)}
  .theme-toggle,html[data-theme="day"] .theme-toggle{margin-left:0}
}

/* ---------- П2. Hunt: «Roll, then pick a door» в одну колонку на мобильном ----------
   fable5.css задаёт #rolls .presale-hero{grid-template-columns:minmax(0,1fr) auto} с id-специфичностью,
   и inline-правило страницы @media(max-width:900px){.presale-hero{...1fr}} его не перебивает:
   колонка auto забирала 248px под ценник, тексту оставалось 48px (h3 «по слову на строку»,
   карточка 1342px в высоту). Ниже 900px — одна колонка, ценник отдельной строкой во всю ширину. */
@media (max-width:900px){
  #rolls .presale-hero{grid-template-columns:minmax(0,1fr)}
  #rolls .presale-hero>div{min-width:0}
  #rolls .presale-amount{justify-self:stretch;width:100%}
}

/* ---------- П3. Токеномика: подписи сундуков не обрезаются на телефоне ----------
   При 390px три колонки давали подписи 100px при строке «80M · 40%» шириной 95px — числа упирались
   в рамку, а прежние «100M · 50%» резались. Ниже 560px — две колонки (подпись до 170px). */
@media (max-width:560px){
  .token-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px}
  .token-item{min-height:0}
  .token-label,.token-item .token-label{max-width:170px}
}

/* ---------- П4. Кегль интерактивных кнопок ≥ 14px (п.13 приёмки) ----------
   fable4.css: .btn{font-size:13px} — все кнопки (#simBtn, #diceBtn, #resetBtn, a.btn) шли 13px;
   .chip — <button> без кегля (13.33px по умолчанию). */
.btn{font-size:14px}
.chip{font-size:14px}
.chip .tag{font-size:14px}