/* ═══════════════════════════════════════════════════════════════
   css/brand-slickcity.css — Slick City brand theme.
   Bold yellow with dark background, diagonal hazard-stripe accents.
   Graffiti-style header font to match Slick City menu branding.
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Permanent+Marker&display=swap');

body.brand-slickcity {
  --brand-primary:       #FFC800;
  --brand-bg:            #0A0A0A;
  --brand-header-accent: #FFC800;
  --brand-surface:       rgba(255, 200, 0, 0.06);
  --brand-border:        rgba(255, 200, 0, 0.12);
  --font-board:          'Permanent Marker', Impact, Arial, sans-serif;
}

/* ── Background pattern (scattered dots — matches gift-card branding) ── */

body.brand-slickcity:not(.settings-page) .board-body {
  background-color: #0A0A0A;
  background-image:
    radial-gradient(circle, rgba(255, 200, 0, 0.18) 1.3px, transparent 1.3px),
    radial-gradient(circle, rgba(255, 200, 0, 0.12) 1px,   transparent 1px),
    radial-gradient(circle, rgba(255, 200, 0, 0.07) 2px,   transparent 2px);
  background-size: 32px 28px, 52px 44px, 76px 64px;
  background-position: 0 0, 17px 23px, 41px 11px;
}

/* ── Per-row diagonal hazard stripes (TV display only) ─────── */

body.brand-slickcity:not(.settings-page) .sessions-list {
  gap: clamp(4px, 0.6vh, 8px);
  padding: clamp(4px, 0.6vh, 8px);
}

body.brand-slickcity:not(.settings-page) .session-bar {
  position: relative;
  padding: 0 8vw;
  border-radius: 6px;
}

body.brand-slickcity:not(.settings-page) .session-bar::before,
body.brand-slickcity:not(.settings-page) .session-bar::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5%;
  pointer-events: none;
}

body.brand-slickcity:not(.settings-page) .session-bar::before {
  left: 0;
  background: repeating-linear-gradient(
    -45deg,
    rgba(255, 200, 0, 0.25) 0px,
    rgba(255, 200, 0, 0.25) 6px,
    rgba(0, 0, 0, 0.20) 6px,
    rgba(0, 0, 0, 0.20) 12px
  );
}

body.brand-slickcity:not(.settings-page) .session-bar::after {
  right: 0;
  background: repeating-linear-gradient(
    45deg,
    rgba(255, 200, 0, 0.25) 0px,
    rgba(255, 200, 0, 0.25) 6px,
    rgba(0, 0, 0, 0.20) 6px,
    rgba(0, 0, 0, 0.20) 12px
  );
}

body.brand-slickcity:not(.settings-page) .board-header {
  position: relative;
  padding-left: 8vw;
  padding-right: 8vw;
  border-bottom-width: 4px;
}

body.brand-slickcity:not(.settings-page) .board-header::before,
body.brand-slickcity:not(.settings-page) .board-header::after {
  content: '';
  position: absolute;
  top: 0;
  bottom: 0;
  width: 5%;
  pointer-events: none;
}

body.brand-slickcity:not(.settings-page) .board-header::before {
  left: 0;
  background: repeating-linear-gradient(
    -45deg,
    #FFC800 0px, #FFC800 6px,
    #0A0A0A 6px, #0A0A0A 18px
  );
}

body.brand-slickcity:not(.settings-page) .board-header::after {
  right: 0;
  background: repeating-linear-gradient(
    45deg,
    #FFC800 0px, #FFC800 6px,
    #0A0A0A 6px, #0A0A0A 18px
  );
}

/* ── Typography & colour ───────────────────────────────────── */

body.brand-slickcity .header-clock,
body.brand-slickcity .header-label {
  color: #FFC800;
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.6);
}

body.brand-slickcity .session-bar-name,
body.brand-slickcity .session-bar-timer {
  text-shadow: 2px 2px 0 rgba(0, 0, 0, 0.35);
}

body.brand-slickcity .session-bar-timer {
  font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', Arial, sans-serif;
}

/* ── Settings page ─────────────────────────────────────────── */

body.brand-slickcity .btn-primary {
  background: #FFC800;
  color: #0A0A0A;
}

body.brand-slickcity .settings-header {
  border-bottom-color: rgba(255, 200, 0, 0.3);
}

body.brand-slickcity .settings-card--brand {
  border-color: rgba(255, 200, 0, 0.25);
  background: linear-gradient(
    168deg,
    rgba(255, 200, 0, 0.06) 0%,
    var(--brand-surface) 100%
  );
}