@import url('https://fonts.googleapis.com/css2?family=Be+Vietnam+Pro:wght@400;500;600;700;800&family=Lora:wght@400;500;600&display=swap');
:root{--bg:#f7f6ef;--ink:#314738;--muted:#8a9384;--green:#426a47;--border:#e4e7da;--gold:#c49647}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font-family:'Be Vietnam Pro',system-ui,sans-serif;font-size:13px}button,a,input,select{font:inherit}button{cursor:pointer;color:inherit}button:focus-visible,a:focus-visible{outline:3px solid #c99542;outline-offset:4px}button:disabled{cursor:default;opacity:.5}header{height:100px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);padding:0 5.5%;gap:30px;background:#fbfbf5}.brand{display:flex;gap:12px;text-decoration:none;color:var(--ink);font-family:'Lora',serif;font-size:29px;font-weight:600;letter-spacing:-1px}.brand-icon{font-size:46px;line-height:1;color:#648255}.brand small{display:block;font:8px 'Be Vietnam Pro',sans-serif;letter-spacing:1.7px;margin-top:5px}nav{display:flex;gap:29px;align-self:stretch}.nav{border:0;background:none;color:#909789;position:relative;padding:0 7px;font-size:12px}.nav.active{color:var(--green);font-weight:600}.nav.active:after{content:'';height:3px;background:#6d8d5f;position:absolute;bottom:0;left:5px;right:5px;border-radius:3px}.header-actions{display:flex;align-items:center;gap:22px}.saved{font-size:10px;color:#8b9b81}.icon-button{border:1px solid var(--border);border-radius:50%;width:34px;height:34px;background:transparent;font-size:18px}main{max-width:1440px;margin:0 auto;padding:35px 5.5% 0}.page-heading{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px}.eyebrow{font-size:9px;letter-spacing:2px;color:#929c83;margin-bottom:10px}h1{font:500 34px 'Lora',Georgia,serif;letter-spacing:-.9px;margin:0 0 11px}.page-heading p{color:var(--muted);font-size:11px;margin:0}.wallet{display:flex;align-items:center;gap:12px;padding:16px 20px;background:#eeeddf;border:1px solid #e6e3d0;border-radius:14px;min-width:195px}.wallet>span:first-child{color:#c9a34f;font-size:32px}.wallet small{font-size:8px;letter-spacing:1px;color:#96917b;display:block}.wallet strong{display:block;font-size:24px;margin-top:3px}.wallet-leaf{margin-left:auto;font-size:25px;opacity:.5}.layout{display:grid;grid-template-columns:minmax(0,1fr) 294px;gap:24px}.garden-section{border:1px solid var(--border);border-radius:16px;overflow:hidden;background:#fcfcf7;height:fit-content}.garden-top{height:73px;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}.farm-title{display:flex;align-items:center;gap:12px}.farm-title>span{color:#7a9a63;font-size:27px}.farm-title b{font-size:12px}.farm-title small{display:block;color:#9b9f8e;font-size:9px;margin-top:5px}.weather{background:#f5f1dd;border:1px solid #ebe6cd;border-radius:20px;padding:8px 12px;color:#918057;font-size:10px}.world-wrap{position:relative;background:#b2ca7e}canvas{width:100%;display:block;touch-action:none;aspect-ratio:960/650}.world-label{position:absolute;left:18px;top:18px;font-size:8px;letter-spacing:1px;padding:9px 11px;background:#fffceecc;border-radius:6px;color:#61724c}.live-dot{display:inline-block;background:#8b9e5e;border-radius:50%;width:5px;height:5px;margin-right:4px}.scene-button{position:absolute;right:17px;top:16px;border:0;border-radius:8px;background:#fffbeac4;width:30px;height:30px}.plot-hint{position:absolute;bottom:15px;left:50%;transform:translateX(-50%);background:#faf9efed;color:#657154;box-shadow:0 3px 12px #3a4a2320;border-radius:20px;padding:10px 17px;font-size:9px;white-space:nowrap;max-width:95%;overflow:hidden;text-overflow:ellipsis;pointer-events:none}.toolbar{padding:15px 15px 13px;display:flex;gap:8px;justify-content:center}.tool{position:relative;border:1px solid transparent;border-radius:10px;background:transparent;display:flex;flex:1;align-items:center;flex-direction:column;gap:6px;padding:10px 6px;color:#939987;max-width:100px}.tool.selected{background:#e9eedc;border-color:#c8d4b5;color:#4f6e41}.tool>span{font-size:24px;height:31px}.tool b{font-size:9px;font-weight:500}.tool kbd{position:absolute;right:5px;top:3px;font:8px inherit;color:#a8ae9c}.garden-footer{border-top:1px solid #edf0e6;padding:12px 19px;font-size:8px;color:#a0a590;display:flex;justify-content:space-between;gap:8px}.garden-footer button,footer button{border:0;background:none;font-size:9px;color:#6b8260}.accessible-plots{display:flex;flex-wrap:wrap;gap:4px;padding:0 16px}.accessible-plots:focus-within{padding-bottom:12px}.accessible-plots button{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}.accessible-plots button:focus{position:static;clip-path:none;width:auto;height:auto}aside{display:flex;flex-direction:column;gap:18px}.card{border:1px solid var(--border);border-radius:14px;padding:19px;background:#fcfcf7}.card-heading{display:flex;align-items:center;justify-content:space-between;gap:8px}h2{font-size:12px;margin:0;font-weight:600}.tag{background:#f0eddd;color:#a89a6c;border-radius:4px;padding:5px 6px;font-size:7px;letter-spacing:.6px}.merchant-art{height:92px;position:relative;margin-top:8px;background:linear-gradient(transparent 70%,#e9edda 70%,#e9edda 74%,transparent 74%)}.art-cart{font-size:64px;position:absolute;bottom:2px;left:78px;filter:saturate(.6)}.art-tree{font-size:49px;position:absolute;bottom:9px;left:28px;filter:saturate(.55)}.art-cloud{position:absolute;top:0;right:35px;color:#e3e7d8;font-size:38px}.art-basket{position:absolute;bottom:6px;right:30px;font-size:28px}.merchant-time{text-align:center;margin-top:10px}.merchant-time small{font-size:10px;color:#969a87}.merchant-time strong{display:block;font-size:30px;font-weight:500;letter-spacing:3px;margin-top:5px;font-variant-numeric:tabular-nums}.merchant-card>p{text-align:center;color:#969c88;font-size:9px;line-height:1.7;margin:8px 0 16px}.primary{border:0;border-radius:8px;background:#456b48;color:#fcfcef;padding:12px 16px;font-size:10px;width:100%;display:flex;align-items:center;justify-content:space-between}.primary:hover{background:#345737}.text-link{border:0;background:none;color:#789263;font-size:9px;padding:0}.subtle{font-size:9px;color:#969d89;margin:11px 0 14px}.seed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:7px}.seed{border:1px solid #e8e9dd;border-radius:8px;background:#f7f7ee;padding:8px 3px 7px;position:relative;display:flex;flex-direction:column;align-items:center;gap:5px}.seed.active{border-color:#96ad7e;background:#eef1df}.seed .emoji{font-size:24px}.seed small{font-size:8px}.seed .count{position:absolute;right:4px;top:4px;background:#eeedde;color:#889275;font-size:7px;padding:2px 4px;border-radius:3px}.quest-card{background:#f0f1e4}.quest-title{font-size:11px;margin:15px 0 5px}.quest-note{font-size:9px;color:#919981;margin:0 0 13px}.progress-track{height:5px;background:#e0e4cf;border-radius:4px;overflow:hidden;margin-bottom:10px}.progress-track>div{height:100%;background:#8caa71}.quest-bottom{display:flex;justify-content:space-between;align-items:center;font-size:9px;color:#8d987c}.quest-bottom button{background:none;border:0;color:#738b58;font-size:9px}footer{padding:25px 0;display:flex;justify-content:space-between;color:#929a87;font-size:9px;gap:15px}footer i{font-style:normal;color:#b0b5a3}footer>span:last-child{font-size:8px;letter-spacing:1px}dialog{width:580px;max-width:94vw;max-height:85vh;border:1px solid #d9dfca;border-radius:18px;padding:25px;background:#fafbf3;color:var(--ink);box-shadow:0 20px 90px #26321a44}dialog::backdrop{background:#23361f66;backdrop-filter:blur(4px)}.dialog-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.dialog-head h2{font:24px 'Lora',Georgia,serif}.shop-row,.inventory-row,.collection-row,.setting-row{display:flex;align-items:center;gap:14px;border-bottom:1px solid var(--border);padding:14px 0}.row-icon{font-size:30px}.row-details{flex:1}.row-details b{font-size:12px}.row-details small{display:block;color:#8f9985;font-size:10px;line-height:1.8;margin-top:4px}.small-button{border:1px solid #cdd9bc;background:#eaf0df;border-radius:7px;padding:8px 12px;font-size:10px}.inventory-row{flex-wrap:wrap}.inventory-row input{width:55px;padding:6px;border:1px solid #ccd5bd;border-radius:5px}.help-text{line-height:1.9;color:#6c7b60;font-size:12px}.notice{background:#edf0df;padding:13px;border-radius:8px;font-size:11px;line-height:1.8;margin:12px 0}.empty{text-align:center;padding:30px 0;color:#96a083;line-height:1.9}.fertilizer-buttons{display:flex;gap:8px;margin:15px 0}#toast{position:fixed;left:50%;bottom:25px;transform:translateX(-50%) translateY(100px);transition:transform .2s;background:#314f35;color:white;padding:14px 24px;border-radius:12px;font-size:12px;box-shadow:0 8px 30px #2b402f33;z-index:20;max-width:92vw;text-align:center}#toast.visible{transform:translateX(-50%) translateY(0)}@media(min-width:1450px){main{padding-top:40px}.layout{grid-template-columns:minmax(0,1fr) 310px}}@media(max-width:1050px){header{padding:0 25px;gap:15px}main{padding:25px 25px 0}.layout{grid-template-columns:minmax(0,1fr) 260px;gap:16px}.card{padding:15px}.saved{display:none}.garden-top{padding:12px}.farm-title small{font-size:8px}.toolbar{gap:2px;padding:9px 4px}.tool{padding:8px 3px}.garden-footer>span{max-width:75%}h1{font-size:30px}}@media(max-width:760px){header{height:78px;padding:0 18px}.brand{font-size:24px}.brand small{font-size:6px;letter-spacing:1px}.brand-icon{font-size:37px}nav{gap:8px}.nav{font-size:10px}.header-actions{display:none}main{padding:25px 14px 0}.page-heading{gap:10px;margin-bottom:22px}h1{font-size:24px;line-height:1.35}.eyebrow{font-size:7px;letter-spacing:1.5px}.page-heading p{font-size:9px}.wallet{min-width:110px;padding:12px;gap:6px}.wallet>span:first-child{font-size:23px}.wallet small{font-size:6px;letter-spacing:0}.wallet strong{font-size:20px}.wallet-leaf{display:none}.layout{grid-template-columns:1fr}.world-label{font-size:6px;left:10px;top:10px;padding:7px}.plot-hint{font-size:8px;padding:8px 12px;bottom:8px}.garden-top{height:65px}.weather{font-size:9px}aside{display:grid;grid-template-columns:1fr 1fr;gap:12px}.quest-card{grid-column:1/-1}.card-heading{flex-wrap:wrap}.tag{font-size:6px}.merchant-art{height:85px}.art-cart{left:40px}.art-tree{left:0}.art-basket{right:0}.merchant-time strong{font-size:25px}.merchant-card>p{font-size:8px}.card{padding:13px}.seed-grid{gap:5px}.seed .emoji{font-size:22px}.seed small{font-size:7px}.text-link{font-size:8px}.subtle{font-size:8px;line-height:1.8}.tool b{font-size:8px}.tool>span{font-size:23px}footer{flex-wrap:wrap;line-height:1.7}footer i{display:none}footer>span:last-child{display:none}.inventory-row{gap:8px}}
/* One shared pixel grid for the game and item sprites. UI text remains readable. */
#world,.pixel-item,#merchant-pixel{image-rendering:pixelated;image-rendering:crisp-edges}
#world{image-rendering:pixelated}
.pixel-item{width:36px;height:42px;object-fit:contain;vertical-align:middle}
.seed .emoji{height:36px;display:flex;align-items:center;justify-content:center}
.seed .pixel-item{width:31px;height:36px}
.row-icon .pixel-item{width:44px;height:51px}
#merchant-pixel{width:180px;height:82px;margin:auto;aspect-ratio:auto}
.merchant-art{display:flex;align-items:center;justify-content:center;background:#e5eccf;border:2px solid #b8c998;box-shadow:inset 0 0 0 2px #f5f1d7;margin:15px 0 8px;height:95px;overflow:hidden}
aside,.card{min-width:0}#merchant-pixel{max-width:100%;object-fit:contain}
.garden-section{border-radius:6px}.world-label,.scene-button{border-radius:2px}.plot-hint{border-radius:3px;border:2px solid #c6ba8a;box-shadow:2px 2px 0 #52643f55}

.pixel-tool{width:28px;height:28px;image-rendering:pixelated}.collection-row{flex-wrap:wrap}.growth-strip{display:flex;justify-content:space-around;width:100%;padding:8px 0;background:#eef0dc;border:1px solid #dbe1c6}.growth-strip>div{text-align:center;flex:1}.growth-strip img{width:42px;height:49px;image-rendering:pixelated;object-fit:contain}.growth-strip small{display:block;font-size:8px;color:#7d8b6d}.tool>span{display:flex;align-items:center;justify-content:center}@media(max-width:760px){.growth-strip img{width:36px;height:42px}.growth-strip small{font-size:7px}}

.area-bar{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 16px;border-top:1px solid var(--border);background:#f1f2e4;flex-wrap:wrap}.area-bar>div{display:flex;gap:12px;align-items:center}.area{border:1px solid #d3dcbe;background:transparent;border-radius:4px;padding:8px 12px;font-size:10px}.area.active{background:#456b48;color:#fff6d9;border-color:#456b48}.toolbar{display:grid;grid-template-columns:repeat(9,minmax(0,1fr))}.tool{width:100%;min-width:0;max-width:none}.tool b{font-size:8px}.wide{width:820px}.material-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px}.material-slot{border:1px solid #dce2cc;background:#eef1e0;padding:8px 4px;text-align:center;display:flex;align-items:center;flex-direction:column;gap:4px;min-width:0}.material-slot img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}.material-slot b{font-size:14px}.material-slot small{font-size:8px}.equipment-list{display:flex;flex-direction:column;gap:9px}.equipment-card{display:flex;align-items:center;gap:12px;padding:12px;background:#f0f2e5;border:1px solid #dbe1cd}.equipment-card>img{width:48px;height:48px;image-rendering:pixelated}.recipe{max-width:260px;font-size:10px;line-height:1.7}.recipe b{display:block}.recipe small{display:block;color:#7b8c6d;font-size:9px;margin:4px 0}.recipe .missing{color:#a16a4c}.catalog-scroll{overflow:auto;max-width:100%;border:1px solid #d0d9bf}.tool-catalog{border-collapse:collapse;font-size:8px;background:#e7ead9;min-width:790px;width:100%}.tool-catalog th,.tool-catalog td{border:1px solid #cdd5bd;padding:8px 3px;text-align:center}.tool-catalog th:first-child{position:sticky;left:0;background:#edf0df;z-index:1;min-width:76px}.tool-catalog th span{display:block;margin:0 auto 5px;width:12px;height:4px}.tool-catalog img{width:42px;height:42px;image-rendering:pixelated}.ore-previews{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.ore-previews>div{background:#343f41;padding:8px;text-align:center;color:#eecb90;font-size:8px}.ore-previews img{width:64px;height:64px;max-width:100%;image-rendering:pixelated}h3{font-size:13px;margin:22px 0 12px}@media(max-width:760px){.toolbar{grid-template-columns:repeat(5,minmax(0,1fr))}.area-bar{padding:10px;gap:10px}.area-bar .text-link{font-size:8px}.material-grid{grid-template-columns:repeat(4,minmax(0,1fr))}.equipment-card{flex-wrap:wrap}.recipe{width:100%;max-width:none;padding-left:60px}.equipment-card>.row-details{min-width:150px}.ore-previews{grid-template-columns:repeat(3,minmax(0,1fr))}.tool b{font-size:8px}}

.map-caption{font-size:11px;font-weight:600}.portal-tip{font-size:9px;color:#829071}.world-wrap:after{content:'';position:absolute;inset:0;pointer-events:none;background:#e5e0c9;opacity:0;transition:opacity .2s}.world-wrap.warping:after{opacity:.8}.rank-effect{position:relative;overflow:hidden}.rank-effect[data-rank="1"],.rank-effect[data-rank="2"]{border-bottom-color:var(--rank-color)}.rank-effect[data-rank="3"],.rank-effect[data-rank="4"]{box-shadow:inset 0 -2px var(--rank-color)}.rank-effect[data-rank="5"],.rank-effect[data-rank="6"]{box-shadow:inset 0 0 0 1px var(--rank-color)}.rank-effect[data-rank="7"],.rank-effect[data-rank="8"],.rank-effect[data-rank="9"]{box-shadow:inset 0 0 0 1px var(--rank-color),inset 0 -3px var(--rank-light)}.rank-effect:after{content:'';pointer-events:none;position:absolute;left:-40%;top:0;width:25%;height:100%;background:linear-gradient(100deg,transparent,var(--rank-light),transparent);opacity:0;transform:skewX(-15deg);animation:rank-shine 5s linear infinite}.rank-effect[data-rank="0"]:after,.rank-effect[data-rank="1"]:after{display:none}.rank-effect[data-rank="5"]:after,.rank-effect[data-rank="6"]:after{animation-duration:4s}.rank-effect[data-rank="7"]:after,.rank-effect[data-rank="8"]:after,.rank-effect[data-rank="9"]:after{animation-duration:3s}@keyframes rank-shine{0%,65%{left:-40%;opacity:0}72%{opacity:.18}88%{left:120%;opacity:.25}100%{left:120%;opacity:0}}.reduced-effects .rank-effect:after{animation:none;display:none}.reduced-effects .world-wrap:after{transition:none}@media(prefers-reduced-motion:reduce){.rank-effect:after{animation:none;display:none}}@media(max-width:760px){.area-bar>div:first-child{flex-wrap:wrap;gap:6px}.portal-tip{font-size:8px}}

#sky-clock{position:absolute;top:10px;left:50%;transform:translateX(-50%);width:164px;height:33px;aspect-ratio:auto;border:2px solid #b49d7e;border-radius:2px;image-rendering:pixelated;pointer-events:none;box-shadow:2px 2px #343f4130}.energy-button{border:1px solid #b8c99d;border-radius:6px;background:#e6edcf;color:#4d6659;font-size:10px;padding:12px 14px;white-space:nowrap}.station-bar{display:flex;gap:8px;flex-wrap:wrap;padding:9px 16px;background:#e5e6d3;border-top:1px solid #ced4ba}.station-bar button{background:#f4efda;border:1px solid #b49d7e;box-shadow:0 2px #b49d7e;color:#684039;font-size:9px;padding:7px 10px}.food-icon{width:48px;height:48px;image-rendering:pixelated}.weather-grade-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px}.weather-grade-row .small-button{font-size:8px;padding:6px}.weather-forge h4{font-size:12px;color:#684039}.album-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.album-card{border:1px solid #d0d8ba;background:#edf0df;min-width:0;display:flex;align-items:center;text-align:center;flex-direction:column;padding:12px 8px;gap:8px}.album-card img{width:64px;height:64px;image-rendering:pixelated}.album-card b{font-size:10px}.album-card small{font-size:9px;line-height:1.7;color:#7d8b6d}.album-card.locked img{filter:grayscale(1);opacity:.3}.album-card.unlocked{border-color:#c7aa58;background:#f6efd4}.broken-tool{opacity:.5}.broken-tool:before{content:'×';position:absolute;top:4px;left:6px;color:#b23657;font-weight:bold;font-size:15px}.equipment-card{border-radius:3px}dialog .missing{color:#a35140}.page-heading{gap:18px}.page-heading>div:first-child{flex:1}@media(max-width:760px){header{gap:8px}nav{gap:2px}.nav{padding:0 4px;font-size:9px}.brand{font-size:22px}.brand-icon{font-size:30px}.brand small{font-size:5px}.page-heading{flex-wrap:wrap;gap:10px}.energy-button{order:3;flex-basis:100%;padding:8px}.page-heading>div:first-child{min-width:160px}.station-bar{padding:8px;gap:6px}.station-bar button{font-size:8px;padding:7px}.album-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.weather-grade-row{gap:4px}.weather-grade-row .material-slot{padding:7px 2px}.weather-grade-row .small-button{padding:5px 2px;font-size:7px}#sky-clock{width:125px;height:25px;top:7px;left:58%}.world-label{max-width:41%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.material-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}

.dialog-head{position:sticky;top:-1px;z-index:5;background:#fafbf3;padding:8px 0 12px;border-bottom:1px solid #e4e7da}.recipe .small-button{margin:4px 3px 0 0}.page-heading h1{line-height:1.35}

.energy-button{min-width:174px;text-align:left;display:flex;flex-direction:column;gap:7px;cursor:pointer}.energy-track{display:block;width:100%;height:12px;background:#343f41;border:2px solid #684039;box-shadow:1px 1px #b49d7e;overflow:hidden}.energy-track>span{display:block;height:100%;background:#94ad39;box-shadow:inset 0 2px #c2d64f;transition:width .2s linear}.energy-regen{font-size:8px;opacity:.85}.energy-button[data-level=low] #energy-fill{background:#c33c40;box-shadow:inset 0 2px #e47259}.energy-button[data-level=medium] #energy-fill{background:#e1a845;box-shadow:inset 0 2px #eecb90}.energy-button:focus-visible{outline:3px solid #e1a845;outline-offset:3px}

/* HUD drawn inside the game frame: stats top-left, clock+weather top-centre, menu top-right,
   buildings mid-right, merchant bottom-left, quest bottom-right, seeds+tools bottom-centre */
.layout{grid-template-columns:minmax(0,1fr)!important}
.world-wrap{position:relative;overflow:hidden}.world-stage{position:relative}.world-stage .world-label{display:none}
.hud{position:absolute;inset:0;z-index:4;pointer-events:none}.hud-dock{display:contents}
.hud button{pointer-events:auto}
.hud .energy-button,.hud .wallet,.hud .hud-map,.hud .weather,.hud .card,.hud .toolbar,.hud-seeds{background:#f4efdae8;border:2px solid #c6ba8a;border-radius:3px;box-shadow:2px 2px 0 #52643f55;color:#684039}
/* top-left: core stats */
.hud-left{position:absolute;left:10px;top:10px;display:flex;flex-direction:column;gap:6px;width:172px}
.hud .energy-button{min-width:0;padding:6px 8px;gap:4px;font-size:9px;background:#e6edcfee;color:#4d6659}.hud .energy-track{height:10px}.hud .energy-regen{font-size:7px}
.hud .wallet{min-width:0;padding:6px 8px;gap:8px}.hud .wallet strong{font-size:17px;line-height:1}.hud .wallet small{font-size:6px}.hud .wallet-leaf{display:none}
.hud .hud-map{padding:5px 8px;display:flex;flex-direction:column;gap:2px}.hud .map-caption{font-size:10px;font-weight:700}.hud .farm-title{gap:6px}.hud .farm-title>span{font-size:10px}.hud .farm-title b{display:none}.hud .farm-title small{font-size:8px;line-height:1.3}
/* top-centre: weather sits under the sky clock */
.hud-weather{position:absolute;left:50%;top:50px;transform:translateX(-50%)}.hud .weather{font-size:9px;padding:5px 10px;white-space:nowrap}
/* top-right: system menu row next to the effects toggle */
.hud-menu{position:absolute;right:54px;top:14px;display:flex;gap:5px}
.hud-menu .saved{position:absolute;right:0;top:100%;margin-top:3px;font-size:6px;color:#fffbe6;text-shadow:0 1px 2px #3a4a23;white-space:nowrap}
.dock{position:relative;width:34px;height:34px;padding:0;display:flex;align-items:center;justify-content:center;background:#f9f5e4ee;border:2px solid #c6ba8a;border-radius:3px;box-shadow:2px 2px 0 #b49d7e;color:#684039;cursor:pointer}
.dock i{font-style:normal;font-size:17px;line-height:1}.dock .lbl{display:none}
.dock:hover,.dock:focus-visible{background:#dfe8c4;border-color:#6f8f4e}
.hud-menu .dock:after{content:attr(data-label);position:absolute;right:0;top:calc(100% + 6px);white-space:nowrap;font-size:8px;background:#684039;color:#fff7de;padding:4px 7px;border-radius:2px;opacity:0;pointer-events:none;transition:opacity .12s;z-index:7}
.hud-menu .dock:hover:after,.hud-menu .dock:focus-visible:after{opacity:1}.hud-menu .saved{display:none}
/* mid-right: one button for the buildings */
.dock-group{position:absolute;right:10px;top:calc(50% - 18px)}
.dock-toggle{width:auto;gap:6px;padding:0 10px;font-size:9px;font-weight:600;white-space:nowrap}.dock-toggle i{font-size:16px}
.dock-toggle[aria-expanded=true]{background:#dfe8c4;border-color:#6f8f4e}
.dock-tray{position:absolute;right:calc(100% + 6px);top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:4px;padding:5px;background:#f4efdaf2;border:2px solid #c6ba8a;border-radius:3px;box-shadow:2px 2px 0 #52643f55;min-width:132px;z-index:6}.dock-tray[hidden]{display:none}
.tray-item{display:flex;align-items:center;gap:7px;padding:5px 7px;font-size:9px;text-align:left;background:#f9f5e4;border:2px solid #d8cba3;border-radius:2px;color:#684039;cursor:pointer}.tray-item i{font-style:normal;font-size:14px}
.tray-item:hover,.tray-item:focus-visible{background:#dfe8c4;border-color:#6f8f4e}
/* bottom-left: merchant */
.hud-merchant{position:absolute;left:10px;bottom:132px;width:172px}
.hud .merchant-card{padding:6px 8px;display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;margin:0}
.hud .merchant-card .card-heading{grid-column:1/-1;margin:0;display:flex;justify-content:space-between;align-items:center}.hud .merchant-card h2{font-size:9px;margin:0;color:#684039}.hud .merchant-card .tag{font-size:6px;padding:2px 5px;border-radius:2px}
.hud .merchant-art{display:none}.hud #merchant-copy{grid-column:1/-1;margin:0;font-size:7px;line-height:1.3;color:#8a7a5a}
.hud .merchant-time{display:contents}.hud .merchant-time small{font-size:7px;color:#8a7a5a}.hud .merchant-time strong{font-size:17px;line-height:1;color:#684039;grid-column:2;grid-row:2}
.hud #merchant-open{grid-column:1/-1;font-size:8px;padding:5px 8px;border-radius:2px;margin:2px 0 0}
/* bottom-right: quest */
.hud-quest-wrap{position:absolute;right:10px;bottom:132px;width:150px}
.hud .quest-card{padding:6px 8px;margin:0}.hud .quest-card .card-heading{display:none}.hud .quest-title{font-size:9px;font-weight:700;color:#684039}.hud .quest-note{font-size:7px;margin:2px 0 4px;color:#8a7a5a}.hud .quest-card .progress-track{height:6px}.hud .quest-bottom{font-size:7px;gap:4px;margin-top:4px}.hud .quest-bottom button{font-size:7px;padding:3px 5px;border-radius:2px}
/* bottom-centre: seeds above the tool bar */
.hud-seeds{position:absolute;left:50%;bottom:68px;transform:translateX(-50%);padding:4px;max-width:calc(100% - 20px)}
.hud-seeds .card-heading,.hud-seeds .subtle{display:none}.hud-seeds .seed-grid{display:flex;gap:3px;overflow-x:auto}
.hud-seeds .seed{width:50px;min-width:50px;height:44px;padding:2px;gap:1px;border:2px solid #d8cba3;border-radius:2px;background:#f9f5e4;pointer-events:auto}.hud-seeds .seed.active{background:#dfe8c4;border-color:#6f8f4e}
.hud-seeds .seed .emoji,.hud-seeds .seed canvas,.hud-seeds .seed img{width:22px;height:22px;font-size:18px}.hud-seeds .seed small{font-size:6px;white-space:nowrap}.hud-seeds .seed .count{top:1px;right:2px;font-size:6px;padding:1px 3px}
.hud-seeds:after{content:'Hạt giống';position:absolute;left:8px;top:-8px;font-size:6px;letter-spacing:1px;background:#c6ba8a;color:#fff;padding:1px 5px;border-radius:2px}
.hud .toolbar{position:absolute;left:50%;bottom:8px;transform:translateX(-50%);display:flex;gap:3px;padding:4px;margin:0;max-width:calc(100% - 20px);overflow-x:auto}
.hud .tool{position:relative;width:54px;min-width:54px;height:50px;padding:3px 2px 2px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;background:#f9f5e4;border:2px solid #d8cba3;border-radius:2px;box-shadow:none;color:#684039}
.hud .tool.selected{background:#dfe8c4;border-color:#6f8f4e}.hud .tool b{font-size:7px;font-weight:600;white-space:nowrap}.hud .tool kbd{position:absolute;top:1px;right:3px;font-size:7px;opacity:.6;background:none;border:0;padding:0}
.world-stage .plot-hint{bottom:128px}
/* phones: stats on top, game, then controls below so the map stays visible */
@media(max-width:760px){
.world-wrap{display:flex;flex-direction:column;background:#e5e6d3}.hud{display:contents}
.hud-left{order:0;position:static;width:auto;display:grid;grid-template-columns:1fr 1fr;gap:6px;padding:8px}.hud-left .hud-map{display:none}.hud .energy-button{order:0;flex-basis:auto}
.hud-merchant{order:1;position:static;width:auto;padding:0 8px 6px}
.hud-weather{order:1;position:static;transform:none;padding:0 8px 6px}
.world-stage{order:2}.world-stage .plot-hint{bottom:8px}
.hud-seeds{order:3;position:static;transform:none;margin:6px 8px 0;width:auto;max-width:none}.hud-seeds:after{display:none}
.hud .toolbar{order:4;position:static;transform:none;margin:6px 8px;width:auto;max-width:none}
.dock-group{order:5;position:static;padding:0 8px}.dock-toggle{width:100%;height:36px;justify-content:center}.dock-tray{position:static;transform:none;margin-top:5px;flex-direction:row;flex-wrap:wrap;min-width:0}.tray-item{flex:1 1 130px}
.hud-menu{order:6;position:static;flex-wrap:wrap;padding:6px 8px;gap:6px}.hud-menu .dock{width:auto;min-width:62px;height:46px;flex-direction:column;gap:2px;padding:3px 6px}.hud-menu .dock .lbl{display:block;font-size:7px;white-space:nowrap}.hud-menu .dock:after{display:none}.hud-menu .saved{display:block;position:static;width:100%;color:#6f8f4e;text-shadow:none}
.hud-quest-wrap{order:7;position:static;width:auto;margin:0 8px 8px}
}
.quest-step{font-weight:400;font-size:7px;opacity:.6}
.scene-button.zoom-button{top:52px;font-size:15px;line-height:1;padding:0}.scene-button.zoom-button[aria-pressed=true]{background:#dfe8c4}
/* Desktop/laptop web: the game frame always fits the browser window (no page scrolling) */
@media(min-width:761px){
html,body{height:100%}
body{display:flex;flex-direction:column;min-height:100dvh;height:100dvh;overflow:hidden}
header{flex:none;height:52px;padding:0 20px}
.brand{font-size:20px;gap:8px}.brand small{font-size:6px;margin-top:2px}
main{flex:1;min-height:0;max-width:none;width:100%;margin:0;padding:8px 16px 10px;display:flex;justify-content:center;align-items:center}
.page-heading,footer,.garden-footer{display:none}
.layout{display:flex;justify-content:center;align-items:center;width:100%;height:100%;gap:0}
.garden-section{display:flex;justify-content:center;align-items:center;width:100%;height:100%;min-width:0;border:0;background:none}
.world-wrap{flex:none;width:min(100%,calc((100dvh - 72px) * 960 / 650));border:2px solid #c6ba8a;border-radius:4px;box-shadow:0 4px 18px #3a4a2330}
}
#world{touch-action:pan-x pan-y}
#music-toggle[aria-pressed=false] i{opacity:.4}
.setting-row input[type=range]{width:150px;max-width:45%;accent-color:#6f8f4e}
/* Pixel catalogue: distinct gestures and richer tier-coloured particles. */
.tool-catalog .catalog-tool{position:relative;display:inline-grid;place-items:center;width:64px;height:64px;isolation:isolate}
.catalog-tool>img{position:relative;z-index:1;transform-origin:50% 78%;animation:catalog-swing 3.2s steps(8,end) infinite;animation-delay:var(--motion-delay)}
.catalog-tool[data-tool=seed]>img{animation-name:catalog-seed}.catalog-tool[data-tool=water]>img{animation-name:catalog-water}
.catalog-tool[data-tier="0"]>img{animation-duration:4.2s}.catalog-tool[data-tier="1"]>img,.catalog-tool[data-tier="2"]>img{animation-duration:3.8s}.catalog-tool[data-tier="8"]>img,.catalog-tool[data-tier="9"]>img{animation-duration:2.8s}
.catalog-tool .tool-motes{position:absolute;inset:7px;pointer-events:none;z-index:2}.tool-motes i{position:absolute;width:2px;height:2px;left:calc(7px + var(--mote)*7px);top:calc(9px + var(--mote)*5px);background:var(--rank-light);box-shadow:2px 0 var(--rank-color);animation:catalog-spark 2.2s steps(6,end) infinite;animation-delay:calc(var(--motion-delay) - var(--mote)*.37s)}
.catalog-tool[data-tier="5"] .tool-motes i{width:3px;background:var(--rank-color);animation-name:catalog-leaf}.catalog-tool[data-tier="6"] .tool-motes i,.catalog-tool[data-tier="7"] .tool-motes i{height:4px;box-shadow:1px -1px var(--rank-color),-1px 1px var(--rank-color)}
.catalog-tool[data-tier="8"] .tool-motes i,.catalog-tool[data-tier="9"] .tool-motes i{box-shadow:0 -2px var(--rank-color),0 2px var(--rank-color),-2px 0 var(--rank-light),2px 0 var(--rank-light)}
.catalog-tool .tool-orbit{position:absolute;inset:9px;pointer-events:none;border:1px dashed var(--rank-color);opacity:.55;animation:catalog-orbit 9s steps(32,end) infinite;animation-delay:var(--motion-delay)}.catalog-tool[data-tier="9"] .tool-orbit{inset:5px;border:2px dotted var(--rank-light);box-shadow:inset 0 0 0 1px var(--rank-color);animation-duration:6s}
@keyframes catalog-swing{0%,50%,100%{transform:translateY(0) rotate(0)}60%{transform:translateY(-2px) rotate(-18deg)}72%{transform:translateY(1px) rotate(15deg)}82%{transform:translateY(-1px) rotate(-6deg)}}
@keyframes catalog-seed{0%,50%,100%{transform:translateY(0) rotate(0)}62%{transform:translateY(-3px) rotate(-8deg)}76%{transform:translateY(-1px) rotate(8deg)}86%{transform:translateY(0) rotate(-3deg)}}
@keyframes catalog-water{0%,48%,100%{transform:translateY(0) rotate(0)}60%,76%{transform:translateY(-2px) rotate(22deg)}86%{transform:translateY(-1px) rotate(5deg)}}
@keyframes catalog-spark{0%,18%,100%{opacity:0;transform:translate(0,5px) scale(1)}35%,60%{opacity:1}78%{opacity:0;transform:translate(3px,-10px) scale(.5)}}
@keyframes catalog-leaf{0%,100%{opacity:0;transform:translate(-3px,-7px) rotate(0)}25%,65%{opacity:1}85%{opacity:0;transform:translate(5px,10px) rotate(90deg)}}
@keyframes catalog-orbit{to{transform:rotate(360deg)}}
.reduced-effects .catalog-tool>img,.reduced-effects .catalog-tool .tool-motes i,.reduced-effects .catalog-tool .tool-orbit{animation:none}.reduced-effects .catalog-tool .tool-motes,.reduced-effects .catalog-tool .tool-orbit{display:none}
@media(prefers-reduced-motion:reduce){.catalog-tool>img,.catalog-tool .tool-motes i,.catalog-tool .tool-orbit{animation:none}.catalog-tool .tool-motes,.catalog-tool .tool-orbit{display:none}}
/* Layered pixel energy: aura, orbit, lifted sprite and elemental particles. */
.material-visual{position:relative;display:grid;place-items:center;width:84px;height:78px;isolation:isolate;--rank-light:#e5efef}
.material-slot{padding-top:10px}.material-visual>img{position:relative;z-index:2;width:48px;height:48px;animation:item-hover 3s steps(12,end) infinite;animation-delay:var(--motion-delay);filter:drop-shadow(0 2px 0 #343f41)}
.item-aura{position:absolute;inset:8px;z-index:0;pointer-events:none;background:radial-gradient(ellipse,color-mix(in srgb,var(--rank-color) 55%,transparent),transparent 70%);animation:item-breathe 2.6s steps(10,end) infinite;animation-delay:var(--motion-delay)}
.item-ring{position:absolute;left:14%;right:14%;bottom:9px;height:15px;border:2px solid var(--rank-color);border-radius:50%;box-shadow:0 0 0 2px color-mix(in srgb,var(--rank-color) 20%,transparent),inset 0 0 8px var(--rank-color);opacity:.7;animation:item-ring 2.4s steps(10,end) infinite;animation-delay:var(--motion-delay);pointer-events:none}
.item-particles{position:absolute;inset:0;z-index:3;pointer-events:none}.item-particles i{position:absolute;left:calc(12px + var(--p)*8px);bottom:12px;width:3px;height:3px;background:var(--rank-color);box-shadow:0 -2px var(--rank-light);animation:item-rise 2s steps(12,end) infinite;animation-delay:calc(var(--motion-delay) - var(--p)*.27s)}
.material-visual[data-family=rain] .item-particles i{height:7px;background:#63c4cc;box-shadow:1px 0 #9ae5d5;animation-name:item-rain}.material-visual[data-family=rain] .item-ring{border-color:#63c4cc}
.material-visual[data-family=lightning] .item-particles i{width:6px;height:22px;background:#eff37c;clip-path:polygon(40% 0,100% 0,60% 40%,100% 40%,0 100%,30% 55%,0 55%);animation:item-electric 1.8s steps(1,end) infinite;animation-delay:calc(var(--motion-delay) - var(--p)*.21s)}
.material-visual[data-family=snow] .item-particles i{background:#e5efef;box-shadow:0 -3px #9ae5d5,0 3px #9ae5d5,-3px 0 #bac9cd,3px 0 #bac9cd;animation-name:item-snow}
.material-visual[data-tier="0"] .item-ring,.material-visual[data-tier="0"] .item-aura{opacity:.15}
.material-visual[data-tier="7"]>img,.material-visual[data-tier="8"]>img,.material-visual[data-tier="9"]>img{filter:drop-shadow(0 0 3px var(--rank-color)) drop-shadow(0 0 5px var(--rank-light))}
.tool-catalog .catalog-tool{width:76px;height:78px}.catalog-tool>img{width:48px;height:48px}.catalog-tool[data-tier="0"] .item-ring,.catalog-tool[data-tier="1"] .item-ring{display:none}
.catalog-tool[data-tier="5"]>img,.catalog-tool[data-tier="6"]>img,.catalog-tool[data-tier="7"]>img,.catalog-tool[data-tier="8"]>img,.catalog-tool[data-tier="9"]>img{filter:drop-shadow(0 0 3px var(--rank-color))}
.catalog-tool .tool-orbit{inset:6px;border-style:dotted;border-width:2px;clip-path:polygon(0 0,100% 0,100% 35%,65% 35%,65% 65%,100% 65%,100% 100%,0 100%,0 65%,35% 65%,35% 35%,0 35%);opacity:.85;animation-duration:5s}
.catalog-tool[data-tier="9"] .tool-orbit{box-shadow:inset 0 0 0 3px var(--rank-color);animation-duration:3.5s}.catalog-tool .tool-motes i{width:3px;height:3px;filter:drop-shadow(0 0 2px var(--rank-color))}.catalog-tool .tool-motes{inset:3px}
@keyframes item-hover{0%,100%{transform:translateY(1px)}50%{transform:translateY(-5px)}}
@keyframes item-breathe{0%,100%{transform:scale(.8);opacity:.45}50%{transform:scale(1.2);opacity:1}}
@keyframes item-ring{0%{transform:scale(.6);opacity:0}30%{opacity:.8}100%{transform:scale(1.15);opacity:0}}
@keyframes item-rise{0%{transform:translateY(0);opacity:0}25%{opacity:1}100%{transform:translate(4px,-55px);opacity:0}}
@keyframes item-rain{0%{transform:translateY(-55px);opacity:0}25%{opacity:1}85%{transform:translateY(0);opacity:1}100%{transform:translateY(0) scaleX(3);opacity:0}}
@keyframes item-electric{0%,70%,100%{opacity:0;transform:translateY(-10px) rotate(15deg)}74%,82%{opacity:1;transform:translateY(-30px) rotate(-20deg)}78%,86%{opacity:.2}}
@keyframes item-snow{0%{opacity:0;transform:translate(-5px,-50px) rotate(0)}25%{opacity:1}100%{opacity:0;transform:translate(8px,0) rotate(180deg)}}
.reduced-effects .material-visual *,.reduced-effects .catalog-tool *{animation:none!important}.reduced-effects .item-particles,.reduced-effects .item-ring{display:none}.reduced-effects .item-aura{opacity:.25}
@media(prefers-reduced-motion:reduce){.material-visual *,.catalog-tool *{animation:none!important}.item-particles,.item-ring{display:none}.item-aura{opacity:.25}}