/* ===================================================================== */
/* Drop / Delete item dialog (#drop-modal .drop-dlg): fantasy cartoon      */
/* Pure CSS / inline SVG. Loaded after the sheets that styled the old     */
/* dialog (corecraftia-ui.css, windows.css); every rule is scoped as      */
/* "body #drop-modal .drop-dlg ..." and uses !important where it has to   */
/* beat their "!important" rules (e.g. "body.in-game #drop-modal *").     */
/* ===================================================================== */

body #drop-modal.drop-dlg-overlay{
  --u: min(8px, 1.05vh, 1.2vw);
  animation: dd-overlay-in 220ms ease-out both;
  will-change: opacity;
}
body #drop-modal.drop-dlg-overlay.is-closing{
  animation: dd-overlay-out 150ms ease-in both !important;
  pointer-events: none !important;
}
body #drop-modal.drop-dlg-overlay [hidden]{ display: none !important; }

body #drop-modal .drop-dlg{
  position: relative !important;
  box-sizing: border-box !important;
  width: calc(var(--u) * 72) !important;
  max-width: 100% !important;
  max-height: none !important;
  overflow: visible !important;
  margin: 0 !important;
  padding: calc(var(--u) * 6.6) calc(var(--u) * 3.2) calc(var(--u) * 3.2) !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;
  transform-origin: 50% 50%;
  animation: dd-panel-in 220ms cubic-bezier(0.18, 0.86, 0.24, 1) both;
  will-change: transform, opacity;
}
body #drop-modal.is-closing .drop-dlg{
  animation: dd-panel-out 150ms ease-in both !important;
}
body #drop-modal .drop-dlg::before,
body #drop-modal .drop-dlg::after{ display: none !important; }
body #drop-modal .drop-dlg *{ box-sizing: border-box; }
body #drop-modal .drop-dlg .drop-dlg-defs{ position: absolute !important; width: 0 !important; height: 0 !important; overflow: hidden !important; }

/* ---- stone header ---- */
body #drop-modal .drop-dlg .drop-dlg-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;
  animation: dd-header-in 260ms ease-out 40ms both;
}
body #drop-modal .drop-dlg .drop-dlg-title{
  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);
  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%);
  box-shadow: inset 0 calc(var(--u) * 0.5) 0 rgba(255, 255, 255, 0.35), inset 0 calc(var(--u) * -0.6) 0 rgba(0, 0, 0, 0.3);
  filter: drop-shadow(0 calc(var(--u) * 0.7) 0 rgba(0, 0, 0, 0.45));
}

/* ---- close (X) ---- */
body #drop-modal .drop-dlg .drop-dlg-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);
  cursor: pointer;
  transition: transform 120ms ease, filter 120ms ease;
}
body #drop-modal .drop-dlg .drop-dlg-close:hover{ transform: scale(1.08); filter: brightness(1.12); }
body #drop-modal .drop-dlg .drop-dlg-close:active{ transform: scale(0.94); }

/* ---- leaves around the frame ---- */
body #drop-modal .drop-dlg .drop-dlg-leaves{
  position: absolute !important;
  z-index: 4;
  width: calc(var(--u) * 16);
  height: calc(var(--u) * 12.4);
  overflow: visible;
  pointer-events: none;
  filter: drop-shadow(0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.35)) !important;
}
body #drop-modal .drop-dlg .dd-leaves-tl{ left: calc(var(--u) * -4.8); top: calc(var(--u) * -4); }
body #drop-modal .drop-dlg .dd-leaves-tr{ right: calc(var(--u) * 2.4); top: calc(var(--u) * -3.8); transform: scaleX(-1); width: calc(var(--u) * 11); height: calc(var(--u) * 8.6); }
body #drop-modal .drop-dlg .dd-leaves-bl{ left: calc(var(--u) * -4.8); bottom: calc(var(--u) * -4.6); transform: scaleY(-1); }
body #drop-modal .drop-dlg .dd-leaves-br{ right: calc(var(--u) * -4.8); bottom: calc(var(--u) * -4.6); transform: scale(-1, -1); }

