/* alarm / timer / language / sliders / etc */
.alarm-wrapper{position:relative;}
.icon-only-btn{
  background:transparent;
  border:1px solid rgba(255,255,255,0.2);
  color:#fff;
  width:32px;
  height:32px;
  border-radius:8px;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  transition:.2s;
}
.icon-only-btn:hover{background:rgba(255,255,255,0.1);color:var(--accent);}
.alarm-popover{
  position:absolute;
  bottom:120%;
  left:0;
  min-width:200px;
  padding:1rem;
  display:flex;
  flex-direction:column;
  gap:.8rem;
  opacity:0;
  pointer-events:none;
  transform:translateY(10px);
  transition:.2s;
}
.alarm-popover.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.alarm-popover h4{
  font-size:.8rem;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  margin-bottom:.2rem;
}
.timer-presets{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:5px;
}
.timer-presets button{
  background:rgba(255,255,255,0.1);
  border:none;
  color:#fff;
  padding:5px;
  border-radius:6px;
  cursor:pointer;
  font-size:.85rem;
  transition:.2s;
}
.timer-presets button:hover{background:var(--accent);}
.custom-timer-input{display:flex;gap:5px;}
.custom-timer-input input{
  width:100%;
  background:rgba(0,0,0,0.3);
  border:1px solid rgba(255,255,255,0.1);
  color:#fff;
  padding:4px 8px;
  border-radius:6px;
  outline:none;
}
.small-glass-btn{
  background:var(--accent);
  border:none;
  color:#fff;
  border-radius:6px;
  width:28px;
  cursor:pointer;
}
.divider-horizontal{
  height:1px;
  background:rgba(255,255,255,0.1);
  width:100%;
  margin:2px 0;
}
.melody-select-btn{
  width:100%;
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(255,255,255,0.05);
  border:1px solid rgba(255,255,255,0.1);
  padding:6px 10px;
  border-radius:8px;
  color:#fff;
  font-size:.85rem;
  cursor:pointer;
  text-align:left;
}
.melody-select-btn:hover{background:rgba(255,255,255,0.1);}
.melody-select-btn span{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.stop-btn{
  width:100%;
  background:#FF453A;
  color:#fff;
  border:none;
  padding:5px;
  border-radius:6px;
  font-size:.8rem;
  cursor:pointer;
  margin-top:5px;
  opacity:.8;
}
.stop-btn:hover{opacity:1;}

/* timer pill */
.date-row{display:flex;align-items:center;gap:1rem;}
.timer-display{
  display:flex;
  align-items:center;
  gap:8px;
  background:rgba(0,0,0,0.4);
  padding:4px 10px;
  border-radius:8px;
  border:1px solid rgba(255,255,255,0.15);
  backdrop-filter:blur(10px);
  transition:.3s;
}
.timer-display.hidden{display:none;}
#timerCount{
  font-family:'JetBrains Mono',monospace;
  font-weight:700;
  color:#fff;
}
.timer-display i{
  cursor:pointer;
  opacity:0.6;
  transition:.2s;
}
.timer-display i:hover{opacity:1;color:#FF453A;}
.timer-finished{
  animation:vibrate .3s linear infinite,glowPulse 2s ease-in-out infinite;
  transform-origin:center;
}
@keyframes vibrate{
  0%{transform:translate(0,0);}
  25%{transform:translate(-2px,2px);}
  50%{transform:translate(2px,-2px);}
  75%{transform:translate(-2px,-2px);}
  100%{transform:translate(2px,2px);}
}
@keyframes glowPulse{
  0%,100%{
    box-shadow:0 0 10px rgba(255,69,58,0.2);
    border-color:rgba(255,69,58,0.4);
  }
  50%{
    box-shadow:0 0 25px rgba(255,69,58,0.6);
    border-color:#FF453A;
  }
}

/* language */
.lang-wrapper{
  position:relative;
  height:30px;
  display:flex;
  align-items:center;
}
.lang-btn{
  font-weight:700;
  cursor:pointer;
  text-transform:uppercase;
  font-size:.9rem;
  padding:4px 8px;
  border-radius:8px;
  transition:.2s;
  background:transparent;
  border:1px solid rgba(255,255,255,.2);
  color:#fff;
}
.lang-btn:hover{background:rgba(255,255,255,.1);color:var(--accent);}
.lang-dropdown{
  position:absolute;
  bottom:120%;
  left:0;
  margin-bottom:8px;
  display:flex;
  flex-direction:column;
  min-width:160px;
  padding:.5rem;
  opacity:0;
  pointer-events:none;
  transform:translateY(6px);
  transition:opacity .2s ease,transform .2s ease;
  max-height:260px;
  overflow-y:auto;
  border-radius:16px;
}
.lang-dropdown.open{
  opacity:1;
  pointer-events:auto;
  transform:translateY(0);
}
.lang-dropdown div{
  padding:.6rem .7rem;
  cursor:pointer;
  border-radius:10px;
  font-size:.95rem;
  color:rgba(255,255,255,.92);
}
.lang-dropdown div:hover{background:var(--accent);color:#fff;}

/* generic sliders (used in header controls) */
input[type=range]{
  appearance:none;
  -webkit-appearance:none;
  width:140px;
  height:4px;
  background:transparent;
}
input[type=range]::-webkit-slider-runnable-track{
  height:4px;
  background:rgba(255,255,255,.2);
  border-radius:2px;
}
input[type=range]::-moz-range-track{
  height:4px;
  background:rgba(255,255,255,.2);
  border-radius:2px;
}
input[type=range]::-webkit-slider-thumb{
  appearance:none;
  -webkit-appearance:none;
  width:16px;
  height:16px;
  border-radius:50%;
  margin-top:-6px;
  background:var(--accent);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
  border:2px solid rgba(255,255,255,.65);
}
input[type=range]::-moz-range-thumb{
  width:16px;
  height:16px;
  border-radius:50%;
  background:var(--accent);
  border:2px solid rgba(255,255,255,.65);
  box-shadow:0 2px 8px rgba(0,0,0,.4);
}
input[type=range]:disabled{opacity:.5;}

/* clock */
.banner-clock{
  position:absolute;
  bottom:35px;
  left:40px;
  z-index:10;
  user-select:none;
}
#time{
  line-height:1;
  margin-bottom:10px;
  color:#fff;
  text-shadow:0 4px 20px rgba(0,0,0,.9),0 0 10px rgba(0,0,0,.5);
  cursor:pointer;
  transition:
    font-size .25s ease,
    font-family .25s ease,
    letter-spacing .25s ease,
    text-shadow .25s ease;
}
#date{
  font-size:1.2rem;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:1px;
  text-shadow:0 2px 10px rgba(0,0,0,.9);
  opacity:.9;
  cursor:pointer;
  transition:
    font-size .25s ease,
    font-family .25s ease,
    letter-spacing .25s ease,
    text-shadow .25s ease;
}

