/* Brand foundation, portal and Cinquillo pilot. Keep game geometry in game CSS. */
:root {
  --brand-bg: #080e20;
  --brand-surface: #111c33;
  --brand-surface-raised: #182640;
  --brand-border: #304260;
  --brand-text: #f2f6ff;
  --brand-muted: #b1bfd5;
  --brand-cyan: #57ddf3;
  --brand-violet: #bb9aff;
  --brand-radius: 16px;
  --brand-background: radial-gradient(ellipse at 80% 10%, #192344 0, transparent 48%), #080e20;
}

body.brand-ui { background: var(--brand-bg); }
.brand-ui :is(button, input, select, textarea) { font-family: inherit; }
.brand-ui :is(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand-cyan);
  outline-offset: 4px;
}
.brand-ui [hidden] { display: none !important; }

/* Shared ranking navigation: same controls in home, categories and game menus. */
.brand-ui #ranking-nav {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 110;
  display: flex;
  gap: 6px;
  padding: 4px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 14px;
  box-shadow: 0 6px 20px #0003;
}
.brand-ui #ranking-nav button {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--brand-text);
  font-size: 0.9rem;
  line-height: 1.35;
  white-space: nowrap;
  cursor: pointer;
}
.brand-ui #ranking-nav button:hover { background: var(--brand-surface-raised); border-color: var(--brand-cyan); }
.brand-ui #ranking-nav button:first-child { color: var(--brand-cyan); }
.brand-ui #ranking-nav button + button { color: var(--brand-violet); }

@media (max-width: 900px) {
  .brand-ui #ranking-nav { top: 66px; width: min(430px, calc(100% - 24px)); }
  .brand-ui #ranking-nav button { flex: 1; min-width: 0; white-space: normal; padding: 8px; font-size: 0.82rem; }
  body.brand-ui.ranking-nav-visible .screen.active:is(#screen-home, [id$="-menu"]) {
    padding-top: 140px;
    padding-bottom: 40px;
    overflow-y: auto;
    justify-content: flex-start;
    scroll-padding-top: 140px;
  }
}

/* The portal scrolls independently of full-screen game boards. */
body.brand-ui #screen-home {
  background: var(--brand-background);
  justify-content: flex-start;
  gap: 32px;
  padding: 86px max(24px, calc((100vw - 1120px) / 2)) 48px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px;
  color: var(--brand-text);
}
.brand-ui #screen-home > * { flex-shrink: 0; max-width: 100%; }
.brand-ui #screen-home .portal-header {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
  align-items: center;
  text-align: center;
}
.home-brand {
  position: relative;
  width: min(100%, 400px);
  aspect-ratio: 1.4;
  overflow: hidden;
  margin: 0;
  mix-blend-mode: screen;
  mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent),
    linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
  mask-composite: intersect;
}
.home-brand-art {
  display: block;
  position: absolute;
  width: 100%;
  height: auto;
  top: -20%;
  left: 0;
  /* Present the existing artwork without its square frame or excess margins. */
  mask-image: linear-gradient(transparent, #000 18%, #000 84%, transparent);
}
.home-brand-caption {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--brand-muted);
  margin: 0;
}
.brand-ui #screen-home .portal-primary-actions {
  grid-column: 1 / -1;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  gap: 8px;
  padding: 16px 0;
  margin: 0;
  border-bottom: 1px solid var(--brand-border);
  width: 100%;
  order: 3;
}
.brand-ui #screen-home .portal-header { order: 0; }
.brand-ui #daily-reward-panel { order: 1; }
.brand-ui #categories-section { order: 2; }
.brand-ui #games-section { order: 4; }
.brand-ui :is(.portal-pill-action, .home-contact-action) {
  min-height: 44px;
  background: transparent;
  color: var(--brand-muted);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  padding: 10px 16px;
  font-size: 0.9rem;
  letter-spacing: 0;
  cursor: pointer;
}
.brand-ui :is(.portal-pill-action, .home-contact-action):hover { background: var(--brand-surface-raised); color: var(--brand-text); }
.brand-ui #categories-section { width: 100%; align-items: stretch; gap: 20px; }
.home-section-heading h2 { font-size: 1.55rem; letter-spacing: -0.025em; font-weight: 700; }
.home-section-heading p { color: var(--brand-muted); font-size: 0.98rem; line-height: 1.5; margin-top: 6px; }
.brand-ui .category-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.brand-ui #screen-home .category-card {
  width: 100%; height: auto; min-height: 124px;
  flex-direction: row; justify-content: flex-start; gap: 20px;
  border: 1px solid var(--brand-border);
  border-radius: var(--brand-radius);
  background: linear-gradient(120deg, #132c43, #101b31);
  padding: 24px; color: var(--brand-text); text-align: left;
}
.brand-ui #screen-home #cat-mesa { background: linear-gradient(120deg, #28203e, #151b32); }
.brand-ui #screen-home .category-card:hover { transform: translateY(-3px); border-color: var(--brand-cyan); box-shadow: 0 8px 24px #0003; }
.brand-ui .cat-icon { font-size: 2.8rem; color: var(--brand-cyan); }
.brand-ui .cat-copy { display: flex; flex-direction: column; gap: 8px; }
.brand-ui .cat-name { color: var(--brand-text); font-size: 1.15rem; text-transform: none; letter-spacing: 0; text-align: left; }
.brand-ui .cat-desc { color: var(--brand-muted); font-size: 0.9rem; line-height: 1.4; text-align: left; }
.cat-arrow { margin-left: auto; font-size: 1.6rem; color: var(--brand-cyan); }
.home-starters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.home-starters a { display: flex; align-items: center; gap: 14px; padding: 16px; border: 1px solid var(--brand-border); border-radius: 14px; background: var(--brand-surface); color: var(--brand-text); text-decoration: none; }
.home-starters a:hover { border-color: var(--brand-cyan); background: var(--brand-surface-raised); }
.home-starters img { object-fit: cover; border-radius: 6px; flex: 0 0 48px; }
.home-starters strong { font-size: 1rem; display: block; }
.home-starters small { font-size: 0.8rem; display: block; color: var(--brand-muted); margin-top: 5px; line-height: 1.4; }
.home-starters a > span:last-child { margin-left: auto; color: var(--brand-cyan); }
.brand-ui #screen-home .quick-play-block { flex-direction: row; justify-content: space-between; gap: 16px; margin: 0; padding: 8px 0; }
.brand-ui #screen-home .quick-play-text { color: var(--brand-muted); letter-spacing: 0; font-size: 0.95rem; }
.brand-ui #screen-home .quick-play-button { min-width: 0; }
.brand-ui #home-contact-entry { margin: 0; position: static; order: 5; }
.brand-ui #home-footer { margin: 0; position: static; width: 100%; order: 6; }
.brand-ui :is(#home-footer, #login-footer) :is(.footer-copyright, .footer-links a, .footer-sep) { color: var(--brand-muted); font-size: 0.8rem; line-height: 1.8; }
.brand-ui #app-version { color: #a0aec4; background: var(--brand-bg); padding: 3px 7px; border-radius: 4px; }

/* Catalog: retain the carousel interaction for this first iteration. */
.brand-ui #screen-home:is(.cat-cartas, .cat-mesa) .home-brand { width: 220px; }
.brand-ui #screen-home:is(.cat-cartas, .cat-mesa) .home-brand-caption { display: none; }
.brand-ui #screen-home:is(.cat-cartas, .cat-mesa) .portal-primary-actions { justify-content: center; width: 100%; }
.brand-ui #screen-home .games-section-label { color: var(--brand-muted); font-size: 0.9rem; letter-spacing: 0.1em; }
.brand-ui #screen-home .game-card { background: var(--brand-surface); border-color: var(--brand-border); }
.brand-ui #screen-home .game-card.carousel-focus { border-color: var(--brand-cyan); box-shadow: 0 12px 36px #0005; }
.brand-ui #screen-home .game-card-name { color: var(--brand-text); letter-spacing: 0; }
.brand-ui #screen-home .game-card-desc { color: var(--brand-muted); }
.brand-ui #screen-home .game-carousel-arrow { background: var(--brand-surface); color: var(--brand-cyan); border-color: var(--brand-border); border-radius: 12px; }

/* Shared controls, restricted to the screens migrated in this pilot. */
.brand-ui :is(#screen-home, #screen-login, .auth-flow-screen, .brand-screen, #screen-bot-select[data-game="cinquillo"]) .btn {
  min-height: 48px; border-radius: 12px; padding: 13px 24px;
  font-size: 1rem; line-height: 1.4; letter-spacing: 0; box-shadow: none;
}
.brand-ui :is(#screen-home, #screen-login, .auth-flow-screen, .brand-screen, #screen-bot-select[data-game="cinquillo"]) .btn-primary { background: var(--brand-cyan); color: #071725; border: 1px solid transparent; }
.brand-ui :is(#screen-home, #screen-login, .auth-flow-screen, .brand-screen, #screen-bot-select[data-game="cinquillo"]) :is(.btn-secondary, .btn-tertiary, .btn-quaternary) { background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); }
body.brand-ui :is(#screen-login, .auth-flow-screen, #screen-cinquillo-menu.brand-screen, #screen-bot-select[data-game="cinquillo"]) {
  background: var(--brand-background); padding: 96px 24px 48px; overflow-y: auto;
  justify-content: flex-start; gap: 24px;
}
.brand-ui :is(#screen-login, .auth-flow-screen, .brand-screen, #screen-bot-select[data-game="cinquillo"]) > * { flex-shrink: 0; max-width: 100%; }
.brand-ui .login-box { max-width: 420px; background: var(--brand-surface); border: 1px solid var(--brand-border); padding: 28px; border-radius: 24px; }
.brand-ui .login-box .portal-logo-wrap { width: 72px; height: 72px; background: transparent; border: 0; box-shadow: none; }
.brand-ui .portal-logo-wrap img { width: 100%; height: 100%; object-fit: contain; }
.brand-ui .login-box .portal-title { font-size: 1.5rem; color: var(--brand-text); text-shadow: none; letter-spacing: 0; text-align: center; }
.brand-ui .login-box .portal-subtitle { font-size: 1rem; letter-spacing: 0; text-transform: none; color: var(--brand-muted); text-align: center; }
.brand-ui .login-field { gap: 8px; }
.brand-ui .login-field label { font-size: 0.9rem; letter-spacing: 0; color: var(--brand-muted); }
.brand-ui .login-field input { min-height: 48px; font-size: 1rem; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 10px; }
.brand-ui .login-box :is(.btn-register, .login-forgot) { color: var(--brand-cyan); min-height: 44px; font-size: 0.95rem; }
.brand-ui .login-box :is(.login-divider, #login-reconnect p) { color: var(--brand-muted); }
.brand-ui :is(#login-error, #forgot-password-message, #reset-password-message) { font-size: 0.9rem; line-height: 1.5; }
.brand-ui #screen-login .seo-section { padding: 0; margin: 0; max-width: 560px; }
.brand-ui #screen-login :is(.seo-tagline, .seo-desc) { color: var(--brand-muted); line-height: 1.6; }
.brand-ui #login-footer { position: static; margin-top: 12px; }

.brand-ui #screen-cinquillo-menu .submenu-title,
.brand-ui #screen-bot-select[data-game="cinquillo"] .submenu-title { color: var(--brand-text); text-shadow: none; letter-spacing: -0.02em; text-transform: none; font-size: 2.2rem; }
.brand-ui #screen-cinquillo-menu .submenu-desc,
.brand-ui #screen-bot-select[data-game="cinquillo"] .submenu-desc { color: var(--brand-muted); font-size: 1rem; line-height: 1.6; letter-spacing: 0; max-width: 500px; }
.brand-ui #screen-cinquillo-menu .menu-buttons { width: min(100%, 420px); gap: 12px; }
.brand-ui #screen-cinquillo-menu .mode-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
.brand-ui .mode-choice strong { font-size: 1.05rem; }
.brand-ui .mode-choice small { font-weight: 400; font-size: 0.87rem; opacity: 0.9; }
body.brand-ui :is(#screen-cinquillo-menu, [id$="-menu"]) .submenu-favorite {
  position: static;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  width: auto;
  height: auto;
  min-width: 184px;
  min-height: 44px;
  margin: 0;
  padding: 8px 14px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-surface);
  color: var(--brand-muted);
  font-size: 0.83rem;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: 0;
  box-shadow: none;
}
body.brand-ui :is(#screen-cinquillo-menu, [id$="-menu"]) .submenu-favorite:hover { border-color: var(--brand-cyan); color: var(--brand-text); }
body.brand-ui :is(#screen-cinquillo-menu, [id$="-menu"]) .submenu-favorite.active { border-color: var(--brand-cyan); background: #183945; color: var(--brand-cyan); box-shadow: none; }
body.brand-ui :is(#screen-cinquillo-menu, [id$="-menu"]) .submenu-favorite.active::before { content: '\2713'; }
.brand-ui #screen-cinquillo-menu .submenu-rules-link { position: static; min-height: 44px; display: flex; align-items: center; color: var(--brand-cyan); background: var(--brand-surface); font-size: 0.95rem; border-color: var(--brand-border); }
.brand-ui #screen-bot-select[data-game="cinquillo"] .bot-difficulty-panel { background: var(--brand-surface); border: 1px solid var(--brand-border); padding: 20px; border-radius: 16px; }
.brand-ui #screen-bot-select[data-game="cinquillo"] .bot-difficulty-option { min-height: 44px; color: var(--brand-text); border-color: var(--brand-border); background: var(--brand-surface-raised); font-size: 0.95rem; }
.brand-ui #screen-bot-select[data-game="cinquillo"] .bot-difficulty-option.active,
.brand-ui #screen-bot-select[data-game="cinquillo"] .bot-select-options .btn.active { border-color: var(--brand-cyan); background: #183945; color: var(--brand-cyan); box-shadow: none; }
.brand-ui #screen-bot-select[data-game="cinquillo"] .bot-difficulty-description { color: var(--brand-muted); font-size: 0.9rem; line-height: 1.5; }
.brand-ui #screen-bot-select[data-game="cinquillo"] .bot-select-options { display: none; }

/* Global navigation follows the brand only while a migrated screen is active. */
body.brand-ui:has(:is(#screen-home, #screen-login, .auth-flow-screen, .brand-screen, #screen-bot-select[data-game="cinquillo"]).active) {
  --auth-btn-bg: #111c33; --auth-btn-border: #304260; --auth-btn-color: #f2f6ff;
  --auth-btn-hover-bg: #182640; --auth-btn-hover-border: #57ddf3; --auth-btn-hover-color: #fff;
  --auth-dropdown-bg: #111c33; --auth-dropdown-border: #304260; --auth-dropdown-color: #f2f6ff;
}
.brand-ui :is(#btn-login-header, #user-menu-btn, #portal-menu-btn) { min-height: 44px; font-size: 0.9rem; border-radius: 12px; }
.brand-ui #portal-menu-wrap { position: fixed; }
.brand-ui #portal-menu-wrap.open { z-index: 120; }
.brand-ui :is(#home-nav-actions .btn-back, #global-home-shortcut, .brand-screen > .btn-back, #screen-bot-select[data-game="cinquillo"] > .btn-back) { min-height: 44px; min-width: 44px; color: var(--brand-text); background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 10px; font-size: 0.9rem; }

/* Shared preparation screens: readable controls and one clear primary action. */
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue, #screen-bot-select).brand-flow {
  background: var(--brand-background);
  color: var(--brand-text);
  padding: 96px 24px 64px;
  justify-content: flex-start;
  gap: 24px;
  overflow-y: auto;
}
body.brand-ui .brand-flow > * { flex-shrink: 0; }
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue).brand-flow .lobby-box {
  width: min(100%, 520px);
  min-width: 0;
  padding: 28px;
  gap: 16px;
  background: var(--brand-surface);
  border: 1px solid var(--brand-border);
  border-radius: 20px;
  box-shadow: 0 16px 48px #0002;
}
body.brand-ui #screen-queue.brand-flow .queue-layout { width: min(100%, 520px); }
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue, #screen-bot-select).brand-flow :is(.lobby-title, .submenu-title) {
  margin: 0;
  color: var(--brand-text);
  font-size: clamp(1.5rem, 4vw, 2rem);
  line-height: 1.25;
  text-align: center;
  text-transform: none;
  letter-spacing: -0.02em;
  text-shadow: none;
}
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue, #screen-bot-select).brand-flow :is(.lobby-hint, .waiting-text, .submenu-desc, .bot-difficulty-description, .queue-alternatives-message) {
  color: var(--brand-muted);
  font-size: .95rem;
  line-height: 1.6;
  letter-spacing: 0;
  text-align: center;
  animation: none;
}
body.brand-ui #screen-private-lobby.brand-flow #lobby-create-section { width: 100%; gap: 10px; }
body.brand-ui #screen-private-lobby.brand-flow .room-code-display {
  width: min(100%, 280px);
  padding: 12px 16px;
  margin: 0;
  font-size: 2.5rem;
  letter-spacing: .22em;
  text-indent: .22em;
  color: var(--brand-cyan);
  background: var(--brand-bg);
  border: 1px solid var(--brand-border);
  box-shadow: none;
}
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select).brand-flow .btn-pcount {
  width: 44px;
  height: 44px;
  border: 1px solid var(--brand-border);
  border-radius: 10px;
  background: var(--brand-surface-raised);
  color: var(--brand-text);
}
body.brand-ui #screen-private-lobby.brand-flow .btn-pcount:disabled { display: none; }
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select).brand-flow .btn-pcount.active {
  color: var(--brand-cyan);
  border-color: var(--brand-cyan);
  background: #183945;
}
body.brand-ui :is(#screen-private-lobby, #screen-bot-select).brand-flow .bot-difficulty-panel {
  width: min(100%, 520px);
  min-width: 0;
  padding: 20px;
  border: 1px solid var(--brand-border);
  border-radius: 16px;
  background: var(--brand-surface);
}
body.brand-ui #screen-private-lobby.brand-flow .bot-difficulty-panel { padding: 16px 12px; background: var(--brand-bg); }
body.brand-ui :is(#screen-private-lobby, #screen-bot-select).brand-flow .bot-difficulty-selector { flex-wrap: wrap; gap: 8px; }
body.brand-ui :is(#screen-private-lobby, #screen-bot-select).brand-flow .bot-difficulty-option {
  min-height: 44px;
  padding: 10px 14px;
  font-size: .95rem;
  color: var(--brand-text);
  background: var(--brand-surface-raised);
  border: 1px solid var(--brand-border);
  border-radius: 10px;
}
body.brand-ui :is(#screen-private-lobby, #screen-bot-select).brand-flow .bot-difficulty-option.active,
body.brand-ui #screen-bot-select.brand-flow .bot-select-options .btn.active {
  color: var(--brand-cyan);
  border-color: var(--brand-cyan);
  background: #183945;
  box-shadow: none;
}
body.brand-ui #screen-private-lobby.brand-flow .lobby-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; width: 100%; }
body.brand-ui #screen-private-lobby.brand-flow #btn-start-bots { width: 100%; }
body.brand-ui #screen-private-lobby.brand-flow #btn-start-bots,
body.brand-ui #screen-private-lobby.brand-flow #btn-start-bots:hover {
  background: var(--brand-cyan);
  color: var(--brand-bg);
  border: 1px solid transparent;
  box-shadow: none;
}
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue, #screen-bot-select).brand-flow .btn {
  min-width: 0;
  min-height: 48px;
  padding: 12px 18px;
  font-size: .95rem;
  line-height: 1.4;
  letter-spacing: 0;
  border: 1px solid var(--brand-border);
  background: var(--brand-surface-raised);
  color: var(--brand-text);
  box-shadow: none;
  border-radius: 12px;
}
body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-bot-select).brand-flow .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); border-color: transparent; }
body.brand-ui #screen-private-lobby.brand-flow .player-slot { padding: 12px; font-size: .95rem; overflow-wrap: anywhere; }
body.brand-ui #screen-private-lobby.brand-flow .player-slot.bot-slot { color: var(--brand-muted); font-style: normal; }
body.brand-ui #screen-private-lobby.brand-flow .lobby-invite-feedback:empty { display: none; }
body.brand-ui #screen-private-lobby.brand-flow #lobby-player-error:empty { display: none; }
body.brand-ui #screen-private-lobby.brand-flow .players-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.brand-ui #screen-private-lobby.brand-flow :is(.room-code-display, .btn-pcount.active) { text-shadow: none; box-shadow: none; }
body.brand-ui #screen-queue.brand-flow .queue-count { color: var(--brand-cyan); font-size: 3rem; line-height: 1; }
body.brand-ui #screen-queue.brand-flow .queue-search-symbol { display: grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: #183945; color: var(--brand-cyan); font-size: 3rem; }
body.brand-ui #screen-queue.brand-flow .queue-choice-copy small { color: var(--brand-muted); line-height: 1.5; }
body.brand-ui #screen-bot-select.brand-flow .submenu-hero { max-width: 520px; }
body.brand-ui #screen-bot-select.brand-flow .bot-select-options { max-width: 520px; flex-wrap: wrap; }
@media (max-width: 700px) {
  body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue, #screen-bot-select).brand-flow { padding: 84px 16px 64px; }
  body.brand-ui :is(#screen-private-lobby, #screen-public-player-select, #screen-queue).brand-flow .lobby-box { padding: 24px 16px; }
  body.brand-ui #screen-private-lobby.brand-flow .lobby-actions .btn { flex: 1 1 120px; padding-inline: 10px; font-size: .85rem; }
  body.brand-ui #screen-private-lobby.brand-flow .lobby-actions #btn-start-bots { flex-basis: 100%; }
  body.brand-ui #screen-queue.brand-flow .queue-alternatives-actions { grid-template-columns: minmax(0, 1fr); }
}

/* Reversi: shared menu and a compact board with clear legal moves. */
body.brand-ui #screen-reversi-menu.brand-screen { background: var(--brand-background); color: var(--brand-text); padding: 96px 24px 48px; justify-content: flex-start; gap: 24px; overflow-y: auto; }
body.brand-ui #screen-reversi-menu .submenu-title { color: var(--brand-text); text-shadow: none; letter-spacing: -.02em; text-transform: none; font-size: 2.2rem; }
body.brand-ui #screen-reversi-menu .submenu-desc { color: var(--brand-muted); font-size: 1rem; line-height: 1.6; letter-spacing: 0; }
body.brand-ui #screen-reversi-menu .menu-buttons { width: min(100%, 420px); gap: 12px; }
body.brand-ui #screen-reversi-menu .mode-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
body.brand-ui #screen-reversi-menu .submenu-rules-link { position: static; min-height: 44px; display: flex; align-items: center; color: var(--brand-cyan); background: var(--brand-surface); font-size: .95rem; border-color: var(--brand-border); }
body.brand-ui #screen-reversi-game {
  --reversi-size: min(600px, calc(100vw - 32px), max(280px, calc(100dvh - 280px)));
  background: var(--brand-background);
  color: var(--brand-text);
  font-family: inherit;
  height: 100dvh;
  padding: 80px 16px 32px;
  gap: 16px;
  justify-content: flex-start;
  overflow-y: auto;
}
body.brand-ui #screen-reversi-game > * { flex-shrink: 0; }
body.brand-ui #screen-reversi-game #game-section { width: var(--reversi-size); gap: 12px; }
body.brand-ui #screen-reversi-game #score-bar { width: 100%; padding: 12px; gap: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 14px; box-shadow: none; text-shadow: none; font-family: inherit; }
body.brand-ui #screen-reversi-game .score-item { padding: 8px 10px; gap: 8px; background: var(--brand-bg); border: 0; box-shadow: none; border-radius: 10px; }
body.brand-ui #screen-reversi-game .score-num { color: var(--brand-text); font-size: 1.25rem; }
body.brand-ui #screen-reversi-game #reversi-status { font-size: .95rem; line-height: 1.4; color: var(--brand-cyan); letter-spacing: 0; text-shadow: none; }
body.brand-ui #screen-reversi-game #reversi-board { width: var(--reversi-size); height: var(--reversi-size); background: #246256; border: 8px solid #163e39; border-radius: 12px; box-shadow: 0 12px 32px #0003; }
body.brand-ui #screen-reversi-game .cell { border: 1px solid #163e3966; padding: 0; min-width: 0; min-height: 0; border-radius: 0; opacity: 1; appearance: none; background: transparent; }
body.brand-ui #screen-reversi-game .cell:disabled { cursor: default; }
body.brand-ui #screen-reversi-game .cell.valid-move { cursor: pointer; }
body.brand-ui #screen-reversi-game .cell.valid-move:hover { background: #ffffff20; }
body.brand-ui #screen-reversi-game .cell.valid-move::after { width: 22%; height: 22%; background: #a9f2d7; box-shadow: 0 0 0 2px #163e3980; }
body.brand-ui #screen-reversi-game .cell:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: -4px; }
body.brand-ui #screen-reversi-game #reversi-help { color: var(--brand-muted); font-size: .85rem; line-height: 1.5; text-align: center; }
body.brand-ui #screen-reversi-game #reversi-player-panel { position: static; width: var(--reversi-size); transform: none; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 0; border: 0; background: none; backdrop-filter: none; }
body.brand-ui #screen-reversi-game .ps-slot { min-width: 0; max-width: none; padding: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); }
body.brand-ui #screen-reversi-game .ps-slot.turno-activo { background: #183945; border-color: var(--brand-cyan); }
body.brand-ui #screen-reversi-game .ps-name { color: var(--brand-text); font-size: .9rem; white-space: normal; overflow-wrap: anywhere; }
body.brand-ui #screen-reversi-game .game-menu-btn { min-height: 44px; background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); }
body.brand-ui #screen-reversi-game .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui #screen-reversi-game .game-menu-dropdown button { color: var(--brand-text); min-height: 44px; }
body.brand-ui #screen-reversi-game .result-panel { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 20px; font-family: inherit; box-shadow: 0 20px 60px #0006; }
body.brand-ui #screen-reversi-game :is(.result-title, .result-score, .result-side) { color: var(--brand-text); }
body.brand-ui #screen-reversi-game .result-subtitle { color: var(--brand-muted); line-height: 1.5; }
body.brand-ui #screen-reversi-game .result-btn { min-height: 44px; border-radius: 10px; }
body.brand-ui #screen-reversi-game .result-btn.primary { color: var(--brand-bg); background: var(--brand-cyan); }
body.brand-ui #screen-reversi-game .result-btn.secondary { color: var(--brand-text); background: var(--brand-surface-raised); border-color: var(--brand-border); }
body.brand-ui:has(#screen-reversi-game.active) :is(#app-version, #pwa-install-banner, #btn-ingame-rules) { display: none !important; }
@media (max-width: 700px) {
  body.brand-ui #screen-reversi-menu.brand-screen { padding: 140px 16px 40px; }
  body.brand-ui #screen-reversi-menu .btn { min-width: 0; }
  body.brand-ui #screen-reversi-game #score-bar { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body.brand-ui #screen-reversi-game #reversi-status { grid-column: 1 / -1; grid-row: 1; }
  body.brand-ui #screen-reversi-game .score-item { justify-content: center; }
}

@media (min-width: 600px) and (max-height: 540px) {
  body.brand-ui #screen-reversi-game.active {
    --reversi-size: min(440px, calc(100dvh - 80px), calc(100vw - 320px));
    display: grid;
    grid-template-columns: var(--reversi-size) 240px;
    grid-template-rows: auto auto auto;
    align-content: center;
    align-items: center;
    justify-content: center;
    padding: 56px 16px 16px;
    gap: 12px 20px;
  }
  body.brand-ui #screen-reversi-game #game-section { display: contents !important; }
  body.brand-ui #screen-reversi-game #reversi-board { grid-column: 1; grid-row: 1 / 4; }
  body.brand-ui #screen-reversi-game #score-bar { grid-column: 2; grid-row: 1; }
  body.brand-ui #screen-reversi-game #reversi-player-panel { grid-column: 2; grid-row: 2; width: 100%; grid-template-columns: 1fr; }
  body.brand-ui #screen-reversi-game #reversi-help { grid-column: 2; grid-row: 3; }
}

