/* Fibonacci-spaced responsive grid — less, but better */
:root {
    /* Fibonacci spacing system */
    --space-fibonacci-1: 5px;
    --space-fibonacci-2: 8px;
    --space-fibonacci-3: 13px;
    --space-fibonacci-4: 21px;
    --space-fibonacci-5: 34px;
    --space-fibonacci-6: 55px;

    /* Colors */
    --bg: #0a0a0f;
    --surface: #141418;
    --text: #ececf1;
    --muted: #6b6b7b;
    --accent: #ff3b30;
    --accent-glow: rgba(255, 59, 48, .4);
    --success: #30d158;
    --failure: #ff453a;
    --input: #a78bfa;

    /* Transitions */
    --transition-fast: 150ms cubic-bezier(.4,0,.2,1);
    --transition-med: 400ms cubic-bezier(.25,.1,.25,1);
    --transition-sweep: 1800ms cubic-bezier(.22,1,.36,1);
    --transition-breathe: 300ms cubic-bezier(.25,.1,.25,1);
}

*,
*::before,
*::after {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
}

html, body {
   height: 100%;
   overflow: hidden;
}

body {
   background: var(--bg);
   color: var(--text);
   font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
   -webkit-font-smoothing: antialiased;
   min-block-size: 100vh;
}

/* — App container — */
.app {
   display: grid;
   grid-template-columns: 1fr;
   grid-template-rows:
      var(--space-fibonacci-5)
      auto
       1fr
      var(--space-fibonacci-3)
      auto
      var(--space-fibonacci-3);
   width: 100vw;
   height: 100vh;
   position: relative;
   overflow: hidden;
}

/* — Header — */
.header {
   text-align: center;
   padding-top: var(--space-fibonacci-3);
   z-index: 2;
   grid-row: 2;
}

.title {
   font-size: clamp(2rem, 7vw, 4.5rem);
   font-weight: 900;
   letter-spacing: .08em;
   text-transform: uppercase;
   transition: color var(--transition-sweep), text-shadow var(--transition-sweep);
   will-change: color, text-shadow;
   line-height: 1.1;
}

.subtitle {
   margin-top: var(--space-fibonacci-2);
   font-size: clamp(.7rem, 1.8vw, .9rem);
   color: var(--muted);
   transition: opacity var(--transition-fast);
   letter-spacing: .04em;
}

/* — Audio-reactive grid — */
.grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   grid-template-rows: repeat(5, 1fr);
   gap: var(--space-fibonacci-3);
   padding: var(--space-fibonacci-3);
   max-width: calc(var(--space-fibonacci-5) * 15);
   max-height: calc(var(--space-fibonacci-5) * 12);
   margin: 0 auto;
   position: relative;
   z-index: 0;
   align-content: center;
   justify-content: center;
}

.grid > div {
   background: rgba(255, 255, 255, .02);
   border: 1px solid rgba(255, 255, 255, .03);
   border-radius: var(--space-fibonacci-1);
   transition:
      background var(--transition-med),
      border-color var(--transition-med),
      transform var(--transition-med),
      box-shadow var(--transition-med);
   will-change: transform, background;
}

/* Grid cell reactivity during sweep */
body.sweeping .grid > div {
   animation: cell-pulse 1.8s ease-in-out;
}

body.sweeping .grid > div:nth-child(odd) {
   animation-delay: 0.06s;
}

body.sweeping .grid > div:nth-child(even) {
   animation-delay: 0.12s;
}

/* Grid glow on success */
body.success .grid > div {
   background: rgba(48, 209, 88, .08);
   border-color: rgba(48, 209, 88, .15);
   box-shadow: 0 0 var(--space-fibonacci-3) rgba(48, 209, 88, .2);
}

/* Grid shake on failure */
body.failure .grid > div {
   background: rgba(255, 69, 58, .06);
   border-color: rgba(255, 69, 58, .15);
   animation: cell-shake 0.3s ease-out;
}

/* Input state: purple glow on cells */
body.input .grid > div {
   border-color: rgba(167, 139, 250, .15);
}

@keyframes cell-pulse {
   0%, 100% { transform: scale(1); background: rgba(255, 255, 255, .02); }
   20% { transform: scale(1.06); background: rgba(255, 59, 48, .12); box-shadow: 0 0 var(--space-fibonacci-5) var(--accent-glow); }
   50% { transform: scale(1.1); background: rgba(255, 59, 48, .18); }
   80% { transform: scale(1.02); background: rgba(255, 59, 48, .06); }
}

