/* Виджет эфира «Марий Эл Радио» для iframe: полоса (~80 px) и карточка (~300×300), светлая и тёмная темы */
@import url(fonts.css);
*{box-sizing:border-box}
html,body{margin:0;height:100%;overflow:hidden;background:transparent}
body{font:14px/1.3 'Geologica',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;-webkit-font-smoothing:antialiased}
.w-light{--bg:linear-gradient(120deg,#fff 0%,#fff3ee 55%,#f1ecff 100%);--ink:#1c1530;--mute:#5f5873;--bd:rgba(28,21,48,.1);--btn:#d61f33;--btnc:#fff;--tr:rgba(28,21,48,.15)}
.w-dark{--bg:linear-gradient(120deg,#1c1530 0%,#2b1b3d 55%,#3a1726 100%);--ink:#fff;--mute:rgba(255,255,255,.72);--bd:rgba(255,255,255,.14);--btn:#fff;--btnc:#d61f33;--tr:rgba(255,255,255,.25)}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.w{position:relative;height:100%;color:var(--ink);background:var(--bg);border:1px solid var(--bd);overflow:hidden}
.w-ph{object-fit:cover;background:#fff}
.w-logo{width:22px;height:22px;border-radius:6px}
.w-top{display:flex;align-items:center;gap:6px;min-width:0}
.w-site{color:var(--ink);font-weight:600;font-size:13px;text-decoration:none;white-space:nowrap}.w-site:hover,.w-site:focus-visible{text-decoration:underline}
.w-live{font-size:10px;font-weight:700;letter-spacing:.06em;color:#fff;background:#d61f33;border-radius:999px;padding:2px 7px}
.w-now{min-width:0}.w-now b,.w-now span{display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.w-now b{font-weight:600;font-size:16px;letter-spacing:-.01em}.w-now span{color:var(--mute);font-size:13px}
.w-ctrl{display:flex;align-items:center;gap:10px}
.w-play{display:grid;place-items:center;width:48px;height:48px;flex:none;border:0;border-radius:50%;background:var(--btn);cursor:pointer;box-shadow:0 8px 18px -10px rgba(214,31,51,.7)}
.w-play svg{width:22px;height:22px;fill:var(--btnc)}
.w-play.load svg{animation:wp 1s ease-in-out infinite}@keyframes wp{50%{opacity:.35}}
:focus-visible{outline:3px solid #6b3fd1;outline-offset:2px}
.w-vol{display:flex;align-items:center}
.w-vol input{width:90px;accent-color:#d61f33}
/* полоса */
.w-bar .w{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;grid-template-rows:auto auto;column-gap:12px;align-items:center;padding:8px 14px 8px 8px;border-radius:18px}
.w-bar .w-ph{grid-row:1/3;grid-column:2;width:60px;height:60px;border-radius:14px}
.w-bar .w-ctrl{display:contents}.w-bar .w-play{grid-row:1/3;grid-column:1}
.w-bar .w-top{grid-column:3;grid-row:1}.w-bar .w-now{grid-column:3;grid-row:2}.w-bar .w-vol{grid-column:4;grid-row:1/3}
.w-bar .w-logo{display:none}
@media (max-width:420px){.w-bar .w-vol{display:none}.w-bar .w-ph{width:52px;height:52px}.w-bar .w{column-gap:10px}}
/* карточка */
.w-card .w{display:flex;flex-direction:column;border-radius:24px;padding:14px}
.w-card .w-ph{position:absolute;inset:0;width:100%;height:100%;opacity:.95}
.w-card .w::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 42%,rgba(20,12,30,.88));pointer-events:none}
.w-card .w-top,.w-card .w-now,.w-card .w-ctrl{position:relative;z-index:1}
.w-card .w-site{color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.5)}
.w-card .w-now{margin-top:auto;color:#fff}.w-card .w-now span{color:rgba(255,255,255,.82)}
.w-card .w-ctrl{margin-top:10px}.w-card .w-vol{flex:1}.w-card .w-vol input{width:100%}
.w-card.w-light .w-play{background:#fff}.w-card.w-light .w-play svg{fill:#d61f33}
@media (prefers-reduced-motion:reduce){.w-play.load svg{animation:none}}