/* ArcadeOwl — Adventure games shared shell styles (self-contained). */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
  background: #0a0f14;
  color: #e6edf3;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-user-select: none; user-select: none;
  overflow: hidden;
}
.ao-root { display: flex; flex-direction: column; gap: 8px; height: 100%; padding: 10px; max-width: 720px; margin: 0 auto; }
.ao-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 13px; }
.ao-title { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ao-stats { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.ao-stats b { color: #fff; }
.ao-best { color: #6ee7b7 !important; }
.ao-btn { background: rgba(255,255,255,0.1); border: 0; color: #fff; padding: 5px 10px; border-radius: 7px; font: inherit; font-weight: 600; cursor: pointer; }
.ao-btn:hover { background: rgba(255,255,255,0.2); }
.ao-stage { position: relative; width: 100%; display: flex; justify-content: center; }
.ao-canvas { display: block; width: 100%; max-width: 640px; border-radius: 12px; touch-action: none; background: #0b1117; }
.ao-status { position: absolute; inset: 0; display: none; place-items: center; pointer-events: none; }
.ao-status::before { content: attr(data-x); }
.ao-status { color: #fff; }
.ao-status:not(:empty) { display: grid; }
.ao-status:not(:empty) { }
.ao-hint { font-size: 11px; color: rgba(255,255,255,0.45); text-align: center; min-height: 14px; }
.ao-pad { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ao-dpad { display: grid; grid-template-columns: repeat(3, 44px); grid-template-rows: repeat(3, 44px); gap: 4px; }
.ao-key { background: rgba(255,255,255,0.14); border: 0; color: #fff; border-radius: 8px; font: inherit; font-size: 18px; cursor: pointer; height: 44px; min-width: 44px; touch-action: none; }
.ao-key:active { background: rgba(255,255,255,0.3); }
.ao-act { border-radius: 999px; width: 56px; height: 56px; }
.ao-wide { width: 180px; height: 48px; font-size: 15px; font-weight: 600; }
.ao-lb { font-size: 12px; color: rgba(255,255,255,0.8); }
.ao-lb-h { font-weight: 600; margin-bottom: 4px; }
.ao-lb ol { list-style: none; margin: 0; padding: 0; }
.ao-lb li { display: flex; justify-content: space-between; padding: 1px 0; }
.ao-lb b { color: #6ee7b7; }
/* Show pad only where touch is the primary input; keyboard users can ignore it. */
@media (min-width: 700px) and (pointer: fine) { .ao-pad { display: none; } }
.ao-status { font-weight: 600; }
.ao-status > span, .ao-status { }