:root{
  --ink:#173d2d;--cream:#fff8df;--gold:#ffcf55;--red:#ef6a4c;--green:#4d9b63;--shadow:#0d291e33;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;min-height:100%;font-family:"Microsoft YaHei","PingFang SC",system-ui,sans-serif;color:var(--ink)}
html{background:#74b478}
body{background:linear-gradient(#9ed8be 0 42%,#74b478 42% 100%);overflow-x:hidden;overscroll-behavior:none}
body:before{content:"";position:fixed;inset:0;pointer-events:none;background:radial-gradient(circle at 15% 18%,#fff9 0 2px,transparent 3px),radial-gradient(circle at 83% 12%,#fff8 0 2px,transparent 3px);background-size:90px 90px,130px 130px}

.hills{position:fixed;inset:auto 0 0;height:58%;pointer-events:none;opacity:.55;background:radial-gradient(ellipse at 15% 110%,#2d754f 0 49%,transparent 50%),radial-gradient(ellipse at 75% 120%,#397e53 0 48%,transparent 49%)}

.app{position:relative;min-height:100vh;min-height:100dvh;max-width:720px;margin:auto;padding:max(14px,env(safe-area-inset-top)) max(12px,env(safe-area-inset-right)) max(18px,env(safe-area-inset-bottom)) max(12px,env(safe-area-inset-left));display:grid;grid-template-rows:auto auto minmax(330px,1fr) auto auto}
header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:12px}
.brand{display:flex;align-items:center;gap:10px}
.stamp{width:44px;height:44px;display:grid;place-items:center;background:var(--red);color:white;border:3px solid #fff7d8;border-radius:13px;box-shadow:0 4px 0 #a94432;font-weight:900;font-size:20px;transform:rotate(-4deg)}
h1{font-size:clamp(24px,6vw,38px);margin:0;line-height:1}
.sub{font-size:13px;margin-top:5px;color:#285946;font-weight:700}
.header-actions{display:flex;gap:8px}
.icon-btn{border:0;border-radius:14px;background:#fff8df;color:var(--ink);width:44px;height:44px;font-size:21px;box-shadow:0 4px 0 #c79450;cursor:pointer}
.icon-btn:active{transform:translateY(3px);box-shadow:0 1px 0 #c79450}

.status{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:10px}
.pill{background:#fff8dfdd;border:2px solid #fff8df;padding:8px 10px;border-radius:16px;text-align:center;box-shadow:0 4px 12px #22583b24}
.pill b{display:block;font-size:17px}
.pill span{font-size:12px;color:#4b6c5d}

.game-shell{position:relative;min-height:0;background:#366f4e4d;border:2px solid #fff6d55c;border-radius:26px;box-shadow:inset 0 2px 20px #143a2947,0 12px 24px #1b4d3533;overflow:hidden;touch-action:manipulation}
#board{position:absolute;inset:0}

/* [bug2 修复] 缩放改用 CSS 变量 --s，让 hover/removing 能与缩放叠加 */
.tile{position:absolute;width:58px;height:66px;border:0;border-radius:12px;background:#fdf3cf;box-shadow:0 5px 0 #b97c3c,0 8px 12px #173d2d42;display:flex;align-items:center;justify-content:center;font-size:31px;cursor:pointer;transition:transform .16s,filter .16s,opacity .22s;user-select:none;border:2px solid #fff9e8;transform:scale(var(--s,1));transform-origin:top left}
.tile:hover:not(.blocked){transform:translateY(-3px) scale(calc(var(--s,1) * 1.03))}
.tile.blocked{filter:brightness(.62) saturate(.65);cursor:not-allowed}
.tile.removing{transform:scale(calc(var(--s,1) * 0.2)) rotate(12deg);opacity:0;pointer-events:none}

.tray-wrap{margin-top:12px;background:#173d2de8;padding:11px;border-radius:21px;box-shadow:0 7px 0 #0e2c20}
.tray-label{display:flex;justify-content:space-between;color:#e8f4df;font-size:13px;margin:0 5px 8px}
.tray{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.slot{aspect-ratio:1/1.08;min-height:48px;border-radius:10px;background:#0b261b75;border:2px dashed #88ac8e66;display:grid;place-items:center;font-size:25px}
.slot.filled{background:#fff4d4;border-style:solid;border-color:#fff9e8;box-shadow:inset 0 -4px #c88d48}
.slot.pop{animation:pop .25s ease}
@keyframes pop{50%{transform:scale(1.18)}}

.tools{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-top:14px}
.tool{border:2px solid #fff7d3;border-radius:16px;background:#f9e7ad;color:var(--ink);padding:9px 5px;min-height:50px;box-shadow:0 5px 0 #af773d;font-weight:800;font-size:14px;cursor:pointer;touch-action:manipulation}
.tool small{display:block;font-size:11px;font-weight:600;margin-top:2px;color:#5c6c54}
.tool:disabled{filter:grayscale(1);opacity:.6;cursor:not-allowed}
.tool:not(:disabled):active{transform:translateY(4px);box-shadow:0 1px 0 #af773d}

.overlay{position:fixed;inset:0;background:#102a20b8;backdrop-filter:blur(5px);display:grid;place-items:center;padding:20px;z-index:100;transition:.2s}
.overlay.hidden{opacity:0;pointer-events:none}
.card{width:min(390px,100%);background:#fff7dc;border:5px solid #f3cc6a;border-radius:30px;padding:27px;text-align:center;box-shadow:0 18px 50px #081c1566}
.card .hero{font-size:58px}
.card h2{font-size:31px;margin:5px 0 8px}
.card p{line-height:1.7;margin:0 0 20px;color:#476353}
.card-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.primary,.secondary{border:0;border-radius:16px;font-size:17px;font-weight:900;padding:14px 20px;cursor:pointer}
.primary{background:var(--red);color:white;box-shadow:0 6px 0 #a44030}
.secondary{background:#e8d7a8;color:var(--ink);box-shadow:0 6px 0 #aa8753}
.primary:active,.secondary:active{transform:translateY(4px);box-shadow:0 2px 0 #a44030}

.toast{position:fixed;left:50%;top:18%;transform:translate(-50%,-20px);background:#173d2df0;color:white;padding:10px 18px;border-radius:999px;opacity:0;transition:.25s;z-index:120;font-weight:700;pointer-events:none}
.toast.show{opacity:1;transform:translate(-50%,0)}

@media(max-width:480px){
  .app{padding:max(10px,env(safe-area-inset-top)) max(8px,env(safe-area-inset-right)) max(12px,env(safe-area-inset-bottom)) max(8px,env(safe-area-inset-left));grid-template-rows:auto auto minmax(290px,1fr) auto auto}
  .stamp{width:39px;height:39px}
  .icon-btn{width:42px;height:42px}
  .status{gap:5px}
  .pill{padding:6px}
  .tools{gap:6px;margin-top:9px}
  .tool{font-size:13px;min-height:48px}
  .tray-wrap{margin-top:8px;padding:8px}
  .tray-label{margin-bottom:5px}
  .sub{display:none}
}
@media(max-height:700px) and (max-width:480px){
  header{margin-bottom:6px}
  .status{margin-bottom:6px}
  .pill{padding:4px}
  .pill b{font-size:15px}
  .pill span{font-size:11px}
  .app{grid-template-rows:auto auto minmax(250px,1fr) auto auto}
  .slot{min-height:42px}
  .tool{min-height:43px;padding:5px}
  .tool small{display:none}
}
@media(orientation:landscape) and (max-height:520px){
  .app{max-width:960px;grid-template-columns:minmax(0,1fr) 280px;grid-template-rows:auto auto 1fr auto;padding:8px 12px;column-gap:12px}
  header{grid-column:1/3;margin-bottom:6px}
  .status{grid-column:2;grid-row:2;margin:0 0 7px}
  .game-shell{grid-column:1;grid-row:2/5;min-height:300px}
  .tray-wrap{grid-column:2;grid-row:3;margin:0}
  .tools{grid-column:2;grid-row:4;margin:8px 0 0}
  .sub{display:none}
  .pill{padding:4px}
  .tool small{display:none}
}
@media(hover:none){
  .tile:hover:not(.blocked){transform:scale(var(--s,1))}
}