/* Cozy Water: a sibling of Cozy To-Do. Same wood frames and pixel buttons, in soft water blues.
   Everything is drawn with CSS and inline SVG (no images from any game). */

:root {
  --sky: #9fd3ee;
  --sky-deep: #4f8fbf;
  --lake: #2f6f9f;
  --lake-deep: #1d4a6e;
  --water: #4fa3dd;
  --water-light: #a9dcf5;
  --water-dark: #2a6797;
  --leaf: #6aa84f;
  --leaf-dark: #3f7a33;
  --gold: #e9b44c;
  --parchment: #f6ead0;
  --parchment-2: #ecdcb6;
  --paper-light: #fffaf0;
  --parchment-edge: #d6bd89;
  --wood: #8a5a33;
  --wood-light: #a8713f;
  --wood-dark: #5a3719;
  --wood-darker: #3b230f;
  --cream: #fff4dc;
  --ink: #3a2414;
  --ink-soft: #6b4a30;
  --ink-faded: #9b8267;
  --strike: #c1272d;
  --pixel-font: "Pixelify Sans", "Courier New", monospace;
  --text-font: "Nunito", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100dvh;
  font-family: var(--text-font);
  font-size: 17px;
  line-height: 1.4;
  color: var(--ink);
  background-color: var(--sky-deep);
  /* A soft sky fading into a lake, with faint pixel ripples */
  background-image:
    radial-gradient(circle at 12px 12px, rgba(255, 255, 255, 0.07) 2px, transparent 2.5px),
    radial-gradient(ellipse at 50% -10%, rgba(255, 240, 200, 0.35), transparent 55%),
    linear-gradient(180deg, var(--sky) 0%, var(--sky-deep) 55%, var(--lake) 100%);
  background-size: 24px 24px, 100% 100%, 100% 100%;
  background-attachment: fixed;
  -webkit-tap-highlight-color: transparent;
}

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

.pixel { font-family: var(--pixel-font); font-weight: 700; letter-spacing: 0.5px; }

/* ---------- Wood panel and parchment ---------- */

.wood {
  position: relative;
  color: var(--cream);
  background-color: var(--wood);
  background-image:
    repeating-linear-gradient(180deg, transparent 0 25px, rgba(40, 18, 4, 0.38) 25px 27px, rgba(255, 220, 170, 0.1) 27px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.035) 0 3px, transparent 3px 11px, rgba(0, 0, 0, 0.05) 11px 13px, transparent 13px 23px),
    linear-gradient(180deg, var(--wood-light), var(--wood) 60%, #7a4d2a);
  border-radius: 4px;
  box-shadow:
    0 0 0 3px var(--wood-darker),
    inset 0 3px 0 rgba(255, 210, 160, 0.25),
    inset 0 -4px 0 rgba(0, 0, 0, 0.25),
    0 7px 0 3px rgba(0, 0, 0, 0.28);
}

.parchment {
  position: relative;
  background:
    radial-gradient(ellipse at 18% 8%, rgba(255, 255, 255, 0.55), transparent 45%),
    radial-gradient(ellipse at 85% 95%, rgba(170, 115, 55, 0.2), transparent 55%),
    radial-gradient(circle at 65% 35%, rgba(190, 140, 70, 0.09), transparent 30%),
    var(--parchment);
  border-radius: 3px;
  box-shadow:
    inset 0 0 0 2px var(--parchment-edge),
    inset 0 0 30px rgba(150, 95, 40, 0.32),
    0 0 0 4px var(--wood-dark),
    0 0 0 8px var(--wood),
    0 0 0 11px var(--wood-darker),
    0 12px 0 11px rgba(0, 0, 0, 0.25);
}

/* ---------- Buttons (little pixel-cornered blocks) ---------- */

