/* ==================================================================
   RAMAPANI RETRO KEYS: a tape-deck transport and a small display
   ------------------------------------------------------------------
   Shared by Drift and Trance. Each app sets the --rk-* colours.

   <div class="rk-deck">
     <button class="rk-key" aria-pressed="false"><span class="rk-led"></span><svg/>…<span class="rk-label">Play</span></button>
   </div>
   <div class="rk-lcd">…</div>
================================================================== */
.rk-deck {
    display: inline-flex; align-items: flex-end; gap: 6px;
    padding: 9px 9px 11px; border-radius: 14px;
    background: var(--rk-tray, linear-gradient(180deg, #120d0a, #1e1610));
    box-shadow: inset 0 2px 7px rgba(0, 0, 0, .65), inset 0 -1px 0 rgba(255, 255, 255, .06), 0 1px 0 rgba(255, 255, 255, .06);
}
.rk-key {
    position: relative; flex: 0 0 auto;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-width: 62px; height: 56px; padding: 10px 10px 7px; margin: 0;
    border: 0; border-radius: 6px 6px 8px 8px; cursor: pointer;
    color: var(--rk-ink, #2b2219);
    background: linear-gradient(180deg, var(--rk-face-hi, #f6efe2) 0%, var(--rk-face, #e0d3bb) 58%, var(--rk-face-lo, #c9b99c) 100%);
    box-shadow: 0 5px 0 var(--rk-edge, #7a6649), 0 7px 10px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .75);
    transform: translateY(-4px);
    transition: transform .07s ease, box-shadow .07s ease, filter .15s ease;
    font: 700 10px/1 var(--rk-font, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important;
    letter-spacing: .14em; text-transform: uppercase;
    -webkit-tap-highlight-color: transparent;
}
.rk-key svg { width: 19px; height: 19px; fill: currentColor; flex: 0 0 auto; }
.rk-key .rk-label { display: block; }
.rk-key .l-pause, .rk-key[aria-pressed="true"] .l-play { display: none; }
.rk-key[aria-pressed="true"] .l-pause { display: inline; }
.rk-key:hover { filter: brightness(1.05); }
.rk-key:active, .rk-key[aria-pressed="true"] {
    transform: translateY(1px);
    box-shadow: 0 0 0 var(--rk-edge, #7a6649), 0 2px 3px rgba(0, 0, 0, .45), inset 0 2px 4px rgba(0, 0, 0, .22);
}
.rk-key[aria-pressed="true"] { background: linear-gradient(180deg, var(--rk-face, #e0d3bb) 0%, var(--rk-face-lo, #c9b99c) 100%); }
.rk-key:focus-visible { outline: 2px solid var(--rk-led, #ffb347); outline-offset: 3px; }
.rk-key:disabled { cursor: default; filter: saturate(.4) brightness(.85); }
.rk-led {
    position: absolute; top: 6px; right: 7px; width: 6px; height: 6px; border-radius: 50%;
    background: rgba(0, 0, 0, .28); box-shadow: inset 0 1px 1px rgba(0, 0, 0, .45);
}
.rk-key[aria-pressed="true"] .rk-led { background: var(--rk-led, #ffb347); box-shadow: 0 0 7px var(--rk-led, #ffb347), inset 0 0 2px #fff; }
.rk-key.is-stop { color: var(--rk-stop, #b3261e); }
.rk-key.is-rec { color: var(--rk-rec, #c0271d); }
.rk-key.is-rec[aria-pressed="true"] .rk-led { background: #ff3b30; box-shadow: 0 0 8px #ff3b30; animation: rk-blink 1s steps(2, start) infinite; }
@keyframes rk-blink { to { visibility: hidden; } }

.rk-lcd {
    position: relative; overflow: hidden;
    padding: 9px 13px; border-radius: 9px;
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    color: var(--rk-lcd-ink, #ffbf5e);
    background: var(--rk-lcd, linear-gradient(180deg, #1d1508, #120c04));
    text-shadow: 0 0 6px var(--rk-lcd-glow, rgba(255, 175, 70, .45));
    box-shadow: inset 0 2px 9px rgba(0, 0, 0, .75), 0 1px 0 rgba(255, 255, 255, .06);
}
.rk-lcd::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: repeating-linear-gradient(180deg, rgba(0, 0, 0, .16) 0 1px, transparent 1px 3px);
}
@media (prefers-reduced-motion: reduce) { .rk-key.is-rec[aria-pressed="true"] .rk-led { animation: none; } }