/* Matala — a calm, family-friendly app shell built from exactly two colours:
   deep teal #03363D and soft mint #BDD9D7. Light, roomy, and phone-first.
   Hard rule: the page itself NEVER scrolls — only bounded .scroll regions do. */

:root {
  --p: #03363D;      /* primary — deep teal */
  --p2: #0a545e;     /* primary, lifted */
  --s: #BDD9D7;      /* secondary — soft mint */
  --s2: #E7F1F0;     /* mint wash */
  --s3: #F2F7F7;     /* page */
  --card: #ffffff;
  --line: #E1EBEA;
  --tx: #0B2A2E;
  --mut: #5E7B7E;
  --warn: #B4552F;
  --ok: #2f8f6b;
  --r: 20px;
  --sh: 0 1px 2px rgba(3, 54, 61, .05), 0 8px 24px rgba(3, 54, 61, .06);
  --sh-lg: 0 12px 40px rgba(3, 54, 61, .16);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --nav-h: 54px;
  --ease: cubic-bezier(.2, .9, .3, 1.2);
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { background: var(--s3); }
html, body { height: 100%; overflow: hidden; }
body {
  margin: 0; background: var(--s3); color: var(--tx);
  font-family: 'Plus Jakarta Sans', 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 15px; line-height: 1.45; -webkit-font-smoothing: antialiased;
  overscroll-behavior: none;
}
#app { height: 100dvh; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; }
.ic { flex: none; display: block; }

/* On a desktop the app sits in a centred phone column — it is a mobile app. */
.screen {
  height: 100dvh; width: 100%; max-width: 520px; margin: 0 auto;
  display: flex; flex-direction: column; overflow: hidden;
  background: var(--s3); position: relative;
}
@media (min-width: 560px) {
  body { background: #dce9e8; }
  .screen { border-left: 1px solid var(--line); border-right: 1px solid var(--line); box-shadow: 0 0 60px rgba(3, 54, 61, .12); }
}

/* ---------- scrolling region (the ONLY thing that scrolls) ---------- */
.scroll { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 14px 16px calc(88px + var(--safe-b)); }
.hero.scroll { padding-bottom: 20px; }
.scroll::-webkit-scrollbar { width: 0; }

/* ---------- type ---------- */
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: 27px; }
h2 { font-size: 19px; }
h3 { font-size: 15px; }
.mut { color: var(--mut); }
.sm { font-size: 13px; }
.xs { font-size: 11.5px; }
.center { text-align: center; }
.sect { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 20px 2px 10px; }
.sect:first-child { margin-top: 4px; }
.sect h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .09em; color: var(--mut); font-weight: 800; }

/* ---------- logo ---------- */
.wm { display: inline-flex; align-items: center; gap: 10px; }
.wm-t { font-size: 26px; font-weight: 800; letter-spacing: -.035em; color: var(--p); }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; height: 50px; border-radius: 15px; font-weight: 700; font-size: 15px;
  background: var(--p); color: #fff; transition: transform .12s ease, box-shadow .2s ease, background .2s ease;
  box-shadow: 0 4px 14px rgba(3, 54, 61, .22);
}
.btn:active { transform: scale(.965); }
.btn:disabled { opacity: .42; box-shadow: none; pointer-events: none; }
.btn.ghost { background: var(--card); color: var(--p); box-shadow: none; border: 1.5px solid var(--line); }
.btn.mint { background: var(--s); color: var(--p); box-shadow: none; }
.btn.wide { width: 100%; }
.btn.sm { height: 40px; padding: 0 14px; font-size: 13.5px; border-radius: 12px; }
.btn.danger { background: var(--warn); }
.btn.danger.ghost { background: var(--card); color: var(--warn); border-color: #f0d8cf; }
.icb {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 12px; color: var(--p);
  transition: background .18s ease, transform .12s ease;
}
.icb:active { transform: scale(.9); }
.icb.on-p { color: var(--s); }
.icb.on-p:hover, .icb.on-p:focus-visible { background: rgba(255, 255, 255, .12); }
:where(.btn, .icb, .tab, .row, .chip):focus-visible { outline: 3px solid var(--p2); outline-offset: 2px; }

/* ---------- inputs ---------- */
.field { display: block; margin-bottom: 14px; }
.field > span { display: block; font-size: 12.5px; font-weight: 700; color: var(--mut); margin: 0 2px 6px; }
.inp {
  width: 100%; height: 52px; padding: 0 15px; border-radius: 14px;
  background: var(--card); border: 1.5px solid var(--line); outline: none;
  transition: border-color .18s ease, box-shadow .18s ease;
}
.inp:focus { border-color: var(--p); box-shadow: 0 0 0 4px rgba(3, 54, 61, .09); }
.inp.code { text-align: center; font-size: 26px; font-weight: 800; letter-spacing: .34em; text-indent: .34em; height: 62px; text-transform: uppercase; }
textarea.inp { height: auto; padding: 12px 15px; resize: none; }

/* ---------- cards ---------- */
.card { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--sh); padding: 16px; }
.card + .card { margin-top: 12px; }
.tile { background: var(--s2); border-radius: 16px; padding: 14px; }