@keyframes cell-shake {
   0%, 100% { transform: translateX(0); }
   20% { transform: translateX(-3px); }
   40% { transform: translateX(3px); }
   60% { transform: translateX(-2px); }
   80% { transform: translateX(1px); }
}

/* — Controls — */
.controls {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: var(--space-fibonacci-3);
   z-index: 2;
   grid-row: 4;
}

/* CTA Button — uses --space-fibonacci-3 padding to prevent layout shift, --space-fibonacci-5 horizontal spread */
.cta {
   padding: var(--space-fibonacci-3) var(--space-fibonacci-5);
   min-height: calc(var(--space-fibonacci-5) * 1.2);
   font-size: clamp(.85rem, 2.2vw, 1.1rem);
   font-weight: 700;
   letter-spacing: .12em;
   text-transform: uppercase;
   color: #fff;
   background: var(--accent);
   border: none;
   border-radius: var(--space-fibonacci-2);
   cursor: pointer;
   outline-offset: 3px;
   transition: transform var(--transition-fast), box-shadow var(--transition-fast), background var(--transition-fast);
   box-shadow: 0 0 0 0 var(--accent-glow);
   will-change: transform;
   position: relative;
}

.cta::after {
   content: "";
   position: absolute;
   inset: 0;
   border-radius: inherit;
   background: transparent;
   transition: background var(--transition-fast);
}

.cta:hover,
.cta:focus-visible {
   transform: scale(1.06);
   box-shadow: 0 0 40px 8px var(--accent-glow);
}

.cta:active {
   transform: scale(.95);
}

.cta:disabled {
   cursor: default;
   opacity: .35;
   transform: none;
   box-shadow: none;
   filter: saturate(.2);
}

/* Reset button — uses fibonacci-3 for compact ratio */
.reset {
   padding: var(--space-fibonacci-2) var(--space-fibonacci-3);
   min-height: calc(var(--space-fibonacci-3) * 2);
   font-size: clamp(.7rem, 1.6vw, .85rem);
   font-weight: 600;
   letter-spacing: .1em;
   text-transform: uppercase;
   color: var(--muted);
   background: transparent;
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: var(--space-fibonacci-1);
   cursor: pointer;
   transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.reset:hover,
.reset:focus-visible {
   color: var(--text);
   border-color: rgba(255, 255, 255, .25);
   transform: scale(1.03);
}

/* — State panel — */
.state-panel {
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 2;
   grid-row: 5;
}

.state-label {
   font-size: clamp(.6rem, 1.4vw, .8rem);
   font-weight: 700;
   letter-spacing: .18em;
   text-transform: uppercase;
   color: var(--muted);
   margin-bottom: var(--space-fibonacci-2);
   transition: color var(--transition-fast);
}

.state-label.idle     { color: var(--muted); }
.state-label.input    { color: var(--input); }
.state-label.sweep    { color: var(--accent); animation: text-flash 1.8s ease-in-out; }
.state-label.success  { color: var(--success); }
.state-label.failure  { color: var(--failure); }

@keyframes text-flash {
   0%, 100% { opacity: 1; }
   50% { opacity: .5; }
}

/* — Phase / progress bar — */
.phase-bar {
   width: clamp(120px, 30vw, 280px);
   height: 3px;
   background: rgba(255, 255, 255, .05);
   border-radius: 1px;
   overflow: hidden;
   position: relative;
}

.phase-bar::after {
   content: "";
   position: absolute;
   inset: 0;
   width: 0;
   height: 100%;
   background: var(--accent);
   border-radius: 1px;
   transition: width var(--transition-sweep);
   will-change: width;
}

.phase-bar.active::after {
   width: 100%;
}

body.success .phase-bar::after {
   background: var(--success);
}

body.failure .phase-bar::after {
   background: var(--failure);
}

/* — Breathing glow on title during sweep — */
body.sweeping .title {
   color: var(--accent);
   text-shadow: 0 0 48px var(--accent-glow), 0 0 80px rgba(255, 59, 48, .15);
   animation: breathe 1.8s ease-in-out infinite;
}

body.success .title {
   color: var(--success);
   text-shadow: 0 0 32px rgba(48, 209, 88, .3);
}

body.failure .title {
   color: var(--failure);
   text-shadow: 0 0 32px rgba(255, 69, 58, .3);
}

body.input .title {
   color: var(--input);
   text-shadow: 0 0 24px rgba(167, 139, 250, .3);
}

@keyframes breathe {
   0%, 100% { text-shadow: 0 0 20px var(--accent-glow); }
   30% { text-shadow: 0 0 55px var(--accent-glow), 0 0 110px rgba(255, 59, 48, .18); }
   60% { text-shadow: 0 0 70px var(--accent-glow), 0 0 130px rgba(255, 59, 48, .1); }
}

/* — Mute toggle — */
.mute-toggle {
   position: fixed;
   top: var(--space-fibonacci-3);
   right: var(--space-fibonacci-3);
   z-index: 10;
   width: 40px;
   height: 40px;
   display: grid;
   place-items: center;
   background: var(--surface);
   border: 1px solid rgba(255, 255, 255, .08);
   border-radius: 50%;
   cursor: pointer;
   color: var(--muted);
   font-size: 1.1rem;
   transition: color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
}

.mute-toggle:hover,
.mute-toggle:focus-visible {
   color: var(--text);
   border-color: rgba(255, 255, 255, .25);
   transform: scale(1.08);
}

/* — Wave rings — */
.wave-ring {
   position: fixed;
   top: 50%;
   left: 50%;
   width: var(--space-fibonacci-6);
   height: var(--space-fibonacci-6);
   border-radius: 50%;
   border: 1.5px solid var(--accent);
   opacity: 0;
   transform: translate(-50%, -50%) scale(.3);
   pointer-events: none;
   z-index: 1;
   will-change: opacity, transform;
}

body.sweeping .wave-ring {
   animation: ring-expand 1.8s ease-out forwards;
}

body.sweeping #ring2 {
   animation-delay: .25s;
}

