/* Acabado comun de los submenus de juegos de mesa. */

#screen-reversi-menu,
#screen-chess-menu {
  --table-menu-bg: radial-gradient(ellipse at 42% 26%, rgba(157, 108, 38, 0.24), transparent 43%), linear-gradient(145deg, #28180a, #0f0804 74%);
  --table-accent: #d4a85c;
  --table-accent-strong: #f2d28c;
  --table-text: #fff1cf;
  --table-muted: #b89561;
  --table-button-bg: rgba(42, 25, 9, 0.68);
  --table-button-hover: rgba(78, 48, 17, 0.78);
  --table-glow: rgba(212, 168, 92, 0.28);
}

#screen-damas-menu {
  --table-menu-bg: radial-gradient(ellipse at 38% 24%, rgba(150, 76, 38, 0.26), transparent 45%), linear-gradient(145deg, #2b170c, #120805 76%);
  --table-accent: #c78452;
  --table-accent-strong: #f0c396;
  --table-text: #ffead4;
  --table-muted: #bf8f69;
  --table-button-bg: rgba(48, 21, 12, 0.7);
  --table-button-hover: rgba(85, 39, 20, 0.8);
  --table-glow: rgba(199, 132, 82, 0.3);
}

#screen-domino-menu,
#screen-domino-score-select {
  --table-menu-bg: radial-gradient(ellipse at 48% 24%, rgba(63, 132, 83, 0.27), transparent 44%), linear-gradient(145deg, #153523, #08170e 76%);
  --table-accent: #cbb36b;
  --table-accent-strong: #f2df9d;
  --table-text: #eff9e9;
  --table-muted: #9ac2a1;
  --table-button-bg: rgba(12, 47, 25, 0.7);
  --table-button-hover: rgba(24, 77, 40, 0.8);
  --table-glow: rgba(203, 179, 107, 0.24);
}

#screen-flota-menu,
#screen-palabrasecreta-menu {
  --table-menu-bg: radial-gradient(ellipse at 42% 22%, rgba(68, 175, 210, 0.25), transparent 45%), linear-gradient(145deg, #103846, #06131a 76%);
  --table-accent: #76d8ed;
  --table-accent-strong: #d1f8ff;
  --table-text: #e7fbff;
  --table-muted: #91c7d3;
  --table-button-bg: rgba(5, 42, 54, 0.7);
  --table-button-hover: rgba(9, 76, 92, 0.8);
  --table-glow: rgba(90, 205, 235, 0.28);
}

#screen-codigoespia-menu {
  --table-menu-bg: radial-gradient(ellipse at 42% 20%, rgba(42, 157, 143, 0.2), transparent 42%), linear-gradient(145deg, rgba(7, 24, 30, 0.88), rgba(4, 14, 20, 0.94));
  --table-accent: #64c5b7;
  --table-accent-strong: #e4fff5;
  --table-text: #f2eedb;
  --table-muted: #aebfba;
  --table-button-bg: rgba(11, 43, 46, 0.72);
  --table-button-hover: rgba(17, 81, 76, 0.82);
  --table-glow: rgba(42, 157, 143, 0.28);
}

#screen-tresenraya-menu,
#screen-cuatroenraya-menu {
  --table-menu-bg: radial-gradient(ellipse at 48% 20%, rgba(128, 84, 194, 0.28), transparent 44%), linear-gradient(145deg, #291547, #0d0719 76%);
  --table-accent: #b693ed;
  --table-accent-strong: #f0e4ff;
  --table-text: #f0e9ff;
  --table-muted: #c7b1e8;
  --table-button-bg: rgba(43, 22, 76, 0.7);
  --table-button-hover: rgba(76, 40, 128, 0.8);
  --table-glow: rgba(182, 147, 237, 0.28);
}

.screen-table-menu {
  gap: 22px;
}

#screen-domino-menu,
#screen-domino-score-select {
  background: var(--table-menu-bg);
}

