/* Оформление под настольную игру: дерево, пергамент, тёплые тона. */
:root {
  --wood: #6b4f34;
  --wood-dark: #4a3523;
  --wood-light: #8a6844;
  --parch: #efe0c0;
  --parch-dark: #d9c49b;
  --ink: #3a2a19;
  --ink-soft: #6d5942;
  --gold: #c8a24a;
  --green: #4e7f43;
  --red: #b4462f;
  --radius: 12px;
  --shadow: 0 10px 28px rgba(0, 0, 0, .45);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: "Segoe UI", system-ui, Arial, sans-serif;
  background: #1c2027;
  color: var(--ink);
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
}

.screen { position: fixed; inset: 0; }
.hidden { display: none !important; }

/* ── лобби ── */
#lobby {
  display: flex; align-items: center; justify-content: center;
  background:
    radial-gradient(circle at 50% 15%, rgba(200, 162, 74, .18), transparent 55%),
    linear-gradient(160deg, #2a2118, #17130e 70%);
  overflow: auto; padding: 16px;
}

.panel {
  width: min(520px, 100%);
  padding: 26px;
  border-radius: 18px;
  background: linear-gradient(180deg, var(--parch), var(--parch-dark));
  border: 3px solid var(--wood);
  box-shadow: var(--shadow), inset 0 0 40px rgba(160, 120, 60, .25);
}

h1 {
  margin: 0 0 4px; font-size: 32px; letter-spacing: .5px;
  color: var(--wood-dark); text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
}
.sub { margin: 0 0 18px; color: var(--ink-soft); }
.hint { color: var(--ink-soft); font-size: 14px; margin: 12px 0 6px; }

label { display: block; margin: 12px 0; font-size: 15px; color: var(--ink); }
input:not([type=checkbox]) {
  width: 100%; margin-top: 6px; padding: 12px 14px; font-size: 17px;
  background: #fffaf0; color: var(--ink);
  border: 2px solid var(--wood-light); border-radius: var(--radius);
}
input:focus { outline: 2px solid var(--gold); }

.check { display: flex; align-items: center; gap: 10px; font-size: 15px; margin: 8px 0; }
.check input { width: 20px; height: 20px; accent-color: var(--green); }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 12px; }
.tab {
  flex: 1 1 120px; padding: 10px 6px; border-radius: var(--radius); cursor: pointer; font-size: 15px;
  background: rgba(107, 79, 52, .12); color: var(--ink-soft);
  border: 2px solid transparent;
}
.tab.active { background: var(--wood); color: var(--parch); border-color: var(--wood-dark); font-weight: 600; }

