/* כוכבי הבית — design system. One look on every device: the kiosk, a phone, a laptop.
   Deliberately NOT tied to the OS light/dark setting: the screen follows the time of
   day instead (body[data-daypart]) so mornings look like mornings and bedtime is calm. */
:root{
  --font:'Rubik',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --ink:#2B2D42; --ink-2:#646883; --ink-3:#9A9DB3; --paper:#FFFFFF; --paper-2:#FFF9F1; --line:#EEE5D8;
  --sun:#FFB800; --sun-2:#FFD35C; --sun-ink:#7A4E00;
  --coral:#FF6B6B; --mint:#22C4A0; --sky:#4FA3F7; --grape:#8E6CEF; --peach:#FF9F68; --pink:#FF7EB6; --lime:#8FD14F; --navy:#2B2D42;
  --ok:#22C4A0; --ok-soft:#E3F8F2; --warn:#FF9F68; --bad:#FF6B6B; --bad-soft:#FFE9E9;
  --r-xl:2rem; --r-lg:1.625rem; --r-md:1.25rem; --r-sm:0.875rem;
  --shadow:0 0.75rem 2rem -0.875rem rgba(43,45,66,.28), 0 0.125rem 0.375rem -0.125rem rgba(43,45,66,.08);
  --shadow-lg:0 1.875rem 3.75rem -1.5rem rgba(43,45,66,.45);
  --hero-ink:#2B2D42; --hero-ink-2:rgba(43,45,66,.66);
  --tap:4.5rem;
}
*,*::before,*::after{box-sizing:border-box}
html{height:100%;touch-action:manipulation;-webkit-tap-highlight-color:transparent;overscroll-behavior:none;color-scheme:light}
body{margin:0;min-height:100%;font-family:var(--font);color:var(--ink);background:#FFF3D6;
  -webkit-user-select:none;user-select:none;-webkit-font-smoothing:antialiased;line-height:1.35}
input,textarea,select{-webkit-user-select:text;user-select:text;font-family:inherit}
img{display:block;max-width:100%;-webkit-user-drag:none;user-select:none;pointer-events:none}
button{font-family:inherit;font-size:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0;margin:0;touch-action:manipulation}
button:focus-visible,[tabindex]:focus-visible{outline:0.25rem solid rgba(79,163,247,.55);outline-offset:0.1875rem}
h1,h2,h3,p{margin:0}
[hidden]{display:none!important}
.num{font-variant-numeric:tabular-nums;direction:ltr;unicode-bidi:isolate}
bdi{unicode-bidi:isolate}

