*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { width: 100%; height: 100%; margin: 0; overflow: hidden; }
body { position: fixed; inset: 0; }
body {
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
}
img { display: block; max-width: none; -webkit-user-drag: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; margin: 0; cursor: pointer; touch-action: manipulation; }
button:focus-visible, input:focus-visible { outline: 2px solid #7c84ff; outline-offset: 2px; }
svg { display: block; }

/* A fixed-size artboard, scaled to fit the frame (see Onairi.stage). */
.ox-art { position: absolute; left: 50%; top: 50%; transform-origin: center; }

.ox-sound {
  position: absolute; z-index: 60; top: 12px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  color: var(--ox-chrome, #fff);
  background: var(--ox-chrome-bg, rgba(20, 20, 30, .28));
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  opacity: .8; transition: opacity .2s, transform .2s;
}
.ox-sound:hover { opacity: 1; transform: scale(1.06); }
.ox-sound svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ox-sound .ox-wave { transition: opacity .2s; }
.ox-sound[aria-pressed="true"] .ox-wave { opacity: 0; }
.ox-sound .ox-mute { opacity: 0; transition: opacity .2s; }
.ox-sound[aria-pressed="true"] .ox-mute { opacity: 1; }

.ox-brand {
  position: absolute; z-index: 60; left: 14px; bottom: 11px;
  font: 700 10px/1 system-ui, sans-serif; letter-spacing: .22em; text-transform: uppercase;
  color: var(--ox-chrome, #fff); opacity: .5; pointer-events: none;
}

.ox-hint {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px; border-radius: 999px;
  font-size: 13px; font-weight: 600; letter-spacing: -.01em; white-space: nowrap;
  color: #fff; background: rgba(18, 18, 28, .62);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  pointer-events: none;
  animation: ox-hint-float 2.4s ease-in-out infinite;
  transition: opacity .45s, transform .45s;
}
.ox-hint.is-hidden { opacity: 0; transform: translateY(8px); animation: none; }
@keyframes ox-hint-float { 50% { transform: translateY(-4px); } }

@media (prefers-reduced-motion: reduce) {
  .ox-hint { animation: none; }
}