/*
 * JLPT180 Dungeon CSS - P1.11 result overlay and scroll fix
 * Owner: Bí Cảnh / Dungeon only.
 * Scope rule: keep selectors under #box-bicanh, #battleOverlay, #guestLevelSelect, #guestBossSelect, #healModalOverlay, #kqOv.
 */

/* ===== Dungeon entry card on lobby ===== */
body.jlpt180-clean-lobby #box-bicanh.jlpt180-bicanh-card,
body.jlpt180-clean-lobby #box-bicanh {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  width: 100%;
  min-height: 196px;
  padding: 22px 18px 16px;
  overflow: hidden;
  text-align: center;
  border: 2px solid rgba(255, 202, 118, .82);
  border-radius: 22px;
  background:
    radial-gradient(circle at 16% 12%, rgba(255, 223, 148, .34), transparent 30%),
    linear-gradient(135deg, rgba(255, 252, 230, .76), rgba(235, 255, 251, .52), rgba(255, 238, 247, .38)),
    var(--jlpt-bg-bicanh) center / cover no-repeat;
  box-shadow: 0 16px 34px rgba(14, 165, 233, .10), inset 0 0 0 1px rgba(255,255,255,.72);
  box-sizing: border-box;
}
body.jlpt180-clean-lobby #box-bicanh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(255,255,255,.34), rgba(255,255,255,.08));
  pointer-events: none;
}
body.jlpt180-clean-lobby #box-bicanh > div:first-child {
  margin: 0;
  color: #073451;
  font-size: clamp(22px, 2.4vw, 30px);
  line-height: 1.08;
  font-weight: 1000;
  text-shadow: 0 2px 0 rgba(255,255,255,.84), 0 0 14px rgba(255, 204, 102, .34);
}
body.jlpt180-clean-lobby #box-bicanh > div:nth-child(2) {
  max-width: 92%;
  margin: 0 0 4px;
  color: rgba(7, 52, 81, .76);
  font-size: 13px;
  line-height: 1.35;
  font-weight: 800;
}
body.jlpt180-clean-lobby #btn-bi-canh-main.jlpt180-bicanh-btn,
body.jlpt180-clean-lobby #btn-bi-canh-main {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: min(100%, 300px);
  min-height: 46px;
  padding: 8px 20px 8px 72px;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #22d3ee, #7c3aed 58%, #f59e0b);
  color: #fff;
  box-shadow: 0 12px 24px rgba(124,58,237,.24), inset 0 1px 0 rgba(255,255,255,.72);
  cursor: pointer;
  font-size: 14px;
  font-weight: 1000;
  line-height: 1.12;
  letter-spacing: .02em;
  text-transform: uppercase;
  touch-action: manipulation;
}
body.jlpt180-clean-lobby #btn-bi-canh-main::before {
  content: "⚔️";
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: rgba(255,255,255,.22);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
  font-size: 20px;
}
body.jlpt180-clean-lobby #btn-bi-canh-main:hover { transform: translateY(-1px); }
body.jlpt180-clean-lobby #btn-bi-canh-main:active { transform: translateY(1px) scale(.99); }
body.jlpt180-clean-lobby #btn-bi-canh-main.locked {
  filter: grayscale(.2);
  opacity: .96;
}

/* ===== Selection modals created by legacy battle engine ===== */
#guestLevelSelect,
#guestBossSelect,
#healModalOverlay {
  box-sizing: border-box;
}
#guestLevelSelect *,
#guestBossSelect *,
#healModalOverlay * {
  box-sizing: border-box;
}
#guestLevelSelect .bc-select-box,
#guestBossSelect .bc-select-box,
#healModalOverlay .ov-box {
  max-height: calc(100dvh - 32px);
  overflow: auto;
}
#guestLevelSelect button,
#guestBossSelect button,
#healModalOverlay button {
  min-height: 44px;
  touch-action: manipulation;
}