.btn {
  --face: var(--water);
  --edge: var(--water-dark);
  position: relative;
  min-height: 46px;
  padding: 0 18px;
  border: 0;
  border-radius: 0;
  font-family: var(--pixel-font);
  font-weight: 700;
  font-size: 16px;
  letter-spacing: 0.5px;
  color: var(--cream);
  background: var(--face);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
  box-shadow:
    0 -3px 0 0 var(--wood-darker), 0 3px 0 0 var(--wood-darker),
    -3px 0 0 0 var(--wood-darker), 3px 0 0 0 var(--wood-darker),
    inset 0 -4px 0 var(--edge), inset 0 3px 0 rgba(255, 255, 255, 0.22);
  transition: transform 0.08s, filter 0.15s;
}
.btn:hover { filter: brightness(1.08); }
.btn:active { transform: translateY(2px); box-shadow: 0 -3px 0 0 var(--wood-darker), 0 3px 0 0 var(--wood-darker), -3px 0 0 0 var(--wood-darker), 3px 0 0 0 var(--wood-darker), inset 0 -1px 0 var(--edge); }
.btn:disabled { filter: grayscale(0.6) opacity(0.55); cursor: default; transform: none; }
.btn-green { --face: var(--leaf); --edge: var(--leaf-dark); }
.btn-wood { --face: var(--wood-light); --edge: var(--wood-dark); }
.btn-small { min-height: 40px; padding: 0 14px; font-size: 14px; }

.icon-btn {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  border-radius: 6px;
  color: var(--cream);
}
.icon-btn:hover { background: rgba(0, 0, 0, 0.15); }
.icon-btn svg { width: 26px; height: 26px; shape-rendering: crispEdges; }

:focus-visible { outline: 3px solid var(--gold); outline-offset: 2px; }

/* ---------- Layout ---------- */

.app {
  position: relative;
  z-index: 1;
  max-width: 560px;
  margin: 0 auto;
  padding: calc(14px + env(safe-area-inset-top)) 16px calc(32px + env(safe-area-inset-bottom));
}

.topbar {
  z-index: 10;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 10px 10px 18px;
  margin: 3px 3px 22px;
}
.topbar h1 {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: clamp(22px, 6vw, 28px);
  color: var(--cream);
  text-shadow: 2px 2px 0 var(--wood-darker);
}
.topbar h1 svg { width: 28px; height: 28px; flex: none; shape-rendering: crispEdges; }
.top-actions { display: flex; align-items: center; gap: 2px; position: relative; }

.sync { width: 12px; height: 12px; margin: 0 8px; background: #7fc46b; box-shadow: 0 0 0 2px var(--wood-darker); transition: background 0.2s; }
.sync[data-state="saving"] { background: var(--gold); }
.sync[data-state="offline"] { background: #d9483b; }

.menu {
  position: absolute;
  top: 52px;
  right: 0;
  z-index: 20;
  min-width: 210px;
  padding: 8px;
  display: grid;
  gap: 4px;
}
.menu button {
  min-height: 44px;
  padding: 0 14px;
  text-align: left;
  border: 0;
  background: transparent;
  color: var(--cream);
  font-weight: 700;
  border-radius: 4px;
}
.menu button:hover, .menu button:focus-visible { background: rgba(0, 0, 0, 0.2); }

/* ---------- Tabs (at the bottom on phones, so your thumb reaches them) ---------- */

.tabs {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 15;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 22px 19px calc(12px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, transparent, rgba(29, 74, 110, 0.92) 40%);
}
.tab {
  --face: var(--wood);
  --edge: var(--wood-dark);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 54px;
  padding: 0 6px;
  font-size: 16px;
}
.tab svg { width: 22px; height: 22px; flex: none; shape-rendering: crispEdges; }
.tab[aria-selected="true"] { --face: var(--water); --edge: var(--water-dark); }
.app { padding-bottom: calc(110px + env(safe-area-inset-bottom)); }

/* ---------- Panels ---------- */

.board { margin: 0 11px 26px; padding: 18px 16px 16px; }

.panel-title {
  margin: 2px 0 14px;
  font-size: 22px;
  color: var(--water-dark);
  text-align: center;
}
.panel-title::before, .panel-title::after { content: "~"; margin: 0 10px; color: var(--ink-faded); }

.field {
  width: 100%;
  min-height: 48px;
  padding: 10px 14px;
  border: 0;
  border-radius: 2px;
  background: var(--paper-light);
  color: var(--ink);
  box-shadow: inset 0 0 0 2px var(--parchment-edge), inset 0 3px 0 rgba(120, 80, 40, 0.12);
}
.field:focus { outline: none; box-shadow: inset 0 0 0 3px var(--water), inset 0 3px 0 rgba(120, 80, 40, 0.12); }
select.field {
  appearance: none;
  padding-right: 34px;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-soft) 50%), linear-gradient(-45deg, transparent 50%, var(--ink-soft) 50%);
  background-position: right 18px center, right 12px center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  background-color: var(--paper-light);
  font-weight: 700;
}

