/* ═══════════════════════════════════════════════════════════════════
   The Stacey West Podcast Quiz — brand banner + palette (red / white / navy)
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* From banner: primary red bars + logo outline */
  --sw-red:        #d91e2b;
  --sw-red-dark:   #b01522;
  --sw-red-bright: #ff2839;
  /* Navy ring on logo + thin stripes */
  --sw-navy:       #1a2744;
  --sw-navy-deep:  #0f1628;
  --sw-white:      #ffffff;
  --sw-off:        #f4f4f6;
  /* App chrome (dark, readable for quiz) */
  --sw-nav-bg:     #141920;
  --sw-nav-border: #2a3142;
  --sw-page-bg:    #161a20;
  --sw-card:       #22272f;
  --sw-card-border:#2f3542;
  --sw-text:       #eceff4;
  --sw-text-muted: #8b929e;
  --sw-input-bg:   #1a1f28;
}

/* ── Responsive panoramic banner (centre = logo stays in frame on mobile) ── */
.sw-banner-wrap {
  position: relative;
  width: 100%;
  background: var(--sw-navy-deep);
  line-height: 0;
  overflow: hidden;
  border-bottom: 3px solid var(--sw-navy);
}

.sw-banner-img {
  width: 100%;
  height: clamp(72px, 18vw, 180px);
  object-fit: cover;
  /* Focus on centre shield; tweak % for your crop */
  object-position: 50% 42%;
  display: block;
}

@media (max-width: 600px) {
  .sw-banner-img {
    height: clamp(68px, 24vw, 120px);
    object-position: 50% 40%;
  }
}

@media (max-width: 380px) {
  .sw-banner-img {
    height: 64px;
    object-position: 50% 38%;
  }
}

/* ── Logo mode: centred square/portrait logo instead of panoramic banner ── */
.sw-logo-img {
  display: block;
  margin: 0 auto;
  height: clamp(64px, 16vw, 140px);
  width: auto;
  object-fit: contain;
  padding: 10px 0;
}

/* ── Player: bar under banner (team + score) ── */
.sw-toolbar {
  background: var(--sw-nav-bg);
  border-bottom: 1px solid var(--sw-nav-border);
}

.sw-toolbar-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.sw-toolbar-left {
  min-width: 0;
  flex: 1;
}

.sw-toolbar-label {
  display: block;
  font-family: 'Oswald', sans-serif;
  font-size: clamp(15px, 4vw, 18px);
  font-weight: 700;
  color: var(--sw-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-toolbar-sub {
  display: block;
  font-size: 11px;
  color: var(--sw-text-muted);
  letter-spacing: 0.5px;
  text-transform: uppercase;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.sw-toolbar-score {
  text-align: right;
  flex-shrink: 0;
}

.sw-toolbar-score-num {
  font-family: 'Oswald', sans-serif;
  font-size: clamp(28px, 8vw, 40px);
  font-weight: 700;
  color: var(--sw-white);
  line-height: 1;
}

.sw-toolbar-score-lbl {
  font-size: 10px;
  color: var(--sw-text-muted);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Login: light content area like Rough Kettle ── */
body.sw-theme-login {
  background: var(--sw-off);
  color: #1a1a1a;
}

body.sw-theme-login .sw-nav {
  background: var(--sw-nav-bg);
  border-bottom: 1px solid var(--sw-nav-border);
}

body.sw-theme-login .sw-nav-title {
  color: var(--sw-text-muted);
}

body.sw-theme-login .card {
  background: var(--sw-white);
  border: 1px solid #ddd;
  box-shadow: 0 4px 24px rgba(22, 26, 32, 0.08);
}

body.sw-theme-login .card-title { color: var(--sw-red); }
body.sw-theme-login .card-sub   { color: #666; }

body.sw-theme-login .role-card {
  background: #f8f8fa;
  border-color: #ddd;
}

body.sw-theme-login .role-card:hover,
body.sw-theme-login .role-card.active {
  border-color: var(--sw-red);
  background: #fff5f5;
  box-shadow: 0 0 0 2px rgba(217, 30, 43, 0.15);
}

body.sw-theme-login .role-name { color: #222; }
body.sw-theme-login .role-hint { color: #777; }

body.sw-theme-login .input {
  background: var(--sw-white);
  border-color: #ccc;
  color: #222;
}

body.sw-theme-login .input:focus {
  border-color: var(--sw-red);
  box-shadow: 0 0 0 3px rgba(217, 30, 43, 0.12);
}

body.sw-theme-login .input-label { color: #444; }
body.sw-theme-login .input::placeholder { color: #999; }

body.sw-theme-login .btn-primary {
  background: linear-gradient(180deg, var(--sw-red-bright), var(--sw-red));
  border-radius: 2px;
  box-shadow: 0 4px 14px rgba(217, 30, 43, 0.35);
}

body.sw-theme-login .stripe-bar {
  background: repeating-linear-gradient(90deg, var(--sw-red) 0 16px, var(--sw-navy) 16px 32px);
}