/* Kuvavisa — "Tunnistatko nähtävyyden?" (js/quiz.js) */
.qz-overlay {
  position: fixed; inset: 0; z-index: 1500;
  display: grid; place-items: center; padding: 20px;
  background: rgba(29, 42, 51, .62);
  backdrop-filter: blur(4px) grayscale(.6); -webkit-backdrop-filter: blur(4px) grayscale(.6);
  animation: qz-fade .22s ease-out both;
}
.qz-overlay.qz-leaving { animation: qz-fade .2s ease-in reverse both; }
.qz-overlay.qz-leaving .qz { animation: qz-pop .2s ease-in reverse both; }

.qz {
  position: relative; width: min(980px, 100%); max-height: calc(100dvh - 40px); overflow: auto;
  display: flex; flex-direction: column;
  background: var(--paper); color: var(--ink);
  border: 2px solid var(--ink); border-radius: var(--r, 14px); box-shadow: 6px 6px 0 var(--ink);
  padding: 20px 24px 24px; outline: none;
  background-image: radial-gradient(rgba(29, 42, 51, .045) 1px, transparent 1px);
  background-size: 14px 14px;
  animation: qz-pop .32s cubic-bezier(.2, 1.3, .4, 1) both;
  overscroll-behavior: contain;
}

/* --- Otsikko --- */
.qz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.qz-kicker {
  display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase;
  color: var(--virtual); border: 1.5px dashed currentColor; border-radius: 99px; padding: 3px 10px;
}
.qz-title {
  margin: 8px 0 0; font-family: var(--display); font-weight: 800; font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.05; letter-spacing: -.02em; font-variation-settings: 'opsz' 144;
}
.qz-close {
  flex: none; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: 2px 2px 0 var(--ink);
  transition: transform .12s, background .15s, box-shadow .12s;
}
.qz-close:hover { background: var(--paper-2); }
.qz-close:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); }
.qz-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }

