:root {
  --ink: #294e49;
  --paper: #fcfaf2;
  --muted: #7e9188;
  --accent: #e7ad4f;
}

body {
  color: var(--ink);
  background: #d9e6df;
  font-family: Tahoma, sans-serif;
}

button,
input {
  font: inherit;
}

button {
  cursor: pointer;
}

button:focus-visible,
input:focus-visible {
  outline: 3px solid #dca548;
  outline-offset: 3px;
}

[hidden] {
  display: none !important;
}

#atlas-labels {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

.city-label {
  position: absolute;
  left: 0;
  top: 0;
  border: 1px solid #e6dec4;
  background: #fffcefef;
  color: #354f45;
  border-radius: 8px;
  padding: 4px 8px;
  box-shadow: 0 3px 7px #344a3821;
  pointer-events: auto;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 11px;
  line-height: 1.45;
  will-change: transform;
}

.city-label:hover,
.city-label.selected {
  background: #fff2c6;
  border-color: #b2833a;
  z-index: 4;
}

.city-weather {
  font-family: Tahoma, sans-serif;
  font-size: 10px;
  direction: ltr;
}

.city-weather i {
  font-style: normal;
  font-size: 14px;
}

.region-label {
  position: absolute;
  left: 0;
  top: 0;
  color: #737659;
  font-size: 12px;
  white-space: nowrap;
  text-shadow: 0 1px 4px #fff8;
  letter-spacing: 1px;
}

.region-label.water {
  color: #347f90;
  font-size: 17px;
  font-weight: bold;
  letter-spacing: 2px;
}

.atlas-header {
  position: fixed;
  z-index: 12;
  left: 24px;
  right: 24px;
  top: 20px;
  height: 64px;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 18px;
  background: #fffdf2ef;
  border: 1px solid #ffffffad;
  box-shadow: 0 8px 32px #4b685317;
  border-radius: 16px;
}

.brand-mark {
  width: 40px;
  height: 40px;
  border-radius: 13px 13px 13px 3px;
  background: #365f51;
  color: #fce4ab;
  display: grid;
  place-items: center;
  font-weight: bold;
  font-size: 26px;
}

.atlas-header strong {
  font-size: 20px;
  display: block;
}

.atlas-header div>span {
  font-size: 10px;
  color: #738679;
  display: block;
  margin-top: 5px;
}

.header-divider {
  height: 29px;
  width: 1px;
  background: #d9decf;
  margin: 0 6px;
}

.chapter {
  font-size: 12px;
}

.chapter small {
  font-size: 9px;
  color: #8b9b91;
  margin-right: 10px;
}

#game-mode {
  margin-right: auto;
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #e7ad4f;
  color: #3d2a10;
  border: 1px solid #c9932f;
  transition: background 0.15s ease;
}

#game-mode:hover {
  background: #d99f42;
}

body.game-mode #game-mode {
  background: #fdfbf0;
  color: #3e6756;
  border-color: #c8d1bf;
}

body.game-mode #game-mode:hover {
  background: #eef2e0;
}

.atlas-intro {
  position: fixed;
  left: 36px;
  top: 119px;
  text-align: right;
  z-index: 4;
  pointer-events: none;
}

.eyebrow {
  color: #698b7b;
  font-size: 11px;
}

.atlas-intro h1 {
  font-size: 25px;
  font-weight: 500;
  margin: 11px 0;
}

.atlas-intro p {
  font-size: 11px;
  color: #768876;
}

.atlas-sidebar {
  position: fixed;
  right: 24px;
  top: 105px;
  width: 240px;
  max-height: calc(100dvh - 220px);
  z-index: 5;
  background: #fcfaf0ed;
  backdrop-filter: blur(12px);
  border: 1px solid #fff9;
  border-radius: 16px;
  box-shadow: 0 12px 45px #415d4512;
  padding: 19px 16px 12px;
  display: flex;
  flex-direction: column;
}

