:root {
  --ink: #4d2f25;
  --ink-soft: #7c5646;
  --cream: #fff8e9;
  --paper: #fff3dc;
  --peach: #f3b07e;
  --peach-deep: #de7e57;
  --jade: #42ad72;
  --jade-dark: #217a50;
  --gold: #f4c34f;
  --plum: #8c4b87;
  --blue: #4cb7cf;
  font-family: "Microsoft YaHei", "PingFang SC", system-ui, sans-serif;
  color: var(--ink);
  background: #4c3027;
  font-synthesis: none;
}

* { box-sizing: border-box; }
html, body { width: 100%; min-height: 100%; margin: 0; overflow: hidden; }
button { font: inherit; color: inherit; border: 0; cursor: pointer; -webkit-tap-highlight-color: transparent; }
button:focus-visible { outline: 3px solid #fff; outline-offset: 2px; }

body {
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 30% 20%, rgba(255, 211, 151, .18), transparent 32rem),
    linear-gradient(135deg, #35231f, #674435 55%, #3d2923);
}

.game-shell {
  position: relative;
  width: min(100vw, 440px);
  height: min(100svh, 940px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  background: var(--peach);
  box-shadow: 0 28px 80px rgba(0, 0, 0, .42);
  user-select: none;
}

.restaurant {
  position: relative;
  flex: 0 0 46%;
  min-height: 355px;
  overflow: hidden;
  background-image: linear-gradient(to bottom, rgba(255, 220, 159, .1), rgba(63, 36, 22, .03)), url("./assets/restaurant-bg.png");
  background-size: cover;
  background-position: center 20%;
  border-bottom: 3px solid #bf7657;
}

.top-safe-area { height: max(env(safe-area-inset-top), 8px); }

.hud {
  position: relative;
  z-index: 20;
  height: 48px;
  margin: 0 7px;
  display: grid;
  grid-template-columns: 48px 1fr 1.05fr .82fr 34px;
  gap: 5px;
  align-items: center;
}

.avatar-button {
  position: relative;
  width: 45px;
  height: 45px;
  padding: 0;
  overflow: visible;
  border: 3px solid #fff6db;
  border-radius: 50%;
  background: #87c9a3;
  box-shadow: 0 2px 0 #7f4a37, 0 4px 10px rgba(61, 36, 24, .25);
}

.avatar-button .character-sprite { position: absolute; inset: 0; border-radius: 50%; }
.avatar-button b {
  position: absolute;
  left: 1px;
  bottom: -9px;
  padding: 1px 6px;
  color: white;
  font-size: 9px;
  border-radius: 7px;
  background: #745047;
  box-shadow: 0 1px 0 #fff3d0;
}

.resource {
  min-width: 0;
  height: 28px;
  padding: 0 5px 0 26px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid rgba(255, 248, 221, .92);
  border-radius: 17px;
  background: rgba(82, 50, 39, .8);
  box-shadow: 0 2px 0 rgba(73, 42, 31, .48), inset 0 1px rgba(255,255,255,.16);
  color: white;
  backdrop-filter: blur(5px);
}

button.resource { width: 100%; }
.resource strong { overflow: hidden; font-size: 12px; text-overflow: ellipsis; }
.resource-icon {
  position: absolute;
  left: -2px;
  top: 50%;
  width: 28px;
  height: 28px;
  transform: translateY(-50%);
  border: 2px solid #fff4ce;
  border-radius: 50%;
  box-shadow: 0 2px 0 rgba(88, 52, 33, .4);
}
.resource-icon.lightning { background: linear-gradient(145deg, #78ecf0, #32a6cd); }
.resource-icon.lightning::after {
  content: "";
  position: absolute;
  inset: 5px 7px;
  background: white;
  clip-path: polygon(54% 0, 100% 0, 62% 42%, 90% 42%, 20% 100%, 39% 55%, 10% 55%);
}
.resource-icon.coin { background: radial-gradient(circle at 38% 32%, #fff8a6 0 17%, #ffd34f 18% 62%, #cf8b21 64%); }
.resource-icon.coin::after { content: ""; position: absolute; inset: 7px; border: 2px solid rgba(151,94,24,.45); border-radius: 50%; }
.resource-icon.gem { border-radius: 9px; background: linear-gradient(145deg, #f197df, #974ea0 65%, #672e79); transform: translateY(-50%) rotate(45deg) scale(.72); }
.resource-add { position: absolute; right: -5px; width: 18px; height: 18px; display: grid; place-items: center; border: 2px solid white; border-radius: 50%; color: white; background: var(--jade); font-size: 13px; font-weight: 900; }
.round-button { width: 31px; height: 31px; padding-bottom: 9px; color: white; background: rgba(71,42,34,.78); border: 2px solid #fff4d7; border-radius: 50%; font-weight: 900; letter-spacing: 1px; }

.brand-sign {
  position: absolute;
  z-index: 8;
  top: 59px;
  left: 50%;
  transform: translateX(-50%) rotate(-1deg);
  min-width: 154px;
  height: 51px;
  padding: 7px 8px 5px 38px;
  border: 3px solid #f8d998;
  border-radius: 13px 13px 19px 19px;
  background: linear-gradient(#a64236, #7d2d2c);
  box-shadow: 0 4px 0 #5a2f26, 0 8px 18px rgba(67,37,25,.25), inset 0 0 0 2px rgba(255,255,255,.1);
  color: #fff4cb;
  text-align: center;
}
.brand-sign small { display: block; margin-bottom: -1px; font-size: 8px; letter-spacing: 3px; color: #f6c875; }
.brand-sign strong { display: block; font-family: "STKaiti", "KaiTi", serif; font-size: 17px; letter-spacing: 1px; white-space: nowrap; text-shadow: 0 2px #53251e; }
.brand-corn { position: absolute; left: 9px; top: 7px; width: 24px; height: 34px; border-radius: 55% 40% 60% 35%; background: repeating-linear-gradient(0deg, transparent 0 6px, rgba(167,104,26,.35) 7px 8px), #f3c641; transform: rotate(-17deg); }
.brand-corn::before, .brand-corn::after { content: ""; position: absolute; bottom: -4px; width: 17px; height: 25px; border-radius: 100% 0; background: #5a9d55; z-index: -1; }
.brand-corn::before { left: -8px; transform: rotate(-22deg); }
.brand-corn::after { right: -10px; transform: scaleX(-1) rotate(-24deg); }

.side-nav { position: absolute; z-index: 12; top: 118px; left: 6px; display: grid; gap: 4px; }
.side-nav button {
  width: 54px;
  min-height: 37px;
  padding: 3px 2px 3px 19px;
  position: relative;
  border: 2px solid #fff3cf;
  border-radius: 8px 12px 12px 8px;
  background: linear-gradient(90deg, #f6dfaa, #fff9df);
  box-shadow: 0 2px 0 #9a6744, 0 3px 8px rgba(65,37,25,.16);
  color: #7a3f2d;
  font-size: 8px;
  line-height: 1.2;
  font-weight: 800;
}
.side-nav button span { position: absolute; left: -2px; top: 4px; width: 23px; height: 25px; display: grid; place-items: center; border-radius: 7px 50% 50% 7px; background: var(--jade); color: white; font-family: "KaiTi"; font-size: 14px; }
.side-nav button:nth-child(2) span { background: #d77955; }
.side-nav button:nth-child(3) span { background: #9e6e9d; }

.goal-badge { position: absolute; z-index: 12; top: 121px; right: 8px; width: 55px; height: 58px; padding: 5px; border: 2px solid #fff1c0; border-radius: 50% 50% 13px 13px; background: linear-gradient(#ffe6a1, #efa957); box-shadow: 0 3px 0 #9c5939, 0 5px 12px rgba(61,36,22,.2); font-size: 9px; font-weight: 900; }
.goal-pie { width: 31px; height: 31px; margin: 0 auto 1px; display: block; border-radius: 50%; background: conic-gradient(var(--plum) 0 22%, #fef1bf 22%); border: 3px solid white; }

.scene-characters { position: absolute; z-index: 7; inset: 99px 0 58px; pointer-events: none; }
.character-sprite { display: block; background-image: url("./assets/characters.png"); background-repeat: no-repeat; background-size: 200% 200%; filter: drop-shadow(0 2px 1px rgba(54,33,24,.25)); }
.character-owner { background-position: 0 0; }
.character-granny { background-position: 100% 0; }
.character-boy { background-position: 0 100%; }
.character-girl { background-position: 100% 100%; }
.customer, .owner-in-scene { position: absolute; width: 78px; height: 78px; transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .3s; }
.customer .character-sprite, .owner-in-scene .character-sprite { width: 100%; height: 100%; }
.customer-granny { left: 19%; top: 13%; }
.customer-boy { right: 18%; top: 40%; }
.customer-girl { right: 3%; top: 4%; transform: scale(.9); }
.owner-in-scene { left: 42%; top: 47%; transform: scale(.74); }
.customer.served { animation: customer-happy .8s ease; }
@keyframes customer-happy { 0%,100%{transform:translateY(0)} 35%{transform:translateY(-12px) rotate(-4deg)} 60%{transform:translateY(-5px) rotate(4deg)} }
.order-bubble { position: absolute; z-index: 3; top: -17px; left: 50%; width: 38px; height: 38px; transform: translateX(-50%); display: grid; place-items: center; border: 3px solid white; border-radius: 12px 12px 12px 3px; background: #fffdf2; box-shadow: 0 2px 5px rgba(74,46,31,.22); opacity: 0; transition: opacity .2s; }
.order-bubble.visible { opacity: 1; }
.order-bubble .food-sprite { width: 29px; height: 29px; }

.satisfaction { position: absolute; z-index: 10; left: 67px; bottom: 66px; width: 129px; height: 19px; padding: 2px 5px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px; border: 2px solid #fff6dd; border-radius: 10px; background: rgba(69,45,36,.74); color: white; font-size: 8px; }
.satisfaction-track { height: 6px; overflow: hidden; border-radius: 5px; background: rgba(255,255,255,.35); }
.satisfaction-track i { display: block; width: 22%; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #f8d451, #73d47c); transition: width .5s; }

.order-strip { position: absolute; z-index: 15; left: 8px; right: 8px; bottom: 3px; height: 61px; padding: 4px 49px 4px 5px; border: 3px solid #f7e1b6; border-radius: 16px 16px 8px 8px; background: rgba(86,50,36,.82); box-shadow: 0 -3px 10px rgba(63,36,24,.16), inset 0 1px rgba(255,255,255,.2); backdrop-filter: blur(5px); }
.order-list { height: 100%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.order-card { min-width: 0; padding: 2px 3px; display: grid; grid-template-columns: 31px 1fr; grid-template-rows: 1fr 17px; column-gap: 2px; align-items: center; border-radius: 10px; background: #fff7df; box-shadow: inset 0 0 0 2px #e9c58d; position: relative; overflow: hidden; }
.order-card.waiting { filter: saturate(.45); opacity: .72; }
.order-card .food-sprite { grid-row: 1 / 3; width: 32px; height: 32px; }
.order-card .order-price { font-size: 9px; color: #8e5a37; white-space: nowrap; }
.order-card .order-price::before { content: ""; display: inline-block; width: 9px; height: 9px; margin-right: 2px; vertical-align: -1px; border-radius: 50%; background: #f2c64d; box-shadow: inset 0 0 0 2px #d79b2c; }
.order-card .serve-button { height: 17px; padding: 0 4px; border-radius: 8px; background: #d8ceb9; color: white; font-size: 9px; font-weight: 900; cursor: default; }
.order-card.ready .serve-button { background: linear-gradient(#6ed789, #35a968); box-shadow: 0 2px 0 #217a4f; cursor: pointer; animation: ready-pulse 1.25s infinite; }
@keyframes ready-pulse { 50% { filter: brightness(1.12) saturate(1.08); } }
.recipe-button { position: absolute; right: 4px; top: 4px; bottom: 4px; width: 43px; display: grid; place-items: center; align-content: center; gap: 1px; border-radius: 10px; background: #f8e7bc; box-shadow: inset 0 0 0 2px #d4a86d; font-size: 8px; font-weight: 800; }
.recipe-button span { width: 25px; height: 25px; display: grid; place-items: center; border-radius: 6px; background: #fffaf0; color: #a26346; font-size: 18px; line-height: 1; }

.merge-area { position: relative; z-index: 20; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; padding: 5px 8px max(4px, env(safe-area-inset-bottom)); background: linear-gradient(#f8c59b 0 2%, #f2ae81 30%, #e8966f); }
.merge-area::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: .18; background-image: linear-gradient(45deg, rgba(255,255,255,.45) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.45) 75%), linear-gradient(45deg, rgba(255,255,255,.45) 25%, transparent 25%, transparent 75%, rgba(255,255,255,.45) 75%); background-size: 32px 32px; background-position: 0 0, 16px 16px; }
.merge-panel-heading { height: 34px; padding: 1px 8px 2px; display: flex; justify-content: space-between; align-items: center; color: #704334; }
.merge-panel-heading div { display: grid; }
.merge-panel-heading small { font-size: 8px; color: #a25c44; }
.merge-panel-heading strong { font-family: "KaiTi", serif; font-size: 14px; }
.merge-panel-heading > span { padding: 4px 8px; border-radius: 10px; background: rgba(255,249,224,.72); color: #9b6047; font-size: 9px; font-weight: 800; }

.tutorial-callout { position: absolute; z-index: 50; left: 19px; right: 19px; top: 37px; min-height: 54px; padding: 7px 25px 7px 57px; display: flex; align-items: center; border: 3px solid #fff9e6; border-radius: 17px; background: #fff4d6; box-shadow: 0 5px 0 #c97b58, 0 9px 18px rgba(105,57,39,.2); transition: opacity .25s, transform .25s; }
.tutorial-callout { pointer-events: none; }
.tutorial-callout.hidden { opacity: 0; transform: translateY(-15px); pointer-events: none; }
.tutorial-callout::after { content: ""; position: absolute; left: 43px; bottom: -12px; border: 7px solid transparent; border-top-color: #c97b58; }
.tutorial-callout p { margin: 0; display: grid; line-height: 1.3; }
.tutorial-callout strong { font-size: 12px; color: #7c3d2d; }
.tutorial-callout small { font-size: 9px; color: #96614a; }
.tutorial-callout > button { position: absolute; right: 8px; top: 7px; width: 21px; height: 21px; padding: 0; border-radius: 50%; background: #e1b38c; color: white; line-height: 1; pointer-events: auto; }
.mini-owner { position: absolute; left: 6px; bottom: 0; width: 49px; height: 49px; overflow: hidden; }
.mini-owner i { width: 56px; height: 56px; }

.board { position: relative; flex: 1 1 auto; min-height: 220px; max-height: 350px; padding: 9px; display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); grid-template-rows: repeat(5, minmax(0, 1fr)); gap: 4px; border: 4px solid #4f9ca7; border-radius: 21px; background: linear-gradient(145deg, #fffaf0, #f7ecd9); box-shadow: 0 4px 0 #a7604c, inset 0 0 0 3px #d3ece2, inset 0 8px 22px rgba(152,108,75,.12); }
.board-cell { position: relative; min-width: 0; min-height: 0; padding: 0; display: grid; place-items: center; overflow: visible; border-radius: 12px; background: rgba(229,216,194,.34); transition: transform .14s, background .14s, box-shadow .14s; touch-action: none; }
.board-cell:not(.locked):hover { background: rgba(255,255,255,.62); }
.board-cell.locked { cursor: default; background: repeating-linear-gradient(135deg, #e2d7c5 0 5px, #d8cbb7 5px 10px); opacity: .72; box-shadow: inset 0 0 0 2px rgba(151,124,94,.15); }
.board-cell.locked::before { content: ""; width: 12px; height: 9px; border: 3px solid #ad9b82; border-radius: 7px 7px 2px 2px; border-bottom: 0; transform: translateY(1px); }
.board-cell.locked::after { content: ""; width: 18px; height: 15px; border-radius: 4px; background: #ad9b82; }
.board-cell.selected { background: #fff2b6; box-shadow: 0 0 0 3px #54c77d, 0 0 16px rgba(82,199,125,.5); transform: scale(1.06); z-index: 4; }
.board-cell.matching:not(.selected) { box-shadow: inset 0 0 0 2px rgba(83,192,115,.45); }
.board-cell.just-created { animation: item-pop .45s cubic-bezier(.2,1.6,.5,1); }
.board-cell.just-merged { animation: merge-pop .65s cubic-bezier(.2,1.5,.4,1); }
@keyframes item-pop { 0%{transform:scale(.2) rotate(-18deg);opacity:.1} 70%{transform:scale(1.15) rotate(4deg)} 100%{transform:scale(1)} }
@keyframes merge-pop { 0%{transform:scale(.2);filter:brightness(2)} 45%{transform:scale(1.35) rotate(8deg);filter:brightness(1.5)} 100%{transform:scale(1);filter:none} }

.food-sprite { display: block; width: 87%; aspect-ratio: 1; background-image: url("./assets/food-sprites.png"); background-size: 400% 300%; background-repeat: no-repeat; background-position: var(--sprite-position, 0 0); filter: drop-shadow(0 2px 1px rgba(86,51,31,.18)); }
.generator-cell { background: linear-gradient(145deg, #c9f0df, #9bcfbd); box-shadow: inset 0 0 0 2px #fff, 0 2px 0 #75a994; }
.generator-cell .food-sprite { width: 96%; --sprite-position: 0% 0%; animation: basket-breathe 2s ease-in-out infinite; }
.generator-cell::after { content: "-1"; position: absolute; right: -1px; bottom: -2px; padding: 1px 4px; border: 2px solid white; border-radius: 8px; color: white; background: #43b8ce; font-size: 8px; font-weight: 900; }
@keyframes basket-breathe { 50% { transform: translateY(-2px) scale(1.04); } }
.item-level { position: absolute; left: 1px; top: 1px; width: 14px; height: 14px; display: grid; place-items: center; border: 1px solid white; border-radius: 50%; background: rgba(96,63,45,.7); color: white; font-size: 7px; font-weight: 900; }

.merge-button { position: absolute; z-index: 45; left: 50%; top: 48%; transform: translate(-50%, -50%); height: 40px; padding: 0 20px 0 38px; border: 3px solid #fff6cf; border-radius: 21px; background: linear-gradient(#76df8d, #2ead68); box-shadow: 0 4px 0 #20784c, 0 8px 20px rgba(35,116,73,.34); color: white; font-weight: 900; font-size: 13px; animation: merge-button-pop .25s ease, ready-pulse 1.2s .3s infinite; }
.merge-button[hidden] { display: none; }
.merge-spark { position: absolute; left: 10px; width: 20px; height: 20px; background: #fff1a8; clip-path: polygon(50% 0,62% 35%,100% 50%,62% 63%,50% 100%,38% 63%,0 50%,38% 35%); }
@keyframes merge-button-pop { from{transform:translate(-50%,-50%) scale(.5);opacity:0} }

.progress-ribbon { height: 28px; padding: 4px 6px 2px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 6px; color: #7f4635; font-size: 8px; }
.progress-ribbon div { height: 7px; overflow: hidden; border: 1px solid rgba(130,71,49,.35); border-radius: 5px; background: rgba(255,249,222,.55); }
.progress-ribbon i { display: block; width: 0; height: 100%; border-radius: inherit; background: linear-gradient(90deg, #50c77b, #f1c74f); transition: width .5s; }

.bottom-nav { height: 49px; display: grid; grid-template-columns: repeat(5, 1fr); border: 3px solid #f8ddb1; border-radius: 17px 17px 9px 9px; background: rgba(255,248,224,.94); box-shadow: 0 3px 0 #b76e52, 0 -4px 14px rgba(101,55,38,.13); }
.bottom-nav button { min-width: 0; padding: 3px 1px; display: grid; place-items: center; align-content: center; gap: 1px; background: transparent; color: #8a523d; font-size: 8px; font-weight: 800; }
.bottom-nav .primary-nav { margin: -10px 1px 2px; border: 3px solid #fff5cc; border-radius: 50%; background: linear-gradient(#72d997, #38a96d); color: white; box-shadow: 0 3px 0 #267b52, 0 5px 9px rgba(43,111,74,.3); }
.nav-icon { width: 24px; height: 22px; position: relative; display: block; }
.book-icon { border: 3px solid #d38155; border-radius: 3px 7px 7px 3px; background: #fff0ba; }
.book-icon::after { content:""; position:absolute; left:5px; top:4px; width:10px; height:2px; background:#d38155; box-shadow:0 5px #d38155; }
.task-icon { border: 3px solid #83a97d; border-radius: 4px; background:#e6f3d2; }
.task-icon::after { content:""; position:absolute; left:4px; top:4px; width:10px; height:2px; background:#83a97d; box-shadow:0 5px #83a97d; }
.pan-icon { border: 3px solid white; border-radius: 50%; }
.pan-icon::before { content:""; position:absolute; left:3px; right:3px; top:7px; height:5px; border-radius:50%; background:#f5c64f; }
.pan-icon::after { content:""; position:absolute; right:-7px; top:7px; width:9px; height:4px; border-radius:3px; background:white; transform:rotate(-15deg); }
.shop-icon { border: 3px solid #d37f64; border-radius: 3px; background:#ffd6b4; }
.shop-icon::before { content:""; position:absolute; left:-5px; right:-5px; top:-5px; height:7px; border-radius:5px; background:repeating-linear-gradient(90deg,#dc7657 0 6px,#fff1c7 6px 12px); }
.bag-icon { border:3px solid #57aa96; border-radius:4px 4px 8px 8px; background:#bceada; }
.bag-icon::before { content:""; position:absolute; left:4px; top:-7px; width:9px; height:8px; border:3px solid #57aa96; border-bottom:0; border-radius:5px 5px 0 0; }

.toast { position: absolute; z-index: 120; left: 50%; bottom: 72px; max-width: 86%; padding: 9px 15px; border: 2px solid rgba(255,255,255,.8); border-radius: 18px; background: rgba(75,45,36,.9); color: white; font-size: 11px; font-weight: 700; text-align: center; box-shadow: 0 5px 18px rgba(49,29,22,.27); opacity: 0; transform: translate(-50%, 16px); pointer-events: none; transition: .25s; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.reward-layer { position:absolute; inset:0; z-index:110; pointer-events:none; overflow:hidden; }
.coin-particle { position:absolute; width:16px; height:16px; border-radius:50%; background:radial-gradient(circle at 35% 30%,#fff8a1 0 16%,#ffd354 18% 62%,#d18f25 64%); box-shadow:0 2px 0 rgba(112,66,25,.35); animation:coin-fly .85s ease-in forwards; }
@keyframes coin-fly { to { transform: translate(var(--tx), var(--ty)) scale(.4) rotate(360deg); opacity:0; } }

.drag-ghost { position:fixed; z-index:300; width:56px; height:56px; pointer-events:none; opacity:.9; transform:translate(-50%,-50%) scale(1.13); }
.drag-ghost .food-sprite { width:100%; }

.modal-backdrop { position:absolute; z-index:200; inset:0; padding:24px 17px; display:grid; place-items:center; background:rgba(49,29,23,.66); backdrop-filter:blur(3px); animation:fade-in .2s; }
@keyframes fade-in { from{opacity:0} }
.modal-card { width:100%; max-height:88%; overflow:auto; position:relative; padding:19px 16px 16px; border:4px solid #fff0c6; border-radius:25px; background:linear-gradient(#fff9e9,#f9e4bd); box-shadow:0 7px 0 #a96147,0 18px 35px rgba(44,25,19,.35),inset 0 0 0 2px #dcb17a; animation:modal-pop .3s cubic-bezier(.2,1.3,.4,1); }
@keyframes modal-pop { from{transform:scale(.72);opacity:0} }
.modal-card h2 { margin:1px 34px 3px; font-family:"KaiTi",serif; font-size:23px; text-align:center; color:#8d4932; }
.modal-card .subtitle { margin:0 0 14px; color:#9d705b; font-size:10px; text-align:center; }
.modal-close { position:absolute; right:11px; top:10px; width:30px; height:30px; padding:0; border:3px solid white; border-radius:50%; background:#d85d59; color:white; box-shadow:0 2px 0 #963f3d; font-size:19px; font-weight:900; line-height:1; }
.modal-actions { margin-top:15px; display:flex; justify-content:center; gap:9px; }
.primary-button,.secondary-button,.danger-button { min-width:110px; min-height:39px; padding:8px 13px; border:3px solid white; border-radius:18px; color:white; font-weight:900; box-shadow:0 3px 0 #31794f; }
.primary-button { background:linear-gradient(#69d789,#37ad6b); }
.secondary-button { background:linear-gradient(#f0c466,#d99839); box-shadow:0 3px 0 #9c6530; }
.danger-button { background:linear-gradient(#df8074,#c75650); box-shadow:0 3px 0 #8f3f3b; }
.intro-hero { height:150px; margin:-6px -3px 9px; position:relative; border-radius:18px; overflow:hidden; background:url("./assets/restaurant-bg.png") center 22%/cover; }
.intro-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent 40%,rgba(74,42,30,.62)); }
.intro-owner { position:absolute; z-index:2; left:50%; bottom:-7px; width:130px; height:130px; transform:translateX(-50%); }
.intro-steps { display:grid; gap:7px; margin:8px 0; }
.intro-step { display:grid; grid-template-columns:30px 1fr; align-items:center; gap:8px; padding:7px 9px; border-radius:12px; background:rgba(255,255,255,.56); font-size:11px; }
.intro-step b { width:27px; height:27px; display:grid; place-items:center; border-radius:50%; color:white; background:#d88255; }
.recipe-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.recipe-entry { min-width:0; padding:8px 3px; border-radius:13px; background:rgba(255,255,255,.58); box-shadow:inset 0 0 0 2px #ecd0a3; text-align:center; }
.recipe-entry.locked { filter:grayscale(1); opacity:.48; }
.recipe-entry .food-sprite { width:55px; margin:auto; }
.recipe-entry b { display:block; margin-top:3px; overflow:hidden; font-size:9px; white-space:nowrap; text-overflow:ellipsis; }
.daily-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:6px; }
.daily-day { min-height:78px; padding:7px 2px; display:grid; place-items:center; border:2px solid #e6c691; border-radius:12px; background:#fff7dc; font-size:9px; text-align:center; }
.daily-day.today { border-color:#51b975; background:#e5f5d9; box-shadow:0 0 0 2px rgba(81,185,117,.2); }
.daily-day.claimed { opacity:.62; }
.daily-reward { width:31px; height:31px; border-radius:50%; background:radial-gradient(circle,#ffe882,#e8ad38); box-shadow:inset 0 0 0 4px rgba(255,255,255,.45); }
.profile-row,.goal-row,.backpack-row,.setting-row { min-height:51px; margin:6px 0; padding:8px 10px; display:flex; justify-content:space-between; align-items:center; gap:9px; border-radius:13px; background:rgba(255,255,255,.57); box-shadow:inset 0 0 0 2px #ecd1a8; font-size:11px; }
.profile-row strong,.goal-row strong { color:#814a36; }
.mini-progress { flex:1; height:8px; border-radius:5px; background:#e5d7c1; overflow:hidden; }
.mini-progress i { display:block; height:100%; background:linear-gradient(90deg,#54c781,#f0c24d); }
.debug-state { max-height:150px; overflow:auto; padding:8px; border-radius:10px; background:#4f362e; color:#fcebd4; font:9px/1.4 Consolas,monospace; white-space:pre-wrap; user-select:text; }
.unlock-illustration { height:150px; margin:7px 0 13px; border-radius:17px; background:url("./assets/restaurant-bg.png") center 65%/cover; box-shadow:inset 0 0 0 3px white; position:relative; overflow:hidden; }
.unlock-illustration::after { content:"新茶台"; position:absolute; left:50%; bottom:10px; transform:translateX(-50%); padding:5px 15px; border-radius:13px; background:rgba(83,48,36,.82); color:white; font:700 12px "KaiTi"; }

.desktop-note { display:none; color:#f7dfc6; text-align:left; margin-left:36px; }
.desktop-note p { margin:0 0 8px; color:#e2b88f; font-size:12px; text-transform:uppercase; letter-spacing:2px; }
.desktop-note strong { display:block; max-width:260px; font:28px/1.25 "KaiTi",serif; }
.desktop-note small { display:block; margin-top:12px; color:#b98d74; }

@media (min-width: 780px) and (min-height: 690px) {
  body { grid-template-columns:auto auto; }
  .game-shell { border:8px solid #2f211e; border-radius:32px; }
  .desktop-note { display:block; }
}

@media (max-height: 750px) {
  .restaurant { flex-basis:44%; min-height:306px; }
  .brand-sign { top:53px; transform:translateX(-50%) scale(.88); }
  .side-nav { top:103px; transform:scale(.88); transform-origin:left top; }
  .goal-badge { top:106px; transform:scale(.88); transform-origin:right top; }
  .scene-characters { inset:86px 0 55px; }
  .board { min-height:185px; padding:7px; gap:3px; }
  .merge-panel-heading { height:27px; }
  .bottom-nav { height:43px; }
  .progress-ribbon { height:23px; }
  .tutorial-callout { top:29px; transform:scale(.92); transform-origin:center top; }
}

@media (max-width: 360px) {
  .hud { grid-template-columns:43px 1fr 1fr .78fr 30px; gap:3px; }
  .resource { padding-left:21px; }
  .resource-icon { width:24px; height:24px; }
  .brand-sign { transform:translateX(-50%) scale(.9); }
  .side-nav { transform:scale(.88); transform-origin:left top; }
  .goal-badge { transform:scale(.86); transform-origin:right top; }
  .board { gap:2px; padding:6px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; scroll-behavior:auto !important; transition-duration:.01ms !important; }
}