:root {
  --bg: #0f0a1e;
  --bg2: #1a1030;
  --surface: rgba(255,255,255,.07);
  --surface2: rgba(255,255,255,.11);
  --border: rgba(255,255,255,.12);
  --text: #f0eaff;
  --text2: rgba(240,234,255,.6);
  --gold: #FFC845;
  --gold2: #ffda7b;
  --radius: 16px;
  --radius-sm: 10px;
  --font: 'Fredoka', 'Nunito', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
}

/* ── SCREENS ───────────────────────────────────────── */
.screen {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: max(16px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
  overflow: hidden;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .25s, transform .25s;
}
.screen.active {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.scroll-screen {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── BACK LINK ─────────────────────────────────────── */
.back-link {
  position: absolute;
  top: max(14px, env(safe-area-inset-top));
  left: 14px;
  background: rgba(255,255,255,.1);
  border: 1.5px solid rgba(255,255,255,.2);
  color: rgba(255,255,255,.8);
  font-family: var(--font);
  font-size: 14px;
  font-weight: 600;
  border-radius: var(--radius-sm);
  padding: 7px 14px;
  text-decoration: none;
  transition: background .15s;
}
.back-link:active { background: rgba(255,255,255,.2); }

/* ── SETUP ─────────────────────────────────────────── */
.setup-header {
  margin-top: 32px;
  text-align: center;
  margin-bottom: 20px;
  position: relative;
  width: 100%;
  max-width: 420px;
  padding: 28px 20px 20px;
  border-radius: 20px;
  overflow: hidden;
  background: rgba(255,255,255,.03);
}

/* Диагональные полосы как на коробке Phase 10 */
.setup-header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -42deg,
    transparent 38%,
    #c0392b 38%, #c0392b 47%,
    #2563c7 47%, #2563c7 56%,
    #27a844 56%, #27a844 65%,
    #d4a017 65%, #d4a017 74%,
    transparent 74%
  );
  opacity: 0.28;
  pointer-events: none;
}

.game-logo {
  font-size: 56px;
  line-height: 1;
  margin-bottom: 6px;
  position: relative;
  z-index: 1;
}
.game-title {
  font-size: clamp(30px, 9vw, 52px);
  font-weight: 700;
  color: #fff;
  text-shadow: 0 2px 12px rgba(0,0,0,.8);
  line-height: 1.1;
  position: relative;
  z-index: 1;
  letter-spacing: -1px;
}
.game-subtitle {
  font-size: 14px;
  color: rgba(255,255,255,.55);
  margin-top: 4px;
  position: relative;
  z-index: 1;
}

.players-list {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 36vh;
}

.player-setup-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 12px;
  animation: fadeIn .2s ease;
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } }

.player-photo-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  overflow: hidden;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 2px rgba(255,255,255,.2);
  transition: transform .15s;
}
.player-photo-btn:active { transform: scale(.9); }
.photo-edit-badge {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.38);
  font-size: 14px;
  opacity: 0;
  border-radius: 50%;
  transition: opacity .15s;
}
.player-photo-btn:hover .photo-edit-badge { opacity: 1; }

.player-name-input {
  flex: 1;
  background: none;
  border: none;
  color: var(--text);
  font-family: var(--font);
  font-size: 16px;
  font-weight: 600;
  outline: none;
  min-width: 0;
}
.player-name-input::placeholder { color: var(--text2); }

.order-btns {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex-shrink: 0;
}
.order-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 12px;
  border-radius: 5px;
  width: 26px;
  height: 22px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
  padding: 0;
  line-height: 1;
}
.order-btn:disabled { opacity: .2; cursor: default; pointer-events: none; }
.order-btn:not(:disabled):active { background: rgba(255,255,255,.25); }