.sidebar-title {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title h2 {
  font-size: 16px;
  font-weight: 500;
}

.status-dot {
  width: 7px;
  height: 7px;
  background: #d6a64c;
  border-radius: 50%;
}

#weather-status {
  font-size: 9px;
  color: #879384;
  margin: 10px 0 12px;
  line-height: 1.7;
  min-height: 16px;
}

.weather-source {
  display: flex;
  gap: 6px;
}

.weather-source button {
  font-size: 10px;
  border: 1px solid #dcdcc9;
  color: #5d7765;
  background: #f2f2e5;
  padding: 7px 9px;
  border-radius: 7px;
}

.weather-source button:first-child {
  flex: 1;
  background: #3e6756;
  color: #fff;
  border-color: #3e6756;
}

.weather-source button:disabled {
  opacity: 0.5;
}

#city-search {
  width: 100%;
  background: #eeefe2;
  border: 1px solid transparent;
  padding: 10px;
  border-radius: 8px;
  color: #355247;
  font-size: 10px;
  margin: 14px 0 7px;
}

#weather-list {
  overflow: auto;
  scrollbar-width: thin;
  min-height: 60px;
}

.weather-row {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 90%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid #e3e5d799;
  color: #405d50;
  padding: 12px 2px;
  text-align: right;
  font-size: 11px;
}

.weather-row small {
  font-size: 9px;
  color: #94a08d;
  margin-right: auto;
}

.weather-row b {
  font-size: 12px;
  font-weight: 400;
  direction: ltr;
  width: 45px;
  text-align: left;
}

.weather-row:hover {
  background: #efefdc;
}

.atlas-sidebar footer {
  font-size: 9px;
  color: #94a08e;
  padding-top: 12px;
  display: flex;
  justify-content: space-between;
  gap: 4px;
}

.atlas-sidebar a {
  color: #728b76;
  font-size: 8px;
  text-decoration: none;
}

#zoom-controls {
  top: auto;
  right: 28px;
  bottom: 45px;
  z-index: 8;
  flex-direction: row;
}

#zoom-controls button {
  background: #fcfaf0;
  color: #3c5d50;
  border: 1px solid #d5ddca;
  box-shadow: 0 3px 12px #4d694315;
  border-radius: 12px;
}

#zoom-controls button:hover {
  background: #f1e8c8;
}

.atlas-bottom {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 22px;
  z-index: 5;
  text-align: center;
}

.layer-controls {
  display: flex;
  gap: 5px;
  background: #fdfbf0eb;
  border: 1px solid #fff9;
  border-radius: 14px;
  padding: 7px;
  box-shadow: 0 8px 25px #54734312;
  white-space: nowrap;
}

.layer-controls button {
  border: 0;
  background: transparent;
  padding: 9px 11px;
  border-radius: 8px;
  color: #5e7665;
  font-size: 11px;
}

.layer-controls button[aria-pressed="true"] {
  background: #e5ebd7;
  color: #3c624b;
}

.layer-controls button[aria-pressed="false"] {
  opacity: 0.5;
}

.atlas-bottom p {
  font-size: 9px;
  color: #728777;
  margin: 10px 0 4px;
}

.atlas-bottom small {
  font-size: 8px;
  color: #8f9d89;
}

.compass {
  position: fixed;
  bottom: 37px;
  left: 38px;
  width: 70px;
  height: 86px;
  border: 1px solid #93a28b77;
  border-radius: 40px;
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #52715c;
  gap: 4px;
}

.compass span,
.compass small {
  font-size: 9px;
}

.compass b {
  display: block;
  font-size: 32px;
  font-weight: 400;
  line-height: 32px;
}

#weather-panel-toggle {
  display: none;
}

#city-details {
  position: fixed;
  left: 30px;
  top: 230px;
  width: 220px;
  z-index: 6;
  background: #fcfaf0ef;
  border: 1px solid #fff9;
  border-radius: 16px;
  padding: 18px;
  box-shadow: 0 12px 40px #385d331c;
}

.detail-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 20px;
}

.detail-heading b {
  font-size: 32px;
}

.detail-temp {
  font-size: 31px;
  margin: 14px 0;
  direction: rtl;
}

.detail-temp small {
  font-size: 12px;
  color: #79907d;
}

