/* ===========================================================================
   3300.md — станция: панель нашивок, склад, вахта, кубок, оберег и редкие
   явления. Один файл на все страницы сайта — до него этот код жил копией в
   каждой странице и расходился при первой же правке.

   Разметку панели строит /js/panel.js сам, поэтому странице достаточно
   подключить этот лист, кнопку со счётом в шапке и канву геккона.
   =========================================================================== */

#gecko{position:fixed;inset:0;z-index:2;pointer-events:none}
  /* ===== станция: панель, кубок, оберег, явления — то же, что на главной ===== */
  /* ---------- цвет станции ----------
     Купленный на складе цвет. Правила стоят до режимов ЦУП и ЭЛТ намеренно:
     у тех своя палитра, и она должна перебивать выбор — иначе янтарный пульт
     перестал бы быть янтарным. */
  html[data-accent="amber"]{   --accent:#ffc266; --accent-2:#ff9a4d; --glow:rgba(255,194,102,.22); }
  html[data-accent="jade"]{    --accent:#6fe3a4; --accent-2:#4fc8c0; --glow:rgba(111,227,164,.22); }
  html[data-accent="rose"]{    --accent:#ff8fc4; --accent-2:#c07cff; --glow:rgba(255,143,196,.22); }
  html[data-accent="ice"]{     --accent:#9fe4ff; --accent-2:#7fb2ff; --glow:rgba(159,228,255,.22); }
  html[data-accent="crimson"]{ --accent:#ff7a6e; --accent-2:#ffb35c; --glow:rgba(255,122,110,.22); }

  /* Счёт нашивок: тот же ретро-HUD, что и у монет, только в цвете станции. */
  /* Сама кнопка со счётом живёт в /css/chrome.css — она часть шапки.
     Здесь только её отклик на новую нашивку, ниже по файлу. */

  /* ---------- панель станции ----------
     Нашивки и карта неба одним окном: на телефоне снизу, на большом экране
     посередине. Списком в терминале это не помещалось — строки переносились
     и занимали весь экран. */
  .pan{
    position:fixed; inset:0; z-index:90; display:flex;
    align-items:flex-end; justify-content:center;
    background:rgba(3,5,11,.72);
    backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px);
    opacity:0; transition:opacity .22s ease;
  }
  .pan.on{ opacity:1; }
  .pan[hidden]{ display:none; }
  .pan-box{
    width:100%; max-width:760px;
    /* Высота постоянная, а не по содержимому: иначе окно прыгало при
       переключении вкладок — у каждой своя длина. svh, а не dvh: dvh
       считается от вида с убранной панелью браузера, и нижние строки уезжали
       под неё. */
    height:min(86svh, 86dvh, 660px);
    display:flex; flex-direction:column;
    background:var(--bg-2); border:1px solid var(--card-brd);
    border-radius:16px 16px 0 0;
    transform:translateY(16px); transition:transform .22s cubic-bezier(.2,.7,.3,1);
  }
  .pan.on .pan-box{ transform:none; }
  @media (min-width:720px){
    .pan{ align-items:center; }
    .pan-box{ border-radius:16px; }
  }
  /* Шапка панели в два ряда: сверху «закрыть», под ним вкладки. В одну
     строку четыре вкладки и кнопка не помещались и переносились. */
  /* Шапка на своём фоне: вкладки должны читаться как отдельная полоса
     управления, а не как первая строка содержимого. */
  .pan-head{
    display:flex; flex-direction:column; gap:8px;
    padding:12px; border-bottom:1px solid var(--card-brd);
    background:rgba(4,6,13,.72);
    border-radius:16px 16px 0 0;
  }
  .pan-top{ display:flex; justify-content:flex-end; }
  /* Вкладки одной строкой: на узком экране лента прокручивается вбок, а не
     разъезжается на два ряда. */
  /* Свечению нужно место: без полей вокруг ленты оно упиралось в край и
     срезалось. */
  /* Без прокрутки: четыре вкладки без цифр помещаются везде, а прокрутка
     срезала свечение по краям. */
  .pan-tabs{
    display:flex; gap:6px; flex-wrap:nowrap; padding:4px 3px;
    overflow:visible;
  }
  .pan-tabs::-webkit-scrollbar{ height:0; }
  /* Вкладки делят ширину поровну по содержимому и занимают весь ряд:
     прижатые влево, они оставляли пустое место справа. */
  .pan-tabs button{ flex:1 1 auto; min-width:0; text-align:center; }
  /* На узком экране вкладки переносятся в два ряда, а не прокручиваются:
     прокрутка обрезала свечение по краям и прятала четвёртую вкладку. */
  /* Если лента всё же прокручивается (узкое окно на большом экране), даём
     растворение с той стороны, куда ещё можно проехать, — и с обеих, когда
     скрыто и слева, и справа. Классы ставит скрипт по факту прокрутки. */
  .pan-tabs{ scroll-padding-inline:26px; }
  .pan-tabs.sc-r{
    -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 26px),transparent 100%);
  }
  .pan-tabs.sc-l{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 100%);
  }
  .pan-tabs.sc-l.sc-r{
    -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
    mask-image:linear-gradient(90deg,transparent 0,#000 26px,#000 calc(100% - 26px),transparent 100%);
  }

  @media (max-width:700px){
    /* Все четыре вкладки в один ряд: без цифр они помещаются, а перенос во
       второй ряд забирал высоту у списка. Прокрутки нет — значит, и
       свечение по краям ничем не режется. */
    .pan-tabs{ flex-wrap:nowrap; overflow:visible; gap:4px; }
    .pan-tabs.sc-l, .pan-tabs.sc-r, .pan-tabs.sc-l.sc-r{
      -webkit-mask-image:none; mask-image:none;
    }
    /* Два ряда вкладок стоят высоты — забираем её у полей шапки и у самих
       кнопок, чтобы список под ними остался целиком на экране. */
    .pan-head{ padding:10px 10px 9px; gap:7px; }
    .pan-tabs button, .pan-x{ padding:7px 7px; font-size:11px; letter-spacing:0; }
  }
  .pan-tabs button, .pan-x{
    font:inherit; font-family:var(--mono); font-size:12.5px; line-height:1; cursor:pointer;
    color:var(--dim); background:rgba(255,255,255,.05); border:1px solid var(--card-brd);
    border-radius:8px; padding:8px 10px; white-space:nowrap;
    transition:color .2s, border-color .2s, background .2s, opacity .2s;
  }
  /* Вкладки залиты цветом станции и подписаны тёмным: прозрачная кнопка с
     тонкой рамкой читалась как подпись, а не как переключатель. */
  /* Неоновая вывеска: заливка в полную силу и свечение вокруг. Выбранную
     отличает сила света, а не яркость самой заливки — приглушённая вкладка
     читалась как выключенная. */
  /* Неон: заливка в полную силу и свет вокруг кнопки. Тёмные буквы на
     светящейся заливке — как на вывеске, а не как на кнопке интерфейса. */
  .pan-tabs button{
    color:#05070e; font-weight:700; letter-spacing:.02em;
    background:var(--accent); border-color:transparent; opacity:1;
    filter:saturate(1.35) brightness(1.12);
    box-shadow:
      0 0 10px -1px var(--accent),
      0 0 26px -4px var(--accent),
      inset 0 0 0 1px rgba(255,255,255,.35);
  }
  .pan-tabs button.on{
    filter:saturate(1.5) brightness(1.28);
    box-shadow:
      0 0 14px 0 var(--accent),
      0 0 34px -2px var(--accent),
      0 0 60px -6px var(--accent-2),
      inset 0 0 0 1px rgba(255,255,255,.6);
  }
  .pan-tabs button:hover{ filter:saturate(1.5) brightness(1.22); color:#05070e; }
  .pan-x:hover{ color:var(--ink); border-color:var(--accent); background:rgba(127,178,255,.10); }
  /* Отступ снизу — под домашнюю полосу iPhone: без него последняя строка
      оказывается ровно под ней. */
  /* Полосу прокрутки прячем: она отъедала шестнадцать пикселей ширины, из-за
     чего в карту неба переставал влезать ещё один столбец — и та начинала
     прокручиваться из-за собственной полосы прокрутки. */
  .pan-body{
    overflow-y:auto; padding:12px; padding-bottom:calc(12px + env(safe-area-inset-bottom));
    scrollbar-width:none;
  }
  .pan-body::-webkit-scrollbar{ width:0; height:0; }
  /* Список плотный: двадцать с лишним строк должны помещаться на экран
     телефона, иначе витрина превращается в ту же простыню, что была в
     терминале. */
  /* Двадцать семь строк в один столбец — это три экрана. В два столбца
     список виден почти целиком, а подсказка ужимается многоточием: полностью
     она нужна только тому, кто ещё не понял, что делать. */
  .pan-list{
    display:grid; gap:0 12px;
    /* Ровно два столбца на любом экране: по ширине колонки их набиралось до
       пяти на большом мониторе, и список рассыпался в таблицу. Что не влезло
       по ширине — едет бегущей строкой. */
    grid-template-columns:repeat(2, minmax(0, 1fr));
  }
  @media (max-width:300px){ .pan-list{ grid-template-columns:1fr; } }
  /* Достижение в две плотные строки: название и подсказка мельче под ним.
     Плотность выбрана так, чтобы все двадцать семь помещались в окно
     телефона без прокрутки. */
  .pan-b{
    display:flex; flex-wrap:nowrap; gap:0 6px; align-items:baseline;
    font-family:var(--mono); font-size:11px; line-height:1.15; color:var(--dim);
    padding:1px 3px; border-radius:5px;
  }
  .pan-b b{ font-weight:600; color:var(--muted); white-space:nowrap; }
  .pan-b .line{ flex:1 1 auto; min-width:0; color:var(--muted); }
  .pan-b.done .line{ color:var(--ink); }
  /* Название крупнее и ярче хвоста: глаз должен цепляться за имя, а
     подсказка — идти следом и не спорить с ним. */
  .pan-b .line b{ font-size:12px; color:var(--ink); }
  .pan-b .line i{ font-size:10.5px; opacity:.72; }
  .pan-b.done b{ color:var(--ink); }
  .pan-b > i{ font-style:normal; width:.9em; flex:0 0 auto; color:rgba(140,160,200,.55); }
  .pan-b.done i{ color:#6fe3a4; }
  .pan-b .line i{ opacity:.8; }
  .pan-b .line b{ opacity:1; }

  /* Бегущая строка. Ползёт только помеченное — класс ставится, когда текст
     действительно шире своей колонки. Пауза на краях сделана процентами
     ключевых кадров: без неё начало строки не успеваешь прочесть. */
  .mq{ overflow:hidden; white-space:nowrap; }
  .mq > i{ display:inline-block; font-style:inherit; will-change:transform; }
  .mq.run > i{ animation:mqRun var(--mq-ms, 6s) ease-in-out var(--mq-d, 0s) infinite alternate; }
  @keyframes mqRun{
    0%, 18%   { transform:translateX(0) }
    82%, 100% { transform:translateX(calc(-1 * var(--mq-px, 0px))) }
  }
  @media (prefers-reduced-motion: reduce){ .mq.run > i{ animation:none } }
  .pan-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(88px,1fr)); gap:8px; }
  /* На телефоне — ровно четыре клетки в ряд и пониже: двадцать два созвездия
     должны читаться списком, а не занимать три экрана. */
  @media (max-width:560px){
    /* Не ровно четыре, а сколько поместится: на 360 влезает пять, и вся
       карта укладывается в экран без прокрутки. */
    .pan-grid{ grid-template-columns:repeat(auto-fill, minmax(62px, 1fr)); gap:4px; }
    .pan-sky{ padding:4px 2px; gap:2px; font-size:9px; }
    .pan-sky canvas{ aspect-ratio:1.2; }
  }
  .pan-sky{
    display:flex; flex-direction:column; align-items:center; gap:4px;
    padding:6px 4px; background:rgba(8,12,24,.5);
    border:1px solid var(--card-brd); border-radius:10px;
    font:inherit; font-family:var(--mono); font-size:10.5px; color:var(--dim);
    text-align:center; line-height:1.2;
  }
  .pan-sky canvas{ width:100%; aspect-ratio:1; display:block; }
  .pan-sky{ cursor:pointer; }
  .pan-sky.open{ color:var(--ink); }
  .pan-sky:hover{ border-color:var(--accent); }
  .pan-sky:active{ transform:scale(.96); }
  /* Клетка, которую только что открыли: вспышка зелёным и имя, проступающее
     на месте прочерков. */
  .pan-sky{ position:relative; }
  .pan-sky.just{ animation:cellOpen 1.2s cubic-bezier(.2,.8,.3,1.2) both; z-index:2; }
  /* «+1» вылетает из клетки: самый короткий способ сказать «зачтено». */
  .pan-plus{
    position:absolute; left:50%; top:6px; transform:translateX(-50%);
    font-family:var(--mono); font-size:13px; font-weight:700; color:#8ff3bb;
    text-shadow:0 0 12px rgba(111,227,164,.9); pointer-events:none;
    animation:plusUp 1.1s ease-out both;
  }
  @keyframes plusUp{
    0%{ opacity:0; transform:translate(-50%,6px) scale(.6) }
    25%{ opacity:1; transform:translate(-50%,-4px) scale(1.1) }
    100%{ opacity:0; transform:translate(-50%,-30px) scale(1) }
  }
  .pan-sky.just span{ animation:capIn .5s ease-out .15s both; }
  .pan-sky.again{ animation:cellPing .5s ease-out both; }
  @keyframes cellOpen{
    0%{ transform:scale(1); border-color:var(--card-brd); background:rgba(8,12,24,.5); box-shadow:none }
    18%{ transform:scale(1.14); border-color:#6fe3a4; background:rgba(111,227,164,.28);
         box-shadow:0 0 0 2px rgba(111,227,164,.75), 0 0 34px -4px rgba(111,227,164,.95) }
    55%{ transform:scale(1.05); border-color:#6fe3a4; background:rgba(111,227,164,.18);
         box-shadow:0 0 0 2px rgba(111,227,164,.45), 0 0 26px -6px rgba(111,227,164,.6) }
    100%{ transform:scale(1); border-color:var(--card-brd); background:rgba(8,12,24,.5); box-shadow:none }
  }
  @keyframes cellPing{
    0%{ border-color:var(--accent) } 100%{ border-color:var(--card-brd) }
  }
  @keyframes capIn{ from{ opacity:0; transform:translateY(4px) } to{ opacity:1; transform:none } }
  /* Счёт на вкладке отзывается тем же зелёным, что и достижения: один отклик
     на одно и то же событие — «зачтено». */
  .pan-tabs button.hit{ animation:tabHit 1.1s ease-out; }
  @keyframes tabHit{
    0%{ background:var(--accent); opacity:.5 }
    18%{ background:#6fe3a4; opacity:1 }
    100%{ background:var(--accent); opacity:.5 }
  }
  .pan-tabs button.on.hit{ animation:tabHitOn 1.1s ease-out; }
  @keyframes tabHitOn{
    0%{ background:var(--accent) }
    18%{ background:#6fe3a4 }
    100%{ background:var(--accent) }
  }
  @media (prefers-reduced-motion: reduce){
    .pan-sky.just, .pan-sky.again, .pan-sky.just span, .pan-tabs button.hit,
    .pan-plus{ animation:none }
  }
  /* Склад: строка на товар, слева кружок цвета или название, справа цена или
     кнопка. Ничего лишнего — это витрина на десяток позиций, а не магазин. */
  /* Строка товара — одной лентой: название с подсказкой едут, цена стоит. */
  .pan-buy{
    display:flex; align-items:center; gap:8px; flex-wrap:nowrap; padding:6px 4px;
    font-family:var(--mono); font-size:12px; color:var(--dim);
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .pan-buy .dot{ width:12px; height:12px; border-radius:50%; flex:0 0 auto; box-shadow:0 0 8px currentColor; }
  .pan-buy b{ font-weight:600; color:var(--ink); white-space:nowrap; }
  .pan-buy .line{ flex:1 1 auto; min-width:0; font-size:11px; }
  .pan-buy .line b{ font-size:12px; color:var(--ink); }
  .pan-buy button{
    flex:0 0 auto; font:inherit; font-family:var(--mono); font-size:11.5px; line-height:1;
    cursor:pointer; color:var(--accent); background:rgba(127,178,255,.07);
    border:1px solid rgba(127,178,255,.28); border-radius:4px; padding:6px 9px;
    transition:color .2s, border-color .2s, background .2s;
  }
  .pan-buy button:hover{ color:var(--ink); border-color:var(--accent); background:rgba(127,178,255,.16); }
  .pan-buy button[disabled]{ opacity:.45; cursor:default; }
  /* «включён» и «открыто» — метки, а не текст: они не переносятся и не
     ужимаются, иначе строка распухает на два ряда и уезжает за край. */
  .pan-buy .on{ color:#6fe3a4; flex:0 0 auto; white-space:nowrap; font-size:11px; }
  .pan-purse{
    display:flex; align-items:center; gap:7px; margin:0 0 10px;
    font-family:var(--mono); font-size:12px; color:#ffc740;
  }
  .pan-purse i{ width:12px; height:12px; border-radius:50%; font-style:normal;
    background:radial-gradient(circle at 34% 30%, #fff4c8 0%, #ffd24a 46%, #d1900f 100%); }

  /* Сброс: подтверждение прямо в строке, без системного окна — оно чужое и
     перекрывает страницу. */
  /* Звание над списком: где человек сейчас и сколько до следующего. */
  .pan-rank{
    display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
    margin:0 0 6px; font-family:var(--mono); font-size:11px; color:var(--dim);
  }
  .pan-rank b{ font-size:13px; color:var(--accent); font-weight:700; letter-spacing:.04em; }
  .pan-rank i{ font-style:normal; }
  .pan-bar{
    width:100%; height:4px; border-radius:2px; overflow:hidden; margin-top:2px;
    background:rgba(255,255,255,.07);
  }
  .pan-bar span{ display:block; height:100%; border-radius:2px;
                 background:linear-gradient(90deg, var(--accent), var(--accent-2)); }

  /* Вахтенный лист: строка на задание, справа плата. */
  .pan-task{
    display:flex; align-items:center; gap:8px; padding:7px 4px;
    font-family:var(--mono); font-size:12px; color:var(--dim);
    border-bottom:1px solid rgba(255,255,255,.04);
  }
  .pan-task i{ font-style:normal; width:1em; flex:0 0 auto; color:rgba(140,160,200,.55); }
  .pan-task.done i{ color:#6fe3a4; }
  .pan-task b{ flex:1 1 auto; min-width:0; font-weight:600; color:var(--ink);
               overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .pan-task.done b{ color:var(--dim); }
  .pan-task .pay{ flex:0 0 auto; color:#ffc740; }

  /* Созвездие дня: помеченная клетка, к которой стоит подойти сегодня. */
  .pan-sky.today{ border-color:rgba(255,199,64,.5); }
  .pan-sky.today::after{
    content:'★'; position:absolute; top:3px; right:5px;
    font-size:9px; color:#ffc740; text-shadow:0 0 8px rgba(255,199,64,.7);
  }

  /* Своя статистика: строка «ключ — значение», без украшений. */
  .pan-stat{ margin-top:12px; border-top:1px solid var(--card-brd); padding-top:8px; }
  .pan-srow{
    display:flex; justify-content:space-between; gap:10px; padding:3px 4px;
    font-family:var(--mono); font-size:11.5px; color:var(--dim);
  }
  .pan-srow b{ color:var(--ink); font-weight:600; }

  /* Подвал списка: примечание слева, сброс справа — в одну строку. */
  .pan-foot{ display:flex; align-items:center; gap:10px; margin-top:6px; }
  /* Во время вопроса о сбросе подпись прячется, а сам вопрос занимает строку
     целиком: делить её вдвоём — значит смять оба текста. */
  .pan-foot.ask .pan-note{ display:none; }
  .pan-foot.ask .pan-reset{ flex:1 1 auto; }
  .pan-reset span{ flex:1 1 auto; min-width:0; }
  .pan-reset button{ flex:0 0 auto; white-space:nowrap; }
  /* Совсем маленькие экраны: ужимаем ещё на шаг, чтобы всё осталось на виду
     без прокрутки. */
  /* Карта неба и склад тоже должны помещаться целиком: клетки мельче и
     теснее, строки товара ниже, примечания короче ростом. */
  @media (max-width:560px){
    .pan-grid{ grid-template-columns:repeat(auto-fill, minmax(56px, 1fr)); gap:4px; }
    .pan-sky{ padding:2px 2px; gap:0; font-size:7.5px; border-radius:8px; }
    .pan-sky canvas{ aspect-ratio:1.5; }
    .pan-sky.today::after{ font-size:8px; top:2px; right:3px; }
    .pan-buy{ padding:3px 4px; gap:6px; }
    .pan-buy .line{ font-size:10px; }
    .pan-buy .line b{ font-size:11px; }
    .pan-buy button{ padding:5px 7px; font-size:10.5px; }
    .pan-purse{ margin-bottom:6px; font-size:11px; }
    .pan-note{ font-size:10px; line-height:1.35; margin-top:8px; }
    /* Вкладки в два ряда съели часть высоты — возвращаем её списку: строки
       чуть мельче и теснее, зато всё по-прежнему на одном экране. */
    /* Строка одна, места хватает — возвращаем читаемый кегль и воздух. */
    .pan-b{ font-size:11px; line-height:1.35; padding:2px 3px; }
    .pan-b .line b{ font-size:11.5px; }
    .pan-b .line i{ font-size:10px; }
    .pan-rank{ margin-bottom:4px; font-size:10.5px; }
    .pan-foot{ margin-top:4px; }
    .pan-stat{ margin-top:8px; padding-top:6px; }
    .pan-srow{ padding:2px 4px; font-size:10.5px; }
  }
  @media (max-width:340px), (max-height:600px){
    .pan-grid{ grid-template-columns:repeat(auto-fill, minmax(54px, 1fr)); gap:3px; }
    /* Самые тесные экраны: последний десяток пикселей забираем у шкалы званий
       и подписи внизу — список остаётся целиком. */
    .pan-rank .pan-bar{ margin-top:0; height:3px; }
    .pan-note{ font-size:9px; }
    .pan-b .sub{ font-size:8px; }
    .pan-sky{ font-size:7.5px; }
    .pan-sky canvas{ aspect-ratio:1.5; }
    .pan-b{ font-size:10.5px; line-height:1.25; padding:1px 3px; }
    .pan-b .line b{ font-size:11px; }
    .pan-b .line i{ font-size:9.5px; }
    .pan-rank{ margin-bottom:4px; }
    /* На таких экранах дороги и поля: ужимаем и их, иначе список не влезает
       на десяток пикселей. */
    .pan-head{ padding:8px; gap:6px; }
    .pan-body{ padding:8px; padding-bottom:calc(8px + env(safe-area-inset-bottom)); }
    .pan-foot{ margin-top:4px; }
    .pan-tabs button{ padding:7px 5px; font-size:10px; }
    .pan-x{ padding:7px 9px; font-size:11.5px; }
    .pan-tabs{ gap:3px; }
  }
  .pan-foot .pan-note{ margin:0; flex:1 1 auto; min-width:0; }
  .pan-foot .pan-reset{ margin-top:0; flex:0 0 auto; }
  .pan-reset{ display:flex; align-items:center; gap:8px; margin-top:12px; flex-wrap:wrap; }
  .pan-reset button{
    font:inherit; font-family:var(--mono); font-size:11.5px; line-height:1; cursor:pointer;
    color:var(--dim); background:transparent; border:1px solid var(--card-brd);
    border-radius:4px; padding:7px 10px;
    transition:color .2s, border-color .2s;
  }
  .pan-reset button:hover{ color:var(--ink); border-color:var(--accent); }
  .pan-reset .yes{ color:#ff9a8f; border-color:rgba(255,154,143,.35); }
  .pan-reset .yes:hover{ color:#ffd0c9; border-color:#ff9a8f; }
  .pan-reset span{ font-family:var(--mono); font-size:11.5px; color:var(--dim); }

  .pan-note{ margin:12px 2px 0; font-size:11.5px; color:var(--dim); line-height:1.45; }

  /* Вахтенная карточка: картинка с итогом визита и кнопка сохранения. */
  .pan-card{ margin-top:12px; }
  .pan-card canvas{
    /* Во всю ширину панели: кегли внутри считаются от ширины холста, а высота
       на широком экране берётся ниже — карточка растёт в стороны, не вниз. */
    display:block; width:100%; border-radius:12px;
    border:1px solid var(--card-brd); background:#070b18;
  }
  .pan-cardrow{
    display:flex; align-items:center; gap:10px; margin-top:8px;
    font-family:var(--mono); font-size:11px; color:var(--dim);
  }
  .pan-cardrow span{ flex:1 1 auto; min-width:0; }
  .pan-cardrow button{
    flex:0 0 auto; font:inherit; font-family:var(--mono); font-size:11.5px; line-height:1;
    cursor:pointer; color:var(--accent); background:rgba(127,178,255,.07);
    border:1px solid rgba(127,178,255,.28); border-radius:4px; padding:7px 10px;
    transition:color .2s, border-color .2s, background .2s;
  }
  .pan-cardrow button:hover{ color:var(--ink); border-color:var(--accent); background:rgba(127,178,255,.16); }

  /* На большом экране места вдоволь — список достижений набираем крупнее:
     двенадцать пикселей моноширинного на мониторе читаются мелко. */
  @media (min-width:700px){
    .pan-b{ font-size:13px; line-height:1.7; padding:2px 4px; }
    .pan-b .line b{ font-size:13.5px; }
    .pan-b .line i{ font-size:12px; }
    .pan-rank{ font-size:12.5px; }
    .pan-rank b{ font-size:15px; }
    /* Склад и вахта — тем же кеглем, что достижения: на мониторе они
       выглядели приписками к списку, хотя это такие же разделы. */
    .pan-buy{ padding:8px 4px; }
    .pan-buy .line b{ font-size:14px; }
    .pan-buy .line i{ font-size:12px; }
    .pan-buy button{ font-size:12.5px; padding:8px 12px; }
    .pan-buy .on{ font-size:12.5px; }
    .pan-purse{ font-size:13.5px; }
    .pan-task{ font-size:13.5px; padding:10px 4px; }
    .pan-task b{ font-size:14px; }
    .pan-task .pay{ font-size:13px; }
    .pan-stat{ margin-top:14px; }
    .pan-srow{ font-size:12.5px; padding:4px; }
    .pan-note{ font-size:12px; }
  }
  html.pan-open{ overflow:hidden; }
  html.pan-open.crt body{ overflow:hidden; }
  @media (prefers-reduced-motion: reduce){
    .pan, .pan-box{ transition:none; }
  }

  /* Кубок за достижение. Середина экрана, наплыв с лёгким перелётом, две
     секунды жизни и никаких кнопок: это событие, а не диалог. */
  .cup{
    position:fixed; left:50%; top:50%; z-index:95;
    display:flex; flex-direction:column; align-items:center; gap:8px;
    padding:22px 30px 18px; border-radius:18px; text-align:center;
    /* Шире: примета в четыре строки по три слова читается как телеграмма. */
    width:max-content; max-width:min(92vw, 460px);
    background:rgba(8,12,24,.94); border:1px solid var(--card-brd);
    box-shadow:0 30px 70px -28px rgba(0,0,0,.95), 0 0 0 1px rgba(255,199,64,.12);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
    pointer-events:none; transform:translate(-50%,-50%);
    animation:cupIn .5s cubic-bezier(.18,.9,.3,1.25) both;
  }
  .cup svg{ width:64px; height:64px; display:block; filter:drop-shadow(0 0 18px rgba(255,199,64,.55)); }
  .cup .cup-s{
    font-family:var(--mono); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase;
    color:#ffc740; opacity:.7;
  }
  .cup .cup-n{
    font-family:var(--mono); font-size:15px; letter-spacing:.02em;
    color:#ffe9a8; text-shadow:0 0 16px rgba(255,199,64,.5);
    max-width:none; line-height:1.45;
  }
  .cup.gone{ animation:cupOut .45s ease-in both; }
  @keyframes cupIn{
    from{ opacity:0; transform:translate(-50%,-50%) scale(.35) }
    to{ opacity:1; transform:translate(-50%,-50%) scale(1) }
  }
  @keyframes cupOut{
    from{ opacity:1; transform:translate(-50%,-50%) scale(1) }
    to{ opacity:0; transform:translate(-50%,-50%) scale(1.18) }
  }
  /* Зелёный отклик на счёте: короткая пульсация подсказывает, где смотреть. */
  .pan-btn.hit{ animation:panHit 1.1s ease-out 2; }
  @keyframes panHit{
    0%{ color:var(--accent); border-color:rgba(127,178,255,.28); background:rgba(127,178,255,.07); box-shadow:none }
    18%{ color:#8ff3bb; border-color:#6fe3a4; background:rgba(111,227,164,.22);
         box-shadow:0 0 0 1px rgba(111,227,164,.5), 0 0 22px -4px rgba(111,227,164,.75) }
    100%{ color:var(--accent); border-color:rgba(127,178,255,.28); background:rgba(127,178,255,.07); box-shadow:none }
  }
  @media (prefers-reduced-motion: reduce){
    .cup{ animation:none } .cup.gone{ animation:none; opacity:0 }
    .pan-btn.hit{ animation:none }
  }

  /* Оберег: круг со знаками вокруг астронавта. Выпадает редко — когда монета
     встаёт на ребро — и держится до конца суток. Медленное вращение и слабое
     свечение: это примета, а не индикатор. */
  .amulet{
    position:absolute; inset:auto; left:50%; top:50%;
    width:min(78%, 420px); aspect-ratio:1; transform:translate(-50%,-50%);
    pointer-events:none; color:var(--accent-2);
    opacity:.55; mix-blend-mode:screen;
    filter:drop-shadow(0 0 12px rgba(180,140,255,.45));
    animation:amuletSpin 90s linear infinite, amuletIn 1.2s ease-out both;
  }
  .amulet svg{ width:100%; height:100%; display:block; }
  @keyframes amuletSpin{ from{ transform:translate(-50%,-50%) rotate(0) }
                         to{ transform:translate(-50%,-50%) rotate(360deg) } }
  @keyframes amuletIn{ from{ opacity:0 } to{ opacity:.55 } }
  @media (prefers-reduced-motion: reduce){ .amulet{ animation:none } }

  /* Редкие явления: спутник, комета, сияние, метеорный поток. Задний план,
     как и на главной. */
  #skyev{ position:fixed; inset:0; z-index:1; pointer-events:none; }
  #finale{ position:fixed; inset:0; z-index:96; pointer-events:none; }
  #scope{ position:fixed; inset:0; z-index:8; pointer-events:none; }