.game-page[data-engine="artcuratorsstudio"] .game-shell {
  background:
    linear-gradient(90deg, rgba(5, 16, 27, .97), rgba(5, 16, 27, .84) 52%, rgba(5, 16, 27, .94)),
    url("/assets/covers/art-quiz.webp") center 42% / cover;
  border-color: #8f6b2c;
  box-shadow: 0 24px 60px rgba(1, 7, 13, .55), inset 0 0 0 1px rgba(220, 181, 94, .22);
}

.aq-game {
  --aq-navy: #071a2b;
  --aq-ivory: #f4ead4;
  --aq-paper: #fff9eb;
  --aq-brass: #c69a43;
  --aq-brass-dark: #72501e;
  --aq-verm: #8f2f25;
  --aq-green: #245f4c;
  --aq-ink: #211b17;
  width: min(980px, 100%);
  margin: 0 auto;
  color: var(--aq-ivory);
  font-family: Georgia, "Times New Roman", serif;
}

.aq-title {
  margin: 0 0 13px;
  color: var(--aq-ivory);
  font-size: clamp(2.15rem, 6vw, 4.7rem);
  font-weight: 500;
  letter-spacing: .05em;
  line-height: .9;
  text-align: center;
  text-shadow: 0 3px 20px rgba(0, 0, 0, .45);
  text-transform: uppercase;
}

.aq-title span {
  display: block;
  margin-bottom: 8px;
  color: #e0b65e;
  font-size: clamp(.66rem, 1.35vw, .93rem);
  font-weight: 700;
  letter-spacing: .28em;
}

.aq-studio {
  position: relative;
  padding: 13px;
  border: 1px solid rgba(198, 154, 67, .7);
  background: rgba(5, 17, 29, .9);
  box-shadow: inset 0 0 0 3px rgba(198, 154, 67, .1), 0 16px 40px rgba(0, 0, 0, .35);
}

.aq-studio::before {
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, var(--aq-green), var(--aq-brass) calc(var(--time-ratio, 1) * 100%), var(--aq-verm) 0);
  content: "";
  transition: background .2s linear;
}

.aq-summary {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  margin-bottom: 12px;
  border: 1px solid var(--aq-brass-dark);
  background: #081e31;
}

.aq-summary > span {
  min-width: 0;
  padding: 8px 7px 7px;
  border-right: 1px solid rgba(198, 154, 67, .38);
  text-align: center;
}

.aq-summary > span:last-child { border-right: 0; }

.aq-summary small,
.aq-summary strong { display: block; }

