/* SNES-style CRT presentation. The game canvas is 256x224 internal,
   upscaled to fit the viewport. Width and height are sized directly
   (not via a scale variable) so the canvas always fills the largest
   integer-friendly box that fits the viewport without overflowing. */
:root {
    --bg: #050308;
    --fg: #d8c8e8;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--fg);
    font-family: 'Courier New', monospace;
    overflow: hidden;
    height: 100%;
    width: 100%;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    user-select: none;
}

#crt {
    position: relative;
    /* Pin aspect ratio at 256:224 and let width fill the smaller of:
       - 96% of viewport width
       - the height-derived width: (100vh - 80px) * (256/224)
       The (256/224) ≈ 1.143 factor keeps height under (100vh - 80px). */
    width: min(96vw, calc((100vh - 80px) * (256 / 224)));
    aspect-ratio: 256 / 224;
    box-shadow: 0 0 80px rgba(120, 40, 40, 0.4), inset 0 0 40px rgba(0, 0, 0, 0.7);
    border-radius: 4px;
    overflow: hidden;
    background: #000;
}

#screen {
    width: 100%;
    height: 100%;
    image-rendering: pixelated;
    image-rendering: -moz-crisp-edges;
    image-rendering: crisp-edges;
    display: block;
}

#scanlines {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.18) 3px
    );
    pointer-events: none;
    mix-blend-mode: multiply;
}

#vignette {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.6) 100%);
    pointer-events: none;
}

/* R364: CRT barrel-curve effect — gives the screen a subtle convex
   bulge like an old tube TV. Toggled from the OPTIONS menu via
   body.crt-curve. Pure CSS so it costs zero per-frame work; the only
   tradeoff is the canvas edges get slightly cropped at the corners,
   which is exactly the CRT look. Subtle (3% scale) so it doesn't
   overpower the painted art. Curved corners read as actual screen
   curvature via the radial vignette already in place. */
body.crt-curve #crt {
    transform: perspective(1200px) scale(1.03);
    transform-origin: center center;
    border-radius: 24px / 12px;
    box-shadow:
        0 0 80px rgba(120, 40, 40, 0.4),
        inset 0 0 60px rgba(0, 0, 0, 0.85),
        inset 0 0 8px rgba(255, 255, 255, 0.04);
}
body.crt-curve #scanlines {
    /* Stronger scanlines feel right paired with the curve */
    background: repeating-linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0) 0,
        rgba(0, 0, 0, 0) 2px,
        rgba(0, 0, 0, 0.28) 3px
    );
}
body.crt-curve #vignette {
    background: radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.85) 100%);
}

#hint {
    font-size: 11px;
    letter-spacing: 1px;
    color: #6a5078;
    text-align: center;
    opacity: 0.7;
}

/* Hint text shrinks slightly on very small viewports. The canvas itself
   scales fluidly via --scale, so no media query needed for sizing. */
@media (max-width: 560px) {
    #hint { font-size: 9px; }
    /* Hide the keyboard hint on touch devices — overlay buttons replace it. */
    body:has(#touch-overlay[data-active="true"]) #hint { display: none; }
}

/* Touch overlay: hidden by default, revealed by input.js when it detects
   a touch-capable device. Buttons sit on top of the canvas in the CRT frame
   so the canvas keeps full visual real estate when the overlay's off. */
#touch-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    display: none;
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
    z-index: 5;
}
#touch-overlay[data-active="true"] { display: block; }

#touch-overlay .dpad,
#touch-overlay .actions {
    position: absolute;
    bottom: 6%;
    pointer-events: auto;
}
#touch-overlay .dpad    { left: 4%; width: 28%; aspect-ratio: 1; }
#touch-overlay .actions { right: 4%; width: 28%; aspect-ratio: 1; }

#touch-overlay .dpad-btn,
#touch-overlay .act-btn {
    position: absolute;
    background: rgba(20, 12, 28, 0.55);
    border: 1px solid rgba(168, 32, 32, 0.55);
    color: #ffe070;
    font-family: 'Courier New', monospace;
    font-size: 14px;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    pointer-events: auto;
    transition: background 60ms;
}
#touch-overlay .dpad-btn.held,
#touch-overlay .act-btn.held {
    background: rgba(168, 32, 32, 0.75);
    color: #fff;
}

/* D-pad cross layout — 3x3 grid where corner cells are empty */
#touch-overlay .dpad-btn { width: 33%; height: 33%; }
#touch-overlay .dpad-up    { top: 0; left: 33%; }
#touch-overlay .dpad-down  { bottom: 0; left: 33%; }
#touch-overlay .dpad-left  { top: 33%; left: 0; }
#touch-overlay .dpad-right { top: 33%; right: 0; }

/* Action buttons: triangle layout (jump top, shoot right, special bottom).
   Grenade tucks left of the triangle as a fourth circle so the triangle's
   muscle-memory stays intact. */
#touch-overlay .act-btn { width: 38%; height: 38%; }
#touch-overlay .act-jump    { top: 0; right: 31%; }
#touch-overlay .act-shoot   { top: 31%; right: 0; background: rgba(60, 16, 16, 0.65); }
#touch-overlay .act-special { bottom: 0; right: 31%; }
#touch-overlay .act-grenade { top: 31%; left: 0; width: 30%; height: 30%; background: rgba(16, 60, 16, 0.65); }
#touch-overlay .act-pause   { top: 4%; right: 4%; width: 8%; aspect-ratio: 1; font-size: 12px; }