*{
  box-sizing:border-box;
}

html,
body{
  margin:0;
  min-height:100%;
}

body{
  font-family:
    Inter,
    system-ui,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    sans-serif;

  color:#10243e;

  background:
    radial-gradient(
      circle at 50% 0%,
      rgba(34,108,180,.12),
      transparent 38%
    ),
    linear-gradient(
      180deg,
      #eef4f9 0%,
      #f8fafc 55%,
      #e7eef5 100%
    );
}

button,
input{
  font:inherit;
}

.page{
  min-height:100vh;
  min-height:100dvh;

  display:flex;
  align-items:center;
  justify-content:center;

  padding:28px 18px;
}

.player-card{
  position:relative;

  width:min(100%,520px);

  padding:26px 32px 24px;

  background:
    linear-gradient(
      145deg,
      rgba(255,255,255,.98),
      rgba(245,249,253,.96)
    );

  border:1px solid rgba(25,75,125,.13);
  border-radius:30px;

  box-shadow:
    0 28px 70px rgba(21,55,91,.16),
    0 3px 10px rgba(21,55,91,.06);

  overflow:hidden;
}

.player-card::before{
  content:"";
  position:absolute;
  left:0;
  top:0;
  width:100%;
  height:5px;

  background:
    linear-gradient(
      90deg,
      #0a3d73 0%,
      #1976c9 70%,
      #e5262d 70%,
      #e5262d 100%
    );
}

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
}

.live-brand{
  display:flex;
  align-items:center;
  gap:9px;

  color:#143c67;

  font-size:11px;
  font-weight:900;
  letter-spacing:2px;
}

.live-dot{
  width:9px;
  height:9px;
  flex:0 0 9px;

  border-radius:50%;
  background:#e5262d;

  box-shadow:
    0 0 0 5px rgba(229,38,45,.10);
}

.install-btn{
  border:1px solid rgba(19,74,125,.18);
  border-radius:999px;

  padding:8px 13px;

  background:#fff;
  color:#174a7c;

  font-size:11px;
  font-weight:800;

  cursor:pointer;
}

.brand-logo{
  display:flex;
  justify-content:center;

  margin:24px auto 18px;
}

.brand-logo img{
  width:220px;
  height:220px;

  display:block;
  object-fit:cover;

  border-radius:24px;

  border:1px solid rgba(23,74,124,.10);

  box-shadow:
    0 18px 40px rgba(25,70,115,.14);
}

.on-air{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  color:#e5262d;

  font-size:10px;
  font-weight:900;
  letter-spacing:2.5px;
}

.on-air-line{
  width:32px;
  height:1px;
  background:rgba(229,38,45,.45);
}

h1{
  margin:8px 0 0;

  text-align:center;

  color:#102e50;

  font-size:31px;
  line-height:1.15;
  font-weight:900;
  letter-spacing:-1px;
}

.subtitle{
  margin:7px 0 0;

  text-align:center;

  color:#708399;

  font-size:13px;
}

.status{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;

  margin:23px auto 0;

  color:#60758b;

  font-size:12px;
  font-weight:700;
}

.status-dot{
  width:8px;
  height:8px;

  border-radius:50%;
  background:#9aa9b7;
}

.status-dot.online{
  background:#1aae68;

  box-shadow:
    0 0 0 4px rgba(26,174,104,.10);
}

.status-dot.error{
  background:#e5262d;
}

.controls{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:28px;

  margin-top:24px;
}

.play-btn{
  width:74px;
  height:74px;

  flex:0 0 74px;

  display:flex;
  align-items:center;
  justify-content:center;

  border:0;
  border-radius:50%;

  background:
    linear-gradient(
      145deg,
      #164f87,
      #082e58
    );

  color:#fff;

  font-size:27px;

  cursor:pointer;

  box-shadow:
    0 15px 32px rgba(14,62,108,.28);
}

.play-btn:active{
  transform:scale(.97);
}

.volume-box{
  display:flex;
  align-items:center;
  gap:10px;

  width:190px;
}

.volume-icon{
  font-size:17px;
}

#volume{
  width:100%;
  accent-color:#145b9b;
  cursor:pointer;
}

.footer-line{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;

  margin-top:28px;
  padding-top:16px;

  border-top:1px solid rgba(20,68,112,.10);

  color:#8a9aab;

  font-size:9px;
  font-weight:800;
  letter-spacing:1.5px;
}

.footer-dot{
  color:#e5262d;
}

