/* ==========================================================================
   Boss Raid (#/bossraid) — luyện từ vựng kiểu Kahoot, cả lớp hạ boss 3D.
   File này vẽ phần NẰM TRONG APP: trang chính (nhập mã, bộ từ của giáo viên), trình soạn bộ từ,
   trang mở phòng, màn ĐIỆN THOẠI của học sinh, và chỗ đứng của iframe màn chiếu. Màn chiếu có CSS
   riêng bên trong iframe (bossraid/css/style.css).

   LUẬT CỦA REPO ÁP VÀO FILE NÀY (mô tả, không trích — có bài kiểm quét cả chú thích):
     · Mọi selector tầng ngoài cùng bắt đầu bằng .rb- — kể cả luật theo body.s8-play / .s8-imm, viết
       bằng :is() thay vì đảo vế. (.br- đã có chủ: thanh band ở trang Tiến độ.)
     · Không khai thuộc tính xếp lớp chồng nào; lớp chữ đè lên nhau đi theo thứ tự DOM.
     · Không khai thuộc tính điều khiển cử chỉ chạm ở đây: nó lan qua ranh giới iframe.
   Màu phương án ▲◆●■ trùng màn chiếu (bossraid/css/style.css) — học sinh nhìn màu, không đọc chữ.
   ========================================================================== */
@font-face {
  font-family: "RBFuture";
  src: url("../bossraid/assets/fonts/kenney-future.woff2") format("woff2");
  font-display: swap;
}