.empty { margin: 18px 8px; text-align: center; color: var(--ink-soft); font-style: italic; }
.hint { margin: 12px 0 0; font-size: 14px; color: var(--ink-soft); }

/* ---------- Today ---------- */

.today-summary { margin: 6px 0 16px; text-align: center; font-weight: 700; color: var(--ink-soft); }
.today-summary strong { font-family: var(--pixel-font); font-size: 22px; color: var(--water-dark); }

/* Bottle slots: one pixel bottle per bottle of today's goal */
.slots { display: flex; justify-content: center; align-items: flex-end; gap: clamp(6px, 3vw, 16px); margin: 4px 0 2px; }
.slot { position: relative; display: grid; justify-items: center; gap: 4px; width: clamp(54px, 17vw, 72px); }
.slot svg { width: 100%; height: auto; shape-rendering: crispEdges; overflow: visible; }
.slot .water { transform: translateY(18px); transition: transform 0.9s cubic-bezier(0.3, 0.7, 0.4, 1); }
.slot.full .water { transform: translateY(0); }
.slot:not(.full) svg { opacity: 0.85; }
.slot-time { font-family: var(--pixel-font); font-size: 15px; color: var(--ink-soft); white-space: nowrap; }
.slot:not(.full) .slot-time { color: var(--ink-faded); }
.slot.late .slot-time { color: #b5651d; }

/* The little gold star on a bottle finished before its checkpoint */
.slot .sparkle { position: absolute; top: -8px; right: -6px; width: 24px; height: 24px; shape-rendering: crispEdges; opacity: 0; transform: scale(0.4); transition: opacity 0.3s, transform 0.3s; pointer-events: none; }
.slot.on-time .sparkle { opacity: 1; transform: scale(1); }
.slot.on-time.twinkle .sparkle { animation: twinkle 1.1s ease-out 0.6s both; }
@keyframes twinkle {
  0% { opacity: 0; transform: scale(0.2) rotate(-40deg); }
  45% { opacity: 1; transform: scale(1.6) rotate(10deg); }
  70% { transform: scale(0.85) rotate(0deg); }
  100% { opacity: 1; transform: scale(1); }
}

/* Status line: how today is going against the checkpoints */
.status {
  margin: 0 0 14px;
  padding: 9px 12px;
  border-radius: 2px;
  text-align: center;
  font-weight: 800;
  font-size: 15.5px;
  color: var(--ink);
  background: var(--water-light);
  box-shadow: inset 0 0 0 2px rgba(42, 103, 151, 0.35);
}
.status[data-status="ahead"], .status[data-status="done"] { background: #d4ecc4; box-shadow: inset 0 0 0 2px rgba(63, 122, 51, 0.4); }
.status[data-status="behind"] { background: #f8ddb0; box-shadow: inset 0 0 0 2px rgba(181, 101, 29, 0.45); }

.streak-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: -4px 0 14px; }
.chip-wood {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  border-radius: 2px;
  font-weight: 800;
  font-size: 14px;
  color: var(--cream);
  background: var(--wood);
  box-shadow: 0 0 0 2px var(--wood-darker), inset 0 2px 0 rgba(255, 210, 160, 0.25);
}
.chip-wood svg { width: 16px; height: 16px; shape-rendering: crispEdges; }
.chip-wood.used { opacity: 0.6; }
.bonus {
  align-self: center;
  padding: 4px 8px;
  border-radius: 2px;
  font-family: var(--pixel-font);
  font-size: 15px;
  color: var(--cream);
  background: var(--leaf);
  box-shadow: 0 0 0 2px var(--leaf-dark);
}

.drink-btn {
  width: 100%;
  min-height: 84px;
  font-size: 24px;
  overflow: hidden;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}
.drink-label { position: relative; }
/* While you hold the button, a darker bar fills it; when full, the last bottle is removed */
.hold-bar { position: absolute; inset: 0; background: rgba(20, 50, 80, 0.35); transform: scaleX(0); transform-origin: left; }
.drink-btn.holding .hold-bar { transform: scaleX(1); transition: transform 0.7s linear; }
.drink-hint { margin: 10px 0 0; text-align: center; font-size: 13.5px; color: var(--ink-faded); }

.today-links { display: flex; justify-content: center; gap: 8px; margin-top: 6px; }
.link-btn {
  min-height: 44px;
  padding: 0 12px;
  border: 0;
  background: none;
  font-weight: 800;
  color: var(--water-dark);
  text-decoration: underline;
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
  text-decoration-color: rgba(42, 103, 151, 0.35);
}

.log-list { list-style: none; margin: 6px 0 0; padding: 0; }
.log-row {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 4px 4px 4px 8px;
  border-bottom: 2px dashed rgba(107, 74, 48, 0.18);
  font-weight: 700;
}
.log-row .time { font-family: var(--pixel-font); font-size: 18px; color: var(--water-dark); min-width: 58px; }
.log-row .what { flex: 1; color: var(--ink-soft); }
.log-row .undo { min-height: 40px; padding: 0 12px; border: 0; border-radius: 2px; font-weight: 800; color: var(--ink-soft); background: var(--parchment-2); box-shadow: inset 0 0 0 2px var(--parchment-edge); }

/* ---------- Settings ---------- */

.setting { padding: 12px 0; border-bottom: 2px dashed rgba(107, 74, 48, 0.18); }
.setting:last-child { border-bottom: 0; }
.setting h3 { margin: 0 0 4px; font-size: 16px; font-weight: 800; color: var(--ink); }
.setting p { margin: 0; font-size: 15px; color: var(--ink-soft); }
.setting .row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 10px; }

.stepper { display: inline-flex; align-items: center; gap: 12px; }
.stepper .btn { width: 46px; padding: 0; font-size: 22px; }
.stepper output { min-width: 96px; text-align: center; font-weight: 800; }
.stepper output strong { display: block; font-family: var(--pixel-font); font-size: 24px; line-height: 1.1; color: var(--water-dark); }

/* ---------- Dialogs ---------- */

dialog {
  width: min(420px, calc(100vw - 48px));
  max-height: calc(100dvh - 60px);
  padding: 22px 20px 20px;
  border: 0;
  color: var(--ink);
  overflow: auto;
}
dialog::backdrop { background: rgba(12, 30, 48, 0.6); }
dialog h2 { margin: 0 0 4px; font-size: 22px; color: var(--water-dark); }
dialog label { display: block; margin: 16px 0 6px; font-weight: 800; color: var(--ink-soft); font-size: 15px; }
.dialog-intro { margin: 0 0 14px; }
.dialog-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 12px; }
.dialog-actions .spacer { flex: 1; }

