/* ============================================================
   Bowl.kz — Главные стили
   Минимализм · Светлые тона · Чёткая типографика
============================================================ */

/* ── CSS ПЕРЕМЕННЫЕ ────────────────────────────────────── */
:root {
  /* Цвета */
  --c-white:   #ffffff;
  --c-bg:      #f9fafb;
  --c-bg2:     #f3f4f6;
  --c-surface: #ffffff;
  --c-surface2:#f9fafb;
  --c-border:  #e5e7eb;
  --c-border2: #d1d5db;

  /* Текст */
  --c-text:    #111827;
  --c-text2:   #374151;
  --c-text3:   #6b7280;
  --c-text4:   #9ca3af;

  /* Акцент */
  --c-accent:  #1e40af;
  --c-accent2: #2563eb;
  --c-accent-bg: #eff6ff;

  /* Статусы */
  --c-success: #166534;
  --c-success-bg: #f0fdf4;
  --c-warning: #92400e;
  --c-warning-bg: #fefce8;
  --c-danger:  #dc2626;
  --c-danger-bg: #fef2f2;

  /* Live */
  --c-live:    #ef4444;

  /* Боулинг цвета */
  --c-strike:  #185FA5;
  --c-strike-bg: #EBF4FF;
  --c-spare:   #374151;
  --c-oil-fwd: #85B7EB;
  --c-oil-rev: #F09595;

  /* Шрифт */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
          'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'SF Mono', 'Fira Code', Consolas, monospace;

  /* Отступы */
  --radius:  6px;
  --radius2: 8px;
  --radius3: 12px;
  --shadow:  0 1px 3px rgba(0,0,0,.08), 0 1px 2px rgba(0,0,0,.04);
  --shadow2: 0 4px 12px rgba(0,0,0,.08);

  /* Переходы */
  --transition: 150ms ease;
}

/* ── СБРОС ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
html { font-size: 16px; scroll-behavior: smooth }
body {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.5;
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block }
a { color: var(--c-accent); text-decoration: none }
a:hover { text-decoration: underline }
button { cursor: pointer; font-family: inherit }

/* ── КОНТЕЙНЕР ──────────────────────────────────────────── */
.container { max-width: 1200px; margin: 0 auto; padding: 0 20px }
.container-sm { max-width: 800px; margin: 0 auto; padding: 0 20px }

/* ── НАВБАР ─────────────────────────────────────────────── */
.navbar {
  background: var(--c-surface);
  border-bottom: 1px solid var(--c-border);
  position: sticky;
  top: 0;
  z-index: 100;
}
.navbar-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 52px;
}
.navbar-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}
.navbar-logo svg circle { transition: stroke var(--transition) }
.navbar-logo:hover svg circle { stroke: var(--c-accent2) }
.logo-text { display: flex; flex-direction: column; line-height: 1 }
.logo-text .logo-name { font-size: 15px; font-weight: 500; color: var(--c-text); letter-spacing: -.3px }
.logo-text .logo-domain { font-size: 9px; color: var(--c-text4); letter-spacing: 2px }

.navbar-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
}
.navbar-nav a {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--c-text3);
  border-radius: var(--radius);
  transition: color var(--transition), background var(--transition);
  text-decoration: none;
}
.navbar-nav a:hover,
.navbar-nav a.active { color: var(--c-text); background: var(--c-bg2) }
.navbar-nav a.active { font-weight: 500 }

.navbar-right { display: flex; align-items: center; gap: 8px }

/* ── LIVE BAR ────────────────────────────────────────────── */
.live-bar {
  background: #111827;
  padding: 9px 20px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 12px;
}
.live-bar .live-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--c-live);
  flex-shrink: 0;
  animation: live-pulse 1.2s infinite;
}
@keyframes live-pulse {
  0%,100% { opacity: 1 }
  50%      { opacity: .3 }
}
.live-bar .live-label { color: var(--c-live); font-weight: 600; letter-spacing: 1px }
.live-bar .live-text  { color: #d1d5db; flex: 1 }
.live-bar .live-meta  { color: #6b7280 }
.live-bar .live-btn {
  padding: 5px 14px;
  background: var(--c-live);
  color: #fff;
  border: none;
  border-radius: var(--radius);
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
  transition: opacity var(--transition);
}
.live-bar .live-btn:hover { opacity: .85 }

/* ── КНОПКИ ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 16px;
  font-size: 13px;
  font-weight: 500;
  border-radius: var(--radius);
  border: 1px solid transparent;
  transition: all var(--transition);
  text-decoration: none;
  white-space: nowrap;
}
.btn-primary   { background: var(--c-text); color: #fff; border-color: var(--c-text) }
.btn-primary:hover { background: #374151; text-decoration: none }
.btn-outline   { background: transparent; color: var(--c-text); border-color: var(--c-border2) }
.btn-outline:hover { background: var(--c-bg2); text-decoration: none }
.btn-accent    { background: var(--c-accent); color: #fff; border-color: var(--c-accent) }
.btn-accent:hover { background: var(--c-accent2); text-decoration: none }
.btn-danger    { background: var(--c-danger); color: #fff; border-color: var(--c-danger) }
.btn-sm { padding: 5px 12px; font-size: 12px }
.btn-xs { padding: 3px 10px; font-size: 11px }
.btn-block { width: 100%; justify-content: center }

/* ── КАРТОЧКИ ────────────────────────────────────────────── */
.card {
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--radius2);
  overflow: hidden;
}
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--c-border);
  background: var(--c-bg);
}
.card-title { font-size: 12px; font-weight: 500; color: var(--c-text) }
.card-body  { padding: 14px }