/* ---- sky: time-of-day backdrop -------------------------------------------- */
#sky{position:fixed;inset:0;z-index:0;pointer-events:none;transition:background 1.2s ease;
  background:linear-gradient(180deg,#FFF3D6 0%,#FFE3C3 45%,#D5EBFF 100%)}
body[data-daypart="noon"] #sky{background:linear-gradient(180deg,#D7F0FF 0%,#EAF7FF 50%,#FFF6E4 100%)}
body[data-daypart="evening"] #sky{background:linear-gradient(180deg,#FFD9C4 0%,#EBCDF5 55%,#C4D2FF 100%)}
body[data-daypart="night"] #sky{background:linear-gradient(180deg,#171A44 0%,#26296B 60%,#3A3585 100%)}
body[data-daypart="night"]{--hero-ink:#FFFFFF;--hero-ink-2:rgba(255,255,255,.72)}
#sky::before,#sky::after{content:"";position:absolute;inset:0;opacity:0;transition:opacity 1.2s ease}
#sky::before{background:
  radial-gradient(0.125rem 0.125rem at 12% 18%,#fff 60%,transparent 62%),radial-gradient(0.09375rem 0.09375rem at 28% 42%,#fff 60%,transparent 62%),
  radial-gradient(0.125rem 0.125rem at 44% 12%,#fff 60%,transparent 62%),radial-gradient(0.09375rem 0.09375rem at 62% 30%,#fff 60%,transparent 62%),
  radial-gradient(0.125rem 0.125rem at 78% 16%,#fff 60%,transparent 62%),radial-gradient(0.09375rem 0.09375rem at 88% 46%,#fff 60%,transparent 62%),
  radial-gradient(0.125rem 0.125rem at 8% 64%,#fff 60%,transparent 62%),radial-gradient(0.09375rem 0.09375rem at 36% 70%,#fff 60%,transparent 62%),
  radial-gradient(0.125rem 0.125rem at 70% 62%,#fff 60%,transparent 62%),radial-gradient(0.09375rem 0.09375rem at 92% 78%,#fff 60%,transparent 62%),
  radial-gradient(0.125rem 0.125rem at 54% 86%,#fff 60%,transparent 62%),radial-gradient(0.09375rem 0.09375rem at 20% 90%,#fff 60%,transparent 62%)}
body[data-daypart="night"] #sky::before{opacity:.9}
#sky::after{background:radial-gradient(circle at 85% 12%,rgba(255,214,102,.75) 0,rgba(255,214,102,.35) 5.625rem,transparent 13.75rem)}
body[data-daypart="morning"] #sky::after,body[data-daypart="noon"] #sky::after{opacity:1}
body[data-daypart="noon"] #sky::after{background:radial-gradient(circle at 50% -10%,rgba(255,220,120,.85) 0,rgba(255,220,120,.3) 8.75rem,transparent 20rem)}

#app{position:relative;z-index:1;min-height:100vh;display:flex;flex-direction:column;overflow:clip}
@media (pointer:fine){html{scrollbar-gutter:stable}}   /* a mouse browser: the scrollbar's lane is always reserved, so a page that scrolls and one that does not line up */
.screen{flex:1;width:100%;max-width:87.5rem;margin:0 auto;padding:clamp(0.75rem,2vw,1.75rem) clamp(0.875rem,2.5vw,2.25rem) 1.5rem;display:flex;flex-direction:column;gap:clamp(0.75rem,1.4vw,1.25rem)}
.screen.enter{animation:rise .35s cubic-bezier(.2,.8,.2,1)}
@keyframes rise{from{opacity:0;transform:translateY(0.875rem)}to{opacity:1;transform:none}}

/* ---- top bar ---------------------------------------------------------------- */
.topbar{display:flex;align-items:center;gap:0.875rem;padding:clamp(0.625rem,1.6vw,1.125rem) clamp(0.875rem,2.5vw,2.25rem) 0;color:var(--hero-ink)}
.topbar .logo{display:flex;align-items:center;gap:0.625rem;font-weight:800;font-size:clamp(1.125rem,2vw,1.5rem);letter-spacing:-.01em}
.topbar .logo img{width:2.25rem;height:2.25rem;filter:drop-shadow(0 0.25rem 0.5rem rgba(255,184,0,.45))}
.topbar .clock{margin-inline-start:auto;text-align:left;line-height:1.1}
.topbar .clock .t{font-size:clamp(1.625rem,3vw,2.375rem);font-weight:800;letter-spacing:-.02em}
.topbar .clock .d{font-size:0.875rem;color:var(--hero-ink-2);font-weight:500}
.topbar .back{display:inline-flex;align-items:center;gap:0.5rem;min-height:3.25rem;padding:0 1.125rem 0 1.375rem;border-radius:62.4375rem;background:rgba(255,255,255,.72);color:var(--ink);font-weight:700;font-size:1.0625rem;box-shadow:var(--shadow);backdrop-filter:blur(0.5rem)}
.topbar .back svg{width:1.25rem;height:1.25rem}
.topbar .back:active{transform:scale(.96)}

/* ---- shared bits ------------------------------------------------------------- */
.card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow);padding:clamp(1rem,2vw,1.625rem)}
.h1{font-size:clamp(1.75rem,3.6vw,2.75rem);font-weight:900;letter-spacing:-.02em;color:var(--hero-ink);line-height:1.1}
.h2{font-size:clamp(1.25rem,2.2vw,1.625rem);font-weight:800;letter-spacing:-.01em}
.sub{color:var(--hero-ink-2);font-weight:500;font-size:clamp(0.9375rem,1.6vw,1.1875rem)}
.muted{color:var(--ink-2)}
.row{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.grow{flex:1}
.ico{width:1em;height:1em;object-fit:contain}
.st{width:1.375rem;height:1.375rem;vertical-align:-0.3125rem;display:inline-block}
.pill{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.25rem;padding:0 0.875rem;border-radius:62.4375rem;background:var(--paper-2);font-weight:700;font-size:0.9375rem;white-space:nowrap}
.pill.stars{background:linear-gradient(180deg,#FFF1C2,#FFE38F);color:var(--sun-ink)}
.pill.streak{background:linear-gradient(180deg,#FFE0D6,#FFC2B0);color:#8A2E1A}
.pill.streak.off{background:#EEEAF5;color:var(--ink-2)}
.pill.level{background:#EFE9FF;color:#4B2AA6}
.pill .ico{width:1.25rem;height:1.25rem}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:0.625rem;min-height:3.5rem;padding:0 1.625rem;border-radius:62.4375rem;font-weight:800;font-size:1.125rem;
  background:var(--paper);color:var(--ink);box-shadow:var(--shadow);transition:transform .12s,box-shadow .12s,background .12s;white-space:nowrap}
.btn:active{transform:scale(.96)}
.btn.primary{background:linear-gradient(180deg,#FFD35C,#FFB800);color:var(--sun-ink)}
.btn.good{background:linear-gradient(180deg,#5FE0C4,#22C4A0);color:#053B2F}
.btn.danger{background:var(--bad-soft);color:#B32626;box-shadow:none}
.btn.ghost{background:transparent;box-shadow:none;color:var(--ink-2);font-weight:700}
.btn.small{min-height:2.75rem;padding:0 1.125rem;font-size:1rem}
.btn.big{min-height:4.5rem;padding:0 2.25rem;font-size:1.375rem;border-radius:62.4375rem}
.btn.block{width:100%}
.btn:disabled{opacity:.45;pointer-events:none}
.btn .ico{width:1.625rem;height:1.625rem}
.btn.icon{width:3.5rem;padding:0;border-radius:62.4375rem}
.btn.icon svg{width:1.5rem;height:1.5rem}

/* ---- home: who is here ------------------------------------------------------- */
.kids{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,18.75rem),1fr));gap:clamp(0.875rem,2vw,1.625rem)}
.kid{position:relative;display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:clamp(1.375rem,2.6vw,2.125rem) 1.125rem 1.375rem;text-align:center;min-height:18.75rem;
  border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--shadow);transition:transform .15s;overflow:hidden}
.kid:active{transform:scale(.97)}
.kid::before{content:"";position:absolute;inset:0 0 auto 0;height:11.875rem;background:var(--c,var(--sky));opacity:.18}
.kid .pet-wrap{cursor:pointer;-webkit-tap-highlight-color:transparent;min-height:0}
.avatar{position:relative;width:var(--sz,8.25rem);height:var(--sz,8.25rem);border-radius:50%;background:var(--paper);display:grid;place-items:center;
  box-shadow:0 0 0 0.4375rem var(--c,var(--sky)),0 0.75rem 1.625rem -0.625rem rgba(43,45,66,.4)}
.avatar img{width:66%;height:66%;object-fit:contain}
.kid .name{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:900;letter-spacing:-.01em}
.kinfo{display:flex;flex-direction:column;align-items:center;gap:0.625rem;min-width:0}
.kid .stats{display:flex;gap:0.5rem;flex-wrap:wrap;justify-content:center}
.ring{position:relative;width:100%;max-width:17.5rem;margin-top:auto}
.ring .bar{height:0.875rem;border-radius:62.4375rem;background:#F1ECE3;overflow:hidden}
.ring .bar i{display:block;height:100%;border-radius:62.4375rem;background:linear-gradient(90deg,var(--c,var(--sky)),var(--sun));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.ring .lbl{margin-top:0.5rem;font-size:0.875rem;color:var(--ink-2);font-weight:600}
.kid.all-done::before{opacity:.32}
.kid .done-stamp{position:absolute;top:0.875rem;inset-inline-start:0.875rem;display:flex;align-items:center;gap:0.375rem;background:var(--ok);color:#fff;font-weight:800;font-size:0.875rem;padding:0.375rem 0.75rem;border-radius:62.4375rem;box-shadow:0 0.375rem 0.875rem -0.375rem rgba(34,196,160,.6)}
.kid .done-stamp svg{width:1rem;height:1rem}
.add-kid{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;min-height:18.75rem;border-radius:var(--r-xl);border:0.1875rem dashed rgba(43,45,66,.18);color:var(--hero-ink-2);font-weight:700;font-size:1.125rem}
.add-kid .plus{width:4.5rem;height:4.5rem;border-radius:50%;background:rgba(255,255,255,.7);display:grid;place-items:center;font-size:2.5rem;font-weight:300;color:var(--ink-2)}

.family{display:flex;align-items:center;gap:1.125rem;flex-wrap:wrap}
.family .bar{flex:1;min-width:12.5rem;height:1.125rem;border-radius:62.4375rem;background:#F1ECE3;overflow:hidden}
.family .bar i{display:block;height:100%;border-radius:62.4375rem;background:linear-gradient(90deg,var(--grape),var(--pink),var(--sun));transition:width .8s}
.family > .ico{width:2.875rem;height:2.875rem}
.family .goal{font-weight:800;font-size:1.0625rem}
.family .fg-reward{color:var(--ink-2);font-weight:600;font-size:0.9375rem}
.family.reached .bar i{background:linear-gradient(90deg,var(--mint),var(--lime))}

/* ---- child: today ------------------------------------------------------------ */
.child-head{display:flex;align-items:center;gap:clamp(0.875rem,2vw,1.625rem);flex-wrap:wrap}
.child-head .who{display:flex;align-items:center;gap:1rem;min-width:0}
.child-head .name{display:flex;align-items:center;gap:0.625rem;font-size:clamp(1.625rem,3.2vw,2.5rem);font-weight:900;letter-spacing:-.02em;color:var(--hero-ink)}
.child-head .lvl{display:flex;flex-direction:column;gap:0.375rem;min-width:12.5rem}
.child-head .lvl .t{display:flex;justify-content:space-between;font-size:0.875rem;font-weight:700;color:var(--hero-ink-2)}
.child-head .lvl .bar{height:0.625rem;border-radius:62.4375rem;background:rgba(255,255,255,.55);overflow:hidden}
.child-head .lvl .bar i{display:block;height:100%;border-radius:62.4375rem;background:linear-gradient(90deg,var(--grape),var(--pink));transition:width .6s}
.child-head .stats{margin-inline-start:auto;display:flex;gap:0.625rem;flex-wrap:wrap}
.pill.big{min-height:3.25rem;padding:0 1.25rem;font-size:1.375rem;border-radius:62.4375rem;box-shadow:var(--shadow)}
.pill.big .ico{width:1.875rem;height:1.875rem}


.routines{display:flex;gap:0.75rem;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding:0.5rem 0.25rem;margin:-0.5rem -0.25rem;max-width:calc(100% + 0.5rem)}
.routines::-webkit-scrollbar{display:none}
.rchip{flex:0 0 auto;display:flex;align-items:center;gap:0.625rem;min-height:4rem;padding:0.375rem 1rem 0.375rem 0.625rem;border-radius:1.375rem;background:rgba(255,255,255,.62);font-weight:800;font-size:1.125rem;transition:transform .12s,background .15s;position:relative}
.rchip .ico{width:2.375rem;height:2.375rem}
.rchip .p{display:flex;flex-direction:column;align-items:flex-start;gap:0.25rem}
.rchip .p small{font-size:0.8125rem;font-weight:600;color:var(--ink-2)}
.rchip .p .mini{width:6.875rem;height:0.5rem;border-radius:62.4375rem;background:#F1ECE3;overflow:hidden}
.rchip .p .mini i{display:block;height:100%;background:linear-gradient(90deg,var(--c,var(--sky)),var(--sun));border-radius:62.4375rem}
.rchip.on{background:var(--paper);box-shadow:var(--shadow);outline:0.1875rem solid var(--c,var(--sky))}
.rchip.complete .p .mini i{background:var(--ok)}
.rchip .tick{position:absolute;top:-0.5rem;inset-inline-start:-0.5rem;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--ok);display:grid;place-items:center;box-shadow:0 0.25rem 0.625rem -0.1875rem rgba(34,196,160,.7)}
.rchip .tick svg{width:1rem;height:1rem}
.rchip:active{transform:scale(.97)}

.section-title{display:flex;align-items:baseline;gap:0.75rem;color:var(--hero-ink)}
.routine-row{align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem 1.25rem}
.routine-row .tt{display:flex;align-items:baseline;gap:0.75rem}
.section-title .h2{color:inherit}
.section-title .sub{font-size:0.9375rem}
.progress{height:1rem;border-radius:62.4375rem;background:rgba(255,255,255,.6);overflow:hidden;box-shadow:inset 0 0.0625rem 0.1875rem rgba(0,0,0,.06)}
.progress i{display:block;height:100%;border-radius:62.4375rem;background:linear-gradient(90deg,var(--c,var(--sky)),var(--sun));transition:width .6s cubic-bezier(.2,.8,.2,1)}
.progress.complete i{background:linear-gradient(90deg,var(--mint),var(--lime))}

.tasks{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.75rem),1fr));gap:clamp(0.75rem,1.6vw,1.25rem)}
.task{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.625rem;min-height:13.25rem;padding:1.25rem 0.875rem 1.125rem;border-radius:var(--r-lg);
  background:var(--paper);box-shadow:var(--shadow);text-align:center;transition:transform .14s,box-shadow .14s,background .3s;overflow:hidden;color:var(--ink)}
.task:active{transform:scale(.95)}
.task img.main{width:5.75rem;height:5.75rem;object-fit:contain;transition:transform .3s;filter:drop-shadow(0 0.5rem 0.625rem rgba(0,0,0,.12))}
.task .lbl{font-size:clamp(1.0625rem,1.5vw,1.25rem);font-weight:800;line-height:1.2;letter-spacing:-.01em}
.task .val{position:absolute;top:0.75rem;inset-inline-end:0.75rem;display:inline-flex;align-items:center;gap:0.25rem;min-height:2rem;padding:0 0.625rem;border-radius:62.4375rem;background:linear-gradient(180deg,#FFF1C2,#FFE38F);color:var(--sun-ink);font-weight:800;font-size:0.9375rem}
.task .val .ico{width:1.125rem;height:1.125rem}
.task .tm{position:absolute;top:0.75rem;inset-inline-start:0.75rem;display:inline-flex;align-items:center;gap:0.3125rem;min-height:2.125rem;padding:0 0.75rem;border-radius:62.4375rem;background:#EAF3FF;color:#1E5FA8;font-weight:800;font-size:0.875rem;z-index:2}
.task .tm svg{width:1rem;height:1rem}
.task.next{box-shadow:0 0 0 0.25rem var(--c,var(--sky)),var(--shadow);animation:pulse 1.6s ease-in-out infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0.25rem var(--c,var(--sky)),var(--shadow)}50%{box-shadow:0 0 0 0.5625rem color-mix(in srgb,var(--c,var(--sky)) 35%,transparent),var(--shadow)}}
.task.next .now{position:absolute;bottom:0;inset-inline:0;padding:0.375rem;background:var(--c,var(--sky));color:#fff;font-weight:800;font-size:0.8125rem;letter-spacing:.02em}
.task.done{background:var(--ok-soft);box-shadow:none;outline:0.1875rem solid rgba(34,196,160,.35)}
.task.done img.main{transform:scale(.86);opacity:.7}
.task.done .lbl{color:#0E7A61}
.task.done .val{background:var(--ok);color:#fff}
.task .stamp{position:absolute;width:4rem;height:4rem;border-radius:50%;background:var(--ok);display:grid;place-items:center;top:50%;left:50%;transform:translate(-50%,-70%) scale(0);opacity:0;box-shadow:0 0.625rem 1.5rem -0.5rem rgba(34,196,160,.8)}
.task .stamp svg{width:2.125rem;height:2.125rem}
.task.done .stamp{transform:translate(-50%,-70%) scale(1);opacity:1}
.task.pop .stamp{animation:stamp .5s cubic-bezier(.2,1.4,.3,1) forwards}
@keyframes stamp{to{transform:translate(-50%,-70%) scale(1);opacity:1}}
.task.pending{background:#FFF6E3;outline:0.1875rem solid rgba(255,184,0,.35);box-shadow:none}
.task.pending .lbl{color:#8A5406}
.task.pop img.main{animation:pop .45s cubic-bezier(.2,1.6,.3,1)}
@keyframes pop{40%{transform:scale(1.22) rotate(-6deg)}}

.empty{display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:2.5rem 1.25rem;text-align:center;color:var(--ink-2);font-weight:600;font-size:1.125rem}
.empty img{width:7.5rem;height:7.5rem;opacity:.9}
.all-done{display:flex;align-items:center;gap:1.125rem;padding:0.875rem 1.375rem;border-radius:var(--r-lg);background:linear-gradient(120deg,#E3F8F2,#FFF6D6);box-shadow:var(--shadow)}
.all-done img{width:4.5rem;height:4.5rem}
.all-done .t{font-size:1.375rem;font-weight:900}
.all-done .s{color:var(--ink-2);font-weight:600}

.agenda{display:flex;gap:0.75rem;overflow-x:auto;padding-bottom:0.375rem;scrollbar-width:none}
.agenda::-webkit-scrollbar{display:none}
.agenda .ev{display:flex;align-items:center;gap:0.75rem;min-height:4.125rem;padding:0.5rem 1rem;border-radius:1.25rem;background:var(--paper);box-shadow:var(--shadow);white-space:nowrap;flex:0 0 auto}
.agenda .ev .ico{width:2.5rem;height:2.5rem}
.agenda .ev .t{font-weight:800;font-size:1.0625rem}
.agenda .ev .h{font-size:0.875rem;color:var(--ink-2);font-weight:700}
.agenda .ev.past{opacity:.5}
.agenda .ev.now{outline:0.1875rem solid var(--c,var(--sky))}

/* ---- shop --------------------------------------------------------------------- */
.rewards{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:clamp(0.75rem,1.6vw,1.25rem);padding:0.5rem 0.25rem 0.875rem}
.rewards::-webkit-scrollbar{display:none}
.reward{flex:0 0 min(62vw,14.375rem);scroll-snap-align:start}
.reward{display:flex;flex-direction:column;align-items:center;gap:0.75rem;padding:1.375rem 1rem 1.125rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow);text-align:center;position:relative;transition:transform .14s}
.reward img.main{width:6rem;height:6rem;object-fit:contain;filter:drop-shadow(0 0.5rem 0.625rem rgba(0,0,0,.12))}
.reward .lbl{font-size:1.1875rem;font-weight:800;line-height:1.2}
.reward .cost{display:inline-flex;align-items:center;gap:0.375rem;font-weight:900;font-size:1.25rem;color:var(--sun-ink)}
.reward .cost .ico{width:1.5rem;height:1.5rem}
.reward .btn{min-height:3.125rem;font-size:1.0625rem;padding:0 1.375rem}
.reward.can{outline:0.25rem solid var(--sun);box-shadow:0 0 0 0.5rem rgba(255,184,0,.18),var(--shadow)}
.reward.can::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.55) 50%,transparent 70%);background-size:250% 100%;animation:shineRare 38s linear infinite}
.reward.can:nth-child(3n+2)::after{animation-delay:-13s}
.reward.can:nth-child(3n)::after{animation-delay:-26s}
@keyframes shine{from{background-position:120% 0}to{background-position:-120% 0}}
/* affordable rewards shine once in a while, each at its own moment, not in a loop (Eli 2026-09-13) */
@keyframes shineRare{0%{background-position:120% 0}6%{background-position:-120% 0}100%{background-position:-120% 0}}
.reward.locked img.main{filter:grayscale(.5) opacity(.55)}
.reward .need{font-size:0.875rem;font-weight:700;color:var(--ink-2)}
.reward .state{display:inline-flex;align-items:center;gap:0.375rem;min-height:2.75rem;padding:0 1rem;border-radius:62.4375rem;font-weight:800;font-size:0.9375rem}
.reward .state.pending{background:#FFF1C2;color:var(--sun-ink)}
.reward .state.approved{background:var(--ok-soft);color:#0E7A61}
.wallet{display:flex;align-items:center;gap:0.875rem;padding:1rem 1.375rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow)}
.wallet .big{font-size:2.125rem;font-weight:900;color:var(--sun-ink);display:flex;align-items:center;gap:0.5rem}
.wallet .big .ico{width:2.375rem;height:2.375rem}
.wallet .s{color:var(--ink-2);font-weight:600}

/* ---- album -------------------------------------------------------------------- */
.album{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,8.25rem),1fr));gap:0.875rem}
.sticker{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;border-radius:1.5rem;background:var(--paper);box-shadow:var(--shadow);position:relative;overflow:hidden}
.sticker img{width:64%;height:64%;object-fit:contain;filter:drop-shadow(0 0.375rem 0.5rem rgba(0,0,0,.14))}
.sticker .n{font-size:0.875rem;font-weight:800}
.sticker.locked{background:rgba(255,255,255,.45);box-shadow:none;border:0.1875rem dashed rgba(43,45,66,.15)}
.sticker.locked img{filter:brightness(0) opacity(.12)}
.sticker.locked .n{color:var(--ink-3)}
.sticker.new::after{content:"חדש";position:absolute;top:0.625rem;inset-inline-end:0.625rem;background:var(--coral);color:#fff;font-size:0.75rem;font-weight:800;padding:0.25rem 0.5625rem;border-radius:62.4375rem}
.sticker.new{animation:wiggle 1.2s ease-in-out 3}
@keyframes wiggle{0%,100%{transform:rotate(0)}25%{transform:rotate(-4deg)}75%{transform:rotate(4deg)}}

/* ---- schedule ---------------------------------------------------------------- */
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:0.625rem}
.day{display:flex;flex-direction:column;gap:0.5rem;padding:0.75rem 0.625rem;border-radius:1.375rem;background:rgba(255,255,255,.55);min-height:10rem}
.day.today{background:var(--paper);box-shadow:var(--shadow);outline:0.1875rem solid var(--c,var(--sky))}
.day .dn{font-weight:900;font-size:1.0625rem;text-align:center}
.day .dd{font-size:0.75rem;color:var(--ink-2);font-weight:700;text-align:center;margin-top:-0.25rem}
.day .e{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.625rem;border-radius:0.875rem;background:var(--paper-2);font-size:0.875rem;font-weight:700;line-height:1.15}
.day.today .e{background:#F5F1FF}
.day .e .ico{width:1.625rem;height:1.625rem;flex:0 0 auto}
.day .e .h{font-size:0.75rem;color:var(--ink-2);font-weight:800}
.day .none{font-size:0.8125rem;color:var(--ink-2);text-align:center;margin-top:auto;margin-bottom:auto;font-weight:600}
@media (min-width:760px) and (max-width:900px){.day{padding:0.625rem 0.375rem}.day .e{font-size:0.75rem;padding:0.375rem 0.375rem}.day .e .ico{width:1.25rem;height:1.25rem}}

/* ---- overlays: modal, celebrate, timer, pin ------------------------------------ */
.overlay{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:1.125rem;background:rgba(30,26,60,.45);backdrop-filter:blur(0.375rem);animation:fade .2s}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{width:min(100%,35rem);max-height:calc(100vh - 2.25rem);overflow:auto;background:var(--paper);border-radius:var(--r-xl);padding:clamp(1.25rem,3vw,2rem);box-shadow:var(--shadow-lg);animation:sheetIn .3s cubic-bezier(.2,.9,.2,1);color:var(--ink)}
.sheet.wide{width:min(100%,56.25rem)}
@keyframes sheetIn{from{opacity:0;transform:translateY(1.375rem) scale(.97)}to{opacity:1;transform:none}}
.sheet .h2{margin-bottom:0.375rem}
.sheet .actions{display:flex;gap:0.625rem;justify-content:flex-end;flex-wrap:wrap;margin-top:1.375rem}
.sheet .actions .btn{flex:1 1 auto}
.center{text-align:center}
.hero-ico{width:9.375rem;height:9.375rem;object-fit:contain;margin:0 auto 0.625rem;filter:drop-shadow(0 0.875rem 1.125rem rgba(0,0,0,.18))}

.celebrate{position:fixed;inset:0;z-index:60;display:flex;align-items:center;justify-content:center;padding:1.25rem;background:radial-gradient(circle at 50% 40%,rgba(255,236,170,.96),rgba(255,214,102,.94) 55%,rgba(255,159,104,.96));animation:fade .3s}
.celebrate .box{display:flex;flex-direction:column;align-items:center;gap:0.875rem;text-align:center;max-width:40rem}
.celebrate .t{font-size:clamp(2.125rem,5vw,3.5rem);font-weight:900;letter-spacing:-.02em;color:#7A3D00;text-shadow:0 0.125rem 0 rgba(255,255,255,.6)}
.celebrate .s{font-size:clamp(1.125rem,2.4vw,1.5rem);font-weight:700;color:#8A5406}
.celebrate img.hero{width:clamp(9.375rem,22vw,15rem);height:auto;filter:drop-shadow(0 1.25rem 1.5rem rgba(122,61,0,.3));animation:bounce 1.6s ease-in-out infinite}
@keyframes bounce{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-1rem) rotate(3deg)}}
.celebrate .btn{margin-top:0.625rem}
.mystery{position:relative;width:clamp(10.625rem,24vw,16.25rem);aspect-ratio:1;display:grid;place-items:center;cursor:pointer}
.mystery img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 1.25rem 1.5rem rgba(122,61,0,.3));animation:shake 1.2s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(0)}20%{transform:rotate(-8deg) scale(1.03)}40%{transform:rotate(8deg)}60%{transform:rotate(-5deg) scale(1.03)}80%{transform:rotate(5deg)}}
.mystery .tap{position:absolute;bottom:-0.5rem;background:#7A3D00;color:#fff;font-weight:800;padding:0.5rem 1rem;border-radius:62.4375rem;font-size:0.9375rem}
.prize{display:flex;flex-direction:column;align-items:center;gap:0.375rem;animation:prize .6s cubic-bezier(.2,1.5,.3,1)}
@keyframes prize{from{transform:scale(.2);opacity:0}to{transform:none;opacity:1}}
.prize img{width:clamp(9.375rem,22vw,13.75rem);height:auto;filter:drop-shadow(0 1.25rem 1.5rem rgba(122,61,0,.3))}
.prize .big{font-size:clamp(1.875rem,4.6vw,3.125rem);font-weight:900;color:#7A3D00}

.timerwrap{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.375rem;padding:1.25rem;background:linear-gradient(180deg,#D7F0FF,#FFF6E4);animation:fade .3s;text-align:center}
.timerwrap .lbl{font-size:clamp(1.625rem,3.6vw,2.5rem);font-weight:900;display:flex;align-items:center;gap:0.875rem}
.timerwrap .lbl img{width:4rem;height:4rem}
.tring{position:relative;width:min(62vh,26.25rem);aspect-ratio:1;--p:100;--col:var(--sky)}
.tring::before{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(var(--col) calc(var(--p)*1%),rgba(255,255,255,.85) 0);
  -webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 1.375rem),#000 calc(100% - 1.3125rem));mask:radial-gradient(farthest-side,transparent calc(100% - 1.375rem),#000 calc(100% - 1.3125rem));transition:--p 1s linear}
.tring.warn{--col:var(--peach)}
.tring.over{--col:var(--coral)}
.tring .num{position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(3.5rem,10vw,7.5rem);font-weight:900;letter-spacing:-.03em}
.timerwrap .acts{display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center}

.pinpad{display:grid;grid-template-columns:repeat(3,1fr);gap:0.75rem;max-width:21.25rem;margin:1.125rem auto 0}
.pinpad button{height:4.875rem;border-radius:1.375rem;background:var(--paper-2);font-size:1.875rem;font-weight:800;box-shadow:var(--shadow)}
.pinpad button:active{transform:scale(.95)}
.pinpad button.fn{font-size:1.125rem;font-weight:800;color:var(--ink-2)}
.dots{display:flex;justify-content:center;gap:1rem;margin-top:0.375rem}
.dots i{width:1.125rem;height:1.125rem;border-radius:50%;background:#EEE5D8;transition:background .15s,transform .15s}
.dots i.on{background:var(--grape);transform:scale(1.15)}
.dots.err i{background:var(--coral);animation:shakeX .4s}
@keyframes shakeX{0%,100%{transform:translateX(0)}25%{transform:translateX(-0.5rem)}75%{transform:translateX(0.5rem)}}

/* ---- toasts, fx --------------------------------------------------------------- */
#toasts{position:fixed;bottom:1.375rem;inset-inline:0;z-index:80;display:flex;flex-direction:column;align-items:center;gap:0.5rem;pointer-events:none}
.toast{display:flex;align-items:center;gap:0.625rem;padding:0.75rem 1.25rem;border-radius:62.4375rem;background:var(--navy);color:#fff;font-weight:700;font-size:1rem;box-shadow:var(--shadow-lg);animation:toastIn .3s cubic-bezier(.2,.9,.2,1)}
.toast.good{background:var(--ok)}.toast.bad{background:var(--coral)}
.toast .ico{width:1.5rem;height:1.5rem}
@keyframes toastIn{from{opacity:0;transform:translateY(0.875rem)}to{opacity:1;transform:none}}
#confetti{position:fixed;inset:0;z-index:70;pointer-events:none}
#fx{position:fixed;inset:0;z-index:71;pointer-events:none;overflow:hidden}
#fx .fly{position:absolute;width:2.125rem;height:2.125rem;will-change:transform}
#fx .fly img{width:100%;height:100%;filter:drop-shadow(0 0.25rem 0.375rem rgba(255,184,0,.6))}
.bump{animation:bump .5s cubic-bezier(.2,1.5,.3,1)}
@keyframes bump{40%{transform:scale(1.25)}}

/* ---- parent zone --------------------------------------------------------------- */
.parent{display:grid;grid-template-columns:14.375rem 1fr;gap:clamp(0.875rem,2vw,1.625rem);align-items:start}
.ptabs{display:flex;flex-direction:column;gap:0.375rem;position:sticky;top:0.75rem}
.ptabs button{display:flex;align-items:center;gap:0.75rem;min-height:3.5rem;padding:0 1rem;border-radius:1.125rem;font-weight:800;font-size:1.0625rem;color:var(--ink-2);text-align:start;background:rgba(255,255,255,.5)}
.ptabs button .ico{width:1.75rem;height:1.75rem}
.ptabs button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.ptabs .badge{margin-inline-start:auto;min-width:1.625rem;height:1.625rem;padding:0 0.5rem;border-radius:62.4375rem;background:var(--coral);color:#fff;font-size:0.875rem;display:grid;place-items:center}
.pbody{display:flex;flex-direction:column;gap:1rem;min-width:0}
@media (max-width:860px){.parent{grid-template-columns:1fr}.ptabs{flex-direction:row;overflow-x:auto;position:static;padding-bottom:0.25rem;scrollbar-width:none}.ptabs button{flex:0 0 auto;min-height:3rem}.ptabs .badge{margin-inline-start:0.25rem}}
.phead{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.phead .h2{flex:1}
.phead .h2,.pbody > .h2{color:var(--hero-ink)}
.list{display:flex;flex-direction:column;gap:0.625rem}
.item{display:flex;align-items:center;gap:0.875rem;padding:0.75rem 1rem;border-radius:1.25rem;background:var(--paper);box-shadow:var(--shadow);min-height:4.5rem}
.item img.i{width:3rem;height:3rem;object-fit:contain;flex:0 0 auto}
.item .txt{flex:1;min-width:0}
.item .t{font-weight:800;font-size:1.0625rem}
.item .s{font-size:0.875rem;color:var(--ink-2);font-weight:600}
.item .acts{display:flex;gap:0.375rem;flex:0 0 auto}
.item.drag{opacity:.4}
.item .handle{width:2.25rem;height:3.5rem;display:grid;place-items:center;color:var(--ink-3);cursor:grab;touch-action:none}
.item .handle svg{width:1.375rem;height:1.375rem}
.ibtn{width:3rem;height:3rem;border-radius:0.875rem;background:var(--paper-2);display:grid;place-items:center;color:var(--ink-2)}
.ibtn svg{width:1.375rem;height:1.375rem}
.ibtn.good{background:var(--ok-soft);color:#0E7A61}.ibtn.bad{background:var(--bad-soft);color:#B32626}
.ibtn:active{transform:scale(.93)}
.group{display:flex;flex-direction:column;gap:0.625rem}
.group > .gh{display:flex;align-items:center;gap:0.625rem;font-weight:800;font-size:1rem;color:var(--hero-ink);padding:0.375rem 0.25rem 0}
.group > .gh .ico{width:1.625rem;height:1.625rem}
.group > .gh .btn{margin-inline-start:auto}
.chips{display:flex;gap:0.5rem;flex-wrap:wrap}
.chips button{min-height:2.75rem;padding:0 1rem;border-radius:62.4375rem;background:rgba(255,255,255,.55);font-weight:800;font-size:0.9375rem;color:var(--ink-2)}
.chips button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow);outline:0.125rem solid var(--c,var(--grape))}
.chips button img{width:1.5rem;height:1.5rem;vertical-align:-0.375rem;margin-inline-end:0.375rem;display:inline-block}
.field{display:flex;flex-direction:column;gap:0.375rem;margin-bottom:0.875rem}
.field label{font-weight:800;font-size:0.9375rem;color:var(--ink-2)}
.input,.select,textarea.input{width:100%;min-height:3.5rem;padding:0 1rem;border-radius:1rem;border:0.125rem solid var(--line);background:var(--paper-2);font-size:1.125rem;font-weight:600;color:var(--ink);outline:none}
textarea.input{padding:0.75rem 1rem;min-height:5.625rem;resize:vertical}
.input:focus,.select:focus{border-color:var(--grape);background:#fff}
.select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23646883' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 0.875rem center;background-size:1.125rem;padding-inline-start:2.5rem}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:0 0.875rem}
@media (max-width:520px){.grid2{grid-template-columns:1fr}}
.seg{display:flex;gap:0.375rem;flex-wrap:wrap}
.seg button{min-width:3.25rem;min-height:3rem;padding:0 0.875rem;border-radius:0.875rem;background:var(--paper-2);font-weight:800;font-size:1rem;color:var(--ink-2);border:0.125rem solid transparent}
.seg button.on{background:#EFE9FF;color:#4B2AA6;border-color:var(--grape)}
.swatches{display:flex;gap:0.625rem;flex-wrap:wrap}
.swatches button{width:2.875rem;height:2.875rem;border-radius:50%;background:var(--c);border:0.25rem solid transparent}
.swatches button.on{border-color:var(--ink);box-shadow:0 0 0 0.1875rem #fff inset}
.pick{display:flex;align-items:center;gap:0.75rem;min-height:4rem;padding:0.5rem 0.875rem;border-radius:1rem;border:0.125rem solid var(--line);background:var(--paper-2);width:100%;text-align:start;font-weight:700;font-size:1rem}
.pick img{width:2.75rem;height:2.75rem}
.pick span{flex:1}
.pick .chev{color:var(--ink-3)}
.icon-search{width:100%;margin-bottom:0.625rem}
.again{margin-bottom:1rem}
.again-h{font-weight:900;font-size:1rem;color:var(--ink);margin-bottom:0.5rem}
.again-list{display:flex;flex-wrap:wrap;gap:0.5rem}
.again-chip{display:inline-flex;align-items:center;border-radius:62.4375rem;background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
.again-chip .l{display:inline-flex;align-items:center;gap:0.5rem;padding:0.5rem 0.375rem 0.5rem 0.875rem;font-weight:800;font-size:0.9375rem;color:var(--ink);cursor:pointer;min-height:3rem}
.again-chip .l img{width:1.875rem;height:1.875rem}
.again-chip .x{display:grid;place-items:center;width:2.5rem;min-height:3rem;color:var(--ink-3);cursor:pointer}
.again-chip .x svg{width:0.875rem;height:0.875rem}
.again-who .row{display:flex;gap:0.625rem;flex-wrap:wrap;justify-content:center}
.again-who .btn{gap:0.625rem;min-height:3.5rem;font-size:1.125rem}
.pin-remember{display:inline-flex;align-items:center;gap:0.5rem;margin-top:0.875rem;padding:0.5rem 0.75rem;border-radius:62.4375rem;background:var(--paper-2);font-weight:800;font-size:0.875rem;color:var(--ink-2);cursor:pointer}
.pin-remember .box{display:grid;place-items:center;width:1.375rem;height:1.375rem;border-radius:0.4375rem;border:0.125rem solid var(--ink-3);background:#fff}
.pin-remember .box svg{width:0.875rem;height:0.875rem;opacity:0}
.pin-remember.on{color:var(--ink)}.pin-remember.on .box{background:var(--grape);border-color:var(--grape);color:#fff}.pin-remember.on .box svg{opacity:1}
@media (max-width:600px){.pickchips{flex-wrap:nowrap;overflow-x:auto;padding:0.3125rem 0.1875rem;scrollbar-width:none;-webkit-overflow-scrolling:touch}.pickchips button{flex:none}}
.iconpick{display:grid;grid-template-columns:repeat(auto-fill,minmax(5.5rem,1fr));gap:0.5rem}
.iconpick button{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.625rem 0.25rem 0.5rem;border-radius:1rem;background:var(--paper-2);font-size:0.75rem;font-weight:700;color:var(--ink-2);line-height:1.1}
.iconpick button img{width:3rem;height:3rem}
.iconpick button.on{background:#EFE9FF;outline:0.1875rem solid var(--grape);color:var(--ink)}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:0.875rem;min-height:4rem;padding:0.5rem 1rem;border-radius:1rem;background:var(--paper);box-shadow:var(--shadow)}
.toggle .t{font-weight:800;font-size:1.0625rem}
.toggle .s{font-size:0.875rem;color:var(--ink-2);font-weight:600}
.switch{width:4rem;height:2.375rem;border-radius:62.4375rem;background:#E3DDD2;position:relative;flex:0 0 auto;transition:background .2s}
.switch::after{content:"";position:absolute;top:0.25rem;inset-inline-start:0.25rem;width:1.875rem;height:1.875rem;border-radius:50%;background:#fff;box-shadow:0 0.125rem 0.375rem rgba(0,0,0,.2);transition:transform .2s}
.switch.on{background:var(--ok)}
.switch.on::after{transform:translateX(-1.625rem)}
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:0.75rem}
.stat{padding:1rem 1.125rem;border-radius:1.25rem;background:var(--paper);box-shadow:var(--shadow)}
.stat .v{font-size:2rem;font-weight:900;letter-spacing:-.02em;text-align:right}
.stat .l{font-size:0.875rem;color:var(--ink-2);font-weight:700}
.heat{display:grid;grid-template-columns:9.375rem repeat(14,1fr);gap:0.375rem;align-items:center;min-width:38.75rem}
.heatwrap{overflow-x:auto;padding-bottom:0.375rem}
.heat .hn{font-weight:800;font-size:0.9375rem;display:flex;align-items:center;gap:0.5rem}
.heat .hn img{width:1.875rem;height:1.875rem}
.heat .hd{font-size:0.6875rem;font-weight:700;color:var(--ink-2);text-align:center}
.heat .c{aspect-ratio:1;border-radius:0.5rem;background:#F1ECE3;display:grid;place-items:center;font-size:0.6875rem;font-weight:800;color:var(--ink-2)}
.heat .c.l1{background:#D9F3EA}.heat .c.l2{background:#9FE3CB;color:#0E5A47}.heat .c.l3{background:var(--ok);color:#fff}.heat .c.l0x{background:#FFE3E3}
.note{padding:0.875rem 1.125rem;border-radius:1rem;background:#FFF6E3;color:#6B4A00;font-weight:600;font-size:0.9375rem;line-height:1.45}
.note.info{background:#EAF3FF;color:#1E4E80}
.pill.tiny{min-height:1.75rem;padding:0 0.625rem;font-size:0.8125rem;background:#EFE9FF;color:#4B2AA6}
.hr{height:0.125rem;background:var(--line);margin:0.5rem 0}
.kbd{font-family:ui-monospace,monospace;font-size:0.875rem;background:var(--paper-2);padding:0.125rem 0.5rem;border-radius:0.5rem;border:0.0625rem solid var(--line)}

/* ---- welcome ----------------------------------------------------------------- */
.welcome{max-width:45rem;margin:auto;text-align:center;display:flex;flex-direction:column;align-items:center;gap:1.125rem;padding:2.5rem 1.25rem}
.welcome img.logo{width:8.75rem;height:8.75rem}
.welcome .feat{display:grid;grid-template-columns:repeat(auto-fit,minmax(9.375rem,1fr));gap:0.75rem;width:100%;margin-top:0.375rem}
.welcome .feat div{background:rgba(255,255,255,.7);border-radius:1.25rem;padding:1rem 0.75rem;font-weight:700;font-size:0.9375rem;display:flex;flex-direction:column;align-items:center;gap:0.5rem}
.welcome .feat img{width:3.375rem;height:3.375rem}

.lockbtn{width:3rem;height:3rem;border-radius:50%;background:rgba(255,255,255,.55);display:grid;place-items:center;color:var(--ink-2);backdrop-filter:blur(0.5rem);box-shadow:var(--shadow);flex:0 0 auto}
.lockbtn svg{width:1.375rem;height:1.375rem}
.lockbtn:active{transform:scale(.93)}
.preview-frame{position:fixed;inset:0;z-index:200;pointer-events:none;box-shadow:inset 0 0 0 0.25rem var(--grape)}
.preview-label{position:fixed;top:0;left:50%;transform:translateX(-50%);z-index:201;pointer-events:none;padding:0.125rem 0.875rem 0.25rem;border-radius:0 0 0.75rem 0.75rem;background:var(--grape);color:#fff;font-weight:800;font-size:0.75rem;white-space:nowrap}
@media (max-width:600px){.preview-label .more{display:none}}
.sync{position:fixed;top:0.625rem;left:50%;transform:translateX(-50%);z-index:45;padding:0.375rem 0.875rem;border-radius:62.4375rem;background:var(--coral);color:#fff;font-weight:800;font-size:0.8125rem}

@media (max-width:600px){
  :root{--tap:4rem}
  .tasks{grid-template-columns:repeat(2,1fr)}
  .task{min-height:11.25rem;padding:1rem 0.625rem 0.875rem}.task img.main{width:4.625rem;height:4.625rem}
  .child-head .stats{margin-inline-start:0}
  .topbar .clock .t{font-size:1.375rem}
  .topbar .clock .d{font-size:0.75rem}
  .topbar .logo .lt{display:none}
  .kid{min-height:0}
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* ---- parent backlog tab ---------------------------------------------------------- */
.backlog .badd{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-top:0.75rem}
.backlog .badd .input{flex:1;min-width:13.75rem}
.backlog .bgroup{margin-top:1.25rem}
.backlog .bitem{display:grid;grid-template-columns:auto 1fr auto;gap:0.75rem;align-items:center;padding:0.625rem 0.75rem;border-radius:0.875rem;background:var(--paper);box-shadow:var(--shadow);margin-top:0.5rem}
.backlog .bid{font-weight:900;color:var(--grape);min-width:2.75rem}
.backlog .bh{font-weight:800;line-height:1.35}
.backlog .bt{font-weight:700;direction:ltr;text-align:left;line-height:1.3}
.backlog .bt.small{font-weight:500;font-size:0.75rem;color:var(--ink-2);margin-top:0.1875rem}
.backlog .bs{font-size:0.8125rem;color:var(--ink-2);direction:ltr;text-align:left;margin-top:0.125rem}
.backlog .bitem.done{opacity:.55}
.backlog select.bsel{width:auto;padding:0.5rem 0.625rem}
@media (max-width:600px){.backlog .bitem{grid-template-columns:auto 1fr}.backlog .bitem select{grid-column:1/-1}}
/* ---- creatures ---------------------------------------------------------------- */
.cr{display:block;overflow:visible}
.cr image.art{filter:drop-shadow(0 0.25rem 0.25rem rgba(0,0,0,.16))}
/* rendered art: three layers in one frame (see creature.js drawArt) */
.crw{position:relative;overflow:visible}
.crw .crb{position:absolute;inset:0}   /* the body layer must have its own box: a transform on it makes it the containing block of the layers inside */
.crw .crl,.crw canvas.crc{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.crw .front,.crw .shadow{pointer-events:none}
.crw .shadow ellipse{filter:blur(0.1rem);transform-box:fill-box;transform-origin:center}
/* transforms act on the body layer, never on the shadow */
.crw.wobble,.crw.jump,.crw.evolve{animation:none}
.crw.wobble .crb{animation:cr-wobble 1.6s ease-in-out infinite;transform-origin:50% 90%}
.crw.jump .crb{animation:cr-jump .6s cubic-bezier(.3,1.6,.4,1)}
.crw.jump .shadow ellipse{animation:sh-jump .6s ease-out}
@keyframes sh-jump{30%{transform:scale(.7);opacity:.07}60%{transform:scale(1.04)}}
.crw.evolve .crb{animation:cr-evolve 1.6s ease-in-out}
.crw.charge .crb{animation:cr-charge 1.3s ease-in infinite}
@keyframes cr-charge{0%,100%{transform:translate(0,0)}20%{transform:translate(-0.1875rem,0.0625rem)}50%{transform:translate(0.125rem,0.125rem)}60%{transform:translate(0.1875rem,-0.0625rem)}80%{transform:translate(-0.125rem,-0.125rem)}}
.crw.charge::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.9),rgba(255,255,255,0) 65%);animation:cr-glow 1.3s ease-in infinite;pointer-events:none}
@keyframes cr-glow{0%,100%{opacity:0}45%{opacity:.7}}
.eggpick .crw{animation:none}.eggpick .crw .crb{animation:cr-wobble 2.2s ease-in-out infinite;transform-origin:50% 90%}
/* element auras */
.cr.anim .fx-glow{animation:fx-glow 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-glow{0%,100%{opacity:.6;transform:scale(.95)}50%{opacity:1;transform:scale(1.07)}}
.cr.anim .fx-rays{animation:fx-spin 16s linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-spin{to{transform:rotate(360deg)}}
.cr.anim .fx-rays.rev{animation-direction:reverse;animation-duration:11s}
.cr.anim .fx-ring{animation:fx-ring 2.4s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-ring{0%{opacity:.6;transform:scale(.72)}100%{opacity:0;transform:scale(1.3)}}
.cr.anim .fx-rise{animation:fx-rise var(--d,3s) linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-rise{0%{opacity:0;transform:translateY(0) scale(.6)}15%{opacity:1}100%{opacity:0;transform:translateY(-4rem) scale(1.25) rotate(25deg)}}
/* per-species signatures (H21) */
.cr.anim .fx-flick{animation:fx-flick var(--d,.7s) ease-in-out infinite alternate;transform-box:fill-box;transform-origin:bottom center}
@keyframes fx-flick{from{transform:scaleY(.75) scaleX(1.05);opacity:.7}to{transform:scaleY(1.15) scaleX(.9);opacity:1}}
.cr.anim .fx-arc{animation:fx-arc 3.2s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-arc{0%,100%{transform:translateY(0);opacity:.75}50%{transform:translateY(-0.1875rem);opacity:1}}
.cr.anim .fx-bob{animation:fx-bob 4s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.25rem)}}
.cr.anim .fx-fall{animation:fx-fall var(--d,4s) linear infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-fall{0%{opacity:0;transform:translateY(-1.875rem) rotate(0)}15%{opacity:1}100%{opacity:0;transform:translateY(4.375rem) rotate(180deg)}}
.cr.anim .fx-zap{animation:fx-zap var(--d,1.6s) steps(1,end) infinite}
@keyframes fx-zap{0%,6%{opacity:1}7%,12%{opacity:0}13%,17%{opacity:1}18%,100%{opacity:0}}
.cr.anim .fx-orbit{animation:fx-spin var(--d,6s) linear infinite;transform-box:fill-box;transform-origin:center}
.cr.anim .fx-aurora{animation:fx-aurora 5s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes fx-aurora{0%,100%{opacity:.25;transform:translateY(0)}50%{opacity:.5;transform:translateY(-0.25rem)}}
.crw.mood-sleeping .back,.crw.mood-sleeping .front{filter:saturate(.7)}
.cr.anim .breathe{animation:cr-breathe 3.4s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes cr-breathe{0%,100%{transform:translate(0,0) scale(1,1)}50%{transform:translate(0,-0.09375rem) scale(1.012,1.03)}}
.cr.anim .blink{animation:cr-blink 5.2s infinite;transform-box:fill-box;transform-origin:center}
@keyframes cr-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.08)}}
.cr.anim .heart{animation:cr-heart 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes cr-heart{0%{opacity:0;transform:translateY(0.375rem) scale(.6)}25%{opacity:1}100%{opacity:0;transform:translateY(-1.625rem) scale(1.15)}}
.cr.anim .twinkle{animation:cr-twinkle 1.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes cr-twinkle{0%,100%{opacity:.55;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}
.cr.anim .flap{animation:cr-flap 2.8s ease-in-out infinite;transform-box:fill-box}
.cr.anim .flap.l{transform-origin:100% 50%}.cr.anim .flap.r{transform-origin:0% 50%}
@keyframes cr-flap{0%,100%{transform:rotate(0)}50%{transform:rotate(-7deg)}}
.cr.anim .flap.r{animation-name:cr-flap-r}
@keyframes cr-flap-r{0%,100%{transform:rotate(0)}50%{transform:rotate(7deg)}}
.cr.anim .float{animation:cr-float 3s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes cr-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-0.5rem)}}
.cr.wobble{animation:cr-wobble 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes cr-wobble{0%,100%{transform:rotate(0)}20%{transform:rotate(-6deg)}40%{transform:rotate(5deg)}60%{transform:rotate(-3deg)}80%{transform:rotate(2deg)}}
.cr.jump{animation:cr-jump .6s cubic-bezier(.3,1.6,.4,1)}
@keyframes cr-jump{30%{transform:translateY(-1.375rem) scale(1.06,.94)}60%{transform:translateY(0) scale(.96,1.06)}}
.cr.evolve{animation:cr-evolve 1.6s ease-in-out}
@keyframes cr-evolve{0%{filter:brightness(1)}30%{filter:brightness(3) saturate(0)}45%{transform:scale(1.15) rotate(-4deg);filter:brightness(4) saturate(0)}60%{transform:scale(.9) rotate(4deg);filter:brightness(3)}100%{filter:brightness(1)}}
@media (prefers-reduced-motion:reduce){.cr *{animation:none!important}}

.gallery{display:grid;grid-template-columns:repeat(8,1fr);gap:0.375rem;align-items:end}
.gallery .cell{background:rgba(255,255,255,.7);border-radius:0.875rem;padding:0.25rem;text-align:center;font-size:0.6875rem;font-weight:700;color:var(--ink-2);display:flex;flex-direction:column;align-items:center;gap:0.125rem}
.gallery .cell .cr{margin:0 auto}
.peek-stage{display:grid;place-items:center;min-height:23.75rem}
.gallery .lbl{font-weight:900;font-size:0.875rem;color:var(--ink);display:flex;align-items:center;justify-content:center;height:100%}

/* ---- creature in the UI ------------------------------------------------------------ */
.pet-wrap{display:grid;place-items:center;min-height:9.375rem}
.egg-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;width:9.375rem;height:9.375rem;border-radius:50%;border:0.1875rem dashed rgba(43,45,66,.2);color:var(--ink-2);font-weight:800;font-size:0.9375rem;background:rgba(255,255,255,.5)}
.egg-empty img{width:4rem;height:4rem}
.petline{display:flex;align-items:center;gap:0.375rem;font-weight:700;color:var(--ink-2);font-size:0.9375rem;margin-top:-0.375rem}
.child-head .pet{position:relative;width:9.375rem;height:9.375rem;flex:0 0 auto}
.child-head .pet .egg-empty{width:9.375rem;height:9.375rem}
.bubble{position:relative;display:inline-flex;align-items:center;gap:0.5rem;max-width:min(20rem,60vw);margin-bottom:0.5rem;padding:0.5rem 0.875rem;border-radius:1.125rem;background:var(--paper);box-shadow:var(--shadow);font-weight:800;font-size:0.9375rem;animation:bubbleIn .5s cubic-bezier(.2,1.4,.3,1);color:var(--ink)}
.bubble::after{content:"";position:absolute;top:50%;inset-inline-start:-0.375rem;width:0.875rem;height:0.875rem;background:var(--paper);transform:translateY(-50%) rotate(45deg);border-radius:0.1875rem}
.bubble .ico{width:1.75rem;height:1.75rem;flex:0 0 auto}
.bubble span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.who-txt{display:flex;flex-direction:column;align-items:flex-start;min-width:0}
@keyframes bubbleIn{from{opacity:0;transform:scale(.6) translateY(0.5rem)}to{opacity:1;transform:none}}
.child-head .lvl .t + .bar + .t{font-size:0.8125rem}
.child-head .lvl .bar i{background:linear-gradient(90deg,var(--mint),var(--lime))}

.room{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap}
.room .equip{flex:0 0 auto;display:flex;align-items:center;gap:clamp(0.5rem,1.5vw,1.125rem)}
.room .eqcol{display:flex;flex-direction:column;gap:0.625rem}
.room .big-pet{position:relative;isolation:isolate;flex:0 0 auto;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.room .big-pet .stand{position:absolute;left:50%;bottom:6%;width:62%;height:9%;transform:translateX(-50%);border-radius:50%;background:radial-gradient(ellipse at 50% 40%,rgba(255,255,255,.9),rgba(230,224,240,.9) 60%,rgba(200,192,220,.5));box-shadow:0 0.5rem 1.125rem -0.5rem rgba(60,40,120,.35);z-index:-1}
.eqslot{position:relative;width:clamp(3.5rem,7vw,4.5rem);height:clamp(3.5rem,7vw,4.5rem);border-radius:1.125rem;background:var(--paper);box-shadow:var(--shadow);display:grid;place-items:center;--rc:var(--grape)}
.eqslot img{width:72%;height:72%}
.eqslot .plus{width:60%;height:60%;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font-size:1.625rem;font-weight:300;color:var(--ink-3)}
.eqslot .sl{position:absolute;bottom:-0.9375rem;inset-inline:0;font-size:0.625rem;font-weight:800;color:var(--ink-3);text-align:center}
.eqslot.on{outline:0.1875rem solid var(--rc);box-shadow:0 0 0 0.3125rem color-mix(in srgb,var(--rc) 25%,transparent),var(--shadow)}
.eqslot.none{opacity:.55;box-shadow:none;background:rgba(255,255,255,.45)}
.eqslot .cnt{position:absolute;top:-0.375rem;inset-inline-end:-0.375rem;min-width:1.25rem;height:1.25rem;padding:0 0.3125rem;border-radius:62.4375rem;background:#EFE9FF;color:#4B2AA6;font-size:0.6875rem;font-weight:800;display:grid;place-items:center}
.room .gearline{margin-top:0.75rem;font-size:0.8125rem;font-weight:700}
@media (max-width:700px){.room .equip{width:100%;justify-content:center}.room .big-pet .cr{width:12.5rem!important;height:12.5rem!important}}
.room .meta{flex:1;min-width:16.25rem}
.stages{display:flex;gap:0.375rem;flex-wrap:wrap;margin-top:0.875rem}
.sdot{width:2.125rem;height:2.125rem;border-radius:50%;background:#F1ECE3;display:grid;place-items:center;font-weight:800;font-size:0.8125rem;color:var(--ink-3)}
.sdot svg{width:1rem;height:1rem}
.sdot.past{background:var(--ok);color:#fff}
.sdot.now{background:var(--sun);color:var(--sun-ink);box-shadow:0 0 0 0.25rem rgba(255,184,0,.3)}
button.sdot{width:2.5rem;height:2.5rem;font-size:0.875rem;cursor:pointer;border:0;-webkit-tap-highlight-color:transparent;transition:transform .12s}
button.sdot:active{transform:scale(.9)}
button.sdot.viewing{box-shadow:0 0 0 0.25rem var(--sky);transform:scale(1.08)}
button.sdot.nope{animation:sdotNope .4s}
@keyframes sdotNope{20%{transform:translateX(-0.3125rem)}40%{transform:translateX(0.3125rem)}60%{transform:translateX(-0.1875rem)}80%{transform:translateX(0.1875rem)}}
.slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(7.5rem,1fr));gap:0.75rem}
.slot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;min-height:7.75rem;border-radius:1.375rem;background:var(--paper);box-shadow:var(--shadow);font-weight:800;font-size:0.9375rem;color:var(--ink-2)}
.slot img{width:3.625rem;height:3.625rem}
.slot .plus{width:3.625rem;height:3.625rem;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;font-size:1.875rem;font-weight:300;color:var(--ink-3)}
.slot.on{outline:0.1875rem solid var(--grape);color:var(--ink)}
.slot.none{opacity:.55;box-shadow:none;background:rgba(255,255,255,.45)}
.slot .cnt{position:absolute;top:0.5rem;inset-inline-end:0.5rem;min-width:1.5rem;height:1.5rem;padding:0 0.4375rem;border-radius:62.4375rem;background:#EFE9FF;color:#4B2AA6;font-size:0.8125rem;display:grid;place-items:center}
.iconpick button small{font-size:0.6875rem;font-weight:800}
.dex{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.375rem),1fr));gap:0.75rem}
.dexcard{display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.75rem 0.5rem;border-radius:1.375rem;background:var(--paper);box-shadow:var(--shadow);text-align:center}
.dexcard .n{font-weight:900;font-size:1rem}.dexcard .s{font-size:0.8125rem;color:var(--ink-2);font-weight:700}
.dexcard.locked{background:rgba(255,255,255,.5);box-shadow:none;border:0.1875rem dashed rgba(43,45,66,.14)}
.dexcard.locked .cr{opacity:.55;filter:saturate(.5)}
.dexcard.now{outline:0.1875rem solid var(--sun)}
.dexcard.done{outline:0.1875rem solid var(--ok)}

.evolve-wrap{position:fixed;inset:0;z-index:60;display:flex;flex-direction:column;align-items:center;justify-content:safe center;gap:0.75rem;padding:1.25rem;text-align:center;animation:fade .3s;overflow:auto;
  background:radial-gradient(circle at 50% 40%,rgba(255,244,214,.97),rgba(233,214,255,.96) 55%,rgba(196,210,255,.97))}
.evolve-wrap .t{font-size:clamp(2.125rem,5vw,3.5rem);font-weight:900;letter-spacing:-.02em;color:#4B2AA6;text-shadow:0 0.125rem 0 rgba(255,255,255,.7)}
.evolve-wrap .s{font-size:clamp(1.125rem,2.4vw,1.5rem);font-weight:700;color:#5B3EA8;max-width:40rem}
.evolve-wrap .stage{display:grid;place-items:center;min-height:18.75rem}
.evolve-wrap .stage.morph{position:relative;display:block;width:min(22.5rem,82vw);aspect-ratio:1;min-height:0}
.evolve-wrap .mlayer{position:absolute;inset:0;display:grid;place-items:center;transition:opacity 1.1s ease-in-out}
.evolve-wrap .mlayer > .cr{grid-area:1/1}
.evolve-wrap .mlayer.flick{transition:none}
.evolve-wrap .mlayer.fade{transition:opacity 1.3s ease-out}
.evolve-wrap .stage.morph{transition:transform .08s}
.evolve-wrap .light{position:absolute;inset:-25%;border-radius:50%;background:radial-gradient(circle,#fff 0,rgba(255,255,255,.95) 18%,rgba(255,255,255,0) 60%);opacity:0;transform:scale(.6);transition:opacity 1s,transform 1s;pointer-events:none}
.evolve-wrap.suspense .light{opacity:1;transform:scale(1);animation:lightPulse .9s ease-in-out infinite alternate}
@keyframes lightPulse{from{opacity:.75}to{opacity:1}}
.evolve-wrap.suspense .light.max{transform:scale(1.5)}
.crw.sil img.silimg{}
.evolve-wrap .mlayer.sil.out{opacity:0!important}
.evolve-wrap .mlayer.reveal{animation:revealIn 1.3s ease-out both}
@keyframes revealIn{0%{opacity:0;filter:brightness(3) saturate(0);transform:scale(.85)}40%{opacity:1;filter:brightness(2) saturate(.3)}100%{opacity:1;filter:brightness(1) saturate(1);transform:scale(1)}}
.evolve-wrap .veil{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#fff 0,#f3e8ff 22%,#7A55E0 62%,#2B1B66 100%);opacity:0;transition:opacity .9s;pointer-events:none}
.evolve-wrap.suspense .veil{opacity:1}
.evolve-wrap .t{transition:color .9s}
.evolve-wrap .mlayer{position:absolute}
.evolve-wrap .stage.morph{position:relative;z-index:1}
.evolve-wrap.suspense .t{color:#fff;text-shadow:0 0.125rem 0.75rem rgba(43,27,102,.6)}
.flash{position:fixed;inset:0;background:#fff;z-index:70;pointer-events:none;opacity:0}
.flash.on{animation:flashOut .3s ease-out forwards}
@keyframes flashOut{0%{opacity:.55}100%{opacity:0}}
.reveal-name{font-size:clamp(2.875rem,9vw,6.25rem);line-height:1.1;font-weight:900;letter-spacing:-.02em;color:#4B2AA6;text-shadow:0 0.25rem 0 rgba(255,255,255,.85),0 0.875rem 1.875rem rgba(75,42,166,.25);animation:namePop .8s cubic-bezier(.2,1.6,.3,1) both}
@keyframes namePop{from{opacity:0;transform:scale(.3) translateY(1.875rem)}to{opacity:1;transform:none}}
.evolve-wrap .namebox{display:flex;flex-direction:column;align-items:center;gap:0.75rem;width:min(100%,26.25rem)}
.evolve-wrap .namebox .input{background:#fff}
.eggs{display:flex;gap:1.125rem;flex-wrap:wrap;justify-content:center;margin-top:0.625rem}
.eggpick{display:flex;flex-direction:column;align-items:center;gap:0.375rem;padding:0.875rem 0.875rem 1rem;border-radius:1.75rem;background:rgba(255,255,255,.75);box-shadow:var(--shadow);font-weight:900;font-size:1.125rem;color:var(--ink);animation:eggIn .6s cubic-bezier(.2,1.4,.3,1) both}
.eggpick:active{transform:scale(.96)}
.eggpick .cr{animation:cr-wobble 2.2s ease-in-out infinite;transform-origin:50% 90%}
@keyframes eggIn{from{opacity:0;transform:translateY(1.25rem) scale(.8)}to{opacity:1;transform:none}}
.rarity-ring{width:clamp(9.375rem,22vw,13.125rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0,color-mix(in srgb,var(--rc) 35%,#fff) 60%,var(--rc) 100%);box-shadow:0 0 0 0.5rem color-mix(in srgb,var(--rc) 40%,transparent),0 1.25rem 2.5rem -1rem var(--rc)}
.rarity-ring img{width:62%;height:62%;object-fit:contain;filter:drop-shadow(0 0.625rem 0.875rem rgba(0,0,0,.25))}
.prize .rarity{font-weight:900;font-size:1.25rem;letter-spacing:.02em}
.mystery.perfect img{filter:drop-shadow(0 0 1.5rem rgba(255,184,0,.9)) drop-shadow(0 1.25rem 1.5rem rgba(122,61,0,.3))}
@media (max-width:600px){.eggpick .cr{width:7.5rem;height:7.5rem}.eggpick{padding:0.5rem 0.625rem 0.625rem;font-size:0.9375rem}.evolve-wrap .stage{min-height:12.5rem}}

/* ---- shell navigation: bottom bar (narrow, tall) or side rail (wide, or short) ----
   Same principle as a Skylight wall calendar: the navigation sits beside the content on
   a landscape screen and under the thumb on a phone; it never eats the tall axis. */
.navbar{position:fixed;z-index:40;display:flex;gap:0.375rem;background:rgba(255,255,255,.74);backdrop-filter:blur(0.75rem);box-shadow:var(--shadow-lg)}
.navbar button{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.25rem;border-radius:1.125rem;font-weight:800;font-size:0.8125rem;color:var(--ink-2);transition:background .15s,transform .12s}
.navbar button .ico{width:1.875rem;height:1.875rem}
.navbar button svg{width:1.625rem;height:1.625rem}
.navbar button.on{background:var(--paper);color:var(--ink);box-shadow:var(--shadow)}
.navbar button:active{transform:scale(.94)}
.navbar button .l{white-space:nowrap}
.navbar .badge{position:absolute;top:0.25rem;inset-inline-end:0.5rem;min-width:1.375rem;height:1.375rem;padding:0 0.375rem;border-radius:62.4375rem;background:var(--coral);color:#fff;font-size:0.75rem;display:grid;place-items:center}
body[data-daypart="night"] .navbar{background:rgba(43,45,66,.6)}
body[data-daypart="night"] .navbar button{color:rgba(255,255,255,.82)}
body[data-daypart="night"] .navbar button.on{background:var(--paper);color:var(--ink)}
/* bottom bar */
.navbar{inset-inline:0;bottom:0;flex-direction:row;justify-content:space-around;padding:0.375rem 0.5rem calc(0.375rem + env(safe-area-inset-bottom));border-radius:1.625rem 1.625rem 0 0}
.navbar:not(.has-tabs){display:none}
.navbar button{flex:1;min-height:3.75rem;padding:0.25rem 0.375rem}
.navbar button.lock{display:none}                    /* on a phone the lock stays in the top bar: five tabs, not six */
body.has-tabs #app{padding-bottom:6rem}
body.has-tabs .topbar .back{display:none}
/* side rail */
@media (min-width:1000px) and (min-height:501px), (max-height:500px){
  .navbar,.navbar:not(.has-tabs){display:flex;inset-inline-start:0.625rem;inset-inline-end:auto;top:0.625rem;bottom:0.625rem;width:5.75rem;flex-direction:column;justify-content:flex-start;padding:0.625rem 0.5rem;border-radius:1.625rem}
  .navbar button{flex:0 0 auto;width:100%;min-height:4.625rem;padding:0.375rem 0.25rem}
  .navbar button.lock{display:flex;margin-top:auto}
  .navbar button > .kface{--sz:3.25rem!important}   /* the children's photos in the rail: 52 px at the wall (was 30, Eli 2026-10-28) */
  body.has-nav #app,body.has-tabs #app{padding-bottom:0;padding-inline-start:6.5rem}
  body.has-nav .topbar .back,body.has-nav .topbar .lockbtn{display:none}
}
@media (max-height:500px){
  .navbar,.navbar:not(.has-tabs){width:4.875rem;padding:0.375rem 0.3125rem;gap:0.25rem}
  .navbar button{min-height:3.5rem;font-size:0.75rem;gap:0.125rem}.navbar button .ico{width:1.5rem;height:1.5rem}.navbar button svg{width:1.375rem;height:1.375rem}
  body.has-nav #app,body.has-tabs #app{padding-inline-start:5.625rem}
}

/* ---- compact header: phones, small tablets, any landscape phone -------------------- */
.child-head .pet .cr{width:100%;height:100%}
@media (max-width:760px), (max-height:760px){
  .child-head{gap:0.75rem}
  .child-head .who{gap:0.75rem}
  .child-head .pet,.child-head .pet .egg-empty{width:5.25rem;height:5.25rem}
  .child-head .pet > .cr{zoom:.56}   /* drawn 150 px wide: without this it spilled over the stars (Eli 2026-10-18) */
  .child-head .pet .egg-empty{font-size:0.75rem;gap:0.125rem}.child-head .pet .egg-empty img{width:2.125rem;height:2.125rem}
  .child-head .name{font-size:1.5rem}
  .child-head .lvl{min-width:9.375rem;gap:0.25rem}.child-head .lvl .t{font-size:0.75rem}.child-head .lvl .bar{height:0.5rem}.child-head .lvl .t + .bar + .t{display:none}
  .bubble{font-size:0.8125rem;padding:0.375rem 0.625rem;margin-bottom:0.25rem;max-width:min(15rem,50vw)}.bubble .ico{width:1.375rem;height:1.375rem}
  .child-head .stats{margin-inline-start:0;gap:0.5rem}
  .pill.big{min-height:2.25rem;padding:0 0.75rem;font-size:1rem}.pill.big .ico{width:1.25rem;height:1.25rem}
  .rchip{min-height:3.25rem;padding:0.25rem 0.75rem 0.25rem 0.5rem;font-size:0.9375rem;border-radius:1rem}.rchip .ico{width:1.875rem;height:1.875rem}.rchip .p .mini{width:5rem;height:0.375rem}
  .routine-row .tt{gap:0.5rem}
  .h1{font-size:1.625rem}
  .section-title .h2{font-size:1.25rem}
}
/* wide but short (a laptop browser window): shorter cards, smaller hero */
@media (min-width:760px) and (max-height:760px){
  .topbar{padding-top:0.5rem}.topbar .clock .t{font-size:1.625rem}.topbar .clock .d{font-size:0.75rem}
  .screen{gap:0.75rem;padding-top:0.625rem}
  .task{min-height:11rem;padding:0.875rem 0.625rem 0.75rem;gap:0.5rem}.task img.main{width:4.5rem;height:4.5rem}.task .lbl{font-size:1rem}
  .all-done{padding:0.625rem 1.125rem}.all-done img{width:3rem;height:3rem}.all-done .t{font-size:1.125rem}
  .kid{min-height:0;padding:1rem 0.875rem 0.875rem;gap:0.5rem}.kid .pet-wrap{min-height:0}.kid .pet-wrap .cr{width:10rem!important;height:10rem!important}.kid .egg-empty{width:6.5rem;height:6.5rem}.kid .name{font-size:1.375rem}.add-kid{min-height:0}
  .room .big-pet .cr{width:11.875rem;height:11.875rem}.room .stages{margin-top:0.5rem}
  .reward{flex-basis:12.5rem;padding:0.875rem 0.75rem 0.75rem;gap:0.5rem}.reward img.main{width:4.375rem;height:4.375rem}.reward .lbl{font-size:1rem}
  .day{min-height:7.5rem}
  .wallet{padding:0.625rem 1rem}
}
/* landscape phones: everything one notch smaller, cards as rows */
@media (max-height:500px){
  .screen{padding-top:0.375rem;gap:0.75rem;padding-bottom:1.25rem}
  .topbar{padding-top:0.375rem}.topbar .clock .t{font-size:1.375rem}.topbar .clock .d{display:none}.topbar .logo img{width:1.75rem;height:1.75rem}
  .kids{grid-template-columns:repeat(auto-fit,minmax(min(100%,20.625rem),1fr));gap:0.75rem}
  .kid{flex-direction:row;min-height:0;padding:0.75rem 1rem;text-align:start;gap:0.375rem 0.875rem;align-items:center;flex-wrap:wrap}
  .kid::before{height:100%;opacity:.12}
  .kid .pet-wrap{min-height:0}.kid .pet-wrap .cr,.kid .egg-empty{width:4.875rem;height:4.875rem}.kid .egg-empty{font-size:0.6875rem}.kid .egg-empty img{width:2rem;height:2rem}
  .kid .kinfo{align-items:flex-start;flex:1;gap:0.25rem}
  .kid .name{font-size:1.375rem}.kid .stats{justify-content:flex-start}.kid .ring{max-width:none;flex-basis:100%;margin-top:0.125rem}.kid .ring .bar{height:0.625rem}.kid .ring .lbl{margin-top:0.25rem;font-size:0.8125rem}
  .kid .done-stamp{top:0.5rem}
  .kids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0.625rem;padding:0.25rem 0.125rem 0.5rem}.kids::-webkit-scrollbar{display:none}
  .kid{flex:0 0 min(64vw,23.75rem);scroll-snap-align:start}
  .add-kid{flex:0 0 7.5rem;min-height:0;flex-direction:column;gap:0.375rem;font-size:0.875rem;scroll-snap-align:start}.add-kid .plus{width:2.75rem;height:2.75rem;font-size:1.625rem}
  .screen > div:first-child .sub{display:none}
  .tasks{grid-template-columns:repeat(auto-fill,minmax(min(100%,9.375rem),1fr));gap:0.625rem}
  .task{min-height:9.125rem;padding:0.75rem 0.625rem 0.625rem;gap:0.375rem}.task img.main{width:3.75rem;height:3.75rem}.task .lbl{font-size:0.9375rem}.task .val{top:0.5rem;inset-inline-end:0.5rem;min-height:1.625rem;font-size:0.8125rem}.task .tm{top:0.5rem;min-height:1.75rem;font-size:0.75rem}
  .all-done{padding:0.75rem 1.125rem;gap:0.75rem}.all-done img{width:3rem;height:3rem}.all-done .t{font-size:1.125rem}
  .family{padding:0.75rem 1.125rem}
  .rewards{grid-template-columns:repeat(auto-fill,minmax(min(100%,11.875rem),1fr))}.reward{padding:0.875rem 0.75rem 0.75rem;gap:0.5rem}.reward img.main{width:4rem;height:4rem}
  .parent{grid-template-columns:1fr}.ptabs{flex-direction:row;overflow-x:auto;position:static;scrollbar-width:none}.ptabs button{flex:0 0 auto;min-height:2.875rem}
}
/* tablets in portrait: three cards across, nothing else changes */
@media (min-width:601px) and (max-width:900px){
  .tasks{grid-template-columns:repeat(3,1fr)}
}
@media (min-width:1000px){.tasks{grid-template-columns:repeat(auto-fill,minmax(min(100%,8.5rem),1fr));gap:0.875rem}}
/* the big wall: let the cards breathe */
@media (min-width:1700px){
  .screen{max-width:102.5rem}
  .tasks{grid-template-columns:repeat(auto-fill,minmax(14.375rem,1fr))}
  .task{min-height:15rem}.task img.main{width:6.75rem;height:6.75rem}.task .lbl{font-size:1.3125rem}
}

/* ---- the child's own plan ------------------------------------------------------------- */
.task.add{background:rgba(255,255,255,.5);box-shadow:none;border:0.1875rem dashed rgba(43,45,66,.22);color:var(--ink-2)}
.task.add .plus{width:4rem;height:4rem;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;font-size:2.5rem;font-weight:300;color:var(--ink-2)}
.task .rm{position:absolute;top:0.625rem;inset-inline-start:0.625rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;color:var(--ink-3);z-index:2}
.task .rm svg{width:1rem;height:1rem}
.picker{position:fixed;inset:0;z-index:55;display:flex;flex-direction:column;background:linear-gradient(180deg,#FFF6E4,#EAF7FF);animation:fade .3s;overflow:hidden;color:var(--ink)}
.pk-head{display:flex;align-items:center;gap:0.875rem;padding:clamp(0.75rem,2vw,1.375rem) clamp(0.875rem,2.5vw,2rem) 0.5rem;flex-wrap:wrap}
.pk-head > div:first-child{flex:1;min-width:12.5rem}
.pk-head .t{font-size:clamp(1.375rem,3vw,2.125rem);font-weight:900;letter-spacing:-.02em}
.pk-head .s{color:var(--ink-2);font-weight:600;font-size:0.9375rem}
.pk-head .pill{font-size:1rem;min-height:2.25rem}
.pk-body{flex:1;display:grid;grid-template-columns:minmax(15rem,20rem) 1fr;gap:1rem;padding:0.375rem clamp(0.875rem,2.5vw,2rem) 1.375rem;min-height:0}
.plan-list{display:flex;flex-direction:column;gap:0.5rem;overflow:auto;background:rgba(255,255,255,.6);border-radius:var(--r-lg);padding:0.875rem}
.plan-list .pl-h{font-weight:900;font-size:1.0625rem;color:var(--ink-2)}
.pl{display:flex;align-items:center;gap:0.625rem;min-height:3.75rem;padding:0.375rem 0.625rem;border-radius:1rem;background:var(--paper);box-shadow:var(--shadow)}
.pl .n{width:1.625rem;height:1.625rem;border-radius:50%;background:var(--sun);color:var(--sun-ink);display:grid;place-items:center;font-weight:900;font-size:0.8125rem;flex:0 0 auto}
.pl .ico{width:2.25rem;height:2.25rem}
.pl .lbl{flex:1;font-weight:800;font-size:0.9375rem;min-width:0}
.pl .acts{display:flex;gap:0.25rem}.pl .acts .ibtn{width:2.375rem;height:2.375rem;border-radius:0.625rem}.pl .acts .ibtn:disabled{opacity:.3}
.pl.done{background:var(--ok-soft)}.pl .tick{width:1.875rem;height:1.875rem;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}.pl .tick svg{width:1rem;height:1rem}
.pl-empty{color:var(--ink-2);font-weight:600;font-size:0.875rem;padding:0.625rem 0.25rem}
.actgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,9.375rem),1fr));gap:0.75rem;overflow:auto;align-content:start;padding:0.375rem}
.act{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;min-height:10rem;padding:0.875rem 0.625rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow);text-align:center;transition:transform .12s;color:var(--ink)}
.act:active{transform:scale(.95)}
.act img{width:4rem;height:4rem;object-fit:contain;filter:drop-shadow(0 0.375rem 0.5rem rgba(0,0,0,.12))}
.act .lbl{font-weight:800;font-size:1rem;line-height:1.15}
.act .mins{font-size:0.75rem;color:var(--ink-2);font-weight:700}
.act .pill.tiny.stars{background:linear-gradient(180deg,#FFF1C2,#FFE38F);color:var(--sun-ink)}
.act .tick{position:absolute;top:0.5rem;inset-inline-end:0.5rem;width:1.875rem;height:1.875rem;border-radius:50%;background:var(--ok);color:#fff;display:none;place-items:center}
.act .tick svg{width:1rem;height:1rem}
.act.on{outline:0.25rem solid var(--ok);background:var(--ok-soft)}.act.on .tick{display:grid}
.act.done{opacity:.6}
@media (max-width:760px){.pk-body{grid-template-columns:1fr;grid-template-rows:auto 1fr}.plan-list{max-height:32vh}.act{min-height:8.125rem;gap:0.25rem}.act img{width:3.25rem;height:3.25rem}}
@media (max-height:500px){.pk-head{padding-bottom:0.25rem}.pk-head .t{font-size:1.25rem}.pk-head .s{display:none}.pk-body{grid-template-columns:minmax(12.5rem,16.25rem) 1fr}.act{min-height:6.875rem;padding:0.5rem}.act img{width:2.75rem;height:2.75rem}.act .lbl{font-size:0.875rem}}
.plan-pills{display:flex;flex-wrap:wrap;gap:0.375rem;margin-top:0.25rem}
.plan-pill{display:inline-flex;align-items:center;gap:0.375rem;min-height:1.875rem;padding:0 0.625rem;border-radius:62.4375rem;background:var(--paper-2);font-weight:700;font-size:0.8125rem;color:var(--ink)}
.plan-pill img{width:1.25rem;height:1.25rem}
.plan-pill.done{background:var(--ok-soft);color:#0E7A61}
.cmark{display:inline-grid;place-items:center;width:var(--sz,3rem);height:var(--sz,3rem);border-radius:50%;background:var(--c,var(--sky));color:#fff;font-weight:900;font-size:calc(var(--sz,3rem)*.45);flex:0 0 auto}
.chips button .cr,.chips button .cmark{width:1.5rem;height:1.5rem;vertical-align:-0.375rem;margin-inline-end:0.375rem;display:inline-block}
.heat .hn .cr,.heat .hn .cmark{width:1.875rem;height:1.875rem}

/* ---- on-screen keyboard ----------------------------------------------------------------- */
.kbd{position:fixed;inset-inline:0;bottom:0;z-index:75;margin:0 auto;width:min(100%,48.75rem);padding:0.5rem 0.5rem calc(0.5rem + env(safe-area-inset-bottom));border-radius:1.375rem 1.375rem 0 0;background:#E9E4F5;box-shadow:0 -0.625rem 1.875rem -0.75rem rgba(43,45,66,.45);transform:translateY(110%);transition:transform .2s ease-out;user-select:none;-webkit-user-select:none}
.kbd.open{transform:none}
.kbd .rows{display:flex;flex-direction:column;gap:0.375rem}
.kbd .row{display:flex;gap:0.3125rem;justify-content:center}
.kbd .k{flex:1 1 0;max-width:4.5rem;min-height:2.875rem;border-radius:0.625rem;background:#fff;box-shadow:0 0.0625rem 0 rgba(0,0,0,.18);font-size:1.25rem;font-weight:700;color:var(--ink);display:grid;place-items:center;touch-action:manipulation}
.kbd .k:active{background:#D9D0F5;transform:translateY(0.0625rem)}
.kbd .k.d{background:#F4F1FA;font-size:1.125rem}
.kbd .k.fn{background:#CFC6E6;font-size:0.9375rem;font-weight:800;max-width:5.75rem}
.kbd .k.fn.on{background:var(--grape);color:#fff}
.kbd .k.fn svg{width:1.375rem;height:1.375rem}
.kbd .k.space{flex:4 1 0;max-width:21.25rem;font-size:0.9375rem}
.kbd .k.done{background:var(--ok);color:#fff;max-width:6.875rem}
.kbd .k.gap{background:transparent;box-shadow:none}
.kbd.pad{width:min(100%,22.5rem)}.kbd.pad .k{max-width:none;min-height:3.5rem;font-size:1.5rem}.kbd.pad .k.wide{flex:1}
body.kb-open .overlay{align-items:flex-start;padding-bottom:18.75rem;overflow:auto}
body.kb-open .sheet{max-height:none}
body.kb-open .evolve-wrap{justify-content:flex-start;padding-bottom:18.75rem;overflow:auto}
body.kb-open #app{padding-bottom:18.75rem}
@media (max-height:500px){.kbd .k{min-height:2.125rem;font-size:1.0625rem}.kbd .rows{gap:0.25rem}.kbd .row{gap:0.25rem}.kbd{padding:0.375rem 0.375rem}body.kb-open .overlay,body.kb-open .evolve-wrap,body.kb-open #app{padding-bottom:13.125rem}}

/* ---- step mode: one card at a time (small screens, or the setting) ----------------------
   The strip shows the whole routine (done / current / ahead); the stage shows one card with
   the neighbours peeking; a completion slides on to the next thing to do. Nothing scrolls. */
.routine-row.step{justify-content:flex-start}
.stepwrap{display:flex;flex-direction:column;gap:0.375rem;flex:1;min-height:0}
.stepbar{display:flex;align-items:center;gap:0.5rem}
.steps{display:flex;gap:0.5rem;flex:1;overflow-x:auto;scrollbar-width:none;padding:0.375rem 0.25rem}
.steps::-webkit-scrollbar{display:none}
.st{position:relative;flex:0 0 auto;width:2.75rem;height:2.75rem;border-radius:50%;background:rgba(255,255,255,.6);display:grid;place-items:center;opacity:.72;transition:transform .2s,opacity .2s,box-shadow .2s}
.st img{width:1.625rem;height:1.625rem}
.st.add{font-size:1.625rem;font-weight:300;color:var(--ink-2);border:0.125rem dashed rgba(43,45,66,.25);background:transparent}
.st.done{background:var(--ok-soft);opacity:1}
.st.done .tk{position:absolute;bottom:-0.1875rem;inset-inline-end:-0.1875rem;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--ok);color:#fff;display:grid;place-items:center}
.st.done .tk svg{width:0.6875rem;height:0.6875rem}
.st.cur{opacity:1;transform:scale(1.15);background:var(--paper);box-shadow:0 0 0 0.1875rem var(--c,var(--sky)),var(--shadow)}
.skip{flex:0 0 auto;display:inline-flex;align-items:center;gap:0.25rem;min-height:2.5rem;padding:0 0.75rem;border-radius:62.4375rem;background:rgba(255,255,255,.6);font-weight:800;font-size:0.875rem;color:var(--ink-2)}
.skip svg{width:1rem;height:1rem}
.slides{display:flex;gap:0.75rem;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:0.625rem calc((100% - var(--slide)) / 2) 0.875rem;--slide:min(78vw,23.75rem);align-items:stretch}
.slides::-webkit-scrollbar{display:none}
.slide{flex:0 0 var(--slide);scroll-snap-align:center;display:flex}
.slide .task{width:100%;min-height:min(38vh,20rem);padding:1.25rem 1rem 1.125rem;gap:0.625rem}
.task.finish{background:linear-gradient(120deg,#E3F8F2,#FFF6D6);cursor:default}.task.finish:active{transform:none}
.task.finish .lbl{font-size:1.125rem}.task.finish .s{font-size:0.875rem;color:var(--ink-2);font-weight:600}.task.finish .btn{margin-top:0.25rem;min-height:2.875rem;font-size:1rem;padding:0 1.25rem}
.st.finish{background:#FFF1C2}
body.has-tabs .screen{padding-bottom:0.5rem}
.slide .task img.main{width:clamp(5.5rem,26vh,8.125rem);height:clamp(5.5rem,26vh,8.125rem)}
.slide .task .lbl{font-size:clamp(1.125rem,2.6vh,1.5rem)}
.slide .task .now{display:none}
.task .circ{display:none}
.slide .task .circ{display:grid;width:2.25rem;height:2.25rem;border-radius:50%;border:0.1875rem solid rgba(43,45,66,.2);margin-top:0.125rem}
.slide .task.done .circ,.slide .task.add .circ,.slide .task.ev .circ,.slide .task.pending .circ{display:none}
.all-done.slim{padding:0.625rem 1rem;gap:0.625rem;border-radius:1.125rem}.all-done.slim img{width:2.5rem;height:2.5rem}.all-done.slim .t{font-size:1rem}.all-done.slim .s{font-size:0.8125rem}.all-done.slim .btn{min-height:2.75rem;padding:0 1rem;font-size:0.9375rem}
.task .now.wait{background:var(--sun);color:#7A4E00}
.task.ev{cursor:default}.task.ev:active{transform:none}.task.ev.past{opacity:.55}.task.ev.now-ev{box-shadow:0 0 0 0.25rem var(--c,var(--sky)),var(--shadow)}
.task .val.time{background:#EAF3FF;color:#1E5FA8;font-size:1rem}
.rchip .p small:only-child{margin-top:0.125rem}

/* ---- small screens: sideways instead of down ------------------------------------------- */
@media (max-width:759px), (max-height:559px){
  .dex,.week,.slots{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0.75rem;padding:0.375rem 0.25rem 0.75rem}
  .dex::-webkit-scrollbar,.week::-webkit-scrollbar,.slots::-webkit-scrollbar{display:none}
  .reward{scroll-snap-align:center}
  .dexcard{flex:0 0 min(44vw,10rem);scroll-snap-align:start}
  .day{flex:0 0 min(70vw,16.25rem);scroll-snap-align:center;min-height:0}
  .slot{flex:0 0 min(30vw,7.75rem);scroll-snap-align:start}
  .room{flex-wrap:nowrap;gap:0.875rem}.room .big-pet .cr{width:clamp(6.875rem,34vh,13.75rem);height:auto}.room .meta{min-width:0}
  .room .stages{display:none}
  .wallet{padding:0.625rem 1rem}.wallet .big{font-size:1.625rem}.wallet .big .ico{width:1.875rem;height:1.875rem}
}
/* an upright phone: the creature card's text goes under the creature. The one-row rule above is for a
   phone on its side; upright, the creature took the whole width and left the text 0 px (BACKLOG H31) */
@media (max-width:700px) and (min-height:560px){
  .room{flex-direction:column;align-items:stretch}
  .room .equip{width:100%;justify-content:center}
  .room .meta{flex:none;width:100%;min-width:0;margin-top:0!important}
}
@media (max-width:599px) and (min-height:560px){
  .kids{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;gap:0.75rem;padding:0.375rem 0.25rem 0.75rem}
  .kids::-webkit-scrollbar{display:none}
  .kid,.add-kid{flex:0 0 84vw;scroll-snap-align:center}
  .kid{min-height:0}
}

/* ---- landscape phones: a slim header, short cards, overlays that fit ------------------- */
.pin-card{display:flex;flex-direction:column;max-width:28.75rem;margin:auto;width:100%}
@media (max-height:500px){
  .slides{--slide:min(46vw,18.75rem);padding-top:0.25rem;padding-bottom:0.375rem;gap:0.625rem}
  .slide .task{min-height:0;height:calc(100vh - 14.75rem);padding:0.625rem 0.75rem;gap:0.25rem}
  .slide .task img.main{width:3.25rem;height:3.25rem}
  .slide .task .lbl{font-size:0.9375rem}
  .slide .task .circ{width:1.625rem;height:1.625rem}
  .slide .task .val{top:0.5rem;inset-inline-end:0.5rem;min-height:1.625rem;font-size:0.8125rem}
  .slide .task.finish .btn{min-height:2.125rem;font-size:0.8125rem;padding:0 0.75rem}.slide .task.finish .s{display:none}.slide .task.finish .lbl{font-size:0.875rem}
  .st{width:2.25rem;height:2.25rem}.st img{width:1.375rem;height:1.375rem}
  .skip{min-height:2.125rem;font-size:0.8125rem}
  .child-head{gap:0.5rem}.child-head .who{gap:0.5rem}
  .child-head .pet,.child-head .pet .egg-empty{width:3rem;height:3rem}.child-head .pet .egg-empty span{display:none}.child-head .pet .egg-empty img{width:1.625rem;height:1.625rem}
  .child-head .name{font-size:1.125rem}
  .child-head .lvl,.bubble{display:none}
  .child-head .stats{margin-inline-start:auto}
  .pill.big{min-height:2.125rem;padding:0 0.625rem;font-size:0.9375rem}.pill.big .ico{width:1.125rem;height:1.125rem}
  .screen{gap:0.5rem;padding-top:0.25rem;padding-bottom:0.5rem}
  .rchip{min-height:2.75rem;padding:0.25rem 0.625rem 0.25rem 0.375rem}.rchip .ico{width:1.625rem;height:1.625rem}.rchip .p{gap:0.125rem}.rchip .p .mini{width:3.75rem;height:0.3125rem}.rchip .p small{font-size:0.6875rem}
  .all-done.slim{padding:0.375rem 0.75rem}.all-done.slim img{width:2rem;height:2rem}.all-done.slim .t{font-size:0.875rem}.all-done.slim .s{display:none}.all-done.slim .btn{min-height:2.25rem;font-size:0.875rem}
  .celebrate{overflow:auto;padding:0.625rem}.celebrate .box{gap:0.375rem}.celebrate img.hero{width:5.25rem}.celebrate .t{font-size:1.5rem}.celebrate .s{font-size:0.9375rem}.mystery{width:7.5rem}.mystery .tap{font-size:0.75rem;padding:0.3125rem 0.625rem;bottom:-0.25rem}.prize img{width:6.25rem}.prize .big{font-size:1.5rem}.rarity-ring{width:6.875rem}.celebrate .btn{margin-top:0;min-height:2.875rem;font-size:1.0625rem}.prize .rarity{font-size:0.9375rem}.prize .cr{width:7.5rem;height:7.5rem}
  .evolve-wrap{overflow:auto;padding:0.625rem;gap:0.375rem}.evolve-wrap .t{font-size:1.5rem}.evolve-wrap .s{font-size:0.875rem}.evolve-wrap .stage{min-height:0}.evolve-wrap .stage .cr{width:8.75rem;height:8.75rem}
  .eggs{gap:0.625rem;margin-top:0.25rem}.eggpick{padding:0.5rem 0.625rem 0.625rem;font-size:0.875rem}.eggpick .cr{width:6.25rem;height:6.25rem}
  .evolve-wrap .namebox{gap:0.375rem}.evolve-wrap .namebox .input{min-height:2.75rem;font-size:1.125rem}.evolve-wrap .btn.big{min-height:3rem;font-size:1.0625rem;padding:0 1.375rem}
  .timerwrap{gap:0.5rem;padding:0.625rem}.timerwrap .lbl{font-size:1.25rem;gap:0.5rem}.timerwrap .lbl img{width:2.25rem;height:2.25rem}.tring{width:min(50vh,26.25rem)}.tring .num{font-size:3.25rem}.timerwrap .acts .btn{min-height:2.75rem;font-size:1rem;padding:0 1.125rem}
  .pin-card{flex-direction:row;align-items:center;gap:1.5rem;max-width:40rem}.pin-card .pin-left{flex:1}.pin-card .pin-left .h2{font-size:1.25rem}.pinpad{margin-top:0;gap:0.5rem;max-width:16.875rem;flex:0 0 auto}.pinpad button{height:3.125rem;font-size:1.375rem;border-radius:0.875rem}.pinpad button.fn{font-size:0.875rem}
  .sheet{max-height:calc(100vh - 1rem)}.overlay{padding:0.5rem}
  .picker .pk-head .btn.big{min-height:2.75rem;font-size:1rem;padding:0 1.125rem}
}

/* ---- frame mode (H18): the wall screen as a picture frame when nobody is using it ---- */
#frame{position:fixed;inset:0;z-index:900;background:#000;overflow:hidden;cursor:none;user-select:none;-webkit-user-select:none;touch-action:none}
#frame .fl{position:absolute;inset:0;opacity:0;transition:opacity 1.6s ease}
#frame .fl.on{opacity:1}
#frame .fl img{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
#frame .fl .bg{object-fit:cover;filter:blur(2.125rem) brightness(.55);transform:scale(1.12)}
#frame .fl .ph{object-fit:contain}
#frame .fl.drift .ph{animation:frameDrift var(--dur,23s) linear forwards}
@keyframes frameDrift{from{transform:scale(1) translate(0,0)}to{transform:scale(1.06) translate(0,-1%)}}
#frame .fclock{position:absolute;bottom:max(1.5rem,3vh);inset-inline-start:max(1.5rem,3vw);color:#fff;text-shadow:0 0.125rem 0.875rem rgba(0,0,0,.75),0 0 0.125rem rgba(0,0,0,.9);text-align:start;line-height:1;z-index:2}
#frame .fclock .t{font-size:clamp(2.5rem,7vw,6rem);font-weight:900;letter-spacing:.01em}
#frame .fclock .d{font-size:clamp(1rem,2.2vw,1.75rem);font-weight:700;opacity:.9;margin-top:0.5rem}
#frame.noclock .fclock{display:none}
#frame .fempty{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.875rem;color:#fff;background:linear-gradient(180deg,#171A44 0%,#26296B 60%,#3A3585 100%);text-align:center;padding:1.5rem}
#frame .fempty img{width:min(28vw,10rem);opacity:.9}
#frame .fempty .big{font-size:clamp(3.5rem,12vw,10rem);font-weight:900;line-height:1}
#frame .fempty .fd{font-size:clamp(1.125rem,3vw,2.125rem);font-weight:700;opacity:.9}
#frame .fempty .hint{margin-top:1.125rem;font-size:clamp(0.875rem,2vw,1.25rem);opacity:.7;font-weight:600}
#frame .fempty[hidden]{display:none}
#frame .fempty:not([hidden])~.fclock{display:none}   /* the empty screen carries its own big clock */
#frame .dim{position:absolute;inset:0;background:#000;opacity:0;transition:opacity 4s ease;pointer-events:none;z-index:3}
#frame.night .dim{opacity:.82}
#frame.night .fclock{opacity:.85}
body.in-frame{overflow:hidden}
/* the photos tab */
.pgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(9.375rem,1fr));gap:0.75rem}
.pth{position:relative;aspect-ratio:4/3;border-radius:1rem;overflow:hidden;background:var(--paper-2);box-shadow:var(--shadow)}
.pth img{width:100%;height:100%;object-fit:cover;display:block}
.pth .del{position:absolute;top:0.5rem;inset-inline-end:0.5rem;width:2.5rem;height:2.5rem;border-radius:50%;background:rgba(255,255,255,.88);color:#B4304A;display:grid;place-items:center;box-shadow:var(--shadow)}
.pth .del svg{width:1.125rem;height:1.125rem}
.pth .hungtag{position:absolute;inset-inline-start:0.5rem;bottom:0.5rem;padding:0.1875rem 0.625rem;border-radius:62.4375rem;background:rgba(43,45,66,.85);color:#fff;font-size:0.8125rem;font-weight:800}
.pth .down{position:absolute;inset-inline-end:0.5rem;top:0.5rem;min-height:2.25rem;padding:0.25rem 0.75rem;border-radius:62.4375rem;border:0;background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;font-size:0.8125rem;box-shadow:var(--shadow);cursor:pointer}
.pth .down + .del{top:3.25rem}

/* ---- family board (H14): one column per child, today's tasks in place ---------------------- */
.board-wrap{position:relative}
.board{display:flex;gap:clamp(0.75rem,1.6vw,1.375rem);align-items:flex-start;
  overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:none;
  margin-inline:calc(-1 * clamp(0.875rem,2.5vw,2.25rem));padding-inline:clamp(0.875rem,2.5vw,2.25rem);padding-block:0.25rem}
.board::-webkit-scrollbar{display:none}
/* a column narrower than this clips the name and the creature, so the board pages sideways instead */
.bcol{--pad:clamp(0.875rem,1.6vw,1.25rem);container-type:inline-size;scroll-snap-align:center;position:relative;flex:1 0 20rem;min-width:0;display:flex;flex-direction:column;gap:0.625rem;padding:var(--pad);border-radius:var(--r-xl);background:var(--paper);box-shadow:var(--shadow);overflow:hidden}
/* the child's colour band ends where the header ends, however tall the header grows (it was a fixed 150 px) */
.bhead::before{content:"";position:absolute;inset:calc(-1 * var(--pad)) calc(-1 * var(--pad)) -0.5rem;background:var(--c,var(--sky));opacity:.16;pointer-events:none;z-index:-1}
/* the column shares "all-done" with the kid-screen banner above, whose align-items:center shrank it to a strip */
.bcol.all-done{align-items:stretch}
.bcol.all-done .bhead::before{opacity:.3}
.bhead{position:relative;isolation:isolate;display:flex;align-items:center;gap:0.875rem;min-height:9rem;margin-bottom:0.5rem}
.bhead .bwho{all:unset;box-sizing:border-box;flex:1;min-width:0;display:flex;align-items:center;gap:1.25rem;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bhead .ph{position:relative;flex:none;display:grid;place-items:center;width:8.5rem;height:8.5rem;border-radius:50%;
  background:conic-gradient(var(--c,var(--sky)) calc(var(--p,0) * 1turn),#fff 0);
  filter:drop-shadow(0 0.25rem 0.625rem rgba(43,45,66,.18))}   /* the ring fills with the day; photo, capsule and badge cast one shadow, one object (Eli 2026-10-30) */
.bcol.all-done .bhead .ph{background:var(--ok)}
.bhead .ph .kface{box-shadow:0 0 0 0.25rem #fff}
.bhead .badge{position:absolute;bottom:-0.5rem;left:50%;transform:translateX(-50%);display:inline-flex;align-items:center;justify-content:center;min-width:3.5rem;height:2.25rem;padding:0 0.625rem;border-radius:62.4375rem;background:#fff}
.bhead .badge:empty{display:none}
.bhead .badge .frac{font-size:1.125rem;font-weight:900;color:var(--ink)}
.bhead .badge svg{width:1.25rem;height:1.25rem;color:var(--ok)}
.bhead .stats{position:absolute;top:-0.625rem;left:50%;transform:translateX(-50%);display:flex;width:max-content;padding:0 0.25rem;border-radius:62.4375rem;background:#fff}   /* stars and fire in one capsule */
.bhead .chip{display:inline-flex;align-items:center;gap:0.25rem;height:2rem;padding:0 0.5rem;font-size:1rem;font-weight:900;color:var(--ink);white-space:nowrap}
.bhead .stats > * + *{border-inline-start:0.125rem solid rgba(43,45,66,.1)}
.bhead .chip .ico{width:1.125rem;height:1.125rem}
.bhead .chip.off{color:var(--ink-2)}.bhead .chip.off .ico{opacity:.45}
.bhead .stats .pill.bag{height:2rem;min-height:0;padding:0 0.5rem;border-radius:0;background:none;box-shadow:none}
.bhead .name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:min(3rem,9cqi);line-height:1.05;font-weight:900;letter-spacing:-.02em;color:var(--ink)}
.bhead .stage{position:relative;flex:none;width:9.5rem;align-self:stretch;display:grid;place-items:end center}
.bhead .stage::after{content:"";position:absolute;bottom:-0.25rem;left:8%;right:8%;height:2rem;border-radius:50%;background:radial-gradient(closest-side,rgba(110,170,90,.5),rgba(110,170,90,0));z-index:-1}
.bhead .bpet{width:9.5rem;height:9.5rem;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bhead .bpet > *{zoom:1}   /* drawn 150 px wide; zoom keeps its motion layers in step */
.bhead .bubble.sib{position:absolute;top:0.375rem;inset-inline-start:7.5rem;z-index:3;max-width:min(18.75rem,70%);margin:0}
/* a narrow column (a phone, or many children): the same card, smaller; the creature keeps a good size (Eli 2026-10-29) */
@container (max-width:26.25rem){
  .bhead{min-height:0;gap:0.625rem}
  .bhead .bwho{gap:0.75rem}
  .bhead .ph{width:6rem;height:6rem}.bhead .ph .kface{--sz:4.875rem!important}
  .bhead .chip{height:1.75rem;padding:0 0.4375rem;font-size:0.875rem}.bhead .chip .ico{width:1rem;height:1rem}
  .bhead .name{font-size:min(3rem,8cqi)}
  .bhead .stage{width:5.25rem;align-self:center;place-items:center}.bhead .stage::after{display:none}
  .bhead .stage .bpet{width:5.25rem;height:5.25rem}.bhead .stage .bpet > *{zoom:.56}
  .bhead .bubble.sib{inset-inline-start:5.25rem}
}
.bsec{border-radius:1.125rem;background:var(--paper-2);overflow:hidden}
.bsec .bsh{display:flex;align-items:center;gap:0.625rem;width:100%;min-height:3.375rem;padding:0 0.875rem 0 0.625rem;font-weight:800;font-size:1.0625rem;text-align:start}
.bsec .bsh .ico{width:2.125rem;height:2.125rem}
.bsec .bsh .n{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.bsec .bsh{padding-block:0.5rem}
.bsec .bsh .n{white-space:normal}   /* a 20rem column has no room for "עוד 50 דק׳" beside the name */
.bsec .bsh .cnt{font-size:0.875rem;color:var(--ink-2);min-width:2.25rem;text-align:center}
.bsec .bsh .cnt.ok{color:#fff;background:var(--ok);border-radius:62.4375rem;width:1.75rem;height:1.75rem;min-width:0;display:grid;place-items:center}
.bsec .bsh .cnt.ok svg{width:1rem;height:1rem}
.bsec .bsh .chev{width:1.75rem;height:1.75rem;display:grid;place-items:center;color:var(--ink-3)}
.bsec .bsh .chev svg{width:1.125rem;height:1.125rem;transform:rotate(-90deg);transition:transform .25s}   /* the back chevron turned into a v */
.bsec.open .bsh .chev svg{transform:rotate(90deg)}
.bsec .blist{display:none;flex-direction:column;gap:0.375rem;padding:0 0.5rem 0.625rem}
.bsec.open .blist{display:flex}
.brow{position:relative;display:flex;align-items:center;gap:0.75rem;min-height:3.625rem;padding:0.375rem 0.625rem 0.375rem 0.75rem;border-radius:0.875rem;background:var(--paper);box-shadow:var(--shadow);text-align:start;transition:transform .12s,background .2s}
.brow:active{transform:scale(.98)}
.brow .ico{width:2.5rem;height:2.5rem;flex:0 0 auto}
.brow .lbl{flex:1;min-width:0;font-weight:800;font-size:1.0625rem;line-height:1.2}
.brow .val{display:inline-flex;align-items:center;min-height:1.75rem;padding:0 0.625rem;border-radius:62.4375rem;background:linear-gradient(180deg,#FFF1C2,#FFE38F);color:var(--sun-ink);font-weight:800;font-size:0.875rem;flex:0 0 auto}
.brow .circ{width:2.125rem;height:2.125rem;border-radius:50%;border:0.1875rem solid rgba(43,45,66,.18);display:grid;place-items:center;color:transparent;flex:0 0 auto;transition:background .2s,border-color .2s}
.brow .circ svg{width:1.25rem;height:1.25rem}
.brow.next{box-shadow:0 0 0 0.1875rem var(--c,var(--sky)),var(--shadow)}
.brow.done{background:var(--ok-soft);box-shadow:none}
.brow.done .circ{background:var(--ok);border-color:var(--ok);color:#fff}
.brow.done .lbl{color:#0E7A61;text-decoration:line-through;text-decoration-thickness:0.125rem;text-decoration-color:rgba(14,122,97,.4)}
.brow.done .ico{opacity:.7}
.brow.done .val{background:var(--ok);color:#fff}
.brow.pop .circ{animation:tickpop .5s cubic-bezier(.2,1.4,.3,1)}   /* a pop in place: "stamp" moves the big card's centred stamp, it threw this circle up and left (Eli 2026-10-28) */
@keyframes tickpop{0%{transform:scale(.6)}55%{transform:scale(1.25)}100%{transform:scale(1)}}
.brow.gift{background:linear-gradient(180deg,#FFF7E0,#FFEBB8);box-shadow:0 0 0 0.1875rem var(--sun),var(--shadow);animation:pulse 1.6s ease-in-out infinite}
.brow.gift .val{background:var(--sun);color:#fff}
.bempty{display:flex;flex-direction:column;align-items:center;gap:0.5rem;padding:1.5rem;color:var(--ink-2);font-weight:700}
.bempty img{width:3.5rem;height:3.5rem}
/* sideways paging: a chip per child under the board, shown only while the board overflows */
.bdots{display:none;justify-content:center;flex-wrap:wrap;gap:0.625rem;margin-bottom:0.875rem}
.board-wrap.scrollable .bdots{display:flex}
.bdot{display:flex;align-items:center;gap:0.5rem;min-height:2.75rem;padding:0 1rem;border-radius:62.4375rem;background:var(--paper);box-shadow:var(--shadow);font-weight:800;font-size:1rem;color:var(--ink-2);transition:transform .2s,color .2s}
.bdot i{width:0.75rem;height:0.75rem;border-radius:50%;background:var(--c,var(--sky));flex:0 0 auto}
.bdot.on{color:var(--ink);box-shadow:0 0 0 0.1875rem var(--c,var(--sky)),var(--shadow)}
.bdot:active{transform:scale(.96)}
@media (max-width:759px){
  .board{scroll-snap-type:x mandatory}
  .bcol{flex:0 0 88%}
  .bdots{gap:0.5rem;margin-bottom:0.75rem}
  .bdot{min-height:2.375rem;padding:0 0.6875rem;font-size:0.875rem;gap:0.375rem}
  .bdot i{width:0.625rem;height:0.625rem}
  .board[data-n="1"] .bcol{flex-basis:100%}
  .bhead .bubble.sib{inset-inline-start:6rem}
  .brow{min-height:3.25rem}
}

/* ---- plan v2 (H16): shelves morning / noon / evening ---------------------------------------- */
.shelves{display:flex;flex-direction:column;gap:0.875rem}
.shelf{border-radius:var(--r-lg);padding:0.75rem;background:rgba(255,255,255,.45)}
.shelf.now{background:rgba(255,255,255,.7);outline:0.1875rem solid var(--c,var(--sky))}
.shelf-h{display:flex;align-items:center;gap:0.5rem;font-weight:900;font-size:1.125rem;color:var(--ink);margin-bottom:0.625rem}
.shelf-h .ico{width:2rem;height:2rem}
.shelf-empty{color:var(--ink-2);font-weight:600;font-size:0.875rem;padding:0.375rem 0.25rem 0.125rem}
.task .mv{position:absolute;top:3.25rem;inset-inline-start:0.625rem;width:2.25rem;height:2.25rem;border-radius:50%;background:var(--paper-2);display:grid;place-items:center;z-index:2;box-shadow:var(--shadow)}
.task .mv img{width:1.375rem;height:1.375rem}
.pl-shelf{display:flex;flex-direction:column;gap:0.375rem;padding:0.5rem;border-radius:0.875rem;background:rgba(255,255,255,.5)}
.pl-shelf.now{background:var(--paper);box-shadow:var(--shadow)}
.pl-sh{display:flex;align-items:center;gap:0.5rem;font-weight:900;font-size:0.9375rem;color:var(--ink-2)}
.pl-sh .ico{width:1.625rem;height:1.625rem}
.pl .acts .ibtn img{width:1.375rem;height:1.375rem}
.bshelf{display:flex;align-items:center;gap:0.375rem;font-weight:800;font-size:0.8125rem;color:var(--ink-2);padding:0.5rem 0.375rem 0}
.bshelf .ico{width:1.375rem;height:1.375rem}
.bshelf.now{color:var(--ink)}
.bsh .n{display:flex;align-items:baseline;gap:0.25rem 0.625rem;flex-wrap:wrap}
.bsh .left{font-size:0.8125rem;font-weight:700;color:var(--ink-2);white-space:nowrap}   /* H5: gentle, never red */
.bubble.ask{cursor:pointer;outline:0.1875rem solid var(--c,var(--sky))}

/* ---- game v3, phase A: bag, drops, chests, tiers ---------------------------------------------- */
:root{--tier-wood:#B8865B;--tier-stone:#8A93AE;--tier-iron:#4B5F8A;--tier-gold:#FFB800;--tier-diamond:#4FA3F7;--tier-star:#8E6CEF}
.pill.bag{background:linear-gradient(180deg,#F3E7D3,#E4CFAE);color:#5B3A12;cursor:pointer}
.pill.bag .ico,.pill.bag img{width:1.375rem;height:1.375rem}
.pill.bag.big .ico,.pill.bag.big img{width:1.875rem;height:1.875rem}
.flydrop{position:fixed;width:2.5rem;height:2.5rem;z-index:120;pointer-events:none;filter:drop-shadow(0 0.375rem 0.5rem rgba(0,0,0,.25))}
.bag .h3{margin:0.625rem 0 0.375rem;font-size:0.9375rem;color:var(--ink-2)}
.bag-mats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem}
.bag-mats .bm{display:flex;flex-direction:column;align-items:center;gap:0.125rem;padding:0.625rem 0.375rem;border-radius:0.875rem;background:var(--paper-2)}
.bag-mats .bm img{width:2.75rem;height:2.75rem;object-fit:contain}
.bag-mats .bm b{font-size:1.25rem}
.bag-mats .bm .n{font-size:0.75rem;font-weight:700;color:var(--ink-2)}
.bag-mats .bm.zero img{opacity:.35}
.bag-tools{display:flex;flex-wrap:wrap;gap:0.5rem}
.bag-tools .bt{position:relative;display:flex;flex-direction:column;align-items:center;gap:0.125rem;width:6rem;padding:0.625rem 0.375rem;border-radius:0.875rem;background:var(--paper-2);border:0.1875rem solid transparent}
.bag-tools .bt img{width:3.25rem;height:3.25rem;object-fit:contain}
.bag-tools .bt .n{font-size:0.75rem;font-weight:800;text-align:center;line-height:1.2}
.bag-tools .bt .cnt{position:absolute;top:0.375rem;inset-inline-end:0.375rem;font-size:0.75rem;background:var(--paper);border-radius:62.4375rem;padding:0.0625rem 0.375rem}
.bag-tools .bt .lock{display:inline-flex;align-items:center;gap:0.1875rem;font-size:0.6875rem;font-weight:700;color:var(--ink-3)}
.bag-tools .bt .lock svg{width:0.75rem;height:0.75rem}
.bt.tier-wood{border-color:var(--tier-wood)}.bt.tier-stone{border-color:var(--tier-stone)}.bt.tier-iron{border-color:var(--tier-iron)}.bt.tier-gold{border-color:var(--tier-gold);box-shadow:0 0 0 0.1875rem rgba(255,184,0,.25)}.bt.tier-diamond{border-color:var(--tier-diamond);box-shadow:0 0 0 0.1875rem rgba(79,163,247,.25)}.bt.tier-star{border-color:var(--tier-star);box-shadow:0 0 0 0.25rem rgba(142,108,239,.3)}
.bag-shards{display:flex;align-items:center;gap:0.75rem;margin-top:0.75rem;padding:0.625rem 0.75rem;border-radius:0.875rem;background:#EFE9FF}
.bag-shards .t{font-weight:800}
.pips{display:flex;gap:0.3125rem;margin:0.375rem 0}
.pips i{width:0.75rem;height:0.75rem;border-radius:50%;background:rgba(43,45,66,.15)}
.pips i.on{background:var(--grape);box-shadow:0 0 0 0.125rem rgba(142,108,239,.25)}
.mystery.chest img{animation:shake 1.2s ease-in-out infinite}
.mystery.chest .chestpips{position:absolute;bottom:1.625rem;gap:0.4375rem}
.mystery.chest .chestpips i{width:0.875rem;height:0.875rem;background:rgba(122,61,0,.2)}
.mystery.chest .chestpips i.on{background:var(--sun);box-shadow:0 0 0 0.125rem rgba(255,184,0,.35)}
.mystery.chest .chestpips i:last-child{border:0.125rem solid var(--sun);width:0.75rem;height:0.75rem}
.prize.items{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0.875rem}
.prize.items .pi{display:flex;flex-direction:column;align-items:center;gap:0.125rem;font-weight:800;color:#7A3D00}
.prize.items .pi img{width:clamp(4.375rem,10vw,6.875rem);height:auto}
.prize.items .pi b{font-size:1.375rem}
.tool-ring{width:clamp(9.375rem,22vw,13.75rem);aspect-ratio:1;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0,#FFF1C2 70%,transparent 72%)}
.tool-ring img{width:70%;height:70%;object-fit:contain}
.tool-ring.tier-stone{background:radial-gradient(circle,#fff 0,#E4E8F2 70%,transparent 72%)}.tool-ring.tier-iron{background:radial-gradient(circle,#fff 0,#D5DEF0 70%,transparent 72%)}.tool-ring.tier-gold{background:radial-gradient(circle,#fff 0,#FFE38F 70%,transparent 72%)}.tool-ring.tier-diamond{background:radial-gradient(circle,#fff 0,#CFE6FF 70%,transparent 72%)}.tool-ring.tier-star{background:radial-gradient(circle,#fff 0,#E3D9FF 70%,transparent 72%)}
.eggpick.nest{outline:0.25rem solid var(--grape);box-shadow:0 0 0 0.5rem rgba(142,108,239,.2),var(--shadow)}
.eggpick .pill.tiny{margin-bottom:-0.25rem}
.tablewrap{overflow-x:auto}
table.odds{width:100%;border-collapse:collapse;font-size:0.875rem;margin:0.375rem 0}
table.odds th,table.odds td{padding:0.375rem 0.625rem;text-align:start;border-bottom:0.0625rem solid var(--line)}
table.odds th{font-weight:800;background:var(--paper-2)}

/* ---- game v3, phase B: the island and the workshop ------------------------------------------- */
.island-card{padding:clamp(0.625rem,1.4vw,1rem)}
.island{position:relative;width:100%;aspect-ratio:4/3;border-radius:var(--r-lg);overflow:hidden;background:#DDF1FF;user-select:none;-webkit-user-select:none}
.island .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;pointer-events:none}
.island .spot{position:absolute;display:grid;place-items:center;cursor:pointer;-webkit-tap-highlight-color:transparent}
.island .spot.lawn{cursor:pointer}
.island .spot.lawn .crw,.island .spot.lawn .cr{max-width:100%;max-height:100%}
.island .fog{position:absolute;inset:-8%;border-radius:50%;background:rgba(238,240,247,.94);box-shadow:0 0 0 0.375rem rgba(238,240,247,.5),0 0.625rem 1.5rem -0.625rem rgba(43,45,66,.35);transition:transform .9s cubic-bezier(.2,.8,.2,1),opacity .9s}
.island .fog::before{content:"";position:absolute;left:12%;top:-14%;width:38%;height:48%;border-radius:50%;background:inherit}
.island .fog::after{content:"";position:absolute;right:8%;top:-8%;width:44%;height:52%;border-radius:50%;background:inherit}
.island .spot.opening .fog{transform:scale(1.9);opacity:0}
.island .spot.opening .key{opacity:0;transition:opacity .4s}
.island .key{position:relative;display:flex;flex-direction:column;align-items:center;gap:0.125rem;z-index:1}
.island .key img.sil,.island .key .sil{width:clamp(1.875rem,6vw,3.25rem);height:clamp(1.875rem,6vw,3.25rem);object-fit:contain;filter:brightness(0) opacity(.42)}
.island .lockb{width:clamp(1.25rem,3.4vw,1.75rem);height:clamp(1.25rem,3.4vw,1.75rem);border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 0.25rem 0.625rem -0.25rem rgba(0,0,0,.4)}
.island .lockb svg{width:60%;height:60%}
.island .key .pips{margin:0.125rem 0 0}
.island .abadge{position:absolute;top:0;inset-inline-end:0;display:flex;align-items:center;gap:0.25rem;padding:0.125rem 0.5rem 0.125rem 0.25rem;border-radius:62.4375rem;background:var(--paper);box-shadow:var(--shadow);font-weight:900;font-size:0.875rem}
.island .abadge img,.island .abadge .ico{width:1.375rem;height:1.375rem}
.island .alabel{position:absolute;bottom:0;padding:0.125rem 0.625rem;border-radius:62.4375rem;background:rgba(255,255,255,.8);font-weight:800;font-size:0.8125rem}
.island .spot.hut.open{outline:0.1875rem solid var(--sun);outline-offset:-0.1875rem;border-radius:0.875rem}
.island .spot.treasure{border-radius:50%;background:rgba(255,255,255,.55)}
.island .spot.treasure img,.island .spot.treasure .ico{width:60%;height:60%}
.island .spot.treasure .x{position:absolute;color:#B4304A;font-weight:900;font-size:1.375rem}
.island .spot.treasure .days{position:absolute;bottom:-0.25rem;inset-inline-end:-0.25rem;background:var(--paper);border-radius:62.4375rem;padding:0 0.375rem;font-size:0.75rem;font-weight:800;box-shadow:var(--shadow)}
.island .spot.treasure.ready{box-shadow:0 0 0 0.25rem var(--sun);animation:pulse 1.6s ease-in-out infinite}
.wiggle{animation:wiggle .5s ease-in-out}
@keyframes wiggle{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}45%{transform:rotate(6deg)}70%{transform:rotate(-4deg)}}
.island .bubble.need{position:absolute;top:4%;left:50%;transform:translateX(-50%);z-index:5;margin:0;animation:bubbleIn .4s cubic-bezier(.2,1.4,.3,1)}
.island .bubble.need::after{display:none}
.island .bubble.need img,.island .bubble.need .ico{width:1.75rem;height:1.75rem}
/* the workshop */
.ws .h3{margin:0.5rem 0 0.375rem;font-size:0.9375rem;color:var(--ink-2)}
.ws .merge-row,.ws .recipe{position:relative;display:flex;align-items:center;gap:0.625rem;flex-wrap:wrap;padding:0.625rem 0.75rem;border-radius:1rem;background:var(--paper-2);margin-bottom:0.5rem}
.ws .merge-row.dim{opacity:.75}
.ws .three{display:flex;gap:0.25rem}
.ws .slot{width:3.25rem;height:3.25rem;border-radius:0.75rem;background:var(--paper);display:grid;place-items:center;box-shadow:var(--shadow)}
.ws .slot.empty{background:transparent;box-shadow:inset 0 0 0 0.125rem dashed rgba(43,45,66,.2);border:0.125rem dashed rgba(43,45,66,.25);box-shadow:none}
.ws .slot img,.ws .slot .ico,.ws .result img,.ws .result .ico,.ws .nd img,.ws .nd .ico{width:2.5rem;height:2.5rem;object-fit:contain}
.ws .result{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle,#fff 0,#FFF1C2 70%,transparent 72%)}
.ws .result.ghost{opacity:.4;filter:grayscale(1)}
.ws .result.pop{animation:pop .45s cubic-bezier(.2,1.6,.3,1)}
.ws .arrow{font-weight:900;color:var(--ink-3);font-size:1.375rem}
.ws .nm{font-weight:800;flex:1;min-width:5.625rem}
.ws .needs{display:flex;gap:0.375rem}
.ws .nd{display:flex;flex-direction:column;align-items:center;gap:0;padding:0.25rem 0.375rem;border-radius:0.625rem;background:var(--paper)}
.ws .nd.no{opacity:.55}.ws .nd.no b{color:#B4304A}.ws .nd.ok b{color:#0E7A61}
.ws .nd b{font-size:0.75rem}
.ws .recipe.ok{outline:0.1875rem solid var(--ok)}
.ws .btn[disabled]{opacity:.45;cursor:default}
.ws .mflash{position:absolute;inset:0;border-radius:1rem;background:#fff;animation:mflash .7s ease-out forwards;pointer-events:none}
@keyframes mflash{0%{opacity:0}20%{opacity:.95}100%{opacity:0}}
.sheet.workshop{width:min(100%,40rem)}

/* ---- game v3, phase C: island life ------------------------------------------------------------ */
.island.night{filter:none}
.island.night::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,26,68,.45),rgba(23,26,68,.6));pointer-events:none;z-index:1}
.island .spot.lawn > *{transform:scale(var(--k,1));transform-origin:bottom center}
.island .spot.lawn.asleep{z-index:3}
.island .spot.bed{z-index:2;pointer-events:none}
.island .spot.bed img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0.375rem 0.5rem rgba(0,0,0,.2))}
.island .awaylbl{padding:0.375rem 0.875rem;border-radius:62.4375rem;background:rgba(255,255,255,.8);font-weight:800;font-size:0.875rem;color:var(--ink-2)}
.island .away{position:absolute;bottom:4%;left:50%;transform:translateX(-50%);z-index:3}
.island .away.back{animation:pulse 1.4s ease-in-out infinite;cursor:pointer}
.island .away .backb{position:absolute;top:-0.375rem;inset-inline-end:-0.375rem;width:1.75rem;height:1.75rem;border-radius:50%;background:var(--sun);color:#7A3D00;font-weight:900;display:grid;place-items:center;box-shadow:var(--shadow)}
.island .placed{position:absolute;width:12%;aspect-ratio:1;display:grid;place-items:center;cursor:pointer;z-index:2;filter:drop-shadow(0 0.375rem 0.5rem rgba(0,0,0,.18))}
.island .placed img,.island .placed .ico{width:100%;height:100%;object-fit:contain}
.island.placing{outline:0.25rem dashed var(--grape);outline-offset:-0.25rem;cursor:crosshair}
.island.placing::before{content:"לוחצים איפה להניח";position:absolute;top:0.5rem;left:50%;transform:translateX(-50%);z-index:6;padding:0.375rem 0.875rem;border-radius:62.4375rem;background:var(--grape);color:#fff;font-weight:800;font-size:0.875rem}
.island .leaf{position:absolute;width:5%;aspect-ratio:1/1.6;border-radius:50% 0 50% 0;background:#C98B3A;opacity:.85;z-index:1;pointer-events:none;box-shadow:inset 0 0 0 0.0625rem rgba(0,0,0,.08)}
.island .bubble.need.stay{top:auto;bottom:6%}
.island .statue{position:absolute;width:8%;display:flex;flex-direction:column;align-items:center;z-index:1;filter:sepia(.7) saturate(1.4) brightness(1.05)}
.island .statue .cr,.island .statue .crw{width:100%!important;height:auto!important}
.island .statue .plinth{width:80%;height:0.5rem;border-radius:0.25rem;background:#C9B27A;box-shadow:0 0.1875rem 0.375rem rgba(0,0,0,.2)}
.island .spot.resident{pointer-events:none;z-index:2}
.island .spot.resident > *{transform:scale(calc(var(--k,1) * .8));transform-origin:bottom center}
.exp-btn{position:absolute;bottom:3%;inset-inline-end:3%;z-index:5;display:inline-flex;align-items:center;gap:0.5rem;min-height:3rem;padding:0 1rem;border-radius:62.4375rem;background:linear-gradient(180deg,#3A3585,#26296B);color:#fff;font-weight:900;font-size:1rem;box-shadow:var(--shadow-lg)}
.exp-btn .ico{width:1.75rem;height:1.75rem}
.exp-btn.ready{animation:pulse 1.6s ease-in-out infinite;outline:0.1875rem solid var(--sun)}
.exp-btn.locked{opacity:.75}
.exp-btn .lockb{width:1.375rem;height:1.375rem;border-radius:50%;background:#fff;color:var(--ink);display:grid;place-items:center}
.exp-btn .lockb svg{width:60%;height:60%}
.exp-pick{display:flex;gap:0.75rem;flex-wrap:wrap;justify-content:center}
.exp-pick .expa{display:flex;flex-direction:column;align-items:center;gap:0.375rem;width:7.5rem;padding:0.875rem 0.5rem;border-radius:1.125rem;background:var(--paper-2);font-weight:800;box-shadow:var(--shadow)}
.exp-pick .expa img{width:3.5rem;height:3.5rem}
.prize.items .pi.new b{color:#0E7A61}
.island .flutter{position:absolute;width:7%;aspect-ratio:1;z-index:6;cursor:pointer;animation:flap .6s ease-in-out infinite alternate;filter:drop-shadow(0 0.25rem 0.375rem rgba(0,0,0,.2))}
.island .flutter img,.island .flutter .ico{width:100%;height:100%}
@keyframes flap{from{transform:scaleX(1) rotate(-6deg)}to{transform:scaleX(.7) rotate(6deg)}}
.album .arow{display:flex;gap:0.375rem;flex-wrap:wrap;margin-bottom:0.375rem}
.album .ai{width:3.25rem;height:3.25rem;border-radius:0.75rem;background:var(--paper-2);display:grid;place-items:center}
.album .ai img,.album .ai .ico{width:2.375rem;height:2.375rem}
.album .ai:not(.have) img,.album .ai:not(.have) .ico{filter:brightness(0) opacity(.25)!important}
.rar-1{filter:hue-rotate(40deg)}.rar-2{filter:hue-rotate(90deg)}.rar-3{filter:hue-rotate(160deg)}.rar-4{filter:hue-rotate(230deg) saturate(1.4)}.rar-5{filter:hue-rotate(300deg) saturate(1.6) brightness(1.1)}
.bigitem{width:7.5rem;height:7.5rem;object-fit:contain}

/* ---- the island alive: floating ground, drifting clouds, water light, breathing fog --------------- */
.island.rendered .bg{animation:isfloat 7s ease-in-out infinite;transform-origin:center;will-change:transform}
@keyframes isfloat{0%,100%{transform:scale(1.03) translateY(0)}50%{transform:scale(1.03) translateY(-1.2%)}}
.island .cloud{position:absolute;left:-28%;width:26%;aspect-ratio:2.2/1;z-index:4;pointer-events:none;opacity:.85;animation:drift linear infinite}
.island .cloud.c1{width:18%;opacity:.7}
.island .cloud img{width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0.5rem 0.875rem rgba(43,45,66,.12))}
.island .cloud:not(:has(img))::before{content:"";position:absolute;inset:20% 0 0 0;border-radius:62.4375rem;background:rgba(255,255,255,.92)}
.island .cloud:not(:has(img))::after{content:"";position:absolute;left:22%;top:0;width:44%;height:70%;border-radius:50%;background:rgba(255,255,255,.95)}
@keyframes drift{from{transform:translateX(0)}to{transform:translateX(500%)}}
.island .shimmer{position:absolute;border-radius:50%;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 40% 40%,rgba(255,255,255,.55) 0,rgba(255,255,255,.18) 35%,transparent 62%);animation:shimmer 4.5s ease-in-out infinite;mix-blend-mode:screen}
@keyframes shimmer{0%,100%{opacity:.35;transform:translate(0,0) scale(1)}50%{opacity:.8;transform:translate(3%,-2%) scale(1.08)}}
.island .fog{animation:fogbreath 5s ease-in-out infinite}
@keyframes fogbreath{0%,100%{transform:scale(1)}50%{transform:scale(1.05)}}
.island .fog.art{background:none;box-shadow:none;filter:none;inset:-16%;display:grid;place-items:center}
.island .fog.art::before,.island .fog.art::after{display:none}
.island .fog.art img{width:100%;height:100%;object-fit:contain;opacity:.96;filter:drop-shadow(0 0.625rem 1.25rem rgba(43,45,66,.25))}
.island .zprop{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;pointer-events:none;filter:drop-shadow(0 0.5rem 0.75rem rgba(43,45,66,.25))}
.island .zprop.dim{filter:drop-shadow(0 0.5rem 0.75rem rgba(43,45,66,.25)) saturate(.35) brightness(.85)}
.island .spot.locked .key{z-index:2}
.island.night .cloud{opacity:.35}
.island.night .shimmer{opacity:.5}

/* ---- game v3, phase D: the season ladder ------------------------------------------------------- */
.ladder{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap;padding:0.625rem 0.875rem;border-radius:1.125rem;background:rgba(255,255,255,.62);box-shadow:var(--shadow);--sc:var(--grape)}
.ladder.closed{opacity:.75}
.ladder .lhead{display:flex;align-items:center;gap:0.5rem;font-weight:900;font-size:0.9375rem}
.ladder .lhead .ico{width:1.625rem;height:1.625rem}
.ladder .lsteps{display:flex;gap:0.25rem;flex:1;min-width:0;overflow-x:auto;scrollbar-width:none;padding:0.125rem}
.ladder .lsteps::-webkit-scrollbar{display:none}
.ladder .lstep{flex:0 0 auto;width:1.375rem;height:1.375rem;border-radius:50%;background:#EEE9E0;display:grid;place-items:center;color:#fff}
.ladder .lstep.big{width:1.875rem;height:1.875rem;background:var(--paper);box-shadow:0 0 0 0.125rem var(--sc)}
.ladder .lstep img,.ladder .lstep .ico{width:1.25rem;height:1.25rem}
.ladder .lstep.done{background:var(--sc)}
.ladder .lstep.done svg{width:0.875rem;height:0.875rem}
.ladder .lstep.big.done img,.ladder .lstep.big.done .ico{display:none}
.ladder .lcreature{display:flex;align-items:center;gap:0.375rem;font-weight:700;color:var(--ink-2)}
.island .trophy{position:absolute;width:6%;aspect-ratio:1;z-index:2;filter:drop-shadow(0 0.25rem 0.375rem rgba(0,0,0,.25))}
.island .trophy img{width:100%;height:100%;object-fit:contain}

/* ---- island refinements after the first rendered composition ------------------------------------- */
.island.rendered .fog{background:rgba(242,244,250,.66);box-shadow:0 0 0 0.3125rem rgba(242,244,250,.28),0 0.75rem 1.625rem -0.75rem rgba(43,45,66,.35);inset:-4%;backdrop-filter:blur(0.125rem)}
.island.rendered .fog::before{left:16%;top:-10%;width:34%;height:44%}
.island.rendered .fog::after{right:12%;top:-6%;width:40%;height:48%}
.island.rendered .spot.hut.open{outline:0;border-radius:1.5rem;box-shadow:0 0 0 0.25rem rgba(255,184,0,.55),0 0 1.75rem 0.375rem rgba(255,184,0,.35)}
.island.rendered .placed{width:8%}
.island.rendered .cloud{opacity:.6}
.island.rendered .alabel{background:rgba(255,255,255,.88);box-shadow:var(--shadow)}
.island.rendered .spot.lawn > *{filter:drop-shadow(0 0.625rem 0.625rem rgba(0,0,0,.25))}

.island .cloud img{filter:brightness(1.18) drop-shadow(0 0.5rem 0.875rem rgba(43,45,66,.12))}   /* the rendered cloud is a shade grey */
.island.rendered .zprop{filter:drop-shadow(0 0.625rem 0.875rem rgba(43,45,66,.35))}

/* ---- island v4 scene (docs/ISLAND-V4-PLAN.md §3-§5, js/scene.js) ---- */
.scene-card{padding:clamp(0.5rem,1.2vw,0.875rem)}
.scene{position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;border-radius:var(--r-lg);background:#2d5f6e;user-select:none;-webkit-user-select:none;touch-action:manipulation}
@media (max-width:700px){.scene{aspect-ratio:auto;height:min(64dvh,37.5rem)}}
.scene.pan{touch-action:none;cursor:grab}
.sc-stage{position:absolute;left:0;top:0;transform-origin:0 0;will-change:transform}
.sc-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none}
.sc-patch{position:absolute;display:block;pointer-events:none;object-fit:fill}
.sc-patch.sc-lights{z-index:4}
/* finished tower (Eli 2026-09-15, A): a warm pulse and five sparkles around the dome; sizes in world px via --z */
.sc-finish{position:absolute;transform:translate(-50%,-50%);width:calc(var(--z,1) * 6.5rem);height:calc(var(--z,1) * 6rem);z-index:4;pointer-events:none;border-radius:50%;background:radial-gradient(closest-side,rgba(255,214,90,.5),rgba(255,214,90,0));animation:scFinishPulse 3.2s ease-in-out infinite}
.sc-finish i{position:absolute;width:calc(var(--z,1) * 0.5625rem);height:calc(var(--z,1) * 0.5625rem);background:#FFF4B4;clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);animation:scSpark 2.4s ease-in-out infinite}
.sc-finish .s0{left:10%;top:22%}.sc-finish .s1{left:82%;top:18%;animation-delay:.5s}.sc-finish .s2{left:18%;top:62%;animation-delay:1s}.sc-finish .s3{left:86%;top:58%;animation-delay:1.5s}.sc-finish .s4{left:52%;top:0;animation-delay:.8s}
@keyframes scFinishPulse{0%,100%{opacity:.7}50%{opacity:1}}
@keyframes scSpark{0%,100%{transform:scale(.35);opacity:.25}50%{transform:scale(1);opacity:1}}
.sc-hit{position:absolute;background:transparent;border:0;padding:0;margin:0;border-radius:1.125rem;cursor:pointer;-webkit-tap-highlight-color:transparent;z-index:1}
.sc-hit:focus-visible{outline:0.1875rem solid var(--sun);outline-offset:0.125rem}
.sc-hit:active{background:rgba(255,255,255,.16)}
.sc-cr{position:absolute;transform:translate(-50%,-100%);z-index:2;cursor:pointer}
.sc-cr .sc-body{position:relative;height:100%;animation:scBob 2.4s ease-in-out infinite alternate;transform-origin:bottom center}
.sc-cr .sc-art{height:100%;width:auto;display:block;pointer-events:none;filter:drop-shadow(0 0.125rem 0.125rem rgba(0,0,0,.18))}
.sc-cr .sc-art.svg{aspect-ratio:1}
.sc-cr .sc-art.svg>*{width:100%!important;height:100%!important}
.sc-cr .sc-shadow{position:absolute;left:44%;bottom:0;width:56%;height:16%;transform:translate(-50%,40%);border-radius:50%;background:radial-gradient(closest-side,rgba(15,40,20,.45),rgba(15,40,20,0))}
/* cast shadow by the island's sun (H29): the still as a mask, projected up-left from the feet. Colour solved so the grass actually under
   the creatures (measured in the app, mean [127,147,58]) keeps what the island's own grass shadows keep (r .36 g .46 b .52) at alpha .85.
   Earlier tries measured in the app: rgba(15,40,20,.7) kept [.48,.57,.52]; rgba(28,49,26,.8) kept [.43,.51,.64] (2026-09-15) */
.sc-cr .sc-cast{position:absolute;inset:0;background:rgba(31,54,25,.85);-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;transform-origin:50% 100%;filter:blur(0.0375rem);pointer-events:none}
.sc-cr.hop .sc-body{animation:scHop .5s cubic-bezier(.3,1.6,.5,1)}
.sc-cr.resident{pointer-events:none;z-index:1}
@keyframes scBob{from{transform:translateY(0)}to{transform:translateY(-3%)}}
@keyframes scHop{0%{transform:translateY(0)}40%{transform:translateY(-30%)}100%{transform:translateY(0)}}
.sc-zzz{position:absolute;transform:translate(-50%,-100%);font-weight:900;color:#fff;text-shadow:0 0.125rem 0.25rem rgba(0,0,0,.45);font-size:calc(var(--z,1) * 1.125rem);animation:scZ 3s ease-in-out infinite;z-index:4;pointer-events:none}
@keyframes scZ{0%{opacity:0;transform:translate(-50%,-60%)}30%{opacity:1}100%{opacity:0;transform:translate(-10%,-240%)}}
.sc-egg{position:absolute;transform:translate(-50%,-100%);width:calc(var(--z,1) * 2.125rem);height:calc(var(--z,1) * 2.125rem);min-width:3rem;min-height:3rem;border:0;border-radius:50%;background:rgba(255,255,255,.85);display:grid;place-items:center;box-shadow:var(--shadow);z-index:2;cursor:pointer;animation:pulse 1.8s ease-in-out infinite}
.sc-egg img,.sc-egg .ico{width:70%;height:70%}
.sc-night{position:absolute;inset:0;background:linear-gradient(180deg,rgba(23,26,68,.42),rgba(23,26,68,.58));pointer-events:none;z-index:3}
.sc-hud{position:absolute;inset-inline:0.625rem;top:0.625rem;display:flex;justify-content:space-between;align-items:flex-start;gap:0.5rem;flex-wrap:wrap;z-index:5;pointer-events:none}
.sc-pill{pointer-events:auto;display:flex;align-items:center;gap:0.5rem;padding:0.375rem 0.75rem;border-radius:62.4375rem;background:rgba(255,255,255,.92);box-shadow:var(--shadow);font-weight:800;min-height:2.75rem;color:var(--ink)}
.sc-pill img,.sc-pill .ico{width:1.75rem;height:1.75rem;object-fit:contain}
.sc-pill .bar{display:block;width:clamp(2.75rem,9vw,6.875rem);height:0.5rem;border-radius:6.1875rem;background:rgba(43,45,66,.12);overflow:hidden}
.sc-pill .bar>i{display:block;height:100%;background:var(--sun);border-radius:6.1875rem}
.sc-spark{position:absolute;top:0.25rem;inset-inline-end:0.25rem;min-width:1.75rem;height:1.75rem;padding:0 0.4375rem;border-radius:6.1875rem;background:linear-gradient(135deg,#FFE08A,#E5A21F);color:#5A3A00;display:grid;place-items:center;box-shadow:0 0 0.875rem rgba(255,200,60,.9);animation:pulse 1.6s ease-in-out infinite}
.house-screen{position:fixed;inset:0;z-index:60;background:var(--bg,#FBF8F2);overflow:auto;padding-block:1rem 2.5rem;padding-inline:1rem}
.house-screen .hs-top{display:flex;justify-content:space-between;align-items:center;max-width:62.5rem;margin:0 auto 0.75rem}
.house-screen section{max-width:62.5rem;margin:0 auto 1.125rem;background:var(--paper);border-radius:var(--r-lg);padding:0.875rem;box-shadow:var(--shadow)}
.house-screen .hs-row,.house-screen .hs-grid{display:flex;flex-wrap:wrap;gap:0.875rem}
.hs-cr{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.625rem;border-radius:1rem;background:rgba(43,45,66,.04);min-width:9.375rem}
.hs-new{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.375rem;min-width:9.375rem;min-height:9.375rem;border:0.125rem dashed rgba(43,45,66,.25);border-radius:1rem;background:transparent;font:inherit;font-weight:800;color:var(--ink);cursor:pointer}
.hs-new img,.hs-new .ico{width:3.5rem;height:3.5rem}
.sc-hud-group{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:flex-start}
.sc-pill.stars .ico,.sc-pill.stars img{width:1.5rem;height:1.5rem}
.sc-pill.who span:not(.num){color:var(--ink-2);font-weight:700}
/* phones: the top pills overflowed a 390 px screen (Eli's stage-4 check, 2026-09-14): drop the creature's name, tighten the pills, and let
   every pill shrink inside the screen instead of running off its edge */
@media (max-width:520px){.sc-hud{max-width:calc(100% - 1.25rem)}.sc-hud-group{flex-wrap:nowrap;min-width:0;max-width:100%}.sc-pill{padding:0.3125rem 0.625rem;gap:0.375rem;min-width:0;max-width:100%;overflow:hidden;white-space:nowrap}.sc-pill.who span:not(.num){display:none}.sc-pill .bar{width:2.375rem;flex:0 0 2.375rem}.sc-pill b{overflow:hidden;text-overflow:ellipsis}}
.pill.jar{display:inline-flex;align-items:center;gap:0.375rem}
.pill.jar img,.pill.jar .ico{width:1.625rem;height:1.625rem;object-fit:contain}
.pill.jar .jarbar{display:inline-block;width:3.25rem;height:0.4375rem;border-radius:6.1875rem;background:rgba(43,45,66,.14);overflow:hidden}
.pill.jar .jarbar>i{display:block;height:100%;background:var(--sun);border-radius:6.1875rem}
.sc-locked{position:absolute;z-index:1;pointer-events:none;background-repeat:no-repeat;filter:grayscale(.92) brightness(1.2) contrast(.82);-webkit-mask-image:radial-gradient(closest-side,#000 60%,transparent 100%);mask-image:radial-gradient(closest-side,#000 60%,transparent 100%)}
.sc-lock{position:absolute;z-index:1;pointer-events:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.125rem}
.sc-lock img.sil,.sc-lock .sil{width:calc(var(--z,1) * 2.875rem);height:calc(var(--z,1) * 2.875rem);min-width:2.25rem;min-height:2.25rem;object-fit:contain;filter:brightness(0) opacity(.62) drop-shadow(0 0 0.1875rem rgba(255,255,255,.95)) drop-shadow(0 0 0.375rem rgba(255,255,255,.7))}
.sc-lock .lockb{width:1.625rem;height:1.625rem;border-radius:50%;background:var(--ink);color:#fff;display:grid;place-items:center;box-shadow:0 0.25rem 0.625rem -0.25rem rgba(0,0,0,.4)}
.sc-lock .lockb svg{width:60%;height:60%}
/* jar pill compact: a board column shows the tool and a short bar (no number); a phone's Today header keeps the number and drops the bar; neither wraps the stats row */
.pill.jar:not(.big) b{display:none}
.pill.jar:not(.big) .jarbar{width:2.25rem}
@media (max-width:430px){.pill.jar.big .jarbar{display:none}}
/* ---- island v4 workshop (plan §6, js/workshop.js) ---- */
.workshop-screen{position:fixed;inset:0;z-index:60;background:var(--bg,#FBF8F2);overflow:auto;padding-block:1rem 2.5rem;padding-inline:1rem}
.workshop-screen .wk-head{display:flex;justify-content:space-between;align-items:center;max-width:68.75rem;margin:0 auto 0.75rem}
.workshop-screen section{max-width:68.75rem;margin:0 auto 1.125rem;background:var(--paper);border-radius:var(--r-lg);padding:0.875rem;box-shadow:var(--shadow)}
.wk-top{display:grid;grid-template-columns:repeat(auto-fit,minmax(6.25rem,1fr));gap:0.625rem}
.wk-slot{display:flex;flex-direction:column;align-items:center;gap:0.25rem}
.wk-place{font-weight:800;font-size:0.8125rem;color:var(--ink-2)}
.wk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(7rem,1fr));gap:0.75rem}
.wk-card{position:relative;width:100%;border:0;border-radius:1.125rem;padding:1.875rem 0.5rem 0.625rem;display:flex;flex-direction:column;align-items:center;gap:0.375rem;font:inherit;color:#fff;cursor:pointer;box-shadow:inset 0 0 0 0.1875rem rgba(255,255,255,.5),0 0.25rem 0.625rem rgba(0,0,0,.12);transition:filter .2s,transform .15s}
.wk-card img,.wk-card .ico{width:62%;aspect-ratio:1;object-fit:contain;filter:drop-shadow(0 0.25rem 0.25rem rgba(0,0,0,.25))}
.wk-card .wk-name{font-weight:800;font-size:0.8125rem;text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.45)}
.wk-card .wk-badge{position:absolute;top:0.4375rem;inset-inline-start:0.4375rem;width:1.5rem;height:1.5rem;border-radius:50%;background:rgba(255,255,255,.92);color:var(--ink);font-weight:800;font-size:0.8125rem;display:grid;place-items:center;text-shadow:none}
.wk-card .wk-n{position:absolute;top:0.4375rem;inset-inline-end:0.5625rem;font-weight:900;font-size:0.9375rem;text-shadow:0 0.0625rem 0.125rem rgba(0,0,0,.5)}
.wk-card.t0{background:rgba(43,45,66,.07);color:var(--ink-2);box-shadow:inset 0 0 0 0.125rem rgba(43,45,66,.12);cursor:default}
.wk-card.t0 .wk-name{text-shadow:none}
.wk-card.t0 img.sil,.wk-card.t0 .sil{filter:brightness(0) opacity(.28)}
.wk-card.t1{background:linear-gradient(160deg,#B8BEC7,#7C8591)}
.wk-card.t2{background:linear-gradient(160deg,#8FDDA5,#36A463)}
.wk-card.t3{background:linear-gradient(160deg,#8CC8FF,#3478DB)}
.wk-card.t4{background:linear-gradient(160deg,#C4A5FF,#7A4BDB)}
.wk-card.t5{background:linear-gradient(160deg,#FFE08A,#E5A21F)}
.wk-card.t6{background:linear-gradient(135deg,#FF9AD5,#FFC977 35%,#9BF0CF 65%,#9CC2FF)}
.wk-card.glow{box-shadow:inset 0 0 0 0.1875rem rgba(255,255,255,.6),0 0 0 0.1875rem #FFE08A,0 0 1.125rem rgba(255,200,60,.85)}
.wk-card.dim{filter:grayscale(1) opacity(.4)}
.wk-card:active{transform:scale(.97)}
.wk-empty{color:var(--ink-2);font-weight:700;padding:0.75rem}
.wk-panel{position:fixed;inset:0;z-index:61;background:rgba(43,45,66,.62);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.75rem;padding-inline:1rem;padding-block:1rem}
.wk-panel .wk-three{display:flex;gap:0.625rem;justify-content:center;width:100%}
.wk-panel .wk-card,.wk-reveal .wk-card{width:clamp(5.75rem,24vw,8.125rem);cursor:default}
.wk-panel .wk-down{display:block;width:0;height:0;border-inline:1rem solid transparent;border-top:1.25rem solid #fff}
.wk-panel .wk-what{color:#fff;font-weight:800;text-align:center}
.wk-panel .wk-actions{display:flex;gap:0.625rem;flex-wrap:wrap;justify-content:center}
.wk-panel .btn.ghost.light{color:#fff}
.wk-reveal{display:flex;flex-direction:column;align-items:center;gap:0.5rem;color:#fff;cursor:pointer;animation:bubbleIn .5s cubic-bezier(.2,1.4,.3,1)}
.wk-reveal .t{font-size:1.75rem;font-weight:900}
.wk-reveal .s{font-weight:800}
/* wk-top compact on phones: three narrow columns so the card grid (where merges happen) starts on the first screen */
@media (max-width:430px){.wk-top{grid-template-columns:repeat(3,1fr);gap:0.5rem}.wk-top .wk-card{padding:1.5rem 0.25rem 0.375rem;border-radius:0.875rem}.wk-top .wk-card img,.wk-top .wk-card .ico{width:56%}.wk-top .wk-card .wk-name{font-size:0.6875rem}.wk-top .wk-card .wk-badge{width:1.25rem;height:1.25rem;font-size:0.6875rem;top:0.3125rem;inset-inline-start:0.3125rem}.wk-place{font-size:0.75rem}}
.sc-glow{position:absolute;transform:translate(-50%,-50%);width:calc(var(--z,1) * 2.875rem);height:calc(var(--z,1) * 2.5rem);border-radius:50%;background:radial-gradient(closest-side,rgba(255,206,110,.95),rgba(255,170,60,.45) 55%,rgba(255,170,60,0));mix-blend-mode:screen;z-index:4;pointer-events:none;animation:scGlow 3.2s ease-in-out infinite alternate}
@keyframes scGlow{from{opacity:.75}to{opacity:1}}
/* a place cut from the island picture (jar pills): the place being built, not its tool */
.place-thumb{display:inline-block;flex:none;width:1.875rem;height:1.875rem;border-radius:50%;background-repeat:no-repeat;box-shadow:inset 0 0 0 0.125rem rgba(255,255,255,.9),0 0.0625rem 0.1875rem rgba(0,0,0,.25)}
.pill.jar .place-thumb{width:1.75rem;height:1.75rem}
.sc-pill .place-thumb{width:2rem;height:2rem}

/* island v4 scene mode (Eli 2026-09-13): on the creature tab the island is the page background, the menu stays beside it */
body.scene-mode .screen{padding:0;max-width:none}
body.scene-mode .scene-card{position:fixed;inset:0;z-index:0;padding:0;margin:0;border-radius:0;background:transparent;box-shadow:none;border:0}
body.scene-mode .scene{height:100% !important;aspect-ratio:auto;border-radius:0}
body.scene-mode .topbar{position:relative;z-index:2;background:linear-gradient(180deg,rgba(255,255,255,.82),rgba(255,255,255,0));padding-bottom:1.125rem}
body.scene-mode .sc-hud{top:5.5rem}
@media (min-width:1000px) and (min-height:501px), (max-height:500px){body.scene-mode .sc-hud{inset-inline-start:7.375rem}}
/* home page menu: a round initial for each child */
.brow .tm{display:flex;width:fit-content;margin-top:0.3125rem;align-items:center;gap:0.25rem;padding:0.1875rem 0.625rem;border-radius:62.4375rem;background:var(--paper-2);border:0.125rem solid var(--line);font-weight:800;font-size:0.8125rem;color:var(--ink-2);cursor:pointer;flex:none}
.brow .tm svg{width:1rem;height:1rem}
.brow.done .tm,.task.done .tm{display:none}
.bmore{display:flex;flex-direction:column;align-items:center;gap:0.625rem;padding:0.875rem 0.75rem;border-radius:var(--r-lg);background:linear-gradient(180deg,#FFF6DA,#FFEFC2);box-shadow:var(--shadow)}
.bmore-t{font-weight:900;font-size:1.1875rem;color:var(--ink)}
.bmore-acts{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;width:100%}
.bmore-act{display:flex;flex-direction:column;align-items:center;gap:0.25rem;padding:0.625rem 0.25rem;border-radius:1.125rem;background:var(--paper);box-shadow:0 0.125rem 0.375rem rgba(43,45,66,.1);cursor:pointer;transition:transform .12s}
.bmore-act:active{transform:scale(.94)}
.bmore-act img{width:3.5rem;height:3.5rem}
.bmore-act .lbl{font-weight:800;font-size:0.8125rem;color:var(--ink-2);text-align:center;line-height:1.15}
.bmore-all{align-self:center}
.bnext{display:flex;align-items:center;gap:0.625rem;padding:0.875rem 1rem;margin:0.375rem 0;border-radius:var(--r-md);background:rgba(255,255,255,.6);color:var(--ink-2);font-weight:800}
.bnext .ico{width:1.875rem;height:1.875rem}
.face-pick{display:flex;align-items:center;gap:0.75rem;flex-wrap:wrap}
.face-file{display:none}
.crop{display:flex;flex-direction:column;align-items:center;gap:0.75rem}
.crop-view{position:relative;width:15rem;height:15rem;border-radius:50%;overflow:hidden;background:#222;touch-action:none;cursor:grab;box-shadow:0 0 0 0.25rem var(--sun)}
.crop-img{position:absolute;left:50%;top:50%;max-width:none;user-select:none;pointer-events:none}
.crop-zoom{width:15rem;accent-color:var(--sun)}
.vol{display:flex;flex-direction:column;gap:0.625rem}
.vol-row{display:flex;align-items:center;gap:0.75rem}
.vol-range{flex:1;min-width:0;max-width:26.25rem;height:2rem;accent-color:var(--sun)}
.vol-pct{min-width:3rem;font-weight:700}
.push-status{font-weight:700;margin-bottom:0.625rem}
.push-status.good{color:#0E7A61}
.push-status.bad{color:#B32626}
.decide-card{max-width:32.5rem;margin:0 auto;display:flex;flex-direction:column;align-items:center;gap:0.75rem;text-align:center;padding:1.75rem 1.25rem}
.decide-item{width:4.5rem;height:4.5rem}
.decide-title{margin:0.25rem 0 0}
.decide-acts{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;width:100%;margin-top:0.5rem}
.decide-acts .btn{justify-content:center;min-height:4rem}
.decide-done{font-size:1.375rem;font-weight:800}
.decide-done.good{color:#0E7A61}.decide-done.bad{color:#B32626}
.decide-nav{justify-content:center;margin-top:0.375rem}
/* wall brakes (guard.js, H53): above the app and its ceremonies, below the picture frame */
.guard-cover{position:fixed;inset:0;z-index:800;touch-action:none;user-select:none;-webkit-user-select:none}
.guard-cover.nono{display:flex;align-items:center;justify-content:center;padding:1.25rem;background:rgba(30,26,60,.55);backdrop-filter:blur(0.1875rem);animation:fade .2s}
.guard-card{background:#fff;border-radius:1.75rem;padding:1.75rem 2.125rem;text-align:center;max-width:32.5rem;box-shadow:0 1.25rem 3.75rem -1.25rem rgba(0,0,0,.5)}
.guard-finger{width:10rem;height:10rem;transform-origin:50% 90%;animation:guard-wag .45s ease-in-out infinite alternate}
@keyframes guard-wag{from{transform:rotate(-22deg)}to{transform:rotate(22deg)}}
.guard-title{font-size:1.75rem;font-weight:800;color:var(--ink,#2B2D42);margin-top:0.625rem}
.guard-count{font-size:1.125rem;color:#6B6E85;margin-top:0.5rem}
.guard-cover.remote{background:transparent}
.guard-pill{position:absolute;top:0.875rem;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:0.5rem;padding:0.625rem 1.25rem;border-radius:62.4375rem;background:var(--grape,#7B61FF);color:#fff;font-weight:800;font-size:1.125rem;box-shadow:0 0.5rem 1.5rem -0.5rem rgba(0,0,0,.45);white-space:nowrap}
.guard-pill svg{width:1.25rem;height:1.25rem}
.guard-pill.shake{animation:guard-shake .4s}
@keyframes guard-shake{0%,100%{transform:translateX(-50%)}25%{transform:translateX(calc(-50% - 0.625rem))}75%{transform:translateX(calc(-50% + 0.625rem))}}
.guard-parent{position:absolute;bottom:1.125rem;left:1.125rem;width:3rem;height:3rem;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:var(--ink,#2B2D42);display:flex;align-items:center;justify-content:center;box-shadow:0 0.375rem 1.125rem -0.375rem rgba(0,0,0,.4)}
.guard-parent svg{width:1.25rem;height:1.25rem}
.wall-lock-state{font-weight:800;margin-bottom:0.625rem}
.kface{display:inline-grid;place-items:center;flex:none;width:var(--sz,2.5rem);height:var(--sz,2.5rem);border-radius:50%;overflow:hidden;background:var(--c,var(--sky));color:#fff;font-weight:900;font-size:calc(var(--sz,2.5rem)*.5);line-height:1;box-shadow:0 0 0 0.1875rem #fff,0 0.125rem 0.5rem rgba(43,45,66,.2)}
.kface img{width:100%;height:100%;object-fit:cover;display:block}
.navbar .kface{box-shadow:0 0 0 0.125rem #fff,0 0.125rem 0.375rem rgba(0,0,0,.18)}
.navkid{width:1.875rem;height:1.875rem;border-radius:50%;background:var(--c,#4FA3F7);color:#fff;display:grid;place-items:center;font-weight:900;font-size:1rem;box-shadow:0 0.125rem 0.375rem rgba(0,0,0,.18)}
/* sc-hud at the bottom on big screens: at the top it covered the cave (top right of the island) */
@media (min-width:1000px) and (min-height:501px){body.scene-mode .sc-hud{top:auto;bottom:1.125rem;align-items:flex-end}}
/* earned eggs (Eli 2026-09-13): the shard card in the shop, the house screen's egg card without an egg */
.rewards.eggs{margin-bottom:0.875rem}
.reward.eggshard .sub{font-size:0.8125rem;color:var(--ink-2);font-weight:700;text-align:center}
.hs-new.off{cursor:default;opacity:.85}
.hs-new small{color:var(--ink-2);font-weight:700}
/* ---- the cave gallery (Eli 2026-09-13, js/gallery.js) ---- */
.gallery-screen{position:fixed;inset:0;z-index:60;overflow:hidden;background:#1c1a22;color:#fff;user-select:none;-webkit-user-select:none;touch-action:none}
.gl-stagebox{position:absolute;inset:0;overflow:hidden}
.gl-room{position:absolute;left:0;top:0;transform-origin:0 0}
.gl-room-bg{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;user-select:none}
.gl-room.sealed{filter:brightness(.45) saturate(.8)}
.gl-room.panning{transition:transform .8s cubic-bezier(.45,.05,.35,1)}
body:has(.gallery-screen){overflow:hidden}
@media (max-width:560px){.gl-top .h1{display:none}}
.gl-slot{position:absolute;left:0;top:0;padding:0;border:0;background:#F3EEE3;transform-origin:0 0;cursor:pointer;overflow:hidden;display:grid;place-items:center}
.gl-slot img{width:100%;height:100%;object-fit:cover;display:block}
.gl-slot.empty{background:rgba(243,238,227,.92)}
.gl-slot .gl-plus{font-size:7.5rem;font-weight:900;line-height:1;color:rgba(43,45,66,.28)}
.gl-stagebox .gl-sealed{position:absolute;inset:0;margin:auto;height:max-content}
.gl-stagebox .gl-empty{position:absolute;inset:0;margin:auto;height:max-content}
.gl-lightbox{position:absolute;inset:0;z-index:4;background:rgba(8,6,12,.92);display:grid;place-items:center;padding:1.5rem}
.gl-lightbox img{max-width:min(92vw,68.75rem);max-height:82vh;object-fit:contain;border-radius:0.75rem;background:#fff;box-shadow:0 1.25rem 3.125rem rgba(0,0,0,.5)}
.gl-lightbox .btn{position:absolute;top:0.875rem;inset-inline-end:1rem;color:#fff}
.gl-plus{font-size:clamp(2.5rem,8vw,5.625rem);font-weight:900;color:rgba(43,45,66,.35)}
.gl-empty{max-width:32.5rem;margin-inline:1rem;padding:1.5rem;border-radius:1.25rem;background:rgba(0,0,0,.5);font-size:1.3rem;text-align:center;line-height:1.6}
.gl-top{position:absolute;inset-inline:1rem;top:0.875rem;display:flex;align-items:center;gap:0.75rem;z-index:2}
.gl-top .h1{color:#fff;margin:0;font-size:clamp(1.375rem,3vw,2.125rem);text-shadow:0 0.125rem 0.375rem rgba(0,0,0,.5)}
.gl-count{margin-inline-start:auto;font-weight:800;background:rgba(0,0,0,.4);padding:0.25rem 0.75rem;border-radius:62.4375rem}
.gl-count:empty{visibility:hidden}
.gl-top .btn.ghost.light{color:#fff}
.gl-nav{position:absolute;bottom:1.375rem;z-index:2;width:4rem;height:4rem;border-radius:50%;border:0;background:rgba(255,255,255,.88);color:var(--ink);display:grid;place-items:center;cursor:pointer;box-shadow:0 0.375rem 1rem rgba(0,0,0,.35)}
.gl-nav svg{width:1.875rem;height:1.875rem}
.gl-nav.next{inset-inline-end:1rem}
.gl-nav.prev{inset-inline-start:1rem}
.gl-nav.prev svg{transform:scaleX(-1)}
.gl-nav:disabled{opacity:.3;pointer-events:none}
.gl-sheet{position:absolute;inset-inline:0;bottom:0;z-index:3;background:var(--paper);color:var(--ink);border-radius:1.375rem 1.375rem 0 0;padding:1rem;max-height:70%;overflow:auto;box-shadow:0 -0.625rem 1.875rem rgba(0,0,0,.35)}
.gl-sheet-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:0.625rem}
.gl-pick{display:grid;grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr));gap:0.625rem;margin-bottom:0.75rem}
.gl-thumb{border:0;padding:0;border-radius:0.75rem;overflow:hidden;aspect-ratio:1;background:#eee;cursor:pointer}
.gl-thumb img{width:100%;height:100%;object-fit:cover}
.gl-shade{position:absolute;inset:0;z-index:1;pointer-events:none;background:#07060b;opacity:0;display:grid;place-items:center;color:#fff;font-size:clamp(1.625rem,4vw,3rem);font-weight:900;text-shadow:0 0.125rem 0.625rem rgba(0,0,0,.6)}
.gallery-screen.deeper .gl-shade{animation:glDeeper 1.25s ease-in-out}
@keyframes glDeeper{0%{opacity:0}35%{opacity:1}65%{opacity:1}100%{opacity:0}}
.gl-sealed{max-width:32.5rem;margin-inline:1rem;padding:1.75rem 1.5rem;border-radius:1.5rem;background:rgba(10,8,16,.62);text-align:center;display:grid;gap:0.625rem;line-height:1.6;box-shadow:0 1.125rem 2.5rem rgba(0,0,0,.45)}
.gl-sealed b{font-size:clamp(1.375rem,3vw,2rem)}
.gl-sealed span{font-size:1.1rem;opacity:.9}
.gl-confirm{display:grid;justify-items:center;gap:0.625rem;text-align:center;padding-block:0.375rem 0.25rem}
.gl-confirm-pic{width:min(16.25rem,60vw);aspect-ratio:4/3;object-fit:cover;border-radius:0.875rem;box-shadow:var(--shadow)}
.gl-confirm-q{font-size:1.4rem}
.gl-confirm-actions{display:flex;flex-wrap:wrap;gap:0.625rem;justify-content:center}

/* ---- parent's phone on the board: skip today / delete from routine (2026-10-28) ---- */
.brow:has(.bmenu){gap:0.5rem;padding-inline-end:0.125rem}
/* the parent reads, the kids tick: on the parent's phone the row keeps only icon, name and the menu (Eli 2026-10-28: the label had no room) */
.bcol.pdev .brow .circ,.bcol.pdev .brow .tm,.bcol.pdev .brow .val{display:none}
.bcol.pdev .brow.done .lbl{text-decoration:line-through;text-decoration-thickness:0.125rem;opacity:.7}
.brow .bmenu{flex:0 0 auto;display:grid;place-items:center;width:1.75rem;height:2.75rem;border-radius:0.625rem;color:var(--ink-2)}
.brow .bmenu svg{width:1.25rem;height:1.25rem;stroke-width:4.4}
.brow .bmenu:active{background:rgba(43,45,66,.08)}
.bskipped{display:flex;align-items:center;gap:0.625rem;width:100%;min-height:2.75rem;padding:0 0.875rem;border-radius:0.875rem;border:0.125rem dashed rgba(43,45,66,.18);color:var(--ink-2);font-weight:700;font-size:0.9375rem;text-align:start}
.bskipped .lbl{flex:1;min-width:0}
.bskipped b{color:var(--ink);text-decoration:underline}
.toast.has-act{pointer-events:auto}
.toast-act{margin-inline-start:0.375rem;padding:0.375rem 0.875rem;border-radius:62.4375rem;background:rgba(255,255,255,.2);color:#fff;font-weight:800;font-size:0.9375rem}
.task-menu .actions{flex-wrap:wrap}
@media (max-width:860px){body.has-tabs #toasts{bottom:calc(6.5rem + env(safe-area-inset-bottom))}}
/* a skip / delete waiting in its own row with "ביטול" (2026-10-28) */
.brow.arming{overflow:hidden}
.brow .barm{position:absolute;inset:0;display:flex;align-items:center;gap:0.625rem;padding:0 0.875rem;border-radius:inherit;background:var(--navy);color:#fff;font-weight:800;font-size:1rem;cursor:default}
.brow .barm-t{flex:1;min-width:0}
.brow .barm-undo{display:inline-flex;align-items:center;min-height:2.25rem;padding:0 1rem;border-radius:62.4375rem;background:#fff;color:var(--navy);font-weight:800;font-size:0.9375rem;cursor:pointer}
.brow .barm-bar{position:absolute;inset-inline:0;bottom:0;height:0.25rem;background:var(--sun);transform-origin:right;animation-name:barmShrink;animation-timing-function:linear;animation-fill-mode:forwards}
[dir="ltr"] .brow .barm-bar{transform-origin:left}
@keyframes barmShrink{from{transform:scaleX(1)}to{transform:scaleX(0)}}
/* ---- parent area on a phone: grouped hub (2026-10-28) ---- */
/* Up to 860 px parent.js draws #/parent as a hub of grouped rows and opens each section alone with a pill back.
   Wider screens keep the side rail (.ptabs above); nothing here is drawn there. */
.pn .badge{flex:none;min-width:1.625rem;height:1.625rem;padding:0 0.5rem;border-radius:62.4375rem;background:var(--coral);color:#fff;font-size:0.875rem;font-weight:800;display:grid;place-items:center}
.pn-back{align-self:flex-start;display:inline-flex;align-items:center;gap:0.375rem;min-height:2.875rem;padding-inline:0.75rem 1.125rem;border-radius:62.4375rem;
  background:rgba(255,255,255,.78);box-shadow:var(--shadow);backdrop-filter:blur(0.5rem);font-weight:800;font-size:1rem;color:var(--ink)}
.pn-back svg{width:1.125rem;height:1.125rem}
.pn-back:active{transform:scale(.96)}
.pn-group{display:flex;flex-direction:column;gap:0.5rem}
.pn-gt{margin:0;padding-inline:0.625rem;font-size:0.9375rem;font-weight:800;color:var(--hero-ink)}
.pn-card{background:var(--paper);border-radius:var(--r-lg);box-shadow:var(--shadow);overflow:hidden}
.pn-row,.pn-appr{display:flex;align-items:center;gap:0.875rem;width:100%;min-height:4.375rem;padding:0.625rem 1rem;text-align:start;color:var(--ink);transition:background .12s}
.pn-row + .pn-row{box-shadow:inset 0 0.0625rem 0 var(--line)}
.pn-row:active,.pn-appr:active{background:var(--paper-2)}
.pn-ic{flex:none;width:2.875rem;height:2.875rem;border-radius:0.875rem;background:var(--paper-2);display:grid;place-items:center}
.pn-ic .ico{width:1.875rem;height:1.875rem}
.pn-tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:0.125rem}
.pn-tx .t{font-size:1.0625rem;font-weight:800;line-height:1.2}
.pn-tx .s{font-size:0.875rem;font-weight:600;color:var(--ink-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pn-chev{flex:none;display:grid;color:var(--ink-3)}
.pn-chev svg{width:1.25rem;height:1.25rem}
/* the waiting requests, on top of the hub */
.pn-appr{min-height:5.375rem;padding:0.875rem 1.125rem;border-radius:var(--r-lg);background:var(--paper);box-shadow:var(--shadow)}
.pn-appr .pn-ic{width:3.5rem;height:3.5rem;border-radius:1.125rem;background:var(--ok-soft)}
.pn-appr .pn-ic .ico{width:2.25rem;height:2.25rem}
.pn-appr .pn-tx .t{font-size:1.1875rem}
.pn-appr.has{box-shadow:0 0 0 0.1875rem var(--coral),var(--shadow)}
.pn-appr.has .pn-ic{background:var(--bad-soft)}

/* ---- public edition: the first-run wizard (js/firstrun.public.js) and update notes; the home edition never shows them ---- */
.setup{position:fixed;inset:0;z-index:60;overflow:auto;background:var(--paper-2);padding:clamp(0.75rem,2vw,1.5rem)}
.setup-wrap{max-width:46rem;margin:0 auto;display:flex;flex-direction:column;gap:0.875rem}
.setup-strip{display:flex;justify-content:center;gap:0.75rem;flex-wrap:wrap}
.setup-strip span{display:flex;align-items:center;gap:0.375rem;font-size:0.875rem;font-weight:700;color:var(--ink-3)}
.setup-strip span i{width:0.625rem;height:0.625rem;border-radius:50%;background:#EEE5D8}
.setup-strip span.on{color:var(--ink)}.setup-strip span.on i{background:var(--sun)}
.setup-strip span.past{color:var(--ink-2)}.setup-strip span.past i{background:var(--mint)}
.setup-step .h1{color:var(--ink);margin-bottom:0.5rem}
.setup-step .actions{display:flex;gap:0.625rem;flex-wrap:wrap;margin-top:1.25rem}
.setup-step .toggle{box-shadow:none;background:var(--paper-2);margin-bottom:0.5rem}
.setup-kids{display:flex;flex-direction:column;gap:0.5rem;margin:0.75rem 0}
.setup-kids .item{min-height:3.5rem;background:var(--paper-2);box-shadow:none}
.setup-link{margin-top:0.75rem}
.setup-expect{list-style:none;padding:0;margin:0.75rem 0;display:flex;flex-direction:column;gap:0.625rem}
.setup-expect li{display:flex;gap:0.75rem;align-items:flex-start;font-weight:600;line-height:1.4}
.setup-expect li img{width:2rem;height:2rem;flex:0 0 auto}
.pin-entry .pinpad{margin-top:0.75rem}
body.in-setup{overflow:hidden}
body.in-setup #app{visibility:hidden}
.update-banner a{color:inherit;font-weight:800}