/* ============================================================
   NAPIJ SE – style.css
   Barvy: #378ADD (hlavní), #185FA5 (tmavší), #E6F1FB (pozadí)
   Písmo: Nunito – přehledné, čitelné pro seniory
   ============================================================ */

/* ---- RESET & ZÁKLAD ---- */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}

html {
  height: 100%;
  font-size: 16px;
}

body {
  height: 100%;
  font-family: 'Nunito', 'Arial Rounded MT Bold', Arial, sans-serif;
  background-color: #E6F1FB;
  color: #1a3a5c;
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-font-smoothing: antialiased;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}

input, select {
  font-family: inherit;
}

/* ============================================================
   OBRAZOVKY – přechody
   ============================================================ */
.screen {
  position: fixed;
  inset: 0;
  overflow-y: auto;
  overflow-x: hidden;
  background: linear-gradient(155deg, #d8eeff 0%, #e2f2ff 55%, #edf7ff 100%);
  transition: opacity 0.28s ease, transform 0.28s ease;
  -webkit-overflow-scrolling: touch;
}

.screen.hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateX(24px);
}

/* ============================================================
   KONFETY
   ============================================================ */
#confetti-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

.confetti-piece {
  position: absolute;
  top: -16px;
  border-radius: 2px;
  animation: confetti-fall linear forwards;
}

@keyframes confetti-fall {
  0%   { transform: translateY(0)    rotate(0deg);   opacity: 1; }
  75%  {                                              opacity: 1; }
  100% { transform: translateY(105vh) rotate(780deg); opacity: 0; }
}

/* ============================================================
   OHŇOSTROJE
   ============================================================ */
#fireworks-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 9998;
}

.fw-trail {
  position: absolute;
  bottom: 8%;
  width: 2px;
  height: 16px;
  background: linear-gradient(to top, transparent, rgba(255,255,210,0.92));
  border-radius: 2px;
  transform: translateX(-50%);
  animation: fw-launch 0.38s ease-in forwards;
}
@keyframes fw-launch {
  0%   { transform: translateX(-50%) translateY(0);      opacity: 1; }
  100% { transform: translateX(-50%) translateY(-80vh);  opacity: 0; }
}

.fw-flash {
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  animation: fw-flash 0.40s ease-out forwards;
}
@keyframes fw-flash {
  0%   { transform: translate(-50%,-50%) scale(1);  opacity: 1; }
  100% { transform: translate(-50%,-50%) scale(14); opacity: 0; }
}

.fw-particle {
  position: absolute;
  border-radius: 50%;
  animation: fw-burst var(--dur, 0.75s) ease-out forwards;
}
@keyframes fw-burst {
  0%   { transform: translate(-50%,-50%) translate(0,0)                           scale(1.4); opacity: 1; }
  60%  {                                                                            opacity: 0.85; }
  100% { transform: translate(-50%,-50%) translate(var(--tx),var(--ty)) scale(0.05); opacity: 0; }
}

/* ============================================================
   TOAST
   ============================================================ */
.toast {
  position: fixed;
  top: 36%;
  left: 50%;
  transform: translateX(-50%) translateY(20px);
  background: #185FA5;
  color: white;
  padding: 18px 30px;
  border-radius: 50px;
  font-size: 1.45rem;
  font-weight: 700;
  box-shadow: 0 6px 20px rgba(24,95,165,0.40);
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  z-index: 500;
  transition: opacity 0.25s ease, transform 0.25s ease;
  max-width: 90vw;
  text-align: center;
  white-space: normal;
}

