/* red-dead.css -- loaded only by /red-dead. Split out of fanpages.css. */

.rdr-sky {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    linear-gradient(180deg, #241609 0%, #170f08 38%, #0c0806 62%, #060404 100%);
}

.rdr-sky > * { position: absolute; inset: 0; display: block; }

/* the sun, sitting low and red on the horizon */
.rdr-sun {
  inset: auto auto 26% 50%; translate: -50% 0;
  width: clamp(220px, 30vw, 460px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffd08a 0%, #f08a2a 34%, #c9402f 62%, transparent 72%);
  filter: blur(2px); opacity: .55;
  animation: rdr-bake 18s ease-in-out infinite alternate;
}

.rdr-sky::before {
  content: ""; position: absolute; inset: auto 0 0 0; height: 62%;
  background:
    radial-gradient(80% 90% at 50% 100%, rgba(224,110,40,.22), transparent 72%),
    linear-gradient(180deg, transparent, rgba(140,50,26,.18) 60%, rgba(60,20,10,.4));
}

/* the plains, mesas, telegraph line and a couple of cactus */
.rdr-land { inset: auto 0 0 0; height: 52%; }

.rdr-land svg { position: absolute; inset: 0; width: 100%; height: 100%; }

.rdl-far  { fill: #2a1a12; }

.rdl-mesa { fill: #22140e; stroke: #6b3a24; stroke-width: 2; stroke-linejoin: round; }

.rdl-near { fill: #150c08; }

.rdl-poles {
  fill: none; stroke: #4a2a1c; stroke-width: 3; stroke-linecap: round;
}

.rdl-cactus { fill: none; stroke: #2f4a28; stroke-width: 7; stroke-linecap: round; }

/* dust blowing across the whole thing */
.rdr-dust {
  background-image:
    radial-gradient(60% 26% at 22% 76%, rgba(200,150,90,.09), transparent 72%),
    radial-gradient(50% 20% at 68% 84%, rgba(180,130,80,.07), transparent 74%);
  filter: blur(8px);
  animation: rdr-blow 52s ease-in-out infinite alternate;
}

.rh-brim  { fill: #4a3020; stroke: #8a5a34; stroke-width: 3; stroke-linejoin: round; }

.rh-crown { fill: #563a26; stroke: #8a5a34; stroke-width: 3; stroke-linejoin: round; }

.rh-dent  { fill: none; stroke: #3a2416; stroke-width: 4; stroke-linecap: round; }

.rh-band  { fill: #2e1c12; stroke: #8a5a34; stroke-width: 2; }

.rh-stud  { fill: #c9a24a; }

.rg-barrel, .rg-cyl, .rg-frame, .rg-hammer, .rg-sight {
  fill: #4a5058; stroke: #8f98a2; stroke-width: 2.6; stroke-linejoin: round;
}

.rg-guard   { fill: none; stroke: #8f98a2; stroke-width: 6; stroke-linejoin: round; }

.rg-trigger { fill: none; stroke: #8f98a2; stroke-width: 5; stroke-linecap: round; }

.rg-chamber { fill: #2a2f36; stroke: #8f98a2; stroke-width: 2.4; }

.rg-pin     { fill: #8f98a2; }

.rg-grip    { fill: #6b4326; stroke: #a0763f; stroke-width: 2.6; stroke-linejoin: round; }

.rg-grain   { fill: none; stroke: #a0763f; stroke-width: 2; opacity: .5; stroke-linecap: round; }

.rdr-gun    { filter: drop-shadow(0 6px 14px rgba(0,0,0,.6)); }

.rdr-hat    { filter: drop-shadow(0 6px 14px rgba(0,0,0,.55)); }

.rdr-sky::after {                      /* horizon and dust */
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(60% 22% at 50% 38%, rgba(224,140,60,.14), transparent 70%),
    repeating-linear-gradient(0deg, rgba(0,0,0,.10) 0 2px, transparent 2px 5px);
}

/* ═════════════ Red Dead: a wanted poster and the honor meter ═════════════ */
.rdr-kit {
  padding: 0 var(--gutter); max-width: var(--maxw); margin: 0 0 3.4rem;
  display: grid; gap: clamp(1.2rem, 3vw, 2.4rem); align-items: center;
  grid-template-columns: 1fr;
}

@media (min-width: 820px) { .rdr-kit { grid-template-columns: 0.62fr 1.38fr; } }

.rdr-poster {
  position: relative; padding: 1.4rem 1.2rem 1.6rem; text-align: center;
  color: #2a1a0c; border-radius: 2px;
  background: radial-gradient(120% 90% at 50% 0%, #e2cfa4, #c9b184 60%, #b09769);
  box-shadow: 0 24px 50px -28px #000, inset 0 0 40px 8px rgba(90,55,20,.35);
  transform: rotate(-1.4deg);
  font-family: "American Typewriter", "Courier New", var(--mono);
}

.rdr-poster::before {                    /* nail holes */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(circle 3px at 12px 12px, rgba(60,35,12,.55), transparent 60%),
    radial-gradient(circle 3px at calc(100% - 12px) 12px, rgba(60,35,12,.55), transparent 60%);
}

.rdr-poster b { display: block; font-size: 1.5rem; letter-spacing: 0.22em; }

.rdr-poster i {
  display: block; font-style: normal; font-size: 0.62rem;
  letter-spacing: 0.24em; margin: 0.3rem 0 0.9rem;
}

.rdr-poster u {
  display: block; text-decoration: none; font-size: 1.15rem; font-weight: 700;
  letter-spacing: 0.06em; padding: 0.5rem 0; margin: 0.4rem 0;
  border-top: 2px solid rgba(42,26,12,.5); border-bottom: 2px solid rgba(42,26,12,.5);
}

.rdr-poster s { display: block; text-decoration: none; font-size: 2rem; font-weight: 700; letter-spacing: 0.04em; }

.rdr-poster span {
  display: block; margin-top: 0.7rem; font-size: 0.56rem;
  letter-spacing: 0.14em; opacity: .75;
}

.rdr-honor { display: flex; flex-direction: column; gap: 0.6rem; }

.rdr-honor :is(h2, h3, h4, h5) {
  font-family: "American Typewriter", "Courier New", var(--mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; font-size: 1.05rem; color: var(--a);
}

.rdr-honor p { font-size: 0.94rem; line-height: 1.75; color: var(--ink-dim); max-width: 58ch; }

.rdr-scale {
  display: flex; justify-content: space-between;
  font-family: var(--mono); font-size: 0.58rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute);
}

.rdr-track {
  position: relative; height: 10px; border-radius: 6px; margin: 0.15rem 0 0.2rem;
  background: linear-gradient(90deg, #7a1c14 0%, #3a2a1c 46%, #e8dcc0 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.08);
}

.rdr-track i {
  position: absolute; top: -5px; left: 50%; width: 3px; height: 20px; border-radius: 2px;
  background: #f2e6c8; box-shadow: 0 0 10px 2px rgba(242,230,200,.6);
  animation: rdr-honor 14s ease-in-out infinite alternate;
}

@media (prefers-reduced-motion: reduce) { .rdr-track i { animation: none; left: 72%; } }