.detail-roads {
  font-size: 10px;
  padding: 12px 0;
  border-top: 1px solid #e0e4d5;
}

#city-details p {
  font-size: 10px;
  line-height: 1.9;
  color: #83927f;
}

#map-error {
  position: fixed;
  z-index: 100;
  top: 40%;
  left: 15%;
  right: 15%;
  padding: 30px;
  background: #fff4df;
  border-radius: 15px;
  line-height: 2;
  color: #613f22;
}

body:not(.game-mode) #hud-top,
body:not(.game-mode) #hud-bottom,
body:not(.game-mode) .side-panel {
  display: none !important;
}

.game-mode .atlas-sidebar,
.game-mode .atlas-intro,
.game-mode .atlas-bottom,
.game-mode #city-details {
  display: none !important;
}

.game-mode #hud-top {
  top: 97px;
}

.game-mode .side-panel {
  top: 155px;
}

.game-mode .modal {
  color: #ecf0f1;
}

.game-mode #hud-bottom {
  bottom: 22px;
}

.game-mode .side-panel {
  color: #ecf0f1;
}

.game-mode #hud-top {
  color: #ecf0f1;
}

@media (max-width: 1050px) {
  .atlas-sidebar {
    width: 204px;
    right: 16px;
  }

  .atlas-intro {
    left: 22px;
  }

  .atlas-intro h1 {
    font-size: 21px;
  }

  .atlas-bottom {
    left: 43%;
  }

  .layer-controls button {
    padding: 9px 7px;
    font-size: 10px;
  }

  .compass {
    left: 20px;
    bottom: 30px;
  }
}

@media (max-width: 700px) {
  .atlas-header {
    left: 10px;
    right: 10px;
    top: 10px;
    height: 58px;
    padding: 8px 12px;
    gap: 10px;
  }

  .atlas-header strong {
    font-size: 17px;
  }

  .atlas-header div>span {
    font-size: 8px;
  }

  .header-divider,
  .chapter {
    display: none;
  }

  #game-mode {
    padding: 9px;
    font-size: 10px;
  }

  .atlas-intro {
    top: 86px;
    left: 15px;
  }

  .atlas-intro h1 {
    font-size: 18px;
    margin: 6px 0;
  }

  .atlas-intro p {
    font-size: 9px;
  }

  .eyebrow {
    font-size: 9px;
  }

  .atlas-sidebar {
    display: none;
    top: 150px;
    right: 12px;
    width: 220px;
    max-height: calc(100dvh - 280px);
  }

  .atlas-sidebar.open {
    display: flex;
  }

  #weather-panel-toggle {
    display: block;
    position: fixed;
    z-index: 8;
    top: 85px;
    right: 12px;
    border: 1px solid #c9d5bb;
    border-radius: 10px;
    background: #fffbee;
    color: #45614c;
    padding: 10px;
    font-size: 10px;
  }

  .atlas-bottom {
    left: 50%;
    width: calc(100% - 20px);
    bottom: 15px;
  }

  .layer-controls {
    justify-content: center;
    padding: 5px;
    gap: 2px;
  }

  .layer-controls button {
    font-size: 9px;
    padding: 8px 6px;
  }

  .atlas-bottom p {
    font-size: 8px;
  }

  .atlas-bottom small {
    font-size: 7px;
  }

  #zoom-controls {
    right: 12px;
    bottom: 119px;
    gap: 4px;
  }

  #zoom-controls button {
    width: 35px;
    height: 35px;
  }

  .compass {
    bottom: 112px;
    left: 14px;
    width: 48px;
    height: 68px;
  }

  .compass b {
    font-size: 25px;
  }

  .compass span,
  .compass small {
    font-size: 8px;
  }

  #city-details {
    top: auto;
    bottom: 166px;
    left: 12px;
    width: 184px;
    padding: 13px;
  }

  .detail-heading {
    font-size: 16px;
  }

  .detail-temp {
    font-size: 24px;
    margin: 5px 0;
  }

  .city-label {
    font-size: 10px;
    padding: 3px 5px;
  }

  .region-label {
    font-size: 10px;
  }

  .region-label.water {
    font-size: 13px;
  }

  .game-mode #hud-top {
    top: 77px;
  }

  .game-mode .side-panel {
    top: 180px;
    width: calc(100% - 30px);
    max-height: 45dvh;
  }

  .game-mode #weather-panel-toggle {
    display: none;
  }
}

