/* Приёмник: корпус из дерева, латунные ручки, шкала-стекло с янтарной подсветкой, VFD-дисплей, VU-метры, спектр. */

.rx { container-type: inline-size; position: relative; padding: 14px; border-radius: 32px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .18), rgba(0, 0, 0, .5)), url(/img/wood.svg) 0 0 / 640px 320px, #2a1a0d;
  box-shadow: 0 50px 90px -20px rgba(0, 0, 0, .75), 0 0 0 1px rgba(0, 0, 0, .65), inset 0 2px 0 rgba(255, 215, 150, .28), inset 0 -4px 0 rgba(0, 0, 0, .55); }
.rx-cab { position: relative; display: grid; grid-template-columns: minmax(250px, 300px) minmax(0, 1fr) 224px; gap: 24px; padding: 24px 26px 22px; border-radius: 20px;
  background: radial-gradient(110% 80% at 50% 0%, #2d1e11 0%, #170f08 52%, #0f0a06 100%);
  box-shadow: inset 0 0 0 1px rgba(200, 161, 90, .4), inset 0 2px 0 rgba(255, 226, 160, .14), inset 0 -24px 44px rgba(0, 0, 0, .55), inset 0 0 90px rgba(255, 150, 40, .05); }
.rx-cab::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .5;
  background: repeating-linear-gradient(90deg, rgba(255, 235, 190, .035) 0 1px, transparent 1px 3px); }