/* ── ТАБЛИЦЫ ─────────────────────────────────────────────── */
.table-wrap { border: 1px solid var(--c-border); border-radius: var(--radius2); overflow: hidden }
table { width: 100%; border-collapse: collapse }
thead th {
  padding: 8px 12px;
  text-align: left;
  font-size: 11px;
  font-weight: 500;
  color: var(--c-text3);
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border);
  white-space: nowrap;
}
tbody td {
  padding: 8px 12px;
  font-size: 13px;
  color: var(--c-text);
  border-bottom: 1px solid var(--c-border);
}
tbody tr:last-child td { border-bottom: none }
tbody tr:nth-child(even) { background: var(--c-bg) }
tbody tr:hover { background: #f0f4ff }
.tc { text-align: center }
.tr { text-align: right }

/* ── АВАТАР ─────────────────────────────────────────────── */
.avatar {
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 500;
  color: #fff;
  flex-shrink: 0;
  font-size: 11px;
  line-height: 1;
}
.avatar-sm  { width: 24px; height: 24px; font-size: 9px }
.avatar-md  { width: 32px; height: 32px; font-size: 11px }
.avatar-lg  { width: 48px; height: 48px; font-size: 16px }
.avatar-xl  { width: 72px; height: 72px; font-size: 22px }

/* ── БЕЙДЖИ ──────────────────────────────────────────────── */
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}
.badge-live    { background: #fef2f2; color: var(--c-danger) }
.badge-reg     { background: var(--c-success-bg); color: var(--c-success) }
.badge-ann     { background: var(--c-warning-bg); color: var(--c-warning) }
.badge-done    { background: var(--c-bg2); color: var(--c-text4) }
.badge-pro     { background: #1e3a5f; color: #93c5fd }
.badge-free    { background: var(--c-bg2); color: var(--c-text4); border: 1px solid var(--c-border2) }
.badge-A       { background: var(--c-accent-bg); color: var(--c-accent) }
.badge-B       { background: var(--c-bg2); color: var(--c-text3) }
.badge-easy    { background: var(--c-success-bg); color: var(--c-success) }
.badge-medium  { background: var(--c-warning-bg); color: var(--c-warning) }
.badge-hard    { background: var(--c-danger-bg); color: var(--c-danger) }
.badge-sport   { background: #eff6ff; color: #1d4ed8 }

/* ── СКОРСКАРД СИМВОЛЫ ───────────────────────────────────── */
.th-X     { color: var(--c-strike); background: var(--c-strike-bg); border-radius: 3px; padding: 1px 4px; font-weight: 600 }
.th-spare { color: var(--c-spare); font-weight: 500 }
.th-miss  { color: var(--c-text4) }

/* ── ФОРМЫ ───────────────────────────────────────────────── */
.form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px }
.form-label { font-size: 11px; color: var(--c-text3) }
.form-control {
  padding: 8px 10px;
  border: 1px solid var(--c-border2);
  border-radius: var(--radius);
  font-size: 13px;
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-surface);
  outline: none;
  transition: border-color var(--transition);
  width: 100%;
}
.form-control:focus { border-color: var(--c-accent) }
.form-control::placeholder { color: var(--c-text4) }
select.form-control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M6 8L1 3h10z' fill='%236b7280'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center }

/* ── АЛЕРТЫ ──────────────────────────────────────────────── */
.alert { padding: 10px 14px; border-radius: var(--radius); font-size: 13px; margin-bottom: 12px }
.alert-error   { background: var(--c-danger-bg); color: var(--c-danger); border: 1px solid #fecaca }
.alert-success { background: var(--c-success-bg); color: var(--c-success); border: 1px solid #bbf7d0 }
.alert-warning { background: var(--c-warning-bg); color: var(--c-warning); border: 1px solid #fde68a }
.alert-info    { background: var(--c-accent-bg); color: var(--c-accent); border: 1px solid #bfdbfe }

/* ── МАСЛЯНЫЕ ДИАГРАММЫ ──────────────────────────────────── */
.oil-bars { display: flex; align-items: flex-end; gap: 2px }
.oil-bar { border-radius: 1px 1px 0 0; flex: 1 }
.oil-bar.fwd { background: var(--c-oil-fwd) }
.oil-bar.fwd.hi { background: #2563eb }
.oil-bar.rev { background: var(--c-oil-rev) }
.oil-bar.rev.hi { background: #dc2626 }

/* ── КЕГЛИ ───────────────────────────────────────────────── */
.pin-layout { display: flex; flex-direction: column; align-items: center; gap: 5px }
.pin-row    { display: flex; gap: 6px; justify-content: center }
.pin {
  width: 28px; height: 28px;
  border-radius: 50%;
  border: 1px solid var(--c-border2);
  background: var(--c-surface);
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; color: var(--c-text3);
  transition: all var(--transition);
}
.pin.down    { background: var(--c-text); border-color: var(--c-text); color: #fff }
.pin.standing{ background: var(--c-strike-bg); border-color: var(--c-strike); color: var(--c-strike); font-weight: 600 }
.pin.clickable{ cursor: pointer }
.pin.clickable:hover { border-color: var(--c-accent) }
.pin-sm { width: 20px; height: 20px; font-size: 8px }
.pin-lg { width: 36px; height: 36px; font-size: 12px; font-weight: 600 }

/* ── ГРИД / FLEX УТИЛИТЫ ─────────────────────────────────── */
.flex         { display: flex }
.flex-center  { display: flex; align-items: center }
.flex-between { display: flex; align-items: center; justify-content: space-between }
.flex-col     { display: flex; flex-direction: column }
.gap-4  { gap: 4px }
.gap-8  { gap: 8px }
.gap-12 { gap: 12px }
.gap-16 { gap: 16px }
.gap-20 { gap: 20px }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px }
.grid-3 { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px }
.grid-4 { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px }

/* ── ОТСТУПЫ ─────────────────────────────────────────────── */
.mt-4  { margin-top:  4px }
.mt-8  { margin-top:  8px }
.mt-12 { margin-top: 12px }
.mt-16 { margin-top: 16px }
.mt-20 { margin-top: 20px }
.mb-8  { margin-bottom:  8px }
.mb-12 { margin-bottom: 12px }
.mb-16 { margin-bottom: 16px }
.p-12  { padding: 12px }
.p-16  { padding: 16px }
.p-20  { padding: 20px }

/* ── ПРОЧЕЕ ──────────────────────────────────────────────── */
.text-muted   { color: var(--c-text4) }
.text-small   { font-size: 11px }
.text-xs      { font-size: 10px }
.font-500     { font-weight: 500 }
.font-600     { font-weight: 600 }
.nowrap       { white-space: nowrap }
.truncate     { overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.divider      { height: 1px; background: var(--c-border); margin: 12px 0 }
.section-title{
  font-size: 12px;
  font-weight: 500;
  color: var(--c-text);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 12px;
}

/* ── ФУТЕР ───────────────────────────────────────────────── */
.footer {
  border-top: 1px solid var(--c-border);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 40px;
  background: var(--c-surface);
}
.footer-links { display: flex; gap: 20px }
.footer-links a { font-size: 11px; color: var(--c-text3); text-decoration: none }
.footer-links a:hover { color: var(--c-text) }
.footer-copy { font-size: 11px; color: var(--c-text4) }

/* ── АДАПТИВ ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .navbar-nav { display: none }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
  .container { padding: 0 14px }
}

/* ── PRO ПЛАН ────────────────────────────────────────────── */
:root {
  --bg-pro:     #1e3a5f;
  --border-pro: #2d5a8e;
  --text-pro:   #93c5fd;
}
.badge-pro { background: var(--bg-pro); color: var(--text-pro); }

/* ── STICKY FOOTER ────────────────────────────────────────── */
html, body { height: 100% }
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.page-content {
  flex: 1;
}
.footer {
  margin-top: 0;
  flex-shrink: 0;
}

/* ── АДАПТИВ УЛУЧШЕНИЯ ────────────────────────────────────── */
@media (max-width: 900px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr }
  .container { padding: 0 14px }
  .navbar-nav { display: none }
}

@media (max-width: 600px) {
  .footer { flex-direction: column; gap: 10px; text-align: center }
  .footer-links { flex-wrap: wrap; justify-content: center; gap: 10px }
}