.weather-hidden .city-weather {
  display: none;
}

@font-face {
  font-family: Vazirmatn;
  src: url("vendor/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

body,
.city-weather {
  font-family: Vazirmatn, Tahoma, sans-serif;
}

/* v0.4 toy-board: warm, muted panels, cool slate water, readable asphalt. */
:root {
  --ink: #35483c;
  --paper: #e4decb;
  --muted: #6e7c69;
}

body {
  background: #71939a;
}

.atlas-header,
.atlas-sidebar,
#city-details {
  background: #e6e0cfed;
  border-color: #d6d1be;
  box-shadow: 0 8px 26px #263e3722;
}

.atlas-header {
  backdrop-filter: none;
}

.city-label {
  background: #dfd8bff2;
  border-color: #b9ac88;
  color: #334d3e;
  box-shadow: 0 2px 5px #263a332b;
}

.city-label:hover,
.city-label.selected {
  background: #e5c17e;
  border-color: #99743d;
}

.atlas-intro h1 {
  color: #2d4c43;
}

.atlas-intro p,
.eyebrow {
  color: #45655b;
}

.region-label {
  color: #483f2c;
  text-shadow: 0 1px 2px #e1d8bd80;
}

.region-label.water {
  color: #254b60;
  text-shadow: 0 1px 2px #aac6c5;
}

.layer-controls {
  background: #e5dfcdeb;
  border-color: #b8bda8;
}

.layer-controls button[aria-pressed="true"] {
  background: #bdc8a4;
  color: #344e3f;
}

#city-search {
  background: #d6d7c4;
}

.weather-source button {
  background: #d4d5c0;
}

.compass {
  color: #294f4b;
  border-color: #536d6388;
}

#zoom-controls button {
  background: #ddd9c7;
  color: #355349;
}

.atlas-bottom p,
.atlas-bottom small {
  color: #345b59;
}

#vehicle-demo {
  position: fixed;
  z-index: 7;
  left: 28px;
  top: 220px;
  width: 244px;
  background: #dfd8c6ed;
  border: 1px solid #c8c4ac;
  border-radius: 16px;
  padding: 16px;
  color: #354f41;
  box-shadow: 0 8px 24px #243a3022;
}

#vehicle-demo h2 {
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 12px;
}

.demo-cities {
  display: flex;
  align-items: center;
  gap: 6px;
}

.demo-cities select {
  min-width: 0;
  width: 100%;
  background: #d0d3bb;
  color: #354b3d;
  border: 1px solid #b8bea2;
  padding: 6px;
  border-radius: 7px;
  font: inherit;
  font-size: 11px;
}

.demo-vehicles {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-top: 10px;
}

.demo-vehicles button {
  padding: 9px 5px;
  background: #557760;
  border: 1px solid #496650;
  color: #ece5d3;
  border-radius: 8px;
  font-size: 11px;
}

.demo-vehicles button:hover {
  background: #43634e;
}

#demo-message {
  font-size: 9px;
  line-height: 1.8;
  margin-top: 10px;
  color: #667661;
}

#travel-progress {
  position: fixed;
  z-index: 35;
  left: 50%;
  bottom: 115px;
  transform: translateX(-50%);
  width: 320px;
  max-width: 90vw;
  padding: 16px;
  background: #2e4942ed;
  color: #e4dbc1;
  border: 1px solid #75917d;
  border-radius: 14px;
  text-align: center;
}

#travel-progress strong {
  font-size: 14px;
}

#travel-note {
  font-size: 10px;
  margin: 9px 0;
}

.travel-track {
  height: 5px;
  background: #1d3631;
  border-radius: 8px;
  overflow: hidden;
  direction: ltr;
}

#travel-bar {
  display: block;
  height: 100%;
  width: 0;
  background: #dfaf58;
}

