.unit-numbers {
  margin-top: 3px;
  color: #dfcfed;
  font-size: 6px;
  font-weight: 900;
  word-spacing: 2px;
}

.drag-ghost.invalid {
  border-color: #ff7d72;
  filter: saturate(.55);
}

.footprint-grid.cols-1 { grid-template-columns: 10px; }
.footprint-grid.cols-2 { grid-template-columns: repeat(2, 10px); }

.pack-item.x-0 { left: 2px; }
.pack-item.x-1 { left: calc(16.6667% + 1.6667px); }
.pack-item.x-2 { left: calc(33.3333% + 1.3333px); }
.pack-item.x-3 { left: calc(50% + 1px); }
.pack-item.x-4 { left: calc(66.6667% + .6667px); }
.pack-item.x-5 { left: calc(83.3333% + .3333px); }
.pack-item.y-0 { top: 2px; }
.pack-item.y-1 { top: calc(var(--cell) + 4px); }
.pack-item.y-2 { top: calc(var(--cell) + var(--cell) + 6px); }
.pack-item.y-3 { top: calc(var(--cell) + var(--cell) + var(--cell) + 8px); }
.pack-item.y-4 { top: calc(var(--cell) + var(--cell) + var(--cell) + var(--cell) + 10px); }
.pack-item.w-1 { width: calc(16.6667% - 2.3333px); }
.pack-item.w-2 { width: calc(33.3333% - 2.6667px); }
.pack-item.h-1 { height: var(--cell); }
.pack-item.h-2 { height: calc(var(--cell) + var(--cell) + 2px); }

.drag-ghost {
  top: 76px;
  right: 14px;
  transform: none;
}

.unit-health .hp-0 { width: 0; }
.unit-health .hp-5 { width: 5%; }
.unit-health .hp-10 { width: 10%; }
.unit-health .hp-15 { width: 15%; }
.unit-health .hp-20 { width: 20%; }
.unit-health .hp-25 { width: 25%; }
.unit-health .hp-30 { width: 30%; }
.unit-health .hp-35 { width: 35%; }
.unit-health .hp-40 { width: 40%; }
.unit-health .hp-45 { width: 45%; }
.unit-health .hp-50 { width: 50%; }
.unit-health .hp-55 { width: 55%; }
.unit-health .hp-60 { width: 60%; }
.unit-health .hp-65 { width: 65%; }
.unit-health .hp-70 { width: 70%; }
.unit-health .hp-75 { width: 75%; }
.unit-health .hp-80 { width: 80%; }
.unit-health .hp-85 { width: 85%; }
.unit-health .hp-90 { width: 90%; }
.unit-health .hp-95 { width: 95%; }
.unit-health .hp-100 { width: 100%; }

.shop-kind {
  margin-bottom: 5px;
  color: #cfb8dc;
  font-size: 7px;
  font-weight: 1000;
  letter-spacing: .13em;
}

