/* =====================================================================
   frost.css — ШАР «МУТНЕ СКЛО».

   Що просив власник дослівно: «були таблички напівпрозорі (мутні), наводив
   курсором — і був ефект наведення, теж трішки мутний»; «темне золото виглядає
   дешево, ніби із 2000-х». Тому тут навпаки, ніж у dark-gold.css:

   - НІЯКИХ суцільних коричневих пластин. Панель — це скло: крізь неї видно залу.
   - Акцент — холодна сталь тонкою рискою: обруч, цифра, місце в табло. Не заливка.
   - Наведення — не стрибок і не блиск, а те саме скло, що на мить світлішає
     і густішає. Такий відгук помічають рукою, а не оком, і він не набридає.
   - Кольори холодніші за золоті: тепло дає сама фотографія зали, а не інтерфейс.
     Саме змішування теплого скла з теплим фото і читалось як «дешево».

   Підключається ПІСЛЯ css/home.css і БЕЗ dark-gold.css.
   ===================================================================== */

:root{
  /* СКЛА МАЙЖЕ НЕ ВИДНО — і це головне.
     У спокої панель — це ледь помітне затемнення повітря: текст читається, а зала
     позаду лишається залою. Мутність не стан панелі, а ВІДПОВІДЬ НА РУКУ: підвів
     курсор — скло проявилось, забрав — розтануло. Саме цього просив власник.
     Через це сторінка перестає бути набором коробок: у спокої на ній лише текст. */
  --gl-1: rgba(10,12,17,0.16);      /* спокій — майже нічого */
  --gl-2: rgba(14,17,23,0.42);      /* наведення — ось тут скло проявляється */
  --gl-3: rgba(18,22,30,0.58);      /* натиснуте */
  --blur: 14px;                     /* у спокої розмиття тихе */
  --blur-hot: 26px;                 /* під рукою — густе */

  /* Краї. Одна волосина світла згори — і все. Повний кант навколо читався як
     намальована рамка, тобто саме як «дешево». Форму тримає не рамка, а тінь. */
  --edge-top: rgba(255,255,255,0.075);
  --edge-all: rgba(255,255,255,0.028);
  --edge-hot: rgba(255,255,255,0.16);

  /* АКЦЕНТ — холодна сталь, а не золото. Тепло на сторінці дає сама фотографія
     зали; коли інтерфейс теж теплий, усе злипається в одну руду пляму — саме це
     й читалось як «дешево». Холодна риска поруч із теплим вогнем, навпаки,
     розділяє плани: скло попереду, зала позаду.
     Використовується ТІЛЬКИ як тонка лінія, цифра або підпис. Площин нема. */
  --steel:   #8ea3bd;                    /* сталь: обручі, риски, перше місце */
  --steel-2: #cfdcec;                    /* світліша сталь: титул, своє ім'я */
  --steel-line: rgba(142,163,189,0.50);
  --steel-glow: rgba(180,205,235,0.16);

  --ink: #eceae4;
  --ink-2: rgba(236,234,228,0.74);
  --ink-3: rgba(236,234,228,0.46);
}

/* ---------- ПАНЕЛІ ---------- */
/* Одна форма на всі картки. Скло, тонкий світлий кант, м'яка тінь під ним. */
/* ФОРМА. Округлення 18px разом із рамкою давало «бульбашку» — саме те, що читалось
   як дешеве. Тепер 10px: кут ледь пом'якшений, а не обкатаний. Рамки нема зовсім,
   край тримає одна волосина світла згори й м'яка широка тінь під низом. */
.card{
  background-color: var(--gl-1);
  backdrop-filter: blur(var(--blur)) saturate(1.06);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.06);
  border-radius: 10px;
  padding: 17px 19px 18px;
  box-shadow:
    inset 0 1px 0 var(--edge-top),
    0 24px 60px rgba(0,0,0,0.34);
  transition: background .26s ease, backdrop-filter .26s ease, box-shadow .26s ease, transform .26s ease;
}
/* Заголовок відділяє волосина, а не рамка картки: структура є, коробки нема. */
.card h2{
  padding-bottom: 11px;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}
/* ОСЬ ТОЙ САМИЙ ЕФЕКТ НАВЕДЕННЯ. Скло густішає й світлішає по канту, картка
   підіймається на волосину. Нічого не стрибає й не блимає. */