.rx-left, .rx-mid, .rx-right { position: relative; min-width: 0; }
.rx-left { display: grid; gap: 14px; align-content: start; grid-template-rows: auto minmax(0, 1fr); }
.rx-vus { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.vu { margin: 0; filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .55)); }
.vu-svg { width: 100%; height: auto; }
.vu-bezel { stroke: #fff0c4; stroke-opacity: .5; stroke-width: 1; }
.vu-ticks line { stroke: #2a1606; }
.vu-ticks line.red { stroke: #b7281a; }
.vu-labels text { fill: #2a1606; font: 500 9px var(--f-mono); text-anchor: middle; dominant-baseline: middle; }
.vu-labels text.red { fill: #b7281a; }
.vu-redarc { fill: none; stroke: #b7281a; stroke-width: 3.2; opacity: .85; }
.vu-name { fill: #2a1606; font: 600 15px var(--f-display); text-anchor: middle; opacity: .8; }
.vu-ch { fill: #2a1606; font: 500 10px var(--f-mono); opacity: .7; }
.vu-needle { transform: rotate(-48deg); will-change: transform; }
.vu-needle line { stroke: #1a0d05; stroke-width: 1.7; stroke-linecap: round; filter: drop-shadow(1px 2px 1px rgba(0, 0, 0, .35)); }
.vu-shroud { fill: #20150b; }
.vu-glass { fill: rgba(255, 255, 255, .05); pointer-events: none; }
.spec { width: 100%; height: 100%; min-height: 96px; max-height: 280px; border-radius: 12px;
  background: repeating-linear-gradient(180deg, transparent 0 calc(25% - 1px), rgba(255, 179, 71, .09) calc(25% - 1px) 25%), linear-gradient(180deg, #0a0603, #120b06); box-shadow: inset 0 0 0 1px #3a2a14, inset 0 8px 18px rgba(0, 0, 0, .8), 0 0 0 1px rgba(200, 161, 90, .22); }

/* шкала-стекло */
.dial { position: relative; height: 118px; border-radius: 12px; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none;
  background: radial-gradient(62% 150% at var(--gx, 50%) 112%, rgba(255, 246, 214, .98) 0%, rgba(255, 205, 110, .95) 24%, rgba(221, 140, 30, .95) 58%, rgba(112, 60, 8, .98) 100%), linear-gradient(180deg, #d98f26, #7d440a);
  box-shadow: inset 0 0 0 2px #2a1b0c, inset 0 8px 16px rgba(0, 0, 0, .6), 0 0 0 2px var(--brass-lo), 0 0 36px rgba(255, 170, 60, .2); transition: filter .6s; }
.rx[data-status='idle'] .dial, .rx[data-status='paused'] .dial { filter: brightness(.72) saturate(.85); }
.rx[data-status='loading'] .dial, .rx[data-status='reconnecting'] .dial { animation: lamp 1.1s ease-in-out infinite; }
@keyframes lamp { 50% { filter: brightness(.82); } }
.dial::before { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; border-radius: inherit;
  background: linear-gradient(112deg, rgba(255, 255, 255, .24) 0, rgba(255, 255, 255, .06) 22%, transparent 23%), linear-gradient(180deg, rgba(255, 255, 255, .13), transparent 34%); }
.dial::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: .5; mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2'/><feColorMatrix values='0 0 0 0 .2  0 0 0 0 .1  0 0 0 0 0  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>"); }
.dial-svg { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 1; }
.ticks line { stroke: #2b1708; stroke-width: 1.5; stroke-linecap: round; opacity: .85; }
.ticks line.maj { stroke-width: 2; opacity: 1; }
.ticks line.idle { opacity: .35; }
.ticks text { fill: #2b1708; font: 500 11px var(--f-mono); letter-spacing: .02em; }
.needle { transition: transform .55s var(--spring); will-change: transform; }
.needle.inst { transition: none; }
.needle-bar, .needle-cap { fill: var(--needle); }
.needle-bar { filter: drop-shadow(0 0 5px rgba(255, 75, 43, .85)); }
.needle-dot { fill: #3a0f06; }
.dial-cap { position: absolute; left: 14px; right: 14px; bottom: 8px; z-index: 3; display: flex; justify-content: space-between; gap: 10px; font-size: 10.5px; color: #3a1f08; font-weight: 500; pointer-events: none; }
.dial-cap span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* VFD */
.vfd { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 14px; row-gap: 10px; align-items: center; margin-top: 14px; padding: 14px 16px; min-height: 96px; border-radius: 12px; overflow: hidden;
  background: #080503; color: var(--amber); font-family: var(--f-mono);
  box-shadow: inset 0 0 0 1px #3d2c15, inset 0 10px 22px rgba(0, 0, 0, .85), 0 0 0 1px rgba(200, 161, 90, .26); }
.vfd::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(0, 0, 0, .3) 0 1px, transparent 1px 3px); }
.vfd-art { width: 62px; height: 62px; }
.vfd-art[hidden] { display: none; }
.vfd-art .av, .vfd-art .cv { width: 62px; height: 62px; border-radius: 10px; }
.vfd-txt { min-width: 0; display: grid; gap: 4px; }
.vfd-art[hidden] + .vfd-txt { grid-column: 1 / -1; }
.vfd-line1 { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; min-width: 0; }
.vfd-name { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; font: 500 1.3rem/1.25 var(--f-mono); color: var(--amber); text-shadow: 0 0 10px rgba(255, 179, 71, .6), 0 0 2px rgba(255, 220, 160, .6); }
.vfd-name > span { display: inline-block; }
.vfd-name.marq > span { animation: marq var(--dur, 8s) ease-in-out infinite alternate; }
@keyframes marq { 0%, 12% { transform: translateX(0); } 88%, 100% { transform: translateX(var(--shift)); } }
.vfd-badge { flex: none; font-size: .68rem; letter-spacing: .12em; text-transform: uppercase; color: #3a2a10; background: var(--amber); padding: 2px 7px; border-radius: 4px; box-shadow: 0 0 10px rgba(255, 179, 71, .5); }
.vfd-badge:empty { display: none; }
.vfd-badge[data-s='error'] { background: var(--needle); color: #230600; box-shadow: 0 0 10px rgba(255, 75, 43, .6); }
.vfd-badge[data-s='paused'], .vfd-badge[data-s='idle'] { background: #5b3d12; color: #f2cf8c; box-shadow: none; }
.vfd-badge[data-s='playing'] { animation: live 2.4s ease-in-out infinite; }
@keyframes live { 50% { box-shadow: 0 0 2px rgba(255, 179, 71, .2); } }
.vfd-line2 { font: 400 .98rem/1.3 var(--f-mono); color: var(--amber-hot); text-shadow: 0 0 8px rgba(255, 200, 120, .45); overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; min-height: 1.3em; }
.vfd-line3 { font-size: .75rem; color: #b98a46; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vfd-acts { grid-column: 1 / -1; position: relative; z-index: 2; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 2px; }
.vfd-acts[hidden] { display: none; }
.vfd-btn { --h: 34px; font-size: .8125rem; padding: 0 .85em; background: linear-gradient(180deg, #34240f, #1e1408); border-color: #6a4f1f; color: var(--amber-hot); }
.vfd-btn .i { width: 1.1em; height: 1.1em; }
.vfd-btn.link { text-decoration: none; max-width: 100%; }
.vfd-btn.link span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.trk-acts { margin-top: 10px; }
.trk-acts[hidden] { display: none; }
.vfd-btn.done { color: var(--needle); border-color: var(--needle); }
.vfd-btn.done .i { fill: currentColor; }
.rx-note { margin: 10px 2px 0; font-size: .7rem; color: var(--faint); letter-spacing: .01em; line-height: 1.5; }
.rx-note[hidden] { display: none; }
.rx-err { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 12px; padding: 10px 12px; border-radius: 12px; border: 1px solid rgba(255, 75, 43, .55); background: rgba(80, 16, 6, .5); }
.rx-err[hidden] { display: none; }
.rx-err-t { flex: 1 1 200px; color: #ffb4a3; font-size: .9rem; }

/* управление */
.rx-ctrl { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; margin-top: 14px; }
.rx-ctrl .icon-btn { color: var(--mute); }
.rx-ctrl .icon-btn:disabled { opacity: .35; pointer-events: none; }
.rx-ctrl .icon-btn.lit { color: var(--amber); }
.rx-ctrl .icon-btn.lit .i { filter: drop-shadow(0 0 5px rgba(255, 179, 71, .7)); }
.rx[data-mode='radio'] .trk, .rx[data-mode='idle'] .trk { display: none; }
.rx-sp { flex: 1; }
.play { position: relative; width: 68px; height: 68px; margin: 0 8px; border-radius: 50%; border: 0; display: grid; place-items: center; color: #1c1005; flex: none;
  background: radial-gradient(circle at 35% 28%, #ffe6b8 0%, #ffbd5a 40%, #e58f1b 100%);
  box-shadow: inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(120, 60, 0, .45), 0 6px 16px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 179, 71, .4);
  transition: transform .12s var(--ease), box-shadow .25s; }
.play:hover { box-shadow: inset 0 2px 2px rgba(255, 255, 255, .6), inset 0 -4px 6px rgba(120, 60, 0, .45), 0 6px 16px rgba(0, 0, 0, .6), 0 0 38px rgba(255, 179, 71, .7); }
.play:active { transform: scale(.95); }
.play .i { width: 30px; height: 30px; }
.play-ic { display: grid; place-items: center; position: relative; z-index: 1; }
.play-ring { position: absolute; inset: -6px; border-radius: 50%; border: 2px solid transparent; pointer-events: none; }
.play.busy .play-ring { border-top-color: var(--amber-hot); border-right-color: rgba(255, 179, 71, .3); animation: spin 1s linear infinite; }
.sleep { position: relative; }
.sleep-badge { position: absolute; bottom: -2px; left: 50%; transform: translateX(-50%); font-size: 9.5px; color: var(--amber-hot); background: #1a1008; border: 1px solid var(--brass-lo); border-radius: 6px; padding: 0 4px; line-height: 14px; }

/* ручки */
.rx-right { display: grid; justify-items: center; align-content: center; gap: 30px; }
.rx-knob-row { display: flex; gap: 20px; justify-content: center; }
.knob { position: relative; width: var(--ks); display: grid; justify-items: center; gap: 8px; touch-action: none; user-select: none; border-radius: 14px; }
.knob-dots { position: absolute; left: 0; top: 0; width: var(--ks); height: var(--ks); pointer-events: none; }
.knob-dots i { position: absolute; left: 50%; top: 50%; width: 4px; height: 4px; margin: -2px; border-radius: 50%; background: var(--amber); transform: rotate(var(--a)) translateY(calc(var(--ks) * -.5)); }
.k-range .knob-dots i { opacity: clamp(.22, calc(var(--fill, .5) * 10 - var(--i) + 1), 1); box-shadow: 0 0 6px var(--amber); }
.k-tune .knob-dots i { opacity: .3; width: 3px; height: 3px; margin: -1.5px; background: var(--brass); }
.knob-cap { position: relative; width: calc(var(--ks) * .74); height: calc(var(--ks) * .74); margin: calc(var(--ks) * .13) 0 0; border-radius: 50%; cursor: grab;
  box-shadow: 0 12px 20px rgba(0, 0, 0, .65), 0 3px 4px rgba(0, 0, 0, .8), 0 0 0 3px #0c0704, 0 0 0 4px rgba(200, 161, 90, .3); }
.knob.drag .knob-cap { cursor: grabbing; }
.knob-rot { position: absolute; inset: 0; border-radius: 50%; will-change: transform; transition: transform .3s var(--spring); }
.knob.drag .knob-rot { transition: none; }
.knob-grip { position: absolute; inset: 0; border-radius: 50%;
  background: conic-gradient(from 10deg, #6c5223, #d8bc7c, #7b5d29, #f1dba4, #5e4520, #d3b574, #6c5223);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61%); mask: radial-gradient(circle, transparent 0 60%, #000 61%); }
.knob-grip::after { content: ''; position: absolute; inset: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(0, 0, 0, .5) 0 2deg, transparent 2deg 6deg); }
.knob-face { position: absolute; inset: 12%; border-radius: 50%;
  background: repeating-radial-gradient(circle, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px), conic-gradient(from 200deg, #8e7340, #f6e2b0, #7a5f2e, #ecd49a, #6a5226, #f1dba4, #8e7340);
  box-shadow: inset 0 3px 3px rgba(255, 255, 255, .35), inset 0 -4px 7px rgba(0, 0, 0, .55), 0 0 0 1px rgba(0, 0, 0, .5); }
.knob-ind { position: absolute; left: 50%; top: 7%; width: 4px; height: 24%; margin-left: -2px; border-radius: 3px; background: linear-gradient(180deg, #fff1cc, var(--amber)); box-shadow: 0 0 8px var(--amber), 0 0 2px #fff; }
.knob-cap::after { content: ''; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 32% 24%, rgba(255, 255, 255, .34), transparent 46%), radial-gradient(circle at 70% 90%, rgba(0, 0, 0, .35), transparent 50%); }
.knob:focus-visible { outline: 2px solid var(--amber); outline-offset: 6px; border-radius: 50%; }
.knob-label { margin-top: calc(var(--ks) * .02); font: 500 .625rem/1.2 var(--f-mono); letter-spacing: .14em; color: var(--brass); text-align: center; white-space: nowrap; text-shadow: 0 1px 0 rgba(0, 0, 0, .7); }
.k-tune { padding-bottom: 0; }

/* адаптив: по ширине самого приёмника */
@container (max-width: 1060px) {
  .rx-cab { grid-template-columns: minmax(210px, 250px) minmax(0, 1fr) 190px; gap: 18px; padding: 20px; }
  .rx-knob-row { gap: 12px; }
}
@container (max-width: 820px) {
  .rx { border-radius: 24px; padding: 10px; }
  .rx-cab { grid-template-columns: 1fr; gap: 20px; padding: 18px 16px 20px; }
  .rx-mid { order: 1; } .rx-right { order: 2; } .rx-left { order: 3; }
  .rx-right { grid-template-columns: auto auto auto; justify-content: space-around; align-items: end; gap: 12px; }
  .rx-knob-row { display: contents; }
  .rx-left { grid-template-rows: auto; }
  .rx-vus { max-width: 440px; margin: 0 auto; width: 100%; }
  .spec { height: 100px; max-height: none; }
}
@container (max-width: 520px) {
  .rx-cab { padding: 14px 12px 16px; gap: 16px; }
  .vfd { padding: 12px; }
  .vfd-name { font-size: 1.1rem; }
  .vfd-art, .vfd-art .av, .vfd-art .cv { width: 52px; height: 52px; }
  .vfd-acts { gap: 6px; }
  .vfd-btn { --h: 36px; padding: 0 .7em; font-size: .78rem; }
  .vfd-btn .long { display: none; }
  .vfd-btn.ghost:not(.link) span { display: none; }
  .vfd-btn.ghost:not(.link) { padding: 0 .7em; }
  .rx-ctrl { gap: 0; justify-content: center; }
  .rx-ctrl .rx-sp { flex-basis: 100%; height: 0; }
  .play { width: 62px; height: 62px; }
  .k-tune { --ks: 118px !important; }
  .rx-right .knob:not(.k-tune) { --ks: 64px !important; }
  .rx[data-variant='home'] .rx-vus { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .needle { transition: none; }
  .rx[data-status='loading'] .dial, .rx[data-status='reconnecting'] .dial { animation: none; }
}