/* El tamaño del lienzo y la navegación del teléfono son independientes. */
html { background: #071422; }
body {
  display: block;
  min-width: 320px;
  margin: 0;
  overflow: auto;
  background: #071422;
  color: #e7f3ff;
}
.game-shell,
.game-shell.gc-ai-banner-visible {
  width: 100%;
  max-width: none;
  margin: 0 auto;
}
.gc-view-tools {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left));
  background: #0b2034;
  border-bottom: 1px solid #27475e;
  font: 14px/1.4 system-ui, sans-serif;
}
.gc-view-tools button,
.gc-view-home {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  padding: 8px 12px;
  border: 1px solid #3c607b;
  border-radius: 9px;
  background: #15334e;
  color: #edf8ff;
  font: inherit;
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  touch-action: manipulation;
}
.gc-view-tools button:focus-visible,
.gc-view-home:focus-visible,
.gc-game-viewport:focus-visible { outline: 3px solid #62d7ff; outline-offset: -3px; }
.gc-view-tools button[aria-pressed="true"] { background: #66d3f3; color: #061a2b; }
.gc-view-tools button:disabled { opacity: .4; cursor: default; }
.gc-view-home { margin-right: auto; }
.gc-view-zoom { display: flex; align-items: center; gap: 5px; }
#gc-view-scale { min-width: 48px; text-align: center; font-variant-numeric: tabular-nums; }
#gc-view-smaller, #gc-view-larger { font-size: 23px; padding: 0; }
#gc-view-help, #gc-view-status { flex-basis: 100%; margin: 0; color: #b9d0e2; font-size: 13px; }
#gc-view-status { color: #79ddff; }
.gc-game-viewport {
  width: 100%;
  max-height: calc(100vh - var(--gc-tools-height, 120px));
  max-height: calc(100dvh - var(--gc-tools-height, 120px));
  overflow: auto;
  touch-action: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-color: #5692b1 #102b40;
  background: #071422;
}
#juego {
  width: 100%;
  max-width: none;
  max-height: none;
  min-width: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  background: #071422;
}
#juego canvas { touch-action: auto !important; }
.gc-drag-mode #juego canvas { touch-action: none !important; }
.game-shell__footer {
  position: static;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 12px max(12px, env(safe-area-inset-right)) 12px max(12px, env(safe-area-inset-left));
  background: #0b2034;
  color: #b9d0e2;
}
.game-shell .game-shell__notice { display: block; flex: 1 1 240px; margin: 0; color: #b9d0e2; font-size: 12px; line-height: 1.5; }
.game-shell__ai-link { color: #d8ecff; }
@media (min-width: 1000px) {
  .gc-view-tools { gap: 12px; }
  #gc-view-help { flex-basis: auto; margin-left: auto; }
}
@media (max-width: 520px) {
  .gc-view-tools { gap: 6px; }
  .gc-view-tools button, .gc-view-home { padding-inline: 9px; }
  .gc-view-home { font-size: 13px; }
}