.travelling #vehicle-demo button,
.travelling #hud-bottom button,
.travelling .stage-option {
  pointer-events: none;
  opacity: 0.5;
}

.game-mode #vehicle-demo {
  display: none;
}

.travelling #city-details {
  display: none !important;
}

#city-details {
  top: 445px;
}

@media (max-width: 1050px) {
  #vehicle-demo {
    width: 208px;
    left: 16px;
    top: 205px;
  }
}

@media (max-width: 700px) {
  #vehicle-demo {
    top: auto;
    bottom: 165px;
    left: 10px;
    width: 172px;
    padding: 10px;
  }

  #vehicle-demo h2 {
    font-size: 11px;
    margin-bottom: 8px;
  }

  .demo-vehicles button {
    font-size: 9px;
    padding: 7px 2px;
  }

  #demo-message {
    display: none;
  }

  .demo-cities select {
    font-size: 9px;
    padding: 4px;
  }

  #city-details {
    top: 145px;
    bottom: auto;
    left: 10px;
  }

  #travel-progress {
    bottom: 105px;
  }

  .travelling #vehicle-demo {
    visibility: hidden;
  }
}

/* Strategy map controls */
#map-pan {
  position: fixed;
  left: 112px;
  bottom: 34px;
  z-index: 25;
  display: grid;
  grid-template-columns: 36px 36px 36px;
  gap: 4px;
  direction: ltr
}

#map-pan button {
  height: 34px;
  border: 1px solid #8b9870;
  border-radius: 8px;
  background: #e1dfc7;
  color: #315952;
  font-size: 20px;
  cursor: pointer
}

#map-pan button[data-pan=up] {
  grid-column: 2
}

#map-pan button[data-pan=left] {
  grid-column: 1;
  grid-row: 2
}

#map-pan button[data-pan=down] {
  grid-column: 2;
  grid-row: 2
}

#map-pan button[data-pan=right] {
  grid-column: 3;
  grid-row: 2
}

.city-weather:empty {
  display: none
}

.atlas-bottom p {
  color: #2d534d
}

@media(max-width:700px) {
  #map-pan {
    left: 12px;
    bottom: 105px;
    grid-template-columns: 30px 30px 30px
  }

  .atlas-intro {
    display: none
  }
}

#traveler-badge {
  font-size: 11px;
  background: #ced7ba;
  padding: 7px 12px;
  border-radius: 20px;
  color: #355e50;
  white-space: nowrap
}

.home-pin {
  position: absolute;
  white-space: nowrap;
  background: #345d50;
  color: #f2e4bc;
  border: 1px solid #d9bf7d;
  border-radius: 20px;
  padding: 5px 12px;
  font-size: 11px;
  pointer-events: none;
  box-shadow: 0 3px 12px #233e3830
}

.landmark-title {
  color: #537b71;
  font-weight: bold
}

.mock-search {
  display: flex;
  gap: 5px;
  flex-wrap: wrap
}

.mock-search button {
  border: 1px solid #a6b394;
  border-radius: 7px;
  background: #d9dfc4;
  color: #345b50;
  padding: 7px 10px;
  cursor: pointer;
  font-family: inherit
}

.mock-results {
  font-size: 12px;
  margin-top: 8px
}

.mock-results small {
  color: #748370
}

.city-close {
  position: absolute;
  top: 7px;
  left: 9px;
  border: 0;
  background: transparent;
  color: #476458;
  font-size: 23px;
  cursor: pointer
}

#city-details {
  max-height: 52vh;
  overflow: auto;
  padding-top: 26px
}

@media(max-width:700px) {
  #traveler-badge {
    display: none
  }

  #city-details {
    max-height: 43vh
  }

  .home-pin {
    font-size: 10px
  }
}

.city-label .home-pin {
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  font-weight: normal
}



