.bcs2050-app {
  --bg: #0b0f0e;
  --surface: rgba(10, 14, 13, .62);
  --surface-strong: rgba(6, 10, 9, .78);
  --border: rgba(255,255,255,.16);
  --text: #f3f5f4;
  --muted: rgba(243,245,244,.74);
  --green: #10b981;
  --green-2: #5ee3b2;
  position: fixed;
  inset: 0;
  z-index: 100000;
  width: 100%;
  height: 100%;
  margin: 0;
  max-width: none;
  line-height: normal;
  display: grid;
  place-items: center;
  background: transparent;
  color: var(--text);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}
.bcs2050-app *, .bcs2050-app *::before, .bcs2050-app *::after { box-sizing: border-box; }
.bcs2050-app .bcs2050-stage {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  isolation: isolate;
}
.bcs2050-app .bcs2050-backdrop, .bcs2050-app .bcs2050-bg-layer, .bcs2050-app .bcs2050-vignette { position: absolute; inset: 0; }
.bcs2050-app .bcs2050-backdrop { z-index: 0; }
.bcs2050-app .bcs2050-bg-layer {
  background-position: center;
  background-size: cover;
  opacity: 0;
  transition: opacity .8s cubic-bezier(.4,0,.2,1);
  will-change: opacity;
}
.bcs2050-app .bcs2050-bg-layer.is-visible { opacity: 1; }
.bcs2050-app .bcs2050-vignette {
  z-index: 3;
  background: linear-gradient(to top, rgba(0,0,0,.62) 0%, rgba(0,0,0,.18) 30%, rgba(0,0,0,.14) 72%, rgba(0,0,0,.28) 100%);
  pointer-events: none;
}
.bcs2050-app .bcs2050-screen {
  position: absolute;
  inset: 0;
  display: none;
  padding: clamp(24px, 3vw, 56px);
  z-index: 2;
}
.bcs2050-app .bcs2050-screen.is-active { display: flex; }
.bcs2050-app .bcs2050-screen--intro { flex-direction: column; justify-content: space-between; }
.bcs2050-app .bcs2050-topbar, .bcs2050-app .bcs2050-game-top { display: flex; justify-content: space-between; align-items: flex-start; width: 100%; }
.bcs2050-app .bcs2050-logo { width: clamp(46px, 4.5vw, 76px); height: auto; opacity: .42; filter: grayscale(1) invert(1); mix-blend-mode: screen; background: transparent !important; }
.bcs2050-app .bcs2050-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 999px;
  background: rgba(0,0,0,.42); border: 1px solid var(--border);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  font-weight: 800; font-size: clamp(10px,.72vw,14px); letter-spacing: .08em;
}
.bcs2050-app .bcs2050-pill--intro { color: #7ff0c3; }
.bcs2050-app .bcs2050-intro-copy { max-width: 900px; margin-top: auto; margin-bottom: 5vh; }
.bcs2050-app .bcs2050-eyebrow { color: var(--green-2); font-size: clamp(11px,.8vw,14px); font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 10px; }
.bcs2050-app .bcs2050-intro-copy h1 { margin: 0 0 14px; color: #fff !important; font-size: clamp(54px, 6.4vw, 112px); line-height: .95; letter-spacing: -.04em; }
.bcs2050-app .bcs2050-intro-copy h1 span { color: var(--green-2); }
.bcs2050-app .bcs2050-intro-copy p { margin: 0 0 28px; font-size: clamp(18px,1.7vw,32px); color: var(--muted); }
.bcs2050-app .bcs2050-primary, .bcs2050-app .bcs2050-secondary, .bcs2050-app .bcs2050-next {
  appearance: none; border: 0; cursor: pointer; font: inherit; font-weight: 900;
  border-radius: 16px; transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.bcs2050-app .bcs2050-primary { padding: 18px 28px; background: var(--green); color: #06261a; font-size: clamp(18px,1.35vw,24px); }
.bcs2050-app .bcs2050-primary:hover, .bcs2050-app .bcs2050-next:hover { transform: translateY(-2px); background: #39d39b; }
.bcs2050-app .bcs2050-screen--game { flex-direction: column; justify-content: space-between; }
.bcs2050-app .bcs2050-question-cluster { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.bcs2050-app .bcs2050-progress-pill { color: #e5fff5; }
.bcs2050-app .bcs2050-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--green-2); box-shadow: 0 0 12px rgba(94,227,178,.75); }
.bcs2050-app .bcs2050-divider { width: 1px; height: 16px; background: rgba(255,255,255,.22); }
.bcs2050-app .bcs2050-question-card {
  max-width: min(520px, 41vw); padding: 18px 20px;
  border-radius: 18px; background: var(--surface-strong); border: 1px solid var(--border);
  backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px); box-shadow: 0 18px 50px rgba(0,0,0,.22);
}
.bcs2050-app .bcs2050-question-card p { margin: 0 0 8px; color: #d4f7e7; font-size: clamp(14px,1vw,19px); line-height: 1.35; }
.bcs2050-app .bcs2050-question-card h2 { margin: 0; color: #fff; font-size: clamp(22px,1.8vw,34px); line-height: 1.12; letter-spacing: -.02em; }
.bcs2050-app .bcs2050-answer-row {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px,1.2vw,22px); width: 100%;
}
.bcs2050-app .bcs2050-answer {
  min-height: clamp(104px, 9.3vw, 156px); text-align: left; color: var(--text); cursor: pointer;
  padding: clamp(14px,1.35vw,22px); border-radius: 18px; border: 1px solid var(--border);
  background: rgba(14,17,16,.72); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
  display: flex; flex-direction: column; justify-content: space-between; gap: 12px;
  transition: .22s ease;
}
.bcs2050-app .bcs2050-answer:hover { border-color: rgba(94,227,178,.55); background: rgba(20,25,23,.7); transform: translateY(-2px); }
.bcs2050-app .bcs2050-answer.is-selected { background: rgba(5,67,45,.84); border: 2px solid #4be0aa; box-shadow: 0 0 26px rgba(16,185,129,.28); transform: translateY(-2px); }
.bcs2050-app .bcs2050-answer.is-dimmed { opacity: .82; }
.bcs2050-app .bcs2050-answer-letter { width: 36px; height: 36px; flex-shrink: 0; color: #fff; border-radius: 9px; display: grid; place-items: center; background: rgba(255,255,255,.1); font-size: 18px; font-weight: 900; }
.bcs2050-app .bcs2050-answer h3 { margin: 0 0 5px; color: #fff; font-size: clamp(18px,1.3vw,25px); line-height: 1.15; }
.bcs2050-app .bcs2050-answer p { margin: 0; color: #edf5f1; font-size: clamp(14px,.9vw,17px); line-height: 1.35; }
.bcs2050-app .bcs2050-next {
  position: absolute; right: clamp(32px,4vw,72px); top: 50%; transform: translateY(-50%);
  padding: 16px 25px; background: rgba(16,185,129,.94); color: #06261a; font-size: clamp(16px,1.18vw,22px);
  z-index: 4;
}
.bcs2050-app .bcs2050-next[hidden] { display: none; }
.bcs2050-app .bcs2050-screen--result { flex-direction: column; justify-content: space-between; }
.bcs2050-app .bcs2050-result-grid { margin: auto 0; width: 100%; display: grid; grid-template-columns: 1.4fr .75fr; gap: clamp(18px,2vw,36px); align-items: stretch; }
.bcs2050-app .bcs2050-result-card, .bcs2050-app .bcs2050-bonus-card {
  background: rgba(7,10,9,.78); border: 1px solid var(--border); border-radius: 26px; backdrop-filter: blur(22px); -webkit-backdrop-filter: blur(22px); box-shadow: 0 22px 70px rgba(0,0,0,.32);
}
.bcs2050-app .bcs2050-result-card { padding: clamp(24px,2.4vw,42px); }
.bcs2050-app .bcs2050-result-card h2 { margin: 0 0 10px; color: #fff !important; font-size: clamp(28px,2.35vw,44px); }
.bcs2050-app .bcs2050-result-card > p { margin: 0 0 18px; color: var(--muted); font-size: clamp(14px,1vw,18px); }
.bcs2050-app .bcs2050-donut-wrap { display: grid; grid-template-columns: minmax(230px, 360px) 1fr; gap: 26px; align-items: center; }
.bcs2050-app .bcs2050-donut {
  width: min(29vw, 360px); aspect-ratio: 1; border-radius: 50%; position: relative;
  background: conic-gradient(#10b981 0 20%, #38bdf8 20% 40%, #f59e0b 40% 60%, #a78bfa 60% 80%, #f472b6 80% 100%);
  filter: drop-shadow(0 18px 18px rgba(0,0,0,.28)); transform: perspective(800px) rotateX(12deg);
}
.bcs2050-app .bcs2050-donut::before { content:""; position:absolute; inset:18%; border-radius:50%; background:#0b0f0e; box-shadow: inset 0 0 0 1px rgba(255,255,255,.1), 0 12px 22px rgba(0,0,0,.45); }
.bcs2050-app .bcs2050-donut-center { position:absolute; inset:28%; z-index:2; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; }
.bcs2050-app .bcs2050-donut-center small { color:#91e8c3; font-size:11px; font-weight:800; letter-spacing:.08em; }
.bcs2050-app .bcs2050-donut-center strong { font-size: clamp(42px,4vw,74px); line-height: .95; }
.bcs2050-app .bcs2050-donut-center span { color:var(--muted); font-size:14px; }
.bcs2050-app .bcs2050-legend { display:grid; gap:10px; }
.bcs2050-app .bcs2050-legend-item { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:10px 12px; border-radius:12px; background:rgba(255,255,255,.055); }
.bcs2050-app .bcs2050-legend-label { display:flex; align-items:center; gap:9px; font-size:13px; }
.bcs2050-app .bcs2050-legend-swatch { width:10px; height:10px; border-radius:50%; }
.bcs2050-app .bcs2050-legend-value { font-weight:900; }
.bcs2050-app .bcs2050-bonus-card { padding: clamp(24px,2.4vw,42px); text-align:center; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.bcs2050-app .bcs2050-bonus-card h3 { margin:0 0 12px; font-size:clamp(24px,2vw,38px); }
.bcs2050-app .bcs2050-bonus-card p { color:var(--muted); margin:12px 0 18px; }
.bcs2050-app .bcs2050-qr { width:min(18vw,300px); aspect-ratio:1; background:white; padding:10px; border-radius:20px; }
.bcs2050-app .bcs2050-secondary { padding:12px 18px; background:rgba(255,255,255,.12); color:white; border:1px solid var(--border); }
@media (max-width: 980px) {
  .bcs2050-app .bcs2050-answer-row { grid-template-columns: repeat(2, 1fr); }
  .bcs2050-app .bcs2050-question-card { max-width: 65vw; }
  .bcs2050-app .bcs2050-result-grid { grid-template-columns: 1fr; overflow:auto; }
  .bcs2050-app .bcs2050-donut-wrap { grid-template-columns: 1fr; justify-items:center; }
}

/* Only application descendants are affected; the WordPress theme stays intact. */
.bcs2050-app .bcs2050-load-error { position: absolute; z-index: 5; left: 24px; right: 24px; top: 40%; padding: 20px; border: 1px solid var(--border); border-radius: 18px; background: var(--surface-strong); text-align: center; }
.bcs2050-app .bcs2050-load-error[hidden] { display: none; }
.bcs2050-app button:disabled { cursor: wait; }
.bcs2050-app button:focus-visible { outline: 3px solid var(--green-2); outline-offset: 4px; }
@media (max-width: 980px), (max-height: 650px) {
  .bcs2050-app .bcs2050-screen { overflow-y: auto; gap: 24px; }
  .bcs2050-app .bcs2050-screen--game { justify-content: flex-start; }
  .bcs2050-app .bcs2050-game-top { flex-shrink: 0; gap: 12px; }
  .bcs2050-app .bcs2050-answer-row { margin-top: auto; order: 1; }
  .bcs2050-app .bcs2050-next { position: static; transform: none; align-self: flex-end; order: 2; flex-shrink: 0; }
  .bcs2050-app .bcs2050-next:hover { transform: none; }
  .bcs2050-app .bcs2050-result-grid { overflow: visible; margin: 0; }
  .bcs2050-app .bcs2050-topbar { gap: 12px; }
  .bcs2050-app .bcs2050-logo { flex-shrink: 0; }
  .bcs2050-app .bcs2050-donut { width: min(60vw, 300px); }
  .bcs2050-app .bcs2050-qr { width: min(55vw, 240px); }
  .bcs2050-app .bcs2050-legend { width: 100%; }
  .bcs2050-app .bcs2050-intro-copy { margin-bottom: 0; }
}
@media (max-width: 520px) {
  .bcs2050-app .bcs2050-screen { padding: 20px; }
  .bcs2050-app .bcs2050-question-card { max-width: 100%; }
  .bcs2050-app .bcs2050-game-top { position: relative; padding-top: 54px; }
  .bcs2050-app .bcs2050-game-top .bcs2050-logo { position: absolute; top: 0; right: 0; }
  .bcs2050-app .bcs2050-pill { padding: 8px 10px; gap: 7px; letter-spacing: .04em; }
  .bcs2050-app .bcs2050-intro-copy h1 { font-size: 52px; }
  .bcs2050-app .bcs2050-result-card, .bcs2050-app .bcs2050-bonus-card { padding: 20px; min-width: 0; }
}

.bcs2050-app .bcs2050-qr-link { display: inline-flex; line-height: 0; flex-shrink: 0; }