.qb-preview { max-width: 1150px; margin: 0 auto; color: #192b26; }
.qb-preview [hidden] { display: none; }
.qb-header { display: flex; gap: 12px; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.qb-header-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 6px; }
.qb-header-actions button { white-space: nowrap; }
.qb-header-actions [data-brawl-sound][aria-pressed="true"] { background: #d7efe3; border-color: #27785c; }
.qb-header-actions [data-brawl-sound] span { margin-inline-start: 4px; font-weight: 800; }
.qb-sound-status:empty { display: none; }
.qb-sound-status { margin: 0 0 8px; font-size: 13px; }
.qb-header h1 { margin: 2px 0 0; font-size: clamp(24px, 4vw, 34px); }
.qb-header p, .qb-kicker { margin: 0; font-size: 13px; font-weight: 800; color: #356454; }
.qb-hud { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.qb-hud span { display: grid; padding: 7px 10px; border-radius: 10px; background: #e6f1eb; font-size: 12px; }
.qb-hud b { font-size: 18px; font-variant-numeric: tabular-nums; }
.qb-health { width: 100%; height: 9px; accent-color: #27785c; }
.qb-arena { position: relative; height: clamp(350px, 58dvh, 650px); overflow: hidden; border-radius: 14px; background: #628d51; }
.qb-arena canvas { display: block; width: 100%; height: 100%; }
.qb-arena canvas:focus-visible { outline: 3px solid #e0f3d9; outline-offset: -4px; }
.qb-charge-warning {
  position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: max-content; max-width: calc(100% - 24px);
  margin: 0; padding: 5px 10px; border: 2px solid #8b411d; border-radius: 8px; background: #fff0ca;
  color: #5d260d; font-size: 13px; font-weight: 750; pointer-events: none;
}
.qb-charge-warning:empty { display: none; }
.qb-panel-wrap { position: absolute; inset: 0; display: grid; align-items: center; justify-items: center; padding: 12px; background: #172b2499; overflow: auto; }
.qb-panel { width: min(100%, 550px); padding: clamp(14px, 4vw, 26px); border-radius: 14px; background: #fff; box-shadow: 0 12px 36px #132a2845; }
.qb-panel h2 { margin: 5px 0 10px; font-size: clamp(19px, 3vw, 27px); line-height: 1.3; }
.qb-panel h2:focus { outline: none; }
.qb-panel p { line-height: 1.45; }
.qb-choices { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 9px; }
.qb-choices button { flex: 1 1 80px; min-width: 0; min-height: 44px; padding: 7px; border: 1px solid #a7c5b7; border-radius: 8px; background: #f1f7f3; color: #163b31; }
.qb-choices button[aria-pressed="true"], .qb-choices button:hover { border-color: #27785c; background: #dbefe4; }
.qb-practice-abilities { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.qb-choices small { display: block; margin-top: 4px; }
.qb-upgrade-choices button { display: grid; align-content: start; gap: 4px; padding: 10px; text-align: start; }
.qb-upgrade-choices button:focus-visible { outline: 3px solid #27785c; outline-offset: 2px; }
.qb-upgrade-icon { width: fit-content; padding: 1px 7px; border-radius: 5px; background: #d7efe3; color: #20533e; font-weight: 800; }
.qb-upgrade-change { font-weight: 750; font-variant-numeric: tabular-nums; }
.qb-upgrade-choices small { margin-top: 0; overflow-wrap: anywhere; }
.qb-answer-checks { display: grid; gap: 6px; margin-bottom: 10px; }
.qb-answer-checks label { display: flex; align-items: center; min-height: 40px; padding: 6px; background: #f1f7f3; }
.qb-preview form input[name="answerText"] { max-width: 100%; margin-bottom: 8px; min-height: 40px; }
.qb-preview .qs-button { min-height: 40px; padding: 6px 12px; border: 1px solid #8daf9f; border-radius: 8px; background: #f1f7f3; color: #163b31; }
.qb-preview .qs-primary { color: white; background: #27664f; }
.qb-roster { padding: 0; list-style: none; }
.qb-roster li { display: flex; flex-wrap: wrap; gap: 8px 16px; padding: 10px 0; border-top: 1px solid #dce8e1; }
.qb-footer { display: flex; gap: 14px; align-items: center; margin-top: 10px; }
.qb-arena .qm-joystick { z-index: 1; }
.qb-progress { display: grid; gap: 3px; flex: 1; min-width: 0; font-size: 13px; }
.qb-progress progress { width: 100%; accent-color: #27785c; }
.qb-progress small { color: #356454; }
.qb-progress .qb-applied-upgrade { font-weight: 750; }
.qb-applied-upgrade:empty { display: none; }
@media (max-width: 600px) {
  .qb-header { align-items: start; }
  .qb-header .qs-button { min-height: 44px; padding-inline: 8px; font-size: 12px; }
  .qb-hud span { padding: 5px 6px; }
  .qb-hud b { font-size: 14px; white-space: nowrap; }
  .qb-arena { height: clamp(300px, 46dvh, 510px); }
  .qb-footer { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px; }
  .qb-footer > .qs-button { grid-column: 2; justify-self: end; min-height: 44px; }
}

.qb-panel-wrap:has(.qb-support-choices) { align-items: safe center; }
.qb-support-choices {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.qb-support-choices button {
  display: grid;
  align-content: start;
  gap: 4px;
  padding: 10px;
  text-align: left;
}
.qb-support-choices button small { margin-top: 0; line-height: 1.4; }
.qb-support-grade {
  display: inline-block;
  width: fit-content;
  padding: 2px 8px;
  border-radius: 4px;
  background: #e3eee3;
  color: #244d31;
  font-size: 12px;
  font-weight: 750;
}
.qb-support-grade[data-grade="희귀"] { background: #e1ecf9; color: #214f7a; }
.qb-support-grade[data-grade="영웅"] { background: #fae9cb; color: #714404; }
@media (max-width: 620px) {
  .qb-support-choices { grid-template-columns: 1fr; }
}

.qb-room.qm-root { min-height: 0; }
.qb-room.qm-root:has(> .qm-results, > .qm-teacher-lobby) { height: auto; overflow: visible; }
.qb-room .qm-student-lobby { min-height: min(640px, 78dvh); }
.qb-room [role="status"], .qb-room-summary, .qb-room-record, .qb-room-coins:not(:empty) { padding: 12px 16px; }
.qb-room .qb-roster { max-height: 56dvh; overflow: auto; }
.qb-room .qb-roster .qm-participant { display: flex; flex-direction: column; align-items: start; }
.qb-room .qm-lobby-card [data-retry-ready]:not([hidden]) { margin-top: 12px; }
.qb-panel-wrap.qm-root { min-height: 0; background: transparent; padding: 0; }
.qb-panel.qb-shared-question { width: 100%; height: 100%; padding: 0; border: 0; background: transparent; box-shadow: none; }
.qb-shared-question .qm-modal-backdrop, .qb-shared-question .qm-feedback-layer { position: absolute; }
.qb-shared-question .qm-question-dialog { max-height: 100%; }
.qb-shared-question .qm-question-dialog > footer { position: sticky; bottom: -8px; background: #fff; padding: 10px 0 6px; margin-top: 8px; z-index: 2; }
.qb-shared-question form [role="status"]:empty { display: none; }
.qb-shared-question .qm-feedback-dock { max-height: 90%; }
.qb-card-art { display: block; width: 58px; height: 58px; margin: 0 auto 4px; color: #23567d; }
.qb-choices button[aria-pressed="true"] .qb-art-orb g,
.qb-choices button[aria-pressed="true"] .qb-art-arrow g { animation: qb-card-shot .75s ease-out 2; }
.qb-choices button[aria-pressed="true"] .qb-art-wave g { animation: qb-card-wave .75s ease-out 2; transform-origin: center; }
.qb-choices button[aria-pressed="true"] .qb-art-leaves g { animation: qb-card-leaves 1s linear 2; transform-origin: center; }
@keyframes qb-card-shot { from { transform: translate(-7px, 5px); } to { transform: translate(4px, -4px); } }
@keyframes qb-card-wave { from { transform: scale(.5); } to { transform: scale(1); } }
@keyframes qb-card-leaves { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .qb-choices button[aria-pressed="true"] .qb-card-art g { animation: none; } }

@media (any-pointer: coarse), (max-width: 600px) {
  .qv2-frame:has(.qb-live-preview) { max-width: none; padding: 0; }
  .qv2-frame:has(.qb-live-preview) > .qv2-tools { display: none; }
  .qv2-frame:has(.qb-live-preview) > section > [role="status"] { position: fixed; z-index: 4; inset: 48px 12px auto; padding: 8px 12px; background: #fff; border-radius: 8px; }
  .qv2-frame:has(.qb-live-preview) > section > [role="status"]:empty { display: none; }
  .qb-live-preview {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-width: none;
    height: 100dvh;
    padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
      max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  }
  .qb-live-preview .qb-header, .qb-live-preview .qb-hud, .qb-live-preview .qb-footer { margin: 0; }
  .qb-live-preview .qb-header { align-items: center; }
  .qb-live-preview .qb-header h1 { font-size: clamp(17px, 3vw, 24px); }
  .qb-live-preview .qb-header .qs-button { min-height: 44px; padding-inline: 8px; font-size: 12px; }
  .qb-live-preview .qb-hud span { padding-block: 4px; }
  .qb-live-preview .qb-hud b { font-size: 16px; }
  .qb-live-preview .qb-arena { flex: 1; min-height: 0; height: auto; }
  .qb-live-preview[data-brawl-phase="battle"] canvas { touch-action: none; }
  .qb-live-preview .qb-footer { display: flex; }
  .qb-live-preview .qb-panel-wrap { align-items: safe center; overscroll-behavior: contain; }
  .qb-live-preview .qb-panel:not(.qb-shared-question) { width: min(100%, 880px); }
  .qb-live-preview .qm-question-dialog { width: min(100%, 880px); }
  .qb-live-preview .qm-feedback-dock { width: min(100%, 880px); }
  .qb-live-preview :is(.qm-answer-field input, .qm-question-dialog button, .qm-feedback-footer button) { min-height: 44px; }
  .qb-live-preview .qm-answer-field input { font-size: max(16px, 1em); }
}
@media (orientation: landscape) and (min-width: 720px) and (any-pointer: coarse) {
  .qb-live-preview .qb-hud span { grid-template-columns: 1fr auto; align-items: center; gap: 0 8px; }
  .qb-live-preview .qb-health { grid-column: 1 / -1; }
  .qb-live-preview .qb-practice-abilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

body:has(.qb-preview[data-brawl-screen]) { overflow: hidden; }
.qb-preview[data-brawl-screen] {
  position: fixed;
  z-index: 25;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  width: 100%;
  max-width: none;
  height: 100dvh;
  margin: 0;
  padding: max(6px, env(safe-area-inset-top)) max(8px, env(safe-area-inset-right))
    max(6px, env(safe-area-inset-bottom)) max(8px, env(safe-area-inset-left));
  background: #f2f5ff;
}
.qb-preview[data-brawl-screen] :is(.qb-header, .qb-hud, .qb-footer) { margin: 0; }
.qb-preview[data-brawl-screen] .qb-arena { flex: 1; min-height: 0; height: auto; }

.qb-header .qb-menu-toggle, .qb-header .qb-landscape-only, .qb-metric-icon, .qb-question-note { display: none; }
.qb-hud .qb-metric-label, .qb-progress-notes, .qb-question-body { display: contents; }
.qb-landscape .qb-landscape-only, .qb-preview[data-brawl-screen] .qb-landscape-only { display: inline-block; }

body:has(.qb-landscape) { overflow: hidden; }
.qb-preview.qb-landscape {
  --qb-left: max(14px, env(safe-area-inset-left));
  --qb-right: max(14px, env(safe-area-inset-right));
  --qb-top: max(14px, env(safe-area-inset-top));
  --qb-glass: rgba(16, 36, 30, .94);
  position: fixed;
  z-index: 40;
  inset: 0;
  width: 100%;
  max-width: none;
  height: var(--qb-landscape-height, 100dvh);
  margin: 0;
  padding: 0;
  isolation: isolate;
}
.qb-landscape .qb-arena { position: absolute; inset: 0; width: 100%; height: 100%; border-radius: 0; }
.qb-landscape .qb-arena canvas { touch-action: none; }
.qb-landscape .qb-arena .qm-joystick {
  width: 124px;
  left: max(21px, env(safe-area-inset-left));
  bottom: max(21px, env(safe-area-inset-bottom));
}
.qb-landscape .qb-header { margin: 0; }
.qb-landscape .qb-header > div:first-child,
.qb-landscape .qb-metric-label {
  display: block;
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.qb-landscape :is(.qb-menu-toggle, .qb-hud, .qb-footer) {
  position: absolute;
  margin: 0;
  background: var(--qb-glass);
  color: #f6fff7;
  border: 1px solid #dffbe843;
  box-shadow: 0 5px 20px #0b2c3427;
}
.qb-landscape .qb-header .qb-menu-toggle {
  display: flex;
  z-index: 4;
  top: var(--qb-top);
  right: var(--qb-right);
  align-items: center;
  gap: 7px;
  min-height: 46px;
  min-width: 78px;
  border-radius: 13px;
  font-weight: 750;
}
.qb-landscape .qb-header-actions {
  position: absolute;
  z-index: 5;
  top: calc(var(--qb-top) + 53px);
  right: var(--qb-right);
  width: min(240px, 75vw);
  padding: 6px;
  border-radius: 12px;
  background: #f8fff9;
  box-shadow: 0 8px 24px #122b3666;
  display: none;
}
.qb-landscape.qb-menu-open .qb-header-actions { display: grid; justify-content: stretch; }
.qb-landscape .qb-header-actions button { min-height: 44px; text-align: left; }
.qb-landscape .qb-progress-notes { display: grid; gap: 4px; padding: 7px; color: #356454; font-size: 13px; }
.qv2-frame > section:has(> .qb-landscape) > [role="status"]:not(:empty) {
  z-index: 41; inset: 76px auto auto 50%; transform: translateX(-50%);
  width: max-content; max-width: min(80vw, 480px);
}
.qb-landscape .qb-sound-status {
  position: absolute; z-index: 5; top: var(--qb-top); right: calc(var(--qb-right) + 90px);
  max-width: 35vw; padding: 8px; border-radius: 8px; background: #fff;
}
.qb-landscape .qb-hud {
  z-index: 2;
  top: var(--qb-top);
  left: var(--qb-left);
  display: flex;
  align-items: center;
  gap: 0;
  height: 54px;
  padding: 8px 6px;
  border-radius: 14px;
  pointer-events: none;
}
.qb-landscape .qb-hud > span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 33px;
  padding: 0 13px;
  border-radius: 0;
  background: none;
  color: #c4dbcf;
  font-weight: 700;
}
.qb-landscape .qb-hud > span + span { border-left: 1px solid #edf9e329; }
.qb-landscape .qb-hud b { color: #f4fff9; font-size: 16px; }
.qb-landscape .qb-hud > span:has(meter) { display: grid; grid-template-columns: auto auto; gap: 3px 8px; }
.qb-landscape .qb-hud .qb-metric-icon { display: block; width: 16px; height: 16px; color: #a6ec9f; }
.qb-landscape .qb-hud [data-brawl-xp] { min-width: 14px; }
.qb-landscape .qb-health { grid-column: 1 / -1; height: 9px; border: 0; appearance: none; background: #ffffff29; border-radius: 5px; overflow: hidden; }
.qb-landscape .qb-health::-webkit-meter-bar { height: 9px; border: 0; background: #ffffff29; }
.qb-landscape .qb-health::-webkit-meter-optimum-value { background: #a6ec9f; }
.qb-landscape .qb-health::-webkit-meter-suboptimum-value { background: #f2ce79; }
.qb-landscape .qb-health::-webkit-meter-even-less-good-value { background: #f08f87; }
.qb-landscape .qb-footer {
  z-index: 2;
  right: var(--qb-right);
  bottom: max(18px, env(safe-area-inset-bottom));
  width: 200px;
  padding: 9px 11px 10px;
  border-radius: 11px;
  pointer-events: none;
}
.qb-landscape:not([data-brawl-phase="battle"]) .qb-footer { display: none; }
.qb-landscape .qb-progress { gap: 7px; font-size: 12px; font-weight: 750; }
.qb-landscape .qb-progress label { display: flex; justify-content: space-between; gap: 4px; }
.qb-landscape .qb-progress small { color: #e0eee5; font-size: 12px; line-height: 1.35; }
.qb-landscape .qb-progress b { color: #fff5c4; font-variant-numeric: tabular-nums; }
.qb-landscape .qb-progress progress { height: 9px; border: 0; appearance: none; background: #ffffff29; border-radius: 5px; overflow: hidden; }
.qb-landscape .qb-progress progress::-webkit-progress-bar { background: transparent; }
.qb-landscape .qb-progress progress::-webkit-progress-value { background: #f2ce79; }
.qb-landscape .qb-progress progress::-moz-progress-bar { background: #f2ce79; }
.qb-landscape .qb-charge-warning { z-index: 2; top: calc(var(--qb-top) + 62px); }
.qb-landscape .qb-panel-wrap { z-index: 3; align-items: safe center; background: #0e251dbd; overscroll-behavior: contain; }
.qb-landscape .qb-panel-wrap:not(.qm-root) .qb-panel { width: min(100%, 870px); }
.qb-landscape .qb-practice-abilities { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.qb-landscape .qb-shared-question .qm-modal-backdrop { padding: 22px; background: none; backdrop-filter: none; }
.qb-landscape .qm-question-dialog {
  display: flex;
  flex-direction: column;
  width: min(870px, 100%);
  max-height: 100%;
  padding: 0;
  border-radius: 23px;
  overflow: hidden;
  background: #fbfdff;
  color: #17273d;
}
.qb-landscape .qm-question-dialog > header {
  flex: none;
  padding: 19px 26px 15px;
  border-bottom: 1px solid #e6edf6;
  font-size: 14px;
}
.qb-landscape .qm-question-dialog > header span { padding: 5px 8px; border-radius: 7px; background: #e9f1ff; }
.qb-landscape .qb-question-body {
  display: grid;
  grid-template-columns: minmax(215px, .82fr) minmax(0, 1.18fr);
  align-items: start;
  gap: 28px;
  min-height: 0;
  padding: 27px 26px;
  overflow: auto;
  overscroll-behavior: contain;
}
.qb-landscape .qb-question-body h1 { margin: 0; text-align: left; font-size: clamp(23px, 2.7vw, 31px); line-height: 1.34; }
.qb-landscape .qm-question-dialog .qm-choices { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 11px; }
.qb-landscape .qm-question-dialog .qm-choices button { min-height: 60px; padding: 10px 13px; font-size: 18px; }
.qb-landscape .qm-question-dialog > footer {
  position: static;
  flex: none;
  align-items: center;
  padding: 13px 26px 17px;
  margin: 0;
  border-top: 1px solid #e6edf6;
  background: #f8fbff;
}
.qb-landscape .qm-question-dialog > footer button { min-height: 48px; margin-left: auto; }
.qb-landscape .qb-question-note { display: block; color: #486581; font-size: 13px; }

.qb-interaction{border:0;padding:0;margin:0;min-width:0;width:100%;display:contents}
.qb-connection-status{position:absolute;top:10px;left:50%;transform:translateX(-50%);z-index:8;max-width:calc(100% - 24px);margin:0;padding:8px 12px;border:1px solid #a4c7ea;border-radius:10px;background:#f0f7ff;color:#164277;font-size:13px;text-align:center;pointer-events:none}