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

:root {
  --bg:    #000;
  --surf:  #1c1c1c;
  --ih:    76px;      /* item height */
  --fc:    60px;      /* center font size */
  --fs:    44px;      /* side font size */
  --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 ──────────────────────────────────────────────── */
#android-timer { background: var(--bg); }

/* Layout: [top-space] [labels] [slots] [bottom-space] [button] [nav]
   top-space > bottom-space so the block sits above center */
.android-top-space { flex: 2.2; min-height: 0; }
.android-spacer    { flex: 0.4; min-height: 0; }

/* Labels — must mirror slot row widths exactly */
.android-labels {
  display: flex; align-items: center; flex-shrink: 0; margin-bottom: 8px;
}
.lbl-col { flex: 1; text-align: center; font-size: 12px; font-weight: 500; color: rgba(255,255,255,0.36); letter-spacing: 0.03em; }
.lbl-sep { width: 28px; flex-shrink: 0; }   /* mirrors .slot-separator */

/* Slots row */
.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 — fade masks */
.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 */
.slot { height: 100%; cursor: grab; touch-action: none; }
.slot:active { cursor: grabbing; }
.slot-track { display: flex; flex-direction: column; will-change: transform; }

/* Slot items */
.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: var(--dim);
  transition: color 0.1s, font-size 0.1s;
}
.slot-item.near     { color: var(--mid); }
.slot-item.selected { color: var(--wh); font-size: var(--fc); font-weight: 700; }

/* Colon */
.slot-separator {
  width: 28px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 40px; font-weight: 300; color: rgba(255,255,255,0.32); padding-bottom: 4px;
}

/* Iniciar button — narrow, tall, rounded, more bottom margin */
.android-start-wrap {
  display: flex; justify-content: center;
  padding: 0 90px 32px; flex-shrink: 0;
}
.android-start-btn {
  width: 100%; max-width: 200px; height: 54px; border-radius: 27px;
  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 — white icons */
.android-nav {
  display: flex; background: var(--surf);
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-bottom: env(safe-area-inset-bottom); flex-shrink: 0;
}
.nav-item {
  flex: 1; background: none; border: none;
  color: rgba(255,255,255,0.75);   /* white-ish always */
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; cursor: pointer; padding: 10px 4px 8px; transition: color 0.15s;
}
.nav-icon {
  width: 52px; height: 28px; display: flex; align-items: center; justify-content: center;
  border-radius: 14px; transition: background 0.15s;
}
.nav-icon svg { width: 22px; height: 22px; fill: currentColor; }
.nav-item span { font-size: 10px; font-weight: 500; color: inherit; }
/* Active: full white + pill */
.nav-item.active { color: #fff; }
.nav-item.active .nav-icon { background: rgba(255,255,255,0.14); }