/* ==========================================================================
     ПРОТОКОЛ РАССВЕТ — визуальный язык
     Игра про отбор в убежище: личные дела, раскрытие характеристик,
     голосование на исключение и три ночи после закрытия дверей.
     Отсюда и оформление: бетон и полумрак укрытия, папки личных дел с алым
     грифом, неоновая подсветка карточек как индикатор состояния игрока.
     Никакой жёлто-чёрной "ленты опасности" — это штамп, а не характер.
     Все шрифты — с обязательной поддержкой кириллицы (это была причина
     "съехавшей" типографики: у прежнего display-шрифта кириллицы не было).
     ========================================================================== */
  :root{
    /* бетон */
    --bg-0:#0e0e0d;
    --bg-1:#151513;
    --bg-2:#1c1b18;
    --panel:#151513;
    --line:#33312a;
    --line-soft:#26241f;
    /* гриф дела */
    --amber:#c8342a;        /* основной алый: грифы, лейблы, акценты (имя переменной историческое) */
    --amber-dim:#7a221c;
    --rust:#8c1a1e;
    /* бумага */
    --paper:#e8e2d6;
    --muted:#8a857a;
    --muted-2:#6a665d;
    /* служебные */
    --green:#8a9457;
    --neon:#63d8d0;         /* холодная подсветка: подсмотренные данные, щит */
    --turn-green:#b4c06e;
    --red-alert:#ff2f2f;
    /* Цвета состояний карточек игроков — перенесены из версии до редизайна:
       читаются мгновенно и не спорят с бетонной гаммой остального интерфейса. */
    --card-own:#e6b325;     /* твоя карточка */
    --card-turn:#39d97a;    /* чей сейчас ход */
    --card-vote:#33f0ff;    /* тот же игрок, но в фазе голосования */
    --card-danger:#ff3b3b;  /* больше всех голосов на исключение */
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:
      repeating-linear-gradient(0deg, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px),
      linear-gradient(180deg, var(--bg-1), var(--bg-0) 60%);
    color:var(--paper);
    font-family:'IBM Plex Mono', monospace;
    font-size:14px;
    min-height:100vh;
    padding:0 0 50px 0;
    position:relative;
    overflow-x:hidden;
  }

  /* ---------- фоновые слои ---------- */
  #vfxCanvas{
    position:fixed; inset:0; width:100%; height:100%;
    z-index:0; pointer-events:none; opacity:.6; mix-blend-mode:screen;
  }
  .scanline-sweep{
    position:fixed; left:0; right:0; height:90px; top:-90px;
    background:linear-gradient(180deg,
      transparent,
      rgba(99,216,208,0.025) 32%,
      rgba(190,255,250,0.16) 50%,
      rgba(99,216,208,0.025) 68%,
      transparent);
    pointer-events:none; z-index:1;
    animation:sweep 8s linear infinite;
  }
  @keyframes sweep{0%{top:-90px;} 100%{top:100%;}}
  /* Шапка должна лежать ВЫШЕ основного контента: у неё выпадающее меню аккаунта,
     а при равном z-index элемент, идущий позже в разметке (main), перекрывал бы его —
     меню выглядело бы «прозрачным», хотя фон у него непрозрачный. */
  main, footer{position:relative; z-index:2;}
  header.top{position:relative; z-index:50;}

  .vote-alert-frame{
    position:fixed; inset:0; pointer-events:none; z-index:3;
    box-shadow: inset 0 0 0px 0px var(--red-alert);
  }
  body.vote-mode .vote-alert-frame{
    animation: voteFramePulse 2s ease-in-out infinite;
  }
  @keyframes voteFramePulse{
    0%,100%{ box-shadow: inset 0 0 50px 3px rgba(255,47,47,0.10); }
    50%{ box-shadow: inset 0 0 110px 12px rgba(255,47,47,0.28); }
  }

  @keyframes fadeInUp{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:translateY(0);}
  }
  .fade-in-up{animation:fadeInUp .35s ease both;}

  @keyframes revealFlash{
    0%{ background:rgba(200,52,42,0.5); transform:translateX(-4px); }
    100%{ background:transparent; transform:translateX(0); }
  }
  .reveal-flash{ animation:revealFlash .8s ease both; }

  @media (prefers-reduced-motion: reduce){
    .fade-in-up, .reveal-flash, .scanline-sweep, body.vote-mode .vote-alert-frame{animation:none !important;}
  }

  /* ---------- служебная полоса над шапкой (вместо ленты опасности) ---------- */
  .hazard{
    height:26px;
    width:100%;
    background:var(--bg-0);
    border-bottom:1px solid var(--line);
    position:relative; z-index:4;
    display:flex; align-items:center; gap:14px;
    padding:0 16px;
    overflow:hidden;
    font-family:'Oswald',sans-serif;
    font-size:9.5px; letter-spacing:3px; text-transform:uppercase;
    color:var(--muted-2);
    white-space:nowrap;
  }
  .hazard::before{
    content:"◆ ◆ ◆";
    color:var(--amber);
    letter-spacing:6px;
    font-size:8px;
  }
  .hazard::after{
    content:"";
    flex:1;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--amber-dim) 0 18px, transparent 18px 30px);
  }
  body.vote-mode .hazard::before{color:var(--red-alert);}

  /* ---------- шапка / марка ---------- */
  header.top{
    max-width:1520px;
    margin:0 auto;
    padding:18px 20px 14px;
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:18px;
    border-bottom:1px solid var(--line);
  }
  .mark{display:flex; align-items:center; gap:14px; min-width:0;}
  .mark-glyph{
    width:38px; height:38px; flex:0 0 38px;
    border:2px solid var(--amber);
    display:flex; align-items:center; justify-content:center;
    transform:rotate(45deg);
    position:relative;
  }
  .mark-glyph i{
    width:10px; height:10px; background:var(--amber); display:block;
  }
  body.vote-mode .mark-glyph{border-color:var(--red-alert);}
  body.vote-mode .mark-glyph i{background:var(--red-alert);}

  /* ---------- главная страница: мигающая лампа + киберпанк-искажение лого ---------- */
  .landing{
    min-height:65vh;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
    gap:20px;
    padding:40px 20px;
  }
  .landing-mark .mark-glyph.big{
    width:70px; height:70px; flex:0 0 70px;
    border-width:3px;
    margin-bottom:4px;
    animation: glyphGlitch 6s infinite;
  }
  .landing-mark .mark-glyph.big i{ width:19px; height:19px; }
  @keyframes glyphGlitch{
    0%,92%,100%{ transform:rotate(45deg) translate(0,0); filter:none; }
    93%{ transform:rotate(45deg) translate(-4px,1px);
         filter:drop-shadow(3px 0 0 rgba(255,59,59,.75)) drop-shadow(-3px 0 0 rgba(255,176,32,.75)); }
    94%{ transform:rotate(45deg) translate(3px,-2px); }
    95%{ transform:rotate(45deg) translate(-2px,2px);
         filter:drop-shadow(-3px 0 0 rgba(255,59,59,.75)) drop-shadow(3px 0 0 rgba(255,176,32,.75)); }
    96%{ transform:rotate(45deg) translate(0,0); filter:none; }
  }
  .landing-title{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    justify-content:center;
    gap:0.28em;
    font-family:'Russo One','Oswald',sans-serif;
    font-weight:400;
    text-transform:uppercase;
    font-size:clamp(36px,9vw,88px);
    line-height:1.06;
    letter-spacing:4px;
    color:var(--paper);
    margin:0;
    max-width:92vw;
    animation: lampFlicker 5s infinite;
  }
  .landing-title .lt-part{
    position:relative;
    display:inline-block;
  }
  .landing-title .lt-part.accent{
    color:var(--red-alert);
  }
  .landing-title .lt-part::before,
  .landing-title .lt-part::after{
    content:attr(data-text);
    position:absolute; left:0; top:0; width:100%;
    pointer-events:none;
  }
  .landing-title .lt-part::before{
    color:#ff3b3b;
    mix-blend-mode:screen;
    animation: glitchSlideA 3.2s infinite linear;
  }
  .landing-title .lt-part::after{
    color:#ffb020;
    mix-blend-mode:screen;
    animation: glitchSlideB 4.1s infinite linear;
  }
  /* Мерцание лампы: неравномерные провалы яркости, а не ровная пульсация —
     ближе к живой люминесцентной лампе, чем к дыханию/пульсу. */
  @keyframes lampFlicker{
    0%,18%,20%,22%,58%,60%,75%,100%{
      opacity:1; text-shadow:0 0 22px rgba(200,52,42,.55), 0 0 55px rgba(200,52,42,.22);
    }
    19%{ opacity:.35; text-shadow:none; }
    21%{ opacity:.85; }
    59%{ opacity:.45; text-shadow:none; }
    76%{ opacity:.55; }
    77%{ opacity:1; }
  }
  /* Красный и янтарный "каналы" почти всё время не видны и коротко проступают
     горизонтальными вырезанными полосами со сдвигом — классический сбой цифрового сигнала. */
  @keyframes glitchSlideA{
    0%,89%,100%{ clip-path:inset(0 0 0 0); transform:translate(0,0); opacity:0; }
    90%{ clip-path:inset(10% 0 60% 0); transform:translate(-6px,0); opacity:.8; }
    91%{ clip-path:inset(55% 0 10% 0); transform:translate(4px,0); opacity:.75; }
    92%{ clip-path:inset(20% 0 40% 0); transform:translate(-3px,0); opacity:.7; }
    93%{ opacity:0; }
  }
  @keyframes glitchSlideB{
    0%,84%,100%{ clip-path:inset(0 0 0 0); transform:translate(0,0); opacity:0; }
    85%{ clip-path:inset(40% 0 20% 0); transform:translate(5px,0); opacity:.8; }
    86%{ clip-path:inset(5% 0 70% 0); transform:translate(-4px,0); opacity:.75; }
    87%{ clip-path:inset(65% 0 5% 0); transform:translate(3px,0); opacity:.7; }
    88%{ opacity:0; }
  }
  .landing-tag{
    font-family:'Oswald',sans-serif;
    letter-spacing:3px;
    text-transform:uppercase;
    font-size:12.5px;
    color:var(--muted);
    margin:0;
  }
  .landing-start{
    margin-top:14px;
    font-size:15px;
    padding:16px 42px;
    letter-spacing:3px;
  }
  /* Верхнюю служебную полосу и шапку с названием прячем на главной странице —
     название там и так есть, крупно, в самом заголовке. Показываются только
     после нажатия «Начать игру» (renderLobby и все игровые экраны). */
  body.hide-chrome .hazard,
  body.hide-chrome header.top{
    display:none;
  }
  @media (prefers-reduced-motion: reduce){
    .landing-title, .landing-title .lt-part::before, .landing-title .lt-part::after,
    .landing-mark .mark-glyph.big{ animation:none !important; opacity:1; }
  }

  h1.brand{
    font-family:'Russo One', 'Oswald', sans-serif;
    font-weight:400;
    letter-spacing:1px;
    font-size:clamp(19px,3.4vw,29px);
    margin:0;
    color:var(--paper);
    line-height:1;
    text-transform:uppercase;
  }
  h1.brand span{
    display:block;
    color:var(--amber);
    font-size:.52em;
    letter-spacing:5px;
    margin-top:5px;
  }
  .subbrand{
    font-family:'Oswald',sans-serif;
    font-size:10px;
    letter-spacing:2.5px;
    color:var(--muted-2);
    text-transform:uppercase;
    text-align:right;
    line-height:1.7;
  }
  .subbrand b{color:var(--muted); font-weight:500;}

  /* ---------- каркас: две стороны экрана ---------- */
  main{
    max-width:1520px;
    margin:0 auto;
    padding:0 20px;
  }
  .shell{
    display:grid;
    grid-template-columns:1fr 360px;
    gap:0;
    align-items:start;
  }
  .col{
    min-width:0;
    padding:18px 26px 0 0;
  }
  .rail{
    min-width:0;
    padding:18px 0 0 22px;
    border-left:1px solid var(--line);
    position:sticky;
    top:0;
    max-height:100vh;
    overflow-y:auto;
    scrollbar-width:thin;
  }
  /* Планшеты и узкие окна на десктопе: колонки складываются в одну.
     Всё, что касается телефонов, собрано ниже в одном месте — см. блок
     «ТЕЛЕФОНЫ И УЗКИЕ ЭКРАНЫ». */
  @media(max-width:900px){
    .shell{grid-template-columns:1fr;}
    .col{padding:14px 0 0; order:1;}
    .rail{
      padding:14px 0 0;
      border-left:none;
      border-top:1px solid var(--line);
      position:static;
      max-height:none;
      order:2;
      margin-top:20px;
    }
  }

  /* ---------- секции (НЕ карточки — карточки только у игроков) ---------- */
  .panel{
    background:transparent;
    border:none;
    border-left:2px solid var(--line);
    border-radius:0;
    padding:2px 0 0 14px;
    margin:0 0 22px 0;
    position:relative;
  }
  .panel::before{
    content:attr(data-tag);
    display:block;
    font-family:'Oswald',sans-serif;
    font-weight:500;
    font-size:10px;
    letter-spacing:2.5px;
    color:var(--amber);
    text-transform:uppercase;
    margin-bottom:9px;
  }
  .panel p{margin:0 0 9px; line-height:1.65; font-size:13px;}
  .panel p:last-child{margin-bottom:0;}
  .rail .panel{border-left-color:var(--line-soft); font-size:12.5px;}
  .rail .panel p{font-size:12px;}

  /* Сворачиваемая секция оформлена нашим же элементом интерфейса:
     красный ромб-указатель + служебная пунктирная полоса до края. */
  details.panel > summary{
    list-style:none; cursor:pointer; outline:none;
    display:flex; align-items:center; gap:10px;
    font-family:'Oswald',sans-serif;
    letter-spacing:2px; text-transform:uppercase;
    font-size:11.5px; color:var(--muted);
    padding:4px 0;
    transition:color .15s;
  }
  details > summary::-webkit-details-marker{display:none;}
  details.panel > summary::before{
    content:"";
    flex:0 0 8px;
    width:8px; height:8px;
    background:var(--amber);
    transform:rotate(45deg);
    transition:transform .25s ease, box-shadow .2s;
  }
  details.panel[open] > summary::before{
    transform:rotate(45deg) scale(.72);
    box-shadow:0 0 7px 1px rgba(200,52,42,.85);
  }
  details.panel > summary::after{
    content:"";
    flex:1 1 auto;
    height:1px;
    background:repeating-linear-gradient(90deg, var(--amber-dim) 0 14px, transparent 14px 24px);
    opacity:.55;
  }
  details.panel > summary:hover{color:var(--paper);}
  details.panel > summary:hover::before{box-shadow:0 0 7px 1px rgba(200,52,42,.7);}
  details.panel[open] > summary{color:var(--paper);}
  details.panel > summary:focus-visible{outline:1px solid var(--neon); outline-offset:3px;}
  @media (prefers-reduced-motion: reduce){
    details.panel > summary::before{transition:none;}
  }

  /* ---------- полосы прокрутки ----------
     Страница целиком — обычный аккуратный бегунок в гамме интерфейса.
     Фирменный ромб оставлен только для внутренних прокручиваемых блоков. */
  html{
    scrollbar-width:thin;
    scrollbar-color:#4a4740 transparent;
  }
  body::-webkit-scrollbar, html::-webkit-scrollbar{width:11px; height:11px;}
  body::-webkit-scrollbar-track, html::-webkit-scrollbar-track{
    background:var(--bg-0);
    border-left:1px solid var(--line-soft);
  }
  body::-webkit-scrollbar-thumb, html::-webkit-scrollbar-thumb{
    background:#403d36;
    border:3px solid var(--bg-0);
    border-radius:6px;
    min-height:40px;
  }
  body::-webkit-scrollbar-thumb:hover, html::-webkit-scrollbar-thumb:hover{background:#57534a;}

  /* Внутренние области прокрутки: направляющая-пунктир и ромб-бегунок */
  .rail, .feed-list, .rules-body, .linkbox, .patch-scroll, .chat-log{
    scrollbar-width:thin;
    scrollbar-color:var(--amber) transparent;
  }
  .rail::-webkit-scrollbar,
  .feed-list::-webkit-scrollbar,
  .rules-body::-webkit-scrollbar,
  .patch-scroll::-webkit-scrollbar,
  .chat-log::-webkit-scrollbar,
  .linkbox::-webkit-scrollbar{width:14px; height:14px; background:transparent;}
  .rail::-webkit-scrollbar-track,
  .feed-list::-webkit-scrollbar-track,
  .rules-body::-webkit-scrollbar-track,
  .patch-scroll::-webkit-scrollbar-track,
  .chat-log::-webkit-scrollbar-track,
  .linkbox::-webkit-scrollbar-track{
    background:
      repeating-linear-gradient(180deg, var(--amber-dim) 0 9px, transparent 9px 18px)
      center top / 1px 100% repeat-y;
  }
  .rail::-webkit-scrollbar-thumb,
  .feed-list::-webkit-scrollbar-thumb,
  .rules-body::-webkit-scrollbar-thumb,
  .patch-scroll::-webkit-scrollbar-thumb,
  .chat-log::-webkit-scrollbar-thumb,
  .linkbox::-webkit-scrollbar-thumb{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.6L13.4 7L7 13.4L0.6 7Z' fill='%23c8342a'/%3E%3C/svg%3E")
      center center / 14px 14px no-repeat,
      linear-gradient(180deg, transparent, rgba(200,52,42,.45), transparent)
      center top / 1px 100% no-repeat;
    min-height:46px;
    border:none;
  }
  .rail::-webkit-scrollbar-thumb:hover,
  .feed-list::-webkit-scrollbar-thumb:hover,
  .rules-body::-webkit-scrollbar-thumb:hover,
  .patch-scroll::-webkit-scrollbar-thumb:hover,
  .chat-log::-webkit-scrollbar-thumb:hover,
  .linkbox::-webkit-scrollbar-thumb:hover{
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M7 0.2L13.8 7L7 13.8L0.2 7Z' fill='%23e0553f'/%3E%3C/svg%3E")
      center center / 14px 14px no-repeat,
      linear-gradient(180deg, transparent, rgba(224,85,63,.7), transparent)
      center top / 1px 100% no-repeat;
  }
  ::-webkit-scrollbar-button{display:none; width:0; height:0;}
  ::-webkit-scrollbar-corner{background:transparent;}

  /* ---------- сводка / тревога ---------- */
  .alert-ticker{
    background:linear-gradient(90deg, rgba(200,52,42,0.09), transparent 70%);
    border:none;
    border-left:2px solid var(--rust);
    color:var(--paper);
    padding:9px 0 9px 12px;
    margin-left:-14px;
    padding-left:12px;
    font-size:12.5px;
    line-height:1.65;
    border-radius:0;
  }
  .alert-ticker b{
    color:var(--amber);
    font-family:'Oswald',sans-serif;
    letter-spacing:1.5px;
  }
  .bunker-info{
    font-size:12px;
    color:var(--muted);
    margin-top:9px;
    line-height:1.7;
    padding-top:9px;
    border-top:1px solid var(--line-soft);
  }

  /* ---------- хроника ---------- */
  .feed-list{
    display:flex;
    flex-direction:column;
    max-height:340px;
    overflow-y:auto;
    scrollbar-width:thin;
    padding-right:4px;
  }
  .feed-item{
    display:flex;
    align-items:baseline;
    gap:8px;
    background:transparent;
    border:none;
    border-left:2px solid var(--line);
    padding:6px 0 6px 10px;
    margin-bottom:4px;
    font-size:11.5px;
    line-height:1.55;
    border-radius:0;
    color:var(--muted);
  }
  .feed-time{
    flex:0 0 auto;
    font-family:'IBM Plex Mono',monospace;
    font-size:9.5px;
    color:var(--muted-2);
    white-space:nowrap;
  }
  .feed-text{flex:1 1 auto; min-width:0;}
  .feed-item.kind-vote{border-left-color:var(--rust); color:var(--paper);}
  .feed-item.kind-reveal{border-left-color:var(--turn-green);}
  .feed-item.kind-system{border-left-color:var(--line);}
  /* Использование способности — не просто цветная полоска, а целая рамка,
     чтобы такие записи сразу бросались в глаза на фоне обычной хроники. */
  .feed-item.kind-ability{
    border:1px solid var(--amber-dim);
    border-left:3px solid var(--amber);
    background:rgba(200,52,42,0.08);
    padding:7px 10px;
    color:var(--paper);
  }
  .feed-item.kind-ability .feed-time{color:var(--amber);}

  /* ---------- формы ---------- */
  label{
    display:block;
    font-family:'Oswald',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--muted-2);
    margin-bottom:5px;
  }
  input[type=text], select{
    width:100%;
    background:var(--bg-0);
    border:1px solid var(--line);
    color:var(--paper);
    padding:10px 12px;
    font-family:'IBM Plex Mono', monospace;
    font-size:13.5px;
    border-radius:0;
    margin-bottom:12px;
  }
  input[type=text]:focus, select:focus{outline:none; border-color:var(--amber);}
  .grid6{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:0 18px;
  }
  @media(max-width:640px){.grid6{grid-template-columns:1fr;}}

  /* ---------- кнопки ---------- */
  button{
    font-family:'Oswald', sans-serif;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:12.5px;
    padding:11px 18px;
    border-radius:0;
    border:1px solid var(--amber);
    background:transparent;
    color:var(--amber);
    cursor:pointer;
    transition:background .12s, color .12s;
  }
  button:hover{background:var(--amber); color:var(--bg-0);}
  button:focus-visible{outline:2px solid var(--neon); outline-offset:2px;}
  button.primary{background:var(--amber); color:var(--bg-0); border-color:var(--amber);}
  button.primary:hover{background:#dc4235; border-color:#dc4235;}
  button.danger{border-color:var(--rust); color:#eda9a4;}
  button.danger:hover{background:var(--rust); color:#fff;}
  button.ghost{border-color:var(--line); color:var(--muted);}
  button.ghost:hover{background:var(--line); color:var(--paper);}
  button:disabled{opacity:.3; cursor:not-allowed;}
  button:disabled:hover{background:transparent; color:var(--amber);}

  /* ---------- ссылки-кнопки ----------
     Переходы между экранами сделаны настоящими <a href>: только у ссылки
     работают средняя кнопка мыши, Ctrl+клик и пункт «Открыть в новой вкладке».
     На <button> браузер этого не даёт ничем — обработчик там попросту не
     вызывается, и внешне это выглядит как «кнопка не нажимается колесом».

     Вид при этом должен остаться прежним, а правила выше привязаны к самому
     тегу button и на ссылки не распространяются, поэтому кнопочный облик
     повторён здесь для .a-btn. Классам, у которых свой облик уже описан
     (.acct-item, .tab, .account-chip), от тега <a> нужно снять только
     подчёркивание и вернуть насыщенность шрифта.

     Базовый облик завёрнут в :where() — у такого правила нулевой вес, и любой
     класс на той же ссылке (.landing-start, .account-chip) перебивает его так
     же, как перебивал у кнопки правило `button{}`. Без этого ссылка с двумя
     классами получала бы отступы базы вместо своих. */
  :where(a.a-btn){
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Oswald', sans-serif;
    font-weight:500;
    letter-spacing:2px;
    text-transform:uppercase;
    font-size:12.5px;
    padding:11px 18px;
    border-radius:0;
    border:1px solid var(--amber);
    background:transparent;
    color:var(--amber);
    cursor:pointer;
    text-decoration:none;
    transition:background .12s, color .12s;
  }
  :where(a.a-btn):hover{background:var(--amber); color:var(--bg-0);}
  :where(a.a-btn):focus-visible{outline:2px solid var(--neon); outline-offset:2px;}
  :where(a.a-btn).primary{background:var(--amber); color:var(--bg-0); border-color:var(--amber);}
  :where(a.a-btn).primary:hover{background:#dc4235; border-color:#dc4235;}
  :where(a.a-btn).ghost{border-color:var(--line); color:var(--muted);}
  :where(a.a-btn).ghost:hover{background:var(--line); color:var(--paper);}
  :where(a.acct-item, a.tab, a.account-chip){text-decoration:none; cursor:pointer; font-weight:500;}
  :where(a.acct-item){display:block;}

  .row{display:flex; gap:10px; flex-wrap:wrap; align-items:center;}
  .cat-btn-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(178px,1fr));
    gap:7px;
    margin:12px 0;
  }
  .cat-btn-grid button{font-size:11.5px; padding:11px 10px; letter-spacing:1.2px;}
  /* кнопка раскрытия несёт и название категории, и само значение */
  .cat-btn-grid button.cat-btn{
    display:flex; flex-direction:column; align-items:flex-start; gap:3px;
    text-align:left; padding:9px 11px;
  }
  .cat-btn .bk{
    font-family:'Oswald',sans-serif;
    font-size:11px; letter-spacing:1.5px; text-transform:uppercase;
  }
  .cat-btn .bv{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:0; text-transform:none;
    color:var(--muted);
    max-width:100%;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .cat-btn:hover .bv{color:rgba(16,15,13,.72);}

  /* ---------- баннер хода ---------- */
  .turn-banner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    background:var(--bg-0);
    border:1px solid var(--line);
    border-left:3px solid var(--amber);
    padding:12px 14px;
    margin-bottom:22px;
    font-family:'Oswald', sans-serif;
    letter-spacing:1.5px;
    font-size:14px;
    position:sticky;
    top:0;
    z-index:6;
  }
  .turn-banner b{color:var(--paper);}
  body.vote-mode .turn-banner{
    border-left-color:var(--red-alert);
    border-color:var(--amber-dim);
  }
  .turn-banner .cursor{animation:blink 1.1s steps(1) infinite; color:var(--amber);}
  @keyframes blink{50%{opacity:0;}}
  @media (prefers-reduced-motion: reduce){.turn-banner .cursor{animation:none;}}
  .phase-pill{
    font-family:'Oswald',sans-serif;
    font-size:10px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--bg-0);
    background:var(--amber);
    padding:4px 10px;
    border-radius:0;
    white-space:nowrap;
  }
  body.vote-mode .phase-pill{background:var(--red-alert); color:#fff;}

  /* ---------- КАРТОЧКИ ИГРОКОВ (единственные карточки в интерфейсе) ---------- */
  .roster{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(244px,1fr));
    gap:12px;
  }
  .dossier{
    background:var(--bg-0);
    border:1px solid var(--line);
    border-radius:0;
    padding:14px 14px 16px;
    position:relative;
    overflow:hidden;
  }
  .dossier.out{opacity:.4;}
  /* Плашка — ОТДЕЛЬНЫЙ элемент, а не ::after.
     Купленные рамки личного дела (.cf-*) рисуются на ::after того же .dossier,
     а псевдоэлемент у элемента только один: правила сливались, content от рамки
     убирал текст, inset:0 растягивал плашку на всю карточку, а фон и поворот
     оставались от плашки. Получался красный перекошенный квадрат вместо надписи. */
  .dossier .out-stamp{
    position:absolute;
    z-index:3;                /* поверх рамки личного дела, у неё z-index:2 */
    top:40%;
    left:-15%;
    width:130%;
    text-align:center;
    transform:rotate(-8deg);
    background:var(--rust);
    color:#fff;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    letter-spacing:3px;
    font-size:12px;
    padding:4px 0;
    box-shadow:0 2px 6px rgba(0,0,0,.45);
  }
  /* Ходит сейчас — зелёная неоновая рамка */
  .dossier.active-turn{
    border-color:var(--card-turn);
    box-shadow:0 0 10px 1px rgba(57,217,122,0.55), 0 0 0 1px var(--card-turn) inset;
  }
  /* Тот же игрок в фазе голосования — холодный бирюзовый неон */
  body.vote-mode .dossier.active-turn{
    border-color:var(--card-vote);
    box-shadow:0 0 12px 1px var(--card-vote), 0 0 0 1px var(--card-vote) inset;
  }
  /* Твоя карточка — золотой неон */
  .dossier.own-card{
    border:1px solid var(--card-own);
    background:#1a1710;
    box-shadow:0 0 12px 2px rgba(230,179,37,0.5), 0 0 0 1px var(--card-own) inset;
  }
  /* Своя карточка с КУПЛЕННОЙ рамкой личного дела — особый случай.
     Золотая подсветка своей карточки заливает её тёплым фоном и обводит
     золотом по краю, а рамка личного дела рисуется тонким кольцом внутри.
     Вместе это давало грязное серо-бурое пятно: покупатель видел вместо
     своего «Разлома» что-то выцветшее, тогда как остальные за столом видели
     нормальный фиолетовый. Обидно вдвойне — рамку человек купил именно для
     того, чтобы на неё смотреть.

     Поэтому на карточке с рамкой золотую заливку и обводку снимаем, оставляя
     только внешнее свечение: оно не заходит внутрь и цвет рамки не портит.
     Что карточка твоя, по-прежнему видно — по имени, оно золотое. */
  .dossier.own-card[class*="cf-"]{
    border-color:var(--line);
    background:var(--bg-0);
    box-shadow:0 0 10px 1px rgba(230,179,37,.35);
  }
  /* Больше всех голосов на исключение — красный неон, перебивает остальное */
  .dossier.vote-leader{
    border-color:var(--card-danger) !important;
    box-shadow:0 0 16px 3px rgba(255,59,59,0.65), 0 0 0 1px var(--card-danger) inset !important;
  }
  /* Тряска карточек во время голосования — фоновое напряжение для всех живых,
     и заметно сильнее у того, на кого сейчас больше всего голосов. */
  @keyframes cardShake{
    0%,100%{ transform:translate(0,0); }
    20%{ transform:translate(-1px,0); }
    40%{ transform:translate(1px,1px); }
    60%{ transform:translate(-1px,-1px); }
    80%{ transform:translate(1px,0); }
  }
  @keyframes cardShakeHard{
    0%,100%{ transform:translate(0,0) rotate(0); }
    15%{ transform:translate(-2px,1px) rotate(-0.4deg); }
    30%{ transform:translate(2px,-1px) rotate(0.4deg); }
    45%{ transform:translate(-2px,-1px) rotate(-0.3deg); }
    60%{ transform:translate(2px,1px) rotate(0.3deg); }
    75%{ transform:translate(-1px,0) rotate(-0.2deg); }
  }
  body.vote-mode .dossier:not(.out){
    animation: cardShake 3.6s ease-in-out infinite;
  }
  body.vote-mode .dossier.vote-leader{
    animation: cardShakeHard 1.4s ease-in-out infinite;
  }
  @media (prefers-reduced-motion: reduce){
    body.vote-mode .dossier:not(.out),
    body.vote-mode .dossier.vote-leader{ animation:none !important; }
  }
  .dossier .pname{
    font-family:'Oswald', sans-serif;
    font-size:16px;
    letter-spacing:1px;
    text-transform:uppercase;
    margin-bottom:10px;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:8px;
  }
  .dossier.own-card .pname{color:var(--card-own);}
  .dossier.active-turn .pname{color:var(--card-turn);}
  body.vote-mode .dossier.active-turn .pname{color:var(--card-vote);}
  .trait-row{
    display:flex;
    gap:8px;
    align-items:center;
    min-height:27px;
    font-size:12px;
    padding:4px 0;
    border-bottom:1px dashed var(--line-soft);
  }
  .trait-row:last-child{border-bottom:none;}
  .trait-cat{
    color:var(--muted-2);
    min-width:104px;
    flex-shrink:0;
    font-size:10.5px;
    letter-spacing:.5px;
    text-transform:uppercase;
    line-height:1.3;
  }
  .trait-val{color:var(--paper); flex:1 1 auto; min-width:0; word-break:break-word; overflow-wrap:anywhere;}
  .peek-val{color:var(--neon); font-style:italic;}
  .peek-val::after{content:" ◈"; font-size:9px;}

  /* ---------- компактная сводка своих данных над кнопками раскрытия ---------- */
  .own-strip{
    border:1px solid var(--line);
    border-left:2px solid var(--card-danger);
    background:#1a1212;
    padding:9px 12px 7px;
    margin:0 0 14px;
  }
  .own-strip-head{
    display:flex; align-items:center; gap:10px;
    margin-bottom:7px;
  }
  .own-strip-title{
    font-family:'Oswald',sans-serif;
    font-size:10px; letter-spacing:2px; text-transform:uppercase;
    color:var(--card-danger); white-space:nowrap;
  }
  .own-strip-count{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; color:var(--muted-2); white-space:nowrap;
  }
  .own-meter-bar{
    flex:1; height:2px; background:var(--line-soft); position:relative; overflow:hidden; min-width:40px;
  }
  .own-meter-bar i{
    display:block; height:100%; background:var(--card-danger);
    box-shadow:0 0 6px rgba(255,59,59,.7);
    transition:width .4s ease;
  }
  .own-strip-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit, minmax(215px,1fr));
    gap:0 18px;
  }
  .own-line{
    display:flex; gap:8px; align-items:baseline;
    padding:3px 0;
    border-bottom:1px solid var(--line-soft);
    font-size:11px;
    min-width:0;
  }
  .own-line .k{
    font-family:'Oswald',sans-serif;
    font-size:9px; letter-spacing:1px; text-transform:uppercase;
    color:#57534b; min-width:88px; flex-shrink:0;
  }
  .own-line .v{
    flex:1 1 auto; min-width:0;
    color:#7d786d; font-style:italic;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  /* уже раскрытое — ярко-красным и без курсива, скрытое — серым */
  .own-line.open .k{color:var(--muted);}
  .own-line.open .v{color:var(--paper); font-style:normal;}
  .own-line.open .k::before{
    content:"●"; color:var(--card-danger); font-size:7px;
    margin-right:5px; vertical-align:middle;
  }
  .own-line:not(.open) .k::before{
    content:"○"; color:#4a463f; font-size:7px;
    margin-right:5px; vertical-align:middle;
  }
  .redacted{
    background:#000;
    color:transparent;
    border-radius:0;
    padding:0 6px;
    user-select:none;
    display:block;
    flex:1 1 auto;
    min-width:0;
    /* Ключевое для ровных карточек: цензура всегда одной высоты и не переносится,
       иначе длинное скрытое значение растягивает строку и ломает выравнивание. */
    height:1.45em;
    line-height:1.45em;
    white-space:nowrap;
    overflow:hidden;
  }
  .vote-count{
    font-family:'Oswald',sans-serif;
    font-size:10.5px;
    letter-spacing:1px;
    color:var(--card-own);
    white-space:nowrap;
  }
  body.vote-mode .vote-count{color:var(--card-danger);}

  /* ---------- способности и особые силы ----------
     Обычная способность — просто строка списка. Особая сила («rare») выделена
     алым: линия слева, подсветка фона и метка. Ставка на цвет, а не на иконку,
     потому что панель читают боковым зрением во время чужого хода. */
  .ability-row{
    border-bottom:1px solid var(--line-soft);
    padding:10px 0;
  }
  .ability-name{
    font-family:Oswald, sans-serif;
    letter-spacing:1px;
    color:var(--amber);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .ability-row.rare{
    border-left:3px solid var(--red-alert);
    padding-left:12px;
    background:linear-gradient(90deg, rgba(255,47,47,0.10), rgba(255,47,47,0) 65%);
    box-shadow:inset 0 0 0 1px rgba(255,47,47,0.10);
  }
  .ability-row.rare .ability-name{
    color:var(--card-danger);
    text-shadow:0 0 12px rgba(255,47,47,0.30);
  }
  .ability-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:9px;
    font-weight:600;
    letter-spacing:1.5px;
    padding:3px 6px;
    border:1px solid var(--red-alert);
    color:var(--card-danger);
    background:rgba(255,47,47,0.08);
    white-space:nowrap;
  }
  .rare-note{
    color:var(--card-danger) !important;
    border-left:2px solid var(--red-alert);
    padding-left:8px;
    margin:8px 0 4px;
  }

  /* ---------- переключатель языка ----------
     Стоит слева от виджета аккаунта. Намеренно неброский: это настройка,
     которую трогают один раз, а не элемент управления игрой. */
  .lang-switch{
    display:flex;
    gap:2px;
    margin-right:8px;
  }
  .lang-btn{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    font-weight:600;
    letter-spacing:1px;
    padding:5px 7px;
    background:transparent;
    border:1px solid var(--line-soft);
    color:var(--muted-2);
    cursor:pointer;
    transition:color .15s, border-color .15s, background .15s;
  }
  .lang-btn:hover{ color:var(--fg); border-color:var(--line); }
  .lang-btn.on{
    color:var(--amber);
    border-color:var(--amber);
    background:rgba(224,168,58,0.08);
  }
  .lang-btn.sound-btn{ font-size:13px; line-height:1; padding:4px 8px; }
  .lang-btn.sound-btn.muted{ position:relative; opacity:.55; }
  .lang-btn.sound-btn.muted::after{
    content:''; position:absolute; left:15%; right:15%; top:50%;
    height:1px; background:currentColor; transform:rotate(-20deg);
  }

  .rematch-box{
    margin-top:18px;
    padding-top:16px;
    border-top:1px solid var(--line-soft);
  }
  .rematch-box button{ width:100%; }

  .rules-body h4{
    font-family:Oswald, sans-serif;
    font-size:13px;
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--amber);
    margin:20px 0 6px;
    font-weight:500;
  }
  .rules-body h4:first-of-type{ margin-top:14px; }
  .rules-lead{
    font-size:15px;
    line-height:1.7;
    color:var(--fg);
    margin:0 0 4px;
    border-left:2px solid var(--amber);
    padding-left:12px;
  }

  /* ---------- таймер хода ----------
     Полоса, а не цифры крупным кеглем: обратный отсчёт не должен перетягивать
     внимание с самой игры, но краем глаза должен читаться. */
  .turn-timer{
    display:flex;
    align-items:center;
    gap:8px;
    margin-top:10px;
  }
  .turn-timer:empty{ display:none; margin:0; }
  .turn-timer-bar{
    flex:1;
    height:3px;
    background:var(--line-soft);
    overflow:hidden;
  }
  .turn-timer-fill{
    height:100%;
    background:var(--muted);
    transition:width .9s linear;
  }
  .turn-timer-num{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--muted-2);
    min-width:34px;
    text-align:right;
  }
  .turn-timer.urgent .turn-timer-fill{ background:var(--red-alert); }
  .turn-timer.urgent .turn-timer-num{ color:var(--card-danger); }

  .seat-away{
    font-family:'IBM Plex Mono', monospace;
    font-size:9px;
    letter-spacing:1px;
    text-transform:uppercase;
    padding:2px 5px;
    margin-left:7px;
    border:1px solid var(--line);
    color:var(--muted-2);
    white-space:nowrap;
  }

  footer a{
    color:var(--muted-2);
    text-decoration:none;
    border-bottom:1px dotted var(--line);
    margin-left:14px;
  }
  footer a:hover{ color:var(--amber); border-bottom-color:var(--amber); }

  /* ---------- панель ведущего ---------- */
  .host-label{
    font-family:'IBM Plex Mono', monospace;
    font-size:10px;
    letter-spacing:1.5px;
    text-transform:uppercase;
    color:var(--muted-2);
    margin-bottom:7px;
  }
  .host-limits{ display:flex; flex-wrap:wrap; gap:5px; }
  .host-chip{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    padding:5px 8px;
    background:transparent;
    border:1px solid var(--line-soft);
    color:var(--muted);
    cursor:pointer;
  }
  .host-chip:hover{ color:var(--fg); border-color:var(--line); }
  .host-chip.on{ color:var(--amber); border-color:var(--amber); background:rgba(200,52,42,0.08); }
  .host-chip.danger-chip{ color:var(--muted-2); padding:4px 8px; }
  .host-chip.danger-chip:hover{ color:#fff; background:var(--rust); border-color:var(--rust); }
  .host-kicks{ display:flex; flex-direction:column; gap:4px; }
  .host-kick-row{
    display:flex; align-items:center; justify-content:space-between; gap:8px;
    padding:4px 0; border-bottom:1px solid var(--line-soft);
  }
  .host-kick-row:last-child{ border-bottom:none; }
  .host-kick-name{ display:flex; align-items:center; gap:6px; font-size:13px; }
  .host-kick-tag{
    font-family:'IBM Plex Mono', monospace;
    font-size:9px; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted-2); border:1px solid var(--line); padding:1px 4px;
  }
  .host-kick-tag.away{ color:var(--card-danger); border-color:var(--red-alert); }
  .turn-timer-away{
    font-family:'IBM Plex Mono', monospace;
    font-size:11px;
    color:var(--card-danger);
  }
  .turn-timer.away{ border-top:1px solid var(--red-alert); padding-top:8px; }

  /* Выведенный из партии: карточка гасится сильнее, чем у изгнанника —
     изгнанник ещё играет, а этот уже нет. */
  .dossier.gone{ opacity:.35; filter:grayscale(1); }

  .host-end{ margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft); }
  .host-warn{ color:var(--card-danger) !important; margin:0 0 8px; }


  /* ==================================================================
     ТЕЛЕФОНЫ И УЗКИЕ ЭКРАНЫ

     Раскладка задумана под две колонки, и на телефоне она складывается в одну.
     Само по себе это работает, но дальше начинаются мелочи, из-за которых
     играть неудобно, а выглядит небрежно. Здесь они собраны в одном месте,
     а не разбросаны по файлу — прошлые правки на 900/700/640/560 px друг о
     друге не знали, и часть элементов ужималась дважды.

     Что учтено:
     • Шапка на 360 px не влезала в строку: логотип, переключатели и профиль
       толкали друг друга. Теперь она переносится, а подзаголовок скрыт —
       на телефоне он только занимает место.
     • Кегль основного текста поднят, а не опущен: 14px моноширинного на
       телефоне читается тяжело. Зато служебные подписи ужаты.
     • Все кнопки не меньше 44 px по высоте — иначе в них не попасть пальцем.
     • Карточки игроков в одну колонку: две по 244 px на 360 px экране
       превращались в нечитаемые полоски.
     • Отступы панелей уменьшены с 14 до 10 px: фирменная линия остаётся,
       но текст не жмётся к правому краю.
     • Учтён «вырез» и домашняя полоса iPhone через safe-area.
     ================================================================== */
  @media (max-width:760px){
    body{
      font-size:15px;
      padding-bottom:calc(40px + env(safe-area-inset-bottom));
    }

    /* --- шапка --- */
    header.top{
      padding:12px 14px 10px;
      padding-left:calc(14px + env(safe-area-inset-left));
      padding-right:calc(14px + env(safe-area-inset-right));
      flex-wrap:wrap;
      align-items:center;
      gap:10px;
    }
    .mark{ gap:10px; flex:1 1 auto; }
    .mark-glyph{ width:30px; height:30px; flex:0 0 30px; }
    .mark-glyph i{ width:8px; height:8px; }
    h1.brand{ font-size:18px; }
    h1.brand span{ font-size:.55em; letter-spacing:3px; margin-top:3px; }
    /* Подзаголовок и служебная строка статуса на телефоне только съедают
       высоту: то же самое написано крупно в самом логотипе. */
    .subbrand{ display:none; }
    .hazard{ font-size:8.5px; letter-spacing:1.5px; padding:5px 10px; }

    /* --- раскладка --- */
    .shell{ grid-template-columns:1fr; }
    .col, .rail{ padding:12px 0 0; }
    .rail{
      border-left:none;
      border-top:1px solid var(--line);
      position:static;
      max-height:none;
      margin-top:18px;
    }
    .panel{ padding-left:10px; margin-bottom:18px; }
    .patchnotes{ padding:0 14px 30px; }
    .patch-scroll{ max-height:none; overflow-y:visible; padding-right:0; }

    /* --- кнопки: палец, а не курсор --- */
    button, .tab{ min-height:44px; }
    button{ padding:12px 14px; font-size:12px; }
    .host-chip, .lang-btn, .comm-btn{ min-height:36px; }
    .tabs{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
    .tab{ flex:1 0 auto; text-align:center; padding:11px 12px; }
    /* Поля ввода: 16px — минимум, при котором Safari не приближает страницу
       при фокусе. Ниже — и экран рывком «прыгает» на каждом касании. */
    input, select, textarea{ font-size:16px; padding:12px; }

    /* --- карточки игроков --- */
    .roster{ grid-template-columns:1fr; gap:10px; }
    .dossier{ padding:12px 12px 14px; }
    .code-display{ font-size:30px; letter-spacing:8px; text-indent:8px; }
    .verdict-head{ font-size:22px; letter-spacing:1px; }

    /* --- шапка хода: главный элемент на экране --- */
    .turn-banner{
      font-size:15px;
      padding:13px 14px;
      margin-bottom:20px;
      flex-wrap:wrap;
      gap:8px;
    }
    .turn-timer{ width:100%; }

    /* --- панель ведущего --- */
    .host-limits{ gap:6px; }
    .host-chip{ flex:1 1 auto; text-align:center; }
    .host-kick-row{ padding:7px 0; }

    /* --- правила --- */
    .rules-lead{ font-size:15px; padding-left:10px; }
    .rules-body h4{ font-size:12px; letter-spacing:1.5px; margin:16px 0 5px; }

    footer{ padding:20px 14px 8px; font-size:9px; letter-spacing:1.5px; }
    footer a{ display:inline-block; margin:6px 0 0 10px; }
  }

  /* Совсем узкие экраны — старые и компактные телефоны от 320 px */
  @media (max-width:400px){
    h1.brand{ font-size:16px; }
    .code-display{ font-size:25px; letter-spacing:5px; text-indent:5px; }
    .lang-btn{ padding:6px 6px; font-size:10px; }
    .lang-switch{ margin-right:4px; }
    .dossier{ padding:10px 10px 12px; }
    .panel{ padding-left:9px; }
    .turn-banner{ font-size:14px; padding:11px 12px; }
  }

  /* Телефон, повёрнутый набок: высоты мало, поэтому вертикальные отступы
     срезаем сильнее, чем горизонтальные. */
  @media (max-height:520px) and (orientation:landscape){
    header.top{ padding-top:8px; padding-bottom:8px; }
    .landing{ min-height:auto; padding:20px 0; }
    .panel{ margin-bottom:14px; }
    .turn-banner{ margin-bottom:14px; }
  }

  /* На устройствах без мыши :hover «залипает» после касания — элемент остаётся
     подсвеченным, пока не тронешь другой. Поэтому наведение оставляем только
     там, где указатель действительно есть. */
  @media (hover:none){
    button:hover, .tab:hover, .host-chip:hover, .lang-btn:hover,
    .acct-item:hover, .account-chip:hover, a.a-btn:hover, footer a:hover{
      background:inherit;
      color:inherit;
      border-color:inherit;
    }
    .mark:hover h1.brand{ color:var(--paper); }
  }

  /* ---------- история партий ----------
     Цветная линия слева вместо иконок: список листают глазами, и по цвету
     сразу видно полосу удач или неудач, не читая текста. */
  .history-list{ display:flex; flex-direction:column; gap:2px; }
  .history-row{
    border-left:2px solid var(--line);
    padding:8px 0 8px 10px;
    background:linear-gradient(90deg, rgba(255,255,255,0.015), transparent 60%);
  }
  .history-row.won{ border-left-color:var(--green); }
  .history-row.lost{ border-left-color:var(--rust); }
  .history-row.left{ border-left-color:var(--line); opacity:.6; }
  .history-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:10px;
    margin-bottom:3px;
  }
  .history-outcome{
    font-family:'Oswald',sans-serif;
    font-size:12px; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--paper);
  }
  .history-row.won .history-outcome{ color:var(--green); }
  .history-row.lost .history-outcome{ color:var(--card-danger); }
  .history-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; color:var(--muted-2); white-space:nowrap;
  }
  .history-role{
    display:flex; align-items:center; gap:8px; flex-wrap:wrap;
    font-size:13px; color:var(--fg); margin-bottom:2px;
  }
  .history-duty{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:.5px;
    color:var(--amber);
    border:1px solid var(--line-soft); padding:1px 5px;
  }
  .history-tag{
    font-family:'IBM Plex Mono',monospace;
    font-size:9px; letter-spacing:1px; text-transform:uppercase;
    color:var(--muted-2); border:1px solid var(--line); padding:1px 4px;
  }
  .history-where{
    font-family:'IBM Plex Mono',monospace;
    font-size:10.5px; color:var(--muted-2); line-height:1.5;
  }


  /* ==================================================================
     АВАТАР В КРУГЕ И РАМКИ УРОВНЯ

     Всё на CSS, без картинок: игра остаётся одним файлом, а рамка одинаково
     чисто выглядит и в списке игроков (28 px), и в профиле (96 px). Размер
     задаётся одной переменной --av, от неё считается и толщина обода, и
     свечение — иначе на мелком размере рамка превращалась бы в кляксу.

     Внутренний круг — сам аватар. Обод рисуется на ::before и ::after, чтобы
     можно было наложить два слоя: непрерывный контур и поверх него движущийся
     блик или пунктир. Анимация только у покупных рамок: за уровень выдаются
     спокойные, за очки — заметные, и это единственное, чем они отличаются
     по «крутости», кроме цвета.
     ================================================================== */
  .av{
    --av:40px;
    width:var(--av); height:var(--av);
    flex:0 0 var(--av);
    border-radius:50%;
    position:relative;
    display:inline-flex;
    align-items:center; justify-content:center;
    background:var(--bg-0);
    box-shadow:inset 0 0 0 1px var(--line);
  }
  .av-glyph{
    /* Глиф центрируем не текстом, а флексом на всю площадь кружка. Текстовое
       центрирование учитывает ширину символа, но не его боковые отступы, а у
       разных символов они разные — отсюда и был разнобой.

       font-family задан одной строкой без цепочки намеренно: при подстановке
       из разных шрифтов у каждого символа свои метрики, и часть глифов
       ложилась ровно, а часть нет. */
    position:absolute; inset:0;
    display:flex; align-items:center; justify-content:center;
    font-size:calc(var(--av) * .48);
    line-height:1;
    user-select:none;
    letter-spacing:0;
    text-indent:0;
    text-transform:none;
    font-family:'Segoe UI Symbol', 'Apple Symbols', 'Noto Sans Symbols 2', sans-serif;
    font-weight:400;
    /* Символьные варианты вместо цветных эмодзи: у эмодзи своя ширина и своя
       базовая линия, из-за чего они выпадают из общего ряда. */
    font-variant-emoji:text;
  }
  /* Загруженная картинка обрезается по кругу и заполняет его целиком */
  .av-img{
    position:absolute; inset:0;
    width:100%; height:100%;
    border-radius:50%;
    object-fit:cover;
  }
  .av::before, .av::after{
    content:'';
    position:absolute;
    border-radius:50%;
    pointer-events:none;
  }
  .av::before{ inset:calc(var(--av) * -.075); }
  .av::after{ inset:calc(var(--av) * -.075); }

  /* --- рамки за уровень: спокойные, одноцветные --- */
  .av.f-steel::before{   border:2px solid #8a857a; }
  .av.f-copper::before{  border:2px solid #b87333; box-shadow:0 0 6px rgba(184,115,51,.4); }
  .av.f-signal::before{  border:2px dashed var(--amber); }
  .av.f-hazard::before{  border:2px solid #e8a33d; box-shadow:0 0 8px rgba(232,163,61,.45); }
  .av.f-hazard::after{   border:1px dotted #e8a33d; inset:calc(var(--av) * -.16); }
  .av.f-frost::before{   border:2px solid #9fd8e8; box-shadow:0 0 10px rgba(159,216,232,.5); }
  .av.f-circuit::before{ border:2px solid #63d8d0; }
  .av.f-circuit::after{  border:1px dashed #63d8d0; inset:calc(var(--av) * -.18); }
  .av.f-ash::before{     border:2px solid #6a6459; box-shadow:0 0 12px rgba(0,0,0,.7), 0 0 6px rgba(150,140,125,.35); }
  .av.f-beacon::before{  border:2px solid #ffd45e; box-shadow:0 0 14px rgba(255,212,94,.5); }
  .av.f-beacon::after{   border:2px solid rgba(255,212,94,.25); inset:calc(var(--av) * -.2); }
  .av.f-eclipse::before{ border:3px solid #2a2621; box-shadow:0 0 0 1px #b48ad8, 0 0 16px rgba(180,138,216,.5); }

  /* --- покупные: с движением --- */
  .av.f-ember::before{
    border:2px solid transparent;
    background:conic-gradient(from 0deg, #ff6a2f, #ffb020, #7a2b12, #ff6a2f) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:avSpin 7s linear infinite;
  }
  .av.f-flame::before{
    border:3px solid transparent;
    background:conic-gradient(from 0deg, #ff2f2f, #ff9a2f, #ffe08a, #ff2f2f) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:avSpin 3.2s linear infinite;
  }
  .av.f-flame::after{
    inset:calc(var(--av) * -.14);
    box-shadow:0 0 16px rgba(255,106,47,.65);
    animation:avPulse 2.4s ease-in-out infinite;
  }
  .av.f-toxic::before{
    border:2px solid transparent;
    background:conic-gradient(from 0deg, #8a9457, #b4ff6e, #2f4a1a, #8a9457) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:avSpin 6s linear infinite reverse;
  }
  .av.f-void::before{
    border:3px solid transparent;
    background:conic-gradient(from 0deg, #2a1a3a, #b48ad8, #06040a, #7a4ab0, #2a1a3a) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:avSpin 9s linear infinite;
  }
  .av.f-void::after{
    inset:calc(var(--av) * -.2);
    border:1px solid rgba(180,138,216,.3);
    animation:avPulse 4s ease-in-out infinite;
  }
  .av.f-gold::before{
    border:3px solid transparent;
    background:conic-gradient(from 0deg, #8a6a1a, #ffe9a0, #d4a017, #fff6d0, #8a6a1a) border-box;
    -webkit-mask:linear-gradient(#000 0 0) padding-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude;
    animation:avSpin 5s linear infinite;
  }
  .av.f-gold::after{
    inset:calc(var(--av) * -.16);
    box-shadow:0 0 18px rgba(255,214,120,.55);
  }
  @keyframes avSpin{ to{ transform:rotate(360deg); } }
  @keyframes avPulse{ 0%,100%{opacity:.45;} 50%{opacity:1;} }
  @media (prefers-reduced-motion: reduce){
    .av::before, .av::after{ animation:none !important; }
  }

  /* --- стили имени --- */
  /* Двойной класс — не опечатка: он поднимает вес правила выше, чем у
     .profile-nick и .verdict-head, которые задают свой color. Иначе градиент
     закрашивался бы сплошным цветом просто потому, что объявлен ниже. */
  .nm-amber.nm-amber{ color:var(--amber); }
  .nm-ember.nm-ember{
    background:linear-gradient(90deg,#ff2f2f,#ffb020,#ff6a2f);
    background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  .nm-toxic.nm-toxic{
    background:linear-gradient(90deg,#8a9457,#b4ff6e,#63d8d0);
    background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  .nm-frost.nm-frost{
    background:linear-gradient(90deg,#9fd8e8,#e8f6ff,#63d8d0);
    background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  .nm-gold.nm-gold{
    background:linear-gradient(90deg,#8a6a1a,#ffe9a0,#d4a017);
    background-clip:text; -webkit-background-clip:text; color:transparent; -webkit-text-fill-color:transparent;
  }
  /* Раньше тени были смещены на пиксель и при обычном кегле просто не
     читались — стиль выглядел неотличимо от «Обычного». Смещение увеличено,
     цвет насыщеннее, плюс лёгкое дрожание: помеха должна быть видна. */
  .nm-glitch.nm-glitch{
    color:var(--paper);
    text-shadow:2px 0 rgba(255,47,47,.85), -2px 0 rgba(99,216,208,.85);
    animation:nmGlitch 2.6s steps(1) infinite;
  }
  @keyframes nmGlitch{
    0%, 88%, 100%{ text-shadow:2px 0 rgba(255,47,47,.85), -2px 0 rgba(99,216,208,.85); }
    90%{ text-shadow:-3px 0 rgba(255,47,47,.9), 3px 0 rgba(99,216,208,.9); }
    94%{ text-shadow:1px -1px rgba(255,47,47,.9), -1px 1px rgba(99,216,208,.9); }
  }
  @media (prefers-reduced-motion: reduce){
    .nm-glitch.nm-glitch{ animation:none; }
  }
  /* Градиент рисуется по площади текста, а инлайновый элемент её не задаёт
     как надо при переносе строки. inline-block чинит это и не ломает поток. */
  [class*="nm-"]{ display:inline-block; }

  /* --- прогресс уровня --- */
  .lvl-row{ display:flex; align-items:center; gap:14px; margin-bottom:12px; }
  .lvl-badge{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:26px; line-height:1;
    color:var(--amber);
  }
  .lvl-badge small{
    display:block;
    font-family:'IBM Plex Mono',monospace;
    font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted-2); margin-top:3px;
  }
  .lvl-bar{ flex:1; height:5px; background:var(--line-soft); overflow:hidden; }
  .lvl-fill{ height:100%; background:var(--amber); }
  .lvl-num{ font-family:'IBM Plex Mono',monospace; font-size:10px; color:var(--muted-2); }
  .pts-chip{
    font-family:'IBM Plex Mono',monospace;
    font-size:11px; padding:4px 8px;
    border:1px solid var(--amber); color:var(--amber);
    white-space:nowrap;
  }

  /* --- достижения --- */
  .ach-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:6px; }
  .ach-cell{
    border:1px solid var(--line-soft);
    padding:8px 9px;
    opacity:.4;
  }
  .ach-cell.got{ opacity:1; border-color:var(--amber); background:rgba(200,52,42,.05); }
  .ach-name{
    font-family:'Oswald',sans-serif;
    font-size:12px; letter-spacing:1px; text-transform:uppercase;
    color:var(--paper); margin-bottom:2px;
  }
  .ach-cell.got .ach-name{ color:var(--amber); }
  .ach-desc{ font-size:10.5px; color:var(--muted-2); line-height:1.4; }
  .ach-xp{
    font-family:'IBM Plex Mono',monospace;
    font-size:9px; color:var(--muted-2); margin-top:3px;
  }

  /* --- магазин --- */
  .shop-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(112px,1fr)); gap:8px; }
  .shop-cell{
    border:1px solid var(--line-soft);
    padding:10px 6px 8px;
    text-align:center;
    cursor:pointer;
    background:transparent;
    color:var(--muted);
  }
  .shop-cell:hover{ border-color:var(--muted); }
  .shop-cell.owned{ border-color:var(--green); }
  .shop-cell.active{ border-color:var(--amber); background:rgba(200,52,42,.06); }
  .shop-cell.locked{ opacity:.45; cursor:not-allowed; }
  .shop-name{
    font-family:'Oswald',sans-serif;
    font-size:10.5px; letter-spacing:.8px; text-transform:uppercase;
    margin-top:8px; color:var(--paper);
  }
  .shop-cost{
    font-family:'IBM Plex Mono',monospace;
    font-size:9.5px; color:var(--muted-2); margin-top:2px;
  }
  .shop-cost.have{ color:var(--green); }
  .shop-preview{ display:flex; justify-content:center; }

  .support-link{
    display:block;
    text-align:center;
    font-family:'Oswald',sans-serif;
    font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    padding:12px;
    border:1px solid var(--amber);
    color:var(--amber);
    text-decoration:none;
  }
  .support-link:hover{ background:var(--amber); color:var(--bg-0); }

  .seat-lvl{
    font-family:'IBM Plex Mono', monospace;
    font-size:9px;
    letter-spacing:.5px;
    padding:1px 5px;
    margin-left:6px;
    border:1px solid var(--line);
    color:var(--muted-2);
  }
  .pname-main{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }

  .levelup{
    border:1px solid var(--amber);
    background:rgba(200,52,42,.06);
    padding:14px;
    margin-bottom:14px;
    text-align:center;
  }
  .levelup-num{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:44px; line-height:1;
    color:var(--amber);
  }
  .levelup-text{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; letter-spacing:2.5px; text-transform:uppercase;
    color:var(--muted); margin-top:5px;
  }

  .adm-row{
    display:flex; align-items:center; gap:10px;
    padding:9px 0;
    border-bottom:1px solid var(--line-soft);
    flex-wrap:wrap;
  }
  .adm-row:last-child{ border-bottom:none; }

  .vol-slider{
    -webkit-appearance:none; appearance:none;
    width:64px; height:3px; margin:0 0 0 7px; padding:0;
    background:var(--line-soft);
    border:none; outline:none; cursor:pointer;
    align-self:center;
  }
  .vol-slider::-webkit-slider-thumb{
    -webkit-appearance:none; appearance:none;
    width:11px; height:11px; border-radius:50%;
    background:var(--amber); cursor:pointer;
  }
  .vol-slider::-moz-range-thumb{
    width:11px; height:11px; border-radius:50%; border:none;
    background:var(--amber); cursor:pointer;
  }
  @media (max-width:760px){
    .vol-slider{ width:48px; }
    /* Палец толще курсора: ползунок в шапке должен быть достаточно
       крупным, чтобы в него попадать, не увеличивая саму шапку. */
    .vol-slider::-webkit-slider-thumb{ width:15px; height:15px; }
    .vol-slider::-moz-range-thumb{ width:15px; height:15px; }
  }
  @media (max-width:400px){
    .vol-slider{ width:38px; }
  }

  .verify-panel{ border-left-color:var(--amber) !important; }


  /* ---------- рамки личного дела ----------
     Рисуются на ::after поверх карточки: у .dossier своя рамка и отступы,
     и трогать их значит разъехаться со всей вёрсткой личных дел.
     pointer-events:none обязателен — иначе слой перехватывал бы нажатия
     по кнопкам внутри карточки. */
  .dossier[class*="cf-"]::after{
    content:'';
    position:absolute; inset:0;
    pointer-events:none;
    z-index:2;
  }
  .dossier.cf-brass::after{ box-shadow:inset 0 0 0 2px #b8863b; }
  .dossier.cf-signal::after{
    box-shadow:inset 0 0 0 1px var(--amber);
    border:2px dashed rgba(224,168,58,.55);
  }
  .dossier.cf-ember::after{
    box-shadow:inset 0 0 0 2px #ff6a2f, inset 0 0 22px rgba(255,106,47,.35);
    animation:cfPulse 3.4s ease-in-out infinite;
  }
  .dossier.cf-frost::after{
    box-shadow:inset 0 0 0 2px #9fd8e8, inset 0 0 20px rgba(159,216,232,.3);
  }
  .dossier.cf-toxic::after{
    box-shadow:inset 0 0 0 2px #8fbf4a, inset 0 0 20px rgba(143,191,74,.3);
    animation:cfPulse 5s ease-in-out infinite;
  }
  .dossier.cf-void::after{
    box-shadow:inset 0 0 0 2px #7a4ab0, inset 0 0 26px rgba(122,74,176,.45);
    animation:cfPulse 6s ease-in-out infinite;
  }
  .dossier.cf-gold::after{
    box-shadow:inset 0 0 0 2px #d4a017, inset 0 0 24px rgba(255,214,120,.3);
  }
  .dossier.cf-gold::before{
    content:'';
    position:absolute; inset:0;
    pointer-events:none; z-index:1;
    background:linear-gradient(135deg, rgba(255,233,160,.10), transparent 40%);
  }
  @keyframes cfPulse{ 0%,100%{opacity:.7;} 50%{opacity:1;} }
  @media (prefers-reduced-motion: reduce){
    .dossier[class*="cf-"]::after{ animation:none !important; }
  }

  /* Лоскут карточки в магазине: показывает, как рамка ляжет в игре */
  .cf-preview{
    position:relative;
    height:46px;
    background:var(--bg-0);
    border:1px solid var(--line);
    padding:8px 7px;
    display:flex; flex-direction:column; gap:5px; justify-content:center;
  }
  .cf-preview::after{ content:''; position:absolute; inset:0; pointer-events:none; }
  .cf-preview-line{ display:block; height:3px; background:var(--line); }
  .cf-preview-line.short{ width:60%; }

  .cf-preview.cf-brass::after{ box-shadow:inset 0 0 0 2px #b8863b; }
  .cf-preview.cf-signal::after{
    box-shadow:inset 0 0 0 1px var(--amber);
    border:2px dashed rgba(224,168,58,.55);
  }
  .cf-preview.cf-ember::after{
    box-shadow:inset 0 0 0 2px #ff6a2f, inset 0 0 22px rgba(255,106,47,.35);
    animation:cfPulse 3.4s ease-in-out infinite;
  }
  .cf-preview.cf-frost::after{
    box-shadow:inset 0 0 0 2px #9fd8e8, inset 0 0 20px rgba(159,216,232,.3);
  }
  .cf-preview.cf-toxic::after{
    box-shadow:inset 0 0 0 2px #8fbf4a, inset 0 0 20px rgba(143,191,74,.3);
    animation:cfPulse 5s ease-in-out infinite;
  }
  .cf-preview.cf-void::after{
    box-shadow:inset 0 0 0 2px #7a4ab0, inset 0 0 26px rgba(122,74,176,.45);
    animation:cfPulse 6s ease-in-out infinite;
  }
  .cf-preview.cf-gold::after{
    box-shadow:inset 0 0 0 2px #d4a017, inset 0 0 24px rgba(255,214,120,.3);
  }

  /* ---------- прочее ---------- */
  .stamp{
    display:inline-block;
    border:2px solid var(--rust);
    color:#eda9a4;
    font-family:'Oswald',sans-serif;
    font-weight:600;
    letter-spacing:3px;
    padding:3px 11px;
    transform:rotate(-2.5deg);
    font-size:11px;
    margin-bottom:12px;
    border-radius:0;
    text-transform:uppercase;
  }
  .linkbox{
    background:var(--bg-0);
    border:1px solid var(--line);
    padding:8px 10px;
    font-size:10.5px;
    word-break:break-all;
    color:var(--muted);
    border-radius:0;
    margin:8px 0;
    max-height:64px;
    overflow-y:auto;
  }
  .copied-msg{color:var(--green); font-size:11px; margin-left:8px;}
  details{margin-bottom:18px;}
  summary{
    cursor:pointer;
    font-family:'Oswald',sans-serif;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-size:12px;
    color:var(--muted);
  }
  details[open] summary{color:var(--amber);}
  .rules-body{font-size:12.5px; line-height:1.75; color:var(--muted); padding-top:10px;}
  .rules-body b{color:var(--paper);}
  .final-list{display:flex; flex-direction:column; gap:7px;}
  .final-item{
    background:var(--bg-2);
    border:1px solid var(--line);
    border-left:3px solid var(--green);
    padding:10px 13px;
    border-radius:0;
    font-family:'Oswald',sans-serif;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-size:14px;
  }
  .tiny{font-size:11px; color:var(--muted); line-height:1.6;}
  footer{
    text-align:center;
    color:var(--muted-2);
    font-family:'Oswald',sans-serif;
    font-size:9.5px;
    letter-spacing:2.5px;
    text-transform:uppercase;
    padding:26px 20px 10px;
    opacity:.6;
  }
  .tabs{display:flex; gap:0; margin-bottom:18px; border-bottom:1px solid var(--line);}
  .tab{
    padding:9px 16px;
    font-family:'Oswald',sans-serif;
    letter-spacing:1.5px;
    text-transform:uppercase;
    font-size:12px;
    color:var(--muted-2);
    cursor:pointer;
    border-bottom:2px solid transparent;
    margin-bottom:-1px;
    /* Со счётчиком заявок вкладка «Друзья» иначе переносит его на вторую
       строку и становится вдвое выше остальных, ломая линию подчёркивания. */
    white-space:nowrap;
  }
  .tab:hover{color:var(--muted);}
  .tab.active{color:var(--amber); border-bottom-color:var(--amber);}
  .room-badge{
    display:inline-flex;
    align-items:center;
    gap:8px;
    background:transparent;
    border:1px solid var(--amber-dim);
    padding:5px 11px;
    border-radius:0;
    font-family:'Oswald',sans-serif;
    font-size:11px;
    letter-spacing:2px;
    color:var(--amber);
  }
  .dot-live{
    width:6px; height:6px; border-radius:50%;
    background:var(--green);
    box-shadow:0 0 6px var(--green);
  }
  .code-display{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:38px;
    letter-spacing:12px;
    color:var(--amber);
    text-align:center;
    padding:16px 0 10px;
    text-indent:12px;
  }
  .claim-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:12px;
    padding:9px 0;
    border-top:1px solid var(--line-soft);
  }
  .claim-row:last-of-type{border-bottom:1px solid var(--line-soft);}
  .claim-name{
    font-family:'Oswald',sans-serif;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-size:13.5px;
  }
  .verdict-head{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:clamp(22px,4vw,32px);
    letter-spacing:2px;
    text-transform:uppercase;
    color:var(--paper);
    line-height:1.1;
    margin-bottom:10px;
  }
  .duty-list{display:flex; flex-direction:column; margin-top:4px;}
  .duty-item{
    border-top:1px solid var(--line-soft);
    padding:9px 0;
  }
  .duty-item:last-child{border-bottom:1px solid var(--line-soft);}
  .duty-item.taken{opacity:.45;}
  .duty-head{
    display:flex; justify-content:space-between; align-items:baseline; gap:10px;
    font-family:'Oswald',sans-serif;
    letter-spacing:1.2px;
    text-transform:uppercase;
    font-size:13px;
    color:var(--paper);
    margin-bottom:3px;
  }
  .duty-item.taken .duty-head{color:var(--muted);}
  .error-msg{color:#eda9a4; font-size:12px; margin-top:6px;}
  /* ---------- крупные экраны: интерфейс дышит, а не жмётся мелким кеглем ---------- */
  @media(min-width:1400px){
    body{font-size:15px;}
    h1.brand{font-size:34px;}
    .subbrand{font-size:11px;}
    .hazard{height:30px; font-size:10.5px;}
    .col{padding:24px 34px 0 0;}
    .rail{padding:24px 0 0 28px;}
    .panel{padding-left:18px; margin-bottom:28px;}
    .panel::before{font-size:11.5px; letter-spacing:3px;}
    .panel p{font-size:14px;}
    .rail .panel{font-size:13.5px;}
    .rail .panel p{font-size:13px;}
    .tiny{font-size:12.5px;}
    .turn-banner{font-size:16px; padding:15px 18px; margin-bottom:28px;}
    .phase-pill{font-size:11px; padding:5px 12px;}
    .roster{grid-template-columns:repeat(auto-fill, minmax(292px,1fr)); gap:15px;}
    .dossier{padding:16px 17px 18px;}
    .dossier .pname{font-size:18px;}
    .trait-row{font-size:13px; min-height:30px;}
    .trait-cat{font-size:11px; min-width:122px;}
    .alert-ticker{font-size:13.5px;}
    .bunker-info{font-size:13px;}
    .feed-item{font-size:12.5px;}
    .feed-list{max-height:420px;}
    button{font-size:13.5px; padding:12px 20px;}
    .cat-btn-grid{grid-template-columns:repeat(auto-fill, minmax(205px,1fr)); gap:9px;}
    .cat-btn .bk{font-size:12px;}
    .cat-btn .bv{font-size:11px;}
    .own-line{font-size:12px;}
    .own-line .k{font-size:10px; min-width:100px;}
    .own-strip-grid{grid-template-columns:repeat(auto-fit, minmax(250px,1fr));}
    .duty-head{font-size:14px;}
    .final-item{font-size:15px;}
    .rules-body{font-size:13.5px;}
    details.panel > summary{font-size:12.5px;}
    input[type=text], select{font-size:14.5px; padding:11px 13px;}
  }
  @media(min-width:1800px){
    body{font-size:16px;}
    .roster{grid-template-columns:repeat(auto-fill, minmax(320px,1fr));}
    .trait-row{font-size:13.5px;}
    .trait-cat{min-width:130px;}
  }

  /* ---------- вход в профиль на главной ---------- */
  .landing-account{ margin-top:6px; }
  .account-chip{
    display:inline-flex; align-items:center; gap:8px;
    font-family:'Oswald',sans-serif;
    font-size:12px; letter-spacing:1.5px; text-transform:uppercase;
    padding:9px 16px;
    border:1px solid var(--line); background:transparent; color:var(--muted);
  }
  .account-chip:hover{ border-color:var(--amber); color:var(--paper); background:transparent; }
  .chip-av{ font-size:15px; }
  .chip-sub{ color:var(--muted-2); }

  /* ---------- окно обновлений ---------- */
  .patchnotes{
    max-width:760px;
    margin:10px auto 0;
    padding:0 20px 40px;
  }
  .patch-head{
    display:flex; align-items:baseline; justify-content:space-between; gap:12px;
    border-bottom:1px solid var(--line);
    padding-bottom:8px; margin-bottom:14px;
  }
  .patch-title{
    font-family:'Oswald',sans-serif;
    font-size:12px; letter-spacing:3px; text-transform:uppercase; color:var(--amber);
  }
  .patch-current{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; color:var(--muted-2); white-space:nowrap;
  }
  .patch-scroll{
    max-height:340px;
    /* scroll вместо auto: направляющая с ромбом видна всегда, как в инструктаже,
       а не появляется рывком только при переполнении. Ширина фирменной полосы
       14px, поэтому нужен соответствующий отступ, иначе текст в неё упирается. */
    overflow-y:scroll;
    padding-right:14px;
  }
  .patch-entry{
    border-left:2px solid var(--line);
    padding:0 0 0 14px;
    margin-bottom:20px;
  }
  .patch-entry.latest{ border-left-color:var(--amber); }
  .patch-entry-head{
    display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; margin-bottom:8px;
  }
  .patch-ver{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:15px; color:var(--paper); letter-spacing:1px;
  }
  .patch-entry.latest .patch-ver{ color:var(--amber); }
  .patch-name{
    font-family:'Oswald',sans-serif;
    font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--muted);
  }
  .patch-date{
    font-family:'IBM Plex Mono',monospace;
    font-size:10px; color:var(--muted-2); margin-left:auto; white-space:nowrap;
  }
  .patch-list{ list-style:none; margin:0; padding:0; }
  .patch-item{
    display:flex; gap:9px; align-items:baseline;
    font-size:12.5px; line-height:1.6; color:var(--muted);
    padding:3px 0;
  }
  .patch-kind{
    flex:0 0 auto;
    font-family:'Oswald',sans-serif;
    font-size:8.5px; letter-spacing:1.2px;
    border:1px solid var(--line); padding:1px 5px;
    color:var(--muted-2); white-space:nowrap;
  }
  .patch-item.kind-feature .patch-kind{ color:var(--turn-green); border-color:var(--turn-green); }
  .patch-item.kind-fix .patch-kind{ color:var(--amber); border-color:var(--amber-dim); }
  .patch-item.kind-balance .patch-kind{ color:var(--neon); border-color:var(--neon); }
  .patch-text{ flex:1 1 auto; }

  /* ---------- профиль и статистика ---------- */
  .profile-head{ display:flex; align-items:center; gap:16px; }
  .profile-avatar{
    width:64px; height:64px; flex:0 0 64px;
    border:2px solid var(--line);
    display:flex; align-items:center; justify-content:center;
    font-size:30px;
  }
  .profile-nick{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:22px; text-transform:uppercase; letter-spacing:1px; color:var(--paper);
    margin-bottom:4px;
  }
  .avatar-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(48px,1fr));
    gap:7px; margin-bottom:6px;
  }
  .avatar-cell{
    aspect-ratio:1/1;
    display:flex; align-items:center; justify-content:center;
    font-size:22px; padding:0;
    border:1px solid var(--line); background:var(--bg-0);
    letter-spacing:0;
  }
  .avatar-cell:hover{ border-color:var(--muted); background:var(--bg-2); }
  .avatar-cell.active{
    border-color:var(--amber);
    box-shadow:0 0 0 1px var(--amber) inset;
    background:var(--bg-2);
  }
  .stat-grid{
    display:grid; grid-template-columns:repeat(auto-fit, minmax(120px,1fr));
    gap:8px; margin-bottom:16px;
  }
  .stat-cell{
    border:1px solid var(--line); border-top:2px solid var(--line);
    background:var(--bg-0); padding:12px 10px; text-align:center;
  }
  .stat-cell.accent{ border-top-color:var(--amber); }
  .stat-value{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:26px; color:var(--paper); line-height:1;
  }
  .stat-cell.accent .stat-value{ color:var(--amber); }
  .stat-label{
    font-family:'Oswald',sans-serif;
    font-size:9px; letter-spacing:1.5px; text-transform:uppercase;
    color:var(--muted-2); margin-top:6px;
  }
  .stat-list{ display:flex; flex-direction:column; }
  .stat-line{
    display:flex; justify-content:space-between; gap:12px;
    padding:7px 0; border-bottom:1px solid var(--line-soft);
    font-size:12px;
  }
  .stat-line .k{ color:var(--muted); }
  .stat-line .v{ font-family:'IBM Plex Mono',monospace; color:var(--paper); }

  /* ---------- плавающий док связи ---------- */
  .comm-dock{
    position:fixed; right:18px; bottom:18px; z-index:40;
    width:310px; max-width:calc(100vw - 36px);
    display:flex; flex-direction:column; gap:8px;
    pointer-events:none;
  }
  .comm-dock > *{ pointer-events:auto; }
  .comm-voice, .comm-chat{
    background:var(--panel);
    border:1px solid var(--line);
    border-left:2px solid var(--amber);
    padding:10px 12px;
    box-shadow:0 6px 22px rgba(0,0,0,.55);
  }
  .comm-head{
    display:flex; align-items:center; gap:8px;
  }
  .comm-head.clickable{ cursor:pointer; }
  /* Свёрнутый док: только иконка, панели скрыты */
  .comm-dock.collapsed{ left:auto; width:auto; }
  .comm-dock.collapsed .comm-voice,
  .comm-dock.collapsed .comm-chat{ display:none; }
  .comm-dock:not(.collapsed) .comm-launcher{ display:none; }
  .comm-launcher{
    position:relative;
    align-self:flex-end;
    width:52px; height:52px;
    padding:0;
    display:flex; align-items:center; justify-content:center;
    background:var(--panel);
    border:1px solid var(--amber);
    box-shadow:0 6px 22px rgba(0,0,0,.55);
    cursor:pointer;
  }
  .comm-launcher:hover{ background:var(--bg-2); }
  .comm-launcher-glyph{ font-size:22px; line-height:1; }
  /* Счётчик и микрофон сидят на самой иконке — их видно, не разворачивая док */
  .chat-badge.launcher-badge{
    position:absolute; top:-6px; right:-6px;
    min-width:16px; padding:1px 4px;
  }
  .launcher-mic{
    position:absolute; bottom:-7px; right:-7px;
    font-size:10px; line-height:1;
    background:var(--bg-0); border:1px solid var(--turn-green);
    padding:2px 3px;
  }
  .launcher-mic.off{ border-color:var(--rust); opacity:.75; }
  /* Кнопка «свернуть» в шапке панелей */
  .comm-collapse{
    background:transparent; border:none; border-radius:0;
    color:var(--muted); cursor:pointer;
    font-family:'Oswald',sans-serif; font-size:15px; line-height:1;
    padding:0 4px; letter-spacing:0;
  }
  .comm-collapse:hover{ background:transparent; color:var(--paper); }
  .comm-title{
    font-family:'Oswald',sans-serif;
    font-size:10px; letter-spacing:2px; text-transform:uppercase; color:var(--amber);
    flex:1 1 auto;
  }
  .comm-toggle{ color:var(--muted); font-size:11px; }
  .chat-badge{
    background:var(--card-danger); color:#fff;
    font-family:'Oswald',sans-serif; font-size:9px;
    padding:1px 6px; min-width:16px; text-align:center;
  }
  .pname-main{ display:flex; align-items:center; gap:7px; min-width:0; }
  .pname-av{ font-size:15px; line-height:1; flex:0 0 auto; }
  .voice-state{
    font-family:'Oswald',sans-serif; font-size:8.5px; letter-spacing:1px;
    color:var(--muted-2); margin-left:auto; white-space:nowrap;
  }
  /* ---------- ожидание сбора группы ---------- */
  .lobby-progress{ display:flex; align-items:center; gap:10px; }
  .lobby-count{
    font-family:'Russo One','Oswald',sans-serif;
    font-size:18px; color:var(--amber); white-space:nowrap; letter-spacing:1px;
  }
  .lobby-bar{
    flex:1; height:3px; background:var(--line-soft); position:relative; overflow:hidden;
  }
  .lobby-bar i{
    display:block; height:100%; background:var(--amber);
    box-shadow:0 0 6px rgba(200,52,42,.7);
    transition:width .4s ease;
  }
  .lobby-waiting{ display:flex; flex-direction:column; gap:5px; }
  .lobby-person{
    display:flex; align-items:center; gap:8px;
    font-family:'Oswald',sans-serif;
    font-size:13px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  }
  .lobby-dot{
    width:6px; height:6px; border-radius:50%; flex:0 0 6px;
    background:var(--muted-2);
    animation:lobbyPulse 1.6s ease-in-out infinite;
  }
  @keyframes lobbyPulse{
    0%,100%{ opacity:.25; }
    50%{ opacity:1; }
  }
  @media (prefers-reduced-motion: reduce){ .lobby-dot{ animation:none; opacity:.7; } }

  .claim-identity{
    display:flex; flex-direction:column; gap:2px;
    border-left:2px solid var(--card-own);
    background:#191510;
    padding:10px 12px;
    margin:10px 0 14px;
  }
  .claim-identity .claim-id-av{ font-size:18px; }
  .claim-identity input[type=text]{ margin-bottom:6px; }

  .seat-reserved{
    font-family:'Oswald',sans-serif;
    font-size:8.5px; letter-spacing:1.2px; text-transform:uppercase;
    color:var(--neon); border:1px solid var(--neon);
    padding:1px 5px; white-space:nowrap; margin-left:auto;
  }
  .lobby-person .seat-reserved{ margin-left:8px; }

  /* ---------- всплывающее приглашение ---------- */
  .invite-toasts{
    position:fixed; top:14px; left:50%; transform:translateX(-50%);
    z-index:70; display:flex; flex-direction:column; gap:8px;
    width:360px; max-width:calc(100vw - 24px);
  }
  .invite-toast{
    background:#1a1210;
    border:1px solid var(--amber-dim);
    border-left:3px solid var(--amber);
    padding:12px 14px;
    box-shadow:0 10px 30px rgba(0,0,0,.7);
    animation:fadeInUp .3s ease both;
  }
  .invite-toast-head{ margin-bottom:6px; }
  .invite-toast-tag{
    font-family:'Oswald',sans-serif;
    font-size:9.5px; letter-spacing:2px; text-transform:uppercase; color:var(--amber);
  }
  .invite-toast-body{ font-size:12.5px; line-height:1.55; color:var(--paper); }
  .invite-toast-body b{ color:var(--amber); }
  @media(max-width:700px){
    .invite-toasts{ top:8px; width:auto; left:10px; right:10px; transform:none; }
  }

  .loading-line{
    font-family:'Oswald',sans-serif;
    letter-spacing:1.5px; font-size:15px; color:var(--paper);
  }
  .loading-line b{ color:var(--amber); }
  .comm-btn{
    font-size:9.5px; padding:6px 9px; letter-spacing:1px;
  }
  .comm-voice .comm-btn{ font-size:9px; padding:6px 8px; }
  /* Кнопка подключения растягивается на всю ширину панели: иначе вокруг неё
     оставалось много пустого места и рамка казалась несоразмерно большой. */
  .comm-join{
    display:block; width:100%;
    margin-top:8px;
    padding:9px 10px; font-size:10px;
  }

  /* ---------- кликабельное лого и виджет профиля в шапке ---------- */
  .mark{ cursor:pointer; text-decoration:none; color:inherit; }
  .mark:hover h1.brand{ color:var(--amber); }
  .header-right{ display:flex; align-items:flex-end; gap:14px; }
  .acct-widget{ position:relative; }
  .acct-trigger{
    display:flex; align-items:center; gap:8px;
    background:transparent; border:1px solid var(--line);
    padding:7px 11px; color:var(--muted);
    font-family:'Oswald',sans-serif; font-size:10.5px;
    letter-spacing:1.5px; text-transform:uppercase;
  }
  .acct-trigger:hover{ border-color:var(--amber); color:var(--paper); background:transparent; }
  .acct-av{ font-size:15px; line-height:1; }
  .acct-menu{
    position:absolute; right:0; top:calc(100% + 6px);
    min-width:190px; z-index:60;
    background:#151513;
    background-color:var(--panel);
    border:1px solid var(--line);
    border-left:2px solid var(--amber);
    box-shadow:0 8px 24px rgba(0,0,0,.75);
    display:none; flex-direction:column;
    backdrop-filter:none;
  }
  .acct-menu.open{ display:flex; }
  .acct-menu-head{
    padding:10px 12px; border-bottom:1px solid var(--line-soft);
    font-size:11px; color:var(--muted);
  }
  .acct-menu-head b{ color:var(--paper); display:block; font-family:'Oswald',sans-serif;
    letter-spacing:1px; text-transform:uppercase; font-size:13px; margin-bottom:2px; }
  .acct-item{
    text-align:left; background:transparent; border:none; border-radius:0;
    padding:10px 12px; color:var(--muted);
    font-family:'Oswald',sans-serif; font-size:11px;
    letter-spacing:1.5px; text-transform:uppercase;
    border-bottom:1px solid var(--line-soft);
  }
  .acct-item:last-child{ border-bottom:none; }
  .acct-item:hover{ background:var(--bg-2); color:var(--paper); }
  .acct-item.danger-item:hover{ background:var(--rust); color:#fff; }
  /* Счётчик нерассмотренных заявок в друзья. Стоит там же, где человек и
     станет их разбирать, — у пункта «Друзья» и у одноимённой вкладки. */
  .req-badge{
    display:inline-block; min-width:16px; margin-left:7px; padding:1px 5px;
    background:var(--amber); color:var(--bg-0);
    font-family:'Oswald',sans-serif; font-size:10px;
    letter-spacing:0; text-align:center; vertical-align:middle;
  }

  /* ---------- поиск игры: список открытых комнат ---------- */
  .game-list{ display:flex; flex-direction:column; margin-top:10px; }
  .game-row{
    display:flex; align-items:center; gap:12px;
    padding:10px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .game-row:last-child{ border-bottom:none; }
  .game-info{ display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
  .game-host{
    font-family:'Oswald',sans-serif; font-size:14px;
    letter-spacing:1px; text-transform:uppercase; color:var(--paper);
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .game-meta{ font-size:11px; color:var(--muted-2); }
  /* Переключатель «кто может войти» в форме создания */
  .pub-toggle{ margin:14px 0 4px; }

  /* ---------- возврат в текущую партию ---------- */
  .resume-bar{
    display:flex; align-items:center; gap:12px; flex-wrap:wrap;
    justify-content:center;
    border:1px solid var(--amber-dim); border-left:3px solid var(--amber);
    background:rgba(200,52,42,.07);
    padding:11px 16px; margin-top:14px;
  }
  .resume-text{ font-size:12px; color:var(--paper); }
  .resume-text b{ color:var(--amber); font-family:'IBM Plex Mono',monospace; letter-spacing:2px; }

  /* ---------- друзья и приглашения ---------- */
  .friend-list{ display:flex; flex-direction:column; }
  .friend-row{
    display:flex; align-items:center; gap:10px;
    padding:8px 0; border-bottom:1px solid var(--line-soft);
  }
  .friend-av{ font-size:17px; flex:0 0 auto; }
  .friend-nick{
    flex:1 1 auto; min-width:0;
    font-family:'Oswald',sans-serif; font-size:13px;
    letter-spacing:1px; text-transform:uppercase; color:var(--paper);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .friend-row button{ font-size:9.5px; padding:6px 9px; letter-spacing:1px; }
  .invite-card{
    border:1px solid var(--amber-dim); border-left:3px solid var(--amber);
    background:rgba(200,52,42,.07);
    padding:10px 12px; margin-bottom:8px;
    display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .invite-card .inv-text{ flex:1 1 auto; font-size:12px; color:var(--paper); }
  .invite-card .inv-text b{ color:var(--amber); font-family:'IBM Plex Mono',monospace; letter-spacing:2px; }
  .invite-card button{ font-size:9.5px; padding:6px 10px; }
  .voice-list{ display:flex; flex-direction:column; gap:4px; margin-top:4px; }
  .voice-person{
    display:flex; align-items:center; gap:7px;
    font-size:11.5px; color:var(--muted);
  }
  .voice-person.me{ color:var(--paper); }
  .voice-dot{
    width:7px; height:7px; border-radius:50%;
    background:var(--line); flex:0 0 7px;
  }
  .voice-dot.on{ background:var(--turn-green); box-shadow:0 0 6px var(--turn-green); }
  .voice-muted{
    font-family:'Oswald',sans-serif; font-size:8.5px; letter-spacing:1px;
    color:var(--card-danger); border:1px solid var(--card-danger); padding:0 4px;
  }
  .chat-log{
    max-height:260px; overflow-y:auto;
    margin:10px 0 8px;
    display:flex; flex-direction:column; gap:8px;
  }
  .chat-msg{ border-left:2px solid var(--line-soft); padding-left:8px; }
  .chat-msg.mine{ border-left-color:var(--amber); }
  .chat-meta{ display:flex; align-items:baseline; gap:6px; margin-bottom:2px; }
  .chat-av{ font-size:12px; }
  .chat-name{
    font-family:'Oswald',sans-serif;
    font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--muted);
  }
  .chat-msg.mine .chat-name{ color:var(--amber); }
  .chat-time{
    font-family:'IBM Plex Mono',monospace;
    font-size:9px; color:var(--muted-2); margin-left:auto;
  }
  .chat-body{
    font-size:12px; line-height:1.5; color:var(--paper);
    word-break:break-word; overflow-wrap:anywhere;
  }
  .chat-form{ display:flex; gap:6px; }
  .chat-form input[type=text]{
    flex:1 1 auto; margin-bottom:0; font-size:12px; padding:8px 10px;
  }
  @media(max-width:700px){
    .comm-dock{ right:10px; left:10px; bottom:10px; width:auto; }
    /* Свёрнутому доку ширина во весь экран ни к чему: сама иконка прижата
       вправо, а растянутый контейнер лишь мешает отладке и будущим правкам. */
    .comm-dock.collapsed{ left:auto; }
    .chat-log{ max-height:180px; }
    .patchnotes{ padding:0 16px 30px; }
  }

  /* экраны без каркаса (ошибка конфига, комната не найдена) */
  main > .panel, main > details{margin-top:24px;}
  @media(max-width:700px){
    header.top{
      flex-direction:column;
      align-items:flex-start;
      gap:12px;
      padding:14px 16px 12px;
    }
    .subbrand{text-align:left;}
    main{padding:0 16px;}
    .hazard{font-size:8.5px; letter-spacing:2px;}
  }
  .config-warning{
    background:transparent;
    border:1px solid var(--rust);
    border-left:3px solid var(--rust);
    color:#eec8c0;
    padding:14px;
    font-size:12.5px;
    line-height:1.7;
    border-radius:0;
  }