/* Quarrykeep game HUD */
html, body { margin: 0; height: 100%; overflow: hidden; background: #0b0f1a; }
body { font-family: "Segoe UI", Arial, sans-serif; }
#game-canvas { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }
#crosshair {
  position: fixed; left: 50%; top: 50%; width: 22px; height: 22px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 8;
}
#crosshair::before, #crosshair::after {
  content: ""; position: absolute; background: #ffffffcc; mix-blend-mode: difference;
}
#crosshair::before { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair::after { left: 0; top: 10px; width: 22px; height: 2px; }

#start {
  position: fixed; top: 12vh; left: 50%; transform: translateX(-50%);
  pointer-events: none; z-index: 9; color: #fff; text-align: center;
  text-shadow: 0 2px 4px #0009; padding: 10px 18px; border-radius: 10px;
}
#start p { margin: 2px 0; }
#start .small { font-size: 13px; color: #ffe9c9; }

#hotbar {
  position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%);
  display: flex; gap: 6px; z-index: 9; padding: 6px; border-radius: 12px;
  background: #0e1320aa;
}
.slot {
  width: 46px; height: 46px; border-radius: 8px; border: 2px solid #3a4a63;
  background-color: var(--sw, #333);
  color: #0e1320; font-size: 10px; display: flex; align-items: center; justify-content: center;
}
.slot[aria-selected="true"] { border: 3px solid #ffc36a; transform: translateY(-5px); }

#touch-controls { position: fixed; inset: 0; z-index: 10; pointer-events: none; }
#touch-controls.show { pointer-events: none; }
#touch-controls.hide { display: none; }
#tc-move, #tc-jump, #tc-break, #tc-place {
  position: fixed; pointer-events: auto; opacity: 0.55; border-radius: 50%;
  background: #101627b0; border: 2px solid #ffffff55;
  color: #ffffff; display: flex; align-items: center; justify-content: center;
  font-size: 12px; touch-action: none;
}
#tc-move { left: 16px; bottom: 16px; width: 116px; height: 116px; }
#tc-jump { right: 16px; bottom: 16px; width: 74px; height: 74px; }
#tc-break { right: 104px; bottom: 106px; width: 70px; height: 70px; }
#tc-place { right: 16px; bottom: 196px; width: 70px; height: 70px; }