/* ================================================================
   inicio.css — Lienzo · portada de UNA SOLA PANTALLA

   Regla estructural: el documento nunca crece más allá de la ventana.
   `.app` es una rejilla de 100dvh (cabecera / contenido / pie) y las dos
   zonas de contenido variable —plantillas y mundos— se desplazan POR DENTRO.
   Por eso todo lo que pueda crecer vive dentro de un `.strip`.
   ================================================================ */

:root {
    --line:   rgba(255,255,255,0.14);
    --line-2: rgba(255,255,255,0.26);
    --txt:    #f2f2f4;
    --txt-dim: rgba(255,255,255,0.62);
    --accent: #5aa0ff;
    --accent-2: #7ab2ff;
    --kofi:   #e0679a;
    --panel:  rgba(20,20,23,0.58);

    --font-main: 'Bellota', Arial, sans-serif;
    --pill: 999px;

    /* Escala — se comprime en pantallas bajas (móvil apaisado) */
    --tpl-w:   116px;
    --tpl-h:   152px;
    --world-w: 224px;
    --pad:     clamp(14px, 2.4vw, 26px);
    --gap:     clamp(12px, 2vw, 22px);
}

@font-face { font-family:'Bellota'; src:url('../fonts/Bellota-Regular.woff2') format('woff2'); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:'Bellota'; src:url('../fonts/Bellota-Bold.woff2') format('woff2'); font-weight:700; font-style:normal; font-display:swap; }

* { box-sizing: border-box; }

html, body {
    margin: 0; height: 100%;
    overflow: hidden;                 /* nunca hay scroll de página */
    overscroll-behavior: none;
    background: #101012;
    color: var(--txt);
    font-family: var(--font-main);
    line-height: 1.45;
    -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ── Fondo: panorámica a página completa ─────────────────────── */
.bg {
    position: fixed; inset: -4%;
    background-size: cover; background-position: center;
    filter: blur(2px) brightness(.52) saturate(1.05);
    animation: drift 60s ease-in-out infinite alternate;
    will-change: transform;
}
@keyframes drift {
    from { transform: scale(1.05) translate3d(0,0,0); }
    to   { transform: scale(1.13) translate3d(-2.5%,-1%,0); }
}
.bg-shade {
    position: fixed; inset: 0;
    background:
        radial-gradient(130% 100% at 15% 20%, rgba(0,0,0,.30) 0%, rgba(0,0,0,.60) 60%, rgba(0,0,0,.80) 100%);
}
@media (prefers-reduced-motion: reduce) { .bg { animation: none; transform: scale(1.05); } }

/* ── Rejilla principal ───────────────────────────────────────── */
.app {
    position: relative;
    height: 100dvh;
    display: grid;
    grid-template-rows: auto minmax(0, 1fr) auto;   /* minmax(0,·) permite scroll interno */
    gap: var(--gap);
    padding: var(--pad);
}

/* ── Cabecera ────────────────────────────────────────────────── */
.top { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.brand {
    display: inline-flex; align-items: center; gap: 10px; margin: 0;
    filter: drop-shadow(0 3px 22px rgba(0,0,0,.6));
}
.brand img { height: clamp(44px, 8vw, 64px); width: auto; display: block; }
.tagline { margin: 0; color: var(--txt-dim); font-size: clamp(.86rem, 1.5vw, 1rem); }

/* ── Paneles ─────────────────────────────────────────────────── */
.cols { display: grid; gap: var(--gap); min-height: 0; }
.panel {
    display: flex; flex-direction: column; min-height: 0;
    background: var(--panel);
    border: 1px solid var(--line);
    border-radius: 18px;
    padding: clamp(12px, 1.8vw, 18px);
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
}
.h {
    display: flex; align-items: center; gap: 9px; margin: 0 0 10px;
    font-size: clamp(.95rem, 1.7vw, 1.12rem); font-weight: 700;
}
.count {
    font-size: .74rem; font-weight: 700; padding: 1px 9px; border-radius: var(--pill);
    background: rgba(90,160,255,.2); color: var(--accent); border: 1px solid rgba(90,160,255,.4);
}

/* ── Botones ─────────────────────────────────────────────────── */
.btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    border-radius: var(--pill); padding: 9px 18px; white-space: nowrap;
    font-family: var(--font-main); font-size: .95rem; font-weight: 700;
    border: 2px solid transparent; cursor: pointer; text-decoration: none;
    transition: background .16s, border-color .16s, color .16s;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: #0a1626; }
.btn-primary:hover { background: var(--accent-2); border-color: var(--accent-2); }
.btn-ghost { background: rgba(255,255,255,.10); border-color: var(--line-2); color: var(--txt); }
.btn-ghost:hover { background: rgba(255,255,255,.2); border-color: var(--txt); }

/* Empezar: color + en blanco + subir, todo en una fila */
.start-row { display: flex; flex-wrap: wrap; gap: 8px; }
.blank-form { display: flex; align-items: stretch; gap: 8px; }
.swatch {
    width: 42px; border-radius: 12px; overflow: hidden; flex: 0 0 auto;
    border: 1px solid var(--line-2); cursor: pointer; padding: 0; display: block;
}
.swatch input[type="color"] {
    width: 160%; height: 160%; margin: -30%; border: none; padding: 0;
    background: none; cursor: pointer;
}

.label {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 12px 0 8px; font-size: .84rem; color: var(--txt-dim);
}
.hint {
    font-size: .7rem; padding: 1px 8px; border-radius: var(--pill);
    background: rgba(255,255,255,.08); border: 1px solid var(--line);
}

/* ── Tiras desplazables (el truco que evita el scroll de página) ─ */
.strip {
    display: flex; gap: 10px; min-height: 0;
    overflow-x: auto; overflow-y: hidden;
    scroll-snap-type: x proximity;
    padding-bottom: 4px;
    scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.3) transparent;
}
.strip > * { flex: 0 0 auto; scroll-snap-align: start; }
.strip::-webkit-scrollbar { height: 6px; width: 6px; }
.strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,.3); border-radius: 3px; }
.strip::-webkit-scrollbar-track { background: transparent; }

