* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; background: #1a2b3c; }
body {
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  color: #e8eef4; min-height: 100vh;
  display: flex; justify-content: center;
}
/* ---- ukuran layar (diatur dari tombol Ukuran; tersimpan per HP) ---- */
#phone { --screen-max: 420px; --screen-vw: 92vw; --screen-vh: 52vh; --gap: 7px; --btn-h: 72px; --screen-w: min(var(--screen-vw), var(--screen-vh), var(--screen-max)); }
#phone.sz-s { --screen-max: 300px; --screen-vw: 78vw; --screen-vh: 44vh; --gap: 6px; --btn-h: 60px; }
#phone.sz-l { --screen-max: 520px; --screen-vw: 96vw; --screen-vh: 62vh; --gap: 8px; --btn-h: 84px; }

#phone { width: 100%; max-width: 560px; padding: 10px 10px 24px; display: flex; flex-direction: column; align-items: center; gap: 12px; }
#main { display: flex; flex-direction: column; align-items: center; gap: 12px; width: 100%; }
#screen {
  position: relative;
  width: var(--screen-w);
  aspect-ratio: 1 / 1;
  background: #000; border-radius: 10px;
  box-shadow: 0 0 0 4px #0d1620, 0 8px 24px rgba(0,0,0,.5);
  overflow: hidden;
}
#game-canvas { width: 100%; height: 100%; display: block; image-rendering: pixelated; image-rendering: crisp-edges; will-change: transform; touch-action: none; }

/* ---- overlay menu (gaya retro Bounce: langit biru + HUD biru, bukan kayu) ---- */
.overlay {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  background: rgba(8, 40, 70, .55); z-index: 5; padding: 8px;
}
.hidden { display: none !important; }
.panel {
  background: #d8f0fa; color: #0b2f4d; border-radius: 10px; width: 100%; max-width: 340px;
  max-height: 100%; overflow-y: auto; padding: 12px 14px; text-align: center;
  border: 3px solid #0853aa;
  box-shadow: 0 4px 0 #0853aa, 0 8px 18px rgba(0,0,0,.5);
}
.panel h1 { margin: 2px 0 10px; font-size: 20px; color: #0853aa; letter-spacing: .5px; }
.panel p.big { font-size: 26px; font-weight: 700; margin: 6px 0; font-family: monospace; }
.panel p.newhigh { color: #e65100; font-weight: 700; margin: 4px 0; }
.panel p.help-text { text-align: left; font-size: 13px; line-height: 1.45; margin: 4px 0 10px; }
.panel p.cheat-keys { text-align: center; font-family: monospace; font-size: 12px; background: #b0e0f0; border-radius: 6px; padding: 8px; }
.menu-list { display: flex; flex-direction: column; gap: 6px; margin-bottom: 10px; }
.menu-list button, .btn-soft {
  min-height: 44px; padding: 8px 12px; font-size: 16px; border-radius: 8px; cursor: pointer;
  border: 2px solid #0853aa; background: #fff; color: #0853aa; font-weight: 600; width: 100%;
}
.menu-list button.sel { background: #0853aa; color: #fff; }
.menu-list button.on { background: #ff9813; border-color: #e65100; color: #fff; }
.btn-soft { background: #b0e0f0; border-color: #0853aa; color: #0b2f4d; }

/* ---- header paling atas: jeda / suara / layar penuh / ukuran ---- */
#toolbar { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; width: 100%; }
.tool-btn {
  min-width: 48px; min-height: 44px; padding: 6px 10px; font-size: 20px; font-weight: 700;
  border-radius: 10px; cursor: pointer; color: #0b2f4d;
  border: 2px solid #0853aa; background: linear-gradient(#eaf7fd, #b0e0f0);
  box-shadow: 0 2px 0 #0853aa; user-select: none; touch-action: manipulation;
}
.tool-btn:active { transform: translateY(2px); box-shadow: none; }
.tool-btn.wide { font-size: 14px; min-width: 0; }
.tool-btn.off { opacity: .55; }
.tool-btn.on { background: linear-gradient(#ffe9a8, #f5c542); border-color: #e65100; }

/* ---- kontrol: D-pad selebar layar game ---- */
#side { display: flex; flex-direction: column; align-items: center; width: 100%; }
#controls { display: flex; justify-content: center; width: 100%; }
#dpad {
  width: var(--screen-w);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap);
}
#dpad button {
  width: 100%; height: var(--btn-h); min-width: 44px; min-height: 44px;
  font-size: 26px; font-weight: 700; border-radius: 10px; cursor: pointer;
  border: 2px solid #0853aa; background: linear-gradient(#eaf7fd, #b0e0f0); color: #0b2f4d;
  box-shadow: 0 2px 0 #0853aa; user-select: none; touch-action: none;
}
#dpad button:active, #dpad button.pressed {
  background: linear-gradient(#ff9813, #f5c542); transform: translateY(2px); box-shadow: none;
}
#dpad button.fire { background: linear-gradient(#ffe9a8, #f5c542); border-color: #e65100; }
#toast {
  position: fixed; left: 50%; bottom: 18px; transform: translateX(-50%);
  background: #222; color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 14px;
  box-shadow: 0 4px 14px rgba(0,0,0,.5); z-index: 50; max-width: 90vw; text-align: center;
}

/* ---- landscape: header di atas, layar kiri + kontrol kanan ---- */
@media (orientation: landscape) and (max-height: 600px) {
  body { align-items: center; }
  #phone { --screen-w: min(58vw, 86vh, var(--screen-max)); max-width: 960px; padding: 8px; gap: 10px; }
  #main { flex-direction: row; justify-content: center; align-items: flex-start; gap: 16px; }
  #screen { flex-shrink: 0; }
  #side { flex: 1; min-width: 220px; align-items: center; justify-content: center; padding-top: 4px; }
}
@media (min-width: 700px) and (orientation: portrait) {
  #phone { max-width: 640px; }
}