@media(max-width:600px){

  .page{
    padding:12px;
  }

  .player-card{
    padding:22px 20px 20px;
    border-radius:24px;
  }

  .brand-logo{
    margin-top:20px;
  }

  .brand-logo img{
    width:min(58vw,210px);
    height:min(58vw,210px);
  }

  h1{
    font-size:27px;
  }

  .controls{
    gap:20px;
  }

  .volume-box{
    width:min(44vw,170px);
  }

}



/* RADIO-MC-24C - Now Playing dinamico */
.now-playing{
  display:flex;
  align-items:center;
  gap:14px;

  max-width:390px;
  margin:22px auto 0;
  padding:12px;

  background:#f7faff;
  border:1px solid rgba(23,74,124,.10);
  border-radius:18px;

  box-shadow:
    0 10px 28px rgba(25,70,115,.08);
}

.track-cover{
  width:76px;
  height:76px;
  flex:0 0 76px;

  object-fit:cover;
  border-radius:14px;

  background:#fff;
  border:1px solid rgba(23,74,124,.10);
}

.track-info{
  min-width:0;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  text-align:left;
}

.track-label{
  margin-bottom:5px;

  color:#e5262d;
  font-size:9px;
  line-height:1;
  font-weight:900;
  letter-spacing:1.7px;
}

#trackTitle{
  width:100%;

  color:#102e50;
  font-size:16px;
  line-height:1.25;
  font-weight:900;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

#trackArtist{
  width:100%;
  margin-top:4px;

  color:#708399;
  font-size:12px;
  line-height:1.3;
  font-weight:700;

  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:520px){
  .now-playing{
    max-width:100%;
  }

  .track-cover{
    width:68px;
    height:68px;
    flex-basis:68px;
  }
}

/* RADIO-MC-25 - Restyle definitivo Ora in onda */

.now-playing{
  max-width:430px;
  gap:18px;

  margin:24px auto 0;
  padding:14px 18px 14px 14px;

  background:
    linear-gradient(
      135deg,
      #ffffff 0%,
      #f4f8fd 100%
    );

  border:1px solid rgba(23,74,124,.13);
  border-radius:20px;

  box-shadow:
    0 14px 34px rgba(25,70,115,.10);
}

.track-cover{
  width:104px;
  height:104px;
  flex:0 0 104px;

  border-radius:16px;

  box-shadow:
    0 8px 20px rgba(16,46,80,.14);
}

.track-info{
  flex:1;
}

.track-label{
  margin-bottom:8px;

  font-size:9px;
  letter-spacing:2px;
}

#trackTitle{
  font-size:19px;
  line-height:1.2;
  letter-spacing:-.25px;
}

#trackArtist{
  margin-top:6px;

  font-size:13px;
  line-height:1.35;
}

.now-playing + .status{
  margin-top:17px;
}

@media (max-width:520px){

  .now-playing{
    gap:13px;
    padding:12px;
    border-radius:17px;
  }

  .track-cover{
    width:82px;
    height:82px;
    flex-basis:82px;
    border-radius:13px;
  }

  #trackTitle{
    font-size:16px;
  }

  #trackArtist{
    font-size:12px;
  }
}


/* =========================================================
   MC2-WEB-012
   Rifinitura del player landscape compatto e centrato
   ========================================================= */

