/**
 * Question Module Styles
 *
 * Standalone CSS for the reusable question/answer card interface.
 * All classes are prefixed with "qm-" to avoid conflicts.
 * Based on the Ten in a Row card system.
 */

.qm-card-holder {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  overflow: hidden;
}

.qm-card {
  /* Card will fit within viewport, maintaining 3:2 ratio */
  width: min(42.5vw, calc((100vh - 15vh) * 3 / 2));
  aspect-ratio: 3/2;
  background-color: var(--dark-colour);
  border-radius: 2vmin;
  position: absolute;
  box-shadow: inset 0 0 0 0.5vmin var(--white-colour),
    rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1vmin;
  cursor: pointer;
  overflow: hidden;
  transform-origin: center center;
  opacity: 0;
  user-select: none;
}

.qm-card .qm-card-corner {
  position: absolute;
  top: 0;
  left: 0;
  width: 15%;
  height: auto;
  fill: var(--white-colour);
  pointer-events: none;
  transform-origin: top left;
}

.qm-card .qm-corner-text {
  font-size: 2.5vmin;
  font-weight: 700;
  fill: var(--dark-colour);
}

/* Answer cards have inverted corner colors */
.qm-card.qm-answer-card .qm-corner-text {
  fill: var(--white-colour);
}

.qm-card.qm-answer-card .qm-card-corner {
  fill: var(--dark-colour);
}

/* Answer card #1 - slight rotation and white background */
#qm-answer-card-1 {
  rotate: 2deg;
  background-color: var(--white-colour);
  box-shadow: inset 0 0 0 0.5vmin var(--dark-colour),
    rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  z-index: 3;
}

/* Answer card #2 */
#qm-answer-card-2 {
  rotate: -1deg;
  background-color: var(--white-colour);
  box-shadow: inset 0 0 0 0.5vmin var(--dark-colour),
    rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  z-index: 2;
}

/* Answer card #3 */
#qm-answer-card-3 {
  rotate: 1deg;
  background-color: var(--white-colour);
  box-shadow: inset 0 0 0 0.5vmin var(--dark-colour),
    rgba(9, 30, 66, 0.25) 0px 4px 8px -2px,
    rgba(9, 30, 66, 0.08) 0px 0px 0px 1px;
  z-index: 1;
}

/* Text styling for question card */
.qm-card p {
  color: var(--white-colour);
  font-size: 4vmin;
  font-weight: 300;
  background-color: color-mix(in srgb, var(--dark-colour) 90%, transparent);
  padding: 0.5vmin 1vmin;
  border-radius: 0.5vmin;
  width: fit-content;
  height: fit-content;
  max-width: 100%;
  max-height: 100%;
  text-align: center;
  text-wrap: balance;
}

/* Text styling for answer cards */
.qm-card.qm-answer-card p {
  color: var(--dark-colour);
  background-color: transparent;
}