/* The approved stone inventory, fitted to the existing 8x8 item coordinates. */
.win.w-inv {
  --inv-bone: #d9cbb2;
  --inv-bronze: #948061;
  --inv-well: #10120d;
  /* the text rows (name, set, bag head, hint, Zen) grow with "Tamanho do texto": the cells give them room, so the window
     never scrolls (a scrollbar would cut the bag's right column) */
  --cell: clamp(24px, calc((100vh - var(--con-h) - 119px - 126px * var(--txt)) / 14.14), 57px);
  --cell: clamp(24px, calc((100dvh - var(--con-h) - 119px - 126px * var(--txt)) / 14.14), 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) * 350 / 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% / 350);
  width: calc(var(--w) * 100% / 456);
  height: calc(var(--h) * 100% / 350);
  padding: 2px;                    /* thin: the item, not the frame, fills the slot (inventory 2026-10-11) */
  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, 50%); opacity: .65; }
/* the cropped icon, sized in px by ui.js fitPx (whole device px per art pixel; its glow margin may pass the padding) */
.w-inv .slot-ic { max-width: none; max-height: none; filter: drop-shadow(1px 2px #000); }
.w-inv .slot-ic.dn, .grid.dn .it img, .chaos-ic > img.dn, .sc-ic img.dn { image-rendering: auto; }   /* shrunk: smooth */
.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; }
/* bag / Baú / cursor item: the 32 px icons at 1:1 while a cell is 32 px or more (crisp), shrunk evenly below (ui.js
   shrinkCells: smooth); the glow overlay (style.css .ig) gets the same box */
.w-inv .it, .vault-grid .it, .held { display: grid; place-items: center; }
.w-inv .it img, .vault-grid .it img, .held img { padding: 0; width: min(100%, calc(var(--iw, 1) * 32px)); height: min(100%, calc(var(--ih, 1) * 32px)); }
.w-inv .it img { filter: drop-shadow(1px 2px #000); }
/* a cell of 30..32 px (ui.js shrinkCells 'ov'): the icon stays 1:1 and centred, up to 2 px past its cells */
.w-inv .grid.ov .it, .vault-grid.ov .it, .held.ov { place-content: center; }
.w-inv .grid.ov .it img, .vault-grid.ov .it img, .held.ov img { width: calc(var(--iw, 1) * 32px); height: calc(var(--ih, 1) * 32px); }
.w-inv .grid.ov .it > .ig, .vault-grid.ov .it > .ig, .held.ov > .ig {
  inset: auto; margin: 0; left: calc(50% - var(--iw, 1) * 16px); top: calc(50% - var(--ih, 1) * 16px);
  width: calc(var(--iw, 1) * 32px); height: calc(var(--ih, 1) * 32px);
}
.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 {
    /* the sheet's text rows grow with "Tamanho do texto": the height term reserves them (375×812 no longer scrolls at 1.25 / 1.5) */
    --cell: clamp(24px, min(calc((100vw - 44px) / 8), calc((100dvh - 142px - 82px * var(--txt)) / 14.14)), 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) / 14.14)), 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) / 14.14), 57px); }
}
/* short wide screens (1366×768, 1536×864, 1600×900; inventory 2026-10-11): the paper doll beside the bag, so the cells grow from
   ~24 px to 34+ px (the 32 px icons at 1:1) under the same height; the window stays right of the hero (the screen's
   centre; the trade window fits left of it) */
@media (min-width: 1100px) and (max-height: 900px) {
  .win.w-inv { --cell: clamp(24px, min(calc((100dvh - var(--con-h) - 196px) / 8), calc((50vw - 140px) / 16)), 40px); width: calc(16 * var(--cell) + 66px); }
  .w-inv .win-b { display: grid; grid-template-columns: repeat(2, calc(8 * var(--cell) + 4px)); column-gap: 18px; align-content: start; }
  .w-inv .inv-identity { grid-area: 1 / 1; }
  .w-inv .doll { grid-area: 2 / 1; }
  .w-inv .inv-set { grid-area: 3 / 1; }
  .w-inv .inv-hint { grid-area: 4 / 1; align-self: start; }
  .w-inv .inv-bag-head { grid-area: 1 / 2; }
  .w-inv .grid { grid-area: 2 / 2 / span 3; align-self: start; }
  .w-inv .inv-foot { grid-area: 5 / 2; }
}

