html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; color: #bbb; font: 12px sans-serif; }
#wrap { position: fixed; margin: 0 !important; transform: translate(-50%, -50%) scale(var(--game-scale, 1)); }
#wrap-inner { touch-action: none; }
#gamehub-toolbar { position: fixed; top: 0; left: 0; right: 0; min-height: 36px; display: flex; align-items: center; justify-content: center; gap: 8px; background: #080808; }
button { color: #ddd; background: #222; border: 1px solid #555; padding: 8px; cursor: pointer; touch-action: none; }
#gamehub-credit { position: fixed; bottom: 0; width: 100%; padding: 6px 0; text-align: center; font-size: 11px; background: #080808; }
a { color: #ccc; }
#gamehub-touch { display: none; }
@media (pointer: coarse) {
  #gamehub-toolbar { font-size: 10px; }
  #gamehub-touch { position: fixed; bottom: 30px; left: 12px; right: 12px; display: flex; justify-content: space-between; align-items: end; pointer-events: none; }
  #gamehub-pad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(2, 44px); gap: 4px; pointer-events: auto; }
  #gamehub-pad button { font-size: 20px; background: #181818dd; }
  [data-dir=up] { grid-column: 2; }
  [data-dir=left] { grid-column: 1; grid-row: 2; }
  [data-dir=down] { grid-column: 2; grid-row: 2; }
  [data-dir=right] { grid-column: 3; grid-row: 2; }
  #gamehub-touch span { max-width: 140px; padding: 5px; background: #080808bb; }
}
