/* remote.css: the TOKAIDO RC-V92 (js/remote.js). A chunky early-90s IR remote: charcoal plastic, a smoked-red
   IR window on the nose, grey rubber keys, a red POWER, a white PLAY, rocker pairs for TRACKING and CHANNEL.
   Designed at 220px wide; js sets --rm-s so it fits beside / below the picture without covering it. */

.rm { position: fixed; z-index: 92; left: 0; top: 0; width: 220px; transform-origin: 0 0; transform: scale(var(--rm-s, 1));
  touch-action: none; -webkit-tap-highlight-color: transparent; user-select: none; -webkit-user-select: none; }
.rm[hidden] { display: none; }
.rm-slide { transform: translateY(105vh); transition: transform .42s cubic-bezier(.5,0,.75,0); will-change: transform; }
.rm.up .rm-slide { transform: none; transition: transform .52s cubic-bezier(.2,.9,.3,1.08); }
.rm.dragging .rm-slide { transition: none; }

.rm-body { position: relative; width: 220px; height: 470px; padding: 0 16px; box-sizing: border-box;
  border-radius: 34px 34px 22px 22px / 30px 30px 18px 18px;
  background:
    radial-gradient(120% 40% at 30% 0%, rgba(255,255,255,.10), transparent 60%),
    linear-gradient(90deg, rgba(0,0,0,.45), transparent 9%, transparent 91%, rgba(0,0,0,.5)),
    linear-gradient(180deg, #303034, #1d1d20 40%, #18181a);
  box-shadow: 0 -2px 0 rgba(255,255,255,.08) inset, 0 2px 0 rgba(255,255,255,.12) inset,
    0 18px 40px rgba(0,0,0,.65), 0 4px 10px rgba(0,0,0,.5);
  font-family: Archivo, system-ui, sans-serif; color: #d9d2c3; }
.rm-body::after { /* the TV's light on the plastic */ content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(180deg, rgb(var(--tv-light, 120 140 255) / calc(var(--tv-lum, .3) * var(--tv-on, 0) * .22)), transparent 45%);
  mix-blend-mode: screen; }

/* the nose: smoked-red IR window with the LED behind it */
.rm-cap { height: 28px; display: flex; justify-content: center; align-items: flex-end; }
.rm-irwin { position: relative; display: block; width: 74px; height: 14px; border-radius: 8px 8px 4px 4px;
  background: linear-gradient(180deg, #4a0c10, #210406 60%, #2e0709);
  box-shadow: inset 0 1px 0 rgba(255,140,140,.25), inset 0 -2px 4px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.07); }
/* the LED keeps a readable size when the whole remote is scaled down (the desktop room): --led-k grows it back */
.rm { --led-k: min(1.8, max(1, calc(1 / var(--rm-s, 1)))); }
.rm-led { position: absolute; left: 50%; top: 50%; width: calc(7px * var(--led-k)); height: calc(7px * var(--led-k));
  transform: translate(-50%, -50%); border-radius: 50%; background: #3a0507; }
.rm-led.tx { animation: rmTx .26s steps(1, end); }
.rm-led.hold { animation: rmHold .12s steps(1, end) infinite; }
@keyframes rmHold { 0% { background: #ff3b30; box-shadow: 0 0 calc(8px * var(--led-k)) calc(3px * var(--led-k)) rgba(255,40,30,.75); } 50% { background: #c0201a; box-shadow: 0 0 calc(5px * var(--led-k)) calc(2px * var(--led-k)) rgba(255,40,30,.5); } }
@keyframes rmTx { 0%, 30%, 60% { background: #ff3b30; box-shadow: 0 0 calc(8px * var(--led-k)) calc(3px * var(--led-k)) rgba(255,40,30,.75); } 15%, 45%, 100% { background: #3a0507; box-shadow: none; } }

.rm-brand { margin: 6px auto 8px; width: max-content; padding: 2px 10px 1px; border-radius: 3px;
  background: linear-gradient(180deg, #c9c6bd, #8d8a82); color: #1a1a1c; box-shadow: inset 0 1px 0 rgba(255,255,255,.6), 0 1px 1px rgba(0,0,0,.6);
  font: 800 12px/1.1 'Archivo Black', Archivo, sans-serif; letter-spacing: .22em; }
.rm-brand small { margin-left: 6px; font: 700 7px/1 Archivo, sans-serif; letter-spacing: .2em; color: #8a1a16; vertical-align: 2px; }

.rm-row { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 9px; }
.r3 { justify-content: center; gap: 22px; }

/* a rubber key: symbol on the dome, label printed under it */
.rk { all: unset; position: relative; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; gap: 3px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.rk b { display: grid; place-items: center; width: 52px; height: 34px; border-radius: 12px / 14px;
  background: linear-gradient(180deg, #8d8b88, #6b6966 55%, #5a5856);
  box-shadow: 0 3px 0 #2a2a2c, 0 4px 5px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.35), inset 0 -2px 3px rgba(0,0,0,.25);
  color: #f2efe8; font: 400 15px/1 Archivo, system-ui, sans-serif; letter-spacing: -.12em; text-shadow: 0 1px 0 rgba(0,0,0,.4);
  transition: transform 60ms, box-shadow 60ms, filter 60ms; }
.rk span { font: 700 7.5px/1 Archivo, sans-serif; letter-spacing: .14em; color: #bdb5a4; white-space: nowrap; }
.rk.down b, .rk:active b { transform: translateY(2.5px); filter: brightness(.88);
  box-shadow: 0 .5px 0 #2a2a2c, 0 1px 2px rgba(0,0,0,.6), inset 0 1px 2px rgba(0,0,0,.35); }
.rk:focus-visible b { outline: 2px solid #ffd27a; outline-offset: 2px; }

.rm-pz { display: block; width: 11px; height: 13px; background: linear-gradient(90deg, currentColor 0 4px, transparent 4px 7px, currentColor 7px); }
.rk-pwr b { width: 40px; height: 32px; border-radius: 50%; letter-spacing: 0; font-size: 15px;
  background: radial-gradient(circle at 40% 30%, #ef5b4f, #b8231e 55%, #8e1712); }
.rk-play b { width: 60px; height: 42px; font-size: 20px; letter-spacing: 0; color: #1a1a1c; text-shadow: none;
  background: linear-gradient(180deg, #f4f1ea, #d6d1c5 60%, #bfb9ab); }
.rk-room b { width: 52px; }
/* a little house on the dome: back to the room */
.rm-house { display: block; width: 15px; height: 14px; background: currentColor;
  clip-path: polygon(50% 0, 100% 46%, 86% 46%, 86% 100%, 61% 100%, 61% 64%, 39% 64%, 39% 100%, 14% 100%, 14% 46%, 0 46%); }

.rm-pair { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.rm-rock { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 0; position: relative; padding-top: 11px; }
.rm-lbl { position: absolute; left: 0; right: 0; top: 0; text-align: center; font: 700 7.5px/1 Archivo, sans-serif; letter-spacing: .24em; color: #bdb5a4; font-style: normal; }
.rm-rock .rk b { width: 100%; height: 36px; font-size: 16px; letter-spacing: 0; }
.rm-rock .rk:first-of-type b { border-radius: 16px 3px 3px 16px; }
.rm-rock .rk:last-of-type b { border-radius: 3px 16px 16px 3px; }
.rm-rock .rk { margin: 0 1px; }

.rm-foot { position: absolute; left: 16px; right: 16px; bottom: 26px; text-align: center; }
.rm-grille { display: block; height: 36px; margin: 0 22px 12px; border-radius: 6px;
  background: repeating-linear-gradient(180deg, #0e0e10 0 3px, #2b2b2f 3px 6px); box-shadow: inset 0 1px 3px rgba(0,0,0,.7); }
.rm-foot span { font: 600 6.5px/1.5 Archivo, sans-serif; letter-spacing: .16em; color: #77716a; }

/* phones held upright: the room under the TV is wide and short, so the remote comes up close and squat (js sets
   data-shape="wide"): the transport on one row, the rockers side by side, every key at least 44px under a thumb */
.rm[data-shape="wide"] { width: 300px; }
.rm[data-shape="wide"] .rm-body { width: 300px; height: 262px; padding: 0 10px; display: grid; grid-template-columns: repeat(10, 1fr);
  grid-template-rows: 18px 56px 56px 58px; column-gap: 6px; row-gap: 6px; align-items: start;
  border-radius: 30px 30px 18px 18px / 22px 22px 14px 14px; }
.rm[data-shape="wide"] .rm-row, .rm[data-shape="wide"] .rm-pair { display: contents; }
.rm[data-shape="wide"] .rm-cap { grid-column: 1 / -1; grid-row: 1; height: 16px; }
.rm[data-shape="wide"] .rm-brand { grid-column: 3 / 7; grid-row: 2; align-self: center; margin: 0 auto 12px; padding: 2px 6px 1px; font-size: 10.5px; letter-spacing: .14em; }
.rm[data-shape="wide"] .rm-brand small { margin-left: 4px; font-size: 6px; }
.rm[data-shape="wide"] .rk { width: 100%; min-width: 0; }
.rm[data-shape="wide"] .rk b { width: 100%; height: 44px; }
.rm[data-shape="wide"] .rk-pwr { grid-column: 1 / 3; grid-row: 2; }
.rm[data-shape="wide"] .rk-pwr b { width: 46px; height: 44px; }
.rm[data-shape="wide"] .rk-room { grid-column: 7 / 9; grid-row: 2; align-self: start; }
.rm[data-shape="wide"] [data-k="eject"] { grid-column: 9 / 11; grid-row: 2; }
.rm[data-shape="wide"] [data-k="rew"] { grid-column: 1 / 3; grid-row: 3; }
.rm[data-shape="wide"] .rk-play { grid-column: 3 / 5; grid-row: 3; }
.rm[data-shape="wide"] .rk-play b { height: 44px; }
.rm[data-shape="wide"] [data-k="ff"] { grid-column: 5 / 7; grid-row: 3; }
.rm[data-shape="wide"] [data-k="pause"] { grid-column: 7 / 9; grid-row: 3; }
.rm[data-shape="wide"] [data-k="pause"] span { letter-spacing: .02em; font-size: 7px; }
.rm[data-shape="wide"] [data-k="stop"] { grid-column: 9 / 11; grid-row: 3; }
.rm[data-shape="wide"] .rm-rock { grid-row: 4; }
.rm[data-shape="wide"] .rm-rock:first-child { grid-column: 1 / 6; }
.rm[data-shape="wide"] .rm-rock:last-child { grid-column: 6 / 11; }
.rm[data-shape="wide"] .rm-rock .rk b { height: 44px; }
.rm[data-shape="wide"] .rm-foot { left: 60px; right: 60px; bottom: 6px; }
.rm[data-shape="wide"] .rm-grille { height: 12px; margin: 0 0 4px; }
.rm[data-shape="wide"] .rm-foot span { display: none; }

/* the dark room: the remote is lit by the set */
html.cin-dark .rm-body { filter: brightness(.82); }

/* phones: the remote replaces the ◀ ROOM chip while it's up */
body.rm-up .cam-esc { opacity: 0 !important; pointer-events: none !important; }

/* the remote on the coffee table: a real thing to pick up */
.bench .table .remote.rm-table { pointer-events: auto; cursor: pointer; transition: filter .2s, opacity .25s; outline: none; }
.rm-table .rm-hit { position: absolute; inset: -14px -10px; }
.rm-table:hover, .rm-table:focus-visible { filter: brightness(1.5) drop-shadow(0 0 6px rgba(255,220,160,.55)); }
body.rm-up .rm-table { opacity: 0; pointer-events: none; }

/* phones: the remote's nose peeking up at the bottom edge while a tape is in */
.rm-peek { all: unset; position: fixed; z-index: 91; right: calc(18px + var(--sar, 0px)); bottom: 0; width: 104px; height: 34px; box-sizing: border-box;
  display: flex; flex-direction: column; align-items: center; gap: 4px; padding-top: 6px; cursor: pointer; border-radius: 22px 22px 0 0;
  background: linear-gradient(180deg, #303034, #1d1d20); box-shadow: 0 -4px 14px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.12);
  -webkit-tap-highlight-color: transparent; animation: rmPeek .4s cubic-bezier(.2,.9,.3,1.1) both; }
.rm-peek[hidden], body.holding .rm-peek { display: none; }
.rm-peek .rm-irwin { width: 46px; height: 9px; }
.rm-peek span { font: 700 8px/1 Archivo, sans-serif; letter-spacing: .24em; color: #bdb5a4; }
.rm-peek:focus-visible { outline: 2px solid #ffd27a; outline-offset: 2px; }
@keyframes rmPeek { from { transform: translateY(100%); } }
/* the tab sits at the bottom right: the hint beside it wraps short of it instead of running under it */
body.rm-peek-on:not(.holding) .hint { padding-right: calc(112px + var(--sar, 0px)); box-sizing: border-box; }

/* the deck's IR receiver, behind the display's smoked glass */
.rm-ir { position: absolute; right: 3%; bottom: 10%; width: 1.4cqw; height: 1.4cqw; border-radius: 50%; z-index: 0;
  background: radial-gradient(circle at 40% 35%, #5a1214, #240607); box-shadow: 0 0 0 .15cqw rgba(0,0,0,.6); }
.rm-ir.rx { animation: rmRx .24s steps(1, end); }
.rm-ir.hold { animation: rmRxHold .12s steps(1, end) infinite; }
@keyframes rmRxHold { 0% { background: #ff4a3a; box-shadow: 0 0 1.2cqw .3cqw rgba(255,60,40,.8); } 50% { background: #a8241c; box-shadow: none; } }
@keyframes rmRx { 0%, 34%, 68% { background: #ff4a3a; box-shadow: 0 0 1.2cqw .3cqw rgba(255,60,40,.8); } 17%, 51%, 100% { background: radial-gradient(circle at 40% 35%, #5a1214, #240607); box-shadow: none; } }

/* the TV side: another channel, and the OSD the remote writes */
.screen > .rm-ch { position: absolute; inset: 0; z-index: 4; pointer-events: none; border-radius: inherit; overflow: hidden; display: none; background: #07080c; }
.screen > .rm-ch[data-ch="snow"], .screen > .rm-ch[data-ch="yule"] { display: block; }
.rm-fire { position: absolute; inset: 0; width: 100%; height: 100%; display: none; image-rendering: auto; filter: saturate(1.15) contrast(1.05) blur(.4px); }
.rm-ch[data-ch="yule"] .rm-fire { display: block; }
.rm-ch.flip::after { content: ''; position: absolute; inset: 0; background: #000; animation: rmFlip .16s linear both; }
@keyframes rmFlip { from { opacity: 1; } to { opacity: 0; } }
.screen[data-rmch="snow"] > .osd, .screen[data-rmch="yule"] > .osd,
.screen[data-rmch="snow"] .hm-stamp, .screen[data-rmch="yule"] .hm-stamp { visibility: hidden; }
.screen[data-mode="off"] > .rm-ch, .screen[data-mode="off"] > .rm-osd { display: none; }

.screen > .rm-osd { position: absolute; inset: 0; z-index: 6; pointer-events: none; container-type: size; font-family: VT323, monospace; color: #fff;
  text-shadow: .35cqw .35cqw 0 rgba(0,0,0,.55), 0 0 .6cqw rgba(255,255,255,.4); opacity: 0; }
.screen > .rm-osd.on { opacity: 1; }
.rm-osd.rm-o-tv { color: #7dff8a; }
.rm-chn { position: absolute; right: 8%; top: 9%; font-size: 12.5cqw; line-height: 1; }
.rm-sub { position: absolute; right: 8%; top: 24%; font-size: 5.4cqw; letter-spacing: .06em; }
.rm-trk { position: absolute; left: 0; right: 0; bottom: 12%; display: flex; flex-direction: column; align-items: center; gap: 1.6cqw; }
.rm-trk em { font-style: normal; font-size: 7.6cqw; line-height: 1; letter-spacing: .08em; }
.rm-bar { display: flex; align-items: center; gap: .7cqw; font-size: 7.6cqw; line-height: 1; }
.rm-bar i { display: block; width: 3.4cqw; height: 5.6cqw; background: rgba(255,255,255,.22); box-shadow: .45cqw .45cqw 0 rgba(0,0,0,.5); }
.rm-bar i.on { background: #fff; }
.rm-bar i.mid { height: 7cqw; }

/* the first off-tracking tape: the rocker (or the REMOTE tab) pulses once and TRACKING blinks on the screen */
.rm-rock.rm-pulse .rk b, .rm-peek.rm-pulse { animation: rmPulse .65s ease-in-out 4; }
@keyframes rmPulse { 50% { filter: brightness(1.45); box-shadow: 0 0 0 2px #ffd27a, 0 0 14px 4px rgba(255,200,110,.6); } }
.rm-trk.rm-nudge em { animation: rmBlink .5s steps(1, end) 5; }
@keyframes rmBlink { 50% { opacity: 0; } }

/* PAUSE / STILL: the still keeps its jitter but loses the REW search arrows */
.screen[data-still] > .scr-card::before, .screen[data-still] > .scr-card::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .rm-slide, .rm.up .rm-slide { transition: none; transform: none; }
  .rm { transition: opacity .15s; }
  .rm:not(.up) { opacity: 0; }
  .rm-led.hold, .rm-ir.hold { animation: none; background: #ff3b30; }
  .rm-led.tx, .rm-ir.rx { animation-duration: .5s; animation-timing-function: steps(1, start); animation-name: rmTxCalm; }
  @keyframes rmTxCalm { 0%, 100% { background: #ff3b30; } }
  .rm-peek { animation: none; }
  .rm-ch.flip::after { animation: none; display: none; }
  .rm-rock.rm-pulse .rk b, .rm-peek.rm-pulse { animation: none; box-shadow: 0 0 0 2px #ffd27a; }
  .rm-trk.rm-nudge em { animation: none; }
}