:root { color-scheme:dark; --accent:#e8aa55; --ink:#fff9ec; } * { box-sizing:border-box; } body { margin:0; min-width:320px; font-family:Arial,Helvetica,sans-serif; color:var(--ink); background:#21100c; }
.radio-page { min-height:100svh; display:grid; place-items:center; padding:28px 18px; position:relative; isolation:isolate; overflow:hidden; }.background { position:absolute; inset:-20px; z-index:-1; background:linear-gradient(135deg,rgba(39,13,8,.74),rgba(17,8,5,.84)),url('../bg.jpeg') center/cover; filter:blur(3px); transform:scale(1.04); }
.radio-card { width:min(100%,530px); text-align:center; padding:36px 28px 30px; border:1px solid rgba(255,231,191,.28); border-radius:24px; background:rgba(42,17,10,.76); box-shadow:0 22px 80px #0b0503a8; backdrop-filter:blur(8px); }.logo { width:clamp(125px,35vw,190px); aspect-ratio:1; object-fit:cover; border-radius:50%; border:4px solid rgba(232,170,85,.8); box-shadow:0 0 0 8px rgba(232,170,85,.12); }.eyebrow { margin:27px 0 9px; font-size:.72rem; font-weight:bold; letter-spacing:.16em; color:#f2c782; } h1 { margin:0; font-size:clamp(1.75rem,6vw,2.55rem); line-height:1.05; }.tagline { margin:12px 0 22px; color:#f7dfba; font-size:1.05rem; }
.on-air { display:flex; justify-content:center; gap:9px; align-items:center; font-size:.73rem; letter-spacing:.1em; color:#ffd08c; }.on-air span { width:9px; height:9px; border-radius:50%; background:#ed4b35; box-shadow:0 0 0 0 #ed4b3599; animation:pulse 1.6s infinite; }.vu-meter { height:34px; display:flex; justify-content:center; align-items:center; gap:3px; margin:15px 0 4px; }.vu-meter i { width:4px; height:7px; border-radius:5px; background:#e9a950; transition:height .2s; }.vu-meter.active i { animation:vu .65s ease-in-out infinite alternate; }.vu-meter.active i:nth-child(2n) { animation-delay:-.35s; }.vu-meter.active i:nth-child(3n) { animation-delay:-.1s; }.vu-meter.active i:nth-child(4n) { animation-delay:-.48s; }.play-button { width:100%; margin:14px 0 10px; padding:12px 20px 12px 13px; border:0; border-radius:999px; background:linear-gradient(135deg,#f1bd68,#c96d2f); color:#291006; font-size:1.05rem; font-weight:800; cursor:pointer; box-shadow:0 7px 18px #0006; transition:transform .18s,filter .18s; display:flex; align-items:center; justify-content:center; gap:12px; }.play-button:hover { transform:translateY(-2px); filter:brightness(1.06); }.play-button:focus-visible,.links a:focus-visible { outline:3px solid white; outline-offset:3px; }.play-icon { display:grid; place-items:center; width:39px; height:39px; border-radius:50%; background:#351407; color:#ffe6ba; font-size:1rem; padding-left:2px; }.player-message { min-height:1.25em; margin:0; font-size:.87rem; color:#f8dcb5; } @keyframes vu { from { height:7px; opacity:.45; } to { height:31px; opacity:1; } }
.links { display:flex; justify-content:center; flex-wrap:wrap; gap:9px; margin-top:27px; }.links:empty { display:none; }.links a { padding:10px 13px; border:1px solid #f4c48088; border-radius:999px; color:#fff5e4; font-size:.88rem; font-weight:bold; text-decoration:none; transition:background .18s; }.links a:hover { background:#f4c4802b; }.links .google-play { display:inline-flex; align-items:center; gap:7px; padding:7px 13px 7px 9px; border-radius:10px; background:#090909; border-color:#ffffff80; line-height:1; text-align:left; }.google-play svg { width:29px; height:29px; flex:none; }.google-play span { display:grid; gap:2px; }.google-play small { font-size:.48rem; letter-spacing:.07em; }.contact { margin:24px 0 0; font-size:.84rem; color:#e9c292; }.contact:empty { display:none; } @keyframes pulse { 70% { box-shadow:0 0 0 8px transparent; } 100% { box-shadow:0 0 0 0 transparent; } } @media (max-width:430px) { .radio-card { padding:30px 20px 25px; } }