.seg { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 6px; }
.seg button {
  min-height: 46px;
  border: 0;
  border-radius: 2px;
  font-weight: 800;
  color: var(--ink-soft);
  background: var(--parchment-2);
  box-shadow: inset 0 0 0 2px var(--parchment-edge);
}
.seg button[aria-checked="true"] { color: var(--cream); background: var(--water); box-shadow: inset 0 0 0 2px var(--water-dark), inset 0 -3px 0 rgba(0, 0, 0, 0.2); }

/* ---------- Toast ---------- */

.toast {
  position: fixed;
  inset: auto auto calc(100px + env(safe-area-inset-bottom)) 50%;
  margin: 0;
  border: 0;
  width: max-content;
  z-index: 50;
  max-width: min(420px, calc(100vw - 40px));
  padding: 12px 18px;
  font-weight: 700;
  transform: translate(-50%, 40px);
  opacity: 0;
  visibility: hidden;
  transition: transform 0.25s ease, opacity 0.25s, visibility 0s 0.25s;
  pointer-events: none;
}
.toast.show { transform: translate(-50%, 0); opacity: 1; visibility: visible; transition: transform 0.25s ease, opacity 0.25s; }
.toast.show.has-action { pointer-events: auto; display: flex; align-items: center; gap: 14px; }
.toast:not(.has-action) .toast-action { display: none; }
.toast-action {
  min-height: 40px;
  padding: 0 14px;
  border: 0;
  font-family: var(--pixel-font);
  font-weight: 700;
  color: var(--wood-darker);
  background: var(--gold);
  box-shadow: 0 0 0 2px var(--wood-darker), inset 0 -3px 0 rgba(0, 0, 0, 0.2);
}

/* ---------- Login ---------- */

