:root{
    --bg:#0b0907;
    --bg2:#12100d;
    --panel:#17130f;
    --panel2:#0f0d0b;
    --text:#f3eee7;
    --muted:#a89d91;
    --line:#302820;
    --steel:#d8d2cb;
    --copper:#b86f35;
    --copper2:#e3a15f;
    --copper3:#7d4826;
    --live:#e3543f;
    --wrap:1060px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
    margin:0;
    min-height:100vh;
    padding-bottom:92px;
    color:var(--text);
    font-family:Arial,Helvetica,sans-serif;
    background:
        radial-gradient(circle at 78% 12%,rgba(184,111,53,.14),transparent 32rem),
        radial-gradient(circle at 5% 55%,rgba(227,161,95,.05),transparent 28rem),
        linear-gradient(180deg,#0c0a08 0%,#080706 100%);
}
a{color:inherit;text-decoration:none}
button,input{font:inherit}
button{color:inherit}
.wrap{width:min(calc(100% - 34px),var(--wrap));margin-inline:auto}

.site-header{
    border-bottom:1px solid rgba(227,161,95,.15);
    background:rgba(10,8,7,.92);
    backdrop-filter:blur(14px);
}
.header-inner{height:72px;display:flex;align-items:center;gap:25px}
.brand{display:flex;align-items:center;gap:9px;margin-right:auto}
.brand-plate{
    position:relative;
    display:inline-flex;
    align-items:center;
    min-height:34px;
    padding:0 13px;
    border:1px solid #766756;
    border-radius:3px;
    color:#e8e1d9;
    font-size:16px;
    letter-spacing:.18em;
    font-weight:500;
    text-shadow:0 1px 1px #000;
    background:
        linear-gradient(180deg,rgba(255,255,255,.08),rgba(0,0,0,.12)),
        linear-gradient(90deg,#453b31,#716353 45%,#443a30);
    box-shadow:
        inset 0 1px rgba(255,255,255,.13),
        inset 0 -1px rgba(0,0,0,.5),
        0 5px 15px rgba(0,0,0,.25);
}
.brand-plate::before,.brand-plate::after{
    content:"";
    position:absolute;
    width:4px;height:4px;border-radius:50%;
    top:5px;
    background:#17120e;
    box-shadow:inset 0 1px rgba(255,255,255,.18);
}
.brand-plate::before{left:5px}
.brand-plate::after{right:5px}
.brand-radio{
    font-size:10px;
    letter-spacing:.28em;
    font-weight:800;
    color:var(--copper2);
}
.nav{display:flex;gap:22px;color:#b8ada2;font-size:13px}
.nav a:hover{color:#fff}
.install-btn{
    border:1px solid #564536;
    background:#17120e;
    border-radius:5px;
    padding:9px 13px;
    color:#dcd4cb;
    cursor:pointer;
}
.install-btn:hover{border-color:var(--copper)}

.radio-shell{
    min-height:calc(100vh - 165px);
    display:flex;
    align-items:center;
    padding:58px 0;
}
.radio-grid{
    display:grid;
    grid-template-columns:1.08fr .92fr;
    gap:78px;
    align-items:center;
}
.eyebrow{
    display:flex;align-items:center;gap:9px;
    color:#b7aa9d;
    font-size:10px;
    letter-spacing:.2em;
    font-weight:700;
}
.live-dot{
    width:7px;height:7px;border-radius:50%;
    background:var(--live);
    box-shadow:0 0 12px rgba(227,84,63,.65);
}
h1{
    margin:17px 0 14px;
    font-size:clamp(58px,8vw,94px);
    line-height:.83;
    letter-spacing:-.055em;
    font-weight:800;
}
h1 span{
    color:var(--copper2);
    text-shadow:0 0 30px rgba(184,111,53,.12);
}
.tagline{
    margin:0 0 30px;
    color:var(--muted);
    font-size:17px;
}
.play-main{
    display:inline-flex;
    align-items:center;
    gap:12px;
    border:1px solid #c47e42;
    border-radius:5px;
    padding:15px 21px;
    cursor:pointer;
    color:#17100a;
    background:
        linear-gradient(180deg,#efb473,#c67d41);
    box-shadow:
        inset 0 1px rgba(255,255,255,.35),
        0 12px 30px rgba(0,0,0,.28);
    font-weight:900;
    letter-spacing:.06em;
}
.play-main:hover{filter:brightness(1.06)}
.play-icon{font-size:11px}
.stream-note{
    margin:12px 0 0;
    color:#756b62;
    font-size:11px;
}

.now-card{
    border:1px solid #403328;
    border-radius:8px;
    padding:26px;
    background:
        linear-gradient(180deg,rgba(255,255,255,.025),rgba(0,0,0,.12)),
        var(--panel);
    box-shadow:
        inset 0 1px rgba(255,255,255,.035),
        0 30px 70px rgba(0,0,0,.34);
}
.now-card-top{
    display:flex;
    justify-content:space-between;
    gap:16px;
    font-size:9px;
    letter-spacing:.18em;
    color:#87796c;
    font-weight:800;
}
.signal{color:#9b8c7f}
.signal.online{color:var(--copper2)}
.signal.offline{color:var(--live)}

.vinyl{
    width:190px;
    height:190px;
    margin:29px auto 26px;
    border-radius:50%;
    display:grid;
    place-items:center;
    position:relative;
    overflow:hidden;
    border:1px solid #2e2924;
    background:
        repeating-radial-gradient(circle at center,#171615 0 3px,#0b0b0a 4px 7px);
    box-shadow:0 18px 42px rgba(0,0,0,.42);
}
.vinyl::after{
    content:"";
    position:absolute;
    inset:7px;
    border-radius:50%;
    border:1px solid rgba(255,255,255,.025);
}
.vinyl-label{
    width:72px;height:72px;border-radius:50%;
    display:grid;place-items:center;
    z-index:2;
    background:
        radial-gradient(circle at 50% 40%,#da9b61,#8e542d 72%);
    border:1px solid #efb97d;
    box-shadow:0 0 0 7px #11100e;
}
.vinyl-label span{
    display:grid;place-items:center;
    width:32px;height:32px;
    border-radius:50%;
    color:#eee4d8;
    background:#15110e;
    font-size:19px;
    font-weight:900;
}
.track{text-align:center;display:grid;gap:6px}
.track strong{
    font-size:19px;
    line-height:1.25;
    overflow-wrap:anywhere;
}
.track span{color:var(--muted);font-size:11px}
.mini-stats{
    display:grid;
    grid-template-columns:1fr 1fr;
    border-top:1px solid var(--line);
    margin-top:21px;
}
.mini-stats>div{
    display:grid;
    gap:5px;
    text-align:center;
    padding-top:15px;
}
.mini-stats>div+div{border-left:1px solid var(--line)}
.mini-stats span{
    font-size:8px;
    letter-spacing:.16em;
    color:#776b60;
}
.mini-stats strong{font-size:13px;color:#d8cfc5}

.player-bar{
    position:fixed;
    left:0;right:0;bottom:0;
    z-index:50;
    background:rgba(13,10,8,.96);
    backdrop-filter:blur(18px);
    border-top:1px solid #3d3025;
    box-shadow:0 -12px 35px rgba(0,0,0,.3);
}
.player-inner{
    min-height:76px;
    display:grid;
    grid-template-columns:auto minmax(150px,1fr) auto auto;
    gap:17px;
    align-items:center;
}
.player-play{
    width:46px;height:46px;
    border:1px solid #d18a4d;
    border-radius:5px;
    background:linear-gradient(180deg,#e6a45f,#ad642f);
    color:#17100a;
    font-weight:900;
    cursor:pointer;
}
.player-track{min-width:0;display:grid;gap:3px}
.player-live{
    font-size:8px;
    letter-spacing:.16em;
    color:#83766a;
    display:flex;align-items:center;gap:6px;
}
.player-track strong{
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    font-size:13px;
    color:#eee8e1;
}
.player-status{font-size:11px;color:#887c70;white-space:nowrap}
.volume{display:flex;align-items:center;gap:9px}
.volume>span{font-size:8px;letter-spacing:.12em;color:#75695e}
.volume input{width:100px;accent-color:var(--copper)}

.footer{
    padding:18px 0 112px;
    color:#675d54;
    font-size:10px;
    letter-spacing:.04em;
}
.footer-inner{display:flex;justify-content:space-between;gap:20px}
.footer a:hover{color:var(--copper2)}

body.is-playing .vinyl{animation:spin 8s linear infinite}
body.is-playing .player-play{box-shadow:0 0 18px rgba(184,111,53,.22)}
@keyframes spin{to{transform:rotate(360deg)}}

@media(max-width:760px){
    body{padding-bottom:106px}
    .nav{display:none}
    .header-inner{height:66px}
    .brand-plate{font-size:13px;min-height:31px;padding-inline:11px}
    .radio-shell{padding:40px 0;min-height:auto}
    .radio-grid{grid-template-columns:1fr;gap:38px}
    h1{font-size:61px}
    .tagline{font-size:15px}
    .now-card{max-width:520px}
    .player-inner{
        min-height:94px;
        padding:9px 0;
        grid-template-columns:auto minmax(0,1fr) auto;
    }
    .player-status{grid-column:2/4;font-size:10px}
    .volume{display:none}
    .footer{padding-bottom:128px}
}
@media(max-width:420px){
    .wrap{width:min(calc(100% - 26px),var(--wrap))}
    h1{font-size:53px}
    .vinyl{width:170px;height:170px}
    .now-card{padding:22px}
    .install-btn{font-size:11px}
}


/* PWA */
.pwa-notice{
    position:fixed;
    left:50%;
    bottom:92px;
    z-index:80;
    width:min(calc(100% - 28px),560px);
    transform:translateX(-50%);
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:18px;
    padding:14px 15px;
    border:1px solid #574333;
    border-radius:7px;
    background:rgba(23,18,14,.98);
    box-shadow:0 18px 50px rgba(0,0,0,.45);
}
.pwa-notice[hidden]{display:none}
.pwa-notice>div{display:grid;gap:3px}
.pwa-notice strong{font-size:12px;color:#f0e8df}
.pwa-notice span{font-size:10px;line-height:1.45;color:#9f9286}
.pwa-notice button{
    flex:0 0 auto;
    border:1px solid #c47e42;
    border-radius:5px;
    padding:9px 11px;
    background:linear-gradient(180deg,#e6a45f,#ad642f);
    color:#17100a;
    font-size:9px;
    font-weight:900;
    letter-spacing:.08em;
    cursor:pointer;
}
.is-offline .player-live .live-dot,
.is-offline .eyebrow .live-dot{
    background:#777;
    box-shadow:none;
}
.standalone .site-header{
    padding-top:env(safe-area-inset-top);
}
@media(max-width:760px){
    .pwa-notice{
        bottom:108px;
        align-items:flex-start;
    }
}

.footer-version{color:var(--copper2);margin-left:5px}