:root {
    color-scheme: dark;
    --fondo: #181b20;
    --superficie: #20242b;
    --texto: #edf0f5;
    --suave: #b3bac6;
    --linea: #343a44;
    --acento: #d0a361;
    --acento-fuerte: #e0bc7c;
    font-family: "Space Grotesk", "Avenir Next", system-ui, sans-serif;
    background: var(--fondo);
    color: var(--texto);
}

* {
    box-sizing: border-box;
}

body {
    margin: 0;
    min-width: 320px;
    background: var(--fondo);
    line-height: 1.5;
}

button,
input {
    font: inherit;
}

a {
    color: inherit;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
}

.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    max-width: 820px;
    margin: 0 auto;
    padding: 16px 16px 0;
}

.marca img {
    display: block;
    width: 96px;
    height: auto;
}


.pagina {
    max-width: 820px;
    margin: 0 auto;
    padding: 12px 16px 64px;
}

.barra-fija {
    position: sticky;
    top: 0;
    z-index: 5;
    margin: 0 -16px;
    padding: 8px 16px 0;
    background: var(--fondo);
}

.buscador {
    position: relative;
    display: block;
}

.atajo {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    padding: 1px 8px;
    border: 1px solid var(--linea);
    border-radius: 6px;
    color: var(--suave);
    font-size: 13px;
    line-height: 1.4;
    pointer-events: none;
}

.buscador input:focus + .atajo,
.buscador input:not(:placeholder-shown) + .atajo {
    display: none;
}

.buscador input {
    width: 100%;
    min-height: 52px;
    padding: 0 44px 0 18px;
    border: 2px solid var(--linea);
    border-radius: 12px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 18px;
    outline: none;
}

.buscador input:focus {
    border-color: var(--acento);
}

.buscador input::placeholder {
    color: var(--suave);
}

.pestanas {
    display: flex;
    gap: 4px;
    margin: 8px 0 0;
    border-bottom: 1px solid var(--linea);
}

.pestanas button {
    min-height: 44px;
    padding: 0 14px;
    border: 0;
    border-bottom: 2px solid transparent;
    background: none;
    color: var(--suave);
    cursor: pointer;
}

.pestanas button[aria-pressed="true"] {
    border-bottom-color: var(--acento);
    color: var(--texto);
}

.regla,
.cuenta,
.nota,
.vacio {
    color: var(--suave);
    font-size: 14px;
}

.contexto {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 4px 16px;
    margin: 10px 0 12px;
}

.contexto[hidden] {
    display: none;
}

.regla {
    flex: 1 1 280px;
    margin: 0;
}

.cuenta {
    margin: 0 0 6px;
}

.lista {
    border-top: 1px solid var(--linea);
}

.objeto {
    border-bottom: 1px solid var(--linea);
}

.objeto > summary {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr) auto;
    align-items: center;
    gap: 12px;
    min-height: 54px;
    padding: 8px 6px;
    cursor: pointer;
    list-style: none;
}

.objeto > summary::-webkit-details-marker {
    display: none;
}

.objeto > summary:hover,
.objeto[open] > summary {
    background: var(--superficie);
}

.objeto > summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: -2px;
}

.icono {
    display: inline-block;
    width: 32px;
    height: 32px;
    object-fit: contain;
    image-rendering: pixelated;
}

.icono-vacio {
    display: inline-grid;
    place-items: center;
    border: 1px solid var(--linea);
    border-radius: 6px;
    color: var(--suave);
    font-size: 14px;
    font-weight: 600;
}

.nombre {
    font-weight: 600;
}

.destino {
    color: var(--acento-fuerte);
    font-size: 13px;
    text-align: right;
}

.ficha {
    padding: 4px 6px 18px 50px;
    font-size: 14px;
}

.ficha p {
    margin: 0 0 6px;
}