@media (hover: hover){
  .card:hover{
    background-color: var(--gl-2);
    backdrop-filter: blur(var(--blur-hot)) saturate(1.16);
    -webkit-backdrop-filter: blur(var(--blur-hot)) saturate(1.16);
    box-shadow:
      inset 0 1px 0 var(--edge-hot),
      inset 0 0 0 1px rgba(255,255,255,0.055),
      0 30px 70px rgba(0,0,0,0.42);
    transform: translateY(-2px);
  }
}
.card h2{ color: var(--ink-2); letter-spacing: .11em; }
.card h2 small{ color: var(--ink-3); }

/* ---------- ЦЕНТР ---------- */
.name-input{
  font-size: 42px; font-weight: 800; letter-spacing: -.01em; color: var(--ink);
  text-shadow: 0 2px 30px rgba(0,0,0,.62);
}
.hero .lbl{ color: var(--ink-3); letter-spacing: .18em; font-size: 10px; }
.hero-title{ color: var(--steel-2); font-size: 13px; letter-spacing: .03em; text-shadow: 0 2px 14px rgba(0,0,0,.7); }

/* Іконка гравця: скло з тонким сталевим обручем. Обруч — це риска, не оправа. */
.hero-emblem{
  width: 132px; height: 132px;
  background-color: var(--gl-1);
  backdrop-filter: blur(var(--blur)) saturate(1.1);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.1);
  box-shadow:
    inset 0 1px 0 var(--edge-top),
    0 0 0 1px rgba(142,163,189,.32),
    0 24px 56px rgba(0,0,0,.5);
  color: rgba(236,234,228,0.42);
  transition: background .22s ease, box-shadow .22s ease, color .22s ease;
}
@media (hover: hover){
  .hero-emblem:hover{
    background-color: var(--gl-2);
    color: rgba(236,234,228,0.62);
    box-shadow: inset 0 1px 0 var(--edge-hot), 0 0 0 1px rgba(207,220,236,.85), 0 26px 60px rgba(0,0,0,.6);
  }
}

/* Кола статистики — те саме скло, менше й тихіше. Без насічок і без оправ. */
.stat{
  width: 84px; height: 84px;
  background-color: var(--gl-1);
  backdrop-filter: blur(16px) saturate(1.12);
  -webkit-backdrop-filter: blur(16px) saturate(1.12);
  box-shadow: inset 0 1px 0 var(--edge-top), 0 14px 32px rgba(0,0,0,.30);
  transition: background .26s ease, backdrop-filter .26s ease, box-shadow .26s ease, transform .26s ease;
}
@media (hover: hover){
  .stat:hover{
    background-color: var(--gl-2);
    backdrop-filter: blur(24px) saturate(1.14);
    -webkit-backdrop-filter: blur(24px) saturate(1.14);
    box-shadow: inset 0 1px 0 var(--edge-hot), inset 0 0 0 1px rgba(255,255,255,.05), 0 18px 38px rgba(0,0,0,.36);
    transform: translateY(-2px);
  }
}
.stat b{ font-size: 23px; color: var(--ink); }
.stat span{ color: var(--ink-3); font-size: 8.5px; letter-spacing: .07em; }

.last-game{
  background-color: var(--gl-1);
  backdrop-filter: blur(var(--blur));
  -webkit-backdrop-filter: blur(var(--blur));
  box-shadow: inset 0 1px 0 var(--edge-top);
  color: var(--ink-2);
}
.last-game.win{ box-shadow: inset 0 1px 0 var(--edge-top), inset 2px 0 0 rgba(159,185,138,.55); }
.last-game.loss{ box-shadow: inset 0 1px 0 var(--edge-top), inset 2px 0 0 rgba(217,133,122,.5); }

/* ---------- КНОПКИ ---------- */
/* Три сходинки, але всі три — скло. Різниця в густоті й у канті, а не в матеріалі:
   саме різні матеріали й робили сторінку строкатою. */
/* Кнопка — та сама тиха поверхня. Округлення 14px замість пілюлі: пілюля поруч із
   прямокутними картками читалась як чужа деталь. */