/* ---- item card ---- */
body #drop-modal .drop-dlg .drop-dlg-item{
  display: flex;
  align-items: flex-start;
  gap: calc(var(--u) * 2.6);
  margin: 0 0 calc(var(--u) * 2.2);
}
body #drop-modal .drop-dlg .drop-dlg-icon{
  flex: 0 0 auto;
  width: calc(var(--u) * 12.6) !important;
  height: calc(var(--u) * 12.6) !important;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border-radius: calc(var(--u) * 1.6) !important;
  border: calc(var(--u) * 0.45) solid var(--dd-rarity, #3aa0ff) !important;
  background:
    radial-gradient(circle at 50% 40%, color-mix(in srgb, var(--dd-rarity, #3aa0ff) 34%, transparent), transparent 72%),
    linear-gradient(180deg, #15264e, #0a1431) !important;
  box-shadow: 0 0 calc(var(--u) * 2) var(--dd-rarity-glow, rgba(58, 160, 255, 0.34)), inset 0 0 0 calc(var(--u) * 0.25) rgba(0, 0, 0, 0.5) !important;
}
body #drop-modal .drop-dlg .drop-dlg-icon > *{
  width: calc(var(--u) * 10) !important;
  height: calc(var(--u) * 10) !important;
}
body #drop-modal .drop-dlg .drop-dlg-info{
  min-width: 0;
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  gap: calc(var(--u) * 0.8);
}
body #drop-modal .drop-dlg .drop-dlg-info-top{
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: calc(var(--u) * 1.6);
}
body #drop-modal .drop-dlg .drop-dlg-name{
  min-width: 0;
  font-size: calc(var(--u) * 5) !important;
  font-weight: 900 !important;
  line-height: 1.08 !important;
  color: #fff !important;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.55);
  white-space: normal !important;
  overflow-wrap: anywhere;
  overflow: visible !important;
  text-overflow: clip !important;
}
body #drop-modal .drop-dlg .drop-dlg-rarity{
  flex: 0 0 auto;
  padding: calc(var(--u) * 0.5) calc(var(--u) * 2) calc(var(--u) * 0.7);
  border-radius: calc(var(--u) * 1.1);
  border: calc(var(--u) * 0.35) solid var(--dd-rarity, #3aa0ff);
  background: color-mix(in srgb, var(--dd-rarity, #3aa0ff) 28%, #0a1530);
  color: #fff;
  font-size: calc(var(--u) * 3);
  font-weight: 900;
  line-height: 1.2;
  text-shadow: 0 calc(var(--u) * 0.3) 0 rgba(0, 0, 0, 0.6);
}
body #drop-modal .drop-dlg .drop-dlg-category{
  display: flex;
  align-items: center;
  gap: calc(var(--u) * 1.2);
}
body #drop-modal .drop-dlg .drop-dlg-cat-icon{
  --cat-ico: calc(var(--u) * 3.6);
  flex: 0 0 auto;
  width: var(--cat-ico);
  height: var(--cat-ico);
  background-image: url("/photos/icons_tilemap.png");
  background-repeat: no-repeat;
  background-size: calc(var(--cat-ico) * 11) calc(var(--cat-ico) * 8);
  background-position: calc((var(--ico-col, 1) - 1) * var(--cat-ico) * -1) calc((var(--ico-row, 1) - 1) * var(--cat-ico) * -1);
  filter: drop-shadow(0 1px 0 rgba(0, 0, 0, 0.5));
}
body #drop-modal .drop-dlg .drop-dlg-cat-text{
  font-size: calc(var(--u) * 3.3) !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em !important;
  text-transform: none !important;
  color: rgba(222, 236, 250, 0.9) !important;
}
body #drop-modal .drop-dlg .drop-dlg-desc{
  font-size: calc(var(--u) * 3.2);
  line-height: 1.3;
  color: rgba(228, 240, 255, 0.86);
}