/* ===== Battle overlay ===== */
body.in-battle,
body.jlpt180-clean-lobby.in-battle {
  overflow: hidden;
}
#battleOverlay {
  position: fixed;
  inset: 0;
  z-index: 2147482400;
  display: none;
  flex-direction: column;
  width: 100vw;
  height: 100dvh;
  padding: max(10px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 10%, rgba(125, 211, 252, .38), transparent 34%),
    radial-gradient(circle at 86% 12%, rgba(253, 224, 71, .30), transparent 30%),
    linear-gradient(180deg, #f8fdff 0%, #eef8ff 48%, #f7fff6 100%);
  color: #102033;
  box-sizing: border-box;
  --bc-answer-sheet-clearance: clamp(42px, 5dvh, 64px);
}

#battleOverlay.open {
  display: flex;
}
#battleOverlay,
#battleOverlay * {
  box-sizing: border-box;
}
#battleOverlay .bo-head {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100%, 980px);
  min-height: 48px;
  margin: 0 auto 8px;
  padding: 6px 4px;
  gap: 10px;
}
#battleOverlay .bo-head > div:first-child {
  min-width: 0;
  color: #0f3554;
  font-size: clamp(16px, 3.9vw, 20px);
  font-weight: 1000;
  line-height: 1.2;
  text-shadow: 0 2px 0 rgba(255,255,255,.85);
}

#battleOverlay .bo-close {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  height: 42px;
  padding: 0 14px;
  border: 1px solid rgba(14, 116, 144, .16);
  border-radius: 999px;
  background: rgba(255,255,255,.90);
  color: #0f3554;
  cursor: pointer;
  font-size: 13px;
  font-weight: 1000;
  line-height: 1;
  box-shadow: 0 8px 18px rgba(15,23,42,.10);
  touch-action: manipulation;
  white-space: nowrap;
}

#battleOverlay .bo-body {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
  align-items: flex-start;
  min-height: 0;
  width: 100%;
  overflow: hidden auto;
  overscroll-behavior: contain;
  padding: 0 0 18px;
}
#battleOverlay .fc-card {
  position: relative;
  width: min(100%, 920px);
  min-height: 0;
  margin: 0 auto;
  padding: clamp(12px, 2.4vw, 20px);
  border: 1px solid rgba(14, 116, 144, .14);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(248, 253, 255, .96), rgba(239, 248, 255, .94));
  box-shadow: 0 22px 64px rgba(15,23,42,.14), inset 0 1px 0 rgba(255,255,255,.88);
  
  -webkit-
  overflow: visible;
}

#battleOverlay .fc-prog {
  position: relative;
  width: 100%;
  height: 8px;
  margin: 0 0 14px;
  border-radius: 999px;
  background: rgba(14, 116, 144, .12);
  overflow: visible;
}

#battleOverlay #fBar {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #22c55e, #a3e635);
  transition: width .25s ease;
}
#battleOverlay #fN {
  position: absolute;
  top: -22px;
  right: 0;
  color: rgba(15, 53, 84, .72);
  font-size: 12px;
  font-weight: 900;
}

#battleOverlay .fc-q {
  width: 100%;
  margin: 0;
}
#battleOverlay .fc-q .bc-question-container {
  position: relative;
  width: 100%;
  margin: 8px 0 12px;
  padding: 20px 14px 15px;
  border: 1px solid rgba(124, 58, 237, .20);
  border-radius: 16px;
  background: linear-gradient(180deg, #f5f3ff, #eef2ff 58%, #eff6ff);
  box-shadow: 0 12px 28px rgba(91,33,182,.10), inset 0 1px 0 rgba(255,255,255,.84);
  text-align: center;
}

#battleOverlay .bc-question-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  margin: -4px auto 8px;
  padding: 4px 10px;
  border: 1px solid rgba(14, 165, 233, .20);
  border-radius: 999px;
  background: #e0f2fe;
  color: #0369a1;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}