.ficha h3 {
    margin: 14px 0 4px;
    color: var(--suave);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.ficha b {
    font-weight: 600;
}

.guardar {
    font-size: 16px;
}

.guardar b {
    color: var(--acento-fuerte);
}

.bolsa,
.por,
.descripcion {
    color: var(--suave);
}

.descripcion {
    font-style: italic;
}

.alquimia summary {
    cursor: pointer;
    color: var(--acento-fuerte);
}

.alquimia p {
    margin-top: 4px;
    color: var(--suave);
}

.cofre {
    padding: 10px 0;
    border-bottom: 1px solid var(--linea);
}

.cofre > summary {
    cursor: pointer;
    list-style: none;
}

.cofre > summary::-webkit-details-marker {
    display: none;
}

.cofre > summary h2 {
    display: inline-flex;
    align-items: baseline;
    gap: 8px;
    margin: 4px 0;
}

.cofre > summary h2::before {
    content: "▸";
    color: var(--suave);
    transition: transform .15s;
}

.cofre[open] > summary h2::before {
    transform: rotate(90deg);
}

.cofre[open] > summary {
    margin-bottom: 8px;
}

.cofre h2,
.guia h2 {
    margin: 0 0 10px;
    font-size: 17px;
    font-weight: 600;
}

.cofre small {
    color: var(--suave);
    font-size: 12px;
    font-weight: 400;
}

.chips {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 0;
}

.chips a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-height: 40px;
    padding: 2px 10px 2px 4px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 13px;
    text-decoration: none;
}

.chips a:hover,
.chips a:focus-visible {
    border-color: var(--acento);
}

.chips .icono {
    width: 28px;
    height: 28px;
}

.nota {
    margin-top: 18px;
}

.guia {
    padding: 18px 0;
    border-bottom: 1px solid var(--linea);
}

.guia ol {
    margin: 0;
    padding-left: 22px;
}

.guia li {
    margin-bottom: 8px;
}

.guia b {
    color: var(--acento-fuerte);
    font-weight: 600;
}

@media (max-width: 600px) {
    .objeto > summary {
        grid-template-columns: 32px minmax(0, 1fr);
    }

    .destino {
        grid-column: 2;
        text-align: left;
    }

    .ficha {
        padding-left: 6px;
    }
}

.enlace {
    color: var(--acento-fuerte);
    text-decoration: underline;
    text-decoration-color: var(--linea);
    text-underline-offset: 3px;
}

.enlace:hover,
.enlace:focus-visible {
    text-decoration-color: var(--acento);
}

.estacion,
.ficha small {
    color: var(--suave);
}

.runa {
    display: inline-block;
    padding: 0 6px;
    border-radius: 6px;
    font-size: 13px;
    font-weight: 600;
}