/* Pilot board: update HUD colors without changing card sizes, positions or suits. */
body.brand-ui #screen-game {
  --felt: #0c2635;
  --felt-dark: #0b2030;
  --felt-edge: #30485c;
  --felt-background: radial-gradient(ellipse at 50% 40%, #163b4a, #081422 80%);
  --felt-surface: radial-gradient(ellipse at 50% 30%, #184654, #0b2734);
  --hud-bar-bg: #091421eb;
  --hud-muted: #b1bfd5;
  --hud-badge-bg: #101f33;
  --hud-badge-border: #3a506e;
  --hud-badge-name: #f2f6ff;
  --hud-badge-sub: #b1bfd5;
  --hud-active: #57ddf3;
  --hud-active-shadow: #57ddf340;
}
body.brand-ui:has(#screen-game.active) #app-version { display: none; }
/* Installation can be offered again in the portal, never over a live hand. */
body.brand-ui:has(#screen-game.active) #pwa-install-banner { display: none !important; }
.brand-ui #screen-game .game-menu-btn { min-height: 44px; color: var(--brand-text); border-color: var(--brand-border); background: var(--brand-surface); }
body.brand-ui:has(#screen-game.active) :is(#overlay-guest-promo, #overlay-game-rules) .overlay-box,
.brand-ui #overlay-register .overlay-box { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 20px; color: var(--brand-text); }
body.brand-ui:has(#screen-game.active) :is(#overlay-guest-promo, #overlay-game-rules) :is(.overlay-title, .overlay-subtitle),
.brand-ui #overlay-register :is(.overlay-title, .profile-field label) { color: var(--brand-text); letter-spacing: 0; }
.brand-ui #overlay-register .profile-field input { min-height: 44px; font-size: 1rem; background: var(--brand-bg); border-color: var(--brand-border); color: var(--brand-text); }
.brand-ui #overlay-register .profile-field label { font-size: 0.9rem; }
body.brand-ui:has(#screen-game.active) :is(#overlay-guest-promo, #overlay-game-rules) .btn,
.brand-ui #overlay-register .btn { min-height: 44px; letter-spacing: 0; background: var(--brand-surface-raised); border: 1px solid var(--brand-border); color: var(--brand-text); box-shadow: none; }
body.brand-ui:has(#screen-game.active) #overlay-guest-promo .btn-primary,
.brand-ui #overlay-register .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); }

@media (max-width: 700px) {
  body.brand-ui #screen-home { padding: 84px 20px 40px; gap: 24px; }
  .brand-ui #screen-home .portal-header { gap: 8px; }
  .home-brand { width: min(100%, 310px); }
  .home-brand-caption { font-size: 0.95rem; }
  .home-brand-caption span { display: block; }
  .brand-ui #screen-home .portal-primary-actions { justify-content: center; }
  .brand-ui .category-grid, .home-starters { grid-template-columns: minmax(0, 1fr); }
  .brand-ui #screen-home .category-card { min-height: 104px; padding: 20px; gap: 16px; }
  .brand-ui #screen-home .quick-play-block { flex-direction: column; align-items: stretch; text-align: center; }
  .brand-ui #screen-home .quick-play-button { padding: 12px; }
  .home-starters a { padding: 12px 16px; }
  .home-starters img { width: 36px; height: 48px; flex-basis: 36px; }
  .brand-ui #screen-home .game-carousel { grid-template-columns: 44px minmax(0, 1fr) 44px; gap: 4px; }
  .brand-ui #screen-home .game-carousel .game-grid { width: 100%; overflow: hidden; min-height: 220px; }
  .brand-ui #screen-home .game-carousel-arrow { display: block; width: 44px; height: 52px; font-size: 2rem; }
  .brand-ui #screen-home .games-section { width: 100%; }
  .brand-ui #home-nav-actions .btn-back { padding-inline: 8px; }
  .brand-ui #home-nav-actions { left: 12px; top: 12px; gap: 4px; }
  .brand-ui :is(#btn-login-header, #user-menu-btn, #portal-menu-btn) { font-size: 0.8rem; padding: 8px 10px; }
  .brand-ui #auth-header { right: 12px; top: 12px; }
  .brand-ui #portal-menu-wrap { left: 12px; top: 12px; }
  .brand-ui :is(#screen-login, .auth-flow-screen, #screen-cinquillo-menu.brand-screen, #screen-bot-select[data-game="cinquillo"]) { padding: 84px 16px 40px; }
  .brand-ui .login-box { padding: 24px 20px; }
  .brand-ui :is(.login-box, #screen-cinquillo-menu, #screen-bot-select[data-game="cinquillo"]) .btn { min-width: 0; }
  .brand-ui .login-box :is(form, .auth-flow-form) { width: 100%; }
  .brand-ui #screen-bot-select[data-game="cinquillo"] .bot-difficulty-panel { padding: 16px 12px; }
  .brand-ui #screen-bot-select[data-game="cinquillo"] .bot-difficulty-selector { flex-wrap: wrap; }
  /* The floating rules shortcut covered the leftmost card on small boards.
     Rules remain available in the game's Menu at every viewport size. */
  body.brand-ui:has(#screen-game.active) #btn-ingame-rules { display: none; }
}
@media (max-width: 480px) {
  .brand-ui #screen-game .game-layout { grid-template-columns: 56px minmax(0, 1fr) 56px; }
  .brand-ui #screen-game .table-area { min-width: 0; gap: 2px; padding-inline: 6px; }
  .brand-ui #screen-game .player-area { min-width: 0; }
  .brand-ui #screen-game .player-area:not(.top) .player-badge { min-width: 0; width: 56px; padding: 4px; }
  .brand-ui #screen-game .player-area:not(.top) .p-name { max-width: 44px; }
  .brand-ui #screen-game .player-area:not(.top) .mini-hand { max-width: 56px; }
  .brand-ui #screen-game .suit-label { padding-inline: 0; font-size: 0.72rem; }
}
/* One menu component for the full catalogue; individual game boards keep their rules. */
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu {
  background: var(--brand-background); color: var(--brand-text);
  padding: 96px 24px 48px; justify-content: flex-start; gap: 24px; overflow-y: auto;
}
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu > * { flex-shrink: 0; max-width: 100%; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .submenu-title { color: var(--brand-text); text-shadow: none; letter-spacing: -.02em; text-transform: none; font-size: 2.2rem; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .submenu-hero { gap: 12px; text-align: center; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu :is(.submenu-desc, .codigo-spia-recommended) { color: var(--brand-muted); font-size: 1rem; line-height: 1.6; letter-spacing: 0; max-width: 520px; text-align: center; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .menu-buttons { width: min(100%, 420px); gap: 12px; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .menu-buttons .btn { width: 100%; min-width: 0; min-height: 48px; padding: 13px 20px; border: 1px solid var(--brand-border); border-radius: 12px; color: var(--brand-text); background: var(--brand-surface-raised); font-size: 1rem; line-height: 1.4; letter-spacing: 0; text-transform: none; text-shadow: none; box-shadow: none; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .menu-buttons .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); border-color: transparent; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .mode-choice { display: flex; flex-direction: column; align-items: center; gap: 5px; text-align: center; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .submenu-rules-link { position: static; min-height: 44px; display: flex; align-items: center; color: var(--brand-cyan); background: var(--brand-surface); font-size: .95rem; border-color: var(--brand-border); }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu [id$="-join-input"] { width: 100%; padding: 16px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu input[id$="-join-code"] { width: min(100%, 180px); min-height: 48px; padding: 10px 16px; border: 1px solid var(--brand-border); border-radius: 10px; color: var(--brand-text); background: var(--brand-bg); font-size: 1.2rem; text-align: center; letter-spacing: .25em; text-transform: uppercase; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .menu-join-error { color: #ffb0b8; font-size: .9rem; line-height: 1.5; text-align: center; }
body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu .menu-join-error:empty { display: none; }
@media (max-width: 900px) {
  body.brand-ui :is(#screen-cinquillo-menu, .brand-game-menu).brand-game-menu { padding: 140px 16px 40px; }
}

body.brand-ui #screen-codigoespia-menu :is(#btn-codigoespia-join, #btn-codigoespia-public) { background: var(--brand-surface-raised); color: var(--brand-text); }
body.brand-ui:has(.brand-game-menu.active) #app-version { display: none; }
@media (max-width: 380px) {
  body.brand-ui:has(.brand-game-menu.active) #auth-header { width: calc(100% - 176px); }
  body.brand-ui:has(.brand-game-menu.active) :is(#user-menu-btn, #btn-login-header) { width: 100%; }
  body.brand-ui:has(.brand-game-menu.active) :is(#user-menu-avatar, #user-menu-level) { display: none; }
  body.brand-ui:has(.brand-game-menu.active) #user-menu-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}

/* Rankings: accessible filters, readable results and explicit empty/error states. */
body.brand-ui #screen-ranking { padding: 96px 24px 48px; justify-content: flex-start; background: var(--brand-background); color: var(--brand-text); overflow-y: auto; }
body.brand-ui #screen-ranking .ranking-wrap { width: min(100%, 900px); max-width: 900px; padding: 0; max-height: none; overflow: visible; gap: 20px; flex-shrink: 0; }
body.brand-ui #screen-ranking .ranking-title { margin: 0; color: var(--brand-text); font-size: clamp(1.6rem, 4vw, 2.2rem); line-height: 1.25; letter-spacing: -.02em; }
body.brand-ui #screen-ranking :is(.ranking-description, .ranking-legend) { margin: 0; color: var(--brand-muted); font-size: .95rem; line-height: 1.6; text-align: center; max-width: 680px; }
body.brand-ui #screen-ranking .ranking-tabs { width: 100%; flex-wrap: wrap; justify-content: center; overflow: visible; padding: 4px; gap: 8px; }
body.brand-ui #screen-ranking :is(.rank-tab, .rank-difficulty-tab) { min-height: 44px; min-width: 0; flex: 0 1 auto; padding: 10px 14px; font-size: .9rem; line-height: 1.4; border: 1px solid var(--brand-border); border-radius: 10px; color: var(--brand-muted); background: var(--brand-surface); letter-spacing: 0; }
body.brand-ui #screen-ranking :is(.rank-tab, .rank-difficulty-tab).active { background: #183945; color: var(--brand-cyan); border-color: var(--brand-cyan); }
body.brand-ui #screen-ranking .ranking-difficulty-tabs { width: 100%; gap: 8px; }
body.brand-ui #screen-ranking .ranking-table-wrap { padding: 8px 20px; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface); text-align: center; }
body.brand-ui #screen-ranking :is(.ranking-loading, .ranking-empty) { padding: 40px 16px; color: var(--brand-muted); font-size: 1rem; line-height: 1.6; }
body.brand-ui #screen-ranking #ranking-retry { margin: 0 0 24px; }
body.brand-ui #screen-ranking .ranking-table { table-layout: fixed; }
body.brand-ui #screen-ranking .ranking-table :is(th, td) { padding: 14px 8px; border-color: var(--brand-border); letter-spacing: 0; font-size: .95rem; color: var(--brand-text); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
body.brand-ui #screen-ranking .ranking-table th { color: var(--brand-muted); font-size: .8rem; text-transform: none; }
body.brand-ui #screen-ranking .rank-col-name { text-align: left; }
body.brand-ui #screen-ranking .ranking-table tr.rank-me td { background: #183945; }
body.brand-ui #screen-ranking .ranking-table .rank-col-l { color: #f3a6af !important; }
body.brand-ui #screen-ranking .rank-you { display: inline-block; margin-left: 4px; padding: 2px 6px; font-size: .75rem; border-radius: 5px; color: var(--brand-cyan); background: var(--brand-bg); }
body.brand-ui #screen-ranking .ranking-my-row { padding: 16px; border: 1px solid var(--brand-cyan); background: #183945; color: var(--brand-text); font-size: .95rem; line-height: 1.8; letter-spacing: 0; }
body.brand-ui #screen-ranking .ranking-game-field { display: none; }
body.brand-ui #screen-ranking .ranking-my-row span { color: var(--brand-text) !important; }
body.brand-ui:has(#screen-ranking.active) #app-version { display: none; }
@media (max-width: 600px) {
  body.brand-ui #screen-ranking { padding: 84px 16px 32px; }
  body.brand-ui #screen-ranking .ranking-wrap { gap: 16px; }
  body.brand-ui #screen-ranking .ranking-tabs { display: none; }
  body.brand-ui #screen-ranking .ranking-game-field { display: flex; flex-direction: column; gap: 8px; width: 100%; }
  body.brand-ui #screen-ranking .ranking-game-field label { color: var(--brand-muted); font-size: .9rem; }
  body.brand-ui #screen-ranking select { width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-surface); color: var(--brand-text); font-size: 1rem; }
  body.brand-ui #screen-ranking .rank-difficulty-tab { flex: 1; }
  body.brand-ui #screen-ranking .ranking-table-wrap { padding: 4px; }
  body.brand-ui #screen-ranking .ranking-table :is(th, td) { padding: 12px 3px; font-size: .82rem; }
  body.brand-ui #screen-ranking .rank-col-pos { width: 28px; }
  body.brand-ui #screen-ranking .rank-col-elo { width: 42px; }
  body.brand-ui #screen-ranking :is(.rank-col-w, .rank-col-draw, .rank-col-l, .rank-col-games) { width: 30px; }
  body.brand-ui #screen-ranking .ranking-legend { font-size: .82rem; }
}

/* Profile, avatar and achievement views share the portal's visual language. */
body.brand-ui #overlay-profile .profile-box {
  --profile-accent: var(--brand-cyan); --profile-text: var(--brand-text);
  --profile-muted: var(--brand-muted); --profile-line: var(--brand-border);
  color: var(--brand-text); scrollbar-color: var(--brand-border) transparent;
  box-shadow: 0 24px 80px #0008;
}
body.brand-ui #overlay-profile .profile-box:not(.profile-box-avatar-mode):not(.profile-box-achievements-mode),
body.brand-ui #overlay-profile .profile-box:is(.profile-box-avatar-mode, .profile-box-achievements-mode) {
  background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 20px;
}
body.brand-ui #overlay-profile :is(.profile-progression, .profile-achievements-scene) {
  --progression-accent: var(--brand-cyan); --progression-border: var(--brand-border); --progression-muted: var(--brand-muted);
}
body.brand-ui #overlay-profile .profile-eyebrow { font-size: .85rem; letter-spacing: 0; }
body.brand-ui #overlay-profile .profile-close { width: 44px; height: 44px; margin: 0; border-radius: 10px; border-color: var(--brand-border); }
body.brand-ui #overlay-profile #profile-display-name { color: var(--brand-text); overflow-wrap: anywhere; }
body.brand-ui #overlay-profile :is(.profile-avatar-link, .progression-link, .profile-avatar-back, .progression-back) { min-height: 44px; font-size: .9rem; color: var(--brand-cyan); letter-spacing: 0; }
body.brand-ui #overlay-profile :is(.profile-avatar-back, .progression-back) { border-color: var(--brand-border); background: var(--brand-surface-raised); }
body.brand-ui #overlay-profile #profile-main-view .profile-field label { color: var(--brand-text); font-size: .9rem; }
body.brand-ui #overlay-profile #profile-main-view .profile-field input { min-height: 48px; font-size: 1rem; background: var(--brand-bg); border-color: var(--brand-border); }
body.brand-ui #overlay-profile #profile-main-view .profile-field input:focus { border-color: var(--brand-cyan); outline: 2px solid var(--brand-cyan); outline-offset: 2px; }
body.brand-ui #overlay-profile :is(.profile-field small, .profile-security summary small, .profile-footer > p) { color: var(--brand-muted); font-size: .82rem; line-height: 1.5; }
body.brand-ui #overlay-profile :is(.profile-security summary strong, .profile-account-section h3) { font-size: 1rem; }
body.brand-ui #overlay-profile :is(.profile-security, .profile-progression, .achievements-level-card) { border-color: var(--brand-border); background: var(--brand-bg); }
body.brand-ui #overlay-profile :is(.profile-cancel, .profile-save) { min-height: 48px; font-size: .95rem; border-radius: 10px; }
body.brand-ui #overlay-profile .profile-save { background: var(--brand-cyan); color: var(--brand-bg); }
body.brand-ui #overlay-profile .profile-cancel { background: var(--brand-surface-raised); color: var(--brand-text); }
body.brand-ui #overlay-profile :is(.progression-summary-line strong, .achievements-heading > p:last-child, .achievement-title-line h3) { font-size: .95rem; }
body.brand-ui #overlay-profile :is(.progression-summary-line span, #profile-achievement-count, .achievements-level-content p, .achievements-stats span, .achievement-description) { font-size: .85rem; line-height: 1.5; }
body.brand-ui #overlay-profile :is(.achievements-how, .achievements-footnote, .achievement-status, .achievement-xp) { font-size: .8rem; line-height: 1.6; }
body.brand-ui #overlay-profile .achievement-card { background: var(--brand-bg); border-color: var(--brand-border); }
body.brand-ui #overlay-profile .achievement-card.is-unlocked { background: #183945; border-color: var(--brand-cyan); }
body.brand-ui #overlay-profile .profile-avatar-scene-head { background: var(--brand-bg); border-color: var(--brand-border); }
body.brand-ui #overlay-profile .profile-avatar-scene-head img { border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui #overlay-profile .profile-avatar-scene-head span { color: var(--brand-cyan); letter-spacing: 0; font-size: .8rem; }
body.brand-ui #overlay-profile .profile-avatar-scene-head h3 { color: var(--brand-text); letter-spacing: 0; }
body.brand-ui #overlay-profile .profile-avatar-scene-head p { color: var(--brand-muted); font-size: .9rem; }
body.brand-ui #overlay-profile .profile-avatar-option.selected { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px var(--brand-cyan); }
body.brand-ui #overlay-profile .profile-confirm-panel { background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-text); }
body.brand-ui #overlay-profile :is(.profile-confirm-title, .profile-confirm-panel p) { color: var(--brand-text); }
body.brand-ui #overlay-profile .btn { min-height: 44px; min-width: 0; font-size: .9rem; letter-spacing: 0; border-radius: 10px; box-shadow: none; }
body.brand-ui #overlay-profile .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); border: 1px solid transparent; }
body.brand-ui #overlay-profile .btn-secondary { background: var(--brand-surface-raised); color: var(--brand-text); border-color: var(--brand-border); }
body.brand-ui #overlay-profile :is(button, summary):focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
@media (max-width: 560px) {
  body.brand-ui #overlay-profile .profile-avatar-scene-head { flex-direction: column; text-align: center; align-items: center; }
  body.brand-ui #overlay-profile .profile-avatar-scene-preview-wrap { width: 100%; }
  body.brand-ui #overlay-profile .profile-avatar-scene-preview-wrap .btn { max-width: 220px; }
  body.brand-ui #overlay-profile .achievements-stats span { font-size: .75rem; overflow-wrap: anywhere; }
}
@media (max-width: 380px) {
  body.brand-ui #overlay-profile #profile-display-name { font-size: 1.25rem; line-height: 1.35; }
  body.brand-ui #overlay-profile .profile-identity { gap: 12px; }
}

/* Social dialogs: readable contact states and separate game/favorite actions. */
body.brand-ui .brand-social .social-box {
  align-items: stretch; gap: 16px; padding: 28px;
  width: min(700px, calc(100vw - 32px)); max-height: min(86dvh, 780px);
  background: var(--brand-surface); border: 1px solid var(--brand-border);
  border-radius: 20px; color: var(--brand-text); box-shadow: 0 24px 80px #0008;
  scrollbar-color: var(--brand-border) transparent;
}
body.brand-ui .brand-social .overlay-title {
  margin: 0; padding-right: 42px; text-align: left; color: var(--brand-text);
  font-size: clamp(1.35rem, 4vw, 1.7rem); line-height: 1.4; letter-spacing: -.02em;
}
body.brand-ui .brand-social .social-close {
  width: 44px; height: 44px; border-radius: 10px;
  background: var(--brand-surface-raised); border: 1px solid var(--brand-border); color: var(--brand-text);
}
body.brand-ui .brand-social .social-description { margin: -4px 0 4px; color: var(--brand-muted); font-size: .95rem; line-height: 1.6; text-align: left; }
body.brand-ui .brand-social .social-empty { margin: 0; padding: 26px 18px; border: 1px dashed var(--brand-border); border-radius: 14px; color: var(--brand-muted); font-size: .95rem; line-height: 1.65; }
body.brand-ui .brand-social .social-empty strong { display: block; margin-bottom: 6px; color: var(--brand-text); font-size: 1rem; }
body.brand-ui .brand-social .social-tabs { gap: 6px; }
body.brand-ui .brand-social .social-tabs button { min-width: 0; min-height: 44px; font-size: .9rem; border-color: var(--brand-border); background: var(--brand-bg); color: var(--brand-muted); }
body.brand-ui .brand-social .social-tabs button.active { background: #163442; border-color: var(--brand-cyan); color: var(--brand-cyan); }
body.brand-ui .brand-social .friends-search { align-items: end; }
body.brand-ui .brand-social .friends-search-field { flex: 1; min-width: 0; width: 100%; text-align: left; }
body.brand-ui .brand-social label { display: block; margin-bottom: 8px; font-size: .9rem; color: var(--brand-text); }
body.brand-ui .brand-social .social-search-input { min-height: 48px; width: 100%; margin: 0; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 10px; color: var(--brand-text); font-size: 1rem; }
body.brand-ui .brand-social .social-search-input::placeholder { color: var(--brand-muted); }
body.brand-ui .brand-social .social-feedback { margin: 0; min-height: 0; font-size: .9rem; line-height: 1.5; color: var(--brand-cyan); }
body.brand-ui .brand-social :is(.social-feedback, .social-list, .favorite-games-grid):empty { display: none; }
body.brand-ui .brand-social .social-row { gap: 16px; padding: 16px; border-color: var(--brand-border); background: var(--brand-bg); border-radius: 12px; text-align: left; }
body.brand-ui .brand-social .social-row-name { min-width: 0; font-size: 1rem; color: var(--brand-text); overflow-wrap: anywhere; }
body.brand-ui .brand-social .friend-presence { display: block; margin-top: 5px; color: var(--brand-muted); font-size: .82rem; font-weight: 400; }
body.brand-ui .brand-social .social-row-actions { display: flex; flex-wrap: wrap; gap: 8px; }
body.brand-ui .brand-social .social-notification-copy { color: var(--brand-text); font-size: 1rem; line-height: 1.6; overflow-wrap: anywhere; }
body.brand-ui .brand-social .btn { min-width: 0; min-height: 44px; margin: 0; padding: 10px 14px; border-radius: 10px; font-size: .9rem; letter-spacing: 0; box-shadow: none; }
body.brand-ui .brand-social .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); border-color: transparent; }
body.brand-ui .brand-social .btn-secondary { background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); }
body.brand-ui .brand-social #btn-friends-search { min-height: 48px; }
body.brand-ui .social-overlay .favorite-tile { display: flex; align-items: center; gap: 8px; padding: 8px; cursor: default; }
body.brand-ui .social-overlay .favorite-open { flex: 1; min-width: 0; min-height: 60px; padding: 8px; border: 0; border-radius: 8px; background: transparent; color: inherit; font: inherit; text-align: left; cursor: pointer; overflow-wrap: anywhere; }
body.brand-ui .social-overlay .favorite-open:disabled { cursor: default; }
body.brand-ui .social-overlay .favorite-tile .favorite-toggle { position: static; flex: 0 0 44px; width: 44px; height: 44px; margin: 0; }
body.brand-ui .brand-social .favorite-games-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
body.brand-ui .brand-social .favorite-tile { border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-bg); color: var(--brand-text); }
body.brand-ui .brand-social .favorite-tile:hover { border-color: var(--brand-cyan); }
body.brand-ui .brand-social .favorite-tile strong { font-size: 1rem; }
body.brand-ui .brand-social .favorite-tile small { display: block; margin-top: 5px; font-size: .82rem; letter-spacing: 0; color: var(--brand-muted); }
body.brand-ui .brand-social .favorite-toggle { --favorite-bg: var(--brand-surface-raised); --favorite-border: var(--brand-border); --favorite-color: var(--brand-muted); --favorite-active-bg: #163442; --favorite-active-border: var(--brand-cyan); --favorite-active-color: var(--brand-cyan); --favorite-shadow: transparent; }
body.brand-ui .brand-social :is(button, input):focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
@media (max-width: 600px) {
  body.brand-ui .brand-social .social-box { padding: 24px 16px 16px; border-radius: 16px; }
  body.brand-ui .brand-social .social-row { gap: 12px; }
  body.brand-ui .brand-social .social-row-name { flex-basis: 100%; }
  body.brand-ui .brand-social .social-row-actions { width: 100%; }
  body.brand-ui .brand-social .social-row-actions .btn { flex: 1; }
  body.brand-ui .brand-social .social-notification-copy { flex-basis: 100%; }
  body.brand-ui .brand-social #btn-friends-search { width: 100%; }
  body.brand-ui .brand-social .favorite-games-grid { grid-template-columns: 1fr; }
}
@media (max-width: 380px) {
  body.brand-ui .brand-social .social-tabs button { padding-inline: 4px; font-size: .8rem; }
}

/* Daily rewards and contact use the same readable surfaces as the portal. */
body.brand-ui:has(.brand-social.active) #pwa-install-banner { display: none !important; }
body.brand-ui #daily-reward-panel {
  position: fixed; inset: 0; transform: none; margin: auto; padding: 28px;
  width: min(560px, calc(100vw - 32px)); max-height: calc(100dvh - 32px);
  overflow-y: auto; border: 1px solid var(--brand-border); border-radius: 20px;
  background: var(--brand-surface); color: var(--brand-text); box-shadow: 0 24px 80px #0008;
  font-family: inherit; scrollbar-color: var(--brand-border) transparent;
}
body.brand-ui #daily-reward-panel:not([open]) { display: none; }
body.brand-ui #daily-reward-panel::backdrop { background: #020613c9; }
body.brand-ui #daily-reward-panel .daily-reward-close {
  top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 10px;
  background: var(--brand-surface-raised); color: var(--brand-text); border-color: var(--brand-border);
}
body.brand-ui #daily-reward-panel .daily-reward-main { margin: 0; padding-right: 48px; }
body.brand-ui #daily-reward-panel .daily-reward-main > div { min-width: 0; max-width: 100%; }
body.brand-ui #daily-reward-panel .daily-reward-kicker { color: var(--brand-cyan); font-size: .82rem; letter-spacing: 0; line-height: 1.5; margin-bottom: 6px; }
body.brand-ui #daily-reward-panel h2 { color: var(--brand-text); font-size: clamp(1.4rem, 5vw, 1.75rem); letter-spacing: -.02em; line-height: 1.35; }
body.brand-ui #daily-reward-panel .daily-reward-intro { margin: 14px 0 20px; color: var(--brand-muted); font-size: .95rem; line-height: 1.6; }
body.brand-ui #daily-reward-panel .daily-reward-coins { gap: 8px; margin: 0 0 12px; color: var(--brand-text); flex-wrap: wrap; white-space: normal; }
body.brand-ui #daily-reward-panel .daily-reward-coins > span:first-child { margin-right: auto; color: var(--brand-muted); font-weight: 400; font-size: .95rem; }
body.brand-ui #daily-reward-coins { font-size: 1.5rem; overflow-wrap: anywhere; }
body.brand-ui #daily-reward-panel .daily-reward-stats { gap: 12px; }
body.brand-ui #daily-reward-panel .daily-reward-stats div { padding: 18px 10px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-bg); }
body.brand-ui #daily-reward-panel .daily-reward-stats span { color: var(--brand-text); font-size: 1rem; }
body.brand-ui #daily-reward-panel .daily-reward-stats span span { display: inline; font-size: 1.4rem; }
body.brand-ui #daily-reward-panel .daily-reward-stats small { margin-top: 7px; font-size: .82rem; color: var(--brand-muted); letter-spacing: 0; text-transform: none; }
body.brand-ui #daily-reward-panel .daily-reward-days { margin: 20px 0 14px; gap: 6px; grid-template-columns: repeat(7, minmax(0, 1fr)); }
body.brand-ui #daily-reward-panel .daily-reward-days > span { padding: 10px 3px; font-size: .8rem; color: var(--brand-muted); border-color: var(--brand-border); }
body.brand-ui #daily-reward-panel .daily-reward-days small { display: block; margin-top: 5px; font-size: .78rem; }
body.brand-ui #daily-reward-panel .daily-reward-days .active { color: var(--brand-cyan); background: #163442; border-color: var(--brand-border); }
body.brand-ui #daily-reward-panel .daily-reward-days .current { color: var(--brand-cyan); border: 2px solid var(--brand-cyan); padding: 9px 2px; }
body.brand-ui #daily-reward-panel .daily-reward-help { color: var(--brand-muted); font-size: .82rem; line-height: 1.6; margin: 0 0 20px; }
body.brand-ui #daily-reward-panel .btn { min-height: 48px; width: 100%; min-width: 0; padding: 12px; font-size: .95rem; letter-spacing: 0; border-radius: 10px; box-shadow: none; }
body.brand-ui #daily-reward-panel .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); border: 1px solid transparent; }
body.brand-ui #daily-reward-panel .btn-secondary { background: var(--brand-surface-raised); border: 1px solid var(--brand-border); color: var(--brand-text); }
body.brand-ui #daily-reward-panel #btn-daily-reward-claim:disabled { background: var(--brand-surface-raised); border: 1px solid var(--brand-border); color: var(--brand-muted); filter: none; opacity: 1; cursor: default; }
body.brand-ui #daily-reward-panel .daily-reward-actions p { font-size: .9rem; color: var(--brand-text); line-height: 1.6; }
body.brand-ui #daily-reward-panel button:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
body.brand-ui #overlay-contact .contact-box { width: min(620px, calc(100vw - 32px)); }
body.brand-ui #overlay-contact .overlay-title { max-width: none; }
body.brand-ui #overlay-contact .contact-form { gap: 16px; text-align: left; }
body.brand-ui #overlay-contact label { letter-spacing: 0; margin: 0; font-weight: 600; }
body.brand-ui #overlay-contact :is(input, select, textarea) { min-height: 48px; background: var(--brand-bg); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: 10px; font-size: 1rem; }
body.brand-ui #overlay-contact select option { background: var(--brand-bg); color: var(--brand-text); }
body.brand-ui #overlay-contact textarea { padding-bottom: 12px; line-height: 1.6; }
body.brand-ui #overlay-contact :is(input, textarea)::placeholder { color: var(--brand-muted); }
body.brand-ui #overlay-contact :is(input, select, textarea):focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
body.brand-ui #overlay-contact .contact-counter { position: static; align-self: flex-end; padding: 0; font-size: .8rem; color: var(--brand-muted); background: transparent; }
body.brand-ui #overlay-contact :is(#contact-message-help, .contact-privacy) { font-size: .82rem; line-height: 1.6; color: var(--brand-muted); text-align: left; }
body.brand-ui #overlay-contact .contact-feedback { min-height: 0; font-size: .95rem; line-height: 1.6; text-align: left; }
body.brand-ui #overlay-contact .contact-feedback:empty { display: none; }
body.brand-ui #overlay-contact .contact-feedback.success { color: #88edbc; }
body.brand-ui #overlay-contact .contact-feedback.error { color: #ffb5b5; }
body.brand-ui #overlay-contact .contact-submit { width: 100%; min-height: 48px; }
@media (max-width: 480px) {
  body.brand-ui #daily-reward-panel { padding: 24px 16px 20px; border-radius: 16px; }
  body.brand-ui #daily-reward-panel .daily-reward-days { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* Shared game dialogs override the legacy per-game overlay palettes. */
body.brand-ui .brand-game-dialog { z-index: 1100 !important; }
body.brand-ui:has(.brand-game-dialog.active) :is(#pwa-install-banner, #btn-ingame-rules) { display: none !important; }
body.brand-ui .brand-game-dialog .overlay-box {
  width: min(540px, calc(100vw - 32px)); min-width: 0; max-height: calc(100dvh - 32px);
  overflow-y: auto; padding: 28px; align-items: stretch; gap: 16px; text-align: left;
  background: var(--brand-surface) !important; border: 1px solid var(--brand-border) !important;
  border-radius: 20px; color: var(--brand-text); box-shadow: 0 24px 80px #0008 !important;
  scrollbar-color: var(--brand-border) transparent;
}
body.brand-ui .brand-game-dialog .overlay-title { margin: 0; color: var(--brand-text) !important; font-size: clamp(1.4rem, 5vw, 1.8rem); letter-spacing: -.02em; line-height: 1.35; text-shadow: none; overflow-wrap: anywhere; }
body.brand-ui .brand-game-dialog .overlay-subtitle { margin: 0; font-size: 1rem; color: var(--brand-muted) !important; line-height: 1.65; overflow-wrap: anywhere; }
body.brand-ui .brand-game-dialog .game-dialog-eyebrow { margin: 0 42px 0 0; font-size: .82rem; color: var(--brand-cyan); line-height: 1.5; }
body.brand-ui .brand-game-dialog :is(.game-dialog-help, .game-dialog-feedback) { margin: 0; font-size: .9rem; line-height: 1.6; color: var(--brand-muted); }
body.brand-ui .brand-game-dialog .overlay-actions { width: 100%; display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
body.brand-ui .brand-game-dialog .btn { min-width: 0; min-height: 48px; width: 100%; padding: 12px 16px; margin: 0; border-radius: 10px; font-size: .95rem; letter-spacing: 0; box-shadow: none !important; white-space: normal; }
body.brand-ui .brand-game-dialog .btn-primary { background: var(--brand-cyan) !important; color: var(--brand-bg) !important; border: 1px solid transparent !important; }
body.brand-ui .brand-game-dialog .btn-secondary { background: var(--brand-surface-raised) !important; color: var(--brand-text) !important; border: 1px solid var(--brand-border) !important; }
body.brand-ui .brand-game-dialog .btn.game-dialog-danger { background: #321e2c !important; color: #ffb5b5 !important; border-color: #745061 !important; }
body.brand-ui .brand-game-dialog .btn:disabled { opacity: 1; cursor: default; background: var(--brand-surface-raised) !important; color: var(--brand-muted) !important; border-color: var(--brand-border) !important; filter: none; transform: none; }
body.brand-ui .brand-game-dialog .overlay-corner-close { top: 12px; right: 12px; width: 44px; height: 44px; border-radius: 10px; background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); }
body.brand-ui .brand-game-dialog:has(.overlay-corner-close) .overlay-title { padding-right: 32px; }
body.brand-ui .brand-game-dialog :is(button, [tabindex]):focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
body.brand-ui #overlay-rematch #rematch-winner-line { margin: 0; min-height: 0; font-size: 1.1rem; line-height: 1.6; color: var(--brand-text) !important; overflow-wrap: anywhere; }
body.brand-ui #overlay-rematch .rematch-timer-wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 18px; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 12px; }
body.brand-ui #overlay-rematch .rematch-timer { color: var(--brand-cyan); font-size: 2rem; text-shadow: none; font-variant-numeric: tabular-nums; }
body.brand-ui #overlay-rematch .rematch-timer.urgent { color: #ffb5b5; }
body.brand-ui #overlay-rematch .rematch-timer-label { color: var(--brand-muted) !important; font-size: .85rem; text-align: right; }
body.brand-ui #overlay-rematch .rematch-player-row { gap: 12px; padding: 12px; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 10px; }
body.brand-ui #overlay-rematch .rematch-player-row.voted { background: #163442; border-color: #315d6b; }
body.brand-ui #overlay-rematch .rp-name { min-width: 0; font-size: .95rem; color: var(--brand-text); overflow-wrap: anywhere; }
body.brand-ui #overlay-rematch .rp-status { flex-shrink: 0; font-size: .82rem; color: var(--brand-muted) !important; }
body.brand-ui #overlay-rematch .rematch-player-row.voted .rp-status { color: var(--brand-cyan) !important; }
body.brand-ui #overlay-game-rules .rules-content { width: 100%; max-height: none; overflow: visible; color: var(--brand-text); font-size: 1rem; line-height: 1.7; }
body.brand-ui #overlay-game-rules .rules-content ul { margin: 0; padding-left: 22px; }
body.brand-ui #overlay-game-rules .rules-content li { margin-bottom: 10px; }
@media (max-width: 480px) {
  body.brand-ui .brand-game-dialog .overlay-box { padding: 24px 16px 20px; border-radius: 16px; }
  body.brand-ui #overlay-rematch .rematch-player-row { flex-wrap: wrap; gap: 6px; }
  body.brand-ui #overlay-rematch .rp-name { flex-basis: 100%; }
}

/* Scores shared by Escoba, Brisca and Tute. */
body.brand-ui .card-results-dialog .overlay-box { width: min(620px, calc(100vw - 32px)); }
body.brand-ui #overlay-escoba-scores .overlay-box { width: min(820px, calc(100vw - 32px)); max-width: 820px; min-width: 0; }
body.brand-ui .card-score-list { display: grid; gap: 12px; width: 100%; }
body.brand-ui .card-score-list-detailed { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.brand-ui .card-score-row { min-width: 0; padding: 16px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-bg); color: var(--brand-text); }
body.brand-ui .card-score-row.winner { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui .card-score-heading { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
body.brand-ui .card-score-heading > div { min-width: 0; }
body.brand-ui .card-score-heading h3 { margin: 0; font-size: 1rem; font-weight: 650; line-height: 1.5; overflow-wrap: anywhere; }
body.brand-ui .card-score-tags { color: var(--brand-cyan); font-size: .82rem; line-height: 1.5; margin: 5px 0 0; }
body.brand-ui .card-score-total { display: flex; flex-direction: column; flex: 0 0 auto; text-align: right; margin: 0; }
body.brand-ui .card-score-total strong { font-size: 1.8rem; line-height: 1.2; color: var(--brand-text); font-variant-numeric: tabular-nums; }
body.brand-ui .card-score-total > span { font-size: .8rem; color: var(--brand-muted); }
body.brand-ui .card-score-details { display: grid; gap: 9px; margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--brand-border); font-size: .85rem; line-height: 1.5; }
body.brand-ui .card-score-details > div { display: flex; flex-wrap: wrap; justify-content: space-between; column-gap: 12px; }
body.brand-ui .card-score-details dt { color: var(--brand-muted); }
body.brand-ui .card-score-details dd { margin: 0; color: var(--brand-text); }
body.brand-ui :is(#escoba-my-stats, #brisca-my-points) { font-size: .85rem; line-height: 1.5; color: var(--brand-text); padding: 5px 8px; border-radius: 8px; background: var(--brand-surface); overflow-wrap: anywhere; max-width: 100%; }
body.brand-ui :is(#escoba-my-stats, #brisca-my-points):empty { display: none; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game) .bottom-info { height: auto; min-height: 26px; max-width: 100%; flex-wrap: wrap; justify-content: center; gap: 6px; }
body.brand-ui #screen-escoba-game .game-layout { grid-template-rows: 70px minmax(0, 1fr) max-content; }
body.brand-ui #tute-trick-area { width: 100%; min-width: 0; justify-content: center; }
body.brand-ui #tute-trick-area .brisca-trick-placeholder { width: min(180px, 100%); height: auto; min-height: 80px; padding: 14px; color: var(--brand-muted); font-size: .85rem; letter-spacing: 0; }
body.brand-ui #tute-scoreboard { min-width: 0; max-width: 240px; gap: 8px; }
body.brand-ui #tute-scoreboard .tute-score-row { min-width: 0; align-items: center; padding: 9px 10px; color: var(--brand-text); background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 10px; font-size: .85rem; }
body.brand-ui #tute-scoreboard .tute-score-row.mine { border-color: var(--brand-cyan); background: #163442; }
body.brand-ui #tute-scoreboard .tute-score-row > span { white-space: normal; overflow: visible; min-width: 0; overflow-wrap: anywhere; line-height: 1.4; }
body.brand-ui #tute-scoreboard .tute-score-row > span small { display: block; color: var(--brand-cyan); margin-top: 3px; }
body.brand-ui #tute-scoreboard .tute-score-row strong { flex-shrink: 0; font-size: 1.05rem; white-space: nowrap; }
body.brand-ui #tute-scoreboard .tute-score-row strong small { font-size: .7rem; font-weight: 400; color: var(--brand-muted); }
@media (max-width: 600px) {
  body.brand-ui #screen-escoba-game .game-layout { grid-template-rows: 44px minmax(0, 1fr) max-content; }
  body.brand-ui .card-score-list-detailed { grid-template-columns: 1fr; }
  body.brand-ui .card-score-row { padding: 14px; }
  body.brand-ui #tute-scoreboard { max-width: 100%; }
}

/* Parchis: keep the four board colors and make progress explicit. */
body.brand-ui #screen-parchis-game .game-menu-wrap { top: 8px; left: 8px; }
body.brand-ui #screen-parchis-game .game-menu-btn { min-height: 44px; background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); box-shadow: none; }
body.brand-ui #screen-parchis-game .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui #screen-parchis-game .game-menu-dropdown button { min-height: 44px; color: var(--brand-text); }
body.brand-ui #screen-parchis-game :is(.game-menu-btn:hover, .game-menu-btn:focus-visible, .game-menu-wrap.open .game-menu-btn, .game-menu-dropdown button:hover, .game-menu-dropdown button:focus-visible) { background: var(--brand-surface-raised); color: var(--brand-cyan); border-color: var(--brand-cyan); }
body.brand-ui:has(#screen-parchis-game.active) { padding-bottom: 0; }
body.brand-ui:has(#screen-parchis-game.active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui #screen-parchis-game.active { display: grid; grid-template-areas: "history board players" "history controls players"; grid-template-columns: minmax(120px, 180px) minmax(0, 720px) minmax(180px, 240px); grid-template-rows: minmax(0, 1fr) auto; justify-content: center; align-items: stretch; height: 100dvh; min-height: 0; padding: 60px 20px 20px; box-sizing: border-box; gap: 16px; background: var(--brand-background); }
body.brand-ui .parchis-board-stage { grid-area: board; min-width: 0; min-height: 0; container-type: size; display: grid; place-items: center; }
body.brand-ui #screen-parchis-game #parchis-board { width: min(100cqw, 100cqh); height: min(100cqw, 100cqh); }
body.brand-ui #screen-parchis-game #player-panel { grid-area: players; position: static; transform: none; display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; align-self: stretch; overflow-y: auto; min-width: 0; max-height: 100%; padding: 0; background: none; border: 0; gap: 8px; z-index: auto; }
body.brand-ui #screen-parchis-game .ps-slot { min-width: 0; max-width: none; padding: 12px; border: 1px solid var(--brand-border); background: var(--brand-surface); border-radius: 12px; align-items: flex-start; }
body.brand-ui #screen-parchis-game .ps-slot.turno-activo { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui #screen-parchis-game .ps-info { min-width: 0; gap: 4px; }
body.brand-ui #screen-parchis-game .ps-dot { margin-top: 4px; }
body.brand-ui #screen-parchis-game .ps-name { color: var(--brand-text); font-size: .9rem; line-height: 1.4; white-space: normal; overflow-wrap: anywhere; }
body.brand-ui #screen-parchis-game :is(.ps-identity, .ps-streak) { color: var(--brand-muted); font-size: .78rem; line-height: 1.4; }
body.brand-ui #screen-parchis-game .ps-fichas { color: var(--brand-text); font-size: .85rem; letter-spacing: 0; line-height: 1.4; }
body.brand-ui #screen-parchis-game .turno-activo .ps-identity { color: var(--brand-cyan); }
body.brand-ui #screen-parchis-game #panel-dado { grid-area: controls; width: 100%; min-width: 0; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; padding: 12px; box-sizing: border-box; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); }
body.brand-ui #screen-parchis-game :is(#btn-dado, #btn-mover) { grid-column: auto; justify-self: stretch; min-height: 48px; padding: 10px 12px; margin: 0; border-radius: 8px; background: var(--brand-cyan); color: var(--brand-bg); font-size: .95rem; letter-spacing: 0; border: 0; box-shadow: none; }
body.brand-ui #screen-parchis-game #btn-dado:disabled { opacity: 1; background: var(--brand-surface-raised); color: var(--brand-muted); cursor: default; }
body.brand-ui #screen-parchis-game #panel-dado:has(#btn-mover[style*="none"]) #btn-dado { grid-column: 1 / -1; }
body.brand-ui #screen-parchis-game #mensaje { grid-column: 1 / -1; color: var(--brand-text); font-size: .9rem; text-align: left; line-height: 1.5; min-width: 0; overflow-wrap: anywhere; }
body.brand-ui #screen-parchis-game #bonus-label { grid-column: 1 / -1; color: var(--brand-violet); font-size: .85rem; animation: none; text-align: left; }
body.brand-ui #screen-parchis-game #parchis-turn-timer { grid-column: 1 / -1; justify-self: start; font-size: .85rem; padding: 6px 10px; }
body.brand-ui #screen-parchis-game #dado-log { grid-area: history; position: static; transform: none; align-self: center; min-width: 0; max-height: 75dvh; overflow-y: auto; }
body.brand-ui #screen-parchis-game .log-e { white-space: normal; }
body.brand-ui #screen-parchis-game .log-e small { min-width: 0; overflow-wrap: anywhere; text-transform: none; font-size: .75rem; }
body.brand-ui .parchis-result-dialog .res-box { width: min(620px, calc(100vw - 24px)); text-align: left; gap: 14px; }
body.brand-ui .parchis-result-dialog .res-icon { display: none; }
body.brand-ui .parchis-result-dialog :is(.game-dialog-help, .game-dialog-eyebrow, .card-score-tags, .card-score-heading h3) { text-align: left; }
@media (max-width: 1100px) {
  body.brand-ui #screen-parchis-game.active { grid-template-areas: "players" "board" "controls"; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr) auto; padding: 54px 12px 16px; gap: 10px; }
  body.brand-ui #screen-parchis-game #player-panel { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  body.brand-ui #screen-parchis-game #dado-log { display: none; }
}
@media (max-width: 600px) {
  body.brand-ui #screen-parchis-game #player-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.brand-ui #screen-parchis-game .ps-slot { padding: 8px; gap: 6px; }
  body.brand-ui #screen-parchis-game .ps-name { font-size: .82rem; }
}
@media (max-height: 500px) and (min-width: 601px) {
  body.brand-ui #screen-parchis-game.active { grid-template-areas: "board players" "board controls"; grid-template-columns: minmax(0, 1fr) minmax(240px, 40%); grid-template-rows: minmax(0, 1fr) auto; }
  body.brand-ui #screen-parchis-game #player-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); align-content: start; }
  body.brand-ui #screen-parchis-game .ps-slot { padding: 6px; gap: 5px; }
  body.brand-ui #screen-parchis-game .ps-info { gap: 1px; }
  body.brand-ui #screen-parchis-game .ps-name { font-size: .78rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  body.brand-ui #screen-parchis-game :is(.ps-identity, .ps-streak, .ps-fichas) { font-size: .72rem; line-height: 1.3; }
}

/* Domino scores and results. */
body.brand-ui:has(#screen-domino-game.active) :is(#pwa-install-banner, #btn-ingame-rules) { display: none !important; }
body.brand-ui #domino-game-area { width: 100%; }
body.brand-ui #domino-table-layout { min-height: 0; grid-template-columns: clamp(64px, 12vw, 160px) minmax(0, 1fr) clamp(64px, 12vw, 160px); grid-template-rows: 86px minmax(0, 1fr) 76px; }
body.brand-ui #domino-chain { min-height: 0; }
body.brand-ui #domino-score-bar { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(920px, calc(100% - 24px)); box-sizing: border-box; margin: 48px auto 0; padding: 10px; gap: 8px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; color: var(--brand-text); letter-spacing: 0; }
body.brand-ui #domino-score-bar .domino-score-target { grid-column: 1 / -1; color: var(--brand-muted); font-size: .85rem; line-height: 1.4; text-align: center; }
body.brand-ui #domino-score-bar .domino-score-entry { min-width: 0; justify-content: space-between; align-items: center; padding: 8px 10px; gap: 10px; border: 1px solid var(--brand-border); border-radius: 8px; background: var(--brand-bg); }
body.brand-ui #domino-score-bar .domino-score-entry.me { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui #domino-score-bar .domino-score-name { min-width: 0; max-width: none; white-space: normal; overflow-wrap: anywhere; font-size: .85rem; line-height: 1.4; }
body.brand-ui #domino-score-bar .domino-score-name small { display: block; color: var(--brand-cyan); font-size: .78rem; margin-top: 3px; }
body.brand-ui #domino-score-bar .domino-score-pts { flex-shrink: 0; color: var(--brand-text); font-size: 1.3rem; text-align: right; font-variant-numeric: tabular-nums; }
body.brand-ui #domino-score-bar .domino-score-pts small { display: block; color: var(--brand-muted); font-size: .75rem; font-weight: 400; }
body.brand-ui .domino-results-dialog .overlay-box { width: min(740px, calc(100vw - 24px)); text-align: left; }
body.brand-ui #overlay-domino-round .overlay-box { display: flex; flex-direction: column; overflow: hidden; max-height: calc(100dvh - 32px); }
body.brand-ui .domino-result-scroll { min-height: 0; overflow-y: auto; padding: 4px; scrollbar-color: var(--brand-border) var(--brand-bg); }
body.brand-ui .domino-results-dialog .overlay-title { text-align: left; }
body.brand-ui .domino-results-dialog :is(.card-score-heading h3, .domino-section-title) { text-align: left; }
body.brand-ui .domino-results-dialog :is(.game-dialog-eyebrow, .game-dialog-help, .card-score-tags) { text-align: left; }
body.brand-ui .domino-result-scroll > .overlay-title { margin-block: 8px 12px; }
body.brand-ui .domino-section-title { font-size: 1rem; margin: 20px 0 12px; color: var(--brand-text); }
body.brand-ui .domino-results-dialog .card-score-list { width: 100%; }
body.brand-ui .domino-results-dialog .domino-round-review { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 0; }
body.brand-ui .domino-results-dialog .domino-round-review-row { min-width: 0; padding: 14px; background: var(--brand-bg); border-color: var(--brand-border); border-radius: 12px; }
body.brand-ui .domino-results-dialog .domino-round-review-row.winner { border-color: var(--brand-cyan); }
body.brand-ui .domino-results-dialog .domino-round-review-head { flex-direction: column; align-items: flex-start; gap: 4px; color: var(--brand-text); overflow-wrap: anywhere; font-size: .9rem; }
body.brand-ui .domino-results-dialog .domino-round-review-head small { color: var(--brand-muted); font-size: .8rem; white-space: normal; }
body.brand-ui .domino-results-dialog .domino-tile.round-review-tile { width: 52px; height: 30px; flex-shrink: 0; }
body.brand-ui .domino-results-dialog .domino-tile.round-review-tile .pip-dot { width: 4px; height: 4px; }
body.brand-ui .domino-results-dialog .domino-round-review-tiles { flex-wrap: wrap; gap: 7px; }
body.brand-ui .domino-results-dialog .domino-round-review-empty { color: var(--brand-muted); font-size: .85rem; }
body.brand-ui .domino-results-dialog .domino-round-actions { flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; width: 100%; margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--brand-border); gap: 8px; }
body.brand-ui .domino-results-dialog .domino-round-countdown { color: var(--brand-muted); font-size: .85rem; text-align: center; }
@media (max-width: 600px) {
  body.brand-ui #domino-table-layout { grid-template-columns: 60px minmax(0, 1fr) 60px; grid-template-rows: 62px minmax(0, 1fr) 60px; gap: 6px; }
  body.brand-ui #domino-table-layout .domino-seat-side { padding-inline: 0; }
  body.brand-ui #domino-table-layout .domino-seat-side .domino-opponent { box-sizing: border-box; min-width: 0; max-width: 60px; }
  body.brand-ui #domino-score-bar { padding: 7px; gap: 6px; }
  body.brand-ui #domino-score-bar .domino-score-entry { padding: 7px; gap: 6px; }
  body.brand-ui .domino-results-dialog .domino-round-review { grid-template-columns: minmax(0, 1fr); }
  body.brand-ui .domino-results-dialog .card-score-total { flex-shrink: 1; }
}

/* Inline round reviews keep accommodation and continuation in one place. */
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game).round-review { justify-content: flex-start; overflow-y: auto; scroll-padding-block: 76px 60px; padding-bottom: 70px; }
body.brand-ui .round-review :is(.chinchon-wrap, .culo-wrap, .burro-wrap) { width: min(920px, 100%); min-width: 0; }
body.brand-ui .round-summary { box-sizing: border-box; width: 100%; padding: clamp(16px, 3vw, 28px); border: 1px solid var(--brand-border); border-radius: 18px; background: var(--brand-surface); color: var(--brand-text); text-align: left; order: -1; }
body.brand-ui .round-summary[hidden] { display: none; }
body.brand-ui .round-summary :is(.chinchon-results, .culo-results, .burro-results) { max-width: none; width: 100%; color: var(--brand-text); font-size: 1rem; text-align: left; line-height: 1.6; }
body.brand-ui .round-summary h2 { margin: 4px 0 10px; font-size: clamp(1.35rem, 4vw, 1.8rem); line-height: 1.3; overflow-wrap: anywhere; }
body.brand-ui .round-summary strong { color: var(--brand-text); }
body.brand-ui .round-eyebrow { margin: 0; color: var(--brand-cyan); font-size: .85rem; font-weight: 650; }
body.brand-ui .round-help { margin: 0 0 22px; color: var(--brand-muted); font-size: .95rem; overflow-wrap: anywhere; }
body.brand-ui .round-summary-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 12px; margin-top: 22px; }
body.brand-ui .round-summary-actions .btn { min-height: 48px; min-width: 0; margin: 0; padding: 12px 18px; font-size: .95rem; letter-spacing: 0; border-radius: 10px; box-shadow: none; white-space: normal; }
body.brand-ui .round-summary-actions .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); border: 1px solid transparent; }
body.brand-ui .round-summary-actions .btn-secondary { background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); }
body.brand-ui .round-summary button:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
body.brand-ui .round-review :is(.chinchon-table, .chinchon-actions, .chinchon-hand, .chinchon-scoreboard, .culo-table, .culo-actions, .culo-hand, .culo-players, .burro-table, .burro-hand, .burro-hand-options, .burro-players, .hand-order-controls) { display: none; }
body.brand-ui:has(.round-review.active) :is(#pwa-install-banner, #btn-ingame-rules) { display: none !important; }
body.brand-ui .round-summary :is(.chinchon-manual-accommodation, .chinchon-revealed-grid) { width: 100%; }
body.brand-ui .round-summary :is(.chinchon-manual-col, .chinchon-revealed-player) { min-width: 0; padding: 14px; border-color: var(--brand-border); background: var(--brand-bg); border-radius: 12px; }
body.brand-ui .round-summary :is(.chinchon-manual-col > strong, .chinchon-revealed-head) { font-size: .9rem; overflow-wrap: anywhere; }
body.brand-ui .round-summary :is(.chinchon-empty, .chinchon-combo-target > span) { color: var(--brand-muted); font-size: .85rem; }
body.brand-ui .round-summary .chinchon-combo-list { max-height: none; overflow: visible; }
body.brand-ui .round-summary .chinchon-combo-target { border-color: var(--brand-border); background: var(--brand-surface); min-height: 48px; }
body.brand-ui .round-summary .chinchon-combo-target:disabled { cursor: default; }
body.brand-ui .round-summary .chinchon-combo-target:not(:disabled) { border-color: var(--brand-cyan); }
body.brand-ui .round-summary .chinchon-loose-cards { padding: 6px; gap: 8px; flex-wrap: wrap; overflow: visible; }
body.brand-ui .round-summary .chinchon-loose-card.hand-card { width: 48px; height: 70px; flex-shrink: 0; }
body.brand-ui .round-summary .chinchon-loose-card.hand-card.selected { transform: none; outline: 3px solid var(--brand-cyan); outline-offset: 1px; }
body.brand-ui .round-summary :is(.chinchon-result-card, .chinchon-mini-card) { flex-shrink: 0; }
body.brand-ui .round-summary .chinchon-revealed-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
body.brand-ui .round-summary :is(.chinchon-revealed-hand, .chinchon-combo-cards) { flex-wrap: wrap; overflow: visible; }
body.brand-ui #chinchon-round-summary { display: flex; flex-direction: column; max-height: calc(100dvh - 100px); }
body.brand-ui #chinchon-results { min-height: 0; overflow-y: auto; padding: 4px; box-sizing: border-box; scrollbar-color: var(--brand-border) var(--brand-bg); }
body.brand-ui #chinchon-round-summary .round-summary-actions { flex-shrink: 0; padding-top: 12px; margin-top: 12px; border-top: 1px solid var(--brand-border); }
body.brand-ui .round-player-detail { font-size: .85rem; color: var(--brand-muted); margin: 0 0 12px; }
body.brand-ui .round-summary .chinchon-review-timer { color: var(--brand-muted); background: var(--brand-bg); border-color: var(--brand-border); font-size: .85rem; }
body.brand-ui .round-summary .chinchon-review-timer.urgent { color: #ffdb8f; border-color: #ffdb8f; }
body.brand-ui .round-standings { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
body.brand-ui .round-standings li { display: flex; align-items: center; gap: 14px; border: 1px solid var(--brand-border); background: var(--brand-bg); padding: 14px; border-radius: 12px; }
body.brand-ui .round-standings li.mine { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui .round-standings li > div { min-width: 0; overflow-wrap: anywhere; }
body.brand-ui .round-position { width: 32px; flex-shrink: 0; font-size: 1.5rem; color: var(--brand-muted); text-align: center; }
body.brand-ui .round-role { display: block; color: var(--brand-cyan); font-size: .9rem; }
body.brand-ui .burro-final-card { display: flex; align-items: center; gap: 22px; background: var(--brand-bg); border: 1px solid var(--brand-border); padding: 20px; border-radius: 12px; }
body.brand-ui .burro-final-card > div { min-width: 0; }
body.brand-ui .burro-final-card strong { display: block; font-size: 1.2rem; overflow-wrap: anywhere; }
body.brand-ui .burro-final-card .hand-card { width: 76px; height: 112px; margin: 0; transform: none; cursor: default; }
body.brand-ui .burro-final-card span { color: var(--brand-muted); }
body.brand-ui .round-result-error { color: #ffb7bb; }
body.brand-ui .round-draw-feedback { margin: 0; color: var(--brand-muted); }
body.brand-ui .round-draw-feedback:empty { display: none; }
@media (max-width: 600px) {
  body.brand-ui .round-summary .chinchon-manual-accommodation { grid-template-columns: minmax(0, 1fr); }
  body.brand-ui .round-summary .chinchon-revealed-grid { grid-template-columns: minmax(0, 1fr); }
  body.brand-ui .round-summary-actions > * { width: 100%; box-sizing: border-box; }
}

@media (prefers-reduced-motion: reduce) {
  .brand-ui #screen-home { scroll-behavior: auto; }
  .brand-ui *, .brand-ui *::before, .brand-ui *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Ajedrez y Damas: orientación, turnos y resultados */
body.brand-ui:has(:is(#screen-chess-game, #screen-damas-game).active) { padding-bottom: 0; }
body.brand-ui:has(:is(#screen-chess-game, #screen-damas-game).active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui :is(#screen-chess-game, #screen-damas-game) { background: var(--brand-bg); font-family: inherit; }
body.brand-ui :is(#screen-chess-game, #screen-damas-game) .game-menu-wrap { top: 8px; left: 8px; }
body.brand-ui :is(#screen-chess-game, #screen-damas-game) .game-menu-btn { min-height: 44px; color: var(--brand-text); background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui :is(#screen-chess-game, #screen-damas-game) .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui :is(#screen-chess-game, #screen-damas-game) .game-menu-dropdown button { color: var(--brand-text); min-height: 44px; }
body.brand-ui #chess-game-section { padding-top: 60px; padding-bottom: 32px; }
body.brand-ui .chess-side-panel { width: 220px; gap: 10px; }
body.brand-ui .chess-player-card { min-width: 0; flex-shrink: 0; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; padding: 12px; box-shadow: none; }
body.brand-ui .chess-player-card.active { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui .chess-player-card > div:first-child { display: flex; align-items: center; min-width: 0; }
body.brand-ui .chess-player-name { color: var(--brand-text); font-size: .95rem; letter-spacing: 0; }
body.brand-ui .chess-player-color-dot { flex-shrink: 0; }
body.brand-ui .chess-player-identity { color: var(--brand-cyan); font-size: .8rem; line-height: 1.5; order: 1; }
body.brand-ui .chess-captured { color: var(--brand-muted); font-size: .8rem; line-height: 1.5; letter-spacing: 0; order: 2; overflow-wrap: anywhere; }
body.brand-ui .chess-status-line { color: var(--brand-text); background: var(--brand-surface); border: 1px solid var(--brand-border); padding: 10px 12px; border-radius: 10px; font-size: .9rem; line-height: 1.5; letter-spacing: 0; text-transform: none; animation: none; flex-shrink: 0; overflow-wrap: anywhere; }
body.brand-ui .chess-status-line.my-turn { color: var(--brand-cyan); border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui .chess-status-line.in-check-status { color: #ffb8a6; background: #38252b; border-color: #df907c; }
body.brand-ui .chess-moves-box { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui :is(.chess-coords-row, .chess-coords-col) span { color: var(--brand-muted); font-size: .7rem; }
body.brand-ui #chess-moves-box:empty::before { content: 'Las jugadas aparecerán aquí.'; display: block; padding: 12px; color: var(--brand-muted); font-size: .85rem; line-height: 1.5; }
body.brand-ui .chess-promo-choices { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 20px 0; width: 100%; }
body.brand-ui .chess-promo-choice { width: 100%; height: auto; min-height: 104px; flex-direction: column; gap: 8px; padding: 10px 4px; font: inherit; font-size: .9rem; color: var(--brand-text); background: var(--brand-surface-raised); border: 1px solid var(--brand-border); border-radius: 12px; }
body.brand-ui .chess-promo-glyph { font-family: 'Segoe UI Symbol', serif; font-size: 2.5rem; line-height: 1; }
body.brand-ui .chess-promo-choice:hover { border-color: var(--brand-cyan); background: #122e3a; transform: none; }
body.brand-ui .chess-promo-choice:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 3px; }
body.brand-ui #screen-damas-game.active { display: flex; flex-direction: column; height: 100dvh; padding: 56px 12px 16px; gap: 12px; }
body.brand-ui #damas-status { position: static; transform: none; width: min(560px, 100%); min-height: 44px; flex-shrink: 0; margin: 0 auto; padding: 10px 12px; color: var(--brand-text); font-size: .95rem; line-height: 1.5; letter-spacing: 0; text-transform: none; overflow-wrap: anywhere; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 10px; }
body.brand-ui #damas-status.my-turn { color: var(--brand-cyan); border-color: var(--brand-cyan); }
body.brand-ui #damas-status.capture-required { color: #ffe0a3; border-color: #c5a264; }
body.brand-ui .damas-layout { min-height: 0; flex: 1; grid-template-rows: auto minmax(0, 1fr) auto; padding: 0; gap: 10px; }
body.brand-ui .damas-board-wrap { container-type: size; }
body.brand-ui .damas-board { width: min(520px, 100cqw, 100cqh); height: min(520px, 100cqw, 100cqh); }
body.brand-ui :is(#damas-badge-me, #damas-badge-opp) { width: 100%; max-width: 520px; min-width: 0; margin: 0; padding: 10px 14px; border: 1px solid var(--brand-border); border-radius: 12px; color: var(--brand-text); background: var(--brand-surface); box-shadow: none; font-family: inherit; letter-spacing: 0; text-align: left; animation: none; }
body.brand-ui :is(#damas-badge-me, #damas-badge-opp).active-turn { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui .damas-player-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; }
body.brand-ui .damas-player-heading .p-name { min-width: 0; max-width: none; font-size: .95rem; color: var(--brand-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; letter-spacing: 0; }
body.brand-ui .damas-turn-label { flex-shrink: 0; font-size: .75rem; color: var(--brand-cyan); }
body.brand-ui .damas-player-detail { font-size: .8rem; color: var(--brand-muted); line-height: 1.5; margin-top: 4px; white-space: normal; }
body.brand-ui .damas-final-kings { margin: 12px 0 0; color: var(--brand-muted); font-size: .85rem; text-align: left; }
body.brand-ui #overlay-damas-result .card-score-heading h3 { text-align: left; }
@media (max-width: 760px) and (min-height: 501px) {
  body.brand-ui #chess-game-section { flex-direction: column; align-items: center; justify-content: flex-start; gap: 14px; height: 100dvh; overflow-y: auto; padding: 56px 16px 36px; }
  body.brand-ui .chess-side-panel { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: min(466px, 100%); height: auto; overflow: visible; flex-shrink: 0; }
  body.brand-ui #chess-status-line { grid-column: 1 / -1; grid-row: 1; width: auto; }
  body.brand-ui #chess-card-white { grid-column: 1; grid-row: 2; }
  body.brand-ui #chess-card-black { grid-column: 2; grid-row: 2; }
  body.brand-ui .chess-player-card { min-width: 0; }
  body.brand-ui #chess-moves-box { grid-column: 1 / -1; min-height: 54px; max-height: 120px; width: auto; }
}
@media (max-width: 380px) {
  body.brand-ui .chess-promo-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.brand-ui .chess-player-card { padding: 8px; }
}
@media (max-height: 500px) and (min-width: 600px) {
  body.brand-ui #chess-game-section { flex-direction: row; align-items: flex-start; overflow-y: auto; }
  body.brand-ui .chess-side-panel { width: 240px; height: auto; max-height: none; flex-direction: column; flex-wrap: nowrap; }
  body.brand-ui .chess-player-card { padding: 7px 10px; }
  body.brand-ui #chess-moves-box { order: 3; min-height: 54px; max-height: 100px; }
  body.brand-ui #screen-damas-game.active { display: grid; grid-template-columns: minmax(0, 1fr) 240px; grid-template-rows: auto minmax(0, 1fr); padding: 56px 16px 16px; }
  body.brand-ui #damas-status { grid-column: 2; grid-row: 1; }
  body.brand-ui .damas-layout { display: contents; }
  body.brand-ui .damas-board-wrap { grid-column: 1; grid-row: 1 / 3; }
  body.brand-ui .damas-player-row { grid-column: 2; grid-row: 2; align-self: start; }
  body.brand-ui .damas-player-row:last-child { align-self: end; }
}
/* Dominó: misma identidad visual en marcador, mesa y controles. */
body.brand-ui:has(#screen-domino-game.active) { padding-bottom: 0; }
body.brand-ui:has(#screen-domino-game.active) #app-version { display: none !important; }
body.brand-ui #screen-domino-game { background: var(--brand-background); color: var(--brand-text); font-family: inherit; }
body.brand-ui #screen-domino-game .game-menu-wrap { top: 8px; left: 8px; }
body.brand-ui #screen-domino-game .game-menu-btn { min-height: 44px; color: var(--brand-text); background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui #screen-domino-game .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui #screen-domino-game .game-menu-dropdown button { color: var(--brand-text); min-height: 44px; }
body.brand-ui #domino-score-bar { margin-top: 60px; align-items: stretch; }
body.brand-ui #domino-table-layout { padding-top: 24px; }
body.brand-ui #domino-status { padding: 10px 12px; color: var(--brand-cyan); font-size: .9rem; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
body.brand-ui #domino-chain-wrap { background: radial-gradient(ellipse at 50% 40%, #173942, #10252f); border: 1px solid #365761; box-shadow: inset 0 1px 0 #ffffff08, 0 12px 32px #0003; }
body.brand-ui #domino-chain-empty { color: #adc7ce; font-size: .9rem; letter-spacing: 0; text-transform: none; }
body.brand-ui #screen-domino-game .domino-seat-zone.active-turn { filter: none; }
body.brand-ui #screen-domino-game .domino-opponent { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; box-shadow: none; gap: 3px; padding: 8px 10px; }
body.brand-ui #screen-domino-game .domino-opponent.me { background: var(--brand-surface-raised); }
body.brand-ui #screen-domino-game .domino-opponent.active { background: #122e3a; border-color: var(--brand-cyan); box-shadow: 0 0 0 1px var(--brand-cyan); }
body.brand-ui #screen-domino-game .domino-opponent.active-turn { animation: none; transform: none; }
body.brand-ui #screen-domino-game .domino-opp-name { color: var(--brand-text); font-size: .85rem; font-weight: 600; letter-spacing: 0; max-width: 110px; }
body.brand-ui #screen-domino-game .domino-opp-count { color: var(--brand-muted); font-size: .78rem; line-height: 1.4; }
body.brand-ui #screen-domino-game .domino-team-tag { color: var(--brand-muted); font-size: .7rem; line-height: 1.4; letter-spacing: 0; text-transform: none; }
body.brand-ui #screen-domino-game :is(.domino-opponent.me, .domino-opponent.teammate) .domino-team-tag { color: var(--brand-cyan); }
body.brand-ui #screen-domino-game .domino-opp-tiles { display: none; }
body.brand-ui #screen-domino-game .domino-turn-badge { top: -20px; background: var(--brand-cyan); color: var(--brand-bg); box-shadow: none; letter-spacing: 0; }
body.brand-ui #screen-domino-game .domino-pass-bubble { background: var(--brand-surface-raised); color: var(--brand-cyan); border-color: var(--brand-cyan); letter-spacing: 0; }
body.brand-ui #domino-hand-wrap { background: var(--brand-surface); border-top: 1px solid var(--brand-border); }
body.brand-ui #screen-domino-game .domino-tile.hand-tile { border-radius: 6px; }
body.brand-ui #screen-domino-game .domino-tile.hand-tile.playable { border-color: var(--brand-cyan); box-shadow: 0 0 0 1px var(--brand-cyan), 0 2px 6px #0005; }
body.brand-ui #screen-domino-game .domino-tile.hand-tile.selected { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px var(--brand-cyan), 0 8px 20px #57ddf333; }
body.brand-ui #screen-domino-game .domino-tile.hand-tile.not-playable { opacity: .7; }
body.brand-ui #screen-domino-game .chain-endpoint { color: var(--brand-cyan); border-color: var(--brand-cyan); background: #10252f; animation: none; font-weight: 700; }
body.brand-ui #screen-domino-game .chain-endpoint:hover { background: #214856; border-color: #b3f5ff; }
body.brand-ui #domino-boneyard { background: var(--brand-surface); border: 1px solid var(--brand-border); color: var(--brand-muted); border-radius: 10px; min-height: 44px; font-size: .8rem; letter-spacing: 0; box-shadow: 0 4px 12px #0003; }
body.brand-ui #domino-boneyard.can-draw { color: var(--brand-cyan); border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui #domino-boneyard .domino-boneyard-stack { background: var(--brand-surface-raised); border-color: #698092; box-shadow: 3px 0 0 #304260, 6px 0 0 #182640; }

/* The table grows with the chain instead of squeezing it into the viewport. */
body.brand-ui #screen-domino-game { overflow-y: auto; overflow-x: hidden; scroll-padding-top: 68px; }
body.brand-ui #screen-domino-game .game-menu-wrap { position: sticky; top: 0; left: auto; flex: 0 0 60px; height: 60px; width: 100%; box-sizing: border-box; padding: 8px; background: var(--brand-bg); z-index: 100; }
body.brand-ui:has(#screen-domino-game.active) :is(#chat-toggle, #quick-audio-controls) { z-index: 110; }
body.brand-ui:has(#screen-domino-game.active) #chat-panel { z-index: 109; }
body.brand-ui #domino-score-bar { margin-top: 0; }
body.brand-ui #domino-game-area { flex: 1 0 auto; overflow: visible; }
body.brand-ui #domino-table-layout { flex: 1 0 auto; grid-template-rows: 86px auto 76px; }
body.brand-ui #domino-chain-wrap { height: auto; min-height: 260px; flex-direction: column; justify-content: center; }
body.brand-ui #domino-chain { flex: 0 0 auto; height: 260px; }
body.brand-ui #domino-boneyard { position: static; order: -1; align-self: flex-end; margin: 10px 12px 0; }
body.brand-ui .domino-chain-links { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
body.brand-ui .domino-chain-links path { fill: none; stroke: #6b929a; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
body.brand-ui #screen-domino-game .chain-endpoint { width: 44px; height: 44px; min-width: 44px; padding: 0; border-radius: 12px; z-index: 40; font: inherit; font-weight: 700; }
body.brand-ui #screen-domino-game .chain-endpoint:disabled { border-style: solid; border-color: #496671; color: #adc7ce; cursor: default; background: #10252f; }
body.brand-ui #screen-domino-game .domino-tile.hand-tile { padding: 0; min-width: 44px; width: 44px; height: 72px; }
body.brand-ui #screen-domino-game :is(.hand-tile, .chain-endpoint):focus-visible { outline: 3px solid white; outline-offset: 4px; }
@media (max-width: 760px) {
  body.brand-ui #domino-table-layout { width: calc(100% - 20px); grid-template-areas: "left top right" "table table table" "bottom bottom bottom"; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; gap: 12px; padding-top: 24px; }
  body.brand-ui #domino-table-layout .domino-seat-side { justify-content: center; padding: 0; }
  body.brand-ui #domino-table-layout .domino-seat-zone .domino-opponent { max-width: 100%; min-width: 0; width: 100%; box-sizing: border-box; }
  body.brand-ui #domino-table-layout .domino-seat-bottom .domino-opponent { width: auto; min-width: 140px; }
  body.brand-ui #domino-hand-wrap { margin-top: 10px; }
}
body.brand-ui #btn-domino-draw { min-height: 44px; padding: 10px 16px; background: var(--brand-cyan); color: var(--brand-bg); border: 1px solid transparent; border-radius: 10px; font-size: .9rem; letter-spacing: 0; box-shadow: none; }
body.brand-ui #domino-toast { background: var(--brand-surface-raised); color: var(--brand-text); border-color: var(--brand-border); letter-spacing: 0; white-space: normal; text-align: center; max-width: calc(100% - 32px); }
body.brand-ui #screen-domino-score-select { background: var(--brand-background); color: var(--brand-text); }
body.brand-ui #screen-domino-score-select .submenu-title { color: var(--brand-text); text-shadow: none; letter-spacing: -.02em; text-transform: none; }
body.brand-ui #screen-domino-score-select .submenu-desc { color: var(--brand-muted); letter-spacing: 0; }
body.brand-ui #screen-domino-score-select .btn-back { min-height: 44px; background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-text); }
body.brand-ui #screen-domino-score-select .domino-score-option { min-height: 124px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; box-shadow: none; }
body.brand-ui #screen-domino-score-select .domino-score-option:is(:hover, :focus-visible, .is-recommended) { border-color: var(--brand-cyan); background: #122e3a; box-shadow: none; transform: none; }
body.brand-ui #screen-domino-score-select .domino-score-option:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 4px; }
body.brand-ui #screen-domino-score-select .domino-score-name { color: var(--brand-text); font-weight: 650; }
body.brand-ui #screen-domino-score-select .domino-score-meta { color: var(--brand-cyan); letter-spacing: 0; text-transform: none; }
body.brand-ui #screen-domino-score-select .domino-score-hint { color: var(--brand-muted); line-height: 1.5; }
@media (max-width: 760px) {
  body.brand-ui #screen-domino-game .domino-opponent { padding: 5px; gap: 2px; }
  body.brand-ui #screen-domino-game .domino-opp-name { font-size: .72rem; max-width: 100%; }
  body.brand-ui #screen-domino-game .domino-opp-count { font-size: .7rem; }
  body.brand-ui #screen-domino-game .domino-team-tag { font-size: .65rem; }
  body.brand-ui #screen-domino-score-select .domino-score-option { min-height: 94px; }
}
/* Juegos de pistas: roles, decisiones y lectura de palabras. */
body.brand-ui:has(:is(#screen-palabrasecreta-game, #screen-codigoespia-game).active) { padding-bottom: 0; }
body.brand-ui:has(:is(#screen-palabrasecreta-game, #screen-codigoespia-game).active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game) { background: var(--brand-background); color: var(--brand-text); padding: 64px 16px 28px; height: 100dvh; overflow-y: auto; justify-content: flex-start; align-items: center; }
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game)::before,
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game)::after { display: none; }
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game) .game-menu-wrap { top: 8px; left: 8px; }
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game) .game-menu-btn { min-height: 44px; color: var(--brand-text); background: var(--brand-surface); border: 1px solid var(--brand-border); box-shadow: none; font-size: .9rem; }
body.brand-ui #screen-palabrasecreta-game .game-menu-btn::before { display: none; }
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game) .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game) .game-menu-dropdown button { color: var(--brand-text); min-height: 44px; }
body.brand-ui .secret-game-wrap { width: min(1000px, 100%); gap: 16px; flex-shrink: 0; padding: 0; }
body.brand-ui .secret-game-wrap::before, body.brand-ui .secret-panel::before, body.brand-ui .secret-phase-chip::before, body.brand-ui .secret-phase-chip::after { display: none; }
body.brand-ui .secret-status { width: 100%; display: grid; grid-template-columns: 1fr 2fr 1fr; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); box-shadow: none; backdrop-filter: none; }
body.brand-ui .secret-status span { padding: 12px; min-width: 0; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; }
body.brand-ui .secret-status small { color: var(--brand-muted); font-size: .8rem; text-transform: none; letter-spacing: 0; }
body.brand-ui .secret-status strong { color: var(--brand-text); font-size: 1rem; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; text-shadow: none; text-transform: none; }
body.brand-ui #palabra-status-time { white-space: nowrap; }
body.brand-ui .secret-status span::before, body.brand-ui .secret-status small::after, body.brand-ui .secret-status strong::before { display: none; }
body.brand-ui .secret-phase-chip { color: var(--brand-cyan); font-size: .8rem; letter-spacing: .03em; margin: 0; padding: 0; }
body.brand-ui #palabra-feedback:empty { display: none; }
body.brand-ui .secret-word-card { width: 100%; min-height: 0; aspect-ratio: auto; padding: 24px; gap: 10px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; box-shadow: none; }
body.brand-ui .secret-word-card::before, body.brand-ui .secret-word-card::after { display: none; }
body.brand-ui .secret-word-label { color: var(--brand-muted); font-size: .85rem; letter-spacing: .03em; }
body.brand-ui .secret-word-value { color: var(--brand-text); font-size: clamp(1.7rem, 5vw, 2.6rem); letter-spacing: -.02em; text-shadow: none; overflow-wrap: anywhere; }
body.brand-ui .secret-word-value.impostor { color: var(--brand-violet); }
body.brand-ui .secret-word-hint { color: var(--brand-muted); font-size: .9rem; line-height: 1.6; letter-spacing: 0; margin: 0; }
body.brand-ui .secret-lower-grid { width: 100%; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
body.brand-ui .secret-panel { min-width: 0; min-height: 0; padding: 20px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; box-shadow: none; }
body.brand-ui .secret-clue-shell { display: block; }
body.brand-ui .secret-panel-title { color: var(--brand-text); font-size: 1rem; letter-spacing: 0; text-transform: none; line-height: 1.5; margin: 0 0 12px; }
body.brand-ui .secret-panel-head { flex-wrap: wrap; gap: 12px; }
body.brand-ui .secret-round-controls { gap: 8px; font-size: .85rem; color: var(--brand-muted); }
body.brand-ui .secret-round-controls button { width: 44px; height: 44px; border-color: var(--brand-border); background: var(--brand-surface-raised); color: var(--brand-text); font-size: 1rem; }
body.brand-ui .secret-clue-form label { color: var(--brand-text); font-size: .9rem; }
body.brand-ui .secret-clue-form input { min-width: 0; width: 100%; min-height: 48px; background: var(--brand-bg); border: 1px solid var(--brand-border); border-radius: 10px; color: var(--brand-text); font-size: 1rem; }
body.brand-ui .secret-clue-form input::placeholder { color: var(--brand-muted); }
body.brand-ui .secret-input-meta { color: var(--brand-muted); font-size: .8rem; gap: 10px; line-height: 1.5; }
body.brand-ui .secret-input-meta span:last-child { color: var(--brand-muted); }
body.brand-ui :is(.secret-clue-form button, .secret-vote-list button) { min-height: 44px; padding: 12px; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-surface-raised); color: var(--brand-text); font-size: .9rem; letter-spacing: 0; box-shadow: none; overflow-wrap: anywhere; }
body.brand-ui .secret-clue-form button { background: var(--brand-cyan); color: var(--brand-bg); }
body.brand-ui .secret-vote-list button.selected { background: #173944; border-color: var(--brand-cyan); color: var(--brand-cyan); }
body.brand-ui :is(.secret-clue-form button, .secret-vote-list button, .secret-round-controls button):disabled { opacity: 1; color: var(--brand-muted); background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui .secret-row { padding: 12px; border: 1px solid var(--brand-border); background: var(--brand-bg); border-radius: 10px; gap: 12px; color: var(--brand-text); font-size: .9rem; }
body.brand-ui .secret-row :is(strong, span) { overflow-wrap: anywhere; min-width: 0; color: var(--brand-text); }
body.brand-ui .secret-row small { color: var(--brand-muted); font-size: .8rem; }
body.brand-ui .secret-row.current { border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui .secret-row.is-me strong::after { display: none; }
body.brand-ui .secret-muted, body.brand-ui .secret-empty-state strong { color: var(--brand-muted); font-size: .9rem; line-height: 1.6; }
body.brand-ui .secret-empty-state { min-height: 100px; padding: 16px; border-color: var(--brand-border); background: var(--brand-bg); }
body.brand-ui #palabra-clue-error, body.brand-ui #palabra-feedback { color: #ffb5b5; }
body.brand-ui .secret-result { font-size: 1rem; line-height: 1.7; color: var(--brand-text); }
body.brand-ui .secret-result strong { color: var(--brand-cyan); }
body.brand-ui .secret-objective-panel { position: static; display: block; width: 100%; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; padding: 16px; box-shadow: none; }
body.brand-ui .secret-objective-panel::after { display: none; }
body.brand-ui .secret-objective-panel span { color: var(--brand-cyan); font-size: .85rem; letter-spacing: 0; }
body.brand-ui .secret-objective-panel p { padding: 0; color: var(--brand-muted); font-size: .9rem; line-height: 1.5; }
body.brand-ui .codigo-spia-layout { width: min(1280px, 100%); grid-template-columns: minmax(0, 1fr) 310px; gap: 20px; flex-shrink: 0; }
body.brand-ui :is(.codigo-spia-main, .codigo-spia-block) { background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; box-shadow: none; min-width: 0; }
body.brand-ui .codigo-spia-main { padding: 20px; overflow: visible; }
body.brand-ui .codigo-spia-main::before, body.brand-ui .codigo-spia-main::after { display: none; }
body.brand-ui .codigo-spia-head { padding: 0; flex-wrap: wrap; gap: 16px; }
body.brand-ui .codigo-spia-head h2 { color: var(--brand-text); font-size: 1.4rem; text-shadow: none; line-height: 1.4; }
body.brand-ui .codigo-spia-kicker { color: var(--brand-cyan); font-size: .85rem; letter-spacing: 0; text-transform: none; line-height: 1.5; }
body.brand-ui .codigo-spia-score span { background: var(--brand-bg); color: var(--brand-text); border-radius: 10px; font-size: .85rem; text-transform: none; }
body.brand-ui .codigo-spia-clue-strip { flex-wrap: wrap; background: var(--brand-bg); border-color: var(--brand-border); border-radius: 10px; box-shadow: none; }
body.brand-ui .codigo-spia-clue-strip span { color: var(--brand-cyan); font-size: .8rem; }
body.brand-ui .codigo-spia-clue-strip strong { color: var(--brand-text); }
body.brand-ui .codigo-spia-clue-strip em { color: var(--brand-muted); }
body.brand-ui .codigo-spia-guidance { margin: 14px 0 0; font-size: .95rem; color: var(--brand-text); line-height: 1.6; }
body.brand-ui .codigo-spia-board { gap: 8px; }
body.brand-ui .codigo-spia-cell { background: #e8e2d2; color: #192234; border: 1px solid #c7bc9e; border-radius: 10px; min-width: 0; min-height: 90px; padding: 8px; gap: 6px; box-shadow: none; aspect-ratio: auto; }
body.brand-ui .codigo-spia-cell::before, body.brand-ui .codigo-spia-cell::after { display: none; }
body.brand-ui .codigo-spia-cell strong { font-size: .95rem; line-height: 1.3; letter-spacing: 0; text-transform: none; text-shadow: none; }
body.brand-ui .codigo-spia-cell span { font-size: .7rem; letter-spacing: 0; text-transform: none; padding: 2px 4px; border: 0; background: transparent; }
body.brand-ui .codigo-spia-cell.type-rojo { background: #713441; color: #fff0f0; border-color: #f19aaa; }
body.brand-ui .codigo-spia-cell.type-azul { background: #224872; color: #edf5ff; border-color: #8fc2ff; }
body.brand-ui .codigo-spia-cell.type-neutral { background: #d9d3c4; color: #192234; border-color: #c7bc9e; }
body.brand-ui .codigo-spia-cell.type-trampa { background: #111827; color: #f6d999; border-color: #f6d999; }
body.brand-ui .codigo-spia-cell.revealed { opacity: 1; filter: none; border-style: dashed; }
body.brand-ui .codigo-spia-cell:disabled { opacity: 1; }
body.brand-ui .codigo-spia-cell:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 2px; }
body.brand-ui .codigo-spia-block { padding: 16px; }
body.brand-ui .codigo-spia-block h3 { font-size: 1rem; color: var(--brand-text); text-transform: none; letter-spacing: 0; }
body.brand-ui .codigo-spia-clue-form { display: flex; flex-direction: column; gap: 8px; }
body.brand-ui .codigo-spia-clue-form label { font-size: .85rem; color: var(--brand-muted); }
body.brand-ui .codigo-spia-clue-form input { width: 100%; min-height: 44px; background: var(--brand-bg); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: 10px; font-size: 1rem; }
body.brand-ui :is(.codigo-spia-clue-form button, .codigo-spia-pass, .codigo-spia-choice-row button), body.brand-ui #codigo-spia-rematch { min-height: 44px; padding: 10px; color: var(--brand-text); background: var(--brand-surface-raised); border: 1px solid var(--brand-border); border-radius: 10px; font-size: .9rem; box-shadow: none; }
body.brand-ui .codigo-spia-clue-form button { color: var(--brand-bg); background: var(--brand-cyan); }
body.brand-ui .codigo-spia-choice-row button.active { color: var(--brand-cyan); border-color: var(--brand-cyan); background: #173944; }
body.brand-ui .codigo-spia-panel button:disabled, body.brand-ui .codigo-spia-panel input:disabled { opacity: 1; background: var(--brand-surface); color: var(--brand-muted); cursor: default; }
body.brand-ui .codigo-spia-fair { color: var(--brand-muted); font-size: .85rem; line-height: 1.6; }
body.brand-ui .codigo-spia-status { color: #ffb5b5; font-size: .9rem; line-height: 1.5; }
body.brand-ui .codigo-spia-player { background: var(--brand-bg); border-color: var(--brand-border); border-radius: 10px; }
body.brand-ui .codigo-spia-player strong { color: var(--brand-text); font-size: .9rem; overflow-wrap: anywhere; }
body.brand-ui .codigo-spia-player span, body.brand-ui .codigo-spia-history { color: var(--brand-muted); font-size: .85rem; line-height: 1.6; }
body.brand-ui .codigo-spia-finish { position: static; width: min(900px, 100%); margin-top: 20px; padding: 0; background: none; }
body.brand-ui .codigo-spia-finish-box { width: 100%; padding: 24px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; color: var(--brand-text); box-shadow: none; }
body.brand-ui .codigo-spia-finish-box :is(h2, p) { color: var(--brand-text); line-height: 1.6; }
@media (max-width: 900px) {
  body.brand-ui .codigo-spia-layout { display: flex; flex-direction: column; }
  body.brand-ui .codigo-spia-main { width: 100%; order: 1; }
  body.brand-ui .codigo-spia-panel { display: contents; }
  body.brand-ui .codigo-spia-block { width: 100%; order: 3; }
  body.brand-ui .codigo-spia-block:has(#codigo-spia-clue-submit:not(:disabled)) { order: 0; }
  body.brand-ui .codigo-spia-block:has(#codigo-spia-end-turn:not(:disabled)) { order: 2; }
}
@media (max-width: 640px) {
  body.brand-ui :is(#screen-palabrasecreta-game, #screen-codigoespia-game) { padding: 60px 12px 24px; }
  body.brand-ui .secret-lower-grid { grid-template-columns: minmax(0, 1fr); }
  body.brand-ui .secret-status { grid-template-columns: 1fr 2fr 1fr; }
  body.brand-ui .secret-status span { padding: 10px 6px; }
  body.brand-ui .secret-status strong { font-size: .9rem; }
  body.brand-ui .secret-status small { font-size: .75rem; }
  body.brand-ui .secret-panel, body.brand-ui .secret-word-card { padding: 16px; }
  body.brand-ui .secret-word-value { font-size: 1.8rem; }
  body.brand-ui .secret-row { flex-wrap: wrap; }
  body.brand-ui .codigo-spia-main { padding: 12px; }
  body.brand-ui .codigo-spia-board { gap: 5px; grid-template-columns: repeat(5, minmax(0, 1fr)); }
  body.brand-ui .codigo-spia-cell { min-height: 80px; padding: 6px 3px; border-radius: 6px; }
  body.brand-ui .codigo-spia-cell strong { font-size: .8rem; }
  body.brand-ui .codigo-spia-cell span { font-size: .65rem; padding: 0; overflow-wrap: anywhere; }
}

@media (max-width: 480px) {
  body.brand-ui .codigo-spia-board { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
  body.brand-ui .codigo-spia-cell strong { font-size: .9rem; }
  body.brand-ui .codigo-spia-cell span { font-size: .75rem; }
}

/* Angry Dogs: mesa, decisiones y mano con la misma jerarquía que el portal. */
body.brand-ui:has(#screen-angrydogs-game.active) { padding-bottom: 0; }
body.brand-ui:has(#screen-angrydogs-game.active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui #screen-angrydogs-game { background: var(--brand-background); color: var(--brand-text); padding: 64px 16px 28px; height: 100dvh; overflow-y: auto; justify-content: flex-start; gap: 16px; }
body.brand-ui #screen-angrydogs-game .game-menu-wrap { top: 8px; left: 8px; }
body.brand-ui #screen-angrydogs-game .game-menu-btn { min-height: 44px; color: var(--brand-text); background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui #screen-angrydogs-game .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui #screen-angrydogs-game .game-menu-dropdown button { min-height: 44px; color: var(--brand-text); }
body.brand-ui #angrydogs-status { position: static; width: min(1120px, 100%); flex-shrink: 0; min-height: 54px; padding: 14px 18px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; color: var(--brand-text); font-size: 1rem; line-height: 1.5; }
body.brand-ui .angrydogs-board { width: min(1120px, 100%); flex-shrink: 0; grid-template-columns: minmax(180px, 1fr) minmax(0, 3fr); grid-template-areas: 'players center' 'title title' 'hand hand' 'actions actions' 'log log' 'result result'; gap: 16px; }
body.brand-ui .angrydogs-board > * { min-width: 0; }
body.brand-ui .angrydogs-player { background: var(--brand-surface); color: var(--brand-muted); border: 1px solid var(--brand-border); border-radius: 12px; font-size: .85rem; padding: 12px; }
body.brand-ui .angrydogs-player strong { color: var(--brand-text); font-size: .95rem; line-height: 1.5; overflow-wrap: anywhere; white-space: normal; }
body.brand-ui .angrydogs-player.current { border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui .angrydogs-player.out { filter: none; opacity: 1; border-style: dashed; }
body.brand-ui .angrydogs-badge { float: none; display: inline-block; margin-bottom: 5px; background: #173944; color: var(--brand-cyan); font-size: .75rem; font-weight: 600; }
body.brand-ui .angrydogs-player.out .angrydogs-badge { color: var(--brand-muted); background: var(--brand-surface-raised); }
body.brand-ui .angrydogs-center { min-height: 0; padding: 20px; border: 1px solid var(--brand-border); background: var(--brand-surface); border-radius: 16px; gap: 16px; }
body.brand-ui .angrydogs-piles { min-height: 0; gap: 24px; }
body.brand-ui .angrydogs-pile { width: 112px; height: 170px; box-shadow: none; border-radius: 12px; }
body.brand-ui .angrydogs-pile.deck { border: 1px solid var(--brand-border); }
body.brand-ui .angrydogs-pile.discard { border: 1px dashed var(--brand-border); background: var(--brand-bg); }
body.brand-ui .angrydogs-pile :is(strong, small), body.brand-ui .angrydogs-deck-label { background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); }
body.brand-ui .angrydogs-log { padding: 12px 16px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; color: var(--brand-muted); }
body.brand-ui .angrydogs-log summary { cursor: pointer; min-height: 32px; line-height: 32px; color: var(--brand-text); font-size: .9rem; }
body.brand-ui #angrydogs-log-items { max-height: 180px; font-size: .85rem; line-height: 1.6; padding-top: 8px; }
body.brand-ui .angrydogs-hand-title { color: var(--brand-text); font-size: 1rem; }
body.brand-ui #angrydogs-protection { color: var(--brand-cyan); font-size: .85rem; }
body.brand-ui #angrydogs-hand-help, body.brand-ui .angrydogs-preview-help { color: var(--brand-muted); font-size: .85rem; line-height: 1.6; font-weight: 400; margin: 6px 0 0; }
body.brand-ui .angrydogs-preview-help { font-size: .8rem; }
body.brand-ui .angrydogs-hand { padding: 8px 4px 12px; gap: 12px; }
body.brand-ui .angrydogs-card { box-shadow: 0 3px 8px #0004; }
body.brand-ui .angrydogs-card[aria-disabled='true'] { cursor: default; }
body.brand-ui .angrydogs-card:hover { transform: none; }
body.brand-ui .angrydogs-card:is(.selected, .aiming) { outline: 3px solid var(--brand-cyan); outline-offset: 2px; transform: none; box-shadow: none; }
body.brand-ui .angrydogs-actions .btn { min-height: 44px; min-width: 0; padding: 10px 16px; font-size: .9rem; border-radius: 10px; box-shadow: none; letter-spacing: 0; }
body.brand-ui .angrydogs-actions .btn-primary { color: var(--brand-bg); background: var(--brand-cyan); border: 1px solid transparent; }
body.brand-ui .angrydogs-actions .btn-secondary { background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); }
body.brand-ui .angrydogs-actions button:disabled { opacity: 1; color: var(--brand-muted); background: var(--brand-surface); border-color: var(--brand-border); cursor: not-allowed; }
body.brand-ui .angrydogs-combo-tooltip { background: var(--brand-surface-raised); border: 1px solid var(--brand-border); color: var(--brand-text); box-shadow: 0 12px 30px #0005; font-weight: 400; }
body.brand-ui .angrydogs-combo-tooltip strong { color: var(--brand-cyan); }
body.brand-ui .angrydogs-combo-tooltip::after { border-top-color: var(--brand-border); }
body.brand-ui .angrydogs-choice, body.brand-ui .angrydogs-peek { width: 100%; margin: 0; color: var(--brand-text); font-size: .95rem; line-height: 1.6; }
body.brand-ui .angrydogs-choice:empty, body.brand-ui .angrydogs-peek:empty { display: none; }
body.brand-ui .angrydogs-choice:not(:empty) { padding: 16px; border: 1px solid var(--brand-cyan); border-radius: 12px; background: var(--brand-bg); box-shadow: none; scroll-margin-top: 64px; scroll-margin-bottom: 16px; }
body.brand-ui .angrydogs-choice strong, body.brand-ui .angrydogs-peek strong { color: var(--brand-text); overflow-wrap: anywhere; }
body.brand-ui .angrydogs-reaction-copy { color: var(--brand-muted); font-size: .9rem; }
body.brand-ui :is(.angrydogs-target, .angrydogs-name) { min-height: 44px; max-width: 100%; padding: 10px 12px; background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: 10px; font-size: .85rem; overflow-wrap: anywhere; }
body.brand-ui :is(.angrydogs-target, .angrydogs-name):hover { background: #173944; color: var(--brand-text); border-color: var(--brand-cyan); font-weight: 400; }
body.brand-ui .angrydogs-facedown { border-color: var(--brand-border); }
body.brand-ui #angrydogs-reveal-caption { background: var(--brand-surface); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: 12px; max-width: calc(100vw - 32px); overflow-wrap: anywhere; }
body.brand-ui .angrydogs-reveal-layer, body.brand-ui .angrydogs-zoom-layer { background: #080e2099; }
body.brand-ui #angrydogs-end-players { display: grid; gap: 8px; }
body.brand-ui #angrydogs-end-players .card-score-row { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: .9rem; overflow-wrap: anywhere; }
body.brand-ui #angrydogs-end-players span { color: var(--brand-muted); }
@media (max-width: 760px) {
  body.brand-ui #screen-angrydogs-game { padding: 60px 12px 24px; }
  body.brand-ui .angrydogs-board { grid-template-columns: minmax(0, 1fr); grid-template-areas: 'players' 'center' 'title' 'hand' 'actions' 'log' 'result'; gap: 12px; }
  body.brand-ui .angrydogs-opponents { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.brand-ui .angrydogs-player { padding: 10px; }
  body.brand-ui .angrydogs-center { padding: 12px; }
  body.brand-ui .angrydogs-actions .btn { width: 100%; padding: 10px 6px; font-size: .8rem; }
  body.brand-ui .angrydogs-hand { flex-wrap: wrap; overflow: visible; justify-content: center; }
  body.brand-ui .angrydogs-card { width: 82px; height: 125px; }
  body.brand-ui .angrydogs-choice:not(:empty) { padding: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  body.brand-ui #screen-angrydogs-game *, body.brand-ui #screen-angrydogs-game *::after { animation: none !important; transition: none !important; }
}

/* Hundir la Flota: preparación guiada y dos tableros legibles. */
body.brand-ui:has(.hf-screen.active) { padding-bottom: 0; }
body.brand-ui:has(.hf-screen.active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) { background: var(--brand-background); color: var(--brand-text); font-family: inherit; padding: 64px 16px 28px; height: 100dvh; overflow-y: auto; justify-content: flex-start; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .game-menu-wrap { top: 8px; left: 8px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .game-menu-btn { min-height: 44px; color: var(--brand-text); border-color: var(--brand-border); background: var(--brand-surface); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .game-menu-dropdown button { color: var(--brand-text); min-height: 44px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-layout { display: grid; grid-template-columns: minmax(0, 520px) minmax(320px, 400px); max-width: 1000px; width: 100%; padding: 0; gap: 28px; flex-shrink: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-board-wrap { width: 100%; gap: 10px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .astillero-title { color: var(--brand-text); font-size: clamp(1.4rem, 4vw, 1.9rem); font-weight: 700; letter-spacing: -.02em; text-transform: none; text-shadow: none; margin: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-step { color: var(--brand-cyan); font-size: .85rem; margin: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-help { color: var(--brand-muted); font-size: .9rem; line-height: 1.6; text-align: center; margin: 0; max-width: 620px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-feedback { width: 100%; min-height: 64px; color: var(--brand-text); font-size: .9rem; line-height: 1.5; background: var(--brand-surface); padding: 12px; border: 1px solid var(--brand-border); border-radius: 10px; margin: 2px 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-board-wrap :is(.board-labels.cols, .board-with-labels) { width: 100%; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board { background: #102538; border: 1px solid #52758b; border-radius: 8px; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board::before { display: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board-labels span { font-size: .75rem; color: var(--brand-muted); letter-spacing: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board-labels.cols { padding-left: 20px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board-labels.rows { width: 20px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell { border: 1px solid #365269; border-radius: 0; padding: 0; background: transparent; font: inherit; min-width: 0; min-height: 0; color: var(--brand-text); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell:hover { background: #24475d; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: -3px; z-index: 5; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.disabled { opacity: 1; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.agua { background: #214979; border-color: #6597c0; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.agua::before { background: #d5ecff; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.agua::after,
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.hundido::before,
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-fill::after { display: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.tocado { background: #6c3528; border-color: #eea470; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.tocado::before { display: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.tocado::after { animation: none; color: #ffe3b9; text-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.hundido { background: #553041; border-color: #dc9eb5; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.hundido::after { content: '▧'; color: #ffdaea; position: absolute; inset: 0; display: grid; place-items: center; transform: none; font-size: 1.3em; animation: none; text-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.barco:not(.tocado):not(.hundido) .ship-fill { background: linear-gradient(135deg, #80acc0, #3e647c); border-color: #b0d0df; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.preview-valid { background: #205865; border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell.preview-invalid { background: #673332; border-color: #ffa6a0; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board.turno-espera { opacity: 1; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board.turno-activo { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px #57ddf326; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-panel { display: flex; flex-direction: column; min-width: 0; max-width: none; width: 100%; padding: 18px; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface); gap: 16px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .panel-section-title { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; color: var(--brand-text); font-size: 1rem; letter-spacing: 0; text-transform: none; margin: 0; }
body.brand-ui #hf-placement-progress { color: var(--brand-cyan); font-size: .85rem; font-weight: 400; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-entry { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; min-width: 0; min-height: 76px; padding: 10px; gap: 6px; border: 1px solid var(--brand-border); border-radius: 10px; background: var(--brand-bg); text-align: left; cursor: pointer; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-entry:is(:hover, .selected) { background: #122e3a; border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-entry.disabled { opacity: 1; border-style: dashed; background: var(--brand-surface); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-entry.disabled .ship-entry-count { color: var(--brand-cyan); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-entry-name { color: var(--brand-text); font-size: .85rem; white-space: normal; letter-spacing: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-entry-count { color: var(--brand-muted); font-size: .78rem; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-visual { height: 10px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-visual.vertical { flex-direction: row; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-block { width: 10px; height: 10px; background: #80acc0; border-color: #b0d0df; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) :is(.btn-naval, .hf-placed-ship-action) { min-height: 44px; padding: 10px 12px; color: var(--brand-text); background: var(--brand-surface-raised); border: 1px solid var(--brand-border); border-radius: 10px; box-shadow: none; font-size: .85rem; line-height: 1.4; letter-spacing: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) :is(.btn-naval, .hf-placed-ship-action):hover { border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-placed-ship-action.danger { color: #ffb5b5; border-color: #745061; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-placed-ship-controls { position: static; transform: none; margin-top: 6px; flex-wrap: wrap; justify-content: center; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .orientation-indicator { margin: 0; display: grid; place-items: center; color: var(--brand-muted); font-size: .8rem; letter-spacing: 0; text-align: center; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) #hf-btn-battle { grid-column: 1 / -1; background: var(--brand-cyan); color: var(--brand-bg); font-weight: 700; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .btn-naval:disabled { opacity: 1; color: var(--brand-muted); background: var(--brand-surface); border-color: var(--brand-border); cursor: not-allowed; filter: none; box-shadow: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) #hf-btn-battle:disabled { background: var(--brand-surface-raised); color: var(--brand-muted); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-layout { width: 100%; max-width: 1060px; padding: 0; gap: 16px; flex-shrink: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-status-bar { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; gap: 12px; padding: 16px; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface); }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-status-msg { grid-column: 1 / -1; grid-row: 1; min-width: 0; padding-bottom: 12px; border-bottom: 1px solid var(--brand-border); color: var(--brand-text); font-size: 1rem; line-height: 1.5; letter-spacing: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-status-item { min-width: 0; gap: 5px; text-align: center; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-status-label { color: var(--brand-muted); font-size: .8rem; line-height: 1.4; letter-spacing: 0; text-transform: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) :is(.battle-status-value, .sunken-count) { color: var(--brand-text); font-size: .95rem; line-height: 1.5; letter-spacing: 0; overflow-wrap: anywhere; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-status-value.turno-activo { color: var(--brand-cyan); text-shadow: none; animation: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .sunken-icon { display: none; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .boards-container { gap: 24px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board-wrap { min-width: 0; max-width: 500px; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board-wrap-title { font-size: 1.15rem; color: var(--brand-text); letter-spacing: 0; text-transform: none; text-shadow: none; margin: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .rival-label { color: var(--brand-muted); font-size: .85rem; letter-spacing: 0; overflow-wrap: anywhere; max-width: 100%; text-align: center; margin: 0; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 18px; color: var(--brand-muted); font-size: .85rem; }
body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .hf-legend b { margin-right: 5px; font-size: 1.1rem; }
body.brand-ui .hf-legend-water { color: #a0d2ff; }
body.brand-ui .hf-legend-hit { color: #ffc780; }
body.brand-ui .hf-legend-sunk { color: #ffbad4; }
@media (max-width: 760px) {
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) { padding: 60px 12px 24px; }
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-layout { grid-template-columns: minmax(0, 1fr); max-width: 520px; gap: 20px; }
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .placement-panel { padding: 14px; }
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .battle-status-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .boards-container { flex-direction: column; align-items: center; gap: 28px; }
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .board-wrap { width: 100%; max-width: 500px; }
}
@media (prefers-reduced-motion: reduce) {
  body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell::before, body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .cell::after, body.brand-ui :is(#screen-hundirlaflota-placement, #screen-hundirlaflota-game) .ship-fill::after { animation: none !important; }
}
 
/* Spanish card tables: readable cards, shared surfaces and natural scrolling. */
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) { --card-w: 76px; --card-h: 110px; background: var(--brand-background); color: var(--brand-text); height: 100dvh; padding: 0; overflow-y: auto; overflow-x: hidden; justify-content: flex-start; scroll-padding-top: 68px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .game-menu-wrap { position: sticky; top: 0; left: auto; width: 100%; height: 60px; flex: 0 0 60px; padding: 8px; box-sizing: border-box; z-index: 100; background: var(--brand-bg); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .game-menu-btn { min-height: 44px; background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .game-menu-dropdown button { color: var(--brand-text); min-height: 44px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .game-menu-rules { display: block !important; }
body.brand-ui:has(:is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game).active) :is(#quick-audio-controls, #chat-toggle) { z-index: 110; }
body.brand-ui:has(:is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game).active) #chat-panel { z-index: 109; }
body.brand-ui:has(:is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game).active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .status-bar { position: static; flex-shrink: 0; background: transparent; backdrop-filter: none; padding: 8px 12px 16px; font-size: .95rem; line-height: 1.45; color: var(--brand-cyan); overflow-wrap: anywhere; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.game-layout, .brisca-layout, .tute-layout) { display: grid; flex: 0 0 auto; width: min(1100px, 100%); height: auto; min-height: 0; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; grid-template-areas: "left-player top-player right-player" "table table table" "bottom-hand bottom-hand bottom-hand"; gap: 16px; padding: 8px 16px 24px; margin: 0 auto; align-items: stretch; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.player-area, .brisca-top, .tute-top, .brisca-side-player, .tute-side-player) { position: static; transform: none; width: 100%; min-width: 0; flex-direction: column; align-items: center; justify-content: center; padding: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.brisca-top, .tute-top) { grid-area: top-player; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.brisca-left-player, .tute-left-player) { grid-area: left-player; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.brisca-right-player, .tute-right-player) { grid-area: right-player; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .mini-hand { display: none; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.player-badge, .my-name-badge) { min-width: 0; max-width: 100%; width: auto; padding: 10px 14px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); color: var(--brand-text); box-shadow: none; font-size: .9rem; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .player-badge { width: 100%; box-sizing: border-box; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .p-name { max-width: none; white-space: normal; overflow-wrap: anywhere; color: var(--brand-text); font-size: .9rem; line-height: 1.35; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .p-cards { color: var(--brand-muted); font-size: .8rem; line-height: 1.4; margin-top: 4px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.player-badge, .my-name-badge).active-turn { border-color: var(--brand-cyan); background: #122e3a; box-shadow: 0 0 0 1px var(--brand-cyan); color: var(--brand-text); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .player-badge.partner .p-name::after { content: " · Tu equipo"; color: var(--brand-cyan); font-size: .75rem; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .bottom-area { width: 100%; min-width: 0; gap: 12px; padding: 16px 8px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .bottom-info { height: auto; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: 100%; text-align: center; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .hand-container { flex-wrap: wrap; overflow: visible; padding: 12px 6px 6px; gap: 10px; min-width: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.hand-card, .esc-tc) { padding: 0; font-family: inherit; flex-shrink: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.hand-card, .esc-tc):focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 4px; z-index: 2; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.hand-order-button, .hand-order-toggle, .tute-cante-actions .btn) { min-height: 44px; background: var(--brand-surface-raised); border: 1px solid var(--brand-border); color: var(--brand-text); font-size: .8rem; letter-spacing: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .hand-order-button.active { border-color: var(--brand-cyan); color: var(--brand-cyan); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .hand-order-controls { height: auto; flex-wrap: wrap; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.table-area, .tute-center, .brisca-trick-area) { background: radial-gradient(ellipse at 50% 35%, #173942, #10252f); border: 1px solid #365761; border-radius: 16px; box-shadow: none; min-width: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .table-area { min-height: 220px; padding: 24px 12px; width: 100%; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .escoba-table-cards { gap: 12px; width: 100%; padding-top: 10px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .escoba-mesa-label { font-size: .9rem !important; text-transform: none; letter-spacing: 0; color: var(--brand-muted); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.esc-selected, .esc-selected-hand) { border-color: var(--brand-cyan) !important; box-shadow: 0 0 0 2px var(--brand-cyan) !important; transform: translateY(-5px) !important; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .escoba-actions-row { flex-wrap: wrap; width: 100%; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.btn-capturar, .btn-descartar) { min-height: 44px; padding: 10px 18px; border: 1px solid var(--brand-border); letter-spacing: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .btn-capturar { background: var(--brand-cyan); color: var(--brand-bg); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .btn-descartar { background: var(--brand-surface-raised); color: var(--brand-text); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-table-help { color: var(--brand-muted); font-size: .85rem; line-height: 1.5; text-align: center; margin: 0; max-width: 60ch; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-center { display: contents; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-layout { grid-template-areas: "left-player top-player right-player" "trump table deck" "bottom-hand bottom-hand bottom-hand"; grid-template-columns: minmax(120px, 1fr) minmax(0, 3fr) minmax(120px, 1fr); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trump-wrap { grid-area: trump; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-deck-wrap { grid-area: deck; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.brisca-trump-wrap, .brisca-deck-wrap) { padding: 16px 8px; gap: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; justify-content: center; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trick-area { grid-area: table; min-height: 190px; gap: 12px; padding: 18px 12px; align-content: center; align-items: center; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trick-slot { max-width: 100%; gap: 8px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trick-label { width: var(--card-w); overflow-wrap: anywhere; text-align: center; font-size: .78rem; color: var(--brand-muted); letter-spacing: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trick-placeholder { width: auto; max-width: 220px; height: auto; min-height: 110px; padding: 20px; font-size: .9rem; color: var(--brand-muted); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.brisca-trump-label, .brisca-deck-label, .tute-last-trick) { color: var(--brand-muted); font-size: .85rem; letter-spacing: 0; text-transform: none; text-align: center; overflow-wrap: anywhere; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trump-suit-badge { color: var(--brand-cyan); background: var(--brand-bg); border-color: var(--brand-border); font-size: .8rem; letter-spacing: 0; text-transform: none; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trump-rotated { transform: none; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trump-flip { animation: none; transform: none; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trump-swappable { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px var(--brand-cyan); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-trump-swappable:hover { transform: translateY(-3px); }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-side-players { display: contents; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-center { grid-area: table; width: 100%; min-height: 0; grid-template-columns: minmax(150px, 210px) minmax(0, 1fr); padding: 20px; gap: 20px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-info-panel { min-width: 0; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-table-panel { min-width: 0; min-height: 0; gap: 12px; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-table-panel .brisca-trick-area { border: 0; background: transparent; padding: 12px 0; width: 100%; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-cantes span { color: var(--brand-muted); border-color: var(--brand-border); background: var(--brand-bg); font-size: .8rem; }
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-cante-actions { min-height: 0; }
@media (max-width: 600px) {
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) { --card-w: 56px; --card-h: 82px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.game-layout, .brisca-layout, .tute-layout) { gap: 10px; padding: 8px 10px 20px; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-template-rows: auto auto auto; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .player-badge { padding: 8px 5px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .p-name { font-size: .78rem; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .p-cards { font-size: .72rem; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .esc-tc { width: 56px; height: 82px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-layout { grid-template-areas: "left-player top-player right-player" "trump trump deck" "table table table" "bottom-hand bottom-hand bottom-hand"; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.brisca-trump-wrap, .brisca-deck-wrap) { flex-direction: row; flex-wrap: wrap; padding: 12px 8px; gap: 8px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .brisca-deck-pile { width: 44px; height: 64px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-center { grid-template-columns: minmax(0, 1fr); padding: 14px 10px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-info-panel { flex-direction: row; flex-wrap: wrap; gap: 10px; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .tute-scoreboard { max-width: none; flex-basis: 100%; }
  body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) .bottom-area { padding: 12px 6px; }
}
body.brand-ui :is(#screen-escoba-game, #screen-brisca-game, #screen-tute-game, #screen-chinchon-game, #screen-culo-game, #screen-burro-game) [hidden] { display: none !important; }
body.brand-ui #screen-escoba-game .game-layout:has(#escoba-area-top[hidden]):has(#escoba-area-right[hidden]) #escoba-area-left { grid-area: top-player; }
body.brand-ui #screen-brisca-game #brisca-swap-trump { min-height: 44px; white-space: normal; padding: 8px; font-size: .8rem; color: var(--brand-bg); background: var(--brand-cyan); border-color: var(--brand-cyan); box-shadow: none; }
body.brand-ui :is(#screen-brisca-game, #screen-tute-game) .hand-container .brisca-playable { border-color: var(--brand-cyan); box-shadow: 0 0 0 1px var(--brand-cyan), 2px 2px 8px #0005; }
/* Selection-based card games share the same table and hand surfaces. */
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) { gap: 0; align-items: center; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-wrap, .culo-wrap, .burro-wrap) { width: min(1100px, 100%); box-sizing: border-box; padding: 8px 16px 24px; gap: 16px; min-width: 0; flex: 0 0 auto; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-scoreboard, .culo-players, .burro-players) { display: grid; grid-template-columns: repeat(auto-fit, minmax(145px, 1fr)); gap: 10px; width: 100%; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-player, .culo-player, .burro-player) { box-sizing: border-box; min-width: 0; padding: 12px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 12px; box-shadow: none; color: var(--brand-muted); font-size: .8rem; line-height: 1.5; overflow-wrap: anywhere; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-player, .culo-player, .burro-player) strong { color: var(--brand-text); font-size: .9rem; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-player, .culo-player, .burro-player).current { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.culo-role, .burro-player small) { color: var(--brand-muted); font-size: .8rem; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.culo-player.passed, .burro-player.out) { opacity: 1; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-player.target { border-style: dashed; border-color: var(--brand-cyan); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-player.lost { border-color: #ffb7bb; box-shadow: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-table, .culo-table, .burro-table) { width: 100%; box-sizing: border-box; padding: 22px 16px; gap: 14px; background: radial-gradient(ellipse at 50% 35%, #173942, #10252f); border: 1px solid #365761; border-radius: 16px; box-shadow: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .chinchon-table { flex-wrap: wrap; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-pile-group { display: flex; flex-direction: column; align-items: center; gap: 10px; color: var(--brand-muted); font-size: .9rem; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .chinchon-pile { width: 94px; height: 138px; background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-text); box-shadow: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .chinchon-pile:not(:disabled) { border-color: var(--brand-cyan); box-shadow: 0 0 0 1px var(--brand-cyan); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .chinchon-pile:disabled { opacity: .8; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-hand-panel { width: 100%; min-width: 0; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 18px 12px; border: 1px solid var(--brand-border); border-radius: 16px; background: var(--brand-surface); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-hand-title { margin: 0; font-size: 1rem; font-weight: 650; color: var(--brand-text); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-selection-help { margin: 0; color: var(--brand-muted); font-size: .88rem; line-height: 1.5; text-align: center; overflow-wrap: anywhere; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-hand-panel .hand-container { width: 100%; justify-content: center; min-height: 0; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-hand-panel .hand-card.selected { border-color: var(--brand-cyan); box-shadow: 0 0 0 2px var(--brand-cyan); transform: translateY(-5px); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-actions, .culo-actions, .burro-draw-row) { gap: 10px; flex-wrap: wrap; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-actions, .culo-actions, .burro-draw-row) .btn { min-height: 44px; padding: 10px 18px; font-size: .9rem; letter-spacing: 0; white-space: normal; border: 1px solid var(--brand-border); box-shadow: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-actions, .culo-actions, .burro-draw-row) .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-actions, .culo-actions, .burro-draw-row) .btn-secondary { background: var(--brand-surface-raised); color: var(--brand-text); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) button:focus-visible { outline: 3px solid var(--brand-cyan); outline-offset: 4px; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.culo-current, .culo-played, .burro-event, .burro-draw-pile) { color: var(--brand-muted); font-size: .9rem; letter-spacing: 0; text-align: center; overflow-wrap: anywhere; max-width: 100%; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.burro-target-cards:empty, .burro-draw-pile:empty) { display: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-target-cards { width: 100%; min-height: 0; gap: 12px; padding: 8px 4px; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-target-card { width: 60px; height: 88px; background-image: var(--asset-card-back-oro, url('/images/cards/reverso_oro.png')); background-size: 100% 100%; border: 2px solid var(--brand-cyan); box-shadow: none; padding: 0; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-target-card span { color: var(--brand-text); background: var(--brand-bg); padding: 2px 6px; border-radius: 4px; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-hand-options { width: 100%; margin: 0; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-auto-toggle { min-height: 44px; padding: 8px 12px; color: var(--brand-text); background: var(--brand-bg); border-color: var(--brand-border); font-size: .85rem; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .burro-auto-toggle input { width: 18px; height: 18px; accent-color: var(--brand-cyan); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .culo-round-banner { position: static; display: none; transform: none; min-width: 0; width: 100%; box-sizing: border-box; color: var(--brand-text); background: var(--brand-surface); border-color: var(--brand-cyan); box-shadow: none; animation: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .culo-round-banner.show { display: block; transform: none; animation: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .culo-round-banner strong { color: var(--brand-cyan); letter-spacing: 0; text-transform: none; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .culo-round-banner span { color: var(--brand-text); overflow-wrap: anywhere; }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .chinchon-turn-timer { background: var(--brand-bg); color: var(--brand-muted); border-color: var(--brand-border); }
body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game).round-review .card-hand-panel { display: none; }
@media (max-width: 600px) {
  body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-wrap, .culo-wrap, .burro-wrap) { padding: 8px 10px 20px; gap: 12px; }
  body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-scoreboard, .culo-players, .burro-players) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-player, .culo-player, .burro-player) { padding: 9px 8px; }
  body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) :is(.chinchon-player, .culo-player, .burro-player) strong { font-size: .83rem; }
  body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .card-hand-panel { padding: 16px 6px; }
  body.brand-ui :is(#screen-chinchon-game, #screen-culo-game, #screen-burro-game) .culo-table-card.hand-card { width: 48px; height: 70px; }
}

/* Alignment games: board remains visible alongside the result. */
body.brand-ui :is(#screen-tresenraya-game, #screen-cuatroenraya-game) { background: var(--brand-background); color: var(--brand-text); height: 100dvh; min-height: 0; padding: 0 0 24px; gap: 18px; justify-content: flex-start; overflow-y: auto; overflow-x: hidden; scroll-padding-top: 78px; }
body.brand-ui .alignment-game .game-menu-wrap { position: sticky; top: 0; left: auto; width: 100%; height: 60px; flex: 0 0 60px; padding: 8px; box-sizing: border-box; z-index: 100; background: var(--brand-bg); }
body.brand-ui .alignment-game .game-menu-btn { min-height: 44px; background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-text); }
body.brand-ui .alignment-game .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); }
body.brand-ui .alignment-game .game-menu-dropdown button { min-height: 44px; color: var(--brand-text); }
body.brand-ui .alignment-game .game-menu-rules { display: block !important; }
body.brand-ui:has(.alignment-game.active) :is(#quick-audio-controls, #chat-toggle) { z-index: 110; }
body.brand-ui:has(.alignment-game.active) #chat-panel { z-index: 109; }
body.brand-ui:has(.alignment-game.active) :is(#pwa-install-banner, #btn-ingame-rules, #app-version) { display: none !important; }
body.brand-ui .alignment-game .alignment-header { width: min(600px, calc(100% - 24px)); gap: 16px; flex-shrink: 0; }
body.brand-ui .alignment-game .alignment-status { font-size: 1rem; line-height: 1.5; color: var(--brand-cyan); font-weight: 600; letter-spacing: 0; text-transform: none; text-align: center; overflow-wrap: anywhere; }
body.brand-ui .alignment-game .alignment-players { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); width: 100%; gap: 10px; }
body.brand-ui .alignment-game .alignment-player { min-width: 0; padding: 14px 10px; border: 1px solid var(--brand-border); border-radius: 12px; background: var(--brand-surface); color: var(--brand-text); line-height: 1.5; font-size: .9rem; text-align: center; overflow-wrap: anywhere; }
body.brand-ui .alignment-game .alignment-player.active { border-color: var(--brand-cyan); background: #122e3a; }
body.brand-ui .alignment-game .alignment-player.active::after { content: 'Turno actual'; display: block; font-size: .78rem; color: var(--brand-cyan); }
body.brand-ui .alignment-game .tres-board { width: min(390px, calc(100% - 24px)); flex-shrink: 0; box-sizing: border-box; background: #152d38; border: 1px solid #365761; padding: 12px; gap: 10px; }
body.brand-ui .alignment-game .tres-cell { color: var(--brand-cyan); background: var(--brand-surface); border: 1px solid var(--brand-border); font-size: clamp(3rem, 15vw, 5rem); opacity: 1; }
body.brand-ui .alignment-game .tres-cell.mark-o { color: var(--brand-violet); }
body.brand-ui .alignment-game .tres-cell[aria-disabled="true"] { cursor: default; }
body.brand-ui .alignment-game .tres-cell:not([aria-disabled="true"]):hover { background: #203849; }
body.brand-ui .alignment-game .alignment-table-wrap { width: min(560px, calc(100% - 8px)); flex-shrink: 0; }
body.brand-ui .alignment-game .alignment-columns { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); margin: 0 0 8px; }
body.brand-ui .alignment-game .alignment-column { min-width: 0; min-height: 44px; padding: 0; margin: 0; border-radius: 8px; border: 1px solid var(--brand-border); color: var(--brand-cyan); background: var(--brand-surface); font: inherit; cursor: pointer; }
body.brand-ui .alignment-game .alignment-column[aria-disabled="true"] { color: var(--brand-muted); cursor: default; }
body.brand-ui .alignment-game .alignment-column:focus-visible { outline-offset: -4px; }
body.brand-ui .alignment-game .cuatro-board { width: 100%; box-sizing: border-box; background: #173942; border: 1px solid #365761; padding: 6px; gap: 6px; border-radius: 14px; }
body.brand-ui .alignment-game .cuatro-cell { opacity: 1; }
body.brand-ui .alignment-game :is(.tres-cell, .cuatro-cell).last { box-shadow: inset 0 0 0 3px #f2f6ff; }
body.brand-ui .alignment-game :is(.tres-cell, .cuatro-cell).win { box-shadow: inset 0 0 0 4px var(--brand-cyan); }
body.brand-ui .alignment-game .disc-symbol { position: absolute; inset: 0; display: grid; place-items: center; color: #35171a; font-family: Arial, sans-serif; font-size: clamp(14px, 3vw, 24px); z-index: 1; pointer-events: none; }
body.brand-ui .alignment-game .alignment-help { width: min(540px, calc(100% - 32px)); margin: 0; color: var(--brand-muted); text-align: center; font-size: .88rem; line-height: 1.5; flex-shrink: 0; }
body.brand-ui .alignment-game .alignment-result { position: static; inset: auto; width: min(560px, calc(100% - 24px)); padding: 0; background: transparent; flex-shrink: 0; }
body.brand-ui .alignment-game .alignment-result-card { box-sizing: border-box; width: 100%; padding: 22px 18px; background: var(--brand-surface); border: 1px solid var(--brand-border); border-radius: 16px; box-shadow: none; gap: 12px; }
body.brand-ui .alignment-game .alignment-result h2 { color: var(--brand-cyan); text-shadow: none; font-size: 1.5rem; }
body.brand-ui .alignment-game .alignment-result p { color: var(--brand-text); overflow-wrap: anywhere; max-width: 100%; line-height: 1.5; }
body.brand-ui .alignment-game .alignment-result .btn { min-height: 44px; font-size: .9rem; padding: 10px 18px; letter-spacing: 0; box-shadow: none; }
body.brand-ui .alignment-game .alignment-result .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); }
body.brand-ui .alignment-game .alignment-result .btn-secondary { background: var(--brand-surface-raised); border-color: var(--brand-border); color: var(--brand-text); }
@media (prefers-reduced-motion: reduce) {
  body.brand-ui .alignment-game .cuatro-cell.drop::after { animation: none; }
}

body.brand-ui :is(#screen-tresenraya-game, #screen-cuatroenraya-game) .game-menu-btn { background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); box-shadow: none; }
body.brand-ui .alignment-game .alignment-player.disc-red::before { content: '● '; color: #ff969d; }
body.brand-ui .alignment-game .alignment-player.disc-yellow::before { content: '○ '; color: #f4d044; }
body.brand-ui .alignment-game .cuatro-cell.drop .disc-symbol { animation: cuatro-disc-drop 720ms cubic-bezier(0.18, 0.78, 0.22, 1) both; }
@media (prefers-reduced-motion: reduce) {
  body.brand-ui .alignment-game .cuatro-cell.drop .disc-symbol { animation: none; }
}
body.brand-ui[data-game-theme] :is(#screen-tresenraya-game, #screen-cuatroenraya-game) .game-menu-btn { background: var(--brand-surface); color: var(--brand-text); border-color: var(--brand-border); box-shadow: none; }
body.brand-ui[data-game-theme] :is(#screen-tresenraya-game, #screen-cuatroenraya-game) .game-menu-dropdown { background: var(--brand-surface); border-color: var(--brand-border); box-shadow: 0 12px 28px #0005; }
body.brand-ui[data-game-theme] :is(#screen-tresenraya-game, #screen-cuatroenraya-game) .game-menu-dropdown button { color: var(--brand-text); }
body.brand-ui[data-game-theme] :is(#screen-tresenraya-game, #screen-cuatroenraya-game) :is(.game-menu-btn:hover, .game-menu-wrap.open .game-menu-btn, .game-menu-dropdown button:hover) { background: var(--brand-surface-raised); color: var(--brand-cyan); border-color: var(--brand-cyan); }

/* Shared chat and connection feedback. */
body.brand-ui, body.brand-ui[data-game-theme] {
  --chat-panel-bg: #111c33; --chat-border: #304260; --chat-accent: #57ddf3; --chat-title: #f2f6ff;
  --chat-muted: #b1bfd5; --chat-scroll-track: #080e20; --chat-scroll-thumb: #304260;
  --chat-mine-bg: #174957; --chat-mine-color: #f2f6ff; --chat-theirs-bg: #182640; --chat-theirs-color: #f2f6ff;
  --chat-system-color: #b1bfd5; --chat-input-bg: #080e20; --chat-input-color: #f2f6ff; --chat-placeholder: #b1bfd5;
  --chat-send-bg: #57ddf3; --chat-send-color: #080e20;
}
body.brand-ui #chat-toggle { top: 8px; width: 44px; height: 44px; padding: 0; background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-text); }
body.brand-ui #quick-audio-controls { top: 8px; right: 60px; gap: 6px; }
body.brand-ui .quick-audio-button { width: 44px; height: 44px; background: var(--brand-surface); border-color: var(--brand-border); color: var(--brand-text); }
body.brand-ui #chat-badge { top: -3px; right: -3px; font-size: .7rem; background: #a32840; }
body.brand-ui #chat-panel { top: 60px; width: 340px; height: 430px; min-width: min(280px, calc(100vw - 16px)); min-height: min(220px, var(--chat-available-height, calc(100dvh - 68px))); max-height: calc(100dvh - 68px); max-width: calc(100vw - 16px); background: var(--brand-surface); border-color: var(--brand-border); border-radius: 14px; box-sizing: border-box; }
body.brand-ui .chat-header { padding: 6px 8px 6px 14px; gap: 4px; }
body.brand-ui .chat-header-title { font-size: .9rem; letter-spacing: 0; }
body.brand-ui .chat-btn { width: 44px; height: 44px; flex-shrink: 0; color: var(--brand-text); font-size: 1.15rem; }
body.brand-ui #chat-messages { min-height: 0; overscroll-behavior: contain; }
body.brand-ui #chat-empty { margin: 14px; color: var(--brand-muted); font-size: .9rem; line-height: 1.5; }
body.brand-ui .chat-msg-name { font-size: .78rem; overflow-wrap: anywhere; }
body.brand-ui .chat-msg-bubble { font-size: .95rem; line-height: 1.5; padding: 8px 12px; }
body.brand-ui .chat-msg.system .chat-msg-bubble { font-size: .85rem; font-style: normal; }
body.brand-ui .chat-input-row { padding: 8px; }
body.brand-ui #chat-input { min-width: 0; min-height: 44px; font-size: 16px; box-sizing: border-box; }
body.brand-ui #chat-send { min-height: 44px; font-size: .9rem; padding: 8px 12px; }
body.brand-ui #chat-send:disabled { opacity: .55; cursor: default; }
body.brand-ui #chat-latest { flex-shrink: 0; min-height: 44px; margin: 4px 8px; background: var(--brand-surface-raised); color: var(--brand-cyan); border: 1px solid var(--brand-border); border-radius: 8px; font: inherit; font-size: .85rem; cursor: pointer; }
body.brand-ui #game-notice { position: fixed; top: 64px; left: 50%; transform: translateX(-50%); width: min(520px, calc(100% - 24px)); box-sizing: border-box; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid #ecadb7; border-radius: 12px; background: #2c1c30; color: #ffe6eb; z-index: 6000; box-shadow: 0 8px 28px #0005; }
body.brand-ui #game-notice-text { margin: 0; flex: 1; min-width: 0; overflow-wrap: anywhere; line-height: 1.5; font-size: .95rem; }
body.brand-ui #game-notice-close { width: 44px; height: 44px; flex-shrink: 0; background: transparent; border: 1px solid #ecadb7; border-radius: 8px; color: inherit; font-size: 1.3rem; cursor: pointer; }
body.brand-ui #connection-dialog { width: min(460px, calc(100vw - 32px)); max-height: calc(100dvh - 32px); box-sizing: border-box; padding: 26px; background: var(--brand-surface); color: var(--brand-text); border: 1px solid var(--brand-border); border-radius: 18px; overflow-y: auto; }
body.brand-ui #connection-dialog::backdrop { background: #080e20d9; }
body.brand-ui #connection-title { margin: 0 0 14px; font-size: 1.4rem; color: var(--brand-cyan); }
body.brand-ui #connection-detail { line-height: 1.6; font-size: 1rem; color: var(--brand-muted); margin: 0 0 22px; }
body.brand-ui .connection-actions { display: flex; flex-wrap: wrap; gap: 10px; }
body.brand-ui .connection-actions .btn { min-height: 44px; white-space: normal; font-size: .9rem; letter-spacing: 0; text-decoration: none; padding: 12px 16px; box-shadow: none; }
body.brand-ui .connection-actions .btn-primary { background: var(--brand-cyan); color: var(--brand-bg); }
body.brand-ui .connection-actions .btn-secondary { background: var(--brand-surface-raised); color: var(--brand-text); border: 1px solid var(--brand-border); }
@media (max-width: 600px) {
  body.brand-ui #chat-panel { resize: none; width: calc(100vw - 16px); }
  body.brand-ui .chat-header { cursor: default; }
}
body.brand-ui .player-slot.disconnected-slot { color: #ffb7c1; background: #2c1c30; border-color: #bc7487; border-style: dashed; }
body.brand-ui #connection-dialog { margin: auto; }