/* Ajustes compartidos para las pantallas de juego y administración. */
*, *::before, *::after {
  box-sizing: border-box;
}

button,
a,
input,
select,
textarea {
  -webkit-tap-highlight-color: transparent;
}

button,
[role="button"],
a {
  touch-action: manipulation;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(245, 196, 0, .5);
  outline-offset: 2px;
}

img,
canvas,
svg,
video {
  max-width: 100%;
}

canvas {
  touch-action: none;
}

input,
select,
textarea,
button {
  font: inherit;
}

@media (max-width: 480px) {
  .topbar {
    gap: .55rem;
    padding-inline: .7rem;
  }

  .topbar > * {
    min-width: 0;
  }

  .topbar .sala,
  .topbar .sala-chip,
  .topbar [class*="sala"] {
    max-width: 52vw;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

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

/* La suite de juegos comparte la identidad índigo/ámbar del home. */
:root {
  --dorado: #E8B86D !important;
  --dorado-claro: #EAC98A !important;
  --negro: #0B0A11 !important;
  --gris-osc: #12101B !important;
  --gris-card: rgba(255, 255, 255, 0.045) !important;
  --gris-borde: rgba(255, 255, 255, 0.11) !important;
  --blanco: #ECEAF3 !important;
  --apagado: #A29DB5 !important;
  --verde: #6FAE8C !important;
  --rojo: #C97B6B !important;
  --azul: #7C6FD0 !important;
}

html,
body {
  background: #0B0A11 !important;
  color: #ECEAF3 !important;
}

body {
  background-image: radial-gradient(1200px 820px at 50% -12%, #1B1828 0%, #100E18 55%, #0B0A11 100%) !important;
}

.card,
.juego-card,
.panel,
.modal-content,
.sala-card,
.room-card,
.topbar {
  background: rgba(255, 255, 255, 0.045) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
  color: #ECEAF3 !important;
}

button,
.btn,
.btn-primary,
.btn-warning,
[role="button"] {
  background: linear-gradient(135deg, #7C6FD0, #2A2350) !important;
  border-color: transparent !important;
  color: #ECEAF3 !important;
}

button:hover,
.btn:hover,
[role="button"]:hover {
  filter: brightness(1.08);
}

input,
select,
textarea {
  color: #ECEAF3 !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.11) !important;
}

h1 span,
h2 span,
h3 span,
.accent,
.dorado,
.section-title {
  color: #E8B86D !important;
}