/* Qibla Quest */
#qqStage[data-state="play"], #qqStage[data-state="win"], #qqStage[data-state="over"] {
  background-image: none;
  background-color: #e0f2fe;
}
.qq-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.qq-chip {
  background: #f0f9ff; border: 2px solid #bae6fd; color: #075985;
  font-size: 13px; font-weight: 1000; padding: 7px 12px; border-radius: 999px;
}
.qq-prompt {
  text-align: center; font-size: clamp(17px, 3.4vw, 23px); font-weight: 1000;
  color: #173653; padding: 10px 14px 2px; min-height: 34px;
}
.qq-prompt .qq-target { color: #b45309; }
#qqMapWrap { line-height: 0; padding: 2px 6px 6px; }
#qqMap { width: 100%; height: auto; display: block; }
#qqMap .ctx { fill: #e9e2cf; stroke: #d5cbae; stroke-width: var(--swx, 1); }
#qqMap .country { fill: #fef3c7; stroke: #b45309; stroke-width: var(--swc, 1.4); cursor: pointer; transition: fill .25s; }
#qqMap .country:hover { fill: #fde68a; }
#qqMap .country.found1 { fill: #22c55e; }
#qqMap .country.found2 { fill: #a3e635; }
#qqMap .country.found3 { fill: #facc15; }
#qqMap .country.revealed { fill: #fca5a5; }
#qqMap .country.pulse { animation: qqPulse 0.7s ease-in-out infinite alternate; }
@keyframes qqPulse { from { fill: #fde68a; } to { fill: #f59e0b; } }
#qqMap .clabel {
  font-family: Nunito, sans-serif; font-weight: 900; fill: #14532d;
  paint-order: stroke; stroke: rgba(255,255,255,.85); stroke-width: 3px;
  pointer-events: none; text-anchor: middle;
}
#qqMap .dot { cursor: pointer; }
#qqMap .dot .hit { fill: transparent; }
#qqMap .dot .pin { fill: #fff; stroke: #b45309; stroke-width: var(--swp, 2.5); }
#qqMap .dot .core { fill: #b45309; }
#qqMap .dot.found1 .pin { fill: #22c55e; stroke: #14532d; }
#qqMap .dot.found2 .pin { fill: #a3e635; stroke: #3f6212; }
#qqMap .dot.found3 .pin { fill: #facc15; stroke: #854d0e; }
#qqMap .dot.revealed .pin { fill: #fca5a5; stroke: #991b1b; }
#qqMap .dot.pulse .pin { animation: qqPulse 0.7s ease-in-out infinite alternate; }
#qqMap .star { cursor: pointer; }
#qqMap .star .shape { fill: #f59e0b; stroke: #92400e; stroke-width: var(--sws, 1.6); }
#qqMap .star.found1 .shape { fill: #22c55e; }
#qqMap .star.found2 .shape { fill: #a3e635; }
#qqMap .star.found3 .shape { fill: #facc15; }
#qqMap .star.revealed .shape { fill: #fca5a5; }
#qqMap .star.pulse .shape { animation: qqPulse 0.7s ease-in-out infinite alternate; }
#qqMap .kaaba { pointer-events: none; }
.qq-info {
  margin: 0 12px 10px; background: #fffbeb; border: 2px solid #fde68a; border-radius: 14px;
  padding: 10px 14px; font-size: 14.5px; line-height: 1.45; color: #173653;
}
.qq-info b { color: #92400e; }
.qq-journeys { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.qq-journey-btn, .qq-modes button {
  font: inherit; font-size: 13px; font-weight: 1000; cursor: pointer;
  border: 2px solid #bae6fd; background: #f0f9ff; color: #075985;
  border-radius: 999px; padding: 8px 14px; min-height: 40px;
}
.qq-journey-btn[aria-pressed="true"] { background: #0284c7; border-color: #0284c7; color: #fff; }
.qq-modes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 10px; }
.qq-modes button { border-color: #fde68a; background: #fffbeb; color: #92400e; }
/* Qibla round */
#qqQibla { padding: 6px 14px 14px; text-align: center; }
#qqQibla .qq-city { font-size: clamp(19px, 4vw, 26px); font-weight: 1000; color: #173653; margin: 4px 0 2px; }
#qqQibla .qq-ask { font-size: 15px; font-weight: 800; color: #426373; margin: 0 0 12px; }
.qq-compass {
  display: grid; grid-template-columns: repeat(3, 76px); grid-template-rows: repeat(3, 76px);
  gap: 8px; justify-content: center; margin: 0 auto;
}
.qq-compass button {
  font: inherit; font-size: 24px; font-weight: 1000; cursor: pointer;
  border: 3px solid #bae6fd; background: #fff; border-radius: 18px; color: #075985;
  display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.05;
}
.qq-compass button small { font-size: 11px; font-weight: 1000; }
.qq-compass button:hover { background: #f0f9ff; }
.qq-compass button.right { background: #dcfce7; border-color: #22c55e; }
.qq-compass button.pulse { animation: qqBtnPulse 0.6s ease-in-out infinite alternate; border-color: #f59e0b; }
@keyframes qqBtnPulse { from { background: #fef3c7; } to { background: #fde68a; } }
.qq-compass button.wrong { background: #fee2e2; border-color: #fca5a5; opacity: .65; }
.qq-compass .qq-kaaba-cell {
  display: flex; align-items: center; justify-content: center;
  background: #fef3c7; border: 3px dashed #f59e0b; border-radius: 18px; font-size: 30px;
}
@media (max-width: 480px) {
  .qq-compass { grid-template-columns: repeat(3, 68px); grid-template-rows: repeat(3, 68px); }
}
/* v2: whole-world map with pan & zoom */
#qqMap { touch-action: none; cursor: grab; }
#qqMap:active { cursor: grabbing; }
#qqMap .ctx { cursor: pointer; }
#qqMap .ctx:hover { fill: #ded3ae; }
.qq-zoombar {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  padding: 8px 12px 0; font-size: 13px; font-weight: 900; color: #075985;
}
.qq-zoombar button {
  font: inherit; font-weight: 1000; cursor: pointer; min-width: 40px; min-height: 36px;
  border: 2px solid #7dd3fc; background: #f0f9ff; color: #075985; border-radius: 11px; padding: 4px 12px;
}
.qq-zoombar button:hover { background: #e0f2fe; }
.qq-zoomhint { color: #5b7a8c; font-weight: 800; }