body { margin: 0; overflow: hidden; }
#app { width: 100vw; height: 100vh; padding: 5vh 6vw; }

.d-screen { display: none; height: 100%; flex-direction: column; }
.d-screen.active { display: flex; }

.d-hex-hero {
  width: 160px; height: 160px; font-size: 72px; margin: auto auto 30px;
  clip-path: polygon(25% 6%, 75% 6%, 100% 50%, 75% 94%, 25% 94%, 0% 50%);
  background: linear-gradient(160deg, var(--honey), var(--honey-dark));
  display: flex; align-items: center; justify-content: center;
}
.d-title { text-align: center; font-size: 4.2rem; margin-bottom: 10px; }
.d-subtitle { text-align: center; font-size: 1.6rem; color: var(--cream-dim); }
#d-waiting { justify-content: center; align-items: center; }

.d-q-header {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 1.4rem; color: var(--cream-dim); margin-bottom: 20px;
}
.d-live-dot { color: var(--honey); font-weight: 700; animation: blink 1.2s infinite; }
@keyframes blink { 50% { opacity: 0.3; } }

.d-q-text { font-size: 3.4rem; line-height: 1.25; margin-bottom: 50px; flex-shrink: 0; }
.d-q-text-small { font-size: 2.1rem; margin-bottom: 30px; }

.d-options-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 24px; flex: 1;
}
.d-opt {
  display: flex; align-items: center; gap: 20px; border-radius: 20px;
  padding: 30px 34px; font-size: 2rem; font-weight: 600; color: #fff;
}
.d-opt-letter {
  width: 56px; height: 56px; border-radius: 12px; background: rgba(0,0,0,0.22);
  display: flex; align-items: center; justify-content: center; font-family: 'Baloo 2'; flex-shrink: 0;
}
.d-opt-a { background: #C0562B; }
.d-opt-b { background: #2E6F95; }
.d-opt-c { background: #4C7A3D; }
.d-opt-d { background: #8A5FB0; }
.d-hint { text-align: center; font-size: 1.3rem; color: var(--cream-dim); margin-top: 30px; }

.d-correct-badge { background: var(--forest-mid); padding: 8px 18px; border-radius: 20px; }
.d-correct-badge strong { color: var(--honey); }

.d-section-label { font-size: 1.3rem; color: var(--cream-dim); margin-bottom: 14px; }
.d-bars { display: flex; flex-direction: column; gap: 12px; overflow-y: auto; flex: 1; }
.d-bar-row { display: flex; align-items: center; gap: 16px; }
.d-bar-name { width: 220px; font-size: 1.2rem; font-weight: 600; flex-shrink: 0; }
.d-bar-track { flex: 1; background: var(--forest-mid); border-radius: 10px; height: 34px; overflow: hidden; }
.d-bar-fill { height: 100%; border-radius: 10px; transition: width 0.6s ease; }
.d-bar-score { width: 90px; text-align: right; font-family: 'Baloo 2'; font-size: 1.2rem; }

.d-podium {
  display: flex; align-items: flex-end; justify-content: center; gap: 24px; margin: 40px 0;
}
.d-podium-step { text-align: center; border-radius: 16px 16px 0 0; padding: 20px 26px; color: #fff; }
.d-podium-step .name { font-size: 1.4rem; font-weight: 700; margin-bottom: 6px; }
.d-podium-step .score { font-family: 'Baloo 2'; font-size: 1.6rem; }
.d-podium-step.p1 { height: 220px; background: linear-gradient(160deg, var(--honey), var(--honey-dark)); order: 2; }
.d-podium-step.p2 { height: 170px; background: var(--forest-soft); order: 1; }
.d-podium-step.p3 { height: 130px; background: #8A5FB0; order: 3; }

.d-rest-list { display: flex; justify-content: center; gap: 40px; font-size: 1.2rem; color: var(--cream-dim); }