/* ---- amount picker ---- */
body #drop-modal .drop-dlg .drop-dlg-amount{
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2) calc(var(--u) * 1.4);
  margin: 0 0 calc(var(--u) * 2.4);
  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);
}
body #drop-modal .drop-dlg .drop-dlg-amount-label{
  text-align: center;
  font-size: calc(var(--u) * 2.9);
  font-weight: 900;
  letter-spacing: 0.1em;
  color: #cfe6ff;
  margin-bottom: calc(var(--u) * 1.2);
}
body #drop-modal .drop-dlg .drop-dlg-amount-row{
  display: grid;
  grid-template-columns: calc(var(--u) * 6.8) minmax(0, 1fr) calc(var(--u) * 6.8) calc(var(--u) * 13);
  align-items: center;
  gap: calc(var(--u) * 1.4);
}
body #drop-modal .drop-dlg .drop-dlg-step{
  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.4) solid #0b3a80 !important;
  background: linear-gradient(180deg, #4aa8ff 0%, #2677e6 52%, #1757bd 100%) !important;
  box-shadow: 0 0 0 calc(var(--u) * 0.25) #061a38, 0 calc(var(--u) * 0.6) 0 #061a38, inset 0 calc(var(--u) * 0.45) 0 rgba(255, 255, 255, 0.45) !important;
  color: #fff !important;
  font: 900 calc(var(--u) * 4.6)/1 Georgia, serif !important;
  text-shadow: 0 calc(var(--u) * 0.35) 0 rgba(0, 20, 60, 0.8);
  cursor: pointer;
  touch-action: manipulation;
  user-select: none;
  transition: transform 110ms ease, filter 110ms ease;
}
body #drop-modal .drop-dlg .drop-dlg-step:hover:not(:disabled){ filter: brightness(1.14); }
body #drop-modal .drop-dlg .drop-dlg-step:active:not(:disabled){ transform: translateY(calc(var(--u) * 0.3)) scale(0.95); }
body #drop-modal .drop-dlg .drop-dlg-step:disabled{ opacity: 0.45; filter: grayscale(0.5); cursor: default; }

body #drop-modal .drop-dlg .drop-dlg-slider-wrap{ min-width: 0; padding: 0 calc(var(--u) * 1.2); }
body #drop-modal .drop-dlg input[type="range"]{
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  height: calc(var(--u) * 2.2);
  margin: 0;
  padding: 0;
  border-radius: calc(var(--u) * 1.1);
  border: calc(var(--u) * 0.3) solid #07162e;
  background: linear-gradient(90deg, #3fb0ff 0, #2b86f0 var(--dd-fill, 0%), #162b4a var(--dd-fill, 0%), #162b4a 100%);
  box-shadow: inset 0 calc(var(--u) * 0.35) calc(var(--u) * 0.6) rgba(0, 0, 0, 0.55);
  outline: none;
  cursor: pointer;
}
body #drop-modal .drop-dlg input[type="range"]::-webkit-slider-runnable-track{ height: calc(var(--u) * 2.2); background: transparent; border: 0; }
body #drop-modal .drop-dlg input[type="range"]::-moz-range-track{ height: calc(var(--u) * 2.2); background: transparent; border: 0; }
body #drop-modal .drop-dlg input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance: none;
  appearance: none;
  width: calc(var(--u) * 4.8);
  height: calc(var(--u) * 4.8);
  margin-top: calc(var(--u) * -1.3);
  border-radius: 50%;
  border: calc(var(--u) * 0.5) solid #cfe9ff;
  background: radial-gradient(circle at 36% 30%, #8fd2ff 0%, #2f93ff 55%, #1457c4 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #07162e, 0 calc(var(--u) * 0.5) calc(var(--u) * 1) rgba(0, 0, 0, 0.5);
  transition: transform 100ms ease;
}
body #drop-modal .drop-dlg input[type="range"]::-moz-range-thumb{
  width: calc(var(--u) * 4);
  height: calc(var(--u) * 4);
  border-radius: 50%;
  border: calc(var(--u) * 0.5) solid #cfe9ff;
  background: radial-gradient(circle at 36% 30%, #8fd2ff 0%, #2f93ff 55%, #1457c4 100%);
  box-shadow: 0 0 0 calc(var(--u) * 0.3) #07162e;
}
body #drop-modal .drop-dlg input[type="range"]:hover::-webkit-slider-thumb{ transform: scale(1.08); }
body #drop-modal .drop-dlg input[type="range"]:active::-webkit-slider-thumb{ transform: scale(0.94); }
body #drop-modal .drop-dlg input[type="range"]:focus-visible{ outline: calc(var(--u) * 0.45) solid #ffe27a; outline-offset: calc(var(--u) * 0.5); }