/* --- Edistymispallot --- */
.qz-dots { display: flex; gap: 8px; list-style: none; margin: 14px 0 16px; padding: 0; }
.qz-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--ink); background: transparent;
  transition: background .2s, transform .2s, width .25s;
}
.qz-dot.now { width: 30px; border-radius: 99px; background: var(--virtual); }
.qz-dot.ok { background: var(--real); }
.qz-dot.bad { background: #c8443a; }

/* --- Kierros --- */
.qz-round {
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 24px; align-items: start;
  grid-template-areas: "photo options" "photo feedback";
  grid-template-rows: auto 1fr;
}
.qz-enter { animation: qz-in .35s ease-out both; }

.qz-photo {
  grid-area: photo; position: relative; margin: 0; padding: 10px 10px 38px;
  background: #fffdf8; border: 2px solid var(--ink); border-radius: 6px; box-shadow: 4px 4px 0 var(--ink);
  transform: rotate(-1.2deg); transition: transform .3s;
}
.qz-photo img {
  display: block; width: 100%; aspect-ratio: 4 / 3; max-height: 56vh; object-fit: cover;
  background: var(--paper-2); border-radius: 2px; filter: saturate(.92) contrast(1.02);
  transition: opacity .35s, filter .4s;
}
.qz-photo.is-loading img {
  opacity: 0;
}
.qz-photo.is-loading::after {
  content: ''; position: absolute; inset: 10px 10px 38px; border-radius: 2px;
  background: linear-gradient(100deg, var(--paper-2) 30%, #f7f1e6 50%, var(--paper-2) 70%);
  background-size: 200% 100%; animation: qz-shimmer 1.2s linear infinite;
}
.qz-photo.is-broken img { opacity: .15; }
.qz-fallback {
  position: absolute; inset: 10px 10px 38px; display: grid; place-items: center; padding: 20px; text-align: center;
  font-family: var(--display); font-size: 18px; font-style: italic; color: var(--muted);
}
.qz-photo.was-ok { transform: rotate(0deg); }
.qz-photo.was-bad { animation: qz-shake .4s ease-in-out; }
.qz-stamp {
  position: absolute; right: -14px; bottom: -14px; width: 68px; height: 68px; border-radius: 50%;
  display: flex; align-items: baseline; justify-content: center; padding-top: 18px;
  color: var(--virtual); background: rgba(255, 253, 248, .92);
  border: 3px solid currentColor; outline: 1.5px dashed currentColor; outline-offset: -8px;
  transform: rotate(12deg); font-family: var(--display);
}
.qz-stamp b { font-size: 26px; font-weight: 800; line-height: 1; }
.qz-stamp i { font-style: normal; font-weight: 600; font-size: 14px; }

/* --- Vastausvaihtoehdot --- */
.qz-options { grid-area: options; display: grid; gap: 10px; align-content: start; }
.qz-opt {
  position: relative; display: grid; grid-template-columns: 30px 1fr 22px; align-items: center; gap: 12px;
  width: 100%; min-height: 58px; padding: 10px 14px; text-align: left;
  background: #fffdf8; border: 2px solid var(--ink); border-radius: 12px; box-shadow: 3px 3px 0 var(--ink);
  font-weight: 700; font-size: 16px; line-height: 1.25;
  transition: transform .12s, box-shadow .12s, background .18s, color .18s, opacity .2s;
}
.qz-opt:not(:disabled):hover { background: #fff; transform: translate(-1px, -1px); box-shadow: 4px 4px 0 var(--ink); }
.qz-opt:not(:disabled):active { transform: translate(2px, 2px); box-shadow: 1px 1px 0 var(--ink); }
.qz-opt:focus-visible, .qz-close:focus-visible, .qz .btn:focus-visible {
  outline: 3px solid var(--virtual); outline-offset: 3px;
}
.qz-opt:disabled { cursor: default; }
.qz-opt kbd {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 8px;
  border: 1.5px solid var(--line); background: var(--paper); font: 800 14px var(--body); color: var(--muted);
}
.qz-opt span { overflow-wrap: anywhere; }
.qz-mark { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.qz-opt.is-correct { background: var(--real); color: #fff; animation: qz-bump .35s ease-out; }
.qz-opt.is-correct kbd, .qz-opt.is-wrong kbd { background: rgba(255, 255, 255, .2); border-color: rgba(255, 255, 255, .5); color: #fff; }
.qz-opt.is-wrong { background: #c8443a; color: #fff; }
.qz-opt.is-dim { opacity: .45; box-shadow: 1px 1px 0 var(--ink); }

/* --- Palaute --- */
.qz-feedback {
  grid-area: feedback; position: relative; padding: 14px 16px 16px; border-radius: 12px;
  border: 2px dashed var(--line); background: rgba(255, 253, 248, .7);
  animation: qz-in .3s ease-out both;
}
.qz-feedback.ok { border-color: var(--real); }
.qz-feedback.bad { border-color: #c8443a; }
.qz-verdict { display: grid; gap: 2px; }
.qz-verdict strong { font-family: var(--display); font-size: 24px; font-weight: 800; line-height: 1.1; }
.qz-feedback.ok .qz-verdict strong { color: var(--real); }
.qz-feedback.bad .qz-verdict strong { color: #c8443a; }
.qz-verdict span { font-size: 14px; color: var(--ink-2, var(--ink)); }
.qz-verdict em { font-style: normal; font-weight: 800; }
.qz-snippet {
  margin: 10px 0 0; font-size: 14px; line-height: 1.55; color: var(--ink-2, var(--ink));
  font-family: var(--display); font-style: italic;
}
.qz-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; flex-wrap: wrap; }
.qz-actions .btn { font-size: 15px; padding: 10px 18px; }

/* --- Lopputulos --- */
.qz-end { display: grid; justify-items: center; text-align: center; padding: 8px 0 0; }
.qz-score { margin: 4px 0 14px; }
.qz-score-ring {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 170px; height: 170px; border-radius: 50%; color: var(--virtual);
  border: 4px solid currentColor; outline: 2px dashed currentColor; outline-offset: -14px;
  transform: rotate(-8deg); animation: qz-stamp .5s cubic-bezier(.2, 1.4, .4, 1) .1s both;
}
.qz-score-ring b { font-family: var(--display); font-size: 58px; font-weight: 800; line-height: 1; }
.qz-score-ring b i { font-style: normal; font-size: 26px; font-weight: 600; }
.qz-score-ring small {
  font-size: 10px; font-weight: 800; letter-spacing: .18em; text-transform: uppercase;
  max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.qz-end-title { margin: 0; font-family: var(--display); font-size: 30px; font-weight: 800; letter-spacing: -.01em; }
.qz-end-msg { margin: 6px 0 0; max-width: 46ch; color: var(--ink-2, var(--ink)); line-height: 1.5; }
.qz-recap {
  list-style: none; margin: 20px 0 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
}
.qz-recap li {
  display: grid; gap: 6px; width: 118px; padding: 6px 6px 8px; background: #fffdf8;
  border: 2px solid var(--ink); border-radius: 6px; box-shadow: 2px 2px 0 var(--ink);
  font-size: 12px; font-weight: 700; line-height: 1.2; position: relative;
}
.qz-recap li:nth-child(odd) { transform: rotate(-1.5deg); }
.qz-recap li:nth-child(even) { transform: rotate(1.5deg); }
.qz-recap img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 2px; background: var(--paper-2); }
.qz-recap li::after {
  content: ''; position: absolute; top: -8px; right: -8px; width: 20px; height: 20px; border-radius: 50%;
  border: 2px solid var(--ink); background: var(--real) no-repeat center / 12px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E");
}
.qz-recap li.bad::after {
  background-color: #c8443a;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='4' stroke-linecap='round'%3E%3Cpath d='M7 7l10 10M17 7L7 17'/%3E%3C/svg%3E");
}
.qz-recap li.bad img { filter: grayscale(1); opacity: .7; }
.qz-end-actions { justify-content: center; margin-top: 22px; }

.qz-sr, .qz-live {
  position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --- Animaatiot --- */
@keyframes qz-fade { from { opacity: 0; } }
@keyframes qz-pop { from { opacity: 0; transform: translateY(18px) scale(.97) rotate(-.6deg); } }
@keyframes qz-in { from { opacity: 0; transform: translateY(10px); } }
@keyframes qz-shimmer { to { background-position: -200% 0; } }
@keyframes qz-bump { 40% { transform: scale(1.03); } }
@keyframes qz-shake {
  0%, 100% { transform: rotate(-1.2deg); }
  25% { transform: rotate(-1.2deg) translateX(-6px); }
  75% { transform: rotate(-1.2deg) translateX(6px); }
}
@keyframes qz-stamp { from { opacity: 0; transform: rotate(-30deg) scale(1.6); } }

/* --- Mobiili --- */
@media (max-width: 720px) {
  .qz-overlay { padding: 0; place-items: end stretch; }
  .qz {
    width: 100%; max-height: 100dvh; height: 100dvh; border-radius: 0; border-width: 0;
    box-shadow: none; padding: 14px 16px calc(20px + env(safe-area-inset-bottom));
  }
  .qz-title { font-size: 24px; }
  .qz-dots { margin: 10px 0 12px; }
  .qz-round { grid-template-columns: 1fr; grid-template-areas: "photo" "options" "feedback"; grid-template-rows: auto; gap: 16px; }
  .qz-photo { padding: 7px 7px 26px; transform: rotate(-.8deg); }
  .qz-photo img { aspect-ratio: 4 / 3; max-height: 38vh; }
  .qz-photo.is-loading::after, .qz-fallback { inset: 7px 7px 26px; }
  .qz-stamp { width: 54px; height: 54px; padding-top: 14px; right: -6px; bottom: -10px; }
  .qz-stamp b { font-size: 20px; }
  .qz-opt { min-height: 52px; font-size: 15px; padding: 8px 12px; gap: 10px; grid-template-columns: 26px 1fr 20px; }
  .qz-opt kbd { width: 26px; height: 26px; font-size: 12px; }
  .qz-actions .btn { flex: 1; justify-content: center; }
  .qz-score-ring { width: 140px; height: 140px; }
  .qz-score-ring b { font-size: 46px; }
  .qz-recap li { width: 92px; font-size: 11px; }
}
@media (hover: none) { .qz-opt kbd { display: none; } .qz-opt { grid-template-columns: 1fr 22px; } }

@media (prefers-reduced-motion: reduce) {
  .qz-overlay, .qz, .qz *, .qz-overlay.qz-leaving { animation: none !important; transition: none !important; }
}