.toast.show {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* Poletující vosa po doušku */
.wasp {
  position: fixed;
  top: 0;
  left: 0;
  font-size: 30px;
  line-height: 1;
  z-index: 600;
  pointer-events: none;
  will-change: transform;
  filter: drop-shadow(0 2px 3px rgba(0,0,0,0.25));
}

/* ============================================================
   ONBOARDING
   ============================================================ */
#screen-onboarding {
  background: linear-gradient(155deg, #cce5ff 0%, #daeeff 45%, #e8f6ff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px 20px;
}

/* Dekorativní kruhy v pozadí */
.ob-bg-decoration { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.ob-circle {
  position: absolute;
  border-radius: 50%;
  background: rgba(55,138,221,0.10);
}
.ob-c1 { width: 280px; height: 280px; top: -80px;  right: -80px; }
.ob-c2 { width: 200px; height: 200px; bottom: -60px; left: -60px; }

.ob-container {
  position: relative;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

/* Logo */
.ob-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.ob-drop { width: 48px; height: 64px; filter: drop-shadow(0 4px 8px rgba(55,138,221,0.35)); }
.ob-logo-text {
  font-size: 2rem;
  font-weight: 900;
  color: #185FA5;
  letter-spacing: -0.5px;
}

.ob-welcome {
  font-size: 1.0rem;
  color: #4a6f9c;
  line-height: 1.5;
  margin-bottom: 28px;
}

/* Kroky */
.ob-step { display: none; }
.ob-step.active { display: block; animation: step-in 0.3s ease; }

@keyframes step-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}

.ob-step-icon { font-size: 3.5rem; margin-bottom: 10px; line-height: 1; }
.ob-question  { font-size: 1.5rem; font-weight: 800; color: #185FA5; margin-bottom: 6px; }
.ob-hint      { font-size: 0.95rem; color: #5a7fa8; margin-bottom: 22px; }

/* Číslový vstup s krokovači */
.ob-input-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-bottom: 18px;
}
.ob-stepper {
  width: 54px; height: 54px;
  border-radius: 50%;
  background: #378ADD;
  color: white;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 4px 12px rgba(55,138,221,0.35);
  transition: transform 0.1s ease, box-shadow 0.1s ease;
}
.ob-stepper:active { transform: scale(0.93); box-shadow: 0 2px 6px rgba(55,138,221,0.3); }

.ob-number-display {
  display: flex; align-items: baseline; gap: 4px;
}
.ob-number-input {
  width: 90px;
  font-size: 2.6rem;
  font-weight: 900;
  color: #185FA5;
  text-align: center;
  border: none;
  background: transparent;
  outline: none;
  -moz-appearance: textfield;
}
.ob-number-input::-webkit-outer-spin-button,
.ob-number-input::-webkit-inner-spin-button { -webkit-appearance: none; }
.ob-number-unit { font-size: 1.2rem; font-weight: 700; color: #4a7ab5; }

/* Výpočet doporučení */
.ob-calc-preview {
  background: white;
  border-radius: 14px;
  padding: 14px 20px;
  font-size: 1.05rem;
  color: #2c5282;
  margin-bottom: 24px;
  box-shadow: 0 2px 10px rgba(55,138,221,0.12);
}
.ob-calc-preview strong { color: #185FA5; font-size: 1.2rem; }
.ob-calc-formula { display: block; font-size: 0.8rem; color: #7a9cbe; margin-top: 4px; }

/* Časový vstup */
.ob-time-wrap { margin-bottom: 24px; }
.ob-time-input {
  font-size: 3rem;
  font-weight: 900;
  color: #185FA5;
  text-align: center;
  border: none;
  background: white;
  border-radius: 16px;
  padding: 16px 24px;
  box-shadow: 0 2px 12px rgba(55,138,221,0.14);
  outline: none;
  width: auto;
}

/* Tlačítka onboardingu */
.ob-btn-next {
  display: block;
  width: 100%;
  padding: 18px;
  font-size: 1.15rem;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg, #4a9ae8, #1a60aa);
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(55,138,221,0.28), 0 8px 24px rgba(55,138,221,0.20);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  margin-bottom: 10px;
  letter-spacing: 0.3px;
}
.ob-btn-next:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(55,138,221,0.3); }
.ob-btn-next.ob-btn-start { background: linear-gradient(135deg, #2ecc71, #1a9e55); box-shadow: 0 6px 20px rgba(30,180,80,0.38); }

.ob-btn-back {
  display: block;
  width: 100%;
  padding: 12px;
  font-size: 1rem;
  font-weight: 600;
  color: #5a7fa8;
  background: transparent;
}

/* Tečky průběhu */
.ob-dots {
  display: flex; gap: 10px;
  justify-content: center;
  margin-top: 24px;
}
.ob-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: rgba(55,138,221,0.25);
  transition: background 0.3s, transform 0.3s;
}
.ob-dot.active {
  background: #378ADD;
  transform: scale(1.3);
}

/* ============================================================
   HLAVNÍ OBRAZOVKA – HEADER
   ============================================================ */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  height: 62px;
  background: linear-gradient(135deg, #4a9ae8 0%, #2070c8 55%, #1456a8 100%);
  box-shadow: 0 4px 20px rgba(16,72,160,0.32), 0 1px 0 rgba(255,255,255,0.12) inset;
  position: sticky;
  top: 0;
  z-index: 100;
  flex-shrink: 0;
}

.logo {
  display: flex;
  align-items: center;
  gap: 10px;
}
.logo-drop { width: 32px; height: 42px; }
.logo-text  { font-size: 1.35rem; font-weight: 900; color: white; letter-spacing: -0.3px; }

.header-actions {
  display: flex;
  align-items: center;
  gap: 2px;
}

.header-icon-btn {
  width: 44px; height: 44px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 12px;
  color: rgba(255,255,255,0.88);
  transition: background 0.15s, color 0.2s;
}
.header-icon-btn svg { width: 22px; height: 22px; }

.header-mute-btn { position: relative; }
.header-mute-btn.muted { color: rgba(255,255,255,0.28); }
.header-mute-btn.muted::after {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 22px; height: 2px;
  background: rgba(255,100,100,0.85);
  transform: translate(-50%, -50%) rotate(-45deg);
  border-radius: 1px;
  pointer-events: none;
}
.header-icon-btn:active { background: rgba(255,255,255,0.15); }

/* Zlatá mince – podpora appky */
.header-coin-btn svg { filter: drop-shadow(0 1px 2px rgba(0,0,0,0.25)); }
.header-coin-btn { animation: coin-pulse 2.6s ease-in-out infinite; }
@keyframes coin-pulse {
  0%, 70%, 100% { transform: scale(1); }
  80%           { transform: scale(1.12); }
  90%           { transform: scale(0.97); }
}
@media (prefers-reduced-motion: reduce) {
  .header-coin-btn { animation: none; }
}

/* ---- Struktura hlavní obrazovky ---- */
#screen-main {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* ============================================================
   DENNÍ PŘEHLED (nad půllitrem)
   ============================================================ */
.daily-overview {
  background: white;
  margin: 14px 16px 0;
  border-radius: 22px;
  padding: 16px 20px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 10px 28px rgba(55,138,221,0.11);
  flex-shrink: 0;
}

.daily-numbers {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-bottom: 8px;
}
.daily-current {
  font-size: 2.2rem;
  font-weight: 900;
  color: #185FA5;
  line-height: 1;
}
.daily-sep {
  font-size: 1.4rem;
  color: #b0c8e8;
  font-weight: 600;
}
.daily-goal {
  font-size: 1.4rem;
  font-weight: 700;
  color: #6d9cc4;
}
.daily-unit {
  font-size: 1rem;
  font-weight: 600;
  color: #8ab2d4;
  margin-left: 2px;
}

.daily-progress-bar {
  height: 14px;
  background: #ddeeff;
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 6px;
}
.daily-progress-segments {
  display: flex;
  height: 100%;
  width: 100%;
}
.dp-seg {
  height: 100%;
  transition: width 0.7s cubic-bezier(0.34,1.10,0.64,1);
}

.daily-legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 6px 8px;
  margin: 2px 0 4px;
}
.dp-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  font-weight: 700;
  color: #5a7fa8;
  background: #eaf3fc;
  padding: 3px 10px;
  border-radius: 20px;
}
.dp-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}

.daily-pct {
  font-size: 0.85rem;
  font-weight: 600;
  color: #7a9dbf;
}

/* ============================================================
   VÝBĚR NÁPOJE – Cover Flow carousel
   ============================================================ */
.drink-carousel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin: 12px 16px 0;
  flex-shrink: 0;
}

.carousel-viewport {
  position: relative;
  flex: 1;
  height: 92px;
  perspective: 700px;
  overflow: hidden;
}

.carousel-track {
  position: absolute;
  inset: 0;
  transform-style: preserve-3d;
}

.drink-card {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 92px;
  height: 84px;
  margin-top: -42px;            /* vertikální vystředění */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  background: white;
  border-radius: 20px;
  box-shadow: 0 4px 14px rgba(55,138,221,0.16);
  transition: transform 0.35s cubic-bezier(0.34,1.10,0.64,1), opacity 0.35s ease;
  will-change: transform, opacity;
}

.drink-card.active {
  box-shadow: 0 6px 20px rgba(55,138,221,0.32);
  outline: 2.5px solid #378ADD;
}

.drink-emoji {
  font-size: 2rem;
  line-height: 1;
}

.drink-name {
  font-size: 0.72rem;
  font-weight: 700;
  color: #5a80a8;
  white-space: nowrap;
}
.drink-card.active .drink-name {
  color: #185FA5;
}

.carousel-arrow {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1;
  color: #378ADD;
  background: rgba(255,255,255,0.8);
  box-shadow: 0 2px 8px rgba(55,138,221,0.14);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, opacity 0.2s;
}
.carousel-arrow:active   { transform: scale(0.9); }
.carousel-arrow:disabled { opacity: 0.3; pointer-events: none; }

/* ============================================================
   OBLAST PŮLLITRU
   ============================================================ */
.mug-area {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 10px 16px 6px;
}

.mug-btn {
  background: none;
  padding: 0;
  border: none;
  display: block;
  /* Velká dotyková plocha pro seniory */
  outline: none;
}
.mug-btn:focus-visible .mug-wrap {
  outline: 3px solid #378ADD;
  outline-offset: 6px;
  border-radius: 16px;
}

.mug-wrap {
  position: relative;
  display: inline-block;
  transition: transform 0.12s ease;
}

.mug-svg {
  width: min(230px, 58vw);
  height: auto;
  display: block;
  filter: drop-shadow(0 14px 26px rgba(16,72,160,0.22));
}

/* Popisek VYBUMBÁNO/ml/počet – jemný stín kvůli čitelnosti i nad šálky (světlé pozadí) */
#mug-label { text-shadow: 0 1px 2px rgba(12,45,90,0.45); }

/* Animace po klepnutí */
.mug-wrap.bounce {
  animation: mug-bounce 0.55s cubic-bezier(0.36,0.07,0.19,0.97);
}
@keyframes mug-bounce {
  0%   { transform: translateY(0)   scale(1);    }
  18%  { transform: translateY(-22px) scale(0.94); }
  36%  { transform: translateY(-5px)  scale(1.04); }
  54%  { transform: translateY(-14px) scale(0.97); }
  72%  { transform: translateY(-2px)  scale(1.02); }
  100% { transform: translateY(0)   scale(1);    }
}

/* Animace vlny: mírné kolébání */
#water-wave {
  animation: wave-rock 3s ease-in-out infinite;
  transform-origin: 91px 150px;
}
@keyframes wave-rock {
  0%, 100% { transform: skewX(0deg); }
  50%       { transform: skewX(1.5deg); }
}

/* Vrstva bublinek */
.bubbles-layer, .drops-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  border-radius: 12px;
}

