* { box-sizing: border-box; }
html, body {
  margin: 0; padding: 0; width: 100%; height: 100%;
  background: #7ec0ee; overflow: hidden;
  font-family: -apple-system, "Hiragino Sans", "Yu Gothic", sans-serif;
  -webkit-user-select: none; user-select: none;
}
#glcanvas {
  position: fixed; inset: 0; width: 100%; height: 100%; display: block; touch-action: none;
}
#crosshair {
  position: fixed; left: 50%; top: 50%; width: 18px; height: 18px;
  transform: translate(-50%, -50%); pointer-events: none; z-index: 5; display: none;
}
#crosshair::before, #crosshair::after {
  content: '';
  position: absolute; background: rgba(255,255,255,0.85);
  box-shadow: 0 0 2px rgba(0,0,0,0.6);
}
#crosshair::before { left: 8px; top: 0; width: 2px; height: 18px; }
#crosshair::after { left: 0; top: 8px; width: 18px; height: 2px; }

#hud {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 5;
  display: none; flex-direction: column; align-items: center; padding-bottom: 14px;
}
#hotbar {
  display: flex; gap: 6px; background: rgba(0,0,0,0.35); padding: 6px; border-radius: 10px;
}
.slot {
  width: 46px; height: 46px; border-radius: 6px; border: 2px solid rgba(255,255,255,0.4);
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 11px;
  text-shadow: 0 1px 2px rgba(0,0,0,0.8); position: relative;
}
.slot.active { border-color: #fff; box-shadow: 0 0 8px #fff; }
.slot .num {
  position: absolute; top: 1px; left: 3px; font-size: 10px; opacity: 0.8;
}
#msg {
  margin-top: 8px; color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,0.9); font-size: 13px; min-height: 16px;
}

#overlay {
  position: fixed; inset: 0; z-index: 20; background: rgba(10,20,30,0.72);
  display: flex; align-items: center; justify-content: center;
}
#overlay.hidden { display: none; }
#overlay-inner {
  background: #1b2735ee; color: #eaf2ff; padding: 28px 34px; border-radius: 14px;
  max-width: 420px; box-shadow: 0 10px 40px rgba(0,0,0,0.5);
}
#overlay-inner h1 { margin: 0 0 8px; font-size: 26px; }
#overlay-inner p { margin: 6px 0; line-height: 1.5; font-size: 14px; }
#overlay-inner ul { padding-left: 18px; margin: 10px 0; font-size: 13px; line-height: 1.7; }
#overlay-inner .small { opacity: 0.65; font-size: 11px; }
#startBtn {
  margin-top: 10px; padding: 10px 22px; font-size: 16px; border: none; border-radius: 8px;
  background: #4caf50; color: #fff; cursor: pointer; width: 100%;
}
#startBtn:active { background: #3d8b40; }

/* touch controls (mobile) */
#joystickZone {
  position: fixed; left: 16px; bottom: 18px; width: 120px; height: 120px;
  border-radius: 50%; background: rgba(255,255,255,0.15); border: 2px solid rgba(255,255,255,0.35);
  z-index: 15; display: none; touch-action: none;
}
#joystickStick {
  position: absolute; left: 50%; top: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  border-radius: 50%; background: rgba(255,255,255,0.55); pointer-events: none;
}
#touchButtons {
  position: fixed; right: 16px; bottom: 18px; z-index: 15; display: none;
  flex-direction: column; align-items: center; gap: 10px;
}
#touchButtons button {
  width: 58px; height: 58px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.4); color: #fff; font-size: 22px; touch-action: none; padding: 0;
}
#btnPlace { background: rgba(76,175,80,0.6); }
#btnBreak { background: rgba(200,60,60,0.6); }
#btnMenu {
  position: fixed; right: 16px; top: 14px; z-index: 15; display: none;
  align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 8px; border: 2px solid rgba(255,255,255,0.5);
  background: rgba(0,0,0,0.4); color: #fff; font-size: 18px; padding: 0;
}

@media (pointer: coarse), (hover: none) {
  #joystickZone { display: block; }
  #touchButtons { display: flex; }
  #btnMenu { display: flex; }
}

@media (max-width: 560px) {
  #overlay-inner { max-width: 90vw; padding: 20px; }
  .slot { width: 38px; height: 38px; }
}