/* SOMED Skin Quiz game */
:root { --qz-skin: #f3dccb; --qz-skin2: #e9c8b3; --qz-hair: #3b2a22; --qz-line: #8a6a58; --qz-lip: #c9867c; }
:root[data-theme="dark"] { --qz-skin: #d9bba6; --qz-skin2: #c6a58f; --qz-hair: #1b1411; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --qz-skin: #d9bba6; --qz-skin2: #c6a58f; --qz-hair: #1b1411; } }

.quiz-sec { padding-top: 24px; }
.quiz-sec .sec-head { margin-bottom: 18px; }
.qz { padding: 32px; max-width: 980px; margin-inline: auto; min-height: 420px; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 100% 0%, var(--mint) 0%, var(--surface) 55%); }
@media (max-width: 600px) { .qz { padding: 22px 16px; } }
.qz-h { font-family: var(--font-display); font-size: clamp(22px, 3vw, 30px); line-height: 1.3; margin: 0 0 8px; outline: none; }
.qz-p { color: var(--text-soft); margin: 0 0 18px; outline: none; }
.qz-mini { font-size: 12px; color: var(--text-mute); margin: 8px 0 0; }
.qz-lbl { font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin: 18px 0 6px; }
.qz-link { border: 0; background: none; color: var(--text-soft); font-size: 14px; padding: 8px 0; text-decoration: underline; text-underline-offset: 3px; }
.qz-link:hover { color: var(--text); }
.qz-nav { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: 18px; flex-wrap: wrap; }

/* Progress */
.qz-top { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.qz-level { font-size: 12px; font-weight: 700; letter-spacing: .12em; color: var(--accent); white-space: nowrap; }
.qz-prog { flex: 1; height: 8px; border-radius: 8px; background: var(--line); overflow: hidden; }
.qz-prog span { display: block; height: 100%; border-radius: 8px; background: linear-gradient(90deg, var(--sage), var(--accent)); transition: width .45s cubic-bezier(.2,.8,.2,1); }

/* Intro */
.qz-intro { display: grid; grid-template-columns: 260px 1fr; gap: 36px; align-items: center; }
.qz-intro-visual { position: relative; max-width: 260px; width: 100%; margin-inline: auto; }
.qz-float { position: absolute; font-size: 28px; animation: qzbob 3.2s ease-in-out infinite; filter: drop-shadow(0 6px 10px rgba(0,0,0,.15)); }
.qz-float.f1 { left: -6px; top: 18%; } .qz-float.f2 { right: -4px; top: 42%; animation-delay: -1s; } .qz-float.f3 { left: 12%; bottom: -6px; animation-delay: -2s; }
@keyframes qzbob { 50% { transform: translateY(-10px) rotate(-6deg); } }
.qz-go { font-size: 17px; min-height: 56px; padding: 0 30px; }
.qz-perks { font-size: 13px; color: var(--text-mute); margin: 14px 0 0; }
@media (max-width: 700px) { .qz-intro { grid-template-columns: 1fr; text-align: center; gap: 22px; } .qz-intro-visual { max-width: 200px; } .qz-go { width: 100%; } }

/* Face frame */
.qz-frame { position: relative; aspect-ratio: 4 / 5; border-radius: 26px; overflow: hidden; background: linear-gradient(160deg, var(--bg-alt), var(--mint)); border: 1px solid var(--line); box-shadow: var(--shadow-sm); }
.qz-face { position: absolute; inset: 6% 8% 0; width: 84%; height: 94%; }
.qz-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scaleX(-1); }
.qz-guide { position: absolute; left: 14%; right: 14%; top: 8%; bottom: 8%; border-radius: 50% / 45%; border: 2px dashed rgba(255,255,255,.75); pointer-events: none; }
.qz-frame:not(.photo) .qz-guide { display: none; }
.qz-zone {
  position: absolute; transform: translate(-50%, -50%); width: 21%; aspect-ratio: 1; border-radius: 50%;
  border: 2px dashed rgba(255,255,255,.9); background: rgba(31, 77, 58, .22); display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0;
  padding: 2px; transition: transform .15s, background .2s; color: #fff;
}
.qz-zone:hover { background: rgba(31, 77, 58, .35); }
.qz-zone:active { transform: translate(-50%, -50%) scale(.92); }
.qz-zone.has { border-style: solid; background: rgba(255,255,255,.55); }
.qz-zone.static { width: 19%; pointer-events: none; }
.qz-plus { font-size: 20px; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,.35); }
.qz-stk { font-size: clamp(18px, 4vw, 26px); line-height: 1.05; animation: qzpop .3s cubic-bezier(.3,1.6,.5,1); }
@keyframes qzpop { from { transform: scale(0) rotate(-30deg); } }

