/* TorBula | MiniJuegos — Estilos unificados (index.css) */

/* ================================================================
    BASE — Escritorio (> 900px)
   ================================================================ */
*, ::after, ::before {
    box-sizing: border-box;
    scrollbar-width: none;
    touch-action: manipulation;
}

body {
    background-color: #212121;
    color: #fff;
    font-family: monospace, serif;
    letter-spacing: 0.05em;
    margin: 0 40px;
    height: 100vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

h1 { font-size: 23px; }

.all2 { width: 100%; height: 100%; display: flex; flex-direction: column; }

.up { margin: 32px 0 16px 0; flex-shrink: 0; }

.titulo { text-align: center; display: flex; flex-direction: column; align-items: center; }
.titulo h1 { font-size: 2.5rem; margin: 0; color: #fff; width: 200px; }
.titulo h1 a { color: inherit; text-decoration: none; }
.titulo h1 a:visited { color: inherit; }
.titulo p { font-size: 1.2rem; margin: 5px 0 0 0; opacity: 0.8; cursor: default; font-weight: bold; }

.titulo-container { display: inline-block; position: relative; }
.titulo-underline {
    width: 212px; height: 2px;
    background-color: #fff;
    margin: -4px 0 0 0;
    transform-origin: center;
    transform: scaleX(1);
    transition: transform 0.2s ease;
}

.dotcom { color: #c4c4c4; font-size: 1.4rem; }

.todo { width: 100%; flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.all { display: flex; flex-direction: column; align-items: center; gap: 30px; flex: 1; overflow: hidden; }

.games-section { width: 100%; max-width: 1200px; flex: 1; display: flex; flex-direction: column; overflow: hidden; }

.games-header { height: auto; flex-shrink: 0; }
.games-header .text { padding: 20px; }
.games-header h1 { font-size: 1.8rem; margin: 12px 0 10px 0; line-height: 1; }
.games-header p { margin: 0 0 12px 0; opacity: 0.8; font-size: 1rem; }

.games-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 25px;
    width: 100%;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    align-content: start;
    padding: 20px;
}

@keyframes gameCardFadeIn {
    0%   { opacity: 0; transform: translateY(30px); }
    100% { opacity: 1; transform: translateY(0); }
}

.game-card {
    cursor: default;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(30px);
}
.game-card.animate-in { animation: gameCardFadeIn 0.3s cubic-bezier(0.4,0,0.2,1) forwards; }
.game-card .text { padding: 15px; height: 100%; display: flex; flex-direction: column; justify-content: space-between; }

.game-header { display: flex; align-items: center; gap: 15px; margin: 10px 0; }
.game-icon { width: 2em; height: 2em; line-height: 1; flex-shrink: 0; }
.game-icon svg { width: 100%; height: 100%; display: block; }
.game-title { font-size: 1em; font-weight: bold; margin: 0; }
.game-description { flex-grow: 1; font-size: 0.9em; line-height: 1.4; opacity: 0.9; margin: 10px 0; }

.game-actions { display: flex; justify-content: center; margin-top: 15px; }
.game-action-btn { width: 120px; font-size: 0.9em; line-height: 0; cursor: pointer; transition: all 0.2s ease; }
.game-action-btn .text { padding: 8px; font-size: 0.9em; }

.no-games-message {
    text-align: center; padding: 60px 20px;
    color: rgba(255,255,255,0.8); font-size: 1.2em;
    grid-column: 1 / -1;
}
.no-games-message .icon { font-size: 4em; margin-bottom: 20px; display: block; }

/* --- block-cube --- */
.block-cube {
    position: relative; max-width: 100%;
    word-break: break-all; overflow-wrap: anywhere; box-sizing: border-box;
}
.block-cube .bg-top {
    position: absolute; height: 10px; background: #909090;
    bottom: 100%; left: 5px; right: -5px;
    transform: skew(-45deg, 0); margin: 0;
}
.block-cube .bg-top .bg-inner { bottom: 0; }
.block-cube .bg { position: absolute; left: 0; top: 0; right: 0; bottom: 0; background: #909090; }
.block-cube .bg-right {
    position: absolute; background: #909090;
    top: -5px; z-index: 0; bottom: 5px; width: 10px; left: 100%;
    transform: skew(0, -45deg);
}
.block-cube .bg-right .bg-inner { left: 0; }
.block-cube .bg .bg-inner { transition: all 0.2s ease; }
.block-cube .bg-inner { background: #212121; position: absolute; left: 2px; top: 2px; right: 2px; bottom: 2px; }
.block-cube .text { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; }
.block-cube.block-input .bg-top,
.block-cube.block-input .bg-right,
.block-cube.block-input .bg { background: #909090; transition: background 0.2s ease; }
.block-cube.block-input .bg-right .bg-inner,
.block-cube.block-input .bg-top .bg-inner { transition: all 0.2s ease; }
.block-cube.block-input:focus > .bg-top,
.block-cube.block-input:focus > .bg-right,
.block-cube.block-input:focus > .bg { background: rgba(255,255,255,0.8); }
.block-cube.block-cube-hover:focus > .bg > .bg-inner { top: 100%; }
.block-cube.block-input .text { padding: 20px; position: relative; z-index: 2; color: white; font-weight: bold; }

/* --- upbar / nav --- */
.upbar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 20px; }
.centro { width: 80%; height: 100%; }
.izqder { width: 70px; height: 100%; display: flex; justify-content: center; align-items: center; }

.nav-button, .theme-toggle {
    background: none; border: none; color: white;
    font-size: 1.5em; border-radius: 4px;
    display: flex; align-items: center; justify-content: center;
    width: 45px; height: 45px;
    object-fit: contain;
    transition: all 0.1s ease;
    filter: invert(1);
}
.mando-icon { filter: invert(1); }
body.white .mando-icon { filter: invert(0); }

/* --- tema claro --- */
body.white { background-color: #eee; color: #212121; }
body.white .titulo h1 a { color: #212121; }
body.white .titulo-underline { background-color: #212121; }
body.white .block-cube .bg-inner { background: #eee; }
body.white .block-cube.block-input .bg-top,
body.white .block-cube.block-input .bg-right,
body.white .block-cube.block-input .bg { background: #212121; }
body.white .games-header h1,
body.white .game-title,
body.white .block-cube.block-input .text { color: #212121; }
body.white .dotcom { color: #636363; }
body.white .nav-button,
body.white .theme-toggle { filter: invert(0) brightness(0) contrast(1) saturate(1); }


/* ================================================================
    MÓVIL — max-width: 900px
   ================================================================ */
@media screen and (max-width: 900px) {
    html, body { touch-action: none; overscroll-behavior: none; }

    body {
        display: flex; flex-direction: column;
        align-items: center; justify-content: center;
        margin: 0; height: 100dvh;
        overflow: hidden; padding: 0 0 20px 0;
    }

    .all2 { width: 100%; height: 100%; display: flex; flex-direction: column; }
    .up { margin: 16px 0 8px 0; }
    .titulo h1 { font-size: 2rem; }

    .titulo-underline { width: 160px; margin: 0 auto 0; }
    .dotcom { font-size: 1.4rem; }
    .titulo p { font-size: 1rem; }

    .todo { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 0 8px 0 0; }
    .all { flex: 1; display: flex; flex-direction: column; overflow: hidden; }

    .games-section { width: 100%; flex: 1; display: flex; flex-direction: column; overflow: hidden; }
    .games-header { flex-shrink: 0; }
    .games-header h1 { font-size: 1.2rem; }
    .games-header p { font-size: 0.9rem; }
    .mando-icon { width: 2rem !important; height: 2rem !important; }

    .games-grid {
        display: grid; grid-template-columns: 1fr 1fr;
        grid-auto-rows: max-content; gap: 20px;
        flex: 1; overflow-y: auto; overflow-x: hidden;
        padding: 10px 20px 20px 20px; align-content: start;
    }

    .game-header { gap: 2px; margin: 10px 0; }
    .game-icon { width: 1.6rem; height: 1.6rem; }
    .game-title { font-size: 1rem; }
    .game-description { font-size: 0.85em; }
    .game-action-btn { width: 100px; height: 35px; font-size: 0.8em; }

    .no-games-message { padding: 40px 15px; font-size: 1.1em; }
    .no-games-message .icon { font-size: 3em; }

    .block-cube .bg-inner { left: 2px; top: 2px; right: 2px; bottom: 2px; }
    h1 { font-size: 20px; }
    .block-cube.block-input .text { padding: 20px 10px; }

    .game-card .text { height: auto !important; display: flex; flex-direction: column; justify-content: flex-start !important; min-height: auto; }
    .game-card { align-self: start; opacity: 1 !important; transform: none !important; }

    .pad18 { padding: 18px !important; }

    .upbar { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; }
    .centro { width: 60%; }
    .izqder { width: 15%; }

    .nav-button, .theme-toggle {
        background: none; border: none; color: white;
        font-size: 1.2em; cursor: pointer; padding: 5px;
        border-radius: 4px; transition: all 0.3s ease;
        display: flex; align-items: center; justify-content: center;
        width: 50px; height: 50px;
        object-fit: contain;
    }

    /* tema claro móvil */
    body.white { background-color: #eee; color: #212121; }
    body.white .titulo h1 a { color: #212121; }
    body.white .titulo-underline { background-color: #212121; }
    body.white .block-cube .bg-inner { background: #eee; }
    body.white .block-cube.block-input .bg-top,
    body.white .block-cube.block-input .bg-right,
    body.white .block-cube.block-input .bg { background: #212121; }
    body.white .play-btn.block-input .bg,
    body.white .play-btn.block-input .bg-top,
    body.white .play-btn.block-input .bg-right { background: #212121; }
    body.white .games-header h1,
    body.white .game-title,
    body.white .block-cube.block-input .text { color: #212121; }
    body.white .dotcom { color: #636363; }
    body.white .nav-button,
    body.white .theme-toggle { filter: invert(0) brightness(0) contrast(1) saturate(1); }
}


/* ================================================================
    SÓLO RATÓN
   ================================================================ */
@media (hover: hover) and (pointer: fine) {
    .titulo-container:hover .titulo-underline { transform: scaleX(0); }

    .block-cube.block-input:hover > .bg-top,
    .block-cube.block-input:hover > .bg-right,
    .block-cube.block-input:hover > .bg { background: rgba(255,255,255,0.8); }
    .block-cube.block-cube-hover:hover > .bg > .bg-inner { top: 100%; }
    .play-btn.block-input:hover .text { color: #212121; }

    /* modo noche: hover → fondo blanco → imagen oscura */
    .block-cube.block-input:hover .nav-button,
    .block-cube.block-input:hover .theme-toggle { filter: invert(0); color: #212121; }

    body.white .block-cube.block-input:hover > .bg-top,
    body.white .block-cube.block-input:hover > .bg-right,
    body.white .block-cube.block-input:hover > .bg { background: #212121; }
    body.white .block-cube.block-cube-hover:hover > .bg > .bg-inner { top: 100%; }
    body.white .play-btn.block-input:hover .text { color: white; }
    /* modo claro: hover → fondo oscuro → imagen blanca */
    body.white .block-cube.block-input:hover .nav-button,
    body.white .block-cube.block-input:hover .theme-toggle { filter: invert(1); color: #eee; }
}