/* Bublinky */
.bubble {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(116,192,252,0.8);
  background: rgba(255,255,255,0.15);
  animation: bubble-rise 1.2s ease-out forwards;
}
@keyframes bubble-rise {
  0%   { transform: translateY(0)    scale(1);   opacity: 0.9; }
  60%  { transform: translateY(-80px) scale(1.1); opacity: 0.7; }
  100% { transform: translateY(-160px) scale(0.6); opacity: 0;   }
}

/* Živé bublinky v pivu (SVG kroužky) – stoupají hladinou nahoru ve smyčce */
.beer-bubble {
  fill: rgba(255, 255, 255, 0.7);
  animation-name: beerRise;
  animation-timing-function: linear;
  animation-iteration-count: infinite;
  will-change: transform, opacity;
}
@keyframes beerRise {
  0%   { transform: translateY(0); opacity: 0; }
  12%  { opacity: 0.85; }
  85%  { opacity: 0.55; }
  100% { transform: translateY(var(--rise, -180px)); opacity: 0; }
}

/* Kapičky vystřikující ven */
.drop {
  position: absolute;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: #74C0FC;
  animation: drop-fly 0.7s ease-out forwards;
}
@keyframes drop-fly {
  0%   { transform: translate(0, 0)        scale(1);   opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.3); opacity: 0; }
}