#resume-banner {
  position: fixed;
  top: 96px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 50;
  background: #fff8e2f0;
  border: 1px solid #d6c890;
  border-radius: 14px;
  padding: 12px 18px;
  box-shadow: 0 8px 28px #4b5d2a28;
  max-width: 560px;
  width: calc(100% - 40px);
  backdrop-filter: blur(8px);
  animation: slideDown 0.4s ease;
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translate(-50%, -20px);
  }

  to {
    opacity: 1;
    transform: translate(-50%, 0);
  }
}

.resume-content {
  display: flex;
  align-items: center;
  gap: 14px;
}

.resume-icon {
  font-size: 26px;
}

.resume-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.resume-text strong {
  font-size: 13px;
  color: #3d5535;
}

.resume-text span {
  font-size: 10px;
  color: #7a8a72;
}

.resume-actions {
  display: flex;
  gap: 6px;
}

.resume-actions button {
  font-size: 11px;
  padding: 8px 14px;
  border-radius: 8px;
  border: 1px solid #b8bea2;
  background: #e8e5d0;
  color: #3d5a41;
  font-family: inherit;
  cursor: pointer;
  transition: all 0.15s;
}

.resume-actions button:hover {
  background: #d5d2b8;
}

#resume-yes {
  background: #3e6756;
  color: #fff;
  border-color: #3e6756;
}

#resume-yes:hover {
  background: #2e5344;
}

#resume-no {
  background: transparent;
  color: #8a6a3a;
  border-color: #d6c890;
}

#resume-no:hover {
  background: #f5ead0;
}

@media (max-width: 700px) {
  #resume-banner {
    top: 78px;
    padding: 10px 12px;
    flex-wrap: wrap;
  }

  .resume-content {
    flex-wrap: wrap;
  }

  .resume-actions {
    width: 100%;
  }

  .resume-actions button {
    flex: 1;
  }
}




/* بنر پایان - گوشه‌ی پایین راست، قابل بستن */
#finish-section {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

#finish-section.hidden {
  display: none !important;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.finish-content {
  background: #1a2c3d;
  border: 1px solid rgba(52, 152, 219, 0.3);
  border-radius: 16px;
  padding: 26px 24px;
  position: relative;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  color: #ecf0f1;
  max-width: 520px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideUp 0.35s ease;
}

.finish-close-btn {
  position: absolute;
  top: 12px;
  left: 12px;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: #bdc3c7;
  font-size: 1.1rem;
  cursor: pointer;
  border-radius: 8px;
  transition: all 0.15s;
  z-index: 2;
}

@keyframes slideUp {
  from { transform: translateY(30px); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}

.finish-close-btn:hover {
  background: rgba(52, 152, 219, 0.2);
  color: #fff;
}

.finish {
  text-align: center;
  padding: 8px 0 4px;
}

.finish.win h2 {
  color: #2ecc71;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.finish.lose h2 {
  color: #e74c3c;
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.finish .stars {
  font-size: 1.8rem;
  margin: 14px 0;
  letter-spacing: 4px;
}

.finish p {
  margin: 6px 0;
  color: #ecf0f1;
  font-size: 0.9rem;
  line-height: 1.7;
}

.finish strong {
  color: #f39c12;
  font-size: 1.05rem;
}

/* دکمه‌های اکشن */
.finish-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
  flex-wrap: wrap;
}

.finish-btn-primary,
.finish-btn-secondary {
  flex: 1;
  min-width: 130px;
  padding: 11px 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}

.finish-btn-primary {
  background: linear-gradient(135deg, #27ae60, #16a085);
  color: #fff;
}

.finish-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #27ae6055;
}

.finish-btn-secondary {
  background: transparent;
  color: #ecf0f1;
  border-color: #7f8c8d;
}

.finish-btn-secondary:hover {
  background: rgba(52, 152, 219, 0.15);
  border-color: #95a5a6;
}

/* موبایل */
@media (max-width: 700px) {
  #finish-section {
    inset: auto 12px 12px 12px;
    width: auto;
  }

  .finish-content {
    padding: 18px 16px;
  }
}

.mode-btn {
  padding: 10px 18px;
  border-radius: 10px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  background: #e7ad4f;
  color: #3d2a10;
  border: 1px solid #c9932f;
}

.mode-btn:hover {
  background: #d99f42;
}



