/* ===================================================================== */
/* Name Changer dialog (#namechanger-modal). Frame, wooden sign, close    */
/* button, leaves and buttons come from megaphone-dialog.css (its         */
/* selectors cover #namechanger-modal as well); this file only adds the   */
/* Name Changer specifics.                                                */
/* ===================================================================== */

#namechanger-overlay,
#worldchanger-overlay,
#blast-overlay,
#door1-settings-overlay{
  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);
}

body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-dlg{ width: calc(var(--u) * 78) !important; }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-title{
  margin: 0 !important;
  font-size: calc(var(--u) * 5) !important;
  letter-spacing: 0.02em !important;
  white-space: nowrap;
  color: #ffd34a !important;
  -webkit-text-stroke: calc(var(--u) * 0.7) #3b1c05;
  text-shadow: 0 calc(var(--u) * 0.6) 0 rgba(30, 12, 2, 0.85) !important;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .mega-sign{ padding-left: calc(var(--u) * 14); }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-sign-ico{
  transform: translateY(-54%);
  display: flex;
  align-items: center;
  justify-content: center;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-sign-ico .blast-icon{ filter: drop-shadow(0 calc(var(--u) * 0.5) 0 rgba(30, 14, 4, 0.55)) !important; }

/* ---- shared card look (same as the other dialogs' inner boxes) ---- */
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info,
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-field{
  position: relative;
  z-index: 1;
  padding: calc(var(--u) * 1.8) calc(var(--u) * 2.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;
}

/* ---- Change Your Name ---- */
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info{ display: flex; align-items: center; gap: calc(var(--u) * 2.4); }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info-icon{
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--u) * 11);
  height: calc(var(--u) * 11);
  overflow: hidden;
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.45) solid #ff9f1c;
  background:
    radial-gradient(circle at 50% 40%, rgba(255, 159, 28, 0.34), transparent 72%),
    linear-gradient(180deg, #15264e, #0a1431);
  box-shadow: 0 0 calc(var(--u) * 2) rgba(255, 159, 28, 0.34), inset 0 0 0 calc(var(--u) * 0.25) rgba(0, 0, 0, 0.5) !important;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info-text{ min-width: 0; }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info-title{
  font-size: calc(var(--u) * 4.6);
  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(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-desc{
  margin: calc(var(--u) * 0.8) 0 0 !important;
  font-size: calc(var(--u) * 3.2) !important;
  font-weight: 700;
  line-height: 1.3 !important;
  color: #8fd2ff !important;
}

/* ---- New Username ---- */
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-label{
  display: block;
  margin-bottom: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 3.8);
  font-weight: 900;
  color: #fff;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-input{
  display: block;
  width: 100% !important;
  height: calc(var(--u) * 9);
  margin: 0 !important;
  padding: 0 calc(var(--u) * 2.4) !important;
  border-radius: calc(var(--u) * 2.2) !important;
  border: calc(var(--u) * 0.5) solid #4aa8ff !important;
  background: linear-gradient(180deg, #06193a, #0a2347) !important;
  box-shadow: inset 0 calc(var(--u) * 0.6) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.6) !important;
  color: #f4fbff !important;
  font: 700 calc(var(--u) * 3.8)/1 Georgia, "Times New Roman", serif !important;
  outline: none !important;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-input::placeholder{ color: rgba(190, 226, 245, 0.55) !important; }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-input:focus{
  border-color: #8fd2ff !important;
  box-shadow: 0 0 calc(var(--u) * 1.4) rgba(80, 170, 255, 0.6), inset 0 calc(var(--u) * 0.6) calc(var(--u) * 1.4) rgba(0, 0, 0, 0.6) !important;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-error{
  margin-top: calc(var(--u) * 1.2);
  font-size: calc(var(--u) * 3);
  font-weight: 800;
  color: #ff9d94;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-error:empty{ display: none !important; }

/* ---- buttons: Cancel blue, Change green ---- */
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-actions{ grid-template-columns: repeat(2, minmax(0, 1fr)); }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-btn-cancel{
  background: linear-gradient(180deg, #4aa6ff 0%, #2677e6 50%, #1757bd 100%) !important;
  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(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-btn-confirm{
  border-color: #0b4a1a !important;
  background: linear-gradient(180deg, #7dff6a 0%, #2fd13f 48%, #139a28 100%) !important;
  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(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-btn-ico{ flex: 0 0 auto; filter: drop-shadow(0 calc(var(--u) * 0.35) 0 rgba(0, 40, 10, 0.7)) !important; }

@media (max-width: 520px){
  body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-title{ font-size: calc(var(--u) * 4.4) !important; }
  body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .mega-sign{ padding-left: calc(var(--u) * 11); }
  body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-sign-ico .blast-icon{ transform: scale(0.62); }
  body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info-icon{ width: calc(var(--u) * 9.5); height: calc(var(--u) * 9.5); }
  body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info-title{ font-size: calc(var(--u) * 4); }
  body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-desc{ font-size: calc(var(--u) * 2.8) !important; }
}

/* World Changer globe: cell (6,3) of the shared icons tilemap */
.wc-globe{
  display: block;
  flex: 0 0 auto;
  width: var(--g, 32px);
  height: var(--g, 32px);
  background: url("/photos/icons_tilemap.png") no-repeat;
  background-size: calc(var(--g, 32px) * 11) calc(var(--g, 32px) * 8);
  background-position: calc(var(--g, 32px) * -5) calc(var(--g, 32px) * -2);
}

/* ---- Door Settings (overlay built in items.js) ---- */
#door1-settings-overlay{
  position: fixed;
  inset: 0;
  z-index: 13040;
  box-sizing: border-box;
  padding: 16px 12px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-gold{ color: #ffd34a; }
body :is(#namechanger-modal, #worldchanger-modal, #blast-modal, #door1-settings-overlay, #door2-modal) .nc-info-title{ overflow-wrap: anywhere; }

/* big blue checkbox */
body :is(#door1-settings-overlay, #door2-modal) .nc-check{
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 2.4);
  cursor: pointer;
  user-select: none;
}
body :is(#door1-settings-overlay, #door2-modal) .nc-check input{ position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
body :is(#door1-settings-overlay, #door2-modal) .nc-check-box{
  position: relative;
  flex: 0 0 auto;
  width: calc(var(--u) * 7.4);
  height: calc(var(--u) * 7.4);
  border-radius: calc(var(--u) * 1.6);
  border: calc(var(--u) * 0.5) solid #4aa8ff;
  background: linear-gradient(180deg, #06193a, #0a2347);
  box-shadow: inset 0 calc(var(--u) * 0.5) calc(var(--u) * 1.2) rgba(0, 0, 0, 0.6) !important;
  transition: background 120ms ease, border-color 120ms ease;
}
body :is(#door1-settings-overlay, #door2-modal) .nc-check-box::after{
  content: "";
  position: absolute;
  left: 30%;
  top: 8%;
  width: 28%;
  height: 56%;
  border: solid #fff;
  border-width: 0 calc(var(--u) * 1) calc(var(--u) * 1) 0;
  transform: rotate(45deg) scale(0);
  transition: transform 120ms ease;
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(0, 20, 60, 0.7));
}
body :is(#door1-settings-overlay, #door2-modal) .nc-check input:checked + .nc-check-box{
  border-color: #cfe9ff;
  background: linear-gradient(180deg, #5ab4ff 0%, #2677e6 50%, #1757bd 100%);
}
body :is(#door1-settings-overlay, #door2-modal) .nc-check input:checked + .nc-check-box::after{ transform: rotate(45deg) scale(1); }
body :is(#door1-settings-overlay, #door2-modal) .nc-check input:focus-visible + .nc-check-box{ outline: calc(var(--u) * 0.5) solid #ffe27a; outline-offset: calc(var(--u) * 0.3); }
body :is(#door1-settings-overlay, #door2-modal) .nc-check-text{ font-size: calc(var(--u) * 3.8); font-weight: 800; color: #fff; }
body :is(#door1-settings-overlay, #door2-modal) .nc-dlg{ width: calc(var(--u) * 66) !important; }
@media (max-width: 520px){
  body :is(#door1-settings-overlay, #door2-modal) .mega-sign{ padding-left: calc(var(--u) * 15); }
  body :is(#door1-settings-overlay, #door2-modal) .nc-title{ font-size: calc(var(--u) * 4.4) !important; }
}

/* ---- Door Settings for world-teleport doors (#door2-modal) ---- */
#door2-modal{
  position: fixed;
  inset: 0;
  z-index: 13040;
  box-sizing: border-box;
  padding: 16px 12px;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
body #door2-modal .nc-dlg{ width: calc(var(--u) * 82) !important; max-height: 100% !important; overflow: visible !important; }
body #door2-modal .d2-body{ display: flex; flex-direction: column; gap: calc(var(--u) * 1.8) !important; }
body #door2-modal .d2-section{ padding: calc(var(--u) * 1.4) calc(var(--u) * 2.2) calc(var(--u) * 1.8); }
body #door2-modal .d2-head{ display: flex; align-items: center; gap: calc(var(--u) * 1.8); margin-bottom: calc(var(--u) * 1.2); }
body #door2-modal .d2-title{ font-size: calc(var(--u) * 4.2); 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 #door2-modal .d2-tip{ margin: calc(var(--u) * 0.2) 0 0; font-size: calc(var(--u) * 2.8); font-weight: 700; color: #8fd2ff; }
body #door2-modal .d2-grid3{ display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: calc(var(--u) * 1.8); }
body #door2-modal .d2-lab{ display: flex; flex-direction: column; gap: calc(var(--u) * 0.8); min-width: 0; font-size: calc(var(--u) * 3.2); font-weight: 900; color: #fff; }
body #door2-modal .d2-checks{ display: grid; grid-template-columns: 1fr 1fr; gap: calc(var(--u) * 2); }
body #door2-modal .nc-input{ height: calc(var(--u) * 8); font-size: calc(var(--u) * 3.4) !important; text-transform: none; }
body #door2-modal .nc-check-text{ font-size: calc(var(--u) * 3.6); }
body #door2-modal .nc-tile{ flex: 0 0 auto; filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.5)); }
body #door2-modal .nc-btn-ico{ flex: 0 0 auto; }
@media (max-width: 520px){
  body #door2-modal .d2-grid3,
  body #door2-modal .d2-checks{ grid-template-columns: 1fr; }
  body #door2-modal .d2-title{ font-size: calc(var(--u) * 3.8); }
  body #door2-modal .mega-sign{ padding-left: calc(var(--u) * 15); }
  body #door2-modal .nc-title{ font-size: calc(var(--u) * 4.4) !important; }
  body #door2-modal .nc-sign-ico .blast-icon{ transform: scale(0.62); }
}
@media (max-height: 640px){
  body #door2-modal .d2-body{ overflow-y: auto; max-height: calc(100vh - 150px); }
}

/* shared tile icon from the icons tilemap: --c / --r are zero-based column / row */
.nc-tile{
  display: block;
  width: var(--g, 32px);
  height: var(--g, 32px);
  background: url("/photos/icons_tilemap.png") no-repeat;
  background-size: calc(var(--g, 32px) * 11) calc(var(--g, 32px) * 8);
  background-position: calc(var(--g, 32px) * var(--c, 0) * -1) calc(var(--g, 32px) * var(--r, 0) * -1);
}
/* door2: compact sizing so the three destination fields stay readable */
body #door2-modal .nc-input{ height: calc(var(--u) * 7); padding: 0 calc(var(--u) * 1.6) !important; font-size: calc(var(--u) * 3) !important; }
body #door2-modal .d2-lab{ font-size: calc(var(--u) * 2.9); gap: calc(var(--u) * 0.6); }
body #door2-modal .d2-grid3{ grid-template-columns: 1.15fr 1fr 1.15fr; gap: calc(var(--u) * 1.4); }
body #door2-modal .d2-section{ padding: calc(var(--u) * 1.2) calc(var(--u) * 2) calc(var(--u) * 1.5); }
body #door2-modal .d2-head{ margin-bottom: calc(var(--u) * 0.9); }
body #door2-modal .d2-body{ gap: calc(var(--u) * 1.4) !important; }
body #door2-modal .d2-title{ font-size: calc(var(--u) * 3.8); }
body #door2-modal .nc-check-text{ font-size: calc(var(--u) * 3.2); }
body #door2-modal .nc-check-box{ width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); }
body #door2-modal .nc-tile{ transform: scale(0.85); transform-origin: left center; margin-right: calc(var(--u) * -0.8); }
body #door2-modal.mega-overlay{ --u: clamp(4.4px, min(7px, 1vh, 1.2vw), 7px); }
body #door2-modal .nc-input{ font-size: calc(var(--u) * 2.9) !important; padding: 0 calc(var(--u) * 1.2) !important; }
body #door2-modal .d2-grid3{ grid-template-columns: 1.35fr 1fr 1.15fr; }
@media (max-width: 520px){
  body #door2-modal .d2-grid3{ grid-template-columns: 1fr; }
  body #door2-modal .d2-checks{ grid-template-columns: 1fr; }
}

/* Door Settings (world door): dim the game behind it like the other windows and
   keep the game canvas from receiving the mouse while it is open */
#door2-modal{
  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);
  pointer-events: auto;
}
body.door2-modal-open canvas{ pointer-events: none !important; }