/* ==========================================================================
   Pantalla de juego: escenario del cliente (760x600), barra de carga, chat acoplado, avisos de sesión.
   ========================================================================== */

/* [Ux1] La cabecera (#user-header-panel / .se-guest / .se-nav) y su reparto en filas viven en shell.css («Cabecera: niveles»). */

/* ---------- Estructura ----------
   El juego ocupa TODO el alto que deja la cabecera (y el aviso de correo, si está): .gm tiene ese alto exacto y el escenario
   (760x600) se calcula con unidades de contenedor sobre .gm-main (cqw/cqh = hueco real, sin adivinar cuánto mide la cabecera ni el
   aviso). El lienzo del motor observa su contenedor (ResizeObserver) y se reajusta conservando la proporción (showAll). */
.gm {
  display: flex; flex-direction: column;
  height: max(calc(100vh - var(--hdr-h, 59px)), 380px);
  height: max(calc(100dvh - var(--hdr-h, 59px)), 380px);
  background: radial-gradient(ellipse at 50% 0%, #17406a 0%, var(--tinta) 62%);
}
.gm-banner {
  flex: none; display: flex; align-items: center; gap: 12px; padding: 5px 16px; background: #3b2a08; border-bottom: 2px solid #8f6a14; color: #ffe6a8; font-size: 0.88rem;
  flex-wrap: wrap;                 /* en pantallas estrechas el botón baja bajo el texto en vez de montarse encima */
}
.gm-banner svg { color: var(--oro); flex: none; }
.gm-banner p { margin: 0; flex: 1 1 260px; min-width: 0; line-height: 1.3; overflow-wrap: anywhere; }
@media (max-width: 640px) { .gm-banner { padding: 6px 10px; gap: 8px; font-size: 0.84rem; } .gm-banner__x { margin-left: auto; } }
@media (max-width: 520px) { .gm-banner #email-banner-detail { display: none; } }   /* en el móvil solo «Confirma tu correo» + el botón: el detalle ocupaba tres líneas del poco alto que hay */
.gm-banner p b { color: #fff; }
.gm-banner .se-btn-sm { min-height: 30px; padding: 0 12px; }
.gm-banner__x { border: 0; background: transparent; color: #e9cf8c; width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; }
.gm-banner__x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }

.gm-body { flex: 1 1 0; min-height: 0; width: 100%; max-width: 1760px; margin: 0 auto; padding: 8px 16px 10px; display: flex; gap: 16px; align-items: stretch; justify-content: center; }
.gm-main {
  --gm-m: 8px;                 /* margen para el marco de madera del escenario (sombra de 8 px) */
  --gm-gap: 10px;
  --gm-bar: 40px;              /* alto de la barra de debajo (una sola fila) */
  /* respaldo para navegadores sin unidades de contenedor: el alto de la ventana menos cabecera y el resto de marcos */
  --stage-w: min(100%, calc((100dvh - var(--hdr-h, 59px) - 100px) * 760 / 600));
  flex: 1 1 0; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; gap: var(--gm-gap);
}
@supports (width: 1cqw) {
  .gm-main {
    container: gm / size;
    --stage-w: min(100cqw - 2 * var(--gm-m), (100cqh - var(--gm-m) - var(--gm-gap) - var(--gm-bar) - 4px) * 760 / 600);
  }
}
.gm-stage {
  position: relative; width: var(--stage-w); aspect-ratio: 760 / 600; flex: none; background: #669c2c; border-radius: 6px; overflow: hidden;
  box-shadow: 0 0 0 6px var(--madera), 0 0 0 8px #2a1709, inset 0 0 0 1px rgba(0, 0, 0, 0.3), 0 18px 36px rgba(0, 0, 0, 0.5);
  margin: var(--gm-m) var(--gm-m) 0;
}
#ruffle-player-target { position: absolute; inset: 0; }
/* Barra de debajo: SIEMPRE una sola fila de alto fijo; cuando el escenario es estrecho los botones pasan a solo icono (el texto sigue en title y para lectores) */
.gm-bar { flex: none; width: var(--stage-w); height: var(--gm-bar); display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; container: gmbar / inline-size; }
.gm-bar__status { margin: 0; flex: 1 1 0; min-width: 0; font-size: 0.84rem; color: var(--apagado); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gm-bar__btn {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 36px; padding: 0 12px; border-radius: 9px; border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.05); color: var(--claro); font-size: 0.84rem; font-weight: 700; white-space: nowrap;
}
.gm-bar__btn:hover { background: rgba(255, 255, 255, 0.13); }
.gm-bar__btn svg { width: 16px; height: 16px; flex: none; }
.gm-event { flex: 0 1 auto; min-width: 0; max-width: 46%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 12px; border-radius: 99px; border: 1px solid #8f6a14; background: rgba(255, 194, 26, 0.12); color: var(--oro-claro); font-size: 0.8rem; font-weight: 700; }
@container gmbar (max-width: 46rem) {
  .gm-bar__btn span { display: none; }
  .gm-bar__btn { width: 38px; padding: 0; }
}
@media (pointer: coarse) { .gm-main { --gm-bar: 44px; } }

/* ---------- Pantalla de carga (misma imagen que el juego: cielo con rayos, el mundo, el logotipo) ---------- */
.ld { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; overflow: hidden; background: linear-gradient(180deg, #a9d8f0, #e4f5fc); transition: opacity 0.55s ease; }
.ld.is-done { opacity: 0; pointer-events: none; }
.ld__sun {
  position: absolute; inset: -30%; background: repeating-conic-gradient(from 0deg at 50% 45%, rgba(255, 255, 255, 0.7) 0 6deg, rgba(255, 255, 255, 0) 6deg 12deg);
  -webkit-mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 62%); mask-image: radial-gradient(circle at 50% 45%, #000 0, transparent 62%);
}
.ld__in { position: relative; display: flex; flex-direction: column; align-items: center; width: min(88%, 440px); text-align: center; }
.ld__globe { width: min(44%, 190px); height: auto; filter: drop-shadow(0 10px 10px rgba(11, 42, 70, 0.25)); }
.ld__logo { width: min(60%, 240px); height: auto; margin-top: -52px; position: relative; filter: drop-shadow(0 4px 4px rgba(0, 0, 0, 0.3)); }
.ld__bar {
  width: 100%; height: 26px; margin-top: 14px; padding: 2px; border-radius: 14px; background: #2a1a0b; border: 3px solid #5b3a1a;
  box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), 0 2px 0 rgba(255, 255, 255, 0.45);
}
.ld__bar i { display: block; height: 100%; width: 0; border-radius: 10px; background: linear-gradient(180deg, #fff2a8, #ffc21a 48%, #e08e00); box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.75); transition: width 0.25s ease; }
.ld__pct { margin: 6px 0 0; font: 700 1.05rem/1 var(--f-num); color: var(--tinta-2); font-variant-numeric: tabular-nums; }
.ld__status { margin: 6px 0 0; min-height: 1.4em; font-weight: 800; color: var(--tinta-2); font-size: 0.95rem; }
.ld__tip { margin: 8px 0 0; min-height: 2.8em; font-size: 0.82rem; color: #355673; max-width: 32em; }
.ld__error { margin-top: 10px; padding: 12px 14px; border-radius: 10px; background: #fff; border: 2px solid var(--rojo); color: #4a0e0b; font-size: 0.9rem; }
.ld__error p { margin: 0 0 10px; }

/* ---------- Sesión terminada: el juego queda pausado debajo ---------- */
.so { position: absolute; inset: 0; z-index: 9; display: grid; place-items: center; padding: 16px; background: rgba(7, 20, 36, 0.8); }
.so__card { width: min(100%, 400px); padding: 22px 24px 24px; border-radius: 16px; background: linear-gradient(180deg, var(--tinta-2), var(--tinta)); border: 3px solid var(--madera-clara); box-shadow: 0 8px 0 var(--madera), var(--sombra); text-align: left; }
.so__title { margin: 0 0 8px; font: 700 1.5rem/1.1 var(--f-display); color: var(--oro); }
.so__card p { margin: 0 0 18px; color: var(--claro); font-size: 0.95rem; }

/* ---------- Chat acoplado ---------- */
.cd {
  flex: 0 0 340px; width: 340px; contain: size; display: flex; flex-direction: column; min-height: 0; position: relative;
  background: linear-gradient(180deg, #123456, #0e2740); border: 3px solid var(--madera-clara); border-radius: 12px; overflow: hidden; margin-top: 8px;
  box-shadow: 0 0 0 2px #2a1709, 0 18px 36px rgba(0, 0, 0, 0.5);
}
.cd[hidden] { display: none; }
.cd-head { display: flex; align-items: center; gap: 10px; padding: 9px 12px; background: linear-gradient(180deg, #1b4670, #15395c); border-bottom: 2px solid var(--madera-clara); flex: none; }
.cd-title { margin: 0; font: 700 1.08rem/1 var(--f-display); color: var(--oro); letter-spacing: 0.01em; }
.cd-online { margin-right: auto; font-size: 0.76rem; color: #b9cde2; }
.cd-state { display: inline-flex; align-items: center; gap: 6px; font-size: 0.72rem; font-weight: 700; color: var(--apagado); }
.cd-state::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #7c8da0; }
.cd-state[data-state="open"]::before { background: var(--ok); box-shadow: 0 0 0 3px rgba(88, 180, 58, 0.25); }
.cd-state[data-state="connecting"]::before { background: var(--aviso); }
.cd-state[data-state="polling"]::before { background: var(--aviso); }
.cd-state[data-state="closed"]::before { background: var(--error); }
.cd-x { width: 30px; height: 30px; border: 0; border-radius: 8px; background: transparent; color: var(--apagado); display: none; place-items: center; }
.cd-x:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.cd-x svg { width: 16px; height: 16px; }
.cd-list { flex: 1 1 0; min-height: 0; overflow-y: auto; padding: 10px 12px 6px; display: flex; flex-direction: column; gap: 2px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: #3a6188 transparent; }
.cd-empty { margin: auto; text-align: center; color: var(--apagado); font-size: 0.9rem; padding: 0 12px; }
.cd-msg { padding: 6px 8px 7px; border-radius: 8px; border-left: 3px solid transparent; }
.cd-msg:hover { background: rgba(255, 255, 255, 0.05); }
.cd-msg--cont { padding-top: 0; margin-top: -2px; }
.cd-msg--me { border-left-color: var(--oro); background: rgba(255, 194, 26, 0.07); }
.cd-msg__who { display: flex; align-items: baseline; gap: 8px; }
.cd-msg__name { font-weight: 800; font-size: 0.86rem; color: var(--c, #9fd0f4); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60%; }
.cd-msg__tag { padding: 0 6px; border-radius: 4px; font-size: 0.62rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; background: var(--oro); color: #3b2300; }
.cd-msg__time { margin-left: auto; font-size: 0.7rem; color: #7d93aa; font-variant-numeric: tabular-nums; }
.cd-msg__text { margin: 1px 0 0; font-size: 0.93rem; line-height: 1.42; color: var(--claro); overflow-wrap: anywhere; white-space: pre-wrap; }
.cd-sys { align-self: center; margin: 6px 0; padding: 2px 10px; border-radius: 99px; background: rgba(255, 255, 255, 0.06); color: var(--apagado); font-size: 0.74rem; }
.cd-jump {
  position: absolute; left: 50%; bottom: 112px; transform: translateX(-50%); z-index: 3; display: inline-flex; align-items: center; gap: 6px; min-height: 30px; padding: 0 12px;
  border-radius: 99px; border: 2px solid var(--oro-borde); background: var(--oro); color: #3b2300; font-size: 0.78rem; font-weight: 800; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.35);
}
.cd-typing { margin: 0; padding: 0 14px; min-height: 18px; font-size: 0.74rem; color: var(--apagado); font-style: italic; flex: none; }
.cd-form { display: flex; gap: 8px; padding: 8px 10px 6px; border-top: 1px solid var(--linea); flex: none; }
.cd-form input {
  flex: 1; min-width: 0; min-height: 42px; padding: 0 12px; border-radius: 10px; border: 2px solid rgba(255, 255, 255, 0.2); background: #06121f; color: var(--claro); font: inherit; font-size: 0.95rem;
}
.cd-form input:focus { border-color: var(--oro); outline: none; box-shadow: 0 0 0 3px rgba(255, 194, 26, 0.22); }
.cd-send { width: 44px; min-height: 42px; border-radius: 10px; border: 2px solid var(--oro-borde); background: var(--oro); color: #3b2300; display: grid; place-items: center; box-shadow: 0 3px 0 var(--oro-borde); }
.cd-send:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--oro-borde); }
.cd-send:disabled { opacity: 0.5; }
.cd-send svg { width: 20px; height: 20px; }
.cd-hint { margin: 0; padding: 0 12px 9px; font-size: 0.7rem; color: #6f87a0; flex: none; }

/* Escritorio estrecho y móvil: el chat pasa a cajón lateral sobre el juego */
@media (max-width: 1179px) {
  .cd { position: fixed; z-index: 55; right: 0; top: var(--hdr-h, 60px); bottom: 0; width: min(380px, 100%); flex: none; margin: 0; border-radius: 12px 0 0 12px; contain: none; box-shadow: -10px 0 30px rgba(0, 0, 0, 0.5); }
  .cd-x { display: grid; }
}
@media (max-width: 760px) {
  .gm-body { padding: 6px 6px 8px; }
  .gm-main { --gm-m: 4px; --stage-w: 100%; }
  @supports (width: 1cqw) { .gm-main { --stage-w: min(100cqw - 2 * var(--gm-m), (100cqh - var(--gm-m) - var(--gm-gap) - var(--gm-bar) - 4px) * 760 / 600); } }
  .gm-stage { box-shadow: 0 0 0 4px var(--madera), 0 0 0 5px #2a1709; }
  .cd { width: 100%; border-radius: 0; }
}

/* ---------- Diálogo genérico ---------- */
.dlg { padding: 0; border: 3px solid var(--madera-clara); border-radius: 16px; background: linear-gradient(180deg, var(--tinta-2), var(--tinta)); color: var(--claro); width: min(440px, calc(100% - 32px)); box-shadow: 0 8px 0 var(--madera), var(--sombra); }
.dlg::backdrop { background: rgba(4, 12, 22, 0.7); }
.dlg__in { padding: 22px 24px 20px; }
.dlg__title { margin: 0 0 8px; font: 700 1.35rem/1.1 var(--f-display); color: var(--oro); }
.dlg__text { margin: 0 0 18px; color: var(--claro); font-size: 0.95rem; line-height: 1.5; }
.dlg__actions { display: flex; justify-content: flex-end; gap: 10px; }