/* global.css — общие стили для всех страниц (ratings, admin, guide) */

/* ── Language switcher ──────────────────────────────────────────────────────── */
.lang-switcher {
  display: flex;
  align-items: center;
  gap: 1px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.lang-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,.35);
  font-size: 11px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: .04em;
  padding: 3px 7px;
  border-radius: 6px;
  cursor: pointer;
  transition: color .15s, background .15s;
  line-height: 1;
}
.lang-btn:hover { color: rgba(255,255,255,.7); }
.lang-btn--active {
  background: rgba(124,92,191,.35);
  color: #c4a8ff;
}

/* ── No-reflow: nav-ссылки и кнопки с data-i18n внутри flex-контейнеров
      не должны менять ширину при смене языка ──────────────────────────────── */
a[data-i18n], button[data-i18n] {
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Base ──────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

body {
  background: #09090f;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  color: #e0e0e0;
  margin: 0;
}

/* ── Glass card ─────────────────────────────────────────────────────────────── */
.glass {
  background: rgba(25, 25, 35, .45);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .07),
    0 8px 32px rgba(0, 0, 0, .35);
}

/* ── Typography helpers ─────────────────────────────────────────────────────── */
.frac { font-size: .75em; opacity: .7; }

.pos  { color: #4ade80; }
.neg  { color: #f87171; }
.zero { color: #9ca3af; }

/* ── Animations ────────────────────────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1);   }
}
@keyframes modal-in {
  from { opacity: 0; transform: scale(.95) translateY(10px); }
  to   { opacity: 1; transform: scale(1)   translateY(0);    }
}
@keyframes sk-pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: .4; }
}
@keyframes spin {
  to { transform: rotate(360deg); }

/* ── Game label: #code — «lobby» marquee ────────────────────────────────────── */
@keyframes game-marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Контейнер: код всегда виден, название прокручивается если не влезает */
.game-label-wrap {
  display: inline-flex;
  align-items: center;
  max-width: 100%;
  vertical-align: middle;
  overflow: hidden;
}
.game-label-wrap .game-label-code {
  flex-shrink: 0;
  white-space: nowrap;
}
.game-label-wrap .game-label-sep {
  flex-shrink: 0;
  opacity: .45;
  margin: 0 3px;
  white-space: nowrap;
}
/* Область прокрутки — только название */
.game-label-wrap .game-label-clip {
  overflow: hidden;
  min-width: 0;
  max-width: 160px;
  flex: 0 1 160px;
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
  mask-image: linear-gradient(to right, transparent 0, #000 6px, #000 calc(100% - 6px), transparent 100%);
}
.game-label-wrap .game-label-inner {
  display: inline-block;
  white-space: nowrap;
}
.game-label-wrap .game-label-inner.marquee-active {
  animation: game-marquee 9s linear infinite;
}
.game-label-wrap .game-label-gap {
  display: inline-block;
  min-width: 160px;
}
/* Для коротких названий — без анимации, просто ellipsis */
.game-label-wrap.no-marquee .game-label-inner {
  animation: none;
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ── Spinner ────────────────────────────────────────────────────────────────── */
.spinner {
  width: 32px; height: 32px;
  border: 3px solid rgba(255, 255, 255, .1);
  border-top-color: #7c5cbf;
  border-radius: 50%;
  animation: spin .7s linear infinite;
  margin: 24px auto;
}

/* ── Toast ──────────────────────────────────────────────────────────────────── */
#toast {
  display: none;
  position: fixed; bottom: 24px; right: 24px;
  padding: 10px 20px;
  border-radius: 10px;
  font-weight: 600; font-size: 13px;
  z-index: 9999;
  box-shadow: 0 4px 16px rgba(0,0,0,.4);
}
#toast.ok  { background: #1a472a; color: #4ade80; border: 1px solid #166534; }
#toast.err { background: #4c1d1d; color: #f87171; border: 1px solid #991b1b; }

/* ── Modal backdrop ─────────────────────────────────────────────────────────── */
.modal-overlay {
  display: none;
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, .65);
  backdrop-filter: blur(4px);
  z-index: 500;
  align-items: center; justify-content: center;
}
.modal-overlay.open { display: flex; }

.modal-box {
  background: #0f0f1a;
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 16px;
  padding: 24px;
  max-width: 520px; width: 90%;
  max-height: 80vh; overflow-y: auto;
  animation: modal-in .2s ease;
}

/* ── Leaderboard rows ────────────────────────────────────────────────────────── */
.lb-row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border-radius: 10px;
  transition: background .15s;
}
.lb-row:hover { background: rgba(255, 255, 255, .04); }
.lb-row--me   { background: rgba(124, 92, 191, .15); border: 1px solid rgba(124, 92, 191, .3); }

.lb-rank  { width: 32px; text-align: right; font-weight: 700; font-size: 13px; color: #888; flex-shrink: 0; }
.lb-name  { flex: 1; font-weight: 500; color: #e0d0ff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lb-score { font-weight: 700; font-size: 13px; min-width: 70px; text-align: right; }
.lb-games { color: #666; font-size: 11px; min-width: 50px; text-align: right; flex-shrink: 0; }
.lb-empty { color: #666; text-align: center; padding: 24px; font-size: 13px; }

/* ── Achievement pills ───────────────────────────────────────────────────────── */
.ach-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 20px;
  background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.09);
  font-size: 12px; opacity: .5; transition: opacity .2s, border-color .2s;
  cursor: default;
}
.ach-pill--unlocked {
  opacity: 1;
  border-color: rgba(124,92,191,.4);
  background: rgba(124,92,191,.12);
}
.ach-icon { font-size: 14px; }
.ach-name { color: #e0d0ff; font-weight: 500; }
.ach-pts  { color: #9d7fe0; font-weight: 700; font-size: 11px; }

/* ── Button base ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 7px 16px; border-radius: 10px; border: none;
  font-size: 13px; font-weight: 600; cursor: pointer;
  transition: opacity .15s, transform .1s;
}
.btn:hover    { opacity: .85; }
.btn:active   { transform: scale(.97); }
.btn:disabled { opacity: .4; cursor: not-allowed; }

.btn-primary { background: #7c5cbf; color: #fff; }
.btn-ghost   { background: rgba(255,255,255,.07); color: #ccc; border: 1px solid rgba(255,255,255,.1); }
.btn-danger  { background: rgba(244,67,54,.15); color: #f87171; border: 1px solid rgba(244,67,54,.2); }