/* Look Here — shared brand.
 *
 * Built on the Stinger Soundboard's "ghost" treatment, which Christopher
 * singled out: a panel with NO fill, a coloured border, and the same colour
 * glowing both outside and inside the edge. Every tile carries its own colour
 * in a --c variable, so one rule lights the whole interface and adding a
 * colour is never a new rule.
 *
 *     box-shadow: 0 0 18px -2px var(--c), inset 0 0 16px -7px var(--c);
 *
 * The mark is hand-drawn line art on a warm near-black, and the product lives
 * in music venues, so the palette is stage lighting: hot pink, cyan, amber,
 * violet. Nothing here should read as a SaaS dashboard.
 */
:root {
  color-scheme: dark;

  --bg:        #08070c;
  --bg-2:      #0d0c13;
  --panel:     #14121c;
  --panel-2:   #1a1826;
  --line:      #2a2740;
  --fg:        #f4f1ea;
  --dim:       #d9d5e6;
  --muted:     #b9b4cb;

  /* Stage lighting. Used as --c on any tile. */
  --c-pink:    #ff2d78;
  --c-cyan:    #22e0e0;
  --c-amber:   #ffb020;
  --c-violet:  #a855f7;
  --c-green:   #35d07d;
  --c-red:     #ff4d6d;

  --hot:       var(--c-pink);
  --gold:      var(--c-amber);
  --good:      var(--c-green);
  --warn:      var(--c-amber);
  --bad:       var(--c-red);

  --display: 'Archivo Black', 'Arial Black', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;

  --r-sm: 8px; --r-md: 14px; --r-lg: 22px;
}

* { box-sizing: border-box; }

/* THE `hidden` ATTRIBUTE MUST ACTUALLY HIDE THINGS.
   The UA stylesheet gives [hidden] display:none, but ANY author rule that sets
   display beats it — and almost everything here sets display. That bug has now
   shipped three separate times in this codebase: a "0 My strips" button on a
   first visit, an age-confirmation row that was permanently visible instead of
   appearing only after opting in, and a fallback sign-in button sitting next to
   Google's real one. Each time it was fixed for one selector and came back
   somewhere else, so it is fixed here, once, for everything.
   `!important` is right for exactly this: "hidden" is not a suggestion. */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, .display { font-family: var(--display); letter-spacing: -.015em; line-height: 1.04; }
a { color: inherit; }

/* ── THE GLOW ───────────────────────────────────────────────────────────────
   One rule, coloured per element by --c. Outer glow reads as light spilling
   off the edge; the inset is what makes it look lit from within rather than
   merely outlined, and it is the half people forget. */
.glow {
  border: 1px solid color-mix(in srgb, var(--c, var(--hot)) 55%, transparent);
  box-shadow: 0 0 18px -2px var(--c, var(--hot)),
              inset 0 0 16px -7px var(--c, var(--hot));
}
.glow-soft {
  border: 1px solid color-mix(in srgb, var(--c, var(--hot)) 32%, transparent);
  box-shadow: 0 0 26px -12px var(--c, var(--hot)),
              inset 0 0 20px -14px var(--c, var(--hot));
}
/* Depth + glow, for anything that should feel like an object on a surface. */
.glow-lift {
  box-shadow: 0 6px 22px rgba(0,0,0,.55),
              0 0 18px -3px var(--c, var(--hot)),
              inset 0 0 16px -8px var(--c, var(--hot));
}
.glow-text { text-shadow: 0 0 22px color-mix(in srgb, var(--c, var(--hot)) 70%, transparent); }
.glow-hot  { box-shadow: 0 0 26px -4px var(--hot), 0 6px 18px rgba(0,0,0,.5); }

/* ── ambient lighting rig ───────────────────────────────────────────────────
   Three slow blobs behind everything. Fixed and non-interactive; this is what
   stops a dark page reading as flat grey. */
.glowfield {
  position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
}
.glowfield .blob {
  position: absolute; border-radius: 50%;
  filter: blur(90px); opacity: .34;
  will-change: transform;
}
.blob.b1 { width: 46vmax; height: 46vmax; background: var(--c-pink);   top: -14vmax; left: -10vmax; animation: drift1 26s ease-in-out infinite alternate; }
.blob.b2 { width: 40vmax; height: 40vmax; background: var(--c-cyan);   top: 22vmax;  right: -14vmax; animation: drift2 31s ease-in-out infinite alternate; }
.blob.b3 { width: 38vmax; height: 38vmax; background: var(--c-violet); bottom: -16vmax; left: 26vmax; animation: drift3 37s ease-in-out infinite alternate; }
@keyframes drift1 { to { transform: translate3d(8vmax, 6vmax, 0) scale(1.14); } }
@keyframes drift2 { to { transform: translate3d(-9vmax, 8vmax, 0) scale(1.1); } }
@keyframes drift3 { to { transform: translate3d(6vmax, -7vmax, 0) scale(1.18); } }
body > *:not(.glowfield) { position: relative; z-index: 1; }

/* ── buttons ────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--body); font-weight: 700; font-size: 1rem;
  padding: 16px 26px; border-radius: 999px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none;
  transition: transform .12s ease, box-shadow .18s ease, background .18s ease;
  min-height: 56px;          /* thumb target — used drunk, in the dark */
}
.btn:active { transform: scale(.98); }
.btn-primary {
  background: linear-gradient(135deg, var(--c-pink), #ff5c3d);
  color: #fff;
}
.btn-primary:hover { box-shadow: 0 0 34px -4px var(--hot), 0 8px 22px rgba(0,0,0,.5); }
.btn-primary:disabled {
  background: var(--panel-2); color: var(--muted);
  box-shadow: none; cursor: not-allowed; border-color: var(--line);
}
.btn-ghost {
  background: rgba(255,255,255,.02); color: var(--fg);
  border-color: var(--line);
}
.btn-ghost:hover { border-color: color-mix(in srgb, var(--c-cyan) 60%, transparent); box-shadow: 0 0 20px -6px var(--c-cyan); }
.btn-light { background: var(--fg); color: #16141d; }

:focus-visible { outline: 2px solid var(--c-cyan); outline-offset: 3px; }

.sr { position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden;
      clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap; }

/* The mark is black line art on white. Inverting gives white lines on a black
   field, and on a near-black page that field disappears — so the linework
   reads with no second asset to keep in step. The supplied "white" PNG is a
   solid silhouette whose internal lines are also white, so it reads as a blob
   on dark and is not used. */
.mark-invert { filter: invert(1); }

@media (prefers-reduced-motion: reduce) {
  .glowfield .blob { animation: none; }
  .btn { transition: none; }
}