/* ============ مودال انتخاب گزینه ============ */
#option-modal .modal-content {
  max-width: 520px;
  width: 100%;
}

#option-modal-body {
  padding: 18px 20px 22px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.option-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fdfbf0;
  border: 1px solid #d6d1be;
  cursor: pointer;
  transition: all 0.15s ease;
  font-family: inherit;
  color: #354f41;
}

.option-card:hover {
  background: #f5efd8;
  border-color: #b8ac88;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px #4b5d2a18;
}

.option-card.selected {
  background: #e7f0d9;
  border-color: #7a9a5a;
}

.option-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 14px;
}

.option-header strong {
  font-weight: 600;
  color: #2d4c43;
}

.option-price {
  font-weight: 700;
  color: #2ecc71;
  font-size: 14px;
  direction: rtl;
}

.option-info {
  display: flex;
  gap: 14px;
  font-size: 11px;
  color: #6e7c69;
  flex-wrap: wrap;
}

.option-info span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* گروه‌بندی بر اساس کیفیت */
.option-card[data-quality="2"] {
  border-right: 4px solid #c9a142;
}

.option-card[data-quality="3"] {
  border-right: 4px solid #6fa9a3;
}

.option-card[data-quality="4"] {
  border-right: 4px solid #4a86b8;
}

.option-card[data-quality="5"] {
  border-right: 4px solid #9b59b6;
}

/* گزینه‌های خواب داخل وسیله */
.option-card.night-option {
  background: #eef2e5;
  border-color: #a8bca0;
}

.option-card.night-option .option-header strong::after {
  content: " 🌙";
  font-size: 12px;
}


/* توی مودال، لیست جاذبه‌ها */
.modal-hint {
  font-size: 12px;
  color: #6e7c69;
  margin-bottom: 14px;
  text-align: center;
}

.tour-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  padding: 4px;
}

.tour-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: #fdfbf0;
  border: 1px solid #d6d1be;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tour-item:hover {
  background: #f5efd8;
  border-color: #b8ac88;
}

.tour-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #3e6756;
}

.tour-item input[type="checkbox"]:checked~.tour-info strong {
  color: #2ecc71;
}

.tour-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex: 1;
  font-size: 12px;
}

.tour-info strong {
  font-size: 13px;
  color: #2d4c43;
}

.tour-info span {
  font-size: 11px;
  color: #6e7c69;
}

.tour-item-static {
  display: flex;
  justify-content: space-between;
  padding: 10px 14px;
  border-radius: 10px;
  background: #eef2e5;
  border: 1px solid #a8bca0;
  font-size: 12px;
  color: #354f41;
}

.tour-start-btn {
  display: block;
  width: 100%;
  padding: 14px;
  margin-top: 14px;
  background: linear-gradient(135deg, #27ae60, #16a085);
  color: #fff;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tour-start-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px #27ae6055;
}

.tour-start-btn:disabled {
  background: #bdc3c7;
  cursor: not-allowed;
  opacity: 0.6;
}

/* کارت پایان - بخش‌های جدید */
.finish-score {
  font-size: 0.95rem;
  margin: 10px 0;
}

.finish-late-checkout {
  color: #e67e22;
  font-weight: 600;
  font-size: 0.9rem;
  margin: 8px 0;
}

.finish-section {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(52, 152, 219, 0.2);
  text-align: right;
}

.finish-section h3 {
  font-size: 0.95rem;
  color: #9b59b6;
  margin-bottom: 8px;
}

.finish-section p {
  font-size: 0.8rem;
  color: #bdc3c7;
  margin: 4px 0;
  line-height: 1.6;
}

.finish-section strong {
  color: #ecf0f1;
}

/* جزئیات امتیاز */
.finish-breakdown {
  margin-top: 14px;
  padding: 10px 12px;
  background: rgba(52, 152, 219, 0.1);
  border-radius: 8px;
  text-align: right;
  font-size: 0.8rem;
}

.finish-breakdown summary {
  cursor: pointer;
  color: #3498db;
  font-weight: 600;
  list-style: none;
}

.finish-breakdown summary::-webkit-details-marker {
  display: none;
}

.finish-breakdown summary::before {
  content: "▶ ";
  font-size: 0.7rem;
  margin-left: 4px;
}

.finish-breakdown[open] summary::before {
  content: "▼ ";
}

.finish-breakdown ul {
  list-style: none;
  margin-top: 10px;
  padding: 0;
}

.finish-breakdown li {
  padding: 4px 0;
  color: #bdc3c7;
  border-bottom: 1px dashed rgba(52, 152, 219, 0.15);
}

.finish-breakdown li:last-child {
  border-bottom: none;
}

.stay-reason {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  margin: 10px 0 14px;
  background: #fff5e0;
  border-right: 4px solid #e7ad4f;
  border-radius: 10px;
  font-size: 12px;
  color: #6a5230;
  line-height: 1.7;
}

.stay-reason-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.stay-reason p {
  margin: 0;
}


#map-option-cards {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 9;
}

