body {
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  margin: 0;
  background: #0b1020;
  color: #f5f7ff;
}

header {
  padding: 1rem 1.5rem;
  background: #131833;
  display: flex;
  align-items: center;
  gap: 1rem;
  position: sticky;
  top: 0;
  z-index: 10;
}

h1 {
  font-size: 1.2rem;
  margin: 0;
}

#random-btn {
  margin-left: auto;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
  border: none;
  background: #2f80ed;
  color: #fff;
  cursor: pointer;
}

#random-btn:hover {
  background: #2564b5;
}

#scenario-list {
  padding: 1rem 1.5rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.scenario {
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #252b4a;
  background: #151a35;
}

.scenario-header {
  width: 100%;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0.8rem;
  background: #181e3e;
  color: inherit;
  cursor: pointer;
}

.scenario-header:hover {
  background: #1f264d;
}

.scenario-name {
  font-weight: 600;
}

.icons {
  display: flex;
  gap: 0.4rem;
  font-size: 0.75rem;
}

.icon {
  position: relative;
  width: 1.6rem;
  height: 1.6rem;
  border-radius: 999px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background: #252b4a;
  color: #d0d6ff;
  border: 1px solid #3b4061;
}

.icon-svg {
  width: 1.1rem;
  height: 1.1rem;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

.icon-classifieds {
  border-color: #4caf50;
}
.icon-classifieds .badge {
  position: absolute;
  bottom: -0.25rem;
  right: -0.25rem;
  min-width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: #4caf50;
  color: #0b1020;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.15rem;
}

.icon-hvt {
  border-color: #ffb74d;
}
.icon-hvt[data-state="none"] {
  opacity: 0.25;
}
.icon-hvt[data-state="standard"] {
  background: #ffb74d22;
}
.icon-hvt[data-state="multiple"] {
  background: #ffb74d;
  color: #131833;
}

.icon-retreat[data-mode="normal"] {
  border-color: #90caf9;
  background: #0b1828;
}
.icon-retreat[data-mode="no-retreat"] {
  border-color: #e57373;
  background: #2a0f13;
}
.icon-retreat[data-mode="ends-on-retreat"] {
  border-color: #ce93d8;
  background: #241228;
}

.scenario-body {
  padding: 0.6rem 0.8rem 0.8rem;
  border-top: 1px solid #252b4a;
}

.scenario-type {
  margin: 0 0 0.15rem;
  font-size: 0.75rem;
  color: #a5acd8;
}

.scenario-summary {
  margin: 0 0 0.4rem;
  font-size: 0.85rem;
  color: #dde1ff;
}

/* map */

.scenario-map {
  margin-bottom: 0.4rem;
}

.map-title {
  margin: 0 0 0.25rem;
  font-size: 0.75rem;
  color: #a5acd8;
}

.map-svg {
  width: 100%;
  max-width: 260px;
  height: auto;
  display: block;
  border-radius: 4px;
}

.map-caption {
  margin: 0.15rem 0 0.35rem;
  font-size: 0.75rem;
  color: #c9cfff;
}

/* SVG styling */
.map-table {
  fill: none;           /* ← KEY FIX: transparent background */
  stroke: #3a4167;
  stroke-width: 0.7;
}

.map-dz-a {
  fill: #1b4b7a88;
}

.map-dz-b {
  fill: #7a1b3b88;
}

.map-exclusion {
  fill: #ff9800aa;
  stroke: #ff9800ff;
  stroke-width: 0.4;
  stroke-dasharray: 1.5 1.5;
}

.map-centerline {
  stroke: #ffffff33;
  stroke-width: 0.5;
  stroke-dasharray: 2 1;
}
.map-dz-a-secondary {
  fill: #1b4b7a55;
}

.map-dz-b-secondary {
  fill: #7a1b3b55;
}


.map-tick {
  stroke: #ffffff33;
  stroke-width: 0.4;
}

.map-tick-label {
  fill: #c9cfff;
  font-size: 3px;
  dominant-baseline: middle;
}

.map-server-room {
  fill: #263238aa;           /* semi‑transparent dark block */
  stroke: #ffeb3bdd;         /* yellow outline to stand out */
  stroke-width: 0.6;
  stroke-dasharray: 2 1;     /* hint that walls are special / infinite */
}


.map-obj {
  stroke-width: 0.4;
}

.map-obj-center {
  fill: #ffc107;
  stroke: #ff9800;
}

.map-obj-console,
.map-obj-antenna,
.map-obj-techcoffin {
  fill: #03a9f4;
  stroke: #81d4fa;
}

.map-obj-prototype,
.map-obj-beacon,
.map-obj-supply {
  fill: #e91e63;
  stroke: #f48fb1;
}

.map-obj-generic,
.map-obj-panoply,
.map-obj-turret,
.map-obj-civilian {
  fill: #9e9e9e;
  stroke: #eeeeee;
}

.scenario-details {
  margin: 0;
  padding-left: 1.1rem;
  font-size: 0.85rem;
}

.scenario-details li + li {
  margin-top: 0.15rem;
}

.scenario-details .section-title {
  margin-top: 0.4rem;
  font-weight: 600;
  list-style: none;
}

.scenario.highlight {
  box-shadow: 0 0 0 2px #2f80ed;
}

.scenario-unique-skills-container {
  margin: 0.4rem 0;
}

.skill-alert {
  margin-bottom: 0.6rem;
  padding: 0.6rem 0.8rem;
  background: linear-gradient(135deg, #ff980044 0%, #ffc10722 100%);
  border: 1px solid #ffc107;
  border-radius: 6px;
}

.speedball-alert {
  background: linear-gradient(135deg, #2f80ed44 0%, #4fc3f722 100%);
  border-color: #2f80ed;
}

.speedball-alert .skills-section {
  border-left-color: #2f80ed;
}

.speedball-alert .skills-heading,
.speedball-alert .skill-name {
  color: #4fc3f7;
}

.skill-alert:last-child {
  margin-bottom: 0;
}

.skill-name {
  font-weight: 600;
  color: #ff9800;
  font-size: 0.85rem;
  margin-bottom: 0.3rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.skill-name::before {
  content: "★";
  font-size: 1rem;
}

.skill-body {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.skills-section {
  background: rgba(255, 193, 7, 0.08);
  border-radius: 4px;
  padding: 0.4rem;
  border-left: 3px solid #ffc107;
}

.skills-heading {
  margin: 0 0 0.2rem 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: #ffb300;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.skills-list {
  list-style: none !important;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  line-height: 1.3;
}
.skills-list li {
  list-style: none !important;
  margin-bottom: 0.15rem;
  position: relative;
  padding-left: 1.2rem;
}
.skills-list li::before {
  content: "➤";
  position: absolute;
  left: 0;
  color: #ffc107;
  font-weight: bold;
}

.skills-section {
  background: rgba(255, 193, 7, 0.1);
  border-radius: 4px;
  padding: 0.5rem;
  border-left: 3px solid #ffc107;
}

.skills-heading {
  margin: 0 0 0.3rem 0;
  font-size: 0.8rem;
  font-weight: 600;
  color: #ff9800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}



#legend {
  padding: 0.4rem 1.5rem 0.6rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 1.5rem;
  align-items: center;
  font-size: 0.8rem;
  color: #dde1ff;
  border-bottom: 1px solid #252b4a;
  background: #11152b;
}

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.legend-label {
  white-space: nowrap;
}
.icons {
  flex-wrap: wrap;
  gap: 0.3rem;
}

@media (max-width: 600px) {
  .icons {
    gap: 0.2rem;
  }
  .icon {
    width: 1.3rem;
    height: 1.3rem;
  }
}
@media (max-width: 600px) {
  header {
    padding: 0.8rem 1rem;
    flex-direction: column;
    gap: 0.5rem;
    align-items: stretch;
  }
  h1 {
    font-size: 1.1rem;
  }
  .random-btn {
    margin-left: 0;
    align-self: flex-end;
  }
  .scenario-list {
    padding: 0.8rem 1rem 1.5rem;
    gap: 0.4rem;
  }
.scenario-header {
  width: 100%;
  border: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 1.2rem;  /* Increased right padding */
  background: #181e3e;
  color: inherit;
  cursor: pointer;
}

.scenario-header:hover {
  background: #1f264d;
}
  .scenario-body {
    padding: 0.5rem 0.6rem 0.6rem;
    font-size: 0.85rem;
  }
 .icons {
  flex-wrap: wrap;
  gap: 0.25rem;  /* Tighter gap */
  min-width: 8rem;  /* Reserve space */
}
  .icon {
    width: 1.4rem;
    height: 1.4rem;
  }
  .icon-svg {
    width: 1rem;
    height: 1rem;
  }
.icon-tactical-support {
  border-color: #66bb6a;
}

.icon-tactical-support .badge {
  position: absolute;
  bottom: -0.25rem;
  right: -0.25rem;
  min-width: 0.9rem;
  height: 0.9rem;
  border-radius: 999px;
  background: #66bb6a;
  color: #0b1020;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.15rem;
}

  .map-svg {
    max-width: 100%;
  }
  legend {
    padding: 0.3rem 1rem;
    gap: 0.4rem 1rem;
    flex-direction: column;
    align-items: flex-start;
  }
}
.rules-section {
  padding: 2rem 1rem;
  background-color: #0b0d10; /* match your site theme */
  color: #f0f0f0;
}

.rules-section h2 {
  font-size: 1.8rem;
  margin-bottom: 1rem;
}

.rules-section h3 {
  font-size: 1.2rem;
  margin-top: 1.5rem;
}

.rules-section p,
.rules-section li {
  line-height: 1.5;
  max-width: 60rem;
}

.rules-table {
  display: grid;
  grid-template-columns: 2.5rem 1fr; /* Fixed first column, flexible second */
  gap: 0.125rem;
  background: #151a35;
  border: 1px solid #252b4a;
  border-radius: 6px;
  overflow: hidden;
  max-width: 100%;
  font-size: 0.85rem;
  font-family: inherit;
}

.rules-table-header,
.rules-table-row {
  display: contents;
}

.rules-table-header > div {
  background: #181e3e;
  padding: 0.5rem 0.75rem;
  font-weight: 600;
  color: #f5f7ff;
  border-bottom: 1px solid #252b4a;
}

.rules-table-row > div:first-child {
  background: #252b4a;
  padding: 0.5rem 0.75rem;
  color: #ffc107;
  font-weight: 600;
  text-align: center;
  border-right: 1px solid #3b4061;
}

.rules-table-row > div:last-child {
  background: #151a35;
  padding: 0.5rem 0.75rem;
  color: #dde1ff;
}

.rules-table-row:nth-child(even) > div:last-child {
  background: #1a213e;
}

@media (max-width: 600px) {
  .rules-table {
    grid-template-columns: 2rem 1fr;
    font-size: 0.8rem;
    gap: 0.1rem;
  }
  
  .rules-table-header > div,
  .rules-table-row > div {
    padding: 0.4rem 0.5rem;
  }
}
.stats-table {
  display: grid;
  grid-template-columns: repeat(10, 1fr); /* Desktop: 10 equal columns */
  gap: 0.125rem;
  background: linear-gradient(135deg, #151a35 0%, #181e3e 100%);
  border: 1px solid #252b4a;
  border-radius: 4px;
  padding: 0.25rem;
  max-width: 28rem; /* Fits nicely next to text */
  font-size: 0.8rem;
  font-family: 'Courier New', monospace; /* Monospace for stats */
  font-weight: 600;
}

.stats-row {
  display: contents;
}

.stats-label {
  background: #252b4a;
  padding: 0.3rem 0.2rem;
  color: #ffc107;
  text-align: center;
  border-right: 1px solid #3b4061;
  writing-mode: vertical-rl; /* Vertical labels on desktop */
  text-orientation: mixed;
}

.stats-row:last-child .stats-label {
  border-right: none;
}

.stats-value {
  background: #0f1420;
  padding: 0.4rem 0.15rem;
  color: #f5f7ff;
  text-align: center;
  border: 1px solid #1a213e;
}

.weapon-note {
  font-size: 0.75rem;
  color: #a5acd8;
  margin-top: 0.5rem;
  font-family: monospace;
}

@media (max-width: 600px) {
  .stats-table {
    grid-template-columns: 2.2rem 1fr; /* Mobile: label | value, stacks per row */
    max-width: 100%;
    font-size: 0.75rem;
    padding: 0.4rem;
  }
  
  .stats-label {
    writing-mode: horizontal-tb; /* Horizontal on mobile */
    border-right: 1px solid #3b4061;
    padding: 0.4rem 0.5rem;
    background: #252b4a;
  }
  
  .stats-value {
    padding: 0.4rem 0.5rem;
  }
}
.hvt-stats {
  background: linear-gradient(135deg, #7a1b3b88 0%, #e5737388 100%); /* Red/orange for hostile */
  border-color: #e57373;
}

.hvt-stats .stats-label {
  background: #3b1a28;
  color: #ffb74d; /* Brighter yellow/orange */
  border-right-color: #5a1a2e;
}

.hvt-stats .stats-value {
  background: #2a0f13;
  color: #f5f7ff;
  border-color: #4a1f2b;
}

@media (max-width: 600px) {
  .hvt-stats .stats-label {
    background: #3b1a28;
  }
}


.effects-section {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(37, 43, 74, 0.5); /* #252b4a with transparency */
  border: 1px solid #3b4061;
  border-radius: 6px;
}

.effects-section h4 {
  margin: 0 0 0.5rem 0;
  font-size: 0.85rem;
  color: #ffc107;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.effects-list {
  margin: 0;
  padding-left: 1.25rem;
  list-style: none;
  font-size: 0.82rem;
  line-height: 1.4;
  color: #dde1ff;
}

.effects-list li {
  position: relative;
  padding: 0.3rem 0.5rem 0.3rem 0;
  margin-bottom: 0.25rem;
  background: rgba(21, 26, 53, 0.7); /* #151a35 subtle bg */
  border-left: 3px solid #4caf50; /* Green accent for "effects" */
  border-radius: 0 4px 4px 0;
}

.effects-list li::before {
  content: "•";
  position: absolute;
  left: -1rem;
  color: #4caf50;
  font-weight: bold;
  font-size: 1rem;
}

@media (max-width: 600px) {
  .effects-list {
    font-size: 0.8rem;
    padding-left: 1rem;
  }
  
  .effects-list li {
    padding: 0.4rem 0.6rem;
  }
}
.scenario-unique-skills-container {
  margin: 1rem 0;
}

.skill-alert {
  margin-bottom: 0.75rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #ff980044 0%, #ffc10722 100%);
  border: 1px solid #ffc107;
  border-radius: 6px;
}

.skill-name {
  font-weight: 700;
  color: #ff9800;
  font-size: 0.9rem;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.skill-name::before {
  content: "⚡"; /* Or use SVG icon */
  font-size: 1.1rem;
}

.skill-body {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.skills-section {
  background: rgba(255, 193, 7, 0.08);
  border-radius: 4px;
  padding: 0.5rem;
  border-left: 3px solid #ffc107;
}

.skills-heading {
  margin: 0 0 0.25rem 0;
  font-size: 0.78rem;
  font-weight: 700;
  color: #ffb300;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

.skills-list {
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: #f5f7ff;
}

.skills-list li {
  margin-bottom: 0.2rem;
  padding-left: 1rem;
  position: relative;
}

.skills-list li::before {
  content: "→";
  position: absolute;
  left: 0;
  color: #ffc107;
  font-weight: bold;
}

@media (max-width: 600px) {
  .skill-alert {
    padding: 0.6rem;
  }
  
  .skills-list {
    font-size: 0.75rem;
  }
}
.rules-article {
  margin-bottom: 1rem;
  border: 1px solid #252b4a;
  border-radius: 6px;
  overflow: hidden;
  background: #151a35;
}

.rules-summary {
  padding: 0.75rem 1rem;
  background: #181e3e;
  cursor: pointer;
  list-style: none; /* Hide default marker */
  font-weight: 600;
  color: #f5f7ff;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.95rem;
  transition: background 0.2s ease;
}

.rules-summary:hover {
  background: #1f264d;
}

.rules-summary::-webkit-details-marker {
  display: none; /* Hide default arrow on Webkit */
}

.rules-summary::before {
  content: "▶"; /* Custom chevron */
  font-size: 0.8rem;
  transition: transform 0.2s ease;
  margin-right: 0.25rem;
}

.rules-article[open] .rules-summary::before {
  transform: rotate(90deg);
}

.rules-article article {
  padding: 1rem;
  margin: 0;
}

/* Smooth animation */
.rules-article {
  transition: all 0.2s ease;
}

.rules-icon {
  font-size: 1.1rem;
  width: 1.5rem;
  height: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #252b4a;
  flex-shrink: 0;
}

@media (max-width: 600px) {
  .rules-summary {
    padding: 0.75rem;
    font-size: 0.9rem;
  }
  
  .rules-article article {
    padding: 0.75rem;
  }
}
.speedball-table {
  grid-template-columns: 2.5rem 1fr;
  max-width: 24rem;
  font-size: 0.85rem;
}

.speedball-table .rules-table-row:nth-child(even) > div:last-child {
  background: linear-gradient(90deg, #2f80ed22 0%, #4fc3f722 100%); /* Blue accent */
}

.small-note {
  font-size: 0.78rem;
  color: #c9cfff;
  line-height: 1.4;
  margin-top: 0.75rem;
  font-family: monospace;
}
.scenario-details .section-title {
  color: #ffc107; /* Bright yellow-gold for high contrast */
  font-size: 1.1rem; /* Larger than default */
  font-weight: 700; /* Bolder */
  text-transform: uppercase; /* Emphasize text */
  letter-spacing: 0.5px;
  margin: 0.6rem 0 0.4rem 0;
  padding: 0.3rem 0;
  border-bottom: 2px solid #ffb300; /* Underline glow */
  background: linear-gradient(90deg, rgba(255,193,7,0.2) 0%, transparent 100%);
}

.scenario-details .section-title::before {
  content: "🎯 "; /* Objective emoji/icon */
  font-size: 1rem;
}
.map-diagonal {
  stroke: #ff4444;
  stroke-dasharray: 4, 4;
  opacity: 0.8;
}