body.sweeping #ring3 {
   animation-delay: .5s;
}

@keyframes ring-expand {
   0% { opacity: .6; transform: translate(-50%, -50%) scale(.3); }
   50% { opacity: .2; }
   100% { opacity: 0; transform: translate(-50%, -50%) scale(10); }
}

/* — Footer — */
.footer {
   text-align: center;
   z-index: 2;
   grid-row: 6;
}

.footer-text {
   font-size: .65rem;
   color: var(--muted);
   opacity: .4;
   letter-spacing: .1em;
   text-transform: uppercase;
}

/* — Idle pulse on grid — */
body:not(.sweeping):not(.success):not(.failure):not(.input) .grid > div {
   animation: idle-breathe 4s ease-in-out infinite;
}

body:not(.sweeping):not(.success):not(.failure):not(.input) .grid > div:nth-child(3n) {
   animation-delay: .7s;
}

body:not(.sweeping):not(.success):not(.failure):not(.input) .grid > div:nth-child(3n+1) {
   animation-delay: 1.4s;
}

@keyframes idle-breathe {
   0%, 100% { background: rgba(255, 255, 255, .02); }
   50% { background: rgba(255, 255, 255, .045); }
}

/* — Responsive: small screens — */
@media (max-width: 600px) {
   :root {
      --space-fibonacci-3: 10px;
      --space-fibonacci-5: 28px;
      --space-fibonacci-6: 44px;
   }

   .grid {
      gap: var(--space-fibonacci-1);
      padding: var(--space-fibonacci-2);
      max-width: none;
      max-height: none;
   }

   .cta {
      padding: var(--space-fibonacci-2) var(--space-fibonacci-3);
   }

   .wave-ring {
      width: 55px;
      height: 55px;
   }

   .header {
      padding-top: var(--space-fibonacci-2);
   }

   .state-label {
      font-size: .6rem;
   }

   .phase-bar {
      width: clamp(100px, 50vw, 200px);
   }
}

/* — Responsive: large screens — */
@media (min-width: 1024px) {
   :root {
      --space-fibonacci-3: 18px;
      --space-fibonacci-5: 48px;
      --space-fibonacci-6: 78px;
   }

   .grid {
      gap: var(--space-fibonacci-4);
   }
}

/* — Prefers reduced motion — */
@media (prefers-reduced-motion: reduce) {
   *, *::before, *::after {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
}