.login-wrap {
  position: relative;
  z-index: 1;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  place-items: center;
  padding: 24px 16px;
}
.login-card { width: min(400px, 100%); padding: 26px 22px 24px; }
.login-card h1 { margin: 0 0 6px; text-align: center; font-size: 28px; color: var(--water-dark); }
.login-card p { margin: 0 0 8px; text-align: center; color: var(--ink-soft); }
.login-card .btn { width: 100%; margin-top: 22px; }
.error { min-height: 1.4em; margin: 12px 0 0; color: var(--strike); font-weight: 700; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

.cp-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 12px; margin-top: 10px; }
.cp-grid label { display: grid; gap: 4px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.cp-actions { grid-column: 1 / -1; display: flex; align-items: center; gap: 8px; }

/* ---------- Plant companion ---------- */

.garden { display: grid; grid-template-columns: 112px 1fr; align-items: center; gap: 12px; margin: -2px 0 14px; }
.plant {
  position: relative;
  height: 112px;
  border-radius: 2px;
  background:
    linear-gradient(180deg, transparent 80%, var(--wood-light) 80%, var(--wood) 86%, var(--wood-dark) 100%),
    radial-gradient(ellipse at 50% 30%, rgba(255, 244, 200, 0.75), transparent 70%),
    var(--water-light);
  box-shadow: inset 0 0 0 2px var(--parchment-edge), 0 0 0 3px var(--wood-dark);
  overflow: hidden;
}
.plant svg { position: absolute; left: 8px; bottom: 6px; width: 96px; height: 96px; shape-rendering: crispEdges; }
.plant-body { transform-origin: 16px 23px; animation: sway 5s ease-in-out infinite; }
.plant .leaf { transition: transform 1.4s ease; }
.plant[data-mood="droopy"] .leaf { transform: rotate(calc(var(--dir) * 30deg)); }
.plant[data-mood="droopy"] .plant-body { animation: none; filter: saturate(0.55) sepia(0.3); }
.plant[data-mood="thriving"] .plant-body { animation-duration: 3.2s; filter: saturate(1.2) brightness(1.05); }
/* Floating sparkles when the plant is thriving or celebrating */
.plant[data-mood="thriving"]::before, .plant[data-mood="thriving"]::after, .plant.celebrate::before, .plant.celebrate::after {
  content: "";
  position: absolute;
  width: 4px;
  height: 4px;
  background: #ffd34d;
  box-shadow: 0 0 0 1px #fff6c4;
  animation: float-up 2.6s ease-in infinite;
}
.plant::before { left: 22px; bottom: 40px; }
.plant::after { right: 24px; bottom: 54px; animation-delay: 1.3s !important; }
.plant.celebrate .plant-body { animation: wiggle 0.5s ease-in-out 3; }
@keyframes sway { 0%, 100% { transform: rotate(-2deg); } 50% { transform: rotate(2deg); } }
@keyframes wiggle { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-6deg) scale(1.04); } 75% { transform: rotate(6deg) scale(1.04); } }
@keyframes float-up { 0% { opacity: 0; transform: translateY(0); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-44px); } }

.garden-info { min-width: 0; }
.garden-info p { margin: 0; }
.plant-name { font-size: 19px; color: var(--leaf-dark); }
.plant-mood { font-weight: 800; font-size: 15px; color: var(--ink); }
.plant-growth { font-size: 13.5px; color: var(--ink-soft); }
.garden .streak-row { justify-content: flex-start; margin: 8px 0 0; gap: 6px; }
.garden .chip-wood { font-size: 13px; padding: 4px 8px; }

/* ---------- Pour animation ---------- */

.slot .drops, .slot .splash { opacity: 0; }
.slot.pouring .drops { opacity: 1; }
.slot.pouring .drops rect { animation: drop-fall 0.55s ease-in both; }
.slot.pouring .drops .d2 { animation-delay: 0.18s; }
.slot.pouring .drops .d3 { animation-delay: 0.36s; }
.slot.pouring .splash { animation: splash 0.6s ease-out 0.85s both; }
.slot.pouring svg { animation: hop 0.45s ease-out 0.95s; }
@keyframes drop-fall { 0% { transform: translateY(-6px); opacity: 0; } 20% { opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes splash { 0% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-5px); } }
@keyframes hop { 0%, 100% { transform: translateY(0) scale(1, 1); } 30% { transform: scale(1.08, 0.92); } 60% { transform: translateY(-6px) scale(0.96, 1.04); } }