body #drop-modal .drop-dlg .drop-dlg-field-wrap{ min-width: 0; }
body #drop-modal .drop-dlg #drop-amount{
  -moz-appearance: textfield;
  appearance: textfield;
  width: 100% !important;
  height: calc(var(--u) * 6.8) !important;
  padding: 0 calc(var(--u) * 1) !important;
  border-radius: calc(var(--u) * 1.5) !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: 900 calc(var(--u) * 4.4)/1 Georgia, serif !important;
  text-align: center !important;
  outline: none;
  transition: border-color 120ms ease, box-shadow 120ms ease;
}
body #drop-modal .drop-dlg #drop-amount::-webkit-outer-spin-button,
body #drop-modal .drop-dlg #drop-amount::-webkit-inner-spin-button{ -webkit-appearance: none; margin: 0; }
body #drop-modal .drop-dlg #drop-amount:focus{ border-color: #6fc4ff !important; box-shadow: 0 0 calc(var(--u) * 1.4) rgba(80, 170, 255, 0.6), inset 0 calc(var(--u) * 0.4) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.55) !important; }
body #drop-modal .drop-dlg #drop-amount.is-invalid{ border-color: #ff6a5c !important; box-shadow: 0 0 calc(var(--u) * 1.4) rgba(255, 90, 76, 0.55), inset 0 calc(var(--u) * 0.4) calc(var(--u) * 0.9) rgba(0, 0, 0, 0.55) !important; }
body #drop-modal .drop-dlg .drop-dlg-max{
  display: flex;
  justify-content: space-between;
  gap: calc(var(--u) * 1.4);
  min-height: calc(var(--u) * 3.4);
  margin-top: calc(var(--u) * 1.1);
  font-size: calc(var(--u) * 2.8);
  font-weight: 800;
  color: rgba(214, 235, 250, 0.82);
}
body #drop-modal .drop-dlg .drop-dlg-max #drop-amount-max{ margin-left: auto; order: 2; }
body #drop-modal .drop-dlg .drop-dlg-error{ order: 1; color: #ff9d94; }
body #drop-modal .drop-dlg .drop-dlg-live{ position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---- delete warning ---- */
body #drop-modal .drop-dlg .drop-dlg-warning{
  margin: 0 0 calc(var(--u) * 2.4) !important;
  padding: calc(var(--u) * 1.6) calc(var(--u) * 2.2) !important;
  border-radius: calc(var(--u) * 1.6) !important;
  border: calc(var(--u) * 0.3) solid rgba(255, 130, 110, 0.5) !important;
  background: linear-gradient(180deg, rgba(120, 24, 18, 0.55), rgba(70, 14, 12, 0.55)) !important;
  color: #ffd9d2 !important;
  font-size: calc(var(--u) * 3.1) !important;
  font-weight: 700;
  line-height: 1.3 !important;
  text-align: center;
}

/* ---- buttons ---- */
body #drop-modal .drop-dlg .drop-dlg-actions{
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: calc(var(--u) * 2) !important;
  margin: 0 !important;
  padding: 0 !important;
}
body #drop-modal .drop-dlg .drop-dlg-btn{
  min-height: calc(var(--u) * 8.8) !important;
  padding: calc(var(--u) * 1) calc(var(--u) * 2) calc(var(--u) * 1.3) !important;
  border-radius: calc(var(--u) * 2) !important;
  border: calc(var(--u) * 0.45) solid #0b2c5e !important;
  font: 900 calc(var(--u) * 4)/1.05 Georgia, serif !important;
  letter-spacing: 0.02em !important;
  color: #fff !important;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 20, 60, 0.85);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform 120ms ease, filter 120ms ease, box-shadow 120ms ease;
}
body #drop-modal .drop-dlg .drop-dlg-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 #drop-modal .drop-dlg .drop-dlg-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 #drop-modal .drop-dlg .drop-dlg-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);
}
body #drop-modal .drop-dlg .drop-dlg-danger{
  border-color: #5a0f0c !important;
  background: linear-gradient(180deg, #ff7a68 0%, #e03a2c 48%, #b5201a 100%) !important;
  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);
}
body #drop-modal .drop-dlg .drop-dlg-btn:hover:not(:disabled){ filter: brightness(1.1); transform: translateY(calc(var(--u) * -0.25)); }
body #drop-modal .drop-dlg .drop-dlg-btn:active:not(:disabled){ filter: brightness(0.94); transform: translateY(calc(var(--u) * 0.25)) scale(0.985); }
body #drop-modal .drop-dlg .drop-dlg-btn:disabled{ opacity: 0.5; filter: grayscale(0.55) brightness(0.85); cursor: not-allowed; }
body #drop-modal .drop-dlg .drop-dlg-btn:focus-visible,
body #drop-modal .drop-dlg .drop-dlg-close:focus-visible,
body #drop-modal .drop-dlg .drop-dlg-step:focus-visible{ outline: calc(var(--u) * 0.5) solid #ffe27a !important; outline-offset: calc(var(--u) * 0.3); }