#battleOverlay .bc-question-container.is-grammar .bc-question-badge {
  border-color: rgba(168, 85, 247, .22);
  background: #f3e8ff;
  color: #7e22ce;
}
#battleOverlay .fc-q .bc-question-text,
#battleOverlay .bc-question-text {
  color: #0f3554;
  font-size: clamp(24px, 4.8vw, 40px);
  font-weight: 1000;
  line-height: 1.35;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#battleOverlay .bc-loading-card {
  margin: 12px 0;
  padding: 32px 14px;
  border: 1px solid rgba(14, 116, 144, .14);
  border-radius: 16px;
  background: linear-gradient(180deg, #ffffff, #f3fbff);
  box-shadow: 0 12px 28px rgba(15,23,42,.08);
  text-align: center;
}
#battleOverlay .bc-loading-icon {
  margin-bottom: 10px;
  font-size: 3rem;
  animation: hitShake .5s infinite;
}
#battleOverlay .bc-loading-title {
  color: #ca8a04;
  font-size: 1.35rem;
  font-weight: 1000;
  text-transform: uppercase;
}
#battleOverlay .bc-loading-sub {
  margin-top: 10px;
  color: rgba(15, 53, 84, .62);
  font-size: .88rem;
  font-weight: 800;
}
#battleOverlay .bc-options {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px 14px;
  width: 100%;
  margin: 14px 0 0;
  padding: 14px;
  border: 1px solid rgba(14, 165, 233, .18);
  border-radius: 18px;
  background: linear-gradient(180deg, #ecfeff, #f0fdf4 58%, #fff7ed);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.82), 0 12px 30px rgba(15,23,42,.07);
}
#battleOverlay .bc-options > .bc,
#battleOverlay .bc {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 54px;
  margin: 0;
  padding: 11px 12px;
  border: 1px solid rgba(14, 116, 144, .16);
  border-radius: 15px;
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  color: #102033;
  cursor: pointer;
  font-weight: 900;
  line-height: 1.35;
  text-align: left;
  box-shadow: 0 8px 18px rgba(15,23,42,.08), inset 0 1px 0 rgba(255,255,255,.90);
  touch-action: manipulation;
}

#battleOverlay .bc[hidden] {
  display: none;
}
#battleOverlay .bc:hover {
  background: #f0f9ff;
  border-color: rgba(14, 165, 233, .34);
}

#battleOverlay .bc > div,
#battleOverlay .bc-option-inner {
  display: flex;
  align-items: center;
  min-width: 0;
  width: 100%;
}
#battleOverlay .bc-opt-lbl {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-right: 10px;
  border-radius: 9px;
  background: linear-gradient(135deg, #0ea5e9, #6366f1);
  color: #fff;
  font-size: 13px;
  font-weight: 1000;
}

#battleOverlay .bc-opt-text {
  min-width: 0;
  color: #102033;
  font-size: clamp(15px, 2.8vw, 18px);
  font-weight: 900;
  overflow-wrap: anywhere;
  word-break: break-word;
}

#battleOverlay .bc.bc-dimmed {
  opacity: .68;
}
#battleOverlay .bc.cor {
  border-color: #10b981;
  background: linear-gradient(135deg, rgba(16,185,129,.98), rgba(5,150,105,.94));
  color: #fff;
  box-shadow: 0 0 0 3px rgba(16,185,129,.22), 0 14px 28px rgba(0,0,0,.25);
}
#battleOverlay .bc.wrg {
  border-color: #ef4444;
  background: linear-gradient(135deg, rgba(239,68,68,.96), rgba(185,28,28,.92));
  color: #fff;
  box-shadow: 0 0 0 3px rgba(239,68,68,.20), 0 14px 28px rgba(0,0,0,.25);
}
#battleOverlay .bc.cor .bc-opt-text,
#battleOverlay .bc.wrg .bc-opt-text {
  color: #fff;
}
#battleOverlay .bc-answer-sheet-mount {
  position: absolute;
  left: 0;
  right: 0;
  bottom: var(--bc-answer-sheet-clearance);
  z-index: 60;
  display: flex;
  justify-content: center;
  align-items: flex-end;
  padding: 0 12px;
  pointer-events: none;
}
#battleOverlay .bc-answer-sheet-mount[hidden] {
  display: none;
}
#battleOverlay .bc-answer-sheet {
  width: min(100%, 680px);
  pointer-events: auto;
  animation: bcAnswerSheetIn .18s ease-out both;
}
#battleOverlay .bc-answer-grabber {
  width: 42px;
  height: 5px;
  margin: 0 auto 7px;
  border-radius: 999px;
  background: rgba(15, 53, 84, .22);
}