/* ---------- Drifting clouds behind everything ---------- */

.sky { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.cloud {
  position: absolute;
  left: -160px;
  width: 64px;
  height: 16px;
  background: rgba(255, 255, 255, 0.7);
  box-shadow: 16px -8px 0 rgba(255, 255, 255, 0.7), 32px -8px 0 rgba(255, 255, 255, 0.7), 40px 0 0 rgba(255, 255, 255, 0.7);
  animation: drift 90s linear infinite;
}
.cloud.c1 { top: 9%; }
.cloud.c2 { top: 30%; scale: 0.7; animation-duration: 130s; animation-delay: -60s; opacity: 0.8; }
.cloud.c3 { top: 58%; scale: 1.3; animation-duration: 160s; animation-delay: -110s; opacity: 0.5; }
@keyframes drift { to { left: calc(100% + 160px); } }

/* ---------- Stats ---------- */

.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 12px; margin: 4px 3px 22px; }
.tile { padding: 10px 10px 9px; text-align: center; }
.tile .value { display: block; font-family: var(--pixel-font); font-weight: 700; font-size: 26px; line-height: 1.1; text-shadow: 2px 2px 0 var(--wood-darker); }
.tile .value small { font-size: 15px; }
.tile .label { display: block; margin-top: 3px; font-size: 13px; font-weight: 800; color: #f3dcc0; }
.tile .sub { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 700; color: #e9cfae; }
.tile .up { color: #b8f09a; }
.tile .down { color: #ffc8a0; }

.stats-head { margin: 18px 0 8px; font-size: 18px; color: var(--water-dark); }

.heatmap-wrap { display: grid; grid-template-columns: auto 1fr; gap: 4px 6px; }
.heat-days { display: grid; grid-template-rows: repeat(7, 1fr); gap: 3px; font-size: 10.5px; font-weight: 800; color: var(--ink-faded); line-height: 1; align-items: center; padding-top: 16px; }
.heat-main { min-width: 0; }
.heat-months { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; height: 14px; margin-bottom: 2px; font-size: 10.5px; font-weight: 800; color: var(--ink-soft); white-space: nowrap; }
.heatmap { display: grid; grid-template-rows: repeat(7, auto); grid-auto-flow: column; grid-auto-columns: 1fr; gap: 3px; }
.cell { display: block; aspect-ratio: 1; min-width: 8px; padding: 0; border: 0; border-radius: 2px; background: var(--parchment-2); box-shadow: inset 0 0 0 1px rgba(107, 74, 48, 0.15); }
.cell.none { background: transparent; box-shadow: inset 0 0 0 1px rgba(107, 74, 48, 0.08); }
.cell.l1 { background: #cde9f6; }
.cell.l2 { background: #8cc8ea; }
.cell.l3 { background: var(--water); }
.cell.l4 { background: var(--water-dark); }
.cell.frozen { box-shadow: inset 0 0 0 2px #7fb6d9; background-image: radial-gradient(circle, #fff 1.5px, transparent 2px); }
.cell.today { outline: 2px solid var(--wood-dark); outline-offset: 0; }
.cell.selected { outline: 2px solid var(--gold); outline-offset: 1px; }
button.cell { cursor: pointer; }
.day-detail { min-height: 1.4em; margin: 10px 0 6px; font-weight: 700; font-size: 14.5px; color: var(--ink); }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 12.5px; font-weight: 700; color: var(--ink-soft); }
.legend .cell { width: 12px; min-width: 12px; }
.legend .cell.frozen { margin-left: 12px; }

.export-intro { margin: -2px 0 12px; }
.export-row { display: grid; grid-template-columns: 1fr auto auto; gap: 12px; }
.export-row a.btn { display: grid; place-items: center; text-decoration: none; }

/* ---------- Reminders ---------- */

.quiet-row { display: grid; grid-template-columns: 1fr 1fr; align-items: end; gap: 10px; margin-top: 12px; }
.quiet-row .btn { grid-column: 1 / -1; justify-self: start; }
.quiet-row label { display: grid; gap: 4px; font-size: 14px; font-weight: 800; color: var(--ink-soft); }
.on-line { margin: 8px 0 0 !important; font-weight: 800; color: var(--leaf-dark) !important; }