/* ═══════════════════════════════════════════════════════════════════════
   Wave Radio: rádio retrô com tela de vídeo.
   Gabinete de madeira, painel escuro com latão, mostrador iluminado e teclas de piano.
   A luz do mostrador, do neon e do fundo vem de --st / --st2, que mudam a cada estação
   (veja src/apps/wave-radio/stations.js). Não depende de tokens.css nem de Bootstrap.
   Os botões do painel têm 44px ou mais de área de toque.
   ═══════════════════════════════════════════════════════════════════════ */

/* ───────── Tokens ───────── */
@property --st { syntax: '<color>'; inherits: true; initial-value: #fb923c; }
@property --st2 { syntax: '<color>'; inherits: true; initial-value: #fbbf24; }
@property --gap { syntax: '<angle>'; inherits: false; initial-value: 360deg; }

:root {
	color-scheme: dark;
	--bg: #0b0714;
	--ink: #f3eefc;
	--ink-2: #c4bbd6;
	--ink-3: #a299b8;
	--line: rgb(255 255 255 / .12);
	--brass: #d9b36c;
	--ivory-1: #fbf4e1;
	--ivory-2: #e6d9b8;
	--ivory-3: #cdbf9a;
	--ivory-edge: #8c7d58;
	--ease: cubic-bezier(.2, .8, .2, 1);
	--font: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--display: 'Monoton', 'Inter', system-ui, sans-serif;
	--digits: 'Orbitron', 'Inter', ui-monospace, monospace;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	--st: #fb923c;
	--st2: #fbbf24;
	min-height: 100vh;
	min-height: 100dvh;
	margin: 0;
	display: flex;
	flex-direction: column;
	overflow-x: hidden;
	background: var(--bg);
	color: var(--ink);
	font: 400 1rem/1.5 var(--font);
	transition: --st .9s ease, --st2 .9s ease;
}
button { font: inherit; color: inherit; }
a { color: inherit; }
.i { width: 1.2em; height: 1.2em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.flip { transform: scaleX(-1); }
.sr-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
:focus-visible { outline: 3px solid var(--st); outline-offset: 3px; }

/* ───────── Fundo: auroras na cor da estação e um chão em perspectiva ───────── */
.bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(120% 80% at 50% 0%, #1b1036 0%, var(--bg) 62%); }
.bg i { position: absolute; width: 60vmax; height: 60vmax; border-radius: 50%; filter: blur(90px); opacity: .34; transition: opacity 1s ease; }
.bg i:nth-child(1) { left: -15vmax; top: -22vmax; background: var(--st); animation: drift 24s ease-in-out infinite alternate; }
.bg i:nth-child(2) { right: -22vmax; bottom: -28vmax; background: var(--st2); opacity: .24; animation: drift 30s ease-in-out infinite alternate-reverse; }
body[data-power="off"] .bg i { opacity: .12; }
@keyframes drift { to { transform: translate(8vmax, 6vmax) scale(1.12); } }
.floor { position: absolute; left: -40%; right: -40%; bottom: -8%; height: 52%; overflow: hidden; opacity: .5; transform: perspective(460px) rotateX(64deg); transform-origin: 50% 100%; -webkit-mask-image: linear-gradient(to top, #000 8%, transparent 88%); mask-image: linear-gradient(to top, #000 8%, transparent 88%); transition: opacity 1s ease; }
.floor::before { content: ''; position: absolute; inset: -56px 0 0; background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--st) 55%, transparent) 0 1px, transparent 1px 72px), repeating-linear-gradient(0deg, color-mix(in srgb, var(--st) 55%, transparent) 0 1px, transparent 1px 56px); animation: floor 2.6s linear infinite; }
body[data-power="off"] .floor { opacity: .16; }
body[data-power="off"] .floor::before { animation-play-state: paused; }
@keyframes floor { to { transform: translateY(56px); } }

/* ───────── Barra do topo e rodapé ───────── */
.top { display: flex; justify-content: space-between; gap: 12px; width: 100%; max-width: 1040px; margin: 0 auto; padding: max(12px, env(safe-area-inset-top)) 12px 0; }
.pill { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 18px; border-radius: 999px; border: 1px solid var(--line); background: rgb(255 255 255 / .07); color: var(--ink-2); font-size: .875rem; font-weight: 500; text-decoration: none; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: background .2s, color .2s; }
.pill:hover { background: rgb(255 255 255 / .13); color: var(--ink); }
.main { flex: 1; width: 100%; max-width: 1040px; margin: 0 auto; padding: 18px 12px 28px; }
.nojs { padding: 14px 18px; border-radius: 14px; background: rgb(255 255 255 / .08); text-align: center; }
.foot { display: grid; gap: 4px; justify-items: center; padding: 8px 16px max(24px, env(safe-area-inset-bottom)); color: var(--ink-3); font-size: .8125rem; text-align: center; }
.foot p { margin: 0; }
.foot a { text-underline-offset: 3px; }
.foot kbd { padding: 1px 7px; border-radius: 6px; border: 1px solid var(--line); background: rgb(255 255 255 / .06); font: 500 .75rem var(--font); }
@media (hover: none) { .foot__keys { display: none; } }

/* ───────── Gabinete ───────── */
.cab {
	position: relative;
	padding: clamp(10px, 2.2vw, 22px);
	border-radius: clamp(18px, 3vw, 34px);
	background:
		repeating-linear-gradient(92deg, rgb(255 255 255 / .035) 0 2px, transparent 2px 7px, rgb(0 0 0 / .09) 7px 9px, transparent 9px 17px),
		linear-gradient(180deg, #5b3520 0%, #3b2112 55%, #29160b 100%);
	box-shadow: 0 44px 80px -34px rgb(0 0 0 / .95), inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 -5px 0 rgb(0 0 0 / .35), 0 0 130px -34px var(--st);
	transition: box-shadow 1s ease;
}
.radio[data-phase="off"] .cab { box-shadow: 0 44px 80px -34px rgb(0 0 0 / .95), inset 0 0 0 1px rgb(255 255 255 / .07), inset 0 -5px 0 rgb(0 0 0 / .35), 0 0 0 0 transparent; }

.plate { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 8px 12px; }
.plate__brand { margin: 0; font: 400 clamp(1.5rem, 5vw, 2.4rem)/1 var(--display); letter-spacing: .05em; color: #a98a55; transition: color .9s, text-shadow .9s; }
.radio:not([data-phase="off"]) .plate__brand { color: color-mix(in srgb, var(--st) 45%, #fff); text-shadow: 0 0 .25em var(--st), 0 0 .8em var(--st2); }
.plate__right { display: flex; align-items: center; gap: 16px; }

/* lâmpada "no ar" */
.onair { display: inline-flex; align-items: center; gap: 8px; color: #8d7e6c; font: 700 .6875rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; transition: color .3s; }
.onair i { width: 11px; height: 11px; border-radius: 50%; background: #3b2a24; box-shadow: inset 0 1px 2px rgb(0 0 0 / .6); transition: background .3s, box-shadow .3s; }
.radio[data-phase="tuning"] .onair i { background: #ffb347; box-shadow: 0 0 10px #ffb347; animation: blink .5s steps(2) infinite; }
.radio[data-phase="tuning"] .onair { color: #ffd9a0; }
.radio[data-phase="playing"] .onair i { background: #ff3b3b; box-shadow: 0 0 12px #ff3b3b, 0 0 24px rgb(255 59 59 / .5); animation: pulse 2s ease-in-out infinite; }
.radio[data-phase="playing"] .onair { color: #ffd0d0; }
@keyframes blink { 50% { opacity: .25; } }
@keyframes pulse { 50% { opacity: .55; } }

/* olho mágico: a sombra fecha quando a estação está bem sintonizada */
.eye { --eye: #6dff8a; --gap: 360deg; position: relative; width: 44px; height: 44px; border-radius: 50%; border: 3px solid #8f7a4a; background: conic-gradient(from calc(180deg - var(--gap) / 2), #04100a 0, #04100a var(--gap), var(--eye) var(--gap) 360deg); box-shadow: inset 0 0 10px rgb(0 0 0 / .85), 0 2px 8px rgb(0 0 0 / .6); transition: --gap .7s var(--ease), filter .7s; filter: saturate(.2) brightness(.55); }
.eye i { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle, #effff1 0 9%, rgb(109 255 138 / .55) 22%, transparent 62%); }
.radio[data-phase="tuning"] .eye { --gap: 110deg; filter: none; animation: eye-jitter .35s steps(2) infinite; }
.radio[data-phase="playing"] .eye, .radio[data-phase="blocked"] .eye { --gap: 14deg; filter: none; animation: eye-flutter 3.4s ease-in-out infinite; }
@keyframes eye-jitter { 50% { --gap: 70deg; } }
@keyframes eye-flutter { 0%, 100% { --gap: 12deg; } 28% { --gap: 26deg; } 58% { --gap: 16deg; } 80% { --gap: 22deg; } }

/* ───────── Painel frontal ───────── */
.face { display: grid; gap: clamp(12px, 2vw, 20px); padding: clamp(10px, 2vw, 20px); border-radius: clamp(12px, 2vw, 22px); background: linear-gradient(180deg, #1a1423, #100c18); box-shadow: inset 0 0 0 2px #0a0710, inset 0 0 0 4px rgb(217 179 108 / .42), inset 0 12px 30px rgb(0 0 0 / .6); }
.upper { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2.15fr); gap: clamp(12px, 2vw, 20px); align-items: stretch; }

/* alto-falante: barras de latão sobre tecido escuro */
.grille { min-height: 120px; border-radius: 14px; background: repeating-linear-gradient(90deg, #d8b46a 0 3px, #1b1424 3px 11px); box-shadow: inset 0 0 0 3px #0c0812, inset 0 0 28px rgb(0 0 0 / .85), 0 0 24px -8px color-mix(in srgb, var(--st) 55%, transparent); opacity: .92; position: relative; }
.grille::after { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgb(255 255 255 / .1), transparent 30%, rgb(0 0 0 / .35)); }

/* ───────── Tela ───────── */
.screen { padding: 10px; border-radius: 18px; background: linear-gradient(145deg, #2b2335, #0d0a12); box-shadow: inset 0 0 0 1px rgb(255 255 255 / .09), 0 8px 22px rgb(0 0 0 / .6); }
/* min-height de 200px: o YouTube pede ao menos 200px de altura no player. O width explícito impede que o aspect-ratio puxe a largura junto */
.screen__glass { position: relative; isolation: isolate; width: 100%; aspect-ratio: 16 / 9; min-height: 200px; overflow: hidden; border-radius: 12px; background: #050308; }
.screen__video { position: absolute; inset: 0; }
.screen__video lite-youtube { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; cursor: default; }
.screen__video lite-youtube::before, .screen__video lite-youtube::after, .screen__video lite-youtube > .lyt-playbtn { display: none; }
.screen__video iframe { pointer-events: none; }
.radio[data-phase="blocked"] .screen__video iframe { pointer-events: auto; }

/* chuvisco de TV: uma imagem de ruído que pula de lugar (é o "carregando" da tela) */
.snow { position: absolute; inset: -40px; z-index: 2; opacity: 0; pointer-events: none; transition: opacity .25s; background: #101018 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1.6 -.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") 0 0 / 180px; animation: snow .4s steps(1) infinite; }
.radio[data-phase="tuning"] .snow { opacity: 1; }
.radio[data-phase="error"] .snow { opacity: .5; }
@keyframes snow { 0% { transform: translate(0, 0); } 20% { transform: translate(-36px, 22px); } 40% { transform: translate(30px, -26px); } 60% { transform: translate(-18px, -34px); } 80% { transform: translate(34px, 30px); } }

.screen__fx { position: absolute; inset: 0; z-index: 6; pointer-events: none; background: radial-gradient(ellipse at 50% 42%, transparent 52%, rgb(0 0 0 / .55) 100%), repeating-linear-gradient(0deg, rgb(0 0 0 / .17) 0 1px, transparent 1px 3px), linear-gradient(135deg, rgb(255 255 255 / .1) 0%, transparent 26%); box-shadow: inset 0 0 44px rgb(0 0 0 / .7); }

/* mensagens sobre a tela */
.msg { position: absolute; inset: 0; z-index: 4; display: none; margin: 0; padding: 18px; place-content: center; justify-items: center; gap: 6px; text-align: center; }
.msg strong { font-size: 1.125rem; line-height: 1.25; }
.msg p { max-width: 34ch; margin: 0; color: var(--ink-2); font-size: .9375rem; }
.msg__ico { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; color: var(--st); background: color-mix(in srgb, var(--st) 14%, transparent); border: 1px solid color-mix(in srgb, var(--st) 40%, transparent); box-shadow: 0 0 24px -4px var(--st); }
.msg__ico .i { width: 26px; height: 26px; }
.msg .btn { margin-top: 8px; }
.radio[data-phase="off"] .msg--off { display: grid; background: radial-gradient(circle at 50% 40%, #151022, #07050b 75%); }
.radio[data-phase="error"] .msg--error { display: grid; background: radial-gradient(circle at 50% 40%, #151022, #07050b 75%); } /* opaco: esconde o aviso do próprio YouTube por trás */
.msg--blocked { inset: auto 0 0 0; padding: 10px 14px 14px; background: linear-gradient(0deg, rgb(0 0 0 / .85), transparent); font-size: .9375rem; font-weight: 600; pointer-events: none; }
.radio[data-phase="blocked"] .msg--blocked { display: block; }

.osd { position: absolute; left: 12px; top: 12px; z-index: 5; display: none; margin: 0; padding: 6px 10px; border-radius: 6px; background: rgb(0 0 0 / .78); color: #7dff9b; font: 700 clamp(.75rem, 2.4vw, 1rem)/1 var(--digits); letter-spacing: .12em; text-shadow: 0 0 8px rgb(125 255 155 / .8); }
.radio[data-phase="tuning"] .osd { display: block; animation: blink 1.1s steps(2) infinite; }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; padding: 0 26px; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--st), var(--st2)); color: #150a24; font-weight: 700; cursor: pointer; box-shadow: 0 10px 26px -10px var(--st); transition: transform .15s var(--ease), filter .2s; }
.btn:hover { filter: brightness(1.08); transform: translateY(-1px); }
.btn:active { transform: translateY(1px); }

/* ───────── Mostrador ───────── */
.dial__glass { position: relative; isolation: isolate; padding: 14px clamp(16px, 3vw, 26px) 12px; overflow: hidden; border-radius: 16px; background: linear-gradient(180deg, #1d1527, #130e1b); color: #8b7f9c; box-shadow: inset 0 0 0 2px #0a0710, inset 0 8px 18px rgb(0 0 0 / .7), 0 0 0 1px rgb(217 179 108 / .3); transition: color 1s ease; }
/* a luz de trás do vidro acende devagar, como válvula esquentando */
.dial__glass::before { content: ''; position: absolute; inset: 0; z-index: -1; opacity: 0; background: radial-gradient(120% 140% at 50% 0%, color-mix(in srgb, var(--st2) 30%, #fff4d9) 0%, color-mix(in srgb, var(--st) 42%, #f0cf93) 100%); transition: opacity 1.3s ease; }
.radio:not([data-phase="off"]) .dial__glass { color: #2b1608; }
.radio:not([data-phase="off"]) .dial__glass::before { opacity: 1; }

.scale { position: relative; height: 70px; container-type: inline-size; }
.mark { position: absolute; top: 0; left: calc(var(--p) * 1%); transform: translateX(-50%); font: 700 .625rem/1 var(--font); letter-spacing: .1em; text-transform: uppercase; white-space: nowrap; }
.mark::after { content: ''; display: block; width: 7px; height: 7px; margin: 5px auto 0; border-radius: 50%; background: var(--k); box-shadow: 0 0 0 2px rgb(0 0 0 / .25); opacity: .85; }
.scale__ticks { position: absolute; inset: auto 0 0; height: 36px; }
.tick { position: absolute; left: calc(var(--p) * 1%); bottom: 16px; width: 1px; height: 8px; background: currentColor; opacity: .5; }
.tick--major { width: 2px; height: 16px; opacity: .85; }
.tick b { position: absolute; top: 100%; left: 50%; margin-top: 3px; transform: translateX(-50%); font: 500 .625rem/1 var(--digits); }
.needle { position: absolute; top: 24px; bottom: 6px; left: 0; width: 3px; margin-left: -1px; border-radius: 2px; background: linear-gradient(180deg, #ff5a4d, #ff9a76); box-shadow: 0 0 8px rgb(255 90 77 / .85); transform: translateX(calc(var(--pos) * 1cqw)); transition: transform var(--needle-ms, 800ms) cubic-bezier(.34, 1.45, .5, 1); }
.needle::before { content: ''; position: absolute; top: -4px; left: 50%; width: 9px; height: 9px; margin-left: -4.5px; border-radius: 50%; background: #ff7b6b; box-shadow: 0 0 8px #ff5a4d; }
.radio.snap .needle { transition: none !important; }
.radio[data-phase="off"] .needle { opacity: .35; box-shadow: none; }

.readout { display: flex; align-items: center; gap: clamp(12px, 3vw, 24px); margin-top: 6px; }
.readout__freq { margin: 0; display: flex; align-items: baseline; gap: 6px; }
.readout__freq b { font: 700 clamp(2rem, 7.5vw, 3.1rem)/1 var(--digits); letter-spacing: .02em; font-variant-numeric: tabular-nums; }
.readout__freq small { font: 600 .75rem var(--digits); opacity: .75; }
.readout__info { min-width: 0; }
.readout__name { margin: 0; font: 800 clamp(1.05rem, 3.4vw, 1.4rem)/1.15 var(--font); letter-spacing: .06em; text-transform: uppercase; }
.readout__tag { margin: 2px 0 0; font-size: .875rem; line-height: 1.3; opacity: .85; }

.track { display: grid; gap: 3px; margin-top: 10px; padding-top: 9px; border-top: 1px dashed color-mix(in srgb, currentColor 38%, transparent); }
.track__label { font: 700 .625rem/1 var(--font); letter-spacing: .16em; text-transform: uppercase; opacity: .7; }
.track__box { overflow: hidden; white-space: nowrap; }
.track__text { display: inline-block; font-size: .9375rem; font-weight: 600; text-decoration: none; }
.track__text[href]:hover, .track__text[href]:focus-visible { text-decoration: underline; text-underline-offset: 3px; }
.track__box[data-long] .track__text { animation: marquee var(--dur, 10s) ease-in-out 1.2s infinite alternate; }
@keyframes marquee { to { transform: translateX(var(--shift, 0)); } }
/* esqueleto enquanto sintoniza */
.track__sk { display: none; height: 1em; width: min(60%, 320px); border-radius: 6px; background: linear-gradient(90deg, rgb(0 0 0 / .12) 25%, rgb(0 0 0 / .26) 50%, rgb(0 0 0 / .12) 75%) 0 0 / 200% 100%; animation: shimmer 1.2s linear infinite; }
.radio[data-phase="tuning"] .track__sk { display: block; }
.radio[data-phase="tuning"] .track__box { display: none; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ───────── Comandos ───────── */
.deck { --ctl: 66px; display: grid; grid-template-columns: auto auto minmax(0, 1fr) auto auto auto; grid-template-areas: "power vol keys tune next sfx"; gap: clamp(12px, 2vw, 22px); align-items: center; }
.ctl { display: grid; justify-items: center; align-content: center; gap: 9px; }
.ctl--power { grid-area: power; }
.ctl--vol { grid-area: vol; }
.ctl--tune { grid-area: tune; }
.ctl--next { grid-area: next; }
.ctl--sfx { grid-area: sfx; }
.keys { grid-area: keys; }
.ctl__label { color: var(--brass); font: 700 .6875rem/1 var(--font); letter-spacing: .12em; text-transform: uppercase; }

/* botões giratórios: o anel serrilhado fica parado e só a tampa gira */
.knob { position: relative; width: var(--ctl); height: var(--ctl); border-radius: 50%; cursor: grab; touch-action: none; user-select: none; -webkit-tap-highlight-color: transparent; background: repeating-conic-gradient(#e8dcbc 0 5deg, #8d7f5f 5deg 8deg); box-shadow: 0 8px 16px rgb(0 0 0 / .65), inset 0 0 0 2px rgb(0 0 0 / .3); }
.knob:active { cursor: grabbing; }
.knob__cap { position: absolute; inset: 9px; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #fffaf0, #e4d6b2 55%, #b6a47c); box-shadow: inset 0 -3px 6px rgb(0 0 0 / .28), 0 2px 5px rgb(0 0 0 / .5); transform: rotate(var(--angle, 0deg)); transition: transform .08s linear; }
.knob__cap::before { content: ''; position: absolute; top: 5px; left: 50%; width: 4px; height: 15px; margin-left: -2px; border-radius: 3px; background: #2a1c0e; }
.knob--tune .knob__cap::before { background: color-mix(in srgb, var(--st) 80%, #000); }

/* chave de liga/desliga (alavanca) */
.power { position: relative; width: var(--ctl); height: var(--ctl); border-radius: 50%; border: 3px solid #9c8453; cursor: pointer; -webkit-tap-highlight-color: transparent; background: radial-gradient(circle at 35% 30%, #4d4559, #191321 72%); box-shadow: 0 8px 16px rgb(0 0 0 / .65), inset 0 0 0 2px rgb(0 0 0 / .5); }
.power__lever { position: absolute; left: 50%; top: 50%; width: 11px; height: 32px; margin: -27px 0 0 -5.5px; border-radius: 6px 6px 3px 3px; background: linear-gradient(90deg, #aaa093, #fff, #857b6c); transform-origin: 50% 84%; transform: rotate(-34deg); transition: transform .2s var(--ease); box-shadow: 0 3px 5px rgb(0 0 0 / .55); }
.power__lever::after { content: ''; position: absolute; top: -4px; left: 50%; width: 15px; height: 15px; margin-left: -7.5px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff, #b9ad98 70%); box-shadow: 0 0 0 0 transparent; transition: box-shadow .4s, background .4s; }
.power[aria-pressed="true"] .power__lever { transform: rotate(34deg); }
.power[aria-pressed="true"] .power__lever::after { background: radial-gradient(circle at 35% 30%, #fff, var(--st) 72%); box-shadow: 0 0 12px var(--st); }

/* botões pequenos */
.mini { display: grid; place-items: center; width: 52px; height: 52px; margin-block: calc((var(--ctl) - 52px) / 2); border: 0; border-radius: 50%; cursor: pointer; color: #2a2118; -webkit-tap-highlight-color: transparent; background: linear-gradient(180deg, var(--ivory-1), var(--ivory-2) 60%, var(--ivory-3)); box-shadow: 0 4px 0 var(--ivory-edge), 0 7px 12px rgb(0 0 0 / .5), inset 0 1px 0 #fff; transition: transform .06s, box-shadow .06s, opacity .2s; }
.mini .i { width: 22px; height: 22px; }
.mini:active:not(:disabled) { transform: translateY(3px); box-shadow: 0 1px 0 var(--ivory-edge), 0 3px 6px rgb(0 0 0 / .5), inset 0 2px 5px rgb(0 0 0 / .2); }
.mini:disabled { opacity: .38; cursor: not-allowed; }
.mini[aria-pressed="false"] { opacity: .55; }

/* teclas de piano das estações */
.keys { container-type: inline-size; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; padding: 8px; border-radius: 12px; background: #0a0710; box-shadow: inset 0 3px 10px rgb(0 0 0 / .85), 0 0 0 1px rgb(217 179 108 / .25); }
.key { position: relative; display: grid; align-content: center; justify-items: center; gap: 4px; min-height: 78px; padding: 15px 3px 8px; border: 0; border-radius: 8px 8px 6px 6px; cursor: pointer; color: #2a2118; font: 700 .6875rem/1.1 var(--font); letter-spacing: .04em; text-transform: uppercase; -webkit-tap-highlight-color: transparent; background: linear-gradient(180deg, var(--ivory-1), var(--ivory-2) 60%, var(--ivory-3)); box-shadow: 0 5px 0 var(--ivory-edge), 0 8px 12px rgb(0 0 0 / .5), inset 0 1px 0 #fff; transition: transform .06s, box-shadow .06s, filter .2s; }
.key:hover { filter: brightness(1.06); }
.key:active, .key[aria-checked="true"] { transform: translateY(4px); box-shadow: 0 1px 0 var(--ivory-edge), 0 3px 6px rgb(0 0 0 / .5), inset 0 2px 6px rgb(0 0 0 / .2); }
.key[aria-checked="true"] { background: linear-gradient(180deg, #ebdfbf, #d8c9a2); }
.key:focus-visible { outline-color: var(--k); }
.key__lamp { position: absolute; top: 7px; left: 50%; width: 18px; height: 5px; margin-left: -9px; border-radius: 3px; background: #6c5f43; transition: background .25s, box-shadow .25s; }
.radio:not([data-phase="off"]) .key[aria-checked="true"] .key__lamp { background: var(--k); box-shadow: 0 0 8px var(--k), 0 0 18px var(--k); }
.key__freq { font: 500 .625rem/1 var(--digits); opacity: .7; letter-spacing: .02em; }
.key .short { display: none; }
@container (max-width: 580px) { .key .long { display: none; } .key .short { display: inline; } }
@container (max-width: 380px) { .key { padding-inline: 1px; font-size: .5625rem; letter-spacing: 0; } .key__freq { font-size: .5625rem; } }

/* ───────── Telas pequenas ───────── */
@media (max-width: 860px) {
	.deck { grid-template-columns: repeat(5, minmax(0, 1fr)); grid-template-areas: "keys keys keys keys keys" "power vol tune next sfx"; row-gap: 18px; }
	.deck { --ctl: 58px; }
	.key { min-height: 66px; }
	.power__lever { height: 28px; margin-top: -23px; }
	.knob__cap { inset: 8px; }
}
@media (max-width: 720px) {
	.upper { grid-template-columns: minmax(0, 1fr); }
	.grille { min-height: 38px; order: 2; }
	.main { padding-inline: 8px; }
	.top { padding-inline: 8px; }
}
@media (max-width: 400px) {
	.pill { padding: 0 14px; }
	.readout { flex-wrap: wrap; gap: 4px 16px; }
}

/* ───────── Movimento reduzido: sem animações contínuas; o ponteiro anda sem balançar ───────── */
@media (prefers-reduced-motion: reduce) {
	body { transition: none; }
	.bg i, .floor::before, .snow, .osd, .onair i, .eye, .track__box[data-long] .track__text, .track__sk { animation: none !important; }
	.needle { transition-duration: 1ms !important; }
	.btn, .key, .mini, .knob__cap, .power__lever { transition: none; }
}