#battleOverlay .bc-answer-panel {
  display: grid;
  gap: 7px;
  width: 100%;
  max-height: min(66dvh, 620px);
  overflow: auto;
  overscroll-behavior: contain;
  padding: 10px 11px 11px;
  border: 1px solid rgba(14, 116, 144, .16);
  border-left: 5px solid #0ea5e9;
  border-radius: 17px 17px 20px 20px;
  background: linear-gradient(180deg, #ffffff, #f8fdff);
  color: #102033;
  box-shadow: 0 16px 42px rgba(15,23,42,.22), inset 0 1px 0 rgba(255,255,255,.9);
}
#battleOverlay .bc-answer-sheet.is-correct .bc-answer-panel {
  border-left-color: #16a34a;
  background: linear-gradient(180deg, #ffffff, #f0fdf4);
}
#battleOverlay .bc-answer-sheet.is-wrong .bc-answer-panel {
  border-left-color: #ef4444;
  background: linear-gradient(180deg, #ffffff, #fff7f7);
}

#battleOverlay .bc-answer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
#battleOverlay .bc-answer-kicker {
  color: rgba(15, 53, 84, .62);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  white-space: nowrap;
}

#battleOverlay .bc-answer-title {
  min-width: 0;
  color: #0f3554;
  font-size: clamp(17px, 4vw, 22px);
  font-weight: 1000;
  line-height: 1.15;
  text-align: left;
}

#battleOverlay .bc-answer-sheet.is-correct .bc-answer-title {
  color: #15803d;
}
#battleOverlay .bc-answer-sheet.is-wrong .bc-answer-title {
  color: #dc2626;
}
#battleOverlay .bc-answer-row {
  display: grid;
  gap: 3px;
  padding: 8px 10px;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid rgba(14, 116, 144, .12);
}

#battleOverlay .bc-answer-row span {
  color: rgba(15, 53, 84, .64);
  font-size: 11px;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

#battleOverlay .bc-answer-row b {
  color: #102033;
  font-size: 14px;
  line-height: 1.35;
  overflow-wrap: anywhere;
}

#battleOverlay .bc-answer-row.is-correct-answer {
  border-color: rgba(22, 163, 74, .24);
  background: #f0fdf4;
}

#battleOverlay .bc-answer-row.is-picked {
  border-color: rgba(239, 68, 68, .24);
  background: #fff1f2;
}

#battleOverlay .bc-answer-explain {
  padding: 8px 10px;
  border-radius: 12px;
  background: #fffbeb;
  border: 1px solid rgba(245, 158, 11, .24);
  color: #7c2d12;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  overflow-wrap: anywhere;
}

#battleOverlay .bc-answer-next {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: linear-gradient(180deg, #facc15, #f59e0b);
  color: #451a03;
  cursor: pointer;
  font-size: 15px;
  font-weight: 1000;
  box-shadow: 0 7px 16px rgba(245,158,11,.20), inset 0 1px 0 rgba(255,255,255,.75);
  touch-action: manipulation;
}

