/* ==========================================================================================
   screens/room.css — room/waiting screen: invite key, 4 seat cards, bottom action bar.
   ========================================================================================== */

.room-screen .topbar { height: 1.36rem; }
.room-ping { display: flex; flex-direction: column; align-items: flex-start; gap: .04rem; }

/* ---- invite key ---------------------------------------------------------------------------------------- */
.invite {
  --bk-c: var(--mint-500);
  display: grid;
  grid-template-columns: auto auto;
  column-gap: .2rem;
  row-gap: .06rem;
  align-items: center;
  padding: .1rem .16rem .12rem;
  background: rgba(0, 0, 0, .38);
  border: 1px solid var(--line);
}
.invite__label { grid-column: 1 / -1; display: flex; align-items: center; gap: .07rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.invite__label .icon { width: .16rem; height: .16rem; color: var(--mint-500); }
.invite__code { display: flex; gap: .06rem; }
.invite__code span {
  display: grid;
  place-items: center;
  width: .46rem;
  height: .58rem;
  background: linear-gradient(180deg, rgba(78, 216, 175, .1), rgba(78, 216, 175, .02));
  border-bottom: 2px solid var(--mint-600);
  color: var(--mint-400);
  font-size: calc(.44 * var(--t));
  font-weight: 700;
  line-height: 1;
  text-shadow: 0 0 .16rem rgba(23, 249, 183, .45);
}
.invite__btns { display: flex; flex-direction: column; gap: .06rem; }
.solo-note { display: flex; flex-direction: column; align-items: flex-end; gap: .03rem; font-size: calc(.16 * var(--t)); color: var(--text-lo); }

/* ---- seats ------------------------------------------------------------------------------------------------ */
.seats {
  flex: 1;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 3.8rem));
  grid-template-rows: minmax(0, 6rem);
  justify-content: center;
  align-content: center;
  gap: .3rem;
  padding: .3rem .6rem .24rem;
}
.seats--solo { grid-template-columns: 3.8rem minmax(0, 6.4rem); }

/* 100 人版移植 (docs/PS100-MIGRATION.md §7): a room whose seat capacity exceeds MAX_SEATS (coop only) wraps into as
   many rows as it needs and scrolls, instead of running off the page. The token is added by room.js ONLY above the
   official cap, so a 1–4 seat room keeps the four-column / one-row rules above byte-for-byte.

   The column width is a floor, not a preference: `.seat` is `height: 100%` and `.seat__art` is `flex: 1; overflow:
   hidden`, so a cell much below ~2.85rem clips the card's own content (the 100-seat probe in the third-party patch
   measured ~160px fragments). `grid-auto-rows` sizes each row to its content: an occupied card resolves to 6rem
   against it, an empty one to the ~100px it actually needs. `align-content: start` keeps row 1 at the top of the
   scroller instead of vertically centring a 25-row grid. */
.seats--dense {
  grid-template-columns: repeat(auto-fill, minmax(2.85rem, 1fr));
  grid-template-rows: none;
  grid-auto-rows: minmax(1.2rem, auto);
  justify-content: stretch;
  align-content: start;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(78, 216, 175, .45) transparent;
}
/* The per-card fade-in stagger is 60ms, so seat #100 would only appear ~6 s after the room opens. 6ms keeps the
   cascade legible and finishes a 100-seat room in ~0.6 s. Scoped to the dense grid: the four official seats keep the
   60ms stagger they have today. */
.seats--dense .seat { animation-delay: calc(var(--seat-i, 0) * 6ms); }
/* Few OCCUPIED seats: the box must still scroll, so `overflow` stays as above — an earlier variant set `visible` here
   and let 100 laid-out cards overflow a parent with `overflow: hidden`, making most of them unreachable. Only the
   height is capped, at the tallest a 4-seat room ever needs. */
.seats--dense.seats--compact { max-height: calc(4 * 6rem + 3 * .3rem + .54rem); }

