:root{--color-bg-mist: #e2ede4;--color-card-bg: rgba(253, 251, 247, .92);--color-text-main: #423429;--color-text-muted: #827263;--color-matcha: #4f772d;--color-gold: #c97d10;--color-berry: #d64045;--color-btn-bg: #eddcc8;--color-btn-hover: #e2cca8;--font-cozy: "Fredoka", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--touch-target: 48px}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0;user-select:none;-webkit-user-select:none}body{width:100vw;height:100vh;height:100dvh;background-color:var(--color-bg-mist);color:var(--color-text-main);font-family:var(--font-cozy);overflow:hidden;position:relative}#canvas-container{position:absolute;inset:0;width:100%;height:100%;z-index:1}#ui-overlay{position:absolute;inset:0;z-index:10;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between;padding:calc(16px + env(safe-area-inset-top,0px)) 20px calc(16px + env(safe-area-inset-bottom,0px)) 20px}#hud-top{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}.hud-pill{background:var(--color-card-bg);border:1.5px solid rgba(220,210,195,.8);border-radius:9999px;padding:8px 18px;display:flex;align-items:center;gap:8px;box-shadow:0 8px 20px #42342914,0 2px 6px #4234290a;backdrop-filter:blur(8px)}.hud-label{font-size:11px;font-weight:600;letter-spacing:.5px;color:var(--color-text-muted)}.hud-val{font-size:15px;font-weight:600}.hud-val.gold{color:var(--color-gold)}.hud-val.matcha{color:var(--color-matcha)}.hud-val.berry{color:var(--color-berry)}#hud-bottom{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.info-pill{background:var(--color-card-bg);border:1.5px solid rgba(220,210,195,.8);border-radius:9999px;padding:10px 20px;font-size:12px;font-weight:500;color:var(--color-text-main);box-shadow:0 8px 20px #42342914;backdrop-filter:blur(8px)}.hud-btn{pointer-events:auto;font-family:inherit;font-size:12px;font-weight:600;color:var(--color-text-main);background:var(--color-btn-bg);border:1.5px solid rgba(190,170,145,.8);border-radius:9999px;padding:10px 22px;cursor:pointer;min-height:var(--touch-target);min-width:var(--touch-target);box-shadow:0 6px 16px #4234291a;transition:transform .12s ease,background .15s ease,box-shadow .15s ease}.hud-btn:hover{background:var(--color-btn-hover);box-shadow:0 8px 20px #42342926}.hud-btn:active{transform:scale(.96)}