button.big {
  width: 100%; margin-top: 18px; padding: 14px; font-size: 18px; font-weight: 700;
  background: linear-gradient(180deg, #5f9450, var(--green));
  color: #fff; border: 2px solid #37592f; border-radius: var(--radius); cursor: pointer;
  box-shadow: 0 4px 0 #37592f;
}
button.big:active { transform: translateY(2px); box-shadow: 0 2px 0 #37592f; }
button:disabled { opacity: .5; cursor: default; box-shadow: none; }

.code-box {
  margin: 14px 0; padding: 12px; text-align: center; font-size: 17px;
  background: rgba(107, 79, 52, .12); border-radius: var(--radius); color: var(--ink-soft);
}
.code-box b { font-size: 28px; color: var(--wood-dark); letter-spacing: 3px; }

#players { list-style: none; padding: 0; margin: 10px 0; }
#players li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px; border-radius: 10px;
  background: rgba(255, 250, 240, .6); border: 1px solid rgba(107, 79, 52, .25);
}
.dot { width: 15px; height: 15px; border-radius: 50%; border: 2px solid rgba(0,0,0,.25); background: #999; }
.off { opacity: .45; }
.error { color: var(--red); min-height: 20px; margin: 10px 0 0; font-weight: 600; }

/* ── список активных партий ── */
#rooms-list { display: flex; flex-direction: column; gap: 10px; max-height: 46vh; overflow: auto; }

.room-card {
  padding: 12px; border-radius: var(--radius);
  background: rgba(255, 250, 240, .6); border: 2px solid rgba(107, 79, 52, .35);
}
.room-card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.room-card-head b { font-size: 21px; letter-spacing: 2px; color: var(--wood-dark); }
.room-card-head .hint { margin: 0; }

.room-card-players { list-style: none; padding: 0; margin: 8px 0 0; }
.room-card-players li {
  display: flex; align-items: center; gap: 8px; font-size: 14px; padding: 4px 0;
}
.room-card-players .nm { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.room-card-players .pts { font-weight: 800; color: var(--wood-dark); }
.room-card-players .offline-mark { font-size: 12px; color: var(--ink-soft); font-style: italic; }
.room-card .wood-btn { margin-top: 10px; }
.room-card-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.room-card-actions .wood-btn { flex: 1 1 120px; width: auto; }
.wood-btn.danger {
  background: linear-gradient(180deg, rgba(180, 70, 47, .55), rgba(180, 70, 47, .8));
  border-color: rgba(122, 45, 29, .75);
  color: #fdf1ea;
}
.wood-btn.danger.armed {
  background: linear-gradient(180deg, #c4573c, var(--red));
  border-color: #7d2d1d; font-weight: 700;
}
.rooms-empty { text-align: center; padding: 18px 8px; color: var(--ink-soft); }

/* ── игра ── */
#canvas { display: block; width: 100vw; height: 100vh; touch-action: none; }

#hud-top {
  position: fixed; top: 0; left: 0; right: 0; padding: 10px 12px;
  display: flex; gap: 12px; align-items: flex-start; justify-content: space-between;
  pointer-events: none;
}
#hud-top .top-right { display: flex; gap: 8px; align-items: center; pointer-events: auto; }

/* ── панель игроков ── */
#scores { display: flex; flex-direction: column; gap: 6px; max-width: min(62vw, 560px); }

.pp-head { display: flex; gap: 6px; }
.pp-chip {
  padding: 4px 10px; border-radius: 9px; font-size: 13px; font-weight: 600;
  background: rgba(45, 32, 21, .82); color: var(--parch); border: 2px solid var(--wood);
}
.pp-chip b { font-variant-numeric: tabular-nums; }

.pp-cards { display: flex; flex-wrap: wrap; gap: 8px; }
.player-card {
  min-width: 156px; padding: 6px 10px; border-radius: 10px;
  background: linear-gradient(180deg, var(--parch), var(--parch-dark));
  border: 2px solid var(--wood); color: var(--ink);
  box-shadow: 0 3px 10px rgba(0, 0, 0, .35);
}
.player-card.active { border-color: var(--gold); box-shadow: 0 0 0 2px rgba(200, 162, 74, .45), 0 3px 10px rgba(0, 0, 0, .35); }
.player-card.me .pc-name { font-weight: 700; }

.pc-top { display: flex; align-items: center; gap: 7px; font-size: 15px; }
.pc-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pc-name em { font-style: normal; font-size: 12px; opacity: .6; }
.pc-score { font-weight: 800; font-size: 19px; font-variant-numeric: tabular-nums; }

.pc-meeples { display: flex; gap: 8px; margin-top: 3px; }
.pc-m { display: flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-soft); }
.pc-m svg { width: 17px; height: 17px; display: block; }
.pc-m b { font-size: 13px; color: var(--ink); font-variant-numeric: tabular-nums; }
.pc-m.empty { opacity: .35; }

.pc-times {
  display: flex; gap: 10px; margin-top: 3px; font-size: 12px; color: var(--ink-soft);
  font-variant-numeric: tabular-nums;
}
.pc-times .pc-turn.on { color: var(--wood-dark); font-weight: 700; }

/* ── «Ваш ход» ── */
#turn-banner {
  position: fixed; left: 50%; top: 18vh; transform: translate(-50%, -12px);
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 14px 34px; border-radius: 16px; pointer-events: none; z-index: 40;
  background: linear-gradient(180deg, var(--parch), var(--parch-dark));
  border: 3px solid var(--gold); box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
  opacity: 0;
}
#turn-banner b { font-size: 26px; color: var(--wood-dark); letter-spacing: .5px; }
#turn-banner span { font-size: 14px; color: var(--ink-soft); }
#turn-banner.show { animation: banner-in 2.4s ease forwards; }

@keyframes banner-in {
  0% { opacity: 0; transform: translate(-50%, -22px) scale(.92); }
  10% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  80% { opacity: 1; transform: translate(-50%, 0) scale(1); }
  100% { opacity: 0; transform: translate(-50%, -14px) scale(.98); }
}

#hand.my-turn, #tile-card.my-turn {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(200, 162, 74, .35), var(--shadow);
  animation: hand-pulse 2.4s ease-in-out 3;
}
@keyframes hand-pulse {
  0%, 100% { box-shadow: 0 0 0 2px rgba(200, 162, 74, .3), var(--shadow); }
  50% { box-shadow: 0 0 0 6px rgba(200, 162, 74, .5), var(--shadow); }
}