.aq-summary small {
  color: #deb55f;
  font-family: Arial, sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.aq-summary svg {
  width: 13px;
  height: 13px;
  margin-right: 4px;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.5;
  vertical-align: -2px;
}

.aq-summary strong {
  margin-top: 3px;
  color: var(--aq-ivory);
  font-size: clamp(.96rem, 2vw, 1.35rem);
  font-variant-numeric: tabular-nums;
  font-weight: 500;
}

.aq-question-panel {
  position: relative;
  min-height: 138px;
  padding: 38px 118px 22px 24px;
  border: 3px solid var(--aq-brass);
  outline: 1px solid #382716;
  background:
    linear-gradient(rgba(255,255,255,.23) 1px, transparent 1px),
    linear-gradient(90deg, rgba(84,61,26,.04) 1px, transparent 1px),
    var(--aq-ivory);
  background-size: 5px 5px;
  box-shadow: inset 0 0 0 4px #efe0be, 0 5px 12px rgba(0,0,0,.35);
  color: var(--aq-ink);
  text-align: center;
}

.aq-topic {
  position: absolute;
  top: -3px;
  left: 50%;
  max-width: 72%;
  padding: 8px 24px 7px;
  border: 1px solid #a07931;
  background: #e7d2a9;
  color: #642a25;
  font-family: Arial, sans-serif;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .16em;
  text-transform: uppercase;
  transform: translate(-50%, -50%);
}

.aq-question {
  display: grid;
  min-height: 74px;
  margin: 0;
  place-items: center;
  font-size: clamp(1.12rem, 2.6vw, 1.8rem);
  font-weight: 600;
  line-height: 1.25;
}

.aq-seals {
  position: absolute;
  top: 50%;
  right: 19px;
  display: grid;
  grid-template-columns: repeat(3, 25px);
  gap: 6px;
  transform: translateY(-50%);
}

.aq-seals small {
  grid-column: 1 / -1;
  color: #6b5130;
  font-family: Arial, sans-serif;
  font-size: .55rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-align: center;
  text-transform: uppercase;
}

.aq-seals span {
  width: 25px;
  height: 25px;
  border: 2px solid #8b6b31;
  border-radius: 50%;
  background: #b7a98d;
  box-shadow: inset 0 0 0 3px rgba(255,255,255,.22);
  opacity: .36;
}

.aq-seals span.active {
  background: radial-gradient(circle at 35% 30%, #c65a43, var(--aq-verm) 58%, #531710);
  box-shadow: 0 2px 6px rgba(81,20,14,.38), inset 0 0 0 3px rgba(255,191,140,.14);
  opacity: 1;
}

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

.aq-choice {
  position: relative;
  display: grid;
  grid-template-columns: 42px 1fr auto;
  min-height: 68px;
  padding: 9px 11px;
  border: 2px solid #a47c31;
  border-radius: 0;
  background: linear-gradient(100deg, #fffaf0, #ead9b7);
  box-shadow: inset 0 0 0 3px #f8edda, 0 4px 0 #5b411c, 0 6px 12px rgba(0,0,0,.28);
  color: var(--aq-ink);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: transform .12s ease, border-color .12s ease, filter .12s ease;
}

.aq-choice:hover:not(:disabled) { transform: translateY(-2px); }

.aq-choice:focus-visible {
  outline: 4px solid #56d2b0;
  outline-offset: 3px;
}

.aq-choice > span {
  align-self: center;
  width: 33px;
  padding: 5px 0;
  border: 1px solid #8e6828;
  background: #d7b66e;
  color: #5e221e;
  font-family: Arial, sans-serif;
  font-size: .82rem;
  font-weight: 900;
  text-align: center;
}

.aq-choice strong {
  align-self: center;
  padding-right: 8px;
  font-size: clamp(.94rem, 2vw, 1.2rem);
  line-height: 1.13;
}

.aq-choice i {
  align-self: center;
  color: #725d3c;
  font-family: Arial, sans-serif;
  font-size: .55rem;
  font-style: normal;
  font-weight: 900;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.aq-choice.hinted { border-color: #36aa83; box-shadow: inset 0 0 0 3px #f8edda, 0 0 0 3px rgba(54,170,131,.42), 0 4px 0 #245f4c; }
.aq-choice.correct { border-color: #2f8d6f; background: #d8eee3; box-shadow: inset 0 0 0 3px #f1fbf5, 0 4px 0 #245f4c; }
.aq-choice.wrong { border-color: #ad382c; background: #f0ccc3; }
.aq-choice.rejected { filter: grayscale(.75); opacity: .44; }

.aq-progress {
  position: relative;
  display: flex;
  justify-content: center;
  gap: clamp(20px, 7vw, 74px);
  margin: 15px auto 10px;
}

.aq-progress::before {
  position: absolute;
  top: 16px;
  right: 14%;
  left: 14%;
  height: 3px;
  background: #8f713b;
  content: "";
}

.aq-progress span {
  position: relative;
  z-index: 1;
  display: grid;
  width: 34px;
  height: 34px;
  border: 2px solid #b78e42;
  border-radius: 50%;
  background: #10263a;
  box-shadow: 0 0 0 3px #07121e;
  color: var(--aq-ivory);
  font-family: Arial, sans-serif;
  font-size: .78rem;
  font-weight: 900;
  place-items: center;
}

.aq-progress span::after {
  position: absolute;
  top: 38px;
  color: #b9a580;
  content: attr(data-label);
  font-size: .48rem;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.aq-progress span.active,
.aq-progress span.done { background: var(--aq-green); color: white; }
.aq-progress span.active { box-shadow: 0 0 0 3px #07121e, 0 0 16px rgba(78,197,157,.45); }

.aq-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 27px;
}

.aq-actions button {
  display: inline-flex;
  min-height: 46px;
  padding: 10px 19px;
  border: 2px solid #c49a49;
  border-radius: 0;
  background: var(--aq-green);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.1), 0 3px 0 #153a2f;
  color: white;
  cursor: pointer;
  font-family: Arial, sans-serif;
  font-size: .72rem;
  font-weight: 900;
  gap: 8px;
  letter-spacing: .08em;
  align-items: center;
  text-transform: uppercase;
}

.aq-actions button:last-child { background: var(--aq-verm); box-shadow: inset 0 0 0 2px rgba(255,255,255,.08), 0 3px 0 #541a15; }
.aq-actions button:focus-visible { outline: 3px solid #60ddb9; outline-offset: 3px; }
.aq-actions button:disabled { cursor: not-allowed; filter: grayscale(.8); opacity: .45; }
.aq-actions svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; stroke-width: 1.8; }

.aq-prompt {
  margin: 12px 0 0;
  color: #d7c7aa;
  font-family: Arial, sans-serif;
  font-size: .68rem;
  letter-spacing: .05em;
  text-align: center;
}

.aq-game.paused .aq-question-panel,
.aq-game.paused .aq-choices { filter: saturate(.35) brightness(.7); }
.aq-game.complete .aq-studio { box-shadow: inset 0 0 0 3px rgba(74,185,145,.24), 0 0 36px rgba(74,185,145,.23); }

@media (max-width: 720px) {
  .aq-studio { padding: 10px; }
  .aq-summary { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .aq-summary > span { padding: 7px 2px; }
  .aq-summary small { font-size: .48rem; letter-spacing: .05em; }
  .aq-summary svg { display: none; }
  .aq-question-panel { min-height: 126px; padding: 36px 18px 42px; }
  .aq-seals { top: auto; right: auto; bottom: 8px; left: 50%; grid-template-columns: auto repeat(3, 20px); transform: translateX(-50%); align-items: center; }
  .aq-seals small { grid-column: auto; }
  .aq-seals span { width: 20px; height: 20px; }
  .aq-choice { grid-template-columns: 35px 1fr; }
  .aq-choice i { display: none; }
}

@media (max-width: 430px) {
  .game-page[data-engine="artcuratorsstudio"] .game-shell { background-position: 45% center; }
  .aq-title { margin-bottom: 10px; font-size: 2.34rem; }
  .aq-title span { margin-bottom: 5px; font-size: .58rem; }
  .aq-summary strong { font-size: .88rem; }
  .aq-topic { max-width: 88%; padding: 7px 12px; font-size: .59rem; letter-spacing: .1em; white-space: nowrap; }
  .aq-question { min-height: 68px; font-size: 1.04rem; }
  .aq-choices { grid-template-columns: 1fr; gap: 8px; }
  .aq-choice { min-height: 54px; padding: 7px 9px; box-shadow: inset 0 0 0 2px #f8edda, 0 3px 0 #5b411c; }
  .aq-choice strong { font-size: .95rem; }
  .aq-progress { gap: clamp(17px, 11vw, 43px); margin-top: 13px; }
  .aq-progress::before { right: 9%; left: 9%; }
  .aq-progress span { width: 31px; height: 31px; }
  .aq-progress span::after { display: none; }
  .aq-actions { margin-top: 12px; gap: 8px; }
  .aq-actions button { flex: 1; justify-content: center; min-height: 46px; padding: 9px 7px; font-size: .63rem; letter-spacing: .04em; }
  .aq-prompt { margin-top: 10px; font-size: .58rem; line-height: 1.35; }
}

@media (prefers-reduced-motion: reduce) {
  .aq-choice { transition: none; }
}