/* Kinza's Food Adventures - "heritage storybook" look.
   Warm zellige palette (terracotta, saffron, teal, cobalt on cream paper),
   Fraunces storybook serif, paper grain, an 8-point Moroccan star as the
   recurring accent, arched framing, and gentle hand-placed tilt. */
:root{
  --paper:#F4E8D2; --paper-2:#FBF3E3; --card:#FFFBF2;
  --ink:#3B2A21; --ink-soft:#8A6C57;
  --terracotta:#C15A38; --terracotta-deep:#9C4327;
  --saffron:#E6A02F; --saffron-soft:#F6D493;
  --teal:#2E8B80; --teal-deep:#1E6B62;
  --cobalt:#385F9E; --ruby:#B23A48; --plum:#8A5A86;
  --gold:#E6A02F; --heart:#C1436B;
  /* Per-day colors (kept as the same variable names app.js uses) */
  --strawberry:#C1436B; --mango:#C15A38; --sunshine:#E6A02F; --apple:#2E8B80;
  --mint:#4CA79A; --sky:#385F9E; --grape:#8A5A86;
  /* Warm offset "sticker" shadows and a drawn ink outline. */
  --shadow:3px 5px 0 rgba(59,42,33,.13), 0 14px 26px rgba(59,42,33,.12);
  --shadow-sm:2px 3px 0 rgba(59,42,33,.12);
  --ink-line:2px solid rgba(59,42,33,.18);
  /* Reusable 8-point zellige star (saffron), as a data URI. */
  --star:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='%23E6A02F'%3E%3Crect x='22' y='22' width='56' height='56' rx='4'/%3E%3Crect x='22' y='22' width='56' height='56' rx='4' transform='rotate(45 50 50)'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{font-family:'Nunito',system-ui,sans-serif;color:var(--ink);min-height:100vh;padding:18px 14px 60px;
  background-color:var(--paper);
  background-image:
    radial-gradient(1100px 460px at 8% -10%, rgba(230,160,47,.22) 0%, transparent 60%),
    radial-gradient(900px 460px at 100% 0%, rgba(46,139,128,.16) 0%, transparent 55%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.05'/%3E%3C/svg%3E");
  background-attachment:fixed;}
.wrap{max-width:800px;margin:0 auto}
h1,h2,h3,.f{font-family:'Fraunces','Georgia',serif;font-weight:600;font-variation-settings:"opsz" 130,"SOFT" 50,"WONK" 1;letter-spacing:-.01em}

/* Visible keyboard focus for accessibility. */
:focus-visible{outline:3px solid var(--cobalt);outline-offset:2px;border-radius:6px}

.hero{display:flex;align-items:center;gap:15px;margin:4px 4px 22px}
/* Avatar framed as a little Moroccan arched doorway with a saffron keyline. */
.avatar{width:66px;height:72px;flex:0 0 auto;
  background:linear-gradient(160deg,var(--saffron),var(--terracotta));display:grid;place-items:center;
  font-size:34px;box-shadow:var(--shadow-sm);transform:rotate(-3deg);
  border:3px solid #fff;outline:2px solid rgba(59,42,33,.18);
  border-radius:44% 44% 12px 12px/56% 56% 12px 12px}
.hero h1{font-size:31px;line-height:1.02;margin:0;color:var(--terracotta-deep);font-variation-settings:"opsz" 144,"SOFT" 40,"WONK" 1}
.hero .sub{color:var(--ink-soft);font-weight:700;font-size:14px;margin-top:6px;display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.flagtag{background:var(--card);border-radius:11px;padding:2px 9px;box-shadow:var(--shadow-sm);border:var(--ink-line);font-weight:800}

/* Brave bite: a warm terracotta panel with an arched top and a zellige-star watermark. */
.brave{background:linear-gradient(158deg,var(--terracotta) 0%,var(--terracotta-deep) 100%);color:#FFF6EA;
  border-radius:26px 26px 22px 22px;padding:22px 20px 22px;box-shadow:var(--shadow);position:relative;overflow:hidden;
  margin-bottom:20px;border:3px solid #FFF3E2;outline:2px solid rgba(59,42,33,.22)}
.brave::after{content:"";position:absolute;width:150px;height:150px;right:-24px;bottom:-36px;opacity:.16;
  background:var(--star);background-size:contain;background-repeat:no-repeat;transform:rotate(10deg)}
.brave::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.10;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='46' height='46'%3E%3Cg fill='none' stroke='%23FFF3E2' stroke-width='1.4'%3E%3Cpath d='M23 2 L44 23 L23 44 L2 23 Z'/%3E%3Ccircle cx='23' cy='23' r='6'/%3E%3C/g%3E%3C/svg%3E")}
.brave>*{position:relative;z-index:1}
.brave .eyebrow{font-family:'Fraunces',serif;font-weight:600;font-size:12px;text-transform:uppercase;opacity:.92;letter-spacing:.12em}
.brave h2{margin:3px 0 14px;font-size:24px;color:#FFF6EA;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1}
.brave .foodshow{display:flex;align-items:center;gap:14px}
.brave .foodshow .em{font-size:52px;filter:drop-shadow(0 3px 4px rgba(0,0,0,.22))}
.brave .foodshow .nm{font-family:'Fraunces',serif;font-weight:600;font-size:25px;line-height:1.1}
.brave .foodshow .cz{display:block;font-size:12.5px;font-weight:800;opacity:.92;margin-top:3px;font-family:'Nunito',sans-serif;letter-spacing:.04em}
.react{display:flex;gap:9px;margin-top:18px;flex-wrap:wrap}
.react button{flex:1 1 30%;min-width:96px;border:2px solid rgba(59,42,33,.16);border-radius:16px;padding:12px 8px;
  font-family:'Fraunces',serif;font-weight:600;font-size:15px;cursor:pointer;background:#FFF7EC;
  color:var(--ink);box-shadow:0 4px 0 rgba(59,42,33,.22);transition:transform .08s}
.react button:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(59,42,33,.22)}
.react button .em{display:block;font-size:26px;margin-bottom:3px}
.brave .done{display:flex;align-items:center;gap:10px;margin-top:16px;font-family:'Fraunces',serif;font-size:18px;
  background:rgba(255,246,234,.16);padding:12px 14px;border-radius:14px}
.brave .pickbtn{margin-top:16px;border:2px solid rgba(59,42,33,.16);background:#FFF7EC;color:var(--terracotta-deep);
  font-family:'Fraunces',serif;font-weight:700;font-size:17px;padding:14px 18px;border-radius:16px;cursor:pointer;
  box-shadow:0 4px 0 rgba(59,42,33,.22);width:100%}
.brave .pickbtn:active{transform:translateY(3px);box-shadow:0 1px 0 rgba(59,42,33,.22)}
.linkish{background:none;border:none;color:#FFF6EA;font-weight:800;text-decoration:underline;text-underline-offset:3px;cursor:pointer;font-size:13px;margin-top:12px;opacity:.95}

.days{display:flex;gap:9px;overflow-x:auto;padding:4px 2px 10px;margin:0 -2px}
.days::-webkit-scrollbar{display:none}
.day-tab{flex:0 0 auto;border:var(--ink-line);cursor:pointer;border-radius:16px 16px 14px 14px;padding:10px 4px 8px;width:60px;
  background:var(--card);box-shadow:var(--shadow-sm);font-family:'Fraunces',serif;color:var(--ink-soft);
  display:flex;flex-direction:column;align-items:center;gap:4px;transition:transform .08s}
.day-tab .dot{width:13px;height:13px;border-radius:50%;border:1.5px solid rgba(59,42,33,.25)}
.day-tab .lbl{font-size:15px;font-weight:600}
.day-tab .today-pip{font-size:9px;font-weight:800;color:var(--terracotta);letter-spacing:.04em;font-family:'Nunito',sans-serif}
.day-tab.active{color:var(--ink);transform:translateY(-2px) rotate(-1.5deg);box-shadow:0 0 0 3px currentColor, var(--shadow-sm)}

.planbar{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:6px 4px 10px}
.planbar .dayname{font-family:'Fraunces',serif;font-weight:600;font-size:19px;color:var(--terracotta-deep)}
.planbar button{border:var(--ink-line);background:var(--card);box-shadow:var(--shadow-sm);color:var(--ink-soft);
  font-family:'Fraunces',serif;font-weight:600;font-size:13px;padding:8px 13px;border-radius:13px;cursor:pointer}
.planbar button:active{transform:translateY(2px)}

.meals{display:flex;flex-direction:column;gap:15px;margin-top:2px}
.meal{background:var(--card);border-radius:20px 20px 18px 18px;padding:16px 16px 14px;box-shadow:var(--shadow-sm);
  border:3px solid transparent;outline:2px solid rgba(59,42,33,.10);outline-offset:-1px}
.meal:nth-child(even){transform:rotate(.5deg)}
.meal:nth-child(odd){transform:rotate(-.5deg)}
.meal h3{margin:0 0 10px;font-size:20px;display:flex;align-items:center;gap:9px;color:var(--ink)}
.meal h3 .icn{font-size:24px}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{display:inline-flex;align-items:center;gap:7px;background:var(--saffron-soft);border-radius:14px;
  padding:8px 10px 8px 12px;font-weight:800;font-size:15px;border:1.5px solid rgba(59,42,33,.14)}
.chip.newish{background:#D9EEE6;border-color:var(--teal);box-shadow:0 0 0 2px rgba(46,139,128,.35)}
.chip .em{font-size:22px}
.chip button{border:none;background:rgba(59,42,33,.12);width:22px;height:22px;border-radius:50%;cursor:pointer;
  font-weight:900;color:var(--ink-soft);line-height:1;font-size:14px}
.chip button:active{background:rgba(59,42,33,.22)}
.add-slot{border:2px dashed rgba(59,42,33,.28);cursor:pointer;background:transparent;color:var(--ink-soft);border-radius:14px;
  padding:8px 14px;font-family:'Fraunces',serif;font-weight:600;font-size:15px;display:inline-flex;align-items:center;gap:6px}
.add-slot:active{background:rgba(59,42,33,.06)}
.empty-hint{color:var(--ink-soft);opacity:.7;font-style:italic;font-size:14px;margin:2px 0 10px}

.jar-card{background:var(--card);border-radius:24px;padding:18px;box-shadow:var(--shadow);margin-top:24px;
  border:3px solid #fff;outline:2px solid rgba(59,42,33,.14)}
.jar-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.jar-head h2{margin:0;font-size:22px;display:flex;align-items:center;gap:9px;color:var(--terracotta-deep)}
.jar-count{font-family:'Fraunces',serif;font-weight:700;font-size:15px;color:var(--terracotta-deep);background:var(--saffron-soft);padding:6px 13px;border-radius:12px;border:1.5px solid rgba(59,42,33,.16)}
.reward-toggle{display:flex;gap:4px;background:var(--paper);border-radius:13px;padding:4px;border:1.5px solid rgba(59,42,33,.14)}
.reward-toggle button{border:none;background:none;cursor:pointer;font-size:18px;padding:5px 9px;border-radius:10px}
.reward-toggle button.on{background:var(--card);box-shadow:var(--shadow-sm)}
.stars-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:12px;margin-top:16px}
.star-item{background:var(--paper-2);border-radius:16px;padding:16px 8px 14px;text-align:center;box-shadow:var(--shadow-sm);position:relative;border:2px solid rgba(59,42,33,.12)}
.star-item:nth-child(3n){transform:rotate(1.2deg)}
.star-item:nth-child(3n+1){transform:rotate(-1.2deg)}
.star-item .em{font-size:46px;display:block;line-height:1}
.star-item .nm{font-size:13.5px;font-weight:800;margin-top:7px;line-height:1.12}
.star-item .rx{font-size:28px;margin-top:6px;line-height:1}
.star-item .fl{position:absolute;top:8px;right:9px;font-size:15px}
.jar-empty{color:var(--ink-soft);font-weight:700;text-align:center;padding:24px 8px}

.overlay{position:fixed;inset:0;background:rgba(59,42,33,.5);backdrop-filter:blur(3px);
  display:none;align-items:flex-end;justify-content:center;z-index:50}
.overlay.show{display:flex}
.sheet{background:var(--paper);width:100%;max-width:800px;border-radius:26px 26px 0 0;
  padding:18px 16px calc(18px + env(safe-area-inset-bottom));max-height:88vh;overflow-y:auto;
  box-shadow:0 -10px 30px rgba(0,0,0,.25);border-top:3px solid #fff;animation:rise .22s ease}
@keyframes rise{from{transform:translateY(40px);opacity:.6}to{transform:none;opacity:1}}
.sheet-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px}
.sheet-head h2{margin:0;font-size:21px;color:var(--terracotta-deep)}
.sheet-head .close{border:var(--ink-line);background:var(--card);width:38px;height:38px;border-radius:50%;font-size:20px;cursor:pointer;font-weight:900;color:var(--ink)}
.search{width:100%;border:2px solid rgba(59,42,33,.14);background:var(--card);border-radius:14px;padding:13px 16px;font-family:'Nunito';font-weight:700;font-size:16px;box-shadow:var(--shadow-sm);margin-bottom:14px}
.search:focus{outline:3px solid var(--saffron)}
.food-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(96px,1fr));gap:10px}
.food-btn{border:2px solid rgba(59,42,33,.12);cursor:pointer;background:var(--card);border-radius:16px;padding:12px 6px;box-shadow:var(--shadow-sm);font-family:'Fraunces',serif;font-weight:600;transition:transform .08s;position:relative;text-align:center}
.food-btn:active{transform:translateY(2px)}
.food-btn .em{font-size:32px;display:block}
.food-btn .nm{font-size:12.5px;margin-top:4px;line-height:1.1;color:var(--ink)}
.food-btn .note{font-size:10.5px;font-weight:700;color:var(--ink-soft);margin-top:3px;line-height:1.15;display:block;font-family:'Nunito',sans-serif}
.food-btn .tried{position:absolute;top:6px;right:8px;font-size:12px}
.food-btn.picked{box-shadow:0 0 0 3px var(--teal), var(--shadow-sm)}
.cuisine-tabs{display:flex;gap:7px;overflow-x:auto;padding-bottom:12px;margin:0 -2px}
.cuisine-tabs::-webkit-scrollbar{display:none}
.cuisine-tabs button{flex:0 0 auto;border:var(--ink-line);cursor:pointer;background:var(--card);box-shadow:var(--shadow-sm);
  border-radius:13px;padding:9px 13px;font-family:'Fraunces',serif;font-weight:600;font-size:14px;color:var(--ink-soft)}
.cuisine-tabs button.on{color:var(--ink);box-shadow:0 0 0 2px var(--terracotta), var(--shadow-sm)}
.cuisine-note{font-weight:700;color:var(--ink-soft);font-size:13.5px;margin:0 2px 12px}
.section-lbl{font-family:'Fraunces',serif;font-weight:600;color:var(--ink-soft);margin:16px 2px 8px;font-size:14px;text-transform:uppercase;letter-spacing:.08em;display:flex;align-items:center;gap:8px}
.section-lbl::before{content:"";width:16px;height:16px;flex:0 0 auto;background:var(--star);background-size:contain;background-repeat:no-repeat;opacity:.75}
.newfood{background:var(--card);border-radius:18px;padding:14px;box-shadow:var(--shadow-sm);margin-top:6px;border:2px solid rgba(59,42,33,.12)}
.newfood input[type=text]{width:100%;border:2px solid rgba(59,42,33,.14);background:var(--paper-2);border-radius:12px;padding:12px 14px;font-family:'Nunito';font-weight:700;font-size:16px;margin-bottom:10px}
.newfood input:focus{outline:3px solid var(--saffron)}
.emoji-row{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:10px}
.emoji-row button{border:1.5px solid rgba(59,42,33,.12);background:var(--paper-2);border-radius:11px;width:44px;height:44px;font-size:24px;cursor:pointer}
.emoji-row button.sel{box-shadow:0 0 0 3px var(--cobalt)}
.primary{border:2px solid rgba(59,42,33,.16);cursor:pointer;background:var(--teal);color:#FFF6EA;font-family:'Fraunces',serif;font-weight:700;font-size:17px;padding:13px 18px;border-radius:14px;width:100%;box-shadow:0 4px 0 var(--teal-deep)}
.primary:active{transform:translateY(3px);box-shadow:0 1px 0 var(--teal-deep)}

.foot{text-align:center;color:var(--ink-soft);font-weight:700;font-size:13px;margin-top:28px}
.toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);opacity:0;background:var(--ink);color:#FFF6EA;font-family:'Fraunces',serif;font-weight:600;font-size:16px;padding:12px 20px;border-radius:14px;z-index:80;transition:.25s;pointer-events:none;text-align:center;max-width:90%}
.toast.show{opacity:1;transform:translateX(-50%)}

/* Big reward reveal. Fills the screen so a young child cannot miss it. */
.reward-pop{position:fixed;inset:0;z-index:100;display:none;align-items:center;justify-content:center;
  padding:24px;cursor:pointer;text-align:center;
  background:radial-gradient(120% 90% at 50% 32%, var(--saffron) 0%, var(--terracotta) 55%, var(--terracotta-deep) 100%)}
.reward-pop::before{content:"";position:absolute;inset:0;opacity:.12;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Cg fill='none' stroke='%23FFF3E2' stroke-width='1.6'%3E%3Cpath d='M30 3 L57 30 L30 57 L3 30 Z'/%3E%3Ccircle cx='30' cy='30' r='8'/%3E%3C/g%3E%3C/svg%3E")}
.reward-pop.show{display:flex}
.reward-pop-card{color:#FFF6EA;position:relative;animation:pop-in .4s cubic-bezier(.2,1.3,.5,1)}
.reward-pop .big-reward{font-size:150px;line-height:1;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));
  animation:reward-bounce 1s ease-in-out infinite}
.reward-pop .reward-title{font-family:'Fraunces',serif;font-weight:700;font-size:38px;margin-top:8px;
  font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;text-shadow:0 3px 0 rgba(0,0,0,.14)}
.reward-pop .reward-sub{font-family:'Fraunces',serif;font-weight:600;font-size:23px;opacity:.97;margin-top:4px}
.reward-pop .reward-count{font-family:'Nunito',sans-serif;font-weight:800;font-size:18px;margin-top:16px;
  display:inline-block;background:rgba(255,246,234,.2);padding:9px 18px;border-radius:16px}
.reward-pop .reward-tap{font-family:'Nunito',sans-serif;font-weight:700;font-size:13px;opacity:.85;margin-top:18px}
@keyframes pop-in{from{transform:scale(.5);opacity:0}to{transform:scale(1);opacity:1}}
@keyframes reward-bounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-16px)}}

@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}
  .meal,.day-tab.active,.star-item{transform:none!important}}