/* Layout: one-thumb phone app. Home = daily plate + level path; play = HUD over a 6×6 board. Brand tokens from Min side (rose, Playfair + Inter). */
:root{
  --bg:#f3eadf; --surface:#fffcf7; --ink:#3b2430; --muted:#846271;
  --accent:#c4526c; --accent-deep:#9c4258; --accent-2:#ee8a9e; --accent-ink:#ffffff;
  --line:#e9d9cf; --board:#e3cbc1; --good:#3f8a5a; --gold:#d99a1e;
  --t0:#addb94; --t1:#d2c3f3; --t2:#fab5bf; --t3:#f4d07e; --t4:#a9cff6; --t5:#aadcd2; --t6:#f7c8a3; --kos:#f1d39b;
  --display:'Playfair Display', Georgia, 'Times New Roman', serif;
  --body:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --dur:.22s; --pop:.2s;
  color-scheme:light;
  /* notched phones (viewport-fit=cover) */
  padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#1a191d; --surface:#26242b; --ink:#f3eff1; --muted:#b2a9ae;
  --accent:#f09aab; --accent-deep:#b35a72; --accent-2:#d9687f; --accent-ink:#2a1720;
  --line:#3a373f; --board:#222027; --good:#7fcf97; --gold:#f0bf52;
  --t0:#3b6b35; --t1:#56478a; --t2:#8a3a48; --t3:#80651f; --t4:#245c86; --t5:#2a6460; --t6:#86512c; --kos:#5a4322;
  color-scheme:dark;
}}
:root[data-theme="dark"]{
  --bg:#1a191d; --surface:#26242b; --ink:#f3eff1; --muted:#b2a9ae;
  --accent:#f09aab; --accent-deep:#b35a72; --accent-2:#d9687f; --accent-ink:#2a1720;
  --line:#3a373f; --board:#222027; --good:#7fcf97; --gold:#f0bf52;
  --t0:#3b6b35; --t1:#56478a; --t2:#8a3a48; --t3:#80651f; --t4:#245c86; --t5:#2a6460; --t6:#86512c; --kos:#5a4322;
  color-scheme:dark;
}
*,*::before,*::after{box-sizing:border-box}
html,body{min-height:100%}
html{scroll-padding-top:env(safe-area-inset-top,0px)}
body{margin:0;background:var(--bg);color:var(--ink);font:400 16px/1.5 var(--body);-webkit-font-smoothing:antialiased}
button{font:inherit;color:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
button:focus-visible,.board:focus-visible{outline:3px solid var(--accent);outline-offset:3px}
/* must beat display:flex/grid on #home, #game and .overlay, or hidden screens stay visible */
[hidden]:not([hidden=until-found i]){display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.app{max-width:480px;margin-inline:auto;padding-inline:16px;padding-block:16px 40px}
.eyebrow{margin:0;font:600 .72rem/1.2 var(--body);letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}

/* ---------- home ---------- */
#home{display:flex;flex-direction:column;gap:24px}
.home-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.home-head .icon{flex:none;margin-top:6px}
h1{margin:4px 0 4px;font:italic 700 2.4rem/1.05 var(--display);color:var(--accent);text-wrap:balance}
.lede{margin:0;color:var(--muted);font-size:.98rem}

.daily{background:var(--surface);border:1px solid var(--line);border-radius:26px;padding:20px;display:flex;flex-direction:column;gap:10px;box-shadow:0 10px 30px -14px color-mix(in srgb,var(--accent) 45%,transparent)}
.daily-top{display:flex;justify-content:space-between;align-items:center;gap:8px;flex-wrap:wrap}
.streak{font:600 .85rem var(--body);color:var(--accent);background:var(--board);padding:4px 10px;border-radius:999px}
.daily h2{margin:0;font:700 1.65rem/1.1 var(--display)}
.plate{margin:0;font-size:1.35rem;display:flex;gap:14px;flex-wrap:wrap}
.plate span{display:inline-flex;align-items:center;gap:4px}
.plate small{font:600 1rem var(--body);color:var(--muted)}
.daily-sub{margin:0;color:var(--muted);font-size:.95rem}
.daily-body{display:flex;justify-content:space-between;align-items:center;gap:14px}
.daily-body .col{gap:6px;min-width:0}
.daily-body .dish{flex:none;width:92px}
.row{display:flex;gap:10px;flex-wrap:wrap}
.col{display:flex;flex-direction:column;gap:10px}

.btn{min-height:52px;padding:0 24px;border:none;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 1.05rem var(--body);box-shadow:0 4px 0 var(--accent-deep);transition:transform .08s,box-shadow .08s}
.btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--accent-deep)}
.btn.ghost{background:transparent;color:var(--accent);box-shadow:none;border:2px solid var(--line)}