#battleOverlay .bc-answer-next:disabled {
  opacity: .62;
  cursor: not-allowed;
}
#battleOverlay #bc-typing-zone {
  width: 100%;
  margin-top: 10px;
  text-align: center;
}
#battleOverlay .bc-typing-card {
  display: grid;
  gap: 10px;
  width: min(100%, 380px);
  margin: 10px auto;
}
#battleOverlay #bc-typing-input,
#battleOverlay .bc-typing-input,
#battleOverlay #bc-typing-submit,
#battleOverlay .bc-typing-submit {
  width: 100%;
  min-height: 48px;
  border-radius: 13px;
  font-size: 17px;
  font-weight: 900;
}
#battleOverlay #bc-typing-input,
#battleOverlay .bc-typing-input {
  padding: 12px 14px;
  border: 2px solid #f59e0b;
  background: #ffffff;
  color: #102033;
  text-align: center;
  outline: none;
}
#battleOverlay #bc-typing-input.is-correct,
#battleOverlay .bc-typing-input.is-correct {
  border-color: #16a34a;
  background: #f0fdf4;
}
#battleOverlay #bc-typing-input.is-wrong,
#battleOverlay .bc-typing-input.is-wrong {
  border-color: #ef4444;
  background: #fff1f2;
}
#battleOverlay #bc-typing-submit,
#battleOverlay .bc-typing-submit {
  border: 0;
  background: linear-gradient(180deg, #f59e0b, #d97706);
  color: #fff;
  box-shadow: 0 4px 0 #92400e;
  cursor: pointer;
}

/* ===== HP HUD and combat scene ===== */
#battleOverlay .bc-hp-wrap {
  width: 100%;
  margin: 8px 0 12px;
  padding: 10px;
  border: 1px solid rgba(14, 116, 144, .13);
  border-radius: 14px;
  background: rgba(255,255,255,.74);
}

#battleOverlay .bc-boss-name {
  margin-bottom: 8px;
  color: #dc2626;
  font-size: 1rem;
  font-weight: 1000;
  text-transform: uppercase;
  text-shadow: 0 1px 0 rgba(255,255,255,.8);
}
#battleOverlay .bc-hp-bar {
  width: 100%;
  height: 14px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(15, 53, 84, .12);
}

#battleOverlay .bc-hp-fill {
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #dc2626, #fb7185);
  transition: width .25s ease;
}
#battleOverlay #bc-battle-scene {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  align-items: end;
  min-height: clamp(128px, 22vh, 220px);
  margin: 8px 0 12px;
  overflow: hidden;
  border: 1px solid rgba(14, 116, 144, .10);
  border-radius: 18px;
  background:
    radial-gradient(circle at 20% 12%, rgba(186,230,253,.72), transparent 36%),
    radial-gradient(circle at 82% 10%, rgba(254,240,138,.55), transparent 34%),
    linear-gradient(180deg, #f0f9ff, #ecfeff 58%, #f7fee7);
}

#battleOverlay #bc-player-wrap,
#battleOverlay #bc-boss-wrap {
  position: relative;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  min-width: 0;
  min-height: 110px;
  transform-origin: bottom center;
}
#battleOverlay #bc-player-wrap img,
#battleOverlay #bc-boss-wrap img {
  display: block;
  max-width: min(42vw, 180px);
  max-height: clamp(94px, 18vh, 170px);
  object-fit: contain;
}
#battleOverlay #bc-player-wrap #bc-cloned-doll {
  position: relative;
  flex: 0 0 auto;
  display: block;
  width: clamp(104px, 20vw, 170px);
  height: clamp(104px, 20vw, 170px);
  transform-origin: bottom center;
}
#battleOverlay #bc-player-wrap #bc-cloned-doll img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  max-height: none;
  object-fit: contain;
}
#battleOverlay #bc-player-wrap .bc-player-fallback {
  display: grid;
  place-items: center;
  width: clamp(104px, 20vw, 170px);
  height: clamp(104px, 20vw, 170px);
  font-size: clamp(68px, 13vw, 118px);
  line-height: 1;
}
#battleOverlay #bc-player-wrap { filter: drop-shadow(0 0 14px rgba(59,130,246,.46)); }
#battleOverlay #bc-boss-wrap { filter: drop-shadow(0 0 18px rgba(239,68,68,.52)); }
#battleOverlay .slash-fx,
#battleOverlay .bc-clash-fx {
  position: absolute;
  z-index: 8;
  left: 50%;
  top: 44%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
