/* ============================================================
   Cousin Camp — styles
   "Time Heist" theme, inspired by the film The Bad Guys: a graphic,
   cel-shaded look with an electric-cyan accent, warm brass/amber for
   points & gold, and neon rail ties. Edgy and cinematic.

   Auto light/dark: the dark palette below is the default; a
   prefers-color-scheme: light block near the end flips the content
   surfaces to a matching light palette. The colored banners
   (header, hero, gate backdrop) stay dark/cinematic in both.
   ============================================================ */

:root {
  --sun: #a78bfa;        /* dusk lavender — primary accent (icon's twilight sky) */
  --sun-dark: #c7b7fd;   /* accent text/active on the current surface */
  --sky: #8a6fd6;        /* deeper violet (icon wash) */
  --grass: #46c279;      /* signal green (success / done) */
  --gold: #ffce4d;       /* brass / amber (points, awards) */
  --danger: #ff8a96;     /* short / negative */
  --sand: #322e3a;       /* raised well / chip surface */
  --cream: #26232c;      /* card / panel surface */
  --bar: #1c1a23;        /* bottom tab bar */
  --field: #1b1922;      /* form inputs */
  --muted: #211f27;      /* locked / disabled surfaces */
  --page-bg: #17151d;    /* opaque page base (sticky headers) */
  --ink: #f1ece1;        /* primary text */
  --ink-soft: #a39c91;   /* muted text */
  --deep: #16141a;       /* ink that sits on top of an accent fill */
  --line: rgba(255,255,255,.08);
  --line-2: rgba(255,255,255,.14);
  --edge: rgba(255,255,255,.06);   /* hard top highlight on panels */
  --dash: rgba(255,255,255,.22);   /* dashed avatar wells */
  --inset: rgba(255,255,255,.03);  /* faint inset panels (kid rows) */
  --cert-base: linear-gradient(180deg, #211d27 0%, #18151d 100%);
  --shadow: 0 6px 16px rgba(0,0,0,.45);
  --shadow-lg: 0 16px 38px rgba(0,0,0,.58);
  --radius: 18px;
  --radius-sm: 12px;
  --tab-h: 72px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
}

body {
  font-family: "Nunito", system-ui, -apple-system, sans-serif;
  color: var(--ink);
  background:
    radial-gradient(120% 80% at 50% -10%, #2e2649 0%, rgba(46,38,73,0) 55%),
    linear-gradient(180deg, #1c182a 0%, #141119 60%);
  background-attachment: fixed;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 { font-family: "Baloo 2", "Nunito", sans-serif; margin: 0; }

/* ---------- Header ---------- */
.app-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background:
    radial-gradient(130% 130% at 86% -30%, rgba(167,139,250,.26), transparent 58%),
    linear-gradient(180deg, #282243 0%, #1e1a2e 60%, #181421 100%);
  color: #fff;
  padding: calc(env(safe-area-inset-top) + 12px) 16px 16px;
  box-shadow: var(--shadow);
  border-bottom: 1px solid rgba(167,139,250,.28);
}
/* Blazing fire trails along the bottom edge of the header — the marks the
   time machine leaves behind at 88 mph. */
.app-header::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: repeating-linear-gradient(90deg,
    rgba(255,176,64,.75) 0 9px, transparent 9px 18px);
  opacity: .7;
}
.header-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; }
.brand-mark { font-size: 34px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(167,139,250,.45)); display: flex; }
.brand-mark img { display: block; width: 42px; height: 42px; }
.brand-text h1 { font-size: 24px; font-weight: 800; letter-spacing: .3px; }
.brand-text p { margin: 0; font-size: 13px; opacity: .82; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #c7b7fd; }

.whoami {
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(167,139,250,.14);
  border: 1.5px solid rgba(167,139,250,.5);
  color: #fff;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 800;
  font-size: 14px;
  cursor: pointer;
  backdrop-filter: blur(4px);
  white-space: nowrap;
}
.whoami:active { transform: scale(.96); }
.whoami-emoji { font-size: 18px; }

/* ---------- View container ---------- */
.view {
  max-width: 720px;
  margin: 0 auto;
  padding: 18px 16px calc(var(--tab-h) + env(safe-area-inset-bottom) + 34px);
  outline: none;
}
.view-title {
  font-size: 26px;
  font-weight: 800;
  margin-bottom: 4px;
}
.view-sub { color: var(--ink-soft); font-weight: 700; margin: 0 0 18px; }

/* ---------- Pull to refresh indicator ---------- */
.ptr {
  position: fixed;
  top: calc(env(safe-area-inset-top) - 46px);
  left: 0;
  right: 0;
  display: grid;
  place-items: center;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}
.ptr-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--cream);
  border: 1px solid var(--line);
  box-shadow: var(--shadow);
  display: grid;
  place-items: center;
}
.ptr-icon { font-size: 21px; line-height: 1; color: var(--sun-dark); }
.ptr.ready .ptr-circle { background: var(--sun); border-color: transparent; }
.ptr.ready .ptr-icon { color: var(--deep); }
.parent-app .ptr-icon { color: var(--grass); }
.parent-app .ptr.ready .ptr-circle { background: var(--grass); }
.ptr.spin .ptr-icon { animation: ptr-spin .7s linear infinite; }
@keyframes ptr-spin { to { transform: rotate(360deg); } }

/* ---------- Cards ---------- */
.card {
  background: var(--cream);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 16px;
  margin-bottom: 14px;
  border: 1px solid var(--line);
  border-top-color: var(--edge);
}

