.study-stat-abg-breakdown-shell {
  width: 100%;
  max-width: 1120px;
  margin-inline: auto;
  overflow: hidden;
  border: 2px solid #392c6e;
  border-radius: 24px;
  background: #1a0f3d;
}
.study-stat-abg-breakdown-host {
  --color-bg:#1a0f3d;--color-surface:#2d1b69;--color-elevated:#3a2480;--color-fg:#fff8fc;
  --color-muted:#c9b8e8;--color-subtle:#9b87c9;--color-border:#5a3fa0;--color-accent:#00d4c8;
  --color-pink:#ff3da7;--color-gold:#ffd400;--color-good:#00d4c8;
  position:relative;isolation:isolate;min-height:100%;background:var(--color-bg);color:var(--color-fg);
  font-family:Inter,"Segoe UI",system-ui,sans-serif;font-size:16px;line-height:1.4;
}
.study-stat-abg-breakdown-host *{box-sizing:border-box}
.study-stat-abg-breakdown-host button{font:inherit;color:inherit;cursor:pointer;min-height:44px}
.study-stat-abg-breakdown-host .flex{display:flex}.study-stat-abg-breakdown-host .grid{display:grid}
.study-stat-abg-breakdown-host .block{display:block}.study-stat-abg-breakdown-host .relative{position:relative}
.study-stat-abg-breakdown-host .absolute{position:absolute}.study-stat-abg-breakdown-host .z-10{z-index:10}
.study-stat-abg-breakdown-host .flex-col{flex-direction:column}.study-stat-abg-breakdown-host .flex-wrap{flex-wrap:wrap}
.study-stat-abg-breakdown-host .flex-1{flex:1 1 0}.study-stat-abg-breakdown-host .shrink-0{flex-shrink:0}
.study-stat-abg-breakdown-host .items-center{align-items:center}.study-stat-abg-breakdown-host .justify-between{justify-content:space-between}
.study-stat-abg-breakdown-host .place-items-center{place-items:center}.study-stat-abg-breakdown-host .text-center{text-align:center}
.study-stat-abg-breakdown-host .text-left{text-align:left}.study-stat-abg-breakdown-host .w-full{width:100%}
.study-stat-abg-breakdown-host .min-h-dvh{min-height:620px}.study-stat-abg-breakdown-host .overflow-y-auto{overflow:visible}
.study-stat-abg-breakdown-host .overflow-hidden{overflow:hidden}.study-stat-abg-breakdown-host .pointer-events-none{pointer-events:none}
.study-stat-abg-breakdown-host .mx-auto{margin-inline:auto}.study-stat-abg-breakdown-host .mx-1{margin-inline:.25rem}
.study-stat-abg-breakdown-host .mt-0\.5{margin-top:.125rem}.study-stat-abg-breakdown-host .mt-1{margin-top:.25rem}
.study-stat-abg-breakdown-host .mt-2{margin-top:.5rem}.study-stat-abg-breakdown-host .max-w-lg{max-width:48rem}
.study-stat-abg-breakdown-host .gap-2{gap:.5rem}.study-stat-abg-breakdown-host .gap-3{gap:.75rem}
.study-stat-abg-breakdown-host .gap-5{gap:1.25rem}.study-stat-abg-breakdown-host .px-2{padding-inline:.5rem}
.study-stat-abg-breakdown-host .px-3{padding-inline:.75rem}.study-stat-abg-breakdown-host .px-4{padding-inline:1rem}
.study-stat-abg-breakdown-host .px-5{padding-inline:1.25rem}.study-stat-abg-breakdown-host .py-1{padding-block:.25rem}
.study-stat-abg-breakdown-host .py-2{padding-block:.5rem}.study-stat-abg-breakdown-host .py-3{padding-block:.75rem}
.study-stat-abg-breakdown-host .py-4{padding-block:1rem}.study-stat-abg-breakdown-host .p-2{padding:.5rem}
.study-stat-abg-breakdown-host .p-3{padding:.75rem}.study-stat-abg-breakdown-host .p-4{padding:1rem}
.study-stat-abg-breakdown-host .pb-10{padding-bottom:2.5rem}.study-stat-abg-breakdown-host .h-11{height:44px}
.study-stat-abg-breakdown-host .h-12{height:48px}.study-stat-abg-breakdown-host .h-14{height:56px}
.study-stat-abg-breakdown-host .h-40{height:10rem}.study-stat-abg-breakdown-host .size-11{width:44px;height:44px}
.study-stat-abg-breakdown-host .size-4{width:1rem;height:1rem}.study-stat-abg-breakdown-host .size-\[6px\]{width:6px;height:6px}
.study-stat-abg-breakdown-host .min-h-20{min-height:80px}.study-stat-abg-breakdown-host .grid-cols-1{grid-template-columns:1fr}
.study-stat-abg-breakdown-host .space-y-2>*+*{margin-top:.5rem}.study-stat-abg-breakdown-host .rounded-lg{border-radius:.5rem}
.study-stat-abg-breakdown-host .rounded-xl{border-radius:.75rem}.study-stat-abg-breakdown-host .rounded-2xl{border-radius:1rem}
.study-stat-abg-breakdown-host .rounded-\[28px\]{border-radius:28px}.study-stat-abg-breakdown-host .rounded-full{border-radius:999px}
.study-stat-abg-breakdown-host .border{border:1px solid var(--color-border)}.study-stat-abg-breakdown-host .border-2{border:2px solid var(--color-border)}
.study-stat-abg-breakdown-host .border-border{border-color:var(--color-border)}.study-stat-abg-breakdown-host .border-accent{border-color:var(--color-accent)}
.study-stat-abg-breakdown-host .border-gold{border-color:var(--color-gold)}.study-stat-abg-breakdown-host .border-gold\/50{border-color:rgba(255,212,0,.5)}
.study-stat-abg-breakdown-host .bg-bg{background:var(--color-bg)}.study-stat-abg-breakdown-host .bg-surface{background:var(--color-surface)}
.study-stat-abg-breakdown-host .bg-pink{background:var(--color-pink)}.study-stat-abg-breakdown-host .bg-accent\/15{background:rgba(0,212,200,.15)}
.study-stat-abg-breakdown-host .bg-\[\#140b33\]\/80{background:rgba(20,11,51,.8)}
.study-stat-abg-breakdown-host .text-fg{color:var(--color-fg)}.study-stat-abg-breakdown-host .text-muted{color:var(--color-muted)}
.study-stat-abg-breakdown-host .text-subtle{color:var(--color-subtle)}.study-stat-abg-breakdown-host .text-accent,.study-stat-abg-breakdown-host .text-good{color:var(--color-accent)}
.study-stat-abg-breakdown-host .text-pink{color:var(--color-pink)}.study-stat-abg-breakdown-host .text-pink-fg{color:#fff8fc}
.study-stat-abg-breakdown-host .text-gold{color:var(--color-gold)}.study-stat-abg-breakdown-host .text-\[7px\]{font-size:7px}
.study-stat-abg-breakdown-host .text-\[8px\]{font-size:8px}.study-stat-abg-breakdown-host .text-\[10px\]{font-size:10px}
.study-stat-abg-breakdown-host .text-xs{font-size:.75rem}.study-stat-abg-breakdown-host .text-sm{font-size:.875rem}
.study-stat-abg-breakdown-host .text-base{font-size:1rem}.study-stat-abg-breakdown-host .text-xl{font-size:1.25rem}
.study-stat-abg-breakdown-host .text-3xl{font-size:clamp(1.65rem,5vw,2rem)}.study-stat-abg-breakdown-host .font-display{font-family:Rubik,Inter,sans-serif}
.study-stat-abg-breakdown-host .font-arcade{font-family:"Press Start 2P",monospace}.study-stat-abg-breakdown-host .font-mono{font-family:monospace}
.study-stat-abg-breakdown-host .font-semibold{font-weight:600}.study-stat-abg-breakdown-host .font-bold{font-weight:700}
.study-stat-abg-breakdown-host .font-extrabold{font-weight:800}.study-stat-abg-breakdown-host .uppercase{text-transform:uppercase}
.study-stat-abg-breakdown-host .tracking-wide{letter-spacing:.05em}.study-stat-abg-breakdown-host .tracking-tight{letter-spacing:-.025em}
.study-stat-abg-breakdown-host .tracking-\[0\.2em\]{letter-spacing:.2em}.study-stat-abg-breakdown-host .leading-none{line-height:1}
.study-stat-abg-breakdown-host .leading-tight{line-height:1.15}.study-stat-abg-breakdown-host .leading-snug{line-height:1.3}
.study-stat-abg-breakdown-host .tabular-nums{font-variant-numeric:tabular-nums}
.study-stat-abg-breakdown-host .inset-x-3{left:.75rem;right:.75rem}.study-stat-abg-breakdown-host .inset-y-3{top:.75rem;bottom:.75rem}
.study-stat-abg-breakdown-host .top-1\.5{top:.375rem}.study-stat-abg-breakdown-host .bottom-1\.5{bottom:.375rem}
.study-stat-abg-breakdown-host .left-1\.5{left:.375rem}.study-stat-abg-breakdown-host .right-1\.5{right:.375rem}
.study-stat-abg-breakdown-host button:focus-visible{outline:3px solid #00d4c8;outline-offset:3px}
@media(min-width:640px){.study-stat-abg-breakdown-host .sm\:grid-cols-2{grid-template-columns:repeat(2,minmax(0,1fr))}.study-stat-abg-breakdown-host .sm\:text-base{font-size:1rem}.study-stat-abg-breakdown-host .sm\:text-\[10px\]{font-size:10px}}
@media(max-width:420px){.study-stat-abg-breakdown-host .min-h-dvh{min-height:560px}.study-stat-abg-breakdown-host .px-4{padding-inline:.75rem}.study-stat-abg-breakdown-host .min-h-20{min-height:72px}}

.study-stat-abg-breakdown-host .bg-elevated{background:var(--color-elevated)}
.study-stat-abg-breakdown-host .bg-good\/20{background:rgba(0,212,200,.2)}
.study-stat-abg-breakdown-host .bg-pink\/15{background:rgba(255,61,167,.15)}
.study-stat-abg-breakdown-host .border-good{border-color:var(--color-good)}
.study-stat-abg-breakdown-host .min-h-14{min-height:56px}

/* Keep question prompts readable against elevated purple cards even when
   utility classes from the source bundle are absent or overridden. */
.study-stat-abg-breakdown-host .bg-elevated,
.study-stat-abg-breakdown-host .bg-surface {
  color: var(--color-fg);
}
.study-stat-abg-breakdown-host .bg-elevated :where(h1,h2,h3,h4,p,span),
.study-stat-abg-breakdown-host .bg-surface :where(h1,h2,h3,h4,p,span) {
  color: inherit;
}
.study-stat-abg-breakdown-host .abg-breakdown-timing{font-size:12px;line-height:1.45}
@media(min-width:640px){.study-stat-abg-breakdown-host .abg-breakdown-timing{font-size:14px}}

.study-stat-abg-breakdown-host{min-height:0}.study-stat-abg-breakdown-host .bg-lcd{background:#f4e27a}.study-stat-abg-breakdown-host .text-lcd-ink{color:#2a220c}.study-stat-abg-breakdown-host .font-lcd{font-family:ui-monospace,Consolas,monospace}

/* ABG console bar 1.0.2 */
.study-stat-abg-breakdown-host section:has(> .grid-cols-3) {
  padding: 14px;
  border-radius: 20px;
}
.study-stat-abg-breakdown-host section:has(> .grid-cols-3) > p {
  margin-bottom: 10px;
}
.study-stat-abg-breakdown-host section > .grid-cols-3 {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
  width: 100%;
}
.study-stat-abg-breakdown-host section > .grid-cols-3 > div {
  min-width: 0;
  min-height: 104px;
  padding: 14px 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-radius: 13px;
}
.study-stat-abg-breakdown-host section > .grid-cols-3 > div p:nth-child(2) {
  margin-top: 7px;
  font-size: clamp(1.5rem, 5vw, 2rem);
}
@media (max-width: 430px) {
  .study-stat-abg-breakdown-host section > .grid-cols-3 {
    gap: 6px !important;
  }
  .study-stat-abg-breakdown-host section > .grid-cols-3 > div {
    min-height: 94px;
    padding-inline: 4px;
  }
}

/* Keep the active board fully visible in a narrow desktop browser pane. */
@media (max-width: 639px) {
  .study-stat-abg-breakdown-host .abg-game { min-height: 0; padding-bottom: 8px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-or { height: 84px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-or svg { max-height: 84px; }
  .study-stat-abg-breakdown-host .abg-question { margin-bottom: 8px !important; padding: 8px 10px; }
  .study-stat-abg-breakdown-host .abg-question > small { margin-bottom: 4px; }
  .study-stat-abg-breakdown-host .abg-value { min-height: 54px; padding: 4px; }
  .study-stat-abg-breakdown-host .abg-value b { font-size: 20px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-answers { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-answer { min-height: 58px; padding: 7px 9px; font-size: 13px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-badge { width: 32px; height: 32px; flex-basis: 32px; }
}
@media (max-width: 360px) {
  .study-stat-abg-breakdown-host .abg-game .ntc-answer { font-size: 12px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-badge { width: 30px; height: 30px; flex-basis: 30px; }
}

/* Fit the complete ABG board frame in short desktop panes. */
@media (max-width: 639px) and (max-height: 520px) {
  .study-stat-abg-breakdown-host .abg-game { min-height: 0; padding: 4px 6px 6px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-status { min-height: 48px; padding-block: 3px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-or { height: 44px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-or svg { max-height: 44px; }
  .study-stat-abg-breakdown-host .abg-question { margin-bottom: 6px !important; padding: 5px 8px; }
  .study-stat-abg-breakdown-host .abg-question p { margin-bottom: 3px; }
  .study-stat-abg-breakdown-host .abg-question > small { margin-bottom: 3px; }
  .study-stat-abg-breakdown-host .abg-value { min-height: 46px; padding: 2px; }
  .study-stat-abg-breakdown-host .abg-value b { font-size: 18px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-answers { gap: 5px; }
  .study-stat-abg-breakdown-host .abg-game .ntc-answer { min-height: 50px; padding: 4px 7px; }
}
