:root {
    color-scheme: dark;
    --cyan: #25e6ff;
    --pink: #ff257d;
    --yellow: #ffd43b;
    --panel: rgba(5, 4, 16, .82);
    --mobile-controls-height: 182px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { width: 100%; min-height: 100%; margin: 0; }
body {
    overflow: hidden;
    background:
        radial-gradient(circle at 50% 25%, rgba(142, 37, 255, .32), transparent 38%),
        linear-gradient(180deg, #13051f, #030107 75%);
    font-family: "Oxanium", "Arial Black", Impact, sans-serif;
    font-weight: 700;
    letter-spacing: .02em;
    color: #fff;
}
button { font: inherit; font-style: italic; font-weight: 800; letter-spacing: .04em; }
.game-app {
    width: 100vw;
    height: 100dvh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.game-shell {
    position: relative;
    flex: 0 0 auto;
    width: min(100vw, calc(100dvh * 16 / 9));
    height: min(100dvh, calc(100vw * 9 / 16));
    overflow: hidden;
    background: #000;
    border: 3px solid rgba(37, 230, 255, .85);
    box-shadow: 0 0 18px rgba(37, 230, 255, .55), 0 0 48px rgba(255, 37, 125, .35);
}
#game { display: block; width: 100%; height: 100%; background: #05030a; image-rendering: auto; touch-action: none; }
.loading-screen {
    position: absolute; inset: 0; z-index: 30;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    background: radial-gradient(circle, #281042, #05030a 70%);
    transition: opacity .35s ease, visibility .35s ease;
}
.loading-screen.hidden { opacity: 0; visibility: hidden; }
.loading-brand-logo {
    width: min(58vw, 430px);
    max-height: 250px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(37,230,255,.45)) drop-shadow(0 0 28px rgba(255,37,125,.32));
}
.loading-bar { width: min(70%, 520px); height: 18px; margin-top: 28px; padding: 3px; border: 2px solid var(--cyan); background: #070914; }
.loading-bar span { display: block; width: 0; height: 100%; background: linear-gradient(90deg, var(--pink), var(--yellow)); transition: width .15s; }
.loading-screen p { color: #c9f8ff; letter-spacing: .08em; font-style: italic; font-weight: 800; text-transform: uppercase; }
.fullscreen-btn {
    position: absolute; right: 10px; top: 10px; z-index: 20;
    width: 42px; height: 42px; border: 1px solid rgba(255,255,255,.35); border-radius: 10px;
    background: rgba(0,0,0,.58); color: #fff; cursor: pointer; font-size: 24px;
}

/* En escritorio no se muestran controles táctiles. */
.mobile-controls { display: none; }

@media (hover: none), (pointer: coarse), (max-width: 900px) {
    body { overflow: auto; }
    .game-app {
        min-height: 100dvh;
        height: auto;
        justify-content: flex-start;
        overflow: auto;
        padding: 0 0 max(8px, env(safe-area-inset-bottom));
        background: linear-gradient(180deg, #08020d, #13051f);
    }
    .game-shell {
        width: min(100vw, calc((100dvh - var(--mobile-controls-height)) * 16 / 9));
        height: min(calc(100dvh - var(--mobile-controls-height)), calc(100vw * 9 / 16));
        min-height: 210px;
        border-width: 0 0 2px;
        box-shadow: 0 8px 28px rgba(0,0,0,.65);
    }
    .fullscreen-btn { top: 7px; right: 7px; }
    .mobile-controls {
        position: relative;
        flex: 0 0 var(--mobile-controls-height);
        display: block;
        width: min(100vw, 760px);
        height: var(--mobile-controls-height);
        pointer-events: none;
        background:
            radial-gradient(circle at 22% 50%, rgba(37,230,255,.13), transparent 28%),
            radial-gradient(circle at 78% 50%, rgba(255,37,125,.13), transparent 28%),
            rgba(3,3,12,.96);
        border-top: 1px solid rgba(37,230,255,.35);
    }
    .mobile-controls button {
        pointer-events: auto;
        position: absolute;
        border: 2px solid rgba(255,255,255,.65);
        color: #fff;
        background: rgba(8,8,22,.76);
        box-shadow: inset 0 0 13px rgba(37,230,255,.3), 0 5px 14px rgba(0,0,0,.4);
        user-select: none;
        touch-action: none;
    }
    .dpad { position: absolute; left: 4%; bottom: 8px; width: 166px; height: 166px; }
    .dpad button { width: 56px; height: 56px; border-radius: 14px; font-size: 22px; }
    .dpad .up { left: 55px; top: 0; }
    .dpad .left { left: 0; top: 55px; }
    .dpad .down { left: 55px; top: 110px; }
    .dpad .right { left: 110px; top: 55px; }
    .action-pad { position: absolute; right: 4%; bottom: 8px; width: 205px; height: 166px; }
    .action-pad button { width: 64px; height: 64px; border-radius: 50%; font-size: 23px; font-weight: 900; }
    .action-pad .punch { right: 0; top: 50px; background: rgba(255,37,125,.66); }
    .action-pad .kick { right: 65px; top: 96px; background: rgba(255,145,0,.66); }
    .action-pad .jump { right: 65px; top: 4px; background: rgba(37,230,255,.58); }
    .action-pad .special { right: 130px; top: 50px; background: rgba(106,255,77,.58); }
    .mobile-controls button.pressed { transform: scale(.9); filter: brightness(1.5); }
}

@media (max-width: 470px) {
    :root { --mobile-controls-height: 160px; }
    .dpad { transform: scale(.82); transform-origin: left bottom; }
    .action-pad { transform: scale(.82); transform-origin: right bottom; }
}

@media (hover: none) and (pointer: coarse) and (orientation: landscape) {
    :root { --mobile-controls-height: 118px; }
    .game-shell {
        min-height: 0;
        width: min(100vw, calc((100dvh - var(--mobile-controls-height)) * 16 / 9));
        height: min(calc(100dvh - var(--mobile-controls-height)), calc(100vw * 9 / 16));
    }
    .dpad { left: 5%; bottom: -2px; transform: scale(.62); transform-origin: left bottom; }
    .action-pad { right: 5%; bottom: -2px; transform: scale(.62); transform-origin: right bottom; }
}

:fullscreen .game-app,
.game-app:fullscreen {
    background: #030107;
}