/* ---------- Doom (WebAssembly build, doomgeneric + Freedoom) ---------- */

#playStage canvas {
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
}

/* Bigger play area on desktop — the shared `.play-stage canvas` rule caps
   every game at 560px, which is cramped for a first-person 3D view. */
@media (min-width: 900px) {
    #playStage canvas {
        width: 100%;
        max-width: 900px;
        height: auto;
    }
}

/* In fullscreen the desktop-size rule above (an #id selector) would
   otherwise beat the site's generic `.play-stage:fullscreen canvas` rule
   and cap Doom at 900px even at fullscreen. Also, `width: auto` (as the
   generic rule uses) just falls back to the canvas's own small 640x400
   bitmap size instead of stretching it — so this computes an explicit
   width/height that fills as much of the screen as possible while
   keeping Doom's fixed 640:400 (1.6:1) aspect ratio. */
#playStage:fullscreen canvas,
#playStage:-webkit-full-screen canvas {
    width: min(96vw, calc(92vh * 1.6));
    height: min(92vh, calc(96vw / 1.6));
    max-width: none;
    max-height: none;
}

.doom-loading {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 18px;
    text-align: center;
    padding: 0 24px;
    color: #E7EEF5;
    font-size: 0.95rem;
    background: rgba(11, 22, 34, 0.85);
    border-radius: 12px;
}

.doom-loading small {
    color: rgba(231, 238, 245, 0.55);
    font-size: 0.78rem;
}

/* ---------- Loading animation: the Solvoo logo's own two eyes ---------- */

.doom-eyes {
    display: flex;
    gap: 14px;
}

.doom-eye {
    position: relative;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: #fff;
    box-sizing: border-box;
    border: 8px solid;
    animation: doom-blink 3.2s ease-in-out infinite;
}

.doom-eye-yellow { border-color: #FFC400; }
.doom-eye-blue { border-color: #4A9FE0; animation-delay: 0.12s; }

.doom-pupil {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px;
    height: 16px;
    margin: -8px 0 0 -8px;
    border-radius: 50%;
    background: #1a1a1a;
    animation: doom-look 1.8s ease-in-out infinite;
}

.doom-pupil::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: #fff;
}

@keyframes doom-look {
    0%, 100% { transform: translateX(-4px); }
    50% { transform: translateX(4px); }
}

@keyframes doom-blink {
    0%, 88%, 100% { transform: scaleY(1); }
    92% { transform: scaleY(0.12); }
}

/* small, unobtrusive attribution line (replaces Emscripten's default
   "powered by" banner, which this integration doesn't use at all) */
.doom-credit {
    text-align: center;
    font-size: 0.72rem;
    color: rgba(231, 238, 245, 0.45);
    margin: -18px 0 24px;
}

.doom-credit a {
    color: rgba(231, 238, 245, 0.6);
}

/* ---------- Touch controls (shown only on coarse-pointer devices) ---------- */

.doom-touch-controls {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    padding: 0 14px;
    pointer-events: none;
    z-index: 6;
}

.doom-touch-controls .doom-btn {
    pointer-events: auto;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
    background: rgba(11, 22, 34, 0.72);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #E7EEF5;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doom-dpad {
    position: relative;
    width: 132px;
    height: 132px;
}

.doom-dpad .doom-btn {
    position: absolute;
    width: 44px;
    height: 44px;
    border-radius: 10px;
    font-size: 1.1rem;
}

.doom-dpad-up { top: 0; left: 44px; }
.doom-dpad-left { top: 44px; left: 0; }
.doom-dpad-right { top: 44px; left: 88px; }
.doom-dpad-down { top: 88px; left: 44px; }

.doom-actions {
    display: flex;
    align-items: flex-end;
    gap: 8px;
}

.doom-btn-round {
    width: 48px;
    height: 48px;
    border-radius: 999px;
    font-size: 0.68rem;
}

.doom-btn-fire {
    width: 62px;
    height: 62px;
    border-radius: 999px;
    font-size: 0.78rem;
    background: rgba(230, 0, 122, 0.75);
    border-color: rgba(255, 255, 255, 0.35);
}

@media (min-width: 900px) {
    /* on wide screens (rarely a real touch device) keep controls out of
       the way of the game view */
    .doom-touch-controls { display: none; }
}