.heading-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.game-table-shell,
.game-table-shell button,
.admin-view,
.history-card,
.chat-message {
  font-family: Manrope, "Segoe UI", sans-serif;
  letter-spacing: normal;
}

.match-panel,
.game-board-area,
.durak-status,
.durak-counts,
.spectator-note {
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.game-board-area .board,
.game-board-area .board * {
  line-height: 1;
}

.game-board-area .board button {
  font-family: "Segoe UI Symbol", "Apple Symbols", sans-serif;
  font-size: clamp(22px, 7vw, 42px);
  font-weight: 600;
}

.game-board-area .subtle {
  margin: 0;
  color: #c2cbda;
  font-size: 13px;
  text-align: center;
}

.match-panel .button,
.admin-view .button {
  font-family: inherit;
}

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
  margin-bottom: 12px;
}

.admin-metric {
  display: grid;
  gap: 5px;
  padding: 13px;
  border: 1px solid rgba(233, 199, 115, .18);
  border-radius: 15px;
  background: linear-gradient(145deg, rgba(18, 27, 45, .96), rgba(7, 11, 20, .96));
}

.admin-metric small {
  color: #8e9bb0;
  font-size: 10px;
}

.admin-metric b {
  color: #f1d58e;
  font-size: clamp(16px, 4.7vw, 22px);
  overflow-wrap: anywhere;
}

.admin-setting-form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(80px, .8fr);
  gap: 8px;
}

.admin-setting-form select,
.admin-setting-form input {
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: #090f1c;
  color: #f4f7ff;
  font: inherit;
  font-size: 12px;
}

.admin-setting-form button {
  grid-column: 1 / -1;
}

.admin-settings-list,
.admin-list {
  display: grid;
  gap: 8px;
}

.admin-settings-list {
  margin-top: 12px;
}

.admin-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px;
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 11px;
  background: rgba(0, 0, 0, .16);
  color: #d3dbea;
  font-size: 12px;
}

.admin-row small {
  color: #8e9bb0;
}

.admin-row-actions {
  display: flex;
  gap: 6px;
}

.admin-row-actions .button {
  min-height: 32px;
  padding: 6px 9px;
  font-size: 11px;
}

.chat-message {
  cursor: default;
}

.chat-message.moderation-target {
  cursor: pointer;
}

.chat-message-anchor {
  position: relative;
}

.chat-message.moderation-target::after {
  content: "Нажми, чтобы вызвать стража";
  display: block;
  margin-top: 5px;
  color: rgba(233, 199, 115, .55);
  font-size: 9px;
}

.chat-mod-controls {
  display: none;
}

.chat-message.moderation-open .chat-mod-controls {
  position: absolute;
  z-index: 8;
  top: 8px;
  right: 8px;
  display: grid;
  min-width: 176px;
  gap: 5px;
  padding: 8px;
  border: 1px solid rgba(233, 199, 115, .35);
  border-radius: 13px;
  background: #101827f5;
  box-shadow: 0 12px 36px #000c;
}

.chat-message.moderation-open {
  outline: 1px solid rgba(233, 199, 115, .4);
}

.chat-mod-controls button {
  padding: 6px 9px;
  text-align: left;
}

.tab[hidden] {
  display: none !important;
}

.surrender-button {
  width: 100%;
  margin-top: 5px;
  border-color: rgba(226, 110, 120, .38);
  color: #f19ba4;
}

.surrender-button:hover {
  background: rgba(112, 39, 50, .24);
}

.game-board-area .square.legal-source {
  box-shadow: inset 0 0 0 3px rgba(241, 204, 102, .9);
}

.game-board-area .square.legal-move {
  position: relative;
  background-image: radial-gradient(circle, rgba(128, 218, 164, .55) 0 23%, transparent 25%);
}

.game-board-area .square.legal-move:has(.checker) {
  background-image: radial-gradient(circle, rgba(128, 218, 164, .38) 0 42%, transparent 45%);
}

