/* ═══════════════════════════════════════
   SHARED STYLES — Vienna Imperials
   Used by both index.html and member.html
═══════════════════════════════════════ */

/* ── Reset & base ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', sans-serif;
  background: #0C1B3A;
  color: #F4F7FF;
  overflow-x: hidden;
}

/* ── Custom scrollbar ── */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #0C1B3A; }
::-webkit-scrollbar-thumb { background: #D4961A; border-radius: 3px; }

/* ── CSS vars ── */
:root {
  --gold:    #D4961A;
  --gold-lt: #F0B830;
  --red:     #E8193C;
  --royal:   #1A3D8F;
  --navy:    #0F2150;
  --deep:    #0C1B3A;
  --mid:     #3567C0;
  --cloud:   #F4F7FF;
  --brass:   #8B7847;
  --border:  rgba(53,103,192,0.22);
  --panel:   #122060;
}

/* ── Noise texture overlay ── */
.noise::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E");
  pointer-events: none;
  opacity: 0.4;
  z-index: 1;
}

/* ── Typography ── */
.display { font-family: 'Bebas Neue', sans-serif; letter-spacing: 0.04em; line-height: 0.95; }
.heading { font-family: 'Barlow Condensed', sans-serif; font-weight: 800; letter-spacing: -0.01em; }

/* ── Tier badges ── */
/* ── Focus visible ── */
:focus-visible { outline: 2px solid var(--gold-lt); outline-offset: 2px; }

.tier-badge { display: inline-block; font-family: 'Barlow Condensed', sans-serif; font-weight: 700; font-size: 0.6rem; letter-spacing: 0.12em; text-transform: uppercase; padding: 2px 7px; border-radius: 4px; margin-left: 7px; vertical-align: middle; }
.tier-bronze  { background: rgba(205,127,50,0.15); color: #CD7F32; border: 1px solid rgba(205,127,50,0.25); }
.tier-silver  { background: rgba(192,192,192,0.1); color: #B0B8C8; border: 1px solid rgba(192,192,192,0.2); }
.tier-gold    { background: rgba(212,150,26,0.15); color: var(--gold-lt); border: 1px solid rgba(212,150,26,0.3); }
.tier-platinum { background: rgba(100,200,255,0.1); color: #67E8F9; border: 1px solid rgba(100,200,255,0.2); }