#battleOverlay .bc-clash-fx {
  font-size: clamp(30px, 7vw, 58px);
  animation: bcClashPop .62s ease-out forwards;
}
#battleOverlay .bc-clash-fx.player-hit { left: 34%; }
#battleOverlay .bc-clash-fx.boss-hit { left: 66%; }
#battleOverlay .bc-dmg {
  position: fixed;
  z-index: 100001;
  color: #ff4d4f;
  font-size: clamp(34px, 8vw, 64px);
  font-weight: 1000;
  pointer-events: none;
  text-shadow: 0 3px 0 #000, 0 0 16px rgba(255,255,255,.5);
  animation: floatHit 1.6s ease-out forwards;
}
#battleOverlay .bc-status-text,
.bc-status-text {
  position: fixed;
  z-index: 100002;
  transform: translate(-50%, -50%);
  font-size: clamp(32px, 9vw, 68px);
  font-weight: 1000;
  line-height: 1;
  pointer-events: none;
  text-align: center;
  white-space: nowrap;
  -webkit-text-stroke: 2px #000;
  text-shadow: 0 4px 0 rgba(0,0,0,.75), 0 0 20px rgba(255,255,255,.32);
}


/* ===== Result overlay ===== */
#kqOv.bc-result-overlay,
#kqOv {
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: none;
  align-items: flex-start;
  justify-content: center;
  padding: max(18px, env(safe-area-inset-top)) 14px max(34px, env(safe-area-inset-bottom));
  overflow: hidden auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: rgba(2, 6, 23, .82);
  color: #fff;
  box-sizing: border-box;
  
  -webkit-
  touch-action: pan-y;
}
#kqOv .bc-result-box {
  width: min(100%, 680px);
  max-height: none;
  overflow: visible;
  margin: auto 0;
  padding: clamp(18px, 3.5vw, 28px);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 24px;
  background: linear-gradient(180deg, rgba(15,23,42,.96), rgba(17,24,39,.96));
  box-shadow: 0 26px 80px rgba(0,0,0,.48);
  text-align: center;
}
#kqOv .bc-result-kicker {
  color: #93c5fd;
  font-size: 12px;
  font-weight: 1000;
  letter-spacing: .16em;
}
#kqOv h2 {
  margin: 8px 0 6px;
  color: #fff;
  font-size: clamp(28px, 6vw, 44px);
  line-height: 1.1;
}
#kqOv .bc-result-sub {
  margin: 0 0 16px;
  color: rgba(226,232,240,.82);
  font-weight: 800;
}
#kqOv .bc-result-stats {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  margin: 14px 0;
}
#kqOv .bc-result-stats > div {
  padding: 12px 8px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}
