/* Estándar de maquetación para las vistas HTML. La mesa y las pantallas Canvas
   conservan su geometría y sus estilos propios. */

:root {
  color-scheme: dark;
  --ui-bg-deep: #061315;
  --ui-surface: #082a27;
  --ui-surface-raised: #104239;
  --ui-surface-glass: rgba(4, 37, 34, .92);
  --ui-gold: #f3a506;
  --ui-gold-light: #ffe5a0;
  --ui-gold-muted: #c5a45e;
  --ui-ink: #fff0c8;
  --ui-muted: #c6d7cb;
  --ui-good: #6be0b2;
  --ui-danger: #f19a9a;
  --ui-ease: cubic-bezier(.2, .75, .2, 1);
  --ui-shadow-card: 0 10px 26px rgba(0, 0, 0, .34), inset 0 1px rgba(255, 255, 255, .06);
  --ui-shadow-modal: 0 24px 70px rgba(0, 0, 0, .58), inset 0 1px rgba(255, 255, 255, .08);
  --ui-z-overlay: 60;
  --ui-font-body: 14px;
  --ui-font-small: 12px;
  --ui-font-heading: 18px;
  --ui-font-display: 24px;
  --ui-button-border: #F3A506;
  --ui-button-radius: 40px;
  --ui-button-min-height: 44px;
}

#profileEditor,
#playerAccountModal,
#onlineOverlay:not(.playing) {
  font-size: var(--ui-font-body);
}

#profileEditor button,
#playerAccountModal button,
#onlineOverlay:not(.playing) button {
  height: auto !important;
  min-height: var(--ui-button-min-height) !important;
  padding-block: 9px;
  border: 1px solid var(--ui-button-border) !important;
  border-radius: var(--ui-button-radius) !important;
  font-size: var(--ui-font-body) !important;
  line-height: 1.25;
  transition: transform 140ms var(--ui-ease), filter 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}

#profileEditor button:focus-visible,
#playerAccountModal button:focus-visible,
#onlineOverlay:not(.playing) button:focus-visible,
#profileEditor input:focus-visible,
#profileEditor select:focus-visible,
#playerAccountModal input:focus-visible,
#playerAccountModal select:focus-visible,
#onlineOverlay:not(.playing) input:focus-visible,
#onlineOverlay:not(.playing) select:focus-visible {
  outline: 2px solid var(--ui-gold-light);
  outline-offset: 3px;
}

#profileEditor button:disabled,
#playerAccountModal button:disabled,
#onlineOverlay:not(.playing) button:disabled {
  cursor: not-allowed;
  filter: saturate(.5) brightness(.78);
  box-shadow: none;
}

#profileEditor .profile-close {
  width: 40px;
  min-width: 40px;
  min-height: 40px !important;
  padding: 0;
}

#profileEditor input,
#profileEditor select,
#playerAccountModal input,
#playerAccountModal select,
#onlineOverlay:not(.playing) input:not([type=checkbox]),
#onlineOverlay:not(.playing) select {
  font-size: var(--ui-font-body) !important;
}

#onlineOverlay:not(.playing) .top h1 {
  font-size: var(--ui-font-heading) !important;
}

#onlineOverlay:not(.playing) .bigcode {
  font-size: var(--ui-font-display) !important;
}

#profileEditor,
#playerAccountModal {
  z-index: var(--ui-z-overlay);
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: max(12px, env(safe-area-inset-top)) max(12px, env(safe-area-inset-right))
    max(12px, env(safe-area-inset-bottom)) max(12px, env(safe-area-inset-left));
}

#profileEditor > .profile-card,
#playerAccountModal > .profile-card {
  width: min(540px, 100%);
  min-width: 0;
  max-height: min(920px, calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom) - 24px));
  overflow: auto;
  overscroll-behavior: contain;
  overflow-wrap: anywhere;
  box-shadow: var(--ui-shadow-modal);
}

#profileEditor:not([hidden]),
#playerAccountModal:not([hidden]) {
  animation: ui-overlay-in 220ms var(--ui-ease) both;
}

#profileEditor:not([hidden]) > .profile-card,
#playerAccountModal:not([hidden]) > .profile-card {
  animation: ui-panel-in 260ms var(--ui-ease) both;
}

#profileEditor .profile-head,
#playerAccountModal .profile-head,
#profileEditor .profile-actions,
#playerAccountModal .account-modal-actions {
  min-width: 0;
  flex-wrap: wrap;
  gap: 10px;
}

#profileEditor .profile-head h2,
#playerAccountModal .profile-head h2 {
  min-width: 0;
  overflow-wrap: anywhere;
}

