:root {
  --ink: #3f3a2d;
  --muted: #766f5d;
  --cream: #fff9e9;
  --paper: #fffdf5;
  --coral: #ee6c50;
  --yellow: #f6bd50;
  --green: #659f69;
  --line: #e7d7b4;
}
* { box-sizing: border-box; }
body { margin: 0; min-width: 320px; min-height: 100vh; color: var(--ink); font-family: "Noto Sans SC", sans-serif; background: #f8f1df; }
body::before { content: ""; position: fixed; inset: 0; pointer-events: none; opacity: .42; background-image: radial-gradient(#dcbf80 0.65px, transparent .65px); background-size: 6px 6px; }
button { font: inherit; cursor: pointer; }
.game-shell { position: relative; min-height: 100vh; padding: 24px clamp(16px, 5vw, 86px) 18px; background: linear-gradient(90deg, rgba(255,254,246,.78), rgba(255,248,228,.65)), radial-gradient(ellipse at 6% 90%, rgba(122,172,113,.23), transparent 26%), radial-gradient(ellipse at 98% 18%, rgba(245,186,78,.22), transparent 27%); }
.topbar { max-width: 1320px; height: 68px; margin: 0 auto; padding-bottom: 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.brand { display:flex; align-items:center; gap:9px; min-width: 176px; font-family:"Baloo 2", sans-serif; color:#4f714b; }
.brand-fruit { font-size: 35px; filter: drop-shadow(0 2px 0 rgba(102,66,30,.16)); }
.brand strong { display:block; font-size:23px; line-height:21px; letter-spacing:0; }
.brand small { display:block; color:#ad9e7e; font:700 9px/12px "Baloo 2",sans-serif; letter-spacing:1.2px; }
.level-strip { display:flex; gap:8px; align-items:center; }
.level-pill { position:relative; min-width:45px; height:37px; padding:0 10px; border:1px solid #e4d4af; border-radius:6px; color:#8d8068; background:#fffdf6; font:700 16px "Baloo 2",sans-serif; transition:.2s transform,.2s background; }
.level-pill:not(.locked):hover { transform:translateY(-2px); }
.level-pill.active { min-width:100px; color:#fff; border-color:#d75d44; background:var(--coral); box-shadow:0 3px 0 #c65741; }
.level-pill em { margin-left:6px; font:600 11px "Noto Sans SC",sans-serif; font-style:normal; }
.level-pill i { margin-left:4px; font-style:normal; font-size:10px; }
.top-actions { display:flex; gap:7px; align-items:center; }.tool-button { width:38px; height:38px; border:1px solid #e2d3b5; border-radius:6px; background:#fffdf7; color:#80906a; font:700 27px/34px "Baloo 2"; }.coin-display { height:38px; min-width:68px; padding:0 9px; display:flex; align-items:center; justify-content:center; gap:5px; border:1px solid #ead299; border-radius:6px; background:#fff9df; color:#81683c; font:800 17px "Baloo 2"; }.coin-display span,.shop-wallet span,.buy-button span { color:#f2ad36; text-shadow:0 1px 0 #c78427; }.shop-button { font-size:18px; }.music-button { color:#d78454; font-size:21px; }.music-button.muted { color:#a49b87; text-decoration:line-through; }
.play-area { width:min(1320px,100%); margin:clamp(22px,4vw,48px) auto 0; display:grid; grid-template-columns:230px minmax(490px, 620px) 230px; gap:clamp(20px,4vw,68px); align-items:center; justify-content:center; }
.side-panel { min-width:0; }
.round-badge { display:inline-block; padding:5px 14px 4px; color:#fff9ed; background:#77a06e; border:1px solid #608d5a; border-radius:4px; font-size:13px; font-weight:700; box-shadow:0 2px 0 #558150; }
.mission-heading { margin-top:22px; padding-bottom:10px; border-bottom:2px solid #e4d4b2; display:flex; justify-content:space-between; align-items:end; }
.mission-heading span,.skill-heading span { color:#8b806a; font-size:12px; font-weight:700; }
.mission-heading b { color:#5d8559; font-family:"Baloo 2"; font-size:17px; }
.objective-list { padding:6px 0; border-bottom:1px solid #ebddc1; }
.objective { display:grid; grid-template-columns:39px 1fr auto; gap:9px; align-items:center; padding:10px 0; font-size:13px; color:#655e4e; }.objective[hidden] { display:none; }
.objective-icon { width:34px; height:34px; display:grid; place-items:center; border-radius:7px; font-size:22px; }
.fruit-objective { background:#fce4d4; }
.crate-objective { color:#fbf0d3; background:#a97848; border:2px solid #72451f; font-size:19px; box-shadow:inset 0 0 0 2px #d6a564; }
.objective strong { color:#4c6e4a; font:700 14px "Baloo 2"; }
.move-box { margin-top:22px; text-align:center; padding:13px; border:1px solid #e5d4b1; border-radius:6px; background:rgba(255,254,247,.74); }
.move-box small { display:block; color:#877a64; font-size:12px; font-weight:600; }
.move-box strong { display:block; margin-top:-2px; color:#e2684c; font:800 45px/45px "Baloo 2"; }
.restart-text { display:block; width:100%; margin-top:12px; color:#798365; border:0; background:transparent; text-decoration:underline; font-size:12px; }
.board-zone { position:relative; text-align:center; }
.board-header { height:36px; display:flex; justify-content:center; align-items:center; gap:13px; color:#557a50; }
.board-header h1 { margin:0; font:800 25px/1 "Baloo 2"; }
.leaf { font-size:26px; color:#9fbc72; transform:rotate(-20deg); }.leaf.flipped { transform:rotate(20deg) scaleX(-1); }
.board { width:min(620px,calc(100vw - 32px)); margin:11px auto 0; padding:10px; display:grid; grid-template-columns:repeat(8,1fr); gap:5px; border:4px solid #baa16d; border-radius:8px; background:#7c9d67; box-shadow:0 5px 0 #927943, inset 0 0 0 3px #e8d299, 0 12px 22px rgba(95,75,38,.17); }
.cell { position:relative; aspect-ratio:1; min-width:0; border:0; border-radius:6px; background:#dce8bd; overflow:visible; isolation:isolate; transition:transform .14s, filter .14s; touch-action:none; }
.cell::before { content:""; position:absolute; inset:0; z-index:-1; opacity:.22; background:linear-gradient(135deg,#fff 0 11%,transparent 11% 89%,#719151 89%); }
.cell:hover:not(.crate) { filter:brightness(1.06); transform:translateY(-1px); }
.cell.drag-source { outline:3px solid #fff8bc; outline-offset:-3px; box-shadow:inset 0 0 0 3px #e9804e; z-index:5; }
.cell.drag-source .fruit { opacity:.28; transform:scale(.82); }
.cell.ai-source,.cell.ai-target { outline:3px solid #fff4a9; outline-offset:-3px; z-index:4; animation:hintPulse 1.5s ease-in-out infinite; }
.cell.ai-target { box-shadow:inset 0 0 0 3px #db9b51; animation-delay:.35s; }
.fruit { position:relative; z-index:1; display:grid; height:100%; place-items:center; font-size:clamp(23px,4.3vw,42px); line-height:1; filter:drop-shadow(0 2px 0 rgba(76,84,37,.18)); user-select:none; pointer-events:none; animation:pop .18s ease-out; }
.fruit.falling { animation:fall .42s cubic-bezier(.2,.75,.3,1) both; }
.drag-ghost { position:fixed; top:0; left:0; z-index:50; display:grid; place-items:center; border-radius:6px; color:inherit; background:rgba(255,255,245,.35); font-size:clamp(23px,4.3vw,42px); line-height:1; pointer-events:none; user-select:none; filter:drop-shadow(0 8px 6px rgba(63,58,45,.24)); transform:translate(-50%,-50%) scale(1.14); }
.ai-hint { position:fixed; top:0; left:0; z-index:49; display:grid; place-items:center; border-radius:50%; background:rgba(255,255,245,.7); font-size:clamp(23px,4.3vw,42px); line-height:1; pointer-events:none; user-select:none; filter:drop-shadow(0 6px 5px rgba(63,58,45,.24)); animation:aiDrag 1.65s cubic-bezier(.35,.05,.35,1) infinite; }.ai-hint::after { content:"✦"; position:absolute; right:-5px; top:-9px; color:#efaf45; font:700 15px "Baloo 2"; }
.crate { background:#a16d38; box-shadow:inset 0 0 0 3px #70451f, inset 0 0 0 7px #cb9653; }
.crate::before { opacity:1; background:linear-gradient(37deg,transparent 45%,#75461e 46% 51%,transparent 52%),linear-gradient(143deg,transparent 45%,#e0af64 46% 51%,transparent 52%); }
.crate::after { content:attr(data-hits); position:absolute; top:2px; right:4px; width:16px; height:16px; display:grid; place-items:center; color:#75451f; background:#f6dc91; border-radius:50%; font:800 11px "Baloo 2"; }
.crate.damaged { background:#be8750; box-shadow:inset 0 0 0 3px #70451f, inset 0 0 0 7px #d6a565; }
.crate.damaged::before { background:linear-gradient(62deg,transparent 44%,#75461e 45% 49%,transparent 50%),linear-gradient(125deg,transparent 48%,#72421b 49% 52%,transparent 53%); }
.removing .fruit { animation: vanish .24s ease-in forwards; }
.board-message { min-height:22px; padding-top:10px; color:#aa694a; font-size:13px; font-weight:600; }
.score-label { color:#8b806a; font-size:12px; font-weight:700; }.score { margin-top:-5px; color:#ef7454; font:800 38px/43px "Baloo 2"; letter-spacing:1px; }
.skill-heading { padding:15px 0 9px; border-bottom:2px solid #e4d4b2; display:flex; align-items:baseline; justify-content:space-between; }.skill-heading small { color:#aa9c82; font-size:10px; }
.skill-list { padding-top:7px; }.skill-button { width:100%; min-height:60px; margin:4px 0; padding:7px 7px 7px 0; border:0; border-bottom:1px solid #ebddc1; display:grid; grid-template-columns:46px 1fr 25px; align-items:center; text-align:left; color:#625b4b; background:transparent; transition:.16s transform,.16s background; }.skill-button:hover:not(:disabled),.skill-button.armed { transform:translateX(3px); background:#fffaf0; }.skill-button:disabled { opacity:.45; cursor:not-allowed; }.skill-icon { width:37px; height:37px; display:grid; place-items:center; margin-left:4px; border-radius:7px; color:white; font:bold 25px "Baloo 2"; }.bomb-icon { background:#ee7658; }.row-icon { background:#efad43; }.column-icon { background:#6da070; }.skill-button b,.skill-button small { display:block; }.skill-button b { font-size:13px; }.skill-button small { color:#9a907c; font-size:10px; }.skill-button em { width:21px; height:21px; display:grid; place-items:center; color:white; background:#738f64; border-radius:50%; font:700 12px "Baloo 2"; font-style:normal; }.tip-card { margin-top:21px; padding:9px 9px 9px 8px; display:flex; gap:7px; text-align:left; border-left:2px solid #e8b357; background:#fff7e5; color:#8b7652; }.tip-card span { font-size:17px; }.tip-card p { margin:0; font-size:11px; line-height:18px; }
footer { max-width:1320px; margin:38px auto 0; padding-top:13px; border-top:1px solid var(--line); display:flex; justify-content:center; align-items:center; gap:12px; color:#a89b82; font-size:11px; } footer i { height:11px; width:1px; background:#d6c8a8; }
.modal { position:fixed; inset:0; z-index:20; display:grid; place-items:center; padding:20px; background:rgba(56,58,36,.32); backdrop-filter:blur(2px); }.modal.hidden { display:none; }.modal-card { width:min(350px,100%); padding:28px 30px 25px; text-align:center; border:4px solid #e5c878; border-radius:8px; background:#fffcef; box-shadow:0 14px 30px rgba(47,47,27,.28); }.modal-icon { font-size:46px; }.modal-card h2 { margin:4px 0 7px; color:#5e8558; font:800 28px "Baloo 2"; }.modal-card p { margin:0; color:#7c725e; font-size:13px; }.modal-score { margin:12px 0; color:#e7694d; font:800 22px "Baloo 2"; }.modal-coins { min-height:18px; margin:-8px 0 12px; color:#ba7b26; font:700 14px "Baloo 2"; }.modal-card > button:not(.modal-close) { padding:9px 28px; color:#fff; border:1px solid #c55d43; border-radius:5px; background:#e96e51; box-shadow:0 3px 0 #bb533c; font-weight:700; }.shop-card { position:relative; width:min(430px,100%); padding:24px 25px 20px; text-align:left; }.modal-close { position:absolute; top:9px; right:10px; width:28px; height:28px; border:0; color:#9e9077; background:transparent; font-size:25px; line-height:24px; }.shop-title-row { display:flex; align-items:center; justify-content:space-between; padding-right:28px; border-bottom:2px solid #e6d5b2; }.shop-title-row small { color:#9d8f75; font-size:11px; font-weight:700; }.shop-title-row h2 { margin:0 0 7px; }.shop-wallet { display:flex; align-items:center; gap:5px; color:#8f6b2d; font:800 22px "Baloo 2"; }.shop-items { padding-top:6px; }.shop-item { min-height:66px; display:grid; grid-template-columns:47px 1fr auto; gap:9px; align-items:center; border-bottom:1px solid #eadcc0; }.shop-item .skill-icon { margin-left:0; }.shop-item b,.shop-item small { display:block; }.shop-item b { font-size:13px; }.shop-item small { color:#9b9079; font-size:10px; }.buy-button { min-width:62px; padding:7px 8px; border:1px solid #c7963b; border-radius:5px; color:#815a1e; background:#ffdf82; box-shadow:0 2px 0 #c7963b; font:700 13px "Baloo 2"; }.buy-button:disabled { color:#a39b89; border-color:#d4c8aa; background:#eee8d9; box-shadow:none; cursor:not-allowed; }
@keyframes pop { from { transform:scale(.72); opacity:.2; } to { transform:scale(1); opacity:1; } } @keyframes vanish { to { transform:scale(.2) rotate(20deg); opacity:0; } } @keyframes fall { from { transform:translateY(calc(var(--drop) * -1px)); } to { transform:translateY(0); } } @keyframes hintPulse { 0%,100% { filter:brightness(1); } 50% { filter:brightness(1.16); } } @keyframes aiDrag { 0%,16% { transform:translate(-50%,-50%) scale(.95); opacity:.75; } 42%,68% { transform:translate(calc(-50% + var(--hint-x)),calc(-50% + var(--hint-y))) scale(1.15); opacity:1; } 100% { transform:translate(-50%,-50%) scale(.95); opacity:.75; } }
@media (max-width: 980px) { .game-shell { padding:17px 16px; }.play-area { grid-template-columns:180px minmax(420px,1fr) 180px; gap:18px; }.brand { min-width:auto; }.brand strong { font-size:19px; }.level-pill { min-width:35px; padding:0 7px; }.level-pill.active { min-width:78px; }.level-pill em { font-size:9px; }.objective { grid-template-columns:34px 1fr; }.objective strong { grid-column:2; }.skill-button { grid-template-columns:39px 1fr 22px; } }
@media (max-width: 1120px) and (min-width: 721px) { .play-area { grid-template-columns:minmax(420px,560px) 190px; grid-template-rows:auto auto; gap:24px; align-items:start; }.board-zone { grid-column:1; grid-row:1 / span 2; }.status-panel { grid-column:2; grid-row:1; }.skill-panel { grid-column:2; grid-row:2; }.board { width:min(560px,calc(100vw - 260px)); }.round-badge { font-size:12px; }.mission-heading { margin-top:14px; }.move-box { margin-top:14px; }.score { font-size:33px; line-height:37px; }.skill-heading { padding-top:10px; }.tip-card { margin-top:12px; } }
@media (max-width: 720px) { .topbar { height:auto; flex-wrap:wrap; padding-bottom:12px; }.brand { order:1; }.top-actions { order:2; margin-left:auto; }.level-strip { order:3; width:100%; justify-content:center; }.play-area { margin-top:18px; display:flex; flex-direction:column; gap:16px; }.skill-panel { order:1; width:min(500px,100%); display:grid; grid-template-columns:126px 1fr; column-gap:7px; }.score-label { align-self:end; }.score { align-self:start; font-size:33px; }.skill-heading { grid-column:2; grid-row:1; padding:0 0 5px; }.skill-list { grid-column:2; grid-row:2; padding:0; display:flex; gap:4px; }.skill-button { min-width:0; grid-template-columns:1fr; place-items:center; text-align:center; border:0; }.skill-button span:nth-child(2) b,.skill-button span:nth-child(2) small { display:none; }.skill-button em { position:absolute; margin:27px 0 0 27px; }.tip-card { display:none; }.board-zone { order:2; width:100%; }.status-panel { order:3; width:min(500px,100%); display:grid; grid-template-columns:auto 1fr 80px; column-gap:13px; align-items:center; }.round-badge { grid-column:1; }.mission-heading { margin:0; grid-column:2; }.objective-list { grid-column:1/3; display:flex; gap:12px; border:0; }.objective { padding:6px 0; }.move-box { margin:0; grid-column:3; grid-row:1/3; padding:7px; }.move-box strong { font-size:34px; line-height:34px; }.restart-text { display:none; } footer { margin-top:20px; } }
@media (max-width: 400px) { .level-pill { min-width:30px; }.level-pill.active { min-width:69px; }.board { padding:7px; gap:3px; }.board-header h1 { font-size:21px; } }