:root{
  --wood-dark:#6b331e;
  --wood:#9a542e;
  --wood-light:#cc7a3d;
  --wood-highlight:#eea75a;
  --cream:#fff2d3;
  --cream2:#ffe7b8;
  --ink:#3b2117;
  --muted:#7d5438;
  --line:#e3bd91;
  --danger:#b3261e;
  --sprite:32px;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0}
body{min-width:1160px;min-height:640px;background:#3bc7ef;color:var(--ink);font:700 13px/1.2 "Courier New",monospace}
img{image-rendering:pixelated}
button,input{font:inherit;color:inherit}
button{cursor:pointer}
button:focus-visible,input:focus-visible{outline:3px solid var(--ink);outline-offset:1px}
::-webkit-scrollbar{width:10px}
::-webkit-scrollbar-track{background:#f1d3a0}
::-webkit-scrollbar-thumb{background:var(--wood);border:2px solid var(--wood-dark)}

#game{height:100%;display:grid;grid-template-rows:54px minmax(0,1fr);gap:6px;padding:6px;background:linear-gradient(#2dbce9 0 45%,#6bcf52 45%)}

.wood-panel,.wood-frame{position:relative;border:3px solid var(--wood-dark);box-shadow:inset 0 0 0 3px var(--wood-highlight),0 3px 0 rgba(49,29,18,.3)}
.wood-panel{background:repeating-linear-gradient(0deg,var(--wood-light) 0 10px,var(--wood) 10px 15px)}
.wood-frame{background:var(--cream);box-shadow:inset 0 0 0 3px #ffdba2,0 3px 0 rgba(49,29,18,.3)}

/* ===== Header ===== */
.game-header{display:grid;grid-template-columns:minmax(380px,1.08fr) minmax(500px,.92fr);gap:6px;min-height:0}
.title-board{display:grid;place-items:center;overflow:hidden}
.title-text{margin:0;font:900 34px/1 Georgia,"Times New Roman",serif;letter-spacing:-1px;color:#fff3bf;text-shadow:3px 3px 0 #4a2114,-1px -1px 0 #4a2114;white-space:nowrap}
.hud-board{display:grid;grid-template-columns:repeat(4,1fr);padding:5px;gap:4px}
.hud-item{position:relative;min-width:0;display:grid;grid-template-columns:32px 1fr;grid-template-rows:auto auto;align-content:center;column-gap:7px;padding:0 8px;text-align:left;background:var(--cream);border:2px solid var(--wood-dark);box-shadow:inset 0 0 0 2px #ffd69b}
.hud-pixel-icon{grid-row:1 / 3;align-self:center;width:32px;height:32px}
/* All four HUD icons share one 32px box, so centring, left padding and text gap are identical.
   The art fills a different amount of each 16px sprite (sun 16px tall, coin and sprout 14, crate 12),
   so padding sets a per-sprite scale that draws every icon about 24px tall. */
.hud-pixel-icon[src$="sun.png"]{padding:4px}              /* 1.5x  -> 24x24 */
.hud-pixel-icon[src$="coin.png"]{padding:2px}             /* 1.75x -> 21x24.5 */
.hud-pixel-icon[src$="sprout.png"]{padding:0 3px 4px 1px} /* 1.75x -> 23x24.5; its art sits low-right in the sprite */
                                                          /* crate: 2x -> 20x24 */
.hud-item span{font-size:10px;line-height:1.1;letter-spacing:.3px}
.hud-item b{font-size:18px;line-height:1}
.day-card em{position:absolute;right:5px;top:50%;transform:translateY(-50%);font-style:normal;font-size:10px;padding:3px 5px;background:#ffe295;border:2px solid var(--wood-dark)}
.day-card:hover em{background:#fff3bf}

/* ===== Layout ===== */
.game-grid{min-height:0;display:grid;grid-template-columns:300px minmax(0,1fr) 310px;gap:6px}
.left-stack,.right-stack{min-height:0;display:grid;gap:6px}
.left-stack{grid-template-rows:auto minmax(0,1fr)}
.right-stack{grid-template-rows:minmax(0,1fr) auto auto}
.ui-card{min-height:0;padding:7px 8px;overflow:hidden}
.ui-card h2{margin:0 0 6px;padding:5px 10px;font:900 17px/1 Georgia,serif;background:var(--cream2);border:2px solid var(--wood-dark);box-shadow:inset 0 0 0 1px #fff0c7}
.coin{width:16px;height:16px;flex:none}

/* ===== Your Tree ===== */
.tree-name-row{display:grid;grid-template-columns:1fr 32px;gap:5px;margin-bottom:6px}
.tree-name-row input{min-width:0;padding:6px 8px;background:#fff6d9;border:2px solid var(--wood-dark);text-transform:uppercase;font-size:14px;font-weight:900}
.tree-name-row button{display:grid;place-items:center;padding:0;border:2px solid var(--wood-dark);background:#ffe6a7;box-shadow:inset 0 0 0 2px #fff2bd}
.tree-name-row button:hover{background:#fff3bf}
.tree-name-row button img{width:16px;height:16px}
.stat-row{display:grid;grid-template-columns:32px 1fr;gap:7px;align-items:center;margin:5px 0}
.stat-pixel-icon{width:32px;height:32px}
.stat-label{display:flex;justify-content:space-between;font-size:12px;margin-bottom:2px}
.meter{height:12px;border:2px solid var(--wood-dark);background:#fff6d8;padding:1px}
.meter i{display:block;height:100%;width:0;transition:width .2s steps(5,end)}
.meter.green i{background:#2fd14d}.meter.blue i{background:#26aaf0}
.meter.low{border-color:var(--danger);animation:blink 1s steps(2,end) infinite}
@keyframes blink{50%{background:#ffc9c0}}
.tree-actions{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:7px}
.pixel-button{display:flex;align-items:center;justify-content:center;gap:6px;border:3px solid var(--wood-dark);padding:8px 5px;font-weight:900;font-size:13px;box-shadow:inset 0 0 0 2px rgba(255,255,255,.32),0 2px 0 #4f2a1a}
.pixel-button:hover{filter:brightness(1.06)}
.pixel-button:active{transform:translateY(2px);box-shadow:inset 0 0 0 2px rgba(255,255,255,.32)}
.button-icon{width:16px;height:16px}
.green-btn{background:#8fe45c}.peach-btn{background:#ffb885}.sell-btn{background:#ff8e9e;width:100%}
.sell-btn.idle{filter:saturate(.45)}

/* ===== Fruit Seeds ===== */
.seed-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto;gap:6px}
.seed-card h2{margin:0}
.seed-grid{min-height:0;overflow-y:auto;display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:minmax(calc(var(--sprite) + 42px),1fr);gap:4px}
.seed-btn{min-width:0;display:grid;grid-template-rows:1fr auto auto;place-items:center;gap:2px;padding:3px 2px 4px;border:2px solid #c77e56;background:#fff4d4;box-shadow:inset 0 0 0 1px #ffe5ad}
.seed-btn:hover{background:#fff9e6}
.seed-btn .sprite{width:var(--sprite);height:var(--sprite)}
.seed-btn small{font-size:11px;line-height:1.1;letter-spacing:-.3px;white-space:nowrap}
.seed-price{display:inline-flex;align-items:center;gap:3px;font-size:12px;line-height:1;padding:1px 5px 1px 2px;background:#ffe6a0;border:1px solid #b66d38}
.seed-btn.active{background:#ffe98a;border-color:var(--ink);box-shadow:inset 0 0 0 3px #f59f1c}
.seed-btn.unaffordable .sprite{filter:grayscale(.8);opacity:.55}
.seed-btn.unaffordable small{color:var(--muted)}
.seed-btn.unaffordable .seed-price{background:#ffd3cb;border-color:var(--danger);color:var(--danger)}

/* Fixed footprint: every row has a set height, so no fruit can resize the panel. */
.fruit-info{height:126px;display:grid;grid-template-rows:32px 38px 30px;gap:5px;padding:6px 7px;overflow:hidden;border:2px solid #b96f45;background:#fff1c9;box-shadow:inset 0 0 0 1px #ffe2a7}
.fruit-info-head{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:center}
.fruit-info-head>img{width:32px;height:32px}
.fruit-info-head>div{display:grid;gap:1px;min-width:0}
.fruit-info-head b,.fruit-info-head small{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fruit-info-head b{font-size:15px;line-height:1.1}
.fruit-info-head small{font-size:12px;line-height:1.1;color:var(--muted)}
.fruit-economy{display:grid;grid-template-columns:repeat(3,1fr);gap:4px}
.fruit-economy span{display:grid;place-items:center;align-content:center;gap:1px;background:#fff8df;border:2px solid #d5a06b}
.fruit-economy small{font-size:10px;line-height:1;color:var(--muted)}
.fruit-economy b{font-size:14px;line-height:1}
.fruit-economy .profit{background:#e3f6c4;border-color:#6aa84a}
.fruit-economy .profit b{color:#24702f}
.fruit-info p{margin:0;height:30px;font-size:12px;line-height:15px;color:#68432e;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ===== Orchard ===== */
.orchard-column{min-height:0;min-width:0;display:grid;grid-template-rows:36px minmax(0,1fr);gap:5px}
.orchard-bar-row{display:grid;grid-template-columns:150px minmax(0,1fr);gap:5px}
.orchard-tab{display:grid;place-items:center;color:#fff1d3;font:900 19px/1 Georgia,serif;text-shadow:2px 2px 0 #4e2819}
.instruction-ribbon{display:grid;grid-template-columns:minmax(0,1fr) 26px;align-items:center;gap:6px;padding:0 4px 0 10px;background:var(--cream);border:3px solid var(--wood-dark);box-shadow:inset 0 0 0 2px #ffdba0;font-size:13px}
.instruction-ribbon span{text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.help-button{width:24px;height:24px;padding:0;display:grid;place-items:center;border:2px solid var(--wood-dark);background:#ffe295;font-weight:900;font-size:15px;line-height:1}
.help-button:hover{background:#fff3bf}

.orchard-scene{position:relative;min-height:0;overflow:hidden;border:4px solid var(--wood-dark);background:url('assets/meadow.png') center bottom/cover;box-shadow:inset 0 0 0 3px #ffd28e}
.scene-shade{position:absolute;inset:0;background:linear-gradient(rgba(0,0,0,0) 0 72%,rgba(0,55,26,.08) 100%);pointer-events:none}
.tree-wrap{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(78%,650px);aspect-ratio:1/1;display:grid;place-items:center}
.main-tree{width:61%;height:auto;transform:scale(1.22);filter:drop-shadow(10px 13px 0 rgba(49,81,29,.16));z-index:2}
.fruit-slots{position:absolute;inset:0;z-index:4}
.fruit-slot{position:absolute;width:64px;height:64px;border:0;background:transparent;padding:0;display:grid;place-items:center;z-index:5}
.fruit-slot.locked{opacity:0;pointer-events:none}
.fruit-slot.empty::after{content:"+";width:22px;height:22px;display:grid;place-items:center;border:2px dashed rgba(255,255,210,.9);background:rgba(69,136,45,.3);color:#fff4a8;text-shadow:2px 2px 0 #347126;font-size:16px;line-height:1}
.fruit-slot.empty:hover::after{background:rgba(255,244,168,.45);border-style:solid}
.fruit-slot img{width:48px;height:48px;filter:drop-shadow(3px 3px 0 #4f6d2e)}
.fruit-slot.growing{cursor:default}
.fruit-slot.growing img{width:32px;height:32px;filter:grayscale(.58) brightness(.94) drop-shadow(2px 2px 0 #53693a)}
.fruit-slot .timer{position:absolute;bottom:-2px;padding:1px 4px;background:#fff1b6;border:2px solid #704122;font-size:11px;line-height:1;white-space:nowrap}

/* Ripe: gentle 2px bob, brightness, and sparkles on the slot corners (outside the sprite). No box. */
.fruit-slot.ripe{z-index:9;animation:fruitBob 1s steps(2,end) infinite}
.fruit-slot.ripe img{filter:drop-shadow(3px 3px 0 #4f6d2e) brightness(1.08)}
.fruit-slot.ripe::before,.fruit-slot.ripe::after{content:"";position:absolute;width:16px;height:16px;background:url('assets/icons/spark.png') center/contain no-repeat;image-rendering:pixelated;pointer-events:none;animation:ripeSpark 1s steps(2,end) infinite}
.fruit-slot.ripe::before{left:-5px;top:-5px}
.fruit-slot.ripe::after{right:-5px;bottom:-3px;animation-delay:.5s}
@keyframes fruitBob{50%{transform:translateY(-2px)}}
@keyframes ripeSpark{50%{opacity:.25}}

.tree-sign{position:absolute;left:17%;bottom:7%;z-index:6}
.wood-sign{display:flex;align-items:center;justify-content:center;min-width:56px;padding:6px 12px;line-height:1;background:#d9863e;border:3px solid #6f3a1d;box-shadow:inset 0 0 0 2px #eead61,0 3px 0 rgba(61,37,22,.25);font-size:13px}
.wood-sign::after{content:"";position:absolute;left:50%;top:100%;width:9px;height:33px;background:#75401f;transform:translateX(-50%)}
.basket-art{position:absolute;right:10%;bottom:4%;z-index:6;display:grid;justify-items:center}
.basket-art img{width:96px;height:88px;filter:drop-shadow(4px 5px 0 rgba(77,49,28,.24))}
.basket-art span{margin-top:-14px;z-index:1;padding:2px 8px;background:#f5c66f;border:2px solid #6b341c;font-size:11px}

/* ===== Fruit Market ===== */
.market-card{display:grid;grid-template-rows:auto minmax(0,1fr) auto auto;gap:5px}
.market-card h2{margin:0}
.basket-list{min-height:76px;overflow-y:auto;padding:0 6px;border:2px solid #b96f45;background:#fff1c9;box-shadow:inset 0 0 0 1px #ffe2a7}
.basket-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto 54px;align-items:center;gap:7px;height:38px;border-bottom:2px solid var(--line);font-size:13px}
.basket-row:last-child{border-bottom:0}
.basket-row>img{width:32px;height:32px}
.basket-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.basket-row em{display:flex;align-items:center;justify-content:flex-end;gap:3px;font-style:normal}
.basket-empty{height:100%;display:grid;place-content:center;justify-items:center;gap:4px;color:var(--muted);font-size:13px}
.basket-empty img{width:48px;height:44px;opacity:.75}
.basket-value{text-align:center;font-size:13px;color:#6f472d}
.basket-value b{font-size:15px;color:var(--ink)}

/* ===== Tree Upgrades ===== */
.upgrade-row{display:grid;grid-template-columns:32px minmax(0,1fr) auto;align-items:center;gap:8px;padding:5px 0;border-top:2px solid var(--line)}
.upgrade-row:first-of-type{border-top:0;padding-top:0}
.upgrade-row:last-child{padding-bottom:0}
.upgrade-pixel-icon{width:32px;height:32px}
.upgrade-row>span{display:grid;gap:1px;min-width:0}
.upgrade-row b{font-size:13px}
.upgrade-row small{font-size:12px;color:var(--muted)}
.coin-buy{min-width:62px;display:flex;align-items:center;justify-content:center;gap:4px;padding:6px 8px;border:2px solid #80502d;background:#ffe697;box-shadow:0 2px 0 #80502d;font-weight:900;font-size:13px}
.coin-buy:hover{background:#fff3bf}
.coin-buy:active{transform:translateY(2px);box-shadow:none}
.coin-buy.unaffordable{background:#ffd3cb;border-color:var(--danger);color:var(--danger);box-shadow:0 2px 0 var(--danger)}
.coin-buy.maxed{background:#cfeab0;border-color:#4d8a3a;color:#24702f;box-shadow:none;cursor:default}

/* ===== Today's Goals ===== */
.goal-row{display:grid;grid-template-columns:20px minmax(0,1fr) auto 46px;align-items:center;gap:7px;height:30px;border-top:2px solid var(--line);font-size:12px}
.goal-row:first-child{border-top:0}
.goal-row i{width:20px;height:20px;border:2px solid #77502e;background:#fff3d0}
.goal-row span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.goal-row em{display:flex;align-items:center;justify-content:flex-end;gap:2px;font-style:normal;color:#24702f}
.goal-row.claimed{height:24px;opacity:.6}
.goal-row.claimed i{background:#83db62 url('assets/icons/check.png') center/16px 16px no-repeat;image-rendering:pixelated}
.goal-row.claimed span{text-decoration:line-through}
.goal-row.claimed b{grid-column:3 / 5;text-align:right;color:#24702f}

/* ===== Pixel toasts (top-right of the orchard, clear of the branch slots) ===== */
.toasts{position:absolute;top:8px;right:8px;z-index:20;display:grid;gap:5px;pointer-events:none}
.toast{width:280px;display:grid;grid-template-columns:16px minmax(0,1fr);align-items:center;gap:8px;padding:5px 9px 6px 8px;border:3px solid var(--ink);background:#ffeeb5;box-shadow:inset 0 0 0 2px #fff8dc,3px 3px 0 rgba(49,29,18,.4);animation:toastIn .16s steps(3,end)}
.toast img{width:16px;height:16px}
.toast b,.toast span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toast b{font-size:13px;line-height:16px;font-weight:900;letter-spacing:.5px}
.toast span{font-size:12px;line-height:15px}
.toast.error{background:#ff9d94;box-shadow:inset 0 0 0 2px #ffc9c0,3px 3px 0 rgba(49,29,18,.4)}
.toast.error b{color:#6e120e}
.toast.success{background:#a6ec7c;box-shadow:inset 0 0 0 2px #d6f8b8,3px 3px 0 rgba(49,29,18,.4)}
.toast.success b{color:#1d5a27}
.toast.bump{animation:toastBump .16s steps(2,end)}
.toast.out{animation:toastOut .16s steps(3,end) forwards}
@keyframes toastIn{from{opacity:0;transform:translateX(18px)}}
@keyframes toastBump{50%{transform:translateY(-3px)}}
@keyframes toastOut{to{opacity:0;transform:translateX(18px)}}

/* ===== Help modal ===== */
.help-modal{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:24px;background:rgba(26,38,30,.58)}
.help-modal.open{display:grid}
.help-modal-card{width:min(460px,90vw);padding:14px 16px}
.help-modal-head{display:flex;justify-content:space-between;align-items:center;padding-bottom:8px;margin-bottom:8px;border-bottom:3px solid #c78b53}
.help-modal-head h2{margin:0;font:900 22px/1 Georgia,serif}
.help-modal-head button{width:30px;height:30px;padding:0;border:3px solid var(--wood-dark);background:#ffb695;font-weight:900;font-size:15px;line-height:1}
.help-modal-card ol{margin:0;padding-left:28px;font-size:14px;line-height:1.5}
.help-modal-card li{margin:4px 0}

/* Tall windows: scale sprites up one integer step instead of leaving empty space. */
@media(min-height:880px){
  :root{--sprite:48px}
  .basket-empty img{width:96px;height:88px}
}