/* ==========================================================================================
   screens/room.css — room/waiting screen: invite key, 4–8 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); }

.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 §32.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; }
/* 5–8 player rooms: capacity picker (room.setSeats) */
.seatpick { display: flex; align-items: center; gap: .02rem; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .3); }
.seatpick__label { padding: 0 .1rem 0 .12rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); letter-spacing: .06em; white-space: nowrap; }
.seatpick__opt {
  min-width: .34rem;
  height: .36rem;
  padding: 0 .1rem;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--text-lo);
  font-size: calc(.15 * var(--t));
  font-weight: 700;
  font-family: var(--font-num, inherit);
}
.seatpick__opt:hover:not(:disabled) { color: var(--text-hi); background: rgba(255, 255, 255, .03); }
.seatpick__opt.is-active { color: var(--mint-400); box-shadow: inset 0 -3px 0 var(--mint-500); }
.seatpick__opt:disabled { opacity: .3; cursor: default; }
.seatpick--ro { border: 0; background: none; gap: .06rem; font-size: calc(.14 * var(--t)); color: var(--text-lo); }
.seatpick--ro .icon { width: .16rem; height: .16rem; }

/* 5–8 seat cards: four per row, wrapping into a second row (8 seats = 4 + 4) */
.seats--many {
  grid-template-columns: repeat(4, minmax(0, 3.4rem));
  grid-template-rows: none;
  grid-auto-rows: minmax(0, 5.2rem);
  align-content: start;
  overflow-y: auto;
  gap: .2rem;
  padding-top: .18rem;
}

.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; }

/* ---- host rules (room.settings) -------------------------------------------------------------------- */
.room-rules-btn {
  display: inline-flex; align-items: center; gap: .05rem; height: .3rem; padding: 0 .1rem;
  border: 1px solid var(--line-2); background: rgba(0, 0, 0, .28); color: var(--text-md);
  font-size: calc(.16 * var(--t)); letter-spacing: .04em;
}
.room-rules-btn:hover { border-color: var(--mint-600); color: var(--mint-300); }
.room-rules-btn .icon { width: .16rem; height: .16rem; }
.room-rules-btn b { padding: 0 .04rem; background: var(--mint-600); color: #06120e; font-size: calc(.13 * var(--t)); }
.rule-hint { margin: 0 0 .12rem; color: var(--text-lo); font-size: calc(.15 * var(--t)); line-height: 1.5; }
.rule-list { display: flex; flex-direction: column; gap: .1rem; min-width: 6rem; }
.rule-row {
  display: flex; align-items: center; justify-content: space-between; gap: .16rem; width: 100%;
  padding: .12rem .14rem; border: 1px solid var(--line); background: rgba(0, 0, 0, .28); color: var(--text-md);
  text-align: left;
}
.rule-row:hover:not(:disabled) { border-color: var(--mint-700); }
.rule-row:disabled { cursor: default; opacity: .72; }
.rule-row__copy { display: flex; flex-direction: column; gap: .03rem; min-width: 0; }
.rule-row__copy b { color: var(--text-hi); font-size: calc(.17 * var(--t)); }
.rule-row__copy small { color: var(--text-lo); font-size: calc(.13 * var(--t)); line-height: 1.4; }
.rule-switch { flex: none; width: .38rem; height: .2rem; padding: 2px; border: 1px solid var(--line-2); background: rgba(0, 0, 0, .5); }
.rule-switch i { display: block; width: .14rem; height: .14rem; background: var(--text-dim); transition: transform var(--t-fast), background var(--t-fast); }
.rule-row.is-on { border-color: var(--mint-600); }
.rule-row.is-on .rule-switch { border-color: var(--mint-500); }
.rule-row.is-on .rule-switch i { background: var(--mint-400); transform: translateX(.17rem); }

.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; }

/* ==========================================================================================
   Room v2: an ordered vertical roster on the left, the already-rolled battlefield on the
   right, and the controls in the command bar below. Scoped to .room-v2.
   ========================================================================================== */
