/* games.css — minigame chrome: Frog Digger / Frog Hopper panels, d-pad, sell panel, the Vault */
/* ---------- Frog Digger ---------- */
.digger-panel { max-width: 460px; }

.digger-hud {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  font-size: 13px;
  font-weight: 800;
}

.energy-wrap {
  flex: 1 1 120px;
  max-width: 180px;
  height: 16px;
  background: rgba(255, 255, 255, 0.12);
  border: 2px solid rgba(0, 0, 0, 0.4);
  border-radius: 999px;
  overflow: hidden;
}

.energy-fill { height: 100%; width: 100%; background: linear-gradient(90deg, #2fbb4f, #a8e063); transition: width 0.15s ease; }

#digCanvas, #hopCanvas, #runCanvas {
  display: block;
  margin: 0 auto;
  width: 100%;
  max-width: 336px;
  image-rendering: pixelated;
  border: 4px solid #3b2a12;
  border-radius: 10px;
  background: #0a0e24;
  touch-action: none;
}

#hopCanvas { border-color: #2e2e36; }
#runCanvas { border-color: #1d4f66; }

.dpad {
  display: grid;
  grid-template-columns: repeat(3, 54px);
  gap: 6px;
  justify-content: center;
  margin-top: 14px;
}

.dpad button {
  font-size: 20px;
  font-family: inherit;
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
  border: 3px solid rgba(255, 255, 255, 0.25);
  border-radius: 12px;
  padding: 10px 0;
  cursor: pointer;
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
}

.dpad button:active { background: rgba(255, 255, 255, 0.3); }
.dpad .dpad-empty { visibility: hidden; }

.sell-panel {
  display: none;
  margin-top: 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 2px solid var(--brick-yellow);
  border-radius: 16px;
  padding: 16px;
}

.sell-panel.open { display: block; }
.sell-panel h3 { font-size: 17px; font-weight: 900; text-transform: uppercase; margin-bottom: 8px; }
.sell-list { font-size: 14px; font-weight: 700; line-height: 1.7; margin-bottom: 10px; }
.sell-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }

/* ---------- The Vault ---------- */
.vault-door {
  width: 190px;
  height: 190px;
  margin: 14px auto 18px;
  border-radius: 26px;
  background: linear-gradient(160deg, #a6adba, #5c6470);
  border: 6px solid #3a3f48;
  box-shadow:
    inset 0 -12px 0 rgba(0, 0, 0, 0.25),
    inset 0 6px 0 rgba(255, 255, 255, 0.2),
    0 12px 32px rgba(0, 0, 0, 0.5);
  position: relative;
}

.vault-wheel {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 96px;
  height: 96px;
  margin: -48px 0 0 -48px;
  border-radius: 50%;
  border: 12px solid #3a3f48;
  background: radial-gradient(circle at 35% 30%, #cfd6e2, #79808e);
}

.vault-wheel::before, .vault-wheel::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  background: #3a3f48;
  border-radius: 4px;
}
.vault-wheel::before { width: 8px; height: 72px; margin: -36px 0 0 -4px; }
.vault-wheel::after  { width: 72px; height: 8px; margin: -4px 0 0 -36px; }

.vault-bolt {
  position: absolute;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #e8edf5, #7a828f);
  border: 2px solid #3a3f48;
}

.vault-keyhole {
  position: absolute;
  left: 50%;
  bottom: 14px;
  width: 10px;
  height: 18px;
  margin-left: -5px;
  background: #1a1a1e;
  border-radius: 5px 5px 2px 2px;
}

/* once the key turns, the door shows its dark inside instead of the wheel */
.vault-door.opened { background: linear-gradient(160deg, #23262e, #101218); }
.vault-door.opened .vault-wheel,
.vault-door.opened .vault-keyhole,
.vault-door.opened .vault-bolt { display: none; }
.vault-inside { display: none; }
.vault-door.opened .vault-inside {
  display: flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  inset: 0;
  font-size: 42px;
  filter: drop-shadow(0 0 14px rgba(245, 205, 48, 0.7));
}

/* ---------- Pebble's Shop + the Boom Box jukebox ---------- */
.dialog-side {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}

/* the shop counter, with the pet rock sitting on it */
.pebbles-counter {
  font-size: 24px;
  line-height: 1;
  background: linear-gradient(180deg, #8a5a2b, #5e3c19);
  border: 3px solid #3b2a12;
  border-radius: 8px;
  padding: 4px 16px 6px;
  box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.25);
}

.boombox {
  margin-top: 20px;
  padding: 14px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  border-radius: 14px;
  background: rgba(0, 0, 0, 0.25);
}

.boombox h3 {
  font-size: 17px;
  font-weight: 900;
  letter-spacing: 2px;
  margin-bottom: 10px;
  color: var(--brick-yellow);
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
}

.song-list {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.song-btn {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 800;
  color: #fff;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.4);
  background: linear-gradient(180deg, #6a5aa8, #4a3d80);
  border: 2px solid rgba(0, 0, 0, 0.35);
  border-radius: 10px;
  padding: 8px 12px;
  cursor: pointer;
  box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25);
}

.song-btn:hover { transform: scale(1.05); }
.song-btn:active { transform: scale(0.95); }


/* ---------- game over screen (Frog Hopper splat, River Rush wipeout) ---------- */
.game-over { display: none; }
.game-over.show { display: block; animation: splat-pop 0.25s ease; }
.game-over-title {
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 3px;
  color: #ff5a4e;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.5);
  margin: 10px 0 6px;
}
.game-over .roll-btn { margin: 0 5px 12px; padding: 12px 22px; }
.menu-btn { background: linear-gradient(180deg, #8a8a97, #5c5c68); }
@keyframes splat-pop {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}