/* Join confirmation only. No changes to selection or gameplay behavior. */
.modal-overlay.active[b-ncg18fu9cu]:has(#step-3) {
  background: rgba(25, 40, 30, .42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.join-modal-content[b-ncg18fu9cu]:has(#step-3) {
  width: min(100%, 32rem);
  max-width: 32rem;
  border: 1px solid #d5d6c5;
  border-radius: 18px;
  background: #fcfaf5;
  box-shadow: 0 20px 65px rgba(20, 41, 27, .22);
  overflow: hidden;
  color: #273c30;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-3) .join-header {
  display: block;
  height: auto;
  position: relative;
  padding: 20px 24px 17px;
  background: #f5f2e9;
  border-bottom: 1px solid #e2dfd1;
  min-height: 0;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-3) #join-dialog-title {
  margin: 0;
  padding: 0 0 0 40px;
  text-align: right;
  color: #263f2f;
  font-size: 23px;
  line-height: 1.5;
  font-weight: 800;
  text-shadow: none;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-3) #join-dialog-title::before {
  content: "الخطوة الأخيرة";
  display: block;
  margin-bottom: 3px;
  color: #66765b;
  font-size: 12px;
  font-weight: 500;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-3) .join-close {
  position: absolute;
  top: 22px;
  left: 19px;
  right: auto;
  width: 38px;
  height: 38px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #d7dacb;
  border-radius: 50%;
  background: #fffefa;
  box-shadow: none;
  color: #4e624f;
  font-size: 17px;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-3) .join-body {
  padding: 20px 24px 24px;
  background: #fcfaf5;
}
#step-3[b-ncg18fu9cu] { text-align: right; }
#step-3[b-ncg18fu9cu] .join-desc {
  margin: 0 0 20px !important;
  color: #657064;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.9;
  text-align: right;
  text-wrap: pretty;
}
#step-3[b-ncg18fu9cu] .confirm-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 0 0 24px;
}
#step-3[b-ncg18fu9cu] .confirm-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 7px;
  min-width: 0;
  margin: 0;
  padding: 15px 16px;
  border: 1px solid #dbe0d1;
  border-radius: 11px;
  background: #f1f3e9;
  color: #284431;
  text-align: right;
  box-shadow: none;
  cursor: pointer;
  transition: background .18s ease, border-color .18s ease;
}
#step-3[b-ncg18fu9cu] .confirm-card::before {
  display: block;
  color: #687660;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
}
#step-3[b-ncg18fu9cu] .confirm-card:first-child::before { content: "موقع البداية"; }
#step-3[b-ncg18fu9cu] .confirm-card:nth-child(2)::before { content: "القبيلة"; }
#step-3[b-ncg18fu9cu] .confirm-card h4 {
  margin: 0;
  color: #284431 !important;
  font-size: 17px;
  line-height: 1.5;
  font-weight: 700;
}
#step-3[b-ncg18fu9cu] .confirm-change {
  display: inline-block;
  padding: 0;
  color: #507443;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  text-decoration: underline;
  text-underline-offset: 3px;
}
#step-3[b-ncg18fu9cu] .input-group { margin: 0; width: 100%; }
#step-3[b-ncg18fu9cu] .input-group label {
  display: block;
  margin: 0 0 9px;
  color: #344735;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 700;
}
#step-3[b-ncg18fu9cu] #membership-name {
  display: block;
  box-sizing: border-box;
  width: 100%;
  min-height: 50px;
  padding: 11px 14px;
  border: 1px solid #b9c5b1;
  border-radius: 10px;
  background: #fffefa;
  box-shadow: inset 0 1px 2px rgba(35, 63, 40, .025);
  color: #263b2e;
  font: inherit;
  font-size: 16px;
  line-height: 1.5;
  text-align: right;
  outline: none;
}
#step-3[b-ncg18fu9cu] #membership-name:focus {
  border-color: #39734f;
  box-shadow: 0 0 0 3px rgba(57, 115, 79, .14);
}
#step-3[b-ncg18fu9cu] .info-alert:has(.fa-circle-info) {
  display: flex;
  align-items: baseline;
  gap: 7px;
  margin: 10px 0 22px !important;
  padding: 0;
  border: 0;
  background: transparent;
  color: #6a7567;
  font-size: 12px;
  line-height: 1.7;
  font-weight: 400;
  box-shadow: none;
}
#step-3[b-ncg18fu9cu] .info-alert .fa-circle-info { color: #66835a; }
#step-3[b-ncg18fu9cu] .btn-classic-game {
  width: 100%;
  min-height: 52px;
  margin: 0;
  padding: 13px 20px;
  border: 1px solid #28563c;
  border-radius: 10px;
  background: #2d6346;
  background-image: none;
  color: #fffef6;
  font-family: inherit;
  font-size: 18px;
  line-height: 1.4;
  font-weight: 700;
  text-shadow: none;
  box-shadow: 0 5px 14px rgba(31, 79, 49, .13);
  transition: background .18s ease, transform .18s ease;
}
#step-3[b-ncg18fu9cu] .btn-classic-game:disabled { opacity: .6; cursor: wait; }
#step-3[b-ncg18fu9cu] .btn-classic-game:active:not(:disabled) { transform: translateY(1px); }
.join-modal-content[b-ncg18fu9cu]:has(#step-3) button:focus-visible {
  outline: 3px solid #96b99c;
  outline-offset: 3px;
}
@media (hover: hover) {
  #step-3[b-ncg18fu9cu] .confirm-card:hover { border-color: #93ab86; background: #eaf0e1; }
  #step-3[b-ncg18fu9cu] .btn-classic-game:hover:not(:disabled) { background: #244f38; }
}
@media (max-width: 480px) {
  .join-modal-content[b-ncg18fu9cu]:has(#step-3) { border-radius: 15px; }
  .join-modal-content[b-ncg18fu9cu]:has(#step-3) .join-header { padding: 17px 20px 15px; }
  .join-modal-content[b-ncg18fu9cu]:has(#step-3) .join-body { padding: 18px 20px 21px; }
  .join-modal-content[b-ncg18fu9cu]:has(#step-3) .join-close { top: 21px; left: 16px; }
  #step-3[b-ncg18fu9cu] .confirm-cards { gap: 10px; margin-bottom: 21px; }
  #step-3[b-ncg18fu9cu] .confirm-card { padding: 13px 12px; }
  #step-3[b-ncg18fu9cu] .confirm-card h4 { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
  #step-3[b-ncg18fu9cu] button { transition: none; }
}


/* Centered Arabic typography for the two selected choices only. */
@font-face {
  font-family: "MamlukChoice";
  src: url("/fonts/Lalezar-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
#step-3[b-ncg18fu9cu] .confirm-card {
  align-items: center;
  justify-content: center;
  min-height: 122px;
  padding: 16px 12px;
  gap: 9px;
  text-align: center;
  font-family: Tahoma, Arial, sans-serif;
  box-sizing: border-box;
}
#step-3[b-ncg18fu9cu] .confirm-card::before {
  width: fit-content;
  min-width: 64px;
  padding-bottom: 8px;
  border-bottom: 1px solid #dce2d3;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  font-weight: 400;
  text-align: center;
  line-height: 1.6;
  color: #68745f;
}
#step-3[b-ncg18fu9cu] .confirm-card h4,
#step-3[b-ncg18fu9cu] .confirm-card h4 span {
  display: block;
  width: 100%;
  margin: 0;
  font-family: "MamlukChoice", Tahoma, Arial, sans-serif;
  font-size: 24px;
  font-weight: 400;
  line-height: 1.4;
  text-align: center;
  color: #284431 !important;
  text-wrap: balance;
}
#step-3[b-ncg18fu9cu] .confirm-change {
  align-self: center;
  margin: 0;
  padding: 2px 8px;
  font-family: Tahoma, Arial, sans-serif;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
  color: #4b6c40;
}
@media (max-width: 480px) {
  #step-3[b-ncg18fu9cu] .confirm-card { min-height: 118px; padding: 14px 10px; gap: 8px; }
  #step-3[b-ncg18fu9cu] .confirm-card h4,
  #step-3[b-ncg18fu9cu] .confirm-card h4 span { font-size: 22px; }
}


/* Tribe selection: readable labels, eight visible choices, one scrolling body. */
.modal-overlay.active[b-ncg18fu9cu]:has(#step-1) {
  background: rgba(25,40,30,.42);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) {
  width: min(100%,44rem);
  max-width: 44rem;
  border: 1px solid #d5d6c5;
  border-radius: 18px;
  background: #fcfaf5;
  box-shadow: 0 20px 65px rgba(20,41,27,.22);
  overflow: hidden;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) .join-header {
  position: relative;
  display: block;
  height: auto;
  min-height: 0;
  padding: 18px 24px 16px;
  background: #f5f2e9;
  border-bottom: 1px solid #e2dfd1;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) #join-dialog-title {
  margin: 0;
  padding: 0 0 0 40px;
  text-align: right;
  font-family: "MamlukChoice",Tahoma,Arial,sans-serif;
  font-size: 27px;
  font-weight: 400;
  line-height: 1.4;
  color: #263f2f;
  text-shadow: none;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) #join-dialog-title::before {
  content: "الخطوة الأولى";
  display: block;
  margin-bottom: 4px;
  color: #66765b;
  font: 12px/1.5 Tahoma,Arial,sans-serif;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) .join-close {
  position: absolute;
  top: 22px;
  left: 19px;
  right: auto;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid #d7dacb;
  border-radius: 50%;
  background: #fffefa;
  color: #4e624f;
  font-size: 17px;
  box-shadow: none;
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) .join-body {
  padding: 20px 24px 12px;
  background: #fcfaf5;
}
#step-1[b-ncg18fu9cu] { min-width: 0; }
#step-1[b-ncg18fu9cu] .join-desc {
  margin: 0 0 18px;
  color: #657064;
  font: 13px/1.9 Tahoma,Arial,sans-serif;
  text-align: right;
}
#step-1[b-ncg18fu9cu] .tribe-selectors {
  display: grid !important;
  grid-template-columns: repeat(4,minmax(0,1fr));
  gap: 10px !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 0 20px;
}
#step-1[b-ncg18fu9cu] .tribe-btn {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 4px;
  box-sizing: border-box;
  width: 100%;
  height: auto;
  min-width: 0;
  min-height: 150px;
  margin: 0;
  padding: 12px 6px 8px;
  border: 2px solid #e0e3d7;
  border-radius: 12px;
  background: #fffefa;
  box-shadow: none;
  overflow: hidden;
  transform: none;
  transition: background .18s ease,border-color .18s ease;
}
#step-1[b-ncg18fu9cu] .tribe-btn img {
  display: block;
  position: static;
  width: 100%;
  height: 92px;
  min-height: 0;
  margin: 0;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  object-position: center;
  transform: none;
}
#step-1[b-ncg18fu9cu] .tribe-btn-label {
  position: static;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 100%;
  min-height: 2.4em;
  max-width: none;
  margin: 0;
  padding: 0 2px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: #304b36;
  font-family: "MamlukChoice",Tahoma,Arial,sans-serif;
  font-size: 21px;
  font-weight: 400;
  line-height: 1.2;
  text-align: center;
  text-shadow: none;
  transform: none;
  white-space: normal;
  opacity: 1;
}
#step-1[b-ncg18fu9cu] .tribe-btn.active {
  border-color: #4c7a4e;
  background: #edf3e6;
  box-shadow: 0 0 0 2px rgba(76,122,78,.08);
}
#step-1[b-ncg18fu9cu] .tribe-btn.active::after {
  content: "✓";
  position: absolute;
  top: 5px;
  right: 5px;
  display: grid;
  place-items: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #39714a;
  color: white;
  font: 12px/1 Arial,sans-serif;
}
#step-1[b-ncg18fu9cu] .tribe-details {
  display: block;
  margin: 0;
  padding: 17px 18px;
  border: 1px solid #e0e3d5;
  border-radius: 12px;
  background: #f3f4eb;
  color: #394b3b;
  text-align: right;
}
#step-1[b-ncg18fu9cu] .tribe-details-text { width: 100%; min-width: 0; }
#step-1[b-ncg18fu9cu] .tribe-details-icon { display: none; }
#step-1[b-ncg18fu9cu] .tribe-details h3,
#step-1[b-ncg18fu9cu] .tribe-details h3 span {
  margin: 0 0 8px;
  font: 25px/1.5 "MamlukChoice",Tahoma,Arial,sans-serif;
  color: #315b3d;
}
#step-1[b-ncg18fu9cu] .tribe-traits {
  margin: 0;
  padding: 0 18px 0 0;
  font: 13px/1.9 Tahoma,Arial,sans-serif;
}
#step-1[b-ncg18fu9cu] .tribe-traits li { margin: 0 0 7px; }
#step-1[b-ncg18fu9cu] .tribe-traits li:last-child { margin-bottom: 0; color: #687260; }
#step-1[b-ncg18fu9cu] > div:last-child {
  position: sticky;
  bottom: -12px;
  z-index: 1;
  margin-top: 14px !important;
  padding: 12px 0;
  background: #fcfaf5;
}
#step-1[b-ncg18fu9cu] .btn-classic-game {
  width: 100%;
  min-height: 50px;
  margin: 0;
  padding: 12px 20px;
  border: 1px solid #28563c;
  border-radius: 10px;
  background: #2d6346;
  background-image: none;
  color: #fffef6;
  font: 700 17px/1.5 Tahoma,Arial,sans-serif;
  text-shadow: none;
  box-shadow: 0 4px 12px rgba(31,79,49,.12);
}
.join-modal-content[b-ncg18fu9cu]:has(#step-1) button:focus-visible {
  outline: 3px solid #96b99c;
  outline-offset: 2px;
}
@media (max-width:480px) {
  .join-modal-content[b-ncg18fu9cu]:has(#step-1) { border-radius: 15px; }
  .join-modal-content[b-ncg18fu9cu]:has(#step-1) .join-header { padding: 16px 18px 14px; }
  .join-modal-content[b-ncg18fu9cu]:has(#step-1) .join-body { padding: 16px 16px 10px; }
  .join-modal-content[b-ncg18fu9cu]:has(#step-1) .join-close { top: 20px; left: 15px; }
  #step-1[b-ncg18fu9cu] .tribe-selectors { gap: 7px !important; }
  #step-1[b-ncg18fu9cu] .tribe-btn { min-height: 119px; padding: 9px 3px 6px; border-radius: 9px; }
  #step-1[b-ncg18fu9cu] .tribe-btn img { height: 64px; }
  #step-1[b-ncg18fu9cu] .tribe-btn-label { font-size: 18px; }
  #step-1[b-ncg18fu9cu] .tribe-details { padding: 14px; }
  #step-1[b-ncg18fu9cu] .tribe-traits { font-size: 12.5px; }
}
@media (hover:hover) {
  #step-1[b-ncg18fu9cu] .tribe-btn:hover { border-color:#91ab85; background:#f1f5e9; }
  #step-1[b-ncg18fu9cu] .btn-classic-game:hover { background:#244f38; }
}
@media (prefers-reduced-motion:reduce) {
  #step-1[b-ncg18fu9cu] .tribe-btn { transition:none; }
}

/* Center the tribe selection continue action and its label. */
#step-1[b-ncg18fu9cu] .btn-classic-game {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 17rem;
  margin: 0 auto;
  text-align: center;
}

/* Center the final join action without changing its behavior. */
#step-3[b-ncg18fu9cu] .btn-classic-game {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 17rem;
  margin: 0 auto;
  text-align: center;
}

/* Spawn selection: presentation only; quadrant order and handlers unchanged. */
.modal-overlay[b-ncg18fu9cu]:has(#step-2) { background:rgba(25,40,30,.42);backdrop-filter:blur(3px); }
.join-modal-content[b-ncg18fu9cu]:has(#step-2) { width:min(100%,32rem);border:1px solid #d5d6c5;border-radius:18px;background:#fcfaf5;box-shadow:0 18px 60px rgba(25,40,30,.2); }
.join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-header { display:block;height:auto;position:relative;padding:20px 24px 17px;background:#fcfaf5;border-bottom:1px solid #e4e4d8; }
.join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-header h2 { margin:0;padding-left:40px;text-align:right;color:#294a35;font-family:"MamlukChoice",Tahoma,sans-serif;font-size:27px;font-weight:400;line-height:1.5; }
.join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-header h2::before { content:"الخطوة الثانية";display:block;margin-bottom:2px;color:#7b826f;font:12px/1.6 Tahoma,sans-serif; }
.join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-close { position:absolute;left:19px;right:auto;top:22px;width:38px;height:38px;border:1px solid #d8ddcf;border-radius:50%;background:#f4f3eb;color:#52614e; }
.join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-body { padding:20px 24px 24px;background:#fcfaf5; }
#step-2[b-ncg18fu9cu] .join-desc { margin:0 0 18px;color:#697361;text-align:center;font:13px/1.9 Tahoma,sans-serif; }
#step-2[b-ncg18fu9cu] .map-selector { max-width:100%;margin:0 0 18px;border:0;border-radius:12px;background:transparent; }
#step-2[b-ncg18fu9cu] .map-selector-img { position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.12;pointer-events:none; }
#step-2[b-ncg18fu9cu] .map-selector-overlay { position:relative;inset:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:repeat(2,1fr);gap:10px;direction:ltr; }
#step-2[b-ncg18fu9cu] .map-quadrant { min-width:0;min-height:126px;padding:14px 8px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:2px solid #d9ddcf;border-radius:12px;background:rgba(247,247,239,.96);color:#40543b;transition:background-color .15s,border-color .15s; }
#step-2[b-ncg18fu9cu] .map-quadrant::before { content:"↖";font:25px/1.1 Tahoma,sans-serif;color:#758665; }
#step-2[b-ncg18fu9cu] .map-quadrant:nth-child(2)::before { content:"↗"; }
#step-2[b-ncg18fu9cu] .map-quadrant:nth-child(3)::before { content:"↙"; }
#step-2[b-ncg18fu9cu] .map-quadrant:nth-child(4)::before { content:"↘"; }
#step-2[b-ncg18fu9cu] .map-quadrant:hover { border-color:#8b9f7d;background:#eff3e7; }
#step-2[b-ncg18fu9cu] .map-quadrant.active { border-color:#4c7a4e;background:#eaf2e2;box-shadow:inset 0 0 0 1px rgba(76,122,78,.08); }
#step-2[b-ncg18fu9cu] .map-quadrant.active::after { content:"✓";position:absolute;top:7px;right:9px;color:#3d7046;font:700 15px/1 Tahoma,sans-serif; }
#step-2[b-ncg18fu9cu] .quadrant-label,
#step-2[b-ncg18fu9cu] .map-quadrant.active .quadrant-label { padding:0;border:0;border-radius:0;background:transparent;color:#2c4c36;font-family:"MamlukChoice",Tahoma,sans-serif;font-size:24px;font-weight:400;line-height:1.45;text-align:center;direction:rtl; }
#step-2[b-ncg18fu9cu] .map-recommended { position:static;transform:none;padding:2px 9px;border:1px solid #dcd7b6;border-radius:20px;background:#f2edda;color:#756638;font:11px/1.5 Tahoma,sans-serif; }
#step-2[b-ncg18fu9cu] .btn-classic-game { display:flex;align-items:center;justify-content:center;width:100%;max-width:17rem;min-height:52px;margin:0 auto;padding:10px 18px;border:1px solid #27553c;border-radius:10px;background:#2d6346;color:#fff;box-shadow:0 3px 8px rgba(32,66,43,.12);font:700 18px/1.6 Tahoma,sans-serif;text-align:center; }
#step-2[b-ncg18fu9cu] .btn-classic-game:hover { background:#25543b; }
#step-2[b-ncg18fu9cu] button:focus-visible { outline:3px solid #a8be8c;outline-offset:3px; }
@media(max-width:540px) {
 .join-modal-content[b-ncg18fu9cu]:has(#step-2) { border-radius:15px; }
 .join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-header { padding:17px 20px 15px; }
 .join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-body { padding:18px 20px 21px; }
 #step-2[b-ncg18fu9cu] .map-quadrant { min-height:116px; }
 #step-2[b-ncg18fu9cu] .quadrant-label { font-size:22px; }
}
@media(prefers-reduced-motion:reduce) { #step-2[b-ncg18fu9cu] .map-quadrant { transition:none; } }

@media(max-width:540px) and (max-height:600px) {
 .join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-header { padding:12px 20px 10px; }
 .join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-body { padding:12px 20px 15px; }
 #step-2[b-ncg18fu9cu] .join-desc { font-size:12px;line-height:1.7;margin-bottom:12px; }
 #step-2[b-ncg18fu9cu] .map-selector { margin-bottom:12px; }
 #step-2[b-ncg18fu9cu] .map-quadrant { min-height:98px;padding:8px 6px;gap:2px; }
 #step-2[b-ncg18fu9cu] .map-quadrant::before { font-size:20px; }
 #step-2[b-ncg18fu9cu] .quadrant-label,
 #step-2[b-ncg18fu9cu] .map-quadrant.active .quadrant-label { font-size:21px;line-height:1.3; }
 #step-2[b-ncg18fu9cu] .map-recommended { font-size:10px;padding:1px 7px; }
}

.join-modal-content[b-ncg18fu9cu]:has(#step-2) .join-header h2 { padding-left:36px;padding-right:36px;text-align:center; }