/* ============================================================
   Режим «на большой экран»: обе категории одновременно, в два столбца.
   Рассчитано на 1920×1080 в зале; всё меряется от vh, потому что
   дефицитный ресурс здесь — высота: две доски по восемь строк должны
   уместиться в один экран без прокрутки.
   ============================================================ */

.page-screen {
  overflow: hidden;
  cursor: none;
}

.screen {
  display: flex;
  flex-direction: column;
  max-width: none;
  height: 100vh;
  padding: clamp(12px, 1.8vh, 26px) clamp(16px, 2vw, 40px);
}

/* --- Шапка --- */

.screen__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex: none;
}

.screen .arena__logo { width: clamp(42px, 4.4vh, 72px); }

.screen .arena__title {
  font-size: clamp(24px, 3.8vh, 54px);
  text-shadow: 5px 5px 0 var(--purple-space), 10px 10px 0 var(--black);
}

.screen .arena__kicker { font-size: clamp(9px, 1.2vh, 14px); }

.screen__meta {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.2vw, 20px);
}

.screen .counter { padding: 10px 18px; }
.screen .counter__value { font-size: clamp(18px, 2.8vh, 38px); }
.screen .counter__label { font-size: clamp(8px, 1.1vh, 13px); }
.screen .tag { font-size: clamp(8px, 1.1vh, 13px); padding: 7px 12px; }

/* QR живёт в шапке: внизу его место заняли доски. */
.screen__qr {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  background: var(--white);
  border: 4px solid var(--black);
  border-radius: 12px;
  box-shadow: 6px 6px 0 var(--acid-green);
}

.screen__qr-frame {
  flex: none;
  width: clamp(56px, 7vh, 96px);
  line-height: 0;
}

/* segno отдаёт SVG с viewBox — тянем его по контейнеру. */
.screen__qr-frame svg {
  width: 100%;
  height: auto;
  shape-rendering: crispEdges;
}

.screen__qr-text {
  margin: 0;
  font-size: clamp(8px, 1vh, 12px);
  line-height: 1.9;
  color: var(--boring-grey);
  white-space: nowrap;
}

.screen__qr-text span {
  color: var(--black);
  font-size: clamp(8px, 1.05vh, 13px);
}

/* --- Два столбца --- */

.screen__cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Единственный ряд надо явно ограничить высотой контейнера: неявный
     ряд имеет размер auto, тянется по содержимому и выталкивает
     последнюю строку доски за нижний край экрана. */
  grid-template-rows: minmax(0, 1fr);
  gap: clamp(14px, 1.6vw, 34px);
  flex: 1;
  min-height: 0;
  margin-top: clamp(8px, 1.4vh, 20px);
}

.screen__col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
}

.screen__col-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
  margin: 0 0 clamp(6px, 1vh, 14px);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(13px, 2.1vh, 28px);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

.screen__col-title img {
  width: clamp(18px, 2.6vh, 34px);
  height: auto;
}

.screen__col-title--favorite   { color: var(--acid-green); }
.screen__col-title--underrated { color: var(--purple-planet); }

/* Строки делят всю оставшуюся высоту поровну (minmax(0, 1fr), а не 1fr:
   иначе минимум строки равен её content-size и последняя вылезает
   за нижний край экрана). */
.screen .board {
  display: grid;
  grid-auto-rows: minmax(0, 1fr);
  flex: 1;
  min-height: 0;
  gap: clamp(4px, 0.7vh, 10px);
  /* Отступы под декор, который вылезает за габариты строк: сверху —
     корона лидера, справа-снизу — жёсткие тени. Без них обрезка
     переполнения срезала бы их наполовину. */
  padding: clamp(9px, 1.4vh, 18px) 5px 5px 0;
  overflow: hidden;
}

.screen .board__empty {
  margin: 0;
  font-size: clamp(9px, 1.2vh, 13px);
}

/* --- Строка в столбце вдвое уже, чем на арене --- */

.screen .row {
  grid-template-columns: clamp(34px, 3.4vh, 56px) clamp(28px, 4.2vh, 52px) minmax(0, 1fr) auto;
  gap: clamp(7px, 0.9vw, 16px);
  padding: clamp(3px, 0.55vh, 10px) clamp(9px, 0.9vw, 18px);
  border-width: 3px;
  box-shadow: 4px 4px 0 var(--black);
}

.screen .row__rank { font-size: clamp(10px, 1.5vh, 19px); }

.screen .row__icon {
  width: clamp(24px, 4vh, 48px);
  height: clamp(24px, 4vh, 48px);
}

.screen .row__name { font-size: clamp(12px, 2vh, 27px); }
.screen .row__pct { font-size: clamp(13px, 2.1vh, 29px); }
.screen .row__votes { font-size: clamp(8px, 1.05vh, 13px); }

.screen .row__hp {
  height: auto;
  margin-top: clamp(1px, 0.35vh, 5px);
  gap: 1px;
}

.screen .row__hp .heart {
  width: clamp(9px, 1.6vh, 21px);
  height: auto;
}

.screen .row--first { padding: clamp(4px, 0.7vh, 12px) clamp(9px, 0.9vw, 18px); }

.screen .row--first .row__icon {
  width: clamp(28px, 4.8vh, 58px);
  height: clamp(28px, 4.8vh, 58px);
}

.screen .row__crown { width: clamp(22px, 2.4vh, 40px); top: -14px; right: 8px; }
.screen .row__flame { width: clamp(18px, 2vh, 34px); height: auto; }

/* Подсказка про полноэкранный режим — гаснет через несколько секунд. */
.screen__hint {
  position: fixed;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  z-index: 6;
  padding: 9px 16px;
  font-family: var(--font-pixel);
  font-size: 9px;
  color: var(--white);
  background: rgba(0, 0, 0, 0.75);
  border: 2px solid var(--acid-green);
  border-radius: 8px;
  animation: hint-fade 6s var(--ease-out) forwards;
}

@keyframes hint-fade {
  0%, 70%  { opacity: 1; }
  100%     { opacity: 0; visibility: hidden; }
}

/* ============================================================
   Узкий или невысокий экран (ноутбук, вертикальный монитор):
   столбцы встают друг под друга, доски прокручиваются внутри себя.
   ============================================================ */

@media (max-width: 1100px) {
  .page-screen { overflow: auto; }

  .screen { height: auto; min-height: 100vh; }

  .screen__cols { grid-template-columns: 1fr; }

  .screen .board {
    grid-auto-rows: auto;
    overflow: visible;
  }

  .screen__head { flex-wrap: wrap; }
}