.game-page[data-engine="picturelookingcabinet"] .game-shell {
  background:
    linear-gradient(90deg, rgba(17, 7, 22, .98), rgba(25, 10, 31, .82) 50%, rgba(13, 6, 19, .98)),
    url("/assets/covers/picture-quiz.webp") center 47% / cover;
  border-color: #a98443;
  box-shadow: 0 24px 60px rgba(5, 1, 10, .68), inset 0 0 0 1px rgba(218, 179, 93, .25);
}

.pq-game {
  --pq-aubergine: #1b0d25;
  --pq-indigo: #0b1327;
  --pq-paper: #f3e4bd;
  --pq-ink: #231c1b;
  --pq-brass: #c49a4b;
  --pq-mint: #62d6c8;
  --pq-coral: #f36f52;
  --pq-cyan: #55dcef;
  width: min(980px, 100%);
  margin: 0 auto;
  color: #f8edcf;
  font-family: Georgia, "Times New Roman", serif;
}

.pq-title {
  margin: 0 0 13px;
  color: #f8e9c2;
  font-size: clamp(2.05rem, 5.5vw, 4.45rem);
  font-weight: 800;
  letter-spacing: .045em;
  line-height: .92;
  text-align: center;
  text-shadow: 0 3px 0 #4a3018, 0 8px 25px rgba(0, 0, 0, .78);
  text-transform: uppercase;
}

.pq-cabinet {
  position: relative;
  padding: 14px;
  border: 2px solid #9b7537;
  border-radius: 12px;
  background:
    repeating-linear-gradient(90deg, transparent 0 96px, rgba(255,255,255,.015) 96px 97px),
    linear-gradient(145deg, rgba(39, 18, 48, .98), rgba(11, 9, 23, .98));
  box-shadow: inset 0 0 0 3px #09050d, inset 0 0 0 5px rgba(196, 154, 75, .17), 0 18px 42px rgba(0,0,0,.58);
}

.pq-cabinet::before {
  position: absolute;
  z-index: 2;
  inset: 4px 8px auto;
  height: 4px;
  border-radius: 4px;
  background: linear-gradient(90deg, var(--pq-coral), var(--pq-brass) calc(var(--time-ratio, 1) * 100%), #33283c 0);
  box-shadow: 0 0 12px rgba(196, 154, 75, .45);
  content: "";
  transition: background .2s linear;
}

.pq-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 13px;
  overflow: hidden;
  border: 2px solid #6d512b;
  border-radius: 8px;
  background: #080710;
  box-shadow: inset 0 0 0 2px #2e2139, 0 5px 12px rgba(0,0,0,.42);
}

.pq-summary > span {
  min-width: 0;
  padding: 8px 7px 7px;
  border-right: 1px solid #5e462a;
  text-align: center;
}

.pq-summary > span:last-child { border-right: 0; }
.pq-summary small,
.pq-summary strong { display: block; }

