/* Overrides for GB-Studio-style layout in simple.css
   Goal: keep the canvas and legend in normal document flow (no overlap).
*/
html, body {
  height: auto !important;         /* allow page to grow */
  min-height: 100% !important;
}

body {
  overflow-y: auto !important;      /* simple.css sets overflow:hidden */
}

/* simple.css makes #game absolute/fullscreen; that causes legend overlap. */
#game {
  position: relative !important;
  inset: auto !important;
  width: min(100vw, 720px) !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: flex-start !important;
  margin: 0 auto !important;
  padding: 6px 10px 0 !important;
  box-sizing: border-box !important;
}

/* Ensure the canvas stays responsive and leaves room for the legend */
#game canvas,
#mainCanvas {
  width: 100% !important;
  height: auto !important;
  max-height: calc(100vh - 220px) !important; /* room for legend + browser UI */
  display: block !important;
}

/* Dock for the legend (created/used by JS) */
#controlsDock {
  position: static !important;
  width: min(560px, calc(100vw - 20px)) !important;
  margin: 0 auto !important;
  padding: 10px 10px 14px !important;
  box-sizing: border-box !important;
}
#controlsDock:empty { display: none !important; }

/* A button (example: teal) */
#controller_a.roundBtn {
  color: #062b2b; /* text color */
  background: #2fb7a0;
  background: radial-gradient(ellipse at center, #66e6d3 0%, #1f9f8b 100%);
}

/* B button (example: amber) */
#controller_b.roundBtn {
  color: #2b1a00;
  background: #f2a13b;
  background: radial-gradient(ellipse at center, #ffd28a 0%, #e58a12 100%);
}

/* Optional: keep pressed-state readable */
#controller_a.roundBtn.btnPressed,
#controller_b.roundBtn.btnPressed {
  opacity: 0.55;
}