/* Game Rasul 3D shell */
#g3d-stage { position: fixed; inset: 0; z-index: 1050; background: #000; overflow: hidden; }
#g3d-stage canvas { display: block; width: 100%; height: 100%; touch-action: none; outline: none; }

#g3d-loading, #g3d-ctxlost {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 12px;
  background: #1a2233; color: #fff; font-family: sans-serif; z-index: 20;
}
#g3d-ctxlost { display: none; }
#g3d-ctxlost button { padding: 10px 24px; border-radius: 8px; border: 0; background: #e8a44a; font-weight: bold; }

#g3d-back {
  position: absolute; top: 10px; left: 10px; z-index: 30;
  background: rgba(0,0,0,0.5); color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 8px; font-family: sans-serif; font-size: 14px;
}
#g3d-fs {
  position: absolute; top: 10px; right: 10px; z-index: 30;
  background: rgba(0,0,0,0.5); color: #fff; border: 0;
  padding: 8px 12px; border-radius: 8px; font-size: 16px;
}
#g3d-cloud {
  position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 30;
  background: rgba(0,0,0,0.5); color: #fff; padding: 6px 14px; border-radius: 999px;
  font-family: sans-serif; font-size: 12px; white-space: nowrap;
}
#g3d-cloud:empty { display: none; }
#g3d-cloud a { color: #ffd98a; }

#g3d-hud {
  position: absolute; left: 10px; bottom: 10px; z-index: 30;
  color: #fff; font-family: sans-serif; text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  pointer-events: none; max-width: 60vw;
}
#g3d-loc { font-weight: bold; font-size: 15px; }
#g3d-time { font-size: 13px; opacity: 0.9; }
#g3d-quest { font-size: 13px; margin-top: 4px; background: rgba(0,0,0,0.4); padding: 4px 10px; border-radius: 8px; display: inline-block; }

#g3d-prompt {
  position: absolute; bottom: 26vh; left: 50%; transform: translateX(-50%); z-index: 30;
  display: none; background: rgba(0,0,0,0.65); color: #fff; font-family: sans-serif;
  font-size: 14px; padding: 8px 16px; border-radius: 999px; white-space: nowrap;
}

#g3d-dialog {
  position: absolute; left: 50%; transform: translateX(-50%); bottom: 4vh; z-index: 40;
  display: none; width: min(720px, 92vw);
  background: rgba(20, 24, 38, 0.92); color: #fff; font-family: sans-serif;
  border: 2px solid #e8a44a; border-radius: 14px; padding: 14px 18px; cursor: pointer;
}
#g3d-dialog-name { color: #ffd98a; font-weight: bold; margin-bottom: 6px; font-size: 15px; }
#g3d-dialog-text { font-size: 16px; line-height: 1.5; min-height: 3em; }
#g3d-dialog-next { text-align: right; font-size: 12px; opacity: 0.7; margin-top: 6px; }

/* Touch UI: tampil hanya di mode touch */
#g3d-touchui { display: none; }
.g3d-touch #g3d-touchui { display: block; }
#g3d-dpad {
  position: absolute; left: 4vw; bottom: 5vh; z-index: 35;
  width: 32vmin; height: 32vmin; max-width: 170px; max-height: 170px;
  border-radius: 50%; background: rgba(255,255,255,0.12); border: 2px solid rgba(255,255,255,0.3);
  touch-action: none;
}
#g3d-dpad-knob {
  position: absolute; left: 50%; top: 50%; margin: -22% 0 0 -22%;
  width: 44%; height: 44%; border-radius: 50%;
  background: rgba(255,255,255,0.35); pointer-events: none;
}
#g3d-btn-act {
  position: absolute; right: 5vw; bottom: 8vh; z-index: 35;
  width: 18vmin; height: 18vmin; max-width: 96px; max-height: 96px;
  border-radius: 50%; border: 2px solid rgba(255,255,255,0.4);
  background: rgba(232,164,74,0.75); color: #fff; font-size: 22px; font-weight: bold;
  touch-action: none;
}

@media (max-width: 768px) {
  #g3d-dialog-text { font-size: 17px; }
  #g3d-loc { font-size: 16px; }
  #g3d-quest { font-size: 14px; }
  #g3d-hud { bottom: auto; top: 52px; }
}
@media (max-width: 480px) {
  #g3d-dialog { bottom: 2vh; padding: 12px 14px; }
  #g3d-dialog-text { font-size: 16px; }
  #g3d-cloud { top: 52px; }
  #g3d-hud { top: 84px; }
}