* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  background: #2d5a1b;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
  touch-action: none;
  user-select: none;
}

#gameCanvas {
  display: block;
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
}

/* ---- LOADING ---- */
#loadingScreen {
  position: fixed; inset: 0;
  background: #1a3a0a;
  display: flex; align-items: center; justify-content: center;
  z-index: 100;
  transition: opacity 0.5s;
}
#loadingScreen.fade-out { opacity: 0; pointer-events: none; }

.loading-content { text-align: center; color: #fff; }
.loading-content h1 { font-size: 2rem; margin-bottom: 1rem; }
.loading-content p  { font-size: 1.1rem; color: #9fda6f; }

/* ---- HUD ---- */
#hud {
  position: fixed; top: 12px; left: 12px;
  top: calc(12px + env(safe-area-inset-top));
  left: calc(12px + env(safe-area-inset-left));
  display: flex; flex-direction: column; gap: 6px;
  z-index: 10;
  pointer-events: none;
}
.hud-box {
  background: rgba(0,0,0,0.55);
  color: #fff;
  border-radius: 10px;
  padding: 6px 14px;
  font-size: 0.95rem;
  border: 2px solid rgba(255,255,255,0.15);
}
.hud-box span { font-weight: bold; color: #f7e04a; }

/* Top-right column */
#topRight {
  position: fixed; top: 12px; right: 12px;
  top: calc(12px + env(safe-area-inset-top));
  right: calc(12px + env(safe-area-inset-right));
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
  z-index: 10;
}

/* QR piece tracker */
#qrPieces {
  background: rgba(0,0,0,0.55);
  border-radius: 12px;
  padding: 8px 10px;
  display: flex; gap: 6px; align-items: center;
  border: 2px solid rgba(255,255,255,0.15);
}

/* Music control */
#musicControl {
  background: rgba(0,0,0,0.55);
  border-radius: 12px;
  padding: 6px 10px;
  display: flex; gap: 8px; align-items: center;
  border: 2px solid rgba(255,255,255,0.15);
}
#btnMusicToggle {
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
#musicVolume {
  width: 80px;
  accent-color: #f7e04a;
  cursor: pointer;
}
#qrPieces .piece {
  width: 28px; height: 28px;
  border-radius: 5px;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.3);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; color: rgba(255,255,255,0.3);
  transition: all 0.3s;
}
#qrPieces .piece.found {
  background: #f7e04a;
  border-color: #e8a800;
  color: #5a3800;
  font-size: 1rem;
}
#qrPieces .label {
  color: #fff; font-size: 0.8rem; margin-right: 4px;
}

/* ---- D-PAD ---- */
#dpad {
  position: fixed;
  bottom: 24px; right: 24px;
  bottom: calc(24px + env(safe-area-inset-bottom));
  right: calc(24px + env(safe-area-inset-right));
  display: grid;
  grid-template-columns: 60px 60px 60px;
  grid-template-rows: 60px 60px 60px;
  gap: 4px;
  z-index: 10;
}
#dpad .dpad-btn {
  background: rgba(0,0,0,0.5);
  border: 2px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  color: #fff;
  font-size: 1.4rem;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
  transition: background 0.1s;
}
#dpad .dpad-btn:active,
#dpad .dpad-btn.pressed { background: rgba(255,255,255,0.25); }
#dpad .dpad-center {
  background: rgba(0,0,0,0.3);
  border-radius: 10px;
}
#btn-up    { grid-column: 2; grid-row: 1; }
#btn-left  { grid-column: 1; grid-row: 2; }
#btn-right { grid-column: 3; grid-row: 2; }
#btn-down  { grid-column: 2; grid-row: 3; }
.dpad-center { grid-column: 2; grid-row: 2; }

/* ---- MODAL ---- */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.65);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
  opacity: 1;
  transition: opacity 0.2s;
}
.modal-overlay.hidden { display: none; }

.modal-box {
  background: linear-gradient(160deg, #fffde7 0%, #fff9c4 100%);
  border-radius: 20px;
  padding: 28px 32px;
  max-width: 360px; width: 90%;
  text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,0.4);
  animation: popIn 0.25s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes popIn {
  from { transform: scale(0.6); opacity: 0; }
  to   { transform: scale(1);   opacity: 1; }
}

.modal-egg {
  width: 120px; height: 145px;
  object-fit: contain;
  margin-bottom: 14px;
  filter: drop-shadow(0 4px 12px rgba(0,0,0,0.25));
}

.modal-box h2 {
  font-size: 1.3rem;
  margin-bottom: 8px;
  color: #3a2000;
}
.modal-box .subtitle {
  font-size: 0.95rem;
  color: #6b4a00;
  margin-bottom: 20px;
  line-height: 1.4;
}
.modal-box .qr-label {
  background: #4caf50;
  color: #fff;
  border-radius: 8px;
  padding: 4px 12px;
  font-size: 0.85rem;
  font-weight: bold;
  margin-bottom: 10px;
  display: inline-block;
}

.btn-ok {
  background: linear-gradient(135deg, #4caf50, #2e7d32);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 12px 32px;
  font-size: 1.05rem;
  cursor: pointer;
  font-weight: bold;
  box-shadow: 0 3px 10px rgba(0,0,0,0.2);
  transition: transform 0.1s;
}
.btn-ok:active { transform: scale(0.97); }

/* ---- QR WIN MODAL ---- */
#qrModal .modal-box {
  max-width: 460px;
  background: linear-gradient(160deg, #e8f5e9 0%, #c8e6c9 100%);
}
#qrModal h2 { font-size: 1.5rem; color: #1b5e20; margin-bottom: 6px; }
#qrModal p  { color: #2e7d32; margin-bottom: 16px; }

#qrImage {
  width: min(280px, 80vw); height: min(280px, 80vw);
  object-fit: contain;
  border: 4px solid #fff;
  border-radius: 12px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.2);
  margin: 12px auto;
  display: block;
}

.qr-pieces-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  width: min(280px, 80vw);
  margin: 12px auto;
}
.qr-piece-cell {
  width: min(138px, 39vw); height: min(138px, 39vw);
  background: rgba(0,0,0,0.05);
  border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.qr-piece-cell img {
  width: 280px; height: 280px;
  max-width: none;
}
.qr-piece-cell:nth-child(1) img { object-position: 0 0; }
.qr-piece-cell:nth-child(2) img { object-position: -138px 0; }
.qr-piece-cell:nth-child(3) img { object-position: 0 -138px; }
.qr-piece-cell:nth-child(4) img { object-position: -138px -138px; }