.btn{
  background-color: var(--gl-1);
  border-radius: 14px;
  backdrop-filter: blur(var(--blur)) saturate(1.06);
  -webkit-backdrop-filter: blur(var(--blur)) saturate(1.06);
  box-shadow: inset 0 1px 0 var(--edge-top), 0 16px 36px rgba(0,0,0,.30);
  color: var(--ink);
  transition: background .2s ease, backdrop-filter .2s ease, box-shadow .2s ease, transform .12s ease;
}
@media (hover: hover){
  .btn:hover{
    background-color: var(--gl-2);
    backdrop-filter: blur(var(--blur-hot)) saturate(1.16);
    -webkit-backdrop-filter: blur(var(--blur-hot)) saturate(1.16);
    box-shadow: inset 0 1px 0 var(--edge-hot), inset 0 0 0 1px rgba(255,255,255,.055), 0 24px 48px rgba(0,0,0,.38);
    transform: translateY(-2px);
  }
}
/* НАТИСК. Мусить іти ПІСЛЯ :hover: у home.css лежить .btn:active{transform:none}
   з тією ж вагою, і без цього правила натиск під курсором не видно взагалі. */
.btn:active{
  background-color: var(--gl-3);
  transform: translateY(1px) scale(.995);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.05), 0 6px 16px rgba(0,0,0,.38);
}
.btn small{ color: var(--ink-3); font-size: 11.5px; }

/* Головна кнопка — те саме скло, але світле: не золота плитка, а підсвічене скло.
   Через це вона головна, і при цьому не з іншої гри. */
