/* ==========================================================================
   Zone 2: Hero Chronometer Stage (Pure Negative Space, Zero Jumps)
   ========================================================================== */

#timer-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: pointer;
  width: 100%;
  min-width: 0;
  max-width: min(560px, 100%);
  padding: 8px 20px;
  border-radius: var(--r-xl);
  z-index: 20;
}

#timer-halo {
  position: absolute;
  width: 360px;
  height: 190px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.045) 0%, transparent 70%);
  filter: blur(46px);
  opacity: 0.45;
  pointer-events: none;
  transition: opacity 0.3s var(--ease-apple), background 0.3s var(--ease-apple);
}

/* Fixed-Height Top Status / Inspection / Hold-Progress Slot (34px) */
.timer-status-slot {
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 4px;
  z-index: 3;
  width: 100%;
  max-width: 100%;
}

.status-pill {
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 30px;
  max-width: calc(100% - 16px);
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 14px;
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 1px 0.5px rgba(255, 255, 255, 0.24);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-secondary);
  backdrop-filter: var(--glass-blur-sm);
  -webkit-backdrop-filter: var(--glass-blur-sm);
  transition: opacity 0.22s var(--ease-apple), transform 0.22s var(--ease-apple), border-color 0.2s var(--ease-apple), color 0.2s var(--ease-apple), background 0.2s var(--ease-apple);
}

.status-pill.pill-quiet {
  opacity: 0;
  pointer-events: none;
  transform: translateY(3px) scale(0.97);
}

.status-pill.pill-drill,
.status-pill.pill-typing {
  opacity: 1;
  pointer-events: auto;
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.14);
  border-color: rgba(var(--accent-rgb), 0.38);
}

.status-pill.pill-drill .status-pill-dot,
.status-pill.pill-typing .status-pill-dot {
  background: var(--accent-light);
  box-shadow: 0 0 8px var(--accent-light);
}

.pill-drill-action {
  background: rgba(255, 255, 255, 0.14);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #FFFFFF;
  height: 20px;
  padding: 0 7px;
  border-radius: var(--r-pill);
  font-size: 0.62rem;
  font-weight: 700;
  cursor: pointer;
  z-index: 2;
}

.pill-drill-close {
  background: rgba(255, 255, 255, 0.14);
  border: none;
  color: #FFFFFF;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  font-size: 0.62rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-left: 2px;
  z-index: 2;
}

.hold-progress-fill {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 159, 10, 0.30), rgba(48, 209, 88, 0.36));
  pointer-events: none;
  z-index: 0;
}

.status-pill-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  box-shadow: 0 0 8px var(--green);
  z-index: 1;
}

#inspection-indicator {
  position: relative;
  z-index: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.status-pill.state-inspecting {
  opacity: 1;
  color: var(--yellow);
  background: rgba(255, 214, 10, 0.12);
  border-color: rgba(255, 214, 10, 0.36);
}
.status-pill.state-inspecting .status-pill-dot {
  background: var(--yellow);
  box-shadow: 0 0 8px var(--yellow);
}

.status-pill.state-holding {
  opacity: 1;
  color: #FFD60A;
  border-color: rgba(255, 159, 10, 0.42);
}
.status-pill.state-holding .status-pill-dot {
  background: var(--amber);
  box-shadow: 0 0 8px var(--amber);
}

.status-pill.state-ready {
  opacity: 1;
  color: #FFFFFF;
  background: rgba(48, 209, 88, 0.22);
  border-color: rgba(48, 209, 88, 0.58);
  box-shadow: 0 0 20px rgba(48, 209, 88, 0.24), inset 0 1px 0.5px rgba(255, 255, 255, 0.45);
}
.status-pill.state-ready .status-pill-dot {
  background: #FFFFFF;
  box-shadow: 0 0 10px #FFFFFF;
  animation: readyGlow 1.2s ease-in-out infinite alternate;
}

