/* Third face: optical glass suspended over a dark, reflective water surface. */
.water-scene,.water-front-light,.water-glass-glint,.water-ripple-veil{display:none}
body.radio-style-water{background:radial-gradient(ellipse at 96% 8%,#0b4054 0,transparent 43%),radial-gradient(ellipse at 2% 40%,#07314770,transparent 45%),#020a12}
body.radio-style-water::before,body.radio-style-water::after{display:none}
.radio-style-water .radio-heading{position:relative;z-index:2;padding-bottom:12px}
.radio-style-water .compact-heading h1 br{display:block}
.radio-style-water .compact-heading h1 span{margin-left:0;color:#9cf2fa}
.radio-style-water .radio-layout{position:relative;align-items:end;gap:85px;padding:38px 25px 340px}
.radio-style-water .water-scene,.radio-style-water .water-front-light{display:block;position:absolute;inset:-240px max(-65px,calc((100% - 100vw)/2 + 12px)) 0;overflow:hidden;pointer-events:none;contain:paint}
.radio-style-water .water-scene{z-index:0}
.radio-style-water .water-front-light{z-index:2;opacity:.5}
.water-scene canvas{position:absolute;inset:0;width:100%;height:100%}
.water-rays{position:absolute;inset:-3%;background:conic-gradient(from 179deg at 94% -3%,transparent 0deg,#76e9ff10 2deg,#9af8ff55 5deg,#76e9ff10 8deg,transparent 11deg,#7cefff18 14deg,#c2ffff7a 17deg,#7cefff18 20deg,transparent 24deg,#6cdcff10 27deg,#6cdcff45 30deg,transparent 35deg,#50d9ff24 40deg,transparent 48deg);opacity:.85;transform-origin:94% 0}
.water-atmosphere{position:absolute;inset:0;background:radial-gradient(ellipse at 90% 18%,#61eaff35,transparent 34%),radial-gradient(ellipse at 52% 86%,#3dd6e53a,transparent 43%);opacity:.85}
.water-surface{position:absolute;inset:auto 0 0;height:340px;background:radial-gradient(ellipse at 28% 6%,#61edff52,transparent 35%),radial-gradient(ellipse at 75% 10%,#40d9ff45,transparent 42%),repeating-radial-gradient(ellipse at 55% -30%,#030e1700 0 12px,#40b6cc18 14px,#030e1700 17px 27px);mask-image:linear-gradient(transparent,#000 9% 76%,transparent);opacity:.95}
.radio-style-water .water-ripple-veil{display:block;position:absolute;inset:auto 0 15px;height:300px;z-index:3;pointer-events:none;background:repeating-linear-gradient(179deg,transparent 0 16px,#00121a55 17px,transparent 20px,transparent 35px,#80e9fa12 36px,transparent 38px);mask-image:linear-gradient(transparent,#0009 18%,#000 80%,transparent)}
.radio-style-water .player>.water-glass-glint,.radio-style-water .library>.water-glass-glint{display:block;position:absolute;inset:2px;z-index:3;border-radius:inherit;pointer-events:none;overflow:hidden;clip-path:inset(0 round 30px);opacity:.7}
.water-glass-light{position:absolute;inset:-8%;pointer-events:none;background:radial-gradient(ellipse at var(--glass-light-x) 7%,#eeffffbd,transparent 17%),radial-gradient(ellipse at 93% var(--glass-light-y),#baffff66,transparent 13%),linear-gradient(var(--glass-light-angle),transparent 16%,#e2ffff0b 23%,#eaffff16 25%,transparent 29%,transparent 100%);background-blend-mode:screen;transform-origin:50% 35%;opacity:.7}
.radio-style-water .player,.radio-style-water .library{
  --glass-light-x:70%;--glass-light-y:12%;--glass-light-angle:118deg;
  position:relative;top:auto;z-index:1;border-radius:32px;border-color:#b9f6ff;
  background:
    radial-gradient(ellipse at var(--glass-light-x) var(--glass-light-y),#c9faff24,transparent 42%),
    linear-gradient(var(--glass-light-angle),#e1faff2c 0%,#dbf7ff0d 14%,transparent 22%,#cff9ff13 29%,transparent 36%,transparent 68%,#b8f7ff0c 74%,transparent 83%),
    linear-gradient(145deg,#355969f2,#0c2636f2 35%,#03111cf7 76%,#123743f2);
  background-color:#061522;
  box-shadow:inset 0 0 0 1px #f2ffffc9,inset 0 0 0 3px #5596adb3,inset 0 0 0 5px #102b3d,inset 0 0 0 7px #b9f4ff85,inset 0 0 0 10px #7bdcff13,inset 5px 4px 26px #b8f7ff25,inset -3px -4px 16px #45e7f54a,2px 2px 0 #d0faffb3,5px 4px 0 #316d86,8px 6px 0 #a1ecf099,12px 9px 0 #183f51,16px 12px 0 #020c15,0 0 19px #50e9ff66,0 0 55px #13c9e329,0 28px 32px #0009;
  /* A live compositor reflection: no cloned controls, station rows or IDs. */
  -webkit-box-reflect:below 12px linear-gradient(to bottom,transparent calc(100% - 300px),#00000022 calc(100% - 180px),#000000b3 100%);
}
.radio-style-water .player{transform:translate(var(--panel-x),var(--panel-y)) perspective(1800px) rotateX(var(--panel-pitch)) rotateY(calc(8deg + var(--panel-yaw))) scale(var(--panel-scale))}
.radio-style-water .library{transform:translate(var(--panel-x),var(--panel-y)) perspective(1800px) rotateX(var(--panel-pitch)) rotateY(calc(-6deg + var(--panel-yaw))) scale(var(--panel-scale))}
.radio-style-water .player.panel-transformed{transform:translate(var(--panel-x),var(--panel-y)) perspective(1800px) rotateX(var(--panel-pitch)) rotateY(calc(8deg + var(--panel-yaw))) scale(var(--panel-scale))}
.radio-style-water .library.panel-transformed{transform:translate(var(--panel-x),var(--panel-y)) perspective(1800px) rotateX(var(--panel-pitch)) rotateY(calc(-6deg + var(--panel-yaw))) scale(var(--panel-scale))}
.radio-style-water .library .section-head h2{font-style:italic;letter-spacing:-.035em}
.radio-style-water .library .label{color:#a9f6fc}
.radio-style-water .primary{background:linear-gradient(135deg,#b6fbff,#63e0ed 55%,#2cbdd3);box-shadow:inset 0 0 0 1px #e4ffff66,0 0 19px #36e6f34d;color:#03212e;border-color:#c3fcff}
.radio-style-water .station,.radio-style-water .station:nth-child(even){background:linear-gradient(115deg,#bdeaff13,transparent 35%),linear-gradient(145deg,#153547,#041422 68%,#0c2d3c);box-shadow:inset 1px 1px 2px #d5fbff70,inset -2px -2px 5px #68d8ef4d,inset 0 0 0 4px #83d9ea0a,0 7px 15px #0008}
.radio-style-water .station.playing{background:radial-gradient(ellipse at 0 0,#f9d78124,transparent 60%),linear-gradient(140deg,#263e46,#101f2c 58%,#34382c);box-shadow:inset 1px 1px 4px #fff0be8c,inset -2px -2px 7px #d9a84d38,inset 0 0 18px #e7bd4b21,0 0 12px #eac46066,0 8px 15px #0009}
.radio-style-water .station-list{max-height:690px}
.radio-style-water .radio-notes{position:relative;margin-top:12px}
.visual-effects-off .water-rays{animation:none;opacity:.5}
.visual-effects-off .water-ripple-veil{animation:none}
.effects-paused .water-rays,.effects-paused .water-ripple-veil{animation-play-state:paused}
@media(max-width:1100px){.radio-style-water .radio-layout{gap:44px;padding-inline:12px}.radio-style-water .water-scene,.radio-style-water .water-front-light{inset-inline:-18px}}
@media(max-width:680px){
  .radio-style-water .radio-layout{gap:130px;padding:20px 5px 300px}
  .radio-style-water .player,.radio-style-water .library{--panel-x:0px;transform:none;-webkit-box-reflect:below 16px linear-gradient(to bottom,transparent calc(100% - 95px),#00000040 100%)}
  .radio-style-water .radio-heading.compact-heading h1{font-size:clamp(2.1rem,8vw,3rem)}
  .radio-style-water .water-scene,.radio-style-water .water-front-light{inset:-180px -14px 0}
  .radio-style-water .library{-webkit-box-reflect:below 12px linear-gradient(to bottom,transparent calc(100% - 260px),#000000a0 100%)}
  .radio-style-water .water-surface{height:300px}
  .radio-style-water .water-ripple-veil{height:265px}
  .radio-style-water .station-list{max-height:580px}
}
@media(prefers-reduced-motion:reduce){.water-rays,.water-ripple-veil{animation:none}}