.rb-root {
  --rb-bg: #1b1438;
  --rb-card: rgba(255, 255, 255, 0.07);
  --rb-line: rgba(255, 255, 255, 0.14);
  --rb-ink: #f4f1ff;
  --rb-mute: #bdb3e6;
  --rb-gold: #ffd45a;
  --rb-mint: #3ddc97;
  --rb-rose: #ff7b8f;
  --rb-violet: #8b6bff;
  --rb-o0: #d92e4b;
  --rb-o1: #2a66dc;
  --rb-o2: #b86d00;
  --rb-o3: #178a4b;
  margin: -18px -16px -64px;
  background: radial-gradient(ellipse at 50% -20%, #3d2c7f 0%, var(--rb-bg) 60%), var(--rb-bg);
  color: var(--rb-ink);
}
/* .view-wide có padding 0 0 64px (khác .view: 18px 16px 64px) ⇒ ba lề âm về 0, giữ lề đáy. */
.rb-root:is(.view-wide *) { margin-top: 0; margin-left: 0; margin-right: 0; }

/* ---- trang (chính / soạn bộ / mở phòng) ------------------------------------------------------------ */
.rb-page {
  min-height: calc(100dvh - 60px);
  padding: 22px max(16px, calc((100% - 880px) / 2)) 88px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  box-sizing: border-box;
}
.rb-hero { text-align: center; padding: 10px 0 4px; }
.rb-logo { font-family: "RBFuture", "Bricolage Grotesque", sans-serif; font-size: clamp(38px, 9vw, 72px); letter-spacing: 0.06em;
  color: var(--rb-gold); text-shadow: 0 4px 0 #6a24c8, 0 0 28px rgba(139, 107, 255, 0.55); line-height: 1; }
.rb-sub { margin: 10px auto 0; max-width: 520px; color: var(--rb-mute); font-weight: 600; }
.rb-card { background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 18px; padding: 18px; }
.rb-h1 { margin: 2px 0 6px; font-size: clamp(22px, 4vw, 30px); font-weight: 800; line-height: 1.2; }
.rb-h2 { margin: 0; font-size: 19px; font-weight: 800; }
.rb-kicker { margin: 0; color: var(--rb-gold); font-weight: 800; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; }
.rb-muted { color: var(--rb-mute); margin: 6px 0; }
.rb-muted a { color: var(--rb-gold); }
.rb-small { font-size: 13px; }
.rb-center { text-align: center; }
.rb-err { color: var(--rb-rose); font-weight: 700; margin: 10px 0 0; }
.rb-note { background: rgba(255, 212, 90, 0.12); border: 1px solid rgba(255, 212, 90, 0.35); border-radius: 12px; padding: 10px 12px; margin: 12px 0 0; }
.rb-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.rb-back { color: var(--rb-mute); font-weight: 700; text-decoration: none; }
.rb-back:hover { color: var(--rb-ink); }

.rb-btn { font: inherit; font-weight: 800; border: 0; border-radius: 12px; cursor: pointer; color: #fff; padding: 11px 16px;
  background: linear-gradient(180deg, #8b6bff, #5b3fe0); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.25); transition: filter 0.12s, transform 0.12s; }
.rb-btn:hover { filter: brightness(1.1); }
.rb-btn:active { transform: translateY(1px); }
.rb-btn:disabled { opacity: 0.45; cursor: default; filter: none; transform: none; }
.rb-btn:focus-visible { outline: 3px solid var(--rb-gold); outline-offset: 2px; }
.rb-btn-go { background: linear-gradient(180deg, #34d399, #0f9f6e); }
.rb-btn-ghost { background: transparent; border: 1px solid var(--rb-line); box-shadow: none; color: var(--rb-ink); }
.rb-sm { padding: 8px 12px; font-size: 14px; }
.rb-big { width: 100%; padding: 15px 18px; font-size: 18px; margin-top: 8px; }

.rb-in { font: inherit; color: var(--rb-ink); background: rgba(0, 0, 0, 0.28); border: 1px solid var(--rb-line); border-radius: 10px;
  padding: 10px 12px; width: 100%; box-sizing: border-box; min-width: 0; }
.rb-in:focus { outline: 2px solid var(--rb-violet); outline-offset: 1px; border-color: transparent; }
.rb-in::placeholder { color: rgba(189, 179, 230, 0.6); }
.rb-label { display: block; font-weight: 800; font-size: 14px; color: var(--rb-mute); margin-bottom: 6px; }
.rb-title-in { font-size: 18px; font-weight: 700; }

/* nhập mã phòng */
.rb-join-form { display: flex; gap: 10px; margin-top: 12px; }
.rb-code { flex: 1; min-width: 0; font-family: "RBFuture", ui-monospace, monospace; font-size: clamp(24px, 7vw, 34px); letter-spacing: 0.18em;
  text-transform: uppercase; text-align: center; color: #fff; background: rgba(0, 0, 0, 0.35); border: 2px solid var(--rb-line);
  border-radius: 14px; padding: 10px 8px; }
.rb-code:focus { outline: none; border-color: var(--rb-gold); }
.rb-resume { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px;
  background: rgba(61, 220, 151, 0.1); border: 1px solid rgba(61, 220, 151, 0.35); border-radius: 12px; padding: 10px 12px; font-weight: 700; }

/* danh sách bộ từ */
.rb-sets { display: flex; flex-direction: column; gap: 10px; }
.rb-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  background: rgba(0, 0, 0, 0.18); border: 1px solid var(--rb-line); border-radius: 14px; padding: 12px 14px; }
.rb-set-main { display: flex; flex-direction: column; min-width: 0; }
.rb-set-main b { font-size: 16px; overflow-wrap: anywhere; }
.rb-set-main small { color: var(--rb-mute); margin-top: 2px; }
.rb-set-act { display: flex; gap: 6px; flex-wrap: wrap; }
.rb-empty { text-align: center; padding: 8px 4px; }
.rb-empty p { color: var(--rb-mute); margin: 0 0 12px; }

.rb-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.rb-step { display: flex; gap: 10px; align-items: flex-start; background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 14px; padding: 12px; }
.rb-step > b { font-family: "RBFuture", sans-serif; color: var(--rb-gold); font-size: 22px; line-height: 1; }
.rb-step span { color: var(--rb-mute); font-size: 14px; font-weight: 600; }

/* ---- soạn bộ từ ---------------------------------------------------------------------------------- */
.rb-pill { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--rb-line); border-radius: 99px; padding: 4px 10px; font-weight: 800; font-size: 13px; }
.rb-cols { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1.5fr) 2.4em; gap: 8px; color: var(--rb-mute);
  font-size: 12px; font-weight: 800; padding: 0 0 6px; }
.rb-items { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.rb-row { display: grid; grid-template-columns: 2.2em minmax(0, 1fr) minmax(0, 1.5fr) 2.4em; gap: 8px; align-items: center; }
.rb-num { color: var(--rb-mute); font-weight: 800; text-align: right; font-size: 13px; }
.rb-x { font: inherit; background: transparent; border: 1px solid var(--rb-line); color: var(--rb-mute); border-radius: 10px; height: 40px; cursor: pointer; }
.rb-x:hover { color: var(--rb-rose); border-color: var(--rb-rose); }
.rb-fold summary { cursor: pointer; font-weight: 800; font-size: 16px; }
.rb-fold[open] summary { margin-bottom: 10px; }
.rb-fold code { background: rgba(0, 0, 0, 0.35); border-radius: 6px; padding: 1px 6px; }
.rb-row-btns { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 10px; }
.rb-bank { display: grid; grid-template-columns: 1fr 2fr; gap: 10px; }
.rb-savebar { display: flex; align-items: center; justify-content: flex-end; gap: 10px; flex-wrap: wrap; position: sticky; bottom: 12px;
  background: rgba(27, 20, 56, 0.92); border: 1px solid var(--rb-line); border-radius: 16px; padding: 10px 12px; backdrop-filter: blur(6px); }
.rb-savebar .rb-muted { margin: 0 auto 0 0; font-size: 14px; }

/* ---- mở phòng -------------------------------------------------------------------------------------- */
.rb-opt { margin-top: 16px; }
.rb-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rb-chip { font: inherit; font-weight: 800; color: var(--rb-ink); background: rgba(0, 0, 0, 0.25); border: 1px solid var(--rb-line);
  border-radius: 99px; padding: 8px 14px; cursor: pointer; }
.rb-chip[aria-pressed="true"] { background: var(--rb-violet); border-color: transparent; }
.rb-preview { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 10px; }
.rb-pq { background: rgba(0, 0, 0, 0.2); border: 1px solid var(--rb-line); border-radius: 14px; padding: 12px; }
.rb-pq-k { color: var(--rb-mute); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em; }
.rb-pq-p { font-weight: 800; font-size: 18px; margin: 4px 0 8px; overflow-wrap: anywhere; }
.rb-pq-o { margin: 0; padding-left: 1.3em; color: var(--rb-mute); }
.rb-pq-o .rb-yes { color: var(--rb-mint); font-weight: 800; }

/* ---- màn điện thoại của học sinh ------------------------------------------------------------------ */
.rb-play { min-height: calc(100dvh - 60px); display: flex; flex-direction: column; padding: 12px 12px 20px; box-sizing: border-box; gap: 12px; }
.rb-play-top { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 14px; }
.rb-play-title { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--rb-mute); }
.rb-play-q, .rb-play-score { background: rgba(0, 0, 0, 0.3); border: 1px solid var(--rb-line); border-radius: 99px; padding: 4px 10px; white-space: nowrap; }
.rb-play-score { color: var(--rb-gold); }
.rb-play-main { flex: 1; display: flex; flex-direction: column; gap: 12px; }
.rb-net { text-align: center; color: var(--rb-gold); font-weight: 800; margin: 0; }

.rb-wait { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 6px; padding: 20px 8px; }
.rb-wait p { margin: 4px 0; }
.rb-avatar { width: 108px; height: 108px; border-radius: 50%; display: grid; place-items: center; font-size: 46px; font-weight: 900; color: #1b1438;
  background: var(--rb-c, var(--rb-gold)); box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.12), 0 0 40px var(--rb-c, var(--rb-gold)); }
.rb-me { font-size: 22px; margin-top: 10px; }

.rb-q { background: #fff; color: #1d1540; border-radius: 18px; padding: 14px 14px 12px; text-align: center; }
.rb-q-kind { color: #6b52e0; font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; }
.rb-q-text { font-weight: 900; font-size: 26px; line-height: 1.15; margin: 4px 0 10px; overflow-wrap: anywhere; }
.rb-q-text.rb-m { font-size: 20px; }
.rb-q-text.rb-l { font-size: 16px; }
.rb-bar { height: 8px; background: #ece8fb; border-radius: 99px; overflow: hidden; }
.rb-bar i { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #3ddc97, #8b6bff); border-radius: 99px; transition: width 0.2s linear; }
.rb-bar i.rb-low { background: linear-gradient(90deg, #ff7b8f, #ffb35c); }
.rb-ans { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.rb-a { font: inherit; border: 0; border-radius: 16px; color: #fff; font-weight: 900; font-size: 18px; line-height: 1.2; padding: 12px 10px;
  min-height: 96px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; cursor: pointer;
  box-shadow: inset 0 -5px 0 rgba(0, 0, 0, 0.22); transition: transform 0.1s, opacity 0.2s, filter 0.2s; }
.rb-a:active { transform: scale(0.97); }
.rb-a0 { background: var(--rb-o0); } .rb-a1 { background: var(--rb-o1); } .rb-a2 { background: var(--rb-o2); } .rb-a3 { background: var(--rb-o3); }
.rb-shape { font-size: 26px; line-height: 1; }
.rb-a-txt { overflow-wrap: anywhere; }
.rb-a-txt.rb-m { font-size: 15px; }
.rb-a-txt.rb-l { font-size: 13px; font-weight: 800; }
.rb-locked .rb-a { opacity: 0.35; filter: grayscale(0.5); cursor: default; }
.rb-locked .rb-a.rb-picked { opacity: 1; filter: none; box-shadow: 0 0 0 4px #fff, inset 0 -5px 0 rgba(0, 0, 0, 0.22); }
.rb-hint { text-align: center; color: var(--rb-mute); font-weight: 700; margin: 0; }

.rb-res { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
  border-radius: 20px; padding: 24px 14px; }
.rb-res.rb-ok { background: linear-gradient(180deg, rgba(61, 220, 151, 0.28), rgba(61, 220, 151, 0.06)); }
.rb-res.rb-no { background: linear-gradient(180deg, rgba(255, 123, 143, 0.28), rgba(255, 123, 143, 0.06)); }
.rb-res.rb-skip { background: linear-gradient(180deg, rgba(255, 212, 90, 0.22), rgba(255, 212, 90, 0.05)); }
.rb-res-head { font-size: 30px; font-weight: 900; }
/* Kenney Future KHÔNG có dấu tiếng Việt ("điểm" ra "đểm" lẫn phông) — chỉ CON SỐ đi phông ấy. */
.rb-res-pts { color: var(--rb-gold); font-size: 18px; font-weight: 800; }
.rb-res-pts b { font-family: "RBFuture", sans-serif; font-size: 1.2em; font-weight: 400; }
.rb-res-ans { font-size: 17px; }
.rb-a-mini { display: inline-grid; place-items: center; width: 1.6em; height: 1.6em; border-radius: 6px; font-size: 13px; vertical-align: middle; }
.rb-res-rank { color: var(--rb-mute); font-weight: 700; }
.rb-res-rank b { color: var(--rb-ink); }
.rb-res-tag { background: rgba(0, 0, 0, 0.25); border-radius: 99px; padding: 6px 12px; font-weight: 800; }

.rb-end { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 8px 0; }
.rb-end-rank { font-family: "RBFuture", sans-serif; font-size: 64px; color: var(--rb-gold); text-shadow: 0 4px 0 #6a24c8; line-height: 1; }
.rb-end-sub { color: var(--rb-mute); font-weight: 700; }
.rb-end-boss { font-size: 20px; font-weight: 900; }
.rb-top3 { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 360px; }
.rb-top3 li { display: flex; align-items: center; gap: 8px; background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 12px; padding: 8px 12px; font-weight: 700; }
.rb-top3 li b { margin-left: auto; font-family: "RBFuture", sans-serif; color: var(--rb-gold); }
.rb-review { width: 100%; max-width: 520px; text-align: left; background: var(--rb-card); border: 1px solid var(--rb-line); border-radius: 16px; padding: 12px 14px; }
.rb-review h3 { margin: 0 0 8px; font-size: 16px; }
.rb-review ul { margin: 0; padding-left: 1.2em; }
.rb-review li { margin: 4px 0; }

/* ---- màn chiếu: chỗ đứng của iframe (cùng khuôn css/battlesim.css) ------------------------------- */
.rb-host #rbApp {
  position: relative;
  display: flex;
  flex-direction: column;
  height: calc(100vh - 60px);              /* Safari cũ không hiểu dvh — đường lùi */
  height: calc(100dvh - 60px);
  min-height: 320px;
  overflow: hidden;
}
.rb-host #rbStage { position: relative; flex: 1; min-height: 0; overscroll-behavior: none; }
.rb-host #rbFrame { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; background: #120c26; }

/* ---- khổ điện thoại -------------------------------------------------------------------------------- */
@media (max-width: 719px) {
  .rb-host #rbApp { height: calc(100vh - 124px); }
  .rb-host #rbApp { height: calc(100dvh - 60px - 56px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
  .rb-how { grid-template-columns: 1fr; }
  .rb-preview { grid-template-columns: 1fr; }
  .rb-bank { grid-template-columns: 1fr; }
  .rb-cols { display: none; }
  .rb-row { grid-template-columns: 1.6em minmax(0, 1fr) 2.4em; grid-template-areas: "n t x" "n m x"; row-gap: 4px; }
  .rb-row .rb-num { grid-area: n; align-self: start; padding-top: 10px; }
  .rb-row [data-f="t"] { grid-area: t; font-weight: 700; }
  .rb-row [data-f="m"] { grid-area: m; }
  .rb-row .rb-x { grid-area: x; align-self: stretch; height: auto; }
  .rb-join-form { flex-direction: column; }
}
@media (min-width: 720px) {
  .rb-a { min-height: 120px; font-size: 20px; }
}

/* ---- body.s8-play: thanh tab dưới đã ẩn (css/ispeak.css) ⇒ trả lại 56px ---------------------------- */
@media (max-width: 979px) {
  .rb-root:is(body.s8-play *) { margin-bottom: 0; }
}
@media (max-width: 719px) {
  .rb-root:is(body.s8-play *) #rbApp { height: calc(100dvh - 60px - env(safe-area-inset-top) - env(safe-area-inset-bottom)); }
}

/* ---- body.s8-imm: thanh trên cũng đi ⇒ trả lại nốt 60px -------------------------------------------- */
.rb-root:is(body.s8-play.s8-imm *) { padding-top: env(safe-area-inset-top); }
.rb-root:is(body.s8-play.s8-imm *) #rbApp {
  height: calc(100vh - env(safe-area-inset-top));
  height: calc(100dvh - env(safe-area-inset-top) - env(safe-area-inset-bottom));
}
/* Nhường góc trên-phải cho nút thoát ⤢ của vỏ app (48px nút + 8px lề) — cùng phép đo css/battlesim.css:
   width:auto trên iframe (phần tử thay thế) rơi về 300px, nên khai thẳng bề rộng. */
@media (min-width: 720px) {
  .rb-root:is(body.s8-play.s8-imm *) #rbFrame {
    width: calc(100% - env(safe-area-inset-right) - 56px);
  }
}
@media (max-width: 719px) {
  .rb-root:is(body.s8-play.s8-imm *) #rbFrame {
    width: 100%;
    top: 56px;
    height: calc(100% - 56px);
  }
}

/* ---- màn chiếu tải chậm (29/09): dải báo nổi trên khung, khung VẪN đang tải bên dưới ---------------
   Nằm SAU iframe trong #rbStage, cả hai đều định vị ⇒ tự vẽ đè lên theo thứ tự cây, không cần lớp chồng.
   Đặt ở đáy cho khỏi che thẻ "BOSS RAID + thanh tiến độ" nằm giữa khung. */
.rb-slow {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 10px 14px;
  border-radius: 14px;
  background: #2b2156;                          /* sáng hơn đáy màn chờ (#120c26) — không thì dải chìm mất */
  border: 1px solid rgba(255, 212, 90, 0.55);   /* viền vàng --rb-gold: lời nhắn, không phải lỗi đỏ */
  color: var(--rb-ink);
  font-size: 15px;
  line-height: 1.35;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.4);
}
.rb-slow span { flex: 1 1 240px; min-width: 0; }