:root{--ink:#3b282d;--muted:#766764;--rasp:#ab3c61;--pink:#f5afc3;--cream:#fcf8ef;--edge:#513a38;--pixel:"Kitchen Pixel","Courier New",monospace;color-scheme:light;font-family:"Trebuchet MS","Segoe UI","Microsoft YaHei",sans-serif;color:var(--ink);background:var(--cream)}
*{box-sizing:border-box}body{margin:0;min-width:280px;background-image:radial-gradient(#bc9d7621 .85px,transparent 1px);background-size:8px 8px}button,a{color:inherit}button{font:inherit;cursor:pointer}button:focus-visible,a:focus-visible,#board:focus-visible{outline:3px solid #9e456a;outline-offset:5px}button:active{translate:0 1px}svg{width:18px;height:18px;fill:currentColor;flex:none}.symbols{position:absolute;width:0;height:0;overflow:hidden}.topbar,main,footer{width:min(100% - 72px,1000px);margin:auto}header{border-bottom:2px solid #503c36;background:#fffaf0}.topbar{height:76px;display:flex;align-items:center;justify-content:space-between}.brand{display:inline-flex;align-items:center;gap:12px;font:22px/1.4 var(--pixel);text-decoration:none}.brand-second{color:#a64060}.brand-mark{display:grid;place-items:center;height:44px;width:42px}.brand img{width:42px;height:42px;object-fit:contain;image-rendering:pixelated}.header-tools,.text-btn,.icon-btn,.lang-btn,.button{display:flex;align-items:center;justify-content:center}.header-tools{gap:17px}.header-tools i{height:18px;border-left:1px solid #d7c8b9}.header-tools button{border:0;background:none;padding:6px 1px;font-weight:650}.text-btn{gap:7px;font-size:14px}.icon-btn svg{width:20px;height:20px}.header-tools .lang-btn{min-width:28px;height:28px;border:1px solid #aa968a;border-radius:4px;font-size:13px}.intro{display:flex;align-items:center;justify-content:space-between;gap:15px;margin:42px 0 26px}h1,h2,p{margin:0}h1{font:clamp(31px,4.2vw,52px)/1.17 var(--pixel);letter-spacing:-1px;position:relative;width:fit-content}.title-number{color:var(--rasp)}.sparkles{position:absolute;color:#ce8350;font:22px/1 Georgia,serif;right:-32px;top:-6px;transform:rotate(8deg)}.sparkles b{position:absolute;font-size:12px;top:18px;left:12px}.intro p{margin-top:11px;color:var(--muted);font-size:15px;line-height:1.55}.button{gap:10px;padding:12px 18px;border:2px solid var(--edge);border-radius:5px;background:#fffaf0;font-weight:750;font-size:15px;box-shadow:3px 3px 0 var(--edge)}.button:hover{filter:brightness(.96)}.button.primary{background:var(--pink)}.button svg{width:16px;height:16px}.game-layout{display:grid;grid-template-columns:minmax(0,1.23fr) minmax(0,1fr);gap:30px;align-items:start}.board-frame{padding:11px;background:#cfac90;border:3px solid var(--edge);border-radius:8px;box-shadow:4px 5px 0 var(--edge),inset 0 2px 0 #f8dec3;position:relative}.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-template-rows:repeat(4,minmax(0,1fr));gap:9px;width:100%;aspect-ratio:1;outline:none;touch-action:none;user-select:none;-webkit-user-select:none}.cell{background:#ead7bf;border:1.5px solid #b99477;border-radius:5px;position:relative;display:grid;place-items:center;box-shadow:inset 0 2px 0 #d9c0a7}.cell.full{background:var(--tile,#fff3e1);border:2px solid #856d60;box-shadow:0 2px 0 #ab856c,inset 0 2px 0 #fff9}.cell img{image-rendering:pixelated;width:75%;height:75%;object-fit:contain;pointer-events:none}.cell .tile-number{position:absolute;right:6px;bottom:5px;font:12px/1 var(--pixel);color:#654039}.board.hide-numbers .tile-number{display:none}.cell.spawn img{animation:pop .16s ease-out}.cell.merged img{animation:bump .19s ease-out}@keyframes pop{from{transform:scale(.55)}to{transform:scale(1)}}@keyframes bump{50%{transform:scale(1.13)}}.move-hint{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:19px 1px 0;color:#766962;font-size:12px}.desktop-hint,.mobile-hint{align-items:center;gap:3px}.desktop-hint{display:flex}.desktop-hint>span:last-child{margin-left:4px}.mobile-hint{display:none}.key{width:21px;height:21px;border:1px solid #af9b8c;border-bottom-width:2px;border-radius:3px;background:#fffaf1;display:grid;place-items:center;font:14px/1 monospace;color:#64514b}.number-toggle{border:0;padding:5px 0;background:none;display:flex;align-items:center;gap:6px;font-size:12px;color:#6e5e59}.switch{width:23px;height:13px;border:1px solid #775e58;background:#c4b8a9;border-radius:4px;padding:2px}.switch:after{display:block;content:"";background:#fff7ed;width:7px;height:7px;border-radius:1px}.number-toggle[aria-pressed=true] .switch{background:#b8687c}.number-toggle[aria-pressed=true] .switch:after{margin-left:auto}aside{display:grid;gap:17px}.scores{display:grid;grid-template-columns:1fr 1fr;gap:15px}.score-card,.panel{border:2px solid var(--edge);border-radius:6px;box-shadow:3px 3px 0 #8b7767;background:#fffbf3}.score-card{padding:13px 17px 12px;background:#f9e0e7}.score-card.best{background:#f7e9b9}.score-label{display:flex;gap:8px;align-items:center;font-size:11px;letter-spacing:1.2px;text-transform:uppercase;font-weight:800}.score-label svg{width:16px;height:16px;color:#9e4b69}.best .score-label svg{color:#9b6629}.score-card strong{font:27px/1.15 var(--pixel);display:block;margin-top:8px}.panel{padding:18px}.panel h2{font:19px/1.25 var(--pixel);letter-spacing:-.3px;display:flex;align-items:center;gap:10px}.panel h2 svg{color:#ab546a;width:18px;height:18px}.themes h2{margin-bottom:14px}#themes{display:grid;gap:8px}.theme{display:flex;align-items:center;width:100%;border:1.5px solid #c8baaa;border-radius:4px;gap:12px;padding:6px 11px;text-align:left;background:#fbf6e9;min-height:55px}.theme[data-theme=fruit]{background:#f1f3e6}.theme[data-theme=sushi]{background:#f9efe4}.theme[aria-pressed=true]{background:#f9e2e8;border:2px solid #ad5871;padding:5.5px 10.5px;box-shadow:1px 1px 0 #bf8c93}.theme[data-theme=fruit][aria-pressed=true]{background:#e3efd6;border-color:#72885c}.theme[data-theme=sushi][aria-pressed=true]{background:#f9dfc8;border-color:#ba8253}.theme:hover{filter:brightness(.98)}.theme img{width:39px;height:39px;image-rendering:pixelated;object-fit:contain}.theme-name{display:block;font-size:15px;font-weight:760}.theme small{display:block;color:#78685f;font-size:11.5px;margin-top:2px}.theme-check{margin-left:auto;width:18px;height:18px;display:grid;place-items:center;background:#ac4969;color:white;border-radius:3px}.theme-check svg{width:13px;height:13px}footer{border-top:1px dashed #bdaea0;margin-top:38px;display:flex;justify-content:space-between;padding:18px 0 24px;font-size:12px;color:#89776c}.footer-brand{font:12px/1.2 var(--pixel)}dialog{width:min(440px,calc(100% - 32px));border:2px solid var(--edge);border-radius:8px;box-shadow:5px 5px 0 var(--edge);padding:0;background:#fff9ed;color:var(--ink);max-height:85dvh}dialog::backdrop{background:#31262374}#modal-inner{padding:24px}.modal-title{display:flex;gap:12px;align-items:center;justify-content:space-between;margin-bottom:16px}.modal-title h2,#outcome h2{font:24px/1.4 var(--pixel)}.close{background:none;border:0;font-size:23px;padding:2px 6px}.modal-copy{font-size:15px;line-height:1.65}.modal-copy p+p{margin-top:10px}.actions{display:flex;gap:12px;justify-content:flex-end;margin-top:20px}#outcome:not([hidden]){position:absolute;inset:0;display:grid;align-content:center;justify-items:center;gap:20px;padding:20px;text-align:center;background:#fff4dfeb;z-index:2}.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}[lang=zh-CN] h1,[lang=zh-CN] h2{font-family:var(--pixel),"Microsoft YaHei",sans-serif;font-weight:bold}
@media(min-width:1400px){.topbar,main,footer{width:1040px}.intro{margin-top:46px}.panel{padding:20px}.theme{min-height:61px}.score-card{padding:15px 18px}}
@media(max-width:820px){.topbar,main,footer{width:calc(100% - 40px)}.game-layout{gap:18px;grid-template-columns:1.15fr 1fr}.panel{padding:13px}.panel h2{font-size:16px}.move-hint .desktop-hint>span:last-child{display:none}.theme{gap:8px}.intro{margin:31px 0 22px}.board{gap:6px}.board-frame{padding:8px}aside{gap:13px}}
@media(max-width:650px){.topbar,main,footer{width:min(100% - 32px,480px)}.topbar{height:62px}.brand{font-size:16px;gap:6px}.brand-mark,.brand img{width:31px;height:31px}.header-tools{gap:10px}.header-tools i,.header-tools .text-btn span{display:none}.intro{align-items:flex-start;gap:5px;margin:25px 0 15px}h1{font-size:clamp(22px,6.2vw,32px)}.intro p{font-size:13px;margin-top:8px;max-width:260px}.sparkles{font-size:12px;right:-17px;top:-4px}.sparkles b{font-size:7px;top:11px;left:6px}.intro .button{padding:8px 10px;font-size:12px;gap:6px;margin-top:0}.button svg{width:13px;height:13px}.game-layout{display:flex;flex-direction:column;gap:17px}.play-area,aside{width:100%}aside{display:contents}.scores{order:-1;width:100%;gap:12px}.score-card{display:flex;align-items:center;justify-content:space-between;padding:8px 12px;gap:5px}.score-card strong{font-size:21px;margin:0}.score-label{font-size:9px;gap:5px}.score-label svg{width:14px;height:14px}.panel{width:100%;padding:16px}.play-area{order:0}.themes{order:1}.board{gap:7px}.move-hint{margin-top:12px}.mobile-hint{display:flex}.desktop-hint{display:none}.theme{min-height:55px}.panel h2{font-size:19px}footer{margin-top:26px}.tile-number{font-size:10px}}
@media(prefers-reduced-motion:reduce){*,*:after{animation:none!important;transition:none!important}}

.calorie-card{position:relative}
#kcal-feedback{position:absolute;right:10px;top:8px;pointer-events:none}
.kcal-gain{display:inline-block;color:#973354;background:#f9e0e7;font:15px/1.2 var(--pixel);animation:calorie-rise 950ms ease-out both}
@keyframes calorie-rise{0%{opacity:0;transform:translateY(8px)}15%,65%{opacity:1}100%{opacity:0;transform:translateY(-12px)}}
.score-card strong small{font:600 12px/1 "Segoe UI",sans-serif;color:#74574d}
@media(max-width:650px){.score-card{display:block}.score-card strong{margin-top:5px;font-size:clamp(17px,4.6vw,21px)}.score-card strong small{font-size:10px}}

.guide {
  margin-top: 28px;
}
.guide-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin: 26px 0 12px;
  font-size: 14px;
}
.guide-links a { color: #84425a; text-underline-offset: 3px; }
.guide-links + .guide { margin-top: 0; }
.reading-panel { margin-top: 22px; }
.reading-panel p { max-width: 80ch; margin: 10px 0 0; line-height: 1.65; }
.reading-panel h3 { font-size: 17px; margin: 20px 0 0; }
.intro .button { flex-shrink: 0; }
.guide-note {
  margin: 6px 0 16px;
  color: var(--muted);
  font-size: 13px;
}
.recipe-table {
  width: 100%;
  table-layout: fixed;
  border-spacing: 0;
}
.recipe-table th {
  padding: 11px 12px;
  text-align: left;
  font-size: 15px;
  border-block: 1px solid #cbb8a8;
}
.recipe-table th[data-series="cupcake"] { background: #f8e1e8; }
.recipe-table th[data-series="fruit"] { background: #e8eedb; }
.recipe-table th[data-series="sushi"] { background: #f8e6d3; }
.recipe-table :is(th, td) + :is(th, td) { border-left: 1px solid #dfd0bf; }
.recipe-table td {
  padding: 9px 12px;
  border-bottom: 1px dashed #dac8b6;
}
.recipe-table tr:last-child td { border-bottom: 0; }
.recipe-entry {
  display: grid;
  grid-template-columns: 40px minmax(0, 1fr) auto;
  align-items: center;
  gap: 8px;
}
.recipe-entry img {
  width: 40px;
  height: 40px;
  image-rendering: pixelated;
}
.recipe-info b { display: block; font-size: 14px; overflow-wrap: anywhere; }
.recipe-info small { display: block; margin-top: 3px; color: #795f54; font-size: 12px; }
.recipe-value { font: 14px/1.2 var(--pixel); }
@media (max-width: 720px) {
  .guide { padding: 12px 7px; }
  .guide h2, .guide-note { margin-left: 5px; }
  .recipe-table th { text-align: center; padding: 8px 3px; font-size: 13px; }
  .recipe-table td { padding: 10px 3px; }
  .recipe-entry { grid-template-columns: minmax(0, 1fr); justify-items: center; gap: 4px; text-align: center; }
  .recipe-entry img { width: 36px; height: 36px; }
  .recipe-value { grid-row: 2; font-size: 13px; }
  .recipe-info b { font-size: 12px; }
}