/* Guides (#40): one closed bar per guide; open one to read it. */
.guides-hero { position: relative; padding: clamp(1.4rem, 4vw, 2.6rem) clamp(1.3rem, 4vw, 3rem);
  border: 1px solid #52616a; box-shadow: 0 28px 70px #0006;
  background: linear-gradient(110deg, #101b24f5 40%, #1a252ad0), url("/static/img/rf-warrior-bg.jpg") center 38% / cover; }
.guides-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 4px;
  background: linear-gradient(90deg, #da6328, #ffc170 40%, transparent); }
.guides-hero h1 { margin: .35rem 0 .7rem; font: 500 clamp(2.3rem, 5vw, 4rem)/1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; }
.guides-intro { margin: 0; color: #c6d0d2; }
.guide-section { margin-top: 1rem; border: 1px solid #40505a; background: linear-gradient(145deg, #172530, #101b22);
  box-shadow: inset 0 1px #ffffff0b, 0 12px 25px #0003; }
.guide-section > summary { display: flex; align-items: center; gap: 1.2rem; padding: clamp(1rem, 2.5vw, 1.4rem) clamp(1rem, 3vw, 1.8rem);
  cursor: pointer; list-style: none; }
.guide-section > summary::-webkit-details-marker { display: none; }
.guide-section > summary::after { content: "+"; margin-left: auto; flex: none; color: var(--gold-2);
  font: 400 1.8rem/1 "Arial Narrow", Bahnschrift, sans-serif; }
.guide-section[open] > summary::after { content: "\2212"; }
.guide-section > summary:hover strong { color: var(--gold-2); }
.guide-section > summary:focus-visible { outline: 2px solid var(--gold-2); outline-offset: -4px; }
.guide-section[open] > summary { border-bottom: 1px solid #40505a; }
.guide-number { flex: none; color: #dcb381; font: 500 clamp(1.6rem, 3vw, 2.2rem)/1 "Arial Narrow", Bahnschrift, sans-serif; }
.guide-heading { display: grid; gap: .2rem; min-width: 0; }
.guide-heading strong { font: 500 clamp(1.3rem, 2.6vw, 1.8rem)/1.1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .04em; }
.guide-heading span { color: var(--muted); font-size: .92rem; }
.guide-body { padding: clamp(1rem, 3vw, 1.8rem); }
.overlevel-intro h2 { margin: 0 0 .6rem; font: 500 clamp(1.7rem, 3.2vw, 2.4rem)/1.1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .03em; }
.overlevel-intro > p { margin: 0; max-width: 46rem; color: #c6d0d2; }
.overlevel-milestones { display: flex; flex-wrap: wrap; gap: .6rem; margin: 1.2rem 0 1.6rem; }
.overlevel-milestones span { display: flex; align-items: center; gap: .6rem; padding: .5rem .9rem;
  border: 1px solid #52616a; background: #0e1920; color: #c6d0d2; font-size: .9rem; }
.overlevel-milestones b { color: var(--gold-2); font: 600 1.4rem/1 "Arial Narrow", Bahnschrift, sans-serif; }
.overlevel-grid { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 1rem; }
.overlevel-card { position: relative; min-width: 0; padding: clamp(1.1rem, 2.5vw, 1.6rem); border: 1px solid #40505a;
  background: linear-gradient(145deg, #1b2932, #111c23); }
.overlevel-card h3 { margin: .1rem 0 .5rem; font: 500 1.6rem/1.1 "Arial Narrow", Bahnschrift, sans-serif;
  text-transform: uppercase; letter-spacing: .03em; }
.overlevel-card > p { color: #c6d0d2; }
.overlevel-god { border-color: #8a6a43; background: radial-gradient(circle at 85% 20%, #6b3a1e55, transparent 50%),
  linear-gradient(145deg, #1f2a30, #131d24); }
.overlevel-rewards { width: 100%; border-collapse: collapse; margin-top: .8rem; }
.overlevel-rewards th, .overlevel-rewards td { text-align: left; padding: .55rem .4rem; border-bottom: 1px solid #34424a; }
.overlevel-rewards th { color: var(--gold-2); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.overlevel-reward { display: flex; justify-content: space-between; gap: 1rem; margin: .8rem 0 0; padding: .7rem .8rem;
  border: 1px solid #52616a; background: #0e1920; }
.overlevel-reward span { color: var(--gold-2); font-size: .75rem; letter-spacing: .12em; text-transform: uppercase; }
.tba { color: var(--muted); font-style: italic; font-weight: 400; }
@media (max-width: 760px) { .overlevel-grid { grid-template-columns: 1fr; } }
