/* Road to Doomsday — event-specific visual direction
   A dark, cinematic emerald-and-steel theme inspired by Doom's armor.
   Scoped intentionally so the rest of Marvel Addon keeps its original look. */

.road-feature.doom-theme {
  --doom-night: #07100c;
  --doom-panel: #101c16;
  --doom-panel-alt: #192820;
  --doom-green: #6fd39a;
  --doom-glow: #9bf5b9;
  --doom-metal: #9dacaa;
  --doom-border: #456553;
  --doom-muted: #a5b4ab;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid #566e5d;
  border-radius: 18px;
  padding: clamp(20px, 4vw, 39px);
  background:
    radial-gradient(ellipse at 15% 7%, rgba(158, 188, 117, .19), transparent 36%),
    radial-gradient(ellipse at 90% 12%, rgba(38, 118, 75, .25), transparent 34%),
    linear-gradient(135deg, #1c2a20 0%, #0b1711 35%, #07100d 72%, #111a15 100%);
  box-shadow:
    inset 0 1px 0 rgba(227, 243, 222, .16),
    inset 0 -1px 0 rgba(91, 137, 105, .17),
    0 20px 80px rgba(0, 0, 0, .43),
    0 0 45px rgba(48, 123, 75, .08);
}

.road-feature.doom-theme::before {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: -90px -20% auto -15%;
  height: 470px;
  background:
    radial-gradient(ellipse at 26% 30%, rgba(198, 210, 148, .17) 0, transparent 55%),
    radial-gradient(ellipse at 74% 55%, rgba(71, 152, 100, .24) 0, transparent 48%),
    radial-gradient(ellipse at 45% 85%, rgba(36, 94, 62, .35) 0, transparent 61%);
  filter: blur(38px);
  opacity: .82;
  animation: doom-mist 18s ease-in-out infinite alternate;
}

.road-feature.doom-theme::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
  inset: 0;
  background:
    linear-gradient(90deg, transparent, rgba(202, 229, 198, .23), transparent) top/100% 1px no-repeat,
    radial-gradient(circle at 99% 0%, transparent 0 80px, rgba(112, 163, 125, .11) 81px 82px, transparent 83px),
    repeating-linear-gradient(115deg, transparent 0 80px, rgba(196, 219, 202, .018) 81px, transparent 82px);
  border-radius: inherit;
}

.road-feature.doom-theme > * {
  position: relative;
  z-index: 1;
}

@keyframes doom-mist {
  from { transform: translate3d(-1.5%, 0, 0) scale(1); opacity: .6; }
  to { transform: translate3d(2.2%, -2%, 0) scale(1.1); opacity: .92; }
}

.road-feature.doom-theme :is(.micro, .doom-kicker) {
  color: #a5d6b4;
  letter-spacing: .19em;
}

.road-feature .road-top {
  grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(20px, 4vw, 45px);
  padding: 14px 0 33px;
  border-bottom: 1px solid rgba(159, 187, 162, .2);
  align-items: center;
}

.doom-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 800;
  font-size: 10px;
  text-transform: uppercase;
}

.doom-led {
  display: inline-block;
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #b0e9b0;
  box-shadow: 0 0 0 4px rgba(100, 182, 117, .08), 0 0 15px rgba(138, 226, 153, .7);
}

.road-feature .road-top h2 {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin: 28px 0 22px;
  line-height: .87;
  letter-spacing: -.04em;
  text-transform: uppercase;
}

.road-feature .road-top .doom-pretitle {
  font-family: Impact, "Arial Narrow", "Arial Black", sans-serif;
  font-weight: 700;
  font-size: clamp(30px, 5vw, 58px);
  color: #e8ebe3;
  letter-spacing: .035em;
  text-shadow: 0 2px 22px rgba(0, 0, 0, .6);
}

