* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; font-family: system-ui, -apple-system, "Segoe UI", sans-serif; background: #0b0f1a; color: #eaeef7; }
body { overscroll-behavior: none; }

button {
  font: inherit; cursor: pointer; border-radius: 10px;
  border: 1px solid #3b4a6b; background: #1b2540; color: #eaeef7;
  padding: 10px 14px; min-height: 40px;
  transition: transform .05s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.45; cursor: default; }
button.primary { background: #1f3a63; border-color: #3f6ea9; }
button.warn { background: #6b4a1b; border-color: #a07429; }
button.danger { background: #6b1b1b; border-color: #a02929; }
button[hidden] { display: none !important; }

input, textarea {
  font: inherit; padding: 10px 12px; border-radius: 10px;
  border: 1px solid #3b4a6b; background: #131a2b; color: #eaeef7;
  width: 100%; max-width: 100%;
}
input:focus, textarea:focus { outline: 2px solid #3f6ea9; outline-offset: 0; }

#app { height: 100%; display: flex; flex-direction: column; }
.screen { display: none; flex: 1; flex-direction: column; min-height: 0; }
.screen.active { display: flex; }

/* --- Авторизация ведущего --- */
.auth-overlay {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 50% 30%, #1a2540, #070b14);
  padding: 20px;
}
.auth-card {
  background: #131a2b; border: 1px solid #26314d; border-radius: 14px;
  padding: 22px; width: 100%; max-width: 340px;
  display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 20px 60px #00000080;
}
.auth-card h2 { margin: 0 0 4px; font-size: 18px; }
.auth-card input { font-size: 18px; padding: 14px 16px; text-align: center; letter-spacing: 0.2em; }
.auth-error { color: #ff9a9a; font-size: 13px; min-height: 18px; text-align: center; }

/* --- Игрок --- */
#join { align-items: center; justify-content: center; gap: 14px; padding: 20px; text-align: center; }
#join h1 { margin: 0 0 8px; font-size: clamp(22px, 6vw, 32px); }
#join input { max-width: 340px; font-size: 18px; padding: 14px 16px; }
#join button { max-width: 340px; width: 100%; padding: 16px; font-size: 18px; }

.hud {
  display: flex; justify-content: space-between; align-items: center;
  padding: 10px 16px; background: #131a2b; font-size: 18px;
  border-bottom: 1px solid #26314d;
}
.hud-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hud-score { font-variant-numeric: tabular-nums; font-weight: 700; color: #7fd18a; }

#stage {
  position: relative;
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: 12px; min-height: 0;
}

/* Обёртка центрирует кнопку и ограничивает её квадратом,
   чтобы кликабельная область совпадала с видимой картинкой. */
.buzz-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0;
  container-type: size;
}

/* Кнопка-картинка: квадрат со стороной = min(ширина, высота) контейнера. */
.buzz-img {
  width: min(100%, 100cqh, 100cqw);
  height: auto;
  aspect-ratio: 1 / 1;
  flex: 0 0 auto;

  padding: 0; margin: 0;
  border: none; border-radius: 50%;
  background: transparent url("/button.png") center/contain no-repeat;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  transition: filter .08s linear, transform .05s ease;
  image-rendering: -webkit-optimize-contrast;
  touch-action: manipulation;
}
.buzz-img.pressed { filter: invert(1); transform: scale(0.97); }
.buzz-img.inverted { filter: invert(1); }
.buzz-img:disabled { cursor: default; }

/* Баннер «Раунд!» — fixed поверх всего, сверху над кнопкой */
.round-banner {
  position: fixed;
  left: 0; right: 0;
  top: 12vh;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  user-select: none;
  z-index: 999;
  font-size: clamp(48px, 16vw, 160px);
  font-weight: 900;
  letter-spacing: 0.06em;
  color: #fff;
  text-shadow:
    0 0 18px #7fd18a,
    0 0 60px #7fd18a99,
    0 6px 30px #000000cc;
  animation: round-banner-fade 2s ease-out forwards;
}

@keyframes round-banner-fade {
  0%   { opacity: 0; transform: scale(0.55); }
  12%  { opacity: 1; transform: scale(1.08); }
  28%  { opacity: 1; transform: scale(1); }
  70%  { opacity: 1; transform: scale(1); }
  100% { opacity: 0; transform: scale(1.15); }
}

.answer-row { display: flex; flex-direction: column; gap: 10px; width: 100%; }
.answer-row textarea.answer {
  flex: 1; min-height: 180px; border-radius: 16px; padding: 16px;
  font-size: 20px; resize: none;
}
.answer-row button { align-self: flex-end; padding: 14px 22px; font-size: 18px; }
.bet-row { display: flex; flex-direction: column; gap: 12px; width: 100%; max-width: 420px; margin: auto; }
.bet-row input { font-size: 22px; padding: 16px; text-align: center; }
.bet-row button { font-size: 18px; padding: 16px; }
.bet-info { text-align: center; font-size: 15px; color: #7fd18a; opacity: 0.9; padding: 6px 0; }
.wait-screen { margin: auto; font-size: clamp(20px, 5vw, 32px); opacity: 0.8; text-align: center; padding: 20px; }

.players {
  display: flex; gap: 8px; flex-wrap: wrap;
  padding: 8px 12px; background: #0e1424;
  font-size: 14px; border-top: 1px solid #26314d;
}
.players .p { padding: 5px 9px; background: #1b2540; border-radius: 8px; }
.players .p.me { background: #234a2f; }
.players .p .sc { opacity: 0.8; margin-left: 6px; font-variant-numeric: tabular-nums; }

.status { padding: 6px 16px; opacity: 0.75; font-size: 13px; }
.status.small { font-size: 12px; }
.muted { opacity: 0.7; font-weight: 400; font-size: 13px; }

/* --- Ведущий --- */
body.host { overflow: auto; }
body.host #app { padding: 10px; gap: 10px; }
body.host header {
  display: flex; flex-wrap: wrap; gap: 10px;
  align-items: center; justify-content: space-between;
}
body.host h1 { margin: 0; font-size: 20px; }
.header-right { display: flex; gap: 8px; flex-wrap: wrap; }

.grid {
  display: grid; gap: 10px;
  grid-template-columns: 1fr 1.4fr;
  grid-template-areas: "buzz players" "answers bets";
}
.grid .panel:nth-child(1) { grid-area: buzz; }
.grid .panel:nth-child(2) { grid-area: players; }
.grid .panel:nth-child(3) { grid-area: answers; }
.grid .panel:nth-child(4) { grid-area: bets; }

@media (max-width: 900px) {
  .grid { grid-template-columns: 1fr; grid-template-areas: "players" "buzz" "answers" "bets"; }
}

.panel { background: #131a2b; border: 1px solid #26314d; border-radius: 12px; padding: 12px; min-width: 0; }
.panel h2 { margin: 0 0 8px; font-size: 15px; opacity: 0.85; }
#buzzList { margin: 0; padding-left: 22px; }
#buzzList li { font-size: 20px; padding: 3px 0; }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid #26314d; vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; opacity: .7; font-weight: 600; }
td .score { font-variant-numeric: tabular-nums; font-weight: 600; color: #7fd18a; }

.quick { display: flex; flex-wrap: wrap; gap: 4px; }
.quick button { padding: 6px 8px; font-size: 13px; min-height: 32px; }
.quick button.neg { background: #3a1b1b; border-color: #6b2a2a; }
.quick button.pos { background: #1b3a24; border-color: #2a6b3e; }

.set-row { display: flex; gap: 6px; align-items: center; }
.set-row input { max-width: 90px; padding: 6px 8px; }
.set-row button { padding: 6px 10px; min-height: 32px; }

#playersTable td:last-child { width: 40px; text-align: right; }
#playersTable button[data-act="remove"] {
  padding: 6px 10px; min-height: 32px;
  background: #3a1b1b; border-color: #6b2a2a;
  color: #ff9a9a; font-weight: 700;
}

#answersList .a { padding: 6px 8px; border-bottom: 1px solid #26314d; font-size: 15px; }
#answersList .a b { color: #7fd18a; }
#answersList .a:last-child { border-bottom: none; }

#betsList .b {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 6px 8px; border-bottom: 1px solid #26314d; font-size: 15px;
}
#betsList .b:last-child { border-bottom: none; }
#betsList .b b { color: #7fd18a; }
#betsList .b .val { font-variant-numeric: tabular-nums; font-weight: 700; }
#betsList .b .actions { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
#betsList .b button { padding: 5px 10px; min-height: 30px; font-size: 12px; }
#betsList .b button.pos { background: #1b3a24; border-color: #2a6b3e; }
#betsList .b button.neg { background: #3a1b1b; border-color: #6b2a2a; }
#betsList .b button.mute { background: #26314d; border-color: #3b4a6b; }

/* Бейдж текущего режима у ведущего */
.mode-badge {
  display: inline-block;
  margin-left: 10px;
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.03em;
  vertical-align: middle;
  border: 1px solid transparent;
}
.mode-badge[hidden] { display: none !important; }
.mode-badge.mode-button { background: #1b3a24; border-color: #2a6b3e; color: #9be3ad; }
.mode-badge.mode-answer { background: #1f3a63; border-color: #3f6ea9; color: #b8d2ff; }
.mode-badge.mode-bets   { background: #6b4a1b; border-color: #a07429; color: #ffd9a0; }
.mode-badge.mode-final  { background: #6b1b1b; border-color: #a02929; color: #ffb1b1; }

/* Кнопка «Праздник» у ведущего */
button.party {
  background: linear-gradient(135deg, #7a3aa0, #a03a7a);
  border-color: #b053b0;
  color: #ffe7fb;
  font-weight: 600;
}

/* === Праздник у игрока === */
.party-stage {
  position: relative;
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}

/* Тот же размер, что у обычной .buzz-wrap: квадрат по меньшей стороне #stage */
.party-img-wrap {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  min-height: 0; min-width: 0;
  container-type: size;
  animation: party-spin 3.6s linear infinite;
  will-change: transform, filter;
  filter: drop-shadow(0 0 30px #ffffff33);
}

.party-img {
  width: min(100%, 100cqh, 100cqw);
  height: auto;
  aspect-ratio: 1 / 1;
  background: transparent url("/button.png") center/contain no-repeat;
  animation: party-rainbow 3.2s linear infinite;
  will-change: filter;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
}

/* Подпись — поверх, снизу, не сжимает картинку */
.party-congrats {
  position: absolute;
  left: 0; right: 0; bottom: 12px;
  padding: 0 16px;
  text-align: center;
  font-size: clamp(18px, 4vw, 34px);
  font-weight: 800;
  line-height: 1.2;
  text-shadow: 0 2px 14px #000000cc, 0 0 30px #00000088;
  pointer-events: none;
}
.party-congrats .who { color: #ffd76a; }
.party-congrats .pts { color: #7fd18a; font-variant-numeric: tabular-nums; }
.party-congrats .sub {
  display: block; margin-top: 6px;
  font-size: 0.5em; font-weight: 500;
  opacity: 0.85;
}

@keyframes party-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
@keyframes party-rainbow {
  0%   { filter: hue-rotate(0deg)    saturate(1.4) brightness(1.05); }
  100% { filter: hue-rotate(360deg)  saturate(1.4) brightness(1.05); }
}

/* --- Mobile --- */
@media (max-width: 640px) {
  body.host #app { padding: 8px; gap: 8px; }
  body.host h1 { font-size: 17px; }
  body.host header { gap: 6px; }
  .header-right { width: 100%; }
  .header-right button { flex: 1 1 calc(50% - 6px); padding: 10px; font-size: 13px; }
  .panel { padding: 10px; }
  th, td { padding: 5px 6px; font-size: 13px; }
  th { font-size: 11px; }
  #buzzList li { font-size: 17px; }
  .quick button { padding: 6px; font-size: 12px; min-height: 30px; }
  .set-row input { max-width: 70px; padding: 5px 6px; font-size: 13px; }
  .set-row button { padding: 5px 8px; font-size: 12px; min-height: 30px; }

  #playersTable thead { display: none; }
  #playersTable tr {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 6px; padding: 8px 0;
    border-bottom: 1px solid #26314d;
  }
  #playersTable td { border: none; padding: 2px 0; }
  #playersTable td:nth-child(1) { grid-column: 1; font-weight: 600; }
  #playersTable td:nth-child(2) { grid-column: 2; text-align: right; }
  #playersTable td:nth-child(3) { grid-column: 1 / -1; }
  #playersTable td:nth-child(4) { grid-column: 1 / -1; }
  #playersTable td:nth-child(5) {
    grid-column: 2; grid-row: 1;
    justify-self: end; align-self: start;
    width: auto;
  }
  #playersTable tbody tr:last-child { border-bottom: none; }

  #betsList .b { font-size: 14px; }
  #betsList .b .actions { margin-left: 0; width: 100%; }
  #betsList .b button { flex: 1 1 calc(50% - 4px); }
}