/* Checkmark splněného cíle */
.goal-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  /* padding-top posouvá obsah do dolní části sklenice
     (% je vůči šířce prvku, která = šířka mug-wrap ≈ 230px) */
  padding-top: 48%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.4s ease;
}
.goal-overlay.visible { opacity: 1; }

/* Wrapper nese perspective pro 3D efekt */
.goal-check-wrap {
  perspective: 320px;
}

.goal-check-svg {
  width: min(130px, 58%);
  height: auto;
  filter:
    drop-shadow(0 0 3px rgba(143,255,101,1))
    drop-shadow(0 0 10px rgba(143,255,101,0.45));
}

/* 3D spin – spustí se až PO dopadu (ne během pádu) */
.goal-overlay.visible:not(.animate) .goal-check-svg {
  animation: goal-spin 4s linear infinite;
}

/* Pád shora do sklenice */
.goal-overlay.animate .goal-check-wrap {
  animation: check-fall 0.90s ease-in-out both;
}

@keyframes goal-spin {
  0%   { transform: rotateY(0deg); }
  100% { transform: rotateY(-360deg); }
}

@keyframes check-fall {
  0%   { transform: translateY(-370px); opacity: 0; }
  10%  { opacity: 1; }
  68%  { transform: translateY(0);      opacity: 1; }
  78%  { transform: translateY(-22px); }
  87%  { transform: translateY(10px); }
  93%  { transform: translateY(-5px); }
  100% { transform: translateY(0); }
}

