/* =========================================================
   SHOOT OUT — тема: сукно / борт стола / латунная фурнитура
   ========================================================= */

:root{
  --baize:        #0b3d2e;
  --baize-dark:   #062720;
  --baize-light:  #14523f;
  --rail:         #3a2116;
  --rail-dark:    #23130b;
  --chalk:        #f2ede1;
  --chalk-dim:    #cfc6b3;
  --brass:        #c9a24b;
  --brass-dark:   #9c7c34;
  --danger:       #b3222a;

  --ball-red:     #b3222a;
  --ball-yellow:  #e0b400;
  --ball-green:   #1e6b3e;
  --ball-brown:   #6b4226;
  --ball-blue:    #1f4e8c;
  --ball-pink:    #dd87a0;
  --ball-black:   #141414;

  --font-display: "Oswald", "Arial Narrow", sans-serif;
  --font-body:    "Inter", system-ui, sans-serif;
}

html, body{
  height:100%;
  background: var(--baize-dark);
}

body{
  font-family: var(--font-body);
  color: var(--chalk);
}

/* ---------- Header (борт стола) ---------- */
.rail-header{
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-dark) 100%);
  border-bottom: 3px solid var(--brass-dark);
  padding: .65rem 0;
  box-shadow: 0 4px 14px rgba(0,0,0,.45);
}
.brand{ display:flex; align-items:center; gap:.55rem; }
.brand-dot{
  width:14px; height:14px; border-radius:50%;
  background: radial-gradient(circle at 30% 30%, #fff, var(--ball-black) 70%);
  box-shadow: 0 0 0 2px rgba(255,255,255,.08);
}
.brand-text{
  font-family: var(--font-display);
  font-weight:600; letter-spacing:.12em;
  font-size:1.15rem; color:var(--chalk);
}
.rail-sub{
  font-size:.8rem; color: var(--chalk-dim); letter-spacing:.04em;
}

/* ---------- Игровое поле (сукно) ---------- */
.table-felt{
  min-height: calc(100vh - 58px);
  background:
    radial-gradient(circle at 50% 0%, var(--baize-light) 0%, var(--baize) 45%, var(--baize-dark) 100%);
}

/* ---------- Экран настройки матча ---------- */
.setup-card{
  max-width: 720px;
  background: rgba(6,39,32,.55);
  border: 1px solid rgba(201,162,75,.35);
  border-radius: 18px;
  padding: 2rem 1.75rem;
  margin-top: 1rem;
  backdrop-filter: blur(2px);
}
.setup-title{
  font-family: var(--font-display);
  letter-spacing: .04em;
  color: var(--brass);
  margin-bottom:.25rem;
}
.setup-hint{ color: var(--chalk-dim); font-size:.92rem; }
.vs-badge{
  font-family: var(--font-display);
  color: var(--brass);
  font-weight:600;
  border: 1px solid var(--brass-dark);
  border-radius: 999px;
  padding:.3rem .8rem;
  margin-bottom: .4rem;
}

.form-select, .form-control{
  background: rgba(242,237,225,.06);
  border: 1px solid rgba(201,162,75,.4);
  color: var(--chalk);
}
.form-select:focus, .form-control:focus{
  background: rgba(242,237,225,.1);
  border-color: var(--brass);
  color: var(--chalk);
  box-shadow: 0 0 0 .2rem rgba(201,162,75,.25);
}
.form-select option{ color:#111; }
.form-label{ color: var(--chalk-dim); font-size:.85rem; letter-spacing:.03em; }

.btn-brass{
  background: linear-gradient(180deg, #dcb968, var(--brass-dark));
  border: 1px solid var(--brass-dark);
  color: #241606;
  font-weight:600;
}
.btn-brass:hover{ color:#241606; filter:brightness(1.07); }
.btn-outline-brass{
  border:1px solid var(--brass);
  color: var(--brass);
  background: transparent;
}
.btn-outline-brass:hover{ background: rgba(201,162,75,.15); color: var(--brass); }
.btn-check:checked + .btn-outline-brass{
  background: var(--brass); color:#241606;
}
.btn-start{
  background: linear-gradient(180deg, #2c8f5d, #145233);
  border:1px solid #0e3d26;
  color:#eafff2; font-family: var(--font-display);
  letter-spacing:.05em; font-size:1.05rem; padding:.65rem;
}
.btn-lag{
  background: rgba(242,237,225,.06);
  border:1px dashed var(--brass);
  color: var(--chalk);
}
.btn-link-muted{
  background:none; border:none; color: var(--chalk-dim);
  text-decoration: underline; font-size:.85rem;
}
.btn-foul{
  background: linear-gradient(180deg,#c94b4b,var(--danger));
  border:1px solid #7a1219; color:#fff; font-weight:600;
}

/* ---------- Панели игроков ---------- */
.player-panel{
  position: relative;
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-dark) 100%);
  border: 1px solid var(--brass-dark);
  border-radius: 20px;
  padding: 1.4rem 1rem 1.6rem;
  height:100%;
  text-align:center;
  overflow:hidden;
  transition: box-shadow .25s ease, transform .25s ease;
}
.player-panel.is-active{
  box-shadow: 0 0 0 2px var(--brass), 0 0 26px rgba(201,162,75,.55);
  transform: translateY(-2px);
}
/* сигнатурный элемент: "лузы" срезают углы панели, как у стола */
.pocket{
  position:absolute; width:26px; height:26px; border-radius:50%;
  background: radial-gradient(circle at 35% 35%, #000 0%, #000 55%, transparent 60%);
  box-shadow: inset 0 0 8px #000;
}
.pocket-tl{ top:-10px; left:-10px; }
.pocket-tr{ top:-10px; right:-10px; }
.pocket-bl{ bottom:-10px; left:-10px; }
.pocket-br{ bottom:-10px; right:-10px; }

.player-name{
  font-family: var(--font-display);
  letter-spacing:.03em;
  font-size:1.65rem;
  color: var(--chalk-dim);
  text-transform: uppercase;
}
.score-diff-badge{
  font-family: var(--font-display);
  font-size:.95rem; letter-spacing:.06em;
  color: var(--brass);
  text-align:center; margin-top:.6rem;
}
.player-score{
  font-family: var(--font-display);
  font-size: 4rem;
  line-height:1;
  color: var(--chalk);
  margin: .35rem 0;
}
.player-tag{
  display:inline-block;
  font-size:.7rem;
  letter-spacing:.12em;
  padding:.25rem .6rem;
  border-radius: 999px;
  background: rgba(242,237,225,.08);
  color: var(--chalk-dim);
}
.player-panel.is-active .player-tag{
  background: var(--brass); color:#241606; font-weight:600;
}
.player-panel.is-active .player-score{ color: var(--brass); }

.concede-row{
  display:flex; gap:.5rem; justify-content:center;
  margin-top:.7rem; position:relative; z-index:1;
}
.concede-row .btn{ font-size:.72rem; padding:.15rem .5rem; }

/* ---------- Центральная панель часов ---------- */
.clocks-panel{
  background: rgba(6,39,32,.5);
  border: 1px solid rgba(201,162,75,.35);
  border-radius: 20px;
  padding: 1.25rem 1rem;
  height:100%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.frame-clock-wrap{ width:100%; text-align:center; margin-bottom:1rem; }
.frame-clock-label{
  font-size:.72rem; letter-spacing:.15em; color: var(--chalk-dim); margin-bottom:.15rem;
}
.frame-clock{
  font-family: var(--font-display);
  font-size: 3rem;
  letter-spacing: .04em;
  color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.frame-clock.is-low{ color:#ff8a80; }
.frame-clock-bar{
  height:6px; border-radius: 4px; background: rgba(242,237,225,.12);
  overflow:hidden; margin-top:.35rem;
}
.frame-clock-bar-fill{
  height:100%; width:100%;
  background: linear-gradient(90deg, var(--brass), #7fd8a5);
  transition: width 1s linear, background .3s ease;
}

.shot-clock-wrap{ position:relative; width:140px; height:140px; }
.shot-clock-ring{ width:140px; height:140px; transform: rotate(-90deg); }
.shot-ring-bg{ fill:none; stroke: rgba(242,237,225,.12); stroke-width:10; }
.shot-ring-fg{
  fill:none; stroke: var(--brass); stroke-width:10; stroke-linecap: round;
  stroke-dasharray: 389.6; stroke-dashoffset:0;
  transition: stroke-dashoffset 1s linear, stroke .25s ease;
}
.shot-ring-fg.is-warning{ stroke: #ff8a80; }
.shot-clock-value{
  position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);
  font-family: var(--font-display); font-size:2.5rem; color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.shot-clock-caption{
  text-align:center; font-size:.7rem; letter-spacing:.1em; color: var(--chalk-dim);
  margin-top: -.35rem;
}
.control-row .btn{ font-size:.85rem; }

/* ---------- Ряд шаров ---------- */
.balls-row{
  display:flex; align-items:center; justify-content:center; gap:.65rem; flex-wrap:wrap;
}
.ball-btn{
  width:58px; height:58px; border-radius:50%; border:none;
  font-family: var(--font-display); font-weight:600; font-size:1.15rem;
  color:#fff; position:relative;
  box-shadow: inset -4px -6px 10px rgba(0,0,0,.35), inset 3px 4px 6px rgba(255,255,255,.25), 0 3px 6px rgba(0,0,0,.4);
  transition: transform .12s ease, box-shadow .12s ease;
}
.ball-btn:active{ transform: scale(.92); }
.ball-btn:hover{ transform: translateY(-2px); }
.ball-red{ background: var(--ball-red); }
.ball-yellow{ background: var(--ball-yellow); color:#241606; }
.ball-green{ background: var(--ball-green); }
.ball-brown{ background: var(--ball-brown); }
.ball-blue{ background: var(--ball-blue); }
.ball-pink{ background: var(--ball-pink); color:#241606; }
.ball-black{ background: var(--ball-black); }
.vr-divider{ width:1px; height:40px; background: rgba(242,237,225,.25); margin:0 .35rem; }

.small-log{ color: var(--chalk-dim); font-size:.85rem; min-height:1.4rem; }

/* ---------- Модалка результата ---------- */
.result-modal-content{
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-dark) 100%);
  border: 1px solid var(--brass);
  border-radius: 18px;
  color: var(--chalk);
}
.result-eyebrow{
  font-size:.75rem; letter-spacing:.2em; color: var(--brass);
}
.result-winner{
  font-family: var(--font-display); font-size:2.1rem; margin: .3rem 0;
}
.result-score{
  font-family: var(--font-display); font-size:1.6rem; color: var(--chalk-dim);
}

/* ---------- Панель игроков (offcanvas) ---------- */
.offcanvas{
  background: linear-gradient(180deg, var(--rail) 0%, var(--rail-dark) 100%);
  color: var(--chalk); border-left: 1px solid var(--brass-dark);
}
.offcanvas .btn-close{ filter: invert(1) grayscale(1) brightness(1.6); }
.table-players{ color: var(--chalk); }
.table-players th{ color: var(--chalk-dim); font-weight:500; font-size:.8rem; }
.table-players td{ border-color: rgba(242,237,225,.12); }
#historyList li{ border-bottom:1px dashed rgba(242,237,225,.15); padding: .35rem 0; color: var(--chalk-dim); }

/* ---------- Классический матч: полоса счёта по фреймам ---------- */
.match-score-strip{
  max-width: 640px;
  display:flex; align-items:center; justify-content:center; gap:.6rem;
  background: rgba(6,39,32,.5);
  border: 1px solid rgba(201,162,75,.35);
  border-radius: 999px;
  padding: .5rem 1.25rem;
  flex-wrap: wrap;
}
.match-score-name{
  font-size:.85rem; color: var(--chalk-dim); letter-spacing:.03em;
}
.match-score-frames{
  font-family: var(--font-display); font-size:1.5rem; color: var(--brass);
  min-width: 1.6rem; text-align:center;
}
.match-score-sep{ color: var(--chalk-dim); }
.match-score-bestof{
  font-size:.72rem; color: var(--chalk-dim); letter-spacing:.08em;
  border-left: 1px solid rgba(242,237,225,.2); padding-left:.75rem; margin-left:.25rem;
}

.player-break{
  font-size:.8rem; color: var(--brass); letter-spacing:.03em; margin-bottom:.35rem;
}

.phase-badge{
  font-family: var(--font-display);
  letter-spacing:.12em; font-size:.85rem;
  color:#241606; background: var(--brass);
  border-radius: 999px; padding:.3rem .9rem; margin-bottom:1rem;
}
.table-state-row{
  display:flex; gap:1.5rem; justify-content:center; margin-bottom:.5rem;
}
.table-state-item{ text-align:center; }
.table-state-value{
  font-family: var(--font-display); font-size:2.1rem; color: var(--chalk);
  font-variant-numeric: tabular-nums;
}
.table-state-label{
  font-size:.68rem; letter-spacing:.08em; color: var(--chalk-dim);
}
.snookers-note{
  min-height: 1.2rem; font-size:.8rem; color:#ff8a80; text-align:center; margin-top:.25rem;
}

.ball-btn.is-disabled{
  opacity:.3; cursor:not-allowed; filter:grayscale(.5);
}
.ball-btn.is-disabled:hover{ transform:none; }

/* ---------- Мобильная адаптация ---------- */
@media (max-width: 991.98px){
  .player-name{ font-size:1.3rem; }
  .player-score{ font-size:3rem; }
  .frame-clock{ font-size:2.4rem; }
  .shot-clock-wrap{ width:120px; height:120px; }
  .shot-clock-ring{ width:120px; height:120px; }
  .shot-clock-value{ font-size:2rem; }
  .ball-btn{ width:50px; height:50px; font-size:1rem; }
}

@media (prefers-reduced-motion: reduce){
  .frame-clock-bar-fill, .shot-ring-fg, .player-panel{ transition:none !important; }
}