/* Playtest iteration: map encounter context and visible loot loop. */
.location-card {
  height: 102px;
  padding: 0;
  overflow: hidden;
  gap: 0;
  border-color: #4b535b;
  background: #22272c;
}

.location-card .map-scene {
  width: 42%;
  height: 100%;
  position: relative;
  flex: none;
  padding: 17px 11px;
  overflow: hidden;
  background: linear-gradient(145deg, #556f58, #26382b);
  isolation: isolate;
}

.location-card .map-scene::before,
.location-card .map-scene::after {
  content: '';
  position: absolute;
  z-index: -1;
  left: -15%;
  right: -15%;
  bottom: -22px;
  height: 74px;
  background: #1d2d22;
  clip-path: polygon(0 68%, 22% 24%, 43% 69%, 63% 12%, 80% 62%, 100% 28%, 100% 100%, 0 100%);
  opacity: .8;
}

.location-card .map-scene::after {
  bottom: -36px;
  left: 22%;
  right: -35%;
  background: #d7bd7250;
  clip-path: ellipse(45% 45% at 50% 50%);
}

.location-card.map-tone-blue .map-scene {
  background: linear-gradient(145deg, #607680, #293f49);
}

.location-card.map-tone-amber .map-scene {
  background: linear-gradient(145deg, #7b6744, #493923);
}

.location-card.map-tone-violet .map-scene {
  background: linear-gradient(145deg, #655772, #382f42);
}

.map-scene small,
.map-scene strong,
.map-scene em {
  position: relative;
  z-index: 1;
  display: block;
  text-shadow: 0 2px 4px #000;
}

.map-scene small {
  font-size: 8px;
  color: #d3ded4;
}

.map-scene strong {
  margin-top: 3px;
  font: 700 17px 'Songti SC', serif;
}

.map-scene em {
  margin-top: 13px;
  font: 7px sans-serif;
  color: #c2cbc3;
}

.location-card .map-intel {
  height: 100%;
  min-width: 0;
  flex: 1;
  padding: 9px;
}

.location-card .map-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 6px;
  border-bottom: 1px solid #3d444b;
}

.map-heading small {
  font-size: 8px;
  color: #9ca5ad;
}

.map-heading i {
  font: 8px sans-serif;
  color: #d7bd72;
}

.location-card .monster-roster {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5px;
  margin-top: 7px;
}

.monster-roster b {
  min-width: 0;
  padding: 5px;
  border: 1px solid #3b4249;
  border-radius: 5px;
  background: #1c2024;
  color: #b5bdc2;
  font-size: 9px;
}

.monster-roster b.active {
  border-color: #857044;
  background: #353024;
  color: #ecd28a;
}

.monster-roster b > i {
  display: inline-grid;
  width: 21px;
  height: 21px;
  margin-right: 4px;
  place-items: center;
  border-radius: 50%;
  background: #343b38;
  color: #d8ddd7;
  font: 10px serif;
}

.monster-roster b > small {
  display: block;
  margin: 3px 0 0 25px;
  font-size: 6px;
  color: #78828a;
  white-space: nowrap;
}

.battle-status small {
  margin-left: 5px;
  padding-left: 8px;
  border-left: 1px solid #59615d;
  color: #97a19b;
  font-size: 8px;
}

.drop-flight {
  position: absolute;
  z-index: 6;
  right: 46px;
  top: 190px;
  display: flex;
  align-items: center;
  gap: 6px;
  opacity: 0;
  pointer-events: none;
}

.drop-flight span {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border: 1px solid #d5b968;
  border-radius: 6px;
  background: #3b321e;
  color: #f0d58b;
  font: bold 13px serif;
  box-shadow: 0 0 18px #e1bd5f66;
}

.drop-flight b {
  padding: 5px 7px;
  border-radius: 4px;
  background: #171b1ee8;
  color: #f1db9b;
  font-size: 8px;
  white-space: nowrap;
}

.drop-flight.show {
  animation: loot-flight 1.7s ease-out both;
}

.loot-ticker {
  width: 100%;
  color: var(--text);
  text-align: left;
  cursor: pointer;
}

.loot-ticker time {
  min-width: 48px;
  text-align: right;
  color: #cbb474;
}

.recent-loot-panel {
  margin: 0 0 12px;
  padding: 10px;
  border: 1px solid #514b39;
  border-radius: 7px;
  background: linear-gradient(135deg, #2b2922, #20252a);
}

.recent-loot-panel header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 7px;
}

.recent-loot-panel header small,
.recent-loot-panel header b {
  display: block;
}

.recent-loot-panel header small {
  font-size: 7px;
  color: #92866c;
}

.recent-loot-panel header b {
  margin-top: 2px;
  font-size: 11px;
}

.recent-loot-panel header button {
  padding: 5px 7px;
  border: 1px solid #4d5357;
  border-radius: 4px;
  background: #252a2e;
  color: #90999f;
  font-size: 7px;
}

.recent-loot-row {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #393d3c;
}

.recent-loot-row > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border: 1px solid #71603d;
  background: #342f22;
  color: #e2c97e;
}

.recent-loot-row > div {
  min-width: 0;
  flex: 1;
}

.recent-loot-row b,
.recent-loot-row small {
  display: block;
}

.recent-loot-row b {
  font-size: 9px;
}

.recent-loot-row small {
  margin-top: 2px;
  color: #7f898f;
  font-size: 7px;
}

.recent-loot-row em {
  font: 7px sans-serif;
  color: #9da59f;
}

.recent-loot-row.new em::before {
  content: '新 · ';
  color: #e4c46d;
}

.inventory-slot.new {
  border-color: #9a8047;
  box-shadow: inset 0 0 0 1px #66542f, 0 0 8px #d0a94c33;
}

.inventory-slot > em {
  position: absolute;
  left: 2px;
  top: 2px;
  padding: 1px 3px;
  border-radius: 3px;
  background: #bd6a45;
  color: #fff;
  font: 6px sans-serif;
}

.inventory-slot.new span {
  animation: item-glow 1.4s ease-in-out infinite;
}

.bottom-nav em[hidden] {
  display: none;
}

.bag-tabs {
  margin-bottom: 10px;
}

@keyframes loot-flight {
  0% { opacity: 0; transform: translate(0, -8px) scale(.65); }
  18% { opacity: 1; transform: translate(0, 0) scale(1.08); }
  55% { opacity: 1; transform: translate(-40px, 18px) scale(1); }
  100% { opacity: 0; transform: translate(-155px, 150px) scale(.65); }
}

@keyframes item-glow {
  50% { filter: drop-shadow(0 0 5px #e0bd64); }
}

@media (max-height: 760px) {
  .location-card { height: 92px; }
  .battle-stage { height: 335px; }
  .combatant { top: 70px; }
  .enemy-side { top: 80px; }
  .impact { top: 103px; }
  .drop-flight { top: 165px; }
}

/* Equipment value loop: nine slots and five quality tiers. */
.quality-white { --quality: #d9dedc; --quality-bg: #343a3d; }
.quality-blue { --quality: #65a8ef; --quality-bg: #20364d; }
.quality-pink { --quality: #f18ac2; --quality-bg: #4c2940; }
.quality-gold { --quality: #e6bd4e; --quality-bg: #493d1e; }
.quality-green { --quality: #65d286; --quality-bg: #224431; }

.monster-roster b > small {
  overflow: hidden;
  text-overflow: ellipsis;
}

.inventory-slot[class*='quality-'] {
  border-color: var(--quality);
  background: linear-gradient(145deg, var(--quality-bg), #20252a 70%);
}

.inventory-slot[class*='quality-'] > span,
.inventory-slot[class*='quality-'] > small {
  color: var(--quality);
}

.recent-loot-row[class*='quality-'] > span {
  border-color: var(--quality);
  background: var(--quality-bg);
  color: var(--quality);
}

.recent-loot-row[class*='quality-'] b,
.recent-loot-row[class*='quality-'] > em {
  color: var(--quality);
}

.drop-flight[class*='quality-'] span {
  border-color: var(--quality);
  background: var(--quality-bg);
  color: var(--quality);
  box-shadow: 0 0 18px color-mix(in srgb, var(--quality), transparent 55%);
}

.equipment-card {
  margin-top: 10px;
  padding: 12px 12px 10px;
  border: 1px solid #3a4149;
  border-radius: 8px;
  background: #20252a;
}

.equipment-card header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.equipment-card h2,
.equipment-card p {
  margin: 0;
}

.equipment-card h2 {
  font-size: 14px;
}

.equipment-card p {
  margin-top: 3px;
  color: #8d969e;
  font-size: 8px;
}

.equipment-card header > span {
  color: #a89b78;
  font-size: 8px;
}

.equipment-slots {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 7px;
  position: relative;
  z-index: 1;
}

.equipment-slot {
  appearance: none;
  position: relative;
  min-width: 0;
  min-height: 72px;
  padding: 7px 3px 6px;
  text-align: center;
  border: 1px solid var(--quality);
  border-radius: 6px;
  background: linear-gradient(145deg, var(--quality-bg), #191d21);
  color: #d8dcda;
  box-shadow: inset 0 0 0 1px #ffffff08;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}

.equipment-slot:active {
  transform: scale(.97);
}

.equipment-slot.selected {
  box-shadow: inset 0 0 0 1px var(--quality), 0 0 0 2px #c4a75c55, 0 7px 16px #0007;
}

.equipment-slot > i {
  position: absolute;
  left: 4px;
  top: 3px;
  color: #687279;
  font: 6px sans-serif;
}

.equipment-slot.empty {
  --quality: #3a4249;
  --quality-bg: #1b2024;
}

.equipment-slot span,
.equipment-slot small,
.equipment-slot b {
  display: block;
}

.equipment-slot span {
  width: 34px;
  height: 34px;
  margin: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #10141699;
  color: var(--quality);
  font: 14px serif;
}

.equipment-slot small {
  margin-top: 4px;
  color: #858f96;
  font-size: 7px;
}

.equipment-slot b {
  margin-top: 2px;
  overflow: hidden;
  color: var(--quality);
  font-size: 6.5px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.equipment-board {
  position: relative;
  margin-top: 10px;
  padding: 8px;
  overflow: hidden;
  border: 1px solid #353d43;
  border-radius: 8px;
  background:
    radial-gradient(circle at 50% 50%, #74633c24 0 20%, transparent 45%),
    linear-gradient(145deg, #181d21, #22282d);
}

.equipment-board::before,
.equipment-board::after {
  content: '';
  position: absolute;
  inset: 20% 8%;
  border: 1px solid #8f794128;
  border-radius: 50%;
  transform: rotate(12deg);
}

.equipment-board::after {
  transform: rotate(-12deg);
}

.equipment-silhouette {
  position: absolute;
  z-index: 0;
  left: 50%;
  top: 50%;
  display: grid;
  width: 82px;
  height: 138px;
  place-items: center;
  transform: translate(-50%, -50%);
  border: 1px solid #9d86512b;
  border-radius: 48% 48% 32% 32%;
  background: linear-gradient(#b99e5d18, #2b333923);
  color: #b89c5755;
}

.equipment-silhouette span {
  font: 28px 'Songti SC', serif;
}

.equipment-silhouette i {
  position: absolute;
  bottom: 15px;
  font: 7px sans-serif;
  letter-spacing: .18em;
}

.equipment-drop-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 9px 1px 0 !important;
  color: #7e888f !important;
  font-size: 7px !important;
}

.equipment-drop-note b {
  color: #a9b0b4;
  font-weight: normal;
}

.equipment-drop-note span {
  display: inline-flex;
  align-items: center;
  gap: 2px;
}

.equipment-drop-note em {
  margin-left: auto;
  color: #c9b273;
  font-style: normal;
}

.quality-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #d9dedc;
}

.quality-dot.blue { background: #65a8ef; }
.quality-dot.pink { background: #f18ac2; }
.quality-dot.gold { background: #e6bd4e; }
.quality-dot.green { background: #65d286; }

.item-empty-detail {
  width: 100%;
  padding: 20px;
  text-align: center;
}

.item-empty-detail b,
.item-empty-detail span {
  display: block;
}

.item-empty-detail span {
  margin-top: 5px;
  color: #778188;
  font-size: 8px;
}

.item-detail[hidden] {
  display: none;
}

/* Anchored equipment comparison: desktop popover, mobile bottom sheet. */
.equipment-compare-layer {
  position: fixed;
  z-index: 30;
  inset: 0;
  background: #080a0c8c;
  backdrop-filter: blur(1.5px);
}

.equipment-compare-layer[hidden] {
  display: none;
}

.equipment-compare-popover {
  position: fixed;
  width: min(360px, calc(100vw - 24px));
  max-height: calc(100vh - 150px);
  overflow: auto;
  border: 1px solid var(--quality, #596168);
  border-radius: 9px;
  background: #181d21;
  color: #d7dcda;
  box-shadow: 0 18px 55px #000d, inset 0 0 0 1px #ffffff08;
  animation: compare-pop .16s ease-out both;
}

.equipment-compare-popover::before {
  content: '';
  position: absolute;
  left: 28px;
  top: -6px;
  width: 10px;
  height: 10px;
  transform: rotate(45deg);
  border-left: 1px solid var(--quality);
  border-top: 1px solid var(--quality);
  background: var(--quality-bg);
}

.equipment-compare-popover.empty-slot-popover {
  --quality: #78838a;
  --quality-bg: #20262a;
}

.equipment-compare-popover[data-placement='above']::before {
  top: auto;
  bottom: -6px;
  transform: rotate(225deg);
}

.compare-popover-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding: 12px;
  border-bottom: 1px solid color-mix(in srgb, var(--quality), transparent 70%);
  background: linear-gradient(135deg, var(--quality-bg), #1b2024 72%);
}

.compare-popover-head small,
.compare-popover-head h2,
.compare-popover-head p {
  display: block;
  margin: 0;
}

.compare-popover-head small {
  color: var(--quality);
  font-size: 7px;
}

.compare-popover-head h2 {
  margin-top: 3px;
  color: var(--quality);
  font-size: 15px;
}

.compare-popover-head p {
  margin-top: 3px;
  color: #8c969d;
  font-size: 8px;
}

.compare-popover-head > button {
  width: 29px;
  height: 29px;
  flex: none;
  border: 1px solid #4b5359;
  border-radius: 50%;
  background: #20262a;
  color: #b9c0c3;
  font-size: 17px;
}

.compare-candidate {
  display: flex;
  gap: 10px;
  padding: 10px 12px;
  background: linear-gradient(90deg, var(--quality-bg), #1b2024 58%);
}

.compare-candidate > span {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--quality);
  border-radius: 6px;
  background: #111619b5;
  color: var(--quality);
  font: 20px serif;
}

.compare-candidate > div {
  min-width: 0;
  flex: 1;
}

.compare-candidate small {
  color: #a4adb2;
  font-size: 7px;
}

.compare-candidate ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 10px;
  margin: 4px 0 0;
  padding: 0;
  list-style: none;
}

.compare-candidate li {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
  border-bottom: 1px solid #31383d;
  color: #89939a;
  font-size: 7px;
}

.compare-candidate li b {
  color: var(--quality);
}

.empty-equipped-popover {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 10px 12px;
  padding: 10px;
  border: 1px solid #3b4349;
  border-radius: 6px;
  background: #20262a;
}

.empty-equipped-popover > span {
  width: 48px;
  height: 48px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid #4a5359;
  border-radius: 6px;
  background: #151a1e;
  color: #737e85;
  font: 20px serif;
}

.empty-equipped-popover b,
.empty-equipped-popover p {
  display: block;
  margin: 0;
}

.empty-equipped-popover b {
  color: #c4c9c7;
  font-size: 10px;
}

.empty-equipped-popover p {
  margin-top: 4px;
  color: #78838a;
  font-size: 8px;
}

.compare-targets {
  display: grid;
  gap: 7px;
  padding: 9px 12px;
}

.compare-target {
  padding: 8px;
  border: 1px solid #394147;
  border-radius: 6px;
  background: #20262a;
}

.compare-current {
  display: flex;
  align-items: center;
  gap: 8px;
}

.compare-current > span {
  width: 36px;
  height: 36px;
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid var(--quality, #414950);
  border-radius: 5px;
  background: var(--quality-bg, #171c20);
  color: var(--quality, #737e85);
  font: 15px serif;
}

.compare-current > span.empty {
  --quality: #4a5359;
  --quality-bg: #171c20;
}

.compare-current > div {
  min-width: 0;
  flex: 1;
}

.compare-current small,
.compare-current b,
.compare-current em {
  display: block;
}

.compare-current small {
  color: #818b92;
  font-size: 7px;
}

.compare-current b {
  margin: 2px 0;
  overflow: hidden;
  font-size: 9px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.compare-current em {
  color: #68737b;
  font: 7px sans-serif;
}

.compare-current > strong {
  color: #72ce91;
  font-size: 12px;
}

.compare-target.worse .compare-current > strong {
  color: #d97870;
}

.compare-target > button {
  width: 100%;
  margin-top: 7px;
  padding: 8px;
  border: 1px solid var(--quality);
  border-radius: 5px;
  background: var(--quality-bg);
  color: var(--quality);
  font-size: 9px;
}

.compare-target > button:disabled {
  opacity: .42;
}

.equipment-compare-popover > footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 0 12px 11px;
}

.equipment-compare-popover > footer span {
  min-width: 0;
  overflow: hidden;
  color: #707a81;
  font-size: 7px;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.equipment-compare-popover > footer button {
  flex: none;
  padding: 6px 8px;
  border: 1px solid #4a5157;
  border-radius: 4px;
  background: transparent;
  color: #929ba1;
  font-size: 7px;
}

@keyframes compare-pop {
  from { opacity: 0; transform: translateY(-5px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (max-width: 560px) {
  .equipment-compare-popover.mobile-sheet {
    left: 12px;
    right: 12px;
    bottom: calc(70px + env(safe-area-inset-bottom));
    top: auto;
    width: auto;
    max-height: calc(100vh - 105px);
    border-radius: 11px 11px 7px 7px;
    animation-name: compare-sheet;
  }

  .equipment-compare-popover.mobile-sheet::before {
    display: none;
  }
}

@keyframes compare-sheet {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}