.pq-summary small {
  color: var(--pq-brass);
  font: 800 .61rem/1 Arial, sans-serif;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.pq-summary svg,
.pq-actions svg {
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.65;
}

.pq-summary svg { margin-right: 4px; vertical-align: -2px; }

.pq-summary strong {
  margin-top: 3px;
  color: #f8edcf;
  font: 800 clamp(.95rem, 2vw, 1.38rem)/1 Arial, sans-serif;
  font-variant-numeric: tabular-nums;
}

.pq-summary > span:nth-child(2) strong { color: var(--pq-mint); }
.pq-summary > span:nth-child(3) strong { color: #f5ce73; }
.pq-summary > span:nth-child(4) strong { color: var(--pq-coral); }
.pq-summary > span:nth-child(5) strong { color: var(--pq-cyan); }

.pq-viewer {
  position: relative;
  display: grid;
  min-height: 270px;
  padding: 35px 118px 23px 26px;
  border: 5px solid #61471f;
  border-radius: 27px;
  background: linear-gradient(145deg, #b78b40, #5d3e1a 28%, #d0a95e 50%, #62431e 75%, #a77b35);
  box-shadow: inset 0 0 0 3px #130b12, inset 0 0 0 6px #8d6930, 0 8px 18px rgba(0,0,0,.58);
  place-items: center;
}

.pq-viewer::after {
  position: absolute;
  inset: 16px 102px 16px 17px;
  z-index: 0;
  border: 2px solid #9a7133;
  border-radius: 18px;
  box-shadow: inset 0 0 0 3px #2a1712, inset 0 0 24px rgba(88,50,19,.34);
  content: "";
  pointer-events: none;
}

.pq-clue {
  position: absolute;
  z-index: 3;
  top: 23px;
  left: 34px;
  padding: 5px 9px;
  border: 1px solid rgba(99, 67, 25, .5);
  border-radius: 3px;
  background: rgba(243, 228, 189, .9);
  color: #684922;
  font: 900 .65rem/1 Arial, sans-serif;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.pq-picture {
  position: relative;
  z-index: 1;
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 204px;
  border-radius: 14px;
  background:
    repeating-linear-gradient(0deg, rgba(75, 49, 21, .03) 0 1px, transparent 1px 4px),
    radial-gradient(circle at 50% 42%, #fff5d7, var(--pq-paper));
  overflow: hidden;
  place-items: center;
}

.pq-art {
  width: min(390px, 78%);
  max-height: 205px;
  color: #493725;
  filter: drop-shadow(0 4px 3px rgba(74,48,18,.18));
  transition: filter .2s ease, transform .2s ease;
}

.pq-art .pq-line,
.pq-art .pq-ground,
.pq-art .pq-ray {
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 4;
}

.pq-art .pq-ground { stroke: #4d8b81; stroke-width: 3; }
.pq-art .pq-ray { stroke: #bf7d43; stroke-width: 2.5; }
.pq-art .pq-fill-a { fill: #d67656; stroke: currentColor; stroke-width: 4; }
.pq-art .pq-fill-b { fill: #5cb7ab; stroke: currentColor; stroke-width: 4; }
.pq-art .pq-sun { fill: #e8bd58; stroke: currentColor; stroke-width: 4; }
.pq-art .pq-cut { fill: var(--pq-paper); stroke: currentColor; stroke-width: 4; }
.pq-art .pq-stroke-a { fill: none; stroke: #4b927f; stroke-linecap: round; stroke-linejoin: round; stroke-width: 20; }

.pq-game[data-vision="medium"]:not(.lens-active) .pq-art {
  filter: sepia(.25) saturate(.35) contrast(1.15) drop-shadow(0 4px 3px rgba(74,48,18,.18));
}

.pq-game[data-vision="hard"]:not(.lens-active) .pq-art {
  filter: grayscale(1) contrast(1.8) brightness(.78) drop-shadow(0 4px 2px rgba(74,48,18,.23));
  transform: scale(1.08);
}

.pq-slides {
  position: absolute;
  z-index: 3;
  top: 50%;
  right: 17px;
  display: grid;
  gap: 8px;
  transform: translateY(-50%);
}

.pq-slides small {
  color: #2b1828;
  font: 900 .49rem/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-align: center;
  text-transform: uppercase;
}

.pq-slides span {
  position: relative;
  display: grid;
  width: 68px;
  height: 48px;
  border: 3px solid #5d421e;
  border-radius: 6px;
  background: rgba(27,13,37,.7);
  box-shadow: inset 0 0 0 3px rgba(204,171,91,.18), 0 4px 5px rgba(0,0,0,.35);
  opacity: .3;
  place-items: center;
  transform: rotate(-2deg);
}

.pq-slides span:nth-of-type(2) { transform: rotate(2deg); }
.pq-slides span i { width: 42px; height: 26px; border: 2px solid #5f837d; background: rgba(98,214,200,.09); }
.pq-slides span.active { border-color: #d2a857; box-shadow: inset 0 0 0 3px #311d32, 0 0 13px rgba(85,220,239,.45); opacity: 1; }
.pq-slides span.active i { border-color: var(--pq-cyan); background: rgba(85,220,239,.24); box-shadow: 0 0 8px rgba(85,220,239,.5); }

.pq-choices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.pq-choice {
  display: grid;
  grid-template-columns: 43px 1fr auto;
  min-height: 68px;
  align-items: center;
  padding: 8px 12px;
  border: 2px solid #9f7737;
  border-radius: 7px;
  background: linear-gradient(180deg, #35213b, #160e20);
  box-shadow: inset 0 0 0 3px #09060d, inset 0 0 0 5px rgba(199,159,80,.12), 0 5px 0 #4d3219, 0 8px 15px rgba(0,0,0,.42);
  color: #f8e9c5;
  cursor: pointer;
  font: inherit;
  text-align: left;
  transition: transform .12s ease, filter .12s ease, border-color .12s ease;
}

.pq-choice:hover:not(:disabled) { border-color: #e2bd6c; filter: brightness(1.12); transform: translateY(-2px); }
.pq-choice:focus-visible { outline: 4px solid var(--pq-cyan); outline-offset: 3px; }

.pq-choice > span {
  display: grid;
  width: 35px;
  height: 42px;
  border: 2px solid #b58a43;
  border-radius: 50% 50% 45% 45%;
  background: #efe0b8;
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.38), 0 3px 0 #67431d;
  color: #b84e39;
  font: 900 1.2rem/1 Arial, sans-serif;
  place-items: center;
}

.pq-choice strong { padding: 0 10px; font-size: clamp(1rem, 2.2vw, 1.3rem); line-height: 1.12; }
.pq-choice i { color: #8e8092; font: 900 .55rem/1 Arial, sans-serif; font-style: normal; letter-spacing: .1em; text-transform: uppercase; }
.pq-choice.correct { border-color: #72e3c1; box-shadow: inset 0 0 0 3px #07120f, inset 0 0 22px rgba(98,214,200,.2), 0 0 18px rgba(98,214,200,.4); }
.pq-choice.correct strong,
.pq-choice.correct i { color: #8ff0d8; }
.pq-choice.wrong { border-color: #ff8065; background: linear-gradient(180deg, #4c1e29, #1b0d17); animation: pq-shake .26s linear; }
.pq-choice.wrong i { color: #ff9b83; }
.pq-choice.rejected { border-color: #4c3f50; box-shadow: inset 0 0 0 3px #09070c; filter: grayscale(.7); opacity: .38; transform: none; }

.pq-progress {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  padding: 13px 24px 3px;
}

.pq-progress span {
  position: relative;
  display: grid;
  width: 30px;
  min-height: 30px;
  border: 2px solid #6f5739;
  border-radius: 50%;
  background: #0d0912;
  color: #8f8194;
  font: 900 .72rem/1 Arial, sans-serif;
  place-self: center;
  place-items: center;
}

.pq-progress span:not(:last-child)::after {
  position: absolute;
  top: 50%;
  left: 30px;
  width: calc((min(980px, 100vw) - 168px) / 5);
  height: 2px;
  background: #6f5739;
  content: "";
}

.pq-progress span.active { border-color: var(--pq-cyan); color: var(--pq-cyan); box-shadow: 0 0 11px rgba(85,220,239,.55); }
.pq-progress span.done { border-color: var(--pq-mint); background: #245e54; color: #e0fff8; }
.pq-progress span.done::before { content: "\2713"; }

.pq-actions { display: flex; justify-content: center; gap: 11px; margin-top: 12px; }
.pq-actions button {
  display: inline-flex;
  min-width: 150px;
  min-height: 46px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 9px 15px;
  border: 2px solid #a77d39;
  border-radius: 7px;
  background: linear-gradient(#302039, #130d1c);
  box-shadow: inset 0 0 0 2px #08050c, 0 4px 0 #4b321b;
  color: var(--pq-cyan);
  cursor: pointer;
  font: 900 .74rem/1 Arial, sans-serif;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.pq-actions button:last-child { color: var(--pq-coral); }
.pq-actions button:focus-visible { outline: 3px solid #fff1c4; outline-offset: 3px; }
.pq-actions button:disabled { cursor: default; filter: grayscale(.65); opacity: .42; }

.pq-note { min-height: 34px; margin: 12px auto 0; max-width: 780px; color: #d8c9a7; font-size: .84rem; line-height: 1.35; text-align: center; }
.pq-prompt { min-height: 17px; margin: 5px 0 0; color: #94869b; font: 700 .68rem/1.3 Arial, sans-serif; letter-spacing: .04em; text-align: center; }
.pq-game.paused .pq-viewer,
.pq-game.paused .pq-choices,
.pq-game.paused .pq-progress { filter: brightness(.5) grayscale(.35); }
.pq-game.complete .pq-cabinet { box-shadow: inset 0 0 0 3px #09050d, inset 0 0 0 5px rgba(98,214,200,.28), 0 0 30px rgba(98,214,200,.2); }

@keyframes pq-shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }

@media (max-width: 720px) {
  .pq-cabinet { padding: 11px; }
  .pq-viewer { min-height: 240px; padding: 34px 96px 20px 20px; }
  .pq-viewer::after { right: 83px; }
  .pq-slides { right: 12px; }
  .pq-slides span { width: 55px; height: 42px; }
  .pq-slides span i { width: 33px; height: 21px; }
  .pq-choice { grid-template-columns: 40px 1fr; min-height: 66px; }
  .pq-choice i { display: none; }
}

@media (max-width: 520px) {
  .pq-title { margin-bottom: 10px; font-size: clamp(1.75rem, 9vw, 2.7rem); letter-spacing: .02em; }
  .pq-cabinet { border-radius: 8px; }
  .pq-summary > span { padding: 7px 2px 6px; }
  .pq-summary small { font-size: .46rem; letter-spacing: .04em; }
  .pq-summary svg { display: none; }
  .pq-summary strong { font-size: .84rem; }
  .pq-viewer { min-height: 215px; padding: 34px 15px 66px; border-radius: 18px; }
  .pq-viewer::after { inset: 15px 12px 54px; }
  .pq-clue { top: 20px; left: 24px; font-size: .54rem; }
  .pq-picture { min-height: 158px; }
  .pq-art { width: min(280px, 88%); max-height: 158px; }
  .pq-slides { top: auto; right: 50%; bottom: 11px; grid-template-columns: repeat(3, 52px); gap: 6px; transform: translateX(50%); }
  .pq-slides small { grid-column: 1 / -1; font-size: .43rem; }
  .pq-slides span { width: 52px; height: 27px; transform: rotate(-1deg); }
  .pq-slides span i { width: 34px; height: 13px; }
  .pq-choices { grid-template-columns: 1fr; gap: 8px; margin-top: 10px; }
  .pq-choice { grid-template-columns: 37px 1fr auto; min-height: 53px; padding: 5px 8px; }
  .pq-choice > span { width: 31px; height: 35px; font-size: 1rem; }
  .pq-choice strong { padding: 0 7px; font-size: .96rem; }
  .pq-choice i { display: block; font-size: .45rem; }
  .pq-progress { gap: 7px; padding: 9px 4px 2px; }
  .pq-progress span { width: 25px; min-height: 25px; font-size: .62rem; }
  .pq-progress span:not(:last-child)::after { left: 25px; width: calc((100vw - 108px) / 5); }
  .pq-actions { margin-top: 11px; }
  .pq-actions button { min-width: 0; min-height: 46px; flex: 1; padding: 8px; font-size: .63rem; }
  .pq-note { min-height: 42px; margin-top: 9px; font-size: .72rem; }
  .pq-prompt { margin-top: 3px; font-size: .56rem; }
}

@media (prefers-reduced-motion: reduce) {
  .pq-art,
  .pq-choice,
  .pq-cabinet::before { transition: none; }
  .pq-choice.wrong { animation: none; }
}