@media (orientation:landscape) {

  html,
  body {
    width:100%;
    height:100%;
    min-height:0 !important;
    margin:0 !important;
    padding:0 !important;
    overflow:hidden !important;
  }

  .page {
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    min-height:0 !important;

    margin:0 !important;
    padding:10px !important;
    box-sizing:border-box;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;

    overflow:hidden !important;
  }

  .player-card {
    position:relative;

    width:min(94vw,1040px) !important;
    height:min(92vh,500px) !important;
    min-height:0 !important;

    margin:0 !important;
    padding:38px 42px 28px !important;
    box-sizing:border-box;

    display:grid !important;

    grid-template-columns:
      minmax(190px,34%)
      minmax(360px,66%) !important;

    grid-template-rows:1fr !important;

    column-gap:30px !important;

    align-items:center !important;
    align-content:center !important;

    overflow:hidden !important;
  }


  /* ---------- LIVE RADIO ---------- */

  .topbar {
    position:absolute !important;
    top:16px !important;
    left:22px !important;
    right:22px !important;

    margin:0 !important;
    padding:0 !important;

    z-index:10;
  }

  .live-brand {
    font-size:11px !important;
  }


  /* ---------- LOGO SINISTRA ---------- */

  .brand-logo {
    grid-column:1 !important;
    grid-row:1 !important;

    width:100% !important;
    height:auto !important;

    margin:0 !important;

    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
  }

  .brand-logo img {
    width:min(24vw,42vh,230px) !important;
    height:min(24vw,42vh,230px) !important;

    max-width:100% !important;

    object-fit:cover !important;

    border-radius:22px !important;
  }


  /*
   * Tutti gli elementi a destra vengono collocati
   * nella stessa colonna e raccolti al centro.
   */

  .on-air,
  h1,
  .now-playing,
  .status,
  .controls {
    grid-column:2 !important;
  }


  /* ---------- ON AIR ---------- */

  .on-air {
    grid-row:1 !important;

    align-self:center !important;

    margin:0 0 245px !important;

    justify-self:start !important;

    font-size:10px !important;
  }

  .on-air-line {
    width:42px !important;
  }


  /* ---------- TITOLO ---------- */

  h1 {
    grid-row:1 !important;

    align-self:center !important;
    justify-self:start !important;

    margin:0 0 178px !important;

    text-align:left !important;

    font-size:clamp(28px,5vh,38px) !important;
    line-height:1 !important;
  }

  .subtitle {
    display:none !important;
  }


  /* ---------- ORA IN ONDA ---------- */

  .now-playing {
    grid-row:1 !important;

    align-self:center !important;
    justify-self:start !important;

    width:min(100%,500px) !important;
    max-width:500px !important;

    margin:0 0 22px !important;
    padding:12px 14px !important;

    gap:14px !important;

    box-sizing:border-box;
  }

  .track-cover {
    width:72px !important;
    height:72px !important;
    flex:0 0 72px !important;

    border-radius:13px !important;
  }

  .track-label {
    margin-bottom:4px !important;

    font-size:9px !important;
    letter-spacing:2px !important;
  }

  #trackTitle {
    font-size:clamp(18px,3.5vh,24px) !important;
    line-height:1.08 !important;
  }

  #trackArtist {
    margin-top:4px !important;

    font-size:clamp(12px,2.5vh,16px) !important;
    line-height:1.1 !important;
  }


  /* ---------- STATO ---------- */

  .status {
    grid-row:1 !important;

    align-self:center !important;
    justify-self:start !important;

    margin:0 0 -100px 12px !important;

    font-size:11px !important;
  }


  /* ---------- PLAY + VOLUME ---------- */

  .controls {
    grid-row:1 !important;

    align-self:center !important;
    justify-self:start !important;

    margin:0 0 -190px !important;

    gap:20px !important;
  }

  .play-btn {
    width:64px !important;
    height:64px !important;
    flex:0 0 64px !important;

    font-size:24px !important;
  }

  .volume-box {
    width:min(27vw,220px) !important;
  }

  .footer-line {
    display:none !important;
  }
}


/* =========================================================
   Telefoni landscape bassi
   ========================================================= */

@media (orientation:landscape) and (max-height:430px) {

  .page {
    padding:5px !important;
  }

  .player-card {
    width:98vw !important;
    height:96vh !important;

    padding:30px 28px 18px !important;

    grid-template-columns:
      minmax(155px,34%)
      minmax(320px,66%) !important;

    column-gap:30px !important;
  }

  .topbar {
    top:8px !important;
    left:14px !important;
    right:14px !important;
  }

  .live-brand {
    font-size:9px !important;
  }

  .brand-logo img {
    width:min(24vw,55vh,210px) !important;
    height:min(24vw,55vh,210px) !important;
  }

  .on-air {
    margin-bottom:205px !important;
    font-size:8px !important;
  }

  h1 {
    margin-bottom:150px !important;

    font-size:clamp(21px,5.5vh,29px) !important;
  }

  .now-playing {
    width:min(100%,500px) !important;

    margin-bottom:15px !important;
    padding:7px 9px !important;

    gap:10px !important;
  }

  .track-cover {
    width:52px !important;
    height:52px !important;
    flex-basis:52px !important;
  }

  .track-label {
    margin-bottom:2px !important;
    font-size:7px !important;
  }

  #trackTitle {
    font-size:clamp(14px,4vh,19px) !important;
  }

  #trackArtist {
    margin-top:2px !important;
    font-size:10px !important;
  }

  .status {
    margin:0 0 -72px 8px !important;

    font-size:9px !important;
  }

  .controls {
    margin-bottom:-145px !important;

    gap:14px !important;
  }

  .play-btn {
    width:48px !important;
    height:48px !important;
    flex-basis:48px !important;

    font-size:18px !important;
  }

  .volume-box {
    width:min(27vw,180px) !important;
  }
}