/* Photo step */
.qz-photo-step { display: grid; grid-template-columns: minmax(0, 300px) 1fr; gap: 28px; align-items: center; }
.qz-col { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.qz-file { position: relative; overflow: hidden; }
.qz-file input { position: absolute; inset: 0; opacity: 0; cursor: pointer; font-size: 0; }
.qz-file:focus-within { outline: 2px solid var(--accent); outline-offset: 3px; }
@media (max-width: 700px) { .qz-photo-step { grid-template-columns: 1fr; } .qz-photo-step .qz-frame { max-width: 300px; width: 100%; margin-inline: auto; } .qz-col { align-items: stretch; } }

/* Map step */
.qz-palette { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.qz-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; transition: transform .15s, border-color .2s; }
.qz-chip span { font-size: 18px; }
.qz-chip[aria-pressed="true"] { border-color: var(--accent); background: var(--green); color: var(--bg); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.qz-map .qz-frame { max-width: 340px; margin-inline: auto; }
.qz-count { text-align: center; font-size: 14px; color: var(--text-soft); margin: 12px 0 0; }

/* Questions */
.qz-q { margin-bottom: 18px; }
.qz-opts { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.qz-opt { text-align: left; display: flex; align-items: center; gap: 12px; padding: 16px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 500; min-height: 64px; transition: transform .15s, border-color .2s, background .2s; }
.qz-opt:hover { transform: translateY(-2px); border-color: var(--sage); }
.qz-opt[aria-checked="true"] { border-color: var(--accent); background: color-mix(in srgb, var(--mint) 70%, var(--surface)); transform: scale(1.02); }
.qz-oi { font-size: 24px; width: 40px; height: 40px; border-radius: 12px; background: var(--bg-alt); display: grid; place-items: center; flex: none; }

/* Analyzing */
.qz-analyzing { text-align: center; padding: 10px 0; }
.qz-scan { position: relative; max-width: 240px; margin: 0 auto 18px; }
.qz-beam { position: absolute; left: 0; right: 0; top: 0; height: 22%; border-radius: 26px; background: linear-gradient(180deg, transparent, rgba(143, 209, 170, .7), transparent); animation: qzscan 1.1s ease-in-out infinite alternate; pointer-events: none; }
@keyframes qzscan { to { top: 78%; } }

/* Result */
.qz-res-grid { display: grid; grid-template-columns: 260px 1fr; gap: 32px; margin-top: 14px; }
.qz-res-left .qz-frame { max-width: 260px; }
.qz-score { position: relative; width: 140px; height: 140px; margin: -54px auto 0; background: var(--surface); border-radius: 50%; box-shadow: var(--shadow); }
.qz-score svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.qz-ring-bg { fill: none; stroke: var(--line); stroke-width: 9; }
.qz-ring { fill: none; stroke: var(--accent); stroke-width: 9; stroke-linecap: round; transition: stroke-dashoffset 1.2s cubic-bezier(.2,.8,.2,1); }
.qz-score-num { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; line-height: 1; }
.qz-score-num b { font-family: var(--font-display); font-weight: 400; font-size: 40px; color: var(--accent); }
.qz-score-num small { color: var(--text-mute); font-size: 12px; margin-top: 4px; }
.qz-score-l { text-align: center; font-size: 14px; color: var(--text-soft); margin: 12px 0 0; }
.qz-res-left .qz-mini { text-align: center; }
.qz-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.qz-badge { padding: 16px; border-radius: 16px; background: var(--bg-alt); border: 1px solid var(--line); }
.qz-badge small { display: block; font-size: 12px; color: var(--text-mute); }
.qz-badge b { font-size: 17px; }
.qz-tips { margin: 0; padding-left: 1.1em; color: var(--text-soft); }
.qz-tips li { margin: 6px 0; }
.qz-cta { margin-top: 26px; padding: 22px; border-radius: 20px; background: var(--green-deep); color: #eef5f0; display: flex; gap: 18px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.qz-cta .qz-p { color: rgba(238,245,240,.8); }
:root[data-theme="dark"] .qz-cta { background: #1a3a2c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .qz-cta { background: #1a3a2c; } }
.qz-wa { min-height: 54px; font-size: 16px; }
@media (max-width: 760px) {
  .qz-res-grid { grid-template-columns: 1fr; }
  .qz-res-left .qz-frame { max-width: 220px; margin-inline: auto; }
  .qz-badges { grid-template-columns: 1fr; }
  .qz-wa { width: 100%; white-space: normal; text-align: center; }
}