*{box-sizing:border-box;font-family:Inter, system-ui, Arial; margin:0}
html,body{height:100%}
canvas{display:block;width:100vw;height:100vh;background:linear-gradient(#87CEEB,#e6f7ff)}
#ui{position:fixed;left:0;right:0;top:0;pointer-events:none}
#topbar{display:flex;gap:12px;padding:10px;align-items:center;pointer-events:auto}
#topbar > div{background:rgba(255,255,255,0.85);padding:6px 10px;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.15)}
#shop{position:fixed;right:12px;top:72px;width:220px;background:rgba(255,255,255,0.95);padding:8px;border-radius:10px;pointer-events:auto;box-shadow:0 6px 20px rgba(0,0,0,0.12)}
#shop h3{margin:6px 0;font-size:16px}
#shopItems{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.shopItem{background:#f7fff8;border-radius:6px;padding:6px;cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:4px;box-shadow:0 3px 8px rgba(0,0,0,0.08)}
.shopItem.disabled{opacity:0.5;pointer-events:none}
.shopCost{font-weight:700;color:#2b8e2b}
#shopFooter{font-size:12px;margin-top:6px;color:#555;text-align:center}
#hotbar{position:fixed;left:50%;transform:translateX(-50%);bottom:12px;display:flex;gap:8px;padding:8px;background:rgba(255,255,255,0.9);border-radius:10px;pointer-events:auto;box-shadow:0 6px 20px rgba(0,0,0,0.12)}
.hotcell{width:64px;height:64px;background:#fff;border-radius:8px;display:flex;align-items:center;justify-content:center;border:2px solid #e0e0e0;cursor:pointer}
.hotcell.selected{outline:3px solid #58d058;transform:translateY(-2px)}
#message{position:fixed;left:50%;transform:translateX(-50%);top:50%;padding:12px 18px;background:rgba(0,0,0,0.8);color:#fff;border-radius:8px}
.hidden{display:none}
`