:root {
    --status-color: #08040f;
    --purple: #833eef;
    --cyan: #1ebfd9;
    --orange: #d17107;
    --nav-height: 70px;
    color-scheme: dark;
    font-family: Arial, Helvetica, sans-serif;
}

.screen--website { flex-direction: column; background: #08040f; }
.website-toolbar { flex: 0 0 auto; padding: 8px 12px; background: #10061c; }
.website-toolbar button { min-height: 44px; padding: 8px 16px; border: 1px solid #a855f7; border-radius: 12px; color: #fff; background: #30015c; cursor: pointer; }
#website-frame { display: block; flex: 1; min-height: 0; width: 100%; border: 0; background: #050505; }

* { box-sizing: border-box; }

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
    background: #050505;
    color: #fff;
}

button, a, input { font: inherit; }
button { -webkit-tap-highlight-color: transparent; }

body {
    min-height: 100dvh;
    background:
        radial-gradient(circle at 15% 10%, rgba(168, 85, 247, .18), transparent 35%),
        radial-gradient(circle at 85% 30%, rgba(34, 211, 238, .12), transparent 30%),
        radial-gradient(circle at 50% 90%, rgba(217, 119, 6, .10), transparent 35%),
        #050505;
}

.app-shell {
    position: fixed;
    inset: env(safe-area-inset-top) 0 calc(var(--nav-height) + env(safe-area-inset-bottom)) 0;
    overflow: hidden;
}

body::before {
    content: "";
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: env(safe-area-inset-top, 0px);
    background: var(--status-color);
    pointer-events: none;
    z-index: 20;
}
.screen--player[data-theme="radio"] { --accent: #833eef; --deep: #30015c; }

.screen {
    position: absolute;
    inset: 0;
    display: none;
    min-width: 0;
    overflow: hidden;
}
.screen.is-active { display: flex; }

.screen--home {
    flex-direction: column;
    padding: clamp(18px, 3vh, 28px) 14px 8px;
}

.brand {
    position: relative;
    flex: 0 0 clamp(160px, 24vh, 190px);
    min-height: 0;
    display: grid;
    place-items: start center;
}
.brand::before {
    content: "";
    position: absolute;
    inset: -8px 12%;
    border-radius: 50%;
    background: radial-gradient(ellipse, rgba(131, 62, 239, .22), rgba(48, 1, 92, .08) 48%, transparent 72%);
    filter: blur(5px);
}
.brand img {
    position: relative;
    z-index: 1;
    width: clamp(158px, 22.5vh, 184px);
    height: clamp(158px, 22.5vh, 184px);
    object-fit: contain;
    filter: drop-shadow(0 12px 28px #000) drop-shadow(0 0 15px rgba(131, 62, 239, .32));
}

.stations {
    display: flex;
    flex: 1;
    min-height: 0;
    flex-direction: column;
    gap: 8px;
}
.station {
    --accent: var(--purple);
    --glass: rgba(48, 1, 92, .70);
    --glow: rgba(131, 62, 239, .5);
    display: grid;
    grid-template-columns: 84px minmax(0, 1fr) 54px;
    gap: 12px;
    align-items: center;
    flex: 1;
    min-height: 0;
    width: 100%;
    padding: 5px 12px;
    border: 1px solid var(--accent);
    border-radius: 18px;
    color: #fff;
    text-align: left;
    background: linear-gradient(135deg, var(--glass), rgba(5, 6, 11, .86));
    box-shadow: 0 9px 24px rgba(0, 0, 0, .38), inset 0 1px rgba(255, 255, 255, .05);
    backdrop-filter: blur(9px);
    cursor: pointer;
}
.station--manele { --accent: var(--cyan); --glass: rgba(2, 47, 58, .74); --glow: rgba(30, 191, 217, .5); }
.station--afro { --accent: var(--orange); --glass: rgba(83, 35, 3, .76); --glow: rgba(209, 113, 7, .5); }
.station > img { width: 78px; height: 78px; object-fit: contain; filter: drop-shadow(0 5px 12px rgba(0, 0, 0, .7)); }
.station__copy { min-width: 0; }
.station__copy strong { display: block; font-size: 19px; line-height: 1.16; text-shadow: 0 2px 8px #000; }
.station__copy small { display: block; margin-top: 8px; color: #e8e4eb; font-size: 13px; line-height: 1.28; text-shadow: 0 2px 6px #000; }
.station__play {
    width: 49px;
    height: 49px;
    display: grid;
    place-items: center;
    padding-left: 3px;
    border: 2px solid rgba(255, 255, 255, .6);
    border-radius: 50%;
    background: var(--accent);
    box-shadow: 0 7px 22px var(--glow), 0 4px 12px #0008;
    color: #fff;
    font-size: 23px;
}
.station:active .station__play { transform: scale(.94); }

.screen--player {
    --accent: var(--purple);
    --deep: #30015c;
    flex-direction: column;
    align-items: center;
    padding: clamp(14px, 2vh, 24px) clamp(16px, 5vw, 32px) 8px;
    background: linear-gradient(180deg, color-mix(in srgb, var(--deep), #000 3%), var(--deep));
}
.screen--player[data-theme="manele"] { --accent: var(--cyan); --deep: #022f3a; background: linear-gradient(155deg, #064b5a, #15193f 49%, #022f3a 88%); }
.screen--player[data-theme="afro"] { --accent: #df7900; --deep: #532303; background: linear-gradient(155deg, #733000, #512239 48%, #542100 88%); }
.back {
    position: absolute;
    z-index: 3;
    top: 12px;
    left: 12px;
    width: 58px;
    height: 58px;
    padding: 0 0 4px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 50%;
    background: rgba(0, 0, 0, .45);
    color: #fff;
    font-size: 38px;
    line-height: 1;
    cursor: pointer;
}
.player-art {
    flex: 0 1 min(44vh, 390px);
    width: min(78vw, 390px);
    min-height: 190px;
    display: grid;
    place-items: start center;
}
.player-art img {
    width: min(78vw, 390px);
    height: min(78vw, 390px);
    max-height: 100%;
    object-fit: contain;
    border-radius: 50%;
    background: rgba(255, 255, 255, .25);
    border: clamp(9px, 2.3vw, 16px) solid rgba(255, 255, 255, .24);
    filter: drop-shadow(0 12px 24px rgba(0,0,0,.35));
}
.screen--player h1 {
    flex: 1 1 auto;
    display: grid;
    place-items: center;
    min-height: 56px;
    margin: 0;
    text-align: center;
    font: 400 clamp(34px, 8vw, 52px)/1.05 Georgia, serif;
}
.volume-row, .volume-labels, .controls { width: min(100%, 420px); }
.volume-row { display: flex; align-items: center; height: 38px; }
#volume {
    width: 100%;
    height: 6px;
    margin: 0;
    appearance: none;
    border-radius: 99px;
    background: linear-gradient(to right, var(--accent) 0 50%, #fff 50% 100%);
}
#volume::-webkit-slider-thumb { appearance: none; width: 25px; height: 25px; border: 0; border-radius: 50%; background: var(--accent); }
#volume::-moz-range-thumb { width: 25px; height: 25px; border: 0; border-radius: 50%; background: var(--accent); }
.volume-labels { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 62px; font-size: 25px; }
.volume-labels button { justify-self: start; border: 0; padding: 8px 0; background: none; color: #fff; font-size: 34px; font-weight: 800; }
.volume-labels output { font-size: 25px; }
.speaker--loud { justify-self: end; font-size: 27px; font-weight: 900; transform: scaleX(-1); }
.speaker--mute { display: inline-block; transform: scaleX(-1); }
.controls { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; flex: 0 0 clamp(105px, 18vh, 155px); }
.main-play {
    justify-self: center;
    width: clamp(96px, 23vw, 118px);
    height: clamp(96px, 23vw, 118px);
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 50%;
    background: #fff;
    color: var(--deep);
    cursor: pointer;
}
.main-play span { padding-left: 8px; font-size: clamp(54px, 14vw, 70px); line-height: 1; }
.main-play.is-playing span { padding-left: 0; font-size: 0; }
.main-play.is-playing span::before { content: "Ⅱ"; font: 900 54px/1 Arial, sans-serif; }
.levels { justify-self: center; height: 54px; display: flex; align-items: end; gap: 5px; }
.levels i { width: 7px; height: 34%; border-radius: 3px; background: #fff; }
.levels i:nth-child(2) { height: 76%; }.levels i:nth-child(3) { height: 100%; }.levels i:nth-child(4) { height: 62%; }
.screen--player.is-playing .levels i { animation: level .65s ease-in-out infinite alternate; }
.screen--player.is-playing .levels i:nth-child(2) { animation-delay: -.2s; }.screen--player.is-playing .levels i:nth-child(3) { animation-delay: -.4s; }
@keyframes level { to { height: 25%; } }
.live { justify-self: center; color: var(--accent); font-size: 18px; font-weight: 900; line-height: .9; text-align: center; }
.live b { display: block; font-size: 28px; }

.screen--info {
    flex-direction: column;
    align-items: center;
    padding: clamp(26px, 5vh, 46px) 22px 16px;
    text-align: center;
}
.info-brand { position: relative; }
.info-brand::before { content: ""; position: absolute; inset: 0 -30%; background: radial-gradient(ellipse, rgba(131,62,239,.25), transparent 68%); filter: blur(8px); }
.info-brand img { position: relative; width: clamp(150px, 24vh, 190px); height: clamp(150px, 24vh, 190px); object-fit: contain; filter: drop-shadow(0 12px 28px #000) drop-shadow(0 0 14px rgba(131,62,239,.3)); }
.info-brand h1 { position: relative; margin: 2px 0 clamp(22px, 5vh, 36px); font-size: 25px; letter-spacing: .04em; }
.info-links { width: min(100%, 420px); }
.info-links a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 68px;
    margin: 14px 0;
    padding: 14px;
    border: 1px solid rgba(168,85,247,.62);
    border-radius: 18px;
    color: #fff;
    background: linear-gradient(135deg, rgba(48,1,92,.78), rgba(16,5,27,.94));
    box-shadow: 0 10px 28px rgba(0,0,0,.34), 0 0 18px rgba(131,62,239,.10);
    text-decoration: none;
    font-size: 18px;
    font-weight: 800;
}
.info-contact { margin-top: 6px; padding-top: 10px; text-align: center; flex-shrink: 0; }
.info-contact strong { display: block; font-size: 14px; }
.info-contact a { display: block; margin: 6px 0; color: #d5a6ff; font-size: 16px; text-decoration: none; }
.info-contact small { display: block; color: #c5bbcf; font-size: 12px; }
.info-signature { margin: auto 0 0; padding-top: 16px; color: #aaa2b4; font-size: 13px; flex-shrink: 0; }

.bottom-nav {
    position: fixed;
    z-index: 10;
    left: 0;
    right: 0;
    bottom: 0;
    height: calc(var(--nav-height) + env(safe-area-inset-bottom));
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
    padding: 5px 5px calc(7px + env(safe-area-inset-bottom));
    background: #10061c;
}
.bottom-nav button {
    min-width: 0;
    border: 1px solid rgba(168,85,247,.45);
    border-radius: 18px;
    background: linear-gradient(135deg, rgba(48,1,92,.58), rgba(16,5,27,.92));
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}
.bottom-nav button span { display: block; margin-bottom: 4px; font-size: 18px; }
.bottom-nav button.is-active { background: linear-gradient(135deg, rgba(91,17,148,.78), rgba(36,6,56,.96)); border-color: rgba(180,91,255,.75); }

@media (max-height: 700px) {
    :root { --nav-height: 62px; }
    .screen--home { padding: 14px 10px 5px; }
    .brand { flex-basis: 142px; }
    .brand img { width: 138px; height: 138px; }
    .stations { gap: 5px; }
    .station { grid-template-columns: 67px minmax(0,1fr) 47px; gap: 8px; padding: 3px 9px; border-radius: 15px; }
    .station > img { width: 63px; height: 63px; }
    .station__copy strong { font-size: 16px; }
    .station__copy small { margin-top: 4px; font-size: 11.5px; }
    .station__play { width: 43px; height: 43px; }
    .player-art { flex-basis: 39vh; }
    .screen--player h1 { font-size: clamp(29px, 7vw, 40px); }
    .volume-labels { height: 52px; }
    .controls { flex-basis: 104px; }
    .main-play { width: 88px; height: 88px; }
    .main-play span { font-size: 51px; }
    .info-brand img { width: 130px; height: 130px; }
    .info-brand h1 { margin-bottom: 18px; }
    .info-links a { min-height: 54px; margin: 10px 0; }
}

@media (max-width: 370px) {
    .station { grid-template-columns: 64px minmax(0,1fr) 44px; gap: 7px; padding-inline: 7px; }
    .station > img { width: 60px; height: 60px; }
    .station__copy strong { font-size: 15.5px; }
    .station__play { width: 40px; height: 40px; }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: .01ms !important; }
}

/* Larger home navigation uses a little of the cards' flexible height.
   Player and Info viewport heights, branding and station typography stay intact. */
body:has(#home-screen.is-active) { --nav-height: 82px; }
.screen--home .stations { gap: 12px; }
@media (max-height: 700px) {
    body:has(#home-screen.is-active) { --nav-height: 74px; }
    .screen--home .stations { gap: 8px; }
}

/* Keep the email and all three Info links visible together. */
.screen--info { padding: clamp(14px, 3vh, 24px) 18px 12px; }
.screen--info .info-brand img { width: clamp(100px, 19vh, 155px); height: clamp(100px, 19vh, 155px); }
.screen--info .info-brand h1 { margin: 4px 0 14px; }
.screen--info .info-links a { min-height: 52px; margin: 9px 0; padding: 10px; }
@media (max-height: 600px) {
    .screen--info .info-brand img { width: 90px; height: 90px; }
    .screen--info .info-brand h1 { font-size: 21px; margin-bottom: 6px; }
    .screen--info .info-links a { min-height: 42px; padding: 7px; margin: 6px 0; }
    .info-contact { padding-top: 6px; }
    .info-signature { padding-top: 10px; }
}

/* Playerul folosește exact interfața actuală a fiecărui post, în aceeași
   încadrare fără scroll folosită de aplicația Android. */
.screen--player {
    display: none;
    padding: 0;
    background: #050505;
}
.screen--player.is-active { display: block; }
.screen--player > iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: var(--deep);
}
.screen--player > .back {
    position: fixed;
    top: calc(env(safe-area-inset-top) + 12px);
    left: 12px;
    z-index: 2147483647;
}

.screen--tv { background: #08040f; }
#tv-frame { width: 100%; height: 100%; border: 0; display: block; }
body.tv-active .app-shell {
    top: calc(var(--tv-top, 0px) + env(safe-area-inset-top));
    bottom: auto;
    height: calc(var(--tv-height, 100dvh) - var(--nav-height) - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
body.tv-active .bottom-nav {
    bottom: auto;
    top: calc(var(--tv-top, 0px) + var(--tv-height, 100dvh) - var(--nav-height) - env(safe-area-inset-bottom));
}

/* RADIO XXL premium home — visual changes only; player/TV/Info logic untouched. */
body:has(#home-screen.is-active) { --nav-height: clamp(68px, 11vh, 94px); }
.screen--home { padding: clamp(8px, 1.4vh, 15px) clamp(9px, 2vw, 17px) 9px; background: radial-gradient(ellipse at 50% 0%,#2a0647 0%,#0d031b 42%,#040308 95%); }
.screen--home .brand { flex: 0 0 clamp(105px, 22vh, 205px); place-items: center; }
.screen--home .brand::before { inset: 0 13%; background: radial-gradient(ellipse,#8c0cdd66,transparent 70%); }
.screen--home .brand img { width: min(76vw, clamp(180px, 34vh, 325px)); height: 100%; object-fit: contain; filter: drop-shadow(0 0 16px #9a00fc88); }
.screen--home .stations { gap: clamp(7px,1.2vh,14px); }
.screen--home .station { position:relative; isolation:isolate; overflow:hidden; grid-template-columns: 40% minmax(0,1fr) clamp(40px, 12vw, 75px); gap:clamp(4px,1vw,12px); padding:0 clamp(7px,1.5vw,14px) 0 0; border:1.5px solid var(--accent); border-radius:clamp(15px,4vw,25px); background:linear-gradient(105deg,var(--glass),#0b0715 72%); box-shadow:inset 0 0 22px #0008,0 4px 16px #0009,0 0 9px var(--glow); }
.screen--home .station::after {content:"";position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(120deg,transparent 55%,var(--glow) 180%);}
.screen--home .station>img { grid-column:1;grid-row:1 / span 3;width:100%;height:100%;min-height:0;object-fit:cover;object-position:40% center;align-self:stretch;mask-image:linear-gradient(to right,#000 76%,transparent 100%);-webkit-mask-image:linear-gradient(to right,#000 76%,transparent 100%);filter:none; }
.screen--home .station__genre {grid-column:2;grid-row:1;align-self:end;justify-self:start;white-space:nowrap;max-width:100%;font-size:clamp(8px,2.1vw,13px);font-weight:800;letter-spacing:.03em;color:var(--accent);padding:5px 8px;border:1px solid var(--accent);border-radius:30px;background:#100c20c9;box-shadow:0 0 10px var(--glow);}
.screen--home .station__copy {grid-column:2;grid-row:2;align-self:center;}
.screen--home .station__copy strong {font-size:clamp(15px,4.4vw,29px);letter-spacing:-.035em;white-space:nowrap;}
.screen--home .station__copy small {font-size:clamp(10px,2.9vw,17px);margin-top:clamp(5px,1vh,11px);line-height:1.25;}
.screen--home .station__play {grid-column:3;grid-row:1 / span 3;align-self:center;justify-self:center;width:clamp(37px,10vw,72px);height:clamp(37px,10vw,72px);font-size:clamp(20px,5vw,32px);border:2px solid #fff9;background:radial-gradient(circle at 35% 25%,var(--accent),var(--glass));box-shadow:0 0 0 6px #ffffff0a,0 0 20px var(--glow);}
body:has(#home-screen.is-active) .bottom-nav {gap:0;padding:0 5px calc(3px + env(safe-area-inset-bottom));background:#07050d;}
body:has(#home-screen.is-active) .bottom-nav button {border-radius:0;border:1px solid #5e427466;background:linear-gradient(135deg,#140a23,#08060f);font-size:clamp(14px,3.8vw,22px);}
body:has(#home-screen.is-active) .bottom-nav button:first-child {border-radius:24px 0 0 24px;}
body:has(#home-screen.is-active) .bottom-nav button:last-child {border-radius:0 24px 24px 0;}
body:has(#home-screen.is-active) .bottom-nav button.is-active {background:linear-gradient(145deg,#6200b4,#300067);border:2px solid #a600ff;box-shadow:inset 0 0 20px #ba43ff44,0 0 12px #a400ff66;border-radius:25px;}
body:has(#home-screen.is-active) .bottom-nav button span {font-size:clamp(20px,5vw,29px);margin-bottom:3px;}
@media(max-height:650px){.screen--home .brand {flex-basis:clamp(78px,17vh,115px)}.screen--home .station__genre{padding:3px 5px;font-size:9px}.screen--home .station__copy small{margin-top:3px}}
@media(max-width:350px){.screen--home .station{grid-template-columns:37% minmax(0,1fr) 38px}.screen--home .station__copy strong{font-size:14px}.screen--home .station__genre{font-size:8px;padding:3px 4px}.screen--home .station__play{width:34px;height:34px}}

/* 2026-10-24: compact home cards and navigation, visual-only adjustment. */
body:has(#home-screen.is-active) { --nav-height: 70px; }
.screen--home .stations { flex: 0 1 auto; gap: clamp(7px, 1.1vh, 11px); min-height: 0; }
.screen--home .station { flex: 0 0 auto; height: clamp(112px, 18vh, 160px); min-height: 0; }
.screen--home .brand { flex: 0 0 clamp(115px, 22vh, 195px); }
body:has(#home-screen.is-active) .bottom-nav { gap: 5px; padding: 5px 5px calc(7px + env(safe-area-inset-bottom)); background: #10061c; }
body:has(#home-screen.is-active) .bottom-nav button { border-radius: 18px; font-size: 16px; }
body:has(#home-screen.is-active) .bottom-nav button:first-child,
body:has(#home-screen.is-active) .bottom-nav button:last-child,
body:has(#home-screen.is-active) .bottom-nav button.is-active { border-radius: 18px; }
body:has(#home-screen.is-active) .bottom-nav button span { font-size: 18px; margin-bottom: 4px; }
@media (max-height: 700px) {
  body:has(#home-screen.is-active) { --nav-height: 62px; }
  .screen--home .station { height: clamp(92px, 18vh, 125px); }
  .screen--home .brand { flex-basis: clamp(85px, 19vh, 135px); }
}

/* 2026-10-24: station cards lower and decorative audio equalizer; HOME ONLY. */
.screen--home .stations { margin-top: clamp(26px, 4.5vh, 42px); }
.screen--home .station { position: relative; }
.screen--home .station::before {
  content: ""; position: absolute; pointer-events: none; z-index: 2;
  left: 41%; bottom: 9px; width: 37%; height: 31px;
  background: var(--accent);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22230%22%20height%3D%2242%22%20viewBox%3D%220%200%20230%2042%22%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2219%22%20width%3D%225%22%20height%3D%2223%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2226%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2210%22%20width%3D%225%22%20height%3D%2232%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2223%22%20width%3D%225%22%20height%3D%2219%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2245%22%20y%3D%2216%22%20width%3D%225%22%20height%3D%2226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%2230%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2263%22%20y%3D%227%22%20width%3D%225%22%20height%3D%2235%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2218%22%20width%3D%225%22%20height%3D%2224%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2281%22%20y%3D%2226%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%2228%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2299%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2238%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%2223%22%20width%3D%225%22%20height%3D%2219%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22117%22%20y%3D%2212%22%20width%3D%225%22%20height%3D%2230%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2228%22%20width%3D%225%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%2216%22%20width%3D%225%22%20height%3D%2226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%2221%22%20width%3D%225%22%20height%3D%2221%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22153%22%20y%3D%2210%22%20width%3D%225%22%20height%3D%2232%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22162%22%20y%3D%2224%22%20width%3D%225%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22171%22%20y%3D%2217%22%20width%3D%225%22%20height%3D%2225%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22180%22%20y%3D%2228%22%20width%3D%225%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22189%22%20y%3D%2219%22%20width%3D%225%22%20height%3D%2223%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22198%22%20y%3D%2225%22%20width%3D%225%22%20height%3D%2217%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22207%22%20y%3D%2215%22%20width%3D%225%22%20height%3D%2227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22216%22%20y%3D%2230%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22225%22%20y%3D%2223%22%20width%3D%225%22%20height%3D%2219%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22230%22%20height%3D%2242%22%20viewBox%3D%220%200%20230%2042%22%3E%3Crect%20x%3D%220%22%20y%3D%2230%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%229%22%20y%3D%2219%22%20width%3D%225%22%20height%3D%2223%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2218%22%20y%3D%2226%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2227%22%20y%3D%2210%22%20width%3D%225%22%20height%3D%2232%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2236%22%20y%3D%2223%22%20width%3D%225%22%20height%3D%2219%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2245%22%20y%3D%2216%22%20width%3D%225%22%20height%3D%2226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2254%22%20y%3D%2230%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2263%22%20y%3D%227%22%20width%3D%225%22%20height%3D%2235%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2272%22%20y%3D%2218%22%20width%3D%225%22%20height%3D%2224%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2281%22%20y%3D%2226%22%20width%3D%225%22%20height%3D%2216%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2290%22%20y%3D%2214%22%20width%3D%225%22%20height%3D%2228%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%2299%22%20y%3D%224%22%20width%3D%225%22%20height%3D%2238%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22108%22%20y%3D%2223%22%20width%3D%225%22%20height%3D%2219%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22117%22%20y%3D%2212%22%20width%3D%225%22%20height%3D%2230%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22126%22%20y%3D%2228%22%20width%3D%225%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22135%22%20y%3D%2216%22%20width%3D%225%22%20height%3D%2226%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22144%22%20y%3D%2221%22%20width%3D%225%22%20height%3D%2221%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22153%22%20y%3D%2210%22%20width%3D%225%22%20height%3D%2232%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22162%22%20y%3D%2224%22%20width%3D%225%22%20height%3D%2218%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22171%22%20y%3D%2217%22%20width%3D%225%22%20height%3D%2225%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22180%22%20y%3D%2228%22%20width%3D%225%22%20height%3D%2214%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22189%22%20y%3D%2219%22%20width%3D%225%22%20height%3D%2223%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22198%22%20y%3D%2225%22%20width%3D%225%22%20height%3D%2217%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22207%22%20y%3D%2215%22%20width%3D%225%22%20height%3D%2227%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22216%22%20y%3D%2230%22%20width%3D%225%22%20height%3D%2212%22%20rx%3D%221%22%2F%3E%3Crect%20x%3D%22225%22%20y%3D%2223%22%20width%3D%225%22%20height%3D%2219%22%20rx%3D%221%22%2F%3E%3C%2Fsvg%3E");
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  filter: drop-shadow(0 0 5px var(--accent)); opacity: .85;
}
.screen--home .station__copy { transform: translateY(-11px); }
@media (max-height: 700px) {
  .screen--home .stations { margin-top: 18px; }
  .screen--home .station::before { height: 22px; bottom: 5px; }
  .screen--home .station__copy { transform: translateY(-6px); }
}

/* Text layout correction: clear vertical slots, no overlapping labels/titles. */
.screen--home .station {
  grid-template-rows: 35px minmax(0, 1fr) 34px;
  align-items: stretch;
}
.screen--home .station__genre {
  grid-row: 1; align-self: center; margin-top: 5px;
  padding: 4px 7px; line-height: 1.15;
  font-size: clamp(8px, 1.9vw, 11px);
}
.screen--home .station__copy {
  grid-row: 2; align-self: start; transform: none;
  padding-top: 2px; min-width: 0;
  display: flex; flex-direction: column; gap: 6px;
}
.screen--home .station__copy strong {
  display: block; font-size: clamp(14px, 3.6vw, 21px);
  line-height: 1.12; letter-spacing: -.045em;
}
.screen--home .station__copy small {
  display: block; margin-top: 0; font-size: clamp(10px, 2.55vw, 14px);
  line-height: 1.25; white-space: normal;
}
.screen--home .station::before { bottom: 7px; height: 23px; }
@media(max-width: 390px) {
 .screen--home .station { grid-template-columns: 39% minmax(0,1fr) 39px; grid-template-rows: 32px minmax(0,1fr) 27px; }
 .screen--home .station__genre { font-size: 8px; padding: 3px 5px; }
 .screen--home .station__copy strong { font-size: 14px; }
 .screen--home .station__copy small { font-size: 10px; }
 .screen--home .station::before { height: 19px; bottom: 5px; }
}

/* 2026-10-24: slightly shorter cards; smaller logo positioned lower. HOME ONLY. */
.screen--home { padding-top: clamp(15px, 2.3vh, 23px); }
.screen--home .brand { flex: 0 0 clamp(105px, 19vh, 165px); place-items: center; padding-top: clamp(7px, 1.4vh, 14px); }
.screen--home .brand img { width: min(68vw, clamp(155px, 28vh, 270px)); height: 100%; object-fit: contain; }
.screen--home .stations { margin-top: clamp(22px, 3.5vh, 34px); }
.screen--home .station { height: clamp(105px, 16.4vh, 145px); }
@media(max-height:700px) {
  .screen--home .brand { flex-basis: clamp(85px, 16vh, 120px); padding-top: 7px; }
  .screen--home .brand img { width: min(64vw, clamp(135px, 25vh, 205px)); }
  .screen--home .stations { margin-top: 17px; }
  .screen--home .station { height: clamp(100px, 16.5vh, 120px); }
}

/* Adjustment: move all three cards down without changing their size or content. */
.screen--home .stations { margin-top: clamp(43px, 6.2vh, 59px); }
@media (max-height: 700px) { .screen--home .stations { margin-top: 31px; } }

/* Center the logo + station-card group vertically in the available HOME area.
   Automatic outer margins split spare space evenly; preserve internal spacing. */
.screen--home .brand { margin-top: auto; }
.screen--home .stations { margin-bottom: auto; }
@media (max-height: 690px) {
  .screen--home .brand { margin-top: 0; }
  .screen--home .stations { margin-bottom: 0; }
}

/* Fine adjustment: raise only the home logo by 12px. */
.screen--home .brand img { transform: translateY(-12px); }

/* INFO PREMIUM v1 — scoped exclusively to the Info screen; no layout changes to Radio or TV. */
#info-screen.screen--info {
  background: radial-gradient(ellipse 85% 42% at 50% 13%,rgba(112,22,185,.22),transparent 78%),
              linear-gradient(170deg,#11051e 0%,#090710 55%,#09090d 100%);
  padding-inline: clamp(14px,4vw,24px);
}
#info-screen .info-brand::before { background:radial-gradient(ellipse,rgba(157,49,255,.30),transparent 70%); }
#info-screen .info-brand img { filter:drop-shadow(0 8px 20px #000a) drop-shadow(0 0 18px #b34aff77); }
#info-screen .info-brand h1 {font-weight:900;letter-spacing:.055em;text-shadow:0 0 16px #ae57ff44;}
#info-screen .info-links {display:grid;gap:10px;max-width:420px;}
#info-screen .info-links a {
  position:relative;display:flex;justify-content:flex-start;gap:14px;
  min-height:56px;margin:0;padding:12px 18px;
  border-radius:17px;border:1px solid #8c43b7a8;
  background:linear-gradient(115deg,#3c1258d9,#180a29f2 72%);
  box-shadow:inset 0 1px #ffffff18,0 7px 18px #0005;
  font-size:17px;text-align:left;
}
#info-screen .info-links a::before {content:'↗';order:2;margin-left:auto;color:#d7a5ff;font-size:20px;font-weight:500;}
#info-screen .info-links a::after {content:'♪';order:-1;display:grid;place-items:center;flex:none;width:35px;height:35px;border-radius:12px;background:#a03be72b;color:#e2bbff;font-size:22px;}
#info-screen .info-links a:nth-child(1)::after {content:'♫';}
#info-screen .info-links a:nth-child(2)::after {content:'✈';font-size:20px;}
#info-screen .info-links a:nth-child(3)::after {content:'⌂';font-size:25px;}
#info-screen .info-links a:focus-visible {outline:2px solid #e4b5ff;outline-offset:3px;}
#info-screen .info-contact {width:min(100%,420px);margin-top:18px;padding:17px 10px;border:1px solid #7f399966;border-radius:17px;background:linear-gradient(145deg,#230c36b8,#110b1acc);box-shadow:0 8px 24px #0004;}
#info-screen .info-contact strong {font-size:15px;}
#info-screen .info-contact a {overflow-wrap:anywhere;}
#info-screen .info-signature {font-size:12px;}
@media(max-height:700px){#info-screen .info-links {gap:7px;}#info-screen .info-links a{min-height:46px;padding:7px 13px;}#info-screen .info-contact{margin-top:10px;padding:10px 8px;}#info-screen .info-links a::after{width:29px;height:29px;}}

/* LIVE indicator: scoped to the existing bottom TV button, no size/layout changes. */
.bottom-nav button[data-screen="tv"].xxl-tv-live {
  background: linear-gradient(160deg, #dc1230, #a5001c) !important;
  border-color: #ff5066 !important;
  box-shadow: inset 0 1px 0 #ffffff2b, 0 0 12px #ff183f55 !important;
  color: #fff !important;
}
.bottom-nav button[data-screen="tv"] > .xxl-tv-label { display:none; }
.bottom-nav button[data-screen="tv"].xxl-tv-live > .xxl-tv-label { display:block; font-size:inherit; font-weight:inherit; line-height:inherit; }
/* Hide only the original text node, keeping the original icon and layout. */
.bottom-nav button[data-screen="tv"].xxl-tv-live { font-size:0 !important; }
.bottom-nav button[data-screen="tv"].xxl-tv-live > span:not(.xxl-tv-label) { font-size:initial; }
.bottom-nav button[data-screen="tv"].xxl-tv-live > .xxl-tv-label { font-size:14px; }
.bottom-nav button[data-screen="tv"].xxl-tv-live > .xxl-tv-label::after { content:"LIVE"; }

/* RADIO XXL 2026 - visual refresh only; layout, photos and controls unchanged */
:root { --purple: #d94ad9; --cyan: #22c3e7; --orange: #f4a21b; }
body {
    background: radial-gradient(ellipse at 50% 4%, rgba(105, 43, 131, .11), transparent 38%), #090710;
}
.brand::before { background: radial-gradient(ellipse, rgba(138, 46, 170, .11), transparent 70%); filter: blur(9px); }
.brand img { filter: drop-shadow(0 10px 22px rgba(0,0,0,.55)); }
.station {
    --glass: rgba(36, 15, 41, .56);
    --glow: rgba(217, 74, 217, .14);
    border-color: color-mix(in srgb, var(--accent) 63%, transparent);
    background: linear-gradient(110deg, var(--glass), rgba(12, 11, 19, .94) 77%);
    box-shadow: 0 7px 18px rgba(0,0,0,.28), inset 0 1px rgba(255,255,255,.045);
    backdrop-filter: blur(5px);
}
.station--manele { --glass: rgba(6, 43, 52, .52); --glow: rgba(34, 195, 231, .14); }
.station--afro { --glass: rgba(60, 35, 7, .50); --glow: rgba(244, 162, 27, .14); }
.station > img { filter: drop-shadow(0 4px 9px rgba(0,0,0,.42)); }
.station__copy strong { text-shadow: 0 1px 4px rgba(0,0,0,.45); }
.station__copy small { color: #d7d3dd; text-shadow: 0 1px 3px rgba(0,0,0,.4); }
.station__play {
    border: 1px solid rgba(255,255,255,.32);
    box-shadow: 0 3px 11px var(--glow), 0 3px 10px rgba(0,0,0,.26);
    color: #100e17;
}
.screen--player[data-theme="radio"] { --accent: #d94ad9; }
.screen--player[data-theme="manele"] { --accent: #22c3e7; }
.screen--player[data-theme="afro"] { --accent: #f4a21b; }
.bottom-nav { background: #0d0a15; }
.bottom-nav button { background: linear-gradient(135deg, rgba(30,21,40,.76), rgba(13,10,21,.95)); border-color: rgba(154,112,181,.25); }
.bottom-nav button.is-active { background: linear-gradient(135deg, rgba(132,42,148,.72), rgba(59,19,78,.9)); border-color: rgba(217,74,217,.7); }