/* Hero banner (Today) */
.hero {
  background:
    radial-gradient(120% 95% at 16% -25%, rgba(167,139,250,.32), transparent 55%),
    linear-gradient(160deg, #3b3157 0%, #262136 55%, #332438 115%);
  color: #fff;
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 18px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line);
  border-top-color: rgba(167,139,250,.35);
  /* Pin the hero just beneath the (already sticky) app header so it rides
     along on scroll. --header-h is measured in app.js. */
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 15;
  overflow: hidden;
  transition: padding .25s ease, box-shadow .25s ease;
}
.hero::after {
  content: "";
  position: absolute;
  right: 6px;
  bottom: 2px;
  width: 116px;
  height: 116px;
  background: url("icons/delorean.svg?v=20260612") right bottom / contain no-repeat;
  /* Sit behind the text as a faint watermark so it never covers wording. */
  z-index: 0;
  opacity: .3;
  filter: drop-shadow(0 0 8px rgba(167,139,250,.25));
  pointer-events: none;
}
/* Keep all hero copy layered above the decorative time machine. */
.hero > * { position: relative; z-index: 1; }
.hero .eyebrow { font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; font-size: 12px; color: #c7b7fd; max-height: 22px; }
.hero h2 { font-size: 28px; margin: 4px 0 6px; }
.hero p { margin: 0; font-weight: 700; opacity: .92; max-height: 48px; }
.hero .eyebrow,
.hero h2,
.hero p { transition: font-size .25s ease, margin .25s ease, max-height .25s ease, opacity .2s ease; overflow: hidden; }
/* Shown only on days with no prep to earn (no dessert tracker) — a friendly
   note so the hero never feels empty. */
.hero-progress-label { font-size: 13px; font-weight: 800; margin-top: 10px; }

/* ---------- Crew Dessert Challenge (merged into the hero) ---------- */
/* The day's one header: title/era/date plus the all-or-nothing team reward.
   The whole crew earns the day's dessert only when every cousin finishes
   every prep, tracked by the single progress bar below. */
.hero-dessert { margin-top: 14px; }
.hd-head { display: flex; align-items: center; gap: 8px; }
.hd-emoji { font-size: 22px; line-height: 1; }
/* Text on the hero inherits its pinned #fff (the hero stays dark in light mode
   too), so don't use --ink here — it would flip dark and vanish. */
.hd-title { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 18px; }
.hero.earned .hd-title { color: #8be0a8; }
.hd-desc {
  margin: 5px 0 10px;
  font-size: 13px;
  font-weight: 700;
  opacity: .92;
  overflow: hidden;
  transition: max-height .25s ease, margin .25s ease, opacity .2s ease;
  max-height: 120px;
}
.hero-progress {
  background: rgba(255,255,255,.16);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}
.hero-progress > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--gold), #ffe39a);
  box-shadow: 0 0 10px rgba(255,206,77,.55);
  transition: width .4s ease;
}
.hero.earned .hero-progress > span {
  background: linear-gradient(90deg, var(--grass), #8be0a8);
  box-shadow: 0 0 10px rgba(70,194,121,.6);
}
.hd-count { margin-top: 6px; font-size: 12.5px; font-weight: 800; }
/* The informative prep tally + nudge merged in from the old prep tracker. */
.hd-prep { margin-top: 3px; font-size: 12px; font-weight: 700; opacity: .82; }

/* Once the page scrolls, collapse the hero's heading/date and trim the dessert
   blurb so the title + progress bar stay pinned and compact up top. */
.hero.compact { padding: 12px 16px 13px; }
.hero.compact .eyebrow,
.hero.compact p { max-height: 0; margin: 0; opacity: 0; pointer-events: none; }
.hero.compact h2 {
  font-size: 16px;
  margin: 0 0 2px;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.hero.compact .hero-dessert { margin-top: 8px; }
.hero.compact .hd-desc { max-height: 0; margin: 0; opacity: 0; }

/* ---------- Activity rows ---------- */
.activity {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  transition: transform .12s ease, opacity .2s ease;
}
.activity.done { opacity: .58; }
.activity.done .activity-title { text-decoration: line-through; }
.activity-emoji {
  font-size: 34px;
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  background: var(--sand);
  border: 1px solid var(--line);
  border-radius: 16px;
  flex: 0 0 auto;
}
.activity-body { flex: 1; min-width: 0; }
.activity-top { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.activity-time {
  font-weight: 800;
  color: var(--sun-dark);
  font-size: 13px;
  background: rgba(167,139,250,.16);
  padding: 2px 8px;
  border-radius: 999px;
}
.activity-points {
  margin-left: auto;
  font-weight: 800;
  font-size: 13px;
  color: var(--gold);
  background: rgba(255,206,77,.16);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.activity-info-tag {
  margin-left: auto;
  font-weight: 800;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .03em;
  color: var(--ink-soft);
  background: var(--inset);
  border: 1px solid var(--line);
  padding: 2px 9px;
  border-radius: 999px;
  white-space: nowrap;
}
.activity-title { font-weight: 800; font-size: 20px; line-height: 1.15; color: var(--ink); margin: 5px 0 3px; font-family: "Baloo 2", sans-serif; }
.activity-desc { color: var(--ink-soft); font-size: 14.5px; font-weight: 600; margin: 0 0 7px; }
.activity-loc { font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.activity-cook {
  display: inline-block;
  margin-top: 6px;
  font-size: 13px;
  font-weight: 800;
  color: var(--ink);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
}

.check-btn {
  flex: 0 0 auto;
  align-self: center;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid var(--grass);
  background: transparent;
  color: var(--grass);
  font-size: 20px;
  font-weight: 900;
  cursor: pointer;
  display: grid;
  place-items: center;
  line-height: 1;
  transition: transform .12s ease, background .15s ease;
}
.check-btn:active { transform: scale(.88); }
.check-btn.checked { background: var(--grass); color: var(--deep); box-shadow: 0 0 12px rgba(70,194,121,.5); }

/* ---------- Kiosk activity card (tap-your-face check-in) ---------- */
.activity-card {
  background: var(--cream);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-bottom: 12px;
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  overflow: hidden;
}
/* Informational "heads up" slots — meals, baths, travel, bedtime. Muted and
   slimmer than a points-earning task, with no check-in row. */
.activity-card.info {
  background: var(--inset);
  box-shadow: none;
  opacity: .82;
}
.activity-card.info .activity-head { padding: 11px 14px; }
.activity-card.info .activity-emoji {
  font-size: 26px;
  width: 42px;
  height: 42px;
  background: var(--cream);
  opacity: .9;
}
.activity-card.info .activity-title { font-size: 16px; color: var(--ink-soft); }

/* The current/next activity on the Today tab — the moment the app opens to.
   A lavender accent ring and a small ribbon lift it out of the day's list. */
.activity-card.is-next {
  border-color: var(--sun);
  box-shadow: 0 0 0 2px var(--sun), var(--shadow-lg);
  opacity: 1; /* stay fully lit even when the spotlight lands on an info slot */
}
.next-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .8px;
  text-transform: uppercase;
  color: var(--deep);
  background: var(--sun);
}
.next-badge.now { background: var(--grass); }

/* Prepared cards — the points-earning activities. A gold accent and a
   prep-checklist label set them apart from plain reference cards. */
.activity-card.prep { border-left: 4px solid var(--gold); }
.prep-item-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: 14px;
  color: var(--ink);
}
.prep-item-label::before { content: "☐ "; color: var(--ink-soft); }

/* Per-task "everyone" one-tap shortcut under each prep item's faces. */
.prep-all-btn {
  display: block;
  margin: 0 14px 12px auto;
  padding: 7px 14px;
  font-size: 13px;
  font-weight: 800;
  color: var(--deep);
  background: var(--gold);
  border: none;
  border-radius: 999px;
  cursor: pointer;
  transition: transform .08s, background .15s, color .15s;
}
.prep-all-btn:active { transform: scale(.95); }
.prep-all-btn.ready {
  color: var(--ink-soft);
  background: var(--inset);
  border: 1px solid var(--line);
}

/* Card-wide "All ready" shortcut: a prominent, full-width button that ticks
   every prep item done for all the cousins shown on this card. Sits just above
   the per-item rows as the one-tap way to get everyone prepped at once. */
.prep-allready-btn {
  display: block;
  width: calc(100% - 28px);
  margin: 2px 14px 12px;
  padding: 11px 14px;
  font-size: 15px;
  font-weight: 800;
  color: var(--deep);
  background: var(--gold);
  border: none;
  border-radius: 14px;
  cursor: pointer;
  transition: transform .08s, background .15s, color .15s;
}
.prep-allready-btn:active { transform: scale(.97); }
.prep-allready-btn.ready {
  color: var(--ink-soft);
  background: var(--inset);
  border: 1px solid var(--line);
}

/* ---- Combined assignments timeline ------------------------------------
   The Assignments tab is one chronological list of .activity-card duties:
   meals to cook, activities to lead, and today's prep all in order. Two
   cross-cutting states drive the "past" treatment regardless of card kind:
   .assign-primary spotlights the soonest upcoming duty; .assign-past tucks
   everything already done into a minimal, inactive card. */

/* Plain (non-prep) duty cards — a meal to cook or an activity with no prep. */
.activity-card.duty { border-left: 4px solid var(--grass); }
.activity-when {
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 14px;
  color: var(--grass);
  white-space: nowrap;
}
.cd-tags { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }

/* The soonest upcoming duty — the one that matters most right now. Given a
   bolder accent and lift so it reads as the primary focus of the timeline. */
.activity-card.assign-primary {
  border-left-width: 5px;
  box-shadow: 0 5px 16px rgba(0, 0, 0, .11);
}

/* Duties that are already done (an earlier day, or earlier today) — collapsed
   to a minimal, inactive card so they don't compete with the soonest one. A
   prep card can still be tapped open to fix a missed item; plain duty cards
   just sit quietly. */
.activity-card.assign-past {
  opacity: .55;
  box-shadow: none;
  border-left-color: var(--line);
}
.activity-card.assign-past .activity-head {
  cursor: pointer;
  align-items: center;
  padding: 9px 14px;
}
/* Collapsed by default: a single slim summary line. The big emoji, role tag,
   description, location, partners and the whole prep checklist stay hidden
   until the card is tapped open — then it restores to a full card. */
.activity-card.assign-past:not(.expanded) .activity-emoji,
.activity-card.assign-past:not(.expanded) .activity-desc,
.activity-card.assign-past:not(.expanded) .activity-loc,
.activity-card.assign-past:not(.expanded) .cd-tags,
.activity-card.assign-past:not(.expanded) .cd-role,
.activity-card.assign-past:not(.expanded) .prep-item-label,
.activity-card.assign-past:not(.expanded) .kidrow,
.activity-card.assign-past:not(.expanded) .prep-all-btn,
.activity-card.assign-past:not(.expanded) .prep-allready-btn { display: none; }
.activity-card.assign-past:not(.expanded) .activity-body {
  display: flex;
  align-items: baseline;
  gap: 8px;
  flex: 1 1 auto;
  min-width: 0;
}
.activity-card.assign-past:not(.expanded) .activity-top {
  flex: 0 0 auto;
  gap: 8px;
}
.activity-card.assign-past:not(.expanded) .activity-title {
  font-size: 14px;
  margin: 0;
  min-width: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.activity-card.assign-past.expanded { opacity: 1; }

.prep-past-status {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.prep-status-pill {
  font-size: 12px;
  font-weight: 800;
  color: var(--ink-soft);
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 3px 10px;
  white-space: nowrap;
}
.prep-status-pill.ready {
  color: var(--deep);
  background: var(--gold);
  border-color: transparent;
}
.prep-past-chev {
  color: var(--ink-soft);
  font-size: 11px;
  transition: transform .15s;
}
.activity-card.assign-past.expanded .prep-past-chev { transform: rotate(180deg); }

/* Read-only prep list shown under prepared cards on the Schedule tab. */
.prep-preview {
  background: var(--inset);
  border-top: 1px solid var(--line);
  padding: 10px 16px 12px;
}
.prep-preview-head {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  margin-bottom: 5px;
}
.prep-preview-item {
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-soft);
  padding: 2px 0;
}
.activity-head {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  padding: 16px 16px 14px;
}
.kidrow-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--ink-soft);
  background: var(--inset);
  border-top: 1px solid var(--line);
  padding: 9px 14px 2px;
}
.kidrow {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 10px 12px;
  background: var(--inset);
}
.kid-check {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  width: 58px;
  padding: 5px 2px;
  border: none;
  background: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  transition: transform .1s ease;
}
.kid-check:active { transform: scale(.9); }
.kc-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 23px;
  background: var(--sand);
  border: 2.5px dashed var(--dash);
  transition: border-color .12s ease, opacity .12s ease;
}
.kid-check:not(.done) .kc-avatar { opacity: .5; }
.kid-check.done .kc-avatar { border-style: solid; border-color: var(--kc); background: #f4efe6; box-shadow: 0 0 12px color-mix(in srgb, var(--kc) 55%, transparent); }
.kc-check {
  position: absolute;
  right: -4px;
  bottom: -4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--grass);
  color: var(--deep);
  font-size: 12px;
  font-weight: 900;
  line-height: 1;
  display: none;
  place-items: center;
  border: 2px solid var(--cream);
}
.kid-check.done .kc-check { display: grid; }
.kc-name { font-size: 11px; font-weight: 800; color: var(--ink-soft); line-height: 1; }
.kid-check.done .kc-name { color: var(--ink); }

/* ---------- Day-pill navigator (schedule) ---------- */
/* A pinned row of one pill per camp day. Tap a pill to jump straight to that
   day; the pill for the day in view stays highlighted. Sits just beneath the
   app header; the day headers below stick under it (--daybar-h, measured in
   app.js). The negative margins let it bleed to the view edges. */
.daybar {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 14;
  display: flex;
  justify-content: center;
  gap: 8px;
  overflow-x: auto;
  scrollbar-width: none;
  margin: -4px -16px 16px;
  padding: 10px 16px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--line);
}
.daybar::-webkit-scrollbar { display: none; }
.daypill {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  min-width: 52px;
  padding: 7px 10px;
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  color: var(--ink);
  background: var(--cream);
  border: 1px solid var(--line);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.daypill .dp-dow { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-soft); }