.game-board-area .card-button.legal-card {
  border-color: rgba(129, 224, 171, .9);
  box-shadow: 0 0 0 2px rgba(129, 224, 171, .3), 0 8px 22px rgba(43, 139, 91, .22);
  transform: translateY(-7px);
}

.game-board-area .card-button:disabled {
  cursor: not-allowed;
  filter: saturate(.55);
  opacity: .56;
}

.take-cards-button {
  border-color: rgba(239, 157, 124, .46);
  color: #ffd1b9;
}

#battle-wheel.wheel-spinning {
  filter: drop-shadow(0 0 14px rgba(235, 194, 88, .82));
}

.admin-warning,
.admin-reset-description {
  color: #c0cada;
  font-size: 12px;
  line-height: 1.55;
}

.admin-warning {
  padding: 10px 12px;
  border: 1px solid rgba(238, 160, 104, .2);
  border-radius: 12px;
  background: rgba(123, 68, 42, .12);
}

.admin-reset-label {
  display: block;
  margin: 13px 0 6px;
  color: #d8e0ee;
  font-size: 12px;
  font-weight: 700;
}

.admin-reset-select,
.admin-reset-input {
  width: 100%;
  min-width: 0;
  padding: 11px;
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 11px;
  background: #090f1c;
  color: #f4f7ff;
  font: inherit;
  font-size: 12px;
}

.admin-reset-input:focus,
.admin-reset-select:focus {
  border-color: rgba(233, 199, 115, .65);
  outline: none;
}

