:root { font-family: Inter, ui-rounded, "Segoe UI", system-ui, sans-serif; color: #173243; background: #162634; }
* { box-sizing: border-box; }
body { margin: 0; min-height: 100vh; display: grid; place-items: center; overflow: hidden; }
.game-shell { position: relative; width: min(100vw, 1440px); height: min(100vh, 900px); overflow: hidden; background: #7dcef3; }
canvas { width: 100%; height: 100%; display: block; cursor: grab; }
canvas:active { cursor: grabbing; }
.hud { position: absolute; inset: 20px 22px auto; display: flex; align-items: flex-start; gap: 13px; pointer-events: none; }
.brand { display: flex; gap: 9px; align-items: center; background: #fffdf3e8; padding: 9px 13px; border-radius: 14px; box-shadow: 0 3px 0 #4d7a6044; }
.brand span { font-size: 28px; } .brand strong, .brand small { display: block; } .brand small { color: #5f7969; font-size: 11px; margin-top: 2px; }
.meter, .seeds, .friends, .objective, .district { background: #fffdf3e8; border-radius: 12px; padding: 8px 11px; box-shadow: 0 3px 0 #4d7a6044; font-size: 13px; }
.meter label { display: flex; justify-content: space-between; gap: 12px; font-weight: 650; } .meter > div { width: 148px; height: 8px; border-radius: 10px; background: #d7dfd1; overflow: hidden; margin-top: 5px; } .meter i { display:block; height:100%; width:100%; background:#f0b836; border-radius:inherit; transition:width .15s; }
.seeds { font-weight: 600; white-space: nowrap; padding-top: 13px; }
.friends { font-weight: 650; white-space: nowrap; padding-top: 13px; color:#a54c52; }
.objective { min-width: 164px; padding: 8px 11px 9px; } .objective span, .objective b { display: block; } .objective span { color:#6a7b6d; font-size:10px; font-weight:700; letter-spacing:.035em; text-transform:uppercase; } .objective b { margin-top:3px; color:#355145; font-size:12px; }
.district { min-width:132px; padding:8px 11px 9px; }.district span,.district b{display:block}.district span{color:#6a7b6d;font-size:10px;font-weight:700;letter-spacing:.035em;text-transform:uppercase}.district b{margin-top:3px;color:#356478;font-size:12px}
.message { position:absolute; top:75px; left:50%; transform:translateX(-50%); padding:8px 13px; border-radius:99px; background:#173243d9; color:#fffdf3; font-size:13px; opacity:0; transition:opacity .25s; white-space:nowrap; }.message.show{opacity:1}
.help { position:absolute; right:20px; bottom:19px; display:flex; flex-direction:column; gap:6px; padding:11px 13px; border-radius:13px; background:#173243d9; color:#f5fbf1; font-size:12px; line-height:1.35; pointer-events:none; }.help b{color:#ffdc75;font-size:13px}.help span{opacity:.9}kbd{font-family:inherit;font-size:10px;padding:2px 4px;border:1px solid #b8d2c4;border-radius:3px;background:#ffffff1e}
.reticle { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); color:#fffdf3b8; font-size:24px; text-shadow:0 1px 2px #173243; pointer-events:none; }
.city-guide { position:absolute; left:50%; top:50%; width:min(410px,calc(100% - 32px)); transform:translate(-50%,-50%) scale(.96); border:1px solid #fffbe9; border-radius:22px; padding:24px 25px 21px; background:linear-gradient(145deg,#fffdf5,#e9f3dd); color:#244a42; box-shadow:0 20px 60px #15324080,0 3px 0 #9abb87; opacity:0; pointer-events:none; transition:opacity .18s,transform .18s; z-index:3; }.city-guide.show{opacity:1;pointer-events:auto;transform:translate(-50%,-50%) scale(1)}.city-guide button{position:absolute;right:13px;top:9px;border:0;background:transparent;color:#57725d;font:300 30px/1 system-ui;cursor:pointer}.city-guide .eyebrow{font-size:10px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:#6b9062}.city-guide h2{font-size:24px;line-height:1;margin:6px 0 8px;color:#305b4a}.city-guide p{font-size:13px;line-height:1.45;margin:0 0 14px;color:#50685a}.city-guide small{display:block;margin-top:12px;color:#70836a;text-align:center;font-style:italic}.guide-map{position:relative;height:196px;border:7px solid #fbf8e8;border-radius:16px;background:linear-gradient(120deg,#9acb7c 0 41%,#e4d2a3 41% 45%,#8fc16e 45% 100%);overflow:hidden;box-shadow:inset 0 0 0 1px #b9cf9f}.guide-map:before,.guide-map:after{content:"";position:absolute;background:#e6d19e;opacity:.96}.guide-map:before{width:135%;height:18px;top:86px;left:-20px;transform:rotate(-18deg)}.guide-map:after{width:17px;height:130%;left:178px;top:-20px;transform:rotate(23deg)}.guide-map i{position:absolute;z-index:1;font-style:normal;font-size:10px;font-weight:800;text-align:center;color:#45634f}.guide-map .lake{left:20px;top:23px;width:130px;height:54px;padding-top:20px;border-radius:50%;background:#75cddd;color:#23616c;transform:rotate(-10deg)}.guide-map .square{left:168px;top:85px;width:70px;height:48px;padding-top:12px;border-radius:10px;background:#e4be78;color:#714e2c}.guide-map .stage{right:25px;bottom:21px}.guide-map .garden{right:27px;top:27px;color:#3c764c}.guide-map .you{left:195px;top:55px;border-radius:10px;padding:4px 6px;background:#e8605d;color:white;box-shadow:0 2px 0 #a64042;animation:pulse 1.3s infinite}@keyframes pulse{50%{transform:scale(1.08)}}
@media (max-width: 780px) { .hud{inset:10px;gap:6px;flex-wrap:wrap;max-width:calc(100% - 20px)}.brand{padding:6px 8px}.brand span{font-size:20px}.brand small{display:none}.meter{padding:6px 8px}.meter>div{width:90px}.seeds,.friends{padding:9px 8px}.objective,.district{order:5;min-width:145px;padding:6px 8px}.help{display:none}.message{top:92px;font-size:11px;max-width:90%;white-space:normal;text-align:center}.reticle{display:none}.city-guide{padding:21px 20px 18px}.guide-map{height:170px} }