/* ── Android Timer CSS v9 ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --bg:   #000;
  --ih:   76px;
  --fc:   47px;
  --fs:   31px;
  --wh:   #fff;
  --mid:  rgba(255,255,255,0.40);
  --dim:  rgba(255,255,255,0.14);
  --line: rgba(255,255,255,0.12);
}

html, body {
  width: 100%; height: 100%; background: var(--bg); color: var(--wh);
  font-family: 'Google Sans', 'Roboto', sans-serif;
  overflow: hidden; touch-action: none;
  -webkit-tap-highlight-color: transparent; user-select: none;
}

.screen { position: fixed; inset: 0; display: none; flex-direction: column; }
.screen.active { display: flex; }
.timer-ui { display: none; flex-direction: column; height: 100%; }
.timer-ui.active-ui { display: flex; }

#android-timer { background: var(--bg); position: relative; }
#android-timer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: calc(env(safe-area-inset-top) + 3px);
  background: #000;
  z-index: 20;
  pointer-events: none;
}

.android-top-space {
  display: block;
  flex: 0 0 clamp(76px, 14vh, 132px);
  background: #000;
  border: none;
  box-shadow: none;
}
.android-spacer    { flex: 1; min-height: 0; }

.android-view-stack {
  flex: 1; min-height: 0; display: flex; flex-direction: column;
}
.android-view {
  display: none; flex: 1; min-height: 0; flex-direction: column;
}
.android-view.active-view { display: flex; }

.android-labels {
  display: flex; align-items: center; flex-shrink: 0;
  margin-bottom: 8px; margin-top: 0;
}
.lbl-col { flex: 1; text-align: center; font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.48); letter-spacing: 0.03em; }
.lbl-sep { width: 14px; flex-shrink: 0; }

.android-slots {
  display: flex; align-items: stretch; flex-shrink: 0;
  height: calc(var(--ih) * 3); position: relative;
}
.android-slots::before, .android-slots::after {
  content: ''; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line); z-index: 5; pointer-events: none;
}
.android-slots::before { top: var(--ih); }
.android-slots::after  { bottom: var(--ih); }

.slot-wrapper { flex: 1; height: 100%; overflow: hidden; position: relative; }
.slot-wrapper::before, .slot-wrapper::after {
  content: ''; position: absolute; left: 0; right: 0;
  height: calc(var(--ih) * 1.05); pointer-events: none; z-index: 4;
}
.slot-wrapper::before { top: 0; background: linear-gradient(to bottom, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 55%, transparent 100%); }
.slot-wrapper::after  { bottom: 0; background: linear-gradient(to top, rgba(0,0,0,1) 0%, rgba(0,0,0,0.65) 55%, transparent 100%); }

.slot { height: 100%; cursor: grab; touch-action: none; }
.slot:active { cursor: grabbing; }
.slot-track { display: flex; flex-direction: column; will-change: transform; }

/* Stopped: top/bottom rows solid grey */
.slot-item {
  height: var(--ih); display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-variant-numeric: tabular-nums;
  font-size: var(--fs); font-weight: 300;
  color: rgba(255,255,255,0.38);
  transition: color 0.12s, font-size 0.1s;
}
.slot-item.near     { color: rgba(255,255,255,0.38); }
.slot-item.selected { color: var(--wh) !important; font-size: var(--fc); font-weight: 700 !important; }

/* Spinning: top/bottom darken; center goes grey */
.slot-wrapper.is-spinning .slot-item          { color: rgba(255,255,255,0.16); }
.slot-wrapper.is-spinning .slot-item.near     { color: rgba(255,255,255,0.16); }
.slot-wrapper.is-spinning .slot-item.selected { color: rgba(255,255,255,0.62) !important; font-weight: 700 !important; }

/* Separator: bold */
.slot-separator {
  width: 14px; flex-shrink: 0; display: flex; align-items: center; justify-content: center;
  font-size: 38px; font-weight: 700; color: #fff; padding-bottom: 4px;
}

/* Start button: narrower, taller, more bottom margin */
.android-start-wrap {
  display: flex; justify-content: center; padding: 0 110px 42px; flex-shrink: 0;
}
.android-start-btn {
  width: 100%; max-width: 170px; height: 58px; border-radius: 29px;
  border: none; background: #1a3566; color: #6baeff;
  font-size: 16px; font-weight: 600; letter-spacing: 0.02em; cursor: pointer;
  font-family: 'Google Sans', 'Roboto', sans-serif;
  transition: opacity 0.15s, transform 0.1s;
}
.android-start-btn:active { opacity: 0.8; transform: scale(0.97); }

/* Bottom nav */
.android-nav {
  display: flex; background: #000;
  border-top: none;
  padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0;
}
.nav-item {
  flex: 1; background: none; border: none;
  color: rgba(255,255,255,0.7);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 4px; cursor: pointer; padding: 12px 4px 10px; transition: color 0.15s;
}
.nav-icon {
  width: 56px; height: 32px; display: flex; align-items: center; justify-content: center;
  border-radius: 16px; transition: background 0.15s;
}
.nav-icon svg { width: 26px; height: 26px; fill: currentColor; }
.nav-item span { font-size: 11px; font-weight: 500; color: inherit; }
.nav-item.active { color: #fff; }
.nav-item.active .nav-icon { background: rgba(255,255,255,0.14); }

.android-alarm-view .alarm-android-container {
  display: flex; flex-direction: column; height: 100%;
}
.android-alarm-view .alarm-android-scroll {
  flex: 1; min-height: 0;
}
.android-alarm-view .alarm-android-back {
  display: none;
}