/* ---- animation ---- */
@keyframes dd-overlay-in{ from{ opacity: 0; } to{ opacity: 1; } }
@keyframes dd-overlay-out{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes dd-panel-in{ from{ opacity: 0; transform: scale(0.94); } to{ opacity: 1; transform: scale(1); } }
@keyframes dd-panel-out{ from{ opacity: 1; transform: scale(1); } to{ opacity: 0; transform: scale(0.96); } }
@keyframes dd-header-in{ from{ opacity: 0; transform: translateY(calc(var(--u) * -2.4)); } to{ opacity: 1; transform: translateY(0); } }

/* ---- narrow phones: stack the amount controls so everything stays reachable ---- */
@media (max-width: 520px){
  body #drop-modal .drop-dlg .drop-dlg-amount-row{
    grid-template-columns: calc(var(--u) * 8) minmax(0, 1fr) calc(var(--u) * 8);
    row-gap: calc(var(--u) * 1.6);
  }
  body #drop-modal .drop-dlg .drop-dlg-step{ width: calc(var(--u) * 8) !important; height: calc(var(--u) * 8) !important; }
  body #drop-modal .drop-dlg .drop-dlg-field-wrap{ grid-column: 1 / -1; justify-self: center; width: calc(var(--u) * 24); }
  body #drop-modal .drop-dlg .dd-leaves-tr{ right: calc(var(--u) * 1); }
}

/* ---- reduced motion ---- */
@media (prefers-reduced-motion: reduce){
  body #drop-modal.drop-dlg-overlay,
  body #drop-modal .drop-dlg,
  body #drop-modal .drop-dlg *{
    animation: none !important;
    transition: none !important;
  }
}

