/* ============================================================
   WORLD OF WARCRAFT RPG — Campaign Website Stylesheet
   Dark tactical aesthetic inspired by the Chaingun Studios format
   ============================================================ */
.gc-header__wrapper, .gc-header { display: none !important; }

@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700;900&family=Crimson+Pro:ital,wght@0,300;0,400;0,600;1,400&family=Share+Tech+Mono&display=swap');

:root {
  --bg-deep:      #070c10;
  --bg-card:      #0d1a22;
  --bg-panel:     #101f2a;
  --bg-table-hd:  #0a1820;
  --accent-gold:  #c8a84b;
  --accent-cyan:  #4fd8e8;
  --accent-red:   #b83030;
  --accent-green: #3ab87a;
  --text-primary: #dde8ee;
  --text-muted:   #7fa0b0;
  --text-dim:     #4a6070;
  --border:       #1e3040;
  --border-glow:  #1e4a60;
  --font-display: 'Cinzel', serif;
  --font-body:    'Crimson Pro', Georgia, serif;
  --font-mono:    'Share Tech Mono', monospace;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--text-primary);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.7;
}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-deep); }
::-webkit-scrollbar-thumb { background: var(--border-glow); border-radius: 3px; }

/* ---- NAV ---- */
nav {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(7,12,16,0.95);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 2rem;
  height: 58px;
  gap: 2rem;
}

.nav-brand {
  font-family: var(--font-display);
  font-size: 1rem;
  font-weight: 700;
  color: var(--accent-cyan);
  letter-spacing: 0.12em;
  text-decoration: none;
  text-transform: uppercase;
  white-space: nowrap;
}

.nav-links {
  display: flex;
  gap: 0;
  list-style: none;
  overflow-x: auto;
  scrollbar-width: none;
}
.nav-links::-webkit-scrollbar { display: none; }

.nav-links a {
  display: block;
  padding: 0 1.1rem;
  line-height: 56px;
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text-muted);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: color 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.nav-links a:hover,
.nav-links a.active {
  color: var(--accent-cyan);
  border-bottom-color: var(--accent-cyan);
}

/* ---- PAGE HERO ---- */
.page-hero {
  position: relative;
  padding: 5rem 2rem 4rem;
  text-align: center;
  overflow: hidden;
  border-bottom: 1px solid var(--border);
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 80% 60% at 50% 0%, rgba(79,216,232,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.page-hero .eyebrow {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-cyan);
  letter-spacing: 0.3em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.page-hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 4rem);
  font-weight: 900;
  color: var(--text-primary);
  text-shadow: 0 0 40px rgba(79,216,232,0.3);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.page-hero .subtitle {
  font-size: 1.15rem;
  color: var(--text-muted);
  max-width: 700px;
  margin: 0 auto;
}

/* ---- LAYOUT ---- */
.container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.page-body {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 0;
  min-height: calc(100vh - 58px);
}

/* ---- SIDEBAR ---- */
.sidebar {
  position: sticky;
  top: 58px;
  height: calc(100vh - 58px);
  overflow-y: auto;
  border-right: 1px solid var(--border);
  padding: 2rem 0;
  background: var(--bg-panel);
  scrollbar-width: thin;
}
.sidebar-section {
  margin-bottom: 0.5rem;
}
.sidebar-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent-gold);
  letter-spacing: 0.25em;
  text-transform: uppercase;
  padding: 0.75rem 1.4rem 0.3rem;
}
.sidebar a {
  display: block;
  padding: 0.4rem 1.4rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  text-decoration: none;
  transition: color 0.15s, background 0.15s;
  border-left: 2px solid transparent;
}
.sidebar a:hover {
  color: var(--text-primary);
  background: rgba(79,216,232,0.05);
  border-left-color: var(--accent-cyan);
}
.sidebar a.active {
  color: var(--accent-cyan);
  border-left-color: var(--accent-cyan);
}

/* ---- MAIN CONTENT ---- */
.main-content {
  padding: 3rem 2.5rem;
  max-width: 860px;
}

/* ---- SECTION HEADINGS ---- */
.section-title {
  font-family: var(--font-display);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin: 2.5rem 0 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.section-title:first-child { margin-top: 0; }

.subsection-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--accent-gold);
  margin: 1.8rem 0 0.6rem;
}

/* ---- PROSE ---- */
p { margin-bottom: 1rem; color: var(--text-primary); }
p:last-child { margin-bottom: 0; }

