/* Layout: kontainer game, latar angkasa, layar, desktop shell, responsif. */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--bg-deep);
  color: var(--text-main);
  font-family: var(--font-body);
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.hidden { display: none !important; }

/* ---------- Latar angkasa (Figma node 2:6) ---------- */
#space { position: fixed; inset: 0; z-index: 0; background: var(--bg-sky); overflow: hidden; pointer-events: none; }
.star-dot { position: absolute; border-radius: 9999px; animation: twinkle 3.2s ease-in-out infinite; }
@keyframes twinkle { 0%, 100% { opacity: var(--o, 0.6); } 50% { opacity: calc(var(--o, 0.6) * 0.35); } }
.deco { position: absolute; font: 700 56px var(--font-display); color: rgba(192, 132, 252, 0.08); animation: drift 9s ease-in-out infinite; }
@keyframes drift { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-20px) rotate(8deg); } }

/* latar di dalam kontainer game: langit + bintang acuan + jalur kosmik + gradasi dasar */
.space-layer { position: absolute; inset: 0; z-index: 0; overflow: hidden; background: var(--bg-sky); }
.space-track {
  position: absolute;
  left: 50%;
  bottom: 0;
  width: 49%;
  height: 20%;
  transform: translateX(-50%);
  overflow: hidden;
}
.space-track::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 238%; /* ditekan secara vertikal (scaleY .42) agar tampak perspektif */
  transform: scaleY(0.42);
  transform-origin: bottom;
  border-left: 1px solid rgba(192, 132, 252, 0.4);
  border-right: 1px solid rgba(192, 132, 252, 0.4);
  background: linear-gradient(to top, rgba(94, 38, 191, 0.6), rgba(25, 6, 61, 0.1));
  box-shadow: inset 0 0 30px rgba(162, 89, 255, 0.4);
}
.space-fade { position: absolute; left: 0; right: 0; bottom: 0; height: calc(var(--d) * 64); background: linear-gradient(to top, var(--bg-deep), rgba(13, 2, 33, 0)); }

/* ---------- Aplikasi + kontainer game ---------- */
#app { position: relative; z-index: 1; height: 100vh; height: 100dvh; display: flex; align-items: center; justify-content: center; }

#stage {
  position: relative;
  flex: none;
  width: var(--sw);
  height: var(--sh);
  overflow: hidden;
  background: var(--bg-deep);
  touch-action: none;
  box-shadow: 0 0 60px rgba(0, 0, 0, 0.55);
  font-size: calc(var(--d) * 16);
}
#game { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; display: block; touch-action: none; visibility: hidden; }
#stage.in-game #game { visibility: visible; }

/* layar-layar DOM di atas kanvas */
.screen {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: none;
  flex-direction: column;
  padding:
    max(calc(var(--d) * 14), env(safe-area-inset-top, 0px))
    max(calc(var(--d) * 16), env(safe-area-inset-right, 0px))
    max(calc(var(--d) * 14), env(safe-area-inset-bottom, 0px))
    max(calc(var(--d) * 16), env(safe-area-inset-left, 0px));
  touch-action: manipulation;
}
.screen.active { display: flex; animation: screenIn 0.3s ease both; }
@keyframes screenIn { from { opacity: 0; transform: translateY(calc(var(--d) * 12)); } to { opacity: 1; transform: none; } }
.screen.modal-overlay { padding: 16px 0; }
.screen.modal-overlay.active { display: grid; place-items: center; animation: fadeIn 0.25s ease both; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
#hud { z-index: 1; }
.splash { align-items: center; justify-content: center; }
.splash-logo { display: flex; flex-direction: column; align-items: center; gap: calc(var(--d) * 14); animation: splashPop 0.9s cubic-bezier(0.3, 1.5, 0.5, 1) both; }
@keyframes splashPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }

.menu-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: calc(var(--d) * 18); padding: 0 calc(var(--d) * 8); margin-top: calc(var(--d) * -24); }
.menu-body .btn-col { max-width: calc(var(--d) * 300); }

/* ---------- Desktop shell: panel samping ---------- */
.side { flex: 1 1 0; min-width: 0; height: 100%; display: none; flex-direction: column; justify-content: center; align-items: center; gap: 24px; padding: 24px; position: relative; overflow: hidden; }
@media (min-width: 900px) { .side { display: flex; } }
.side-brand { font: 700 clamp(30px, 4vw, 54px) / 1 var(--font-display); text-align: center; color: var(--title-yellow); text-shadow: 0 6px 12px rgba(0, 0, 0, 0.55), 0 4px 0 #854d00, 0 2px 0 #b36e00; transform: rotate(-4deg); }
.side-panel { width: 100%; max-width: 280px; padding: 16px 18px; font: 700 14px / 1.5 var(--font-body); color: var(--text-soft); }
.side-panel h3 { margin: 0 0 8px; font: 700 18px var(--font-display); color: var(--title-yellow); letter-spacing: 0.4px; }
.side-panel ul { margin: 0; padding: 0; list-style: none; }
.side-panel li { margin: 8px 0; }
.side-panel li span { display: block; margin-top: 2px; font-size: 12px; color: var(--text-muted); }
.side-panel .tips { padding-left: 18px; list-style: disc; }
.side > :not(.float-sym) { position: relative; z-index: 1; }
.float-sym { position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.float-sym i { position: absolute; font: 700 64px var(--font-display); font-style: normal; color: rgba(192, 132, 252, 0.1); animation: drift 9s ease-in-out infinite; }
.float-sym i:nth-child(1) { left: 10%; top: 8%; }
.float-sym i:nth-child(2) { right: 12%; top: 26%; animation-delay: -2s; font-size: 90px; }
.float-sym i:nth-child(3) { left: 18%; bottom: 14%; animation-delay: -4s; font-size: 80px; }
.float-sym i:nth-child(4) { right: 16%; bottom: 8%; animation-delay: -6s; }

/* ---------- Putar ke portrait (HP landscape) ---------- */
#rotate { position: fixed; inset: 0; z-index: 100; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: 20px; background: var(--bg-deep); text-align: center; font: 700 20px / 1.4 var(--font-body); }
#rotate p { margin: 0; max-width: 360px; }
.rotate-icon { font-size: 56px; animation: rot 2s ease-in-out infinite; }
@keyframes rot { 0%, 100% { transform: rotate(-90deg); } 50% { transform: rotate(0deg); } }
@media (orientation: landscape) and (max-height: 520px) and (pointer: coarse) { #rotate { display: flex; } }

/* ---------- Responsif ---------- */
/* layar pendek (mis. 360x640): rapatkan jarak vertikal kartu pop-up */
@media (max-height: 700px) {
  .modal-card { padding-top: calc(var(--d) * 10); padding-bottom: calc(var(--d) * 14); }
  .modal-title { font-size: calc(var(--d) * 34); padding-bottom: calc(var(--d) * 2); }
  .stars { height: calc(var(--d) * 56); transform: scale(0.82); }
  .stats { padding: calc(var(--d) * 4) 0; }
  .coin-reward { margin: calc(var(--d) * 2) 0; }
  .btn-col { gap: calc(var(--d) * 10); }
  .modal-actions { padding-top: calc(var(--d) * 6); }
}
@media (max-height: 560px) {
  .modal-title { font-size: calc(var(--d) * 28); }
  .stars { display: none; }
  .btn, .btn-primary { padding-top: calc(var(--d) * 6); padding-bottom: calc(var(--d) * 6); }
}
/* lebar sangat sempit */
@media (max-width: 340px) { .hint-q { font-size: calc(var(--d) * 26); } }