/* Map selection shares the native fonts, sprites and stonework of the OSRS UI. */
.campaign-dialog {
  width: min(900px, calc(100vw - 38px));
  max-height: calc(100dvh - 38px);
  padding: 0;
  overflow: hidden;
  border: 3px solid #30271b;
  border-top-color: #8b7b5c;
  border-left-color: #8b7b5c;
  border-radius: 0;
  background: var(--rs-panel) var(--rs-panel-texture);
  box-shadow: 0 0 0 1px #17130f, 0 0 0 4px #61533d, 0 0 0 5px #17130f,
    inset 0 0 0 1px #242018, inset 0 0 0 3px #746147, 4px 6px 0 #0006;
  color: var(--rs-white);
  font: 17px/1.2 var(--rs-font);
  text-shadow: 1px 1px var(--rs-shadow);
  -webkit-font-smoothing: none;
}
.campaign-dialog[open] { display: flex; flex-direction: column; }
.campaign-dialog::backdrop { background: #080604b8; }
.campaign-header {
  display: flex;
  flex: none;
  align-items: center;
  gap: 12px;
  padding: 15px 16px 14px 20px;
  border-bottom: 2px groove #8a7a5d;
}
.campaign-header::before {
  content: '';
  flex: none;
  width: 42px;
  height: 42px;
  background: url('/assets/ui/compass.png') center / contain no-repeat;
  image-rendering: pixelated;
}
.campaign-header > div { flex: 1; min-width: 0; }
.campaign-header h1 {
  margin: 5px 0 0;
  color: var(--rs-yellow);
  font: normal 28px/1 var(--rs-font);
}
.campaign-header .eyebrow {
  margin: 0;
  color: var(--rs-orange);
  font: 13px/1.15 var(--rs-font);
  letter-spacing: 0;
}
.campaign-header button {
  align-self: flex-start;
  flex: none;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: url('/assets/ui/close.png') center / 21px 21px no-repeat;
  box-shadow: none;
  font-size: 0;
  image-rendering: pixelated;
}
.campaign-header button:hover { background-image: url('/assets/ui/close-hover.png'); }
.campaign-body {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-color: #9a8058 #30281d;
  scroll-padding-block: 12px;
}
.campaign-intro {
  margin: 16px 22px 10px;
  color: var(--rs-muted);
  font-size: 16px;
  line-height: 1.3;
}
#campaign-progress {
  display: block;
  margin: 0 22px 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #272117;
  box-shadow: 0 1px #746147;
  color: var(--rs-orange);
  font-size: 16px;
}
.campaign-maps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  padding: 0 16px 16px;
}
.campaign-map {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-width: 0;
  padding: 14px 12px;
  border: 2px solid #211b13;
  border-right-color: #897455;
  border-bottom-color: #897455;
  border-radius: 0;
  background: #3b3226;
  box-shadow: inset 0 0 0 1px #594a35;
  color: var(--rs-white);
  text-align: left;
  font: inherit;
  text-shadow: inherit;
  image-rendering: pixelated;
  transition: none;
  scroll-margin-block: 12px;
}
.campaign-map[data-selected=true] {
  border: 6px solid transparent;
  border-image: url('/assets/ui/button-combat-selected.png') 6 fill stretch;
  padding: 10px 8px;
  background: #6f2118;
  box-shadow: none;
}
.campaign-map:hover:enabled { filter: brightness(1.15); }
.campaign-map:focus-visible {
  outline: 2px solid var(--rs-yellow);
  outline-offset: 2px;
}
.campaign-map:disabled { cursor: default; opacity: 1; }
.campaign-map[data-locked=true] { background: #302b23; box-shadow: inset 0 0 0 1px #443b2c; }
.campaign-number {
  flex: none;
  min-width: 32px;
  padding: 6px 3px;
  border: 2px inset #807153;
  background: #29251e;
  color: var(--rs-orange);
  text-align: center;
  font-size: 20px;
  line-height: 1;
}
.campaign-map[data-selected=true] .campaign-number { color: var(--rs-yellow); }
.campaign-map-content { display: flex; flex: 1; flex-direction: column; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.campaign-map-content strong { color: var(--rs-yellow); font: normal 21px/1.1 var(--rs-font); }
.campaign-map-status { color: var(--rs-orange); font-size: 15px; line-height: 1.15; }
.campaign-map[data-cleared=true] .campaign-map-status { color: #80e858; }
.campaign-map[data-selected=true] .campaign-map-status { color: var(--rs-yellow); }
.campaign-map-description { color: #e0d2b7; font-size: 16px; line-height: 1.25; }
.campaign-map-details { color: #c4b394; font: 14px/1.3 'OSRS Small', monospace; }
.campaign-map-reward {
  margin-top: auto;
  padding-top: 9px;
  border-top: 1px solid #796447;
  color: #ffcf70;
  font-size: 15px;
  line-height: 1.2;
}
.campaign-map[data-locked=true] .campaign-number { color: #aa9a7f; border-color: #625842; }
.campaign-map[data-locked=true] strong { color: #b8ac94; }
.campaign-map[data-locked=true] .campaign-map-description,
.campaign-map[data-locked=true] .campaign-map-details,
.campaign-map[data-locked=true] .campaign-map-reward { color: #b3a58c; }
.campaign-map[data-locked=true] .campaign-map-status { color: #ffad80; }
.campaign-status {
  flex: none;
  margin: 0;
  padding: 12px 20px;
  border-top: 2px groove #8a7a5d;
  color: var(--rs-muted);
  font-size: 15px;
  line-height: 1.2;
}
.campaign-select-button { width: 100%; margin: 8px 0; }
.campaign-clear-note { color: #cfbd84; font-size: 13px; line-height: 1.5; margin: 10px 0 20px; }
.campaign-continue { margin: 8px 0; }
.menu-description { min-height: 40px; }
@media (max-width: 600px) {
  .campaign-dialog { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); }
  .campaign-header { gap: 8px; padding: 12px 9px 12px 12px; }
  .campaign-header::before { width: 32px; height: 32px; }
  .campaign-header h1 { font-size: 24px; }
  .campaign-header .eyebrow { font-size: 12px; }
  .campaign-intro, #campaign-progress { margin-left: 14px; margin-right: 14px; }
  .campaign-maps { grid-template-columns: minmax(0, 1fr); gap: 8px; padding: 0 10px 12px; }
  .campaign-map { padding: 12px 10px; }
  .campaign-map[data-selected=true] { padding: 8px 6px; }
  .campaign-map-content strong { font-size: 20px; }
  .campaign-status { padding: 10px 12px; }
  .campaign-clear-note { font-size: 11px; }
}
@media (max-height: 500px) {
  .campaign-header { padding-top: 8px; padding-bottom: 8px; }
  .campaign-header::before { width: 32px; height: 32px; }
  .campaign-header .eyebrow { display: none; }
  .campaign-header h1 { margin: 0; font-size: 24px; }
  .campaign-status { padding-top: 8px; padding-bottom: 8px; }
}