/* =====================================================================
   Timer Lenticchie — glossy ring around a bowl of lentils, aqua chips
   ===================================================================== */
.timer-win .win-body { overflow: hidden; }
.app.timer {
  position: relative; align-items: center; gap: 14px; padding: 18px 18px 16px; overflow: hidden;
  background:
    radial-gradient(ellipse 80% 40% at 50% 0%, rgba(255,255,255,0.7), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, rgba(225,244,255,0.6), rgba(190,225,255,0.45));
}

/* flash overlay on completion */
.app.timer .timer-flash {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; z-index: 20;
  background: radial-gradient(ellipse at 50% 30%, rgba(140,255,120,0.55), rgba(140,255,120,0) 70%);
}
.app.timer.flash-once .timer-flash,
.app.timer .timer-flash.flash-once { animation: timer-flash 1.4s ease 2; }
.app.timer.flash-once { animation: none; }
.app.timer .flash-once { }
@keyframes timer-flash { 0% { opacity: 0; } 20% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- ring + bowl ---------- */
.app.timer .timer-ring-wrap { position: relative; width: 220px; height: 220px; flex: none; margin-top: 4px; }
.app.timer .timer-bowl {
  position: absolute; inset: 14px; border-radius: 50%; overflow: hidden;
  border: 3px solid rgba(255,255,255,0.9);
  box-shadow: 0 8px 20px rgba(0,40,120,0.3), 0 2px 8px rgba(0,60,150,0.3) inset;
}
.app.timer .timer-lentils-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.app.timer .timer-glass-hi {
  position: absolute; left: 6%; right: 6%; top: 6%; height: 42%; border-radius: 50% 50% 60% 60% / 70% 70% 100% 100%;
  background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(255,255,255,0));
  pointer-events: none;
}
.app.timer .timer-bubbles { position: absolute; inset: 0; pointer-events: none; }
.app.timer .tb {
  position: absolute; bottom: -12px; width: 8px; height: 8px; border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, rgba(255,255,255,0.95), rgba(255,255,255,0.15) 70%);
  opacity: 0;
}
.app.timer.running .tb { animation: timer-bubble 3.2s ease-in infinite; }
.app.timer .tb1 { left: 28%; width: 7px; height: 7px; animation-delay: 0s; }
.app.timer .tb2 { left: 48%; width: 10px; height: 10px; animation-delay: 0.9s; }
.app.timer .tb3 { left: 65%; width: 6px; height: 6px; animation-delay: 1.8s; }
.app.timer .tb4 { left: 55%; width: 8px; height: 8px; animation-delay: 2.5s; }
@keyframes timer-bubble {
  0% { opacity: 0; transform: translateY(0) scale(0.8); }
  15% { opacity: 0.9; }
  85% { opacity: 0.7; }
  100% { opacity: 0; transform: translateY(-130px) scale(1.1); }
}
.app.timer .timer-svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg); }
.app.timer .timer-track { fill: none; stroke: rgba(11,58,128,0.15); stroke-width: 10; }
.app.timer .timer-progress {
  fill: none; stroke-width: 10; stroke-linecap: round;
  stroke: #3aa8ff;
  filter: drop-shadow(0 0 6px rgba(58,168,255,0.7));
  transition: stroke-dashoffset 0.3s linear, stroke 0.3s ease;
}
.app.timer.is-done .timer-progress { stroke: #7ddc2b; filter: drop-shadow(0 0 10px rgba(125,220,43,0.9)); animation: timer-pulse 1.1s ease-in-out infinite; }
@keyframes timer-pulse { 0%, 100% { stroke-width: 10; } 50% { stroke-width: 14; } }
.app.timer .timer-digits {
  position: absolute; inset: 0; display: grid; place-items: center;
  font: 700 2.5rem var(--font-display); color: #0b3a80;
  text-shadow: 0 1px 0 rgba(255,255,255,0.9), 0 2px 8px rgba(0,60,160,0.3);
  letter-spacing: -0.02em;
}

.app.timer .timer-done-msg {
  font: 700 1.15rem var(--font-display); color: #1c7a10; text-align: center;
  text-shadow: 0 1px 0 rgba(255,255,255,0.8);
  animation: timer-lock-in 0.4s cubic-bezier(.2,1.4,.3,1) both;
}
@keyframes timer-lock-in { from { transform: scale(0.7); opacity: 0; } to { transform: none; opacity: 1; } }

/* ---------- presets ---------- */
.app.timer .timer-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; width: 100%; }
.app.timer .timer-chip {
  cursor: pointer; border-radius: 14px; border: 1px solid #7fa9d8; padding: 8px 4px;
  font: 600 0.72rem var(--font); color: #0b3a80; text-align: center; line-height: 1.5;
  background: linear-gradient(180deg, #ffffff 0%, #eaf6ff 45%, #cfe6fb 52%, #e3f2ff 100%);
  box-shadow: 0 2px 6px rgba(0,40,120,0.2), 0 1px 0 rgba(255,255,255,0.9) inset;
}
.app.timer .timer-chip b { font: 700 0.85rem var(--font-display); }
.app.timer .timer-chip:hover { filter: brightness(1.06); }
.app.timer .timer-chip:active { transform: translateY(1px); }

.app.timer .timer-custom { display: flex; align-items: center; gap: 8px; width: 100%; }
.app.timer .timer-custom label { font-size: 0.78rem; font-weight: 600; flex: none; }
.app.timer .timer-custom-input { flex: 1; min-width: 0; text-align: center; }
.app.timer .timer-custom-set { flex: none; padding: 8px 14px; }

.app.timer .timer-controls { display: flex; gap: 10px; width: 100%; margin-top: auto; }
.app.timer .timer-controls .aqua-btn { flex: 1; }
.app.timer .timer-controls .aqua-btn:disabled { opacity: 0.45; }

/* =====================================================================
   Mobile: full screen, huge digits, wrapping chips
   ===================================================================== */
html.mobile .app.timer { padding: 16px 14px; gap: 16px; justify-content: center; }
html.mobile .app.timer .timer-ring-wrap { width: 250px; height: 250px; }
html.mobile .app.timer .timer-digits { font-size: 2.9rem; }
html.mobile .app.timer .timer-presets { grid-template-columns: repeat(2, 1fr); }
html.mobile .app.timer .timer-chip { padding: 12px 6px; font-size: 0.8rem; }
html.mobile .app.timer .timer-chip b { font-size: 0.95rem; }
html.mobile .app.timer .timer-custom-input { font-size: 16px; }
html.mobile .app.timer .timer-controls .aqua-btn { padding: 0.9em 0.5em; font-size: 0.95rem; }