strong { color: var(--text-primary); font-weight: 700; }

/* ---- STAT BLOCK / CARD ---- */
.card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
}
.card-title {
  font-family: var(--font-display);
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--accent-cyan);
  margin-bottom: 0.75rem;
}
.card-subtitle {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--accent-gold);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}

/* ---- TRAIT LIST ---- */
.trait-list {
  list-style: none;
  padding: 0;
  margin: 0.5rem 0;
}
.trait-list li {
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.95rem;
  color: var(--text-primary);
}
.trait-list li:last-child { border-bottom: none; }
.trait-name {
  color: var(--accent-gold);
  font-weight: 700;
  margin-right: 0.5rem;
}

/* ---- STAT GRID ---- */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.75rem;
  margin: 1rem 0;
}
.stat-box {
  background: var(--bg-panel);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.6rem 0.8rem;
  text-align: center;
}
.stat-label {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  color: var(--accent-cyan);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  display: block;
  margin-bottom: 0.2rem;
}
.stat-value {
  font-family: var(--font-display);
  font-size: 1.1rem;
  color: var(--text-primary);
  font-weight: 700;
}

/* ---- TABLES ---- */
table {
  width: 100%;
  border-collapse: collapse;
  margin: 1rem 0 1.5rem;
  font-size: 0.9rem;
}
thead {
  background: var(--bg-table-hd);
}
thead th {
  text-align: left;
  padding: 0.6rem 0.9rem;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--accent-cyan);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--border-glow);
}
tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.1s;
}
tbody tr:hover { background: rgba(79,216,232,0.03); }
tbody td {
  padding: 0.55rem 0.9rem;
  color: var(--text-primary);
  vertical-align: top;
}
tbody td:first-child { color: var(--text-muted); }

/* ---- CALLOUT BOXES ---- */
.callout {
  background: var(--bg-card);
  border-left: 3px solid var(--accent-cyan);
  padding: 1rem 1.25rem;
  margin: 1.5rem 0;
  border-radius: 0 3px 3px 0;
}
.callout.gold { border-left-color: var(--accent-gold); }
.callout.red  { border-left-color: var(--accent-red); }
.callout-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent-cyan);
  margin-bottom: 0.4rem;
}
.callout.gold .callout-label { color: var(--accent-gold); }
.callout.red  .callout-label { color: var(--accent-red); }

/* ---- RACE GRID ---- */
.race-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.5rem 0;
}

