.alignment-menu,
#screen-bot-select[data-game="tresenraya"],
#screen-bot-select[data-game="cuatroenraya"],
#screen-private-lobby[data-game="tresenraya"],
#screen-private-lobby[data-game="cuatroenraya"] {
  background: radial-gradient(circle at 50% 20%, rgba(96, 58, 160, 0.32), transparent 34%), linear-gradient(155deg, #24123d, #0c0717 76%);
}
.alignment-menu .submenu-title { color: #eee2ff; }
.alignment-menu .submenu-desc, .alignment-menu .submenu-rules-link { color: #c5acec; }
#screen-bot-select[data-game="tresenraya"],
#screen-bot-select[data-game="cuatroenraya"] {
  --bot-bg: radial-gradient(circle at 50% 20%, rgba(96, 58, 160, 0.32), transparent 34%), linear-gradient(155deg, #24123d, #0c0717 76%);
  --bot-accent: #f1d76d;
  --bot-muted: #c5acec;
  --bot-button: linear-gradient(135deg, #6e36a6, #32135d);
  --bot-button-color: #f6eeff;
  --bot-button-shadow: rgba(167,123,223,0.3);
  --bot-play-button: linear-gradient(135deg, #f1d76d, #9f66e8);
  --bot-icon-bg: #1a1030;
  --bot-icon-border: #a77bdf;
  --bot-icon-color: #f1d76d;
}
#screen-bot-select[data-game="cuatroenraya"] {
  --bot-button: linear-gradient(135deg, #174ca8, #32135d);
  --bot-play-button: linear-gradient(135deg, #f4d34f, #e6474b 58%, #174ca8);
  --bot-icon-bg: #174ca8;
}
#screen-private-lobby[data-game="tresenraya"] .lobby-box,
#screen-private-lobby[data-game="cuatroenraya"] .lobby-box,
#screen-queue[data-game="tresenraya"] .lobby-box,
#screen-queue[data-game="cuatroenraya"] .lobby-box {
  background: rgba(15, 8, 28, 0.86);
  border-color: #a77bdf;
  box-shadow: 0 0 38px rgba(167, 123, 223, 0.24);
}
#screen-private-lobby[data-game="tresenraya"] .lobby-title,
#screen-private-lobby[data-game="cuatroenraya"] .lobby-title,
#screen-queue[data-game="tresenraya"] .lobby-title,
#screen-queue[data-game="cuatroenraya"] .lobby-title {
  color: #f1d76d;
}
#screen-private-lobby[data-game="tresenraya"] .lobby-hint,
#screen-private-lobby[data-game="cuatroenraya"] .lobby-hint,
#screen-private-lobby[data-game="tresenraya"] .waiting-text,
#screen-private-lobby[data-game="cuatroenraya"] .waiting-text,
#screen-queue[data-game="tresenraya"] .waiting-text,
#screen-queue[data-game="cuatroenraya"] .waiting-text,
#screen-queue[data-game="tresenraya"] .lobby-hint,
#screen-queue[data-game="cuatroenraya"] .lobby-hint {
  color: #c5acec;
}
#screen-private-lobby[data-game="tresenraya"] .room-code-display,
#screen-private-lobby[data-game="cuatroenraya"] .room-code-display,
#screen-queue[data-game="tresenraya"] .queue-count,
#screen-queue[data-game="cuatroenraya"] .queue-count {
  color: #f1d76d;
  text-shadow: 0 0 18px rgba(241,215,109,0.25);
}
#screen-private-lobby[data-game="tresenraya"] .bot-difficulty-panel,
#screen-private-lobby[data-game="cuatroenraya"] .bot-difficulty-panel {
  --bot-accent: #f1d76d;
  --bot-muted: #c5acec;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(167,123,223,0.34);
  border-radius: 14px;
  padding: 12px;
}
.alignment-admin-label {
  display: inline-block;
  padding: 5px 10px;
  border: 1px solid rgba(202, 170, 255, 0.45);
  border-radius: 999px;
  background: rgba(110, 54, 166, 0.25);
  color: #eadcff;
  font-size: 0.62rem;
  letter-spacing: 1.4px;
  font-weight: 800;
  text-transform: uppercase;
}
.alignment-menu .alignment-admin-label { margin-bottom: 15px; }
.alignment-preview { box-sizing: border-box; background: #1a1030; border: 2px solid #a77bdf; display: grid; }
.tres-preview { grid-template-columns: repeat(3, 1fr); padding: 4px; gap: 2px; }
.tres-preview span { background: rgba(255,255,255,0.07); display: grid; place-items: center; color: #f2dd68; font-size: 0.72rem; font-weight: 900; }
.tres-preview span:nth-child(3n) { color: #79ccff; }
.cuatro-preview { grid-template-columns: repeat(4, 1fr); gap: 3px; padding: 5px; background: #174ca8; }
.cuatro-preview i { width: 100%; aspect-ratio: 1; border-radius: 50%; background: rgba(4, 18, 47, 0.68); }
.cuatro-preview i.red { background: #e6474b; }
.cuatro-preview i.yellow { background: #f4d34f; }
.alignment-join { flex-direction: column; align-items: center; gap: 8px; }
.alignment-join input {
  padding: 10px 16px; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  border-radius: 8px; color: #e0e0e0; font-size: 1.2rem; letter-spacing: 6px; text-align: center; width: 120px; font-family: inherit;
}
.alignment-error { color: #ff8080; font-size: 0.72rem; min-height: 1em; }
.alignment-game { background: radial-gradient(circle at 50% 16%, #302151, #0d0919 68%); color: #ede6ff; }
.alignment-game.active { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 22px; min-height: 100vh; }
.alignment-header { display: flex; flex-direction: column; align-items: center; gap: 12px; }
.alignment-status { color: #eedb91; font-size: 1rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; }
.alignment-players { display: flex; gap: 12px; }
.alignment-player { border: 1px solid rgba(202,170,255,0.24); border-radius: 999px; padding: 7px 13px; color: #baa7d4; }
.alignment-player.active { border-color: #f1d76d; color: #fff; background: rgba(241,215,109,0.12); }
.tres-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: repeat(3, minmax(0, 1fr));
  width: min(72vmin, 390px);
  aspect-ratio: 1;
  padding: 10px; gap: 8px; border-radius: 18px; background: rgba(106, 66, 170, 0.36); border: 2px solid #a77bdf;
}
.tres-cell {
  appearance: none; box-sizing: border-box; min-width: 0; min-height: 0; width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(224,204,255,0.2); border-radius: 12px; background: rgba(16,8,29,0.65);
  color: #f4d450; font-family: Arial, sans-serif; font-size: clamp(3rem, 12vmin, 5.2rem); font-weight: 900; line-height: 0.85;
  cursor: pointer; padding: 0;
  overflow: hidden; text-align: center;
}
.tres-cell.mark-o { color: #6dc8ff; }
.tres-cell.last, .cuatro-cell.last { box-shadow: inset 0 0 0 3px #fff3a6; }
.tres-cell.win, .cuatro-cell.win { box-shadow: inset 0 0 0 3px #71ef9b, 0 0 18px rgba(113,239,155,0.35); }
.tres-cell:disabled { cursor: default; }
.cuatro-board {
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: clamp(4px, 1vmin, 9px);
  padding: clamp(8px, 1.8vmin, 16px); width: min(86vw, 620px); background: #164dab; border: 3px solid #397bed; border-radius: 18px;
}
.cuatro-cell {
  appearance: none; box-sizing: border-box; min-width: 0; min-height: 0; padding: 0; border: 0; border-radius: 50%; aspect-ratio: 1;
  background: #09152c; box-shadow: inset 0 5px 7px rgba(0,0,0,0.48); cursor: pointer;
}
.cuatro-cell.red { background: radial-gradient(circle at 34% 28%, #ffb3af, #e43f48 33%, #a71b30 100%); }
.cuatro-cell.yellow { background: radial-gradient(circle at 34% 28%, #fff5a5, #f4d044 34%, #bf8512 100%); }
.cuatro-cell:disabled { cursor: default; }
.alignment-result {
  display: none; position: absolute; inset: 0; background: rgba(5,3,10,0.74); z-index: 8;
  flex-direction: column; align-items: center; justify-content: center; gap: 14px; text-align: center;
}
.alignment-result.active { display: flex; }
.alignment-result h2 { font-size: 2rem; color: #f1d76d; }
.alignment-result p { color: #d5c7ec; }
.alignment-result div { display: flex; gap: 10px; }
.card-align-preview { padding: 4px; }
#overlay-rematch[data-game="tresenraya"],
#overlay-rematch[data-game="cuatroenraya"],
#overlay-single-choice[data-game="tresenraya"],
#overlay-single-choice[data-game="cuatroenraya"] {
  --game-modal-bg: linear-gradient(145deg, rgba(36,18,61,0.98), rgba(12,7,23,0.98));
  --game-modal-border: #a77bdf;
  --game-modal-shadow: rgba(167,123,223,0.34);
  --game-modal-title: #f1d76d;
  --game-modal-text: #eee2ff;
  --game-modal-muted: #c5acec;
  --game-modal-row: rgba(255,255,255,0.07);
  --game-modal-row-border: rgba(202,170,255,0.22);
  --game-modal-voted: rgba(241,215,109,0.14);
  --game-modal-voted-border: rgba(241,215,109,0.42);
  --game-modal-voted-text: #f1d76d;
  --game-modal-primary-bg: linear-gradient(135deg, #f1d76d, #9f66e8);
  --game-modal-primary-color: #1b0e2d;
  --game-modal-primary-shadow: rgba(167,123,223,0.32);
  --game-modal-secondary-bg: rgba(82,45,132,0.72);
  --game-modal-secondary-color: #eee2ff;
}
#overlay-rematch[data-game="tresenraya"] .overlay-box,
#overlay-rematch[data-game="cuatroenraya"] .overlay-box,
#overlay-single-choice[data-game="tresenraya"] .overlay-box,
#overlay-single-choice[data-game="cuatroenraya"] .overlay-box {
  opacity: 1 !important;
  visibility: visible !important;
  background-color: #24123d !important;
  background-image: linear-gradient(145deg, #2f1a55 0%, #160b2b 100%) !important;
  border: 3px solid var(--game-modal-border) !important;
  box-shadow: 0 0 60px var(--game-modal-shadow), 0 18px 80px rgba(0,0,0,0.58) !important;
}
#overlay-rematch[data-game="tresenraya"],
#overlay-rematch[data-game="cuatroenraya"] {
  background: rgba(5,3,10,0.9) !important;
  z-index: 12000 !important;
}
body[data-game-theme="tresenraya"] .ingame-rules-button,
body[data-game-theme="cuatroenraya"] .ingame-rules-button {
  --rules-btn-bg: rgba(26, 16, 48, 0.94);
  --rules-btn-border: rgba(167, 123, 223, 0.62);
  --rules-btn-color: #eee2ff;
  --rules-btn-hover-bg: rgba(82, 45, 132, 0.98);
  --rules-btn-hover-border: rgba(241, 215, 109, 0.76);
  --rules-btn-hover-color: #f1d76d;
  --rules-btn-shadow: rgba(167, 123, 223, 0.32);
}
body[data-game-theme="tresenraya"] #screen-tresenraya-game .game-menu-btn,
body[data-game-theme="cuatroenraya"] #screen-cuatroenraya-game .game-menu-btn {
  background: rgba(26, 16, 48, 0.94);
  border-color: rgba(167, 123, 223, 0.62);
  color: #eee2ff;
  box-shadow: 0 8px 22px rgba(167, 123, 223, 0.24);
}
body[data-game-theme="tresenraya"] #screen-tresenraya-game .game-menu-wrap.open .game-menu-btn,
body[data-game-theme="tresenraya"] #screen-tresenraya-game .game-menu-btn:hover,
body[data-game-theme="cuatroenraya"] #screen-cuatroenraya-game .game-menu-wrap.open .game-menu-btn,
body[data-game-theme="cuatroenraya"] #screen-cuatroenraya-game .game-menu-btn:hover {
  background: rgba(82, 45, 132, 0.98);
  border-color: rgba(241, 215, 109, 0.76);
  color: #f1d76d;
}
body[data-game-theme="tresenraya"] #screen-tresenraya-game .game-menu-dropdown,
body[data-game-theme="cuatroenraya"] #screen-cuatroenraya-game .game-menu-dropdown {
  background: rgba(12, 7, 23, 0.98);
  border-color: rgba(167, 123, 223, 0.56);
  box-shadow: 0 14px 34px rgba(0,0,0,0.55), 0 0 22px rgba(167,123,223,0.2);
}
body[data-game-theme="tresenraya"] #screen-tresenraya-game .game-menu-dropdown button,
body[data-game-theme="cuatroenraya"] #screen-cuatroenraya-game .game-menu-dropdown button {
  color: #eee2ff;
}
body[data-game-theme="tresenraya"] #screen-tresenraya-game .game-menu-dropdown button:hover,
body[data-game-theme="cuatroenraya"] #screen-cuatroenraya-game .game-menu-dropdown button:hover {
  background: rgba(167, 123, 223, 0.18);
  color: #f1d76d;
}
body[data-game-theme="tresenraya"] #overlay-rematch[data-game="tresenraya"] .overlay-box.rematch-box,
body[data-game-theme="cuatroenraya"] #overlay-rematch[data-game="cuatroenraya"] .overlay-box.rematch-box {
  opacity: 1 !important;
  background: linear-gradient(145deg, #24123d 0%, #0c0717 100%) !important;
  border: 3px solid #a77bdf !important;
  color: #eee2ff !important;
  filter: none !important;
}
body[data-game-theme="tresenraya"] #overlay-rematch[data-game="tresenraya"] .overlay-title,
body[data-game-theme="cuatroenraya"] #overlay-rematch[data-game="cuatroenraya"] .overlay-title {
  color: #f1d76d !important;
}
body[data-game-theme="tresenraya"] #overlay-rematch[data-game="tresenraya"] #rematch-winner-line,
body[data-game-theme="cuatroenraya"] #overlay-rematch[data-game="cuatroenraya"] #rematch-winner-line,
body[data-game-theme="tresenraya"] #overlay-rematch[data-game="tresenraya"] .rp-name,
body[data-game-theme="cuatroenraya"] #overlay-rematch[data-game="cuatroenraya"] .rp-name {
  color: #eee2ff !important;
}
body[data-game-theme="tresenraya"] #overlay-rematch[data-game="tresenraya"] .rematch-player-row,
body[data-game-theme="cuatroenraya"] #overlay-rematch[data-game="cuatroenraya"] .rematch-player-row {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(202,170,255,0.26) !important;
}
body[data-game-theme="tresenraya"] #overlay-rematch[data-game="tresenraya"] .rematch-player-row.voted,
body[data-game-theme="cuatroenraya"] #overlay-rematch[data-game="cuatroenraya"] .rematch-player-row.voted {
  background: rgba(241,215,109,0.16) !important;
  border-color: rgba(241,215,109,0.42) !important;
}
@media (max-width: 600px) {
  .alignment-game.active { gap: 14px; padding: 55px 12px 16px; }
  .alignment-status { font-size: 0.82rem; }
  .tres-board { width: min(88vw, 360px); gap: 6px; padding: 8px; }
  .tres-cell { font-size: clamp(2.4rem, 18vw, 4.6rem); }
  .cuatro-board { width: min(94vw, 560px); }
  .alignment-players { flex-wrap: wrap; justify-content: center; }
}