:root {
  font-family: Inter, "Microsoft YaHei", system-ui, sans-serif;
  color: #24401f;
  background: #bce8fb;
  font-synthesis: none;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    linear-gradient(#73cbe8aa, #386d36cc),
    url("assets/garden-manor.png") center / cover fixed;
}

button { font: inherit; }

.game-shell {
  width: min(100%, 560px);
  min-height: 100vh;
  margin: auto;
  padding: 18px 18px 28px;
  position: relative;
}

.topbar { display: flex; align-items: center; justify-content: space-between; color: #fff; text-shadow: 0 2px 0 #468caf; }
.topbar h1 { margin: 0; font-size: clamp(25px, 7vw, 36px); letter-spacing: .03em; }
.eyebrow { margin: 0 0 2px; font-size: 10px; letter-spacing: .2em; font-weight: 800; opacity: .88; }

.icon-button, .secondary-button, .primary-button {
  border: 0;
  cursor: pointer;
  font-weight: 800;
  transition: transform .15s ease, filter .15s ease;
}
.icon-button:hover, .secondary-button:hover, .primary-button:hover { filter: brightness(1.06); transform: translateY(-1px); }
.icon-button:active, .secondary-button:active, .primary-button:active { transform: translateY(1px); }
.icon-button { width: 44px; height: 44px; border-radius: 50%; background: #fff7c2; color: #60954e; box-shadow: 0 4px 0 #d1bb65, 0 7px 14px #28749c55; }

.scene {
  height: 176px;
  margin-top: 10px;
  position: relative;
  overflow: hidden;
  border: 4px solid rgba(255,255,255,.76);
  border-radius: 25px;
  background: linear-gradient(90deg, rgba(20,70,31,.25), transparent 58%), url("assets/garden-manor.png") center 60% / cover;
  box-shadow: 0 8px 20px #173d2b66, inset 0 -30px 40px #173d2a52;
}
.scene > .sun, .scene > .cloud, .scene > .manor, .scene > .tree { display:none; }
.sun { position: absolute; width: 45px; height: 45px; border-radius: 50%; background: #ffe471; right: 28px; top: 14px; box-shadow: 0 0 28px #fff9a8; }
.cloud { position: absolute; width: 64px; height: 20px; border-radius: 30px; background: #fff; opacity: .75; }
.cloud::before,.cloud::after { content:""; position:absolute; border-radius:50%; background:inherit; }
.cloud::before { width:26px;height:26px;left:12px;top:-12px}.cloud::after{width:34px;height:34px;right:8px;top:-19px}
.cloud-a{top:27px;left:22px}.cloud-b{top:44px;right:95px;transform:scale(.7)}
.manor { position:absolute; font-size:66px; right:36px; bottom:6px; filter: drop-shadow(0 5px 2px #316c4560); }
.tree { position:absolute; bottom:2px; font-size:38px; }.tree-a{left:10px}.tree-b{right:8px;font-size:42px}
.garden-copy { position:absolute; z-index:2; left:24px; bottom:18px; color:#fff; text-shadow:0 2px 3px #173e26, 0 0 12px #173e26; }
.garden-copy span { display:inline-block; padding:3px 9px; border-radius:12px; background:#e99c2f; font-size:11px; font-weight:900; }
.garden-copy h2 { margin:5px 0 1px; font-size:18px; }.garden-copy p{margin:0;font-size:11px;font-weight:700}

.mission-card {
  display:grid;
  grid-template-columns: .75fr .9fr 1.5fr;
  align-items:center;
  margin: -8px 10px 12px;
  position:relative;
  z-index:4;
  padding: 10px 12px;
  border: 3px solid #fff;
  border-radius: 18px;
  background: linear-gradient(#fff9df, #ffe8aa);
  box-shadow: 0 5px 0 #b27b38, 0 8px 17px #285b3550;
}
.mission-item { min-width:0; text-align:center; border-right:1px solid #d8b767; }.mission-item:last-child{border:0}
.mission-label { display:block; color:#886b37; font-size:10px; font-weight:800; }.mission-item strong{font-size:23px;color:#4d812f}
.targets { display:flex; gap:7px; justify-content:center; margin-top:2px; }
.target-chip { display:flex;align-items:center;gap:1px;font-size:17px;font-weight:900;color:#4f6d31}.target-chip.done{opacity:.4;filter:grayscale(1)}
.target-piece{width:27px!important;height:27px!important;flex:0 0 27px}
.target-count { font-size:12px; min-width:15px; }

.board-wrap { position:relative; padding:10px; border:5px solid #f7df92; border-radius:24px; background:linear-gradient(135deg,#527f4a,#2d633b); box-shadow:0 7px 0 #734b24,0 11px 22px #183b2d70,inset 0 0 20px #142e2255; }
.board { display:grid; grid-template-columns:repeat(8,1fr); gap:5px; touch-action:none; user-select:none; }
.tile { position:relative; aspect-ratio:1; display:grid; place-items:center; padding:0; overflow:hidden; border:1px solid #ffffff42; border-radius:13px; background:linear-gradient(145deg,#d9efb080,#8db86c5e); box-shadow:inset 0 -3px 0 #426f4266,0 2px 3px #183d2b70; cursor:pointer; transition:transform .16s ease,filter .16s ease,opacity .2s ease; }
.piece { display:block; width:100%; height:100%; background-image:url("assets/match3-sprites.png"); background-size:300% 200%; background-repeat:no-repeat; filter:drop-shadow(0 3px 2px #1739237a); transform:scale(.91); }
.piece-apple{background-position:0 0}.piece-pear{background-position:50% 0}.piece-berry{background-position:100% 0}.piece-flower{background-position:0 100%}.piece-leaf{background-position:50% 100%}.piece-grape{background-position:100% 100%}
.tile:hover{filter:brightness(1.08)}.tile.selected{transform:scale(.85);outline:4px solid #fff56c;filter:brightness(1.15)}.tile.hint{animation:hint .65s ease 2}.tile.matched{transform:scale(.18) rotate(20deg);opacity:.15}.tile.new{animation:drop .3s ease}
.tile:focus-visible{outline:4px solid #fff;outline-offset:1px}
.has-special .piece{filter:brightness(.8) saturate(1.15) drop-shadow(0 3px 2px #1739237a);transform:scale(.86)}
.special-mark{position:absolute;z-index:3;display:grid;place-items:center;width:72%;height:72%;border-radius:50%;color:#fff;font-size:clamp(18px,5vw,29px);font-weight:1000;text-shadow:0 2px 2px #16324c,0 0 8px #fff;box-shadow:inset 0 0 0 3px #ffffffaa,0 2px 8px #102c3f99;pointer-events:none}
.special-rocketH .special-mark,.special-rocketV .special-mark{background:linear-gradient(145deg,#55cfffcc,#2168cddd)}
.special-bomb .special-mark{background:radial-gradient(circle at 35% 30%,#ffef83,#ff8a38 45%,#c73e34 75%)}
.special-rainbow .special-mark{background:conic-gradient(#ef476f,#ffd166,#73d673,#4cc9f0,#8f63d8,#ef476f)}
.special-propeller .special-mark{background:linear-gradient(145deg,#ffcf58dd,#e75d85dd)}
.combo { position:absolute; z-index:6; left:50%; top:45%; transform:translate(-50%,-50%) scale(.6); opacity:0; pointer-events:none; color:#fff9a2; text-shadow:0 3px 0 #d35c40,0 5px 8px #0008; font-size:34px; font-weight:1000; white-space:nowrap; }
.combo.show{animation:combo .8s ease}
.actions { display:grid;grid-template-columns:1fr 1.4fr;gap:10px;margin-top:15px}.primary-button,.secondary-button,.editor-button{padding:12px 16px;border-radius:16px}.primary-button{color:#fff;background:linear-gradient(#84d849,#4ba72f);box-shadow:0 5px 0 #2f7621}.secondary-button{color:#815c24;background:linear-gradient(#fff9d5,#f1ce74);box-shadow:0 5px 0 #b38534}.editor-button{grid-column:1/-1;border:0;color:#fff;font-weight:900;cursor:pointer;background:linear-gradient(#53b8dc,#287da8);box-shadow:0 5px 0 #185b80}
.help{text-align:center;color:#fff;font-size:11px;font-weight:800;text-shadow:0 1px 2px #235928;margin:14px 0 0}
.rule-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:15px;color:#fff;text-align:center;font-size:10px;font-weight:800;text-shadow:0 1px 2px #214b2d}.rule-strip span{padding:7px 3px;border:1px solid #ffffff7a;border-radius:11px;background:#285b3c99;backdrop-filter:blur(5px)}.rule-strip b{display:block;color:#ffe790;font-size:12px}

.modal { position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:24px;background:#174a3975;backdrop-filter:blur(6px)}.modal.hidden{display:none}.modal-card{width:min(100%,360px);text-align:center;padding:28px;border:5px solid #fff;border-radius:28px;background:linear-gradient(#fffbee,#ffe6a6);box-shadow:0 12px 0 #996a30,0 22px 50px #142f2970}.modal-icon{font-size:64px;animation:float 1.5s ease-in-out infinite}.modal-card h2{margin:5px 0 8px;color:#427b2c}.modal-card p{color:#795f39;line-height:1.7}.modal-card .primary-button{width:100%;margin-top:8px}

.editor-modal{position:fixed;inset:0;z-index:30;overflow:auto;padding:24px;background:#15382bd9;backdrop-filter:blur(8px)}.editor-modal.hidden{display:none}.editor-card{width:min(100%,940px);margin:auto;padding:22px;border:4px solid #fff;border-radius:25px;background:linear-gradient(145deg,#fffdf0,#f6d994);box-shadow:0 16px 50px #09271dcc}.editor-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}.editor-header h2{margin:0;color:#376d31;font-size:28px}.editor-kicker{color:#b27b38;font-size:10px;font-weight:1000;letter-spacing:.18em}.editor-close{width:42px;height:42px;border:0;border-radius:50%;color:#fff;background:#d7654e;font-size:28px;cursor:pointer;box-shadow:0 4px 0 #9d3e31}.editor-layout{display:grid;grid-template-columns:minmax(360px,1.25fr) minmax(260px,.75fr);gap:22px}.editor-section-title{margin:4px 0 9px;color:#76572d;font-size:12px;font-weight:1000}.editor-palette{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:10px}.palette-item{display:flex;align-items:center;gap:5px;padding:5px 8px;border:2px solid transparent;border-radius:11px;background:#fff9df;color:#4e6632;font-size:11px;font-weight:900;cursor:pointer}.palette-item.active{border-color:#e8912e;background:#fff3a7;box-shadow:0 2px 0 #c27a29}.palette-item .piece{width:28px;height:28px;flex:0 0 28px}.palette-symbol{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;color:#fff;background:#3188b9;font-size:17px}.editor-board-wrap{padding:8px;border:4px solid #d6a34d;border-radius:18px;background:#32633d}.editor-board{display:grid;grid-template-columns:repeat(8,1fr);gap:4px;touch-action:none;user-select:none}.editor-cell{position:relative;aspect-ratio:1;padding:0;overflow:hidden;border:1px solid #ffffff55;border-radius:10px;background:#a8cf8480;cursor:crosshair}.editor-cell .piece{pointer-events:none}.editor-cell .special-mark{font-size:20px}.editor-tip{margin:8px 0 0;text-align:center;color:#87683c;font-size:11px}.editor-settings{padding:14px;border-radius:17px;background:#ffffff9e}.editor-field{display:grid;grid-template-columns:86px 1fr;align-items:center;gap:8px;margin-bottom:9px;color:#6f5b35;font-size:12px;font-weight:900}.editor-field input,.editor-target-row input,.editor-settings textarea{width:100%;border:2px solid #dfbd70;border-radius:9px;background:#fffdf2;color:#405632;font:inherit;outline:none}.editor-field input{padding:8px}.editor-field input:focus,.editor-target-row input:focus,.editor-settings textarea:focus{border-color:#72a94d}.editor-targets{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:12px}.editor-target-row{display:flex;align-items:center;gap:4px;padding:4px 6px;border-radius:10px;background:#fff}.editor-target-row .piece{width:27px;height:27px;flex:0 0 27px}.editor-target-row span{flex:1;font-size:11px;font-weight:800}.editor-target-row input{width:42px;padding:5px;text-align:center}.editor-tools{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:10px}.editor-tools button,.editor-play{border:0;border-radius:10px;padding:9px;color:#5d512f;background:#f2d47e;font-weight:900;cursor:pointer;box-shadow:0 3px 0 #ba8e3e}.editor-settings textarea{height:92px;padding:8px;resize:vertical;font:10px/1.45 Consolas,monospace}.editor-play{width:100%;margin-top:2px;color:#fff;background:#55aa39;box-shadow:0 4px 0 #347526;font-size:15px}.editor-status{min-height:17px;margin:8px 0 0;color:#468038;text-align:center;font-size:11px;font-weight:900}.editor-status.error{color:#c34838}

@keyframes drop{from{transform:translateY(-22px);opacity:0}to{transform:none;opacity:1}}@keyframes hint{50%{transform:scale(.78);filter:brightness(1.3)}}@keyframes combo{0%{opacity:0;transform:translate(-50%,-50%) scale(.5)}35%{opacity:1;transform:translate(-50%,-50%) scale(1.1)}100%{opacity:0;transform:translate(-50%,-90%) scale(1)}}@keyframes float{50%{transform:translateY(-8px) rotate(4deg)}}
@media (max-width:720px){.editor-modal{padding:8px}.editor-card{padding:14px}.editor-layout{grid-template-columns:1fr}.editor-board-wrap{max-width:520px;margin:auto}}@media (max-width:430px){.game-shell{padding:12px 10px 22px}.scene{height:145px}.garden-copy{left:18px;bottom:13px}.manor{font-size:57px}.board{gap:3px}.board-wrap{padding:7px}.tile{border-radius:10px}.mission-card{margin-left:5px;margin-right:5px;padding:8px 5px}.target-chip{gap:0}.target-piece{width:23px!important;height:23px!important;flex-basis:23px}.rule-strip{gap:3px}.rule-strip span{font-size:9px;padding:6px 2px}.editor-cell{border-radius:7px}.editor-targets{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}

/* Number fields need enough intrinsic width after the browser reserves space
   for native spin controls. Keep them legible on the two-column mobile grid. */
.editor-target-row{gap:6px;min-width:0;padding:5px 7px}
.editor-target-row span{min-width:0}
.editor-target-row input{flex:0 0 58px;width:58px;min-width:58px;padding:6px 4px;text-align:center;font-size:15px;font-weight:900;line-height:1.2;appearance:textfield;-moz-appearance:textfield}
.editor-target-row input::-webkit-inner-spin-button,.editor-target-row input::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}
.editor-brush-status{margin:-2px 0 8px;padding:6px 10px;border-radius:9px;background:#3f7440;color:#fff;font-size:11px;font-weight:900}.editor-cell.editor-selected{outline:3px solid #fff36b;outline-offset:-3px;filter:brightness(1.12)}.editor-cell .special-mark{left:50%;top:50%;transform:translate(-50%,-50%)}