.road-feature .road-top .doom-wordmark {
  display: block;
  max-width: 100%;
  font-family: Impact, "Arial Narrow", "Arial Black", sans-serif;
  font-weight: 900;
  font-size: clamp(44px, 6.3vw, 78px);
  letter-spacing: -.012em;
  color: #aed7b1;
  text-shadow: 0 3px 25px rgba(29, 76, 45, .38);
}

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .road-feature .road-top .doom-wordmark {
    background: linear-gradient(180deg, #eef4dc 0%, #a4c4a4 25%, #6c967d 52%, #c6dac0 57%, #668a72 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.road-feature .road-top > div > p {
  font-size: clamp(15px, 1.8vw, 17px);
  line-height: 1.72;
  color: #c4d1c4;
  max-width: 480px;
}

.road-feature .road-top p strong { color: #f3f7e9; font-weight: 700; }

.road-feature .road-meta {
  margin-top: 22px;
  gap: 8px;
}

.road-feature .road-meta span {
  border: 1px solid rgba(144, 185, 146, .38);
  color: #b6d4bb;
  background: rgba(16, 36, 23, .63);
  border-radius: 3px;
  padding: 6px 10px;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.road-feature .road-clock {
  position: relative;
  border-radius: 8px;
  border: 1px solid rgba(161, 195, 163, .38);
  background:
    linear-gradient(127deg, rgba(31, 50, 39, .96), rgba(8, 19, 13, .96) 64%),
    #0c170f;
  box-shadow:
    inset 0 1px 0 rgba(226, 246, 219, .1),
    inset 0 0 35px rgba(12, 40, 22, .48),
    0 14px 44px rgba(0, 0, 0, .3);
  padding: clamp(14px, 2.2vw, 24px);
}

.road-feature .road-clock::before,
.road-feature .road-clock::after {
  content: "";
  position: absolute;
  width: 22px;
  height: 22px;
  pointer-events: none;
}

.road-feature .road-clock::before {
  top: -1px;
  left: -1px;
  border-top: 2px solid #a7d3a8;
  border-left: 2px solid #a7d3a8;
}

.road-feature .road-clock::after {
  right: -1px;
  bottom: -1px;
  border-right: 2px solid #a7d3a8;
  border-bottom: 2px solid #a7d3a8;
}

.road-feature .clock-head .micro { font-size: 10px; }

.road-feature .region-button {
  border-radius: 3px;
  border-color: rgba(135, 160, 138, .33);
  color: #bac8bc;
  background: rgba(17, 32, 22, .89);
  transition: background-color .18s, border-color .18s, color .18s;
}

.road-feature .region-button:hover {
  color: white;
  border-color: #8dad8e;
}

.road-feature .region-button.active {
  color: #092113;
  background: #a5d4ad;
  border-color: #b9e5b9;
  box-shadow: 0 0 16px rgba(131, 218, 150, .12);
}

.road-feature .region-button:focus-visible,
.road-feature .road-check:focus-visible {
  outline: 2px solid #d6f7d4;
  outline-offset: 3px;
}

.road-feature .clock-grid { gap: 6px; margin-top: 21px; }

.road-feature .clock-grid > div {
  border-radius: 3px;
  border: 1px solid rgba(157, 189, 157, .19);
  background:
    linear-gradient(140deg, #182e21 0%, #0b1a10 50%, #132719 100%);
  box-shadow: inset 0 1px 0 rgba(170, 213, 168, .07);
  padding: 17px 3px;
  min-width: 0;
}

.road-feature .clock-grid strong {
  font-family: "Arial Narrow", "Roboto Condensed", "Segoe UI", sans-serif;
  font-stretch: condensed;
  font-size: clamp(29px, 3.3vw, 44px);
  font-weight: 850;
  color: #e1f3da;
  font-variant-numeric: tabular-nums;
  text-shadow: 0 0 20px rgba(93, 197, 121, .23);
}

.road-feature .clock-grid small {
  color: #86aa90;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: .16em;
}

.road-feature #clock-note {
  color: #a6b6aa;
  font-size: 11px;
  margin-top: 16px;
}

.road-feature .road-guide-head {
  margin-top: 0;
  padding-top: 27px;
  border-top: 0;
}

.road-feature .road-guide-head h3 {
  font-family: "Arial Narrow", "Arial Black", system-ui, sans-serif;
  text-transform: uppercase;
  letter-spacing: -.015em;
  font-size: clamp(21px, 2.4vw, 27px);
  color: #e1efe0;
}

.road-feature .road-guide-head p,
.road-feature .road-bottom p {
  color: var(--doom-muted);
}

.road-feature .road-progress-wrap strong {
  color: #c8e5ce;
  text-transform: uppercase;
  letter-spacing: .06em;
  font-size: 11px;
}

.road-feature .road-progress-wrap progress {
  appearance: none;
  display: block;
  width: 100%;
  height: 9px;
  border-radius: 2px;
  overflow: hidden;
  border: 1px solid #466650;
  background: #0a140c;
  accent-color: #76c892;
}

.road-feature .road-progress-wrap progress::-webkit-progress-bar { background: #0a140c; }
.road-feature .road-progress-wrap progress::-webkit-progress-value { background: linear-gradient(90deg, #24583b, #83d49b); }
.road-feature .road-progress-wrap progress::-moz-progress-bar { background: linear-gradient(90deg, #24583b, #83d49b); }

.road-feature .road-list { gap: 11px; margin-top: 24px; }

.road-feature .road-entry {
  position: relative;
  overflow: hidden;
  border-radius: 6px;
  border: 1px solid rgba(117, 156, 127, .33);
  background:
    linear-gradient(110deg, rgba(33, 54, 40, .68), rgba(12, 24, 17, .94)),
    #0e1a13;
  box-shadow: inset 0 1px 0 rgba(166, 200, 168, .05);
  gap: 12px;
  padding: 10px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.road-feature .road-entry::before {
  content: "";
  width: 2px;
  height: 100%;
  background: linear-gradient(180deg, rgba(132, 181, 133, .7), rgba(37, 82, 52, .1));
  position: absolute;
  top: 0;
  left: 0;
  opacity: .38;
  transition: opacity .2s;
}

@media (hover: hover) {
  .road-feature .road-entry:hover {
    border-color: #739e78;
    box-shadow: 0 6px 25px rgba(0, 0, 0, .17), inset 0 1px 0 rgba(166, 200, 168, .09);
    transform: translateY(-2px);
  }
  .road-feature .road-entry:hover::before { opacity: 1; }
}

.road-feature .road-entry:focus-within { border-color: #a4dda9; }

.road-feature .road-entry.completed {
  border-color: rgba(109, 188, 126, .54);
  background: linear-gradient(115deg, rgba(38, 79, 50, .53), rgba(14, 34, 21, .95));
}

.road-feature .road-order {
  color: #92bea0;
  letter-spacing: .04em;
  font-size: 12px;
  min-width: 22px;
  font-weight: 900;
}

.road-feature .road-poster {
  width: 46px;
  height: 66px;
  border-radius: 2px;
  background: #273a2d;
  border: 1px solid rgba(183, 204, 183, .12);
}

.road-feature .road-no-poster { color: #b4d2ac; }

.road-feature .road-entry-copy strong {
  font-size: 13px;
  color: #e7eee4;
  line-height: 1.4;
}

.road-feature .road-entry.completed .road-entry-copy strong {
  color: #c0d5c5;
  text-decoration-color: rgba(156, 224, 163, .7);
}

.road-feature .road-entry-copy small {
  color: #9fb7a5;
  font-size: 10px;
}

.road-feature .road-entry-copy em {
  color: #a4e0ad;
  font-size: 10px;
}

.road-feature .road-check {
  border-radius: 4px;
  width: 35px;
  height: 35px;
  border: 1px solid #637e69;
  color: #b9dfbc;
  background: rgba(18, 39, 24, .85);
  font-size: 18px;
  transition: background-color .2s, box-shadow .2s, border-color .2s;
}

.road-feature .road-check:hover {
  background: #244b33;
  border-color: #9ccfaa;
}

.road-feature .road-entry.completed .road-check {
  background: #3c9860;
  color: #08180d;
  border-color: #9ce5a9;
  box-shadow: 0 0 0 2px rgba(123, 199, 134, .1), 0 0 16px rgba(87, 187, 116, .3);
}

.road-feature .road-bottom {
  border-color: rgba(121, 164, 129, .28);
  margin-top: 26px;
  padding-top: 19px;
}

.road-feature .road-bottom a {
  color: #b2e7b5;
  text-underline-offset: 3px;
}

.road-feature .road-bottom a:hover { color: #e5ffde; }

/* A standalone accent for the corresponding catalog setting. */
.toggle.road-toggle {
  margin: 12px 0 0;
  padding: 14px 13px;
  border: 1px solid rgba(103, 166, 120, .48);
  border-radius: 8px;
  background: linear-gradient(110deg, #1b3223, #101a15);
  box-shadow: inset 3px 0 0 #65b784, inset 0 1px 0 rgba(210, 241, 210, .06);
}

.toggle.road-toggle strong { color: #d0f3d2; }
.toggle.road-toggle small { color: #acc9b3; }

.toggle.road-toggle input {
  background: #33473a;
  border-color: #72937b;
}

.toggle.road-toggle input:checked {
  background: #479963;
  border-color: #7cd393;
  box-shadow: 0 0 13px rgba(85, 183, 108, .23);
}

.toggle.road-toggle input:focus-visible {
  outline: 2px solid #bff1c2;
  outline-offset: 3px;
}

@media (max-width: 780px) {
  .road-feature .road-top { grid-template-columns: 1fr; gap: 30px; }
  .road-feature .road-top h2 { margin-top: 19px; }
  .road-feature .road-list { grid-template-columns: 1fr; }
}

@media (max-width: 460px) {
  .road-feature.doom-theme { padding: 20px 16px; }
  .road-feature .road-top .doom-wordmark { font-size: clamp(40px, 11.8vw, 56px); }
  .road-feature .clock-grid > div { padding: 13px 2px; }
  .road-feature .clock-grid strong { font-size: clamp(25px, 7vw, 34px); }
  .road-feature .road-clock { padding: 14px; }
  .road-feature .road-guide-head { gap: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .road-feature.doom-theme::before { animation: none; }
  .road-feature .road-entry,
  .road-feature .road-check,
  .road-feature .region-button { transition: none; }
  .road-feature .road-entry:hover { transform: none; }
}