/* ── BOTTOM NAV ────────────────────────────────────────────── */
#bottom-nav {
  position: fixed; bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 50; display: flex; gap: .55rem; align-items: center;
  background: rgba(253,240,235,.82); backdrop-filter: blur(12px);
  border: 1px solid rgba(232,169,154,.3); border-radius: 50px;
  padding: .55rem 1.1rem; box-shadow: 0 8px 24px rgba(180,90,80,.12);
}

.nav-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(232,169,154,.35);
  cursor: pointer; border: none; padding: 0;
  transition: all .3s; flex-shrink: 0;
}
.nav-dot.active { background: var(--rose); transform: scale(1.45); }

/* ── MUSIC TOGGLE ──────────────────────────────────────────── */
#music-toggle {
  position: fixed; top: 1.4rem; right: 1.4rem; z-index: 60;
  background: rgba(253,240,235,.85); backdrop-filter: blur(10px);
  border: 1px solid rgba(232,169,154,.3); border-radius: 50px;
  padding: .45rem 1rem; cursor: pointer;
  font-family: 'Jost', sans-serif; font-size: .68rem;
  letter-spacing: .2em; color: var(--text-mid); text-transform: uppercase;
  box-shadow: 0 4px 16px rgba(180,90,80,.1);
  transition: all .3s; display: flex; align-items: center; gap: .5rem;
}
#music-toggle:hover  { background: rgba(232,169,154,.25); }
.music-icon          { font-size: .9rem; transition: all .3s; }
#music-toggle.muted .music-icon { opacity: .4; }

/* ── ANALOG CLOCK ──────────────────────────────────────────── */
.clock-wrap {
  position: absolute; top: 2rem; left: 2rem;
  cursor: pointer; user-select: none; z-index: 10;
  display: flex; flex-direction: column; align-items: center; gap: .4rem;
}
@media (max-width: 700px) { .clock-wrap { top: 1.2rem; left: 1.2rem; } }

.clock-face {
  width: 60px; height: 60px; border-radius: 50%;
  border: 1.5px solid rgba(232,169,154,.55);
  background: rgba(253,240,235,.8); backdrop-filter: blur(6px);
  position: relative; box-shadow: 0 4px 16px rgba(180,90,80,.1);
  transition: transform .3s, box-shadow .3s;
}
.clock-wrap:hover .clock-face {
  transform: scale(1.08); box-shadow: 0 8px 24px rgba(180,90,80,.18);
}

/* Tap-progress ring */
.clock-face::after {
  content: ''; position: absolute; inset: -4px; border-radius: 50%;
  border: 1.5px solid transparent; transition: all .25s; pointer-events: none;
}
.clock-wrap.t1 .clock-face::after { border-color: rgba(232,169,154,.45); inset: -7px; }
.clock-wrap.t2 .clock-face::after {
  border-color: rgba(212,120,106,.65); inset: -10px;
  box-shadow: 0 0 10px rgba(212,120,106,.25);
}

.clock-center {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 5px; height: 5px; border-radius: 50%; background: var(--rose); z-index: 3;
}

.clock-hand {
  position: absolute; bottom: 50%; left: 50%;
  transform-origin: bottom center; border-radius: 4px;
}
.hand-hour { width: 2px;   height: 17px; background: var(--text-dark); margin-left: -1px; }
.hand-min  { width: 1.5px; height: 22px; background: var(--text-mid);  margin-left: -.75px; }
.hand-sec  { width: 1px;   height: 25px; background: var(--rose);      margin-left: -.5px; }

.clock-hint {
  font-size: .5rem; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(160,96,96,.4); font-family: 'Jost', sans-serif;
  animation: hintPulse 3s ease-in-out infinite;
  pointer-events: none; white-space: nowrap;
}
@keyframes hintPulse {
  0%, 100% { opacity: .35; }
  50%       { opacity: .72; }
}