.btn-remove {
  background: none;
  border: none;
  color: rgba(255,255,255,.4);
  font-size: 18px;
  cursor: pointer;
  padding: 4px;
  line-height: 1;
  border-radius: 50%;
  transition: color .15s, background .15s;
}
.btn-remove:active { color: #ff6b6b; background: rgba(255,107,107,.1); }

.setup-actions {
  width: 100%;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 14px;
}

.phases-reference {
  width: 100%;
  max-width: 400px;
  margin-top: 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.phases-ref-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 8px;
}
.phases-ref-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.phases-ref-item {
  display: flex;
  flex-direction: column;
  padding: 4px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.phases-ref-item .pnum {
  color: var(--gold);
  font-weight: 700;
  margin-right: 4px;
  font-size: 11px;
}
.phases-ref-item .pru {
  font-size: 11px;
  color: var(--text);
  font-weight: 600;
}
.phases-ref-item .pde {
  font-size: 10px;
  color: rgba(240,234,255,.35);
  margin-top: 1px;
  font-style: italic;
}

/* ── COMPANY PHOTO STRIP ────────────────────────────── */
.company-photo-strip {
  width: 100%;
  max-width: 480px;
  height: 92px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  flex-shrink: 0;
  margin-bottom: 4px;
  border: 2px solid transparent;
  animation: strip-aurora 5s linear infinite;
  background-size: cover;
  background-position: center;
}

/* Та же фотка увеличенная + полупрозрачная за основным изображением */
.company-photo-strip::after {
  content: '';
  position: absolute;
  inset: -20px;
  background: inherit;
  background-size: 160%;
  background-position: center;
  filter: blur(3px) brightness(0.6);
  opacity: 0.75;
  z-index: 0;
}

/* Радужное свечение по краям */
@keyframes strip-aurora {
  0%   { border-color: #6bcb77; box-shadow: 0 0 14px 3px rgba(107,203,119,.55) }
  17%  { border-color: #4d96ff; box-shadow: 0 0 14px 3px rgba(77,150,255,.55) }
  33%  { border-color: #c77dff; box-shadow: 0 0 14px 3px rgba(199,125,255,.55) }
  50%  { border-color: #ff6b6b; box-shadow: 0 0 14px 3px rgba(255,107,107,.55) }
  67%  { border-color: #ffd93d; box-shadow: 0 0 14px 3px rgba(255,217,61,.55) }
  83%  { border-color: #ff9a3c; box-shadow: 0 0 14px 3px rgba(255,154,60,.55) }
  100% { border-color: #6bcb77; box-shadow: 0 0 14px 3px rgba(107,203,119,.55) }
}

/* Бликовый sweep по фото каждые 5 сек */
.company-photo-strip::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(108deg,
    transparent 30%,
    rgba(255,255,255,.15) 48%,
    rgba(255,255,255,.22) 50%,
    rgba(255,255,255,.15) 52%,
    transparent 70%
  );
  background-size: 250% 100%;
  background-position: -100% 0;
  animation: strip-shimmer 5s ease-in-out infinite;
  z-index: 2;
  pointer-events: none;
}

@keyframes strip-shimmer {
  0%   { background-position: -100% 0 }
  45%  { background-position: -100% 0 }
  65%  { background-position: 250% 0 }
  100% { background-position: 250% 0 }
}

.company-photo-strip img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  background: transparent;
  display: block;
  position: relative;
  z-index: 1;
}
.company-photo-expand {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  background: rgba(0,0,0,.55);
  border: none;
  color: #fff;
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 3;
}

/* ── FULLSCREEN PHOTO ───────────────────────────────── */
.photo-fullscreen {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-fullscreen img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  border-radius: 8px;
}
.photo-fullscreen button {
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
}

/* ── BOARD HEADER ──────────────────────────────────── */
.board-header {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 12px;
  flex-shrink: 0;
}
.board-round {
  font-size: 17px;
  font-weight: 700;
  color: var(--gold);
}
.icon-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s;
  flex-shrink: 0;
}
.icon-btn:active { background: var(--surface2); }

/* ── PLAYERS BOARD ─────────────────────────────────── */
.players-board {
  width: 100%;
  max-width: 480px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

.player-board-card {
  border: 2px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: transform .12s, box-shadow .15s;
  animation: fadeIn .25s ease;
  overflow: hidden;
  padding: 0;
  background: #0e0e0e;
}
.player-board-card:active { transform: scale(.98); }
.player-board-card.is-winner { border-style: dashed; }

/* ── РУБАШКА ─────────────────────── */
.card-shell {
  position: relative;
  min-height: 90px;
}

/* Цветные полосы справа — как на настоящей рубашке Phase 10 */
.card-stripes {
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 18px;
  display: flex;
  flex-direction: column;
  z-index: 1;
}
.cs-stripe { flex: 1; }

/* Водяной знак Phase10 */
.card-wm {
  position: absolute;
  bottom: 6px;
  left: 12px;
  font-size: 10px;
  font-weight: 900;
  color: rgba(255,255,255,.07);
  letter-spacing: .5px;
  text-transform: uppercase;
  pointer-events: none;
  z-index: 0;
  font-family: Impact, 'Arial Black', sans-serif;
  white-space: nowrap;
}
.card-wm span { font-style: italic; }

/* Контент поверх рубашки */
.card-body {
  position: relative;
  z-index: 2;
  padding: 14px 28px 14px 14px; /* правый отступ для полосок */
}

.player-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.player-card-left {
  display: flex;
  align-items: center;
  gap: 10px;
}
.player-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
  font-weight: 700;
  color: rgba(0,0,0,.7);
  flex-shrink: 0;
}
.player-avatar.sm { width: 28px; height: 28px; font-size: 13px; }
.player-card-name { font-size: 17px; font-weight: 700; }
.player-card-rank { font-size: 20px; }

.player-card-right { text-align: right; }
.player-card-score {
  font-size: 22px;
  font-weight: 700;
  line-height: 1;
}
.player-card-score-label { font-size: 11px; color: var(--text2); margin-top: 1px; }

/* Phase progress bar */
.phase-bar {
  display: flex;
  gap: 4px;
  margin-bottom: 6px;
}
.phase-dot {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.1);
  transition: background .3s, transform .2s;
}
.phase-dot.done { }
.phase-dot.current { animation: pulse-dot 1.5s ease-in-out infinite; }
@keyframes pulse-dot {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

.phase-info {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: var(--text2);
}
.phase-info-num { font-weight: 700; font-size: 13px; }
.phase-info-desc { font-size: 11px; }

/* ── PHASE VISUAL ───────────────────────────────────── */
.phase-visual {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
}

.phase-group { display: flex; }

.phase-group-cards {
  display: flex;
  align-items: flex-end;
}

.pv-plus {
  color: rgba(255,255,255,.35);
  font-size: 12px;
  font-weight: 700;
  line-height: 19px;
  flex-shrink: 0;
}

.mcard {
  width: 13px;
  height: 19px;
  border-radius: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 7px;
  font-weight: 800;
  margin-left: -4px;
  flex-shrink: 0;
  box-shadow: 0 1px 4px rgba(0,0,0,.4);
}
.mcard:first-child { margin-left: 0; }

.mcard--set {
  background: rgba(0,0,0,.55);
  border: 1.5px solid currentColor;
  animation: mcard-in .32s cubic-bezier(.34,1.56,.64,1) both,
             mcard-bob 2.8s ease-in-out infinite;
}

.mcard--run {
  border: 1.5px solid rgba(255,255,255,.22);
  animation: mcard-in .32s cubic-bezier(.34,1.56,.64,1) both,
             mcard-wave 2s ease-in-out infinite;
}

.mcard--clr {
  border: 1.5px solid rgba(255,255,255,.22);
  animation: mcard-in .32s cubic-bezier(.34,1.56,.64,1) both,
             mcard-clr-glow 2.2s ease-in-out infinite;
}

@keyframes mcard-in {
  from { transform: translateY(9px) scale(0.35) rotate(-14deg); }
  to   { transform: translateY(0) scale(1) rotate(0deg); }
}

@keyframes mcard-bob {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2px); }
}

@keyframes mcard-wave {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-2.5px); }
}

@keyframes mcard-clr-glow {
  0%, 100% { box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 4px var(--mc-glow, transparent); }
  50%       { box-shadow: 0 1px 4px rgba(0,0,0,.4), 0 0 11px var(--mc-glow, transparent), 0 0 22px var(--mc-glow, transparent); }
}

.rank-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 20px;
  background: rgba(255,255,255,.08);
  color: var(--text2);
}

/* ── BOARD FOOTER ──────────────────────────────────── */
.board-footer {
  width: 100%;
  max-width: 480px;
  padding-top: 10px;
  flex-shrink: 0;
}

/* ── ROUND INPUT ───────────────────────────────────── */
.round-players {
  width: 100%;
  max-width: 480px;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-bottom: 4px;
}

.round-player-card {
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius);
  padding: 14px;
  animation: fadeIn .2s ease;
}

