/**
 * Proyecto: MiniJuegoTech
 * Módulo: PlayerTech
 * Versión: 2.1.0
 * Archivo: assets/css/layout.css
 * Finalidad: Estructura fluida de cabecera, pantallas y sala de espera.
 */

.app-shell { min-height: 100dvh; }
.app-header {
    position: sticky;
    top: 0;
    z-index: 50;
    min-height: var(--header-height);
    padding: max(.65rem, env(safe-area-inset-top)) max(1rem, env(safe-area-inset-right)) .65rem max(1rem, env(safe-area-inset-left));
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    border-bottom: 1px solid var(--line);
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(18px);
}
.app-header__identity,
.app-header__status { display: flex; align-items: center; gap: .75rem; }
.app-header__identity > div { display: grid; gap: .08rem; }
.app-header__identity strong { letter-spacing: .02em; }
.app-header__identity small { color: var(--muted); }
.app-header__mark {
    width: 2.4rem;
    aspect-ratio: 1;
    display: grid;
    place-items: center;
    border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent);
    border-radius: 50%;
    font-family: var(--font-display);
    font-weight: 900;
    color: var(--accent);
    background: var(--accent-soft);
}
.app-header__version { color: var(--muted); font-size: .78rem; }

.app-main {
    width: min(var(--content), 100%);
    margin-inline: auto;
    padding: clamp(1rem, 2.5vw, 2.4rem);
    padding-bottom: max(2rem, env(safe-area-inset-bottom));
}
.screen { animation: screen-in .32s ease both; }
.screen-grid {
    min-height: calc(100dvh - var(--header-height) - clamp(2rem, 5vw, 5rem));
    display: grid;
    align-items: center;
    gap: clamp(1.25rem, 4vw, 4rem);
}
.screen-grid--intro,
.screen-grid--profile { grid-template-columns: minmax(0, 1.08fr) minmax(20rem, .92fr); }
.intro-panel,
.context-card { padding: clamp(.5rem, 2vw, 1.5rem); }
.intro-panel h1,
.context-card h1,
.lobby-hero h1 {
    margin-bottom: 1rem;
    max-width: 14ch;
    font-size: clamp(2.6rem, 7vw, 5.9rem);
    line-height: .95;
    letter-spacing: -.045em;
}
.route-preview {
    margin-top: 2.4rem;
    max-width: 26rem;
    display: grid;
    grid-template-columns: auto 1fr auto 1fr auto;
    align-items: center;
}
.route-preview__point {
    width: .95rem;
    aspect-ratio: 1;
    border: .15rem solid var(--accent);
    border-radius: 50%;
    background: var(--bg);
}
.route-preview__point.is-active { box-shadow: 0 0 0 .45rem var(--accent-soft); }
.route-preview__line { height: .12rem; background: linear-gradient(90deg, var(--accent), transparent); }

.lobby-layout {
    min-height: calc(100dvh - var(--header-height) - clamp(2rem, 5vw, 5rem));
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(20rem, .82fr);
    align-items: center;
    gap: clamp(1.25rem, 3.5vw, 3.25rem);
}
.lobby-hero { display: grid; gap: 2rem; }
.lobby-panel { max-height: min(44rem, calc(100dvh - 7rem)); display: flex; flex-direction: column; }
.lobby-panel__top,
.lobby-panel__footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
.lobby-panel__top { padding-bottom: 1rem; border-bottom: 1px solid var(--line); }
.lobby-panel__top h2 { margin: 0; font-size: clamp(1.4rem, 3vw, 2rem); }
.lobby-panel__footer { padding-top: 1rem; border-top: 1px solid var(--line); }

@keyframes screen-in {
    from { opacity: 0; transform: translateY(.75rem); }
    to { opacity: 1; transform: none; }
}

/* Navegación interactiva V2: las vistas cambian sin recargar el documento. */
.screen { transform-origin: center top; }
.screen--leaving { opacity: 0; transform: translateY(-.35rem) scale(.995); transition: opacity var(--transition-screen) ease, transform var(--transition-screen) ease; }
.screen--arriving { animation: screen-arrive var(--transition-screen) ease both; }

.screen-curtain {
    position: fixed;
    inset: 0;
    z-index: 85;
    pointer-events: none;
    background: color-mix(in srgb, var(--bg) 88%, transparent);
    backdrop-filter: blur(.2rem);
    opacity: 0;
}
.screen-curtain__line {
    position: absolute;
    inset: 0 auto 0 0;
    width: .22rem;
    background: var(--accent);
    box-shadow: 0 0 2rem var(--accent);
}
.screen-curtain.is-entering { animation: curtain-in var(--transition-screen) ease both; }
.screen-curtain.is-leaving { animation: curtain-out var(--transition-screen) ease both; }

.connection-banner {
    position: fixed;
    z-index: 95;
    top: max(.65rem, env(safe-area-inset-top));
    left: 50%;
    width: min(38rem, calc(100% - 1.5rem));
    min-height: 3.4rem;
    padding: .72rem .85rem;
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: .75rem;
    transform: translateX(-50%);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    color: var(--text);
    background: color-mix(in srgb, var(--panel-solid) 94%, transparent);
    box-shadow: var(--shadow);
    backdrop-filter: blur(1rem);
}
.connection-banner > div { display: grid; gap: .12rem; min-width: 0; }
.connection-banner small { overflow: hidden; color: var(--muted); text-overflow: ellipsis; white-space: nowrap; }
.connection-banner__pulse { width: .72rem; aspect-ratio: 1; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--success) 18%, transparent); }
.connection-banner[data-state="offline"] .connection-banner__pulse,
.connection-banner[data-state="unstable"] .connection-banner__pulse { background: var(--danger); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--danger) 18%, transparent); }
.connection-banner[data-state="retrying"] .connection-banner__pulse,
.connection-banner[data-state="syncing"] .connection-banner__pulse { background: var(--accent); animation: connection-pulse 1s ease-in-out infinite; }
.connection-banner__action { padding: .55rem .75rem; border: 1px solid var(--line); border-radius: .65rem; color: var(--text); background: var(--accent-soft); cursor: pointer; }

@keyframes screen-arrive {
    from { opacity: 0; transform: translateY(.55rem) scale(.995); }
    to { opacity: 1; transform: none; }
}
@keyframes curtain-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes curtain-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes connection-pulse { 50% { transform: scale(.72); opacity: .55; } }