.runa-roja { background: #5a2a2a; color: #f2b8b0; }
.runa-verde { background: #2c4a2e; color: #b8e0b4; }
.runa-azul { background: #26385a; color: #b4c8f0; }

.barra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 6px;
}

.barra .cuenta {
    margin: 0;
}

.filtro {
    color: var(--suave);
    font-size: 13px;
}

.filtro select {
    min-height: 36px;
    margin-left: 6px;
    padding: 0 8px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
}

.ajustes {
    margin: 0 0 14px;
    font-size: 14px;
}

.ajustes summary {
    cursor: pointer;
    color: var(--acento-fuerte);
}

.ajustes small {
    color: var(--suave);
}

.zonas {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 4px 12px;
}

.zonas label {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 36px;
}

.semana {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: 8px 16px;
    margin: 0;
}

.semana dt {
    font-weight: 600;
    color: var(--acento-fuerte);
}

.semana dd {
    margin: 0;
}

.pie {
    max-width: 820px;
    margin: 0 auto;
    padding: 0 16px 32px;
    color: var(--suave);
    font-size: 12px;
}

.parche {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 1px solid var(--linea);
    border-left: 4px solid var(--linea);
    border-radius: 12px;
    background: var(--superficie);
}

.parche.impacto-alto { border-left-color: #c96a5a; }
.parche.impacto-medio { border-left-color: var(--acento); }
.parche.impacto-bajo { border-left-color: #6f8a63; }

.parche header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 6px 12px;
}

.parche h2 {
    margin: 0;
    font-size: 20px;
}

.parche time {
    color: var(--suave);
    font-size: 13px;
}

.parche h3 {
    margin: 14px 0 4px;
    color: var(--suave);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.parche h4 {
    margin: 12px 0 2px;
    font-size: 14px;
}

.parche h4 small {
    color: var(--suave);
    font-weight: 400;
}

.parche ul {
    margin: 4px 0;
    padding-left: 20px;
}

.parche li {
    margin: 3px 0;
}

.resumen {
    margin: 10px 0 0;
    font-size: 16px;
}

.afecta li::marker {
    color: var(--acento-fuerte);
}

.etiqueta {
    padding: 1px 8px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--suave);
    font-size: 12px;
}

.etiqueta.impacto-alto { border-color: #c96a5a; color: #f2b8b0; }
.etiqueta.impacto-medio { border-color: var(--acento); color: var(--acento-fuerte); }
.etiqueta.impacto-bajo { border-color: #6f8a63; color: #b8e0b4; }

.aviso-wiki {
    margin: 12px 0;
    padding: 10px 12px;
    border-radius: 8px;
    background: #2e2a20;
    color: #e8d6b0;
    font-size: 14px;
}

.desplegable {
    margin-top: 10px;
    font-size: 14px;
}

.desplegable > summary {
    cursor: pointer;
    color: var(--acento-fuerte);
}

.parche a {
    color: var(--acento-fuerte);
}

.pestanas {
    overflow-x: auto;
    scrollbar-width: none;
}

.pestanas button {
    flex: none;
    white-space: nowrap;
}

@media (max-width: 420px) {
    .pestanas {
        gap: 0;
    }

    .pestanas button {
        padding: 0 9px;
    }
}

/* ---------------------------------------------------------------- mejoras de lectura */

.ajustes {
    flex: none;
    margin: 0;
}

.ajustes[open] {
    flex-basis: 100%;
}

.punto-nuevo {
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    background: #e07a5f;
    vertical-align: super;
}

.punto-nuevo[hidden] {
    display: none;
}

.insignia {
    margin-left: 6px;
    padding: 0 6px;
    border: 1px solid #8a6d3b;
    border-radius: 6px;
    color: var(--acento-fuerte);
    font-size: 11px;
    font-weight: 600;
    vertical-align: 2px;
}

.esqueleto-fila {
    display: grid;
    grid-template-columns: 32px 1fr;
    gap: 12px;
    align-items: center;
    min-height: 54px;
    padding: 8px 6px;
    border-bottom: 1px solid var(--linea);
}

.esqueleto-fila span {
    height: 14px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--superficie), #2a2f38, var(--superficie));
    background-size: 200% 100%;
    animation: brillo 1.4s ease-in-out infinite;
}

.esqueleto-fila span:first-child {
    height: 32px;
}

.esqueleto-fila:nth-child(odd) span:last-child {
    width: 60%;
}

@keyframes brillo {
    from { background-position: 100% 0; }
    to { background-position: -100% 0; }
}

@media (prefers-reduced-motion: reduce) {
    .esqueleto-fila span {
        animation: none;
    }

    .cofre > summary h2::before {
        transition: none;
    }
}

.arriba {
    position: fixed;
    right: 16px;
    bottom: 20px;
    z-index: 6;
    width: 48px;
    height: 48px;
    border: 1px solid var(--linea);
    border-radius: 50%;
    background: var(--superficie);
    color: var(--texto);
    font-size: 20px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgb(0 0 0 / .4);
}

.arriba {
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
}

.arriba.visible {
    opacity: 1;
    transform: none;
    pointer-events: auto;
}

.arriba:hover,
.arriba:focus-visible {
    border-color: var(--acento);
}

.pie {
    font-size: 13px;
}

.objeto > summary:focus-visible,
.chips a:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: -2px;
}

/* Escritorio: más ancho y la ficha en dos columnas. */
@media (min-width: 900px) {
    .pagina,
    .cabecera,
    .pie {
        max-width: 1040px;
    }

    .ficha {
        display: grid;
        grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
        gap: 0 32px;
    }

    .ficha-b > h3:first-child {
        margin-top: 4px;
    }
}

/* Al saltar a una ficha, que la barra fija no la tape. */
.objeto,
.cofre,
.parche {
    scroll-margin-top: 130px;
}

/* Sin teclado físico la pista «/» no sirve. */
@media (hover: none) {
    .atajo {
        display: none;
    }

    .buscador input {
        padding-right: 18px;
    }
}

/* ---------------------------------------------------------------- catálogo y herramientas */

.subnav {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin: 4px 0 14px;
}

.subnav button,
.boton,
.fav,
.calc button {
    min-height: 36px;
    padding: 0 12px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
}

.subnav button[aria-pressed="true"],
.fav[aria-pressed="true"] {
    border-color: var(--acento);
    color: var(--acento-fuerte);
}

.subnav button:hover,
.boton:hover,
.fav:hover,
.calc button:hover {
    border-color: var(--acento);
}

.fav {
    min-height: 30px;
    margin-left: 8px;
    font-size: 13px;
    vertical-align: 2px;
}

.entrada {
    border-bottom: 1px solid var(--linea);
}

.entrada > summary {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 4px 12px;
    min-height: 48px;
    padding: 8px 6px;
    cursor: pointer;
    list-style: none;
}

.entrada > summary::-webkit-details-marker {
    display: none;
}

.entrada > summary:hover,
.entrada[open] > summary {
    background: var(--superficie);
}

.entrada > summary:focus-visible {
    outline: 2px solid var(--acento);
    outline-offset: -2px;
}

.ficha-cat {
    padding: 6px 6px 16px;
    font-size: 14px;
}

.ficha-cat p {
    margin: 0 0 6px;
}

.ficha-cat h3 {
    margin: 12px 0 4px;
    color: var(--suave);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.titulo-seccion {
    margin: 20px 0 8px;
    font-size: 17px;
}

.tabla {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
}

.tabla th,
.tabla td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--linea);
    text-align: left;
    vertical-align: top;
}

.tabla th {
    color: var(--suave);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.positivo { color: #9fd49a; }
.negativo { color: #f2b8b0; }

.calc {
    display: flex;
    flex-wrap: wrap;
    align-items: end;
    gap: 10px;
    margin: 0 0 8px;
}

.calc label {
    display: grid;
    gap: 4px;
    color: var(--suave);
    font-size: 13px;
}

.calc input {
    min-height: 40px;
    padding: 0 10px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--superficie);
    color: var(--texto);
    font: inherit;
}

.calc #calc-objeto {
    width: min(320px, 70vw);
}

.calc #calc-cantidad {
    width: 90px;
}

.pasos li,
.compra li {
    margin: 4px 0;
}

.compra {
    padding-left: 0;
    list-style: none;
}

.compra label {
    display: flex;
    gap: 10px;
    align-items: center;
    min-height: 36px;
}

.hecho {
    color: var(--suave);
    text-decoration: line-through;
}

@media (max-width: 520px) {
    .tabla th:nth-child(3),
    .tabla td:nth-child(3) {
        display: none;
    }
}

/* Seis pestañas: en móvil se desplazan. Con position: relative, el texto oculto de
   la pestaña Novedades queda dentro del recorte y no ensancha la página. */
.pestanas {
    position: relative;
}

/* En móvil no caben las seis pestañas: el borde se difumina para que se vea que hay más. */
@media (max-width: 640px) {
    .pestanas {
        mask-image: linear-gradient(to right, #000 85%, transparent);
    }

    .pestanas:has(button:last-child[aria-pressed="true"]) {
        mask-image: none;
    }
}

/* Página pública: lema junto al logo y pie con el aviso de wiki no oficial. */
.lema {
    max-width: 30ch;
    margin: 0;
    color: var(--suave);
    font-size: 14px;
    text-align: right;
}

.pie p {
    margin: 0 0 8px;
    line-height: 1.5;
}

.pie a {
    color: var(--acento-fuerte);
}


/* ---------------------------------------------------------------- animaciones
   Todo lo que se mueve va aquí dentro: con «reducir movimiento» la web queda quieta. */

.toast {
    position: fixed;
    left: 50%;
    bottom: 24px;
    z-index: 20;
    max-width: calc(100vw - 32px);
    padding: 10px 16px;
    border: 1px solid var(--linea);
    border-radius: 10px;
    background: var(--superficie);
    color: var(--texto);
    font-size: 14px;
    box-shadow: 0 8px 24px rgb(0 0 0 / .45);
    opacity: 0;
    transform: translate(-50%, 12px);
    pointer-events: none;
}

.toast.visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

.vuelo {
    position: fixed;
    z-index: 30;
    width: 32px;
    height: 32px;
    image-rendering: pixelated;
    pointer-events: none;
}

.punto-tec {
    position: fixed;
    z-index: 30;
    display: grid;
    place-items: center;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    pointer-events: none;
    text-shadow: 0 1px 0 rgb(0 0 0 / .5);
}

.punto-roja { background: #c0503f; }
.punto-verde { background: #4f9a4a; }
.punto-azul { background: #3f6fc0; }


@media (prefers-reduced-motion: no-preference) {
    /* 2 · Abrir y cerrar con suavidad donde el navegador sabe animar «height: auto». */
    :root {
        interpolate-size: allow-keywords;
    }

    :is(.objeto, .cofre, .entrada, .desplegable, .alquimia, .ajustes)::details-content {
        height: 0;
        overflow: clip;
        transition: height .18s ease, content-visibility .18s allow-discrete;
    }

    :is(.objeto, .cofre, .entrada, .desplegable, .alquimia, .ajustes)[open]::details-content {
        height: auto;
    }

    /* 1 · La fila a la que saltas se ilumina un momento. */
    .destello {
        animation: destello .9s ease-out;
    }

    @keyframes destello {
        0%, 25% { background: rgb(208 163 97 / .28); box-shadow: inset 3px 0 0 var(--acento); }
        100% { background: var(--superficie); box-shadow: inset 3px 0 0 transparent; }
    }

    /* 3 · Fundido al cambiar de pestaña (View Transitions). */
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: .16s;
    }

    /* 4 · La estrella da un pequeño salto al marcarla; el aviso entra deslizando. */
    .fav.pop {
        animation: pop .32s cubic-bezier(.3, 1.6, .5, 1);
    }

    @keyframes pop {
        0% { transform: scale(1); }
        45% { transform: scale(1.18); }
        100% { transform: scale(1); }
    }

    .toast,
    .arriba {
        transition: opacity .2s ease, transform .2s ease;
    }

    /* 5 · El icono pixelado bota al pasar por la fila, a saltos como en el juego. */
    .objeto > summary:hover .icono,
    .chips a:hover .icono {
        animation: bote .3s steps(3);
    }

    @keyframes bote {
        0%, 100% { transform: translateY(0); }
        50% { transform: translateY(-2px); }
    }

    /* 6 · La barra fija gana sombra solo cuando has bajado (animación ligada al scroll). */
    @supports (animation-timeline: scroll()) {
        .barra-fija {
            animation: sombra-barra linear both;
            animation-timeline: scroll();
            animation-range: 0 80px;
        }

        @keyframes sombra-barra {
            from { box-shadow: 0 0 0 transparent; }
            to { box-shadow: 0 10px 18px -12px rgb(0 0 0 / .8); }
        }
    }

    /* 7 · El punto de Novedades late una vez al aparecer, no en bucle. */
    .punto-nuevo {
        animation: latido .9s ease-out 2;
    }

    @keyframes latido {
        0% { box-shadow: 0 0 0 0 rgb(224 122 95 / .7); }
        100% { box-shadow: 0 0 0 8px rgb(224 122 95 / 0); }
    }

    /* C · «Brillo especial»: los objetos que ha cambiado un parche destellan de vez en cuando. */
    .objeto > summary:has(.insignia) .icono {
        animation: brillo-especial 3.6s ease-in-out infinite;
    }

    @keyframes brillo-especial {
        0%, 82%, 100% { filter: none; }
        88% { filter: brightness(1.7) drop-shadow(0 0 5px #f3d38a); }
        94% { filter: brightness(1.15) drop-shadow(0 0 2px #f3d38a); }
    }
}


/* ---------------------------------------------------------------- detalles del juego
   Guiños con iconos del propio juego. Con «reducir movimiento» se ven, pero quietos. */

.cavando {
    display: flex;
    align-items: end;
    justify-content: center;
    gap: 3px;
    height: 56px;
}

.cavando img,
.tumba img,
.cofre-ico {
    image-rendering: pixelated;
}

.cavando span {
    width: 5px;
    height: 5px;
    background: #7a5a3a;
}

.tumba {
    position: relative;
    display: block;
    width: 90px;
    height: 70px;
    margin: 18px auto 4px;
    overflow: hidden;
}

.tumba .lapida {
    position: absolute;
    left: 20px;
    bottom: 6px;
    width: 48px;
    height: 48px;
}

.tumba .calavera {
    position: absolute;
    left: 58px;
    bottom: 6px;
    width: 28px;
    height: 28px;
}

.tumba .tierra {
    position: absolute;
    inset: auto 0 0;
    height: 8px;
    border-radius: 4px;
    background: #4a3a2a;
}


.cofre-ico {
    display: inline-block;
    width: 24px;
    height: 24px;
    margin-right: 6px;
    vertical-align: -5px;
}

@media (prefers-reduced-motion: no-preference) {
    /* Pala: cava a golpes mientras carga, y suelta tierra. */
    .cavando img {
        transform-origin: 80% 90%;
        animation: cavar .7s steps(3) infinite;
    }

    @keyframes cavar {
        0%, 100% { transform: rotate(-25deg) translateY(0); }
        50% { transform: rotate(10deg) translateY(4px); }
    }

    .cavando span {
        animation: tierra .7s ease-out infinite;
    }

    .cavando span:nth-of-type(2) { animation-delay: .12s; }
    .cavando span:nth-of-type(3) { animation-delay: .24s; }

    @keyframes tierra {
        0% { transform: translate(0, 0); opacity: 0; }
        30% { opacity: 1; }
        100% { transform: translate(14px, -26px); opacity: 0; }
    }

    /* Lápida: sale de la tierra y luego se asoma la calavera. */
    .tumba .lapida {
        animation: emerger .6s steps(6) both;
    }

    .tumba .calavera {
        animation: asomar .5s .6s steps(4) both, mirar 2.4s 1.2s steps(2) infinite;
    }

    @keyframes emerger {
        from { transform: translateY(48px); }
        to { transform: translateY(0); }
    }

    @keyframes asomar {
        from { transform: translateY(28px); }
        to { transform: translateY(0); }
    }

    @keyframes mirar {
        0%, 100% { transform: translateX(0); }
        50% { transform: translateX(2px); }
    }


    /* Cofre: al abrir la ficha da un saltito, como al abrir uno en el juego. */
    .objeto[open] .cofre-ico {
        animation: abrir-cofre .5s steps(4);
    }

    @keyframes abrir-cofre {
        0% { transform: translateY(0) scale(1); }
        40% { transform: translateY(-4px) scale(1.15, .9); }
        70% { transform: translateY(0) scale(.95, 1.08); }
        100% { transform: none; }
    }

    /* Calculadora: los materiales caen uno tras otro, como al llenar el inventario. */
    .tabla-calc tbody tr {
        animation: caer .35s cubic-bezier(.3, 1.3, .5, 1) backwards;
        animation-delay: calc(var(--i) * 70ms);
    }

    @keyframes caer {
        from { transform: translateY(-10px); opacity: 0; }
        to { transform: none; opacity: 1; }
    }
}




/* ---------------------------------------------------------------- páginas estáticas
   /objeto/<slug>/ y /objetos/: las genera scripts/gk2/paginas.mjs para buscadores. */

.pagina-estatica {
    display: grid;
    gap: 10px;
    padding-top: 20px;
}

.pagina-estatica h2 {
    margin: 14px 0 0;
    font-size: 18px;
}

.pagina-estatica h2 small {
    color: var(--suave);
    font-size: 13px;
    font-weight: 400;
}

.pagina-estatica ul {
    margin: 0;
    padding-left: 20px;
}

.pagina-estatica li {
    margin: 4px 0;
}

.pagina-estatica a {
    color: var(--acento-fuerte);
}

.migas {
    color: var(--suave);
    font-size: 14px;
}

.titulo-objeto {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0;
    font-size: 30px;
}

.titulo-objeto .icono {
    width: 48px;
    height: 48px;
}

.acciones {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 12px;
}

a.boton {
    display: inline-flex;
    align-items: center;
    color: var(--texto);
    text-decoration: none;
}


/* ---------------------------------------------------------------- compartir y avisos */

.acciones-ficha {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin: 10px 0 0;
}

.acciones-ficha .boton {
    min-height: 32px;
    font-size: 13px;
}

.form-aviso {
    display: grid;
    gap: 8px;
    margin-top: 8px;
    padding: 12px;
    border: 1px solid var(--linea);
    border-radius: 10px;
}

.form-aviso textarea {
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--linea);
    border-radius: 8px;
    background: var(--fondo);
    color: var(--texto);
    font: inherit;
    resize: vertical;
}

.form-aviso textarea:focus {
    outline: 2px solid var(--acento);
    outline-offset: 1px;
}

.form-aviso .boton {
    justify-self: start;
}

/* Campo trampa para bots: fuera de la vista y del teclado. */
.trampa {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    opacity: 0;
}

.pagina-estatica p {
    margin: 0;
}

/* ---------------------------------------------------------------- idioma */

.idioma {
    flex: none;
    margin-left: 12px;
    padding: 4px 12px;
    border: 1px solid var(--linea);
    border-radius: 999px;
    color: var(--texto);
    font-size: 13px;
    text-decoration: none;
}

.idioma:hover,
.idioma:focus-visible {
    border-color: var(--acento);
}

/* El display: grid de arriba le ganaba al atributo hidden y el formulario salía abierto. */
.form-aviso[hidden] {
    display: none;
}