/* existing clock/date styles (web fonts) */
.clock-style-1{font-family:'SF Pro Display',sans-serif;font-weight:700;}
.clock-style-2{font-family:'Orbitron',sans-serif;letter-spacing:2px;}
.clock-style-3{font-family:'Playfair Display',serif;font-style:italic;}
.clock-style-4{font-family:'Cinzel',serif;font-weight:600;}
.clock-style-5{font-family:'Comfortaa',cursive;font-weight:700;}
.clock-style-6{font-family:'Poppins',sans-serif;font-weight:700;}
.clock-style-7{font-family:'Montserrat',sans-serif;font-weight:700;}
.clock-style-8{font-family:'Manrope',sans-serif;font-weight:800;}
.clock-style-9{font-family:'Oswald',sans-serif;font-weight:500;letter-spacing:1px;}
.clock-style-10{font-family:'Exo 2',sans-serif;font-weight:700;}
.date-style-1{font-family:'Inter',sans-serif;}
.date-style-2{font-family:'JetBrains Mono',monospace;}

/* extra clock styles using other fonts */
.clock-style-11{font-family:'Fm AlmendraDisplay','Playfair Display',serif;font-weight:400;}
.clock-style-12{font-family:'Fm Bokor','Bokor',cursive;font-weight:400;}
.clock-style-13{font-family:'Fm Nabla','Nabla',cursive;font-weight:600;letter-spacing:.08em;}
.clock-style-14{font-family:'Fm Rye','Rye',cursive;font-weight:400;}
.clock-style-15{font-family:'Fm Sancreek','Sancreek',cursive;font-weight:400;letter-spacing:.05em;}

/* custom clock styles (MyClock01-12) */
.clock-style-16{font-family:'MyClock01',sans-serif;font-weight:400;}
.clock-style-17{font-family:'MyClock02',sans-serif;font-weight:400;}
.clock-style-18{font-family:'MyClock03',sans-serif;font-weight:400;}
.clock-style-19{font-family:'MyClock04',sans-serif;font-weight:400;}
.clock-style-20{font-family:'MyClock05',sans-serif;font-weight:400;}
.clock-style-21{font-family:'MyClock06',sans-serif;font-weight:400;}
.clock-style-22{font-family:'MyClock07',sans-serif;font-weight:400;}
.clock-style-23{font-family:'MyClock08',sans-serif;font-weight:400;}
.clock-style-24{font-family:'MyClock09',sans-serif;font-weight:400;}
.clock-style-25{font-family:'MyClock10',sans-serif;font-weight:400;}
.clock-style-26{font-family:'MyClock11',sans-serif;font-weight:400;}
.clock-style-27{font-family:'MyClock12',sans-serif;font-weight:400;}

/* extra date styles */
.date-style-3{font-family:'Fm Jura','Jura',sans-serif;font-weight:600;letter-spacing:.18em;}
.date-style-4{font-family:'Fm Codystar','Codystar',cursive;font-weight:400;letter-spacing:.3em;}
.date-style-5{font-family:'Fm Megrim','Megrim',cursive;font-weight:400;letter-spacing:.22em;}

/* big text styles for MyText01-03 (desktop) */
#date.date-style-6 {
  font-family: 'MyText01', sans-serif;
  font-size: 1.8rem !important;
  letter-spacing: 1px;
  line-height: 1.1;
}
#date.date-style-7 {
  font-family: 'MyText02', sans-serif;
  font-size: 2.4rem !important;
  letter-spacing: 2px;
  line-height: 0.8;
  font-weight: 400;
}
#date.date-style-8 {
  font-family: 'MyText03', sans-serif;
  font-size: 2.0rem !important;
  letter-spacing: 1px;
}