.navigation-remote, .navigation-remote * { pointer-events: none !important; box-sizing: border-box; }
.navigation-remote { position: fixed; inset: auto 24px 32px auto; margin: 0; padding: 10px; width: 96px; height: 180px; scale: 1.3; transform-origin: bottom right; overflow: visible; border: 0; background: transparent; color: #25382c; z-index: 10000; transform: translateY(220px) rotate(18deg); animation: remote-arrive 700ms cubic-bezier(.22,.75,.25,1) both; }
.navigation-remote::backdrop { background: transparent; pointer-events: none; }
/* Original stepped-pixel remote: cream casing, forest keys, red power.
   The 4px silhouette and hard bevels remain legible at every existing scale. */
.remote-shell { position: relative; width: 76px; height: 160px; padding: 8px; border: 0; background: #25382c; clip-path: polygon(12px 0,64px 0,64px 4px,72px 4px,72px 12px,76px 12px,76px 140px,72px 140px,72px 152px,64px 152px,64px 156px,56px 156px,56px 160px,20px 160px,20px 156px,12px 156px,12px 152px,4px 152px,4px 140px,0 140px,0 12px,4px 12px,4px 4px,12px 4px); }
.remote-shell::before { content: ''; position: absolute; inset: 4px 4px 8px; background: #bcb69d; box-shadow: inset 4px 4px #fff7d8, inset -4px -4px #817d68; clip-path: polygon(8px 0,56px 0,56px 4px,64px 4px,64px 8px,68px 8px,68px 132px,64px 132px,64px 140px,56px 140px,56px 144px,12px 144px,12px 140px,4px 140px,4px 132px,0 132px,0 8px,4px 8px,4px 4px,8px 4px); }
.remote-face { position: relative; height: 136px; padding: 8px 4px; border: 0; background: #e2dcc2; box-shadow: inset 0 4px #fff7d8, inset -4px 0 #bcb69d, 0 4px #817d68; clip-path: polygon(4px 0,56px 0,56px 4px,60px 4px,60px 128px,56px 128px,56px 136px,4px 136px,4px 128px,0 128px,0 4px,4px 4px); }
.remote-brand { display: block; font: bold 7px/1 monospace; letter-spacing: 0; white-space: nowrap; color: #25382c; }
.remote-power { display: block; position: relative; margin: 8px 0 0 4px; width: 12px; height: 12px; background: #aa493c; box-shadow: -2px 0 #683c2b,2px 0 #683c2b,0 -2px #683c2b,0 4px #683c2b,inset 2px 2px #d77b59; }
.remote-power::after { content: ''; position: absolute; width: 2px; height: 4px; left: 5px; top: 2px; background: #fff7d8; }
.remote-pad { margin-top: 12px; display: flex; gap: 4px; align-items: center; }
.remote-pad i { width: 12px; height: 16px; background: #71836a; box-shadow: 0 4px #25382c,inset 2px 2px #a4b08a,inset -2px -2px #3d5840; }
.remote-pad .remote-press { position: relative; width: 20px; height: 24px; background: #3d5840; box-shadow: 0 4px #25382c,inset 2px 2px #a4b08a,inset -2px -2px #25382c; animation: remote-press 700ms linear both; }
.remote-press::after { content: ''; position: absolute; top: 8px; left: 6px; width: 8px; height: 8px; border: 2px solid #e2dcc2; }
.remote-keys { margin-top: 12px; display: grid; grid-template-columns: repeat(3,12px); gap: 8px 6px; }
.remote-keys i { height: 8px; background: #71836a; box-shadow: 0 2px #25382c,inset 2px 2px #a4b08a,inset -2px 0 #3d5840; }
.remote-grip { width: 32px; height: 2px; margin: 12px auto 0; background: #bcb69d; box-shadow: 0 4px #bcb69d,0 8px #bcb69d; }
.remote-ir { position: absolute; top: 4px; left: 32px; width: 12px; height: 4px; background: #aa493c; z-index: 1; opacity: 0; animation: remote-signal 700ms linear both; }
@keyframes remote-arrive { 0% { transform: translateY(220px) rotate(18deg); } 30%,65% { transform: translateY(0) rotate(-9deg); } 100% { transform: translateY(220px) rotate(18deg); } }
@keyframes remote-press { 0%,34%,62%,100% { transform: translateY(0); box-shadow: 0 4px #25382c, inset 2px 2px #a4b08a, inset -2px -2px #25382c; } 42%,54% { transform: translateY(4px); box-shadow: inset 2px 2px #25382c; } }
@keyframes remote-signal { 0%,42%,58%,100% { opacity: 0; } 46%,53% { opacity: 1; } }
@media(max-width: 480px) { .navigation-remote { right: 12px; bottom: 32px; scale: 1.066; transform-origin: bottom right; } }
/* The intro shares the navigation artwork, but rests without a loop. */
.intro-remote { inset: auto auto 96px 32px; transform-origin: bottom left; transform: rotate(-9deg); animation: none; }
.intro-remote * { animation: none !important; }
.intro-remote-pressed { animation: intro-remote-exit 700ms ease-in both; }
.intro-remote-pressed .remote-press { animation: remote-press 700ms linear both !important; }
.intro-remote-pressed .remote-ir { animation: remote-signal 700ms linear both !important; }
@keyframes intro-remote-exit { 0%,65% { transform: rotate(-9deg); opacity: 1; } 100% { transform: translateY(40px) rotate(-9deg); opacity: 0; } }
@media(max-width: 700px), (max-height: 540px) { .intro-remote { inset: 84px auto auto 12px; scale: .72; transform-origin: top left; } }
@media(prefers-reduced-motion: reduce) { .navigation-remote:not(.intro-remote) { display: none !important; animation: none; } .navigation-remote * { animation: none !important; } .intro-remote { animation: none !important; } }