* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; min-height: 100%; background: #f1f5f7; font-family: Arial, sans-serif; }
body { display: flex; justify-content: center; padding: 14px; }
.game-frame {
  width: min(960px, 100%);
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 34px rgba(31,49,63,.16);
  padding: 10px 10px 14px;
  touch-action: none;
  overflow: hidden;
}
.game-frame, .game-frame *, #game-container, #game-container canvas, .mobile-controls, .mobile-controls button {
  -webkit-user-select: none !important;
  user-select: none !important;
  -webkit-touch-callout: none !important;
}
.top-tools { display:flex; justify-content:flex-end; padding: 2px 4px 8px; }
.top-tools button {
  border:0; border-radius:10px; background:#1f5f72; color:#fff; font-weight:700; padding:8px 12px; cursor:pointer;
}
#game-container { width:100%; aspect-ratio: 4 / 3; min-height: 360px; display:flex; align-items:center; justify-content:center; background:#d7edf3; border-radius:14px; overflow:hidden; }
#game-container canvas { display:block; max-width:100%; max-height:100%; }
#loadingMessage { color:#275269; font-weight:700; }
.mobile-controls { display:none; gap:14px; justify-content:center; padding:12px 0 4px; }
.mobile-controls button {
  width:92px; height:72px; border:0; border-radius:18px; background:#1f5f72; color:white; font-size:32px; font-weight:900; touch-action:none; cursor:pointer;
}
.help { margin: 7px 0 0; text-align:center; color:#526a74; font-size:14px; }
@media (max-width: 780px), (pointer: coarse) {
  body { padding: 0; background:#fff; }
  .game-frame { width:100%; border-radius:0; box-shadow:none; padding:7px; }
  .mobile-controls { display:flex; }
  #game-container { min-height: 330px; }
}