:root {
  --ddq-green: #96ac1a;
  --ddq-yellow: #fdc300;
  --ddq-blue: #00699d;
  --ddq-grey: #9d9d9c;
  --ddq-text-dark: #1f2937;
  --ddq-text-light: #ffffff;
  --ddq-border: rgba(0,0,0,0.12);
  --ddq-soft-bg: #f5f7f8;
}

.ddq-player-app,
.ddq-host-app,
.ddq-leaderboard-app {
  max-width: 1040px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

.ddq-card {
  background: #fff;
  border: 1px solid rgba(0,0,0,0.08);
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 16px 40px rgba(0,0,0,0.08);
  margin: 18px 0;
  overflow: hidden;
}

.ddq-hero-card,
.ddq-host-stage-card,
.ddq-player-state {
  position: relative;
}

.ddq-hero-card::before,
.ddq-host-stage-card::before,
.ddq-player-state::before {
  content: "";
  position: absolute;
  inset: 0 auto auto 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, var(--ddq-green), var(--ddq-yellow), var(--ddq-blue), var(--ddq-grey));
}

.ddq-app-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
}

.ddq-app-header-host {
  align-items: center;
}

.ddq-app-title {
  margin: 8px 0 0;
  font-size: clamp(1.7rem, 4vw, 2.4rem);
  line-height: 1.1;
  color: var(--ddq-text-dark);
}

.ddq-hero-card h2 {
  font-size: clamp(2rem, 4vw, 2.7rem);
  line-height: 1.1;
  margin: 10px 0 8px;
  color: var(--ddq-text-dark);
}

.ddq-hero-copy,
.ddq-player-welcome,
.ddq-login-message,
.ddq-status-note,
.ddq-empty-copy {
  color: #4b5563;
}

.ddq-hero-badge,
.ddq-status-pill,
.ddq-question-badge,
.ddq-timer-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border-radius: 999px;
  padding: 8px 14px;
  font-size: .92rem;
  font-weight: 700;
}

.ddq-hero-badge {
  background: rgba(0, 105, 157, 0.08);
  color: var(--ddq-blue);
}

.ddq-section-title {
  font-size: 1.05rem;
  font-weight: 800;
  margin: 18px 0 12px;
  color: var(--ddq-text-dark);
}

.ddq-status-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 8px;
}

.ddq-status-pill {
  color: #fff;
}