.btn.primary{
  color: #0f1218;
  border-radius: 14px;
  background: linear-gradient(180deg, rgba(246,250,255,0.94) 0%, rgba(213,224,238,0.90) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    inset 0 0 0 1px rgba(255,255,255,.5),
    0 18px 44px rgba(0,0,0,.42),
    0 0 34px var(--steel-glow);
}
@media (hover: hover){
  .btn.primary:hover{
    background: linear-gradient(180deg, #fdfeff 0%, #e2ebf6 100%);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,1),
      inset 0 0 0 1px rgba(255,255,255,.6),
      0 24px 54px rgba(0,0,0,.48),
      0 0 46px rgba(180,205,235,.24);
    transform: translateY(-2px);
  }
}
.btn.primary:active{
  background: linear-gradient(180deg, #e6edf6 0%, #cfdae8 100%);
  transform: translateY(1px) scale(.995);
}
.btn.primary small{ color: rgba(15,18,24,.60); }

/* Друга кнопка відрізняється від третьої лише тонкою сталевою рискою по канту */
#playFriends{ box-shadow: inset 0 1px 0 var(--edge-top), inset 0 0 0 1px rgba(142,163,189,.30), 0 16px 36px rgba(0,0,0,.30); }
@media (hover: hover){
  #playFriends:hover{ box-shadow: inset 0 1px 0 var(--edge-hot), inset 0 0 0 1px rgba(207,220,236,.55), 0 24px 48px rgba(0,0,0,.38); }
}

.gear, .chatsend, .sound, .coin{
  background-color: var(--gl-1);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: inset 0 1px 0 var(--edge-top);
  transition: background .2s ease, box-shadow .2s ease, color .2s ease;
}
@media (hover: hover){
  .gear:hover, .chatsend:hover, .sound:hover, .coin:hover{
    background-color: var(--gl-2); color: var(--ink);
    box-shadow: inset 0 1px 0 var(--edge-hot), inset 0 0 0 1px rgba(255,255,255,.05);
  }
}
.chatsend:hover{ color: var(--steel-2); }

/* ---------- ДРІБНЕ ---------- */
/* Стрічка літопису — не картка, а рядок: жодного тла, лише волосина знизу.
   Через це вона перестає бути ще однією табличкою вгорі сторінки. */
.ticker{
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-radius: 0;
  box-shadow: inset 0 -1px 0 rgba(255,255,255,0.055);
}
.ticker-tag{ color: var(--ink-3); }
.brow:first-child .n{ color: var(--steel); }
.brow .who.me{ color: var(--steel-2); }
.total{
  background: linear-gradient(180deg, #eaf1fa 0%, var(--steel) 120%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.chatbar input{
  background: rgba(255,255,255,0.045);
  box-shadow: inset 0 0 0 1px var(--edge-all);
}
.chatbar input:focus{ box-shadow: inset 0 0 0 1px var(--steel-line); }
.cl b{ color: var(--ink-3); }
.cl span{ color: var(--ink-2); }
.cl.me b{ color: var(--steel-2); }

/* Панель налаштувань — те саме скло, щоб вікно не було з іншої сторінки */
.panel-body{
  background: rgba(14,17,23,0.86);
  backdrop-filter: blur(26px) saturate(1.15);
  -webkit-backdrop-filter: blur(26px) saturate(1.15);
  box-shadow: inset 0 1px 0 var(--edge-top), inset 0 0 0 1px var(--edge-all), 0 40px 90px rgba(0,0,0,.6);
  border-radius: 20px;
}

/* Завіса над фотографією: трохи легша за початкову, бо скло вже дає читабельність.
   Саме завдяки цьому крізь панелі видно залу, а не сірий прямокутник. */
.veil{
  background:
    radial-gradient(120% 80% at 50% 110%, rgba(9,10,14,0.58) 0%, rgba(9,10,14,0) 62%),
    linear-gradient(180deg, rgba(9,10,14,0.52) 0%, rgba(9,10,14,0.14) 32%, rgba(9,10,14,0.12) 62%, rgba(9,10,14,0.58) 100%);
}

/* Скло коштує кадрів. Там, де рух вимкнено, лишаємо вигляд, але прибираємо переходи. */
@media (prefers-reduced-motion: reduce){
  .card, .stat, .btn, .hero-emblem, .gear, .chatsend, .sound, .coin{ transition: none; }
  .card:hover, .stat:hover, .btn:hover{ backdrop-filter: blur(var(--blur)); -webkit-backdrop-filter: blur(var(--blur)); }
  .card:hover, .stat:hover, .btn:hover, .btn.primary:hover{ transform: none; }
}

/* Телефон: скло лишається, розміри сідають */
@media (max-width: 820px){
  .name-input{ font-size: 30px; }
  .hero-emblem{ width: 108px; height: 108px; }
  .stat{ width: 72px; height: 72px; }
  .stat b{ font-size: 19px; }
}

/* Знак і назва в шапці. У розмітці кольори вписані прямо в SVG, тому перекриваємо тут:
   лишити золотий ромб над холодним інтерфейсом означало б лишити ту саму руду пляму. */
.brand-mark path[stroke]{ stroke: var(--steel); }
.brand-mark path[fill]:not([fill="none"]){ fill: var(--steel-2); }
.brand-name{ color: var(--ink); }
.tagline{ color: var(--ink-3); }
.hero-emblem .av-edit{ color: var(--steel-2); }


/* =====================================================================
   ПІДСВІТКА ЗА КУРСОРОМ.

   УВАГА НА МАЙБУТНЄ: скрізь нижче й вище колір скла міняється через
   background-color, а НЕ через скорочення background. Скорочення скидає
   background-image — тобто саму цю пляму. Один раз це вже вбило ефект:
   на рядках списку він працював, а на картках і кнопках зникав рівно
   під курсором, бо правило :hover мало вищу вагу.
   Координати всередині елемента кладе js/frost.js у --ex / --ey; усе інше
   робить ось цей градієнт. Поки курсора нема, змінні стоять далеко за межами
   елемента (-400px), тож у спокої не видно НІЧОГО — а це якраз те, чого
   просив власник: у спокої табличок майже не видно, світло з'являється разом
   із рукою. Форму градієнту обрізає сам елемент, тому в кружечку він круглий.
   ===================================================================== */
.card, .plays .btn, .stat, .hero-emblem, .gear, .chatsend, .coin, .ap{
  background-image: radial-gradient(var(--glow-r, 320px) circle at var(--ex, -600px) var(--ey, -600px),
                    rgba(206,226,252,0.26) 0%, rgba(206,226,252,0.12) 34%, rgba(206,226,252,0.04) 58%, rgba(206,226,252,0) 78%);
}
.stat, .gear, .chatsend, .coin{ --glow-r: 130px; }
.hero-emblem{ --glow-r: 190px; }

/* Головна кнопка світла сама, тому пляма на ній має бути темнішою за тло,
   інакше її просто не видно. Порядок шарів обов'язковий: пляма ЗВЕРХУ. */
.btn.primary{
  background-image:
    radial-gradient(220px circle at var(--ex, -600px) var(--ey, -600px),
                    rgba(255,255,255,0.85) 0%, rgba(255,255,255,0) 68%),
    linear-gradient(180deg, rgba(246,250,255,0.94) 0%, rgba(213,224,238,0.90) 100%);
}
@media (hover: hover){
  .btn.primary:hover{
    background-image:
      radial-gradient(220px circle at var(--ex, -600px) var(--ey, -600px),
                      rgba(255,255,255,0.95) 0%, rgba(255,255,255,0) 68%),
      linear-gradient(180deg, #fdfeff 0%, #e2ebf6 100%);
  }
}

/* Рядки списків. У них нема власного тла, тому підсвітка — єдине, що
   показує, на чому саме рука. Відступи від'ємними полями, щоб пляма
   лягала на всю ширину картки, а текст не поїхав. */
.brow, .game, .cl, .online .row, .linklike{
  border-radius: 8px;
  padding-left: 8px; padding-right: 8px;
  margin-left: -8px; margin-right: -8px;
  background-image: radial-gradient(190px circle at var(--ex, -600px) var(--ey, -600px),
                    rgba(206,226,252,0.20) 0%, rgba(206,226,252,0.07) 45%, rgba(206,226,252,0) 76%);
}
.linklike{ width: auto; }

/* Дотик і вимкнений рух: жодних плям, лише звичайні поверхні. */
@media (hover: none){
  .card, .plays .btn, .stat, .hero-emblem, .gear, .chatsend, .coin, .ap,
  .brow, .game, .cl, .online .row, .linklike{ background-image: none; }
}
@media (prefers-reduced-motion: reduce){
  .card, .plays .btn, .stat, .hero-emblem, .gear, .chatsend, .coin, .ap,
  .brow, .game, .cl, .online .row, .linklike{ background-image: none; }
  .btn.primary{ background-image: linear-gradient(180deg, rgba(246,250,255,0.94) 0%, rgba(213,224,238,0.90) 100%); }
}


/* =====================================================================
   СВІЧКА В РУЦІ.

   Що просив власник: «курсор має бути як невеликий ліхтарик або свічка,
   яка підсвічує слова». Це інша механіка, ніж підсвітка вище. Та живе
   ВСЕРЕДИНІ елемента: наводиш на картку — світиться картка, а між
   елементами світло стрибками гасне. Через це й здавалось, що стовпчик
   просто підмигує, а сам курсор нічого не випромінює.

   Тут світло не належить жодному елементу. Це два шари, які просто їдуть
   за рукою:

   1) .page::after — ТІСНА пляма ПОВЕРХ інтерфейсу з режимом змішування
      screen. Саме вона робить головне: під нею яскравішає те, що є —
      літери, цифри, тонкі риски. Це і є «підсвічує слова».
   2) .veil::after — ширше й слабше світло ПІД інтерфейсом, на самій залі.
      Дає відчуття, що свічка освітлює кімнату, а не тільки напис.

   Обидві плями малюються ОДИН раз у фіксованому колі й далі лише їдуть
   через translate3d. Якби замість цього писати radial-gradient(at var(--x)
   var(--y)) на весь екран, браузер перемальовував би повний кадр щоразу.
   ===================================================================== */
.veil{ --tx: -120vw; --ty: -120vh; --lit: 0; }
.page{ --tx: -120vw; --ty: -120vh; --lit: 0; }

@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference){

  /* Полум'я: тісне ядро, що яскравить літери під собою. Колір майже білий із
     ледь теплим відтінком — це світло, а не золоте оздоблення; на холодній
     сталі воно читається саме як вогник, і гами не ламає. */
  .page::after{
    content: ''; position: fixed; left: 0; top: 0; z-index: 6; pointer-events: none;
    width: 300px; height: 300px; margin: -150px 0 0 -150px; border-radius: 50%;
    background: radial-gradient(closest-side,
      rgba(255,248,236,0.30) 0%,
      rgba(255,244,228,0.15) 26%,
      rgba(240,240,255,0.06) 52%,
      rgba(220,232,255,0) 74%);
    mix-blend-mode: screen;
    transform: translate3d(var(--tx), var(--ty), 0);
    opacity: var(--lit);
    transition: opacity .45s ease;
    will-change: transform;
  }

  /* Відсвіт на самій залі — ширший, слабший, під інтерфейсом. */
  .veil::after{
    content: ''; position: absolute; left: 0; top: 0; pointer-events: none;
    width: 34vmax; height: 34vmax; margin: -17vmax 0 0 -17vmax; border-radius: 50%;
    background: radial-gradient(closest-side,
      rgba(255,236,200,0.10) 0%, rgba(210,224,250,0.05) 40%, rgba(190,210,245,0) 74%);
    transform: translate3d(var(--tx), var(--ty), 0);
    opacity: var(--lit);
    transition: opacity .5s ease;
    will-change: transform;
  }
}


/* =====================================================================
   ІНВЕНТАР: імена як речі.
   Список речей і крамниця живуть у вікні налаштувань окремою вкладкою —
   там, де гравець і шукає такі речі. Вигляд той самий, що скрізь: тихе
   скло, яке прокидається під рукою.
   ===================================================================== */
.inv-now{ display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.inv-now b{ font-size: 20px; font-weight: 800; color: var(--ink); }
.inv-h{
  margin: 18px 0 8px; font-size: 11px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
}
.inv-list{ display: flex; flex-direction: column; gap: 6px; }
.inv-row{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 12px; border-radius: 10px;
  background-color: rgba(255,255,255,0.028);
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.05);
  transition: background-color .2s ease, box-shadow .2s ease;
}
@media (hover: hover){
  .inv-row:hover{ background-color: rgba(255,255,255,0.055); box-shadow: inset 0 1px 0 rgba(255,255,255,0.10); }
}
.inv-what{ min-width: 0; }
.inv-what b{ display: block; font-size: 14px; font-weight: 700; color: var(--ink); }
.inv-what small{ display: block; font-size: 11.5px; color: var(--ink-3); margin-top: 1px; }
.inv-act{ display: flex; align-items: center; gap: 8px; flex: none; }
.inv-name{
  font: inherit; font-size: 13px; color: var(--ink); width: 150px;
  background: rgba(255,255,255,0.05); border: 0; border-radius: 8px; padding: 7px 10px; outline: 0;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
}
.inv-name:focus{ box-shadow: inset 0 0 0 1px var(--steel-line); }
.inv-name::placeholder{ color: var(--ink-3); }
.inv-btn{
  font: inherit; font-size: 12px; font-weight: 700; letter-spacing: .04em; cursor: pointer;
  color: var(--ink); background: rgba(255,255,255,0.07); border: 0; border-radius: 99px; padding: 8px 16px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}
.inv-btn:hover{ background: rgba(255,255,255,0.14); box-shadow: inset 0 0 0 1px rgba(255,255,255,0.14); }
.inv-btn.buy{ box-shadow: inset 0 0 0 1px rgba(142,163,189,.42); }
.inv-btn.buy:hover{ box-shadow: inset 0 0 0 1px rgba(207,220,236,.7); color: var(--steel-2); }
.inv-tag{ font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }


/* =====================================================================
   СТАЦІОНАРНА ГОЛОВНА.

   Що просив власник: «головну треба зробити стаціонарною — зараз відкриваю
   останні 10 ігор і сайт розтягує; потім на розширення повпливає».

   Правило просте: головна ЗАВЖДИ рівно на екран. Вона не росте вниз ні від
   довгого списку партій, ні від чату, ні від табло. Усе, що не вміщається,
   гортається ВСЕРЕДИНІ своєї картки, а повні дані відкриваються окремою
   сторінкою (кнопка «усе» в заголовку). Через це сторінка однаково виглядає
   і на ноутбуці, і на великому моніторі — висота більше ні на що не впливає.
   ===================================================================== */
html, body{ height: 100%; overflow: hidden; }
.page{ height: 100dvh; min-height: 0; }
.grid{ min-height: 0; overflow: hidden; }

/* Бічні смуги гортаються самі, а не тягнуть сторінку */
.col.side{
  min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden;
  padding-right: 4px; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.14) transparent;
}
.col.side::-webkit-scrollbar{ width: 6px; }
.col.side::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 3px; }
.col.side::-webkit-scrollbar-track{ background: transparent; }

/* Тіло картки теж має стелю: інакше одна довга картка з'їдає всю смугу */
.foldbody{ max-height: 46vh; overflow-y: auto; scrollbar-width: thin; }
.fold.folded .foldbody{ max-height: 0; }
.chatlog{ max-height: 30vh; }

/* Центр не тягне сторінку, але й нічого не ховає: якщо на дуже низькому екрані
   він усе-таки не вміщається, гортається САМ, а не сторінка. */
.stage{ min-height: 0; max-height: 100%; overflow-y: auto; overflow-x: hidden; scrollbar-width: none; }
.stage::-webkit-scrollbar{ width: 0; height: 0; }

/* Кнопка «усе» в заголовку картки */
.allbtn{
  margin-left: auto; flex: none; font: inherit; font-size: 10px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; cursor: pointer;
  color: var(--ink-3); background: transparent; border: 0; padding: 2px 0 2px 10px;
  transition: color .18s ease;
}
.allbtn:hover{ color: var(--steel-2); }

/* Три крапки в заголовку картки і меню під ними. Меню лежить ПОВЕРХ картки
   (absolute), інакше воно розсувало б заголовок і картка стрибала б при кліку. */
.card h2{ position: relative; }
.dots{ flex: none; background: transparent; border: 0; cursor: pointer; color: var(--ink-3);
  font-size: 15px; line-height: 1; padding: 2px 2px 2px 8px; transition: color .18s ease; }
.dots:hover{ color: var(--steel-2); }
.dotmenu{ position: absolute; right: 0; top: calc(100% + 6px); z-index: 12; min-width: 190px;
  /* --panel у цій темі майже прозорий (перламутр 7 %) — для меню, що лежить ПОВЕРХ
     картинки зали, потрібне щільне скло, як у .panel-body, інакше текст читається крізь стіну */
  background: rgba(14,17,23,0.94); backdrop-filter: blur(20px) saturate(1.15);
  -webkit-backdrop-filter: blur(20px) saturate(1.15);
  border: 1px solid rgba(255,255,255,.10); border-radius: 8px;
  box-shadow: 0 12px 30px rgba(0,0,0,.45); padding: 4px; }
.dotmenu.hidden{ display: none; }
.dotmenu button{ display: block; width: 100%; text-align: left; background: transparent; border: 0;
  font: inherit; font-size: 12px; font-weight: 600; letter-spacing: 0; text-transform: none;
  color: var(--ink-2); cursor: pointer; padding: 8px 10px; border-radius: 6px; }
.dotmenu button:hover{ background: rgba(255,255,255,.07); color: var(--ink); }

/* ---- скарга на партію ---- */
.cmp-list{ display: grid; gap: 6px; max-height: 46dvh; overflow: auto; scrollbar-width: thin; }
.cmp-row{ display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px;
  background: rgba(255,255,255,.04); }
.cmp-main{ min-width: 0; flex: 1; }
.cmp-main b{ font-variant-numeric: tabular-nums; letter-spacing: .06em; }
.cmp-main small{ display: block; color: var(--ink-3); font-size: 11.5px; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Базовий .btn у цій темі — велика кнопка на всю ширину (flex-direction:column).
   У рядку партії така кнопка розпирає рядок і з'їдає код кімнати: тут вона мусить
   бути маленькою і по ширині тексту. Та сама пастка, що й у .wallet-pick. */
.cmp-row .btn{ flex: 0 0 auto; width: auto; flex-direction: row; align-items: center;
  padding: 6px 12px; font-size: 12px; line-height: 1.2; }
.cmp-done{ color: #8fd694; font-size: 11.5px; flex: none; }
.cmp-late{ color: var(--ink-3); font-size: 11.5px; flex: none; }
.cmp-form{ display: grid; gap: 10px; margin-top: 4px; }
.cmp-form.hidden{ display: none; }
.cmp-who{ display: flex; flex-wrap: wrap; gap: 6px 14px; }
.cmp-who label{ display: inline-flex; align-items: center; gap: 6px; font-size: 13px; cursor: pointer; }
.cmp-form textarea{ width: 100%; resize: vertical; font: inherit; font-size: 13px; padding: 8px 10px;
  color: var(--ink); background: rgba(0,0,0,.28); border: 1px solid rgba(255,255,255,.12); border-radius: 8px; }
.cmp-actions{ display: flex; justify-content: flex-end; gap: 8px; }
.cmp-actions .btn{ flex: 0 0 auto; width: auto; flex-direction: row; align-items: center; padding: 8px 18px; font-size: 12.5px; }

/* ---- окрема сторінка розділу ---- */
.panel-body.wide{ width: min(860px, 100%); max-height: 86dvh; display: flex; flex-direction: column; }
.vwrap{ min-height: 0; overflow: auto; scrollbar-width: thin; }
.vtab{ width: 100%; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.vtab th{
  position: sticky; top: 0; z-index: 1; text-align: left; font-size: 10.5px; font-weight: 700;
  letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3);
  padding: 8px 10px; background: rgba(14,17,23,0.94);
  box-shadow: inset 0 -1px 0 rgba(255,255,255,.07);
  white-space: nowrap;
}
.vtab td{ padding: 9px 10px; color: var(--ink-2); border-bottom: 1px solid rgba(255,255,255,.045); }
.vtab td:first-child{ color: var(--ink-3); white-space: nowrap; }
.vtab tr:last-child td{ border-bottom: 0; }
.vtab tbody tr{ transition: background-color .15s ease; }
.vtab tbody tr:hover{ background-color: rgba(255,255,255,.045); }

@media (max-width: 820px){
  html, body{ overflow: auto; }        /* на телефоні гортати сторінку природно */
  .page{ height: auto; }
  .col.side{ max-height: none; overflow: visible; }
  .foldbody{ max-height: 60vh; }
}


/* =====================================================================
   ЦЕНТР МУСИТЬ ВМІЩАТИСЬ.

   ЩО ТУТ БУЛО ЗЛАМАНО (знайдено 3 вересня). Коли головну зробили стаціонарною,
   центральна колонка лишилась 688 px заввишки при вікні 639 — і шість кнопок
   просто пішли за край: «Рейтингова», «Запросити посиланням», «Досягнення»,
   «Інвентар», «Магазин» і «Налаштування». Сторінка більше не горталась, тож
   дістатись до них не було як узагалі. Половина функцій зникла з гри мовчки.

   Лікуємо двома способами одночасно, і обидва потрібні:
   1) центр гортається сам (вище) — це гарантія, що нічого не загубиться НІКОЛИ;
   2) розміри сідають сходинками за ВИСОТОЮ вікна — щоб гортати не доводилось.
      Саме тому запити тут на max-height, а не на ширину: проблема була у висоті.
   ===================================================================== */

/* Ноутбук: типові 700–900 px висоти */
@media (max-height: 900px){
  .hero-emblem{ width: 108px; height: 108px; }
  .hero .lbl{ margin-top: 11px; }
  .name-input{ font-size: 34px; }
  .hero-title{ font-size: 12px; }
  .stat-row{ gap: 10px; margin: 14px 0 12px; }
  .stat{ width: 74px; height: 74px; }
  .stat b{ font-size: 20px; }
  .last-game{ margin-bottom: 12px; padding: 7px 13px; }
  .btn.big{ padding: 12px 18px; font-size: 14px; }
  .btn{ padding: 10px 18px; }
  .btn + .btn{ margin-top: 8px; }
  .stage-foot{ margin-top: 10px; gap: 12px; }
  .stage{ padding: 0 0 6px; }
}

/* Низький екран: 15" ноутбук із панеллю задач, вікно не на весь екран */
@media (max-height: 760px){
  .hero-emblem{ width: 88px; height: 88px; }
  .hero .lbl{ margin-top: 8px; font-size: 9.5px; }
  .name-input{ font-size: 28px; }
  .hero-title{ font-size: 11.5px; margin-top: 2px; }
  .stat-row{ gap: 8px; margin: 11px 0 10px; }
  .stat{ width: 64px; height: 64px; }
  .stat b{ font-size: 17px; }
  .stat span{ font-size: 8px; max-width: 56px; }
  .last-game{ margin-bottom: 10px; padding: 6px 12px; font-size: 12px; }
  .btn.big{ padding: 10px 16px; font-size: 13px; letter-spacing: .08em; }
  .btn{ padding: 9px 16px; }
  .btn small{ font-size: 11px; }
  .btn + .btn{ margin-top: 7px; }
  .stage-foot{ margin-top: 8px; }
  .ticker{ margin-bottom: 2px; }
  .top{ padding-top: 10px; padding-bottom: 4px; }
}

/* Зовсім тісно: тоді ховаємо те, без чого можна жити, а не кнопки */
@media (max-height: 640px){
  .hero-emblem{ width: 72px; height: 72px; }
  .name-input{ font-size: 24px; }
  .hero-title{ display: none; }
  .stat{ width: 58px; height: 58px; }
  .stat b{ font-size: 15px; }
  /* Підпис мусить лишатись У кружечку: «ВІДСОТОК ПЕРЕМОГ» на 56 px вилазив за край. */
  .stat span{ font-size: 7px; max-width: 46px; line-height: 1.1; letter-spacing: .03em; }
  .stat-row{ margin: 9px 0 9px; gap: 7px; }
  .btn.big{ padding: 9px 14px; font-size: 12.5px; }
  .btn small{ display: none; }        /* підписи під кнопками — перше, чим жертвуємо */
  .last-game{ display: none; }
}