.seat {
  --bk-c: var(--line-3);
  --bk-l: .18rem;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .07rem;
  height: 100%;
  min-height: 0;
  padding: .16rem .2rem .18rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(29, 35, 32, .95), rgba(11, 14, 13, .97));
  border: 1px solid var(--line);
  box-shadow: 0 .14rem .34rem rgba(0, 0, 0, .4);
  transition: border-color var(--t-med), box-shadow var(--t-med);
  animation: seat-in var(--t-slow) var(--ease-out) backwards;
  animation-delay: calc(var(--seat-i, 0) * 60ms);
}
@keyframes seat-in { from { opacity: 0; transform: translateY(.18rem); } }
.seat::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 3px;
  background: var(--line-2);
  transition: background var(--t-med), box-shadow var(--t-med);
}
.seat__head { align-self: stretch; display: flex; align-items: center; gap: .1rem; }
.seat__no { font-size: calc(.22 * var(--t)); font-weight: 700; color: var(--text-md); padding-left: .08rem; border-left: 3px solid var(--line-3); line-height: 1.1; }
.seat__host {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: .04rem;
  padding: .02rem .09rem;
  background: var(--gold);
  color: #1d1400;
  font-size: calc(.13 * var(--t));
  font-weight: 700;
}
.seat__host .icon { width: .15rem; height: .15rem; }
.seat__art {
  position: relative;
  flex: 1;
  min-height: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .08rem;
  margin: .06rem 0 .04rem;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 42%, rgba(78, 216, 175, .08), transparent 62%),
    linear-gradient(rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    linear-gradient(90deg, rgba(78, 216, 175, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    #0b0e0d;
  border: 1px solid rgba(255, 255, 255, .04);
}
.seat__stripes {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: .14rem;
  background: repeating-linear-gradient(-45deg, rgba(255, 255, 255, .06) 0 .05rem, transparent .05rem .1rem);
}
.seat__art .avatar { --av: 2.1rem; }
.seat__bot-label {
  display: flex;
  align-items: center;
  gap: .05rem;
  padding: .02rem .1rem;
  background: rgba(159, 212, 255, .1);
  border: 1px solid rgba(159, 212, 255, .35);
  color: var(--ice);
  font-size: calc(.14 * var(--t));
  font-weight: 700;
}
.seat__bot-label .icon { width: .16rem; height: .16rem; }
.seat__who { display: flex; align-items: center; gap: .08rem; max-width: 100%; }
.seat__name { font-size: calc(.26 * var(--t)); font-weight: 700; max-width: 3rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seat__you { flex: none; padding: .01rem .07rem; background: var(--mint-500); color: var(--text-on-mint); font-size: calc(.13 * var(--t)); font-weight: 700; }
.seat__foot {
  align-self: stretch;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .1rem;
  min-height: .46rem;
  margin-top: .06rem;
  padding-top: .1rem;
  border-top: 1px solid var(--line);
}
.seat__foot .tt-anchor { position: absolute; right: .14rem; bottom: .14rem; }
.seat__state { display: flex; align-items: center; gap: .06rem; font-size: calc(.18 * var(--t)); font-weight: 700; letter-spacing: .06em; }
.seat__state .icon { width: .22rem; height: .22rem; }
.seat__state--ready { color: var(--mint-400); }
.seat__state--waiting { color: var(--text-lo); }
.seat__state--offline { color: var(--orange-hi); }
.seat__state--host { color: var(--gold-2); }
/* a room with gameplay plugins (DESIGN §34.6): whether the seat's page has loaded and checked the room's content */
.seat__content { display: block; padding: 0 .12rem; font-size: calc(.13 * var(--t)); color: var(--text-lo); letter-spacing: .04em; }
.seat__content.is-ready { color: var(--mint-400); }
.seat__content.is-failed { color: var(--orange-hi); }
.room-mode { margin-left: .1rem; padding: 0 .08rem; border: 1px solid rgba(255, 106, 61, .6); color: #ff8a5c; font-size: calc(.16 * var(--t)); vertical-align: middle; }

.seat.is-ready { --bk-c: var(--mint-500); border-color: var(--mint-800); }
.seat.is-ready::before { background: var(--mint-500); box-shadow: 0 0 .12rem rgba(23, 249, 183, .6); }
.seat.is-host .seat__no { border-left-color: var(--gold); }
.seat.is-me { box-shadow: 0 0 0 1px rgba(78, 216, 175, .28), 0 0 .44rem rgba(23, 249, 183, .12), 0 .14rem .34rem rgba(0, 0, 0, .4); }
.seat.is-me .seat__no { color: var(--mint-400); }
.seat.is-offline::before { background: var(--orange); }
.seat.is-bot .seat__art { background:
    radial-gradient(circle at 50% 42%, rgba(159, 212, 255, .08), transparent 62%),
    linear-gradient(rgba(159, 212, 255, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    linear-gradient(90deg, rgba(159, 212, 255, .04) 1px, transparent 1px) 0 0 / .3rem .3rem,
    #0b0e10; }

.seat--empty { background: rgba(10, 13, 12, .5); border-style: dashed; border-color: var(--line-2); box-shadow: none; }
.seat--empty .seat__art { background: transparent; border: 0; }
.seat__radar {
  width: 1.3rem;
  height: 1.3rem;
  border-radius: 50%;
  background:
    repeating-radial-gradient(circle, transparent 0 .2rem, rgba(78, 216, 175, .14) .2rem .21rem),
    /* same geometry as .title-bg__sweep: bright edge at 100% (== 0deg) so it leads the clockwise
       rotation and the glow trails behind; see the comment in screens/title.css. */
    conic-gradient(from 0deg, transparent 0 75%, rgba(23, 249, 183, .2) 100%);
  -webkit-mask-image: radial-gradient(circle, #000 60%, transparent 71%);
  mask-image: radial-gradient(circle, #000 60%, transparent 71%);
  animation: radar-sweep 4s linear infinite;
}
@keyframes radar-sweep { to { transform: rotate(360deg); } }
.seat__wait { font-size: calc(.2 * var(--t)); color: var(--text-lo); letter-spacing: .08em; }
.seat--empty .seat__foot { border-top-style: dashed; }

.solo-brief {
  --bk-c: var(--mint-500);
  align-self: stretch;
  display: flex;
  flex-direction: column;
  gap: .14rem;
  height: 100%;
  padding: .34rem .4rem;
  background:
    repeating-linear-gradient(0deg, rgba(255, 255, 255, .014) 0 1px, transparent 1px 3px),
    linear-gradient(180deg, rgba(24, 29, 27, .92), rgba(11, 14, 13, .95));
  border: 1px solid var(--line);
  animation: seat-in var(--t-slow) 80ms var(--ease-out) backwards;
}
.solo-brief h2 { font-size: calc(.36 * var(--t)); font-weight: 900; letter-spacing: .06em; }
.solo-brief p { font-size: calc(.18 * var(--t)); color: var(--text-md); }
.solo-brief ul { margin: .06rem 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: .08rem; font-size: calc(.16 * var(--t)); color: var(--text-lo); }
.solo-brief li::before { content: ''; display: inline-block; width: .06rem; height: .06rem; margin: 0 .12rem .02rem 0; background: var(--mint-600); transform: rotate(45deg); vertical-align: middle; }
.solo-brief b { color: var(--text-hi); }

/* ---- spectator seats (观战席, community report #26) -------------------------------------------------------------- */
.specbar {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: .14rem;
  padding: 0 .6rem .16rem;
  font-size: calc(.15 * var(--t));
  color: var(--text-lo);
}
.specbar__label { display: flex; align-items: baseline; gap: .06rem; font-weight: 700; color: var(--text-md); }
.specbar__label .icon { width: .18rem; height: .18rem; align-self: center; color: var(--mint-500); }
.specbar__label b { color: var(--mint-400); }
.specbar__who {
  display: inline-flex;
  align-items: center;
  gap: .06rem;
  min-height: .36rem;
  padding: 0 .14rem;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .32);
  color: var(--text-hi);
}
.specbar__who.is-me { border-color: var(--mint-600); }
.specbar__who.is-offline { color: var(--text-dim); }
.specbar__who > .icon { width: .16rem; height: .16rem; }

/* ---- bottom bar ----------------------------------------------------------------------------------------- */
.room-bar {
  position: relative;
  flex: none;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  align-items: center;
  gap: .3rem;
  height: 1.5rem;
  padding: 0 .6rem;
  background: linear-gradient(0deg, rgba(7, 9, 8, .96), rgba(10, 13, 12, .7));
  border-top: 1px solid var(--line);
}
.room-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));
}
.room-bar__left { display: flex; align-items: center; gap: .22rem; min-width: 0; }
.room-bar__label { display: flex; flex-direction: column; font-size: calc(.17 * var(--t)); font-weight: 700; color: var(--text-md); line-height: 1.35; }
.room-bar__center { display: flex; flex-direction: column; align-items: center; gap: .06rem; }
.room-bar__right { justify-self: end; display: flex; align-items: center; gap: .16rem; }
.room-bar__status { font-size: calc(.15 * var(--t)); }
.room-bar__status .icon { width: .18rem; height: .18rem; margin-right: .05rem; vertical-align: -.03rem; }

.dpick { display: flex; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); }
.dpick__opt {
  --d-color: var(--amber);
  position: relative;
  display: flex;
  align-items: center;
  gap: .06rem;
  height: .54rem;
  padding: 0 .2rem;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: var(--text-lo);
  font-size: calc(.18 * var(--t));
  font-weight: 700;
  letter-spacing: .08em;
  transition: color var(--t-fast), background-color var(--t-med), box-shadow var(--t-med);
}
.dpick__opt:last-child { border-right: 0; }
.dpick__opt .icon { width: .2rem; height: .2rem; color: var(--d-color); opacity: .55; transition: opacity var(--t-fast); }
.dpick__opt:hover:not(:disabled) { color: var(--text-hi); background: rgba(255, 255, 255, .03); }
.dpick__opt:hover:not(:disabled) .icon { opacity: 1; }
.dpick__opt:disabled { cursor: default; }
.dpick__opt.is-active {
  color: var(--d-color);
  background: transparent; background: color-mix(in srgb, var(--d-color) 17%, transparent);
  box-shadow: inset 0 -3px 0 var(--d-color);
}
.dpick__opt.is-active .icon { opacity: 1; filter: drop-shadow(0 0 5px var(--d-color)); }
.dpick--ro { border: 0; background: none; gap: .18rem; align-items: center; font-size: calc(.14 * var(--t)); }
/* 「AI 队友最后选择」 (GitHub #338, co-op): one switch styled like a difficulty option, under the difficulty picker */
.room-bar__opts { display: flex; flex-direction: column; align-items: flex-start; gap: .08rem; min-width: 0; }
.ailast { display: flex; align-items: center; gap: .12rem; font-size: calc(.14 * var(--t)); }
.ailast__opt { --d-color: var(--mint-400); height: .36rem; padding: 0 .14rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); font-size: calc(.15 * var(--t)); letter-spacing: .04em; }
.ailast__opt:last-child { border-right: 1px solid var(--line-2); }
.ailast__opt .icon { opacity: .25; }
.ailast__opt .icon.is-on { opacity: 1; }

.ready-count[hidden] { display: none; }
.ready-count { display: flex; align-items: baseline; gap: .06rem; font-size: calc(.16 * var(--t)); }
.ready-count b { font-size: calc(.36 * var(--t)); line-height: 1; color: var(--mint-400); text-shadow: 0 0 .14rem rgba(23, 249, 183, .45); }
.ready-count .t-dim { font-size: calc(.22 * var(--t)); }
.ready-count__icons { display: flex; gap: .02rem; margin-left: .12rem; align-self: center; }
.ready-count__icons .icon { width: .28rem; height: .28rem; color: var(--line-3); transition: color var(--t-med); }
.ready-count__icons .icon.is-on { color: var(--mint-400); filter: drop-shadow(0 0 4px var(--mint-glow)); }

.room-bar .btn--xl { min-width: 3.2rem; letter-spacing: .2em; }

.trusted-banner { position: fixed; top: 0; left: 0; right: 0; z-index: 90; padding: 5px 16px; background: #9b202b; color: #fff; display: flex; justify-content: space-between; gap: 12px; }
.trusted-banner button { color: inherit; text-decoration: underline; }
.trusted-hash { overflow-wrap: anywhere; font-family: monospace; }

/* 本房间使用 mod (W-A/W-D, DESIGN §28.16): the room's declared set, plus whether THIS client holds it and a button that
   fetches exactly those packs. One row per pack, one line of state per row; the fill line only exists while something
   is missing. */
.room-mods { display: flex; flex-wrap: wrap; align-items: center; gap: .1rem .18rem; }
.room-mods__title { font-size: calc(.18 * var(--t)); letter-spacing: .04em; }
.room-mods__digest { font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.room-mods__state { font-size: calc(.14 * var(--t)); letter-spacing: .04em; }
.room-mods__list { display: flex; flex-wrap: wrap; gap: .06rem .22rem; margin: 0; padding: 0; list-style: none; }
.room-mods__list li { display: flex; align-items: baseline; gap: .08rem; font-size: calc(.15 * var(--t)); }
.room-mods__id { font-family: var(--font-num); letter-spacing: .02em; }
.room-mods__meta { font-size: calc(.13 * var(--t)); color: var(--text-lo); }
.room-mods__fill { display: flex; align-items: center; gap: .12rem; width: 100%; font-size: calc(.14 * var(--t)); }

/* ---- 房内聊天（引擎特性；public/js/screens/chat.js） ---------------------------------------------------- */
.chatp .chatp__list {
  display: flex; flex-direction: column; gap: .06rem;
  max-height: 2.6rem; overflow-y: auto;
  padding: .08rem .1rem; border: 1px solid var(--line); border-radius: .08rem;
  background: rgba(0, 0, 0, .18);                       /* Safari < 16.2 没有 color-mix() */
  background: color-mix(in srgb, var(--mint-800) 22%, transparent);
}
.chatp__empty { color: var(--text-lo); font-size: calc(.15 * var(--t)); }
.chatp__row { display: flex; align-items: baseline; gap: .1rem; font-size: calc(.16 * var(--t)); line-height: 1.35; }
.chatp__name { flex: 0 0 auto; max-width: 1.8rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mint-400); }
.chatp__text { flex: 1 1 auto; color: var(--text-hi); word-break: break-word; }
.chatp__quick { display: flex; flex-wrap: wrap; gap: .06rem; margin-top: .08rem; }
.chatp__q {
  padding: .03rem .1rem; font-size: calc(.14 * var(--t)); cursor: pointer;
  color: var(--text-md); background: transparent; border: 1px solid var(--line-2); border-radius: .05rem;
  transition: color var(--t-fast) var(--ease-out), border-color var(--t-fast) var(--ease-out);
}
.chatp__q:hover { color: var(--mint-400); border-color: var(--mint-600); }
.chatp__send { display: flex; align-items: center; gap: .08rem; margin-top: .1rem; }
.chatp__input {
  flex: 1 1 auto; min-width: 0; padding: .05rem .1rem; font-size: calc(.16 * var(--t));
  color: var(--text-hi); background: transparent;
  border: 1px solid var(--line-2); border-radius: .05rem;
}
.chatp__input:focus { outline: none; border-color: var(--mint-600); }
.chatp__go {
  flex: 0 0 auto; padding: .05rem .14rem; font-size: calc(.15 * var(--t)); cursor: pointer;
  color: var(--text-on-mint); background: var(--mint-500); border: 0; border-radius: .05rem;
}
.chatp__go[disabled] { opacity: .45; cursor: default; }
.chatp__note { margin-top: .1rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); }