/* Motivační text */
.mug-hint {
  font-size: 1.0rem;
  font-weight: 600;
  color: #5a80a8;
  text-align: center;
  /* Posunuto o řádek výš – nápověda + Undo jako celek */
  margin-top: -14px;
  min-height: 24px;
  transition: opacity 0.3s;
}

/* Tlačítko zpět */
.undo-btn {
  display: block;
  margin: 8px auto 0;
  padding: 10px 28px;
  background: rgba(55,138,221,0.10);
  border: 2px solid rgba(55,138,221,0.30);
  border-radius: 28px;
  color: #185FA5;
  font-size: 1.0rem;
  font-weight: 700;
  transition: background 0.18s, transform 0.12s;
}
.undo-btn:active {
  background: rgba(55,138,221,0.22);
  transform: scale(0.96);
}
.undo-btn.hidden {
  display: none;
}

/* ============================================================
   PODHEADER (statistiky / nastavení)
   ============================================================ */
.sub-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  height: 58px;
  background: white;
  border-bottom: 1px solid rgba(55,138,221,0.12);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(55,138,221,0.08);
}
.back-btn {
  font-size: 1.0rem;
  font-weight: 700;
  color: #378ADD;
  padding: 8px 12px;
  border-radius: 10px;
  transition: background 0.15s;
  min-width: 80px;
}
.back-btn:active { background: #E6F1FB; }
.sub-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a3a5c;
}
.sub-spacer { min-width: 80px; }

/* ============================================================
   PODPORA APPKY (donate)
   ============================================================ */
.donate-scroll { padding: 18px 16px 40px; }

.donate-intro {
  font-size: 1.0rem;
  line-height: 1.5;
  color: #43617f;
  text-align: center;
  margin: 0 4px 18px;
}

.donate-card {
  background: white;
  border-radius: 22px;
  padding: 18px 18px 20px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 10px 28px rgba(55,138,221,0.11);
  margin-bottom: 16px;
}
.donate-card-title {
  font-size: 1.15rem;
  font-weight: 800;
  color: #1a3a5c;
  margin: 0 0 4px;
  text-align: center;
}
.donate-card-note {
  font-size: 0.9rem;
  color: #6a86a3;
  text-align: center;
  margin: 0 0 16px;
}