.round-player-top {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.round-player-info { flex: 1; }
.round-player-name { font-size: 16px; font-weight: 700; }
.round-player-phase { font-size: 12px; color: var(--text2); margin-top: 1px; }

/* Phase toggle */
.phase-toggle-wrap { margin-bottom: 12px; }
.phase-toggle {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 10px 14px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  border: 1.5px solid rgba(255,255,255,.1);
  transition: background .15s, border-color .2s;
}
.phase-toggle.checked {
  background: rgba(107,203,119,.12);
  border-color: #6BCB77;
}
.phase-toggle-box {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  border: 2px solid rgba(255,255,255,.3);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  transition: background .15s, border-color .15s;
  flex-shrink: 0;
}
.phase-toggle.checked .phase-toggle-box {
  background: #6BCB77;
  border-color: #6BCB77;
}
.phase-toggle-label { font-size: 14px; font-weight: 600; }

/* Points input */
.points-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.points-label { font-size: 13px; color: var(--text2); flex: 1; }
.points-controls {
  display: flex;
  align-items: center;
  gap: 6px;
}
.pts-btn {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px;
  padding: 6px 10px;
  cursor: pointer;
  transition: background .12s;
  min-width: 36px;
  text-align: center;
}
.pts-btn:active { background: rgba(255,255,255,.2); }
.pts-btn.big { min-width: 44px; }
.points-display {
  font-size: 26px;
  font-weight: 700;
  min-width: 52px;
  text-align: center;
  color: var(--gold);
}

/* ── STATS ─────────────────────────────────────────── */
.stats-content {
  width: 100%;
  max-width: 480px;
  padding-bottom: 30px;
}

.stats-leader-card {
  background: linear-gradient(135deg, rgba(255,200,69,.12), rgba(255,107,107,.08));
  border: 1.5px solid rgba(255,200,69,.3);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
  margin-bottom: 16px;
}
.stats-leader-label { font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; color: var(--text2); margin-bottom: 4px; }
.stats-leader-name { font-size: 28px; font-weight: 700; margin: 4px 0; }
.stats-leader-hint { font-size: 13px; color: var(--text2); }

.stats-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 20px;
}
@media (max-width: 340px) { .stats-grid { grid-template-columns: 1fr; } }

