@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #031a38; }
body { color: #fff; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }
button, input { font: inherit; }
.app-shell { position: relative; isolation: isolate; display: flex; flex-direction: column; min-height: 100dvh; max-width: 430px; margin: auto; overflow: hidden; padding: calc(16px + env(safe-area-inset-top)) 31px calc(14px + env(safe-area-inset-bottom)); background: radial-gradient(ellipse at 50% 36%, #1498f8 0%, #087ce9 36%, #0067ce 70%, #0054aa 100%); }
.app-shell:before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .18; background-image: linear-gradient(120deg, transparent 0 48%, rgba(255,255,255,.18) 50%, transparent 52%); background-size: 260px 260px; }
.brand { height: clamp(248px, 34vh, 325px); display: flex; align-items: center; justify-content: center; }
.brand img { display: block; width: min(100%, 390px); filter: drop-shadow(0 5px 3px rgba(0,0,0,.27)); }
.player { text-align: center; }
.live-pill { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: 99px; font-size: 13px; font-weight: 700; background: rgba(0, 73, 167, .65); box-shadow: 0 4px 9px rgba(0, 80, 170, .25); }
.live-pill i { width: 9px; height: 9px; border-radius: 50%; background: white; box-shadow: 0 0 8px white; }
.player-stage { position: relative; display: flex; justify-content: center; align-items: center; height: 219px; margin: 5px auto 0; }
.player-stage:before, .player-stage:after { content: ""; position: absolute; width: 160px; aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(118,205,255,.32); box-shadow: 0 0 0 14px rgba(50,164,245,.12), 0 0 0 31px rgba(57,167,243,.1), 0 0 0 50px rgba(26,143,239,.09); }
.player-stage:after { width: 199px; opacity: .45; }
.play-button { z-index: 1; width: 160px; aspect-ratio: 1; border: 3px solid white; border-radius: 50%; cursor: pointer; background: linear-gradient(145deg,#058af0,#0060b8); box-shadow: 0 5px 0 #004b99, 0 12px 21px rgba(0,57,145,.46), inset 0 1px 8px rgba(255,255,255,.47); transition: transform .2s, box-shadow .2s; }
.play-button:active { transform: scale(.95); }
.play-icon { display: inline-block; margin-left: 9px; width: 0; height: 0; border-top: 25px solid transparent; border-bottom: 25px solid transparent; border-left: 38px solid white; filter: drop-shadow(0 1px 1px rgba(0,0,0,.16)); }
.play-button.playing { animation: breathe 1.8s infinite ease-in-out; }
.play-button.playing .play-icon { margin: 0; width: 35px; height: 43px; border: 0; border-left: 11px solid white; border-right: 11px solid white; }
@keyframes breathe { 50% { box-shadow: 0 5px 0 #004b99, 0 0 0 10px rgba(255,255,255,.09), 0 12px 21px rgba(0,57,145,.46), inset 0 1px 8px rgba(255,255,255,.47); } }
.wave { position: absolute; top: 50%; width: 66px; height: 96px; transform: translateY(-50%); background: radial-gradient(ellipse 3px 3px at center, rgba(255,255,255,.88) 90%, transparent 100%) 0 0 / 16px 13px; mask: linear-gradient(to bottom, transparent, #000 25%, #000 75%, transparent); }
.wave-left { left: 1px; } .wave-right { right: 1px; transform: translateY(-50%) scaleX(-1); }
.player h1 { margin: 8px 0 2px; font-size: 27px; line-height: 1.2; letter-spacing: -.7px; text-shadow: 0 2px 3px rgba(0,0,0,.17); }
.player p { margin: 0; font-size: 21px; font-style: italic; font-family: Georgia, serif; }
.desktop-metadata { display: grid; gap: 2px; margin-top: 12px; }.desktop-metadata strong { font-size: 17px; }.desktop-metadata span { font-size: 14px; opacity: .86; }
.volume-panel { display: flex; align-items: center; gap: 12px; width: 100%; padding: 16px 17px; margin: 28px auto 0; border-radius: 14px; background: rgba(0,83,186,.52); }
.volume-panel svg { flex: none; width: 22px; height: 22px; fill: #fff; }
input[type="range"] { appearance: none; width: 100%; height: 5px; border-radius: 20px; outline: none; background: linear-gradient(to right, white 0 50%, rgba(92,174,244,.5) 50%); }
input[type="range"]::-webkit-slider-thumb { appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgba(0,53,128,.25); cursor: pointer; }
.install-hint { position: absolute; z-index: 5; right: 17px; bottom: calc(47px + env(safe-area-inset-bottom)); left: 17px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; padding: 17px 38px 17px 15px; border: 1px solid rgba(255,255,255,.32); border-radius: 16px; background: rgba(0,46,124,.94); box-shadow: 0 13px 33px rgba(0,33,94,.38); color: #fff; font-size: 12px; line-height: 1.35; }.install-hint[hidden] { display: none; }.install-hint-icon { font-size: 25px; font-weight: 700; }.install-hint div strong { display: block; margin-bottom: 3px; font-size: 14px; }.install-hint p { margin: 0; color: rgba(255,255,255,.83); }.install-hint button { flex: none; border: 0; border-radius: 7px; padding: 8px 9px; color: #0667c8; font-size: 11px; font-weight: 700; background: white; }.install-hint .install-close { position: absolute; top: 7px; right: 8px; display: grid; width: 25px; height: 25px; padding: 0; place-items: center; border-radius: 50%; color: white; font-size: 22px; font-weight: 400; line-height: 1; background: rgba(255,255,255,.16); }
.credit { flex: 0 0 auto; margin: 0; padding: 10px 0 calc(2px + env(safe-area-inset-bottom)); text-align: center; color: rgba(255,255,255,.69); font-size: 11px; }.credit a, .credit a:visited, .credit a:hover, .credit a:focus, .credit a:active { color: #fff !important; -webkit-text-fill-color: #fff; font-weight: 700; text-decoration: none; }
.nav-item { width: 80px; border: 0; color: rgba(255,255,255,.92); background: transparent; cursor: pointer; display: grid; justify-items: center; gap: 5px; font-size: 12px; }
.nav-item svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.nav-item.active { font-weight: 700; color: #fff; }
.nav-item.active svg { stroke-width: 2; }
.notice { position: absolute; left: 50%; bottom: calc(84px + env(safe-area-inset-bottom)); transform: translate(-50%, 20px); padding: 9px 14px; border-radius: 8px; width: max-content; max-width: 80%; background: rgba(0,35,89,.87); font-size: 13px; opacity: 0; pointer-events: none; transition: .22s; }
.notice.show { opacity: 1; transform: translate(-50%, 0); }
/* Tablet and desktop: the player becomes the wide, single-card composition. */
@media (min-width: 768px) {
  body { display: block; padding: 0; background: #0879e6; }
  .app-shell { display: grid; grid-template-columns: minmax(370px, .9fr) minmax(420px, 1.1fr); grid-template-rows: minmax(0, 1fr) auto auto; column-gap: clamp(60px, 9vw, 160px); row-gap: clamp(16px, 3vh, 34px); align-items: center; width: 100%; max-width: none; min-height: 100dvh; margin: 0; padding: 88px max(52px, 8vw) 28px; border: 1px solid rgba(145,222,255,.45); border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1); background: radial-gradient(ellipse at 50% 40%, #1198fa 0%, #087bed 39%, #0065cf 77%, #005cbd 100%); }
  .brand { grid-column: 1; grid-row: 1; width: min(100%, 610px); height: auto; margin: 0; pointer-events: none; }
  .brand img { width: 100%; }
  .player { grid-column: 2; grid-row: 1; width: 100%; margin: 0; padding: 0; text-align: left; }
  .live-pill { position: static; padding: 9px 17px; font-size: 16px; }
  .player-stage { justify-content: flex-start; height: 250px; margin: 7px 0 0; }
  .player-stage:before, .player-stage:after { width: 210px; box-shadow: 0 0 0 20px rgba(50,164,245,.12), 0 0 0 43px rgba(57,167,243,.1), 0 0 0 61px rgba(26,143,239,.09); }
  .player-stage:after { width: 266px; }.play-button { width: 210px; }.play-icon { border-top-width: 31px; border-bottom-width: 31px; border-left-width: 46px; }
  .wave { display: none; }
  .station-name, .station-tagline { display: none; }
  .desktop-metadata { display: grid !important; visibility: visible; gap: 5px; margin-top: 4px; }.desktop-metadata strong { font-size: 37px; line-height: 1.12; }.desktop-metadata span { font-size: 24px; opacity: .84; }
  .install-hint { display: none; }
  .volume-panel { grid-column: 1 / -1; grid-row: 2; width: 100%; padding: 26px 51px; margin: 0; border-radius: 15px; }
  .volume-panel svg { width: 27px; height: 27px; }
  .credit { position: static; grid-column: 1 / -1; grid-row: 3; padding: 0; font-size: 12px; }.notice { bottom: 120px; }
}
@media (max-width: 767px) { .app-shell { justify-content: space-between; } .brand { flex: 0 0 auto; } .player { flex: 0 0 auto; } .volume-panel { flex: 0 0 auto; } .station-name, .station-tagline { display: none; } .desktop-metadata { gap: 2px; margin-top: 12px; } .desktop-metadata strong { font-size: 27px; line-height: 1.2; letter-spacing: -.7px; text-shadow: 0 2px 3px rgba(0,0,0,.17); } .desktop-metadata span { font-family: Georgia, serif; font-size: 21px; font-style: italic; } }

@media (max-width: 767px) and (max-height: 700px) { .brand { height: 190px; } .player-stage { height: 185px; transform: scale(.88); margin: -7px auto; } .volume-panel { margin-top: 14px; } }