.daypill .dp-num { font-size: 18px; font-weight: 800; line-height: 1; font-family: "Baloo 2", sans-serif; }
/* The current camp day always wears a dot so it's findable even when another
   day is the active (in-view) pill. */
.daypill.is-today .dp-num::after {
  content: "";
  display: block;
  width: 5px; height: 5px;
  margin: 3px auto 0;
  border-radius: 50%;
  background: var(--sun);
}
.daypill.active {
  background: var(--sun);
  border-color: transparent;
  color: var(--deep);
}
.daypill.active .dp-dow { color: var(--deep); opacity: .8; }
.daypill.active.is-today .dp-num::after { background: var(--deep); }

/* ---------- Day section (schedule) ---------- */
.day-block { margin-bottom: 22px; }
.day-head {
  display: flex;
  align-items: center;
  gap: 10px;
  /* Stick each day's header just beneath the app header and the day-pill bar
     as you scroll, so you always know which day you're looking at. --header-h
     and --daybar-h are measured in app.js; the negative margins let the bar
     bleed to the view edges. */
  position: sticky;
  top: calc(var(--header-h, 64px) + var(--daybar-h, 56px));
  z-index: 12;
  margin: 0 -16px 12px;
  padding: 10px 16px;
  /* Opaque backing so activity rows scrolling underneath don't ghost
     through the header. Theme-aware so text stays readable in light mode. */
  background: var(--page-bg);
  border-bottom: 1px solid var(--line);
}
.day-badge {
  background: var(--sky);
  color: var(--deep);
  border-radius: 14px;
  padding: 6px 10px;
  text-align: center;
  font-weight: 800;
  line-height: 1.1;
  min-width: 54px;
  box-shadow: var(--shadow);
}
.day-badge .dow { font-size: 11px; text-transform: uppercase; opacity: .9; }
.day-badge .dnum { font-size: 20px; font-family: "Baloo 2", sans-serif; }
.day-head h3 { font-size: 19px; }
.day-head .day-theme { color: var(--ink-soft); font-weight: 700; font-size: 13px; }
.day-block.is-today .day-badge { background: var(--sun); color: var(--deep); box-shadow: 0 0 14px rgba(167,139,250,.5); }
.today-pill {
  font-size: 11px;
  font-weight: 800;
  color: var(--deep);
  background: var(--sun);
  padding: 2px 8px;
  border-radius: 999px;
  margin-left: auto;
}

