/* ============================================================
   QUIZ — «Примеры вопросов»
   Подключение в index.html в <head> ПОСЛЕ css/styles.css:
     <link rel="stylesheet" href="css/quiz.css">
   Старый блок викторины из styles.css — УДАЛИТЬ (см. инструкцию).
   ============================================================ */

#as-quiz{
  --q-yellow:#F2E83B;
  --q-ink:#161616;
  --q-green:#4CAF50;
  --q-red:#E53935;
  background:#fff;
  color:var(--q-ink);
  border-radius:22px;
  padding:clamp(20px,3.5vw,40px) clamp(18px,4vw,48px) clamp(26px,4vw,44px);
}

/* ---------- Вкладки ---------- */
.as-quiz__tabs{display:flex;align-items:stretch;margin-bottom:26px;}
.as-quiz__tab{
  font:inherit;font-weight:800;font-style:italic;text-transform:uppercase;
  letter-spacing:.02em;padding:14px 26px;border:none;
}
button.as-quiz__tab{background:var(--q-yellow);color:var(--q-ink);cursor:default;}
.as-quiz__tab.as-quiz__pick{
  background:#fff;color:var(--q-ink);cursor:pointer;
  display:inline-flex;align-items:center;gap:10px;
  border:2px solid var(--q-ink);border-left:none;
}
.as-quiz__pick select{
  appearance:none;-webkit-appearance:none;
  border:none;background-color:transparent;color:inherit;
  font:inherit;cursor:pointer;padding-right:22px;max-width:220px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="12" height="8" viewBox="0 0 12 8"><path d="M1 1l5 5 5-5" fill="none" stroke="%23161616" stroke-width="2" stroke-linecap="round"/></svg>');
  background-repeat:no-repeat;background-position:right center;
}