.bag-offer {
  border-color: #8d6d3f;
  background: linear-gradient(160deg, #392b3d, #211a2b);
}

.bag-footprint {
  display: grid;
  gap: 2px;
}

.bag-footprint.shape-w-1 { grid-template-columns: 10px; }
.bag-footprint.shape-w-2 { grid-template-columns: repeat(2, 10px); }
.bag-footprint.shape-w-3 { grid-template-columns: repeat(3, 10px); }
.bag-footprint.shape-h-1 { grid-template-rows: 10px; }
.bag-footprint.shape-h-2 { grid-template-rows: repeat(2, 10px); }
.bag-footprint.shape-h-3 { grid-template-rows: repeat(3, 10px); }
.bag-footprint i { width: 10px; height: 10px; border: 1px solid #ffcf75; border-radius: 2px; background: #9a6544; }
.bag-footprint .sx-0 { grid-column: 1; }
.bag-footprint .sx-1 { grid-column: 2; }
.bag-footprint .sx-2 { grid-column: 3; }
.bag-footprint .sy-0 { grid-row: 1; }
.bag-footprint .sy-1 { grid-row: 2; }
.bag-footprint .sy-2 { grid-row: 3; }

.grid-cell.covered { border-style: solid; box-shadow: inset 0 0 12px #0005; }
.grid-cell.bag-starter { background: #694d34; border-color: #ba8657; }
.grid-cell.bag-blade { background: #683037; border-color: #d66b6c; }
.grid-cell.bag-swift { background: #25545a; border-color: #65bdc3; }
.grid-cell.bag-guard { background: #394a5e; border-color: #91a9bf; }
.grid-cell.bag-element { background: #4b3f36; border-color: #a685d7; }

.bag-tile {
  position: absolute;
  z-index: 1;
  display: grid;
  place-items: center;
  border: 1px solid #f1c47a66;
  border-radius: 6px;
  touch-action: none;
  user-select: none;
}

.bag-tile img { width: 88%; height: 88%; object-fit: contain; border-radius: 6px; filter: drop-shadow(0 2px 3px #000b); pointer-events: none; }
.bag-tile.selected { outline: 3px solid var(--gold); z-index: 4; }
.bag-tile.bag-starter { background: #8b623d55; }
.bag-tile.bag-blade { background: #9b364755; }
.bag-tile.bag-swift { background: #2b7c8355; }
.bag-tile.bag-guard { background: #647b9255; }
.bag-tile.bag-element { background: #6e4d8555; }
.bag-tile.x-0 { left: 2px; }
.bag-tile.x-1 { left: calc(16.6667% + 1.6667px); }
.bag-tile.x-2 { left: calc(33.3333% + 1.3333px); }
.bag-tile.x-3 { left: calc(50% + 1px); }
.bag-tile.x-4 { left: calc(66.6667% + .6667px); }
.bag-tile.x-5 { left: calc(83.3333% + .3333px); }
.bag-tile.y-0 { top: 2px; }
.bag-tile.y-1 { top: calc(var(--cell) + 4px); }
.bag-tile.y-2 { top: calc(var(--cell) + var(--cell) + 6px); }
.bag-tile.y-3 { top: calc(var(--cell) + var(--cell) + var(--cell) + 8px); }
.bag-tile.y-4 { top: calc(var(--cell) + var(--cell) + var(--cell) + var(--cell) + 10px); }
.bag-tile.w-1 { width: calc(16.6667% - 2.3333px); }
.bag-tile.h-1 { height: var(--cell); }

.detail-copy { margin: 6px 0 0; color: #bda997; font-size: 10px; line-height: 1.4; }
.detail-object { display: grid; grid-template-columns: 52px 1fr; gap: 8px; align-items: center; }
.detail-object img { width: 52px; height: 52px; object-fit: contain; border-radius: 9px; }
.detail-object strong, .detail-object span, .detail-object small { display: block; }
.detail-object strong { font-size: 12px; }
.detail-object span { color: var(--gold); font-size: 10px; }
.detail-object small { margin-top: 3px; color: var(--muted); font-size: 8px; }

.utility-section { margin-top: 18px; }
.utility-grid { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: 8px; }
.drop-zone { min-height: 126px; border: 2px dashed #59476a; border-radius: 15px; transition: .15s; }
.drop-zone.active { border-color: #80efa0; background: #1c3f2c; }
.drop-zone.invalid { border-color: #ff7b90; background: #47202b; }
.reserve-zone { min-width: 0; padding: 8px; background: #1c1628; }
.zone-head { display: grid; grid-template-columns: 42px 1fr; gap: 7px; align-items: center; margin-bottom: 7px; }
.zone-head img { width: 42px; height: 42px; border-radius: 9px; object-fit: cover; }
.zone-head strong, .zone-head small { display: block; }
.zone-head strong { font-size: 10px; color: var(--gold); letter-spacing: .1em; }
.zone-head small { margin-top: 2px; color: var(--muted); font-size: 8px; }
.reserve-list { display: flex; gap: 6px; min-height: 55px; overflow-x: auto; }
.reserve-empty { align-self: center; padding: 15px; color: #766b82; font-size: 10px; }
.reserve-card { flex: 0 0 70px; padding: 4px; border: 1px solid #4d3d5d; border-radius: 9px; background: #292034; text-align: center; touch-action: none; user-select: none; }
.reserve-card.selected { outline: 3px solid var(--gold); }
.reserve-card img { width: 48px; height: 42px; object-fit: contain; border-radius: 7px; pointer-events: none; }
.reserve-card span, .reserve-card small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.reserve-card span { font-size: 8px; font-weight: 900; }
.reserve-card small { margin-top: 2px; color: var(--muted); font-size: 6px; }
.sell-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 10px; background: repeating-linear-gradient(-45deg,#271820,#271820 8px,#321d27 8px,#321d27 16px); text-align: center; }
.sell-zone strong { color: #ff91a1; font-size: 12px; letter-spacing: .1em; }
.sell-zone small { margin-top: 5px; color: #d4bbc1; font-size: 9px; }
.sell-zone span { margin-top: 9px; color: #8f7c82; font-size: 7px; }
.reroll b { display: block; color: var(--gold); font-size: 8px; }

@media (min-width: 760px) {
  .utility-grid { grid-template-columns: minmax(0, 1fr) 170px; }
  .drop-zone { min-height: 142px; }
}

.playback-controls {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 10px;
}

.speed-button {
  min-height: 46px;
  border: 1px solid #554267;
  border-radius: 11px;
  background: #21192d;
  color: #cabdd6;
  font: inherit;
  font-size: 12px;
  font-weight: 1000;
  cursor: pointer;
}

.speed-button.active {
  border-color: #f6c45f;
  background: #5e461d;
  color: #ffe4a1;
  box-shadow: inset 0 0 0 1px #f6c45f55;
}

.speed-button.stop.active { border-color: #ff8292; background: #572631; color: #ffd4da; }
.speed-button:disabled { opacity: .45; cursor: default; }

.header-actions { display: flex; gap: 7px; align-items: center; }
.account-trigger { min-width: 86px; color: #f6d687; }

.shop-card { position: relative; }
.shop-card.shop-locked { border-color: #f4c65d; box-shadow: inset 0 0 0 1px #f4c65d55, 0 0 14px #f4c65d22; }
.shop-lock { position: absolute; z-index: 3; top: 7px; right: 7px; min-height: 27px; padding: 0 7px; border: 1px solid #675375; border-radius: 7px; background: #20182aee; color: #a99bb4; font: inherit; font-size: 7px; font-weight: 1000; letter-spacing: .06em; }
.shop-locked .shop-lock { border-color: #f3c45a; background: #5b431c; color: #ffe4a0; }

.bag-tile { background-position: center; background-size: 120px 120px; background-blend-mode: soft-light, normal; box-shadow: inset 0 0 14px #0009, inset 0 0 0 1px #fff1; }
.bag-tile.bag-starter { background-image: linear-gradient(135deg,#6c4b33aa,#a36b3b66),url('assets/bags/starter.png'); }
.bag-tile.bag-blade { background-image: linear-gradient(135deg,#752e3caa,#b94d5666),url('assets/bags/blade.png'); }
.bag-tile.bag-swift { background-image: linear-gradient(135deg,#1e6269aa,#45a7a766),url('assets/bags/swift.png'); }
.bag-tile.bag-guard { background-image: linear-gradient(135deg,#435668aa,#8093a666),url('assets/bags/guard.png'); }
.bag-tile.bag-element { background-image: linear-gradient(135deg,#553d67aa,#9875b766),url('assets/bags/element.png'); }

.pack-item.fusion-ready { z-index: 5; animation: fusion-ready 1.1s ease-in-out infinite; }
.pack-item.fusion-locked { filter: saturate(.45) brightness(.78); outline: 2px solid #8b8295; }
.item-lock-badge { position: absolute; right: 3px; bottom: 3px; padding: 2px 4px; border-radius: 4px; background: #19151ed9; color: #d6cedf; font-size: 6px; font-weight: 1000; }
.lock-action.locked { border-color: #d8959d; background: #542833; color: #ffd0d6; }
.fusion-state { flex: 0 0 auto; padding: 5px 7px; border: 1px solid #544261; border-radius: 7px; color: #9c8ca8; font-size: 7px; font-weight: 1000; }
.recipe.ready .fusion-state { border-color: #7fe49a; background: #1e4b31; color: #b9ffca; }
@keyframes fusion-ready { 0%,100% { outline: 2px solid #79ef9c; box-shadow: 0 0 5px #79ef9c88; } 50% { outline: 4px solid #f6ca61; box-shadow: 0 0 18px #f6ca61cc; } }

.unit-card { transform-origin: center; }
.unit-card.anim-slash { animation: weapon-slash .48s ease-out; }
.unit-card.anim-stab { animation: weapon-stab .45s cubic-bezier(.2,.8,.3,1); }
.unit-card.anim-guard { animation: weapon-guard .5s ease; }
.unit-card.anim-brew { animation: potion-brew .55s ease; }
.unit-card.anim-pulse { animation: magic-pulse .55s ease; }
.unit-card.anim-spore { animation: poison-spore .55s ease; }
.unit-card.anim-time { animation: time-shift .55s ease; }
.unit-card.anim-flame,.unit-card.anim-inferno { animation: fire-strike .55s ease; }
.unit-card.anim-cast,.unit-card.anim-blizzard { animation: spell-cast .55s ease; }
.unit-card.anim-solar,.unit-card.anim-heart { animation: heal-glow .55s ease; }
.unit-card.anim-venom { animation: venom-strike .5s ease; }
.unit-card.impact-hit { box-shadow: 0 0 0 3px #ff6e75, inset 0 0 20px #ff334455; }
.unit-card.impact-critical { box-shadow: 0 0 0 4px #ffd260, 0 0 22px #ff814d; }
.unit-card.impact-effect { box-shadow: 0 0 0 3px #a982ff, inset 0 0 20px #7d58d855; }
.unit-card.impact-heal { box-shadow: 0 0 0 3px #67efa0, 0 0 22px #67efa088; }
@keyframes weapon-slash { 35% { transform: translateX(18px) rotate(8deg); filter: brightness(1.5); } 65% { transform: translateX(-5px) rotate(-5deg); } }
@keyframes weapon-stab { 30% { transform: translateX(-6px) scale(.94); } 55% { transform: translateX(25px) scale(1.08); filter: contrast(1.5); } }
@keyframes weapon-guard { 45% { transform: scale(1.1); box-shadow: 0 0 0 5px #8fb6dc88; } }
@keyframes potion-brew { 25% { transform: rotate(-8deg); } 55% { transform: rotate(8deg) translateY(-7px); filter: hue-rotate(25deg) brightness(1.4); } }
@keyframes magic-pulse { 50% { transform: scale(1.12); filter: brightness(1.6) drop-shadow(0 0 9px #8bc8ff); } }
@keyframes poison-spore { 30% { transform: translateY(-7px) rotate(-5deg); } 65% { filter: drop-shadow(0 0 10px #74e67f); } }
@keyframes time-shift { 35% { transform: rotateY(70deg) scale(.9); opacity: .45; } 70% { transform: rotateY(-20deg) scale(1.08); } }
@keyframes fire-strike { 45% { transform: translateY(-10px) scale(1.08); filter: brightness(1.7) drop-shadow(0 0 12px #ff6d39); } }
@keyframes spell-cast { 45% { transform: rotate(-6deg) scale(1.12); filter: hue-rotate(40deg) drop-shadow(0 0 12px #ad8cff); } }
@keyframes heal-glow { 50% { transform: scale(1.09); filter: brightness(1.55) drop-shadow(0 0 12px #65efa1); } }
@keyframes venom-strike { 30% { transform: skewX(-10deg) translateX(-5px); } 60% { transform: skewX(7deg) translateX(20px); filter: drop-shadow(0 0 9px #71df68); } }

.account-modal { position: fixed; z-index: 60; inset: 0; display: grid; place-items: center; padding: 18px; background: #0b0812dd; backdrop-filter: blur(6px); }
.account-modal[hidden] { display: none; }
.account-dialog { position: relative; width: min(100%,410px); padding: 24px; border: 1px solid #695477; border-radius: 18px; background: linear-gradient(160deg,#2a2035,#17121f); box-shadow: 0 22px 80px #000c; }
.account-dialog h2 { margin: 5px 0; font-size: 22px; }
.account-dialog p { margin: 0 0 16px; color: #b6a8bf; font-size: 11px; }
.account-close { position: absolute; top: 10px; right: 10px; width: 38px; height: 38px; border: 1px solid #594665; border-radius: 10px; background: #1b1523; color: #eee3f4; font: inherit; font-weight: 1000; }
.account-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-bottom: 12px; }
.account-tabs button,.account-form button,.account-user button { min-height: 44px; border: 1px solid #5c4869; border-radius: 10px; background: #21192b; color: #d4c5dd; font: inherit; font-size: 10px; font-weight: 1000; }
.account-tabs button.active { border-color: #f2c75e; background: #59431e; color: #ffe4a2; }
.account-form { display: grid; gap: 11px; }
.account-form label { color: #bbaec4; font-size: 8px; font-weight: 1000; letter-spacing: .1em; }
.account-form input { box-sizing: border-box; width: 100%; min-height: 46px; margin-top: 5px; padding: 0 12px; border: 1px solid #594665; border-radius: 10px; outline: none; background: #120e18; color: #f4eafa; font: inherit; font-size: 15px; }
.account-form input:focus { border-color: #f0c45e; box-shadow: 0 0 0 3px #f0c45e22; }
.account-form button { border-color: #d5a945; background: #6a4b18; color: #fff0b5; }
.account-user { display: grid; gap: 8px; padding: 14px; border: 1px solid #4d745a; border-radius: 12px; background: #172b20; }
.account-user span { color: #a8cbb3; font-size: 9px; }
.account-user strong { font-size: 18px; }
.account-message { min-height: 17px; margin-top: 10px; color: #7fe5a0; font-size: 9px; }
.account-message.error { color: #ff98a4; }

@media (prefers-reduced-motion: reduce) {
  .pack-item.fusion-ready,.unit-card[class*="anim-"] { animation-duration: .01ms; animation-iteration-count: 1; }
}