/* Chorelist kid app. Built by build/compile2.js from the approved prototypes. Do not edit here. */
:root{--ink:#2B2D42;--mute:#6B6F87;--cream:#FFF7EC;--sand:#F0E6D8;--white:#FFFFFF;
--sun:#F8C537;--sun-e:#BC8B12;--sun-t:#FFE38A;--grass:#6CC24A;--grass-e:#3F8A25;--grape:#8C67D1;--grape-e:#5A3F96;--sky:#3D9BE0;--r:7px;
/* theme defaults (Rainbow); the script sets these per theme */
--h:#8C67D1;--he:#5A3F96;--ht:#B79CEB;--hx:#fff;--pat:none;--patsz:auto;--patrep:repeat;--patpos:0 0;
--a:#EE5A52;--ae:#A8352F;--ax:#fff;--rw:#3D9BE0;--rwe:#23669E;--rwx:#fff;--bf:#F8C537}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:Montserrat,system-ui,sans-serif;background:var(--cream);color:var(--ink);min-height:100vh}
button{font:inherit;color:inherit;cursor:pointer;border:0;background:none;padding:0}
/* Elementor-proof links and buttons */
.app a,.app a:hover,.app a:focus,.app a:visited{color:inherit;text-decoration:none;background-color:transparent}
.app button:hover,.app button:focus,.sw button:focus{text-decoration:none}
.app button:focus-visible,.sw button:focus-visible{outline:3px solid var(--a);outline-offset:2px}
.ico{width:1em;height:1em;flex:none}
.cur{stroke:none}

/* ---------- presentation chrome ---------- */
.chrome{display:flex;align-items:center;justify-content:space-between;gap:16px;max-width:1180px;margin:0 auto;padding:22px max(20px,env(safe-area-inset-left)) 0}
.chrome b{display:block;font-size:18px;font-weight:800}.chrome small{color:var(--mute);font-size:13px;font-weight:500}
.segs{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.seg{display:flex;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:3px;gap:3px}
.seg button{padding:8px 14px;border-radius:5px;font-weight:700;font-size:13px;color:var(--mute)}
.seg button.on{background:var(--grape);color:#fff}
.stage{display:flex;justify-content:center;align-items:flex-start;flex-wrap:wrap;gap:28px;padding:22px 16px 48px}
.device{background:var(--white);border:2px solid var(--sand);box-shadow:0 8px 0 var(--sand);overflow:hidden;position:relative;flex:none}
.device.phone{width:390px;height:820px;border-radius:44px;padding:10px}
.device.tablet{width:min(100%,860px);height:700px;border-radius:30px;padding:12px}

/* ---------- theme switcher beside the phone ---------- */
.sw{width:250px;flex:none;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 5px 0 var(--sand);padding:14px 12px;position:sticky;top:16px;max-height:calc(100vh - 32px);overflow-y:auto}
.swt{display:block;font-size:15px;font-weight:800;margin:0 4px 4px}
.sw h4{margin:12px 4px 6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.swl{display:grid;gap:4px}
.sw [data-sw]{display:flex;align-items:center;gap:10px;padding:6px;border-radius:var(--r);border:2px solid transparent;text-align:left;width:100%}
.sw [data-sw]:hover{background:var(--cream)}
.sw [data-sw].on{border-color:var(--h);background:var(--cream)}
.swp{width:46px;height:40px;border-radius:6px;overflow:hidden;display:flex;flex-direction:column;flex:none;border:2px solid var(--sand)}
.swh{flex:1;background-color:var(--h);background-image:var(--pat);background-size:var(--patsz);background-repeat:var(--patrep);background-position:var(--patpos)}
.sws{display:flex;height:11px}.sws i{flex:1}
.swn b{display:block;font-size:13px;font-weight:800}.swn small{font-size:11px;font-weight:600;color:var(--mute)}

/* ---------- app shell ---------- */
.app{height:100%;overflow-y:auto;overflow-x:hidden;background:var(--cream);border-radius:34px;position:relative;container-type:inline-size;scrollbar-width:none;display:flex;flex-direction:column}
.device.tablet .app{border-radius:20px}
.app::-webkit-scrollbar{display:none}

/* header */
.top{background-color:var(--h);background-image:var(--pat);background-size:var(--patsz);background-repeat:var(--patrep);background-position:var(--patpos);color:var(--hx);padding:20px 18px 22px;padding-top:max(20px,env(safe-area-inset-top));position:relative}
.top .dots{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.top .dots i{position:absolute;color:var(--ht);font-style:normal}
.hi{display:flex;align-items:center;gap:12px;position:relative}
.hexav{width:68px;height:68px;display:block;flex:none;filter:drop-shadow(0 4px 0 var(--he))}
.hi small{display:block;font-size:13px;font-weight:600;opacity:.95}
.hi h1{margin:0;font-size:28px;font-weight:800;letter-spacing:-.01em;line-height:1.1}
.hi .ib{margin-left:auto;width:52px;height:52px;border-radius:50%;background:var(--he);display:grid;place-items:center;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.hi .ib svg{width:26px;height:26px;display:block}
.hi .ib:hover{transform:rotate(-10deg) scale(1.06)}
.hi .ib:active{transform:scale(.92)}
.chips{display:flex;gap:clamp(4px,1.6cqi,8px);margin-top:16px;flex-wrap:nowrap;position:relative}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:clamp(3px,1.2cqi,6px);white-space:nowrap;min-width:0;flex:1 1 auto;background:var(--white);color:var(--ink);font-weight:700;font-size:clamp(11px,3.5cqi,14px);padding:8px clamp(6px,2.4cqi,12px);border-radius:var(--r);box-shadow:0 3px 0 var(--he)}
.chip .ico{font-size:1.25em}
.chip.lv .ico{color:var(--lv)}.chip.fl .ico{color:var(--fl)}
.chip.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes bump{0%{transform:scale(1)}40%{transform:scale(1.18)}100%{transform:scale(1)}}

/* body */
.body{padding:18px 16px 24px;display:grid;gap:14px;flex:1;align-content:start}
.colA,.colB{display:grid;gap:14px;align-content:start;min-width:0}
.card{background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 4px 0 var(--sand)}

/* hex icon helper */
.hx{width:52px;height:52px;flex:none;display:grid;place-items:center;position:relative}
.hx svg.h{position:absolute;inset:0;width:100%;height:100%}
.hx .ico{position:relative;font-size:22px;stroke-width:2.2}

/* reward card: theme colour, turns green when ready */
.rwd{background:var(--rw);color:var(--rwx);border-radius:var(--r);padding:16px;box-shadow:0 5px 0 var(--rwe);position:relative;overflow:hidden}
.rwd-t{display:flex;align-items:center;gap:12px;position:relative}
.rwd-t b{display:block;font-size:17px;font-weight:800;line-height:1.2}
.rwd-t small{display:block;font-size:13px;font-weight:600;opacity:.95;margin-top:2px}
.rwd .prize{margin-left:auto}
.bar{height:16px;border-radius:999px;background:var(--rwe);margin-top:14px;overflow:hidden;position:relative}
.bar i{display:block;height:100%;border-radius:999px;background:var(--bf);transition:width .9s cubic-bezier(.3,1.2,.5,1);min-width:16px}
.kmeta{display:flex;justify-content:space-between;font-size:13px;font-weight:700;margin-top:6px;position:relative}
.kmeta span{display:inline-flex;align-items:center;gap:4px}
.rwd.ready{background:var(--grass);color:#fff;box-shadow:0 5px 0 var(--grass-e)}
.rwd.ready .bar{background:var(--grass-e)}
.rwd.ready .bar i{background:var(--sun)}
.claim{display:block;width:100%;margin-top:12px;background:var(--white);color:var(--grass-e);font-weight:800;font-size:16px;padding:12px;border-radius:var(--r);box-shadow:0 4px 0 var(--grass-e)}
.claim:active{transform:translateY(3px);box-shadow:0 1px 0 var(--grass-e)}

/* big goal strip */
.goal{display:flex;align-items:center;gap:12px;padding:12px 14px;width:100%;text-align:left}
.goal:active{transform:translateY(2px);box-shadow:0 2px 0 var(--sand)}
.goal svg.jar{width:40px;height:50px;flex:none}
.goal b{display:block;font-size:15px;font-weight:800}
.goal small{display:block;font-size:13px;color:var(--mute);font-weight:600;margin-top:2px}
.goal .mini{height:8px;border-radius:999px;background:var(--sand);margin-top:7px;overflow:hidden}
.goal .mini i{display:block;height:100%;background:var(--jf);border-radius:999px}
.goal>span{flex:1;min-width:0}
.goal .chev{flex:none;font-size:20px;color:var(--mute)}

/* week: always yellow */
.week{padding:12px 10px 10px}
.week h3{margin:0 0 8px 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.wd{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;text-align:center}
.wd div{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--mute)}
.wd div.td{color:var(--ink)}
.wd .hx{width:40px;height:40px}
.wd .hx .ico{font-size:22px}
.key{display:flex;gap:14px;justify-content:center;margin-top:10px;padding-top:10px;border-top:2px solid #FBF3E6;font-size:12px;font-weight:700;color:var(--mute);flex-wrap:wrap}
.key>span{display:inline-flex;align-items:center;gap:6px}
.key .hx{width:24px;height:24px}.key .hx .ico{font-size:14px}

/* slot tabs: three shades of the theme */
.tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tab{background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:9px 4px 8px;display:flex;flex-direction:column;align-items:center;gap:3px;box-shadow:0 4px 0 var(--sand);font-weight:800;font-size:14px}
.tab .ico{font-size:22px;color:var(--i)}
.tab small{font-size:12px;font-weight:700;color:var(--mute)}
.tab.on{background:var(--c);border-color:var(--c);color:var(--x);box-shadow:0 4px 0 var(--e)}
.tab.on .ico,.tab.on small{color:var(--x)}
.tab:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand)}
.tab.on:active{box-shadow:0 1px 0 var(--e)}

/* chores: tiles in theme shades, green once ticked */
.rows{display:grid;gap:10px}
.kr{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 12px 10px 10px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 4px 0 var(--sand);transition:background-color .25s,border-color .25s}
.kr:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand)}
.kr .tile{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;flex:none;background:var(--c);color:var(--x);box-shadow:0 3px 0 var(--e);font-size:24px}
.kr .tile .ico{stroke-width:2}
.kr .t{flex:1;min-width:0}
.kr b{display:block;font-size:16px;font-weight:800;line-height:1.2}
.kr small{display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:700;color:var(--mute);margin-top:3px}
.kr .chk{width:44px;height:44px;flex:none}
.kr .chk .ico{font-size:20px;stroke-width:3}
.kr.ok{background:#F1FAEC;border-color:var(--grass);box-shadow:0 4px 0 var(--grass-e)}
.kr.ok b,.kr.ok small{color:var(--grass-e)}
.kr.pop .chk{animation:pop .5s cubic-bezier(.3,1.7,.5,1)}
@keyframes pop{0%{transform:scale(.4)}100%{transform:scale(1)}}
.done{display:flex;align-items:center;gap:10px;justify-content:center;padding:14px;border-radius:var(--r);background:var(--dn);color:var(--dnx);font-weight:800;font-size:15px;box-shadow:0 4px 0 var(--dne);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.done .ico{font-size:22px}

/* nav */
.nav{position:sticky;bottom:0;margin-top:auto;background:var(--white);border-top:2px solid var(--sand);display:grid;grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:1fr;padding:8px 12px;padding-bottom:max(8px,env(safe-area-inset-bottom));gap:8px;z-index:3}
.nav button{display:flex;flex-direction:column;align-items:center;gap:3px;font-size:12px;font-weight:700;color:var(--mute);padding:6px 0;border-radius:var(--r)}
.nav button span{display:grid;place-items:center;width:46px;height:32px;border-radius:var(--r);font-size:22px}
.nav button.on{color:var(--ae)}
.nav button.on span{background:var(--a);color:var(--ax);box-shadow:0 3px 0 var(--ae)}

/* toast, flying stars, confetti */
.toast{position:absolute;left:16px;right:16px;padding:12px 14px;border-radius:var(--r);font-size:14px;font-weight:700;display:flex;gap:8px;align-items:center;z-index:6;animation:tin .3s ease-out;background:var(--a);color:var(--ax);box-shadow:0 4px 0 var(--ae)}
@keyframes tin{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.fly{position:absolute;z-index:7;pointer-events:none;font-size:24px}
canvas.cf{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:8}

/* tablet: two columns */
@container (min-width:640px){
  .top{padding:24px 28px 26px}
  .body{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr);padding:22px 28px 28px;gap:20px}
  .hexav{width:80px;height:80px}
  .hi h1{font-size:32px}
  .hi .ib{width:58px;height:58px}.hi .ib svg{width:28px;height:28px}
  .nav{grid-auto-columns:120px;justify-content:center}
  .toast{left:auto;right:28px;width:340px}
}

/* ---------- in-app theme picker sheet ---------- */
.sheetwrap{position:absolute;inset:10px;border-radius:34px;overflow:hidden;z-index:20;pointer-events:none}
.device.tablet .sheetwrap{inset:12px;border-radius:20px}
.sheetwrap.in{pointer-events:auto}
.scrim{position:absolute;inset:0;background:rgba(43,45,66,.14);opacity:0;transition:opacity .25s}
.sheetwrap.in .scrim{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;max-height:88%;background:var(--cream);border-radius:20px 20px 0 0;display:flex;flex-direction:column;transform:translateY(100%);transition:transform .32s cubic-bezier(.2,1.1,.4,1);container-type:inline-size}
.sheetwrap.in .sheet{transform:none}
.grab{display:block;width:44px;height:5px;border-radius:999px;background:var(--sand);margin:10px auto 0}
.sh-h{display:flex;align-items:flex-start;gap:12px;padding:10px 18px 12px}
.sh-h b{display:block;font-size:20px;font-weight:800}
.sh-h small{display:block;font-size:13px;font-weight:600;color:var(--mute);margin-top:2px}
.sx{margin-left:auto;width:40px;height:40px;border-radius:50%;background:var(--white);border:2px solid var(--sand);display:grid;place-items:center;font-size:18px;color:var(--ink);flex:none}
.sh-b{overflow-y:auto;padding:0 16px 8px;scrollbar-width:none}
.sh-b::-webkit-scrollbar{display:none}
.sh-b h4{margin:6px 2px 10px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.shn{margin:-4px 2px 10px;font-size:13px;color:var(--mute);font-weight:600}
.tgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}
.tc{display:flex;flex-direction:column;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 4px 0 var(--sand);overflow:hidden;text-align:left;transition:border-color .2s}
.tc:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand)}
.tc.on{border-color:var(--h);box-shadow:0 4px 0 var(--he)}
.tc.pop{animation:pop .4s cubic-bezier(.3,1.6,.5,1)}
.tp{position:relative;height:78px;background-color:var(--h);background-image:var(--pat);background-size:var(--patsz);background-repeat:var(--patrep);background-position:var(--patpos);display:flex;align-items:center;gap:8px;padding:10px}
.tpi .hexav{width:40px;height:40px;filter:drop-shadow(0 2px 0 var(--he))}
.tpl{display:grid;gap:6px;flex:1}
.tpl i{display:block;height:7px;border-radius:999px;background:var(--hx);width:70%}
.tpl i+i{width:45%;opacity:.8}
.tpb{position:absolute;right:10px;top:10px;width:22px;height:22px;border-radius:50%;background:var(--rw);border:3px solid #fff}
.tn{display:flex;flex-direction:column;gap:5px;padding:9px 10px 10px}
.tn b{font-size:14px;font-weight:800}
.tg{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:800;padding:3px 8px;border-radius:5px;background:var(--cream);color:var(--mute)}
.tg .ico{font-size:12px}
.tg.on{background:var(--grass);color:#fff}
.tg.lock{background:var(--ink);color:#fff}
.tg.wish{background:var(--a);color:var(--ax)}
.tg.soon{background:var(--sun-t);color:#7A5A06}
.sh-f{padding:10px 16px;padding-bottom:max(12px,env(safe-area-inset-bottom));border-top:2px solid var(--sand);background:var(--white)}
.sdone{width:100%;padding:13px;border-radius:var(--r);background:var(--a);color:var(--ax);font-weight:800;font-size:16px;box-shadow:0 4px 0 var(--ae)}
.sdone:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ae)}
.stoast{position:absolute;left:16px;right:16px;bottom:84px;background:var(--a);color:var(--ax);font-weight:700;font-size:14px;padding:12px 14px;border-radius:var(--r);box-shadow:0 4px 0 var(--ae);display:flex;gap:8px;align-items:center;animation:tin .3s ease-out}
@container (min-width:560px){.tgrid{grid-template-columns:repeat(4,minmax(0,1fr))}.sheet .sh-h,.sheet .sh-b,.sheet .sh-f{padding-left:24px;padding-right:24px}}

/* ---------- phones: app fills the screen, switcher becomes a strip ---------- */
@media (max-width:600px){
  .chrome{padding:8px 12px;justify-content:center;position:sticky;top:0;z-index:5;background:var(--cream)}
  .chrome>div:first-child,.seg.dv{display:none}
  .stage{padding:0;gap:0;flex-direction:column;flex-wrap:nowrap;align-items:stretch}
  .sw{order:-1;width:auto;position:static;max-height:none;border:0;border-radius:0;box-shadow:none;background:var(--cream);padding:0 12px 10px;overflow-x:auto;overflow-y:hidden;display:flex;gap:6px;scrollbar-width:none}
  .sw::-webkit-scrollbar{display:none}
  .swt,.sw h4{display:none}
  .swl{display:flex;gap:6px}
  .sw [data-sw]{flex-direction:column;gap:4px;width:64px;padding:4px;background:var(--white)}
  .sw [data-sw].on{background:var(--white)}
  .sw .swp{width:100%;height:34px}
  .sw .swn{text-align:center}.sw .swn b{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.sw .swn small{display:none}
  .device,.device.phone,.device.tablet{width:100%;height:calc(100dvh - 148px);border:0;border-radius:0;padding:0;box-shadow:none}
  .app{border-radius:0}
  .sheetwrap,.device.tablet .sheetwrap{inset:0;border-radius:0}
}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* ---------- rewards screen ---------- */
.bigg{padding:16px}
.bigg.bump2{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
.lbl{display:inline-block;font-size:11px;letter-spacing:.12em;text-transform:uppercase;font-weight:800;color:var(--hx);background:var(--h);padding:4px 9px;border-radius:5px}
.bg-top{display:flex;align-items:center;gap:16px;margin-top:12px}
.jar.big{width:96px;height:120px;flex:none}
.bg-r{display:grid;gap:8px;min-width:0}
.gt{display:flex;align-items:center;gap:8px}
.gt .hx{width:36px;height:36px}.gt .hx .ico{font-size:17px}
.gt b{font-size:18px;font-weight:800;line-height:1.15}
.gnum{display:flex;align-items:center;gap:6px;font-size:15px;font-weight:700;color:var(--mute)}
.gnum span{font-size:30px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.gnum .ico{font-size:20px}
.pill{justify-self:start;display:inline-flex;align-items:center;gap:6px;background:var(--cream);border:2px solid var(--sand);border-radius:var(--r);padding:5px 9px;font-size:13px;font-weight:700}
.pill .ico{color:var(--lv);font-size:16px}
.gbar{height:14px;border-radius:999px;background:var(--sand);margin-top:14px;overflow:hidden}
.gbar i{display:block;height:100%;border-radius:999px;background:var(--jf);transition:width .8s cubic-bezier(.3,1.2,.5,1);min-width:14px}
.bg-msg{margin:12px 0 0;font-size:14px;line-height:1.5;font-weight:600;color:var(--mute)}
.bg-save{display:flex;align-items:center;gap:8px;margin-top:14px;flex-wrap:wrap}
.bg-save>span{flex-basis:100%;font-size:13px;font-weight:800}
.bg-save button{display:inline-flex;align-items:center;gap:5px;flex:1;justify-content:center;min-width:0;background:var(--a);color:var(--ax);font-weight:800;font-size:15px;padding:10px 8px;border-radius:var(--r);box-shadow:0 4px 0 var(--ae)}
.bg-save button .ico{font-size:17px}
.bg-save button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ae)}
.bg-save button:disabled{background:var(--sand);color:var(--mute);box-shadow:0 4px 0 #E4D7C4;cursor:not-allowed}
.bg-save button:disabled .cur{opacity:.5}
.bigg .hint{display:block;margin-top:10px;font-size:12px;font-weight:600;color:var(--mute)}
.rhead{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin:2px 2px 0}
.rhead h2{margin:0;font-size:20px;font-weight:800}
.rhead span{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;color:var(--mute)}
.rgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.rc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 4px 0 var(--sand);padding:14px 10px 12px}
.rc.ready{border-color:var(--grass);box-shadow:0 4px 0 var(--grass-e);background:#F1FAEC}
.rtile{width:56px;height:56px;border-radius:var(--r);display:grid;place-items:center;background:var(--c);color:var(--x);box-shadow:0 3px 0 var(--e);font-size:28px;margin:4px 0 4px}
.rtile .ico{stroke-width:2}
.rc b{font-size:14px;font-weight:800;line-height:1.25;min-height:2.5em;display:flex;align-items:center}
.rbar{width:100%;height:10px;border-radius:999px;background:var(--sand);overflow:hidden}
.rbar i{display:block;height:100%;border-radius:999px;background:var(--sun);min-width:10px}
.rc.ready .rbar{background:#D6EFC9}
.rc small{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--mute)}
.rclaim,.rpin,.rmore{width:100%;margin-top:4px;padding:9px 6px;border-radius:var(--r);font-weight:800;font-size:14px}
.rclaim{background:var(--grass);color:#fff;box-shadow:0 4px 0 var(--grass-e)}
.rclaim:active{transform:translateY(3px);box-shadow:0 1px 0 var(--grass-e)}
.rpin{background:var(--white);border:2px solid var(--sand);color:var(--ink);padding:7px 6px;box-shadow:0 3px 0 var(--sand)}
.rpin:active{transform:translateY(2px);box-shadow:0 1px 0 var(--sand)}
.rmore{display:block;background:var(--cream);color:var(--mute);font-size:13px}
.rpinned{position:absolute;top:-2px;left:50%;transform:translate(-50%,-50%);display:inline-flex;align-items:center;gap:4px;white-space:nowrap;background:var(--a);color:var(--ax);font-size:11px;font-weight:800;padding:3px 8px;border-radius:5px}
.rpinned .ico{font-size:12px}
.body.rw .colB{gap:12px}
@container (min-width:640px){
  .body.rw{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .rgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
}

/* reward claimed ticket */
.partywrap{position:absolute;inset:10px;border-radius:34px;overflow:hidden;z-index:30;display:grid;place-items:center;pointer-events:none}
.device.tablet .partywrap{inset:12px;border-radius:20px}
.partywrap.in{pointer-events:auto}
.pscrim{position:absolute;inset:0;background:var(--cream);opacity:0;transition:opacity .25s}
.partywrap.in .pscrim{opacity:.94}
.party{position:relative;z-index:2;width:min(330px,calc(100% - 40px));display:flex;flex-direction:column;align-items:center;text-align:center;transform:scale(.85);opacity:0;transition:transform .35s cubic-bezier(.3,1.5,.5,1),opacity .2s}
.partywrap.in .party{transform:none;opacity:1}
.partywrap canvas.cf{z-index:1}
.plbl{font-size:12px;letter-spacing:.14em;text-transform:uppercase;font-weight:800;color:var(--he);margin-bottom:14px}
.ticket{width:100%;border-radius:var(--r);overflow:hidden;box-shadow:0 6px 0 var(--he);transform:rotate(-2deg)}
.tk-top{background-color:var(--h);background-image:var(--pat);background-size:var(--patsz);background-repeat:var(--patrep);background-position:var(--patpos);color:var(--hx);padding:22px 16px 18px;display:flex;flex-direction:column;align-items:center;gap:10px}
.tk-top .hx{width:76px;height:76px}.tk-top .hx .ico{font-size:34px}
.tk-top b{font-size:22px;font-weight:800;line-height:1.2}
.tk-cut{height:16px;background:var(--white);position:relative;border-top:3px dashed var(--h)}
.tk-cut::before,.tk-cut::after{content:"";position:absolute;top:-10px;width:20px;height:20px;border-radius:50%;background:var(--cream)}
.tk-cut::before{left:-10px}.tk-cut::after{right:-10px}
.tk-bot{background:var(--white);padding:0 16px 16px;font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;gap:6px;color:var(--ink)}
.tk-bot .ico{color:var(--lv)}
.party h2{margin:24px 0 4px;font-size:26px;font-weight:800}
.party p{margin:0 0 18px;font-size:14px;font-weight:600;color:var(--mute);line-height:1.5}
.pyay{width:100%;padding:14px;border-radius:var(--r);background:var(--a);color:var(--ax);font-weight:800;font-size:17px;box-shadow:0 4px 0 var(--ae)}
.pyay:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ae)}
@media (max-width:600px){.partywrap,.device.tablet .partywrap{inset:0;border-radius:0}}

/* ---------- badges / ranks ---------- */
.medal{position:relative;display:grid;place-items:center;width:78px;height:78px;flex:none}
.medal>svg{position:absolute;inset:0;width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(43,45,66,.12))}
.medal .mi{position:relative;display:grid;font-size:32px}
.medal .mi .ico{stroke-width:2.2}
.medal.locked>svg{filter:none}
.medal .gem{position:absolute;top:-4px;right:-2px;width:24px;height:24px;border-radius:50%;background:#F8C537;box-shadow:0 2px 0 #BC8B12;display:grid;place-items:center;font-size:14px}
.medal.sm{width:52px;height:52px}.medal.sm .mi{font-size:22px}.medal.sm .gem{width:18px;height:18px;font-size:10px;top:-4px;right:-4px}
.medal.xs{width:40px;height:40px}.medal.xs .mi{font-size:17px}.medal.xs .gem{display:none}
.medal.md{width:60px;height:60px}.medal.md .mi{font-size:26px}.medal.md .gem{width:20px;height:20px;font-size:11px}
.ladder{padding:16px}
.lad-d{margin:8px 0 14px;font-size:14px;font-weight:600;color:var(--mute)}
.rungs{display:flex;align-items:flex-start;justify-content:space-between}
.rung{display:flex;flex-direction:column;align-items:center;gap:5px;text-align:center;min-width:0;flex:none;width:68px}
.rung b{font-size:12px;font-weight:800;line-height:1.2}
.rung small{font-size:11px;font-weight:700;color:var(--mute)}
.lk{flex:1;height:4px;border-radius:999px;background:var(--sand);margin-top:24px;min-width:6px}
.bgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.bc{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 4px 0 var(--sand);padding:16px 10px 12px}
.bc:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand)}
.bc.max{border-color:#F8C537;box-shadow:0 4px 0 #BC8B12}
.tname{margin-top:-14px;position:relative;font-size:11px;font-weight:800;padding:3px 9px;border-radius:5px;letter-spacing:.02em}
.tname.none{background:var(--cream);color:var(--mute);border:2px solid var(--sand);padding:1px 8px}
.bc b{font-size:14px;font-weight:800;line-height:1.25;margin-top:2px}
.pips{display:flex;gap:4px;width:78%}
.pips i{flex:1;height:7px;border-radius:999px;background:var(--sand)}
.bc small{font-size:12px;font-weight:700;color:var(--mute)}
.bnext{font-size:11px;font-weight:800;color:var(--ink);background:var(--cream);padding:3px 8px;border-radius:5px}
.bnext.top{background:#F8C537;color:var(--ink)}
.body.bd .colB{gap:12px}
@container (min-width:640px){
  .body.bd{grid-template-columns:minmax(0,1fr) minmax(0,1.3fr)}
  .bgrid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .rung{width:62px}
}
/* badge detail sheet */
.bd-h{display:flex;align-items:center;gap:12px}
.lvs{display:grid;gap:8px;margin-bottom:12px}
.lv{display:flex;align-items:center;gap:12px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:10px 12px}
.lv.got{border-color:var(--grass);background:#F1FAEC}
.lv.next{border-color:var(--h);box-shadow:0 3px 0 var(--he)}
.lv-t{flex:1;min-width:0}
.lv-t b{display:block;font-size:15px;font-weight:800}
.lv-t small{font-size:12px;font-weight:700;color:var(--mute)}
.lvbar{height:8px;border-radius:999px;background:var(--sand);margin-top:6px;overflow:hidden}
.lvbar i{display:block;height:100%;border-radius:999px;background:var(--h);min-width:8px}
.lv-s{flex:none;display:grid;place-items:center;color:#C9BBA6;font-size:20px}
.lv-s .hx{width:34px;height:34px}.lv-s .hx .ico{font-size:15px}
.lv-s em{font-style:normal;font-size:12px;font-weight:800;color:var(--ink);background:var(--cream);padding:4px 8px;border-radius:5px}

/* ---------- device setup + first sign-in ---------- */
.su{flex:1;display:flex;flex-direction:column;align-items:center;padding:28px 20px 24px;padding-top:max(28px,env(safe-area-inset-top));text-align:center}
.su-top{width:100%;display:flex;justify-content:center;margin:6px 0 18px}
.su-logo{width:190px;height:auto;display:block}
.su-top.sm .su-logo{width:130px}
.su-card{width:100%;max-width:400px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 5px 0 var(--sand);padding:22px 18px;text-align:left}
.su h1,.su-h{margin:0 0 6px;font-size:24px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.su-card p,.su-p{margin:0 0 16px;font-size:14px;font-weight:600;color:var(--mute);line-height:1.5}
.fld{display:block;font-size:13px;font-weight:800;margin-bottom:12px}
.fld input{display:block;width:100%;margin-top:6px;font:600 16px Montserrat,sans-serif;color:var(--ink);background:var(--cream);border:2px solid var(--sand);border-radius:var(--r);padding:12px 12px}
.fld input:focus{outline:none;border-color:var(--h)}
.su-go{display:block;width:100%;padding:14px;border-radius:var(--r);background:var(--a);color:var(--ax);font-weight:800;font-size:17px;box-shadow:0 4px 0 var(--ae)}
.su-go:active{transform:translateY(3px);box-shadow:0 1px 0 var(--ae)}
.su-go:disabled{background:var(--sand);color:var(--mute);box-shadow:0 4px 0 #E4D7C4;cursor:not-allowed}
.su-note{display:flex;gap:6px;align-items:flex-start;margin-top:12px;font-size:12px;font-weight:600;color:var(--mute);line-height:1.45}
.su-note .ico{flex:none;margin-top:1px;color:var(--lv)}
.su-link{margin-top:14px;font-weight:800;font-size:14px;color:var(--mute);padding:8px 12px}
.su-ghost{padding:12px 26px;border-radius:var(--r);background:var(--white);border:2px solid var(--sand);font-weight:800;font-size:15px;box-shadow:0 4px 0 var(--sand)}
.su-ghost:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand)}
.su-kids{width:100%;max-width:400px;display:grid;gap:10px;margin-top:4px}
.su-kid{display:flex;align-items:center;gap:14px;width:100%;text-align:left;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);box-shadow:0 4px 0 var(--sand);padding:10px 14px 10px 10px}
.su-kid:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand)}
.su-kid .hexav{width:58px;height:58px;filter:drop-shadow(0 3px 0 rgba(43,45,66,.15))}
.su-kid span{flex:1}.su-kid b{display:block;font-size:18px;font-weight:800}.su-kid small{font-size:13px;font-weight:600;color:var(--mute)}
.su-kid>.ico{font-size:22px;color:var(--mute)}
.su-back{align-self:flex-start;display:inline-flex;align-items:center;gap:4px;font-weight:800;font-size:14px;color:var(--mute);padding:6px 4px}
.su-back .ico{transform:rotate(180deg)}
.pinbox{display:flex;flex-direction:column;align-items:center;margin-top:8px}
.pinbox .hexav{width:84px;height:84px;filter:drop-shadow(0 4px 0 rgba(43,45,66,.15));margin-bottom:12px}
.pinbox p{margin:0;font-size:14px;font-weight:600;color:var(--mute);max-width:30ch;line-height:1.5}
.pdots{display:flex;gap:12px;margin:20px 0 18px}
.pdots i{width:22px;height:25px;background:var(--sand);clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);transition:background-color .15s,transform .15s}
.pdots i.f{background:var(--h);transform:scale(1.12)}
.pdots.shake{animation:shake .4s}
@keyframes shake{20%,60%{transform:translateX(-8px)}40%,80%{transform:translateX(8px)}}
.pad{display:grid;grid-template-columns:repeat(3,72px);gap:12px}
.pad button{height:64px;border-radius:var(--r);background:var(--white);border:2px solid var(--sand);box-shadow:0 4px 0 var(--sand);font-size:24px;font-weight:800}
.pad button:active{transform:translateY(3px);box-shadow:0 1px 0 var(--sand);background:var(--cream)}
.pad button.sm{font-size:13px;color:var(--mute)}
.phint{margin-top:16px;font-size:12px;font-weight:700;color:var(--mute);background:var(--white);border:2px dashed var(--sand);border-radius:var(--r);padding:5px 10px}
.perr{margin-top:16px;font-size:14px;font-weight:800;color:var(--tomato,#EE5A52)}

/* first sign-in steps */
.kob{flex:1;display:flex;flex-direction:column;padding:16px 18px 20px;padding-top:max(16px,env(safe-area-inset-top));padding-bottom:max(20px,env(safe-area-inset-bottom))}
.kob-top{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:36px}
.kdots{display:flex;gap:5px}
.kdots i{width:10px;height:10px;border-radius:999px;background:var(--sand);transition:width .25s,background-color .25s}
.kdots i.past{background:var(--ht)}
.kdots i.on{width:26px;background:var(--h)}
.su-skip{font-weight:800;font-size:14px;color:var(--mute);padding:8px 4px}
.kob-mid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:6px;padding:14px 0}
.kob-mid h1{margin:6px 0 2px;font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.01em}
.kob-mid>p{margin:0 0 8px;font-size:15px;font-weight:600;color:var(--mute);line-height:1.5;max-width:32ch}
.kob-say{margin:10px 0 0;font-size:14px;font-weight:700;color:var(--mute)}
.kob-foot{display:flex;flex-direction:column;align-items:center;gap:2px;position:sticky;bottom:0;background:var(--cream);padding:10px 0 2px;margin:0 -2px;z-index:2}
.kob-foot .su-link{margin-top:6px}
.wave .hexav{width:150px;height:150px;filter:drop-shadow(0 6px 0 rgba(43,45,66,.15));animation:wave 1.6s ease-in-out infinite;transform-origin:50% 90%}
@keyframes wave{0%,100%{transform:rotate(0)}25%{transform:rotate(-8deg)}50%{transform:rotate(6deg)}75%{transform:rotate(-4deg)}}
.bigav .hexav{width:120px;height:120px;filter:drop-shadow(0 5px 0 rgba(43,45,66,.15))}
.k-avatar{justify-content:flex-start}
.avg{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:340px;margin-top:12px}
.avg button{position:relative;aspect-ratio:1;background:none;border:0;display:grid;place-items:center;padding:2px;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.avg button .hexav{width:100%;height:100%;filter:drop-shadow(0 4px 0 rgba(43,45,66,.14))}
.avg button:active{transform:scale(.94)}
.avg button.on{transform:scale(1.08)}
.avg button .sel{position:absolute;right:-2px;bottom:0;width:30px;height:30px;display:none}
.avg button.on .sel{display:grid}
.avg button .sel .hx{width:30px;height:30px}.avg button .sel .hx .ico{font-size:14px;stroke-width:3}
.k-theme{justify-content:flex-start}
.thg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;width:100%;max-width:380px;margin-top:6px;text-align:left}
.thg button{display:flex;align-items:center;gap:10px;text-align:left;padding:8px;border-radius:var(--r);background:var(--white);border:2px solid var(--sand)}
.thg button.on{border-color:var(--h);box-shadow:0 3px 0 var(--he)}
.thg button.th-lock{background:var(--cream)}
.thg button.th-lock .swp{opacity:.7}
.thg button span:last-child{min-width:0}
.thg b{display:block;font-size:13px;font-weight:800}
.thg small{display:inline-flex;align-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--mute)}
.kcount{display:inline-flex;align-items:center;gap:8px;font-size:30px;font-weight:800;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:6px 18px;box-shadow:0 4px 0 var(--sand);margin:6px 0 10px}
.kcount .ico{font-size:30px}
.kcount.bump{animation:bump .5s cubic-bezier(.3,1.6,.5,1)}
.k-stars .kr{max-width:340px}
.rwd.demo{width:100%;max-width:340px;text-align:left;margin:6px 0 14px}
.rwd.demo .bar i{transition:width 1s cubic-bezier(.3,1.2,.5,1)}
.meds{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%;max-width:360px;margin:8px 0 4px}
.meds div{display:flex;flex-direction:column;align-items:center;gap:6px}
.meds .medal{width:66px;height:66px}.meds .medal .mi{font-size:26px}
.meds b{font-size:12px;font-weight:800}
.hs{width:200px;background:var(--white);border:2px solid var(--sand);border-radius:28px;padding:18px 16px 26px;box-shadow:0 5px 0 var(--sand);margin-bottom:10px}
.hs-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.hs-grid i{aspect-ratio:1;border-radius:10px;background:var(--sand)}
.hs-grid i:nth-child(3n){background:#F6EEE2}
.hs-grid .me{aspect-ratio:1;display:block;border-radius:10px;box-shadow:0 0 0 3px var(--h);animation:pulse 1.4s ease-in-out infinite}
.appic{width:100%;height:100%;display:block;filter:drop-shadow(0 3px 0 rgba(43,45,66,.18))}
@keyframes pulse{0%,100%{transform:scale(1)}50%{transform:scale(1.18)}}
.how{list-style:none;margin:6px 0 0;padding:0;display:grid;gap:8px;width:100%;max-width:330px;text-align:left}
.how li{display:flex;align-items:center;gap:10px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:10px 12px;font-size:14px;font-weight:600}
.how li .hic{width:34px;height:34px;flex:none;border-radius:var(--r);background:var(--a);color:var(--ax);display:grid;place-items:center;font-size:18px}
@container (min-width:640px){.thg{grid-template-columns:repeat(3,minmax(0,1fr));max-width:560px}.avg{grid-template-columns:repeat(6,1fr);max-width:520px}.kob{padding:24px 40px 28px}.kob-foot .su-go{max-width:420px}}
@media (max-width:600px){#flow button{padding:8px 10px}}

.su.swap,.kob.swap .kob-mid{animation:kswap .26s ease-out}
@keyframes kswap{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}

/* ---------- gifts ---------- */
.giftbar{display:flex;align-items:center;gap:12px;width:100%;text-align:left;background:var(--a);color:var(--ax);border-radius:var(--r);padding:10px 14px 10px 10px;box-shadow:0 5px 0 var(--ae);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.giftbar:active{transform:translateY(3px);box-shadow:0 2px 0 var(--ae)}
.gb-ic .hx{width:46px;height:46px;animation:wob 1.8s ease-in-out infinite}
.gb-t{flex:1;min-width:0}.gb-t b{display:block;font-size:16px;font-weight:800}.gb-t small{font-size:13px;font-weight:600;opacity:.95}
.giftbar>.ico{font-size:22px}
@keyframes wob{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-12deg)}80%{transform:rotate(10deg)}90%{transform:rotate(-6deg)}}
.gfts{display:grid;gap:8px;margin-bottom:6px}
.gft{display:flex;align-items:center;gap:10px;background:var(--white);border:2px dashed var(--a);border-radius:var(--r);padding:10px}
.gft .hx{width:44px;height:44px}.gft .hx .ico{font-size:20px}
.gft>div{flex:1;min-width:0}.gft b{display:block;font-size:14px;font-weight:800}.gft small{font-size:12px;font-weight:600;color:var(--mute)}
.gfb{background:var(--a);color:var(--ax);font-weight:800;font-size:14px;padding:9px 14px;border-radius:var(--r);box-shadow:0 3px 0 var(--ae)}
.rhead span .ico{color:var(--a)}
.kr.pass .tile{opacity:.85}
.kr.pass small .ico{color:var(--grass-e)}
/* gift reveal */
.gbox{display:grid;place-items:center;margin:4px 0 6px}
.gbox .hx{width:120px;height:120px}.gbox .hx .ico{font-size:52px}
.gwrap.in .gbox .hx{animation:shake .7s ease-in-out}
.gwrap.opened .gbox .hx{animation:popbig .45s cubic-bezier(.3,1.6,.5,1) forwards}
@keyframes shake{0%,100%{transform:rotate(0)}15%{transform:rotate(-10deg) scale(1.05)}30%{transform:rotate(9deg)}45%{transform:rotate(-7deg) scale(1.08)}60%{transform:rotate(6deg)}75%{transform:rotate(-3deg)}}
@keyframes popbig{0%{transform:scale(1)}50%{transform:scale(1.25)}100%{transform:scale(.7)}}
.greveal{display:flex;flex-direction:column;align-items:center;width:100%;opacity:0;transform:translateY(14px);transition:opacity .35s,transform .35s}
.gwrap.opened .greveal{opacity:1;transform:none}
.greveal h2{margin:4px 0 4px;font-size:26px;font-weight:800}
.greveal p{margin:0 0 12px;font-size:15px;font-weight:600;color:var(--mute);line-height:1.5}
.gchore{display:flex;align-items:center;gap:10px;width:100%;background:var(--white);border:2px solid var(--grass);box-shadow:0 4px 0 var(--grass-e);border-radius:var(--r);padding:8px 12px 8px 8px;text-align:left;margin-bottom:12px}
.gchore .tile{width:44px;height:44px;border-radius:var(--r);display:grid;place-items:center;background:var(--t0);color:var(--t0x);box-shadow:0 3px 0 var(--t0e);font-size:22px;flex:none}
.gchore b{display:block;font-size:15px;font-weight:800}.gchore small{display:inline-flex;align-items:center;gap:4px;font-size:12px;font-weight:700;color:var(--mute)}
.gnote{position:relative;width:100%;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:10px 12px;font-size:14px;font-weight:700;margin-bottom:14px;text-align:left}
.gnote small{display:block;margin-top:4px;font-size:12px;font-weight:700;color:var(--mute)}
.gnote::before{content:"";position:absolute;top:-9px;left:24px;width:14px;height:14px;background:var(--white);border-left:2px solid var(--sand);border-top:2px solid var(--sand);transform:rotate(45deg)}
.pbtns2{display:flex;flex-direction:column;gap:6px;width:100%}
.glater{font-weight:800;font-size:15px;color:var(--mute);padding:10px}
/* ---------- loading star ---------- */
.cl-load{--s:96px;position:relative;width:var(--s);height:var(--s);display:inline-grid;place-items:center;flex:none;--c1:#EE5A52;--c2:#F7922B;--c3:#F8C537;--c4:#6CC24A;--c5:#4CC3B5;--c6:#3D9BE0;--c7:#8C67D1;--c8:#F2669D}
.cl-load .clr{position:absolute;inset:0;border-radius:50%;opacity:0;animation:cl-radar 3s cubic-bezier(.2,.6,.4,1) infinite,cl-bg 4s steps(1) infinite}
.cl-load .clr:nth-child(2){animation-delay:1s,0s}.cl-load .clr:nth-child(3){animation-delay:2s,0s}
.cl-load svg{position:relative;width:58%;height:58%;overflow:visible;animation:cl-pulse 1s ease-in-out infinite}
.cl-load path{fill:none;stroke-width:2.2;stroke-linejoin:round;stroke-linecap:round;animation:cl-stroke 4s steps(1) infinite}
@keyframes cl-pulse{0%,100%{transform:scale(.9)}50%{transform:scale(1.08)}}
@keyframes cl-radar{0%{transform:scale(.5);opacity:.34}100%{transform:scale(1.15);opacity:0}}
@keyframes cl-stroke{0%{stroke:var(--c1)}12.5%{stroke:var(--c2)}25%{stroke:var(--c3)}37.5%{stroke:var(--c4)}50%{stroke:var(--c5)}62.5%{stroke:var(--c6)}75%{stroke:var(--c7)}87.5%{stroke:var(--c8)}}
@keyframes cl-bg{0%{background:var(--c1)}12.5%{background:var(--c2)}25%{background:var(--c3)}37.5%{background:var(--c4)}50%{background:var(--c5)}62.5%{background:var(--c6)}75%{background:var(--c7)}87.5%{background:var(--c8)}}
.cl-load.xs{--s:18px}.cl-load.xs svg{width:100%;height:100%}.cl-load.xs path{stroke:currentColor;stroke-width:2.8;animation:none}
@media (prefers-reduced-motion:reduce){.cl-load .clr{display:none}.cl-load svg{animation:none}.cl-load path{animation-duration:8s}}
.cl-over{position:absolute;inset:10px;z-index:60;border-radius:12px;background:var(--cream);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;opacity:0;pointer-events:none;transition:opacity .2s ease}
.cl-over.on{opacity:1;pointer-events:auto}
.cl-over p{margin:0;font-size:14px;font-weight:700;color:var(--mute)}
.device.phone .cl-over{border-radius:34px}.device.tablet .cl-over{inset:12px;border-radius:20px}
.slowt{display:flex;gap:10px;align-items:flex-start;background:var(--cream);border-radius:var(--r);padding:10px;margin-top:10px}
.slowt b{display:block;font-size:13px;font-weight:800}.slowt small{display:block;font-size:11px;font-weight:600;color:var(--mute);margin-top:2px;line-height:1.4}
.slowt>div{flex:1}
.sw-t{flex:none;width:46px;height:28px;border-radius:999px;background:var(--sand2);position:relative;transition:background-color .2s;margin-top:2px}
.sw-t i{position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 2px 0 rgba(43,45,66,.18);transition:transform .2s}
.sw-t[aria-checked="true"]{background:var(--grass)}
.sw-t[aria-checked="true"] i{transform:translateX(18px)}
/* ---------- kid extras ---------- */
.bonusbar{background:var(--sun);color:var(--ink);box-shadow:0 5px 0 var(--sun-e);margin-bottom:12px}
.bonusbar:active{box-shadow:0 2px 0 var(--sun-e)}
.bonusbar .gb-ic svg.star,.bonusbar .gb-ic .hx>span svg{width:26px;height:26px}
.habs{padding:12px 12px 14px;margin-top:14px}
.hb-h{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin:0 2px 10px}
.hb-h h3{margin:0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.hb-h small{font-size:12px;font-weight:700;color:var(--mute)}
.hbg{display:grid;grid-template-columns:repeat(auto-fit,minmax(70px,1fr));gap:8px}
.hb{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:var(--r);text-align:center}
.hb-i{position:relative;width:52px;height:52px;border-radius:var(--r);display:grid;place-items:center;background:var(--cream);border:2px solid var(--sand);color:var(--h);font-size:26px;transition:background-color .2s,border-color .2s}
.hb-i em{position:absolute;right:-6px;top:-6px;width:22px;height:22px;border-radius:50%;background:var(--grass);color:#fff;display:grid;place-items:center;font-size:13px;box-shadow:0 2px 0 var(--grass-e)}
.hb-i em .ico{stroke-width:3}
.hb.on .hb-i{background:var(--h);border-color:var(--h);color:var(--hx);animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.hb b{font-size:12px;font-weight:800;line-height:1.2}
.hb small{display:inline-flex;align-items:center;gap:3px;font-size:12px;font-weight:800;color:var(--mute)}
.hb small .ico{color:#F7922B;font-size:13px}
.crs{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px 10px 10px;margin-top:14px;border-color:var(--h);box-shadow:0 4px 0 var(--he)}
.crs-i .hx{width:46px;height:46px}
.crs-t{flex:1;min-width:0;display:flex;flex-direction:column}
.crs-t small{font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:800;color:var(--he)}
.crs-t b{font-size:16px;font-weight:800}
.crs-t span{font-size:12.5px;font-weight:700;color:var(--mute)}
.crs>.ico{font-size:22px;color:var(--mute)}
.ksec{margin-top:18px}
.ksec h3{display:flex;align-items:center;gap:6px;margin:0 0 4px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute);font-weight:700}
.ksec h3 .ico{font-size:15px;color:var(--h)}
.ksub{margin:0 0 10px;font-size:13px;font-weight:600;color:var(--mute)}
.ksec .rows{margin-top:8px}
.kr.miss{opacity:.6;box-shadow:none;cursor:default}
.kr.miss .tile{filter:grayscale(1);box-shadow:none}
.kr.xtra:not(.ok){border-color:var(--a)}
.askc{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:10px 14px 10px 10px;margin-top:18px}
.askc .ak-i .hx{width:44px;height:44px}
.askc>div{flex:1;min-width:0}.askc b{display:block;font-size:15px;font-weight:800}.askc small{display:block;font-size:13px;font-weight:600;color:var(--mute)}
.askc>.ico{font-size:22px;color:var(--mute)}
.askc.wait{border-style:dashed}.askc .cl-load{--s:44px}
.askm{display:flex;flex-direction:column;gap:8px;width:100%;margin-bottom:14px}
.askm button{padding:11px 12px;border-radius:var(--r);border:2px solid var(--sand);background:var(--white);font-weight:700;font-size:14px}
.askm button.on{border-color:var(--a);background:var(--white);box-shadow:0 0 0 2px var(--a) inset}
.party.askp .glater,.party.crsp .glater{width:100%}
.cbig .hx{width:110px;height:110px}.cbig .hx .ico{font-size:48px}
.cdots{display:flex;gap:6px;margin:0 0 16px}
.cdots i{width:8px;height:8px;border-radius:999px;background:var(--sand)}
.cdots i.on{width:22px;background:var(--h)}.cdots i.past{background:var(--ht)}
.cnav{display:flex;gap:8px;width:100%}.cnav .glater{flex:0 0 auto;width:auto}.cnav .pyay{flex:1}
.party.crsp.sw h2,.party.crsp.sw p,.party.crsp.sw .cbig{animation:obin .3s ease-out}
@keyframes obin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.party.crsp .cnav .glater{width:auto;flex:none;padding:10px 14px}
/* ---------- welcome back (PIN after sign-out) ---------- */
.su.wb{padding:0 0 20px}
.wb-top{width:100%;display:flex;flex-direction:column;align-items:center;padding:34px 20px 26px;background-color:var(--h);background-image:var(--pat);background-size:var(--patsz);background-repeat:var(--patrep);background-position:var(--patpos);color:var(--hx)}
.wb-av .hexav{width:96px;height:96px;filter:drop-shadow(0 5px 0 rgba(43,45,66,.18));animation:wob 2.4s ease-in-out infinite}
.wb-top h1{margin:12px 0 4px;color:var(--hx)}
.wb-top p{margin:0;font-size:14px;font-weight:700;opacity:.92}
.wb-pin{margin-top:22px}
.wb-pin .pdots{margin-bottom:18px}
.wb-pin .phint{display:inline-flex;align-items:center;gap:6px;max-width:30ch;line-height:1.4}
.wb-lock{display:flex;flex-direction:column;align-items:center;gap:8px;padding:10px 24px;max-width:320px}
.wb-lock .hx{width:84px;height:84px}
.wb-lock b{font-size:20px;font-weight:800}
.wb-lock .su-go{margin-top:8px}
.wb-why{display:inline-flex;align-items:center;gap:6px;margin:16px 0 0;font-size:12px;font-weight:700;color:var(--mute)}
/* ---------- celebrations ---------- */
.celt{background:var(--cream);border-radius:var(--r);padding:10px;margin-top:10px}
.celt b{display:block;font-size:13px;font-weight:800;margin-bottom:8px}
.celt div{display:flex;flex-wrap:wrap;gap:6px}
.celt button{padding:6px 10px;border-radius:var(--r);background:var(--white);border:2px solid var(--sand);font-size:12px;font-weight:800}
.celt button:hover{border-color:var(--h)}
.cel-hex{position:relative;display:grid;place-items:center;margin:4px 0 6px;animation:celin .6s cubic-bezier(.3,1.6,.5,1) both .1s}
.cel-hex .hx{width:130px;height:130px}.cel-hex .hx .ico{font-size:58px}
.cel-n{position:absolute;right:-8px;bottom:6px;font-style:normal;min-width:44px;height:44px;border-radius:50%;background:var(--white);color:var(--ink);font-size:22px;font-weight:800;display:grid;place-items:center;box-shadow:0 3px 0 var(--sand)}
.cel-medal{animation:celin .6s cubic-bezier(.3,1.6,.5,1) both .1s;margin:4px 0 6px}
.medal.lg{width:140px;height:140px}.medal.lg .mi{font-size:58px}.medal.lg .gem{width:36px;height:36px;font-size:20px;top:-2px;right:0}
.cel-jar{position:relative;display:grid;place-items:center;margin:4px 0 6px;animation:celin .6s cubic-bezier(.3,1.6,.5,1) both .1s}
.cel-jar .jar.big{width:120px;height:150px}
.cel-gi{position:absolute;right:-26px;top:-6px;animation:wob 1.8s ease-in-out infinite}.cel-gi .hx{width:62px;height:62px}
@keyframes celin{from{transform:scale(.3) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){.cel-hex,.cel-medal,.cel-jar{animation:none}}
/* ---------- make it mine ---------- */
.avb{position:relative;flex:none;border-radius:50%;transition:transform .2s cubic-bezier(.3,1.6,.5,1)}
.avb:hover{transform:scale(1.04) rotate(-3deg)}.avb:active{transform:scale(.95)}
.avpen{position:absolute;right:-2px;bottom:2px;width:24px;height:24px;border-radius:50%;background:var(--white);color:var(--he);display:grid;place-items:center;font-size:13px;box-shadow:0 2px 0 rgba(43,45,66,.18)}
.avpen .ico{stroke-width:2.6}
.mtabs{display:flex;gap:6px;padding:0 18px 10px}
.mtabs button{flex:1;padding:10px;border-radius:var(--r);background:var(--cream);border:2px solid var(--sand);font-weight:800;font-size:14px;color:var(--mute)}
.mtabs button.on{background:var(--h);border-color:var(--h);color:var(--hx);box-shadow:0 3px 0 var(--he)}
.mineg{grid-template-columns:repeat(4,1fr);max-width:none;margin:0 0 18px}
.mineg button{position:relative}
.mineg button.avlk .hexav{filter:grayscale(1);opacity:.45}
.mineg em{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:3px;font-style:normal;font-size:10px;font-weight:800;background:var(--ink);color:#fff;border-radius:4px;padding:2px 5px;white-space:nowrap}
.mineg em .ico{font-size:10px}
.mineg em.nw{background:var(--sun);color:var(--ink)}
.mineg button.pop{animation:pop .45s cubic-bezier(.3,1.6,.5,1)}
.hig{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:8px}
.hig button{padding:12px 6px;border-radius:var(--r);background:var(--white);border:2px solid var(--sand);font-weight:800;font-size:14px}
.hig button.on{border-color:var(--h);background:var(--h);color:var(--hx);box-shadow:0 3px 0 var(--he)}

/* my vault */
.rc.pm .pmt{background:var(--grass);color:#fff;box-shadow:0 3px 0 var(--grass-e)}
.rc.pm .rbar i{background:var(--grass)}
.vmini{display:flex;flex-direction:column;align-items:flex-start;gap:10px;width:100%;padding:16px;text-align:left;font:inherit;color:inherit}
.vmr{display:flex;align-items:center;gap:12px;width:100%}.vmr>.ico{color:var(--mute);font-size:20px;flex:none}
.vic{width:48px;height:48px;border-radius:var(--r);display:grid;place-items:center;background:var(--grass);color:#fff;box-shadow:0 3px 0 var(--grass-e);font-size:26px;flex:none}
.vic.big{width:60px;height:60px;font-size:32px}
.vmt{flex:1;min-width:0}.vmt strong{display:block;font-size:26px;font-weight:800;line-height:1.1}.vmt small{display:block;font-size:12px;font-weight:700;color:var(--mute);margin-top:2px}
.vst{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:800;padding:5px 9px;border-radius:6px;border:2px solid var(--sand);background:var(--cream)}
.vst.yes{border-color:var(--grass);background:#F1FAEC;color:var(--grass-e)}.vst.wait{border-color:var(--sun);background:#FFFBEB;color:var(--sun-e)}
.vbal{display:flex;align-items:center;gap:14px;background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:14px;margin-bottom:12px}
.vbal small{display:block;font-size:12px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}.vbal strong{display:block;font-size:32px;font-weight:800;line-height:1.1}
.vout{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;padding:13px;border-radius:var(--r);background:var(--white);border:2px solid var(--sand);box-shadow:0 3px 0 var(--sand);font-weight:800;font-size:15px;color:var(--ink)}
.vnote{margin:8px 2px 0;font-size:12.5px;font-weight:600;color:var(--mute);line-height:1.5}
.vbox{display:flex;align-items:center;gap:10px;padding:12px;border-radius:var(--r);border:2px solid var(--sand);background:var(--white)}
.vbox>.ico{font-size:22px;flex:none}.vbox>div{flex:1;min-width:0}.vbox b{display:block;font-size:14px;font-weight:800}.vbox small{display:block;font-size:12.5px;font-weight:600;color:var(--mute);margin-top:2px}
.vbox.wait{border-color:var(--sun);background:#FFFBEB}.vbox.wait>.ico{color:var(--sun-e)}
.vbox.yes{border-color:var(--grass);background:#F1FAEC}.vbox.yes>.ico{color:var(--grass-e)}
.vbox.no{border-color:var(--sand)}.vbox.no>.ico{color:var(--a)}
.vlink{padding:8px 10px;border-radius:var(--r);font-weight:800;font-size:13px;color:var(--mute);background:none}
.vok{padding:9px 16px;border-radius:var(--r);background:var(--a);color:var(--ax);font-weight:800;font-size:14px;box-shadow:0 3px 0 var(--ae)}
.vform{background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:12px;display:grid;gap:8px}
.vfl{font-size:12px;font-weight:800;color:var(--mute);text-transform:uppercase;letter-spacing:.08em}
.vstep{display:flex;align-items:center;gap:10px}.vstep b{min-width:80px;text-align:center;font-size:22px;font-weight:800}
.vstep button{width:44px;height:44px;border-radius:var(--r);background:var(--cream);border:2px solid var(--sand);font-size:22px;font-weight:800;color:var(--ink)}
.vchips{display:flex;gap:6px;flex-wrap:wrap}
.vchips button{padding:7px 12px;border-radius:999px;border:2px solid var(--sand);background:var(--white);font-weight:800;font-size:13px;color:var(--ink)}
.vchips button.on{background:var(--h);border-color:var(--h);color:var(--hx)}
.vform input{width:100%;padding:11px 12px;border-radius:var(--r);border:2px solid var(--sand);font:600 16px Montserrat,sans-serif;color:var(--ink);background:var(--white)}
.vform input:focus{outline:none;border-color:var(--h)}
.vwarn{margin:0;font-size:12.5px;font-weight:700;color:#C2362F}
.vfb{display:flex;justify-content:flex-end;gap:8px;margin-top:4px}
.vsend{padding:11px 18px;border-radius:var(--r);background:var(--grass);color:#fff;font-weight:800;font-size:15px;box-shadow:0 3px 0 var(--grass-e)}
.vsend:disabled{opacity:.5}
.vtxs{background:var(--white);border:2px solid var(--sand);border-radius:var(--r);padding:4px 12px}
.vtx{display:flex;align-items:center;gap:10px;padding:9px 0;border-top:2px solid var(--sand)}.vtx:first-child{border-top:0}
.vti{width:30px;height:30px;border-radius:6px;display:grid;place-items:center;flex:none;font-size:16px}
.vti.in{background:#F1FAEC;color:var(--grass-e)}.vti.out{background:#FDECEA;color:#C2362F}
.vtt{flex:1;min-width:0;font-size:14px;font-weight:700}.vtt small{display:block;font-size:12px;color:var(--mute)}
.vtx>b{font-size:15px;font-weight:800}.vtx>b.in{color:var(--grass-e)}.vtx>b.out{color:#C2362F}
.vsheet h4{margin:16px 2px 8px}
.vpage .vbal{margin:0;padding:16px}
.vpage .vbal .vsub{display:block;font-size:12.5px;font-weight:600;color:var(--mute);margin-top:4px}
.vpm{padding:16px;display:grid;gap:8px}
.vpmr{display:flex;align-items:baseline;gap:6px}.vpmr strong{font-size:26px;font-weight:800}.vpmr small{font-size:14px;font-weight:700;color:var(--mute)}
.vpm .rbar i{background:var(--grass)}
.vpmn{font-size:12.5px;font-weight:700;color:var(--mute)}
.vpm .rclaim{margin-top:2px}
.vact{display:grid;gap:8px}
/* checking the PIN and opening the parent dash: the dots pulse as a loader */
.pdots.wait i{background:var(--h);animation:pdpulse 1s ease-in-out infinite}
.pdots.wait i:nth-child(2){animation-delay:.15s}.pdots.wait i:nth-child(3){animation-delay:.3s}.pdots.wait i:nth-child(4){animation-delay:.45s}
@keyframes pdpulse{0%,100%{transform:scale(.85);opacity:.45}40%{transform:scale(1.18);opacity:1}}
.pad.off{opacity:.45;pointer-events:none}
@media (prefers-reduced-motion:reduce){.pdots.wait i{animation-duration:2.4s}}

/* ---------- live: the app fills the screen (the prototype shows it inside a device frame) ---------- */
html,body{height:100%}
body{background:var(--cream);overscroll-behavior-y:none}
.device.live{position:fixed;inset:0;width:auto;height:auto;border:0;border-radius:0;padding:0 env(safe-area-inset-right) 0 env(safe-area-inset-left);box-shadow:none;transform:none!important;background:var(--cream);overflow:hidden}
.device.live .app{border-radius:0;height:100%}
.device.live .cl-over,.device.live .partywrap,.device.live .sheetwrap{inset:0;border-radius:0}
.boot{position:fixed;inset:0;display:grid;place-items:center;background:var(--cream);z-index:50}
.boot .cl-load{--s:110px}
/* notices: paused dash, free access, invite notes */
.lnote{display:flex;align-items:center;gap:10px;background:var(--white);border:2px solid var(--sun,#F8C537);border-radius:7px;padding:10px 12px;font-size:13px;font-weight:600;line-height:1.45;margin:0 0 14px}
.lnote>.ico{flex:none;font-size:18px;color:#BC8B12}
.lnote p{margin:0;flex:1;min-width:0}.lnote b{font-weight:800}.lnote small{display:block;color:var(--mute);font-weight:600}
.lnote.warn{border-color:#F7922B;background:#FFF3E3}.lnote.warn>.ico{color:#B4601A}
.lnote .btn{flex:none}
@media (max-width:600px){.lnote{flex-wrap:wrap}.lnote .btn{width:100%}}

/* phones: taps act straight away (no wait to see if it is a double tap) */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;touch-action:manipulation}
a,button,input,select,textarea,label,summary,[data-a],[role=button]{touch-action:manipulation}

/* ---------- live kid app ---------- */
.device.live .app{display:flex;flex-direction:column}
.hi .ib.ex{margin-left:auto;background:rgba(255,255,255,.22)}
.hi .ib.ex+.ib{margin-left:0}
.rnone2{grid-column:1/-1;color:var(--mute);font-size:14px;font-weight:600;margin:6px 2px}
/* pairing code and first PIN */
.su-code{display:flex;gap:8px;justify-content:center;margin:14px 0 6px}
.su-code input{width:100%;max-width:260px;text-align:center;font:800 30px/1 Montserrat,system-ui,sans-serif;letter-spacing:.3em;padding:14px 10px;border:2px solid var(--sand2);border-radius:7px;background:#fff;color:var(--ink)}
.su-code input:focus{outline:none;border-color:var(--h)}
.su-alt{display:block;margin:14px auto 0}
/* no dark fills */
.tg.lock{background:var(--a,#8C67D1);color:var(--ax,#fff)}
.mineg em{background:var(--a,#8C67D1);color:var(--ax,#fff)}
/* grown-up PIN to leave: a solid card on a solid backdrop, nothing showing through */
.partywrap.pinw.in .pscrim{opacity:1}
.party.pinp{background:var(--white,#fff);border:2px solid var(--sand,#EFE4D2);border-radius:14px;padding:22px 18px 18px;box-shadow:0 5px 0 var(--sand,#EFE4D2)}
/* sound switch next to Done */
.sh-f{display:flex;gap:10px;align-items:stretch}
.sh-f .sdone{flex:1}
.sndrow{display:inline-flex;align-items:center;gap:7px;padding:0 14px;border-radius:var(--r,7px);border:2px solid var(--sand,#F0E6D8);background:var(--white,#fff);font:800 14px Montserrat,sans-serif;color:var(--ink,#2B2D42);white-space:nowrap}
.sndrow .ico{font-size:18px}
.sndrow em{font-style:normal;font-size:12px;padding:2px 7px;border-radius:5px;background:var(--cream,#FFF7EC);color:var(--mute,#6B6F87)}
.sndrow[aria-pressed="true"] em{background:var(--a,#EE5A52);color:var(--ax,#fff)}