/* Tools: bottom hotbar, thin meters near the reticle, Gadgets shop tab and touch switches.
   Loaded after minimal.css so the same quiet glass look applies; every rule is scoped to #hud, #shop or body.touch-ui. */

/* ---- hotbar: five icon slots above the existing icon row ---- */
#hud .hotbar { position: absolute; left: 50%; bottom: calc(max(18px, env(safe-area-inset-bottom)) + 57px); transform: translateX(-50%); display: flex; gap: 3px; padding: 3px; border-radius: 7px; background: #10241b85; z-index: 2; pointer-events: none; }
#hud .slot { position: relative; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 4px; border: 1.5px solid transparent; color: #e5efdc; background: transparent; pointer-events: auto; transition: transform .12s ease-out, background .12s, border-color .12s, opacity .12s; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
#hud .slot:hover { background: #e5efdc1a; }
#hud .slot .slot-ico { display: grid; place-items: center; width: 26px; height: 26px; }
#hud .slot .slot-ico svg { width: 24px; height: 24px; display: block; }
#hud .slot kbd { position: absolute; bottom: 1px; right: 3px; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; background: none; font: 500 8px var(--mono); color: #d9e3ce99; }
#hud .slot .lock { display: none; position: absolute; top: 2px; left: 3px; width: 11px; height: 11px; color: #f6efd2; }
#hud .slot .lock svg { width: 11px; height: 11px; display: block; }
#hud .slot.on { background: #a1dc9633; border-color: #a8e4b1; transform: translateY(-3px); color: #f4f8e8; }
#hud .slot.on kbd { color: #f4f8e8; }
#hud .slot.locked { opacity: .36; }
#hud .slot.locked .lock { display: block; }
#hud .slot.nope { animation: slot-nope .32s ease-out; }
@keyframes slot-nope { 20% { transform: translateX(-4px); } 45% { transform: translateX(4px); } 70% { transform: translateX(-2px); } }

/* keep the other fixed bits clear of the hotbar */
#hud .look-hint { bottom: 138px; }
body.playing .hs-access { bottom: 128px; }

/* ---- meters: appear only while a tool needs them ---- */
#hud .tool-meters { position: absolute; left: 50%; top: calc(50% + 58px); transform: translateX(-50%); display: grid; gap: 5px; width: 118px; pointer-events: none; }
#hud .meter { display: none; align-items: center; gap: 6px; }
#hud .meter.on { display: flex; animation: meter-in .16s ease-out; }
@keyframes meter-in { from { opacity: 0; transform: translateY(3px); } }
#hud .meter .m-ico { width: 13px; height: 13px; flex: none; color: #eaf3df; filter: drop-shadow(0 1px 2px #0a1a12); }
#hud .meter .m-ico svg { width: 13px; height: 13px; display: block; stroke-width: 2.2; }
#hud .meter .m-bar { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #0b1c1359; box-shadow: 0 0 0 1px #eaf1d733, 0 1px 4px #0a1a1266; overflow: hidden; }
#hud .meter .m-bar b { display: block; height: 100%; width: 0; border-radius: 3px; background: #e0edd0; }
#hud .m-heat .m-bar b { background: linear-gradient(90deg, #ffe08a, #ff9a3c 60%, #ff4a3a); }
#hud .m-heat.hot .m-bar b { background: linear-gradient(90deg, #ffb347, #ff4a3a); }
#hud .m-heat.lock .m-bar { animation: meter-blink .28s steps(2) infinite; }
#hud .m-heat.lock .m-ico { color: #ff7a5a; }
#hud .m-battery .m-bar b { background: linear-gradient(90deg, #5fe3ff, #8dffb4); }
#hud .m-battery.low .m-bar b, #hud .m-battery.lock .m-bar b { background: #ff5a4a; }
#hud .m-battery.lock .m-bar { animation: meter-blink .5s steps(2) infinite; }
#hud .m-fuel .m-bar b { background: linear-gradient(90deg, #66c9ff, #b6f7ff); }
#hud .m-fuel.low .m-bar b { background: #ff7a4a; }
#hud .m-fuel.burn .m-ico { color: #ffd27a; }
#hud .m-reload .m-bar b { background: linear-gradient(90deg, #ffd27a, #fff1b8); }
@keyframes meter-blink { 50% { opacity: .45; } }

/* ---- Gadgets tab ---- */
#shop-tabs { grid-template-columns: repeat(3, 1fr); }
#shop-tabs .tab-ico svg { width: 18px; height: 18px; display: block; }
#shop-tabs .tab-ico { display: inline-grid; }
#shop-list .item-ico svg { width: 30px; height: 30px; display: block; }
#shop-list .item-body > b em { font-size: 11px; }

/* ---- touch ---- */
#hud #t-tool, #hud #t-jet { display: grid; place-items: center; }
#hud #t-tool svg, #hud #t-jet svg { width: 22px; height: 22px; display: block; }
#hud .t-jet { width: 64px; height: 64px; border-radius: 50%; border: 1.5px solid #a8e4b1; background: #10261db3; color: #e9f5df; justify-self: end; touch-action: none; }
#hud .t-jet svg { width: 30px; height: 30px; }
#hud .t-jet.down { background: #a8e4b1; color: #133820; transform: scale(.94); }
body.touch-ui #hud .hotbar { bottom: max(14px, env(safe-area-inset-bottom)); }
body.touch-ui #hud .slot { width: 38px; height: 38px; }
body.touch-ui #hud .slot kbd { display: none; }
body.touch-ui #hud .tool-meters { top: calc(50% + 40px); }
@media (max-width: 560px) { body.touch-ui #hud .hotbar { bottom: calc(max(14px, env(safe-area-inset-bottom)) + 118px); } }
@media (max-width: 900px) { #hud .look-hint { bottom: 96px; } }

/* small pulse on the balance when a tool pays out */
#hud #balance.bump { animation: bal-bump .18s ease-out; }
@keyframes bal-bump { 40% { transform: scale(1.12); } }