.ddq-status-pill.is-lobby { background: var(--ddq-grey); color: #fff; }
.ddq-status-pill.is-running { background: var(--ddq-yellow); color: var(--ddq-text-dark); }
.ddq-status-pill.is-question_live { background: var(--ddq-green); color: #fff; }
.ddq-status-pill.is-finished { background: var(--ddq-blue); color: #fff; }

.ddq-login-form,
.ddq-options {
  display: grid;
  gap: 14px;
}

.ddq-login-form label {
  font-weight: 700;
  color: var(--ddq-text-dark);
  margin-top: 4px;
}

.ddq-login-form input,
.ddq-login-form button,
.ddq-answer-btn {
  border-radius: 16px;
  padding: 16px 18px;
  font-size: 17px;
}

.ddq-login-form input {
  border: 1px solid #d1d5db;
  background: #fff;
  color: var(--ddq-text-dark);
}

.ddq-login-form button {
  cursor: pointer;
  border: 1px solid var(--ddq-blue);
  background: linear-gradient(135deg, var(--ddq-blue), #0f83bc);
  color: var(--ddq-text-light);
  font-weight: 800;
  box-shadow: 0 10px 18px rgba(0,105,157,.22);
}

.ddq-question-shell {
  background: linear-gradient(180deg, #ffffff, #f8fafc);
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 22px;
  padding: 20px;
}

.ddq-question-topbar {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  margin-bottom: 12px;
}

.ddq-question-badge {
  background: rgba(150,172,26,.14);
  color: #62740c;
}

.ddq-timer-badge {
  background: rgba(0,105,157,.1);
  color: var(--ddq-blue);
}

.ddq-countdown {
  font-size: 1.15rem;
}

.ddq-timer-track {
  width: 100%;
  height: 10px;
  background: #e5e7eb;
  border-radius: 999px;
  overflow: hidden;
  margin: 10px 0 18px;
}

.ddq-timer-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--ddq-green), var(--ddq-yellow), var(--ddq-blue));
  transition: width .9s linear;
}

.ddq-question h3 {
  font-size: clamp(1.45rem, 3vw, 2rem);
  line-height: 1.25;
  color: var(--ddq-text-dark);
  margin: 0 0 12px;
}

.ddq-question-image img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 18px;
  margin: 16px 0 18px;
  box-shadow: 0 10px 24px rgba(0,0,0,.08);
}

.ddq-answer-btn {
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 14px;
  text-align: left;
  font-weight: 800;
  border: 0;
  min-height: 76px;
  transition: transform .15s ease, box-shadow .15s ease, opacity .2s ease;
  box-shadow: 0 10px 16px rgba(0,0,0,0.08);
}

.ddq-answer-btn:hover,
.ddq-answer-btn:focus {
  transform: translateY(-2px);
  box-shadow: 0 14px 22px rgba(0,0,0,0.13);
}

.ddq-answer-letter {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  min-width: 42px;
  height: 42px;
  border-radius: 999px;
  background: rgba(255,255,255,0.28);
  border: 1px solid rgba(255,255,255,0.35);
  font-size: 1rem;
}

.ddq-answer-text {
  flex: 1;
  line-height: 1.35;
}

.ddq-answer-a { background: var(--ddq-green); color: #fff; }
.ddq-answer-b { background: var(--ddq-yellow); color: #1f2937; }
.ddq-answer-c { background: var(--ddq-blue); color: #fff; }
.ddq-answer-d { background: var(--ddq-grey); color: #1f2937; }
.ddq-answer-b .ddq-answer-letter,
.ddq-answer-d .ddq-answer-letter {
  background: rgba(255,255,255,0.5);
  border-color: rgba(0,0,0,0.08);
}

.ddq-answer-btn.is-selected {
  transform: translateY(-1px) scale(1.01);
  outline: 4px solid rgba(0, 105, 157, .18);
}

.ddq-answer-btn.is-disabled,
.ddq-answer-btn:disabled {
  opacity: .86;
  cursor: default;
}

.ddq-host-options {
  list-style: none;
  padding: 0;
  margin: 18px 0 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ddq-host-options li {
  padding: 18px;
  border-radius: 18px;
  border: 0;
  font-weight: 800;
  box-shadow: 0 8px 16px rgba(0,0,0,.07);
}

.ddq-feedback-box {
  margin-top: 16px;
  padding: 16px 18px;
  background: #eef6ff;
  color: var(--ddq-text-dark);
  border-left: 6px solid var(--ddq-blue);
  border-radius: 14px;
}

.ddq-feedback-box.is-success {
  background: #f0f8dd;
  border-left-color: var(--ddq-green);
}

.ddq-feedback-box.is-error {
  border-left-color: #b91c1c;
  background: #fef2f2;
}

.ddq-feedback-points {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.ddq-mini-chip {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: .88rem;
  font-weight: 700;
  background: rgba(0, 105, 157, .08);
  color: var(--ddq-blue);
}

.ddq-leaderboard-wrap {
  display: grid;
  gap: 14px;
}

.ddq-leaderboard-hero {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  align-items: center;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(0,105,157,.98), rgba(150,172,26,.98));
  color: #fff;
  border-radius: 20px;
}

.ddq-leaderboard-hero-title {
  font-size: .96rem;
  opacity: .92;
}

.ddq-leaderboard-name {
  font-size: 1.4rem;
  font-weight: 900;
  margin-top: 4px;
}

.ddq-leaderboard-muni {
  opacity: .92;
}

.ddq-leaderboard-score {
  font-size: 2rem;
  font-weight: 900;
  white-space: nowrap;
}

.ddq-leader-list {
  display: grid;
  gap: 10px;
}

.ddq-leader-item {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  border-radius: 18px;
  background: #fff;
  border: 1px solid rgba(0,0,0,.06);
}

.ddq-rank-badge {
  display: inline-flex;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  background: rgba(150,172,26,.15);
  color: #53620f;
}

.ddq-leader-item:nth-child(1) .ddq-rank-badge { background: rgba(253,195,0,.25); color: #5e4a00; }
.ddq-leader-item:nth-child(2) .ddq-rank-badge { background: rgba(0,105,157,.14); color: #005881; }
.ddq-leader-item:nth-child(3) .ddq-rank-badge { background: rgba(157,157,156,.18); color: #5d5d5c; }

.ddq-leader-player {
  font-weight: 800;
  color: var(--ddq-text-dark);
}

.ddq-leader-municipality {
  color: #6b7280;
  margin-top: 2px;
}

.ddq-leader-points {
  font-weight: 900;
  font-size: 1.1rem;
  color: var(--ddq-blue);
}

.ddq-empty-state {
  padding: 20px;
  border-radius: 18px;
  background: var(--ddq-soft-bg);
}

.ddq-table {
  width: 100%;
  border-collapse: collapse;
}

.ddq-table th,
.ddq-table td {
  border-bottom: 1px solid #e5e7eb;
  padding: 10px 8px;
  text-align: left;
}

.ddq-table thead th {
  background: #f8fafc;
}

@media (max-width: 780px) {
  .ddq-card { padding: 18px; border-radius: 20px; }
  .ddq-app-header,
  .ddq-question-topbar,
  .ddq-leaderboard-hero { flex-direction: column; align-items: stretch; }
  .ddq-status-wrap { align-items: flex-start; }
  .ddq-host-options { grid-template-columns: 1fr; }
  .ddq-leader-item { grid-template-columns: 50px 1fr; }
  .ddq-leader-points { grid-column: 2; }
}