@keyframes readyGlow {
  from { box-shadow: 0 0 6px #FFFFFF; }
  to { box-shadow: 0 0 14px #30D158, 0 0 22px #30D158; }
}
.status-pill.state-ready .hold-progress-fill {
  opacity: 0;
}

/* Delta vs the running average: sits in the status slot right after a solve */
.timer-status-slot {
  position: relative;
}

.timer-delta {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  display: none;
  align-items: center;
  height: 26px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-feature-settings: "tnum" 1;
  font-size: 0.8rem;
  font-weight: 600;
  white-space: nowrap;
  animation: deltaIn 0.35s var(--ease-apple);
}

.timer-delta.is-faster {
  color: var(--green);
  background: rgba(48, 209, 88, 0.12);
  border: 1px solid rgba(48, 209, 88, 0.28);
}

.timer-delta.is-slower {
  color: var(--text-secondary);
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

/* New personal best: the one solid pill on the screen */
.timer-delta.is-pb {
  color: #03140A;
  background: var(--green);
  border: 1px solid transparent;
  font-weight: 700;
  box-shadow: 0 0 18px rgba(48, 209, 88, 0.35);
}

/* Only right after a solve, and only when the status pill has nothing to say */
#timer-area.state-stopped .timer-delta.is-faster,
#timer-area.state-stopped .timer-delta.is-slower,
#timer-area.state-stopped .timer-delta.is-pb {
  display: inline-flex;
}

.timer-status-slot:has(.status-pill:not(.pill-quiet)) .timer-delta {
  display: none !important;
}

@keyframes deltaIn {
  from { opacity: 0; transform: translate(-50%, -30%); }
  to { opacity: 1; transform: translate(-50%, -50%); }
}

/* Main Chronometer Digits & Manual Typing Input */
.timer-digits-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: clamp(4.6rem, 13vw, 8.5rem);
  z-index: 2;
}

/* Display digits: Inter with tabular figures (stopwatch-style, no width jitter) */
#timer-display {
  font-family: var(--font-display);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1, "cv11" 1;
  font-size: clamp(4.8rem, 13.5vw, 8.6rem);
  font-weight: 650;
  line-height: 1.05;
  letter-spacing: -0.045em;
  color: #F5F5F7;
  text-shadow: none;
  z-index: 2;
  padding: 2px 0;
  text-align: center;
  white-space: nowrap;
  max-width: 100%;
}

#timer-display.timer-text-long {
  font-size: clamp(3.4rem, 9.5vw, 6.4rem);
}

#timer-display.state-idle,
#timer-display.state-stopped,
#timer-display.state-pb {
  color: #F5F5F7;
}

#timer-display.state-dnf {
  color: #FF453A !important;
  text-shadow: 0 0 28px rgba(255, 69, 58, 0.40);
}

#timer-display.state-inspecting {
  color: var(--yellow);
}

#timer-display.state-inspecting-urgent {
  color: var(--red) !important;
}

#timer-display.state-holding {
  color: var(--amber);
}

#timer-display.state-ready {
  color: var(--green);
}

#timer-display.state-running {
  color: #FFFFFF;
}

/* Typing wins over a leftover DNF/PB colour from the previous solve */
#timer-display.state-typing {
  color: var(--accent-light) !important;
  text-shadow: none !important;
  border-bottom: 2px dashed rgba(var(--accent-light-rgb), 0.35);
}

.manual-time-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
  font-size: 16px;
  cursor: text;
  z-index: 5;
}

/* Fixed-Height Bottom Action / Hint Slot (42px) */
.timer-action-slot {
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 6px;
  z-index: 3;
}

#timer-hint {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text-secondary);
  letter-spacing: 0.01em;
  /* A few breaths to draw the eye, then still: an endless animation keeps the GPU drawing frames */
  animation: hintBreathe 4s ease-in-out 3;
}

/* Holding / ready: the status pill above the digits already says "hold" / "release",
   so the line below steps back instead of repeating it */
#timer-area.state-holding #timer-hint,
#timer-area.state-ready #timer-hint,
#timer-area.is-priming #timer-hint {
  visibility: hidden;
}

/* A mouse click on the timer: the hint lights up once to point at Space */
#timer-hint.hint-nudge {
  animation: hintNudge 1.1s var(--ease-apple);
}

@keyframes hintNudge {
  0%, 35% { opacity: 1; color: var(--text-primary); }
  100% { opacity: 0.6; }
}

/* Gentle breathing, but always clearly readable: it is the first instruction a new user sees */
@keyframes hintBreathe {
  0%, 100% { opacity: 0.6; }
  50% { opacity: 0.9; }
}

#typing-action-bar {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  padding: 3px 5px;
  border-radius: var(--r-pill);
  background: rgba(10, 11, 16, 0.88);
  backdrop-filter: var(--glass-blur-md);
  -webkit-backdrop-filter: var(--glass-blur-md);
  border: 1px solid rgba(255, 255, 255, 0.10);
  box-shadow: var(--liquid-shadow-sm);
}

/* Post-Solve Quick Action Capsule (Ultra-Minimalist Apple HUD: [+2] [DNF] [🗑]) */
#quick-solve-bar {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 32px;
  padding: 2.5px 5px;
  border-radius: var(--r-pill);
  background: rgba(14, 16, 24, 0.78);
  backdrop-filter: blur(20px) saturate(180%);
  -webkit-backdrop-filter: blur(20px) saturate(180%);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  transition: all 0.22s var(--ease-apple);
}