.admin-view .button-danger {
  width: 100%;
  margin-top: 10px;
  border: 1px solid rgba(238, 102, 110, .48);
  background: linear-gradient(135deg, #763542, #4a202e);
  color: #ffe6e8;
}

.admin-view .button-danger:disabled {
  cursor: wait;
  opacity: .55;
}

.admin-command-help {
  display: grid;
  gap: 7px;
}

.admin-command-help p {
  margin: 0;
  color: #bbc6d8;
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.admin-command-help code {
  color: #f0d58e;
}

.game-table-shell {
  display: grid;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(234, 199, 115, .24);
  border-radius: 24px;
  background:
    radial-gradient(ellipse at 50% 42%, rgba(25, 92, 78, .56), rgba(7, 29, 28, .94) 66%),
    #071412;
  box-shadow: inset 0 0 0 5px rgba(207, 169, 85, .045), 0 18px 48px rgba(0, 0, 0, .3);
}

.chess-table {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(47, 67, 98, .78), rgba(12, 18, 31, .98) 72%),
    #101725;
}

.checkers-table {
  background:
    radial-gradient(ellipse at 50% 45%, rgba(110, 61, 42, .5), rgba(24, 16, 18, .98) 72%),
    #181012;
}

.match-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 8px;
  color: var(--muted, #9aa5b8);
  font-size: 10px;
  letter-spacing: .11em;
}

.match-meta b {
  color: var(--gold, #e9c773);
  font-size: 13px;
  letter-spacing: 0;
}

.match-seats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 9px;
}

.match-seat {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 14px;
  background: rgba(2, 5, 10, .44);
  min-width: 0;
}

.match-seat b {
  overflow: hidden;
  color: #f4f7ff;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.match-seat small {
  color: #8996aa;
  font-size: 9px;
  letter-spacing: .1em;
}

.match-seat.active-turn {
  border-color: rgba(113, 232, 192, .72);
  background: rgba(30, 106, 81, .27);
  box-shadow: 0 0 22px rgba(76, 220, 167, .13);
}

.match-seat.active-turn small {
  color: #83edc8;
}

.game-board-area {
  display: grid;
  justify-items: center;
  gap: 12px;
  padding: clamp(8px, 3vw, 20px);
  border: 1px solid rgba(233, 199, 115, .16);
  border-radius: 18px;
  background: rgba(0, 0, 0, .2);
}

.game-board-area .board {
  width: min(100%, 440px);
  aspect-ratio: 1;
  border: 5px solid #a5854c;
  border-radius: 9px;
  box-shadow: 0 12px 35px rgba(0, 0, 0, .5), inset 0 0 0 1px rgba(255, 255, 255, .2);
  overflow: hidden;
}

.game-board-area .square {
  min-width: 0;
  border-radius: 0;
}

.game-board-area .board:not(.checkers) .square.light {
  background: #d8cbb2;
  color: #1b2330;
}

.game-board-area .board:not(.checkers) .square.dark {
  background: #637c70;
  color: #101713;
}

.game-board-area .board.checkers .square.light {
  background: #cbb99a;
}

.game-board-area .board.checkers .square.dark {
  background: #684b3d;
}

.game-board-area .board .checker {
  width: 72%;
  height: 72%;
  border: 2px solid #eed08d;
  background: radial-gradient(circle at 35% 28%, #fff0bc, #b98b43 66%, #76512b);
  box-shadow: 0 3px 5px rgba(0, 0, 0, .55), inset 0 1px 3px rgba(255, 255, 255, .6);
}

.game-board-area .board .checker.dark {
  border-color: #aeb8cc;
  background: radial-gradient(circle at 35% 28%, #536078, #202b40 65%, #101520);
}

.game-board-area .board .checker.king::after {
  color: #f3d789;
  font-size: clamp(12px, 4vw, 22px);
}

.durak-status {
  width: 100%;
  margin: 0;
  padding: 10px 12px;
  border: 1px solid rgba(233, 199, 115, .2);
  border-radius: 12px;
  background: rgba(0, 0, 0, .24);
  color: #d6e2d8;
  font-size: 12px;
  line-height: 1.5;
  text-align: center;
}

.table-cards {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  min-height: 100px;
  gap: 12px;
  width: 100%;
  padding: 14px 8px;
}

.table-pair {
  display: flex;
  align-items: center;
  gap: 5px;
}

.game-board-area .card-button {
  display: grid;
  place-items: center;
  width: clamp(48px, 12vw, 70px);
  height: clamp(68px, 17vw, 100px);
  border: 1px solid #f7e7c0;
  border-radius: 9px;
  background: linear-gradient(145deg, #fffdf5, #e8dfcc);
  color: #19222d;
  box-shadow: 0 7px 15px rgba(0, 0, 0, .34);
  font-size: clamp(18px, 5vw, 27px);
  font-weight: 800;
}

.game-board-area .card-button.red {
  color: #c6444c;
}

.game-board-area button.card-button {
  cursor: pointer;
}

.game-board-area button.card-button:disabled {
  cursor: default;
}

.durak-counts,
.spectator-note,
.match-result {
  width: 100%;
  color: #b8c5d6;
  font-size: 12px;
  text-align: center;
}

.match-result {
  padding: 11px;
  border: 1px solid rgba(233, 199, 115, .3);
  border-radius: 12px;
  color: var(--gold, #e9c773);
  font-weight: 700;
}

.history-list {
  display: grid;
  gap: 11px;
}

.history-card {
  display: grid;
  gap: 10px;
  padding: 15px;
}

.history-card-heading,
.history-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.history-card-heading b {
  color: #f4f7ff;
}

.history-card-heading time,
.history-result span {
  color: #8c99ad;
  font-size: 11px;
}

.history-players {
  margin: 0;
  color: #b9c5d8;
}

.history-result b {
  color: #e9c773;
  font-size: 12px;
}

.history-card .button {
  justify-self: start;
}

.chat-mod-controls {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 7px;
}

.chat-mod-controls button {
  padding: 4px 7px;
  border: 1px solid rgba(233, 199, 115, .28);
  border-radius: 7px;
  background: rgba(9, 13, 24, .9);
  color: #e7cf91;
  font-size: 10px;
  cursor: pointer;
}

.deleted-message {
  color: #7f8998 !important;
  font-style: italic;
}

@media (max-width: 380px) {
  .game-table-shell {
    gap: 10px;
    padding: 10px;
  }

  .game-board-area {
    padding: 6px;
  }

  .admin-setting-form {
    grid-template-columns: 1fr;
  }

  .admin-setting-form button {
    grid-column: auto;
  }
}