/* ---------- Buttons & controls ---------- */
.btn {
  border: none;
  background: var(--sun);
  color: var(--deep);
  font-weight: 800;
  font-family: "Baloo 2", sans-serif;
  font-size: 15px;
  padding: 11px 16px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(167,139,250,.32);
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.btn:active { transform: scale(.97); }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border: 2px solid var(--line-2);
  font-weight: 800;
  padding: 10px 16px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: none;
  font-family: "Baloo 2", sans-serif;
}
select.day-filter {
  border: 2px solid var(--line-2);
  background: var(--sand);
  border-radius: 12px;
  padding: 10px 12px;
  font-weight: 700;
  font-family: "Nunito", sans-serif;
  color: var(--ink);
  font-size: 14px;
}

/* ---------- Awards ---------- */
.podium {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 22px;
}
.podium-step {
  flex: 1;
  max-width: 120px;
  text-align: center;
}
.podium-avatar {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 28px;
  margin: 0 auto 6px;
  box-shadow: var(--shadow);
  border: 3px solid rgba(255,255,255,.85);
}
.podium-name { font-weight: 800; font-size: 14px; }
.podium-pts { font-weight: 800; font-size: 13px; color: var(--ink-soft); }
.podium-bar {
  border-radius: 14px 14px 0 0;
  margin-top: 8px;
  color: var(--deep);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 22px;
  display: grid;
  place-items: center;
  box-shadow: var(--shadow);
}
.podium-step.rank-1 .podium-bar { height: 92px; background: linear-gradient(180deg, var(--gold), #d99a00); }
.podium-step.rank-2 .podium-bar { height: 70px; background: linear-gradient(180deg, #cfd6dd, #99a1a9); }
.podium-step.rank-3 .podium-bar { height: 54px; background: linear-gradient(180deg, #e0a06a, #b9743c); }

.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: var(--cream);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-bottom: 10px;
  border: 1px solid var(--line);
  border-top-color: var(--edge);
}
.leaderboard-row.me { outline: 2px solid var(--sun); box-shadow: 0 0 14px rgba(167,139,250,.3); }
.lb-rank { font-weight: 800; font-size: 16px; color: var(--ink-soft); width: 26px; text-align: center; }
.lb-avatar { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; font-size: 22px; border: 2px solid rgba(255,255,255,.7); box-shadow: var(--shadow); flex: 0 0 auto; }
.lb-name { font-weight: 800; flex: 1; }
.lb-name small { display: block; font-weight: 700; color: var(--ink-soft); font-size: 12px; }
.lb-pts { font-weight: 800; color: var(--gold); background: rgba(255,206,77,.16); padding: 4px 11px; border-radius: 999px; }

.badge-row { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--sand);
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 6px 12px;
  font-weight: 800;
  font-size: 13px;
}
.badge.locked { opacity: .4; }

/* ---------- Camper modal ---------- */
.modal[hidden] { display: none; }
.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 18px;
}
.modal-backdrop { position: absolute; inset: 0; background: rgba(8,7,11,.7); backdrop-filter: blur(3px); }
.modal-card {
  position: relative;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  border-radius: 22px;
  padding: 22px;
  width: 100%;
  max-width: 420px;
  box-shadow: var(--shadow-lg);
  max-height: 86vh;
  overflow: auto;
}
.modal-card h2 { font-size: 24px; }
.modal-sub { color: var(--ink-soft); font-weight: 700; margin: 4px 0 16px; }
.camper-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(88px, 1fr));
  gap: 10px;
  margin-bottom: 16px;
}
.camper-pick {
  border: 2px solid var(--line);
  background: var(--sand);
  color: var(--ink);
  border-radius: 16px;
  padding: 12px 6px;
  cursor: pointer;
  text-align: center;
  font-weight: 800;
  font-size: 13px;
  transition: transform .1s ease;
}
.camper-pick:active { transform: scale(.94); }
.camper-pick.active { border-color: var(--sun); background: rgba(167,139,250,.14); box-shadow: 0 0 12px rgba(167,139,250,.3); }
.camper-pick .ce { font-size: 30px; display: block; margin-bottom: 4px; }
.camper-pick .cp-age { display: block; font-weight: 700; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.camper-pick .cp-pts { display: block; font-weight: 700; font-size: 11px; color: var(--ink-soft); margin-top: 2px; }
.camper-pick.disabled, .camper-pick:disabled { opacity: .42; cursor: not-allowed; }

/* ---------- Camper photo avatars ---------- */
/* A real headshot used in place of a cousin's emoji (see camperFace in core.js).
   It fills whatever avatar "well" it sits in and inherits that well's shape. */
.avatar-photo { object-fit: cover; display: block; }
.kc-avatar .avatar-photo,
.cc-avatar .avatar-photo,
.lb-avatar .avatar-photo,
.ab-avatar .avatar-photo { width: 100%; height: 100%; border-radius: inherit; }
/* The name-gate and award pickers show the emoji glyph directly — give the
   photo a fixed round size in those spots. */
.camper-pick .ce.avatar-photo { width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 4px; }
.tp-emoji.avatar-photo { width: 40px; height: 40px; border-radius: 50%; }
.whoami-emoji .avatar-photo { width: 20px; height: 20px; border-radius: 50%; }

/* ---------- Bottom tab bar (floating glass capsule) ---------- */
.tabbar {
  position: fixed;
  left: 14px;
  right: 14px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  z-index: 30;
  height: var(--tab-h);
  display: flex;
  gap: 4px;
  padding: 7px;
  border-radius: 24px;
  /* Translucent glass that adapts to light/dark via --bar. */
  background: color-mix(in srgb, var(--bar) 78%, transparent);
  -webkit-backdrop-filter: blur(20px) saturate(1.5);
  backdrop-filter: blur(20px) saturate(1.5);
  /* iPadOS/iOS Safari (notably 26) drops a `position: fixed` bar that also
     carries a backdrop-filter onto the scrolling layer, so it drifts up with
     the page instead of staying pinned. Forcing the bar onto its own GPU
     compositing layer keeps it fixed to the viewport. */
  transform: translateZ(0);
  will-change: transform;
  border: 1px solid var(--line-2);
  box-shadow:
    0 14px 34px rgba(0,0,0,.5),
    inset 0 1px 0 rgba(255,255,255,.08);
}
/* display:flex below would otherwise override the [hidden] attribute, so the
   parents app can hide the whole bar (sign-in gate) and the Assignments tab
   (grown-ups with no duties) by toggling `hidden`. */
.tabbar[hidden], .tab[hidden] { display: none; }
.tab {
  flex: 1;
  border: none;
  background: none;
  color: var(--ink-soft);
  font-weight: 800;
  font-size: 10.5px;
  letter-spacing: .2px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border-radius: 18px;
  font-family: "Nunito", sans-serif;
  transition: color .18s ease, background .18s ease, box-shadow .18s ease;
}
.tab-icon {
  width: 28px;
  height: 28px;
  display: block;
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.45));
  transition: transform .18s ease;
}
.tab:active .tab-icon { transform: scale(.9); }
/* Active tab: filled accent pill with a glow. */
.tab.active {
  color: var(--deep);
  background: linear-gradient(180deg, var(--sun) 0%, var(--sky) 100%);
  box-shadow:
    0 6px 16px rgba(167,139,250,.4),
    inset 0 1px 0 rgba(255,255,255,.25);
}
.tab.active .tab-icon {
  filter: drop-shadow(0 1px 2px rgba(0,0,0,.3));
  transform: translateY(-1px) scale(1.06);
}

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: 40px 20px;
  color: var(--ink-soft);
}
.empty .big { font-size: 52px; margin-bottom: 8px; }
.empty p { font-weight: 700; margin: 6px 0 0; }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: calc(var(--tab-h) + env(safe-area-inset-bottom) + 16px);
  transform: translateX(-50%) translateY(20px);
  background: #0e0d12;
  color: #fff;
  border: 1px solid rgba(167,139,250,.4);
  padding: 11px 18px;
  border-radius: 999px;
  font-weight: 800;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
  z-index: 60;
  font-size: 14px;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---------- Kudos fly-by (DeLorean / Marty confirmation) ---------- */
