* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; overflow: hidden; background: #1b2038; font-family: var(--font); }
#scene { position: fixed; inset: 0; width: 100vw; height: 100vh; display: block; touch-action: none; }
#crosshair { position: fixed; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%);
  pointer-events: none; }
#crosshair span { position: absolute; background: rgba(246,239,226,0.9); box-shadow: 0 0 3px rgba(0,0,0,.8); }
#crosshair .vl { left: 10px; top: 0; width: 2px; height: 22px; }
#crosshair .hz { top: 10px; left: 0; height: 2px; width: 22px; }
#hud-top { position: fixed; top: 8px; left: 10px; right: 10px; display: flex; gap: 8px; align-items: center;
  color: #cfd6ef; font-size: .85rem; pointer-events: none; text-shadow: 0 1px 3px #000; }
#hud-top .mini, #hud-top a.mini { pointer-events: auto; background: rgba(27,32,56,.75); color: #f6efe2;
  border: 1px solid #3a4470; border-radius: 8px; padding: .35rem .7rem; font-size: .8rem; cursor: pointer;
  text-decoration: none; font-family: var(--font); }
#hud-top #lock-hint { margin-right: auto; }
#hotbar { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px;
  background: rgba(27,32,56,.65); padding: 6px; border-radius: 12px; border: 1px solid #3a4470; }
#hotbar .slot { width: 52px; height: 52px; border-radius: 8px; background: #0e1226; border: 2px solid #2b3458;
  display: flex; align-items: center; justify-content: center; position: relative; cursor: pointer; }
#hotbar .slot bdi { position: absolute; bottom: 2px; right: 4px; font-size: .7rem; color: #8e8ba0; }
#hotbar .slot .cube { width: 30px; height: 30px; border-radius: 5px; box-shadow: inset -6px -6px 0 rgba(0,0,0,.35), inset 4px 4px 0 rgba(255,255,255,.25); }
#hotbar .slot[aria-selected="true"] { border-color: #ff7f50; box-shadow: 0 0 0 2px rgba(255,127,80,.45), 0 0 14px rgba(255,127,80,.5); transform: translateY(-3px); }
#held-wrap { position: fixed; bottom: 74px; left: 50%; transform: translateX(-50%); color: #f2d9a0;
  font-size: .85rem; text-shadow: 0 1px 3px #000; pointer-events: none; }
#start-screen { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(14,18,38,.78); backdrop-filter: blur(3px); z-index: 30; }
#start-screen .card { text-align: center; max-width: 520px; padding: 2.4rem; border-radius: 18px;
  background: #232a4a; border: 1px solid #3a4470; box-shadow: 0 30px 80px rgba(0,0,0,.5); }
#start-screen p { color: #cfd6ef; margin: .7rem 0; }
#start-screen p.dim { color: #8e8ba0; font-size: .85rem; }
#touch-controls { position: fixed; inset: auto 0 84px 0; display: none; justify-content: space-between;
  padding: 0 18px; z-index: 20; pointer-events: none; }
#touch-controls [data-touch] { pointer-events: auto; user-select: none; -webkit-user-select: none;
  background: rgba(27,32,56,.65); border: 1px solid #3a4470; color: #f6efe2; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; touch-action: none; }
#touch-controls [data-touch="move"] { width: 118px; height: 118px; border-radius: 50%; position: relative; }
#touch-controls [data-touch="move"] .knob { width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,127,80,.8); box-shadow: 0 4px 12px rgba(0,0,0,.4); }
.tc-right { display: flex; flex-direction: column; gap: 8px; }
.tc-right [data-touch] { width: 92px; height: 46px; font-weight: 700; }
#touch-cycle { height: 34px; font-size: .75rem; }