#kqOv .bc-result-stats b {
  display: block;
  color: #facc15;
  font-size: clamp(22px, 4vw, 30px);
}
#kqOv .bc-result-stats span {
  display: block;
  margin-top: 3px;
  color: rgba(226,232,240,.78);
  font-size: 12px;
  font-weight: 900;
}
#kqOv .bc-result-reward,
#kqOv .bc-result-review-store,
#kqOv .bc-result-empty {
  margin: 10px 0;
  padding: 12px 14px;
  border-radius: 16px;
  background: rgba(59,130,246,.12);
  color: #dbeafe;
  font-weight: 900;
  line-height: 1.45;
}
#kqOv .bc-result-review-store.ok { background: rgba(16,185,129,.13); color: #bbf7d0; }
#kqOv .bc-result-mistakes {
  max-height: none;
  overflow: visible;
  margin: 14px 0 0;
  padding-right: 0;
  text-align: left;
}
#kqOv .bc-result-section-title {
  margin: 0 0 8px;
  color: #facc15;
  font-weight: 1000;
  text-align: center;
}
#kqOv .bc-mistake-card {
  display: grid;
  grid-template-columns: auto minmax(0,1fr);
  gap: 10px;
  margin-bottom: 10px;
  padding: 12px;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 16px;
  background: rgba(255,255,255,.07);
}
#kqOv .bc-mistake-num {
  display: grid;
  place-items: center;
  min-width: 38px;
  height: 38px;
  border-radius: 999px;
  background: rgba(250,204,21,.18);
  color: #fde68a;
  font-weight: 1000;
}
#kqOv .bc-mistake-q {
  margin-bottom: 6px;
  color: #fff;
  font-weight: 1000;
  overflow-wrap: anywhere;
}
#kqOv .bc-mistake-row {
  color: rgba(226,232,240,.86);
  font-size: 14px;
  line-height: 1.45;
}
#kqOv .bc-mistake-row.wrong b { color: #fecaca; }
#kqOv .bc-mistake-row.correct b { color: #bbf7d0; }
#kqOv .bc-result-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 16px;
}
#kqOv .bc-result-btn {
  min-height: 46px;
  padding: 10px 16px;
  border: 0;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 1000;
  touch-action: manipulation;
}
#kqOv .bc-result-btn.primary { background: linear-gradient(180deg, #22c55e, #16a34a); color: #fff; }
#kqOv .bc-result-btn.muted { background: rgba(255,255,255,.12); color: #fff; }
#kqOv .bc-result-btn.ghost { background: rgba(59,130,246,.18); color: #bfdbfe; }

/* ===== Animations ===== */
.anim-p-atk { animation: playerAtk .30s ease-out forwards; }
.anim-b-atk { animation: bossAtk .30s ease-out forwards; }
.anim-p-hurt { animation: takeDmg .30s ease-out forwards; }
.anim-b-hurt { animation: takeDmgBoss .30s ease-out forwards; }
.slash-p-atk { animation: slashAnimP .25s ease-out forwards; }
.slash-b-atk { animation: slashAnimB .25s ease-out forwards; }
@keyframes playerAtk { 0%,100%{transform:translateX(0) scale(1);} 50%{transform:translateX(72px) scale(1.03);} }
@keyframes bossAtk { 0%,100%{transform:translateX(0) scale(1);} 50%{transform:translateX(-72px) scale(1.03);} }
@keyframes takeDmg { 0%,100%{transform:translateX(0);filter:brightness(1);} 50%{transform:translateX(-14px);filter:brightness(1.8) saturate(1.5);} }
@keyframes takeDmgBoss { 0%,100%{transform:translateX(0);filter:brightness(1);} 50%{transform:translateX(14px);filter:brightness(1.9) saturate(1.6);} }
@keyframes slashAnimP { from{opacity:0;transform:translate(-50%,-50%) rotate(-20deg) scale(.55);} to{opacity:1;transform:translate(-50%,-50%) rotate(18deg) scale(1.35);} }
@keyframes slashAnimB { from{opacity:0;transform:translate(-50%,-50%) rotate(20deg) scale(.55);} to{opacity:1;transform:translate(-50%,-50%) rotate(-18deg) scale(1.35);} }
@keyframes bcClashPop { 0%{opacity:0;transform:translate(-50%,-50%) scale(.6);} 35%{opacity:1;transform:translate(-50%,-50%) scale(1.18);} 100%{opacity:0;transform:translate(-50%,-70%) scale(.85);} }
@keyframes floatHit { 0%{opacity:0;transform:translate(-50%,-50%) scale(.7);} 20%{opacity:1;transform:translate(-50%,-62%) scale(1.1);} 100%{opacity:0;transform:translate(-50%,-145%) scale(.88);} }
@keyframes statusFly { 0%{opacity:0;transform:translate(-50%,-50%) scale(.78);} 18%{opacity:1;transform:translate(-50%,-56%) scale(1.08);} 100%{opacity:0;transform:translate(-50%,-150%) scale(.90);} }
@keyframes hitShake { 0%,100%{transform:translateX(0);} 25%{transform:translateX(-8px);} 75%{transform:translateX(8px);} }