.room-workspace {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 6.2rem);
  gap: .22rem;
  padding: .18rem .4rem .12rem;
  overflow: hidden;
}
.room-roster, .room-map {
  min-height: 0;
  display: flex;
  flex-direction: column;
  background: linear-gradient(180deg, rgba(17, 23, 20, .82), rgba(7, 10, 9, .88));
  border: 1px solid var(--line);
  box-shadow: 0 .12rem .3rem rgba(0, 0, 0, .3);
}
.room-panel__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .1rem;
  min-height: .34rem;
  padding: .06rem .1rem;
  border-bottom: 1px solid var(--line-2);
  color: var(--text-md);
  font-size: calc(.15 * var(--t));
  letter-spacing: .04em;
}
.room-panel__head > span { display: flex; align-items: center; gap: .07rem; }
.room-panel__head .icon { width: .18rem; height: .18rem; color: var(--mint-400); }
.room-panel__head b { color: var(--mint-400); font-family: var(--font-num); font-size: calc(.15 * var(--t)); }

.room-roster__list {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .055rem;
  padding: .08rem;
  overflow-y: auto;
}
.rseat {
  --rseat-c: var(--line-2);
  flex: none;
  display: grid;
  grid-template-columns: .42rem .48rem minmax(0, 1fr) auto auto auto;
  align-items: center;
  gap: .09rem;
  min-height: .62rem;
  padding: .06rem .1rem;
  border: 1px solid var(--line);
  border-left: 3px solid var(--rseat-c);
  background: rgba(255, 255, 255, .018);
  transition: border-color var(--t-fast), background var(--t-fast);
  animation: rseat-in var(--t-med) var(--ease-out) backwards;
  animation-delay: calc(var(--seat-i, 0) * 35ms);
}
@keyframes rseat-in { from { opacity: 0; transform: translateX(-.1rem); } }
.rseat.is-waiting { --rseat-c: #66716c; background: rgba(255, 255, 255, .012); }
.rseat.is-ready { --rseat-c: var(--mint-400); background: linear-gradient(90deg, rgba(78, 216, 175, .10), rgba(78, 216, 175, .015) 55%, transparent); }
.rseat.is-offline { --rseat-c: #c66b5e; opacity: .7; }
.rseat.is-bot { --rseat-c: #6c9590; }
.rseat.is-me { box-shadow: inset 0 0 0 1px rgba(78, 216, 175, .16); }
.rseat.is-empty { --rseat-c: #3a4541; border-style: dashed; border-left-style: solid; opacity: .72; }
.rseat__no { color: var(--text-dim); font-family: var(--font-num); font-size: calc(.12 * var(--t)); }
.rseat__empty-avatar {
  width: .42rem;
  height: .42rem;
  display: grid;
  place-items: center;
  border: 1px dashed var(--line-3);
  color: var(--text-dim);
}
.rseat__empty-avatar .icon { width: .2rem; height: .2rem; }
.rseat .avatar { width: .46rem; height: .46rem; }
.rseat__who { display: flex; flex-direction: column; gap: .01rem; min-width: 0; }
.rseat__who b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-hi); font-size: calc(.16 * var(--t)); font-weight: 700; }
.rseat__who b em { color: var(--mint-400); font-size: .72em; font-style: normal; }
.rseat__crown { width: .16rem; height: .16rem; color: var(--amber); vertical-align: -.02rem; }
.rseat__who .micro-label { color: var(--text-dim); font-size: calc(.095 * var(--t)); }
.rseat__state {
  display: inline-flex;
  align-items: center;
  gap: .04rem;
  white-space: nowrap;
  color: var(--text-dim);
  font-size: calc(.11 * var(--t));
}
.rseat__state i { width: .06rem; height: .06rem; border-radius: 50%; background: #69736e; }
.rseat__state.is-ready { color: var(--mint-300); }
.rseat__state.is-ready i { background: var(--mint-400); box-shadow: 0 0 .08rem var(--mint-400); }
.rseat .btn--square.btn--sm { --sq: .3rem; }

.room-map__locked {
  padding: .015rem .06rem;
  border: 1px solid rgba(78, 216, 175, .35);
  color: var(--mint-300) !important;
  font-size: calc(.1 * var(--t));
}
.room-map__frame {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  place-items: center;
  padding: .1rem .16rem;
  overflow: hidden;
  background:
    radial-gradient(60% 55% at 50% 50%, rgba(78, 216, 175, .06), transparent 70%),
    rgba(0, 0, 0, .2);
}
.room-map__grid {
  display: grid;
  width: min(100%, 4.9rem);
  max-height: 100%;
  gap: 1px;
  border: 1px solid rgba(78, 216, 175, .2);
  background: rgba(0, 0, 0, .35);
}
.room-map__grid i { display: block; min-width: 0; min-height: 0; }
.room-map__grid i.is-void { background: rgba(0, 0, 0, .35); }
.room-map__grid i.is-water { background: rgba(45, 113, 123, .5); }
.room-map__grid i.is-high { background: rgba(131, 111, 72, .58); }
.room-map__grid i.is-road { background: rgba(109, 122, 112, .42); }
.room-map__grid i.is-ground { background: rgba(78, 104, 90, .45); }
.room-map__code { position: absolute; right: .1rem; bottom: .06rem; color: rgba(214, 251, 239, .45); font-family: var(--font-num); font-size: calc(.1 * var(--t)); }
.room-map__empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .06rem; height: 100%; color: var(--text-dim); font-size: calc(.13 * var(--t)); text-align: center; }
.room-map__empty .icon { width: .4rem; height: .4rem; color: var(--line-3); }
.room-map__meta { flex: none; padding: .08rem .12rem .04rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .05rem .1rem; }
.room-map__meta b { color: var(--text-hi); font-size: calc(.2 * var(--t)); }
.room-map__meta > span { color: var(--text-dim); font-size: calc(.1 * var(--t)); }
.room-map__meta p { flex-basis: 100%; margin: 0; color: var(--text-lo); font-size: calc(.11 * var(--t)); line-height: 1.35; }
.room-map__facts { display: flex; flex-wrap: wrap; gap: .05rem .16rem; padding: .04rem .12rem; color: var(--text-dim); font-size: calc(.11 * var(--t)); border-top: 1px solid var(--line); }
.room-map__facts b { color: var(--mint-300); font-weight: 600; }
.room-map__effects { margin: 0; padding: .04rem .12rem .1rem .24rem; color: var(--text-lo); font-size: calc(.11 * var(--t)); line-height: 1.4; }
.room-map__effects li::marker { color: var(--mint-500); }

@media (max-width: 1100px) {
  .room-workspace { grid-template-columns: minmax(0, 1fr) minmax(0, 4.9rem); padding: .14rem .2rem; gap: .14rem; }
  .rseat { grid-template-columns: .34rem .42rem minmax(0, 1fr) auto auto auto; gap: .06rem; }
  .rseat__state { font-size: calc(.1 * var(--t)); }
}
@media (max-width: 760px) {
  .room-workspace { grid-template-columns: 1fr; overflow-y: auto; padding: .1rem .16rem; }
  .room-roster { min-height: 3.4rem; }
  .room-map { min-height: 4.2rem; }
  .room-map__grid { width: min(100%, 4.1rem); }
}
@media (max-width: 520px) {
  .rseat { grid-template-columns: .3rem .38rem minmax(0, 1fr) auto; }
  .rseat__state { display: none; }
  .room-workspace { padding: .08rem .1rem; }
}

/* ---- ethereal finish: the lobby backdrop shows through, panels lose their boxes ------------------------------ */
.room-v2 { position: absolute; inset: 0; background: #050a08; overflow: hidden; }
.room-v2 .room-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  filter: brightness(.56) saturate(.86);
  opacity: .9;
  pointer-events: none;
}
.room-v2 .room-bg__shade {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(3, 7, 5, .82), transparent 24%, transparent 72%, rgba(3, 7, 5, .92)),
    radial-gradient(70% 70% at 55% 48%, transparent 30%, rgba(3, 7, 5, .42) 100%);
}
.room-v2 > .topbar, .room-v2 > .room-workspace, .room-v2 > .specbar, .room-v2 > .room-bar { position: relative; z-index: auto; }
.room-v2 > .topbar { background: transparent; border-bottom-color: rgba(78, 216, 175, .1); }
.room-v2 .room-workspace { padding-top: .24rem; }
.room-v2 .room-roster,
.room-v2 .room-map {
  background: linear-gradient(180deg, rgba(8, 14, 11, .36), rgba(4, 8, 6, .52));
  border: 0;
  box-shadow: none;
  backdrop-filter: blur(5px);
}
.room-v2 .room-panel__head {
  background: linear-gradient(90deg, rgba(78, 216, 175, .08), transparent 58%);
  border-bottom: 1px solid rgba(78, 216, 175, .12);
}
.room-v2 .rseat {
  border: 0;
  border-left: 2px solid var(--rseat-c);
  background: linear-gradient(90deg, rgba(255, 255, 255, .028), rgba(255, 255, 255, .008));
  backdrop-filter: blur(3px);
}
.room-v2 .rseat.is-ready { background: linear-gradient(90deg, rgba(78, 216, 175, .13), rgba(78, 216, 175, .018) 62%, transparent); }
.room-v2 .rseat.is-empty { border-left-color: rgba(78, 216, 175, .18); background: rgba(255, 255, 255, .012); }
.room-v2 .room-map__3d {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  overflow: hidden;
  background: radial-gradient(55% 48% at 50% 50%, rgba(78, 216, 175, .08), transparent 72%);
}
.room-v2 .room-map__3d::after {
  content: '';
  position: absolute;
  inset: 8% 5%;
  border: 1px solid rgba(78, 216, 175, .09);
  border-radius: 50%;
  pointer-events: none;
}
.room-v2 .room-map__canvas { display: block; width: 100%; height: 100%; }
.room-v2 .room-map__empty { min-height: 100%; }
.room-v2 .room-map__meta { border-top: 1px solid rgba(78, 216, 175, .1); }
.room-v2 .room-map__facts { border-top-color: rgba(78, 216, 175, .1); }
.room-v2 .room-bar { background: linear-gradient(180deg, rgba(3, 7, 5, .35), rgba(3, 7, 5, .88)); border-top: 1px solid rgba(78, 216, 175, .12); }
.room-v2 .specbar { background: rgba(3, 7, 5, .4); border-color: rgba(78, 216, 175, .1); }

@media (max-width: 760px) {
  .room-v2 .room-map__3d { min-height: 3.6rem; }
}

/* readable glass: keep the backdrop visible, but give the roster/map their own quiet air */
.room-v2 .room-roster { background: linear-gradient(90deg, rgba(3, 8, 6, .78), rgba(3, 8, 6, .48) 72%, rgba(3, 8, 6, .32)); }
.room-v2 .room-map { background: linear-gradient(180deg, rgba(3, 8, 6, .55), rgba(3, 8, 6, .72)); }
.room-v2 .rseat { background: linear-gradient(90deg, rgba(255, 255, 255, .055), rgba(255, 255, 255, .012)); }
.room-v2 .rseat.is-ready { background: linear-gradient(90deg, rgba(78, 216, 175, .16), rgba(78, 216, 175, .025) 62%, transparent); }
.room-v2 .room-map__3d { filter: drop-shadow(0 0 .3rem rgba(78, 216, 175, .12)); }

/* preview -> analog noise -> real board -> flash -> preview */
.room-v2 .room-map__3d { isolation: isolate; }
.room-v2 .room-map__live {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  opacity: 0;
  pointer-events: none;
  transition: opacity 90ms linear;
}
.room-v2 .room-map__3d.is-actual .room-map__live { opacity: 1; }
.room-v2 .room-map__3d.is-actual .room-map__canvas { opacity: 0; }
.room-v2 .room-map__snow {
  position: absolute;
  inset: -10%;
  z-index: 4;
  width: 120%;
  height: 120%;
  opacity: 0;
  pointer-events: none;
  image-rendering: pixelated;
  mix-blend-mode: screen;
  transition: opacity 70ms linear;
}
.room-v2 .room-map__3d.is-static .room-map__snow,
.room-v2 .room-map__3d.is-flash .room-map__snow { opacity: .82; }
.room-v2 .room-map__3d.is-static .room-map__canvas {
  filter: blur(6px) brightness(1.45) contrast(1.15);
  transform: scale(1.015);
}
.room-v2 .room-map__live-label {
  position: absolute;
  top: .08rem;
  left: .1rem;
  z-index: 6;
  opacity: 0;
  padding: .02rem .06rem;
  border: 1px solid rgba(78, 216, 175, .4);
  background: rgba(3, 8, 6, .7);
  color: var(--mint-300);
  font-family: var(--font-num);
  font-size: calc(.1 * var(--t));
  letter-spacing: .14em;
  pointer-events: none;
}
.room-v2 .room-map__3d.is-actual .room-map__live-label { opacity: 1; }
.room-v2 .room-map__flash {
  position: absolute;
  inset: 0;
  z-index: 5;
  opacity: 0;
  pointer-events: none;
  background: radial-gradient(60% 60% at 50% 50%, rgba(220, 255, 245, .75), rgba(78, 216, 175, .18) 55%, transparent 75%);
}
.room-v2 .room-map__3d.is-flash .room-map__flash { animation: room-map-flash .24s ease-out both; }
@keyframes room-map-flash {
  0% { opacity: 0; }
  22% { opacity: .9; }
  100% { opacity: 0; }
}

/* the real-board frame is cropped to the playable board, not the scenery around it */
.room-v2 .room-map__live { transform: scale(2); transform-origin: 52% 32%; }

/* three-part room: equal-height roster | battlefield | vertical controls */
.room-workspace { grid-template-columns: minmax(0, 5.4rem) minmax(0, 1fr) minmax(0, 4.8rem); }
.room-roster__list {
  display: grid;
  grid-template-rows: repeat(var(--seat-count, 4), minmax(0, 1fr));
  overflow: hidden;
}
.room-roster__list .rseat { height: 100%; min-height: 0; }
.room-controls {
  min-height: 0;
  display: flex;
  flex-direction: column;
  gap: .08rem;
  background: linear-gradient(180deg, rgba(8, 14, 11, .46), rgba(4, 8, 6, .62));
  backdrop-filter: blur(5px);
  border: 0;
}
.room-controls__group { display: flex; flex-direction: column; gap: .06rem; padding: .08rem; min-height: 0; overflow-y: auto; }
.room-controls__label { display: flex; flex-direction: column; gap: .01rem; color: var(--text-lo); font-size: calc(.12 * var(--t)); }
.room-controls__group .dpick { width: 100%; }
.room-controls__group .dpick__opts { grid-template-columns: 1fr; }
.room-controls__group .dpick__opt { min-height: .34rem; }
.room-controls__group .seatpick,
.room-controls__group .ailast { width: 100%; }
.room-controls__actions { margin-top: auto; display: flex; flex-direction: column; gap: .06rem; padding: .08rem; border-top: 1px solid rgba(78, 216, 175, .12); }
.room-controls__actions .btn { width: 100%; }
.room-bar.room-hud { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .2rem; }
.room-bar__ready { display: flex; align-items: center; gap: .2rem; min-width: 0; }
.room-bar__ready .ready-count { align-items: center; }
.room-bar__ready .room-bar__status { min-width: 0; }
.room-bar.room-hud .room-bar__right { justify-self: end; }
.room-v2 .room-map__live { transform: scale(2.45) translate(-3%, -5%); transform-origin: 45% 27%; }

@media (max-width: 1100px) {
  .room-workspace { grid-template-columns: minmax(0, 4.6rem) minmax(0, 1fr) minmax(0, 4rem); gap: .1rem; }
  .room-controls__group .dpick__opt { min-height: .3rem; }
}
@media (max-width: 760px) {
  .room-workspace { grid-template-columns: 1fr; overflow-y: auto; }
  .room-roster { min-height: 4rem; }
  .room-map { min-height: 4.2rem; }
  .room-controls { min-height: auto; }
  .room-controls__group { overflow: visible; }
  .room-bar.room-hud { grid-template-columns: 1fr; gap: .08rem; }
  .room-bar__ready { justify-content: space-between; }
  .room-bar.room-hud .room-bar__right { justify-self: stretch; }
  .room-bar.room-hud .room-bar__right .btn { width: 100%; }
  .room-v2 .room-map__live { transform: scale(2.1) translate(-2%, -3%); transform-origin: 48% 30%; }
}

.room-code-mobile { display: none; }
@media (max-width: 900px) {
  .room-screen .topbar__right { display: none; }
  .room-screen .topbar__center { display: none; }
  .room-workspace {
    grid-template-columns: 1fr;
    overflow-y: auto;
    padding: .1rem .16rem;
    gap: .1rem;
  }
  .room-roster { min-height: max(3.8rem, calc(var(--seat-count, 8) * .55rem)); }
  .room-roster__list { min-height: 0; }
  .room-map { min-height: 4.2rem; }
  .room-controls { min-height: auto; }
  .room-controls__group { overflow: visible; }
  .room-controls__group .dpick__opts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .room-code-mobile { display: inline-block; margin-left: auto; color: var(--mint-300); letter-spacing: .12em; }
  .room-bar.room-hud { grid-template-columns: 1fr; gap: .06rem; padding: .08rem .16rem; }
  .room-bar__ready { justify-content: space-between; }
  .room-bar.room-hud .room-bar__right { justify-self: stretch; }
  .room-bar.room-hud .room-bar__right .btn { width: 100%; }
  .room-v2 .room-map__live { transform: scale(2.15) translate(-2%, -3%); transform-origin: 48% 28%; }
}

@media (max-width: 900px) {
  /* landscape phones / small tablets: keep the start button on the right, like the desktop command bar */
  .room-bar.room-hud { grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
  .room-bar.room-hud .room-bar__right { justify-self: end; }
  .room-bar.room-hud .room-bar__right .btn { width: auto; min-width: 3rem; }
}
@media (max-width: 600px) {
  .room-bar.room-hud { grid-template-columns: 1fr; gap: .06rem; }
  .room-bar.room-hud .room-bar__right { justify-self: stretch; }
  .room-bar.room-hud .room-bar__right .btn { width: 100%; }
}

/* landscape phones: keep seats + board + settings in view, drop the long map notes */
@media (min-width: 601px) and (max-width: 900px) {
  .room-workspace {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) auto;
    overflow: hidden;
    gap: .1rem;
  }
  .room-roster { grid-column: 1; grid-row: 1 / 3; min-height: 0; }
  .room-map { grid-column: 2; grid-row: 1; min-height: 0; }
  .room-controls { grid-column: 2; grid-row: 2; min-height: 0; }
  .room-map__meta, .room-map__facts, .room-map__effects { display: none; }
  .room-controls__group { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: .04rem .08rem; padding: .04rem .06rem; }
  .room-controls__label { grid-column: 1 / -1; }
  .room-controls__group .dpick { grid-column: 1 / -1; }
  .room-controls__group .dpick__opts { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .room-controls__group .dpick__opt { min-height: .26rem; }
  .room-controls__group .seatpick { grid-column: 1; }
  .room-controls__group .ailast { grid-column: 2; }
  .room-controls__actions { flex-direction: row; padding: .04rem .06rem; }
  .room-controls__actions .btn { flex: 1; font-size: calc(.13 * var(--t)); }
  .room-v2 .room-map__live { transform: scale(1.9) translate(-2%, -3%); transform-origin: 48% 32%; }
}

/* desktop live-board crop: enlarged and shifted toward the upper-left, but still keeping the whole combat board */
.room-v2 .room-map__live { transform: scale(2.15) translate(-3%, -5%); transform-origin: 46% 28%; }

/* keep the whole combat board in frame at the final zoom */
.room-v2 .room-map__live { transform: scale(2) translate(-2%, -4%); transform-origin: 48% 29%; }

/* final live-board framing: 4x zoom, board as the centre, water reduced to a sliver */
.room-v2 .room-map__live { transform: scale(4); transform-origin: 26% 30%; }
@media (max-width: 900px) {
  .room-v2 .room-map__live { transform: scale(3.2); transform-origin: 28% 32%; }
}

/* requested final live-board optical zoom */
.room-v2 .room-map__live { transform: scale(3.4); transform-origin: 26% 30%; }
@media (max-width: 900px) {
  .room-v2 .room-map__live { transform: scale(3.4); transform-origin: 28% 32%; }
}

/* requested 2.8x live board */
.room-v2 .room-map__live { transform: scale(2.8); transform-origin: 27% 31%; }

/* four-seat rooms have more vertical air: make the left roster easier to read */
.room-roster.is-four .rseat__no { font-size: calc(.16 * var(--t)); }
.room-roster.is-four .rseat__who b { font-size: calc(.22 * var(--t)); }
.room-roster.is-four .rseat__who .micro-label { font-size: calc(.12 * var(--t)); }
.room-roster.is-four .rseat__state { font-size: calc(.14 * var(--t)); }
.room-roster.is-four .rseat { padding-left: .14rem; }

/* room chat occupies the air between AI-last and the action buttons */
.room-controls { overflow: hidden; }
.room-controls__group { flex: 0 0 auto; overflow: visible; }
.room-chat {
  flex: 1 1 0;
  min-height: 1.7rem;
  max-height: 5.4rem;
  margin: 0 .08rem;
  display: flex;
  flex-direction: column;
  min-width: 0;
  background: rgba(3, 8, 6, .28);
  border-top: 1px solid rgba(78, 216, 175, .18);
  border-bottom: 1px solid rgba(78, 216, 175, .18);
}
.room-chat__head {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .04rem .06rem .03rem;
  color: var(--text-lo);
  font-size: calc(.12 * var(--t));
  letter-spacing: .03em;
}
.room-chat__head > span { display: flex; align-items: center; gap: .06rem; }
.room-chat__head b { color: var(--mint-400); font-family: var(--font-num); font-size: calc(.1 * var(--t)); }
.room-chat__list { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 .06rem .03rem; scrollbar-width: thin; }
.room-chat__line { padding: .025rem 0; color: var(--text-md); font-size: calc(.12 * var(--t)); line-height: 1.35; overflow-wrap: anywhere; }
.room-chat__line b { color: var(--mint-300); font-weight: 600; margin-right: .05rem; }
.room-chat__empty { padding: .12rem .02rem; color: var(--text-dim); font-size: calc(.12 * var(--t)); line-height: 1.45; }
.room-chat__form { flex: none; display: flex; gap: .04rem; padding: .04rem .04rem .05rem; }
.room-chat__form input {
  flex: 1 1 auto;
  min-width: 0;
  height: .26rem;
  padding: 0 .06rem;
  border: 1px solid var(--line-2);
  background: rgba(0, 0, 0, .32);
  color: var(--text-hi);
  font-size: calc(.12 * var(--t));
}
.room-chat__form input::placeholder { color: var(--text-dim); }
.room-chat__form button {
  flex: none;
  padding: 0 .1rem;
  border: 1px solid rgba(78, 216, 175, .35);
  background: rgba(78, 216, 175, .1);
  color: var(--mint-300);
  font-size: calc(.12 * var(--t));
  cursor: pointer;
}
.room-chat__form button:disabled { opacity: .35; cursor: default; }
.room-controls__actions { border-top: 0; }

@media (max-width: 900px) {
  .room-v2 .room-map__live { transform: scale(2.8); transform-origin: 28% 32%; }
  .room-chat { min-height: 1.15rem; max-height: 2.1rem; margin: 0 .05rem; }
  .room-chat__head { display: none; }
  .room-chat__line { font-size: calc(.11 * var(--t)); }
  .room-chat__form input, .room-chat__form button { height: .24rem; font-size: calc(.11 * var(--t)); }
}

/* Interface plugin slot (room.panel): the AI/elite-operator panel can mount here again. */
.room-controls__plugin {
  flex: none;
  max-height: 3.8rem;
  margin: 0 .08rem;
  overflow-y: auto;
}
.room-controls__plugin .ui-slot__frame { min-height: 0; }
@media (max-width: 900px) {
  .room-controls__plugin { max-height: 2.4rem; }
}

/* legacy AI addon compatibility: the elite picker in the old SeatCard is rendered by SeatRow too */
.rseat__recruit {
  grid-column: 4 / 7;
  justify-self: end;
  display: flex;
  flex-direction: column;
  gap: .04rem;
  width: 100%;
  min-width: 0;
}
.rseat__recruit .btn { width: 100%; }
.rseat__recruit .elite-recruit { width: 100%; }

/* Larger room avatars and names (the lobby/profile work made these easier to read). */
.seat__art .avatar { --av: 2.35rem; }
.seat__name { font-size: calc(.31 * var(--t)); max-width: 3.4rem; }
.rseat .avatar { width: .54rem; height: .54rem; }
.rseat__who b { font-size: calc(.2 * var(--t)); }
.rseat__who .micro-label { font-size: calc(.11 * var(--t)); }

/* Match the reference room seat proportions: avatar ~46px, large name and large DOCTOR line. */
.rseat { grid-template-columns: .42rem .76rem minmax(0, 1fr) auto auto auto; min-height: .9rem; gap: .1rem; }
.rseat .avatar { width: .76rem; height: .76rem; }
.rseat__who { gap: .025rem; }
.rseat__who b { font-size: calc(.28 * var(--t)); line-height: 1.12; }
.rseat__who .micro-label { font-size: calc(.15 * var(--t)); line-height: 1.2; }
.rseat__who b em { font-size: .68em; }
.rseat__who .micro { font-size: calc(.15 * var(--t)); line-height: 1.2; }
.rseat__who b { font-size: calc(.26 * var(--t)); }
.rseat__who .micro { font-size: calc(.18 * var(--t)); }
.rseat.has-card { background-image: linear-gradient(90deg, rgba(4, 14, 11, .94), rgba(4, 14, 11, .58) 62%, rgba(4, 14, 11, .3)), var(--card); background-size: cover; background-position: center; }
.seat.has-card .seat__art { background-image: linear-gradient(180deg, rgba(4, 14, 11, .35), rgba(4, 14, 11, .92)), var(--card); background-size: cover; background-position: center; }