/* Base layout */
:root {
  --border-color: rgba(150,150,150,0.4);
  --background-color: rgba(150,150,150,0.1);
}


/* Tiny Mario HUD */
.tiny-horse { 
  max-width: 800px; 
  margin: 12px auto; 
  border: 1px solid var(--border-color); 
  border-radius: 8px; 
  background: var(--background-color);
  overflow: hidden;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: 14px;
}
.tiny-horse .hud-row { display: flex; align-items: center; gap: 8px; padding: 8px 12px; }
.tiny-horse .hud-instructions { border-bottom: 1px solid var(--border-color); }
.tiny-horse .hud-url { align-items: stretch; }
.tiny-horse #url-display {
  display: block;
  flex: 1 1 auto;
  white-space: pre;
  overflow-x: hidden;
}
.tiny-horse .url-zoom { display: inline-flex; gap: 6px;  }
.tiny-horse #instructions { flex: 1}
.tiny-horse #instructions::before { content: 'ℹ️'; margin-right: 8px; }
.tiny-horse .hud-emoji { width: 18px; display: inline-flex; justify-content: center; }
.tiny-horse .hud-stats { justify-content: flex-start; width: 100%; flex-wrap: nowrap; gap: 8px; }
.tiny-horse #score { flex: 1 1 0; min-width: 0; text-align: left; margin-right: 0; }
.tiny-horse #score:before { content: '📊'; margin-right: 8px; }
.tiny-horse #high { flex: 1 1 0; min-width: 0; text-align: right; margin-right: 0; }
.tiny-horse button { padding: 2px 8px; cursor: pointer; border: 1px solid var(--border-color); border-radius: 6px; background: #fafafa; white-space: nowrap; flex: 0 0 auto; }
.tiny-horse button:hover { background: #f0f0f0; }
.tiny-horse #share { margin-right: 20px; }
.tiny-horse .hud-credits {  color: #666; border-top: 1px solid var(--border-color); }
.tiny-horse .hud-credits:before { content: '𐂃';  }
.tiny-horse .controls {
  display: flex;
  margin: auto;
  flex-wrap: nowrap;
  justify-content: center;
  padding: 1em;
}
.tiny-horse .controls button {
    font-size: 2em;
    margin: 2px;
    padding: 1em;
    width: 50%;
}

.tiny-horse .touch-only { display: none; }
@media (hover: none) and (pointer: coarse) {
  .tiny-horse .controls.touch-only { display: flex; }
}