.donate-amounts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
  margin-bottom: 18px;
}
.donate-amount {
  flex: 1 1 0;
  min-width: 64px;
  padding: 12px 6px;
  border-radius: 14px;
  font-size: 1.0rem;
  font-weight: 800;
  color: #185FA5;
  background: #EAF3FC;
  border: 2px solid transparent;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.donate-amount.active {
  background: #185FA5;
  color: white;
}
.donate-amount:active { transform: scale(0.96); }
.donate-custom {
  flex: 1 0 100%;
  min-width: 0;
  padding: 12px 10px;
  border-radius: 14px;
  font-size: 1.0rem;
  font-weight: 700;
  text-align: center;
  color: #185FA5;
  background: #EAF3FC;
  border: 2px solid transparent;
}
.donate-custom:focus {
  outline: none;
  border-color: #378ADD;
  background: white;
}

.donate-qr {
  width: 230px;
  max-width: 70vw;
  margin: 0 auto 12px;
  background: white;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
.donate-qr svg { display: block; width: 100%; height: auto; }
.donate-acc {
  text-align: center;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  color: #43617f;
}

/* Tlačítka dalších metod */
.donate-method {
  display: flex;
  align-items: center;
  gap: 14px;
  background: white;
  border-radius: 18px;
  padding: 14px 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 8px 20px rgba(55,138,221,0.10);
  transition: transform 0.1s;
}
.donate-method:active { transform: scale(0.985); }
.donate-method-ico {
  flex-shrink: 0;
  width: 42px; height: 42px;
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.3rem;
  font-weight: 900;
  color: white;
}
.donate-revolut .donate-method-ico { background: #0066FF; }
.donate-paypal  .donate-method-ico { background: #003087; }
.donate-method-text { display: flex; flex-direction: column; flex: 1; }
.donate-method-text strong { font-size: 1.05rem; color: #1a3a5c; }
.donate-method-text small  { font-size: 0.85rem; color: #6a86a3; }
.donate-method-arrow { font-size: 1.6rem; color: #b6c8da; font-weight: 700; }

/* ============================================================
   STATISTIKY
   ============================================================ */
.stats-scroll { padding: 16px 16px 40px; }

/* Mřížka kartičky */
.stats-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}

.stat-card {
  background: white;
  border-radius: 20px;
  padding: 18px 16px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 8px 22px rgba(55,138,221,0.10);
  text-align: center;
}
.stat-card-full { grid-column: 1 / -1; }

.stat-card-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: #8ab0d4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.stat-card-value {
  font-size: 1.7rem;
  font-weight: 900;
  color: #185FA5;
  line-height: 1.1;
}
.stat-card-sub {
  font-size: 0.82rem;
  font-weight: 600;
  color: #7a9dbf;
  margin-top: 4px;
}

/* Graf */
.chart-card {
  background: white;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 8px 22px rgba(55,138,221,0.10);
  margin-bottom: 14px;
}
.chart-card-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8ab0d4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.chart-wrap { width: 100%; }
#week-chart { width: 100%; height: auto; }

/* Historie */
.history-card {
  background: white;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 8px 22px rgba(55,138,221,0.10);
}
.history-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8ab0d4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}

.history-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #EEF5FD;
  gap: 12px;
}
.history-row:last-child { border-bottom: none; }

.history-dot {
  width: 12px; height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.history-dot.goal-met     { background: #51CF66; }
.history-dot.goal-partial { background: #FCC419; }
.history-dot.goal-none    { background: #DEE2E6; }

.history-date {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c5282;
}
.history-amount {
  font-size: 0.95rem;
  font-weight: 700;
  color: #185FA5;
}
.history-pct {
  font-size: 0.8rem;
  font-weight: 600;
  color: #8ab0d4;
  min-width: 48px;
  text-align: right;
}

/* Dnešní rozpis nápojů */
.drinks-today-card {
  background: white;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 8px 22px rgba(55,138,221,0.10);
  margin-bottom: 14px;
}
.drinks-today-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: #8ab0d4;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
}
.drink-today-row {
  display: flex;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #EEF5FD;
  gap: 12px;
}
.drink-today-row:last-child { border-bottom: none; }
.drink-today-emoji {
  font-size: 1.4rem;
  line-height: 1;
  flex-shrink: 0;
}
.drink-today-name {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2c5282;
}
.drink-today-count {
  font-size: 0.9rem;
  font-weight: 700;
  color: #8ab0d4;
  min-width: 36px;
  text-align: right;
}
.drink-today-vol {
  font-size: 0.95rem;
  font-weight: 700;
  color: #185FA5;
  min-width: 72px;
  text-align: right;
}
.drinks-today-empty {
  font-size: 0.9rem;
  color: #8ab0d4;
  padding: 4px 0;
}

/* ============================================================
   NASTAVENÍ
   ============================================================ */
.settings-scroll {
  padding: 16px 16px 50px;
}

.settings-section {
  background: white;
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 2px 6px rgba(55,138,221,0.06), 0 8px 22px rgba(55,138,221,0.10);
  margin-bottom: 14px;
}
.settings-section-title {
  font-size: 0.9rem;
  font-weight: 800;
  color: #5a7fa8;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 14px;
}

.settings-section-note {
  font-size: 0.82rem;
  color: #8ab0d4;
  line-height: 1.5;
  margin: -6px 0 8px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 0;
  border-bottom: 1px solid #EEF5FD;
  gap: 12px;
}
.settings-row:last-child { border-bottom: none; }

.settings-row-label {
  font-size: 1.0rem;
  font-weight: 600;
  color: #1a3a5c;
  flex: 1;
}
.settings-row-label small { font-size: 0.78rem; color: #8ab0d4; display: block; }

.settings-row-right {
  display: flex;
  align-items: center;
  gap: 6px;
}
.settings-row-unit {
  font-size: 0.9rem;
  font-weight: 600;
  color: #8ab0d4;
}

.settings-input {
  font-size: 1.05rem;
  font-weight: 700;
  color: #185FA5;
  text-align: right;
  border: 1.5px solid #CDE2F8;
  border-radius: 10px;
  padding: 8px 10px;
  background: #F0F8FF;
  outline: none;
  width: 100px;
  transition: border-color 0.2s;
}
.settings-input:focus { border-color: #378ADD; }
.settings-input.settings-time { width: auto; min-width: 100px; }
.settings-input.settings-select {
  width: auto;
  min-width: 130px;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23378ADD' stroke-width='1.8' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  padding-right: 30px;
  text-align: left;
  cursor: pointer;
}

/* Notifikace stav */
.notif-status-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0 4px;
  gap: 12px;
}
.notif-status {
  font-size: 0.9rem;
  font-weight: 600;
  color: #8ab0d4;
  flex: 1;
}
.notif-status.granted { color: #2ecc71; }
.notif-status.denied  { color: #e74c3c; }

.notif-enable-btn {
  padding: 10px 16px;
  background: linear-gradient(135deg, #378ADD, #185FA5);
  color: white;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 700;
  box-shadow: 0 3px 10px rgba(55,138,221,0.30);
  transition: opacity 0.15s, transform 0.1s;
  white-space: nowrap;
}
.notif-enable-btn:active { transform: scale(0.96); }
.notif-enable-btn:disabled { opacity: 0.5; }

.notif-note {
  font-size: 0.82rem;
  color: #8ab0d4;
  padding: 8px 0 0;
  line-height: 1.5;
}

/* Toggle switch */
.toggle-switch {
  position: relative;
  display: inline-flex;
  width: 50px;
  height: 28px;
  cursor: pointer;
  flex-shrink: 0;
}
.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
  position: absolute;
}
.toggle-knob {
  position: absolute;
  inset: 0;
  background: #c8ddf0;
  border-radius: 28px;
  transition: background 0.22s;
}
.toggle-knob::before {
  content: '';
  position: absolute;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  top: 3px;
  left: 3px;
  box-shadow: 0 1px 5px rgba(0,0,0,0.22);
  transition: transform 0.22s;
}
.toggle-switch input:checked + .toggle-knob { background: #2878d4; }
.toggle-switch input:checked + .toggle-knob::before { transform: translateX(22px); }

/* Range slider */
.settings-slider {
  -webkit-appearance: none;
  appearance: none;
  width: 110px;
  height: 6px;
  border-radius: 6px;
  background: #c8ddf0;
  outline: none;
  cursor: pointer;
  accent-color: #2878d4;
}
.settings-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #2878d4;
  box-shadow: 0 1px 4px rgba(40,120,212,0.35);
  cursor: pointer;
}
.settings-slider::-moz-range-thumb {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: none;
  background: #2878d4;
  box-shadow: 0 1px 4px rgba(40,120,212,0.35);
  cursor: pointer;
}

/* Export / import dat */
.data-io-btns {
  display: flex;
  gap: 10px;
  margin-bottom: 10px;
}
.data-io-btn {
  flex: 1;
  padding: 12px 8px;
  font-size: 0.92rem;
  font-weight: 700;
  color: #185FA5;
  background: #EFF6FD;
  border: 1.5px solid #CDE2F8;
  border-radius: 12px;
  transition: background 0.15s, transform 0.1s;
}
.data-io-btn:active { background: #E0EEFA; transform: scale(0.98); }

/* Nebezpečné tlačítko */
.danger-btn {
  width: 100%;
  padding: 14px;
  font-size: 1.0rem;
  font-weight: 700;
  color: #e74c3c;
  background: #FFF5F5;
  border: 1.5px solid #FFD3D0;
  border-radius: 12px;
  transition: background 0.15s, transform 0.1s;
}
.danger-btn:active { background: #FFECEC; transform: scale(0.98); }

/* Uložit nastavení */
.save-btn {
  display: block;
  width: 100%;
  padding: 18px;
  font-size: 1.1rem;
  font-weight: 800;
  color: white;
  background: linear-gradient(135deg, #4a9ae8, #1a60aa);
  border-radius: 18px;
  box-shadow: 0 4px 12px rgba(55,138,221,0.28), 0 8px 24px rgba(55,138,221,0.20);
  transition: transform 0.15s, box-shadow 0.15s;
  letter-spacing: 0.3px;
  margin-top: 4px;
}
.save-btn:active { transform: scale(0.97); box-shadow: 0 3px 10px rgba(55,138,221,0.28); }

/* ============================================================
   MEDIQ (malé obrazovky)
   ============================================================ */
@media (max-height: 640px) {
  .mug-svg  { width: min(185px, 50vw); }
  .ob-step-icon { font-size: 2.5rem; }
  .ob-question  { font-size: 1.3rem; }
  .ob-time-input { font-size: 2.2rem; }
  .daily-current { font-size: 1.8rem; }
}

@media (max-height: 580px) {
  .mug-svg { width: min(160px, 44vw); }
  .daily-overview { padding: 10px 16px; }
}

/* ============================================================
   PŘÍSTUPNOST – zaostření klávesnicí
   ============================================================ */
:focus-visible {
  outline: 3px solid #378ADD;
  outline-offset: 3px;
  border-radius: 6px;
}

/* ============================================================
   SCROLLBAR styling (Chrome)
   ============================================================ */
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: rgba(55,138,221,0.25); border-radius: 4px; }

/* ============================================================
   PŘEPITÍ – stříkance a louže
   ============================================================ */
.mug-area {
  position: relative;
  background: radial-gradient(ellipse 60% 50% at 50% 48%, rgba(14,65,155,0.10) 0%, transparent 68%);
}

#puddle-wrap {
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  flex-shrink: 0;
}

#puddle {
  width: 0;
  height: 0;
  border-radius: 50%;
  background: radial-gradient(ellipse at center,
    rgba(116,192,252,0.65) 0%,
    rgba(55,138,221,0.32) 55%,
    transparent 100%
  );
  transition: width 0.7s cubic-bezier(0.34,1.10,0.64,1),
              height 0.5s ease-out;
}

#overdrink-splash-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.splash-drop {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #a8d8fc 0%, #378ADD 100%);
  animation: splash-fly var(--dur, 0.75s) ease-out forwards;
}

@keyframes splash-fly {
  0%   { transform: translate(0, 0) scale(1);   opacity: 0.95; }
  65%  {                                         opacity: 0.75; }
  100% { transform: translate(var(--tx), var(--ty)) scale(0.1); opacity: 0;   }
}

/* Červené probliknutí při přepití */
#overdrink-screen-flash {
  position: fixed;
  inset: 0;
  background: rgba(220, 38, 38, 0.28);
  pointer-events: none;
  opacity: 0;
  z-index: 800;
}
#overdrink-screen-flash.active {
  animation: overdrink-flash 0.50s ease-out forwards;
}
@keyframes overdrink-flash {
  0%   { opacity: 0.85; }
  40%  { opacity: 0.60; }
  100% { opacity: 0;    }
}