.map-title{margin:4px 0 -8px;font:700 1.25rem var(--display)}
.node.cur .next.start{background:var(--good)}
.map{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.node{display:flex;align-items:center;gap:14px;margin-left:calc(var(--o) * 16%)}
.node button{flex:none;width:62px;height:62px;border-radius:50%;border:none;background:var(--accent);color:var(--accent-ink);font:700 1.4rem var(--display);box-shadow:0 5px 0 var(--accent-deep)}
.node.locked button{background:var(--line);color:var(--muted);box-shadow:none;cursor:default;font-size:1.1rem}
.node.done button{background:var(--surface);color:var(--accent);border:3px solid var(--accent-2);box-shadow:none}
.node.cur button{width:68px;height:68px;animation:ring 1.6s ease-out infinite}
.node.cur b{color:var(--accent)}
.next{display:inline-block;margin-left:8px;padding:2px 9px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:600 .9rem/1.4 var(--body);vertical-align:middle;animation:beat 1.6s ease-in-out infinite}
.node div{display:flex;flex-direction:column;min-width:0}
.node b{font-weight:600;line-height:1.25}
.node small{color:var(--muted);font-size:.85rem}
.node.locked b{color:var(--muted)}
.stars{font-style:normal;letter-spacing:2px;color:var(--line);font-size:.95rem}
.stars .on{color:var(--gold)}
.foot{margin:8px 0 0;font-size:.8rem;color:var(--muted);text-align:center}
.book-head{display:flex;align-items:center;gap:14px}
.book-head .map-title{margin:0}
.book-head .lede{margin-top:2px;font-size:.95rem}
.bookbtn{flex:none;background:none;border:none;padding:4px;border-radius:12px}
.bookicon{position:relative;display:block;width:60px;height:58px;perspective:420px}
.bookicon .pages{position:absolute;inset:3px 0 3px 6px;border-radius:2px 5px 5px 2px;background:repeating-linear-gradient(90deg,#fff8ea 0 2px,#efe4d2 2px 3px);box-shadow:inset -3px 0 4px -3px rgba(0,0,0,.25)}
.bookicon .pages::after{content:'🍽️';position:absolute;inset:0;display:grid;place-items:center;font-size:22px;background:#fffbf1;border-radius:2px 5px 5px 2px;margin:0 2px 0 0}
.bookicon .cover{position:absolute;inset:0 2px 0 0;border-radius:3px 6px 6px 3px;background:linear-gradient(100deg,var(--accent-deep),var(--accent) 35%,var(--accent) 70%,var(--accent-deep));box-shadow:0 4px 10px -3px color-mix(in srgb,var(--ink) 45%,transparent),inset 6px 0 0 -3px color-mix(in srgb,var(--accent-deep) 80%,black);transform-origin:left center;transform:rotateY(0);transition:transform .7s cubic-bezier(.4,0,.2,1);display:grid;place-items:center;backface-visibility:hidden}
.bookicon .cover i{font:italic 700 .72rem/1 var(--display);color:#fff6e8;background:color-mix(in srgb,var(--accent-deep) 55%,transparent);padding:4px 6px;border-radius:3px;border:1px solid color-mix(in srgb,#fff6e8 55%,transparent)}
.bookicon .cover::after{content:'';position:absolute;right:9px;top:-1px;width:7px;height:17px;background:var(--gold);clip-path:polygon(0 0,100% 0,100% 100%,50% 75%,0 100%)}
.bookicon.open .cover{transform:rotateY(-155deg)}
.bookbtn:hover .cover,.bookbtn:focus-visible .cover{transform:rotateY(-18deg)}
.bookbtn:hover .bookicon.open .cover,.bookbtn:focus-visible .bookicon.open .cover{transform:rotateY(-155deg)}
.book{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px;animation:rise .4s cubic-bezier(.34,1.3,.64,1)}
.book li{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:12px 6px 10px}
.book .dish{width:60px}
.book b{font-size:.9rem;font-weight:600;line-height:1.2;text-wrap:balance}
.book .stars{font-size:.85rem}
.book .empty{grid-column:1/-1;color:var(--muted);font-size:.95rem;background:none;border:1px dashed var(--line);padding:18px}
.plate.center{justify-content:center}
.link{align-self:center;background:none;border:none;color:var(--accent);font:600 .95rem var(--body);text-decoration:underline;text-underline-offset:3px;padding:6px 12px;min-height:44px}

/* ---------- tutorial: looping mini-boards built from the real tile styles ---------- */
.mini{position:relative;width:100%;aspect-ratio:6 / var(--rows);container-type:inline-size;background:var(--board);border-radius:16px;overflow:hidden;--dur:.5s;--pop:.4s}
.mini .tile,.mini .finger,.mini .spark{height:calc(100% / var(--rows))}
.mini .beam.h{height:calc(100% / var(--rows));top:calc(var(--i) * 100% / var(--rows))}
.finger{position:absolute;left:0;top:0;width:calc(100% / 6);display:grid;place-items:center;z-index:6;pointer-events:none;transform:translate(calc(var(--x) * 100%),calc(var(--y) * 100%));transition:transform .5s ease-in-out,opacity .3s}
.finger::before{content:'';width:50%;height:50%;border-radius:50%;border:3px solid var(--surface);background:color-mix(in srgb,var(--accent) 45%,transparent);box-shadow:0 2px 10px color-mix(in srgb,var(--ink) 35%,transparent)}
.tut-text{min-height:3.2em;text-wrap:balance}
.dots{display:flex;gap:7px;justify-content:center}
.dots i{width:9px;height:9px;border-radius:50%;background:var(--line)}
.dots i.on{background:var(--accent)}
.row.center{justify-content:center}

/* ---------- game ---------- */
#game{display:flex;flex-direction:column;gap:14px}
.bar{display:grid;grid-template-columns:44px 1fr 44px;align-items:center}
.bar h2{margin:0;text-align:center;font:700 1.2rem/1.2 var(--display);text-wrap:balance}
.icon{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);font-size:1.3rem;line-height:1}
.icon[aria-pressed="false"]{color:var(--muted);text-decoration:line-through}
.hud{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center}
.moves{justify-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;background:var(--surface);border:1px solid var(--line);border-radius:18px;padding:6px 12px;min-width:76px}
.moves b{font:700 2rem/1 var(--body);font-variant-numeric:tabular-nums}
.moves small{font-size:.7rem;color:var(--muted)}
.moves.low b{color:var(--accent);animation:beat 1s ease-in-out infinite}
.goals{justify-self:end;list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px}
.goals li{display:flex;align-items:center;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:3px 12px 3px 7px}
.goals .ge{font-size:1.2rem;line-height:1}
.goals .ge.multi{font-size:.9rem;letter-spacing:-.12em;margin-right:.12em}
.goals b{font:700 1.1rem var(--body);font-variant-numeric:tabular-nums;min-width:1.2em}
.goals li.done{border-color:var(--good)}
.goals li.done b{color:var(--good)}
.goals li.bump .ge{animation:bump .25s}

/* the plate: one wedge per goal, food fills out from the centre */
.dish{width:clamp(84px, 26vw, 108px)}
.dish svg{display:block;width:100%;height:auto;overflow:visible;filter:drop-shadow(0 6px 10px color-mix(in srgb,var(--accent) 22%,transparent))}
.dish .rim{fill:var(--surface);stroke:var(--line);stroke-width:2}
.dish .well{fill:none;stroke:var(--line);stroke-width:1}
.dish .sep{stroke:var(--surface);stroke-width:1.5}
.dish .food{transform-box:fill-box;transform-origin:center;transition:transform .45s cubic-bezier(.34,1.3,.64,1)}
.dish text{transform-box:fill-box;transform-origin:center;opacity:.55;transition:opacity .3s}
.dish text.full{opacity:1;animation:bump .4s}
/* several sorts fill one wedge (egg/fish/chicken → protein): their emoji take turns */
.dish text.alt{opacity:0;transition:opacity .7s}
.dish text.alt.on{opacity:.55}
.dish text.alt.on.full{opacity:1}
.dish.big{width:132px;margin-inline:auto}
.dish.big .food{transition-duration:.9s}
.board.glow{box-shadow:0 0 0 4px var(--accent-2),0 0 28px color-mix(in srgb,var(--accent) 55%,transparent);transition:box-shadow .2s}
.fly{position:fixed;z-index:8;pointer-events:none;translate:-50% -50%;line-height:1;transition:transform .55s cubic-bezier(.5,0,.3,1),opacity .55s ease-in}
.confetti{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:20}
.finale{position:absolute;left:8px;right:8px;top:8px;z-index:6;display:flex;flex-direction:column;align-items:center;gap:4px;padding:12px 14px;border-radius:18px;background:color-mix(in srgb,var(--surface) 92%,transparent);backdrop-filter:blur(6px);box-shadow:0 10px 30px -12px color-mix(in srgb,var(--ink) 50%,transparent);text-align:center;pointer-events:none;animation:rise .35s cubic-bezier(.34,1.56,.64,1)}
.finale p{margin:0;font:italic 700 1.1rem/1.3 var(--display);color:var(--accent);text-wrap:balance}
.finale .bigstars{font-size:2.2rem}
.finale small{color:var(--muted);font-size:.9rem}
.cheerline{font-style:italic;font-family:var(--display);font-size:1.1rem;color:var(--ink)}
.stat{font-size:.9rem;color:var(--muted)}
.stage{position:relative}
.board{position:relative;width:min(100%, calc(100vh - 290px));width:min(100%, calc(100dvh - 290px));min-width:min(100%, 260px);margin-inline:auto;aspect-ratio:1;container-type:inline-size;background:var(--board);border-radius:22px;overflow:hidden;touch-action:none;user-select:none;-webkit-user-select:none}
.board.nope{animation:shake .28s}
.tile{position:absolute;left:0;top:0;width:calc(100% / 6);height:calc(100% / 6);padding:3px;transform:translate(calc(var(--x) * 100%),calc(var(--y) * 100%));transition:transform var(--dur) cubic-bezier(.34,1.35,.64,1)}
.tile>i{position:relative;display:grid;place-items:center;width:100%;height:100%;border-radius:24%;font-style:normal;font-size:calc(100cqi / 6 * .54);line-height:1;box-shadow:inset 0 -3px 0 color-mix(in srgb,var(--ink) 16%,transparent),0 1px 2px color-mix(in srgb,var(--ink) 12%,transparent);transition:transform .12s}
.tile[data-t="0"]>i{background:var(--t0)} .tile[data-t="1"]>i{background:var(--t1)} .tile[data-t="2"]>i{background:var(--t2)}
.tile[data-t="3"]>i{background:var(--t3)} .tile[data-t="4"]>i{background:var(--t4)}
.tile[data-t="5"]>i{background:var(--t5)} .tile[data-t="6"]>i{background:var(--t6)}
.tile[data-t="kos"]>i{background:radial-gradient(circle at 32% 28%,color-mix(in srgb,var(--surface) 55%,transparent) 0 18%,transparent 19%),var(--kos);box-shadow:inset 0 0 0 3px var(--gold);animation:glow 1.4s ease-in-out infinite alternate}
.tile.sp-h>i,.tile.sp-v>i{box-shadow:inset 0 0 0 3px var(--accent-2)}
.tile.sp-h>i::after,.tile.sp-v>i::after{content:'↔';position:absolute;right:4%;bottom:4%;width:36%;height:36%;display:grid;place-items:center;border-radius:50%;background:var(--accent);color:var(--accent-ink);font:700 calc(100cqi / 6 * .2)/1 var(--body)}
.tile.sp-v>i::after{content:'↕'}
.tile.born>i{animation:born .3s cubic-bezier(.34,1.56,.64,1)}
.tile.sel>i{transform:scale(1.1);box-shadow:0 0 0 3px var(--accent),0 6px 14px -4px color-mix(in srgb,var(--accent) 60%,transparent)}
.tile.cur>i{outline:3px dashed var(--ink);outline-offset:-3px}
.tile.hint>i{animation:wig .9s ease-in-out infinite}
.tile.gone{z-index:2}
.tile.gone>i{animation:gone var(--pop) ease-out forwards;animation-delay:var(--d,0s)}
.tile.merge{z-index:3}
.tile.land>i{animation:land .22s ease-out}
/* --i = row/column it clears, --o = where it fires from */
.beam{position:absolute;pointer-events:none;z-index:3;background:color-mix(in srgb,var(--accent-2) 70%,transparent);animation:.5s ease-out both}
.beam.h{left:0;right:0;height:calc(100% / 6);top:calc(var(--i) * 100% / 6);transform-origin:calc((var(--o) + .5) * 100% / 6) 50%;animation-name:sweepx}
.beam.v{top:0;bottom:0;width:calc(100% / 6);left:calc(var(--i) * 100% / 6);transform-origin:50% calc((var(--o) + .5) * 100% / 6);animation-name:sweepy}
.spark{position:absolute;left:0;top:0;width:calc(100% / 6);height:calc(100% / 6);display:grid;place-items:center;pointer-events:none;z-index:4;transform:translate(calc(var(--x) * 100%),calc(var(--y) * 100%));transition:transform .3s cubic-bezier(.3,0,.7,1)}
.spark::before{content:'';width:22%;height:22%;border-radius:50%;background:var(--gold);box-shadow:0 0 8px 2px var(--gold)}
.crumbs{position:absolute;left:0;top:0;width:calc(100% / 6);height:calc(100% / 6);pointer-events:none;z-index:3;transform:translate(calc(var(--x) * 100%),calc(var(--y) * 100%))}
.crumbs i{position:absolute;left:44%;top:44%;width:12%;height:12%;border-radius:50%;background:color-mix(in srgb,var(--c) 60%,var(--ink));animation:crumb .55s ease-out both}
#say{position:absolute;left:0;right:0;top:38%;z-index:5;text-align:center;pointer-events:none;opacity:0;font:italic 700 2.3rem/1.1 var(--display);color:var(--accent);text-shadow:0 2px 0 var(--surface),0 0 20px var(--surface),0 0 8px var(--surface)}
#say.on{animation:say 1.1s ease-out forwards}
.tip{margin:0;text-align:center;color:var(--muted);font-size:.95rem;min-height:3em;text-wrap:balance}

/* ---------- result ---------- */
.overlay{position:fixed;inset:0;z-index:10;display:grid;place-items:center;padding:16px;background:color-mix(in srgb,var(--ink) 45%,transparent)}
.card{width:100%;max-width:360px;background:var(--surface);border-radius:28px;padding:28px 22px 22px;text-align:center;display:flex;flex-direction:column;gap:12px;animation:rise .35s cubic-bezier(.34,1.56,.64,1)}
.card h2{margin:0;font:700 2rem/1.1 var(--display);color:var(--accent);text-wrap:balance}
.card p{margin:0}
.bigstars{display:flex;justify-content:center;gap:6px;font-size:3.2rem;line-height:1;color:var(--line)}
.bigstars .on{color:var(--gold);animation:star .5s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--d) * .22s)}
.sharebox{width:100%;min-height:90px;border:1px solid var(--line);border-radius:12px;padding:10px;font:inherit;background:var(--bg);color:var(--ink);resize:none}

@keyframes born{from{transform:scale(0)}}
@keyframes gone{to{transform:scale(1.35);opacity:0}}
@keyframes wig{0%,100%{transform:rotate(0)}25%{transform:rotate(-9deg) scale(1.05)}75%{transform:rotate(9deg) scale(1.05)}}
@keyframes glow{to{box-shadow:inset 0 0 0 3px var(--gold),0 0 14px var(--gold)}}
@keyframes sweepx{0%{transform:scaleX(0);opacity:1}50%{transform:none;opacity:.9}100%{transform:none;opacity:0}}
@keyframes sweepy{0%{transform:scaleY(0);opacity:1}50%{transform:none;opacity:.9}100%{transform:none;opacity:0}}
@keyframes land{35%{transform:scaleY(.84) scaleX(1.1) translateY(7%)}}
@keyframes crumb{0%{opacity:0;transform:none}15%{opacity:1}100%{opacity:0;transform:translate(calc(var(--dx) * 1cqi),calc(var(--dy) * 1cqi)) scale(.4)}}
@keyframes say{0%{opacity:0;transform:translateY(12px) scale(.8)}18%{opacity:1;transform:none}75%{opacity:1}100%{opacity:0;transform:translateY(-18px)}}
@keyframes shake{25%{transform:translateX(-6px)}75%{transform:translateX(6px)}}
@keyframes bump{50%{transform:scale(1.35)}}
@keyframes beat{50%{transform:scale(1.12)}}
@keyframes ring{0%{transform:scale(1);box-shadow:0 5px 0 var(--accent-deep),0 0 0 0 color-mix(in srgb,var(--accent) 55%,transparent)}50%{transform:scale(1.06)}100%{transform:scale(1);box-shadow:0 5px 0 var(--accent-deep),0 0 0 18px transparent}}
@keyframes rise{from{transform:translateY(30px) scale(.94);opacity:0}}
@keyframes star{from{transform:scale(0) rotate(-40deg)}}
@media (prefers-reduced-motion: reduce){
  :root{--dur:.01s;--pop:.01s}
  *,*::before,*::after{animation-duration:.01s!important;animation-iteration-count:1!important}
}