.quick-pill-btn {
  background: transparent;
  border: 1px solid transparent;
  color: rgba(255, 255, 255, 0.65);
  font-family: var(--font-sans);
  font-size: 0.74rem;
  font-weight: 650;
  height: 25px;
  padding: 0 11px;
  border-radius: var(--r-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.14s var(--ease-apple), background 0.16s var(--ease-apple), color 0.16s var(--ease-apple), border-color 0.16s var(--ease-apple), box-shadow 0.16s var(--ease-apple);
  -webkit-tap-highlight-color: transparent;
}

.quick-pill-btn:hover {
  background: rgba(255, 255, 255, 0.08);
  color: #FFFFFF;
}

.quick-pill-btn:active {
  transform: scale(0.92);
}

/* Active Penalty States */
.quick-pill-btn.active#quick-btn-plus2,
#quick-btn-plus2.active {
  background: rgba(255, 159, 10, 0.20) !important;
  border-color: rgba(255, 159, 10, 0.50) !important;
  color: #FFD60A !important;
  box-shadow: 0 0 10px rgba(255, 159, 10, 0.30) !important;
}

.quick-pill-btn.active#quick-btn-dnf,
#quick-btn-dnf.active {
  background: rgba(255, 69, 58, 0.22) !important;
  border-color: rgba(255, 69, 58, 0.52) !important;
  color: #FF453A !important;
  box-shadow: 0 0 10px rgba(255, 69, 58, 0.30) !important;
}

/* Trash Icon Button */
#quick-btn-delete {
  width: 28px;
  height: 25px;
  padding: 0;
  color: rgba(255, 255, 255, 0.45);
}

#quick-btn-delete:hover {
  color: #FF453A;
  background: rgba(255, 69, 58, 0.14);
  border-color: rgba(255, 69, 58, 0.32);
}

#quick-btn-delete:active {
  transform: scale(0.90);
  color: #FF453A;
  background: rgba(255, 69, 58, 0.22);
}

/* Hide redundant details button on main screen */
#quick-btn-inspect {
  display: none !important;
}

.quick-pill-accent {
  color: var(--accent-light);
  background: rgba(var(--accent-rgb), 0.16);
  border-color: rgba(var(--accent-rgb), 0.36);
}

.quick-pill-accent:hover {
  background: rgba(var(--accent-rgb), 0.28) !important;
  border-color: rgba(var(--accent-light-rgb), 0.60) !important;
  color: #FFFFFF !important;
}

/* Under-Timer Rolling Averages Strip (ao5 · ao12 · ao50 · ao100) */
#under-timer-averages {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 24px;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 0.76rem;
  color: var(--text-secondary);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s var(--ease-apple);
}

.zen-mode #under-timer-averages {
  opacity: 0.88;
}

/* Desktop: always show ao5 · ao12 under the timer (focus mode shows all) */
@media (min-width: 921px) and (min-height: 521px), (min-width: 1101px) {
  #under-timer-averages {
    opacity: 1;
    font-size: 0.9rem;
    gap: 12px;
  }
  #app:not(.zen-mode) #under-timer-averages > :nth-child(-n+2),
  #app:not(.zen-mode) #under-timer-averages > :nth-child(n+6) {
    display: none;
  }
}

.ut-avg-item em {
  font-style: normal;
  font-family: var(--font-sans);
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-tertiary);
  margin-right: 4px;
}

.ut-avg-item b {
  font-weight: 600;
  color: rgba(245, 245, 247, 0.92);
}

.ut-sep {
  color: rgba(255, 255, 255, 0.18);
}

/* Splits of the previous solve are meaningless while typing a new time */
.timer-digits-wrap:has(#timer-display.state-typing) + .live-splits-strip {
  display: none;
}

/* Live Multi-Phase CFOP Splits Strip */
.live-splits-strip,
.modal-splits-row {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
  z-index: 3;
}

.live-split-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 9px;
  border-radius: var(--r-pill);
  background: rgba(var(--accent-rgb), 0.14);
  border: 1px solid rgba(var(--accent-light-rgb), 0.30);
  font-size: 0.68rem;
  color: #F5F5F7;
}

.live-split-chip em {
  font-style: normal;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.60rem;
  letter-spacing: 0.05em;
  color: var(--accent-light);
}

/* Inspection cancel: small glyph, finger-sized hit area */
.pill-cancel {
  position: relative;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  font-size: 0.7rem;
  background: rgba(255, 255, 255, 0.18);
}

.pill-cancel::after {
  content: '';
  position: absolute;
  inset: -10px;
}