.screen-table-menu .submenu-title {
  color: var(--table-text, #f2f5ef);
  text-shadow: 0 0 24px var(--table-glow, rgba(180, 220, 190, 0.22));
  letter-spacing: 4px;
}

.screen-table-menu .submenu-desc {
  color: var(--table-muted, #a9c1af);
}

.screen-table-menu .btn-back,
.screen-table-menu .submenu-rules-link {
  border-color: color-mix(in srgb, var(--table-accent, #b8d5c0) 42%, transparent);
  background: color-mix(in srgb, var(--table-button-bg, #10281a) 88%, transparent);
  color: var(--table-accent, #b8d5c0);
  box-shadow: none;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

.screen-table-menu .btn-back:hover,
.screen-table-menu .btn-back:focus-visible,
.screen-table-menu .submenu-rules-link:hover,
.screen-table-menu .submenu-rules-link:focus-visible {
  border-color: var(--table-accent-strong, #e3f8e8);
  background: var(--table-button-hover, rgba(30, 70, 44, 0.8));
  color: var(--table-accent-strong, #e3f8e8);
  box-shadow: 0 0 16px var(--table-glow, rgba(180, 220, 190, 0.2));
  outline: none;
}

.screen-table-menu .menu-buttons > .btn {
  border: 1px solid color-mix(in srgb, var(--table-accent, #b8d5c0) 48%, transparent);
  background: var(--table-button-bg, rgba(12, 42, 22, 0.7));
  color: var(--table-text, #fff);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 0.14s ease, filter 0.14s ease, background 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
}

.screen-table-menu .menu-buttons > .btn:hover,
.screen-table-menu .menu-buttons > .btn:focus-visible {
  transform: scale(1.03);
  filter: brightness(1.1);
  border-color: var(--table-accent-strong, #e3f8e8);
  background: var(--table-button-hover, rgba(30, 70, 44, 0.8));
  box-shadow: 0 0 18px var(--table-glow, rgba(180, 220, 190, 0.22)), 0 6px 16px rgba(0, 0, 0, 0.32);
  outline: none;
}

.screen-table-menu .submenu-favorite {
  --favorite-bg: var(--table-button-bg, rgba(12, 42, 22, 0.7));
  --favorite-border: color-mix(in srgb, var(--table-accent, #b8d5c0) 48%, transparent);
  --favorite-color: var(--table-accent, #b8d5c0);
  --favorite-active-bg: var(--table-button-hover, rgba(30, 70, 44, 0.8));
  --favorite-active-border: var(--table-accent-strong, #e3f8e8);
  --favorite-active-color: var(--table-accent-strong, #e3f8e8);
  --favorite-shadow: var(--table-glow, rgba(180, 220, 190, 0.22));
}

#screen-reversi-menu .btn-back,
#screen-damas-menu .btn-back,
#screen-domino-menu .btn-back,
#screen-domino-score-select .btn-back,
#screen-flota-menu .btn-back,
#screen-palabrasecreta-menu .btn-back,
#screen-codigoespia-menu .btn-back,
#screen-chess-menu .btn-back,
#screen-tresenraya-menu .btn-back,
#screen-cuatroenraya-menu .btn-back {
  border-color: color-mix(in srgb, var(--table-accent) 42%, transparent);
  background: color-mix(in srgb, var(--table-button-bg) 88%, transparent);
  color: var(--table-accent);
  box-shadow: none;
}

#screen-reversi-menu .btn-back:hover,
#screen-reversi-menu .btn-back:focus-visible,
#screen-damas-menu .btn-back:hover,
#screen-damas-menu .btn-back:focus-visible,
#screen-domino-menu .btn-back:hover,
#screen-domino-menu .btn-back:focus-visible,
#screen-domino-score-select .btn-back:hover,
#screen-domino-score-select .btn-back:focus-visible,
#screen-flota-menu .btn-back:hover,
#screen-flota-menu .btn-back:focus-visible,
#screen-palabrasecreta-menu .btn-back:hover,
#screen-palabrasecreta-menu .btn-back:focus-visible,
#screen-codigoespia-menu .btn-back:hover,
#screen-codigoespia-menu .btn-back:focus-visible,
#screen-chess-menu .btn-back:hover,
#screen-chess-menu .btn-back:focus-visible {
  border-color: var(--table-accent-strong);
  background: var(--table-button-hover);
  color: var(--table-accent-strong);
  box-shadow: 0 0 16px var(--table-glow);
}

#screen-tresenraya-menu .btn-back:hover,
#screen-tresenraya-menu .btn-back:focus-visible,
#screen-cuatroenraya-menu .btn-back:hover,
#screen-cuatroenraya-menu .btn-back:focus-visible {
  border-color: rgba(255, 255, 255, 0.78) !important;
  background: var(--table-button-hover) !important;
  color: #fff !important;
  box-shadow: 0 0 16px var(--table-glow) !important;
}

#screen-reversi-menu .submenu-favorite,
#screen-damas-menu .submenu-favorite,
#screen-flota-menu .submenu-favorite,
#screen-palabrasecreta-menu .submenu-favorite,
#screen-codigoespia-menu .submenu-favorite,
#screen-chess-menu .submenu-favorite,
#screen-tresenraya-menu .submenu-favorite,
#screen-cuatroenraya-menu .submenu-favorite {
  --favorite-bg: var(--table-button-bg);
  --favorite-border: color-mix(in srgb, var(--table-accent) 48%, transparent);
  --favorite-color: var(--table-accent);
  --favorite-active-bg: var(--table-button-hover);
  --favorite-active-border: var(--table-accent-strong);
  --favorite-active-color: var(--table-accent-strong);
  --favorite-shadow: var(--table-glow);
}

#screen-domino-menu .btn-back,
#screen-domino-score-select .btn-back,
#screen-domino-menu .submenu-rules-link {
  border-color: rgba(143, 199, 160, 0.38);
  background: rgba(10, 42, 23, 0.7);
  color: #b8e9c4;
}

#screen-domino-menu .btn-back:hover,
#screen-domino-menu .btn-back:focus-visible,
#screen-domino-score-select .btn-back:hover,
#screen-domino-score-select .btn-back:focus-visible,
#screen-domino-menu .submenu-rules-link:hover,
#screen-domino-menu .submenu-rules-link:focus-visible {
  border-color: rgba(184, 240, 196, 0.74);
  background: rgba(25, 78, 40, 0.82);
  color: #edfff1;
  box-shadow: 0 0 16px rgba(96, 198, 120, 0.24);
}

#screen-domino-menu .submenu-favorite {
  --favorite-bg: rgba(10, 42, 23, 0.76);
  --favorite-border: rgba(143, 199, 160, 0.42);
  --favorite-color: #b8e9c4;
  --favorite-active-bg: rgba(25, 78, 40, 0.88);
  --favorite-active-border: rgba(184, 240, 196, 0.74);
  --favorite-active-color: #edfff1;
  --favorite-shadow: rgba(96, 198, 120, 0.24);
}

body[data-game-theme="domino"]:has(#screen-domino-menu.active) {
  --auth-btn-bg: rgba(10, 42, 23, 0.76);
  --auth-btn-border: rgba(143, 199, 160, 0.38);
  --auth-btn-color: #b8e9c4;
  --auth-btn-hover-bg: rgba(25, 78, 40, 0.88);
  --auth-btn-hover-border: rgba(184, 240, 196, 0.74);
  --auth-btn-hover-color: #edfff1;
}

#screen-codigoespia-menu .menu-buttons > .btn {
  background: var(--table-button-bg);
  color: var(--table-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
  letter-spacing: 1px;
  text-transform: none;
}

#screen-codigoespia-menu .menu-buttons > #btn-codigoespia-join,
#screen-codigoespia-menu .menu-buttons > #btn-codigoespia-public,
#screen-codigoespia-menu .menu-buttons > #btn-codigoespia-admin-test {
  background: var(--table-button-bg);
  color: var(--table-text);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.24);
}

#screen-parchis-menu {
  --parchis-red: #e84a56;
  --parchis-blue: #4da7e8;
  --parchis-yellow: #ffe36a;
  --parchis-green: #58c878;
  background:
    radial-gradient(ellipse at 4% 3%, rgba(232, 74, 86, 0.34), transparent 36%),
    radial-gradient(ellipse at 96% 3%, rgba(77, 167, 232, 0.32), transparent 36%),
    radial-gradient(ellipse at 96% 97%, rgba(88, 200, 120, 0.3), transparent 38%),
    radial-gradient(ellipse at 4% 97%, rgba(255, 227, 106, 0.28), transparent 38%),
    linear-gradient(145deg, #111a32, #060914 76%);
}

#screen-parchis-menu .submenu-title {
  color: #fff;
  text-shadow: 0 0 20px rgba(255, 255, 255, 0.2);
}

#screen-parchis-menu .submenu-desc {
  color: #d8e5fb;
}

#screen-parchis-menu .btn-back,
#screen-parchis-menu .submenu-rules-link {
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(10, 19, 40, 0.82), rgba(10, 19, 40, 0.82)) padding-box,
    conic-gradient(from 45deg, var(--parchis-red), var(--parchis-blue), var(--parchis-green), var(--parchis-yellow), var(--parchis-red)) border-box;
  color: #edf5ff;
}

#screen-parchis-menu .btn-back:hover,
#screen-parchis-menu .btn-back:focus-visible,
#screen-parchis-menu .submenu-rules-link:hover,
#screen-parchis-menu .submenu-rules-link:focus-visible {
  background:
    linear-gradient(rgba(24, 40, 78, 0.9), rgba(24, 40, 78, 0.9)) padding-box,
    conic-gradient(from 45deg, var(--parchis-red), var(--parchis-blue), var(--parchis-green), var(--parchis-yellow), var(--parchis-red)) border-box;
  color: #fff;
  box-shadow: 0 0 16px rgba(77, 167, 232, 0.24), 0 0 16px rgba(232, 74, 86, 0.2);
}

#screen-parchis-menu .menu-buttons > .btn {
  background: rgba(8, 18, 42, 0.72);
  color: #fff;
}

#screen-parchis-menu .menu-buttons > .table-btn-red { border-color: rgba(232, 74, 86, 0.68); }
#screen-parchis-menu .menu-buttons > .table-btn-blue { border-color: rgba(77, 167, 232, 0.68); }
#screen-parchis-menu .menu-buttons > .table-btn-yellow { border-color: rgba(255, 227, 106, 0.72); }
#screen-parchis-menu .menu-buttons > .table-btn-green { border-color: rgba(88, 200, 120, 0.68); }

#screen-parchis-menu .menu-buttons > .table-btn-red:hover,
#screen-parchis-menu .menu-buttons > .table-btn-red:focus-visible { border-color: var(--parchis-red); box-shadow: 0 0 18px rgba(232, 74, 86, 0.34), 0 6px 16px rgba(0, 0, 0, 0.32); }
#screen-parchis-menu .menu-buttons > .table-btn-blue:hover,
#screen-parchis-menu .menu-buttons > .table-btn-blue:focus-visible { border-color: var(--parchis-blue); box-shadow: 0 0 18px rgba(77, 167, 232, 0.34), 0 6px 16px rgba(0, 0, 0, 0.32); }
#screen-parchis-menu .menu-buttons > .table-btn-yellow:hover,
#screen-parchis-menu .menu-buttons > .table-btn-yellow:focus-visible { border-color: var(--parchis-yellow); box-shadow: 0 0 18px rgba(255, 227, 106, 0.3), 0 6px 16px rgba(0, 0, 0, 0.32); }
#screen-parchis-menu .menu-buttons > .table-btn-green:hover,
#screen-parchis-menu .menu-buttons > .table-btn-green:focus-visible { border-color: var(--parchis-green); box-shadow: 0 0 18px rgba(88, 200, 120, 0.32), 0 6px 16px rgba(0, 0, 0, 0.32); }

#screen-parchis-menu .submenu-favorite,
#screen-parchis-menu .submenu-favorite.active {
  --favorite-border: transparent;
  --favorite-active-border: transparent;
  --favorite-color: #e7f1ff;
  --favorite-active-color: #fff;
  --favorite-shadow: rgba(77, 167, 232, 0.26);
  border: 1px solid transparent;
  background:
    linear-gradient(rgba(10, 19, 40, 0.9), rgba(10, 19, 40, 0.9)) padding-box,
    conic-gradient(from 45deg, var(--parchis-red), var(--parchis-blue), var(--parchis-green), var(--parchis-yellow), var(--parchis-red)) border-box;
}

#screen-parchis-menu .submenu-favorite:hover,
#screen-parchis-menu .submenu-favorite.active {
  box-shadow: 0 0 14px rgba(77, 167, 232, 0.28), 0 0 14px rgba(232, 74, 86, 0.22);
}