.stats-player-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px;
}
.stats-player-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.stats-player-name { font-size: 14px; font-weight: 700; }
.stats-row {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  padding: 3px 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
}
.stats-row:last-child { border-bottom: none; }
.stats-row span:first-child { color: var(--text2); }
.stats-row span:last-child { font-weight: 700; }
.stats-row.highlight span:last-child { color: var(--gold); }

.forecast-bar-wrap { margin-top: 8px; }
.forecast-label { font-size: 11px; color: var(--text2); margin-bottom: 4px; display: flex; justify-content: space-between; }
.forecast-bar {
  height: 6px;
  border-radius: 3px;
  background: rgba(255,255,255,.08);
  overflow: hidden;
}
.forecast-bar-fill {
  height: 100%;
  border-radius: 3px;
  transition: width .5s ease;
}

.stats-section-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--text2);
  margin-bottom: 10px;
}

.history-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.history-round {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.history-round-title {
  font-size: 12px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 6px;
}
.history-results { display: flex; flex-direction: column; gap: 3px; }
.history-result {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
}
.history-result .done { color: #6BCB77; }
.history-result .miss { color: rgba(255,255,255,.4); }

/* ── WINNER ─────────────────────────────────────────── */
/* Диагональные полосы Phase 10 на экране победителя */
#screen-winner::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    -42deg,
    transparent 20%,
    #c0392b 20%, #c0392b 32%,
    #2563c7 32%, #2563c7 44%,
    #27a844 44%, #27a844 56%,
    #d4a017 56%, #d4a017 68%,
    transparent 68%
  );
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.winner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
  max-width: 400px;
  padding-top: 20px;
  overflow-y: auto;
  position: relative;
  z-index: 1;
}
.winner-trophy {
  font-size: 80px;
  line-height: 1;
  animation: trophy-bounce 1s ease forwards;
}
@keyframes trophy-bounce {
  0% { transform: scale(0) rotate(-15deg); opacity: 0; }
  60% { transform: scale(1.15) rotate(5deg); }
  100% { transform: scale(1) rotate(0); opacity: 1; }
}
.winner-label {
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--text2);
  margin-top: 10px;
}
.winner-name {
  font-size: clamp(30px, 10vw, 52px);
  font-weight: 700;
  margin: 6px 0 4px;
  line-height: 1.1;
}
.winner-stats {
  font-size: 14px;
  color: var(--text2);
  margin-bottom: 20px;
}

