/* ==========================================================================================
   screens/hall.css — 组队大厅 (Alliance Hall): the filter row, the published-room list and the
   create bar. Reuses theme.css tokens and the shared parts of components.css / room.css
   (.topbar, .section-label, .me-chip, .brackets, .btn, .dpick, .num, .micro): no new colours,
   and every size is design px ÷ 100 (theme.css root scale).
   ========================================================================================== */

.hall-body {
  display: flex;
  flex-direction: column;
  gap: .3rem;
  width: 100%;
  max-width: 19.2rem;
  margin: 0 auto;
  padding: .36rem .6rem .4rem;
  align-content: start;
}
.hall-filters, .hall-list { min-width: 0; }
/* the filter row carries its controls on the right of the section label */
.hall-filters .section-label, .hall-list .section-label { flex-wrap: wrap; }
.hall-filters__right { display: flex; align-items: center; gap: .14rem; margin-left: auto; }
.hall-filters .dpick__opt { height: .46rem; font-size: .16rem; padding: 0 .16rem; }
/* the difficulty row hugs its options; the section label above it owns the full width (the sort row already sits in
   a flex row, so it shrinks on its own) */
.hall-filters > .dpick { display: inline-flex; }
.hall-list__count { margin-left: auto; font-size: .2rem; color: var(--mint-400); }
.hall-list__count .t-dim { font-size: .15rem; }

/* ---- the published rooms ------------------------------------------------------------------------------ */
.hall-rows { display: flex; flex-direction: column; gap: .14rem; }
.hall-card {
  --d-color: var(--amber);
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .3rem;
  padding: .2rem .3rem .2rem .38rem;
  overflow: hidden;
  background: linear-gradient(90deg, rgba(28, 34, 31, .92), rgba(14, 18, 16, .94));
  border: 1px solid var(--line);
  color: var(--text-hi);
  transition: border-color var(--t-med), box-shadow var(--t-med), background var(--t-med);
  animation: hall-card-in var(--t-slow) var(--ease-out) backwards;
}
@keyframes hall-card-in { from { opacity: 0; transform: translateY(.12rem); } }
.hall-card__bar {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: .06rem;
  background: var(--d-color);
  opacity: .45;
  transition: opacity var(--t-med), box-shadow var(--t-med);
}
.hall-card:hover { border-color: var(--line-3); }

/* difficulty block: glyph, 标准/险境/…, the AC code and the 同盟密钥 */
.hall-card__diff {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .03rem;
  min-width: 1.5rem;
  padding-right: .3rem;
  border-right: 1px solid var(--line);
}
/* the plain drop-shadow first: color-mix() is Safari < 16.2 only (test/client-static.test.js) */
.hall-card__glyph { width: .42rem; height: .42rem; color: var(--d-color); filter: drop-shadow(0 0 5px var(--d-color)); filter: drop-shadow(0 0 5px color-mix(in srgb, var(--d-color) 55%, transparent)); }
.hall-card__diffname { font-size: .22rem; font-weight: 900; letter-spacing: .06em; color: var(--d-color); }
.hall-card__diffcode { font-size: .13rem; color: var(--text-dim); letter-spacing: .1em; }
/* 自定义 (DESIGN §25): the room's typed multipliers, so a joiner sees them before walking in */
.hall-card__custom { padding: 0 .07rem; border: 1px solid var(--mint-700); color: var(--mint-400); font-size: .12rem; line-height: 1.7; white-space: nowrap; }
.hall-card__key {
  margin-top: .06rem;
  padding: .02rem .1rem;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .3);
  color: var(--text-md);
  font-size: .17rem;
  font-weight: 700;
  letter-spacing: .24em;
}

