@font-face{font-family:Gummy;src:url(/fonts/sour-gummy.woff2) format("woff2");font-weight:100 900;font-stretch:100% 125%;font-display:swap}
:root{--red:#D3263A;--red2:#A3172A;--red3:#B81E32;--paper:#FFF8EC;--shade:#F4EAD6;--shade2:#EADCC2;--ink:#2A1A14;--mu:#6E5A50;--gold:#F5B800;--cream:#FFF8EC;--e:cubic-bezier(.22,1,.36,1);--safe:env(safe-area-inset-bottom,0px)}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--red)}
body{font-family:Gummy,system-ui,sans-serif;font-size:18px;line-height:1.45;font-weight:500;color:var(--cream);background:var(--red);background-image:linear-gradient(100deg,rgba(255,255,255,.10) 0,rgba(255,255,255,0) 28%,rgba(0,0,0,0) 70%,rgba(0,0,0,.10) 100%);background-attachment:fixed;min-height:100vh;-webkit-font-smoothing:antialiased;padding-right:22px}
body.locked{overflow:hidden}
a{color:inherit}
input,button{font:inherit;border:0;color:inherit}
h1{font-size:48px;line-height:1;font-weight:800;font-stretch:112%;letter-spacing:-.01em;text-wrap:balance}
h2{font-size:28px;line-height:1.1;font-weight:800;font-stretch:108%;text-wrap:balance}
p{text-wrap:pretty}
.hp{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}
:focus{outline:none}:focus-visible{box-shadow:0 0 0 3px var(--red2),0 0 0 6px var(--gold);border-radius:14px}
[tabindex="-1"]:focus{box-shadow:none}
.handle{position:fixed;top:0;bottom:0;right:0;width:22px;background:linear-gradient(90deg,#8E1324,#C9CED3 30%,#FFFFFF 46%,#9AA1A8 70%,#6E757C);box-shadow:-6px 0 14px rgba(70,0,10,.35);z-index:4}
.top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 16px 6px 18px;max-width:1180px;margin:0 auto}
.mark{display:inline-flex;align-items:center;gap:10px;text-decoration:none;font-weight:800;font-size:22px;font-stretch:110%;min-height:44px}
.mark svg{width:38px;height:38px;filter:drop-shadow(0 3px 4px rgba(80,0,10,.3))}
.seg{display:inline-flex;gap:4px;padding:4px;border-radius:999px;background:var(--red2)}
.seg[hidden]{display:none}
.seg button{min-height:44px;min-width:64px;padding:0 16px;border-radius:999px;background:transparent;color:var(--cream);font-weight:700;font-size:16px;cursor:pointer;transition:background .2s,color .2s,transform .14s var(--e)}
.seg button[aria-pressed=true]{background:var(--paper);color:var(--ink)}
.seg button:active{transform:scale(.97)}
main{max-width:1180px;margin:0 auto;padding:0 14px 0 14px}
.intro{text-align:center;padding:26px 6px 22px;max-width:620px;margin:0 auto}
.intro[hidden],.art[hidden]{display:none}
.lede{margin:14px auto 22px;color:#FFF8EC;max-width:520px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 22px;border-radius:999px;background:var(--ink);color:var(--paper);font-weight:700;font-size:17px;cursor:pointer;text-decoration:none;transition:transform .14s var(--e),background .2s,opacity .2s;-webkit-tap-highlight-color:transparent}
.btn:active{transform:scale(.97)}
.btn.gold{background:var(--gold);color:var(--ink);box-shadow:0 8px 18px -8px rgba(60,0,10,.55)}
.btn.cream{background:var(--paper);color:var(--ink)}
.btn.ghost{background:var(--shade);color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.big{min-height:58px;font-size:20px;padding:0 30px}
.art{max-width:420px;margin:4px auto 0;border-radius:22px;overflow:hidden;transform:rotate(1.5deg);box-shadow:0 26px 50px -20px rgba(60,0,10,.6)}
.art img{display:block;width:100%;height:auto}
.week{text-align:center;color:#FFF8EC;font-size:15px;font-weight:600;margin:10px 0 4px}
.week[hidden]{display:none}
.door{display:grid;gap:26px;padding:16px 0 110px}
.sheet{position:relative;background:var(--paper);color:var(--ink);border-radius:18px;padding:30px 16px 20px;transform:rotate(var(--tilt));box-shadow:0 22px 34px -20px rgba(60,0,10,.7),0 2px 0 var(--shade2);transition:box-shadow .4s}
body.drop .sheet{animation:drop .55s var(--e) both}
body.drop .sheet:nth-child(2){animation-delay:.08s}body.drop .sheet:nth-child(3){animation-delay:.16s}body.drop .sheet:nth-child(4){animation-delay:.24s}
@keyframes drop{from{opacity:0;transform:translateY(-26px) rotate(calc(var(--tilt) * 4))}}
.sheet.won{box-shadow:0 0 0 0 transparent,0 0 46px -6px rgba(255,214,74,.85),0 22px 34px -20px rgba(60,0,10,.7)}
.mg{position:absolute;top:-12px;width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,rgba(255,255,255,.55),transparent 42%),var(--kc);box-shadow:0 5px 8px rgba(40,0,0,.35)}
.mg.a{left:22px}.mg.b{right:22px}
.kid{font-size:30px;color:var(--ink)}
.kid::first-letter{color:var(--kc)}
.hook{margin-top:4px;color:var(--mu);font-size:16px;font-weight:600}
.sheet.won .hook{color:var(--ink)}
.dh{display:flex;gap:3px;margin:16px 0 4px}
.dh span{flex:1;text-align:center;font-size:14px;font-weight:700;color:var(--mu)}
.rows{list-style:none;display:grid;gap:12px}
.row .ct{display:block;font-weight:700;font-size:18px;margin-bottom:5px;line-height:1.2}
.cells{display:flex;gap:3px}
.cell{flex:1;min-width:0;min-height:44px;aspect-ratio:1;max-height:64px;border-radius:12px;background:var(--shade);cursor:pointer;display:grid;place-items:center;padding:0;-webkit-tap-highlight-color:transparent;transition:background .2s,transform .12s var(--e)}
.cell:active{transform:scale(.94)}
.cell[aria-pressed=true]{background:#FFF0C4}
.cell svg{width:84%;height:84%;transform:rotate(var(--r,0deg));filter:drop-shadow(0 2px 1.5px rgba(120,70,0,.4));overflow:visible}
.cell .sh{opacity:0}
.cell.slap svg{animation:slap .26s var(--e) both}
.cell.slap .sh{animation:shine .6s .12s var(--e) both}
@keyframes slap{0%{transform:rotate(var(--r)) scale(1.45);opacity:0}60%{opacity:1}100%{transform:rotate(var(--r)) scale(1)}}
@keyframes shine{0%{opacity:0;transform:translateX(-40%)}40%{opacity:1}100%{opacity:0;transform:translateX(40%)}}
.ed{display:flex;gap:6px;align-items:center;margin-bottom:6px}
.chore{flex:1;min-width:0;min-height:44px;border-radius:12px;background:var(--shade);padding:0 12px;font-weight:700;font-size:17px;color:var(--ink)}
.x{width:44px;height:44px;flex:none;border-radius:50%;background:var(--shade);color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center}
.x:active{transform:scale(.95)}
body.plan .cell{opacity:.5}
.add{display:flex;gap:8px;margin-top:14px}
.add .in{flex:1;min-width:0}
.sugg{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.sugg .chip{background:var(--shade);color:var(--ink);font-size:15px}
.empty{color:var(--mu);margin-top:12px}
.planbar{display:flex;justify-content:center;padding:0 0 20px}
.planbar[hidden]{display:none}
.chip{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border-radius:999px;background:var(--red2);color:var(--cream);text-decoration:none;font-weight:700;font-size:16px;cursor:pointer}
.in{min-height:50px;border-radius:14px;padding:0 14px;background:var(--shade);color:var(--ink);width:100%;font-size:17px;font-weight:600}
.in::placeholder{color:#7D685D;font-weight:500}
.magnets{position:fixed;right:34px;bottom:calc(18px + var(--safe));display:flex;flex-direction:column;gap:12px;z-index:10}
.magnets[hidden]{display:none}
.mag{width:72px;height:72px;border-radius:50%;cursor:pointer;font-weight:800;font-size:15px;display:grid;place-items:center;background:radial-gradient(circle at 34% 28%,rgba(255,255,255,.6),transparent 40%),var(--c);color:var(--ink);box-shadow:0 10px 16px -4px rgba(50,0,8,.5),inset 0 -4px 0 rgba(0,0,0,.12);transition:transform .14s var(--e)}
.mag:active{transform:scale(.95)}
.mag.gold{--c:var(--gold)}.mag.cream{--c:var(--paper)}
/* drawers */
.sheetwrap{position:fixed;inset:0;z-index:40;background:rgba(40,6,10,0);display:flex;align-items:flex-end;justify-content:center;transition:background .26s}
.sheetwrap[hidden]{display:none}
.sheetwrap.on{background:rgba(40,6,10,.45)}
.drawer{width:100%;max-width:560px;max-height:92vh;overflow:auto;background:var(--paper);color:var(--ink);border-radius:28px 28px 0 0;padding:26px 20px calc(18px + var(--safe));transform:translateY(100%);transition:transform .28s var(--e)}
.sheetwrap.on .drawer{transform:none}
.drawer>p,.sstep>p{color:var(--mu);margin:6px 0 16px}
.kids{list-style:none;display:grid;gap:16px}
.kids li{background:var(--shade);border-radius:20px;padding:12px}
.krow{display:flex;gap:8px;align-items:center}
.krow .dot{width:20px;height:20px;border-radius:50%;background:var(--kc);flex:none;margin:0 4px}
.krow .in{background:var(--paper)}
.krow .x{background:var(--paper)}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chips button{min-height:44px;min-width:44px;padding:0 14px;border-radius:999px;background:var(--shade);color:var(--ink);font-weight:700;font-size:16px;cursor:pointer;transition:background .18s,color .18s,transform .14s var(--e)}
.chips button:active{transform:scale(.97)}
.chips button[aria-pressed=true]{background:var(--ink);color:var(--paper)}
.kids .chips{margin-top:10px}.kids .chips button{background:var(--paper)}.kids .chips button[aria-pressed=true]{background:var(--ink)}
.days{margin-top:14px}.days button{flex:1;min-width:54px}
#addKid{margin-top:14px;width:100%}
.rew{display:grid;grid-template-columns:auto 96px auto 1fr;gap:10px;align-items:center}
.rew label{font-weight:700}
.num{text-align:center}
.hint{font-size:14px;color:var(--mu);margin-top:10px}
.sfoot{display:flex;justify-content:space-between;gap:10px;margin-top:24px}
.sfoot .btn{flex:1}
.err{color:#B3122A;font-weight:700;font-size:15px;margin-top:10px}
.err:empty{display:none}
.toast{position:fixed;left:16px;bottom:calc(24px + var(--safe));transform:translateY(20px);background:var(--ink);color:var(--paper);padding:12px 18px;border-radius:999px;font-size:15px;font-weight:700;opacity:0;pointer-events:none;transition:opacity .2s,transform .25s var(--e);z-index:60;max-width:calc(100vw - 150px);text-align:left}
.toast.on{opacity:1;transform:none}
/* guide */
.guide{max-width:680px;margin:60px auto 0;padding:0 20px}
.guide h2{margin:40px 0 12px}.guide h3{font-size:19px;font-weight:700;margin:22px 0 4px}
.guide p{color:#FFF8EC;margin-bottom:12px}
.guide.solo{margin-top:24px;min-height:50vh}.guide.solo h1{margin-bottom:16px}
.guide a{text-underline-offset:3px}
.plate{margin:26px 0;border-radius:24px;overflow:hidden;transform:rotate(-1deg);box-shadow:0 22px 40px -20px rgba(60,0,10,.6)}
.plate img{display:block;width:100%;height:auto}
.others{display:flex;flex-wrap:wrap;gap:8px}
.news{margin-top:48px;background:var(--red2);border-radius:26px;padding:24px 20px}
.news h2{margin:0 0 8px;font-size:24px}
.sub{display:grid;grid-template-columns:1fr auto;gap:8px;margin-top:14px}
.sub .in{background:var(--paper)}
.sub .err{grid-column:1/-1;color:#FFF8EC}
.news .btn{background:var(--gold);color:var(--ink)}
.foot{max-width:680px;margin:70px auto 0;padding:32px 20px 120px;background:var(--red2);border-radius:28px 28px 0 0}
.foot nav{display:flex;flex-wrap:wrap;gap:4px 18px;margin:14px 0}
.foot nav a{min-height:44px;display:inline-flex;align-items:center;font-size:16px;color:#FFF8EC;text-decoration:none}
.foot p{font-size:14px;color:#FFF8EC}
.ages{display:grid;gap:22px;padding-bottom:10px}
.ageblock{background:var(--paper);color:var(--ink);border-radius:20px;padding:22px 18px}
.ageblock:nth-child(odd){transform:rotate(-.8deg)}.ageblock:nth-child(even){transform:rotate(.8deg)}
.clist{list-style:none;display:grid;gap:6px;margin:12px 0 16px}
.clist li{background:var(--shade);border-radius:12px;padding:10px 12px;font-weight:700}
/* print */
.printout{display:none}
@media print{
  @page{size:landscape;margin:12mm}
  html,body{background:#fff!important;background-image:none!important;color:#000;padding:0!important}
  body>*:not(.printout){display:none!important}
  .printout{display:block}
  .pp{break-after:page;page-break-after:always;font-family:Gummy,sans-serif;color:#2A1A14}
  .pp:last-child{break-after:auto;page-break-after:auto}
  .ph{display:flex;justify-content:space-between;align-items:center;margin-bottom:6mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  .ph h1{font-size:34pt;color:#2A1A14}.ph h1::first-letter{color:var(--kc)}
  .pr{display:flex;align-items:center;gap:3mm;font-size:16pt;font-weight:700}.pst svg{width:12mm;height:12mm}
  table{width:100%;border-collapse:separate;border-spacing:2mm;-webkit-print-color-adjust:exact;print-color-adjust:exact}
  th{font-size:13pt;font-weight:700;color:#6E5A50;padding-bottom:1mm}
  td.pc{font-size:15pt;font-weight:700;width:34%;padding-right:3mm}
  td i{display:block;height:16mm;border-radius:3mm;background:#F4EAD6}
  .pf{margin-top:4mm;font-size:9pt;color:#6E5A50}
}
@media (min-width:900px){
  h1{font-size:64px}
  .door{grid-template-columns:repeat(2,minmax(0,1fr));gap:40px 34px;padding-top:26px}
  .door:has(.sheet:only-child){grid-template-columns:minmax(0,720px);justify-content:center}
  .sheet{padding:34px 26px 26px}
  .row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.6fr);gap:12px;align-items:center}
  .row .ct{margin:0}
  .dh{margin-left:calc((100% - 12px) * .3846 + 12px)}
  body.plan .row{display:block}body.plan .dh{margin-left:0}
  .ages{grid-template-columns:repeat(2,1fr)}
  .magnets{right:46px;bottom:30px}
  .sheetwrap{align-items:center}.drawer{border-radius:28px;transform:translateY(30px);opacity:0;transition:transform .28s var(--e),opacity .2s}.sheetwrap.on .drawer{opacity:1}
}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}