#turn-info {
  padding: 8px 14px; font-size: 15px; border-radius: 10px;
  background: linear-gradient(180deg, var(--parch), var(--parch-dark));
  border: 2px solid var(--wood); color: var(--ink);
}
.sound-buttons { display: flex; gap: 6px; }
.icon-btn {
  width: 40px; height: 40px; border-radius: 10px; font-size: 18px; cursor: pointer;
  background: linear-gradient(180deg, var(--parch), var(--parch-dark));
  border: 2px solid var(--wood);
}
.icon-btn.off { opacity: .45; }

#hud-bottom {
  position: fixed; left: 0; right: 0; bottom: 0; padding: 12px;
  display: flex; align-items: flex-end; gap: 12px; pointer-events: none;
}
#hud-bottom > * { pointer-events: auto; }

.card-label {
  font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--parch-dark); margin-bottom: 4px;
}

#tile-card, #hand {
  padding: 8px 10px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(74,53,35,.92), rgba(45,32,21,.94));
  border: 2px solid var(--wood-light); box-shadow: var(--shadow);
}
#preview-canvas {
  width: 116px; height: 116px; display: block; border-radius: 10px;
  border: 2px solid var(--wood-light); background: #2a2018;
}

.wood-btn {
  margin-top: 8px; width: 100%; padding: 9px 12px; font-size: 15px; cursor: pointer;
  color: var(--parch); border-radius: 10px;
  background: linear-gradient(180deg, var(--wood-light), var(--wood));
  border: 2px solid var(--wood-dark);
}
.wood-btn.small { font-size: 13px; padding: 7px 10px; }
.wood-btn:active { transform: translateY(1px); }

#meeple-choice { display: flex; gap: 8px; }
.meeple-card {
  width: 74px; padding: 6px 4px; border-radius: 10px; cursor: pointer; text-align: center;
  background: rgba(239, 224, 192, .12); border: 2px solid transparent; color: var(--parch);
}
.meeple-card.on { border-color: var(--gold); background: rgba(200, 162, 74, .22); }
.meeple-card.disabled { opacity: .3; cursor: default; }
.meeple-card svg { width: 34px; height: 34px; display: block; margin: 0 auto 2px; }
.meeple-card .nm { font-size: 11px; line-height: 1.15; }
.meeple-card .cnt { font-size: 12px; font-weight: 700; color: var(--gold); }

#status {
  flex: 1; text-align: right; font-size: 15px; padding: 10px 14px; border-radius: 12px;
  color: var(--parch); background: rgba(45, 32, 21, .82); border: 2px solid var(--wood);
}

#log {
  position: fixed; right: 12px; top: 112px; width: 250px; max-height: 40vh; overflow: auto;
  padding: 10px 12px; border-radius: 12px; font-size: 13px;
  background: linear-gradient(180deg, rgba(239,224,192,.94), rgba(217,196,155,.94));
  border: 2px solid var(--wood); color: var(--ink-soft);
}
#log div { margin-bottom: 4px; }
#log b { color: var(--ink); }
#log:empty { display: none; }        /* пустая плашка в начале партии не нужна */