.option-card-map {
  position: absolute;
  left: 0;
  top: 0;
  background: #fff8e2f8;
  border: 2px solid #e7ad4f;
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  cursor: pointer;
  pointer-events: auto;
  box-shadow: 0 4px 16px #4b5d2a30;
  transition: opacity 0.3s ease, transform 0.3s ease, box-shadow 0.2s ease;
  min-width: 150px;
  max-width: 185px;
  font-family: inherit;
  color: #354f41;
  will-change: transform;
}

.option-card-map:hover {
  background: #fff2c6;
  border-color: #b2833a;
  box-shadow: 0 8px 24px #4b5d2a55;
  z-index: 100;
}

.option-card-map[data-quality="2"] { border-right: 5px solid #c9a142; }
.option-card-map[data-quality="3"] { border-right: 5px solid #6fa9a3; }
.option-card-map[data-quality="4"] { border-right: 5px solid #4a86b8; }
.option-card-map[data-quality="5"] { border-right: 5px solid #9b59b6; }

.option-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}

.option-card-header strong {
  font-weight: 600;
}

.option-card-price {
  font-weight: 700;
  color: #2ecc71;
  white-space: nowrap;
  direction: rtl;
}

.option-card-info {
  display: flex;
  gap: 8px;
  font-size: 10px;
  color: #6e7c69;
}

/* خط اتصال کارت به شهر */
.option-card-map::after {
  content: "";
  position: absolute;
  bottom: -22px;
  left: 50%;
  width: 1px;
  height: 22px;
  background: linear-gradient(to bottom, #e7ad4f, transparent);
  opacity: 0.7;
}

/* کارت جاذبه — حالت انتخاب */
.attraction-card {
  cursor: pointer;
  transition: all 0.2s ease;
}

.attraction-card.selected {
  background: #d4e8c8;
  border-color: #5a9a5a;
  border-width: 3px;
  box-shadow: 0 8px 28px #5a9a5a60;
}

.attraction-card.selected .option-card-header strong::before {
  content: "✓ ";
  color: #2e7a2e;
  font-weight: bold;
}

.attraction-card .option-card-price {
  color: #2ecc71;
}

/* پنل خلاصه‌ی شهرگردی */
.tour-summary-panel {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  background: #fdfbf0;
  border-radius: 10px;
  border: 1px solid #d6d1be;
}

.tour-stat {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 6px 8px;
  background: #f5efd8;
  border-radius: 6px;
}

.tour-stat-label {
  font-size: 10px;
  color: #7a8a72;
}

.tour-stat-value {
  font-size: 13px;
  font-weight: 700;
  color: #2d4c43;
}

/* atlas.css — برچسب قله */
.peak-label {
  position: absolute;
  left: 0;
  top: 0;
  color: #4a3a2a;
  font-size: 11px;
  font-weight: bold;
  white-space: nowrap;
  text-shadow: 0 1px 3px #fff8;
  letter-spacing: 0.5px;
  pointer-events: none;
  background: rgba(255, 255, 255, 0.7);
  padding: 2px 6px;
  border-radius: 4px;
  border: 1px solid #d0c0a0;
}