/* ══════════ AGUACATE SURVIVOR ══════════ */
:root {
    --bg: #060a14;
    --panel: rgb(13, 20, 38);
    --borde: rgba(255, 255, 255, 0.1);
    --oro: #eab308;
    --oro-claro: #fde047;
    --verde: #34d399;
    --lima: #a3e635;
    --cian: #22d3ee;
    --rojo: #f87171;
    --texto: #f8fafc;
    --suave: #94a3b8;
}
* { box-sizing: border-box; margin: 0; padding: 0; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
body {
    background: radial-gradient(ellipse at top, #0f2a22 0%, var(--bg) 60%) fixed;
    color: var(--texto);
    font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    overflow: hidden;
    overscroll-behavior: none;
    user-select: none; -webkit-user-select: none;
}
a { color: var(--oro-claro); }
[hidden] { display: none !important; }

.pantalla {
    position: fixed; inset: 0;
    display: flex; flex-direction: column; align-items: center;
    padding: calc(12px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
    overflow-y: auto;
    gap: 14px;
}
.pantalla > * { width: 100%; max-width: 560px; }

/* ── Cabecera de las pantallas ── */
.cabecera { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; }
.cabecera h2 { font-size: 1rem; letter-spacing: 2px; color: var(--oro-claro); text-align: center; }
.cabecera .oro-chip { justify-self: end; }
.volver {
    justify-self: start; background: none; border: none; color: var(--suave); font: inherit; font-weight: 700;
    font-size: 0.85rem; text-decoration: none; cursor: pointer; padding: 6px 0;
}
.oro-chip {
    background: rgba(234, 179, 8, 0.12); border: 1px solid rgba(234, 179, 8, 0.4); border-radius: 999px;
    padding: 5px 12px; font-weight: 800; font-size: 0.9rem; color: var(--oro-claro); white-space: nowrap;
}

/* ── Botones ── */
.btn {
    display: block; width: 100%; padding: 14px 18px; border-radius: 14px; cursor: pointer;
    font: inherit; font-weight: 900; font-size: 1rem; letter-spacing: 1px; color: var(--texto);
    background: linear-gradient(180deg, #1e293b, #111827); border: 1px solid var(--borde);
    box-shadow: 0 4px 0 rgba(0, 0, 0, 0.45);
    transition: transform 0.08s ease, filter 0.15s ease;
}
.btn:active { transform: translateY(2px); box-shadow: 0 2px 0 rgba(0, 0, 0, 0.45); }
.btn:hover { filter: brightness(1.12); }
.btn:disabled { opacity: 0.45; cursor: default; filter: none; }
.btn small { font-weight: 700; color: var(--suave); margin-left: 6px; }
.btn-oro { background: linear-gradient(180deg, #fde047, #eab308); color: #1c1402; border-color: #fde68a; box-shadow: 0 4px 0 #854d0e; }
.btn-suave { background: transparent; box-shadow: none; font-weight: 700; color: var(--suave); }
.btn-peligro { background: transparent; box-shadow: none; color: var(--rojo); border-color: rgba(248, 113, 113, 0.4); font-weight: 700; }
.btn-grande { font-size: 1.2rem; padding: 18px; }
.fila-botones { display: flex; gap: 10px; }
.fila-botones .btn { flex: 1; }

/* ── Menú ── */
.logo { text-align: center; margin-top: 4px; }
.logo-rey { width: 170px; height: 170px; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, 0.6)); animation: flotar 3s ease-in-out infinite; }
@keyframes flotar { 50% { transform: translateY(-8px); } }
.logo h1 { font-size: 2.3rem; line-height: 0.95; font-weight: 900; letter-spacing: 3px; color: var(--lima); text-shadow: 0 3px 0 #14532d, 0 0 26px rgba(163, 230, 53, 0.35); }
.logo h1 span { display: block; font-size: 1.5rem; letter-spacing: 9px; color: var(--oro-claro); text-shadow: 0 2px 0 #713f12; margin-top: 4px; }
.lema { color: var(--suave); margin-top: 10px; font-size: 0.92rem; line-height: 1.4; }
.lema b { color: var(--texto); }
.botones-menu { display: grid; gap: 10px; }
.pie { color: var(--suave); font-size: 0.75rem; text-align: center; margin-top: auto; }
.aviso-cuenta {
    background: rgba(34, 211, 238, 0.08); border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 12px;
    padding: 10px 14px; font-size: 0.82rem; line-height: 1.4; color: #cffafe; text-align: center;
}

/* ── Personajes ── */
.rejilla-personajes { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.personaje {
    position: relative; background: var(--panel); border: 2px solid var(--borde); border-radius: 14px;
    padding: 6px 4px 6px; cursor: pointer; text-align: center; color: inherit; font: inherit;
}
.personaje img { width: 100%; aspect-ratio: 1; object-fit: contain; display: block; }
.personaje span { display: block; font-size: 0.68rem; font-weight: 800; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.personaje.elegido { border-color: var(--oro-claro); box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.25); }
.personaje.bloqueado img { filter: brightness(0) opacity(0.55); }
.personaje.bloqueado span { color: var(--suave); }
.personaje .candado { position: absolute; top: 4px; right: 6px; font-size: 0.8rem; }
.detalle-personaje {
    display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--borde);
    border-radius: 16px; padding: 12px;
}
.detalle-personaje img { width: 92px; height: 92px; flex-shrink: 0; }
.detalle-personaje h3 { color: var(--oro-claro); font-size: 1.05rem; }
.detalle-personaje p { color: var(--suave); font-size: 0.82rem; margin-top: 3px; line-height: 1.35; }
.detalle-personaje .arma-inicial { color: var(--texto); font-weight: 700; margin-top: 6px; }
.detalle-personaje.bloqueado img { filter: brightness(0) opacity(0.55); }
.modos { display: flex; gap: 8px; }
.modo {
    flex: 1; background: var(--panel); border: 2px solid var(--borde); border-radius: 12px; padding: 9px 8px;
    color: inherit; font: inherit; cursor: pointer; text-align: center;
}
.modo b { display: block; font-size: 0.9rem; }
.modo small { color: var(--suave); font-size: 0.7rem; }
.modo.elegido { border-color: var(--lima); }
.modo:disabled { opacity: 0.5; cursor: default; }
.mapas { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mapa {
    display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 8px 6px; border-radius: 12px; cursor: pointer;
    border: 2px solid var(--borde); color: inherit; font: inherit; text-align: center;
    background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(0,0,0,0.2)), var(--panel);
}
.mapa .ico { font-size: 1.4rem; line-height: 1; }
.mapa b { font-size: 0.78rem; }
.mapa small { color: var(--suave); font-size: 0.62rem; line-height: 1.25; }
.mapa-tapete { background-color: #0b3d2e; }
.mapa-bodega { background-color: #3a2216; }
.mapa-huerta { background-color: #101b33; }
.mapa.elegido { border-color: var(--oro-claro); box-shadow: 0 0 0 3px rgba(253, 224, 71, 0.2); }
.mapa:disabled { opacity: 0.5; cursor: default; }
.fin-consejo { color: var(--oro-claro); font-size: 0.8rem; font-weight: 700; }

/* ── Mejoras ── */
.explica { color: var(--suave); font-size: 0.82rem; text-align: center; }
.rejilla-mejoras { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.mejora { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 10px; display: flex; flex-direction: column; gap: 6px; }
.mejora-cab { display: flex; align-items: center; gap: 8px; }
.mejora-cab .ico { font-size: 1.5rem; }
.mejora-cab b { font-size: 0.88rem; }
.mejora p { color: var(--suave); font-size: 0.72rem; line-height: 1.3; flex: 1; }
.rangos { display: flex; gap: 3px; }
.rangos i { flex: 1; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, 0.12); }
.rangos i.lleno { background: var(--lima); }
.mejora .btn { padding: 8px; font-size: 0.85rem; box-shadow: 0 3px 0 #854d0e; }
.mejora.max .btn { background: transparent; color: var(--lima); border-color: rgba(163, 230, 53, 0.4); box-shadow: none; }

/* ── Logros ── */
.lista-logros, .lista-records { display: grid; gap: 8px; }
.logro { display: flex; gap: 12px; align-items: center; background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 10px 12px; }
.logro .ico { font-size: 1.5rem; width: 34px; text-align: center; }
.logro b { font-size: 0.9rem; }
.logro p { color: var(--suave); font-size: 0.76rem; line-height: 1.3; }
.logro .premio { color: var(--oro-claro); font-weight: 700; }
.logro.hecho { border-color: rgba(163, 230, 53, 0.45); }
.logro:not(.hecho) { opacity: 0.75; }

/* ── Récords ── */
.mis-records { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mis-records div { background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 8px; text-align: center; }
.mis-records b { display: block; font-size: 1.1rem; color: var(--oro-claro); }
.mis-records small { color: var(--suave); font-size: 0.7rem; }
.record { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--borde); border-radius: 12px; padding: 8px 10px; }
.record.yo { border-color: rgba(34, 211, 238, 0.5); }
.record .pos { width: 26px; text-align: center; font-weight: 900; color: var(--suave); }
.record .ava { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; }
.record .pj { width: 34px; height: 34px; }
.record .quien { flex: 1; min-width: 0; }
.record .quien b { display: block; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.record .quien small { color: var(--suave); font-size: 0.72rem; }
.record .tiempo { font-weight: 900; color: var(--oro-claro); font-variant-numeric: tabular-nums; }
.vacio { color: var(--suave); text-align: center; padding: 20px; font-size: 0.9rem; }

.como { list-style: none; display: grid; gap: 10px; }
.como li { background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 12px 14px; font-size: 0.88rem; line-height: 1.45; color: #cbd5e1; }
.como b { color: var(--texto); }

/* ══════════ PARTIDA ══════════ */
.pantalla-juego { padding: 0; overflow: hidden; background: #022c22; }
.pantalla-juego > * { max-width: none; }
#lienzo { position: absolute; inset: 0; width: 100%; height: 100%; touch-action: none; display: block; }
.hud { position: absolute; inset: 0; pointer-events: none; padding-top: env(safe-area-inset-top); }
.hud-xp { position: relative; height: 16px; background: rgba(0, 0, 0, 0.55); border-bottom: 1px solid rgba(255, 255, 255, 0.15); }
#hud-xp-barra { position: absolute; inset: 0 auto 0 0; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #22d3ee, #a3e635); }
#hud-nivel { position: absolute; right: 8px; top: 0; font-size: 0.72rem; font-weight: 900; line-height: 16px; text-shadow: 0 1px 2px #000; }
.hud-fila { display: grid; grid-template-columns: 1fr auto 1fr; align-items: start; padding: 6px 8px 0; gap: 6px; }
.hud-tiempo { font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; text-shadow: 0 2px 4px #000; letter-spacing: 1px; }
.hud-derecha { justify-self: end; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-weight: 800; font-size: 0.85rem; text-shadow: 0 1px 3px #000; }
.b-pausa {
    pointer-events: auto; width: 40px; height: 40px; border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.25);
    background: rgba(0, 0, 0, 0.45); color: #fff; font-size: 1.1rem; cursor: pointer;
}
.hud-ranuras { display: flex; flex-direction: column; gap: 3px; }
.ranuras { display: flex; gap: 3px; flex-wrap: nowrap; }
.ranura {
    position: relative; width: 24px; height: 24px; border-radius: 7px; background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.18); display: grid; place-items: center; font-size: 0.85rem;
}
.ranura.evo { border-color: var(--oro-claro); box-shadow: 0 0 6px rgba(253, 224, 71, 0.6); }
.ranura i { position: absolute; bottom: -3px; right: -3px; font-style: normal; font-size: 0.55rem; font-weight: 900; background: #0f172a; border-radius: 5px; padding: 0 3px; line-height: 1.3; }
.hud-jefe { position: absolute; top: calc(env(safe-area-inset-top) + 88px); left: 50%; transform: translateX(-50%); width: min(70vw, 420px); text-align: center; }
.hud-jefe span { font-size: 0.72rem; font-weight: 900; letter-spacing: 1px; color: #fecaca; text-shadow: 0 1px 3px #000; }
.hud-jefe .barra { height: 9px; background: rgba(0, 0, 0, 0.6); border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 5px; overflow: hidden; margin-top: 2px; }
#hud-jefe-vida { height: 100%; background: linear-gradient(90deg, #dc2626, #f97316); transform-origin: left; }
.hud-aviso { position: absolute; top: 34%; left: 0; right: 0; text-align: center; animation: avisoEntra 2.6s ease forwards; }
.hud-aviso b { display: block; font-size: 1.6rem; font-weight: 900; letter-spacing: 1px; color: var(--oro-claro); text-shadow: 0 3px 0 #713f12, 0 0 20px rgba(0, 0, 0, 0.8); }
.hud-aviso small { display: block; font-weight: 800; color: #fff; text-shadow: 0 1px 4px #000; margin-top: 4px; }
@keyframes avisoEntra { 0% { opacity: 0; transform: scale(0.7); } 12% { opacity: 1; transform: scale(1.06); } 20% { transform: scale(1); } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ── Ventanas de la partida ── */
.modal { position: absolute; inset: 0; background: rgba(2, 6, 23, 0.72); display: flex; align-items: center; justify-content: center; padding: 16px; z-index: 20; }
.panel {
    width: 100%; max-width: 440px; max-height: 94dvh; overflow-y: auto;
    background: var(--panel); border: 1px solid var(--borde); border-top: 2px solid var(--oro); border-radius: 20px;
    padding: 18px; display: flex; flex-direction: column; gap: 10px; text-align: center;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.7);
    animation: panelEntra 0.25s cubic-bezier(0.2, 1.2, 0.4, 1);
}
@keyframes panelEntra { from { opacity: 0; transform: scale(0.92); } }
.panel h2 { color: var(--oro-claro); letter-spacing: 2px; font-size: 1.3rem; }
.panel .sub { color: var(--suave); font-size: 0.82rem; margin-top: -6px; }
.opciones-nivel { display: grid; gap: 8px; }
.opcion {
    display: flex; gap: 12px; align-items: center; text-align: left; padding: 10px 12px; border-radius: 14px; cursor: pointer;
    background: linear-gradient(180deg, #1e293b, #0f172a); border: 2px solid var(--borde); color: inherit; font: inherit;
}
.opcion:hover, .opcion:focus-visible { border-color: var(--oro-claro); outline: none; }
.opcion .ico { font-size: 1.9rem; width: 42px; text-align: center; flex-shrink: 0; }
.opcion b { font-size: 0.95rem; }
.opcion .etq { font-size: 0.65rem; font-weight: 900; padding: 1px 6px; border-radius: 6px; margin-left: 6px; vertical-align: middle; }
.opcion .etq.nuevo { background: var(--lima); color: #1a2e05; }
.opcion .etq.nv { background: rgba(255, 255, 255, 0.12); color: var(--texto); }
.opcion p { color: #cbd5e1; font-size: 0.78rem; margin-top: 2px; line-height: 1.3; }
.opcion .evo { color: var(--oro-claro); font-size: 0.68rem; margin-top: 3px; }
.cofre-icono { font-size: 3.4rem; animation: cofreSalta 0.6s ease; }
@keyframes cofreSalta { 30% { transform: scale(1.3) rotate(-8deg); } 60% { transform: scale(0.95) rotate(5deg); } }
.evolucion { background: radial-gradient(circle, rgba(253, 224, 71, 0.18), transparent 70%); border-radius: 16px; padding: 12px; }
.evolucion .ico { font-size: 3rem; }
.evolucion b { display: block; color: var(--oro-claro); font-size: 1.15rem; }
.evolucion p { color: #e2e8f0; font-size: 0.85rem; }
.lista-cofre { display: grid; gap: 6px; text-align: left; }
.lista-cofre div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 7px 10px; font-size: 0.85rem; }
.inventario { display: grid; gap: 4px; text-align: left; font-size: 0.82rem; }
.inventario div { display: flex; justify-content: space-between; gap: 8px; background: rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 6px 10px; }
.inventario .evo-txt { color: var(--oro-claro); }
.fin-icono { font-size: 3.2rem; }
.fin-datos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.fin-datos div { background: rgba(255, 255, 255, 0.05); border-radius: 10px; padding: 8px; }
.fin-datos b { display: block; font-size: 1.15rem; color: var(--oro-claro); }
.fin-datos small { color: var(--suave); font-size: 0.72rem; }
.fin-logros { background: rgba(163, 230, 53, 0.1); border: 1px solid rgba(163, 230, 53, 0.45); border-radius: 12px; padding: 10px; font-size: 0.85rem; line-height: 1.45; }
.fin-logros b { color: var(--lima); }
.fin-armas { display: grid; gap: 4px; font-size: 0.8rem; text-align: left; }
.fin-armas div { display: flex; justify-content: space-between; background: rgba(255, 255, 255, 0.04); border-radius: 8px; padding: 5px 10px; }
.fin-guardado { color: var(--suave); font-size: 0.78rem; min-height: 1em; }

.cargando { position: fixed; inset: 0; display: grid; place-items: center; background: rgba(2, 6, 23, 0.85); font-weight: 800; z-index: 50; }

@media (min-width: 700px) {
    .ranura { width: 30px; height: 30px; font-size: 1rem; }
    .hud-tiempo { font-size: 1.8rem; }
}
/* ── Botones nuevos de las ventanas ── */
.b-cambiar { padding: 9px 12px; font-size: 0.85rem; }
.b-cambiar b { color: var(--oro-claro); }
.ajustes-pausa { flex-wrap: wrap; }
.ajustes-pausa .btn { flex: 1 1 120px; padding: 10px 8px; font-size: 0.85rem; }
.controles { color: var(--suave); font-size: 0.72rem; line-height: 1.45; }

/* ── Música ── */
.chip-musica {
    justify-self: center; display: inline-flex; align-items: center; gap: 7px; max-width: 46vw;
    background: rgba(34, 211, 238, 0.1); border: 1px solid rgba(34, 211, 238, 0.4); border-radius: 999px;
    padding: 5px 12px; font: inherit; font-weight: 800; font-size: 0.8rem; color: #a5f3fc; cursor: pointer;
}
.chip-musica #musica-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip-musica .eq { display: none; }
.chip-musica.sonando .eq { display: inline-flex; }
.eq { display: inline-flex; align-items: flex-end; gap: 2px; height: 12px; flex: none; }
.eq i { width: 3px; height: 30%; background: currentColor; border-radius: 1px; }
.sonando .eq i { animation: eq 0.9s ease-in-out infinite; }
.sonando .eq i:nth-child(2) { animation-delay: -0.3s; }
.sonando .eq i:nth-child(3) { animation-delay: -0.6s; }
@keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
.lista-musica { display: grid; gap: 8px; }
.cancion {
    display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
    background: var(--panel); border: 1px solid var(--borde); border-radius: 14px; padding: 10px 12px;
    font: inherit; color: var(--texto);
}
.cancion .ico { font-size: 1.5rem; width: 34px; text-align: center; flex: none; }
.cancion div { flex: 1; min-width: 0; }
.cancion b { display: block; font-size: 0.92rem; }
.cancion small { color: var(--suave); font-size: 0.74rem; }
.cancion .eq { color: var(--cian); opacity: 0; }
.cancion.sonando .eq { opacity: 1; }
.cancion.elegida { border-color: var(--cian); box-shadow: 0 0 0 3px rgba(34, 211, 238, 0.18); }
.volumen { display: flex; align-items: center; gap: 12px; font-weight: 800; color: var(--suave); }
.volumen input { flex: 1; accent-color: var(--cian); }

/* ══════════ MÓVIL EN HORIZONTAL ══════════ */
@media (orientation: landscape) and (max-height: 540px) {
    .pantalla {
        padding: calc(8px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
        gap: 10px;
    }
    .pantalla > * { max-width: 880px; }

    /* menú: el rey a la izquierda, los botones a la derecha */
    #menu {
        display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
        grid-template-areas: "cab cab" "logo botones" "aviso botones" "pie pie";
        grid-template-rows: auto 1fr auto auto;
        column-gap: 28px; row-gap: 6px; align-content: center; justify-content: center;
    }
    #menu > * { max-width: 420px; justify-self: center; width: 100%; }
    #menu .cabecera { grid-area: cab; max-width: 880px; }
    #menu .logo { grid-area: logo; align-self: center; margin: 0; }
    #menu #aviso-cuenta { grid-area: aviso; font-size: 0.75rem; padding: 6px 10px; }
    #menu .botones-menu { grid-area: botones; align-self: center; gap: 8px; }
    #menu .botones-menu .btn { padding: 11px 14px; }
    #menu .pie { grid-area: pie; margin-top: 0; }
    .logo-rey { width: 104px; height: 104px; }
    .logo h1 { font-size: 1.75rem; }
    .logo h1 span { font-size: 1.1rem; letter-spacing: 7px; }
    .lema { font-size: 0.8rem; margin-top: 6px; }

    /* elegir aguacate: rejilla a la izquierda, ficha y botón a la derecha */
    #personajes {
        display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
        grid-template-areas: "cab cab" "rej det" "rej mapas" "rej modos" "rej emp";
        grid-template-rows: auto auto auto auto 1fr; column-gap: 16px; align-content: start;
    }
    #personajes > * { max-width: none; }
    #personajes .cabecera { grid-area: cab; }
    #personajes .rejilla-personajes {
        grid-area: rej; grid-template-columns: repeat(auto-fill, minmax(64px, 1fr)); gap: 6px;
        overflow-y: auto; align-content: start; max-height: calc(100dvh - 76px - env(safe-area-inset-top) - env(safe-area-inset-bottom));
    }
    #personajes .personaje span { font-size: 0.6rem; }
    #personajes .detalle-personaje { grid-area: det; padding: 8px 10px; gap: 10px; }
    #personajes .detalle-personaje img { width: 64px; height: 64px; }
    #personajes .detalle-personaje p { font-size: 0.75rem; }
    #personajes .modos { grid-area: modos; }
    #personajes .mapas { grid-area: mapas; }
    #personajes .mapa small { display: none; }
    #personajes #b-empezar { grid-area: emp; align-self: start; padding: 14px; }

    .lista-logros, .como, .lista-musica { grid-template-columns: 1fr 1fr; }

    /* partida: HUD más fino y respetando la muesca */
    .hud { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); }
    .hud-xp { height: 11px; }
    #hud-nivel { line-height: 11px; font-size: 0.62rem; }
    .hud-fila { padding-top: 4px; }
    .hud-tiempo { font-size: 1.25rem; }
    .b-pausa { width: 36px; height: 36px; }
    .hud-derecha { font-size: 0.78rem; }
    .ranura { width: 22px; height: 22px; font-size: 0.78rem; }
    .hud-jefe { top: calc(env(safe-area-inset-top) + 50px); width: min(44vw, 420px); }
    .hud-aviso { top: 25%; }
    .hud-aviso b { font-size: 1.25rem; }
    .hud-aviso small { font-size: 0.8rem; }

    /* ventanas: anchas y bajas, las opciones en columnas */
    .modal { padding: 8px calc(8px + env(safe-area-inset-right)) 8px calc(8px + env(safe-area-inset-left)); }
    .panel { max-width: 800px; max-height: calc(100dvh - 16px); padding: 12px 16px; gap: 8px; }
    .panel h2 { font-size: 1.1rem; }
    .panel .sub { margin-top: -4px; }
    .opciones-nivel { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); }
    .opcion { flex-direction: column; align-items: center; text-align: center; gap: 4px; padding: 10px 8px; }
    .opcion .ico { width: auto; font-size: 1.7rem; }
    .opcion .etq { margin-left: 4px; }
    .inventario { grid-template-columns: 1fr 1fr; }
    .fin-icono { font-size: 2rem; }
    .cofre-icono { font-size: 2.4rem; }
    .fin-datos { grid-template-columns: repeat(4, 1fr); }
    .fin-armas { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
    .logo-rey, .cofre-icono, .hud-aviso, .panel { animation: none !important; }
}