:root {
  --ink: #5b3a1e;
  --ink-soft: #8a6238;
  --cream: #fff6e6;
  --wood: #e9b676;
  --accent: #f08a5d;
  --accent-dark: #c9623a;
  --cell: 60px;
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body {
  margin: 0; height: 100%; overflow: hidden; overscroll-behavior: none;
  background: #e8b271;
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", system-ui, sans-serif;
  color: var(--ink);
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
}
#app {
  position: relative; height: 100%; max-width: 480px; margin: 0 auto; overflow: hidden;
  background: #f0bd7f url(img/bg.webp) center / cover no-repeat;
}
button { font: inherit; color: inherit; border: 0; background: none; padding: 0; cursor: pointer; touch-action: manipulation; }
img { -webkit-user-drag: none; pointer-events: none; }

.screen {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center;
  padding: calc(env(safe-area-inset-top) + 10px) 16px calc(env(safe-area-inset-bottom) + 14px);
  opacity: 0; visibility: hidden; transform: scale(.98); transition: opacity .22s, transform .22s, visibility 0s .22s;
}
.screen.active { opacity: 1; visibility: visible; transform: none; transition: opacity .22s, transform .22s; }

/* ---------- 通用按钮 ---------- */
.btn {
  min-width: 200px; padding: 13px 28px; border-radius: 999px; font-weight: 700; font-size: 18px; letter-spacing: 1px;
  transition: transform .08s;
}
.btn:active, .tool:active, .icon-btn:active, .lv:active { transform: scale(.94); }
.btn.primary { color: #fff; background: linear-gradient(#f79b6c, #ea7647); box-shadow: 0 5px 0 var(--accent-dark), 0 10px 18px rgba(140, 70, 20, .28); text-shadow: 0 1px 0 rgba(120, 50, 10, .4); }
.btn.big { font-size: 22px; padding: 16px 36px; min-width: 240px; }
.btn.ghost { background: rgba(255, 246, 230, .82); box-shadow: 0 4px 0 #d9a868, 0 8px 14px rgba(140, 70, 20, .16); }
.icon-btn {
  width: 44px; height: 44px; border-radius: 50%; font-size: 30px; line-height: 40px; font-weight: 700; text-align: center;
  background: rgba(255, 246, 230, .88); box-shadow: 0 3px 0 #d9a868, 0 6px 10px rgba(140, 70, 20, .16); flex: none;
}
.sound-btn { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5v5h3.5L12 18V6L7.5 9.5z' fill='%235b3a1e'/%3E%3Cpath d='M15.5 9a4 4 0 010 6M18 6.5a7.5 7.5 0 010 11'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 24px; }
.sound-btn.off { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 9.5v5h3.5L12 18V6L7.5 9.5z' fill='%235b3a1e'/%3E%3Cpath d='M16 9.5l5 5M21 9.5l-5 5'/%3E%3C/svg%3E"); opacity: .75; }

/* ---------- 首页 ---------- */
#home { justify-content: center; gap: 14px; }
#home .sound-btn { position: absolute; right: 16px; top: calc(env(safe-area-inset-top) + 10px); }
.hero { width: min(72%, 42vh); height: auto; filter: drop-shadow(0 14px 14px rgba(120, 60, 10, .28)); animation: bob 3.2s ease-in-out infinite; }
@keyframes bob { 50% { transform: translateY(-8px) rotate(-2deg); } }
.title { margin: 2px 0 0; font-size: 60px; line-height: 1; letter-spacing: 6px; font-weight: 900; color: #fff7e8;
  text-shadow: 0 2px 0 #c9623a, 0 4px 0 #c9623a, 0 6px 0 #a94e2b, 0 12px 16px rgba(120, 50, 10, .35); -webkit-text-stroke: 2px #c9623a; paint-order: stroke fill; }
.title span { display: inline-block; animation: hop 2.4s ease-in-out infinite; }
.title span:nth-child(2) { animation-delay: .15s; }
.title span:nth-child(3) { animation-delay: .3s; }
@keyframes hop { 0%, 60%, 100% { transform: none; } 30% { transform: translateY(-10px) rotate(-4deg); } }
.slogan { margin: 0 0 8px; text-align: center; line-height: 1.6; font-size: 16px; color: var(--ink-soft); font-weight: 600; }
.progress-line { margin: 4px 0 0; font-size: 13px; color: var(--ink-soft); }

/* ---------- 顶栏 ---------- */
.bar { width: 100%; display: flex; align-items: center; gap: 10px; flex: none; }
.bar-title { flex: 1; text-align: center; font-size: 20px; font-weight: 800; }
.bar-title > span, .bar-title > small { position: relative; }
#game .bar-title { flex: none; margin: 0 auto; padding: 4px 22px 5px; border-radius: 999px; background: rgba(255, 246, 230, .88); box-shadow: 0 3px 0 #d9a868, 0 6px 10px rgba(140, 70, 20, .14); line-height: 1.15; }
.bar-title small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); margin-top: 1px; }
.bar-spacer { width: 44px; }

/* ---------- 选关 ---------- */
.level-scroll { flex: 1; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 2px 24px; margin-top: 8px; }
.tier-head { display: flex; align-items: baseline; gap: 8px; margin: 14px 4px 8px; font-weight: 800; font-size: 16px; }
.tier-head small { font-weight: 600; font-size: 12px; color: var(--ink-soft); }
.lv-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.lv { aspect-ratio: 1; border-radius: 16px; background: rgba(255, 246, 230, .92); box-shadow: 0 3px 0 #d9a868, 0 6px 10px rgba(140, 70, 20, .14);
  display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 800; font-size: 20px; gap: 2px; transition: transform .08s; }
.lv .st { font-size: 11px; letter-spacing: 1px; color: #e0c59c; }
.lv .st b { color: #f2a90f; font-weight: 400; }
.lv.locked { background: rgba(255, 246, 230, .45); color: rgba(91, 58, 30, .35); box-shadow: none; }
.lv.current { outline: 3px solid var(--accent); outline-offset: 1px; }

/* ---------- 游戏 ---------- */
.hud { width: 100%; display: flex; align-items: stretch; justify-content: space-between; gap: 10px; margin-top: 10px; flex: none; }
.moves, .goal { background: rgba(255, 246, 230, .9); border-radius: 18px; padding: 8px 16px; box-shadow: 0 3px 0 #d9a868, 0 6px 10px rgba(140, 70, 20, .14); }
.moves { display: flex; align-items: center; gap: 10px; }
.moves b { font-size: 34px; line-height: 1; min-width: 38px; text-align: center; font-weight: 900; color: var(--accent-dark); font-variant-numeric: tabular-nums; transition: color .2s; }
.moves.low b { color: #d92d2d; animation: pulse .7s ease-in-out infinite; }
@keyframes pulse { 50% { transform: scale(1.18); } }
.moves span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }
.goal { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; font-size: 12px; font-weight: 600; color: var(--ink-soft); gap: 2px; }
.goal-stars { display: flex; gap: 2px; }
.goal-stars img { width: 22px; height: 22px; transition: filter .25s, opacity .25s, transform .25s; }
.goal-stars img.lost { filter: grayscale(1); opacity: .35; transform: scale(.85); }

.stage { position: relative; flex: 1; width: 100%; display: flex; align-items: center; justify-content: center; perspective: 900px; touch-action: none; min-height: 0; }
.tilt { transition: transform .22s ease-out; transform-style: preserve-3d; }
.tray { position: relative; width: calc(var(--cell) * var(--w)); height: calc(var(--cell) * var(--h)); }
.tray-bg { position: absolute; inset: calc(var(--cell) * -.46); border: calc(var(--cell) * .74) solid transparent;
  border-image: url(img/tray.webp) 100 fill / calc(var(--cell) * .74) stretch; filter: drop-shadow(0 calc(var(--cell) * .16) calc(var(--cell) * .14) rgba(110, 55, 10, .38)); }
.floor, .pieces, .fx { position: absolute; inset: 0; }
.fx { pointer-events: none; overflow: visible; }
.cell, .piece, .deco { position: absolute; left: 0; top: 0; width: var(--cell); height: var(--cell); }
.cell::after { content: ""; position: absolute; inset: 5%; border-radius: 24%; background: rgba(176, 120, 58, .11); box-shadow: inset 0 2px 3px rgba(120, 70, 20, .16); }
.deco img { position: absolute; }
.deco.stone img { inset: 1%; width: 98%; height: 98%; filter: drop-shadow(0 3px 2px rgba(80, 50, 20, .3)); }
.deco.honey img { left: 4%; top: 12%; width: 92%; height: 92%; opacity: .95; }
.piece { will-change: transform; z-index: 2; }
.piece .in { position: absolute; inset: 0; transform-origin: 50% 70%; }
.piece img { position: absolute; left: -4%; top: -13%; width: 108%; height: 108%; filter: drop-shadow(0 3px 2px rgba(90, 50, 15, .28)); }
.piece.walnut img { left: 4%; top: 4%; width: 92%; height: 92%; }
.piece.sq-h .in { animation: sqh .24s ease-out; }
.piece.sq-v .in { animation: sqv .24s ease-out; }
@keyframes sqh { 30% { transform: scale(.8, 1.16); } 65% { transform: scale(1.07, .95); } }
@keyframes sqv { 30% { transform: scale(1.18, .78); } 65% { transform: scale(.95, 1.07); } }
.piece.pop .in { animation: pop .26s ease-in forwards; }
@keyframes pop { 35% { transform: scale(1.28); opacity: 1; } 100% { transform: scale(.2); opacity: 0; } }
.piece.spawn .in { animation: spawn .3s cubic-bezier(.3, 1.6, .5, 1) backwards; }
@keyframes spawn { from { transform: scale(0); } }
.piece.nudge-U .in { animation: nU .22s; } .piece.nudge-D .in { animation: nD .22s; }
.piece.nudge-L .in { animation: nL .22s; } .piece.nudge-R .in { animation: nR .22s; }
@keyframes nU { 40% { transform: translateY(-9%); } } @keyframes nD { 40% { transform: translateY(9%); } }
@keyframes nL { 40% { transform: translateX(-9%); } } @keyframes nR { 40% { transform: translateX(9%); } }
.piece.doomed .in { animation: sad 1s ease-in-out infinite; }
@keyframes sad { 25% { transform: rotate(-7deg); } 75% { transform: rotate(7deg); } }

.dot { position: absolute; width: 10px; height: 10px; margin: -5px; border-radius: 50%; animation: fly .5s cubic-bezier(.1, .7, .3, 1) forwards; }
@keyframes fly { to { transform: translate(var(--dx), var(--dy)) scale(.2); opacity: 0; } }
.ring { position: absolute; width: var(--cell); height: var(--cell); border-radius: 50%; border: 4px solid #fff; opacity: .9; animation: ring .4s ease-out forwards; }
@keyframes ring { from { transform: scale(.4); } to { transform: scale(1.5); opacity: 0; } }

.combo { position: absolute; left: 50%; top: 14%; transform: translateX(-50%); font-size: 34px; font-weight: 900; color: #fff; white-space: nowrap; pointer-events: none; opacity: 0;
  -webkit-text-stroke: 2px #d2542a; paint-order: stroke fill; text-shadow: 0 4px 0 #d2542a, 0 8px 12px rgba(120, 50, 10, .35); z-index: 5; }
.combo.show { animation: combo .9s ease-out; }
@keyframes combo { 0% { opacity: 0; transform: translateX(-50%) scale(.4) rotate(-8deg); } 20% { opacity: 1; transform: translateX(-50%) scale(1.15) rotate(-4deg); } 70% { opacity: 1; transform: translateX(-50%) scale(1) rotate(-4deg); } 100% { opacity: 0; transform: translate(-50%, -30px) scale(1) rotate(-4deg); } }

.hint-arrow { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; pointer-events: none; z-index: 6; }
.hint-arrow.show { display: flex; }
.hint-arrow i { width: 84px; height: 84px; border-radius: 50%; background: rgba(255, 255, 255, .92) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ea7647' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5M5.5 11.5L12 5l6.5 6.5'/%3E%3C/svg%3E") center / 56px no-repeat;
  box-shadow: 0 6px 16px rgba(120, 50, 10, .35); animation: hintmove 1.1s ease-in-out infinite; }
.hint-arrow[data-dir=U] { --r: 0deg; } .hint-arrow[data-dir=R] { --r: 90deg; } .hint-arrow[data-dir=D] { --r: 180deg; } .hint-arrow[data-dir=L] { --r: 270deg; }
@keyframes hintmove { 0% { transform: rotate(var(--r)) translateY(46px); opacity: 0; } 25% { opacity: 1; } 75% { opacity: 1; } 100% { transform: rotate(var(--r)) translateY(-46px); opacity: 0; } }

.tip { flex: none; min-height: 40px; margin: 6px 0 8px; padding: 0 8px; text-align: center; font-size: 14px; line-height: 1.45; font-weight: 600; color: var(--ink-soft); text-wrap: balance; text-shadow: 0 1px 0 rgba(255, 246, 230, .7); }
.tools { flex: none; display: flex; gap: 12px; width: 100%; justify-content: center; }
.tool { flex: 1; max-width: 120px; padding: 9px 0 8px; border-radius: 18px; background: rgba(255, 246, 230, .92); box-shadow: 0 4px 0 #d9a868, 0 8px 12px rgba(140, 70, 20, .16);
  font-size: 14px; font-weight: 700; display: flex; flex-direction: column; align-items: center; gap: 2px; transition: transform .08s, opacity .2s; }
.tool:disabled { opacity: .45; }
.ic { width: 26px; height: 26px; background: center / contain no-repeat; }
.ic-undo { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3a1e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M8 5L4 9l4 4'/%3E%3Cpath d='M4 9h10a5.5 5.5 0 010 11h-4'/%3E%3C/svg%3E"); }
.ic-restart { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3a1e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 12a7.5 7.5 0 11-2.4-5.5'/%3E%3Cpath d='M19.5 4v4.5H15'/%3E%3C/svg%3E"); }
.ic-hint { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235b3a1e' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9 17.5h6M10 20.5h4'/%3E%3Cpath d='M12 3.5a6 6 0 00-3.6 10.8c.5.4.8 1 .8 1.7h5.6c0-.7.3-1.3.8-1.7A6 6 0 0012 3.5z' fill='%23ffd76a'/%3E%3C/svg%3E"); }

/* ---------- 弹窗 ---------- */
.modal { position: absolute; inset: 0; z-index: 20; display: flex; align-items: center; justify-content: center; background: rgba(70, 40, 15, .46); opacity: 0; visibility: hidden; transition: opacity .2s, visibility 0s .2s; }
.modal.show { opacity: 1; visibility: visible; transition: opacity .2s; }
.card { width: min(86%, 340px); padding: 26px 22px 22px; border-radius: 28px; background: var(--cream); text-align: center; box-shadow: 0 8px 0 #d9a868, 0 20px 40px rgba(60, 30, 5, .4); transform: scale(.8); transition: transform .28s cubic-bezier(.3, 1.5, .5, 1); }
.modal.show .card { transform: none; }
.card h2 { margin: 0 0 6px; font-size: 26px; font-weight: 900; }
.card p { margin: 6px 0 16px; font-size: 15px; line-height: 1.55; color: var(--ink-soft); font-weight: 600; }
.card .stars { display: flex; justify-content: center; gap: 6px; margin: 4px 0 10px; height: 76px; align-items: center; }
.card .stars img { width: 64px; height: 64px; filter: grayscale(1); opacity: .25; }
.card .stars img:nth-child(2) { width: 76px; height: 76px; margin-top: -10px; }
.card .stars img.on { filter: drop-shadow(0 4px 4px rgba(170, 100, 0, .35)); opacity: 1; animation: starin .5s cubic-bezier(.3, 1.8, .5, 1) backwards; }
.card .stars img.on:nth-child(2) { animation-delay: .22s; } .card .stars img.on:nth-child(3) { animation-delay: .44s; }
@keyframes starin { from { transform: scale(0) rotate(-90deg); } }
.card .face { width: 96px; height: 96px; margin: -6px auto 4px; display: block; }
.card .btns { display: flex; flex-direction: column; gap: 14px; align-items: center; }
.card .btn { min-width: 210px; }

.toast { position: absolute; left: 50%; bottom: 150px; transform: translate(-50%, 12px); background: rgba(70, 40, 15, .88); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; opacity: 0; pointer-events: none; transition: opacity .2s, transform .2s; z-index: 30; white-space: nowrap; max-width: 92%; }
.toast.show { opacity: 1; transform: translate(-50%, 0); }

@media (max-height: 640px) {
  .title { font-size: 46px; } .hero { width: min(60%, 36vh); }
  .tip { min-height: 22px; margin: 4px 0 6px; font-size: 13px; }
  .moves b { font-size: 28px; }
}