#toast {
  position: fixed; left: 50%; top: 80px; transform: translateX(-50%);
  padding: 10px 18px; border-radius: 12px; font-size: 15px; font-weight: 600;
  background: var(--red); color: #fff; border: 2px solid #7d2d1d;
}

/* ── экран итогов ── */
#result, #replays {
  background: rgba(20, 15, 10, .88); display: flex; align-items: center; justify-content: center;
  padding: 16px; overflow: auto; z-index: 60;
}
.result-panel { width: min(780px, 100%); max-height: 94vh; overflow: auto; }

.result-table { list-style: none; padding: 0; margin: 10px 0 18px; }
.res-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px; border-radius: 10px;
  background: rgba(255, 250, 240, .6); border: 2px solid rgba(107, 79, 52, .25);
  transition: background .25s, border-color .25s, transform .2s;
}
.res-row.win { border-color: var(--gold); background: rgba(200, 162, 74, .22); }
.res-row.hot { border-color: var(--green); background: rgba(78, 127, 67, .25); transform: translateX(4px); }
.res-place { width: 22px; font-weight: 800; color: var(--ink-soft); }
.res-name { flex: 1; font-size: 17px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.res-name em { font-style: normal; font-size: 12px; opacity: .6; }
.res-left { display: flex; gap: 7px; }
.res-score {
  font-size: 23px; font-weight: 800; min-width: 48px; text-align: right;
  color: var(--wood-dark); font-variant-numeric: tabular-nums;
}
.res-score.bump { animation: pts-bump .5s ease; }
@keyframes pts-bump {
  0% { transform: scale(1); }
  35% { transform: scale(1.35); color: var(--green); }
  100% { transform: scale(1); }
}

.result-breakdown-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  font-size: 14px; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 1px;
}
.result-breakdown-head .wood-btn { width: auto; margin-top: 0; flex: 0 0 auto; }

.result-breakdown {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px;
  margin: 8px 0 4px;
}
.bd-player {
  padding: 10px; border-radius: var(--radius);
  background: rgba(255, 250, 240, .55); border: 2px solid rgba(107, 79, 52, .3);
}
.bd-head { display: flex; align-items: center; gap: 8px; }
.bd-name { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bd-name em { font-style: normal; font-size: 12px; opacity: .6; }
.bd-total { font-size: 19px; color: var(--wood-dark); font-variant-numeric: tabular-nums; }

.bd-chips { display: flex; flex-wrap: wrap; gap: 5px; margin: 7px 0; }
.bd-chip {
  font-size: 12px; padding: 3px 8px; border-radius: 8px;
  background: rgba(107, 79, 52, .14); color: var(--ink-soft);
}
.bd-chip b { color: var(--wood-dark); margin-left: 3px; }
.bd-chip.empty { opacity: .6; }

.bd-events { list-style: none; padding: 0; margin: 0; max-height: 190px; overflow: auto; }
.bd-ev {
  display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 3px 4px;
  border-radius: 7px; color: var(--ink-soft); transition: background .3s, opacity .3s;
}
.bd-ev .bd-when { width: 76px; flex: 0 0 auto; font-size: 11px; opacity: .75; }
.bd-ev .bd-what { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--ink); }
.bd-ev .bd-what i { font-style: normal; opacity: .6; }
.bd-ev .bd-pts { font-weight: 800; color: var(--wood-dark); font-variant-numeric: tabular-nums; }
.bd-ev.final { background: rgba(200, 162, 74, .16); }
.bd-ev.final .bd-when { color: var(--wood-dark); font-weight: 700; opacity: 1; }
.bd-ev.pending { opacity: .25; }
.bd-ev.flash { animation: ev-flash 1s ease; }
.bd-ev.empty { opacity: .6; }
@keyframes ev-flash {
  0% { background: rgba(78, 127, 67, .55); }
  100% { background: rgba(200, 162, 74, .16); }
}