/* ---------- Лента тайлов ---------- */
.as-qtiles-wrap{position:relative;margin-bottom:28px;}
.as-quiz__qs{
  display:flex;gap:14px;overflow-x:auto;
  padding:6px 52px 14px 6px;margin:0;
  scrollbar-width:thin;
}
.as-qtiles-next{
  position:absolute;top:6px;bottom:14px;right:0;width:44px;
  border:none;cursor:pointer;
  background:linear-gradient(to right,rgba(255,255,255,0),#fff 55%);
  font-size:46px;line-height:1;color:var(--q-ink);
  display:grid;place-items:center;
}

/* ---------- 3D-tilt тайлы (чистый CSS, без JS) ---------- */
.t3d{
  --tt-w:160px;
  --tt-h:140px;
  position:relative;
  flex:0 0 auto;
  width:var(--tt-w);
  height:var(--tt-h);
  padding:0;
  border:none;
  background:transparent;
  font:inherit;
  cursor:pointer;
}
.t3d--noselect{
  -webkit-touch-callout:none;
  -webkit-user-select:none;
  -moz-user-select:none;
  -ms-user-select:none;
  user-select:none;
}
.t3d__canvas{
  perspective:800px;
  inset:0;
  z-index:200;
  position:absolute;
  display:grid;
  grid-template-columns:1fr 1fr 1fr 1fr 1fr;
  grid-template-rows:1fr 1fr 1fr 1fr 1fr;
  grid-template-areas:
    "tr-1 tr-2 tr-3 tr-4 tr-5"
    "tr-6 tr-7 tr-8 tr-9 tr-10"
    "tr-11 tr-12 tr-13 tr-14 tr-15"
    "tr-16 tr-17 tr-18 tr-19 tr-20"
    "tr-21 tr-22 tr-23 tr-24 tr-25";
}
.t3d__tracker{
  position:absolute;
  z-index:200;
  width:100%;
  height:100%;
}
.t3d__tracker:hover{cursor:pointer;}
.t3d__card{
  position:absolute;
  inset:0;
  z-index:0;
  display:flex;
  justify-content:center;
  align-items:center;
  border-radius:20px;
  transition:700ms;
  background:linear-gradient(43deg,rgb(65,88,208) 0%,rgb(200,80,192) 46%,rgb(255,204,112) 100%);
}
.t3d__card::before{
  content:'';
  background:linear-gradient(43deg,rgb(65,88,208) 0%,rgb(200,80,192) 46%,rgb(255,204,112) 100%);
  filter:blur(2rem);
  opacity:30%;
  width:100%;
  height:100%;
  position:absolute;
  z-index:-1;
  transition:200ms;
}
.t3d:hover .t3d__card::before{transition:200ms;content:'';opacity:80%;}
.t3d__prompt{
  font-size:44px;
  font-weight:800;
  color:#fff;
  transition:opacity 300ms ease-in-out;
}
.t3d__title{
  opacity:0;
  transition:opacity 300ms ease-in-out 100ms;
  position:absolute;
  font-size:24px;
  font-weight:700;
  color:#fff;
}
.t3d__tracker:hover ~ .t3d__card .t3d__title{opacity:1;}
.t3d__tracker:hover ~ .t3d__card .t3d__prompt{opacity:0;}
.t3d__tracker:hover ~ .t3d__card{transition:300ms;filter:brightness(1.1);}
.t3d.is-active .t3d__card{background:var(--q-yellow);}
.t3d.is-active .t3d__card::before{background:var(--q-yellow);}
.t3d.is-active .t3d__prompt,
.t3d.is-active .t3d__title{color:#161616;}

/* Области трекеров */
.t3d__canvas .tr-1{grid-area:tr-1;}
.t3d__canvas .tr-2{grid-area:tr-2;}
.t3d__canvas .tr-3{grid-area:tr-3;}
.t3d__canvas .tr-4{grid-area:tr-4;}
.t3d__canvas .tr-5{grid-area:tr-5;}
.t3d__canvas .tr-6{grid-area:tr-6;}
.t3d__canvas .tr-7{grid-area:tr-7;}
.t3d__canvas .tr-8{grid-area:tr-8;}
.t3d__canvas .tr-9{grid-area:tr-9;}
.t3d__canvas .tr-10{grid-area:tr-10;}
.t3d__canvas .tr-11{grid-area:tr-11;}
.t3d__canvas .tr-12{grid-area:tr-12;}
.t3d__canvas .tr-13{grid-area:tr-13;}
.t3d__canvas .tr-14{grid-area:tr-14;}
.t3d__canvas .tr-15{grid-area:tr-15;}
.t3d__canvas .tr-16{grid-area:tr-16;}
.t3d__canvas .tr-17{grid-area:tr-17;}
.t3d__canvas .tr-18{grid-area:tr-18;}
.t3d__canvas .tr-19{grid-area:tr-19;}
.t3d__canvas .tr-20{grid-area:tr-20;}
.t3d__canvas .tr-21{grid-area:tr-21;}
.t3d__canvas .tr-22{grid-area:tr-22;}
.t3d__canvas .tr-23{grid-area:tr-23;}
.t3d__canvas .tr-24{grid-area:tr-24;}
.t3d__canvas .tr-25{grid-area:tr-25;}

/* Наклон карточки по зонам наведения */
.t3d__canvas .tr-1:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(-10deg) rotateZ(0deg);}
.t3d__canvas .tr-2:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(-5deg) rotateZ(0deg);}
.t3d__canvas .tr-3:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(0deg) rotateZ(0deg);}
.t3d__canvas .tr-4:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(5deg) rotateZ(0deg);}
.t3d__canvas .tr-5:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(20deg) rotateY(10deg) rotateZ(0deg);}
.t3d__canvas .tr-6:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(-10deg) rotateZ(0deg);}
.t3d__canvas .tr-7:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(-5deg) rotateZ(0deg);}
.t3d__canvas .tr-8:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(0deg) rotateZ(0deg);}
.t3d__canvas .tr-9:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(5deg) rotateZ(0deg);}
.t3d__canvas .tr-10:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(10deg) rotateY(10deg) rotateZ(0deg);}
.t3d__canvas .tr-11:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(0deg) rotateY(-10deg) rotateZ(0deg);}
.t3d__canvas .tr-12:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(0deg) rotateY(-5deg) rotateZ(0deg);}
.t3d__canvas .tr-13:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
.t3d__canvas .tr-14:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(0deg) rotateY(5deg) rotateZ(0deg);}
.t3d__canvas .tr-15:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(0deg) rotateY(10deg) rotateZ(0deg);}
.t3d__canvas .tr-16:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(-10deg) rotateZ(0deg);}
.t3d__canvas .tr-17:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(-5deg) rotateZ(0deg);}
.t3d__canvas .tr-18:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(0deg) rotateZ(0deg);}
.t3d__canvas .tr-19:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(5deg) rotateZ(0deg);}
.t3d__canvas .tr-20:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-10deg) rotateY(10deg) rotateZ(0deg);}
.t3d__canvas .tr-21:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(-10deg) rotateZ(0deg);}
.t3d__canvas .tr-22:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(-5deg) rotateZ(0deg);}
.t3d__canvas .tr-23:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(0deg) rotateZ(0deg);}
.t3d__canvas .tr-24:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(5deg) rotateZ(0deg);}
.t3d__canvas .tr-25:hover ~ .t3d__card{transition:125ms ease-in-out;transform:rotateX(-20deg) rotateY(10deg) rotateZ(0deg);}

