:root{
  --text: rgba(255,255,255,0.92);
  --muted: rgba(255,255,255,0.68);
  --shadow: 0 18px 60px rgba(0,0,0,0.55);
}

*{ box-sizing: border-box; }
html,body{ height:100%; }

body{
  margin:0;
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
  color: var(--text);
  background: radial-gradient(900px 600px at 50% 0%, #22103d 0%, #0b0b16 40%, #06070f 100%);
  overflow-x:hidden;
}

/* background video */
.bgVideo{
  position: fixed;
  inset: 0;
  width:100%;
  height:100%;
  object-fit: cover;
  opacity: 0.46;
  filter: saturate(1.18) contrast(1.12) brightness(0.72);
  z-index:0;
}
.bgOverlay{
  position: fixed;
  inset:0;
  pointer-events:none;
  z-index:1;
  background:
    radial-gradient(900px 600px at 35% 10%, rgba(175,110,255,0.28), transparent 55%),
    radial-gradient(900px 600px at 65% 10%, rgba(255,200,90,0.24), transparent 58%),
    radial-gradient(1200px 800px at 50% 100%, rgba(70,30,120,0.26), transparent 60%),
    linear-gradient(180deg, rgba(0,0,0,0.18), rgba(0,0,0,0.64));
}
#fxCanvas{
  position: fixed;
  inset:0;
  width:100%;
  height:100%;
  pointer-events:none;
  z-index:2;
}

/* header */
.topBar{
  position: relative;
  z-index:3;
  padding: 14px 18px 8px;
  display:flex;
  justify-content:center;
}
.siteTitle{
  margin: 0;
  text-align:center;
  font-size: 28px;
  font-weight: 800;
  letter-spacing: 0.6px;
  text-shadow:
    0 0 14px rgba(255,206,105,0.35),
    0 0 32px rgba(175,110,255,0.25);
}

/* layout */
.layout{
  position: relative;
  z-index:3;
  max-width: 1500px;
  margin: 0 auto;
  padding: 10px 12px 14px;
  display:grid;
  grid-template-columns: 320px minmax(0, 1fr) 320px;
  gap: 12px;
  align-items:start;
}
.center{ display:flex; flex-direction:column; gap: 10px; min-width:0; }

.card{
  border-radius: 20px;
  padding: 14px;
  background: rgba(0,0,0,0.30);
  box-shadow: var(--shadow);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.16);
  position: relative;
}
.panelTitle{
  font-size: 12px;
  color: var(--muted);
  letter-spacing: 0.25px;
  margin-bottom: 8px;
}
.centeredTitle{ text-align:center; width:100%; }
.sep{
  border: none;
  border-top: 1px solid rgba(255,255,255,0.14);
  margin: 12px 0;
}

label{
  display:flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
}
.fullWidth{ width: 100%; }

input, select{
  background: rgba(0,0,0,0.34);
  border: 1px solid rgba(255,255,255,0.18);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  outline:none;
}
input:focus, select:focus{
  border-color: rgba(255,206,105,0.55);
  box-shadow: 0 0 0 3px rgba(255,206,105,0.10);
}

button{
  border: 1px solid rgba(255,255,255,0.18);
  background: rgba(255,255,255,0.08);
  color: var(--text);
  padding: 10px 12px;
  border-radius: 14px;
  cursor:pointer;
  height: 40px;
}
button:hover{ background: rgba(255,255,255,0.12); }
.primary{ background: rgba(255,206,105,0.14); border-color: rgba(255,206,105,0.30); }
.primary:hover{ background: rgba(255,206,105,0.20); }
.danger{ background: rgba(255, 80, 90, 0.16); border-color: rgba(255, 80, 90, 0.38); }
.danger:hover{ background: rgba(255, 80, 90, 0.24); }

.row{ display:flex; gap: 10px; align-items:flex-end; margin: 9px 0; }
.row.wrap{ flex-wrap:wrap; }
.centeredRow{ justify-content:center; }
.stretch{ flex: 1; min-width: 200px; }

.hint{
  margin-top: 10px;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.4;
}