.final-table {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.final-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.final-rank { font-size: 20px; width: 28px; flex-shrink: 0; }
.final-name { flex: 1; font-size: 15px; font-weight: 700; text-align: left; }
.final-phase { font-size: 12px; color: var(--text2); }
.final-score { font-size: 16px; font-weight: 700; color: var(--gold); }

/* ── CONFETTI ───────────────────────────────────────── */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.confetti-piece {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 14px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}
@keyframes confetti-fall {
  to { transform: translateY(110vh) rotate(720deg); opacity: 0; }
}

/* ── PHASE OVERLAY ──────────────────────────────────── */
.phase-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 100;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: 0 16px 30px;
}
.phase-overlay-card {
  background: var(--bg2);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  width: 100%;
  max-width: 400px;
  max-height: 80vh;
  overflow-y: auto;
}
.overlay-player-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
}
.overlay-player-name { font-size: 20px; font-weight: 700; }
.overlay-phases {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.overlay-phase {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  border-radius: var(--radius-sm);
  background: rgba(255,255,255,.05);
  font-size: 13px;
}
.overlay-phase.done { background: rgba(107,203,119,.1); }
.overlay-phase.current { background: rgba(255,200,69,.12); border: 1px solid rgba(255,200,69,.3); }
.overlay-phase-num {
  font-size: 12px;
  font-weight: 700;
  width: 20px;
  flex-shrink: 0;
}
.overlay-phase-desc { flex: 1; }
.overlay-phase-status { font-size: 14px; }

/* ── BUTTONS ────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 700;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  padding: 14px 20px;
  transition: transform .12s, opacity .12s;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.96); }
.btn-primary {
  background: linear-gradient(120deg, #FFC845, #ff6b6b);
  color: #1a0a20;
}
.btn-ghost {
  background: var(--surface);
  border: 1.5px solid var(--border);
  color: var(--text);
}
.btn-wide { width: 100%; }

/* ── ORDER OVERLAY ─────────────────────────────────── */
.order-overlay-list { display: flex; flex-direction: column; gap: 8px; }
.order-row {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
}
.order-name { flex: 1; font-size: 15px; font-weight: 700; }
.order-name-col { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.order-name-inp {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 6px;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: inherit;
  padding: 4px 8px;
  width: 100%;
  outline: none;
}
.order-name-inp:focus { border-color: var(--gold); background: rgba(255,200,69,.08); }
.order-badges { display: flex; gap: 4px; }

/* ── DEALER PICK (SETUP) ───────────────────────────── */
.dealer-pick-row {
  width: 100%;
  max-width: 400px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin-bottom: 4px;
}
.dealer-pick-label { font-size: 13px; font-weight: 700; color: var(--text2); }
.dealer-pick-ctrl {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dealer-pick-ctrl span {
  font-size: 15px;
  font-weight: 700;
  min-width: 60px;
  text-align: center;
}
.dealer-arr {
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 18px;
  font-weight: 700;
  border-radius: 8px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .12s;
}
.dealer-arr:active { background: rgba(255,255,255,.2); }

/* ── DEALER INFO BAR (BOARD) ───────────────────────── */
.dealer-info-bar {
  width: 100%;
  max-width: 480px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 20px;
  padding: 7px 14px;
  margin-bottom: 8px;
  flex-shrink: 0;
  font-size: 13px;
  cursor: pointer;
  transition: background .15s;
  -webkit-tap-highlight-color: transparent;
}
.dealer-info-bar:active { background: rgba(255,255,255,.1); }
.dib-sep { color: var(--text2); opacity: .4; }
.dib-next {
  margin-left: auto;
  font-size: 16px;
  color: rgba(255,255,255,.35);
  font-weight: 700;
}

/* ── TURN BADGE (ON CARD) ──────────────────────────── */
.turn-badge {
  display: inline-flex;
  align-items: center;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 20px;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: .2px;
}

/* ── MIDGAME SETUP ─────────────────────────────────── */
.midgame-hint {
  font-size: 13px;
  color: var(--text2);
  text-align: center;
  padding: 0 16px 12px;
  flex-shrink: 0;
}

.phase-sel-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.phase-sel-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1.5px solid rgba(255,255,255,.15);
  background: rgba(255,255,255,.06);
  color: var(--text2);
  font-family: var(--font);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: background .12s, color .12s, transform .1s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.phase-sel-btn:active { transform: scale(.9); }
.phase-sel-btn.active { color: #000; font-weight: 800; }

.midgame-field { margin-bottom: 12px; }
.midgame-field label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text2);
  display: block;
  margin-bottom: 4px;
}

/* ── TOAST ─────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 80px;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: rgba(20,10,40,.95);
  border: 1.5px solid rgba(255,200,69,.4);
  color: var(--text);
  font-family: var(--font);
  font-size: 15px;
  font-weight: 700;
  padding: 12px 20px;
  border-radius: 30px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 200;
  transition: opacity .25s, transform .25s;
  max-width: 90vw;
  text-align: center;
}
.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ── CELEBRATE FLASH ────────────────────────────────── */
@keyframes celebrate-flash {
  0% { box-shadow: 0 0 0 0px rgba(255,200,69,.6); }
  50% { box-shadow: 0 0 0 12px rgba(255,200,69,0); }
  100% { box-shadow: 0 0 0 0px rgba(255,200,69,0); }
}
.celebrating { animation: celebrate-flash .6s ease-out; }

/* ── ЗАЛ СЛАВЫ ─────────────────────────────────────── */
.hall-content {
  padding: 16px;
  padding-bottom: 40px;
}
.hall-section-title {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
  margin-bottom: 10px;
}
.hall-leaders { display: flex; flex-direction: column; gap: 8px; }
.hall-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 12px 14px;
}
.hall-medal { font-size: 20px; width: 28px; text-align: center; flex-shrink: 0; }
.hall-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.hall-info { flex: 1; min-width: 0; }
.hall-name { font-size: 15px; font-weight: 800; }
.hall-sub { font-size: 12px; color: rgba(255,255,255,.45); margin-top: 2px; }
.hall-wins { font-size: 18px; font-weight: 800; color: var(--gold); flex-shrink: 0; }

.hall-recent { display: flex; flex-direction: column; gap: 6px; }
.hall-game-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--surface);
  border-radius: var(--radius-sm);
  font-size: 13px;
}
.hall-game-date { color: rgba(255,255,255,.4); flex-shrink: 0; width: 34px; }
.hall-game-winner { flex: 1; font-weight: 700; }
.hall-game-rounds { color: rgba(255,255,255,.4); flex-shrink: 0; }
.hall-empty { color: rgba(255,255,255,.35); text-align: center; padding: 24px 0; font-size: 14px; }

.hall-game-card {
  background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
  margin-bottom: 8px;
}
.hall-game-photo { width: 100%; aspect-ratio: 4/3; overflow: hidden; }
.hall-game-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hall-game-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  background: none;
  border: none;
  border-radius: 0;
  margin-bottom: 0;
}

/* ── ГРУППОВОЕ ФОТО НА SETUP ─────────────────────────── */
.game-photo-preview {
  width: 100%;
  max-width: 400px;
  border-radius: var(--radius);
  overflow: hidden;
  position: relative;
  margin-bottom: 8px;
}
.game-photo-preview img {
  width: 100%;
  display: block;
  border-radius: var(--radius);
}
.game-photo-remove {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(0,0,0,.6);
  border: none;
  color: #fff;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}