/* Plantilla */
.tpl {
    position: relative; width: var(--tpl-w); height: var(--tpl-h);
    border-radius: 13px; overflow: hidden; text-decoration: none;
    border: 1px solid var(--line); background: rgba(0,0,0,.4);
    transition: border-color .16s, transform .16s;
}
.tpl img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s, filter .2s; }
.tpl span {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 7px;
    font-size: .76rem; font-weight: 700; color: #fff; line-height: 1.2;
    background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 100%);
}
.tpl:hover { border-color: var(--accent); transform: translateY(-3px); }
.tpl:hover img { transform: scale(1.07); filter: brightness(.78); }

/* Mundo publicado */
.world {
    position: relative; width: var(--world-w); aspect-ratio: 2 / 1;
    border-radius: 13px; overflow: hidden; text-decoration: none;
    border: 1px solid var(--line); background: rgba(0,0,0,.4);
    transition: border-color .16s, transform .16s;
}
.world img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.world:hover { border-color: var(--accent); transform: translateY(-3px); }
.world:hover img { transform: scale(1.06); }
.world-meta {
    position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 10px 8px; color: #fff;
    background: linear-gradient(0deg, rgba(0,0,0,.92) 0%, rgba(0,0,0,0) 100%);
}
.world-meta b { display: block; font-size: .88rem; line-height: 1.2; }
.world-meta small { color: rgba(255,255,255,.72); font-size: .74rem; }

/* Sin mundos todavía */
.none {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 8px; text-align: center; color: var(--txt-dim);
    border: 1px dashed var(--line-2); border-radius: 14px; padding: 18px;
}
.none i { font-size: 1.7rem; color: var(--accent); opacity: .85; }
.none p { margin: 0; font-size: .9rem; }

/* ── Pie ─────────────────────────────────────────────────────── */
.foot {
    display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
    font-size: .8rem; color: var(--txt-dim);
}
.pms img { height: 34px; width: auto; opacity: .8; transition: opacity .15s; }
.pms:hover img { opacity: 1; }
.sep { flex: 1 1 auto; }
.give { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.key {
    display: inline-flex; align-items: center; gap: 6px;
    background: rgba(255,255,255,.08); border: 1px solid var(--line);
    border-radius: var(--pill); padding: 4px 12px; cursor: pointer;
    color: var(--txt); font-family: var(--font-main); font-size: .78rem;
    transition: background .15s;
}
.key:hover { background: rgba(255,255,255,.18); }
.key.ok { background: var(--accent); border-color: var(--accent); color: #0a1626; }
.key code { font-family: 'Courier New', monospace; font-size: .8rem; }
.kofi {
    display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
    background: var(--kofi); color: #fff; border-radius: var(--pill);
    padding: 4px 12px; font-size: .78rem; font-weight: 700;
}
.kofi:hover { background: #e879a8; }

/* ════════════════════════════════════════════════════════════════
   RESPONSIVE
   Base = móvil vertical: una columna, ambas zonas como tiras.
   ════════════════════════════════════════════════════════════════ */
.cols { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }

/* Ancho suficiente (móvil apaisado, tablet, escritorio) → dos columnas */
@media (min-width: 760px) {
    .cols { grid-template-columns: minmax(300px, 34%) 1fr; grid-template-rows: minmax(0, 1fr); }
}

/* Escritorio amplio → los mundos pasan de tira a rejilla */
@media (min-width: 1024px) and (min-height: 620px) {
    .world-strip {
        display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
        gap: 12px; align-content: start;
        overflow-x: hidden; overflow-y: auto;
        scroll-snap-type: none;
    }
    .world-strip > .world { width: auto; }
}

/* Pantallas bajas (móvil apaisado) → todo más compacto */
@media (max-height: 560px) {
    :root { --tpl-w: 88px; --tpl-h: 116px; --world-w: 170px; --pad: 10px; --gap: 10px; }
    .tagline { display: none; }          /* el nombre y los botones ya lo dicen */
    .panel { border-radius: 14px; }
    .btn { padding: 7px 14px; font-size: .86rem; }
    .pms img { height: 26px; }
}

/* Muy bajo (móviles apaisados pequeños, ~360px) → última compactación:
   sin este escalón las plantillas se recortaban unos 8px por abajo. */
@media (max-height: 430px) {
    :root { --tpl-w: 76px; --tpl-h: 98px; --world-w: 150px; --pad: 8px; --gap: 8px; }
    .brand img { height: 36px; }
    .label { margin: 8px 0 6px; }
    .hint { display: none; }
    .panel { padding: 10px; }
    .foot { font-size: .72rem; }
    .pms img { height: 22px; }
}

/* Muy angosto → la llave completa ocuparía dos líneas */
@media (max-width: 420px) {
    .foot { font-size: .74rem; gap: 8px; }
    .give { width: 100%; }
    .key code { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
}