/* ==========================================================================
   Aviso de conexión, panel de accesibilidad, alto contraste y tamaño del texto (public/js/reconnection-monitor.js).
   Se carga DESPUÉS de shell.css y usa sus variables (--tinta, --oro...). Prefijos propios: .se-net*, .se-a11y*, html.se-hc.
   ========================================================================== */

/* ---------- Aviso de conexión: flotante bajo la cabecera, no empuja el contenido ni tapa el juego entero ---------- */
.se-net {
  position: fixed; z-index: 140; top: var(--se-net-top, 72px); left: 50%; transform: translateX(-50%);
  display: flex; align-items: center; gap: 10px; box-sizing: border-box;
  max-width: min(680px, calc(100vw - 16px)); min-height: 46px; padding: 6px 8px 6px 14px;
  border-radius: 14px; border: 2px solid var(--aviso, #f0a91a); background: var(--tinta, #0b1d32); color: var(--claro, #eef5fb);
  box-shadow: var(--sombra, 0 10px 30px rgba(4, 14, 26, 0.35)); font-size: 0.9rem; font-weight: 700; line-height: 1.3;
}
.se-net[data-state="restored"] { border-color: var(--ok, #58b43a); }
.se-net__msg { flex: 1 1 auto; min-width: 0; overflow-wrap: anywhere; }
.se-net__ring {
  position: relative; flex: none; width: 20px; height: 20px; box-sizing: border-box; border-radius: 50%;
  border: 3px solid rgba(255, 194, 26, 0.3); border-top-color: var(--oro, #ffc21a); animation: se-net-spin 0.9s linear infinite;
}
.se-net[data-state="restored"] .se-net__ring { animation: none; border-color: var(--ok, #58b43a); background: var(--ok, #58b43a); }
.se-net[data-state="restored"] .se-net__ring::after {
  content: ""; position: absolute; left: 4px; top: 0; width: 5px; height: 10px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.se-net__retry {
  flex: none; min-height: 38px; padding: 0 14px; border-radius: 10px; border: 2px solid var(--oro-borde, #7d4f00);
  background: var(--oro, #ffc21a); color: #3b2300; font-weight: 800; font-size: 0.84rem;
}
.se-net__retry:disabled { opacity: 0.6; cursor: default; }
@keyframes se-net-spin { to { transform: rotate(360deg); } }
@media (max-width: 520px) {
  .se-net { left: 8px; right: 8px; transform: none; max-width: none; flex-wrap: wrap; }
  .se-net__msg { flex-basis: calc(100% - 40px); }
  .se-net__retry { margin-left: auto; }
}
@media (prefers-reduced-motion: reduce) { .se-net__ring { animation: none; } }

/* ---------- Panel de accesibilidad (<dialog> modal: el navegador atrapa el foco, Esc cierra y devuelve el foco) ---------- */
.se-a11y {
  padding: 0; width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  border: 3px solid var(--madera-clara, #93673a); border-radius: 16px; color: var(--claro, #eef5fb);
  background: linear-gradient(180deg, var(--tinta-2, #12304f), var(--tinta, #0b1d32));
  box-shadow: 0 8px 0 var(--madera, #5b3a1a), var(--sombra, 0 10px 30px rgba(4, 14, 26, 0.35));
}
.se-a11y::backdrop { background: rgba(4, 12, 22, 0.7); }
.se-a11y__in { margin: 0; padding: 20px 22px 18px; }
.se-a11y__title { margin: 0 0 12px; font: 700 1.35rem/1.1 var(--f-display, system-ui, sans-serif); color: var(--oro, #ffc21a); }
.se-a11y__group { margin: 0 0 12px; padding: 6px 12px 8px; border: 1px solid var(--linea, rgba(157, 179, 201, 0.22)); border-radius: 10px; min-width: 0; }
.se-a11y__group legend { padding: 0 6px; font-weight: 800; font-size: 0.86rem; letter-spacing: 0.03em; color: var(--oro-claro, #ffe27a); }
.se-a11y__opt { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-size: 0.95rem; }
.se-a11y__opt input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--oro, #ffc21a); }
.se-a11y__hint { margin: 4px 0 14px; font-size: 0.8rem; line-height: 1.45; color: var(--apagado, #9db3c9); }
.se-a11y__actions { display: flex; justify-content: flex-end; gap: 10px; flex-wrap: wrap; }

/* ---------- Pantallas táctiles: objetivos de al menos 44 px en la barra del juego y en el aviso de conexión (WCAG 2.5.5) ---------- */
@media (pointer: coarse) {
  .gm-bar__btn { min-height: 44px; min-width: 44px; }
  .se-net__retry { min-height: 44px; }
}

/* ---------- Tamaño del texto: escala el rem de todo el shell (el lienzo del juego no se toca) ---------- */
html[data-se-font-scale="115%"] { font-size: 115%; }
html[data-se-font-scale="130%"] { font-size: 130%; }
html[data-se-font-scale] body.se-body { font-size: 1rem; }
@media (max-width: 640px) {
  /* móvil con texto grande: la entrada actual (con texto) necesita más ancho que las demás (solo icono) */
  html[data-se-font-scale] .se-nav a[aria-current="page"], html[data-se-font-scale] .se-nav button[aria-current="page"] { flex: 2.2 1 0; min-width: 0; }
}

/* ---------- Alto contraste (solo la web: cabecera, menús, chat, portada; el lienzo del juego conserva sus colores) ----------
   Sin `filter` sobre la página: un filtro sobre el lienzo costaría fotogramas y rompería el posicionamiento fijo. */
html.se-hc {
  --apagado: #f2f7fc;
  --texto-suave: #06121f;
  --texto: #000;
  --claro: #fff;
  --linea: rgba(255, 255, 255, 0.7);
  --tinta: #000a14;
  --tinta-2: #00101f;
}
html.se-hc body.se-body { background: #000a14; color: #fff; }
html.se-hc a:not(.se-btn):not(.se-brand):not(.se-skip) { text-decoration: underline; text-underline-offset: 2px; }
html.se-hc :focus-visible { outline: 4px solid #fff; outline-offset: 3px; box-shadow: 0 0 0 7px #000; }
html.se-hc .se-header { border-bottom-color: #fff; }
html.se-hc .se-btn, html.se-hc .gm-bar__btn, html.se-hc .se-nav a, html.se-hc .se-nav button { border: 2px solid #fff; }
html.se-hc .se-btn-secondary, html.se-hc .gm-bar__btn { background: #000; color: #fff; }
html.se-hc .gm-bar__status, html.se-hc .cd-hint, html.se-hc .cd-typing { color: #fff; }
html.se-hc .se-net, html.se-hc .se-a11y { border-color: #fff; background: #000; }
html.se-hc .se-net__retry { border-color: #fff; }