.result-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin-top: 14px; }
.result-actions .wood-btn { flex: 1 1 150px; width: auto; margin-top: 0; }
.result-actions .big { flex: 1 1 170px; width: auto; margin-top: 0; padding: 10px 14px; font-size: 16px; }

/* ── список реплеев ── */
.replays-list { display: flex; flex-direction: column; gap: 10px; max-height: 50vh; overflow: auto; }
.replay-card .room-card-head .hint { margin: 0; }
.replay-card.archive { opacity: .72; }
.tag-archive {
  font-size: 11px; padding: 2px 7px; border-radius: 999px; letter-spacing: .5px;
  background: rgba(122, 90, 58, .18); color: var(--ink-soft); border: 1px solid rgba(122, 90, 58, .35);
}

/* ── плеер реплея ── */
#replay-ui { position: fixed; inset: 0; pointer-events: none; z-index: 50; }
#replay-ui > * { pointer-events: auto; }

#replay-top { position: absolute; top: 10px; left: 12px; display: flex; flex-direction: column; gap: 6px; }
#replay-title {
  align-self: flex-start; padding: 6px 12px; border-radius: 10px; font-size: 14px; font-weight: 600;
  background: rgba(45, 32, 21, .85); color: var(--parch); border: 2px solid var(--wood);
}
#replay-scores { display: flex; flex-wrap: wrap; gap: 8px; max-width: min(70vw, 620px); }

#replay-bar {
  position: absolute; left: 12px; right: 12px; bottom: 12px;
  padding: 10px 12px; border-radius: 14px;
  background: linear-gradient(180deg, rgba(74, 53, 35, .94), rgba(45, 32, 21, .96));
  border: 2px solid var(--wood-light); box-shadow: var(--shadow); color: var(--parch);
}
.rp-info { display: flex; flex-wrap: wrap; gap: 10px; min-height: 20px; font-size: 13px; margin-bottom: 6px; }
.rp-gain {
  padding: 2px 8px; border-radius: 8px; background: rgba(239, 224, 192, .14);
}
.rp-gain b { color: var(--gold); }
.rp-gain i { font-style: normal; font-weight: 700; }

.rp-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.rp-controls .icon-btn { width: 38px; height: 38px; font-size: 15px; }
.rp-controls .icon-btn.big-btn { width: 48px; font-size: 19px; }
.rp-controls .wood-btn { width: auto; margin-top: 0; flex: 0 0 auto; }

#rp-range {
  flex: 1 1 220px; min-width: 160px; height: 22px; accent-color: var(--gold);
  background: transparent; cursor: pointer;
}
.rp-pos { font-size: 13px; min-width: 150px; font-variant-numeric: tabular-nums; }
.rp-pos .rp-of { opacity: .6; margin-left: 4px; }

.rp-speeds { display: flex; gap: 4px; }
.rp-speed {
  min-width: 38px; padding: 7px 4px; border-radius: 9px; cursor: pointer; font-size: 13px;
  color: var(--parch); background: rgba(239, 224, 192, .12); border: 2px solid transparent;
}
.rp-speed.on { border-color: var(--gold); background: rgba(200, 162, 74, .25); font-weight: 700; }

body.replay-mode #hud-bottom,
body.replay-mode #log,
body.replay-mode #scores,
body.replay-mode #turn-info { display: none !important; }

@media (max-width: 900px) {
  #replay-scores { max-width: 92vw; }
  .rp-pos { min-width: 110px; }
}

@media (max-width: 760px) {
  #log { display: none; }
  #preview-canvas { width: 86px; height: 86px; }
  .meeple-card { width: 60px; }
  #status { display: none; }
  #scores { max-width: 74vw; }
  .player-card { min-width: 130px; font-size: 13px; padding: 5px 8px; }
  .pc-score { font-size: 16px; }
  .pc-m svg { width: 15px; height: 15px; }
  #turn-banner { padding: 10px 22px; top: 14vh; }
  #turn-banner b { font-size: 21px; }
  .result-breakdown { grid-template-columns: 1fr; }
  .bd-events { max-height: 150px; }
  .res-left { display: none; }
  .rp-controls .icon-btn { width: 34px; height: 34px; }
}