/* ===================================================================== */
/* Delete mode: red header, red quantity controls, warning panel          */
/* ===================================================================== */
body #drop-modal .drop-dlg .drop-dlg-title{ display: inline-flex; align-items: center; justify-content: center; gap: calc(var(--u) * 1.8); }
body #drop-modal .drop-dlg .drop-dlg-title-ico{ display: none; width: calc(var(--u) * 5.6); height: calc(var(--u) * 5.6); }
body #drop-modal .drop-dlg .dd-trash{ display: block; width: 100%; height: 100%; }
body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-title-ico{ display: block; }
body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-title{
  background:
    linear-gradient(115deg, transparent 18%, rgba(0, 0, 0, 0.2) 18.4%, transparent 19.4%, transparent 62%, rgba(0, 0, 0, 0.16) 62.4%, transparent 63.4%),
    linear-gradient(180deg, #ff5a4a 0%, #d3201a 50%, #9c1511 100%);
  border-color: #3a0c0a;
}
body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-title-ico{ color: #fff; filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(60, 6, 4, 0.8)); }

body #drop-modal .drop-dlg .drop-dlg-field-wrap{ display: flex; align-items: center; gap: calc(var(--u) * 1.2); }
body #drop-modal .drop-dlg .drop-dlg-of{ display: none; flex: 0 0 auto; font-size: calc(var(--u) * 3.6); font-weight: 900; color: rgba(214, 235, 250, 0.85); white-space: nowrap; }
body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-of{ display: block; }
body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-amount-row{ grid-template-columns: calc(var(--u) * 6.8) minmax(0, 1fr) calc(var(--u) * 6.8) calc(var(--u) * 26); }
body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-amount-label{ color: #9fd0ff; }

body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-step{
  border-color: #5a0f0c !important;
  background: linear-gradient(180deg, #ff7a68 0%, #e03a2c 52%, #b5201a 100%) !important;
  box-shadow: 0 0 0 calc(var(--u) * 0.25) #2f0907, 0 calc(var(--u) * 0.6) 0 #2f0907, inset 0 calc(var(--u) * 0.45) 0 rgba(255, 255, 255, 0.45) !important;
  text-shadow: 0 calc(var(--u) * 0.35) 0 rgba(80, 8, 4, 0.8);
}
body #drop-modal .drop-dlg[data-mode="delete"] input[type="range"]{
  background: linear-gradient(90deg, #ff6a58 0, #e03a2c var(--dd-fill, 0%), #162b4a var(--dd-fill, 0%), #162b4a 100%);
}
body #drop-modal .drop-dlg[data-mode="delete"] input[type="range"]::-webkit-slider-thumb{
  background: radial-gradient(circle at 36% 30%, #ffb0a4 0%, #e8402f 55%, #a5160f 100%);
}
body #drop-modal .drop-dlg[data-mode="delete"] input[type="range"]::-moz-range-thumb{
  background: radial-gradient(circle at 36% 30%, #ffb0a4 0%, #e8402f 55%, #a5160f 100%);
}

body #drop-modal .drop-dlg .drop-dlg-warning{
  display: grid !important;
  grid-template-columns: calc(var(--u) * 8) minmax(0, 1fr);
  align-items: center;
  gap: calc(var(--u) * 2);
  text-align: left !important;
  border-width: calc(var(--u) * 0.4) !important;
  border-color: #d3301f !important;
  background: linear-gradient(180deg, rgba(110, 14, 14, 0.85), rgba(62, 8, 10, 0.9)) !important;
  box-shadow: inset 0 0 calc(var(--u) * 2) rgba(255, 60, 40, 0.18);
}
body #drop-modal .drop-dlg .drop-dlg-warning[hidden]{ display: none !important; }
body #drop-modal .drop-dlg .drop-dlg-warn-ico{ width: calc(var(--u) * 8); height: calc(var(--u) * 8); filter: drop-shadow(0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.5)); }
body #drop-modal .drop-dlg .drop-dlg-warn-title{
  font-size: calc(var(--u) * 3.9);
  font-weight: 900;
  letter-spacing: 0.02em;
  color: #ff4a3a;
  text-shadow: 0 calc(var(--u) * 0.4) 0 rgba(0, 0, 0, 0.6);
}
body #drop-modal .drop-dlg .drop-dlg-warn-text{ margin-top: calc(var(--u) * 0.5); font-size: calc(var(--u) * 3.1); font-weight: 700; color: #ffe3dc; }

body #drop-modal .drop-dlg .drop-dlg-danger{ display: inline-flex !important; align-items: center; justify-content: center; gap: calc(var(--u) * 1.6); }
body #drop-modal .drop-dlg .drop-dlg-danger .dd-trash{ width: calc(var(--u) * 4.6); height: calc(var(--u) * 4.6); flex: 0 0 auto; filter: drop-shadow(0 calc(var(--u) * 0.35) 0 rgba(80, 8, 4, 0.8)); }

@media (max-width: 520px){
  body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-amount-row{ grid-template-columns: calc(var(--u) * 8) minmax(0, 1fr) calc(var(--u) * 8); }
  body #drop-modal .drop-dlg .drop-dlg-field-wrap{ justify-content: center; }
  body #drop-modal .drop-dlg[data-mode="delete"] .drop-dlg-field-wrap{ width: calc(var(--u) * 40); }
  body #drop-modal .drop-dlg .drop-dlg-warning{ grid-template-columns: calc(var(--u) * 6.4) minmax(0, 1fr); }
  body #drop-modal .drop-dlg .drop-dlg-warn-ico{ width: calc(var(--u) * 6.4); height: calc(var(--u) * 6.4); }
}