/* ============================================================================
 * Brand layer (js/brand/brand-live.js): the canvas over the visuals and the
 * Brand tab (style gallery, fonts, placement, lyrics warning).
 * ========================================================================== */
#brandCanvas {
  position: fixed; inset: 0; width: 100%; height: 100%;
  z-index: 6; pointer-events: none;
}

.brand-picker {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2, 8px);
  margin: var(--space-2, 8px) 0;
}
.brand-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.brand-fonts .filter-btn { font-size: 15px; letter-spacing: 0; text-transform: none; }
.brand-places { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#brandText { margin-bottom: var(--space-2, 8px); }
#brandShowNow { margin-top: var(--space-2, 8px); }

.brand-warn {
  margin: var(--space-2, 8px) 0; padding: 10px 12px; border-radius: var(--radius-3, 10px);
  font-size: 12.5px; line-height: 1.45; color: var(--ink, #fff);
  background: rgba(255, 170, 40, 0.14); border: 1px solid rgba(255, 170, 40, 0.45);
}
.brand-warn.ok { background: var(--accent-soft, rgba(255,60,120,.18)); border-color: var(--accent-glow, rgba(255,60,120,.45)); }
.brand-warn b { font-weight: 700; }

/* Show presets gallery (Brand tab). */
.show-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2, 8px); margin: var(--space-2, 8px) 0; }
.show-tile {
  position: relative; display: block; padding: 0; overflow: hidden; aspect-ratio: 16 / 9; min-height: 44px;
  background: #0b0716; border: 1px solid var(--hairline, rgba(255,255,255,.1)); border-radius: var(--radius-3, 10px);
  cursor: pointer; color: #fff; font: inherit; text-align: left;
  transition: border-color .15s, box-shadow .15s, transform .15s;
}
.show-tile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.show-tile-name {
  position: absolute; left: 0; right: 0; bottom: 0; padding: 18px 8px 5px; font-size: 12px; font-weight: 700;
  background: linear-gradient(transparent, rgba(0,0,0,.85));
}
.show-tile-blurb { display: none; }
.show-tile.on { border-color: var(--accent, #ff3c78); box-shadow: inset 0 0 0 1px var(--accent, #ff3c78), 0 0 18px var(--accent-glow, rgba(255,60,120,.45)); }
.show-tile.on .show-tile-name::after { content: ' · LIVE'; color: var(--accent, #ff3c78); }
.show-tile:active { transform: scale(.98); }