/* 迷宮樓梯座標 */

.map-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.sync {
  display: flex;
  align-items: center;
  gap: 12px;
}

.sync__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.84rem;
  color: var(--text-2);
}

.map-tools {
  display: grid;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.map-tools__servers {
  display: flex;
  align-items: center;
  gap: 12px;
}

.map-tools__servers .hud {
  flex-shrink: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.chip .i {
  width: 14px;
  height: 14px;
}

.chip--up[aria-pressed="true"] { color: var(--earth); border-color: var(--earth); background: color-mix(in srgb, var(--earth) 12%, transparent); }
.chip--down[aria-pressed="true"] { color: var(--wind); border-color: var(--wind); background: color-mix(in srgb, var(--wind) 12%, transparent); }
.chip--move[aria-pressed="true"] { color: var(--water); border-color: var(--water); background: color-mix(in srgb, var(--water) 12%, transparent); }

.map-tools__row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.map-search {
  position: relative;
  flex: 1 1 260px;
}

.map-search__icon {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--text-3);
  pointer-events: none;
}

.map-search .input {
  padding-left: 38px;
}

.map-sort .select {
  min-width: 150px;
}

.map-summary {
  min-height: 1.6em;
  margin: 4px 2px 12px;
  font-size: 0.88rem;
  color: var(--text-2);
}

.map-summary b {
  color: var(--text);
}

.dungeon-list {
  display: grid;
  gap: 10px;
}

/* 迷宮卡片 */
.dungeon {
  overflow: hidden;
}

.dungeon__head {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  cursor: pointer;
}

.dungeon__head::-webkit-details-marker {
  display: none;
}

.dungeon__name {
  font-weight: 700;
  font-size: 1.02rem;
}

.dungeon__meta {
  margin-left: auto;
  font-size: 0.8rem;
  color: var(--text-3);
  white-space: nowrap;
}

.dungeon__head > .i {
  color: var(--text-3);
  transition: transform 0.2s;
}

.dungeon[open] > .dungeon__head > .i {
  transform: rotate(180deg);
}

.dungeon[open] > .dungeon__head {
  border-bottom: 1px solid var(--line);
}

.dungeon.is-garbled .dungeon__name {
  color: var(--text-3);
}

.dungeon__body {
  /* 讓座標裡絕對定位的隱藏文字以這裡為基準，表格變寬時才不會撐寬整頁 */
  position: relative;
  overflow-x: auto;
}

.floor-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}

.floor-table th,
.floor-table td {
  padding: 8px 14px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
}

.floor-table tbody tr:last-child > * {
  border-bottom: 0;
}

.floor-table thead th {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--text-3);
  background: var(--panel-2);
  white-space: nowrap;
}

.floor-table thead .i {
  width: 12px;
  height: 12px;
  margin-right: 4px;
  vertical-align: -1px;
}

.floor-table tbody th {
  font-family: var(--font-hud);
  font-weight: 600;
  white-space: nowrap;
  color: var(--text);
  width: 1%;
}

.floor-table tbody tr:hover {
  background: var(--aqua-soft);
}

.cell-empty {
  color: var(--text-3);
}

.cell-age {
  white-space: nowrap;
  width: 1%;
}

/* 座標：魔力寶貝的「東／南」 */
.coord {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 2px 6px 2px 0;
  padding: 3px 9px 3px 7px;
  border-radius: 8px;
  border: 1px solid var(--line-2);
  background: var(--field);
  white-space: nowrap;
  color: var(--text-2);
}

.coord b {
  color: var(--text);
  font-weight: 600;
}

.coord .i {
  width: 12px;
  height: 12px;
}

.coord--up .i { color: var(--earth); }
.coord--down .i { color: var(--wind); }
.coord--move .i { color: var(--water); }

.coord small {
  font-size: 0.72rem;
  color: var(--text-3);
}

.coord__server {
  padding-left: 6px;
  margin-left: 2px;
  border-left: 1px solid var(--line-2);
}

.age {
  font-size: 0.8rem;
  color: var(--text-2);
}

.age--fresh {
  color: var(--ok);
}

.age--stale {
  color: var(--text-3);
}

.map-empty {
  padding: 28px;
  text-align: center;
  color: var(--text-3);
}

.map-note {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  font-size: 0.8rem;
  color: var(--text-3);
}

.map-note .i {
  margin-top: 3px;
}

/* 載入中骨架 */
.dungeon--skeleton {
  display: flex;
  align-items: center;
  gap: 16px;
  height: 54px;
  padding: 0 16px;
}

.dungeon--skeleton span {
  height: 12px;
  border-radius: 6px;
  background: linear-gradient(90deg, var(--panel-2), var(--panel-3), var(--panel-2));
  background-size: 200% 100%;
  animation: shimmer 1.4s linear infinite;
}

.dungeon--skeleton span:first-child {
  width: 30%;
}

.dungeon--skeleton span:last-child {
  width: 18%;
  margin-left: auto;
}

@keyframes shimmer {
  to {
    background-position: -200% 0;
  }
}

/* 手機：表格改成卡片列 */
@media (max-width: 640px) {
  .map-tools__servers {
    align-items: flex-start;
    flex-direction: column;
    gap: 6px;
  }

  .map-sort {
    flex: 1 1 100%;
  }

  .map-sort .select {
    width: 100%;
  }

  .floor-table thead {
    display: none;
  }

  .floor-table tr {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 2px 12px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--line);
  }

  .floor-table tbody tr:last-child {
    border-bottom: 0;
  }

  .floor-table th,
  .floor-table td {
    padding: 0;
    border: 0;
    width: auto;
  }

  .floor-table tbody th {
    grid-row: span 3;
    align-self: start;
    min-width: 64px;
    font-size: 0.95rem;
  }

  .floor-table td.cell-empty {
    display: none;
  }

  .floor-table td.cell-age {
    order: 9;
  }
}