/* the room's facts */
.hall-card__main { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.hall-card__head { display: flex; align-items: center; gap: .12rem; min-width: 0; }
.hall-card__host { font-size: .24rem; font-weight: 700; max-width: 4.4rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hall-card__mine { padding: .01rem .08rem; background: var(--mint-500); color: var(--text-on-mint); font-size: .13rem; font-weight: 700; }
.hall-card__state { margin-left: auto; display: flex; align-items: center; gap: .06rem; font-size: .18rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
.hall-card__state .icon { width: .22rem; height: .22rem; }
.hall-card__state.is-open { color: var(--mint-400); }
.hall-card__state.is-match { color: var(--ice); }
.hall-card__state.is-full { color: var(--text-lo); }
.hall-card__note {
  font-size: .17rem;
  color: var(--text-md);
  line-height: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.hall-card__note.is-empty { color: var(--text-dim); }
.hall-card__meta { display: flex; align-items: center; flex-wrap: wrap; gap: .08rem .24rem; font-size: .14rem; color: var(--text-lo); }
.hall-card__meta-text { display: inline-flex; align-items: center; gap: .05rem; }
.hall-card__meta-text .icon { width: .16rem; height: .16rem; color: var(--text-dim); }
.hall-card__meta-text b { color: var(--text-hi); font-size: .17rem; }
.hall-card__seats { display: inline-flex; align-items: center; gap: .03rem; }
.hall-card__seats .icon { width: .2rem; height: .2rem; }
.hall-card__seats .icon.is-human { color: var(--mint-400); }
.hall-card__seats .icon.is-bot { color: var(--ice); }
.hall-card__seats .icon.is-free { color: var(--line-3); }
.hall-card__act { display: flex; align-items: center; gap: .12rem; }
.hall-card__act .btn--lg { min-width: 2.3rem; }

/* state accents */
.hall-card.is-match { --bk-c: var(--ice); }
.hall-card.is-full { --bk-c: var(--line-3); }
.hall-card.is-mine { box-shadow: 0 0 0 1px rgba(78, 216, 175, .28), 0 0 .44rem rgba(23, 249, 183, .12); }
.hall-card.is-open:hover { border-color: var(--mint-800); }
.hall-card.is-open:hover .hall-card__bar { opacity: 1; box-shadow: 0 0 .14rem var(--d-color); }

/* ---- empty / loading ---------------------------------------------------------------------------------- */
.hall-empty {
  --bk-c: var(--line-3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .16rem;
  min-height: 4.6rem;
  padding: .5rem;
  border: 1px dashed var(--line-2);
  background: rgba(10, 13, 12, .5);
  text-align: center;
}
.hall-empty__icon { width: .7rem; height: .7rem; color: var(--line-3); }
.hall-empty__title { font-size: .26rem; font-weight: 700; color: var(--text-md); letter-spacing: .08em; }

/* ---- bottom bar (the .room-bar pattern) --------------------------------------------------------------- */
.hall-bar {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .3rem;
  min-height: 1.5rem;
  padding: .18rem .6rem;
  background: linear-gradient(0deg, rgba(7, 9, 8, .96), rgba(10, 13, 12, .7));
  border-top: 1px solid var(--line);
}
.hall-bar::before {
  content: '';
  position: absolute;
  left: .6rem;
  right: .6rem;
  top: -1px;
  height: 1px;
  background: linear-gradient(90deg, var(--mint-700), transparent 30%, transparent 70%, var(--mint-700));
}
.hall-bar__left { display: flex; align-items: center; gap: .22rem; min-width: 0; }
.hall-bar__label { display: flex; flex-direction: column; font-size: .17rem; font-weight: 700; color: var(--text-md); line-height: 1.35; }
.hall-bar__center { display: flex; flex-direction: column; align-items: center; gap: .06rem; text-align: center; }
.hall-bar__status { font-size: .15rem; }
.hall-bar__status .icon { width: .18rem; height: .18rem; margin-right: .05rem; vertical-align: -.03rem; }
.hall-bar__hint { font-size: .13rem; }
.hall-bar__right { justify-self: end; display: flex; align-items: center; gap: .16rem; }
.hall-bar__right .btn--xl { min-width: 3.4rem; letter-spacing: .16em; }

/* ---- narrow screens: the card stacks, the bottom bar wraps -------------------------------------------- */
@media (max-width: 1280px) {
  .hall-card { grid-template-columns: auto minmax(0, 1fr); gap: .2rem; }
  .hall-card__act { grid-column: 2; justify-content: flex-end; }
  .hall-card__act .btn--lg { min-width: 1.9rem; }
  .hall-bar { grid-template-columns: minmax(0, 1fr) auto; }
  .hall-bar__center { display: none; }
}