/* ---- AFFILIATION BADGE ---- */
.badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 2px;
  margin-bottom: 0.5rem;
}
.badge-alliance { background: rgba(79,216,232,0.15); color: var(--accent-cyan); border: 1px solid var(--accent-cyan); }
.badge-horde    { background: rgba(184,48,48,0.15);  color: #e07070;            border: 1px solid var(--accent-red); }
.badge-neutral  { background: rgba(200,168,75,0.15); color: var(--accent-gold); border: 1px solid var(--accent-gold); }

/* ---- FOOTER ---- */
footer {
  border-top: 1px solid var(--border);
  padding: 2rem;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  color: var(--text-dim);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 768px) {
  .page-body { grid-template-columns: 1fr; }
  .sidebar { position: static; height: auto; border-right: none; border-bottom: 1px solid var(--border); }
  .main-content { padding: 1.5rem 1rem; }
  nav { padding: 0 1rem; gap: 1rem; }
}

.page-body {
  max-width: 1200px;
  margin: 0 auto;
}

.main-content {
  max-width: 860px;
  width: 100%;
}
.hero{position:relative;min-height:100vh;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;padding:6rem 2rem 5rem;overflow:hidden;}
.hero-grid{position:absolute;inset:0;pointer-events:none;background-image:linear-gradient(rgba(79,216,232,0.025) 1px,transparent 1px),linear-gradient(90deg,rgba(79,216,232,0.025) 1px,transparent 1px);background-size:80px 80px;animation:gridDrift 60s linear infinite;}
@keyframes gridDrift{from{background-position:0 0}to{background-position:80px 80px}}
.hero-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 50% at 50% 0%,rgba(79,216,232,0.08) 0%,transparent 60%);}
.hero-eyebrow{font-family:'Share Tech Mono',monospace;font-size:0.7rem;color:#4fd8e8;letter-spacing:0.5em;text-transform:uppercase;margin-bottom:1.5rem;position:relative;animation:fadeUp 0.8s 0.2s both;}
@keyframes fadeUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
.hero-title{font-family:'Cinzel',serif;font-size:clamp(3rem,10vw,7rem);font-weight:900;line-height:0.95;color:#dde8ee;text-shadow:0 0 80px rgba(79,216,232,0.2);position:relative;animation:fadeUp 0.8s 0.4s both;margin-bottom:0.15em;}
.hero-title .accent{color:#4fd8e8;}
.hero-sub{font-family:'Cinzel',serif;font-size:clamp(0.8rem,2vw,1.1rem);color:#7fa0b0;letter-spacing:0.3em;text-transform:uppercase;animation:fadeUp 0.8s 0.5s both;margin-bottom:2rem;}
.hero-desc{font-size:1.05rem;color:#7fa0b0;max-width:600px;position:relative;animation:fadeUp 0.8s 0.6s both;margin-bottom:3rem;line-height:1.8;}
.faction-toggle{display:flex;gap:0;animation:fadeUp 0.8s 0.7s both;margin-bottom:3rem;border:1px solid #18303f;border-radius:4px;overflow:hidden;}
.faction-btn{padding:0.7rem 2rem;font-family:'Cinzel',serif;font-size:0.85rem;font-weight:700;letter-spacing:0.1em;text-transform:uppercase;cursor:pointer;border:none;transition:all 0.3s;background:transparent;color:#7fa0b0;}
.faction-btn.alliance-btn.active{background:rgba(79,216,232,0.15);color:#4fd8e8;}
.faction-btn.horde-btn.active{background:rgba(192,48,48,0.15);color:#e07070;}
.faction-divider{width:1px;background:#18303f;}
.hero-nav{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:#18303f;border:1px solid #18303f;max-width:900px;width:100%;animation:fadeUp 0.8s 0.8s both;}
.hero-nav-item{background:#080e14;padding:1.5rem 1.25rem;text-decoration:none;display:flex;flex-direction:column;gap:0.3rem;transition:background 0.2s;}
.hero-nav-item:hover{background:#0b1520;}
.hero-nav-item:hover .hni-title{color:#4fd8e8;}
.hni-icon{font-size:1.4rem;margin-bottom:0.2rem;}
.hni-title{font-family:'Cinzel',serif;font-size:0.8rem;font-weight:700;color:#dde8ee;transition:color 0.2s;}
.hni-desc{font-size:0.72rem;color:#3a5060;line-height:1.4;}
.scroll-hint{position:absolute;bottom:2rem;left:50%;transform:translateX(-50%);font-family:'Share Tech Mono',monospace;font-size:0.6rem;color:#3a5060;letter-spacing:0.3em;text-transform:uppercase;display:flex;flex-direction:column;align-items:center;gap:0.5rem;}
.scroll-arrow{width:20px;height:20px;border-right:1px solid #3a5060;border-bottom:1px solid #3a5060;transform:rotate(45deg);animation:bounce 1.5s ease-in-out infinite;}
@keyframes bounce{0%,100%{transform:rotate(45deg) translateY(0)}50%{transform:rotate(45deg) translateY(4px)}}
.widgets-section{padding:5rem 2rem;max-width:1200px;margin:0 auto;}
.widgets-header{text-align:center;margin-bottom:3rem;}
.widgets-header h2{font-family:'Cinzel',serif;font-size:clamp(1.5rem,4vw,2.5rem);font-weight:900;color:#dde8ee;margin-bottom:0.5rem;}
.widgets-header p{color:#7fa0b0;font-size:0.95rem;}
.widgets-grid{display:grid;grid-template-columns:repeat(12,1fr);gap:1rem;}
.widget{background:#080e14;border:1px solid #18303f;border-radius:6px;overflow:hidden;transition:border-color 0.2s,box-shadow 0.2s;}
.widget:hover{border-color:#1a4560;box-shadow:0 0 20px rgba(79,216,232,0.05);}
.widget-header{padding:1rem 1.25rem 0.75rem;border-bottom:1px solid #18303f;display:flex;align-items:center;gap:0.6rem;}
.widget-title{font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:#7fa0b0;letter-spacing:0.2em;text-transform:uppercase;}
.widget-body{padding:1.25rem;}
.dice-widget{grid-column:span 4;}
.d20-container{display:flex;flex-direction:column;align-items:center;gap:0.9rem;}
.d20-face{width:110px;height:110px;position:relative;cursor:pointer;filter:drop-shadow(0 0 15px rgba(79,216,232,0.2));transition:filter 0.3s;}
.d20-face:hover{filter:drop-shadow(0 0 25px rgba(79,216,232,0.4));}
.d20-face svg{width:100%;height:100%;}
.d20-number{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-family:'Cinzel',serif;font-size:1.9rem;font-weight:900;color:#4fd8e8;text-shadow:0 0 10px rgba(79,216,232,0.5);}
@keyframes diceShake{0%{transform:rotate(0) scale(1)}15%{transform:rotate(-15deg) scale(1.1)}30%{transform:rotate(12deg) scale(1.15)}45%{transform:rotate(-8deg) scale(1.1)}60%{transform:rotate(6deg) scale(1.05)}100%{transform:rotate(0) scale(1)}}
.d20-face.rolling{animation:diceShake 0.6s ease;}
@keyframes critFlash{0%,100%{filter:drop-shadow(0 0 15px rgba(200,168,75,0.3))}50%{filter:drop-shadow(0 0 40px rgba(200,168,75,0.8))}}
.d20-face.crit{animation:critFlash 0.8s ease 3;}
@keyframes fumbleFlash{0%,100%{filter:drop-shadow(0 0 15px rgba(192,48,48,0.3))}50%{filter:drop-shadow(0 0 40px rgba(192,48,48,0.8))}}
.d20-face.fumble{animation:fumbleFlash 0.8s ease 3;}
.dice-type-row{display:flex;gap:0.4rem;flex-wrap:wrap;justify-content:center;}
.die-btn{background:#0b1520;border:1px solid #18303f;border-radius:3px;padding:0.3rem 0.6rem;font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:#7fa0b0;cursor:pointer;transition:all 0.15s;}
.die-btn:hover,.die-btn.active{border-color:#4fd8e8;color:#4fd8e8;}
.dice-result-text{font-family:'Share Tech Mono',monospace;font-size:0.7rem;color:#7fa0b0;text-align:center;}
.dice-result-text.crit-text{color:#c8a84b;}
.dice-result-text.fumble-text{color:#e07070;}
.dice-history{font-family:'Share Tech Mono',monospace;font-size:0.62rem;color:#3a5060;text-align:center;}
.faction-widget{grid-column:span 8;}
.faction-split{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:#18303f;}
.faction-side{padding:1.5rem;position:relative;overflow:hidden;}
.faction-side::before{content:'';position:absolute;inset:0;opacity:0.06;transition:opacity 0.3s;}
.faction-side:hover::before{opacity:0.12;}
.alliance-side::before{background:radial-gradient(ellipse 80% 80% at 50% 0%,#4fd8e8,transparent);}
.horde-side::before{background:radial-gradient(ellipse 80% 80% at 50% 0%,#c03030,transparent);}
.faction-name{font-family:'Cinzel',serif;font-size:1.3rem;font-weight:900;margin-bottom:0.4rem;}
.alliance-side .faction-name{color:#4fd8e8;}
.horde-side .faction-name{color:#e07070;}
.faction-desc{font-size:0.82rem;color:#7fa0b0;margin-bottom:0.75rem;line-height:1.5;}
.faction-races{font-family:'Share Tech Mono',monospace;font-size:0.62rem;color:#3a5060;margin-bottom:1rem;}
.faction-link{display:inline-block;font-family:'Share Tech Mono',monospace;font-size:0.65rem;letter-spacing:0.12em;text-transform:uppercase;padding:0.3rem 0.8rem;border-radius:2px;text-decoration:none;transition:all 0.2s;}
.alliance-side .faction-link{border:1px solid #4fd8e8;color:#4fd8e8;}
.horde-side .faction-link{border:1px solid #e07070;color:#e07070;}
.quiz-widget{grid-column:span 6;}
.quiz-question{font-size:0.95rem;color:#dde8ee;line-height:1.6;margin-bottom:1rem;min-height:3rem;}
.quiz-options{display:flex;flex-direction:column;gap:0.4rem;margin-bottom:0.75rem;}
.quiz-opt{background:#0b1520;border:1px solid #18303f;border-radius:3px;padding:0.5rem 0.75rem;font-size:0.85rem;color:#7fa0b0;cursor:pointer;transition:all 0.15s;text-align:left;}
.quiz-opt:hover:not(:disabled){border-color:#1a4560;color:#dde8ee;}
.quiz-opt.correct{border-color:#3ab87a;color:#3ab87a;background:rgba(58,184,122,0.08);}
.quiz-opt.wrong{border-color:#c03030;color:#e07070;background:rgba(192,48,48,0.08);}
.quiz-opt:disabled{cursor:default;}
.quiz-feedback{font-family:'Share Tech Mono',monospace;font-size:0.68rem;min-height:1.2rem;margin-bottom:0.75rem;line-height:1.5;}
.quiz-feedback.correct{color:#3ab87a;}
.quiz-feedback.wrong{color:#e07070;}
.quiz-progress{display:flex;gap:0.3rem;margin-bottom:0.75rem;}
.quiz-pip{flex:1;height:3px;border-radius:2px;background:#18303f;transition:background 0.3s;}
.quiz-pip.done-correct{background:#3ab87a;}
.quiz-pip.done-wrong{background:#c03030;}
.quiz-pip.current{background:#c8a84b;}
.quiz-score{font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:#7fa0b0;}
.quiz-next-btn,.quiz-restart-btn{background:rgba(79,216,232,0.08);border:1px solid #1a4560;border-radius:3px;padding:0.35rem 0.9rem;font-family:'Share Tech Mono',monospace;font-size:0.65rem;color:#4fd8e8;cursor:pointer;transition:all 0.2s;}
.encounter-widget{grid-column:span 6;}
.encounter-controls{display:flex;gap:0.5rem;margin-bottom:1rem;flex-wrap:wrap;}
.enc-select{background:#0b1520;border:1px solid #18303f;border-radius:3px;padding:0.4rem 0.6rem;font-family:'Share Tech Mono',monospace;font-size:0.7rem;color:#dde8ee;}
.enc-roll-btn{background:rgba(200,168,75,0.1);border:1px solid rgba(200,168,75,0.3);border-radius:3px;padding:0.4rem 0.9rem;font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:#c8a84b;cursor:pointer;transition:all 0.2s;}
.encounter-card{background:#0b1520;border:1px solid #18303f;border-radius:4px;padding:1rem;min-height:110px;}
.enc-name{font-family:'Cinzel',serif;font-size:1rem;font-weight:700;color:#c8a84b;margin-bottom:0.25rem;}
.enc-type{font-family:'Share Tech Mono',monospace;font-size:0.6rem;color:#7fa0b0;letter-spacing:0.12em;text-transform:uppercase;margin-bottom:0.5rem;}
.enc-desc{font-size:0.83rem;color:#7fa0b0;line-height:1.55;margin-bottom:0.5rem;}
.enc-stats{display:flex;gap:1rem;flex-wrap:wrap;font-family:'Share Tech Mono',monospace;font-size:0.63rem;color:#3a5060;}
.enc-stat-val{color:#dde8ee;font-weight:700;}
.enc-empty{font-style:italic;color:#3a5060;font-size:0.85rem;display:flex;align-items:center;justify-content:center;min-height:80px;}
.hook-widget{grid-column:span 5;}
.hook-text{font-size:0.95rem;color:#dde8ee;line-height:1.75;font-style:italic;margin-bottom:1rem;padding:0.75rem;background:rgba(79,216,232,0.03);border-left:2px solid #1a4560;border-radius:0 3px 3px 0;}
.hook-tags{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:1rem;}
.hook-tag{font-family:'Share Tech Mono',monospace;font-size:0.58rem;letter-spacing:0.1em;text-transform:uppercase;padding:0.15rem 0.5rem;border-radius:2px;background:rgba(79,216,232,0.08);color:#7fa0b0;border:1px solid #18303f;}
.hook-btn{background:none;border:1px solid #18303f;border-radius:3px;padding:0.4rem 0.9rem;font-family:'Share Tech Mono',monospace;font-size:0.68rem;color:#7fa0b0;cursor:pointer;transition:all 0.2s;}
.timeline-widget{grid-column:span 7;}
.timeline-scroll{display:flex;overflow-x:auto;scrollbar-width:none;padding-bottom:0.5rem;}
.timeline-track{display:flex;align-items:flex-start;min-width:max-content;padding:0.5rem 0;}
.timeline-event{display:flex;flex-direction:column;align-items:center;width:120px;position:relative;cursor:pointer;}
.timeline-event::before{content:'';position:absolute;top:10px;left:50%;right:-50%;height:1px;background:#18303f;z-index:0;}
.timeline-event:last-child::before{display:none;}
.t-dot{width:20px;height:20px;border-radius:50%;border:2px solid #18303f;background:#080e14;z-index:1;margin-bottom:0.4rem;transition:all 0.2s;display:flex;align-items:center;justify-content:center;font-size:0.55rem;}
.timeline-event:hover .t-dot{border-color:#4fd8e8;box-shadow:0 0 8px rgba(79,216,232,0.3);}
.timeline-event.active .t-dot{border-color:#c8a84b;background:rgba(200,168,75,0.15);}
.t-year{font-family:'Share Tech Mono',monospace;font-size:0.58rem;color:#c8a84b;margin-bottom:0.2rem;text-align:center;}
.t-name{font-family:'Cinzel',serif;font-size:0.6rem;color:#7fa0b0;text-align:center;line-height:1.3;}
.timeline-detail{margin-top:1rem;padding:0.75rem;background:#0b1520;border:1px solid #18303f;border-radius:4px;font-size:0.85rem;color:#7fa0b0;line-height:1.6;min-height:60px;}
.timeline-detail-title{font-family:'Cinzel',serif;font-size:0.9rem;color:#c8a84b;margin-bottom:0.3rem;}
.campaign-widget{grid-column:span 4;}
.campaign-acts{display:flex;flex-direction:column;gap:0.5rem;}
.campaign-act{display:flex;align-items:center;gap:0.75rem;padding:0.6rem 0.75rem;border-radius:3px;border:1px solid #18303f;background:#0b1520;text-decoration:none;transition:all 0.2s;}
.campaign-act:hover{border-color:#1a4560;}
.act-status{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.act-status.complete{background:#3ab87a;box-shadow:0 0 6px rgba(58,184,122,0.5);}
.act-status.active{background:#c8a84b;box-shadow:0 0 6px rgba(200,168,75,0.5);animation:pulse 2s infinite;}
.act-status.locked{background:#3a5060;}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.4}}
.act-name{font-family:'Cinzel',serif;font-size:0.8rem;font-weight:700;color:#dde8ee;}
.act-sub{font-family:'Share Tech Mono',monospace;font-size:0.6rem;color:#3a5060;}
.campaign-progress{margin-top:1rem;padding-top:1rem;border-top:1px solid #18303f;}
.prog-label{font-family:'Share Tech Mono',monospace;font-size:0.6rem;color:#7fa0b0;margin-bottom:0.4rem;display:flex;justify-content:space-between;}
.prog-bar{height:4px;background:#18303f;border-radius:2px;overflow:hidden;}
.prog-fill{height:100%;background:linear-gradient(90deg,#4fd8e8,#c8a84b);border-radius:2px;transition:width 1.2s ease;}
.quickroll-widget{grid-column:span 3;}
.quickroll-list{display:flex;flex-direction:column;gap:0.4rem;}
.qr-item{display:flex;align-items:center;justify-content:space-between;padding:0.45rem 0.6rem;background:#0b1520;border:1px solid #18303f;border-radius:3px;cursor:pointer;transition:all 0.15s;}
.qr-item:hover{border-color:#1a4560;}
.qr-label{font-family:'Share Tech Mono',monospace;font-size:0.63rem;color:#7fa0b0;}
.qr-result{font-family:'Cinzel',serif;font-size:0.95rem;font-weight:700;color:#c8a84b;min-width:2rem;text-align:right;}
.qr-result.crit{color:#c8a84b;text-shadow:0 0 8px rgba(200,168,75,0.6);}
.qr-result.fumble{color:#e07070;}
@media(max-width:900px){.hero-nav{grid-template-columns:repeat(2,1fr);}.widgets-grid{grid-template-columns:1fr 1fr;}.widget{grid-column:span 1!important;}.faction-split{grid-template-columns:1fr;}}
@media(max-width:600px){.hero-nav{grid-template-columns:repeat(2,1fr);}.widgets-grid{grid-template-columns:1fr;}}
.hero-nav { grid-template-columns: repeat(2,1fr) !important; }
.widgets-grid { grid-template-columns: 1fr !important; }
.dice-widget,.faction-widget,.quiz-widget,.encounter-widget,.hook-widget,.timeline-widget,.campaign-widget,.quickroll-widget { grid-column: span 1 !important; }