/* Keeper: Lofi Seaside look (SPEC.md section 10) */
@font-face { font-family: Nunito; font-weight: 400; font-display: swap; src: url(/fonts/nunito-latin-400-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 700; font-display: swap; src: url(/fonts/nunito-latin-700-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 800; font-display: swap; src: url(/fonts/nunito-latin-800-normal.woff2) format('woff2'); }
@font-face { font-family: Nunito; font-weight: 900; font-display: swap; src: url(/fonts/nunito-latin-900-normal.woff2) format('woff2'); }

:root {
  --sand: #F3E3C3;
  --card: #FBF1DC;
  --card-2: #F7E8CB;
  --line: #E6D3AE;
  --ink: #1E2A3A;
  --ink-2: #4A5566;
  --ink-3: #5E6676; /* 5:1 on the cream cards (was #7D8594, 3.2:1) */
  --coral: #FF6B4A;
  --coral-soft: #FAD3C4;
  --gold: #F4B860;
  --water: #4F8FD9;
  --track: #EAD8B6;
  --good: #3E9C6B;
  --r-card: 18px;
  --shadow: 0 1px 0 rgba(255, 255, 255, .7) inset, 0 8px 22px rgba(118, 78, 30, .13);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --tabs-h: 64px;
  --px: calc(4px / 3); /* one art pixel = 4 device pixels on a 3x iPhone */
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--sand); }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: Nunito, ui-rounded, system-ui, sans-serif;
  color: var(--ink);
  background: linear-gradient(180deg, #F8EDD8 0, var(--sand) 320px) no-repeat;
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
img.pixel, .pixel { image-rendering: pixelated; image-rendering: crisp-edges; }
[hidden] { display: none !important; }

#app {
  min-height: 100%;
  padding: calc(var(--safe-top) + 10px) 16px calc(var(--tabs-h) + var(--safe-bottom) + 24px);
  max-width: 480px;
  margin: 0 auto;
}
/* Screens pushed from Home (Town, Tide, Debrief) have no tab bar */
body.pushed #app { padding-bottom: calc(var(--safe-bottom) + 32px); }
/* No tab bar on pushed screens: the page fades into the sand before the home bar, so no line of text sits under it. */
body.pushed::after { content: ''; position: fixed; left: 0; right: 0; bottom: 0; height: calc(var(--safe-bottom) + 20px); background: linear-gradient(#f3e3c300, var(--sand) 55%); pointer-events: none; z-index: 20; }

/* ---------- header ---------- */
.top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 6px 2px 10px; }
.title { font-size: 40px; line-height: 1; font-weight: 900; letter-spacing: .5px; margin: 0; }
.title-sm { font-size: 30px; }
.title.coral { color: var(--coral); }
.streak { display: flex; align-items: center; gap: 6px; font-weight: 800; font-size: 17px; padding-bottom: 4px; }
.streak svg { width: 20px; height: 28px; }
.streak .flame { display: inline-grid; position: relative; top: -2px; } /* centre the flame on the text, not the baseline */
.streak .flame img.px-ico { height: 28px; width: auto; }
/* Banked shields sit after the streak as a small chip, so the shield never reads as the streak's own icon. */
.shields { display: inline-flex; align-items: center; gap: 2px; margin-left: 4px; padding: 3px 7px 3px 5px; border-radius: 12px; background: var(--card); box-shadow: inset 0 0 0 1.5px #E5D6BC; font-size: 13px; }
.shields img.px-ico { height: 18px; width: auto; }
.sub { color: var(--ink-3); font-weight: 700; font-size: 14px; }

/* ---------- calorie pill (two text layers so the words stay readable over the fill edge) ---------- */
.pill {
  position: relative; height: 42px; border-radius: 21px; background: var(--coral-soft); overflow: hidden;
  box-shadow: inset 0 0 0 2px rgba(255, 107, 74, .22);
}
.pill .fill { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #FF7D5F, var(--coral)); border-radius: 21px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.pill .label { position: absolute; top: 0; bottom: 0; display: flex; align-items: center; font-weight: 800; font-size: 17px; color: var(--ink); white-space: nowrap; }
.pill .label.in { left: 18px; color: #FFF8EE; }
.pill .label b { font-weight: 900; }

/* ---------- boardwalk scene ---------- */
.scene {
  position: relative; margin: 12px -16px 0; height: 196px; overflow: hidden;
  background: #F6C99B url(/art/scene-boardwalk.png) no-repeat;
  background-size: 400px 299px;
  background-position: center 48%; /* keeps the lighthouse top and the sun's reflection in the shorter scene */
  image-rendering: pixelated;
}
/* Keeper stands at twice the scene's pixel size, legs cropped by the card like the mockup */
.scene .keeper { position: absolute; bottom: -84px; left: 9%; height: calc(94 * var(--px) * 2); image-rendering: pixelated; transform-origin: bottom center; animation: breathe 3.2s ease-in-out infinite; }
.scene .keeper.cheer { height: calc(96 * var(--px) * 2); }
.scene .keeper.cheer + .bubble { left: calc(9% + 140px); } /* the cheer pose is wider: keep the bubble off his fist */
@keyframes breathe { 0%, 100% { transform: scaleY(1); } 50% { transform: scaleY(1.012); } }
.bubble {
  position: absolute; left: calc(9% + 108px); top: 26px; max-width: 200px;
  background: #FFF8EA; border: 2px solid var(--ink); border-radius: 14px; padding: 8px 12px;
  font-weight: 800; font-size: 15px; line-height: 1.25; box-shadow: 0 3px 0 rgba(30, 42, 58, .18);
  animation: pop .35s cubic-bezier(.2, 1.4, .4, 1) both;
}
.bubble::after {
  content: ''; position: absolute; left: -9px; bottom: 12px; width: 14px; height: 14px;
  background: #FFF8EA; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); transform: rotate(45deg) skew(8deg, 8deg);
}
@keyframes pop { from { transform: scale(.7); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 14px 16px; }
.card + .card, .card + .section, .section + .card { margin-top: 14px; }
.overlap { position: relative; margin-top: -26px; }
.row { display: flex; align-items: center; gap: 12px; }
.row + .row { margin-top: 14px; }
.row .grow { flex: 1; min-width: 0; }
.ico { width: 36px; height: 34px; flex: none; display: grid; place-items: center; }
.ico svg { width: 24px; height: 24px; }
img.px-ico { width: auto; height: auto; image-rendering: pixelated; flex: none; }
.lbl { font-weight: 900; font-size: 16px; letter-spacing: .6px; text-transform: uppercase; }
.val { font-weight: 800; font-size: 17px; white-space: nowrap; }
.val.big { font-size: 22px; font-weight: 900; }
.val small { font-weight: 700; color: var(--ink-2); font-size: 15px; }
.bar { height: 9px; border-radius: 5px; background: var(--track); overflow: hidden; margin-top: 7px; }
.bar > i { display: block; height: 100%; width: 0; background: var(--coral); border-radius: 5px; transition: width .6s cubic-bezier(.2, .8, .2, 1); }
.divider { height: 1px; background: var(--line); margin: 12px 0; }

/* water cups */
.cups { display: flex; justify-content: space-between; gap: 0; margin: 6px 0 0; }
.stats { padding: 12px 16px; }
.stats .row + .row { margin-top: 12px; }
.cup { width: 26px; height: 30px; padding: 0; border: 0; background: none; display: grid; place-items: center; }
.cup svg { width: 24px; height: 24px; }
.cup:active { transform: scale(.9); }

/* ---------- padlock ---------- */
.lock-card { text-align: center; padding: 18px 16px 16px; position: relative; overflow: hidden; }
.lock-card .lock { height: calc(52 * var(--px) * 1.25); image-rendering: pixelated; display: block; margin: 0 auto 4px; }
.lock-wrap { position: relative; display: block; width: fit-content; margin: 0 auto; }
/* Home: a compact lock card, so lock, ribbon and goals all sit above the tab bar */
.lock-card.compact { padding: 12px 10px 10px; }
.lock-card.compact .lock { height: calc(52 * var(--px)); margin-bottom: 0; }
.lock-card.compact .goal-icons { margin-top: 8px; }
/* Log: the padlock sits in its own card, so the fold cuts a card edge, never a loose shackle */
.lock-card.float { background: var(--card); border: 1px solid var(--line); border-radius: var(--r-card); box-shadow: var(--shadow); padding: 16px 16px 18px; margin-top: 10px; overflow: visible; }
.spark { position: absolute; width: 14px; height: 14px; display: none; animation: twinkle 1.4s steps(1) infinite; }
.spark svg { display: block; width: 100%; height: 100%; }
.locked .spark { display: block; }
.spark.s1 { left: -26px; top: 8px; }
.spark.s2 { right: -30px; top: -4px; width: 21px; height: 21px; animation-delay: .35s; }
.spark.s3 { left: -16px; bottom: 8px; width: 7px; height: 7px; animation-delay: .7s; }
.spark.s4 { right: -18px; bottom: 18px; width: 7px; height: 7px; animation-delay: 1.05s; }
@keyframes twinkle { 0%, 60% { opacity: 1; } 61%, 100% { opacity: .25; } }
.lock-card .lock.click { animation: click .5s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes click { 0% { transform: scale(1); } 35% { transform: scale(1.18) rotate(-4deg); } 100% { transform: scale(1) rotate(0); } }
.ribbon {
  --band: #FF6F59; --fold: #C94F3D;
  position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center;
  height: 32px; box-sizing: border-box; margin: 6px 16px 4px; padding: 0 14px;
  font-weight: 900; font-size: 15px; letter-spacing: .8px; color: #FFF8EE;
  background: var(--band); box-shadow: inset 0 -3px var(--fold);
}
.ribbon::before, .ribbon::after {
  content: ''; position: absolute; z-index: -1; top: 6px; width: 24px; height: 32px;
  background: var(--fold);
  clip-path: polygon(0 0,100% 0,100% 100%,0 100%,0 29px,3px 29px,3px 26px,6px 26px,6px 23px,9px 23px,9px 20px,12px 20px,12px 14px,9px 14px,9px 11px,6px 11px,6px 8px,3px 8px,3px 5px,0 5px);
}
.ribbon::before { left: -16px; }
.ribbon::after { right: -16px; transform: scaleX(-1); }
.ribbon.muted { --band: #F2B859; --fold: #D99532; color: var(--ink); }
/* Open art is 51px wide; body spans x=0..35: centre is 7.5 art pixels left.
   Existing Home scale is 4/3, Log scale is 2: compensate 10px and 15px. */
.lock-card:not(.locked) .lock-wrap { left: 10px; }
.lock-card.float:not(.locked) .lock-wrap { left: 15px; }
.lock-card.compact .ribbon { height: 32px; padding: 0 14px; }
/* Home goals: one drawn icon per goal; met goals turn coral with a tick badge */
.goal-icons { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 10px 2px 0; }
.gi { width: 40px; display: grid; justify-items: center; gap: 3px; }
.gi-ico { position: relative; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #F7F2EB; border: 1px solid #E5DDD3; }
.gi-ico img.px-ico { filter: grayscale(.8); opacity: .45; }
.gi-ico svg { width: 24px; height: 24px; }
/* The dumbbell is 32 art px wide: at 2/3 (2 device px per art px) the pale ring shows round it */
.gi-ico img.px-ico[src$="/i-dumbbell.png"] { width: calc(32px * 2 / 3); }
.gi small { font-size: 11px; font-weight: 800; color: var(--ink-3); }
.gi.met .gi-ico { background: #FFE3DA; border: 2px solid var(--coral); }
.gi.met .gi-ico img.px-ico { filter: none; opacity: 1; }
.gi.met small { color: #C2401F; }
.gi.met .gi-ico::after {
  content: ''; position: absolute; right: -5px; top: -5px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--card);
  background: var(--coral) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8' shape-rendering='crispEdges'><path fill='%23FFF8EE' d='M1 3h1v2H1zM2 4h1v2H2zM3 5h1v2H3zM4 4h1v2H4zM5 3h1v2H5zM6 2h1v2H6z'/></svg>") center / 12px no-repeat;
}
.goals-cap { font-weight: 900; font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin-top: 14px; }
.goals { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 12px; }
.chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border-radius: 999px; font-weight: 800; font-size: 13px; background: var(--card-2); border: 1px solid var(--line); color: var(--ink-2); }
.chip.met { background: #FFE4DA; border-color: #FFC2AF; color: #C2401F; }
.chip svg { width: 12px; height: 12px; }
a.chip, button.chip { min-height: 44px; }
a.chip { text-decoration: none; }

.lock-card.float .goal-icons { flex-wrap:nowrap; justify-content:space-between; gap:5px; margin-top:14px; }
.lock-card.float .gi { width:36px; }
.lock-card.float .gi-ico { width:32px; height:32px; }
.lock-card.float .gi-ico img.px-ico { max-width:24px; max-height:24px; object-fit:contain; }
.lock-card.float .gi small { font-size:10px; }

/* ---------- lists ---------- */
.section-title { font-weight: 900; font-size: 13px; letter-spacing: 1.2px; text-transform: uppercase; color: var(--ink-3); margin: 22px 4px 8px; }
.list .item { display: flex; align-items: center; gap: 12px; padding: 9px 0; }
.list .item + .item { border-top: 1px solid var(--line); }
button.item, a.item { width: 100%; background: none; border: 0; text-align: left; text-decoration: none; color: inherit; font: inherit; }
.item .name { font-weight: 800; font-size: 17px; }
.item .meta { font-weight: 700; font-size: 13px; color: var(--ink-3); }
.item .kcal { margin-left: auto; font-weight: 800; font-size: 16px; white-space: nowrap; }
/* Log: tighter rows so the padlock peeks above the tab bar on a 390x844 phone */
.log-list.card { padding-top: 8px; padding-bottom: 8px; }
.log-list .item { padding: 6px 0; min-height:56px; }
.log-list .add-cta { display:inline-flex; align-items:center; min-height:44px; }
.log-meal-names { display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; overflow-wrap:anywhere; }
.log-list + .log-list { margin-top: 10px; }
.thumb { width: 44px; height: 44px; border-radius: 12px; object-fit: cover; flex: none; background: var(--card-2); border: 1px solid var(--line); }
.empty { color: var(--ink-3); font-weight: 700; padding: 6px 0; }

.add-cta { color: #C2401F; font-size: 14px; font-weight: 800; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 50px; padding: 0 18px;
  border: 0; border-radius: 16px; font-weight: 900; font-size: 16px; letter-spacing: .3px;
  background: var(--ink); color: #FFF8EE; box-shadow: 0 3px 0 #0E1520; transition: transform .08s;
}
.btn:active { transform: translateY(2px); box-shadow: 0 1px 0 #0E1520; }
.btn.coral { background: var(--coral); box-shadow: 0 3px 0 #D9502F; }
.btn.ghost { background: var(--card); color: var(--ink); border: 1px solid var(--line); box-shadow: 0 2px 0 var(--line); }
.btn.block { width: 100%; }
.btn[disabled] { opacity: .5; }
.btn svg { width: 16px; height: 16px; }
.actions { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; margin-top: 14px; }
.actions .btn { flex-direction: column; min-height: 56px; gap: 2px; padding: 6px 12px; font-size: 14px; border-radius: 16px; }
.actions .btn svg { width: 24px; height: 24px; }
.icon-btn { width: 44px; height: 44px; min-width: 44px; min-height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); display: grid; place-items: center; font-weight: 900; }
/* Back and close buttons for screens without the tab bar (Town, Tide, Debrief): icon('left') / icon('close') */
.back-pill { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 16px 0 10px; border-radius: 999px; background: var(--card); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); font-weight: 900; font-size: 15px; text-decoration: none; }
.back-pill svg { width: 20px; height: 20px; }
.close-btn { width: 44px; height: 44px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--card); border: 1.5px solid var(--line); box-shadow: 0 2px 0 var(--line); color: var(--ink); text-decoration: none; }
.close-btn svg { width: 20px; height: 20px; }

/* ---------- forms ---------- */
.field { display: block; margin-top: 12px; }
.field > span { display: block; font-weight: 800; font-size: 13px; letter-spacing: .6px; text-transform: uppercase; color: var(--ink-3); margin: 0 2px 6px; }
.input {
  width: 100%; min-height: 50px; padding: 12px 14px; border-radius: 14px; border: 1.5px solid var(--line); background: #FFFBF2;
  font-weight: 700; font-size: 17px; outline: none;
}
.input:focus { border-color: var(--coral); box-shadow: 0 0 0 3px rgba(255, 107, 74, .18); }
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.seg { display: flex; background: var(--card-2); border: 1px solid var(--line); border-radius: 14px; padding: 4px; gap: 4px; }
.seg button { flex: 1; min-height: 44px; border: 0; border-radius: 10px; background: none; font-weight: 800; font-size: 14px; color: var(--ink-2); }
.seg button.on { background: var(--ink); color: #FFF8EE; }

/* ---------- day switcher ---------- */
.daynav { display: flex; align-items: center; justify-content: space-between; margin: 0 0 12px; }
.daynav .when { font-weight: 900; font-size: 16px; }
.daynav .icon-btn { width: 44px; height: 44px; border: 1.5px solid var(--line); border-radius: 12px; background: var(--card); box-shadow: 0 2px 0 var(--line); color: var(--ink); }
.daynav .icon-btn svg { width: 20px; height: 20px; }
.daynav .icon-btn:disabled { opacity: .35; }

/* ---------- chat ---------- */
.chat { display: flex; flex-direction: column; gap: 10px; padding-bottom: 76px; }
.msg { max-width: 82%; padding: 10px 14px; border-radius: 18px; font-weight: 700; font-size: 16px; line-height: 1.35; white-space: pre-wrap; }
.msg.keeper { align-self: flex-start; background: var(--card); border: 1px solid var(--line); border-bottom-left-radius: 6px; }
.msg.jas { align-self: flex-end; background: var(--ink); color: #FFF8EE; border-bottom-right-radius: 6px; }
.msg.typing { color: var(--ink-3); }
.composer {
  position: fixed; left: 0; right: 0; bottom: calc(var(--tabs-h) + var(--safe-bottom)); padding: 10px 16px;
  background: linear-gradient(180deg, rgba(243, 227, 195, 0), var(--sand) 30%); display: flex; gap: 8px; max-width: 480px; margin: 0 auto;
}
.composer .input { min-height: 48px; }
.keeper-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.avatar { width: 52px; height: 52px; border-radius: 50%; background: #F6C99B; border: 2px solid var(--ink); overflow: hidden; position: relative; flex: none; }
.avatar img { position: absolute; height: calc(94 * var(--px) * 1.4); left: 50%; top: -4px; transform: translateX(-50%); image-rendering: pixelated; }

/* ---------- tab bar ---------- */
.tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: grid; grid-template-columns: repeat(5, 1fr);
  height: calc(var(--tabs-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom);
  background: rgba(251, 241, 220, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-top: 1px solid var(--line);
}
.tabs a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; text-decoration: none; color: #6B7280; font-weight: 800; font-size: 11px; letter-spacing: .3px; }
.tabs a svg { width: 24px; height: 24px; }
.tabs a.on { color: var(--coral); }
/* Drawn tab icons: one 30 px box each so the labels line up; the open tab is full colour and lifts a little, the rest are faded */
.tab-ico { width: 32px; height: 32px; display: grid; place-items: center; }
.tab-ico img.px-ico { max-width: 32px; max-height: 32px; object-fit: contain; }
.tabs a img.px-ico { filter: grayscale(.6); opacity: .8; transition: transform .15s; }
.tabs a.on img.px-ico { filter: none; opacity: 1; transform: translateY(-2px); }

/* ---------- sheet (bottom modal) ---------- */
.sheet-back { position: fixed; inset: 0; z-index: 40; background: rgba(30, 42, 58, .38); animation: fade .2s both; }
.sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 41; max-height: 88vh; overflow: auto; max-width: 480px; margin: 0 auto;
  background: var(--sand); border-radius: 24px 24px 0 0; padding: 10px 18px calc(20px + var(--safe-bottom));
  box-shadow: 0 -10px 30px rgba(30, 42, 58, .2); animation: up .28s cubic-bezier(.2, .9, .3, 1) both;
}
.sheet .grab { width: 44px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 12px; }
.sheet h2 { margin: 0 0 6px; font-size: 24px; font-weight: 900; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

/* ---------- toast ---------- */
.toast {
  position: fixed; left: 50%; top: calc(var(--safe-top) + 16px); transform: translateX(-50%); z-index: 100;
  background: #FFF8EA; color: var(--ink); border: 2px solid var(--ink); font-weight: 800; padding: 12px 18px; border-radius: 999px; box-shadow: 0 8px 20px rgba(30, 42, 58, .25);
  max-width: calc(100% - 32px);
}

.toast::before { content: '\2713'; color: var(--coral); margin-right: 8px; }
.toast:not([hidden]) { animation: toast-slide 2.6s both; }
@keyframes toast-slide { 0% { opacity: 0; translate: 0 0; } 8%, 90% { opacity: 1; translate: 0 0; } 100% { opacity: 0; translate: 0 0; } }
/* The toast floats over the page for 2.6 s; pushing the page down tucked the bottom row under the tab bar. */

/* ---------- fireworks canvas ---------- */
.fx { position: fixed; inset: 0; z-index: 60; pointer-events: none; image-rendering: pixelated; }

/* ---------- sign in ---------- */
.gate { min-height: calc(100vh - 40px); display: flex; flex-direction: column; justify-content: center; gap: 12px; }
.gate .hero { position: relative; height: 210px; margin: 0 -16px 8px; overflow: hidden; background: #F6C99B url(/art/scene-boardwalk.png) no-repeat center bottom; background-size: 400px 299px; image-rendering: pixelated; }
.gate .hero img { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); height: calc(96 * var(--px)); image-rendering: pixelated; }
.err { color: #C2401F; font-weight: 800; min-height: 20px; }

/* ---------- offline ---------- */
/* No signal: the boardwalk in a rounded card at the top, then Keeper's words, one button and a quiet status chip. */
.offline { display: flex; flex-direction: column; justify-content: center; gap: 12px; min-height: calc(100vh - var(--safe-top) - var(--safe-bottom) - 40px); padding-top: 12px; text-align: center; }
.offline-scene { position: relative; height: 299px; border: 2px solid var(--ink); border-radius: 20px; overflow: hidden; background: #F6C99B url(/art/scene-boardwalk.png) no-repeat center bottom / 400px 299px; image-rendering: pixelated; box-shadow: 0 4px 0 var(--line); }
.offline-scene img { position: absolute; bottom: 26px; left: 50%; transform: translateX(-50%); height: calc(96 * var(--px)); image-rendering: pixelated; }
.offline .title { margin-top: 10px; }
.offline .sub { margin: 0 8px 6px; text-wrap: balance; }
.offline-wait { align-self: center; display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 7px 14px; border-radius: 999px; background: #eadbcc; color: var(--ink); font-size: 12px; font-weight: 800; }
.offline-wait svg, .offline-wait img { width: 16px; height: 16px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ---------- gym ---------- */
.gym-page { padding-bottom: 110px; }
.gym-hero { position: relative; padding: 16px 16px 10px; background: var(--ink); color: var(--card); overflow: hidden; }
.gym-hero:after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 8px; background: linear-gradient(90deg, transparent 50%, #ead5a5 50%) 0 0 / 16px 4px repeat-x, linear-gradient(#648f9b 50%, #ead5a5 50%); }
.gym-rest { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 12px; background: #efe5d5; font-size: 12px; font-weight: 800; font-variant-numeric: tabular-nums; }
.gym-rest.over { background: #ff5c38; color: white; border-color: #ff5c38; }
.gym-eyebrow { display: flex; justify-content: space-between; align-items: center; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; }
.gym-eyebrow .px-ico { width: 36px; height: 28px; object-fit: contain; }
.gym-hero h1 { font-size: clamp(36px, 10vw, 48px); line-height: 1.05; letter-spacing: -1.5px; margin: 10px 0 8px; font-weight: 900; color: var(--coral); overflow-wrap: anywhere; }
.gym-hero-meta { display: flex; justify-content: space-between; gap: 8px; font-size: 11px; }
.gym-hero-meta b { color: var(--gold); font-size: 9px; align-self: center; }
.gym-week { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 4px; border-top: 1px solid #46505c; padding-top: 10px; margin-top: 12px; }
.gym-day { text-align: center; padding: 7px 0 4px; border: 2px solid transparent; border-radius: 12px; }
.gym-day.today { border-color: var(--coral); background: #38404a; }
.gym-day b { font-size: 17px; display: block; }
.gym-day small { display: -webkit-box; font-size: 9px; line-height: 1.2; min-height: 22px; overflow: hidden; overflow-wrap: anywhere; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.gym-day > span { color: var(--gold); font-size: 13px; }
.gym-day.rest { color: #a9a7a0; }
.gym-keeper { display: flex; align-items: center; gap: 12px; margin: 6px 0; }
.gym-keeper img { width: 66px; height: 86px; object-fit: contain; image-rendering: pixelated; }
.gym-bubble { position: relative; flex: 1; border: 2px solid var(--ink); background: #fff8eb; border-radius: 16px; padding: 13px 14px; font-size: 14px; font-weight: 800; box-shadow: 0 4px 0 var(--line); }
.gym-bubble:before { content: ''; position: absolute; width: 10px; height: 10px; background: #fff8eb; border-left: 2px solid var(--ink); border-bottom: 2px solid var(--ink); left: -7px; top: 24px; transform: rotate(45deg); }
.gym-session { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 8px 2px 10px; }
.gym-session label { color: var(--ink-3); font-size: 10px; letter-spacing: 1px; font-weight: 900; }
.gym-session input { min-width: 0; min-height: 44px; width: 132px; max-width: 55%; text-align: right; background: #EFE5D5 url(/art/i-pencil.png) no-repeat 10px 50% / 16px 16px; image-rendering: pixelated; border: 0; padding: 4px 10px 4px 32px; border-radius: 12px; font-weight: 800; font-size: 16px; }
.gym-exercise { margin-bottom: 16px; padding: 16px; }
.gym-exercise h2 { margin: 0; font-size: 22px; line-height: 1.15; }
.gym-lift-number { font-size: 13px; font-weight: 900; color: var(--coral); }
.gym-remove { border: 0; background: none; color: var(--ink-3); min-width: 44px; min-height: 44px; padding: 0 4px; font-size: 12px; font-weight: 800; }
.gym-exercise > .row .gym-remove { font-size: 24px; }
.gym-ghosts { margin: 12px 0 16px; }
.gym-ghosts > span { font-size: 9px; letter-spacing: 1px; font-weight: 900; color: var(--ink-3); }
.gym-ghosts > div { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; }
.gym-ghost { background: var(--card-2); border: 1px solid var(--line); border-radius: 8px; min-height: 44px; padding: 6px 9px; font-size: 13px; font-weight: 800; }
.gym-labels, .gym-set { display: grid; grid-template-columns: 28px minmax(0,1.2fr) minmax(0,1fr) 44px; gap: 8px; align-items: center; }
.gym-labels { font-size: 9px; letter-spacing: .4px; font-weight: 900; color: var(--ink-3); margin-bottom: 8px; }
.gym-labels span:not(:first-child) { text-align: center; }
.gym-set { margin-bottom: 8px; }
.gym-set-number { background: var(--track); border-radius: 50%; width: 25px; height: 25px; display: grid; place-items: center; font-size: 12px; font-weight: 900; }
.gym-set .input { min-width: 0; height: 49px; padding: 6px; text-align: center; font-size: 23px; font-weight: 900; border-radius: 10px; }
.gym-set .input::placeholder { color: var(--line); }
.gym-check { width: 44px; height: 46px; position: relative; border: 0; background: transparent; color: transparent; font-size: 22px; font-weight: 900; }
.gym-check:before { content: ''; position: absolute; width: 28px; height: 28px; box-sizing: border-box; border: 2px solid #D6C7B2; border-radius: 8px; left: 8px; top: 9px; }
.gym-set.done .gym-check:before { content: '\2713'; background: #FF5C38; color: white; border-color: #FF5C38; line-height: 24px; }
.gym-set.done .input, .gym-set.done .input:focus { border: 1.5px solid #E2D9C8; background: #FAF5EB; box-shadow: none; outline: none; }
.gym-exercise-footer { display: flex; justify-content: space-between; border-top: 1px solid var(--line); margin-top: 12px; }
.gym-exercise-footer button:first-child { color: var(--ink); }
.gym-hint { text-align: center; font-size: 12px; }
.gym-save { position: fixed; z-index: 19; bottom: calc(var(--tabs-h) + var(--safe-bottom)); left: 50%; transform: translateX(-50%); width: min(100%,480px); padding: 10px 16px 12px; --bg: var(--sand); background: var(--bg); border-top: 1.5px solid #e2d3bb; box-shadow: 0 -8px 18px #76501e17; }
.gym-save .btn { min-height: 50px; }
/* Nothing ticked yet: an outlined cream button on the plate, so the dock still reads as a dock. */
.gym-save .btn:disabled { background: var(--card); color: var(--ink-3); border: 1.5px solid #e2d3bb; opacity: 1; box-shadow: none; }
.gym-pr { position: relative; overflow: hidden; background: var(--coral); color: #fff8eb; margin: 16px 0; border-color: #eb5332; }
/* The PR burst plays inside the card, behind its text. */
.gym-pr > :not(.fx-card) { position: relative; z-index: 1; }
.fx-card { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; image-rendering: pixelated; }
/* Under a PR card, "Start another workout" steps back to cream so the coral stays the card's. */
.gym-page:has(.gym-pr) #free { background: var(--card); color: var(--coral); border: 2px solid var(--coral); box-shadow: 0 3px 0 #e8cdb8; }
.gym-pr > b { display: block; font-size: 36px; font-weight: 900; }
.gym-pr h2 { margin: 4px 0; }
.gym-pr > strong { font-size: 40px; line-height: 1.2; }
.gym-pr small { font-size: 20px; }
.gym-pr p { font-size: 11px; }
.gym-badge { color: #c4472c; font-weight: 900; }
.gym-logged { margin-bottom: 12px; padding: 16px; }
.gym-history { display: flex; justify-content: space-between; gap: 8px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 12px; }

/* Rest dock reserves space below the final rows and above save. */
.gym-rest { display:flex; position:relative; width:100%; min-height:52px; margin:0 0 10px; padding:4px 10px 4px 16px; border-radius:999px; background:#fffdfa; box-shadow:0 4px 14px #0002; gap:8px; font-size:15px; }
.gym-rest span { flex:1; }
.gym-rest button { min-width:44px; min-height:44px; border:0; border-radius:24px; background:var(--card-2); color:var(--ink); font-weight:800; }
.gym-page.resting { padding-bottom:210px; }
.gym-rest.finished { animation:rest-pulse .9s ease-out; }
@keyframes rest-pulse { 50% { box-shadow:0 0 0 7px #f4b86066; } 100% { opacity:0; } }
.gym-set .input::placeholder { color:rgba(30,41,59,.32); font-weight:700; }
.gym-keeper { position:relative; }
/* A soft contact shadow under Keeper's sneakers. */
.gym-keeper::before { content:''; position:absolute; left:7px; bottom:-3px; width:52px; height:8px; border-radius:50%; background:#1e2a3a2b; }
.gym-keeper > img { position:relative; }

/* ---------- me ---------- */
.me-card { margin-bottom: 8px; }
.me-between { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.me-weight { font-size:44px; line-height:1.1; font-weight:900; }
.me-badge { background:var(--card-2); border:1px solid var(--line); border-radius:12px; padding:8px; font-size:12px; font-weight:800; }
.me-chart { display:block; width:100%; margin:16px 0 4px; overflow:visible; }
.me-chart polyline, .chart-grid { fill:none; stroke-width:1; }
.chart-grid { stroke:var(--line); }
.me-chart .chart-daily { stroke:var(--ink-3); stroke-width:1.5; opacity:.5; }
.me-chart .chart-average { stroke:var(--coral); stroke-width:3; stroke-linejoin:round; stroke-linecap:round; }
.me-chart circle { fill:var(--ink-3); }
.me-small { display:block; margin-top:4px; }
#waist { margin-top:16px; padding:14px 0 0; border-top:1px solid var(--line); }
.me-sheet { border:2px solid var(--ink); background:linear-gradient(135deg,#FBF1DC,#F3E3C3); }
.me-character { display:flex; align-items:center; gap:16px; border-bottom:2px solid var(--ink); padding-bottom:16px; }
.me-level { display:grid; place-items:center; width:72px; height:72px; border:3px double var(--ink); border-radius:20px; background:var(--ink); color:var(--card); font-size:38px; font-weight:900; flex-shrink:0; }
.me-character b { letter-spacing:2px; }
.me-stat { display:flex; align-items:center; gap:12px; margin-top:20px; }
.me-stat-key { font-size:14px; font-weight:900; letter-spacing:1px; width:46px; }
.me-stat .bar { margin:6px 0; }
.me-check { width:24px; height:24px; accent-color:var(--coral); flex-shrink:0; }
.me-habit-target { display:inline-flex; align-items:center; padding:10px; margin:-10px; flex-shrink:0; }
.me-target { display:flex; gap:16px; align-items:center; }
.me-target .field { flex:1; min-width:0; }
.me-toggle { white-space:nowrap; padding-top:28px; font-weight:800; }
.me-card input[type=checkbox] { accent-color:var(--coral); }
.me-extra { margin-top:16px; margin-bottom:12px; }
.me-day { border-bottom:1px solid var(--line); padding:14px 0; }
.me-day summary { display:flex; justify-content:space-between; gap:12px; cursor:pointer; font-weight:800; padding:11px 0; margin:-11px 0; }
.me-day summary span { text-align:right; }
.me-day textarea { min-height:100px; }
#split > .btn { margin-top:16px; }
.me-pref-group { padding-bottom:12px; margin-bottom:12px; border-bottom:1px solid var(--line); }
.me-pref-group > b { color:var(--ink-3); font-size:13px; text-transform:uppercase; letter-spacing:1px; }
.me-pref-group .me-between { margin-top:8px; }
.me-pref-group .me-between span { overflow-wrap:anywhere; min-width:0; }
.me-pref-group .icon-btn { flex-shrink:0; }
.me-gallery { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; margin-top:16px; }
.me-gallery a { color:var(--ink-3); text-decoration:none; font-size:12px; }
.me-gallery img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; border:1px solid var(--line); }
.me-gallery .empty { grid-column:1/-1; }
.me-camera { position:relative; background:var(--ink); aspect-ratio:3/4; border-radius:16px; overflow:hidden; margin-top:16px; }
.me-camera video, .me-camera img { position:absolute; inset:0; width:100%; height:100%; object-fit:contain; }
.me-camera img { opacity:.35; pointer-events:none; }
.me-signout { margin:24px 0; }
.me-card .icon-btn svg { width:18px; height:18px; }

/* Character sheet polish */
.me-identity { display:flex; align-items:center; gap:12px; margin-top:8px; font-size:18px; }
.me-card { border-radius:24px; box-shadow:0 8px 18px #422c1110,inset 0 1px 0 #fff9; }
.me-sheet { background:#1E2A3A; color:#FBF1DC; border:1px solid #344456; box-shadow:0 7px 0 #14202e,0 14px 24px #1e2a3a25; padding:20px; margin-bottom:20px; }
.me-character { border-bottom:1px solid #fbf1dc30; gap:16px; padding-bottom:18px; }
.me-character .sub { color:#c6c5be; font-size:12px; margin:6px 0 0; }
.me-character b { display:block; font-size:20px; letter-spacing:1px; }
.me-eyebrow { display:block; font-size:10px; letter-spacing:2px; color:#f3c77a; margin-bottom:5px; }
.me-level { position:relative; width:78px; height:88px; border:0; border-radius:0; background:none; }
.me-level svg { position:absolute; width:78px; height:88px; filter:drop-shadow(0 4px 0 #101a26); }
.me-level strong { z-index:1; font-size:36px; color:#fff4dc; text-shadow:2px 2px #1e2a3a; margin-top:-8px; }
.me-stat { display:grid; grid-template-columns:30px minmax(0,1fr) auto; gap:7px 10px; margin-top:18px; }
.me-stat-icon { grid-row:1/4; align-self:center; }
.me-stat-icon svg { width:28px; height:28px; }
.me-stat > b { font-size:16px; }
.me-stat > b small { color:#aeb8c3; font-size:9px; letter-spacing:1px; margin-left:5px; }
.me-stat-chip { border:1px solid #fbf1dc30; background:#ffffff09; color:#f3c77a; border-radius:8px; font-size:12px; padding:3px 7px; font-weight:900; }
.me-pixels { display:grid; grid-template-columns:repeat(10,1fr); gap:4px; grid-column:2/4; }
.me-pixels i { height:10px; background:#3c4959; box-shadow:inset 0 -2px 0 #0003; }
.me-pixels .filled { background:var(--coral); }
.me-stat-xp { grid-column:2/4; color:#bec5cb; font-size:10px; }
.me-chart text { font-size:11px; fill:var(--ink-2); font-weight:800; }
.me-legend { display:flex; gap:18px; margin-top:12px; font-size:12px; color:var(--ink-2); }
.me-legend span { display:flex; align-items:center; gap:6px; }
.me-legend i { width:16px; height:5px; background:#9299a0; }
.me-legend span:last-child i { background:var(--coral); }
.me-settings { margin-top:24px; }
.me-settings > summary { display:flex; align-items:center; justify-content:space-between; cursor:pointer; font-weight:900; font-size:20px; }
.me-settings > summary:after { content:'+'; color:var(--coral); }
.me-settings[open] > summary:after { content:'\2212'; }
.me-settings > summary span { font-size:12px; font-weight:700; color:var(--ink-3); }
.me-settings .me-card { box-shadow:none; padding:0; border:0; background:none; }
.me-target-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:4px 12px; }
.me-target { gap:6px; }
.me-target .field span { font-size:10px; }
.me-target .input { padding:10px 8px; width:100%; }
.me-toggle { display:flex; align-items:center; gap:6px; position:relative; min-width:44px; padding-top:0; font-size:12px; }
.me-target .me-toggle { margin-top:24px; }
.me-toggle input { position:absolute; width:100%; height:100%; opacity:0; margin:0; cursor:pointer; }
.me-switch { display:inline-block; width:30px; height:18px; border-radius:12px; background:#aaa99f; padding:3px; flex-shrink:0; }
.me-switch:after { content:''; display:block; width:12px; height:12px; border-radius:50%; background:#fff6e6; transition:transform .15s; }
.me-toggle input:checked + .me-switch { background:var(--coral); }
.me-toggle input:checked + .me-switch:after { transform:translateX(12px); }
.me-toggle input:focus-visible + .me-switch { outline:2px solid var(--ink); outline-offset:3px; }
.me-knowledge-tabs { display:flex; flex-wrap:wrap; gap:6px; margin-bottom:16px; }
.me-kind { border:1px solid var(--line); border-radius:10px; background:transparent; padding:8px 10px; font-size:12px; color:var(--ink-2); font-weight:800; }
.me-kind b { margin-left:5px; opacity:.65; }
.me-kind.on { background:var(--ink); border-color:var(--ink); color:var(--card); }
.me-pref-group { border:0; padding:0; }
.me-card .item > .icon-btn { font-size:24px; min-width:40px; min-height:40px; }
.me-gallery .empty { padding:24px 8px; border:1px dashed var(--line); border-radius:14px; text-align:center; }

.me-level .px-ico { position:absolute; width:81px; height:96px; image-rendering:pixelated; } /* the 27x32 shield at exactly 3x */
.me-level strong { background:#1e2a3ae8; border:1px solid #f3c77a; min-width:40px; text-align:center; border-radius:8px; font-size:30px; margin-top:0; }
/* Stat icons sit on cream badges so the navy footprints read on the navy card; drawn icons stay at natural size */
.me-stat { grid-template-columns:38px minmax(0,1fr) auto; }
.me-stat-icon { width:38px; height:38px; border-radius:50%; background:#FBF1DC; box-shadow:inset 0 -2px 0 #E6D3AE; display:grid; place-items:center; }
.me-card .item > .icon-btn { flex-shrink:0; }

.me-card .item > .grow { flex:1; min-width:0; overflow-wrap:anywhere; }
/* Keeper character showcase */
.me-top { align-items:center; margin-bottom:14px; }
.me-top .me-identity { font-size:12px; color:var(--ink-2); margin-top:0; }
.me-gear { width:44px; height:44px; border:1px solid var(--line); border-radius:14px; background:var(--card); display:grid; place-items:center; }
.me-gear svg { width:24px; height:24px; }
.me-sheet { padding:16px; margin-bottom:16px; }
.me-hero { display:grid; grid-template-columns:120px minmax(0,1fr); gap:12px; align-items:center; }
.me-stage { height:140px; display:flex; align-items:center; justify-content:flex-end; flex-direction:column; background:radial-gradient(ellipse at center,#f4b86020,transparent 70%); }
.me-sprite { height:120px; width:auto; max-width:120px; object-fit:contain; image-rendering:pixelated; position:relative; z-index:1; }
.me-plank { width:104px; height:12px; background:repeating-linear-gradient(90deg,transparent 0 24px,#493026 24px 27px),linear-gradient(#d7a05c 0 3px,#926039 3px 8px,#513928 8px); border:2px solid #101a26; box-shadow:0 4px 0 #101a26; }
.me-eyebrow { color:#f3c77a; font-size:9px; letter-spacing:1.6px; }
.me-rank h2 { color:#f3c77a; font-size:24px; line-height:1.05; margin:5px 0 10px; font-weight:900; text-shadow:0 2px #80572b; }
.me-rank p { font-size:11px; color:#c1cbd5; margin:9px 0 5px; }
.me-rank > small:last-child { display:block; font-size:10px; color:#c1cbd5; margin-top:5px; }
.me-gauge { background:#1E2A3A; border:1px solid #C9973F; padding:2px; height:18px; box-shadow:inset 0 2px 3px #0008; overflow:hidden; border-radius:3px; }
.me-gauge i { display:block; height:12px; background:var(--coral); box-shadow:inset 0 2px #ffb09580,inset 0 -2px #a52c2540; }
.me-equipment { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; margin:16px 0; }
.me-slot { text-align:center; border:1px solid #46515f; background:#152130; border-radius:8px; padding:6px 2px; box-shadow:inset 0 2px 4px #0005; }
.me-slot > span { height:32px; display:grid; place-items:center; }
.me-slot img { max-height:30px; max-width:32px; filter:brightness(0) drop-shadow(0 1px 0 #536275); opacity:.75; }
.me-slot b,.me-slot small { display:block; font-size:9px; letter-spacing:.5px; color:#aeb8c3; }
.me-slot small { color:#f3c77a; font-size:10px; margin-top:2px; }
.me-slot.unlocked { border-color:#C9973F; background:#493d2b; box-shadow:inset 0 0 0 1px #f3c77a50; }
.me-slot.unlocked img { filter:none; opacity:1; }
.me-stat-heading { display:flex; justify-content:space-between; border-top:1px solid #f3c77a30; padding-top:12px; font-size:9px; letter-spacing:1px; color:#f3c77a; }
.me-stat-heading span { color:#aeb8c3; letter-spacing:0; }
.me-stat { grid-template-columns:32px minmax(0,1fr) auto; gap:3px 8px; margin-top:10px; }
.me-stat-icon { width:30px; height:30px; grid-row:1/4; }
.me-stat-icon img { max-width:26px; max-height:27px; }
.me-stat > b { font-size:14px; }
.me-stat > b small { font-size:8px; margin-left:3px; }
.me-stat-chip { font-size:10px; padding:2px 6px; }
.me-stat .me-gauge { grid-column:2/4; }
.me-stat-xp { font-size:9px; text-align:right; }
.me-sheet + .section-title { margin-top:18px; }
.me-settings-panel .section-title { margin-top:20px; }
.me-settings-panel .me-card { padding:12px; box-shadow:none; }
.me-settings-panel .me-toggle { white-space:normal; }
.me-settings-panel .me-between.me-extra { flex-wrap:wrap; }
/* Compact gauges keep the weight milestone visible above the tabs. */
.me-stat { grid-template-columns:30px minmax(0,1fr) 86px; gap:4px 7px; margin-top:10px; }
.me-stat-icon { grid-row:1/3; }
.me-stat-chip { justify-self:end; }
.me-stat .me-gauge { grid-column:2; }
.me-stat-xp { grid-column:3; grid-row:2; font-size:9px; white-space:nowrap; }
.me-equipment { margin:12px 0; gap:8px; }
.me-slot { padding:4px 2px; }
.me-slot > span { height:28px; }
.me-slot img { max-height:26px; }
.me-settings-panel > .me-between { position:sticky; top:-10px; z-index:2; background:var(--sand); margin:0 -18px; padding:10px 18px 6px; }
.me-hero { grid-template-columns:108px minmax(0,1fr); }
.me-stage { height:124px; }
.me-sprite { height:104px; }
.me-stat { margin-top:8px; }
.me-slot { background:#2A3C52; border:1.5px solid #E8DECB; }
.me-slot img { filter:saturate(.7); opacity:.65; }
.me-slot b { font-size:9px; letter-spacing:0; color:#f6eddf; }
.me-slot small { font-size:9px; letter-spacing:0; white-space:nowrap; }
.me-slot.unlocked img { filter:none; opacity:1; }
.me-target-grid { grid-template-columns:1fr; gap:0; }
.me-target { min-height:68px; padding:10px 0; gap:12px; border-bottom:1px solid var(--line); }
.me-target .field { display:grid; grid-template-columns:1fr 80px; align-items:center; gap:8px; margin:0; }
.me-target .field span { font-size:13px; }
.me-target .input { min-height:44px; }
.me-target .me-toggle { margin:0; min-height:44px; display:flex; align-items:center; }
.me-target .field > span { margin:0; }
.me-goal-list .me-target { justify-content:space-between; }
.me-goal-list .me-target > .grow { font-size:13px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--ink-3); }
#targets { padding-bottom:max(16px,env(safe-area-inset-bottom)); }
.me-target-note { width:80px; flex:none; color:var(--ink-3); font-size:11px; line-height:1.3; }
.me-target-footer { border-top:1px solid var(--line); padding-top:12px; margin-top:12px; }
.me-goal-list .me-target:last-child { border-bottom:0; }

/* ---------- onboarding ---------- */
.onboarding { padding-top: 8px; }
.on-dots { display:flex; justify-content:space-between; list-style:none; padding:0; margin:0 0 20px; gap:8px; }
.on-dots li { display:grid; justify-items:center; gap:4px; color:var(--ink-2); font-weight:800; font-size:12px; }
.on-dots span { display:grid; place-items:center; width:28px; height:28px; border:1px solid var(--line); border-radius:50%; background:var(--card); }
.on-dots .on span { background:var(--coral); border-color:var(--coral); color:var(--ink); }
.on-dots [aria-current] span { outline:2px solid var(--ink); outline-offset:3px; }
.on-guide { display:flex; align-items:center; gap:18px; min-height:150px; margin-bottom:16px; }
.on-guide img { width:100px; height:150px; object-fit:contain; flex-shrink:0; }
.on-guide .bubble { position:relative; top:auto; left:auto; max-width:none; flex:1; animation:none; }
.onboarding h1 { margin:0 0 16px; outline:none; }
.on-content > .field:first-child { margin-top:0; }
.on-content .sub { color:var(--ink-2); margin:0 0 8px; }
.on-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 12px; }
.onboarding .input { width:100%; min-width:0; }
.on-actions { display:flex; gap:12px; }
.on-actions .grow { flex:1; }
.on-error { color:#9B3426; font-weight:800; margin:12px 0; }
.on-error:empty { margin:16px 0 0; }
.on-welcome { text-align:center; padding:20px 0; }
.on-welcome p { font-size:24px; font-weight:900; line-height:1.4; margin:16px 0; }
.on-week { display:grid; grid-template-columns:repeat(4,1fr); gap:8px; }
.on-week button, .on-foods button { border:1px solid var(--line); border-radius:12px; background:var(--card-2); min-height:52px; padding:8px 4px; font-weight:800; }
.on-week small, .on-foods small { display:block; font-size:12px; margin-top:3px; }
.on-week [aria-pressed=true] { background:var(--coral-soft); border-color:var(--coral); }
.on-day { border-top:1px solid var(--line); margin-top:16px; padding-top:16px; }
.on-foods { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
.on-foods button { font-size:13px; min-height:64px; overflow-wrap:anywhere; }
.on-foods [data-kind=love] { background:var(--coral-soft); border-color:var(--coral); }
.on-foods [data-kind=never] { background:var(--ink); color:var(--card); border-color:var(--ink); }

/* ---------- town ---------- */
.town-link { display: block; color: inherit; text-decoration: none; isolation: isolate; }
.town-link:focus-visible { outline: 3px solid var(--coral); outline-offset: -3px; }
.town-overlay { position: absolute; inset: 0; pointer-events: none; }
/* Home's Keeper stands where the lifeguard tower goes; the Town screen still shows it. */
.town-overlay .town-piece[data-piece="tower"] { display: none; }
.town-plane { position: absolute; width: 400px; height: 299px; left: calc(50% - 200px); top: calc(48% - 143.52px); pointer-events: none; }
.town-piece { position: absolute; transform: translate(-50%, -100%); image-rendering: pixelated; }
.town-link .keeper { z-index: 2; }
.town-link .bubble { z-index: 3; }
.town-fog { position: absolute; left: 64px; top: 140px; width: 260px; height: 45px; background: #d3d8d5; opacity: .35; clip-path: polygon(0 38%, 8% 38%, 8% 22%, 27% 22%, 27% 0, 46% 0, 46% 18%, 67% 18%, 67% 35%, 86% 35%, 86% 15%, 100% 15%, 100% 76%, 84% 76%, 84% 100%, 64% 100%, 64% 82%, 43% 82%, 43% 100%, 20% 100%, 20% 80%, 0 80%); }
.town-fog.fog-2 { top: 132px; left: 45px; width: 285px; height: 60px; opacity: .55; }
.town-fog.fog-3 { top: 122px; left: 35px; width: 300px; height: 78px; opacity: .72; }
.sea-peek { position: absolute; height: 40px; width: auto; image-rendering: pixelated; transform: translate(-50%, -100%); animation: sea-bob 2.4s steps(3, end) infinite; }
@keyframes sea-bob { 0%, 100% { margin-top: 0; } 50% { margin-top: 4px; } }
.town-offline { position: absolute; right: 12px; bottom: 28px; background: var(--card); padding: 3px 8px; font-size: 11px; border-radius: 6px; }
.town-back { display: inline-block; color: var(--ink-2); text-decoration: none; font-weight: 800; font-size: 14px; padding: 2px 0 12px; }
.town-heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-bottom: 4px; }
.town-heading .title { font-size: 34px; }
.town-heading > span { font-size: 11px; letter-spacing: 1px; font-weight: 900; color: var(--ink); white-space: nowrap; background: #eadbcc; padding: 4px 10px; border-radius: 999px; }
.town-scene { height: 299px; margin-top: 14px; background-position: center top; border-top: 2px solid var(--line); border-bottom: 2px solid var(--line); }
.town-scene .town-plane { top: 0; }
.town-progress { margin: 16px 0; text-align: center; font-size: 13px; color: var(--ink-2); }
.town-progress b { color: var(--ink); font-weight: 900; }
.town-collection { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 22px; }
.town-tile { position: relative; min-height: 83px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px; padding: 10px 2px; background: var(--card); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 3px 0 #e6d3ae; }
.town-tile img { width: auto; height: 32px; max-width: 64px; object-fit: contain; image-rendering: pixelated; }
.town-tile span { font-size: 11px; font-weight: 800; }
.town-tile.unbuilt { background:rgba(235,227,214,.4); border:1.5px dashed #C8B9A6; color:var(--ink-3); box-shadow:none; }
/* Pieces not built yet show as faded ghosts of the real art, so a boat still reads as a boat. */
.town-tile.unbuilt img { filter:grayscale(1) sepia(1) saturate(.6); opacity:.4; }
.town-tile.next { border: 2px solid var(--coral); box-shadow: 0 3px 0 #e6b29a; }
.town-tile.next small { position: absolute; top: -7px; right: 5px; background: var(--coral); color: #fff8ea; font-size: 8px; letter-spacing: 1px; font-weight: 900; padding: 1px 4px; border-radius: 3px; }
.sea-boss { padding: 20px 18px; background: var(--ink); color: var(--card); border: 1px solid #425269; border-radius: 24px; box-shadow: 0 7px 0 #304253, 0 16px 22px #764e301c; }
.boss-eyebrow { display: flex; justify-content: space-between; font-size: 11px; font-weight: 900; letter-spacing: 1.6px; color: var(--gold); }
.boss-eyebrow > span:last-child { color: var(--card); }
.boss-intro { display: flex; align-items: center; gap: 16px; margin: 20px 0 14px; }
.boss-art { height: 80px; width: 80px; display: grid; place-items: center; flex: none; }
.boss-portrait { width: auto; height: auto; transform: scale(2); image-rendering: pixelated; }
.boss-week { margin: 0 0 5px; font-size: 10px; color: #c2cbd0; letter-spacing: 1px; font-weight: 800; }
.boss-intro h2 { margin: 0; font-size: 25px; line-height: 1.1; font-weight: 900; }
.boss-taunt { position: relative; margin: 0 0 20px; padding: 12px 14px; border: 2px solid #e6d3ae; border-radius: 13px; background: var(--card); color: var(--ink); font-size: 15px; font-weight: 800; box-shadow: 0 3px 0 #0f1b2b; }
.boss-taunt::before { content: ''; position: absolute; top: -8px; left: 27px; width: 12px; height: 12px; background: var(--card); border-top: 2px solid #e6d3ae; border-left: 2px solid #e6d3ae; transform: rotate(45deg); }
.boss-health { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.boss-health b { font-size: 22px; }
.boss-health small, .boss-health > span { font-size: 12px; color: #c2cbd0; }
.boss-hp { display: grid; grid-template-columns: repeat(20, 1fr); gap: 3px; }
.boss-hp i { height: 17px; background: #3c4a59; box-shadow: inset 0 -3px #101e2b33; }
.boss-hp i.alive { background: var(--coral); }
.boss-days { display: grid; grid-template-columns: repeat(7, 1fr); margin: 22px 0 12px; border-top: 1px solid #4b5663; padding-top: 15px; text-align: center; }
.boss-days span { display: block; font-size: 12px; color: #c2cbd0; margin-bottom: 6px; }
.boss-days b { display: block; font-size: 17px; color: var(--gold); font-variant-numeric: tabular-nums; }
.boss-rule, .boss-result { text-align: center; font-size: 12px; color: #c2cbd0; margin: 10px 0 0; }
.boss-down { margin: 20px auto 12px; width: max-content; border: 3px solid var(--coral); padding: 7px 14px; color: var(--coral); font-size: 28px; font-weight: 900; letter-spacing: 2px; position:static; transform:none; border-radius:8px; box-shadow:none; text-align:center; }
.town-note { margin: 28px 0 24px; text-align: center; font-size: 13px; color: var(--ink-3); line-height: 1.7; font-weight: 700; }
.sea-flag { position: absolute; height: 18px; width: auto; image-rendering: pixelated; transform: translate(-50%, -100%); animation: sea-bob 3s steps(3, end) infinite; }
@media (prefers-reduced-motion: reduce) { .sea-peek, .sea-flag { animation: none; } }

.sea-ripples { position:absolute; left:183px; top:184px; width:28px; height:10px; transform:translate(-50%,-50%); border:2px solid #A5C4D4; border-radius:35%; }
.sea-ripples::before { content:''; position:absolute; inset:2px 5px; border:1px solid #A5C4D4; border-radius:25%; }
.sea-ripples::after { content:''; position:absolute; width:2px; height:2px; background:#A5C4D4; left:-5px; top:-5px; box-shadow:34px -3px #A5C4D4; }
/* ---------- arc ---------- */
.arc-demo { padding-bottom: 16px; }
.arc-header { display:flex; align-items:center; gap:12px; padding:12px 0 18px; }
.arc-header h1 { font-size:25px; font-weight:900; margin:0; letter-spacing:1px; }
/* The same cream back pill as Town, Debrief and List, on its own row above the title. */
.arc-back { margin-top:4px; }
.arc-header>span { margin-left:auto; font-size:10px; letter-spacing:2px; font-weight:900; }
.arc-scene { position:relative; margin:0 -16px; overflow:hidden; background:#1E2A3A; }
.arc-scene .scene { margin:0; height:210px; filter:grayscale(.65) sepia(.2) hue-rotate(155deg) saturate(.7) brightness(.58); }
.arc-scene .bubble { font-size:14px; max-width:180px; }
.arc-scene::after { content:''; position:absolute; inset:auto 0 0; height:5px; background:#BFE3F5; box-shadow:0 -4px 0 #bfe3f544; }
.arc-scene-label { position:absolute; bottom:13px; right:16px; font-size:9px; letter-spacing:3px; font-weight:900; color:#fff; background:#102235b3; padding:3px 8px; border-radius:4px; }
.arc-card { position:relative; background:#1E2A3A; color:#f5fbff; padding:22px; border:1px solid #52687a; border-radius:22px; box-shadow:0 6px 0 #111e2b,0 12px 24px #1e2a3a22; margin:20px 0; }
.arc-top { display:flex; gap:10px; align-items:center; }
.arc-emblem { color:#BFE3F5; font-size:27px; line-height:1; }
.arc-eyebrow { color:#BFE3F5; font-size:11px; font-weight:900; letter-spacing:1.6px; margin:0; }
.arc-title { font-weight:900; font-size:25px; line-height:1.2; margin-top:15px; }
.arc-caption { font-size:12px; color:#bbcad6; margin:7px 0 20px; }
.arc-grid { display:grid; grid-template-columns:repeat(10,minmax(0,1fr)); gap:6px; }
.arc-cell { aspect-ratio:1; background:#283849; border:1px solid #435466; display:grid; place-items:center; position:relative; }
.arc-cell.kept { background:#BFE3F5; border-color:#eaf8ff; box-shadow:inset 0 -3px #83b9d1; }
.arc-cell.kept i { width:12px; height:12px; background:#1e4963; clip-path:polygon(40% 0,60% 0,60% 30%,85% 10%,100% 25%,75% 45%,100% 45%,100% 60%,75% 60%,100% 85%,85% 100%,60% 75%,60% 100%,40% 100%,40% 75%,15% 100%,0 85%,25% 60%,0 60%,0 40%,25% 40%,0 15%,15% 0,40% 30%); }
.arc-cell.missed { background:#3c4652; border-color:#52606e; opacity:.65; }
.arc-cell.today { border:2px solid #ff795e; box-shadow:0 0 0 2px #ff795e30; }
.arc-legend { display:flex; gap:17px; font-size:10px; color:#bdccd8; margin-top:12px; }
.arc-legend span:has(.today) { color:#ff9a84; }
.arc-legend { flex-wrap:wrap; gap:10px 14px; }
.arc-key.milestone { background:transparent; border:2px solid var(--gold); }
.arc-rules { list-style:decimal-leading-zero; margin:20px 0 16px; padding:16px 0 0 29px; border-top:1px solid #526373; font-size:14px; font-weight:800; }
.arc-rules li { padding:3px 0 3px 6px; overflow-wrap:anywhere; }
.arc-rules li::marker { color:#8da9bc; font-size:11px; }
.arc-count { font-size:13px; color:#bfcfdb; letter-spacing:.5px; }
.arc-count b { color:#fff; }.arc-count>span { margin:0 8px; }
.arc-note { text-align:center; font-size:13px; color:#576477; line-height:1.7; margin:25px 0 18px; }
.arc-secondary { background:transparent; color:#1E2A3A; border:1px solid #c8bda6; margin-top:10px; }
.arc-preview-note { text-align:center; font-size:10px; color:#646d78; }
.arc-entry { display:flex; gap:8px; margin-top:8px; }.arc-entry input { min-width:0; flex:1; }
.arc-chips { display:flex; gap:8px; flex-wrap:wrap; margin:14px 0; }.arc-chips button { border:1px solid #91b9ce; border-radius:8px; background:#1E2A3A; color:#fff; padding:8px 12px; font:inherit; }
.arc-snow { pointer-events:none; position:absolute; inset:0; overflow:hidden; }
.arc-snow>i { position:absolute; top:-8px; left:var(--x); width:var(--size); height:var(--size); background:#eefaff; opacity:.75; animation:arc-fall var(--fall) steps(45,end) var(--delay) infinite; }
@keyframes arc-fall { to { transform:translate(16px,100vh); } }
.arc-finale { position:fixed; inset:0; z-index:900; background:#1E2A3A; color:#f5fbff; overflow:auto; display:grid; place-items:center; padding:calc(env(safe-area-inset-top) + 32px) 24px calc(env(safe-area-inset-bottom) + 26px); cursor:pointer; }
.arc-finale-content { position:relative; width:min(100%,350px); text-align:center; }
.arc-crown { font-size:66px; color:#BFE3F5; margin:16px 0 8px; text-shadow:4px 4px #101d2b; }
.arc-finale h1 { font-size:45px; font-weight:900; line-height:1.05; letter-spacing:3px; margin:0; }
.arc-finale h1 span { display:inline-block; animation:arc-punch .3s steps(3,end) both; animation-delay:calc(var(--letter) * .1s); text-shadow:3px 4px #0e1925; }
@keyframes arc-punch { from { opacity:0; transform:scale(1.8) translateY(-10px); } to { opacity:1; transform:none; } }
.arc-finale-line { color:#BFE3F5; font-size:14px; margin:18px 0 24px; }
.arc-finale .arc-grid { gap:5px; }
.arc-finale .arc-cell { animation:arc-reveal .15s steps(1,end) both; animation-delay:calc(1.8s + var(--i) * .025s); }
@keyframes arc-reveal { from { opacity:0; transform:scale(.4); } to { opacity:1; transform:none; } }
.arc-summary { display:flex; justify-content:space-between; gap:8px; margin-top:24px; animation:arc-punch .5s 4.1s both; }
.arc-summary>div { flex:1; padding-top:12px; }.arc-summary>div+div { border-left:1px solid #789fb455; }.arc-summary b { display:block; font-size:25px; }.arc-summary span { display:block; color:#bdccd8; font-size:11px; }
.arc-close { font-size:11px; color:#a6bbcb; margin:26px 0 0; animation:arc-punch .5s 4.5s both; }
@media(prefers-reduced-motion:reduce) { .arc-snow>i,.arc-finale h1 span,.arc-finale .arc-cell,.arc-summary,.arc-close { animation:none; }.arc-snow>i { top:calc(var(--x)); }.arc-scene .keeper { animation:none; } }
.arc-scene { --arc-distance:240px; }
.arc-scene .scene { filter:none; background:none; }
.arc-scene .scene::before { content:''; position:absolute; inset:0; background:#1E2A3A url(/art/scene-boardwalk.png) no-repeat center 48%; background-size:400px 299px; filter:grayscale(.65) sepia(.2) hue-rotate(155deg) saturate(.7) brightness(.58); }
.arc-scene .keeper { filter:saturate(.55) brightness(.85); }
.arc-scene .bubble { background:#f1f8fb; color:#1E2A3A; }
@keyframes arc-fall { to { transform:translate(16px,var(--arc-distance,100vh)); } }
.arc-finale.arc-settled h1 span,.arc-finale.arc-settled .arc-cell,.arc-finale.arc-settled .arc-summary,.arc-finale.arc-settled .arc-close { animation:none; opacity:1; transform:none; }

/* Winter shares the demo's grade; only the scenery is tinted. */
.scene.scene-winter { background:none; isolation:isolate; --arc-distance:330px; }
.scene-winter::before { content:''; position:absolute; inset:0; z-index:-1; background:#1E2A3A url(/art/scene-boardwalk.png) no-repeat center 48%; background-size:400px 299px; filter:grayscale(.65) sepia(.2) hue-rotate(155deg) saturate(.7) brightness(.58); }
.scene-winter .town-plane { filter:grayscale(.65) sepia(.2) hue-rotate(155deg) saturate(.7) brightness(.58); }
.scene-winter .keeper { filter:saturate(.55) brightness(.85); }
.scene-winter .bubble, .scene-winter .bubble::after { background:#f1f8fb; }
.scene-winter.town-scene::before { background-position:center top; }
.arc-emblem svg { width:24px; height:24px; display:block; }
.arc-legend span { display:flex; align-items:center; gap:5px; }
.arc-legend svg { width:11px; height:11px; color:#BFE3F5; }
.arc-key { display:inline-block; width:10px; height:10px; border:1px solid #728699; background:#3c4652; }
.arc-key.today { background:transparent; border:2px solid #ff795e; }
.arc-teaser { overflow:hidden; background:radial-gradient(ellipse at 100% 0,#34556a 0,transparent 65%),#1E2A3A; }
.arc-teaser h2 { font-size:27px; margin:22px 0 8px; line-height:1.1; }
.arc-teaser p { color:#c3d7e4; font-size:14px; line-height:1.6; margin:0 0 24px; }
.arc-teaser .btn { background:#BFE3F5; color:#182b3c; box-shadow:0 4px 0 #759eb5; }
.arc-finale { display:block; place-items:normal; padding:max(16px, env(safe-area-inset-top), var(--safe-top)) 0 26px; background:radial-gradient(ellipse at 50% 30%,#29485e,#101e2d 75%); }
.arc-finale .arc-finale-scene { width:100%; height:33svh; min-height:190px; max-height:290px; margin:0; border-bottom:3px solid #BFE3F5; box-shadow:0 5px 0 #83b9d133,0 16px 45px #0006; }
.arc-finale-scene::before { background-size:cover; }
.arc-finale-scene .keeper.cheer { height:192px; bottom:10px; left:calc(36% - 47px); animation:arc-enter .65s .55s steps(7,end) both; }
@keyframes arc-enter { from { opacity:0; transform:translateX(-100px); } to { opacity:1; transform:translateX(0); } }
.arc-finale-content { margin:22px auto 0; padding:0 22px; width:min(100%,390px); box-sizing:border-box; }
.arc-finale .arc-eyebrow { font-size:9px; letter-spacing:2px; margin-bottom:12px; }
.arc-finale h1 { font-size:clamp(32px,10vw,44px); letter-spacing:3px; color:#eaf8ff; }
.arc-finale h1 span { animation-delay:calc(1.25s + var(--letter) * .075s); text-shadow:0 3px #47738b,3px 5px #0b1522; }
.arc-finale-line { margin:12px 0 19px; font-size:13px; }
.arc-finale .arc-grid { width:100%; max-width:290px; margin:auto; gap:4px; }
.arc-cell.milestone { outline:2px solid #F4B860; outline-offset:-2px; }
.arc-finale .arc-cell { animation-delay:calc(2.45s + var(--i) * .01s); }
.arc-summary { width:100%; margin-top:18px; border-top:1px solid #789fb4; animation:arc-punch .3s 3.5s both; }
.arc-summary b { font-size:23px; font-variant-numeric:tabular-nums; }
.arc-close { margin-top:18px; animation-delay:5s; }
@media(prefers-reduced-motion:reduce) {
  .arc-finale-scene .keeper.cheer,.arc-finale h1 span,.arc-finale .arc-cell,.arc-finale .arc-summary,.arc-finale .arc-close { animation:none; opacity:1; transform:none; }
  .scene-winter .keeper { animation:none; }
}

/* ---------- list ---------- */
/* Town's winter card keeps the warm page palette. */
.town-screen .arc-card { background:#FFFDF9; color:var(--ink); border:2px solid #BFD9E6; box-shadow:0 4px 0 #BFD9E6; }
.town-screen .arc-eyebrow,.town-screen .arc-title,.town-screen .arc-card h2,.town-screen .arc-emblem { color:#2F6DB5; }
.town-screen .arc-caption,.town-screen .arc-teaser p,.town-screen .arc-count,.town-screen .arc-legend { color:var(--ink-2); }
.town-screen .arc-count b { color:var(--ink); }
.town-screen .arc-legend svg { color:#2F6DB5; }
.town-screen .arc-rules { border-color:#BFD9E6; }
.town-screen .arc-cell { background:#EDF3F6; border-color:#BFD9E6; }
.town-screen .arc-cell.kept { background:#BFE3F5; }
.town-screen .arc-cell.missed { background:#D7DFE4; }
.town-screen .arc-cell.today { border-color:#ff795e; }
.town-screen .arc-cell.milestone { border-color:var(--gold); }
.list-screen { padding-bottom:0; }
.list-screen:has(.list-send) { padding-bottom:104px; }
.list-back { margin:4px 0 18px; }
.list-head .lbl { letter-spacing:2px; font-size:11px; }
.list-head h1 { display:flex; align-items:center; justify-content:space-between; color:var(--ink); font-size:44px; font-weight:900; line-height:1.15; margin:8px 0 12px; letter-spacing:-1px; }
.list-head h1 svg { width:38px; height:38px; }
.list-pill { display:inline-block; padding:6px 12px; border:1px solid var(--line); border-radius:20px; background:var(--card); font-size:12px; font-weight:900; }
.list-coach { display:flex; align-items:center; gap:18px; margin:20px 0; min-height:108px; }
.list-coach img { width:64px; height:112px; object-fit:contain; image-rendering:pixelated; }
.list-coach p { position:relative; flex:1; background:#FFF8EA; border:2px solid var(--ink); border-radius:16px; padding:16px; font-size:17px; font-weight:900; line-height:1.35; box-shadow:0 4px 0 var(--line); }
.list-coach p:before { content:''; position:absolute; width:12px; height:12px; background:#FFF8EA; border-left:2px solid var(--ink); border-bottom:2px solid var(--ink); transform:rotate(45deg); left:-8px; top:30px; }
.list-fill { background:#F5EFE6; border:1.5px solid #DFD5C6; box-shadow:0 3px 0 #DFD5C6; color:var(--ink); display:flex; align-items:center; justify-content:center; gap:10px; }
.list-loading { color:var(--ink-3); font-size:12px; text-align:center; margin:9px 0 20px; min-height:18px; font-weight:700; }
.list-add { display:flex; gap:8px; margin-bottom:26px; }
.list-add input { min-width:0; flex:1; }
.list-add button { padding:10px 14px; }
.list-group { margin:0 0 24px; }
.list-group h2 { display:flex; align-items:center; gap:10px; font-size:17px; margin:0 4px 10px; font-weight:900; }
.list-group h2 svg,.list-group h2 img { width:26px; height:26px; object-fit:contain; }
.list-group h2 span { margin-left:auto; color:var(--ink-3); border-bottom:0; min-width:0; text-align:center; background:#EDE6D8; font-size:11px; padding:2px 6px; border-radius:8px; }
.list-paper { border:1px solid var(--line); border-radius:18px; background:var(--card); box-shadow:var(--shadow); overflow:hidden; }
.list-item { display:flex; align-items:center; gap:9px; min-height:79px; padding:12px 10px; border-bottom:1px solid var(--line); }
.list-item:last-child { border-bottom:0; }
.list-tick { flex-shrink:0; display:grid; place-items:center; width:32px; height:32px; padding:4px; border:2px solid var(--line); border-radius:10px; background:var(--card-2); }
.list-item.have .list-tick { background:var(--good); color:white; border-color:var(--good); }
.list-name { flex:1; min-width:0; overflow-wrap:anywhere; font-size:16px; font-weight:900; line-height:1.2; }
.list-name small { display:block; color:var(--ink-3); font-size:11px; font-weight:700; margin-top:5px; }
.list-item.have .list-name { color:var(--ink-3); text-decoration:line-through; }
.list-qty { display:flex; align-items:center; background:var(--card-2); border:1px solid var(--line); border-radius:10px; font-size:13px; font-weight:900; }
.list-qty button { border:0; background:none; width:27px; height:36px; padding:0; font-weight:900; }
.list-qty span { min-width:15px; text-align:center; }
.list-more { background:#F5EFE6; border:1.5px solid #DFD5C6; border-radius:10px; font-size:22px; padding:8px 0; min-width:24px; }
.list-quantity-pill { display:inline-flex; padding:4px 10px; border-radius:9999px; background:#EEE8DC; color:var(--ink-2); font-weight:900; }
.list-item .list-tick:disabled { background:#EFE8DA; border-color:#D8CEBC; opacity:.55!important; box-shadow:none; }
.list-screen button:disabled { opacity:.45; cursor:default; }
.list-send { position:fixed; bottom:calc(var(--tabs-h) + var(--safe-bottom)); left:50%; transform:translateX(-50%); width:100%; max-width:480px; padding:12px 16px; background:var(--card); border-top:1px solid var(--line); z-index:20; }
.list-progress { margin:22px 0; }
.list-progress ol { display:flex; gap:10px; padding:0; list-style:none; counter-reset:steps; }
.list-progress li { flex:1; font-size:12px; font-weight:800; color:var(--ink-3); counter-increment:steps; }
.list-progress li:before { content:counter(steps); display:grid; place-items:center; height:28px; width:28px; background:var(--track); border-radius:50%; margin-bottom:8px; }
.list-progress li.reached:before { background:var(--coral); color:white; }
.list-progress strong { font-size:15px; }

/* Compact grocery utility layout; reserve space for the opaque send dock. */
.list-head { display:grid; grid-template-columns:1fr auto; align-items:center; }
.list-head .lbl { grid-column:1 / -1; font-size:9px; }
.list-head h1 { font-size:30px; margin:3px 0; }
.list-head h1 svg { width:25px; height:25px; margin-left:12px; }
.list-head .list-pill { margin:0 0 0 12px; padding:4px 9px; }
.list-back { margin:0 0 6px; }
.list-coach { position:relative; height:48px; min-height:48px; gap:12px; margin:6px 0 8px; }
.list-coach:before { content:''; position:absolute; left:0; bottom:0; width:42px; height:6px; border-radius:50%; background:#D0C5B4; opacity:.35; }
.list-coach img { position:relative; width:42px; height:46px; z-index:1; }
.list-coach p { margin:0; padding:7px 10px; font-size:12px; white-space:nowrap; border-radius:12px; box-shadow:0 2px 0 var(--line); }
.list-coach p:before { top:11px; width:8px; height:8px; left:-6px; }
.list-fill { min-height:44px; padding:6px 12px; font-size:15px; }
.list-fill img { width:24px; height:24px; object-fit:contain; }
.list-loading { margin:4px 0 7px; font-size:10px; min-height:14px; }
.list-add { margin-bottom:10px; }
.list-add input,.list-add button { min-height:44px; padding:8px 12px; }
.list-add button { min-width:44px; }
.list-group { margin-bottom:10px; }
.list-group h2 { margin-bottom:5px; font-size:15px; gap:8px; }
.list-group h2 svg,.list-group h2 img { width:24px; height:24px; }
.list-paper { border-radius:14px; box-shadow:0 3px 8px #76501e0a; }
.list-item { min-height:56px; padding:6px 8px; gap:8px; }
.list-tick { position:relative; width:28px; height:28px; border:1.5px solid #B8ADA0; border-radius:8px; box-shadow:inset 0 1px 2px #76501e10; }
.list-tick:after { content:''; position:absolute; inset:-10px; }
.list-name { font-size:14px; }
.list-name small { margin-top:2px; font-size:10px; }
.list-qty { position:relative; flex-shrink:0; width:88px; height:36px; font-variant-numeric:tabular-nums; }
.list-qty button { flex:0 0 44px; width:44px; height:44px; text-align:left; padding-left:8px; }
.list-qty button:last-child { text-align:right; padding:0 8px 0 0; }
.list-qty span { position:absolute; left:30px; right:30px; pointer-events:none; }
.list-more { flex:0 0 44px; width:44px; height:44px; padding:0; margin-left:4px; }
/* The dock plate reaches down to the tab bar so no row shows under it; the button keeps 12 px of plate below it. */
.list-send { background:#FBF1DB; padding:10px 16px 12px; box-shadow:0 -8px 18px #76501e17; }
.list-send .btn { min-height:48px; }

.list-head .lbl { display:none; }
.list-head h1 { font-size:28px; }
.list-coach { margin:2px 0 4px; }
.list-loading { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); margin:0; min-height:0; }
.list-screen:has(.list-fill:disabled) .list-loading { position:static; width:auto; height:auto; clip-path:none; margin:4px 0; }
.list-add { margin-top:8px; }

.list-head { display:flex; flex-wrap:wrap; gap:0 8px; }
.list-head h1 { flex:1 0 auto; gap:12px; }
.list-head .list-pill { flex-shrink:0; margin-left:0; }

/* ---------- tide ---------- */
.tide-top { position:relative; padding:12px 45px 0 0; margin-bottom:16px; }
.tide-top .title { font-size:30px; letter-spacing:-.7px; }
.tide-top .sub { font-size:12px; margin:5px 0 0; }
.tide-top .close-btn { position:absolute; right:0; top:10px; }
.tide-eyebrow { font-size:9px; letter-spacing:1.4px; font-weight:900; margin:0 0 6px; color:var(--ink-2); }
/* Doodle Bug's low-tide shore (177x132 art px, 2 CSS px each on a 390 phone). The water rises over it from 2% (score 0, sand bare) to 48% (100), just under the horizon; the pier is a front layer so Keeper stays dry. */
.tide-hero { position:relative; height:268px; overflow:hidden; isolation:isolate; border:2px solid var(--ink); border-radius:22px; background:#f8d6ad; box-shadow:0 4px var(--ink); }
.tide-plate { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; image-rendering:pixelated; }
.tide-water { position:absolute; bottom:0; width:100%; height:var(--tide-level); background:repeating-linear-gradient(0deg,#477a9ddd 0 19px,#6399b7dd 19px 21px,#477a9ddd 21px 37px); border-top:4px solid #eef8f4; }
.tide-water:before { content:''; position:absolute; top:-8px; width:100%; height:5px; background:#eef8f4; clip-path:polygon(0 60%,10% 60%,10% 0,25% 0,25% 60%,40% 60%,40% 0,55% 0,55% 60%,75% 60%,75% 0,90% 0,90% 60%,100% 60%,100% 100%,0 100%); }
.tide-water span { position:absolute; left:12%; right:20%; bottom:15px; height:3px; background:#a9d4d9; box-shadow:30px -21px #90bccc,-20px -43px #a8d0d6; opacity:.7; }
.tide-reading { position:absolute; left:20px; top:17px; color:var(--ink); }
.tide-number { font-size:64px; line-height:.95; font-weight:900; letter-spacing:-2px; }
.tide-number small { font-size:15px; letter-spacing:0; margin-left:3px; }
.tide-reading strong { display:block; font-size:21px; margin-top:5px; }
/* The tide post: a wooden piling with painted tags at 0, 50 and 100, notched into the post at the same heights the water reaches. */
.tide-markers { position:absolute; right:18px; bottom:calc(2% - 6px); height:calc(46% + 12px); padding-right:13px; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-end; font-size:9px; font-weight:900; }
.tide-markers:before { content:''; position:absolute; right:0; top:-16px; bottom:-24px; width:8px; background:linear-gradient(90deg,#4a2c18 0 2px,#8a5a35 2px 6px,#4a2c18 6px); }
.tide-markers:after { content:''; position:absolute; right:-2px; top:-20px; width:12px; height:5px; background:#4a2c18; }
.tide-markers span { position:relative; line-height:12px; padding:0 4px; border-radius:2px; background:#6b4226; color:#fff4e0; box-shadow:0 2px #3b2414; }
.tide-markers span:after { content:''; position:absolute; right:-13px; top:5px; width:13px; height:2px; background:#3b2414; }
.tide-keeper { position:absolute; bottom:32px; left:16px; width:auto; height:96px; image-rendering:pixelated; }
.tide-say { position:relative; margin:10px 4px 0; background:var(--card); border:2px solid var(--ink); border-radius:15px; padding:10px 14px 11px; box-shadow:0 3px #1e2a3a30; }
.tide-say:before { content:''; position:absolute; top:-9px; left:34px; width:13px; height:13px; background:var(--card); border-left:2px solid var(--ink); border-top:2px solid var(--ink); transform:rotate(45deg); }
.tide-say b { display:block; font-size:9px; letter-spacing:1px; color:#a3472d; }
.tide-say p { font-size:13px; line-height:1.4; font-weight:800; margin:3px 0 0; }
.tide-empty .tide-plate { filter:saturate(.45); }
.tide-empty:after { content:''; position:absolute; inset:100px 0 0; background:linear-gradient(#e7e9e455,transparent); pointer-events:none; }
.tide-empty .tide-keeper { z-index:1; }
.tide-empty .tide-reading strong { font-size:26px; line-height:1.15; max-width:190px; margin-top:8px; }
.tide-screen .section-title { margin-top:22px; font-size:12px; }
.tide-parts { display:flex; flex-direction:column; padding:0 13px; }
.tide-part { display:flex; align-items:center; gap:12px; padding:12px 0; border-bottom:1px solid var(--line); }
.tide-part:last-child { border-bottom:0; }
.tide-part > img { width:28px; height:28px; object-fit:contain; image-rendering:pixelated; }
.tide-part > div { flex:1; }
.tide-part b { display:block; font-size:12px; }
.tide-part small { display:block; font-size:11px; color:var(--ink-3); margin-top:3px; }
.tide-part > span { font-size:22px; font-weight:900; }
.tide-part > span small { display:none; }
.tide-note { font-size:11px; color:var(--ink-3); line-height:1.5; margin:9px 3px 14px; }
.tide-week { padding:14px; margin-top:16px; }
.tide-week-heading { display:flex; align-items:center; justify-content:space-between; }
.tide-week-heading h2 { font-size:16px; margin:0; }
.tide-week-heading > span { font-size:10px; color:var(--ink-3); }
.tide-chart { display:grid; grid-template-columns:repeat(7,1fr); gap:12px; margin-top:12px; }
.tide-day { text-align:center; }
.tide-day b,.tide-day small { display:block; font-size:11px; }
.tide-day small { margin-top:6px; color:var(--ink-3); position:relative; padding-bottom:8px; }
.tide-bar-track { position:relative; height:48px; margin-top:6px; background:var(--track); }
.tide-bar-track i { position:absolute; bottom:0; left:0; width:100%; background:#568daf; border-top:3px solid #b2d6d6; }
.tide-today .tide-bar-track { outline:2px solid #d69432; outline-offset:3px; }
.tide-today small:after { content:''; position:absolute; bottom:0; left:calc(50% - 2px); width:4px; height:4px; background:#d69432; border-radius:50%; }
.tide-no-sleep { display:flex; gap:12px; padding:15px 0; align-items:center; }
.tide-sleep-icon { width:32px; height:32px; }
.tide-no-sleep b { font-size:13px; }
.tide-no-sleep p { font-size:12px; line-height:1.5; margin:5px 0 0; color:var(--ink-3); }
.tide-sync { display:flex; justify-content:center; align-items:center; min-height:44px; text-decoration:none; margin-top:12px; }
.tide-settings { padding:14px; }
.tide-settings > .sub { margin-top:0; font-size:13px; line-height:1.5; }
.tide-settings-status { font-size:12px; font-weight:800; color:var(--ink-2); line-height:1.5; margin:10px 0; }
.tide-settings .grid2 .btn { font-size:13px; min-height:48px; padding:9px 7px; }
.tide-settings .tide-note:last-child { margin-bottom:0; }
@media (max-width:350px) { .tide-top .title { font-size:27px; } .tide-chart { gap:7px; } .tide-parts { column-gap:10px; } .tide-part { align-items:start; flex-direction:column; } }

/* ---------- debrief ---------- */
.debrief-screen { padding-top:10px; }
.debrief-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:19px 0 13px; }
.debrief-eyebrow,.debrief-section-label { font-size:9px; font-weight:900; letter-spacing:1.2px; color:var(--ink-2); }
.debrief-heading h1 { font-size:29px; line-height:1.1; margin:7px 0; letter-spacing:-.7px; }
.debrief-heading p { font-size:14px; font-weight:800; margin:0; }
.debrief-grade { display:grid; place-items:center; flex-shrink:0; width:72px; height:78px; background:#f4b860; color:var(--ink); font-size:52px; font-weight:900; border:3px solid var(--ink); border-radius:6px; box-shadow:4px 4px #d9ad65; margin:0 4px 4px 0; }
.debrief-weeks { display:flex; align-items:center; justify-content:space-between; margin:0 0 20px; }
.debrief-weeks a,.debrief-weeks button { display:grid; place-items:center; width:44px; height:44px; border:1.5px solid var(--line); border-radius:12px; background:var(--card); box-shadow:0 2px 0 var(--line); color:var(--ink); text-decoration:none; }
.debrief-weeks svg { width:20px; height:20px; }
.debrief-weeks button:disabled { opacity:.35; }
.debrief-weeks div { text-align:center; }
.debrief-weeks b { display:block; font-size:14px; }
.debrief-weeks small { display:block; font-size:9px; color:var(--ink-3); margin-top:3px; }
.debrief-note,.debrief-missing-note { font-size:11px; line-height:1.5; color:var(--ink-3); }
.debrief-missing-note { margin:0 0 24px; padding:10px 14px; font-size:12px; color:var(--ink-2); background:#f0e8dc; border:1px solid #e2d5c3; border-radius:12px; }
.debrief-missing-note b { color:var(--ink); }
.debrief-report { position:relative; padding:26px 14px 12px; background:var(--card); border:1px solid var(--line); border-radius:12px 12px 22px 22px; box-shadow:0 4px #dec9a1,var(--shadow); }
.debrief-ribbon { position:absolute; top:-9px; left:20px; right:20px; padding:7px; text-align:center; background:var(--ink); color:var(--card); font-size:10px; font-weight:900; letter-spacing:1.5px; box-shadow:3px 3px #e3c187; }
.debrief-row { display:flex; align-items:center; gap:10px; padding:9px 0; border-bottom:1px solid var(--line); }
.debrief-row > img { width:27px; height:31px; object-fit:contain; }
.debrief-row > div { flex:1; min-width:0; }
.debrief-row b { display:block; font-size:11px; color:var(--ink-2); }
.debrief-row strong { display:block; font-size:18px; line-height:1.3; font-weight:900; }
.debrief-row strong span { font-size:11px; font-weight:700; color:var(--ink-2); }
.debrief-row small { display:block; font-size:9px; line-height:1.4; color:var(--ink-3); }
.debrief-progress { width:52px; height:7px; border-radius:4px; background:#eadbcc; box-shadow:inset 0 0 0 1px #dccab4; overflow:hidden; flex-shrink:0; }
.debrief-progress i { display:block; height:100%; background:var(--coral); border-radius:3px; }
.debrief-meter { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.debrief-meter svg { width:14px; height:14px; color:var(--coral); visibility:hidden; }
.debrief-full svg { visibility:visible; }
.debrief-missing strong { color:#8c827a; }
.debrief-key { font-size:10px; line-height:1.5; color:var(--ink-3); margin:10px 0 0; }
.debrief-boss { display:flex; align-items:center; gap:14px; padding:16px; margin-top:20px; background:var(--ink); color:var(--card); border-radius:18px; box-shadow:0 4px #bcaa89; }
.debrief-boss > img { width:58px; height:75px; object-fit:contain; }
.debrief-boss small { font-size:9px; letter-spacing:1px; color:#efc17c; }
.debrief-boss h2 { margin:5px 0 9px; font-size:20px; }
.debrief-boss b { display:inline-block; padding:5px 9px; background:#f4b860; color:#1e2a3a; font-size:11px; letter-spacing:1px; }
.debrief-boss p { font-size:10px; line-height:1.5; color:#cfd8de; margin:8px 0 0; }
/* Next week is one full-width card: Keeper stands on a plank in its top-left corner beside his pattern line, and the fuel target runs the full width under them. */
.debrief-next { display:grid; grid-template-columns:56px minmax(0,1fr); column-gap:12px; align-items:start; margin-top:22px; padding:15px; background:var(--card); border:2px solid var(--ink); border-radius:18px; box-shadow:3px 3px #dcc49a; }
.debrief-next > img { grid-column:1; grid-row:1 / 4; align-self:end; width:56px; height:96px; object-fit:contain; object-position:bottom; border-bottom:4px solid #a0612e; border-radius:0 0 2px 2px; }
.debrief-speech { display:contents; }
.debrief-speech > b, .debrief-speech > h2, .debrief-speech > p { grid-column:2; }
.debrief-speech > .debrief-target, .debrief-speech > .debrief-feedback { grid-column:1 / -1; }
.debrief-speech h2 { font-size:18px; line-height:1.3; margin:10px 0 7px; }
.debrief-speech p { font-size:12px; line-height:1.5; margin:6px 0; }
.debrief-target { border-top:1px solid var(--line); margin-top:12px; padding-top:2px; }
.debrief-target h2 { font-size:24px; }
.debrief-target h2 span { font-size:12px; }
.debrief-target .btn { min-height:44px; margin-top:14px; }
.debrief-feedback:empty { display:none; }
.debrief-footer { text-align:center; color:var(--ink-3); font-size:11px; line-height:1.6; margin:22px 0 10px; }
.debrief-town-link { display: flex; align-items: center; gap: 13px; background: var(--card); border: 2px solid var(--line); border-radius: 18px; padding: 18px; margin-top: 22px; color: var(--ink); text-decoration: none; box-shadow: var(--shadow); }
.debrief-town-link img { width: 35px; height: 39px; object-fit: contain; }
.debrief-town-link span { flex: 1; }
.debrief-town-link b { display: block; font-size: 19px; }
.debrief-town-link small { display: block; color: var(--ink-3); font-size: 11px; margin-top: 4px; font-weight: 700; }
.debrief-town-link strong { font-size: 28px; }
.debrief-screen a:focus-visible, .debrief-screen button:focus-visible, .debrief-town-link:focus-visible { outline: 3px solid #326C99; outline-offset: 3px; }