/* ---------- header ---------- */
.hdr {
  flex: none; background: var(--p); color: #fff;
  padding: calc(9px + env(safe-area-inset-top, 0px)) 12px 14px;
  border-radius: 0 0 22px 22px; box-shadow: 0 6px 22px rgba(3, 54, 61, .18);
  position: relative; z-index: 3;
}
.hdr-row { display: flex; align-items: center; gap: 10px; min-height: 40px; }
.hdr-t { flex: 1; min-width: 0; }
.hdr-t b { display: block; font-size: 17px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hdr-t span { display: block; font-size: 12px; color: var(--s); opacity: .95; }
.hdr .mini {
  display: flex; gap: 8px; margin-top: 14px; width: 100%; padding: 0; position: relative;
  transition: transform .16s ease;
}
.hdr .mini:active { transform: scale(.985); }
.mini-s {
  flex: 1; background: rgba(255, 255, 255, .1); border-radius: 13px; padding: 9px 6px; text-align: center;
  transition: background .22s ease;
}
.mini:hover .mini-s { background: rgba(255, 255, 255, .16); }
.mini-s b { display: block; font-size: 17px; font-weight: 800; color: #fff; }
.mini-s span { font-size: 9.5px; color: var(--s); text-transform: uppercase; letter-spacing: .05em; font-weight: 700; display: block; }
.mini-c {
  flex: none; align-self: center; width: 26px; height: 100%; border-radius: 13px;
  background: rgba(255, 255, 255, .1); color: var(--s);
  display: flex; align-items: center; justify-content: center;
}
.mini-c .ic { transform: rotate(90deg); transition: transform .42s var(--ease); }
.mini-c.up .ic { transform: rotate(-90deg); }

/* the ribbon: the teal header drops down with the family's standings */
.ribbon {
  display: grid; grid-template-rows: 0fr; margin-top: 0;
  transition: grid-template-rows .44s var(--ease), margin-top .44s var(--ease);
}
.ribbon > div { overflow: hidden; min-height: 0; }
.ribbon.open { grid-template-rows: 1fr; margin-top: 14px; }
.rib-in { padding-top: 2px; }
.rib-prize {
  display: flex; align-items: center; gap: 9px; background: var(--s); color: var(--p);
  border-radius: 13px; padding: 9px 11px; margin-bottom: 12px;
}
.rib-prize b { display: block; font-size: 13px; font-weight: 800; }
.rib-prize span { font-size: 10.5px; opacity: .75; }
.rib-empty { color: var(--s); font-size: 12.5px; text-align: center; margin: 4px 0 2px; }
.chart { display: flex; align-items: flex-end; gap: 6px; height: 92px; margin-bottom: 10px; }
.cbar { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.cbar b { font-size: 11px; font-weight: 800; color: #fff; }
.cbar-t {
  width: 100%; max-width: 34px; border-radius: 7px 7px 3px 3px; background: var(--c);
  min-height: 4px; height: var(--h);
  animation: grow .6s cubic-bezier(.2, .8, .2, 1) both; animation-delay: calc(var(--i, 0) * 70ms);
  box-shadow: inset 0 -2px 0 rgba(255, 255, 255, .18);
}
@keyframes grow { from { height: 0; } }
.cbar-n { font-size: 9.5px; color: var(--s); font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rib-lb { border-top: 1px solid rgba(255, 255, 255, .14); padding-top: 4px; }
.rl { display: flex; align-items: center; gap: 8px; padding: 6px 0; }
.rl-n { width: 14px; font-size: 11px; font-weight: 800; color: var(--s); opacity: .8; }
.rl-t { flex: 1; min-width: 0; font-size: 13px; font-weight: 700; color: #fff; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rl-you { font-size: 9.5px; background: rgba(255, 255, 255, .18); border-radius: 999px; padding: 1px 6px; color: var(--s); }
.rl-d { font-size: 10.5px; color: var(--s); opacity: .8; }
.rl-p { font-size: 14px; font-weight: 800; color: var(--s); min-width: 26px; text-align: right; }

/* The tab bar is a floating glass capsule — the content scrolls behind it. */
.nav {
  position: absolute; left: 14px; right: 14px; bottom: max(8px, var(--safe-b));
  display: grid; grid-template-columns: repeat(var(--tabs, 5), 1fr);
  height: 60px; padding: 5px; border-radius: 999px; z-index: 15;
  background: rgba(255, 255, 255, .68);
  -webkit-backdrop-filter: blur(20px) saturate(1.7); backdrop-filter: blur(20px) saturate(1.7);
  border: 1px solid rgba(255, 255, 255, .75);
  box-shadow: 0 10px 34px rgba(3, 54, 61, .2), inset 0 1px 0 rgba(255, 255, 255, .8);
  animation: navIn .5s var(--ease) both;
}
@keyframes navIn { from { transform: translateY(120%); opacity: 0; } }
/* the mint chip that glides to the tab you picked */
.nav-ind {
  position: absolute; top: 7px; width: 46px; height: 46px; border-radius: 999px;
  background: var(--s); z-index: 0; transition: left .42s var(--ease);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6), 0 2px 8px rgba(3, 54, 61, .14);
}
.tab {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  color: var(--mut); font-size: 9.5px; font-weight: 700;
  position: relative; z-index: 1; transition: color .24s ease; border-radius: 999px;
}
.tab .pill { display: flex; align-items: center; justify-content: center; width: 46px; height: 27px; transition: transform .3s var(--ease); }
.tab .tab-l { transition: opacity .24s ease, transform .24s ease; opacity: .8; line-height: 1.1; }
.tab[aria-current='page'] { color: var(--p); }
.tab[aria-current='page'] .pill { transform: translateY(-1px) scale(1.08); }
.tab[aria-current='page'] .tab-l { opacity: 1; font-weight: 800; }
.tab:active .pill { transform: scale(.84); }
.tab .dot {
  position: absolute; top: 3px; inset-inline-end: 50%; margin-inline-end: -21px;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px; background: var(--warn); color: #fff;
  font-size: 10px; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid #fff; animation: dotPop .34s var(--ease) both; z-index: 2;
}
@keyframes dotPop { from { transform: scale(0); } }

/* Desktop: the capsule becomes a side rail, Apple sidebarAdaptable style. */
@media (min-width: 900px) {
  .screen { max-width: 1040px; }
  .nav {
    left: 14px; right: auto; top: 50%; bottom: auto; transform: translateY(-50%);
    width: 76px; height: auto; grid-template-columns: 1fr; grid-auto-rows: 64px;
    border-radius: 26px; padding: 8px;
  }
  [dir='rtl'] .nav { left: auto; right: 14px; }
  .nav-ind { display: none; }
  .tab[aria-current='page'] .pill { background: var(--s); border-radius: 999px; width: 52px; height: 34px; }
  .scroll { padding-left: 110px; padding-bottom: 26px; }
  [dir='rtl'] .scroll { padding-left: 16px; padding-right: 110px; }
  .hdr { padding-left: 110px; }
  [dir='rtl'] .hdr { padding-left: 12px; padding-right: 110px; }
  @keyframes navIn { from { transform: translateY(-50%) translateX(-130%); opacity: 0; } }
}

/* ---------- task rows ---------- */
.row {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 12px;
  box-shadow: var(--sh); margin-bottom: 10px; transition: transform .12s ease, opacity .28s ease, border-color .2s ease;
}
.row:active { transform: scale(.985); }
.row-i {
  width: 42px; height: 42px; border-radius: 13px; background: var(--s2); color: var(--p);
  display: flex; align-items: center; justify-content: center; flex: none;
}
.row-t { flex: 1; min-width: 0; }
.row-t b { display: block; font-weight: 700; font-size: 14.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-t span { display: block; font-size: 12px; color: var(--mut); }
.tick {
  width: 34px; height: 34px; border-radius: 999px; border: 2px solid var(--s); flex: none;
  display: flex; align-items: center; justify-content: center; color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .2s ease;
}
.tick:active { transform: scale(.86); }
.tick:disabled { opacity: .3; pointer-events: none; }
.row.done { opacity: .58; }
.row.done .row-t b { text-decoration: line-through; text-decoration-color: var(--mut); }
.row.done .tick { background: var(--ok); border-color: var(--ok); color: #fff; }
.row.mine { border-color: var(--s); background: linear-gradient(100deg, var(--s2), var(--card) 62%); }
.row.pop { animation: pop .42s cubic-bezier(.2, .9, .3, 1.3); }
@keyframes pop { 0% { transform: scale(1); } 42% { transform: scale(1.035); } 100% { transform: scale(1); } }

/* bounty badge — the reward multiplier for a chore nobody wants */
.bounty {
  display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px 2px 5px; border-radius: 999px;
  background: var(--p); color: var(--s); font-size: 10.5px; font-weight: 800; letter-spacing: .02em;
}
.bounty.x2 { background: var(--s); color: var(--p); }

/* ---------- avatars / chips ---------- */
.av {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  border-radius: 999px; background: var(--av, var(--p)); color: #fff; font-weight: 800; letter-spacing: -.02em;
}
.av.ring { box-shadow: 0 0 0 2.5px var(--card), 0 0 0 4.5px var(--av); }
.stack { display: flex; }
.stack .av + .av { margin-left: -10px; box-shadow: 0 0 0 2.5px var(--card); }
.chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--card); border: 1.5px solid var(--line); font-size: 13px; font-weight: 700; color: var(--p);
  transition: background .18s ease, border-color .18s ease, transform .12s ease;
}
.chip:active { transform: scale(.94); }
.chip[aria-pressed='true'], .chip.on { background: var(--p); border-color: var(--p); color: #fff; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--s2); color: var(--p); font-size: 11px; font-weight: 800; }

/* ---------- the Hate Scale ---------- */
.rate-c { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 14px 16px 6px; box-shadow: var(--sh); margin-bottom: 12px; }
.rate-h { display: flex; align-items: center; gap: 11px; margin-bottom: 4px; }
.rate-v {
  margin-left: auto; min-width: 40px; height: 32px; border-radius: 10px; display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 15px; background: var(--s2); color: var(--p); transition: background .25s ease, color .25s ease, transform .18s ease;
}
.rate-v.hot { background: var(--p); color: var(--s); }
.rate-v.bump { transform: scale(1.16); }
input[type='range'].hate {
  -webkit-appearance: none; appearance: none; width: 100%; height: 34px; background: none; margin: 0; outline: none;
}
input[type='range'].hate::-webkit-slider-runnable-track {
  height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--s) 0%, #6ba3a5 50%, var(--p) 100%);
}
input[type='range'].hate::-moz-range-track { height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--s) 0%, #6ba3a5 50%, var(--p) 100%); }
input[type='range'].hate::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none; width: 26px; height: 26px; margin-top: -8px; border-radius: 999px;
  background: #fff; border: 3px solid var(--p); box-shadow: 0 2px 8px rgba(3, 54, 61, .3); cursor: grab;
  transition: transform .12s ease;
}
input[type='range'].hate:active::-webkit-slider-thumb { transform: scale(1.22); cursor: grabbing; }
input[type='range'].hate::-moz-range-thumb {
  width: 26px; height: 26px; border-radius: 999px; background: #fff; border: 3px solid var(--p);
  box-shadow: 0 2px 8px rgba(3, 54, 61, .3); cursor: grab;
}
.rate-l { display: flex; justify-content: space-between; font-size: 10.5px; color: var(--mut); font-weight: 700; padding: 0 2px 8px; }

/* ---------- stats ---------- */
.stat-g { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 13px; box-shadow: var(--sh); }
.stat b { display: block; font-size: 24px; font-weight: 800; color: var(--p); letter-spacing: -.03em; }
.stat span { font-size: 11.5px; color: var(--mut); font-weight: 700; }
.bar { height: 8px; border-radius: 999px; background: var(--s2); overflow: hidden; margin-top: 8px; }
.bar > i { display: block; height: 100%; border-radius: 999px; background: var(--p); transition: width .7s cubic-bezier(.2, .8, .2, 1); }
.bar.mint > i { background: linear-gradient(90deg, var(--s), var(--p)); }

/* leaderboard */
.lb { display: flex; align-items: center; gap: 11px; padding: 11px 0; border-bottom: 1px solid var(--line); }
.lb:last-child { border-bottom: 0; }
.lb-n { width: 18px; font-weight: 800; color: var(--mut); font-size: 13px; text-align: center; }
.lb-t { flex: 1; min-width: 0; }
.lb-t b { display: block; font-size: 14px; font-weight: 700; }
.lb-p { font-weight: 800; color: var(--p); font-size: 15px; }

/* ---------- sheets & overlays ---------- */
.sheet-bg {
  position: absolute; inset: 0; background: rgba(3, 30, 34, .46); z-index: 20;
  display: flex; align-items: flex-end; animation: fade .22s ease; backdrop-filter: blur(2px);
}
.sheet {
  width: 100%; max-height: 88%; background: var(--card); border-radius: 26px 26px 0 0;
  box-shadow: var(--sh-lg); animation: up .3s cubic-bezier(.2, .9, .3, 1.05);
  display: flex; flex-direction: column; padding-bottom: var(--safe-b); overflow: hidden;
}
.sheet-h { flex: none; padding: 8px 16px 10px; position: relative; }
.grip { width: 40px; height: 4px; border-radius: 999px; background: var(--line); margin: 0 auto 12px; }
.sheet-x { position: absolute; top: 4px; right: 8px; color: var(--mut); background: var(--s2); width: 34px; height: 34px; }
.sheet-b { overflow-y: auto; padding: 0 16px 16px; overscroll-behavior: contain; }
@keyframes fade { from { opacity: 0; } }
@keyframes up { from { transform: translateY(100%); } }

/* toast — someone finished a chore. It rides above the bottom bar, never over the
   header, and never eats a tap: the header buttons must always stay reachable. */
.toast {
  position: absolute; left: 12px; right: 12px; z-index: 40; pointer-events: none;
  bottom: calc(86px + var(--safe-b));
  background: var(--p); color: #fff; border-radius: 16px; padding: 11px 14px;
  display: flex; align-items: center; gap: 10px; box-shadow: var(--sh-lg);
  animation: drop .36s var(--ease);
}
.toast b { font-size: 13.5px; font-weight: 700; }
.toast span { font-size: 11.5px; color: var(--s); display: block; }
@keyframes drop { from { transform: translateY(140%); opacity: 0; } }

/* the split reveal */
.reveal { position: absolute; inset: 0; z-index: 30; background: var(--p); color: #fff; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; animation: fade .2s ease; }
.reveal .ring { width: 92px; height: 92px; border-radius: 999px; border: 4px solid rgba(189, 217, 215, .28); border-top-color: var(--s); animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.reveal h2 { color: #fff; }
.reveal p { color: var(--s); margin: 0; font-size: 13px; }

/* welcome */
.hero { flex: 1; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 18px 22px; text-align: center; overflow: hidden; }
.hero .lg { animation: float 5.5s ease-in-out infinite; filter: drop-shadow(0 12px 26px rgba(3, 54, 61, .26)); }
@keyframes float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
.hero h1 { margin-top: 14px; animation: rise .5s var(--ease) both .05s; }
.hero > p { color: var(--mut); margin: 6px 0 0; max-width: 320px; font-size: 14.5px; animation: rise .5s var(--ease) both .12s; }
.hero .spin { width: 62px; height: 62px; border-radius: 999px; border: 4px solid var(--s); border-top-color: var(--p); animation: spin .9s linear infinite; }
.hero-a { flex: none; display: flex; flex-direction: column; gap: 9px; padding: 14px 22px calc(22px + var(--safe-b)); }

/* the three-step explainer - big, readable rows */
.steps { width: 100%; max-width: 360px; margin-top: 22px; display: flex; flex-direction: column; gap: 9px; }
.step {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--card); border: 1px solid var(--line); border-radius: 17px;
  padding: 13px 14px; box-shadow: var(--sh); position: relative;
}
.step-n {
  position: absolute; top: -6px; left: -6px; width: 21px; height: 21px; border-radius: 999px;
  background: var(--p); color: #fff; font-size: 11px; font-weight: 800;
  display: flex; align-items: center; justify-content: center; border: 2px solid var(--s3);
}
.step-i {
  width: 42px; height: 42px; border-radius: 13px; flex: none; color: var(--p);
  background: var(--s2); display: flex; align-items: center; justify-content: center;
}
.step-t { flex: 1; min-width: 0; }
.step-t b { display: block; font-size: 14px; font-weight: 800; letter-spacing: -.01em; line-height: 1.3; }
.step-t span { display: block; font-size: 11.5px; color: var(--mut); line-height: 1.35; margin-top: 2px; }

/* invite / qr */
.qr { background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 10px; width: 190px; height: 190px; margin: 0 auto; box-shadow: var(--sh); }
.qr svg { width: 100%; height: 100%; display: block; }
.code-big { font-size: 34px; font-weight: 800; letter-spacing: .3em; text-indent: .3em; color: var(--p); text-align: center; }

/* ---------- first-run wizard ---------- */
.wiz-bar { height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .18); margin-top: 12px; overflow: hidden; }
.wiz-bar > i { display: block; height: 100%; border-radius: 999px; background: var(--s); transition: width .5s var(--ease); }
.wiz-h { text-align: center; margin: 6px 0 18px; animation: rise .42s var(--ease) both; }
.wiz-i {
  width: 54px; height: 54px; border-radius: 17px; background: var(--s2); color: var(--p);
  display: inline-flex; align-items: center; justify-content: center; margin-bottom: 11px;
  animation: pop-in .45s var(--ease) both;
}
.wiz-h h2 { font-size: 21px; }
.wiz-h p { color: var(--mut); font-size: 13.5px; margin: 6px auto 0; max-width: 320px; line-height: 1.4; }

/* a big tappable choice card */
.pick {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; margin-bottom: 10px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 18px; padding: 14px;
  box-shadow: var(--sh); transition: border-color .22s ease, background .22s ease, transform .14s ease;
}
.pick:active { transform: scale(.985); }
.pick-i { width: 44px; height: 44px; border-radius: 13px; flex: none; background: var(--s2); color: var(--p); display: flex; align-items: center; justify-content: center; transition: background .22s ease, color .22s ease; }
.pick-t { flex: 1; min-width: 0; }
.pick-t b { display: block; font-size: 14.5px; font-weight: 800; }
.pick-t span { display: block; font-size: 11.5px; color: var(--mut); line-height: 1.35; margin-top: 2px; }
.pick-c { width: 24px; height: 24px; border-radius: 999px; flex: none; border: 2px solid var(--line); color: transparent; display: flex; align-items: center; justify-content: center; transition: all .22s ease; }
.pick.on { border-color: var(--p); background: linear-gradient(100deg, var(--s2), var(--card) 70%); }
.pick.on .pick-i { background: var(--p); color: var(--s); }
.pick.on .pick-c { background: var(--p); border-color: var(--p); color: #fff; transform: scale(1.06); }

/* the chore chooser */
.chore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.ctile {
  position: relative; background: var(--card); border: 1.5px solid var(--line); border-radius: 16px;
  padding: 12px 6px 10px; box-shadow: var(--sh); text-align: center;
  transition: border-color .2s ease, background .2s ease, transform .14s ease;
}
.ctile:active { transform: scale(.94); }
.ctile-i { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0 auto 6px; border-radius: 12px; background: var(--s2); color: var(--p); transition: background .2s ease, color .2s ease; }
.ctile b { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.25; }
.ctile > span.xs { color: var(--mut); }
.ctile-c { position: absolute; top: 7px; right: 7px; width: 19px; height: 19px; border-radius: 999px; background: var(--line); color: transparent; display: flex; align-items: center; justify-content: center; transition: all .2s var(--ease); }
.ctile.on { border-color: var(--p); background: linear-gradient(160deg, var(--s2), var(--card) 70%); }
.ctile.on .ctile-i { background: var(--p); color: var(--s); }
.ctile.on .ctile-c { background: var(--ok); color: #fff; transform: scale(1.1); }

/* the icon picker */
.icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 6px; max-height: 168px; overflow-y: auto; padding: 2px; }
.ipick { display: flex; align-items: center; justify-content: center; height: 42px; border-radius: 12px; background: var(--s2); color: var(--p); border: 1.5px solid transparent; transition: all .18s ease; }
.ipick:active { transform: scale(.9); }
.ipick.on { background: var(--p); color: #fff; border-color: var(--p); }
.emo-row { display: flex; align-items: center; gap: 8px; }
.emo-in { flex: none; width: 74px; text-align: center; font-size: 22px; }
.emo-prev { width: 44px; height: 44px; border-radius: 12px; background: var(--s2); color: var(--p); display: flex; align-items: center; justify-content: center; flex: none; }

/* toggle */
.tg { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--line); }
.tg:last-child { border-bottom: 0; }
.tg-t { flex: 1; min-width: 0; }
.tg-t b { display: block; font-size: 14px; font-weight: 700; line-height: 1.3; }
.tg-t span { display: block; font-size: 11.5px; color: var(--mut); line-height: 1.35; margin-top: 2px; }
.sw { width: 48px; height: 28px; border-radius: 999px; background: var(--line); position: relative; flex: none; transition: background .24s ease; }
.sw::after { content: ''; position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .22); transition: transform .24s cubic-bezier(.2, .9, .3, 1.3); }
.sw[aria-pressed='true'] { background: var(--p); }
.sw[aria-pressed='true']::after { transform: translateX(20px); }
.seg { display: flex; background: var(--s2); border-radius: 12px; padding: 3px; gap: 3px; flex: none; }
.tg.col { flex-direction: column; align-items: stretch; gap: 9px; }
.tg.col .seg { width: 100%; }
.seg button { flex: 1; height: 34px; border-radius: 9px; font-size: 12.5px; font-weight: 700; color: var(--mut); transition: background .22s ease, color .22s ease, transform .14s ease; padding: 0 10px; white-space: nowrap; }
.seg.big button { height: 42px; font-size: 13px; border-radius: 11px; }
.seg button:active { transform: scale(.95); }
.seg button[aria-pressed='true'] { background: var(--card); color: var(--p); box-shadow: 0 1px 5px rgba(3, 54, 61, .14); }

/* empty state */
.empty { text-align: center; padding: 34px 20px; color: var(--mut); }
.empty .ic { margin: 0 auto 10px; color: var(--s); }
.empty b { display: block; color: var(--tx); font-size: 15px; margin-bottom: 4px; }
.empty p { margin: 0 auto; font-size: 13px; max-width: 260px; }

/* ---------- animation layer ---------- */
/* Whole-screen change: content lifts in. Only fires when the screen really changed. */
.view { animation: slide .3s cubic-bezier(.2, .8, .2, 1); }
@keyframes slide { from { opacity: 0; transform: translateY(10px); } }
@keyframes rise { from { opacity: 0; transform: translateY(9px); } }
@keyframes pop-in { from { opacity: 0; transform: scale(.94); } }

/* Staggered lists - each child rises a beat after the one above it. */
.view .stag > * { animation: rise .42s var(--ease) both; animation-delay: calc(var(--i, 0) * 45ms + 60ms); }
.stag > * { --i: 0; }

.hi { margin: 2px 2px 14px; animation: rise .4s var(--ease) both; }
.hi b { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.025em; }
.hi span { display: block; font-size: 13px; color: var(--mut); margin-top: 1px; }

/* the prize banner */
.prize-c {
  display: flex; align-items: center; gap: 11px; margin-bottom: 12px; padding: 12px 13px;
  border-radius: 17px; border: 1.5px solid var(--s); background: linear-gradient(100deg, var(--s2), var(--card) 70%);
  animation: rise .42s var(--ease) both;
}
.prize-i {
  width: 40px; height: 40px; border-radius: 12px; flex: none; background: var(--p); color: var(--s);
  display: flex; align-items: center; justify-content: center;
}
.prize-c b { display: block; font-size: 14px; font-weight: 800; }
.prize-c span { display: block; font-size: 11px; color: var(--mut); }
.prize-rv { background: linear-gradient(160deg, var(--p2), var(--p)); }
.crown-pop { color: var(--s); animation: crown .7s var(--ease) both; }
@keyframes crown { 0% { transform: scale(0) rotate(-25deg); } 60% { transform: scale(1.18) rotate(6deg); } 100% { transform: scale(1) rotate(0); } }

.nudge { display: flex; align-items: center; gap: 12px; width: 100%; border-color: var(--s); background: linear-gradient(100deg, var(--s2), var(--card) 62%); transition: transform .14s ease; }
.nudge:active { transform: scale(.985); }
.err { color: var(--warn); }
.emo { display: inline-flex; align-items: center; justify-content: center; }

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


/* ---------- the week rota ---------- */
.day { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 12px; box-shadow: var(--sh); margin-bottom: 10px; }
.day.now { border-color: var(--p); box-shadow: 0 0 0 3px rgba(3, 54, 61, .07), var(--sh); }
.day.past { opacity: .62; }
.day-h { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.day-n {
  width: 34px; height: 34px; border-radius: 11px; background: var(--s2); color: var(--p);
  display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; flex: none;
}
.day.now .day-n { background: var(--p); color: var(--s); }
.day-h b { font-size: 14px; font-weight: 800; }
.day-b {
  display: inline-flex; align-items: center; gap: 2px; padding: 2px 7px; border-radius: 999px;
  background: var(--s); color: var(--p); font-size: 10px; font-weight: 800;
}
.wr { display: flex; align-items: center; gap: 9px; padding: 8px 0; border-top: 1px solid var(--line); }
.wr:first-of-type { border-top: 0; }
.wr-i { width: 30px; height: 30px; border-radius: 9px; background: var(--s2); color: var(--p); display: flex; align-items: center; justify-content: center; flex: none; }
.wr-t { flex: 1; min-width: 0; }
.wr-t b { display: block; font-size: 13px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wr-t span { display: block; font-size: 10.5px; color: var(--mut); }
.wr.done .wr-t b { text-decoration: line-through; color: var(--mut); }
.wr.missed .wr-t b { color: var(--warn); }
.wr-ok { color: var(--ok); }
.wr-x { color: var(--warn); }
.btn.call { height: 32px; padding: 0 10px; font-size: 11.5px; border-radius: 10px; gap: 4px; flex: none; }

/* ---------- the day picker ---------- */
.days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.dbtn {
  height: 40px; border-radius: 11px; background: var(--s2); color: var(--mut);
  font-size: 12.5px; font-weight: 800; border: 1.5px solid transparent;
  transition: all .18s ease;
}
.dbtn:active { transform: scale(.9); }
.dbtn.on { background: var(--p); color: #fff; border-color: var(--p); }

/* ---------- the kid's card deck ---------- */
.deck-wrap { display: flex; flex-direction: column; height: 100%; }
.deck-top { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.deck-top b { font-size: 12px; font-weight: 800; color: var(--mut); white-space: nowrap; }
.deck { position: relative; flex: 1; min-height: 230px; display: flex; align-items: center; justify-content: center; }
.card-s {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 7px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 24px; box-shadow: var(--sh-lg);
  padding: 20px; text-align: center; user-select: none;
}
.card-s.back { transform: scale(.93) translateY(12px); opacity: .6; box-shadow: var(--sh); }
.card-s.top { cursor: grab; touch-action: pan-y; animation: pop-in .3s var(--ease) both; transition: transform .28s var(--ease); }
.card-s.top:active { cursor: grabbing; }
.cs-i { width: 72px; height: 72px; border-radius: 22px; background: var(--s2); color: var(--p); display: flex; align-items: center; justify-content: center; }
.cs-tag { position: absolute; top: 16px; display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 800; opacity: 0; }
.cs-tag.good { right: 16px; background: var(--ok); color: #fff; }
.cs-tag.bad { left: 16px; background: var(--warn); color: #fff; }
.card-s b { font-size: 19px; font-weight: 800; letter-spacing: -.02em; }
.cs-m { font-size: 12px; color: var(--mut); font-weight: 700; }
.cs-d { font-size: 11px; color: var(--p); background: var(--s2); padding: 4px 10px; border-radius: 999px; font-weight: 700; }
.deck-a { display: flex; justify-content: center; gap: 14px; margin-top: 16px; }
.btn.round { width: 60px; height: 60px; border-radius: 999px; padding: 0; }
.btn.round.bad { background: var(--warn); }
.btn.round.good { background: var(--ok); }
.btn.round.mid { width: 50px; height: 50px; align-self: center; background: var(--card); color: var(--mut); border: 1.5px solid var(--line); box-shadow: none; }

/* the demo that runs before it counts */
.demo { position: relative; margin-top: 6px; }
.demo-card {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  background: var(--card); border: 1.5px solid var(--line); border-radius: 22px; box-shadow: var(--sh);
  padding: 26px 20px; animation: demoSwipe 3.4s ease-in-out infinite;
}
.demo-i { width: 58px; height: 58px; border-radius: 18px; background: var(--s2); color: var(--p); display: flex; align-items: center; justify-content: center; }
.demo-card b { font-size: 15px; }
.demo-hand { position: absolute; bottom: 10px; right: 22px; color: var(--p); opacity: .5; animation: handWag 3.4s ease-in-out infinite; }
@keyframes demoSwipe {
  0%, 12% { transform: translateX(0) rotate(0); }
  30% { transform: translateX(-58px) rotate(-8deg); }
  46%, 54% { transform: translateX(0) rotate(0); }
  72% { transform: translateX(58px) rotate(8deg); }
  90%, 100% { transform: translateX(0) rotate(0); }
}
@keyframes handWag { 0%, 12% { transform: translateX(0); } 30% { transform: translateX(-30px); } 46%, 54% { transform: translateX(0); } 72% { transform: translateX(30px); } 90%, 100% { transform: translateX(0); } }
.demo-l { display: flex; justify-content: space-between; margin-top: 12px; }
.dl { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; font-weight: 800; padding: 5px 11px; border-radius: 999px; }
.dl.bad { background: #f6e3da; color: var(--warn); }
.dl.good { background: #d9efe4; color: var(--ok); }

.welcome-s { max-height: 92%; }
.icb.tiny { width: 30px; height: 30px; color: var(--mut); }


/* ---------- the week's calendar strip (iPhone style) ---------- */
.dstrip { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 14px; }
.dchip {
  display: flex; flex-direction: column; align-items: center; gap: 1px; position: relative;
  padding: 8px 2px 9px; border-radius: 14px; background: var(--card); border: 1.5px solid var(--line);
  transition: background .22s ease, border-color .22s ease, transform .14s ease, box-shadow .22s ease;
}
.dchip:active { transform: scale(.92); }
.dchip span { font-size: 9.5px; font-weight: 800; color: var(--mut); text-transform: uppercase; letter-spacing: .04em; }
.dchip b { font-size: 15px; font-weight: 800; color: var(--tx); }
.dchip i { position: absolute; bottom: 4px; width: 4px; height: 4px; border-radius: 999px; background: var(--warn); }
.dchip.now { border-color: var(--p); }
.dchip.sel { background: var(--p); border-color: var(--p); box-shadow: 0 4px 12px rgba(3, 54, 61, .28); }
.dchip.sel span { color: var(--s); }
.dchip.sel b { color: #fff; }
.dchip.sel i { background: var(--s); }
.day-head { display: flex; align-items: center; gap: 8px; margin: 4px 2px 10px; }
.day-head b { font-size: 17px; font-weight: 800; letter-spacing: -.02em; }
.day-b { display: inline-flex; align-items: center; gap: 2px; padding: 3px 8px; border-radius: 999px; background: var(--s); color: var(--p); font-size: 10.5px; font-weight: 800; }
.wr-ok { color: var(--ok); flex: none; }
.wr-x { color: var(--warn); flex: none; }
.row.miss { opacity: .6; }
.row.miss .row-t b { color: var(--warn); }
.btn.call { height: 34px; padding: 0 11px; font-size: 11.5px; border-radius: 11px; gap: 4px; flex: none; white-space: nowrap; }

/* ---------- language picker ---------- */
.lang-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.lchip {
  display: flex; align-items: center; gap: 9px; padding: 10px 12px; border-radius: 13px;
  background: var(--card); border: 1.5px solid var(--line); font-weight: 700; font-size: 13px;
  transition: border-color .2s ease, background .2s ease, transform .14s ease; text-align: start;
}
.lchip:active { transform: scale(.95); }
.lchip .flag { border-radius: 3px; flex: none; }
.lchip.on { border-color: var(--p); background: var(--s2); }
.lchip b { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- the prize moment: trophy + confetti ---------- */
.prize-rv { overflow: hidden; }
.trophy {
  position: relative; width: 104px; height: 104px; border-radius: 999px; margin-bottom: 6px;
  background: rgba(189, 217, 215, .16); color: var(--s);
  display: flex; align-items: center; justify-content: center;
  animation: crown .7s var(--ease) both;
}
.tr-ring { position: absolute; inset: -10px; border-radius: 999px; border: 2px solid rgba(189, 217, 215, .35); animation: ringPulse 1.6s ease-out infinite; }
.tr-ring.r2 { animation-delay: .55s; }
@keyframes ringPulse { 0% { transform: scale(.82); opacity: 1; } 100% { transform: scale(1.35); opacity: 0; } }
.prize-box {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 12px;
  background: var(--s); color: var(--p); border-radius: 999px; padding: 10px 18px;
  font-size: 16px; box-shadow: 0 8px 26px rgba(0, 0, 0, .25);
  animation: pop-in .5s var(--ease) both .25s;
}
.prize-rv > p { margin-top: 12px; }
.confetti { position: absolute; inset: 0; pointer-events: none; }
.confetti i {
  position: absolute; top: -20px; width: 9px; height: 14px; border-radius: 2.5px;
  left: calc(4% + var(--i) * 6%);
  background: var(--s);
  animation: confFall 2.8s linear infinite;
  animation-delay: calc(var(--i) * -0.35s);
  opacity: .95;
}
.confetti i:nth-child(3n) { background: #fff; width: 7px; height: 7px; border-radius: 999px; }
.confetti i:nth-child(4n) { background: var(--warn); }
.confetti i:nth-child(5n) { background: #7fc4bd; }
@keyframes confFall {
  0% { transform: translateY(-4vh) rotate(0) translateX(0); }
  25% { transform: translateY(24vh) rotate(190deg) translateX(14px); }
  50% { transform: translateY(50vh) rotate(360deg) translateX(-10px); }
  75% { transform: translateY(76vh) rotate(540deg) translateX(12px); }
  100% { transform: translateY(106vh) rotate(720deg) translateX(-6px); }
}

/* RTL niceties */
[dir='rtl'] .back .ic, [dir='rtl'] .chevron { transform: scaleX(-1); }
[dir='rtl'] .step-n { left: auto; right: -6px; }
[dir='rtl'] .sheet-x { right: auto; left: 8px; }