/* ===================================================================== */
/* Region Lock dialog (#region-lock-modal .rl-dlg): same fantasy frame as */
/* the Drop / Delete dialog (drop-dialog.css). Presentation only; ids     */
/* and behaviour live in items.js. Scoped with "body :is(#region-lock-modal, #lock-modal)"  */
/* so it beats the "body.in-game #region-lock-modal *" reset rules.       */
/* ===================================================================== */

body :is(#region-lock-modal, #lock-modal).rl-overlay{
  --u: clamp(4.4px, min(8px, 1.05vh, 1.2vw), 8px);
  background:
    radial-gradient(circle at 20% 0%, rgba(73, 168, 255, 0.18), transparent 28%),
    radial-gradient(circle at 80% 0%, rgba(34, 199, 255, 0.12), transparent 24%),
    rgba(2, 10, 18, 0.74) !important;
  animation: rl-overlay-in 220ms ease-out both;
}
body :is(#region-lock-modal, #lock-modal) .rl-dlg{
  position: relative !important;
  box-sizing: border-box !important;
  display: flex;
  flex-direction: column;
  width: calc(var(--u) * 66) !important;
  max-width: 100% !important;
  max-height: calc(100% - var(--u) * 7) !important;
  margin: calc(var(--u) * 4) 0 0 !important;
  overflow: visible !important;
  padding: calc(var(--u) * 6) calc(var(--u) * 3) calc(var(--u) * 3) !important;
  border: calc(var(--u) * 0.9) solid #2f93ff !important;
  border-radius: calc(var(--u) * 3) !important;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(90, 170, 255, 0.22), transparent 60%),
    linear-gradient(180deg, #123c72 0%, #0b2750 52%, #081b38 100%) !important;
  box-shadow:
    0 0 0 calc(var(--u) * 0.4) #082f66,
    0 calc(var(--u) * 3.4) calc(var(--u) * 8) rgba(0, 0, 0, 0.6),
    inset 0 0 0 calc(var(--u) * 0.3) rgba(150, 210, 255, 0.35),
    inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.08) !important;
  color: #eaf7ff !important;
  font-family: Georgia, "Times New Roman", serif !important;
  animation: rl-panel-in 220ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
}
body :is(#region-lock-modal, #lock-modal) .rl-dlg *{ box-sizing: border-box; }
body :is(#region-lock-modal, #lock-modal) .rl-defs{ position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }

/* ---- stone header + gold lock ---- */
body :is(#region-lock-modal, #lock-modal) .rl-header{
  position: absolute !important;
  left: 0;
  right: 0;
  top: calc(var(--u) * -3.6);
  display: flex;
  justify-content: center;
  pointer-events: none;
  z-index: 3;
}
body :is(#region-lock-modal, #lock-modal) .rl-title{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(var(--u) * 1.8);
  margin: 0 !important;
  min-width: calc(var(--u) * 36);
  padding: calc(var(--u) * 1.2) calc(var(--u) * 5.4) calc(var(--u) * 1.6) !important;
  text-align: center;
  font-family: Georgia, "Times New Roman", serif !important;
  font-size: calc(var(--u) * 4.6) !important;
  font-weight: 900 !important;
  letter-spacing: 0.06em;
  line-height: 1.1 !important;
  color: #f4fbff !important;
  -webkit-text-stroke: calc(var(--u) * 0.45) #0a1c3c;
  paint-order: stroke fill;
  text-shadow: 0 calc(var(--u) * 0.5) 0 rgba(6, 14, 34, 0.85) !important;
  background:
    linear-gradient(115deg, transparent 18%, rgba(0, 0, 0, 0.22) 18.4%, transparent 19.4%, transparent 62%, rgba(0, 0, 0, 0.18) 62.4%, transparent 63.4%),
    linear-gradient(180deg, #8c93a0 0%, #626a78 48%, #454c58 100%);
  border: calc(var(--u) * 0.45) solid #1b2029;
  border-radius: calc(var(--u) * 1.2);
  clip-path: polygon(3.5% 0, 96.5% 0, 100% 24%, 100% 76%, 96.5% 100%, 3.5% 100%, 0 76%, 0 24%);
  filter: drop-shadow(0 calc(var(--u) * 0.7) 0 rgba(0, 0, 0, 0.45)) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-title-ico{ display: block; width: calc(var(--u) * 6); height: calc(var(--u) * 6); flex: 0 0 auto; }
body :is(#region-lock-modal, #lock-modal) .rl-title-ico svg{ display: block; width: 100%; height: 100%; filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(20, 10, 0, 0.7)); }

/* ---- close (X) ---- */
body :is(#region-lock-modal, #lock-modal) .rl-close{
  position: absolute !important;
  top: calc(var(--u) * -2.6);
  right: calc(var(--u) * -2.6);
  z-index: 5;
  width: calc(var(--u) * 6.8) !important;
  height: calc(var(--u) * 6.8) !important;
  min-height: 0 !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--u) * 1.6) !important;
  border: calc(var(--u) * 0.5) solid #fff !important;
  background: linear-gradient(180deg, #ff6a5c 0%, #d3201a 52%, #a31410 100%) !important;
  box-shadow: 0 0 0 calc(var(--u) * 0.35) #4a1210, 0 calc(var(--u) * 0.7) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.5), inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff !important;
  font: 900 calc(var(--u) * 3.8)/1 Georgia, serif !important;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.6) !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
body :is(#region-lock-modal, #lock-modal) .rl-close:hover{ transform: scale(1.08); filter: brightness(1.12) !important; }
body :is(#region-lock-modal, #lock-modal) .rl-close:active{ transform: scale(0.94); }

/* ---- leaves ---- */
body :is(#region-lock-modal, #lock-modal) .rl-leaves{
  position: absolute !important;
  z-index: 4;
  width: calc(var(--u) * 14);
  height: calc(var(--u) * 10.8);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.35)) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-leaves-tl{ left: calc(var(--u) * -4.8); top: calc(var(--u) * -4); }
body :is(#region-lock-modal, #lock-modal) .rl-leaves-tr{ right: calc(var(--u) * 2.4); top: calc(var(--u) * -3.8); transform: scaleX(-1); width: calc(var(--u) * 10); height: calc(var(--u) * 7.8); }
body :is(#region-lock-modal, #lock-modal) .rl-leaves-bl{ left: calc(var(--u) * -4.8); bottom: calc(var(--u) * -4.6); transform: scaleY(-1); }
body :is(#region-lock-modal, #lock-modal) .rl-leaves-br{ right: calc(var(--u) * -4.8); bottom: calc(var(--u) * -4.6); transform: scale(-1, -1); }

/* ---- lock information ---- */
body :is(#region-lock-modal, #lock-modal) .rl-info{
  flex: 0 0 auto;
  margin: 0 0 calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.3) solid rgba(120, 190, 255, 0.3);
  background: linear-gradient(180deg, rgba(4, 14, 32, 0.7), rgba(6, 20, 42, 0.55));
  box-shadow: inset 0 calc(var(--u) * 0.4) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-info-row{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: calc(var(--u) * 2);
}
body :is(#region-lock-modal, #lock-modal) .rl-info-main{ min-width: 0; }
body :is(#region-lock-modal, #lock-modal) .rl-type{
  font-size: calc(var(--u) * 4);
  font-weight: 900;
  line-height: 1.1;
  color: #fff;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.55) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-owner{
  margin-top: calc(var(--u) * 0.6);
  font-size: calc(var(--u) * 3.2);
  font-weight: 700;
  color: rgba(222, 236, 250, 0.9);
  overflow-wrap: anywhere;
}
body :is(#region-lock-modal, #lock-modal) .rl-owner b{ color: #ffe47a; font-weight: 900; }
body :is(#region-lock-modal, #lock-modal) .rl-status{ opacity: 0.85; font-size: calc(var(--u) * 3.2); }
body :is(#region-lock-modal, #lock-modal) .rl-badge{
  flex: 0 0 auto;
  padding: calc(var(--u) * 0.7) calc(var(--u) * 2.4) calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 1.2);
  border: calc(var(--u) * 0.4) solid;
  font-size: calc(var(--u) * 3.4);
  font-weight: 900;
  letter-spacing: 0.06em;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.6) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-badge.is-private{ color: #ff9d94; border-color: #d3301f; background: linear-gradient(180deg, rgba(110, 14, 14, 0.85), rgba(62, 8, 10, 0.9)); }
body :is(#region-lock-modal, #lock-modal) .rl-badge.is-public{ color: #a9f5b4; border-color: #1fa83a; background: linear-gradient(180deg, rgba(14, 90, 34, 0.85), rgba(8, 54, 22, 0.9)); }

/* ---- actions ---- */
body :is(#region-lock-modal, #lock-modal) .rl-actions{ flex: 0 0 auto; margin: 0 0 calc(var(--u) * 1.6); }
body :is(#region-lock-modal, #lock-modal) .rl-actions:empty{ display: none; }
body :is(#region-lock-modal, #lock-modal) .rl-area{
  margin-top: calc(var(--u) * 0.8);
  padding-top: calc(var(--u) * 0.8);
  border-top: calc(var(--u) * 0.25) solid rgba(120, 190, 255, 0.2);
  font-size: calc(var(--u) * 2.9);
  font-weight: 800;
  color: #cfe6ff;
}
body :is(#region-lock-modal, #lock-modal) .rl-btn-row{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: calc(var(--u) * 1.8); }
body :is(#region-lock-modal, #lock-modal) .rl-btn{
  position: relative;
  overflow: hidden;
  min-height: calc(var(--u) * 7);
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.2) calc(var(--u) * 0.9);
  border-radius: calc(var(--u) * 2);
  border: calc(var(--u) * 0.45) solid #0b2c5e;
  font: 900 calc(var(--u) * 3)/1.05 Georgia, serif;
  letter-spacing: 0;
  color: #fff;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 20, 60, 0.85) !important;
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
body :is(#region-lock-modal, #lock-modal) .rl-btn::before{
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0) 40%);
  pointer-events: none;
}
body :is(#region-lock-modal, #lock-modal) .rl-btn-blue{
  background: linear-gradient(180deg, #4aa6ff 0%, #2677e6 50%, #1757bd 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #061a38, 0 calc(var(--u) * 0.9) 0 calc(var(--u) * 0.3) #061a38, inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.45) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-btn-green{
  border-color: #0b4a1a;
  background: linear-gradient(180deg, #7dff6a 0%, #2fd13f 48%, #139a28 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #062a10, 0 calc(var(--u) * 0.9) 0 calc(var(--u) * 0.3) #062a10, inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.5) !important;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 60, 10, 0.85) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-btn-red{
  border-color: #5a0f0c;
  background: linear-gradient(180deg, #ff7a68 0%, #e03a2c 48%, #b5201a 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #2f0907, 0 calc(var(--u) * 0.9) 0 calc(var(--u) * 0.3) #2f0907, inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.45) !important;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(80, 8, 4, 0.85) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-btn:hover:not(:disabled){ filter: brightness(1.1) !important; transform: translateY(calc(var(--u) * -0.25)); }
body :is(#region-lock-modal, #lock-modal) .rl-btn:active:not(:disabled){ filter: brightness(0.94) !important; transform: translateY(calc(var(--u) * 0.25)) scale(0.985); }
body :is(#region-lock-modal, #lock-modal) .rl-btn:disabled{ opacity: 0.55; cursor: not-allowed; }
body :is(#region-lock-modal, #lock-modal) .rl-btn:focus-visible,
body :is(#region-lock-modal, #lock-modal) .rl-close:focus-visible,
body :is(#region-lock-modal, #lock-modal) .rl-remove:focus-visible,
body :is(#region-lock-modal, #lock-modal) .lock-player-chip:focus-visible{ outline: calc(var(--u) * 0.5) solid #ffe27a !important; outline-offset: calc(var(--u) * 0.3); }

/* ---- access list ---- */
body :is(#region-lock-modal, #lock-modal) .rl-access{
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  margin: 0 0 calc(var(--u) * 1.8);
  padding: calc(var(--u) * 1.4) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.8);
  border: calc(var(--u) * 0.3) solid rgba(120, 190, 255, 0.3);
  background: linear-gradient(180deg, rgba(4, 14, 32, 0.7), rgba(6, 20, 42, 0.55));
  box-shadow: inset 0 calc(var(--u) * 0.4) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.35) !important;
}
body :is(#region-lock-modal, #lock-modal) .rl-access-title{
  flex: 0 0 auto;
  margin-bottom: calc(var(--u) * 1);
  font-size: calc(var(--u) * 3.2);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #cfe6ff;
}
body :is(#region-lock-modal, #lock-modal) .rl-list{
  flex: 1 1 calc(var(--u) * 16);
  min-height: calc(var(--u) * 12);
  max-height: calc(var(--u) * 22);
  overflow-y: auto;
  overscroll-behavior: contain;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 1.2);
  padding-right: calc(var(--u) * 0.6);
  scrollbar-width: thin;
  scrollbar-color: #2f93ff rgba(0, 0, 0, 0.25);
}
body :is(#region-lock-modal, #lock-modal) .rl-empty{ padding: calc(var(--u) * 1.4) 0; text-align: center; font-size: calc(var(--u) * 3); font-weight: 700; color: rgba(214, 235, 250, 0.7); }
body :is(#region-lock-modal, #lock-modal) .rl-row{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.8);
  padding: calc(var(--u) * 0.5) calc(var(--u) * 1.4);
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.3) solid rgba(120, 190, 255, 0.28);
  background: linear-gradient(180deg, #0c2144, #081a38);
}
body :is(#region-lock-modal, #lock-modal) .rl-row-name{
  flex: 1 1 auto;
  min-width: 0;
  font-size: calc(var(--u) * 3.6);
  font-weight: 800;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
body :is(#region-lock-modal, #lock-modal) .rl-avatar{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: calc(var(--u) * 1.2);
  border: calc(var(--u) * 0.3) solid rgba(140, 200, 255, 0.45);
  background: linear-gradient(180deg, #15264e, #0a1431);
}
body :is(#region-lock-modal, #lock-modal) .rl-remove{
  flex: 0 0 auto;
  width: calc(var(--u) * 5.6);
  height: calc(var(--u) * 5.6);
  min-width: 26px;
  min-height: 26px;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--u) * 1.3);
  border: calc(var(--u) * 0.4) solid #fff;
  background: linear-gradient(180deg, #ff6a5c 0%, #d3201a 52%, #a31410 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #4a1210, inset 0 calc(var(--u) * 0.4) 0 rgba(255, 255, 255, 0.4) !important;
  color: #fff;
  font: 900 calc(var(--u) * 3.2)/1 Georgia, serif;
  cursor: pointer;
}
body :is(#region-lock-modal, #lock-modal) .rl-remove:hover{ filter: brightness(1.12) !important; }

/* ---- online players picker ---- */
body :is(#region-lock-modal, #lock-modal) #region-lock-online-picker{
  flex: 0 0 auto;
  max-height: calc(var(--u) * 15);
  overflow-y: auto;
  overscroll-behavior: contain;
  margin: calc(var(--u) * 1.6) 0 0 !important;
  padding-top: calc(var(--u) * 1.4);
  border-top: calc(var(--u) * 0.3) solid rgba(120, 190, 255, 0.22);
  scrollbar-width: thin;
  scrollbar-color: #2f93ff rgba(0, 0, 0, 0.25);
}
body :is(#region-lock-modal, #lock-modal) #region-lock-online-picker > div{
  font-size: calc(var(--u) * 3) !important;
  font-weight: 700;
  opacity: 1 !important;
  color: rgba(214, 235, 250, 0.85);
}
body :is(#region-lock-modal, #lock-modal) .lock-player-chip{
  display: inline-flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
  max-width: 100%;
  padding: calc(var(--u) * 0.6) calc(var(--u) * 1.8) calc(var(--u) * 0.6) calc(var(--u) * 0.6);
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.35) solid rgba(140, 200, 255, 0.45);
  background: linear-gradient(180deg, #0c2144, #081a38);
  color: #fff;
  font: 800 calc(var(--u) * 3.2)/1.1 Georgia, serif;
  cursor: pointer;
}
body :is(#region-lock-modal, #lock-modal) .lock-player-chip:hover{ filter: brightness(1.15) !important; }
body :is(#region-lock-modal, #lock-modal) .lock-player-chip.is-selected{
  border-color: #ffe27a;
  background: linear-gradient(180deg, #1f4d94, #123a74);
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 226, 122, 0.55) !important;
}
body :is(#region-lock-modal, #lock-modal) .lock-chip-avatar-stage{
  flex: 0 0 auto;
  width: 36px;
  height: 36px;
  overflow: hidden;
  border-radius: calc(var(--u) * 1.2);
  background: linear-gradient(180deg, #15264e, #0a1431);
}
body :is(#region-lock-modal, #lock-modal) .lock-chip-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- add player ---- */
body :is(#region-lock-modal, #lock-modal) .rl-add{ flex: 0 0 auto; display: flex; gap: calc(var(--u) * 1.8); }
body :is(#region-lock-modal, #lock-modal) .rl-add-input{
  flex: 1 1 auto;
  min-width: 0;
  height: calc(var(--u) * 7.2);
  padding: 0 calc(var(--u) * 2) !important;
  border-radius: calc(var(--u) * 1.8) !important;
  border: calc(var(--u) * 0.35) solid rgba(140, 200, 255, 0.55) !important;
  background: linear-gradient(180deg, #081a36, #0b2142) !important;
  box-shadow: inset 0 calc(var(--u) * 0.4) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.55) !important;
  color: #fff !important;
  font: 800 calc(var(--u) * 3.1)/1 Georgia, serif !important;
  text-overflow: ellipsis;
  outline: none;
}
body :is(#region-lock-modal, #lock-modal) .rl-add-input::placeholder{ color: rgba(190, 215, 240, 0.6); }
body :is(#region-lock-modal, #lock-modal) .rl-add-btn{ flex: 0 0 auto; min-width: calc(var(--u) * 16); }

@keyframes rl-overlay-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes rl-panel-in{ from{ opacity: 0; transform: scale(0.94); } to{ opacity: 1; transform: scale(1); } }

/* phones: leaves in, buttons stacked, tighter list */
@media (max-width: 520px){
  body :is(#region-lock-modal, #lock-modal) .rl-btn-row{ grid-template-columns: minmax(0, 1fr); }
  body :is(#region-lock-modal, #lock-modal) .rl-leaves-tr{ right: calc(var(--u) * 1); }
  body :is(#region-lock-modal, #lock-modal) .rl-list{ min-height: calc(var(--u) * 20); max-height: calc(var(--u) * 34); }
}
@media (max-height: 520px){
  body :is(#region-lock-modal, #lock-modal) .rl-btn-row{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body :is(#region-lock-modal, #lock-modal) .rl-list{ max-height: calc(var(--u) * 14); }
  body :is(#region-lock-modal, #lock-modal) #region-lock-online-picker{ max-height: calc(var(--u) * 12); }
}
@media (prefers-reduced-motion: reduce){
  body :is(#region-lock-modal, #lock-modal).rl-overlay,
  body :is(#region-lock-modal, #lock-modal) .rl-dlg{ animation: none !important; transition: none !important; }
}