/* ===================================================================== */
/* World Lock / World Access dialog (#lock-modal). The frame, header,     */
/* close button, leaves, cards, buttons and player chips come from        */
/* region-lock-dialog.css (selectors there cover #lock-modal as well);    */
/* this file only adds what is specific to the World Lock layout.         */
/* ===================================================================== */

body #lock-modal .wl-dlg{ width: calc(var(--u) * 80) !important; }
body #lock-modal .wl-body{
  position: relative;
  z-index: 1;
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
body #lock-modal .rl-title-ico{ display: flex; align-items: center; justify-content: center; }

/* ---- world information ---- */
body #lock-modal .wl-info{ display: flex; align-items: center; gap: calc(var(--u) * 2.4); }
body #lock-modal .wl-info-icon{
  flex: 0 0 auto;
  filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.5)) !important;
}
body #lock-modal .wl-info-text{ min-width: 0; }
body #lock-modal .wl-info .rl-owner{ font-weight: 700; margin-top: 0; font-size: calc(var(--u) * 2.9); }
body #lock-modal .wl-info{ padding-top: calc(var(--u) * 1); padding-bottom: calc(var(--u) * 1); }

/* ---- player selection ---- */
body #lock-modal .wl-select{ flex: 0 0 auto; overflow: visible; }
body #lock-modal .wl-select .rl-access-title{ margin-bottom: calc(var(--u) * 1); font-size: calc(var(--u) * 2.8); letter-spacing: 0.02em; }
body #lock-modal .lock-selected-target{
  margin-bottom: calc(var(--u) * 1.6);
  padding: calc(var(--u) * 1) calc(var(--u) * 2);
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.35) solid rgba(140, 200, 255, 0.55);
  background: linear-gradient(180deg, #081a36, #0b2142);
  box-shadow: inset 0 calc(var(--u) * 0.4) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.55) !important;
  font-size: calc(var(--u) * 3.4);
  font-weight: 800;
  color: #ffe27a;
  overflow-wrap: anywhere;
  outline: none;
}
body #lock-modal .wl-label{
  margin-bottom: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 3);
  font-weight: 700;
  color: rgba(214, 235, 250, 0.85);
}
body #lock-modal .lock-online-players{
  display: flex;
  flex-wrap: wrap;
  gap: calc(var(--u) * 1.2);
  max-height: calc(var(--u) * 15);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #2f93ff rgba(0, 0, 0, 0.25);
}
body #lock-modal .lock-player-empty{ font-size: calc(var(--u) * 3); font-weight: 700; color: rgba(214, 235, 250, 0.7); }

/* ---- world lock access list ---- */
body #lock-modal .wl-access{ flex: 1 1 auto; min-height: 0; }
body #lock-modal #access-list{ margin: 0; padding: 0 calc(var(--u) * 0.6) 0 0; list-style: none; min-height: calc(var(--u) * 10); }
body #lock-modal #access-list:empty::before{
  content: "";
  display: block;
  height: calc(var(--u) * 6);
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.3) dashed rgba(120, 190, 255, 0.28);
}
body #lock-modal .lock-access-main{ flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: calc(var(--u) * 1.6); }
body #lock-modal .lock-access-avatar-stage{
  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 #lock-modal .lock-list-name{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: calc(var(--u) * 3.6); font-weight: 800; color: #fff; }
body #lock-modal .lock-list-role{
  flex: 0 0 auto;
  padding: calc(var(--u) * 0.3) calc(var(--u) * 1.4) calc(var(--u) * 0.5);
  border-radius: calc(var(--u) * 1);
  border: calc(var(--u) * 0.3) solid #1fa83a;
  background: linear-gradient(180deg, rgba(14, 90, 34, 0.85), rgba(8, 54, 22, 0.9));
  font-size: calc(var(--u) * 2.6);
  font-weight: 900;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #a9f5b4;
}
body #lock-modal .lock-remove-btn{
  flex: 0 0 auto;
  padding: calc(var(--u) * 0.8) calc(var(--u) * 1.8) calc(var(--u) * 1);
  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) * 2.6)/1 Georgia, serif;
  letter-spacing: 0.04em;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.6) !important;
  cursor: pointer;
}
body #lock-modal .lock-remove-btn:hover{ filter: brightness(1.12) !important; }
body #lock-modal .lock-remove-btn:focus-visible{ outline: calc(var(--u) * 0.5) solid #ffe27a !important; outline-offset: calc(var(--u) * 0.3); }

/* ---- actions ---- */
body #lock-modal .wl-footer{
  flex: 0 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1.2fr) minmax(0, 0.8fr);
  gap: calc(var(--u) * 1.8);
}
body #lock-modal .wl-footer .rl-btn{ white-space: nowrap; font-size: calc(var(--u) * 2.9); padding-left: calc(var(--u) * 0.6); padding-right: calc(var(--u) * 0.6); }

@media (max-width: 520px){
  body #lock-modal .wl-footer{ grid-template-columns: minmax(0, 1fr); }
  body #lock-modal .wl-footer .rl-btn{ font-size: calc(var(--u) * 3.4); }
}
@media (max-height: 520px){
  body #lock-modal .lock-online-players{ max-height: calc(var(--u) * 9); }
}