/* ===== Mobile-first safeguards ===== */
@media (max-width: 720px) {
  body.jlpt180-clean-lobby #box-bicanh.jlpt180-bicanh-card,
  body.jlpt180-clean-lobby #box-bicanh {
    min-height: 178px;
    padding: 18px 12px 14px;
    border-radius: 20px;
  }
  body.jlpt180-clean-lobby #btn-bi-canh-main {
    width: min(100%, 320px);
    min-height: 48px;
    padding-left: 68px;
    font-size: 13px;
  }
  #battleOverlay {
    padding-left: 10px;
    padding-right: 10px;
    --bc-answer-sheet-clearance: calc(94px + env(safe-area-inset-bottom));
  }
  #battleOverlay .bo-head {
    min-height: 46px;
    margin-bottom: 6px;
  }
  #battleOverlay .bo-body {
    padding-bottom: 18px;
  }
  #battleOverlay .fc-card {
    width: 100%;
    padding: 12px;
    border-radius: 18px;
  }
  #battleOverlay .fc-q .bc-question-container {
    margin-top: 8px;
    padding: 20px 10px 14px;
  }
  #battleOverlay .bc-options {
    grid-template-columns: 1fr;
    gap: 9px;
    margin-top: 12px;
    padding: 10px;
    border-radius: 16px;
  }
  #battleOverlay .bc-options > .bc,
  #battleOverlay .bc {
    min-height: 48px;
    padding: 10px 11px;
    border-radius: 14px;
  }
  #battleOverlay .bc-opt-text {
    font-size: 15px;
  }
  #battleOverlay #bc-battle-scene {
    min-height: 118px;
  }
  #battleOverlay #bc-player-wrap img,
  #battleOverlay #bc-boss-wrap img {
    max-width: 42vw;
    max-height: 118px;
  }
  #battleOverlay #bc-player-wrap #bc-cloned-doll,
  #battleOverlay #bc-player-wrap .bc-player-fallback {
    width: min(40vw, 118px);
    height: min(40vw, 118px);
  }
  #battleOverlay #bc-player-wrap .bc-player-fallback {
    font-size: min(24vw, 82px);
  }
  #battleOverlay .bc-answer-sheet-mount {
    padding: 0 10px;
  }
  #battleOverlay .bc-answer-sheet {
    width: min(100%, 430px);
  }
  #battleOverlay .bc-answer-panel {
    max-height: min(50dvh, 430px);
    padding: 9px 10px 10px;
    border-radius: 16px 16px 18px 18px;
  }
  #battleOverlay .bc-answer-row,
  #battleOverlay .bc-answer-explain {
    padding: 7px 9px;
  }
  #battleOverlay .bc-answer-next {
    min-height: 46px;
  }
  #kqOv {
    padding: max(12px, env(safe-area-inset-top)) 10px calc(96px + env(safe-area-inset-bottom));
  }
  #kqOv .bc-result-box {
    width: 100%;
    margin: 0;
    border-radius: 20px;
  }
  #kqOv .bc-result-stats {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  #kqOv .bc-result-actions {
    flex-direction: column;
  }
  #kqOv .bc-result-btn {
    width: 100%;
  }
}
@media (max-width: 390px) {
  #battleOverlay .fc-card {
    padding: 10px;
  }
  #battleOverlay .bc-options > .bc,
  #battleOverlay .bc {
    min-height: 46px;
  }
  #battleOverlay .bc-opt-lbl {
    width: 26px;
    height: 26px;
    margin-right: 8px;
  }
}
@media (max-height: 680px) and (min-width: 721px) {
  #battleOverlay .bo-head { min-height: 42px; }
  #battleOverlay .fc-card { padding: 12px; }
  #battleOverlay #bc-battle-scene { min-height: 112px; }
  #battleOverlay .fc-q .bc-question-container { padding: 18px 12px 12px; }
  #battleOverlay .bc-options > .bc,
  #battleOverlay .bc { min-height: 48px; }
}

@keyframes bcAnswerSheetIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}