/* hero clock */
.hero{
  text-align:center;
  padding: 0 8px;
}
.heroTime{
  font-size: 48px;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.8px;
  text-shadow: 0 10px 44px rgba(0,0,0,0.68);
}
.heroDate{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

/* Alarm top */
.alarmTopGrid{
  display:grid;
  grid-template-columns: 1fr 120px;
  gap: 10px;
  align-items:start;
}
.alarmLeftControls{ display:flex; flex-direction:column; gap: 10px; }
.rowInline{
  display:flex;
  gap: 10px;
  align-items:center;
  justify-content: space-between;
  flex-wrap:wrap;
}
.toggleInline{
  display:flex;
  align-items:center;
  gap: 10px;
  color: var(--text);
  flex-direction: row;
}
.toggleInline input{ width:18px; height:18px; }

.wideBtn{ min-width: 120px; }

/* Alarm volume */
.alarmVolBox{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 8px;
}
.alarmVolTitle{
  font-size: 12px;
  color: rgba(255,255,255,0.78);
  text-align:center;
}
.alarmVolStack{
  display:flex;
  flex-direction: column;
  align-items:center;
  gap: 8px;
}
.vSlider{
  width: 150px;
  transform: rotate(-90deg);
  transform-origin: center;
}
.alarmVolPct{
  font-size: 12px;
  color: rgba(255,255,255,0.86);
}

/* Alarm steppers */
.stepperRow{
  display:flex;
  justify-content:center;
  align-items:flex-end;
  gap: 12px;
  flex-wrap:wrap;
}
.stepField{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap: 6px;
}
.stepLabel{
  font-weight: 800;
  text-align:center;
  color: rgba(255,255,255,0.86);
}
.stepControl{
  display:flex;
  gap: 8px;
  align-items:center;
}
.stepBtn{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  font-weight: 900;
  font-size: 22px;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* BIG SHINY DIGITS (ALARM INPUTS) */
#alarmHour, #alarmMin, #alarmSec, #alarmMs{
  width: 88px;
  font-weight: 900;
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 1px;

  color: #fff;
  text-shadow:
    0 0 8px rgba(255,255,255,0.75),
    0 0 18px rgba(255,206,105,0.55),
    0 0 28px rgba(175,110,255,0.35);

  background: rgba(0,0,0,0.45);
  border: 1px solid rgba(255,255,255,0.28);
  box-shadow:
    inset 0 0 8px rgba(255,255,255,0.08),
    0 0 12px rgba(255,206,105,0.25);
}

/* readout */
.centeredReadout{
  text-align:center;
  margin-top: 10px;
  font-size: 12px;
  color: rgba(255,255,255,0.78);
}

/* analog clock */
.analogWrap{
  position: relative;
  display:flex;
  justify-content:center;
  margin-bottom: 10px;
}
.analogClock{
  width: 210px;
  height: 210px;
  display:block;
}
.clockRing{ fill:none; stroke: rgba(255,255,255,0.22); stroke-width: 2; }
.clockInner{ fill: rgba(0,0,0,0.18); stroke: rgba(255,206,105,0.14); stroke-width: 1; }
.clockHub{ fill: rgba(255,255,255,0.86); }

.hand{ stroke: rgba(255,206,105,0.85); stroke-linecap: round; }
.hand.hour{ stroke-width: 5; }
.hand.min{ stroke-width: 4; }
.hand.sec{ stroke-width: 2.2; }
.hand.ms{ stroke-width: 1.2; opacity: 0.75; }

.aHand{ stroke: rgba(255,70,80,0.75); stroke-linecap: round; }
.aHand.hour{ stroke-width: 2; opacity: 0.45; }
.aHand.min{ stroke-width: 1.7; opacity: 0.45; }
.aHand.sec{ stroke-width: 1.2; opacity: 0.45; }
.aHand.ms{ stroke-width: 0.9; opacity: 0.35; }

/* sleep button overlays clock */
.sleepBtn{
  display:none;
  position:absolute;
  left:50%;
  transform: translateX(-50%);
  top: 60px;
  z-index: 50;
  padding: 18px 34px;
  font-size: 18px;
  border-radius: 999px;
  font-weight: 800;
  border: 1px solid rgba(255,206,105,0.62);
  background: rgba(0,0,0,0.58);
  box-shadow:
    0 22px 70px rgba(0,0,0,0.70),
    0 0 34px rgba(255,206,105,0.22),
    0 0 14px rgba(255,255,255,0.10);
}
.sleepBtn.show{ display:inline-flex; align-items:center; justify-content:center; }

/* YouTube embed */
.embed{
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow:hidden;
  border-radius: 18px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
}
.embed iframe{ width:100%; height:100%; border:0; }
.muted{ color: var(--muted); font-size: 12px; }

.ytVolRow{
  margin-top: 10px;
  display:flex;
  align-items:center;
  gap: 10px;
  justify-content:center;
}
.volLabel, .volPct{ font-size: 12px; color: var(--muted); }

/* Pie Timer */
.pieArea{
  position: relative;
  width: 100%;
  max-width: 360px;
  margin: 0 auto;
  aspect-ratio: 1 / 1;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pieSvg{ width:100%; height:100%; transform: rotate(-90deg); display:block; }
.pieBg{ fill:none; stroke: rgba(255,255,255,0.12); stroke-width: 18; }
.pieFg{
  fill:none;
  stroke: rgba(255,206,105,0.86);
  stroke-width: 18;
  stroke-linecap: round;
  stroke-dasharray: 999;
  stroke-dashoffset: 999;
  transition: stroke-dashoffset 120ms linear;
  filter:
    drop-shadow(0 0 10px rgba(255,206,105,0.30))
    drop-shadow(0 0 18px rgba(255,206,105,0.24))
    drop-shadow(0 0 34px rgba(255,206,105,0.16));
}
.pieCenterText{
  position:absolute;
  inset:0;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  pointer-events:none;
  text-align:center;
}
.piePct{
  font-size: 34px;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}
.pieSub{
  margin-top: 6px;
  font-size: 12px;
  color: var(--muted);
}

.timerDisplayCentered{
  margin-top: 10px;
  text-align:center;
  font-size: 44px;
  font-weight: 800;
  letter-spacing: 0.6px;
  font-variant-numeric: tabular-nums;
  text-shadow:
    0 0 10px rgba(255,206,105,0.25),
    0 10px 44px rgba(0,0,0,0.55);
}

/* Water tank */
.fillTank{
  position: relative;
  width: 100%;
  max-width: 460px;
  height: 220px;
  margin: 8px auto 0;
  border-radius: 22px;
  overflow:hidden;
  border: 1px solid rgba(255,255,255,0.14);
  background:
    radial-gradient(160px 110px at 25% 18%, rgba(175,110,255,0.26), transparent 60%),
    radial-gradient(180px 130px at 80% 35%, rgba(255,206,105,0.20), transparent 60%),
    rgba(0,0,0,0.24);
  box-shadow:
    0 18px 52px rgba(0,0,0,0.55),
    0 0 26px rgba(255,206,105,0.16);
}
.bigTank{ height: 240px; }

.fillLiquid{
  position:absolute;
  left:0; right:0; bottom:0;
  height: 0%;
  transition: height 120ms linear;
  overflow:hidden;
  border-top: 1px solid rgba(255,255,255,0.10);
  background:
    linear-gradient(180deg,
      rgba(255,255,255,0.10),
      rgba(175,110,255,0.10) 35%,
      rgba(255,206,105,0.28) 70%,
      rgba(255,206,105,0.18)
    );
}
.fillSparkles{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 20% 80%, rgba(255,255,255,0.55) 0 2px, transparent 3px),
    radial-gradient(circle at 45% 60%, rgba(255,206,105,0.70) 0 2px, transparent 3px),
    radial-gradient(circle at 70% 75%, rgba(255,255,255,0.48) 0 1.5px, transparent 3px),
    radial-gradient(circle at 85% 50%, rgba(255,206,105,0.60) 0 2px, transparent 3px),
    radial-gradient(circle at 15% 40%, rgba(255,255,255,0.40) 0 1.5px, transparent 3px);
  opacity: 0.70;
  animation: glitterDrift 2.4s linear infinite;
  filter: drop-shadow(0 0 10px rgba(255,206,105,0.22));
}
@keyframes glitterDrift{
  0%{ transform: translateY(10px) translateX(0px); opacity:0.38; }
  50%{ transform: translateY(-8px) translateX(7px); opacity:0.82; }
  100%{ transform: translateY(10px) translateX(0px); opacity:0.38; }
}
.fillBubbles{
  position:absolute; inset:0;
  background:
    radial-gradient(circle at 25% 120%, rgba(255,255,255,0.35) 0 6px, transparent 7px),
    radial-gradient(circle at 55% 120%, rgba(255,255,255,0.25) 0 4px, transparent 5px),
    radial-gradient(circle at 75% 120%, rgba(255,255,255,0.30) 0 5px, transparent 6px),
    radial-gradient(circle at 40% 120%, rgba(255,255,255,0.20) 0 3px, transparent 4px);
  opacity: 0.62;
  animation: bubblesUp 2.0s linear infinite;
}
@keyframes bubblesUp{
  0%{ background-position: 25% 120%, 55% 120%, 75% 120%, 40% 120%; opacity:0.38; }
  50%{ opacity:0.70; }
  100%{ background-position: 25% -20%, 55% -20%, 75% -20%, 40% -20%; opacity:0.22; }
}

/* Alarm ring shake */
@keyframes cardShake {
  0%   { transform: translate3d(0,0,0) rotate(0deg); }
  10%  { transform: translate3d(-2px, 1px, 0) rotate(-0.25deg); }
  20%  { transform: translate3d(2px, -1px, 0) rotate(0.25deg); }
  30%  { transform: translate3d(-3px, 0px, 0) rotate(-0.35deg); }
  40%  { transform: translate3d(3px, 1px, 0) rotate(0.35deg); }
  50%  { transform: translate3d(-2px, -1px, 0) rotate(-0.25deg); }
  60%  { transform: translate3d(2px, 1px, 0) rotate(0.25deg); }
  70%  { transform: translate3d(-3px, 0px, 0) rotate(-0.35deg); }
  80%  { transform: translate3d(3px, -1px, 0) rotate(0.35deg); }
  90%  { transform: translate3d(-2px, 1px, 0) rotate(-0.25deg); }
  100% { transform: translate3d(0,0,0) rotate(0deg); }
}
body.alarm-ringing .alarmCard,
body.alarm-ringing .timerCard,
body.alarm-ringing .centerCard{
  animation: cardShake 0.35s infinite;
}

/* responsive */
@media (max-width: 1180px){
  .layout{ grid-template-columns: 1fr; }
  .alarmTopGrid{ grid-template-columns: 1fr; }
  .vSlider{ transform: none; width: 100%; }
}