@import url("https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600&family=Geist+Mono:wght@500;600&display=swap");

:root { --font: "Geist", system-ui, -apple-system, sans-serif; --mono: "Geist Mono", ui-monospace, monospace; }

*,*::before,*::after { box-sizing: border-box; }
html, body {
  -webkit-tap-highlight-color: transparent; height: 100%; margin: 0; overflow: hidden; overscroll-behavior: none; }
body { font-family: var(--font); background: #0b0a0d; touch-action: none; }

canvas {
  display: block; position: fixed; inset: 0; cursor: pointer;
  -webkit-tap-highlight-color: transparent; -webkit-touch-callout: none;
  -webkit-user-select: none; user-select: none;
}

.controls {
  position: fixed; top: max(14px, env(safe-area-inset-top)); left: 50%; transform: translateX(-50%);
  display: flex; gap: 7px; z-index: 10; flex-wrap: wrap; justify-content: center; max-width: 94vw; align-items: center;
}
.ctrl-btn {
  appearance: none; font-family: var(--font); font-size: 0.74rem; font-weight: 600;
  letter-spacing: 0.02em; cursor: pointer; color: rgba(255, 240, 220, 0.92);
  padding: 8px 15px; border-radius: 11px;
  background: rgba(46, 34, 26, 0.6); border: 1px solid rgba(255, 202, 130, 0.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
  transition: background .15s, transform .1s, color .15s;
}
.ctrl-btn:hover { background: rgba(72, 52, 36, 0.72); }
.ctrl-btn:active { transform: scale(0.96); }
.ctrl-btn[aria-pressed="true"] { background: rgba(255, 214, 150, 0.94); color: #2a1808; border-color: rgba(255, 214, 150, 0.94); }

.ctrl-btn--play {
  min-width: 74px; text-align: center;
  background: rgba(255, 200, 128, 0.16); border-color: rgba(255, 208, 140, 0.5); color: #ffe6c2;
}
.ctrl-btn--play.is-playing { background: rgba(255, 210, 150, 0.94); color: #2a1808; border-color: rgba(255, 210, 150, 0.94); }

.ctrl-tempo {
  display: flex; align-items: center; gap: 2px;
  background: rgba(46, 34, 26, 0.6); border: 1px solid rgba(255, 202, 130, 0.28);
  border-radius: 11px; padding: 3px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.42);
}
.ctrl-step {
  appearance: none; border: none; background: transparent; cursor: pointer;
  color: rgba(255, 240, 220, 0.92); font-size: 1.05rem; font-weight: 600; line-height: 1;
  width: 30px; height: 28px; border-radius: 8px; transition: background .12s, transform .1s;
}
.ctrl-step:hover { background: rgba(255, 210, 150, 0.16); }
.ctrl-step:active { transform: scale(0.9); }
.ctrl-bpm {
  font-size: 0.7rem; font-weight: 500; letter-spacing: 0.04em; color: rgba(255, 232, 204, 0.82);
  min-width: 58px; text-align: center; font-family: var(--mono); text-transform: uppercase;
}
.ctrl-bpm b { color: #ffe6c2; font-size: 0.82rem; }

.ctrl-btn:focus-visible, .ctrl-step:focus-visible {
  outline: 2px solid rgba(255, 214, 150, 0.9); outline-offset: 2px;
}

.frame { position: fixed; inset: 0; pointer-events: none; z-index: 9; }
.frame__corner {
  position: absolute; font-size: clamp(0.56rem, 1.2vw, 0.7rem); font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255, 220, 186, 0.5);
  white-space: nowrap; font-family: var(--font); text-shadow: 0 1px 8px rgba(0,0,0,0.9);
}
.frame__corner--tl { top: max(18px, env(safe-area-inset-top)); left: max(18px, env(safe-area-inset-left)); }
.frame__corner--tr { top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); }
.frame__corner--bl { bottom: max(20px, env(safe-area-inset-bottom)); left: max(18px, env(safe-area-inset-left)); }
.frame__corner a { color: inherit; text-decoration: none; pointer-events: auto; border-bottom: 1px solid transparent; transition: color .14s, border-color .14s; }
.frame__corner a:hover { color: rgba(255, 244, 224, 0.95); border-bottom-color: rgba(255, 220, 186, 0.6); }

.hint {
  position: fixed; bottom: max(20px, env(safe-area-inset-bottom)); left: 50%; transform: translateX(-50%);
  margin: 0; font-size: 0.64rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255, 220, 186, 0.5); pointer-events: none; z-index: 9; white-space: nowrap;
  text-shadow: 0 1px 8px rgba(0,0,0,0.9); transition: opacity .6s;
}
.hint.is-hidden { opacity: 0; }

@media (max-width: 640px) {
  .hint { font-size: 0.52rem; white-space: normal; text-align: center; width: 78%; letter-spacing: 0.08em; bottom: max(14px, env(safe-area-inset-bottom)); }
  .ctrl-btn { padding: 7px 12px; font-size: 0.68rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ctrl-btn, .ctrl-step { transition: none; }
}