/* ---------- Карточка вопроса ---------- */
.as-quiz__tag{
  display:inline-block;background:var(--q-yellow);color:var(--q-ink);
  font-weight:600;font-size:14px;padding:7px 14px;margin-bottom:16px;
}
.as-quiz__text{
  font-size:clamp(17px,2.2vw,21px);font-weight:800;text-transform:uppercase;
  line-height:1.4;margin:0 0 20px;max-width:660px;
}
.as-quiz__answers{display:grid;gap:12px;max-width:540px;margin:0 0 6px;padding:0;}
.as-quiz__a{
  background:#fff;color:var(--q-ink);
  border:2px solid var(--q-ink);
  border-radius:10px 999px 999px 10px;
  padding:12px 22px;font:inherit;font-size:16px;text-align:left;cursor:pointer;
  transition:background .18s,border-color .18s,color .18s;
}
.as-quiz__a:hover{border-color:#000;box-shadow:0 2px 0 #000;}
.as-quiz__a.is-selected{background:var(--q-yellow);border-color:var(--q-yellow);}
.as-quiz__a.is-correct{background:var(--q-green);border-color:var(--q-green);color:#fff;font-weight:700;}
.as-quiz__a.is-wrong{background:var(--q-red);border-color:var(--q-red);color:#fff;}
.as-quiz__a.is-blurred{filter:blur(7px);pointer-events:none;user-select:none;-webkit-user-select:none;}
.as-quiz__show{
  margin-top:20px;background:var(--q-yellow);color:var(--q-ink);border:none;cursor:pointer;
  font:inherit;font-weight:800;font-style:italic;text-transform:uppercase;letter-spacing:.03em;
  padding:15px 38px;font-size:15px;
}
.as-quiz__show:disabled{background:#d9d9d9;color:#fff;cursor:default;}
.as-quiz__show:not(:disabled):hover{filter:brightness(.96);}

/* ---------- Тур «Визуальный»: вопрос + картинка ---------- */
.as-quiz__media{margin:0;}
.as-quiz__media img{width:100%;height:auto;display:block;border-radius:14px;}
.as-quiz__ph{
  border:2px dashed #c9c9c9;border-radius:14px;min-height:230px;
  display:grid;place-items:center;color:#a8a8a8;font-size:14px;
  padding:20px;text-align:center;
}
.as-quiz__q.is-visual{
  display:grid;gap:4px 32px;align-items:start;
  grid-template-columns:1.05fr .95fr;
  grid-template-areas:
    "tag tag"
    "text media"
    "answers media"
    "show media";
}
.as-quiz__q.is-visual .as-quiz__tag{grid-area:tag;justify-self:start;}
.as-quiz__q.is-visual .as-quiz__text{grid-area:text;}
.as-quiz__q.is-visual .as-quiz__answers{grid-area:answers;}
.as-quiz__q.is-visual .as-quiz__show{grid-area:show;justify-self:start;}
.as-quiz__q.is-visual .as-quiz__media{grid-area:media;}
@media(max-width:720px){
  .as-quiz__q.is-visual{
    grid-template-columns:1fr;
    grid-template-areas:"tag" "text" "media" "answers" "show";
  }
}

/* ---------- Фокус для клавиатуры / reduced motion ---------- */
.t3d:focus-visible,
.as-quiz__a:focus-visible,
.as-qtiles-next:focus-visible,
.as-quiz__show:focus-visible,
.as-quiz__pick select:focus-visible{
  outline:3px solid var(--q-ink);outline-offset:2px;
}
@media (prefers-reduced-motion:reduce){
  .t3d__card,.t3d__prompt,.t3d__title{transition:none;}
}