@import url("../canvas-game.css?v=20260716-active-canvas-games");
:root{--yellow:#42d97b;--blue:#54c7ff}
.game-logo{background:linear-gradient(90deg,#42d97b 0%,#54c7ff 48%,#ffd166 78%,#fff8ee 100%);background-clip:text;-webkit-background-clip:text}
.arcade-store-arcade-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.22em;
  width: 100%;
  margin: 0 0 14px;
  border: 2px solid #1266ff;
  background: #ffffff;
  color: #071225;
  box-shadow: 0 0 0 2px rgba(18, 102, 255, 0.16), 0 8px 20px rgba(18, 102, 255, 0.2);
  text-transform: none;
}

.arcade-store-arcade-button span:nth-child(2) {
  color: #1266ff;
  text-transform: uppercase;
}

.arcade-store-arcade-button:hover,
.arcade-store-arcade-button:focus-visible {
  background: #ffffff;
  color: #071225;
  outline: 3px solid rgba(84, 199, 255, 0.55);
  outline-offset: 3px;
}
/* Shared 3D arcade button polish. */
.arcade-store-arcade-button {
  gap: 0;
  border: 2px solid #1266ff;
  background: linear-gradient(180deg, #ffffff 0%, #f2f8ff 44%, #d4e8ff 100%);
  color: #071225;
  box-shadow: inset 0 2px 0 rgba(255,255,255,.95), inset 0 -4px 0 rgba(18,102,255,.2), 0 8px 20px rgba(18,102,255,.22);
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}

.arcade-store-arcade-button .bleep-blue,
.arcade-store-arcade-button span:nth-child(2) {
  color: #1266ff;
  text-transform: uppercase;
}

.arcade-store-arcade-button:hover,
.arcade-store-arcade-button:focus-visible {
  background: linear-gradient(180deg, #ffffff 0%, #eaf4ff 42%, #bfdcff 100%);
  color: #071225;
  outline: 3px solid rgba(84,199,255,.58);
  outline-offset: 3px;
}

.primary-button {
  background: linear-gradient(180deg, color-mix(in srgb, var(--blue, #54c7ff) 34%, #fff) 0%, var(--blue, #54c7ff) 52%, color-mix(in srgb, var(--blue, #54c7ff) 72%, #071225) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.42), inset 0 -4px 0 rgba(5,10,24,.22), 0 8px 18px rgba(0,0,0,.26);
}

.secondary-button,
.small-button {
  background: linear-gradient(180deg, color-mix(in srgb, var(--yellow, #ffd166) 34%, #fff) 0%, var(--yellow, #ffd166) 54%, color-mix(in srgb, var(--yellow, #ffd166) 72%, #8a5a00) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.48), inset 0 -4px 0 rgba(89,51,0,.22), 0 7px 16px rgba(0,0,0,.24);
}

.store-button,
.buy-button {
  background: linear-gradient(180deg, rgba(255,255,255,.2) 0%, rgba(255,255,255,.1) 50%, rgba(5,10,24,.22) 100%);
  box-shadow: inset 0 2px 0 rgba(255,255,255,.2), inset 0 -4px 0 rgba(5,10,24,.22), 0 7px 16px rgba(0,0,0,.22);
}
/* Compact high-score entry row: Initials, City, Save. */
.score-form {
  display: grid;
  grid-template-columns: minmax(4.2rem, 4.9rem) minmax(0, 1fr) auto;
  gap: 6px 8px;
  align-items: end;
}

.score-form label[for="initialsInput"] {
  grid-column: 1;
  grid-row: 1;
}

.score-form label[for="cityInput"] {
  grid-column: 2;
  grid-row: 1;
}

.initials-row {
  display: contents;
}

.initials-row input,
#initialsInput {
  grid-column: 1;
  grid-row: 2;
  width: 4.8rem;
  min-width: 0;
  text-align: center;
}

.city-input,
#cityInput {
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
}

.initials-row button,
.score-form button[type="submit"] {
  grid-column: 3;
  grid-row: 2;
  min-width: 4.1rem;
  padding-inline: 10px;
}

.score-form datalist {
  display: none;
}

.score-form .high-score,
#highScoreText {
  grid-column: 1 / -1;
}
/* Keep the Arcade return button visible on initials/end-game overlays. */
.overlay {
  align-items: flex-start !important;
  overflow: auto !important;
  padding-top: max(10px, env(safe-area-inset-top)) !important;
  padding-bottom: max(10px, env(safe-area-inset-bottom)) !important;
}

.panel {
  max-height: calc(100dvh - 20px) !important;
}

.arcade-store-arcade-button {
  position: sticky;
  top: 0;
  z-index: 5;
}