/* One of the camp riders streaks across the screen when a grown-up gives
   kudos — the DeLorean and Marty on his skateboard take turns. Fixed +
   pointer-events:none so it never blocks taps; it self-removes on
   animationend (see deloreanZoom() in core.js). */
.kudos-flyby {
  position: fixed;
  top: 46%;
  left: 0;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  pointer-events: none;
  z-index: 70;
  will-change: transform, opacity;
  animation: kudos-fly 1.15s cubic-bezier(.45, .05, .35, 1) forwards;
}
.kudos-flyby img {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 10px 16px rgba(0, 0, 0, .35));
}
/* Speed streak burning behind the car as it rips past. */
.kudos-flyby::before {
  content: "";
  position: absolute;
  top: 56%;
  right: 64%;
  width: 70vw;
  height: 14px;
  transform: translateY(-50%);
  border-radius: 999px;
  background: linear-gradient(90deg, transparent, rgba(167, 139, 250, .55) 40%, rgba(251, 191, 36, .85));
  filter: blur(3px);
}
@keyframes kudos-fly {
  0%   { transform: translateX(-60vw) scale(.65); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translateX(40vw) scale(1.08); }
  88%  { opacity: 1; }
  100% { transform: translateX(130vw) scale(1.18); opacity: 0; }
}
/* The DeLorean's turn: the glyph faces left, so it rides right→left, with
   the speed streak and smoke trailing off to its right. */
.kudos-flyby.is-delorean {
  animation-name: kudos-fly-rtl;
}
.kudos-flyby.is-delorean::before {
  right: auto;
  left: 64%;
  background: linear-gradient(270deg, transparent, rgba(167, 139, 250, .55) 40%, rgba(251, 191, 36, .85));
}
@keyframes kudos-fly-rtl {
  0%   { transform: translateX(110vw) scale(.65); opacity: 0; }
  12%  { opacity: 1; }
  50%  { transform: translateX(10vw) scale(1.08); }
  88%  { opacity: 1; }
  100% { transform: translateX(-80vw) scale(1.18); opacity: 0; }
}
/* Marty's turn: a touch smaller and a lot slower (a kid on a board isn't
   doing 88 mph), rolling with a little kick-push bob as he crosses. */
.kudos-flyby.is-marty {
  width: 150px;
  height: 150px;
  margin-top: -75px;
  animation-duration: 2.9s;
}
.kudos-flyby.is-marty::before {
  height: 8px;
  background: linear-gradient(90deg, transparent, rgba(125, 211, 252, .5) 40%, rgba(167, 139, 250, .7));
}
.kudos-flyby.is-marty img {
  animation: marty-bob .42s ease-in-out infinite;
}
@keyframes marty-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-7px) rotate(-4deg); }
}
/* Marty just cruises straight across now — no backflip. The wrapper stays
   so the bob can wiggle the img inside it without any extra spin. */
.marty-flip {
  width: 100%;
  height: 100%;
}
/* Smoke puffs trailing from the car's tailpipe (spawned in core.js). Each one
   is dropped in place, then balloons out and fades so the trail hangs in the
   air as the DeLorean roars off. */
