/* ===== Virtual Keyboard (Mobile) ===== */
/* Layout mirrors the PC Keyboard debug panel exactly:
   20-column grid (15 main + 1 spacer + 4 numpad).
   Keys scale to fit viewport width via CSS custom property. */

#softKbd {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 800;
    background: #0d1220;
    border-top: 1px solid #445;
    padding: 2px 2px env(safe-area-inset-bottom, 2px) 2px;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    position: relative;

    /* Key size scales to viewport width.
       20 keys + 19 gaps(1px) + 4px padding = need ~20*W + 23.
       --skb-key: calc((100vw - 23px) / 20)  but clamped 16-30px. */
    --skb-key: clamp(16px, calc((100vw - 23px) / 20), 30px);
    --skb-gap: 1px;
}
#softKbd[hidden] { display: none !important; }

/* Close button */
.skb-close {
    position: absolute;
    top: 0;
    right: 2px;
    width: 22px;
    height: 22px;
    background: transparent;
    border: none;
    color: #667;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    z-index: 1;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    padding: 0;
}
.skb-close:active { color: #fff; }

/* Rows */
.skb-row { display: flex; gap: var(--skb-gap); justify-content: center; }

/* Key cell */
.skb-key {
    background: #1a2a3a;
    color: #8899aa;
    border: 1px solid #2a3a4a;
    border-radius: 3px;
    font-family: 'Courier New', monospace;
    font-size: clamp(7px, calc(var(--skb-key) * 0.4), 10px);
    width: var(--skb-key);
    height: var(--skb-key);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    flex-grow: 0;
    cursor: pointer;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
    padding: 0;
    overflow: hidden;
}

/* Spacer */
.skb-spacer {
    width: var(--skb-key);
    height: var(--skb-key);
    flex-shrink: 0;
    flex-grow: 0;
}

/* Special widths — scale proportionally */
.skb-key.enter-wide { width: calc(var(--skb-key) * 2 + var(--skb-gap)); }
.skb-key.space {
    /* 8 keys + 7 gaps */
    width: calc(var(--skb-key) * 8 + var(--skb-gap) * 7);
}

/* Active / held state */
.skb-key.active { background: #2a5a8a; color: #fff; border-color: #4ea8de; }
.skb-key.ctrl.active,
.skb-key.shift.active { background: #3a6a3a; border-color: #5c5; }

/* LED indicators (CAP, カナ) */
.skb-key.led { border-bottom: 2px solid #522; }
.skb-key.led.active { border-bottom-color: #e44; }

/* BREAK key */
.skb-key.break-key { border-color: #c44; color: #c88; }
.skb-key.break-key.active { background: #8a2a2a; border-color: #f66; color: #fff; }

/* CG ROM composite glyph (matches Keyboard panel) */
.skb-key .skb-glyph {
    width: calc(var(--skb-key) - 2px);
    height: calc(var(--skb-key) - 2px);
    image-rendering: pixelated;
    image-rendering: crisp-edges;
    pointer-events: none;
}

/* Hide on true desktop: mouse-primary AND no touch support.
   'pointer: fine' alone is not enough (iPad + Magic Keyboard reports fine).
   Use 'any-pointer: coarse' to detect touch capability regardless of
   primary pointer — if ANY pointer is coarse, this is a touch device. */
@media (pointer: fine) and (hover: hover) and (any-pointer: fine) and (not (any-pointer: coarse)) {
    #softKbd { display: none !important; }
}