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

.room-screen .topbar { height: 1.36rem; }
/* The 统计 / 设置 / 公告 / 玩法说明 group (room.js RoomTools). `display: contents` keeps the desktop top bar
   exactly as it was — the four buttons stay direct flex items of .topbar__left, with its own gap and wrapping.
   The compact layer turns the wrapper into a real flex row so the smaller squares stay grouped. */
.room-topbar__tools { display: contents; }
.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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, var(--t))); font-weight: 900; letter-spacing: .06em; }
.solo-brief p { font-size: calc(.18 * var(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, 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(--utility-text, var(--t))); }
.ready-count b { font-size: calc(.36 * var(--utility-text, 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(--utility-text, 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; }
.room-start-actions { position: relative; display: flex; flex-direction: column; }
.room-matchmaking {
  position: absolute;
  bottom: calc(100% + .08rem);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .12rem;
  min-height: .36rem;
  padding: .04rem .14rem;
  border: 1px solid var(--line-2);
  background: rgba(10, 19, 16, .94);
  font-size: calc(.2 * var(--utility-text, var(--t)));
  font-weight: 700;
  line-height: 1.3;
  color: var(--text-md);
  white-space: nowrap;
  cursor: pointer;
}
.room-matchmaking input { width: .24rem; height: .24rem; margin: 0; accent-color: var(--mint-400); cursor: inherit; }
.room-matchmaking.is-checked { border-color: var(--mint-600); color: var(--mint-400); }
.room-matchmaking:hover:not(.is-disabled) { border-color: var(--mint-400); }
.room-matchmaking:focus-within { outline: 2px solid var(--mint-400); outline-offset: 2px; }
.room-matchmaking.is-disabled { cursor: default; opacity: .6; }
.room-portal-entry {
  display: flex;
  flex: none;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .08rem .16rem;
  padding: .1rem .25rem;
  font-size: calc(.14 * var(--utility-text, var(--t)));
  color: var(--text-lo);
}
.room-portal-entry .btn { min-height: max(.55rem, 32px); font-size: max(calc(.15 * var(--utility-text, var(--t))), 11px); }
.room-portal-entry a { display: inline-flex; align-items: center; min-height: max(.55rem, 32px); color: var(--mint-400); font-size: max(calc(.15 * var(--utility-text, var(--t))), 11px); text-decoration: underline; }

/* ---- 添加/移除 AI 队友 (this fork) ------------------------------------------------------------------------------
   The hub's room screen (lobby.css, rseat-*) draws an empty seat as 邀请 and a bot seat with no action at all, which
   would drop room.addBot / room.removeBot from the UI. The button goes over the empty card's art, in the same corner
   the invite button leaves free, and shrinks with the compact layer like the rest of the room.
   `bottom: .12rem` lands it in the dashed `.rseat__plate--empty` band, and that plate is positioned and comes LATER
   in the DOM: with both at `z-index: auto` the plate painted over the button and swallowed every click, so 添加 AI 队友
   looked dead (a real mouse press hit the plate — a JS `.click()` worked, which is how the bug hid). The z-index lifts
   the button over the plate, and the empty plate is decoration only (`<div ... aria-hidden="true"></div>`, no children,
   no handler), so it does not need to be a hit target at all — belt and braces for the same band. */
.rseat__botadd {
  position: absolute; left: 50%; bottom: .08rem; z-index: 2; display: inline-flex; align-items: center; justify-content: center; gap: .08rem;
  width: calc(100% - .2rem); min-height: max(.55rem, 32px); padding: .08rem .12rem;
  transform: translateX(-50%); font: inherit; font-size: max(calc(.17 * var(--utility-text, var(--t))), 12px);
  color: var(--mint-400); background: #10251f; border: 1px solid var(--mint-700); cursor: pointer; white-space: nowrap;
  transition: border-color var(--t-fast), color var(--t-fast);
}
.rseat__plate--empty { pointer-events: none; }
.rseat__botadd:hover:not(:disabled) { color: var(--mint-400); border-color: var(--mint-700); }
.rseat__botadd:disabled { opacity: .4; cursor: default; }
.rseat__botadd .icon, .rseat__botadd .spinner { width: 1em; height: 1em; }

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


/* AI 指定策略 (room.setBotBand): the strategy an AI seat takes in the draft, and the host's picker */
.rseat__band {
  position: absolute; inset-inline: .08rem; bottom: .5rem; z-index: 3;
  display: inline-flex; align-items: center; justify-content: center; gap: .05rem;
  min-height: .3rem; padding: 0 .08rem; border-radius: .06rem;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, .18));
  background: rgba(0, 0, 0, .55); color: var(--text-lo); font-size: calc(.13 * var(--t));
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
}
.rseat__band .icon, .rseat__band .spinner, .rseat__band .band-icon { width: .22rem; height: .22rem; }
.rseat__band.is-set { color: var(--mint-400); border-color: var(--mint-700, rgba(120, 255, 210, .5)); }
.rseat__band.is-edit { cursor: pointer; }
.rseat__band.is-edit:hover:not(:disabled) { color: var(--mint-400); border-color: var(--mint-700, rgba(120, 255, 210, .5)); }
.rseat__band.is-edit:disabled { opacity: .5; cursor: default; }
.rseat__bandname { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.botband__tip { margin: 0 0 .12rem; font-size: calc(.15 * var(--t)); }
.botband__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(1.9rem, 1fr)); gap: .1rem; }
.botband {
  display: flex; flex-direction: column; align-items: center; gap: .05rem;
  padding: .1rem .06rem; border-radius: .07rem; cursor: pointer;
  border: 1px solid var(--line-soft, rgba(255, 255, 255, .16));
  background: rgba(255, 255, 255, .03); color: var(--text-lo);
  font-size: calc(.14 * var(--t)); text-align: center;
}
.botband:hover:not(:disabled):not(.is-used) { border-color: var(--mint-700, rgba(120, 255, 210, .5)); color: var(--mint-400); }
.botband.is-sel { border-color: var(--mint-400); color: var(--mint-400); background: rgba(120, 255, 210, .08); }
.botband.is-used { opacity: .45; cursor: not-allowed; }
.botband:disabled { cursor: default; }
.botband__auto { display: grid; place-items: center; width: .42rem; height: .42rem; }
.botband__auto .icon { width: .32rem; height: .32rem; }
.botband__name { font-weight: 600; }
.botband__eff, .botband__used { font-size: calc(.115 * var(--t)); color: var(--text-dim); }
.botband__used { color: var(--red-premium); }
.botband__now { margin: .14rem 0 0; font-size: calc(.14 * var(--t)); }