#profileEditor button,
#playerAccountModal button {
  min-width: 0;
  min-height: 44px;
  max-width: 100%;
  white-space: normal;
  overflow-wrap: anywhere;
  touch-action: manipulation;
}

#profileEditor input,
#profileEditor select,
#playerAccountModal input,
#playerAccountModal select {
  min-width: 0;
  max-width: 100%;
}

/* Flujo HTML del lobby. Excluimos explícitamente la pantalla de partida online. */
#onlineOverlay:not(.playing) {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

#onlineOverlay:not(.playing) .panel {
  background:
    radial-gradient(ellipse at 8% 0%, rgba(239, 202, 117, .075), transparent 48%),
    linear-gradient(145deg, rgba(23, 78, 60, .98), rgba(7, 43, 37, .98));
  box-shadow: var(--ui-shadow-card);
  transition: border-color 180ms ease, box-shadow 180ms ease;
}

#onlineOverlay:not(.playing) .banner {
  background:
    linear-gradient(115deg, rgba(255, 255, 255, .04), transparent 55%),
    linear-gradient(145deg, #1c4d3a, #10382f);
  box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

#onlineOverlay:not(.playing) .member,
#onlineOverlay:not(.playing) .public-room-card {
  background: linear-gradient(145deg, rgba(12, 57, 43, .96), rgba(7, 42, 36, .96));
  transition: border-color 180ms ease, transform 180ms var(--ui-ease), box-shadow 180ms ease;
}

#onlineOverlay:not(.playing) #notice {
  border: 1px solid rgba(120, 176, 139, .24);
  box-shadow: inset 0 1px rgba(255, 255, 255, .04);
}

#onlineOverlay:not(.playing) .app,
#onlineOverlay:not(.playing) .app > *,
#onlineOverlay:not(.playing) .panel,
#onlineOverlay:not(.playing) .banner {
  min-width: 0;
  max-width: 100%;
}

#onlineOverlay:not(.playing) .panel,
#onlineOverlay:not(.playing) .banner,
#onlineOverlay:not(.playing) .note,
#onlineOverlay:not(.playing) .member,
#onlineOverlay:not(.playing) .public-room-card {
  overflow-wrap: anywhere;
}

#onlineOverlay:not(.playing) button {
  min-width: 0;
  min-height: 44px;
  white-space: normal;
  overflow-wrap: anywhere;
}

#onlineOverlay:not(.playing) .actions,
#onlineOverlay:not(.playing) .inlinegroup {
  min-width: 0;
  flex-wrap: wrap;
}

#onlineOverlay:not(.playing) .actions > *,
#onlineOverlay:not(.playing) .inlinegroup > * {
  min-width: 0;
  flex: 1 1 140px;
}

@media (max-width: 380px) {
  #profileEditor > .profile-card,
  #playerAccountModal > .profile-card {
    padding: 16px;
    border-radius: 18px;
  }

  #profileEditor .profile-head h2,
  #playerAccountModal .profile-head h2 {
    font-size: clamp(16px, 5vw, 20px);
  }

  #profileEditor .profile-actions > button,
  #playerAccountModal .account-modal-actions > button {
    flex: 1 1 100%;
  }

  #onlineOverlay:not(.playing) .app {
    padding-left: 12px;
    padding-right: 12px;
    gap: 10px;
  }

  #onlineOverlay:not(.playing) .panel {
    padding: 13px;
  }

  #onlineOverlay:not(.playing) .roomtitle {
    align-items: flex-start;
    flex-wrap: wrap;
    gap: 6px;
  }

  #onlineOverlay:not(.playing) .bigcode {
    font-size: clamp(25px, 9vw, 36px);
    letter-spacing: .06em;
    overflow-wrap: anywhere;
  }
}

@keyframes ui-overlay-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ui-panel-in { from { opacity: 0; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: none; } }

@media (hover: hover) and (pointer: fine) {
  #profileEditor button:not(:disabled):hover,
  #playerAccountModal button:not(:disabled):hover,
  #onlineOverlay:not(.playing) button:not(:disabled):hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
  }
  #onlineOverlay:not(.playing) .public-room-card:hover,
  #onlineOverlay:not(.playing) .member:hover {
    border-color: rgba(243, 165, 6, .78);
    box-shadow: 0 5px 14px rgba(0, 0, 0, .22);
  }
}

@media (prefers-reduced-motion: reduce) {
  #profileEditor:not([hidden]),
  #playerAccountModal:not([hidden]),
  #profileEditor:not([hidden]) > .profile-card,
  #playerAccountModal:not([hidden]) > .profile-card {
    animation: none !important;
  }
  #profileEditor *,
  #playerAccountModal *,
  #onlineOverlay:not(.playing) * {
    scroll-behavior: auto !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}