.delorean-smoke {
  position: fixed;
  width: 26px;
  height: 26px;
  margin: -13px 0 0 -13px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(226, 232, 240, .9), rgba(148, 163, 184, .35) 60%, transparent 72%);
  pointer-events: none;
  z-index: 69;
  will-change: transform, opacity;
  animation: delorean-smoke 0.7s ease-out forwards;
}
@keyframes delorean-smoke {
  0%   { transform: scale(.4) translateX(0); opacity: .85; }
  100% { transform: scale(2.4) translateX(26px); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .kudos-flyby,
  .delorean-smoke { display: none; }
}

/* ---------- Chrono-Burst ----------
   Time-portal flourish fired from a camper's avatar on check-in (spawned in
   chronoBurst() in core.js). Fixed at the tap point, pointer-events:none so it
   never blocks the next tap; the whole thing self-removes after the animation.
   Children sit at the container's origin (the avatar center) and animate out. */
.chrono-burst {
  position: fixed;
  width: 0;
  height: 0;
  z-index: 71;
  pointer-events: none;
}
/* Colors come from per-burst hues (--h1 primary, --h2 secondary) set in
   chronoBurst(); they fall back to the camp lavender/gold if unset. */
.chrono-burst {
  --h1: 258;
  --h2: 44;
}
.chrono-ring {
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  margin: -26px 0 0 -26px;
  border-radius: 50%;
  border: 4px solid hsla(var(--h1), 90%, 76%, .9);
  box-shadow: 0 0 26px hsla(var(--h1), 90%, 70%, .65), inset 0 0 16px hsla(var(--h1), 85%, 84%, .55);
  will-change: transform, opacity;
  animation: chrono-ring .8s cubic-bezier(.2, .7, .3, 1) forwards;
}
.chrono-ring--2 {
  width: 32px;
  height: 32px;
  margin: -16px 0 0 -16px;
  border-width: 3.5px;
  border-color: hsla(var(--h2), 90%, 66%, .85);
  box-shadow: 0 0 22px hsla(var(--h2), 90%, 64%, .6);
  animation-delay: .1s;
}
.chrono-spark {
  position: absolute;
  left: 0;
  top: 0;
  width: 15px;
  height: 15px;
  margin: -7.5px 0 0 -7.5px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff, hsl(var(--h1), 95%, 68%) 55%, transparent 72%);
  box-shadow: 0 0 14px hsla(var(--h1), 95%, 66%, .85);
  will-change: transform, opacity;
  animation: chrono-spark .95s ease-out var(--d, 0ms) forwards;
}
.chrono-spark--alt {
  background: radial-gradient(circle, #fff, hsl(var(--h2), 95%, 64%) 55%, transparent 72%);
  box-shadow: 0 0 14px hsla(var(--h2), 95%, 62%, .85);
}
.chrono-streak {
  position: absolute;
  left: 0;
  top: 0;
  width: 64px;
  height: 3.5px;
  margin: -1.75px 0 0 -32px;
  border-radius: 3px;
  background: linear-gradient(90deg, hsla(var(--h1), 85%, 84%, 0), hsla(var(--h1), 85%, 84%, .9));
  filter: blur(.5px);
  transform-origin: center;
  will-change: transform, opacity;
  animation: chrono-streak .65s ease-in var(--d, 0ms) forwards;
}
@keyframes chrono-ring {
  0%   { transform: scale(.1); opacity: 0; }
  18%  { opacity: .9; }
  100% { transform: scale(5); opacity: 0; }
}
@keyframes chrono-spark {
  0%   { transform: translate(0, 0) scale(1); opacity: 0; }
  15%  { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(.2); opacity: 0; }
}
@keyframes chrono-streak {
  0%   { transform: rotate(var(--a)) translateX(150px) scaleX(1); opacity: 0; }
  30%  { opacity: .85; }
  100% { transform: rotate(var(--a)) translateX(14px) scaleX(.3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .chrono-burst { display: none; }
}

/* ---------- Section headings (Awards) ---------- */
.section-title { font-size: 19px; margin: 22px 0 4px; }
.section-note { color: var(--ink-soft); font-weight: 700; font-size: 13px; margin: 0 0 12px; }
.section-note b { color: var(--ink); }

/* ---------- Camp Card ---------- */
.camp-card {
  display: flex;
  gap: 14px;
  align-items: center;
  background: linear-gradient(135deg, var(--cc, var(--sun)) 0%, #16141a 230%);
  color: #fff;
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
  margin-bottom: 8px;
}
.cc-avatar {
  font-size: 38px;
  width: 64px; height: 64px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.28);
  border-radius: 18px;
  flex: 0 0 auto;
}
.cc-info { flex: 1; min-width: 0; }
.cc-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 21px; line-height: 1.1; }
.cc-sub { font-weight: 700; opacity: .9; font-size: 13px; margin-bottom: 8px; }
.cc-stats { display: flex; gap: 8px; }
.cc-stat {
  background: rgba(0,0,0,.26);
  border-radius: 12px;
  padding: 6px 8px;
  text-align: center;
  flex: 1;
}
.cc-stat b { display: block; font-family: "Baloo 2", sans-serif; font-size: 18px; }
.cc-stat span { font-size: 10.5px; font-weight: 800; opacity: .92; line-height: 1.1; display: block; }

/* ---------- Trophy Case ---------- */
.trophy-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.trophy {
  background: var(--cream);
  border-radius: var(--radius-sm);
  padding: 12px 8px;
  text-align: center;
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  border-top-color: var(--edge);
}
.trophy.locked { opacity: .6; background: var(--muted); }
.tr-emoji { font-size: 32px; line-height: 1; }
.trophy.locked .tr-emoji { filter: grayscale(1); opacity: .6; }
.tr-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 13.5px; margin-top: 4px; }
.tr-hint { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; line-height: 1.2; }
.trophy.got .tr-hint { color: var(--grass); }

/* ---------- Certificate ---------- */
.certificate {
  background:
    repeating-linear-gradient(45deg, rgba(255,206,77,.06) 0 10px, transparent 10px 20px),
    var(--cert-base);
  border: 3px double var(--gold);
  border-radius: var(--radius);
  padding: 22px 18px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.cert-top { font-family: "Baloo 2", sans-serif; font-weight: 800; color: var(--gold); letter-spacing: .5px; }
.cert-award { text-transform: uppercase; letter-spacing: 3px; font-size: 11px; font-weight: 800; color: var(--ink-soft); margin-top: 6px; }
.cert-name { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 28px; margin: 8px 0 2px; color: var(--ink); }
.cert-title { font-weight: 800; color: var(--sun-dark); font-size: 17px; }
.cert-blurb { font-weight: 700; color: var(--ink-soft); font-size: 13.5px; margin: 8px auto 14px; max-width: 320px; }
.cert-stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 14px; }
.cert-stats span { background: var(--sand); border-radius: 999px; padding: 5px 11px; font-weight: 800; font-size: 12.5px; }
.cert-sign { font-weight: 700; color: var(--ink-soft); font-size: 13px; }
.cert-sign span { font-family: "Baloo 2", sans-serif; font-size: 20px; color: var(--ink); }

/* ---------- Camp roster ---------- */
.roster-row {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  margin-bottom: 8px;
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  text-align: left;
}
.roster-row.me { outline: 2px solid var(--sun); box-shadow: 0 0 14px rgba(167,139,250,.3); }
/* Grown-up generosity leaderboard (parents' app) reuses the roster rows, but
   the rows aren't tappable here. */
.awarder-board { margin-top: 22px; }
.awarder-board .roster-row { cursor: default; }
.ros-name { font-weight: 800; flex: 1; min-width: 0; }
.ros-name small { display: block; font-weight: 700; color: var(--ink-soft); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ros-you { display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; color: var(--sun-dark); background: rgba(167,139,250,.16); padding: 1px 7px; border-radius: 999px; vertical-align: middle; }
.ros-pts { font-weight: 800; color: var(--gold); background: rgba(255,206,77,.16); padding: 4px 10px; border-radius: 999px; font-size: 13px; flex: 0 0 auto; }

/* ---------- Passcode gate ---------- */
.gate {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 20px;
  background:
    radial-gradient(130% 90% at 18% -10%, rgba(167,139,250,.28), transparent 55%),
    radial-gradient(120% 80% at 92% 110%, rgba(255,206,77,.16), transparent 55%),
    linear-gradient(165deg, #232231 0%, #1a1922 55%, #15131b 120%);
}
.gate-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  border-radius: 22px;
  padding: 28px 22px;
  width: 100%;
  max-width: 380px;
  text-align: center;
  box-shadow: var(--shadow-lg);
}
.gate-emoji { font-size: 44px; line-height: 1; margin-bottom: 6px; }
.gate-card h2 { font-size: 26px; }
.gate-card p { color: var(--ink-soft); font-weight: 700; margin: 6px 0 16px; }
.gate-card input {
  width: 100%;
  border: 2px solid var(--line-2);
  background: var(--field);
  color: var(--ink);
  border-radius: 14px;
  padding: 13px 14px;
  font-size: 16px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  text-align: center;
  margin-bottom: 12px;
}
.gate-card input:focus { outline: none; border-color: var(--sun); box-shadow: 0 0 0 3px rgba(167,139,250,.25); }
.gate-card .btn { width: 100%; justify-content: center; font-size: 16px; padding: 13px; }
.gate-note { font-size: 12.5px; margin: 12px 0 0 !important; }

/* ---------- Parents app (parent.html) ---------- */
/* A warm brass/green grown-ups accent to tell the two apps apart. */
.app-header--parent {
  background:
    radial-gradient(130% 130% at 86% -30%, rgba(255,206,77,.24), transparent 58%),
    linear-gradient(180deg, #2a2620 0%, #201d18 60%, #1a1712 100%);
  border-bottom-color: rgba(255,206,77,.3);
}
.app-header--parent::after {
  background: repeating-linear-gradient(90deg,
    rgba(255,206,77,.55) 0 9px, transparent 9px 18px);
}
.parent-app .whoami { text-decoration: none; background: rgba(255,206,77,.14); border-color: rgba(255,206,77,.5); }
/* The longer "Cousin Camp Parent App" title needs room to land on two tidy
   lines, so shrink the campers-app button and ease the heading size. */
.parent-app .whoami { padding: 5px 9px; font-size: 11.5px; gap: 5px; }
.parent-app .whoami-emoji { font-size: 14px; }
.parent-app .brand-text h1 { font-size: 19px; line-height: 1.12; text-wrap: balance; }
/* No bottom tab bar on the parents app, so trim the reserved space. */
.view--notabs { padding-bottom: calc(env(safe-area-inset-bottom) + 28px); }

/* The cousin picker on the Award tab is pinned just beneath the header so
   re-targeting a cousin is always one tap — no scrolling back up past the
   kudos/bonus/badge sections. Full-bleed within the view's 16px padding with
   an opaque base so the awards scroll cleanly underneath it. */
.picker-sticky {
  position: sticky;
  top: var(--header-h, 64px);
  z-index: 12;
  margin: 0 -16px 10px;
  padding: 10px 16px 2px;
  background: var(--page-bg);
  border-bottom: 1px solid var(--line);
}
.picker-sticky .target-picker { margin-bottom: 0; }

/* Sign-in gate (enter your first name). */
.name-gate { text-align: center; max-width: 440px; margin: 24px auto; }
.name-gate .ng-emoji { font-size: 46px; }
.name-gate h2 { font-size: 24px; margin-top: 4px; }
.name-gate .ng-sub { color: var(--ink-soft); font-weight: 700; font-size: 13.5px; margin: 8px 0 16px; }
.name-gate .ng-input { text-align: center; font-size: 17px; margin-bottom: 10px; }
.name-gate .ng-go { width: 100%; justify-content: center; font-size: 16px; padding: 13px; }
.name-gate .ng-or { color: var(--ink-soft); font-weight: 800; font-size: 12.5px; margin: 16px 0 8px; }
.name-quick { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.name-chip { padding: 8px 16px; font-size: 14px; }

/* Signed-in bar with a Switch button. */
.parent-id {
  display: flex; align-items: center; gap: 10px;
  background: rgba(70,194,121,.12); border: 1px solid rgba(70,194,121,.3);
  border-radius: 999px; padding: 7px 8px 7px 14px; margin-bottom: 14px;
  font-weight: 700; font-size: 12.5px; color: var(--ink);
}
.parent-id > span { flex: 1; min-width: 0; }
.pid-switch {
  flex: 0 0 auto; border: none; cursor: pointer;
  background: var(--grass); color: var(--deep); font-weight: 800;
  font-size: 12.5px; padding: 5px 12px; border-radius: 999px;
}
.pid-switch:active { transform: scale(.95); }

/* A parent's own kids are locked in the target picker. */
.target-pick.locked { opacity: .5; cursor: not-allowed; background: var(--muted); }
.target-pick.locked .tp-emoji { filter: grayscale(1); }
.tp-lock { font-weight: 800; font-size: 9.5px; color: var(--ink-soft); white-space: nowrap; }

/* ---------- Parent Award Center (Kudos tab) ---------- */
/* Target picker: horizontal row of cousins to award to. */
.target-picker {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 2px 10px;
  margin: 0 -2px 4px;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.target-picker::-webkit-scrollbar { display: none; }
.target-pick {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  width: 76px;
  padding: 8px 4px;
  background: var(--cream);
  border: 2px solid var(--line);
  border-top-color: var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  cursor: pointer;
  font-family: "Nunito", sans-serif;
  transition: transform .1s ease;
}
.target-pick:active { transform: scale(.96); }
.target-pick.active { border-color: var(--cc, var(--sun)); background: var(--sand); outline: 3px solid color-mix(in srgb, var(--cc, var(--sun)) 36%, transparent); }
.tp-emoji { font-size: 28px; line-height: 1; }
.tp-name { font-weight: 800; font-size: 12.5px; }
.tp-pts { font-weight: 800; font-size: 10.5px; color: var(--gold); }

/* Banner showing who is being awarded. */
.award-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--cc, var(--sun)) 0%, #16141a 250%);
  color: #fff;
  border-radius: var(--radius);
  padding: 12px 14px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--line-2);
  margin-bottom: 4px;
}
.ab-avatar {
  font-size: 30px;
  width: 52px; height: 52px;
  display: grid; place-items: center;
  background: rgba(0,0,0,.26);
  border-radius: 14px;
  flex: 0 0 auto;
}
.ab-name { font-weight: 700; font-size: 14px; }
.ab-name b { font-family: "Baloo 2", sans-serif; font-size: 18px; }
.ab-stats { display: flex; gap: 12px; margin-top: 4px; font-size: 12px; font-weight: 700; opacity: .95; }
.ab-stats b { font-family: "Baloo 2", sans-serif; font-size: 14px; }

/* Your camp assignments — a bold, can't-miss banner for the signed-in grown-up
   showing every meal they cook and activity they lead. */
.cook-duty {
  background: linear-gradient(135deg, color-mix(in srgb, var(--grass) 26%, transparent) 0%, var(--card) 70%);
  border: 2px solid color-mix(in srgb, var(--grass) 55%, transparent);
  border-radius: var(--radius);
  padding: 14px;
  margin-bottom: 14px;
  box-shadow: var(--shadow-lg), 0 0 18px color-mix(in srgb, var(--grass) 22%, transparent);
}
.cd-head { display: flex; align-items: center; gap: 12px; }
.cd-emoji {
  font-size: 30px;
  width: 52px; height: 52px;
  flex: 0 0 auto;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--grass) 22%, transparent);
  border-radius: 14px;
}
.cd-title h3 { margin: 0; font-family: "Baloo 2", sans-serif; font-size: 19px; font-weight: 800; color: var(--ink); }
.cd-title p { margin: 2px 0 0; font-size: 13px; font-weight: 700; color: var(--ink-soft); }
.cd-list { margin-top: 12px; display: flex; flex-direction: column; gap: 8px; }
.cd-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--inset);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
}
.cd-when {
  flex: 0 0 auto;
  display: grid;
  justify-items: center;
  min-width: 70px;
  padding-right: 10px;
  border-right: 1px solid var(--line);
}
.cd-dow { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 14.5px; color: var(--grass); line-height: 1.1; white-space: nowrap; }
.cd-time { font-size: 11px; font-weight: 700; color: var(--ink-soft); white-space: nowrap; }
.cd-meal { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-width: 0; }
.cd-meal-emoji { font-size: 20px; flex: 0 0 auto; }
.cd-meal-name { font-weight: 800; font-size: 15.5px; color: var(--ink); }
.cd-with {
  font-size: 11.5px;
  font-weight: 800;
  color: var(--ink);
  background: color-mix(in srgb, var(--grass) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--grass) 40%, transparent);
  border-radius: 999px;
  padding: 2px 9px;
}
/* Cook vs. Lead vs. Your-kids tag on each assignment row. */
.cd-role {
  font-size: 11px;
  font-weight: 800;
  border-radius: 999px;
  padding: 2px 9px;
  white-space: nowrap;
}
.cd-role.cook {
  color: var(--ink);
  background: color-mix(in srgb, var(--grass) 22%, transparent);
  border: 1px solid color-mix(in srgb, var(--grass) 45%, transparent);
}
.cd-role.lead {
  color: var(--ink);
  background: color-mix(in srgb, var(--grape, #8e44ad) 20%, transparent);
  border: 1px solid color-mix(in srgb, var(--grape, #8e44ad) 45%, transparent);
}
/* "Your kids" — a parent minding their own cousins (pool/swim, field trips),
   not running the activity for everyone. */
.cd-role.watch {
  color: var(--ink);
  background: color-mix(in srgb, #2980b9 20%, transparent);
  border: 1px solid color-mix(in srgb, #2980b9 45%, transparent);
}

/* Optional free-form reason on a cousin-to-cousin cheer. */
.cheer-reason { margin-bottom: 14px; }

/* Kudos board. */
.kudos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(104px, 1fr));
  gap: 10px;
}
.kudos-tile {
  position: relative;
  text-align: center;
  background: var(--cream);
  border: 2px solid var(--line);
  border-top-color: var(--edge);
  border-radius: var(--radius-sm);
  padding: 12px 8px 10px;
  cursor: pointer;
  box-shadow: var(--shadow);
  font-family: "Nunito", sans-serif;
  transition: transform .1s ease;
}
.kudos-tile:active { transform: scale(.95); }
.kt-emoji { font-size: 30px; line-height: 1; }
.kt-label { font-family: "Baloo 2", sans-serif; font-weight: 800; font-size: 13.5px; margin-top: 4px; }
.kt-desc { font-size: 11px; font-weight: 700; color: var(--ink-soft); margin-top: 2px; line-height: 1.2; }
.kt-pts { display: inline-block; margin-top: 8px; font-weight: 800; color: var(--grass); background: rgba(70,194,121,.16); padding: 2px 10px; border-radius: 999px; font-size: 12.5px; }

/* Bonus points card. */
.bonus-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  border-radius: var(--radius-sm);
  padding: 12px;
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bonus-note, .bonus-amt {
  width: 100%;
  border: 2px solid var(--line-2);
  border-radius: 10px;
  padding: 10px 12px;
  font-family: "Nunito", sans-serif;
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  background: var(--field);
}
.bonus-note:focus, .bonus-amt:focus { outline: none; border-color: var(--sun); box-shadow: 0 0 0 3px rgba(167,139,250,.25); }
.bonus-quick { display: flex; gap: 8px; }
.bonus-btn {
  flex: 1;
  border: none;
  background: rgba(255,206,77,.16);
  color: var(--gold);
  font-family: "Baloo 2", sans-serif;
  font-weight: 800;
  font-size: 17px;
  padding: 10px;
  border-radius: 10px;
  cursor: pointer;
  transition: transform .1s ease;
}
.bonus-btn:active { transform: scale(.95); }
.bonus-custom { display: flex; gap: 8px; }
.bonus-custom .bonus-amt { flex: 1; }
.bonus-custom .btn { flex: 0 0 auto; margin: 0; }

/* Recent award feed. */
.award-feed { display: flex; flex-direction: column; gap: 8px; }
.feed-row {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-top-color: var(--edge);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  padding: 9px 12px;
}
.fr-emoji { font-size: 26px; flex: 0 0 auto; }
/* When the feed row's leading glyph is a real photo (e.g. a cousin's cheer). */
.fr-emoji.avatar-photo { width: 34px; height: 34px; border-radius: 50%; }
.fr-body { flex: 1; min-width: 0; }
.fr-label { font-weight: 800; font-size: 14px; line-height: 1.2; }
.fr-time { font-weight: 700; font-size: 11.5px; color: var(--ink-soft); }
.fr-pts { font-weight: 800; color: var(--grass); background: rgba(70,194,121,.16); padding: 3px 10px; border-radius: 999px; font-size: 13px; flex: 0 0 auto; }
.fr-pts.neg { color: var(--danger); background: rgba(255,107,122,.16); }
.fr-undo {
  flex: 0 0 auto;
  border: none;
  background: var(--sand);
  color: var(--ink-soft);
  width: 28px; height: 28px;
  border-radius: 999px;
  font-weight: 800;
  cursor: pointer;
  line-height: 1;
}
.fr-undo:active { transform: scale(.9); }

/* Parent badge tiles are tappable in the Kudos tab. */
.pb-toggle { cursor: pointer; font-family: "Nunito", sans-serif; transition: transform .1s ease; }
.pb-toggle:active { transform: scale(.95); }
.pb-toggle.locked .tr-emoji { filter: none; opacity: .8; }

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

/* ---------- Light mode (follows the phone's setting) ----------
   Flip the content surfaces to a light palette. The colored banners
   (header, hero, gate backdrop, camp/award cards, toast) keep their
   dark/cinematic treatment in both modes, so the accent text on them
   is pinned to a constant bright lavender rather than --sun-dark. */
@media (prefers-color-scheme: light) {
  :root {
    --sun: #7a5ad7;        /* deeper violet so the accent reads on white */
    --sun-dark: #5b3fa6;   /* accent text/active on light surfaces */
    --sky: #6c4fc4;
    --grass: #2f9e5e;
    --gold: #b5821a;       /* brass that reads as point text on light */
    --danger: #d8425a;
    --sand: #f0ecf4;       /* raised well / chip surface */
    --cream: #ffffff;      /* card / panel surface */
    --bar: #ffffff;        /* bottom tab bar */
    --field: #ffffff;      /* form inputs */
    --muted: #ece8ef;      /* locked / disabled surfaces */
    --page-bg: #efecf7;    /* opaque page base (sticky headers) */
    --ink: #242029;        /* primary text */
    --ink-soft: #6c6573;   /* muted text */
    --line: rgba(40,30,50,.12);
    --line-2: rgba(40,30,50,.18);
    --edge: rgba(40,30,50,.05);
    --dash: rgba(40,30,50,.22);
    --inset: rgba(40,30,50,.04);
    --cert-base: linear-gradient(180deg, #fffdf7 0%, #fdf5e4 100%);
    --shadow: 0 6px 16px rgba(40,30,50,.12);
    --shadow-lg: 0 16px 36px rgba(40,30,50,.2);
  }
  body {
    background:
      radial-gradient(120% 80% at 50% -10%, #ebe7f8 0%, rgba(235,231,248,0) 55%),
      linear-gradient(180deg, #f7f5fc 0%, #efecf7 60%);
  }
  /* The floating tab bar sits on a light page — soften its drop shadow. */
  .tabbar {
    box-shadow:
      0 14px 34px rgba(40,30,50,.16),
      inset 0 1px 0 rgba(255,255,255,.6);
  }
}

/* ---------- Print: just the certificate (forced light for ink) ---------- */
@media print {
  .app-header, .tabbar, .toast, .section-title, .section-note,
  .trophy-grid, .camp-card, .roster-row, .btn,
  .target-picker, .award-banner, .kudos-grid, .bonus-card, .award-feed,
  .view-title, .view-sub, .empty, .gate { display: none !important; }
  body { background: #fff; }
  .view { padding: 0; }
  .certificate {
    background: #fff !important;
    color: #1a1a1a !important;
    box-shadow: none;
    border-color: #c9a227 !important;
    margin: 0;
    page-break-inside: avoid;
  }
  .cert-top { color: #a4561f !important; }
  .cert-name, .cert-sign span { color: #1a1a1a !important; }
  .cert-award, .cert-blurb, .cert-sign { color: #555 !important; }
  .cert-title { color: #5b3fa6 !important; }
  .cert-stats span { background: #f0ece2 !important; color: #1a1a1a !important; }
}