/* /arena для гостя — 1.1.7.147 (власник: «Давай зробимо сторінку арени для гостя»).
   Голова, картки, заголовки блоків, бейджі й рядки рейтингу — канонні примітиви з css/canon-primitives.css.
   Тут лише те, чого примітиви не мають: банери режимів, рядок бою з дукатами і заклик унизу. Лише токени. */
.kp-page--arena-guest { display: grid; gap: var(--kp-space-4); min-width: 0; }
.kp-page--arena-guest > .page-head { margin-bottom: 0; }
.kp-arena-guest__hint { margin: 0 0 var(--kp-space-3); }

/* Банери режимів: значок у акцентному квадраті (як у меню), назва, два рядки пояснення. */
.kp-arena-guest-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--kp-space-3); }
.kp-arena-guest-mode {
  display: flex; gap: var(--kp-space-3); align-items: flex-start; min-width: 0;
  padding: var(--kp-space-3) 14px;
  border: var(--kp-border-width) solid var(--kp-color-border);
  border-radius: var(--kp-radius-lg);
  background: linear-gradient(135deg, var(--kp-accent-soft), var(--kp-color-surface) 70%);
}
.kp-arena-guest-mode__icon {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 10px;
  display: inline-grid; place-items: center; font-size: 20px; line-height: 1; color: #fff;
  background: color-mix(in srgb, var(--kp-accent) 24%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kp-accent) 18%, var(--kp-color-border));
}
.kp-arena-guest-mode__icon img { width: 24px; height: 24px; object-fit: contain; display: block; }
.kp-arena-guest-mode__copy { min-width: 0; }
.kp-arena-guest-mode__copy h3 { margin: 0 0 4px; font-size: var(--kp-text-md); }
.kp-arena-guest-mode__copy p { margin: 0; color: var(--kp-color-text-muted); font-size: var(--kp-text-sm); line-height: 1.45; }

/* Бій з дукатами: учасники, коли й хто переміг, скільки дукатів народилось. Увесь рядок — посилання на перегляд бою. */
.kp-arena-guest-battles { display: grid; gap: var(--kp-space-2); }
.kp-arena-guest-battle {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-areas: "who ducats" "meta ducats";
  align-items: center; gap: 4px var(--kp-space-3); min-width: 0;
  padding: var(--kp-space-3) 14px; text-decoration: none; color: inherit;
  border: var(--kp-border-width) solid var(--kp-color-border); border-radius: var(--kp-radius-lg);
  background: var(--kp-color-surface);
}
.kp-arena-guest-battle:hover,
.kp-arena-guest-battle:focus-visible { border-color: color-mix(in srgb, var(--kp-accent) 45%, var(--kp-color-border)); }
.kp-arena-guest-battle__who { grid-area: who; display: flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; }
.kp-arena-guest-battle__who strong { overflow-wrap: anywhere; }
.kp-arena-guest-battle__who strong.is-winner { color: var(--n-accent-ink, var(--kp-accent)); }
.kp-arena-guest-battle__who .mini-avatar { width: 28px; height: 28px; object-fit: cover; }
.kp-arena-guest-battle__vs { color: var(--kp-color-text-muted); }
.kp-arena-guest-battle__meta { grid-area: meta; }
.kp-arena-guest-battle__ducats { grid-area: ducats; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; }
.kp-arena-guest-battle__ducats img { width: 14px; height: 14px; }
/* Два списки поруч — рівної ширини: на вітрині обидва головні (у робочій арені праве вужче). */
.kp-page--arena-guest .arena-dashboard-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 920px) { .kp-page--arena-guest .arena-dashboard-grid { grid-template-columns: minmax(0, 1fr); } }
/* Рядок «Найбільше перемог»: місце | хто (аватар, логін, рівень під ним) | перемоги. Канонний рядок має 4 фіксовані
   доріжки і на телефоні ховає ОСТАННІЙ стовпець — тут останній саме перемоги, тож три доріжки й нічого не ховаємо. */
.kp-page--arena-guest .arena-leader-row { grid-template-columns: 44px minmax(0, 1fr) auto; }
/* Канонний відступ рядка рейтингу (12 / 14) — загальне правило картки з style.css дає йому більший, і на телефоні
   логін стискався до трьох літер. */
.kp-page--arena-guest .kp-card.arena-leader-row { padding: var(--kp-space-3) 14px; gap: var(--kp-space-2); }
@media (max-width: 480px) { .kp-page--arena-guest .arena-leader-row { grid-template-columns: 34px minmax(0, 1fr) auto; } }
.kp-page--arena-guest .arena-leader-row > :last-child { display: block; }
.kp-arena-guest-winner__who { min-width: 0; }
.kp-arena-guest-winner__ident { display: grid; min-width: 0; }
.kp-arena-guest-winner__ident strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-arena-guest-winner__wins { white-space: nowrap; }
.kp-page--arena-guest .arena-leader-row .mini-avatar { object-fit: cover; }

/* Заклик унизу: текст ліворуч, кнопка праворуч; на телефоні кнопка під текстом на всю ширину. */
.kp-arena-guest-cta { display: flex; align-items: center; justify-content: space-between; gap: var(--kp-space-3); flex-wrap: wrap; }
.kp-arena-guest-cta h2 { margin: 0 0 4px; font-size: var(--kp-text-md); }
.kp-arena-guest-cta p { margin: 0; color: var(--kp-color-text-muted); }
@media (max-width: 480px) {
  .kp-arena-guest-cta > .kp-btn { flex: 1 1 100%; }
  .kp-arena-guest-battle { grid-template-columns: minmax(0, 1fr); grid-template-areas: "who" "meta" "ducats"; }
  .kp-arena-guest-battle__ducats { justify-self: start; }
}