/* V0.1.1 presentation layer; input layout and gameplay remain in their original modules. */
:root{--pine:#315a43;--cream:#fff9e9;--border:#e4ddc2;--shadow:0 3px 0 #506d3410,0 9px 24px #43683b0c}
.topbar{gap:18px}.brand-mark{box-shadow:0 3px 0 #365d3425}.brand-sub{color:#60734b}.brand-sub b{padding:3px 6px;background:#f8f4d580;border-radius:6px}
.wallet{position:relative;box-shadow:0 3px 0 #b1994a18;border-color:#fff8dc}.wallet strong{font-variant-numeric:tabular-nums}
#coin-gain{position:absolute;right:12px;top:calc(100% + 7px);font-size:15px;font-weight:800;color:#6e571d;background:#ffedb5;padding:5px 10px;border-radius:12px;white-space:nowrap;opacity:0;transform:translateY(5px);transition:opacity .2s,transform .2s;z-index:2}#coin-gain.show{opacity:1;transform:translateY(0)}
.guide{max-width:360px;gap:10px;padding:12px 15px;border-radius:18px;background:#fff9e9f2;box-shadow:var(--shadow)}.guide p{font-size:14px;line-height:1.45;font-weight:550}.guide .eyebrow{font-size:10px;letter-spacing:1.4px;color:#85905f}.guide-icon{flex:none;width:28px}.guide-dots{display:flex;gap:4px;align-self:flex-end;padding-bottom:5px;margin-left:auto}.guide-dots i{width:4px;height:4px}.guide-dots .done{background:#b8a05a}
.basket-card{width:252px;padding:13px 15px;border-radius:18px}.card-heading{font-size:13px;margin-bottom:8px}.card-heading svg{width:18px;height:18px}.little-tag{font-size:12px;padding:3px 7px}.basket-note{display:none}#basket-list{display:grid;grid-template-columns:repeat(3,1fr);gap:11px;border-radius:10px}.basket-row{display:grid;grid-template-columns:32px 1fr;gap:1px;padding:0}.basket-row>span:nth-child(2){grid-column:1/-1;grid-row:2;font-size:12px;color:#65734e;text-align:center;white-space:nowrap}.basket-row strong{font-size:17px;margin:0;text-align:center;font-variant-numeric:tabular-nums}.basket-emoji{width:32px;height:32px;background:transparent}
.crop-art{display:inline-grid;place-items:center;width:36px;height:36px;flex:none;vertical-align:middle}.crop-art img{display:block;width:100%;height:100%;object-fit:contain;pointer-events:none}.basket-emoji .crop-art{width:33px;height:33px}.shop-crop .crop-art{width:55px;height:55px}.inventory-row>span:first-child{display:flex;align-items:center;gap:5px}.inventory-row .crop-art{width:30px;height:30px}
.toolbelt{padding:8px;gap:7px;background:#fff9e9;border:1px solid #ffffec;border-radius:22px;box-shadow:0 4px 0 #65815120,0 12px 24px #4f74391a}.tool{height:84px;gap:5px;border:2px solid transparent;border-radius:15px;background:#f0efd9;transition:background .15s,transform .15s}.tool.active{color:#fff7dd;background:#52734d;border-color:#365b3b;box-shadow:inset 0 1px 0 #86a373,inset 0 -3px 0 #365b3b45}.tool.active::after{content:'';position:absolute;bottom:4px;width:20px;height:3px;border-radius:3px;background:#f6dc8f}.tool-icon{height:35px}.tool-icon .crop-art{width:39px;height:39px}.tool-name{font-weight:700}.tool-shortcut{color:#83926a;font-size:10px;top:3px;left:5px}.tool.active .tool-shortcut{color:#d8e1b8}.seed-count{right:2px;top:2px;min-width:23px;height:22px;font-size:13px;border:1px solid #d8d9b8;border-radius:8px;color:#48603c;background:#fff8df;font-variant-numeric:tabular-nums;box-shadow:0 2px 0 #45613b0a}.tool.active .seed-count{background:#ffe4a0;color:#5a4b24;border-color:#efd18a}
.selected-tile{background:#f5f5dfec;border:1px solid #f9f8e5;box-shadow:0 3px 12px #53704109;padding:10px 18px;border-radius:16px;min-width:218px}.selected-tile .eyebrow{color:#7b895c;letter-spacing:1.2px}.selected-tile strong{font-size:14px;font-weight:700}.selected-tile>span:last-child{font-size:13px;color:#6a7a51}.selected-tile[data-stage=ready]{background:#fff0c4;border-color:#ffe4a0}.selected-tile[data-stage=ready] strong{color:#82632a}.crop-progress{height:6px;background:#d8dfbc;width:145px}.crop-progress>span{background:#7ca568;border-radius:8px}
.action-button{background:#426c4b;border-width:3px;box-shadow:0 4px 0 #37583c40,0 8px 18px #496a3614}.action-button.ready{background:#967137;border-color:#ffe8a2;box-shadow:0 4px 0 #77602f35,0 0 0 5px #ffe3a130}.action-button.walking::after{content:'Đang đến…';position:absolute;bottom:calc(100% + 9px);white-space:nowrap;font-size:12px;font-weight:600;background:#fff8e6;color:#526b44;padding:5px 9px;border-radius:9px}.keyboard-hint{font-size:9px;opacity:.7}
.joystick{background:#f5f4d964;border:2px solid #fff8e5c0;box-shadow:inset 0 3px 8px #46683712,0 4px 0 #526f3310}.stick-knob{background:#fff5d6;border:1px solid #ffffef;box-shadow:0 4px 0 #57723c25,0 3px 9px #57723c16}.stick-cross{background:#7a985b25}
.scene-actions .icon-button{width:44px;height:44px;background:#f7f7e1bf;border-color:#fff8e573}.scene-actions>span{font-size:12px;color:#5e7449}.desktop-hint{font-size:12px;color:#738358}
#toast{background:#355c44f5;border:1px solid #7291646b;border-radius:16px;font-size:14px;font-weight:550;box-shadow:0 4px 16px #31583a16}
.farm-dialog{border:1px solid #fff6d9;border-radius:25px;background:#fffaeb;box-shadow:0 14px 70px #24443840}.farm-dialog::backdrop{background:#2d48375c;backdrop-filter:blur(2px)}.dialog-top h2{font-size:27px}.dialog-intro{color:#6f7d58;line-height:1.6}.shop-balance{background:#f6eaca;border:1px solid #ece0ba;margin:17px 0 8px}.shop-item{padding:16px 0;gap:15px}.shop-copy h3{font-size:17px}.shop-copy p,.owned{font-size:13px;color:#738056}.buy-button{min-width:74px;min-height:60px;border:1px solid #325739;background:#527448;box-shadow:0 3px 0 #375a3620;font-size:13px}.shop-crop{width:65px;height:66px;border-radius:18px;background:#f6e7bf}.shop-crop.tomato{background:#f8e2cc}.shop-crop.strawberry{background:#f7e2de}.shop-feedback{font-size:14px;line-height:1.4}.return-button{min-height:50px;background:#edf0d5;color:#526a42}.inventory-head{font-size:13px;color:#75835a}.inventory-row{font-size:15px}.inventory-row strong{font-size:18px;font-variant-numeric:tabular-nums}.bag-coins{background:#f6eaca}.save-explainer{font-size:13px}.help-steps span{color:#6b7855}
@media(max-width:1050px){.tool{width:65px}.guide{max-width:350px}}
@media(hover:hover){.tool.active:hover{background:#52734d}.tool:hover:not(.active){background:#e4e8c9}}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media(max-width:700px){
  .topbar{gap:8px}.tool{width:100%;height:76px;gap:4px}.tool-icon .crop-art{width:34px;height:34px}.tool-name{font-size:13px}.guide{max-width:none}.guide p{font-size:14px}.guide-dots{align-self:center;padding:0}.selected-tile{min-width:0;padding:6px;border-radius:12px}.selected-tile strong{font-size:13px}.selected-tile>span:last-child{font-size:12px}.crop-progress{width:100%}.shop-item{gap:10px}.shop-crop{width:48px;height:58px}.shop-crop .crop-art{width:47px;height:47px}.shop-copy p,.owned{font-size:13px}.buy-button{min-width:65px}.inventory-row{font-size:13px}.inventory-row .crop-art{width:25px;height:25px}.inventory-row>span:first-child{gap:2px}
}
/* Touch spacing: the garden stays above two comfortable thumb controls. */
@media(min-width:701px) and (max-width:1200px){
  .joystick-area{position:absolute;left:28px;bottom:19px}.action-button{position:absolute;right:28px;bottom:19px}.controls-area{gap:0}.guide{max-width:340px}.selected-tile{bottom:146px}.scene-actions{bottom:176px}.basket-card{width:235px}
}
@media(pointer:coarse) and (min-width:1201px){
  .joystick-area{position:absolute;left:40px;bottom:19px}.action-button{position:absolute;right:40px;bottom:19px}.controls-area{gap:0}
}
@media(max-width:700px){
  #game{top:189px;bottom:215px}
  .topbar{top:max(13px,env(safe-area-inset-top));left:14px;right:14px}.brand{gap:8px}.brand-sub{font-size:10px}.brand-sub b{padding:2px 3px;margin-left:2px}.wallet{padding:8px 10px}.wallet strong{font-size:18px}.shop-button{width:44px;height:44px}
  .guide{top:68px;left:14px;right:14px;min-height:72px;padding:9px 11px;gap:8px;border-radius:15px}.guide>div:not(.guide-dots){min-width:0;flex:1}.guide .eyebrow{font-size:9px;letter-spacing:1.1px}.guide p{font-size:14px;line-height:1.4;max-width:none;margin:3px 0 0}.guide-icon{width:22px}.guide-dots{display:none}
  .scene-actions{top:145px;left:14px;right:65px;gap:6px}.scene-actions>span{font-size:11px;gap:3px;white-space:nowrap}.scene-actions .icon-button{width:44px;height:44px;flex:none}.bag-button{top:132px;width:44px;height:44px}
  .joystick-area{left:18px;bottom:107px}.joystick{width:94px;height:94px}.stick-knob{width:40px;height:40px;left:25px;top:25px}.action-button{right:18px;bottom:109px;width:90px;height:90px;font-size:13px}.selected-tile{left:118px;right:118px;bottom:114px;padding:8px 5px;min-height:73px}.selected-tile .eyebrow{font-size:9px;letter-spacing:.5px}.selected-tile strong{font-size:13px;line-height:1.4}.selected-tile>span:last-child{font-size:12px;line-height:1.4}.selected-tile[data-stage=ready]>span:last-child{font-size:11px}
  .toolbelt{left:12px;right:12px;gap:5px;padding:7px;border-radius:19px}.tool{height:80px;border-radius:13px;gap:4px}.tool-name{font-size:13px;letter-spacing:-.45px}.tool-icon{height:32px}.tool-icon .crop-art{width:36px;height:36px}.tool-icon svg{width:27px;height:27px}.seed-count{font-size:12px;min-width:21px;height:21px;right:0;top:1px}.tool.active::after{bottom:3px;width:18px;height:3px}#toast{bottom:234px;min-width:205px;font-size:13px;padding:10px 14px}
  .farm-dialog{padding:22px 18px}.dialog-top h2{font-size:25px}.dialog-intro{font-size:14px;margin:14px 0}.shop-balance{margin-top:14px}.shop-item{padding:14px 0}.shop-copy h3{font-size:16px}.shop-feedback{font-size:13px}.buy-button{min-height:62px}
}
@media(max-width:370px){
  .brand-sub{display:none}.top-actions{gap:5px}.topbar{gap:5px}.brand{gap:6px}h1{font-size:14px}.wallet{padding:8px}.scene-actions>span{font-size:10px}.guide p{font-size:13px}.guide .eyebrow{font-size:8px}.selected-tile{left:108px;right:108px}.joystick-area{left:12px}.action-button{right:12px;width:86px;height:86px}.joystick{width:88px;height:88px}.stick-knob{width:38px;height:38px;left:23px;top:23px}.tool-name{font-size:12px}.toolbelt{left:8px;right:8px;gap:3px;padding:6px}.tool-icon .crop-art{width:33px;height:33px}
}
@media(max-height:600px) and (min-width:701px){
  .guide{top:70px;max-width:290px;padding:9px 12px;min-height:0}.guide p{font-size:12px;margin:0}.guide-dots{display:none}.scene-actions{bottom:109px}.controls-area{height:93px;bottom:7px}.tool{width:60px;height:66px;gap:3px}.tool-icon{height:27px}.tool-icon .crop-art{width:31px;height:31px}.seed-count{font-size:11px;min-width:18px;height:18px}.tool-name{font-size:12px}.selected-tile{bottom:98px;padding:5px 12px;min-height:0}.selected-tile strong{font-size:12px}.joystick-area{bottom:8px;left:20px}.action-button{bottom:8px;right:20px;width:76px;height:76px;font-size:12px}.joystick{width:78px;height:78px}.stick-knob{width:34px;height:34px;left:20px;top:20px}.crop-progress{margin:4px auto}#toast{bottom:172px}
}
/* Crop Manager: catalogue-sized lists keep the existing game layout. */
.toolbelt{max-width:calc(100vw - 32px);overflow-x:auto;justify-content:flex-start!important}.toolbelt .tool{flex:0 0 auto}.shop-items{max-height:55vh;overflow-y:auto}.choose-seed{border:1px solid #9db895;border-radius:9px;background:#edf4e5;padding:9px;color:#36573b;cursor:pointer}.basket-card #basket-list{max-height:250px;overflow-y:auto}#bag-content{max-height:55vh;overflow-y:auto}.all-seeds{font:600 11px system-ui;padding:8px}.crop-art img{max-width:100%;max-height:100%}