/* Sc1e Analyzer — собственные стили поверх Tailwind.
   Концепция: «APOLLO LOG» — бортжурнал миссии 1969 года, NASA-style.

   Сохраняем имена классов `mc-*` (Mission Control) ради совместимости со всеми
   шаблонами: меняется только их внешний вид, не семантика.
*/

/* ---------------------- Базовое ---------------------- */

html { font-size: 14.5px; }
body {
  line-height: 1.55;
  background-color: #f4ead5;
}

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: #ebdfc4; }
::-webkit-scrollbar-thumb { background: #b8a883; border: 2px solid #ebdfc4; }
::-webkit-scrollbar-thumb:hover { background: #9a8a66; }

::selection { background: #1a1a1a; color: #f4ead5; }

canvas { max-width: 100%; }
table { border-collapse: collapse; }

/* ---------------------- Бумажная текстура ---------------------- */

.mc-stars {
  background-image:
    radial-gradient(1px 1px at 18% 22%, rgba(80, 60, 30, 0.10) 50%, transparent 50%),
    radial-gradient(1px 1px at 73% 38%, rgba(80, 60, 30, 0.08) 50%, transparent 50%),
    radial-gradient(1px 1px at 41% 71%, rgba(80, 60, 30, 0.10) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 84%, rgba(80, 60, 30, 0.07) 50%, transparent 50%),
    radial-gradient(1px 1px at 12% 91%, rgba(80, 60, 30, 0.08) 50%, transparent 50%),
    radial-gradient(1px 1px at 56% 12%, rgba(80, 60, 30, 0.06) 50%, transparent 50%),
    radial-gradient(1px 1px at 92% 28%, rgba(80, 60, 30, 0.07) 50%, transparent 50%),
    radial-gradient(1px 1px at 27% 47%, rgba(80, 60, 30, 0.06) 50%, transparent 50%),
    radial-gradient(40px 30px at 8% 33%, rgba(154, 132, 90, 0.05) 0%, transparent 70%),
    radial-gradient(60px 40px at 81% 12%, rgba(154, 132, 90, 0.04) 0%, transparent 70%),
    radial-gradient(55px 35px at 49% 88%, rgba(154, 132, 90, 0.05) 0%, transparent 70%);
  background-size: 900px 900px;
  background-attachment: fixed;
}

/* ---------------------- Панель: загиб бумаги + скрепка ВНЕ контента ---------------------- */

.mc-panel {
  position: relative;
}

/* Левый верх: маленький треугольный загиб бумаги (folded corner) */
.mc-panel::before {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 14px; height: 14px;
  background: linear-gradient(135deg,
    transparent 0%, transparent 49%,
    rgba(80, 60, 30, 0.22) 50%, rgba(80, 60, 30, 0.16) 51%,
    transparent 52%, transparent 100%);
  pointer-events: none;
}

/* Правый верх: скрепка — над рамкой, не режет контент */
.mc-panel::after {
  content: '';
  position: absolute;
  top: -10px;             /* над карточкой */
  right: 14px;
  width: 14px;
  height: 22px;
  border: 1.5px solid rgba(40, 40, 40, 0.55);
  border-top: none;
  border-radius: 0 0 6px 6px;
  pointer-events: none;
  z-index: 2;
}

/* На маленьких карточках (плотные KPI 4×1) скрепку не рисуем — мешает цифрам */
.mc-panel-mini::after,
.mc-panel-mini::before { display: none; }

.mc-panel > .mc-corners { display: none; }

/* ---------------------- Подписи стиля «технический формуляр» ---------------------- */

.mc-label {
  font-family: 'Special Elite', 'Courier Prime', ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6b5e44;
}

/* ---------------------- Loader: «телеграфная лента» ---------------------- */

@keyframes mc-radar-sweep {
  0%   { content: '· · · · · · · · ·'; }
  25%  { content: '— · · · · · · · ·'; }
  50%  { content: '— — · · · · · · ·'; }
  75%  { content: '— — — · · · · · ·'; }
  100% { content: '— — — — · · · · ·'; }
}

.mc-loader::after {
  content: '· · · · · · · · ·';
  display: inline-block;
  font-family: 'Special Elite', monospace;
  color: #9a2a2a;
  animation: mc-radar-sweep 1.6s infinite linear;
}

@keyframes mc-pulse-soft {
  0%, 100% { opacity: 0.6; }
  50%      { opacity: 1.0; }
}
.mc-pulse {
  animation: mc-pulse-soft 1.8s ease-in-out infinite;
}

/* ---------------------- Прогресс-полоса ---------------------- */

.mc-progress {
  position: relative;
  height: 7px;
  background: #e0d3b4;
  border: 1px solid #c8b890;
  overflow: hidden;
}
.mc-progress-fill {
  height: 100%;
  background: #2d5a3d;
  transition: width 0.4s ease-out;
}

/* ---------------------- Heatmap-ячейки: миллиметровка ---------------------- */

.mc-heat-cell {
  width: 28px;
  height: 28px;
  text-align: center;
  font-family: 'Special Elite', 'Courier Prime', monospace;
  font-size: 10px;
  color: #1a1a1a;
  border: 1px solid rgba(80, 60, 30, 0.15);
}

.mc-heat-5  { background: #c8d8c0; }
.mc-heat-4  { background: #d8e2cf; }
.mc-heat-3  { background: #efe5cb; outline: 1px dashed #c8b890; outline-offset: -3px; }
.mc-heat-2  { background: #ecd4c0; }
.mc-heat-1  { background: #e0bba2; }
.mc-heat-0  { background: #c89280; }

.mc-heat-best  { background: #98b88a; color: #1a3a1a; font-weight: 700; }
.mc-heat-worst { background: #a8543a; color: #fff7e6; font-weight: 700; }

/* ---------------------- Утилиты ---------------------- */

.mc-divider {
  height: 1px;
  background: #c8b890;
  margin: 8px 0;
}

/* «Штамп»: тревожный/важный (красный) — для статусов матча, активности */
.mc-chip {
  display: inline-block;
  font-family: 'Special Elite', 'Courier Prime', monospace;
  font-size: 10px;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  padding: 2px 7px;
  border: 1.5px solid #9a2a2a;
  color: #9a2a2a;
  background: rgba(244, 234, 213, 0.6);
  transform: rotate(-1.5deg);
  box-shadow: inset 0 0 0 1px rgba(154, 42, 42, 0.15);
}

/* «Счётчик»: нейтральный (чёрный outline) — для подсчётов «20 ПОКАЗАНО», «5 матч.»
   Применяется ДОПОЛНИТЕЛЬНО к mc-chip и перебивает красный. */
.mc-chip-count {
  border-color: #1a1a1a;
  color: #1a1a1a;
  transform: rotate(0deg);
  box-shadow: none;
  background: transparent;
}

/* ---------------------- Печать ИНДЕКСА ФОРМЫ ---------------------- */

.al-stamp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  border: 4px double #9a2a2a;
  color: #9a2a2a;
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  background: rgba(244, 234, 213, 0.5);
  transform: rotate(-4deg);
  position: relative;
  flex-direction: column;
  line-height: 1;
}
.al-stamp.al-stamp-ok    { border-color: #2d5a3d; color: #2d5a3d; }
.al-stamp.al-stamp-warn  { border-color: #b85a1c; color: #b85a1c; }
.al-stamp.al-stamp-bad   { border-color: #8b3a1f; color: #8b3a1f; }

.al-stamp::after {
  content: '';
  position: absolute;
  inset: 8px;
  border-radius: 50%;
  border: 1.5px solid currentColor;
  opacity: 0.7;
  pointer-events: none;
}

.al-stamp-value { font-size: 56px; font-weight: 700; }
.al-stamp-label { font-size: 11px; letter-spacing: 0.12em; margin-top: 4px; }

/* Мини-печать в шапке профиля */
.al-stamp-mini {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 2.5px double #9a2a2a;
  color: #9a2a2a;
  font-family: 'Special Elite', monospace;
  font-weight: 700;
  background: rgba(244, 234, 213, 0.5);
  transform: rotate(-4deg);
  position: relative;
  flex-direction: column;
  line-height: 1;
  font-size: 22px;
}
.al-stamp-mini.al-stamp-ok    { border-color: #2d5a3d; color: #2d5a3d; }
.al-stamp-mini.al-stamp-warn  { border-color: #b85a1c; color: #b85a1c; }
.al-stamp-mini.al-stamp-bad   { border-color: #8b3a1f; color: #8b3a1f; }
.al-stamp-mini::after {
  content: '';
  position: absolute;
  inset: 4px;
  border-radius: 50%;
  border: 1px solid currentColor;
  opacity: 0.6;
  pointer-events: none;
}
.al-stamp-mini .al-stamp-label { font-size: 8px; margin-top: 2px; }

/* ---------------------- Печатная машинка ---------------------- */

.al-typewriter {
  font-family: 'Special Elite', 'Courier Prime', monospace;
  letter-spacing: -0.01em;
}

/* ---------------------- Таблицы-формуляры ---------------------- */

.al-form-table th,
.al-form-table td {
  border-bottom: 1px dashed #b8a883;
}

/* Подсветка «моей» строки в скорборде матча */
.match-row-mine {
  background: rgba(154, 42, 42, 0.10) !important;
  border-left: 3px solid #9a2a2a !important;
}

/* ---------------------- Hero-карточка: жирная рамка, важный блок ---------------------- */

.al-card-hero {
  border: 2px solid #1a1a1a !important;
}

/* ---------------------- Sticky-навигация вкладок ---------------------- */

.al-tabs-sticky {
  position: sticky;
  top: 0;
  z-index: 30;
  background: #f4ead5;
  /* лёгкая тень снизу, чтобы видеть «отрыв» при прокрутке */
  box-shadow: 0 6px 8px -6px rgba(80, 60, 30, 0.25);
}

/* ---------------------- Рукописная пометка ---------------------- */

.al-handwritten {
  font-family: 'Caveat', 'Special Elite', cursive;
  color: #3a5d8f;
  font-size: 16px;
  transform: rotate(-1deg);
  display: inline-block;
}

/* ---------------------- Фокус-кольцо для всех интерактивов ---------------------- */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
  outline: 2px solid #9a2a2a;
  outline-offset: 2px;
}