/* On-screen controls for the in-browser player (touchpad.js) — shared by the player modal and the
   embed page, which lay them out under the player (portrait) or beside it (landscape).
   Portrait: the game's keys in one block across the top, the stick and the fire button under them.
   Landscape: the keyboard's left half above the stick, its right half above the fire button.
   A key block (.emu-kb) keeps the keys where they are on the machine's keyboard: touchpad.js sets
   its size in key widths (--cols × --rows) and places each key in it in percent. */
:root { --emu-stick: clamp(110px, min(40vw, 30vh), 180px); --emu-key: 46px; }
@media (orientation: landscape) {
    :root { --emu-stick: clamp(96px, min(22vw, 42vh), 170px); --emu-key: 42px; }
}

.emu-touch {
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto; grid-template-rows: minmax(0, 1fr) auto;
    align-items: end; column-gap: 12px; row-gap: 10px;
    box-sizing: border-box; padding: 12px 16px calc(18px + env(safe-area-inset-bottom, 0px));
    background: #101020; color: #e7e7f2;
    touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
.emu-touch[hidden] { display: none !important; }
.emu-touch-left, .emu-touch-right { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; }
.emu-touch-left { grid-column: 1; grid-row: 2; }
.emu-touch-right { grid-column: 3; grid-row: 2; }

.emu-stick {
    position: relative; flex: none; box-sizing: border-box;
    width: var(--emu-stick); height: var(--emu-stick); border-radius: 50%;
    background: radial-gradient(circle, #23233a 0 52%, #1a1a2e 53%);
    border: 2px solid #352a5e; touch-action: none; cursor: pointer;
}
.emu-stick-knob {
    position: absolute; left: 29%; top: 29%; width: 42%; height: 42%; box-sizing: border-box;
    border-radius: 50%; background: #3a3a5c; border: 2px solid #7cc8ff;
    box-shadow: 0 4px 10px rgba(0, 0, 0, .5); pointer-events: none;
}
.emu-stick-arrow { position: absolute; width: 0; height: 0; border: 9px solid transparent; pointer-events: none; }
.emu-stick-arrow.is-up { left: calc(50% - 9px); top: 5%; border-top-width: 0; border-bottom-color: #6b6b88; }
.emu-stick-arrow.is-down { left: calc(50% - 9px); bottom: 5%; border-bottom-width: 0; border-top-color: #6b6b88; }
.emu-stick-arrow.is-left { top: calc(50% - 9px); left: 5%; border-left-width: 0; border-right-color: #6b6b88; }
.emu-stick-arrow.is-right { top: calc(50% - 9px); right: 5%; border-right-width: 0; border-left-color: #6b6b88; }
.emu-stick-arrow.is-up.is-on { border-bottom-color: #7cffa0; }
.emu-stick-arrow.is-down.is-on { border-top-color: #7cffa0; }
.emu-stick-arrow.is-left.is-on { border-right-color: #7cffa0; }
.emu-stick-arrow.is-right.is-on { border-left-color: #7cffa0; }

.emu-fire {
    display: flex; align-items: center; justify-content: center; flex: none; box-sizing: border-box;
    width: calc(var(--emu-stick) * .62); height: calc(var(--emu-stick) * .62); border-radius: 50%;
    background: #e94560; border: 3px solid #ff8fa3; box-shadow: 0 5px 0 #8a1f33;
    color: #fff; font-weight: bold; font-size: .95rem; letter-spacing: .06em;
    touch-action: none; cursor: pointer;
}
.emu-fire.is-on { background: #ff5c77; transform: translateY(4px); box-shadow: 0 1px 0 #8a1f33; }
.emu-stick[hidden], .emu-fire[hidden] { display: none; }

/* The key blocks: at most --emu-key a key, and no taller than --kb-h. */
.emu-kb {
    position: relative; flex: none; container-type: inline-size;
    width: min(100%, calc(var(--cols) * var(--emu-key)), calc(var(--kb-h) * var(--cols) / var(--rows)));
    aspect-ratio: var(--cols) / var(--rows);
}
.emu-kb[hidden] { display: none !important; }
.emu-kb.is-full { grid-column: 1 / -1; grid-row: 1; justify-self: center; align-self: center; --kb-h: 26vh; }
.emu-touch.no-stick.no-fire .emu-kb.is-full { --kb-h: 42vh; }
.emu-kb.is-left, .emu-kb.is-right { display: none; }
@media (orientation: landscape) {
    .emu-kb.is-full { display: none; }
    .emu-kb.is-left, .emu-kb.is-right { display: block; }
    .emu-kb.is-left { --kb-h: calc(100vh - var(--emu-stick) - 7rem); }
    .emu-kb.is-right { --kb-h: calc(100vh - var(--emu-stick) * .62 - 7rem); }
    .emu-touch.no-stick .emu-kb.is-left, .emu-touch.no-fire .emu-kb.is-right { --kb-h: calc(100vh - 5rem); }
}
.emu-kb-cell { position: absolute; box-sizing: border-box; padding: 2px; }

.emu-touch-key {
    display: flex; align-items: center; justify-content: center; box-sizing: border-box;
    width: 100%; height: 100%; padding: 0 1px; overflow: hidden; border-radius: 6px;
    background: #23233a; border: 1px solid #352a5e; box-shadow: 0 3px 0 #0b0b16;
    color: #e7e7f2; font-weight: bold; text-align: center; line-height: 1.05; white-space: pre-line;
    font-size: clamp(7px, calc(100cqw / var(--cols) * .28), 13px);
    touch-action: none; cursor: pointer;
}
.emu-touch-key.is-on { background: #352a5e; transform: translateY(2px); box-shadow: 0 1px 0 #0b0b16; }
.emu-touch-key.is-locked { background: #4a3a7e; border-color: #7cc8ff; }