*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background: #07070e;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    min-height: 100vh; padding: 8px; gap: 10px;
    font-family: 'Press Start 2P', 'Courier New', monospace; color: #ccc;
    user-select: none; -webkit-user-select: none;
    -webkit-touch-callout: none;
    overflow: hidden;
}
#hud {
    display: flex; flex-direction: column; gap: 3px;
    width: min(600px, calc(100vw - 16px));
    font-size: 12px; letter-spacing: 0;
    opacity: 1; transition: opacity 0.15s;
    order: 1;
}
#hud.hidden { opacity: 0; pointer-events: none; }
.hud-row { display: flex; justify-content: space-between; width: 100%; }
.hl { color: #888; } .hv { color: #7fff7f; }
#lives-group { display: inline-flex; align-items: center; gap: 4px; }
.hv-wrap { display: inline-flex; align-items: baseline; }
#topbar {
    width: min(600px, calc(100vw - 16px));
    display: flex; justify-content: space-between; align-items: center; padding: 0 2px;
    order: 2;
}
#fps-el { font: 8px 'Press Start 2P',monospace; color: #7aaa7a; background: #111; border: 1px solid #4a4a4a; border-radius: 3px; padding: 3px; display: inline-flex; align-items: center; }
#btn-mute {
    background: #0d180d; border: 1px solid #3a5a3a;
    cursor: pointer; border-radius: 3px; padding: 3px;
    display: flex; align-items: center; justify-content: center;
    -webkit-tap-highlight-color: transparent; line-height: 0;
}
#btn-mute canvas { image-rendering: pixelated; display: block; }
#btn-mute:hover { border-color: #7fff7f; }
#btn-mute.muted { border-color: #5a2a2a; }
#wrap { width: min(600px, calc(100vw - 16px)); order: 3; }
#c { display: block; width: 100%; height: auto; border: 1px solid #2a2a4e; touch-action: none; }
#gamepad { display: none; order: 4; }
#dpad-c { touch-action: none; display: block; border: 1px solid #3a5a3a; border-radius: 6px; overflow: hidden; }
.sbtn {
    background: #0d180d; border: 1px solid #3a5a3a; color: #7fff7f;
    font: 8px 'Press Start 2P',monospace; cursor: pointer; border-radius: 6px;
    -webkit-tap-highlight-color: transparent; display: flex; align-items: center; justify-content: center;
}
.sbtn:active { background: #1a3a1a; border-color: #7fff7f; }
@media (pointer: coarse) {
    #gamepad { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
    #btn-esc   { grid-column: 1; grid-row: 1; }
    #btn-pause { grid-column: 2; grid-row: 1; }
    #dpad-c    { grid-column: 1 / span 2; grid-row: 2; width: min(150px, 45vw); height: min(150px, 45vw); }
    #btn-start { grid-column: 1; grid-row: 3; }
    #btn-ok    { grid-column: 2; grid-row: 3; }
    body.lefty #btn-pause { grid-column: 1; }
    body.lefty #btn-esc   { grid-column: 2; }
    body.lefty #btn-ok    { grid-column: 1; }
    body.lefty #btn-start { grid-column: 2; }
    #gamepad.splash #dpad-c,
    #gamepad.splash #btn-esc { opacity: 0.2; pointer-events: none; }
    .sbtn { height: 48px; }
}
.sbtn.dim { opacity: 0.3; pointer-events: none; }
#side-info { display: contents; }
@media (min-width: 700px) and (min-height: 500px) {
    #wrap, #hud, #topbar {
        width: min(calc((100vh - 100px) * 1.5), calc(100vw - 32px), 800px);
    }
}
/* Portrait touch: align to bottom so controls sit close to thumb reach */
@media (pointer: coarse) and (orientation: portrait) {
    body { min-height: 100dvh; justify-content: flex-end; padding-top: 0; padding-bottom: 64px; }
    #gamepad { margin-top: 28px; }
}
@media (pointer: coarse) and (orientation: landscape) {
    body {
        flex-direction: row; align-items: stretch; justify-content: center;
        /* No vertical padding so canvas fills full screen height.
           Tiny horizontal padding keeps panels off the screen edge. */
        padding: 0 3px; gap: 6px; height: 100dvh; min-height: unset;
    }
    /* Side info panel — 100px; floats left or right depending on handed setting */
    #side-info {
        display: flex; flex-direction: column; justify-content: flex-start;
        align-items: center; gap: 14px;
        width: 100px; flex-shrink: 0; overflow: hidden;
        position: relative;
        padding: 16px 4px;
    }
    #topbar { width: auto; padding: 0; gap: 8px; order: 0; }
    #fps-el { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); }
    #hud { width: auto; flex-direction: column; gap: 8px; margin-top: auto; margin-bottom: auto; }
    .hud-row { flex-direction: column; gap: 8px; }
    .hud-row > span { display: flex; flex-direction: column; gap: 2px; }
    #lives-group { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; margin-bottom: 3px; }
    #wrap {
        flex: 1; min-width: 0; width: auto;
        display: flex; align-items: center; justify-content: center;
    }
    /* 32px = 2 * 16px side-info padding, so canvas margins match SND/FPS inset exactly */
    #c {
        width: min(calc((100dvh - 32px) * 1.5), 100%);
        height: auto;
    }
    /* Right controls panel — ESC, PAUSE, dpad, A:OK, START stacked top to bottom */
    #gamepad {
        display: flex; flex-direction: column; flex-shrink: 0;
        width: min(120px, 28vw); align-items: center; justify-content: center; gap: 12px;
    }
    #btn-esc   { order: 1; }
    #btn-pause { order: 2; }
    #dpad-c    { order: 3; width: min(120px, 28vw); height: min(120px, 28vw); }
    #btn-ok    { order: 4; }
    #btn-start { order: 5; }
    .sbtn { width: min(120px, 28vw); height: 40px; }
    /* Left-handed: controls move to left panel, info to right; canvas leans right */
    body.lefty #gamepad   { order: 1; }
    body.lefty #wrap      { order: 2; }
    body.lefty #side-info { order: 3; }
}
#name-inp {
    position: fixed; left: -9999px; top: 15%; width: 1px; height: 1px; opacity: 0;
}