/* The approved stone inventory, fitted to the existing 8x8 item coordinates. */
.win.w-inv {
  --inv-bone: #d9cbb2;
  --inv-bronze: #948061;
  --inv-well: #10120d;
  --cell: clamp(24px, calc((100vh - var(--con-h) - 260px) / 13.44), 57px);
  --cell: clamp(24px, calc((100dvh - var(--con-h) - 260px) / 13.44), 57px);
  width: calc(8 * var(--cell) + 44px);
  max-height: calc(100vh - var(--con-h) - 28px);
  max-height: calc(100dvh - var(--con-h) - 28px);
  color: var(--inv-bone);
  background: #282723 url(../assets/ui/inventory-stone-v1.png);
  border: 2px solid #0b0b09;
  box-shadow: inset 0 0 0 2px #88775a, inset 0 0 0 5px #181814, inset 0 0 0 6px #514a3a,
    0 0 0 1px #817059, 0 0 0 4px #201f1a, 0 12px 26px #0008;
}
.win.w-inv::after {
  inset: 6px;
  background:
    linear-gradient(90deg, #8c795b 1px, #11110e 1px 3px, #615440 3px 4px, transparent 4px) left / 5px 100% no-repeat,
    linear-gradient(-90deg, #8c795b 1px, #11110e 1px 3px, #615440 3px 4px, transparent 4px) right / 5px 100% no-repeat;
  border-top: 1px solid #766447;
  border-bottom: 1px solid #100d0a;
}
.w-inv .win-h {
  height: 40px;
  padding: 0 12px 0 34px;
  gap: 5px;
  background: transparent;
  border-bottom: 2px solid #10100d;
  box-shadow: 0 1px #78664b;
  margin: 6px 10px 0;
}
.w-inv .win-h::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 3px;
  width: 22px;
  height: 30px;
  background: url(../assets/ui/inventory-relief-v1.png) center / contain no-repeat;
  image-rendering: pixelated;
  pointer-events: none;
}
.w-inv .win-t {
  font-family: 'Cinzel', var(--f-title);
  font-size: calc(clamp(18px, calc(var(--cell) * .55), 25px) * var(--txt-h));
  font-weight: 500;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: #d8c5a2;
  text-shadow: 0 2px #080705, -1px -1px #796044;
}
.w-inv .win-t::before { display: none; }
.w-inv .win-k { color: #b8a789; }
.w-inv .win-x {
  background: linear-gradient(#493223, #281d15);
  border-color: #110e0b;
  box-shadow: inset 1px 1px #b09868, inset -1px -1px #493b27, 1px 1px #89724b;
}
.w-inv .win-x:hover { border-color: #c0a477; background: #573124; }
.w-inv .win-b {
  padding: 8px 18px 10px;
  scrollbar-color: #857150 #10120d;
}
.w-inv .inv-identity {
  text-align: center;
  font-size: calc(12px * var(--txt));
  line-height: 1.4;
  color: #c0b196;
  margin: 0 0 6px;
  overflow-wrap: anywhere;
}
.w-inv .doll {
  width: calc(8 * var(--cell) + 4px);
  height: calc((8 * var(--cell) + 4px) * 310 / 456);
  margin: 0 auto 3px;
}
.w-inv .doll-bg {
  background: #24221d url(../assets/ui/inventory-backplate-v1.webp) center / 100% 100% no-repeat;
  border: 1px solid #090a08;
  box-shadow: 0 -1px #77674d, 1px 1px #594b35;
  image-rendering: auto;
}
.w-inv .slot {
  left: calc(var(--x) * 100% / 456);
  top: calc(var(--y) * 100% / 310);
  width: calc(var(--w) * 100% / 456);
  height: calc(var(--h) * 100% / 310);
  padding: 4px;
  background: linear-gradient(145deg, #191b15, #0b0e0a 65%, #181a13);
  border: 2px solid #090b08;
  box-shadow: -1px -1px #9c8967, 1px 1px #746144, inset 1px 1px #3e412f, inset -1px -1px #040704;
}
.w-inv .slot.full { background: linear-gradient(145deg, #191b15, #0b0e0a 65%, #181a13); border-color: #090b08; }
.w-inv .slot:hover, .w-inv .slot:focus-visible {
  background: linear-gradient(145deg, #253221, #101a0c);
  border-color: #9cae75;
}
.w-inv .slot:focus-visible { outline: 2px solid #c6ba8d; outline-offset: 3px; }
.w-inv .slot-ph { width: min(28px, 70%); opacity: .65; }
.w-inv .slot-ic { max-width: 100%; max-height: 100%; filter: drop-shadow(1px 2px #000); }
.w-inv .slot.locked { display: flex; flex-direction: column; justify-content: center; gap: 7px; }
.w-inv .slot.locked .slot-ph { width: min(24px, 60%); }
.w-inv .slot-state { color: #b9ad8d; font-size: calc(11px * var(--txt)); line-height: 1.25; text-align: center; }
.w-inv .slot.fit { border-color: var(--exc); box-shadow: inset 0 0 12px #4fe06a4d, 0 0 5px #4fe06a66; }
.w-inv .slot.nofit { border-color: var(--danger); box-shadow: inset 0 0 12px #ff4d4d40; }
.w-inv .slot.jewel { border-color: #b48cff; box-shadow: inset 0 0 12px #b48cff4d, 0 0 5px #b48cff66; }
.w-inv .inv-set {
  font-size: calc(11px * var(--txt));
  line-height: 1.3;
  color: #a1bb86;
  text-align: center;
  margin: 2px 0 1px;
  text-shadow: 0 1px #090b06;
}
.w-inv .inv-bag-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 10px;
  margin: 4px 0 6px;
  padding-bottom: 3px;
  border-bottom: 2px solid #11100c;
  box-shadow: 0 1px #7e6d4f;
  color: #c0b18e;
  font-size: calc(11px * var(--txt));
  line-height: 1.4;
}
.w-inv .inv-bag-title { font-family: 'Cinzel', var(--f-title); color: #d7c499; letter-spacing: .08em; }
.w-inv .inv-capacity.full { color: #eaa695; }
.w-inv .grid {
  background-color: #0e120b;
  background-image: linear-gradient(#a3956333 1px, transparent 1px),
    linear-gradient(90deg, #a3956333 1px, transparent 1px), radial-gradient(ellipse at 50% 40%, #1a2014, #0c1009 80%);
  border-color: #090b07;
  box-shadow: -1px -1px #a99770, 1px 1px #887045, inset 0 0 25px #0007;
}
.w-inv .it { background: linear-gradient(145deg, #233019b3, #17211188); }
.w-inv .it::after { border-color: #69794540; }
.w-inv .it:hover { background: linear-gradient(145deg, #3a4d2a, #1d2b16); }
.w-inv .it:hover::after { border-color: #aeb982; }
.w-inv .it img { padding: 3px; filter: drop-shadow(1px 2px #000); }
.w-inv .it-plus, .w-inv .it-qty {
  font: 400 calc(11px * var(--txt))/1 var(--f-ui);
  background: #0b0e08;
  color: #e6d7b2;
  padding: 1px 2px;
  text-shadow: 1px 1px #000;
}
.w-inv .it-plus { left: auto; top: auto; right: 3px; bottom: 3px; }
.w-inv .inv-foot {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 2px solid #12110c;
  box-shadow: 0 -1px #6f5f43;
}
.w-inv .zen {
  padding: 5px 9px;
  background: linear-gradient(#191811, #0f100b);
  border: 1px solid #090a07;
  box-shadow: inset 1px 1px #6f5c37, 1px 1px #89704d;
  color: #d6bd80;
}
.w-inv .zen-v { font: 400 calc(16px * var(--txt))/1 var(--f-ui); }
.w-inv .zen img { width: 20px; height: 20px; }
.w-inv .zen-unit { color: #b5a078; font: 400 calc(11px * var(--txt))/1 var(--f-ui); }
.w-inv .inv-hint { margin-top: 6px; color: #c0af8f; font-size: calc(11px * var(--txt)); line-height: 1.25; }

@media (max-width: 760px) {
  .win.w-inv {
    --cell: clamp(24px, min(calc((100vw - 44px) / 8), calc((100dvh - 170px) / 13.44)), 52px);
    max-height: none;
  }
  .w-inv .win-h { height: 44px; flex-shrink: 0; }
  .w-inv .win-t { font-size: calc(22px * var(--txt-h)); }
  .w-inv .win-b { width: 100%; padding: 10px 18px calc(12px + env(safe-area-inset-bottom)); }
  .w-inv .inv-identity, .w-inv .inv-set, .w-inv .inv-bag-head, .w-inv .inv-foot, .w-inv .inv-hint {
    width: calc(8 * var(--cell) + 4px);
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
  }
  .w-inv .win-x { width: 36px; height: 36px; }
  #ui.vaulting .win.w-inv { --cell: clamp(22px, calc((100vw - 44px) / 8), 38px); }
  #ui.vaulting .w-inv .inv-identity, #ui.vaulting .w-inv .inv-set { display: none; }
  #ui.vaulting .w-inv .win-b { padding: 8px 18px calc(10px + env(safe-area-inset-bottom)); }
  #ui.vaulting .w-inv .inv-bag-head { margin-top: 0; }
}
@media (max-width: 760px) and (orientation: landscape) {
  #ui.vaulting .win.w-inv { --cell: clamp(18px, calc((50vw - 44px) / 8), 38px); }
  .win.w-inv { --cell: clamp(24px, min(calc((100vw - 44px) / 8), calc((100dvh - 150px) / 13.44)), 52px); }
}
@media (max-height: 660px) and (min-width: 761px) {
  .w-inv .inv-identity, .w-inv .inv-set, .w-inv .inv-hint { display: none; }
  .win.w-inv { --cell: clamp(24px, calc((100dvh - var(--con-h) - 180px) / 13.44), 57px); }
}

/* ---------- Máquina do Caos (ui.js buildChaosWin, owner 2026-10-06): the Goblin do Caos' machine beside the bag.
   A dark swirling well (MU's Chaos Machine) set into the parchment window; requirements as have / need chips. ---------- */
.w-chaos { width: calc(368px * var(--txt-h)); }
.w-chaos .win-b { padding: 10px 14px 12px; }
.w-chaos .shop-top { gap: 10px; margin-bottom: 8px; }
.w-chaos .npc-ptw { width: 52px; height: 62px; }
.w-chaos .npc-line { margin-top: 3px !important; min-height: 2.7em; font-size: calc(12px * var(--txt)); line-height: 1.35; }
.chaos-box {
  position: relative; display: flex; align-items: center; gap: 14px; padding: 12px; overflow: hidden;
  border-radius: 14px; border: 2px solid var(--mn-gold-mid, #c9953a); color: #fff4e0;
  background: radial-gradient(ellipse at 26% 50%, #5a1a34 0, #2e1532 48%, #1c1226 100%);
  box-shadow: inset 0 0 0 1px var(--mn-gold-hi, #fff4c2), inset 0 0 22px rgba(0, 0, 0, .55);
}
.chaos-swirl {
  position: absolute; left: 58px; top: 50%; width: 150px; height: 150px; margin: -75px 0 0 -75px; border-radius: 50%; pointer-events: none;
  background: conic-gradient(rgba(226, 58, 74, 0), rgba(226, 58, 74, .6), rgba(185, 166, 220, .45), rgba(255, 217, 138, .55), rgba(226, 58, 74, 0));
  filter: blur(6px); opacity: .5; animation: chaosSwirl 9s linear infinite;
}
.chaos-slot {
  position: relative; z-index: 1; flex: 0 0 auto; width: 92px; height: 120px; display: flex; align-items: center; justify-content: center;
  border-radius: 12px; border: 2px dashed rgba(255, 217, 138, .6); cursor: pointer;
  background: radial-gradient(circle at 50% 42%, rgba(255, 250, 236, .16), rgba(0, 0, 0, .28) 75%);
}
.chaos-slot.full { border-style: solid; border-color: var(--mn-gold, #e2b65a); background: radial-gradient(circle at 50% 45%, rgba(255, 244, 194, .32), rgba(60, 20, 40, .45) 75%); }
.chaos-slot:hover, .chaos-slot:focus-visible { outline: none; border-color: var(--mn-gold-hi, #fff4c2); box-shadow: 0 0 0 3px rgba(255, 217, 138, .3), 0 0 16px rgba(255, 217, 138, .55); }
#ui.holding .chaos-slot { border-color: var(--mn-leaf-hi, #c8e89a); }
.chaos-ic { position: relative; width: 84px; height: 112px; display: flex; align-items: center; justify-content: center; pointer-events: none; }
.chaos-ic > img { max-width: 100%; max-height: 100%; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }
.chaos-ic .it-plus { position: absolute; right: 2px; bottom: 2px; z-index: 2; }
.chaos-info { position: relative; z-index: 1; flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.chaos-name { font: 700 calc(14px * var(--txt))/1.25 var(--f-ui, Georgia, serif); color: #fff4e0; overflow-wrap: anywhere; }
.chaos-name.bad { font: italic 400 calc(12px * var(--txt))/1.35 var(--f-ui, Georgia, serif); color: #ffb3bd; }
.chaos-lv { display: flex; align-items: baseline; gap: 8px; font: 700 calc(24px * var(--txt-h))/1 var(--f-num, Georgia, serif); }
.chaos-from { color: #e0d2b8; }
.chaos-to { color: var(--mn-sun, #ffd98a); text-shadow: 0 0 8px rgba(255, 217, 138, .7); }
.chaos-arrow { color: #ff9aa6; font-size: calc(18px * var(--txt)); }
.chaos-ch { display: flex; flex-direction: column; gap: 2px; }
.chaos-ch span { font: 400 calc(10px * var(--txt))/1.2 var(--f-num, Georgia, serif); letter-spacing: 1px; text-transform: uppercase; color: #d9c7a6; }
.chaos-pct { font: 800 30px/1 var(--f-num, Georgia, serif); color: #fff; }
.chaos-pct[data-k="hi"] { color: #a6f0a0; }
.chaos-pct[data-k="mid"] { color: #ffd98a; }
.chaos-pct[data-k="lo"] { color: #ff9aa6; }
.chaos-reqs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 10px; }
.chaos-req {
  display: flex; align-items: center; gap: 6px; min-width: 0; padding: 4px 8px; border-radius: 10px; font-size: calc(12px * var(--txt));
  color: var(--mn-ink, #3b2a1f); background: rgba(255, 250, 236, .75); border: 1.5px solid var(--mn-line, #d8bd86);
}
.chaos-req img { width: 22px; height: 22px; flex: 0 0 auto; object-fit: contain; image-rendering: pixelated; }
.chaos-rl { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chaos-n { font: 700 calc(12px * var(--txt))/1 var(--f-num, Georgia, serif); white-space: nowrap; }
.chaos-req.ok { border-color: var(--mn-leaf, #6aa84f); }
.chaos-req.ok .chaos-n { color: var(--mn-leaf-deep, #2f7a3a); }
.chaos-req.miss { border-color: var(--mn-rose-deep, #b23a52); background: rgba(255, 228, 232, .85); }
.chaos-req.miss .chaos-n { color: var(--mn-rose-deep, #b23a52); }
.chaos-req.zen-req { grid-column: 1 / -1; }
.chaos-warn { margin: 8px 0 0 !important; font-size: calc(11.5px * var(--txt)); line-height: 1.35; color: var(--mn-ink-2, #6b5442); }
.chaos-bind { color: var(--mn-rose-deep, #b23a52); font-weight: 700; }
.chaos-ph { margin-top: 9px; font: 400 calc(10px * var(--txt))/1.2 var(--f-num, Georgia, serif); letter-spacing: 1px; text-transform: uppercase; color: var(--mn-gold-deep, #8a5f1e); }
.chaos-pick { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 4px; max-height: 98px; overflow-y: auto; }
.chaos-pk {
  position: relative; width: 42px; height: 42px; padding: 3px; border-radius: 8px; cursor: pointer;
  border: 1.5px solid var(--mn-line, #d8bd86); background: radial-gradient(circle at 50% 42%, #fffdf6, var(--mn-well, #efe1c0) 75%);
}
.chaos-pk img { width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.chaos-pk .it-plus { position: absolute; right: 1px; bottom: 1px; }
.chaos-pk:hover, .chaos-pk:focus-visible { outline: none; border-color: var(--mn-gold, #e2b65a); }
.chaos-pk.on { border-color: var(--mn-gold-mid, #c9953a); box-shadow: 0 0 0 2px var(--mn-gold, #e2b65a), 0 0 10px rgba(255, 217, 138, .8); }
.chaos-none { padding: 4px 0; font-size: calc(12px * var(--txt)); font-style: italic; color: var(--mn-ink-3, #8f7a62); }
.btn.chaos-go { display: flex; width: 100%; min-height: 40px; margin-top: 10px; justify-content: center; font-size: calc(16px * var(--txt)); }
.w-chaos .inv-hint { margin-top: 6px; font-size: calc(11px * var(--txt)); line-height: 1.3; color: var(--mn-ink-3, #8f7a62); }
/* spin while the server rolls (≥ 1.2 s), then a gold flash (success) or a red shake (back to +0) */
.chaos-box.spin .chaos-swirl { opacity: .95; filter: blur(3px); animation: chaosSwirl .45s linear infinite; }
.chaos-box.spin .chaos-slot { animation: chaosShake .12s linear infinite; }
.chaos-box.ok { animation: chaosOk 1.2s ease-out; }
.chaos-box.fail { animation: chaosFail .9s ease-out; }
@keyframes chaosSwirl { to { transform: rotate(360deg); } }
@keyframes chaosShake { 0%, 100% { transform: none; } 25% { transform: translate(1px, -1px) rotate(-1.5deg); } 75% { transform: translate(-1px, 1px) rotate(1.5deg); } }
@keyframes chaosOk {
  0% { box-shadow: inset 0 0 0 1px #fff4c2, inset 0 0 70px rgba(255, 230, 140, .95), 0 0 30px rgba(255, 217, 138, .95); border-color: #fff4c2; }
  100% { box-shadow: inset 0 0 0 1px var(--mn-gold-hi, #fff4c2), inset 0 0 22px rgba(0, 0, 0, .55); }
}
@keyframes chaosFail {
  0%, 100% { transform: none; }
  12% { transform: translateX(-5px); box-shadow: inset 0 0 0 1px #ffb3bd, inset 0 0 60px rgba(255, 50, 70, .9), 0 0 20px rgba(220, 40, 60, .7); border-color: #e2394f; }
  28% { transform: translateX(5px); }
  44% { transform: translateX(-3px); }
  60% { transform: translateX(2px); }
}
@media (max-width: 760px) {
  .w-chaos .win-b { padding: 10px 14px calc(14px + env(safe-area-inset-bottom)); }
  .w-chaos .win-b > * { max-width: 460px; margin-left: auto; margin-right: auto; }
  .chaos-pick { max-height: 120px; }
  .chaos-pk { width: 48px; height: 48px; }
  .btn.chaos-go { min-height: 46px; }
}
@media (prefers-reduced-motion: reduce) {
  .chaos-swirl, .chaos-box.spin .chaos-swirl, .chaos-box.spin .chaos-slot, .chaos-box.ok, .chaos-box.fail { animation: none; }
}