/* ---------- 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: none; max-height: none; image-rendering: pixelated; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .6)); }   /* cropped icon, px size from ui.js fitPx */
.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 #a8833d; background: radial-gradient(circle at 50% 46%, #4d3d2e, #1f1813 75%);   /* the bag's walnut well */
}
.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); }
}
/* Goblin do Caos modes (Lorde pets): Máquina do Caos · Criar ajudante · Curar ajudante (ui.js setChaosMode) */
.chaos-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 8px; }   /* big text: a tab that no longer fits goes to a second row */
.chaos-tabs .btn.chaos-tab { flex: 1 1 auto; min-width: 0; padding: 0 6px; font-size: calc(12px * var(--txt)); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chaos-tabs .btn.chaos-tab.on { color: var(--mn-ink, #3b2a1f); border-color: var(--mn-gold-mid, #c9953a); background: linear-gradient(180deg, #fff6cc, #ffe08a 60%, #e8b85a); box-shadow: 0 0 0 1px var(--mn-gold-hi, #fff4c2); }
.chaos-box.pet .chaos-lv { font-size: calc(18px * var(--txt)); }
.chaos-pk .chaos-hp { position: absolute; left: 1px; bottom: 1px; padding: 0 3px; border-radius: 4px; font: 700 calc(10px * var(--txt))/calc(12px * var(--txt)) var(--f-num, Georgia, serif); color: #fff; background: rgba(47, 122, 58, .85); }
.chaos-pk .chaos-hp.out { background: rgba(178, 58, 82, .9); }
/* MUNDO450 §C.2 tab "Asas" (ui.js renderWing): the items placed in the recipe, t1's extra-jewel steppers */
.chaos-sub { margin-top: -2px; }
.chaos-wsel { min-height: 46px; max-height: 96px; }
.chaos-ex { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; margin-top: 4px; }
.chaos-ex .chaos-req { gap: 2px; padding: 3px 3px; justify-content: space-between; }
.chaos-ex .chaos-rl { flex: 0 0 auto; overflow: visible; font: 700 calc(11px * var(--txt))/1 var(--f-num, Georgia, serif); }
.chaos-ex .btn.chaos-st { flex: 0 0 auto; width: 20px; min-width: 20px; height: 20px; min-height: 20px; padding: 0; font-size: calc(13px * var(--txt)); line-height: 1; }
.chaos-ex .chaos-n { min-width: 1.1em; text-align: center; }
.chaos-ex .chaos-req img { width: 16px; height: 16px; }
@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; }
}

/* ---- Lorde pets' skills (SKILLS_PETS §5.3): reserved Abalo slot, the Corvo's active command, the Corvo strip ---- */
.sk .sk-horse { display: none; }
.sk.petghost .sk-img { opacity: .3; }
.console .sk.petghost .sk-lock, .sk.petghost .sk-lock { background: rgba(10, 8, 16, .18); }
.sk.petghost .sk-lv { color: #ff6b5e; }
.sk.pg-cavalo .sk-lock img:not(.sk-horse) { display: none; }
.sk.pg-cavalo .sk-lock .sk-horse, .console .sk.pg-cavalo .sk-lock .sk-horse { display: block; width: 14px; height: 14px; filter: drop-shadow(0 0 1px #000) drop-shadow(0 0 1px #000); }
.sk.petact { box-shadow: inset 0 0 0 2px #ffd34d, 0 0 7px rgba(255, 211, 77, .55); }
.skills { position: relative; }
.pet-strip { position: absolute; right: 0; bottom: calc(100% + 10px); display: flex; align-items: center; gap: 3px; padding: 3px 4px 3px 6px;
  background: rgba(14, 10, 22, .86); border: 1px solid #4a3a6a; border-radius: 6px; box-shadow: 0 2px 6px rgba(0, 0, 0, .5); z-index: 4; }
.pet-strip .ps-t { font: 700 calc(9px * var(--txt))/1 var(--f-num, monospace); color: #c8a8ff; letter-spacing: .05em; text-transform: uppercase; margin-right: 2px; }
.pet-strip .ps-b, .pet-strip .ps-one { position: relative; width: 28px; height: 28px; min-width: 0; min-height: 0; padding: 0; margin: 0;
  border: 1px solid #3a2f52; border-radius: 4px; background: #120c18; cursor: pointer; }
.pet-strip .ps-b img, .pet-strip .ps-one img { display: block; width: 20px; height: 20px; margin: 3px; image-rendering: pixelated; }
.pet-strip .ps-b:hover { border-color: #8a78d0; }
.pet-strip .ps-b.on, .pet-strip .ps-one { border-color: #ffd34d; box-shadow: 0 0 0 1px #ffd34d, 0 0 6px rgba(255, 211, 77, .55); }
.pet-strip.pend .ps-b.on, .pet-strip.pend .ps-one { opacity: .7; }
.pet-strip .ps-mark { position: absolute; right: 1px; top: 0; font: 700 calc(9px * var(--txt))/1 sans-serif; font-style: normal; color: #9a8f7c; }
.pet-strip .ps-mark.dot { right: 2px; top: 2px; width: 6px; height: 6px; border-radius: 50%; background: #ff3b4a; box-shadow: 0 0 3px #ff3b4a; }
.pet-strip .ps-one { display: none; }
.pet-strip.narrow .ps-b, .pet-strip.narrow .ps-t { display: none; }
.pet-strip.narrow .ps-one { display: block; }
.pet-strip:not(.narrow) .ps-pop { display: none; }
.pet-strip .ps-pop { position: absolute; right: 0; bottom: calc(100% + 4px); display: flex; flex-direction: column; gap: 2px; padding: 4px; min-width: 176px;
  background: rgba(14, 10, 22, .96); border: 1px solid #4a3a6a; border-radius: 6px; box-shadow: 0 2px 8px rgba(0, 0, 0, .6); }
.pet-strip .ps-opt { display: flex; align-items: center; gap: 8px; min-height: 34px; padding: 4px 8px; background: none; border: 1px solid transparent;
  border-radius: 4px; color: #eadfc6; font: 600 calc(13px * var(--txt))/1.2 var(--f-ui, sans-serif); text-align: left; cursor: pointer; }
.pet-strip .ps-opt img { width: 20px; height: 20px; image-rendering: pixelated; }
.pet-strip .ps-opt.on { border-color: #ffd34d; color: #ffd34d; }
.skr-ativo { white-space: nowrap; }