/* ============================================================================
   Monash quiz — pure PHP/CSS/JS rebuild (no React).
   Faithful port of the original React quiz styles (scoring + look preserved).
   Loaded only on the Quiz page template (see includes/quiz-php.php).
   ============================================================================ */
/*
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Light.woff2") format("woff2");
	font-weight: 300;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Regular.woff2") format("woff2");
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Medium.woff2") format("woff2");
	font-weight: 500;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-SemiBold.woff2") format("woff2");
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Bold.woff2") format("woff2");
	font-weight: 700;
	font-display: swap;
}
@font-face {
	font-family: "Albert Sans";
	src: url("../fonts/AlbertSans-Black.woff2") format("woff2");
	font-weight: 800;
	font-display: swap;
}
*/
.monash-quiz-php {
	--cream: #fffeef;
	--cream-o50: rgba(255, 255, 239, 0.5);
	--monash-blue: #006dae;
	--light-blue: #5198c1;
	--secondary-purple: #7463d7;
	--secondary-orange: #f86700;
	--secondary-navy: #102f86;
	--secondary-yellow: #F9A125;
	--secondary-green: #83a00a;
	--light-red: #fe4447;
	--secondary-ruby: #cd2fb0;
	--success-green: #05eb80;
	--no-red: #ff6868;
	--grey-3: #e6e6e6;
	--charcoal: #2c2c2c; 

	font-family: "Albert Sans", system-ui, sans-serif;
	position: relative;
}

/* ── Screen visibility ─────────────────────────────────────────────────── */
.mq-screen {
	display: none;
	min-height: inherit;
}
.mq-screen.is-active {
	display: flex;
	flex-direction: column;
}

/* ── Buttons (shared) ──────────────────────────────────────────────────── */
.mq-btn {
    display: inline-block;
    border: none;
    border-radius: 8px;
    padding: 10px 20px;
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    color: var(--cream);
    cursor: pointer;
    text-align: center;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    color: #f5f5f5;
		transition: 0.4s all;
	-webkit-tap-highlight-color: transparent;
}
.mq-btn--orange {
	background-color: var(--secondary-orange);
	box-shadow: 0 0.4375rem 0.1875rem rgba(248, 103, 0, 0.4);
}
.mq-btn--blue {
    background-color: var(--button-light-blue);
}

.mq-btn--white{	
    font-family: var(--font-family);
    font-weight: 400;
    font-size: 24px;
    text-align: center;
    color: var(--monash-blue);
    padding: 18px 30px;
    border-radius: 16px;
		position: relative;
    top: 0;
    transition: top .4s;
}
.mq-btn--white:active,
.mq-btn--white.is-pressed {	
    top: 10px;
}
.mq-btn--white:active::after,
.mq-btn--white.is-pressed::after {
    top: 8px;
}
.mq-btn--white::before {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 3px);
    top: -4px;
    border: none;
    border-radius: 21px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: 0;
    height: 100%;
    left: 0px;
    border: 2px solid var(--grey-3);
		transition: all 0.4s;
}
.mq-btn--white::after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    top: 18px;
    border: none;
    border-radius: 16px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: -1;
    height: 100%;
    left: -1px;
    border: 1px solid var(--monash-blue);
    background-color: var(--grey-3);
		transition: all 0.4s;
}
/* ============================================================================
   1 ── INTRO screen
   ============================================================================ */
.mq-screen--intro {
	align-items: center;
	justify-content: center;
	row-gap: 1.75rem;
	padding-block: 5.625rem;
    background-color: var(--monash-blue);
    padding: 0px 40px;
}
.mq-start {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	row-gap: 1.75rem;
	width: 100%;
	max-width: 24.375rem;
	margin-inline: 1.875rem;
    padding: 6.125rem 1.875rem;
	border-radius: 2rem;
	color: var(--cream);
	z-index: 2;
    max-height: 77dvh;
}
.mq-start::before,
.mq-start::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 0.125rem solid var(--cream);
	border-radius: inherit;
	pointer-events: none;
}
.mq-start::before {
	border-color: var(--light-blue);
	transform: translate(-0.1875rem, -0.3125rem);
}
.mq-start__title {
	font-size: 26px;
	font-weight: 600;
	line-height: 1.2;
}
.mq-start__content {
	font-size: 1.375rem;
	font-weight: 300;
	max-width: 18.75rem;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 22px;
    text-align: center;
    color: var(--white);
}
.mq-skip {
	border: none;
	background: transparent;
	color: var(--cream);
	font-size: 0.9375rem;
	font-weight: 300;
	text-decoration: underline;
	cursor: pointer;
    font-size: 15px;
}
@media (max-width: 420px) {
	.mq-start {
		row-gap: 1.25rem;
	}
	.mq-start__title {
		font-size: 1.125rem;
	}
	.mq-start__content {
		font-size: 1rem;
	}
}

/* ============================================================================
   1b ── TUTORIAL steps (new multi-step flow)
   ============================================================================ */
.mq-screen--tutorial {
	background-color: var(--monash-blue);
	align-items: center;
	justify-content: center;
	padding: 1.875rem;
	box-sizing: border-box;
	transition: background-color .6s ease;
}
.mq-screen--tutorial.is-challenged {
  background: var(--charcoal);
}
.mq-tstep {
	display: none;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 100%;
	max-width: 24.375rem;
	text-align: center;
	color: var(--cream);
}
.mq-tstep.is-active {
	display: flex;
}
.mq-tstep__body {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1rem;
}
.mq-tstep__heading {
    font-size: 2rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.2;
    margin-bottom: 0px;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 26px;
    text-align: center;
    color: var(--white);
}
.mq-tstep__line {
    font-weight: 300;
    margin: 0;
    line-height: 1.5;
    color: #ffffffb8;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 22px;
    line-height: 141%;
}
.mq-tstep__line em{
    color: #fff;
}
.mq-tstep__ready {
	font-size: 1.375rem;
	font-weight: 600;
	margin: 0.5rem 0 0;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 22px;
		margin-bottom: 40px;
}
.mq-tstep__body-button{
	
    position: relative;
    display: flex;
    z-index: 1;
}
.mq-tstep__btn {
    display: inline-block;
    border: 2px solid var(--cream);
    background: var(--monash-blue);
    color: var(--cream);
    font-family: inherit;
    font-size: 1.125rem;
    font-weight: 700;
    padding: 0.75rem 3rem;
    border-radius: 0.75rem;
    cursor: pointer;
    margin-top: 0.5rem;
    transition: all 0.4s;
    position: relative;
    font-weight: 300;
    top: 0;
	-webkit-tap-highlight-color: transparent;
}

.mq-tstep__btn:active,
.mq-tstep__btn.is-pressed {
    top: 10px;
}

.mq-tstep__btn:active .bg-btn,
.mq-tstep__btn.is-pressed .bg-btn {
    top: 8px;
}
.bg-btn {
    position: absolute;
    display: block;
    width: calc(100% + 6px);
    top: 18px;
    border: none;
    border-radius: 16px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: -1;
    height: 100%;
    left: -3px;
    border: 1px solid var(--monash-blue);
    background-color: rgba(255, 255, 239, 0.23);
    transition: all 0.4s;
}
.mq-screen--great-job .mq-btn--white::after {
    background-color: var(--button-light-blue);
}
.mq-tstep__btn:active,
.mq-tstep__btn.is-pressed {
	background: var(--cream);
	color: var(--monash-blue);
}

/* Practice cards (step 2 & step 3) */
.mq-tstep__card {
    position: relative;
    width: 100%;
    max-width: 24.375rem;
    background: var(--white);
    border: 2px solid var(--grey-3);
    border-radius: 1.875rem;
    padding: 2.5rem 1.25rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 1rem;
    box-shadow: 0 0.625rem 0.78rem rgba(0, 0, 0, 0.12);
    touch-action: none;
    cursor: grab;
    box-sizing: border-box;
    min-height: 50dvh;
    justify-content: center;
    margin-top: -14dvh;
}
/* Double-border effect only for step 2 (Practice: Yes) */
#mq-tstep-card::after {
	content: "";
	position: absolute;
	inset: 0;
	border: 0.125rem solid var(--cream);
	border-radius: inherit;
	pointer-events: none;
}
#mq-tstep-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border: 0.125rem solid var(--light-blue);
	border-radius: inherit;
	pointer-events: none;
    transform: translate(-7px, -7px);
}
.mq-tstep__card-title {
	color: var(--monash-blue);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0;
}
.mq-tstep__swipe {
	color: var(--monash-blue);
	font-size: 1rem;
	font-weight: 400;
	margin: 0;
}
.mq-tstep__card .mq-tstep__line {
	color: var(--monash-blue);
}
.mq-tstep__card-sub {
	color: var(--monash-blue);
	font-size: 1.125rem;
	font-weight: 300;
	margin: 0;
	line-height: 1.5;
}
.mq-tstep__icon {
    width: 8rem;
    height: auto;
    opacity: 1;
    margin-top: 4rem;
}
.mq-tstep .mq-answer__btn {
	width: 3rem;
	height: 3rem;
	background: transparent;
	border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}
[data-tstep="2"] .mq-answer__btn,
[data-tstep="3"] .mq-answer__btn {
	pointer-events: none;
	opacity: 0.35;
}

/* Step 4 — challenge: black bg + blur */
.mq-screen--tutorial.is-challenged {
	background-color: #000;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-tstep__body {
	filter: blur(6px);
	opacity: 0.4;
	pointer-events: none;
	transition: filter .6s ease, opacity .6s ease;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-progress,
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__popup {
	opacity: 0 !important;
}

/* Step 4 — buttons styling (persists after challenge) */
@keyframes mq-bounce {
	0%, 100% { transform: translateY(0); }
	30% { transform: translateY(-10px); }
	60% { transform: translateY(0); }
	85% { transform: translateY(-10px); }
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__buttons {
	animation: mq-bounce .7s ease 2;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__buttons,
.mq-screen--tutorial.is-revealed [data-tstep="4"] .mq-answer__buttons {	
	position: relative;
	z-index: 2;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__btn--no svg path,
.mq-screen--tutorial.is-revealed [data-tstep="4"] .mq-answer__btn--no svg path {
	fill: #ff6868 !important;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__btn--yes svg path,
.mq-screen--tutorial.is-revealed [data-tstep="4"] .mq-answer__btn--yes svg path {
	stroke: #05eb80 !important;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-progress {
	opacity: 0.2;
	transition: opacity .6s ease;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__popup {
	opacity: 0 !important;
}
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__buttons {
	position: relative;
	z-index: 2;
	transition: background .6s ease;
} 

.mq-screen--tutorial.is-revealed [data-tstep="4"] .mq-answer__buttons .mq-answer__btn,
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__buttons .mq-answer__btn{
	background: #fff;
  opacity: 1;
    pointer-events: all;

}
.mq-screen--tutorial.is-revealed [data-tstep="4"] .mq-answer__btn--no svg path,
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__btn--no svg path {
	fill: #ff6868 !important;
}
.mq-screen--tutorial.is-revealed [data-tstep="4"] .mq-answer__btn--yes svg path, 
.mq-screen--tutorial.is-challenged [data-tstep="4"] .mq-answer__btn--yes svg path {
	stroke: #05eb80 !important;
}
[data-tstep="2"] .mq-answer__btn,
[data-tstep="3"] .mq-answer__btn,
[data-tstep="4"] .mq-answer__btn  {
	pointer-events: none;
	opacity: 0.35;
}
.mq-tstep .mq-answer {
    position: absolute;
    bottom: 100px;
}
/* Undo icon in step 5 — top-left */
.mq-tstep__undo-icon {
	position: absolute;
	top: 5.25rem;
	left: 1.25rem;
	cursor: pointer;
	padding: 0.5rem;
	z-index: 3;
}
.mq-tstep__undo-icon svg {
	display: block;
	width: 1.25rem;
	height: auto;
}

/* Step 5 — challenge state */
.mq-screen--tutorial.is-challenged5 {
	background-color: #000;
}
.mq-screen--tutorial.is-challenged5 [data-tstep="5"] .mq-tstep__body,
.mq-screen--tutorial.is-challenged5 [data-tstep="5"] .mq-progress {
	filter: blur(6px);
	opacity: 0.4;
	pointer-events: none;
	transition: filter .6s ease, opacity .6s ease;
}
.mq-screen--tutorial.is-challenged5 [data-tstep="5"] .mq-tstep__undo-icon {
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	padding: 0.75rem;
	animation: mq-bounce .7s ease 2;
}
.mq-screen--tutorial.is-revealed5 [data-tstep="5"] .mq-tstep__undo-icon {
	background: rgba(255,255,255,0.15);
	border-radius: 50%;
	padding: 0.75rem;
}

/* Loading spinner for step 6 */
.mq-tstep__loader {
	width: 2.5rem;
	height: 2.5rem;
	border: 3px solid var(--cream-o50);
	border-top-color: var(--cream);
	border-radius: 50%;
	animation: mq-spin 0.8s linear infinite;
	margin-top: 1rem;
}
@keyframes mq-spin {
	to { transform: rotate(360deg); }
}

/* ── Wrong-swipe overlay (tutorial steps 2 & 3) ──────────────────────────── */
.mq-tstep__wrong {
    position: absolute;
    inset: 0;
    z-index: 1000;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: var(--charcoal);
    color: var(--cream);
    /* background-color: var(--monash-blue); */
    align-items: center;
    justify-content: center;
    padding: 1.875rem;
    box-sizing: border-box;
    transition: background-color .6s ease;
}
.mq-tstep__wrong[hidden] {
	display: none;
}
.mq-tstep__wrong-inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 2rem;
	text-align: center;
}
.mq-tstep__wrong-text {
    font-size: 1.5rem;
    line-height: 1.4;
    font-weight: 300;
    margin: 0 0 0rem;
		font-family: var(--font-family);
	font-weight: 300;
	font-size: 22px;
}
.mq-tstep__btn#mq-tstep-wrong-try {
    background: var(--charcoal);
}
.mq-tstep__btn#mq-tstep-wrong-try .bg-btn{
    border: 1px solid rgba(255, 255, 239, 0.23);
}
.Preparingquiz .mq-tstep__body {
    row-gap: 2rem;
}
.Preparingquiz .mq-tstep__line{
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 16px;
    line-height: 138%;
    text-align: center;
    color: var(--arts-advantage-cream);
}
.Preparingquiz  .mq-progress {
    display: none;
}
/* ============================================================================
   2/3 ── QUIZ screens (swipe cards)
   ============================================================================ */
.mq-screen--quiz {
	align-items: center;
	justify-content: space-between;
	padding-block: 4.25rem 3.4375rem;
	padding-inline: 2.75rem;
	row-gap: 1.875rem;
    background: var(--monash-blue);
}

/* Top actions row (undo / close) */
.mq-actions {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	column-gap: 1.125rem;
	min-height: 1.25rem;
}
.mq-actions--ghost {
	visibility: hidden;
}
.mq-actions__undo,
.mq-actions__close {
	border: none;
	background: transparent;
	display: inline-flex;
	padding: 0.25rem;
	cursor: pointer;
    cursor: pointer;
    padding: 0.5rem;
    z-index: 3;
    top: 3.25rem;
    position: absolute;
}
.mq-actions__undo{

    left: 10px;
}
.mq-actions__close{

    right: 10px;
}
.mq-actions__undo:disabled {
	opacity: 0.3;
	pointer-events: none;
}

/* Card stack */
.mq-stack {
	position: relative;
	width: 100%;
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 1;
}
.mq-card-wrap {
	position: absolute;
	width: 100%;
	max-width: 24.375rem;
	height: 100%;
	max-height: 27.75rem;
	will-change: transform;
	backface-visibility: hidden;
	touch-action: pan-y;
}
.mq-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    row-gap: 1.125rem;
    width: 100%;
    height: 100%;
    max-height: 27.75rem;
    padding: 2.5rem 1.25rem;
    border-radius: 1.875rem;
    border: 0.125rem solid var(--grey-3);
    background: var(--white);
    box-shadow: 0 0.625rem 0.78rem rgba(0, 0, 0, 0.12);
    text-align: center;
}
.mq-card::before,
.mq-card::after {
	content: "";
	display: block;
	width: 11.625rem;
	height: 0.5rem;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='186' height='8' viewBox='0 0 186 8' fill='none'%3E%3Cpath d='M164.304 5.88996C164.304 5.81996 163.729 5.75996 162.634 5.71996C161.54 5.67996 159.92 5.64996 157.843 5.63996C153.684 5.63996 147.667 5.64996 140.224 5.65996C132.794 5.61996 123.938 5.45996 114.144 4.40996C109.246 3.92996 104.13 2.97996 98.7826 2.24996C93.4413 1.50996 87.9062 0.899963 82.2271 0.499963C76.5419 0.0999629 70.9879 -0.080037 65.6216 0.039963C60.249 0.179963 55.1017 0.539963 50.1794 0.839963C40.3474 1.46996 31.5037 2.09996 24.0734 2.46996C16.6431 2.86996 10.6264 3.00996 6.47343 3.02996C4.39696 3.02996 2.78332 3.02996 1.68254 3.02996C0.58801 3.02996 0.0126021 3.06996 0.00634766 3.13996C0.00634766 3.20996 0.575501 3.30996 1.67003 3.43996C2.76455 3.57996 4.3782 3.70996 6.46092 3.82996C10.6201 4.05996 16.6494 4.13996 24.0922 3.92996C31.5349 3.74996 40.3912 3.26996 50.2232 2.73996C55.1329 2.49996 60.2991 2.16996 65.6341 2.05996C70.9691 1.96996 76.5043 2.15996 82.1646 2.56996C87.8248 2.96996 93.3475 3.55996 98.67 4.26996C103.986 4.96996 109.134 5.87996 114.062 6.30996C123.907 7.24996 132.782 7.25996 140.224 7.11996C147.667 6.96996 153.684 6.65996 157.843 6.43996C159.92 6.32996 161.54 6.21996 162.628 6.12996C163.722 6.03996 164.298 5.95996 164.298 5.87996L164.304 5.88996Z' fill='%23E6E6E6'/%3E%3Cpath d='M186 1.67C186 1.1 170.364 0.630005 151.076 0.630005C131.787 0.630005 116.151 1.09 116.151 1.67C116.151 2.25 131.787 2.71 151.076 2.71C170.364 2.71 186 2.25 186 1.67Z' fill='%23E6E6E6'/%3E%3Cpath d='M58.7793 4.14003C58.7793 4.71003 63.4263 5.28003 69.1742 5.42003C74.922 5.55003 79.5815 5.20003 79.5878 4.62003C79.5941 4.04003 74.9408 3.48003 69.1929 3.34003C63.4451 3.20003 58.7856 3.56003 58.7793 4.14003Z' fill='%23E6E6E6'/%3E%3C/svg%3E");
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11.625rem;
}
.mq-card h3 {
	color: var(--monash-blue);
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.35;
	font-family: "Albert Sans", sans-serif !important;
}
.mq-card__hint {
	width: 5rem;
	height: auto;
	opacity: 0.8;
}

/* Answer navigation */
.mq-answer {
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1.875rem;
	position: relative;
	margin-top: 1.5rem;
	flex-shrink: 0;
    z-index: 9;
}
.mq-answer__popup {
	position: absolute;
	top: -9rem;
	width: 11rem;
	height: auto;
	object-fit: contain;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.12s ease-out;
}
.mq-answer__popup--no {
	left: 0;
}
.mq-answer__popup--yes {
	right: 0;
}
.mq-answer__buttons {
	display: flex;
	column-gap: 6.75rem;
}
.mq-answer__btn {
    width: 32px;
    height: 32px;
	border: none;
	border-radius: 50%;
	cursor: pointer;
	background-repeat: no-repeat;
	background-position: center;
	background-size: 42%;
	transition: transform 0.12s ease-out;
}
.mq-answer__btn:active {
	transform: scale(0.92);
}
.mq-answer__btn:disabled {
	opacity: 0.25;
	pointer-events: none;
}
.mq-answer__btn--yes {
	background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='17' height='17' viewBox='0 0 17 17' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M14.4357 0.486468C14.7496 -0.00412979 15.403 -0.147441 15.8937 0.166156C16.3842 0.480123 16.5276 1.1325 16.214 1.62319L6.78338 16.3634C6.5895 16.6664 6.2544 16.8497 5.89471 16.8497C5.53525 16.8496 5.19987 16.6662 5.00603 16.3634L0.16619 8.80385C-0.147563 8.31323 -0.00395513 7.65994 0.486503 7.34584C0.977 7.03224 1.62938 7.17599 1.94353 7.66616L5.89373 13.8371L14.4357 0.486468Z' fill='%2305EB80'/%3E%3C/svg%3E%0A");
}
.mq-answer__btn--no {
	background-color: #fff;
background-image: url("data:image/svg+xml,%3Csvg width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M16.0881 0.32847C16.5232 -0.106853 17.2316 -0.10985 17.6699 0.322297C18.1081 0.754778 18.1101 1.45876 17.675 1.89435L10.5757 8.99945L17.675 16.1056C18.1102 16.5412 18.1081 17.2451 17.6699 17.6776C17.2316 18.11 16.5232 18.107 16.0881 17.6715L8.99916 10.5766L1.91229 17.6715C1.47716 18.107 0.768808 18.1099 0.330526 17.6776C-0.107611 17.2452 -0.110644 16.5412 0.324314 16.1056L7.42361 8.99945L0.324314 1.89435C-0.110556 1.45875 -0.10763 0.754716 0.330526 0.322297C0.768816 -0.109903 1.4772 -0.106996 1.91229 0.32847L8.99916 7.42225L16.0881 0.32847Z' fill='%23FF6868'/%3E%3C/svg%3E%0A");
}

/* Progress bar */
.mq-progress {
	height: 0.375rem;
	width: 100%;
	max-width: calc(100% - 6rem);
	background-color: var(--cream-o50);
	border-radius: 0.375rem;
	overflow: hidden;
}
.mq-tstep .mq-progress {
	max-width: 80%;
    position: absolute;
    bottom: 40px;
}
.mq-progress__bar {
	height: 100%;
	width: 0%;
	background-color: var(--cream);
	border-radius: inherit;
	transition: width 0.35s ease-out;
}

/* ============================================================================
   4 ── GREAT JOB screen
   ============================================================================ */
.mq-screen--great-job {
	align-items: center;
	justify-content: center;
	background-color: var(--monash-blue);
	padding: 0 40px;
}
.mq-great {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	row-gap: 1.75rem;
	width: 100%;
	max-width: 24.375rem;
}
.mq-great__title {
	font-size: 2rem;
	font-weight: 700;
	color: var(--cream);
	margin: 0;
}
.mq-great__text {
	font-size: 1.375rem;
	font-weight: 300;
	color: var(--cream);
	margin: 0;
	line-height: 1.4;
}
.mq-great .mq-btn--white {
	font-size: 24px;
	font-weight: 400;
	color: var(--monash-blue);
	padding: 18px 30px;
	border-radius: 16px;
	position: relative;
	top: 0;
	transition: top .4s;
}
.mq-great .mq-btn--white:active,
.mq-great .mq-btn--white.is-pressed {
	top: 10px;
}
.mq-great .mq-btn--white:active::after,
.mq-great .mq-btn--white.is-pressed::after {
	top: 8px;
}

/* ============================================================================
   4b ── PREPARING screen
   ============================================================================ */
.mq-screen--preparing {
	align-items: center;
	justify-content: center;
	background-color: var(--white);
	padding: 0 40px;
}
.mq-prepare {
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	row-gap: 2rem;
	width: 100%;
	max-width: 24.375rem;
}
.mq-prepare__img {
	height: auto;
}
.mq-prepare__text {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--monash-blue);
	margin: 0;
	line-height: 1.4;
    min-height: 70px;
}

/* ============================================================================
   5 ── RESULT screen (server-rendered, archetype-coloured)
   ============================================================================ */
.mq-result {
	position: relative;
	min-height: 100dvh;
	text-align: center;
	background-color: var(--monash-blue);
	padding-bottom: 3vh;
}

.mq-result__header {
    position: sticky;
    top: 0;
    z-index: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    height: auto;
    padding: 1rem 1rem 0;
    row-gap: 0.75rem;
    overflow: hidden;
}
.mq-result__header-img {

	object-fit: contain;
	transform-origin: center center;
    max-width: 1000%;
}
.mq-result__header h2 {
	width: 100%;
	text-align: left;
	color: var(--cream);
	text-transform: uppercase;
	font-size: 78px;
	font-weight: 800;
	line-height: 0.84;
	letter-spacing: -0.05em;
	position: relative;
	z-index: 2;
	font-family: "Albert Sans", sans-serif !important;
	margin: 0 0 2rem 0;
}
.mq-result--A .mq-result__header h2 span,
.mq-result--A .mq-result__title,
.mq-result--A .mq-result__list,
.mq-result--A .mq-result__subtitle--accent,
.mq-result--A .mq-result__subtitle--archetype { color: var(--secondary-yellow); }
.mq-result--A .mq-result__card-story::after {    
    border-color: var(--secondary-yellow);
}
.mq-result--A .mq-result__card-story h2 { 
	color: var(--secondary-yellow); 
}
.mq-result--A .mq-result__card-story h3 { 
	color: var(--secondary-yellow); 
}

.mq-result--B .mq-result__header h2 span{ 
    color: var(--secondary-green);
		display: block;
}
.mq-result--B .mq-result__title,
.mq-result--B .mq-result__list,
.mq-result--B .mq-result__subtitle--accent,
.mq-result--B .mq-result__subtitle--archetype { color: var(--secondary-forest) }
.mq-result--B .mq-result__card-story::after {    
    border-color: var(--secondary-forest);
}
.mq-result--B .mq-result__card-story h2 { 
	color: var(--secondary-forest); 
}
.mq-result--B .mq-result__card-story h3 { 
	color: var(--secondary-forest); 
}


.mq-result--C .mq-result__header h2 span,
.mq-result--C .mq-result__title,
.mq-result--C .mq-result__list,
.mq-result--C .mq-result__subtitle--accent,
.mq-result--C .mq-result__subtitle--archetype { color: var(--light-red); }
.mq-result--C .mq-result__card-story::after {    
    border-color: var(--secondary-red);
}
.mq-result--C .mq-result__card-story h2 { 
	color: var(--secondary-red); 
}
.mq-result--C .mq-result__card-story h3 { 
	color: var(--secondary-red); 
}


.mq-result--D .mq-result__header h2 span,
.mq-result--D .mq-result__title,
.mq-result--D .mq-result__list,
.mq-result--D .mq-result__subtitle--accent,
.mq-result--D .mq-result__subtitle--archetype { color: var(--secondary-ruby); }
.mq-result--D .mq-result__card-story::after {    
    border-color: var(--secondary-ruby);
}
.mq-result--D .mq-result__card-story h2 { 
	color: var(--secondary-ruby); 
}
.mq-result--D.mq-result__card-story h3 { 
	color: var(--secondary-ruby); 
}

/* Sheet / content card */
.mq-result__card {
    position: relative;
    z-index: 2;
    margin: 0vh 0.875rem 2.75rem;
    padding: 22px 0 1.375rem;
    background-color: var(--white);
    border: 0.125rem solid var(--grey-3);
    border-radius: 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 10px;
    z-index: 99;
}
.mq-result__drag {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding-inline: 1.875rem;
}
.mq-result__drag-line {
	height: 0.125rem;
	width: 100%;
	max-width: 12.25rem;
	background-color: var(--grey-3);
	margin-left: auto;
}
.mq-result__drag-button {
	margin-left: auto;
	border: none;
	background: transparent;
	display: inline-flex;
	cursor: pointer;
	padding: 0rem;
}
.mq-result__drag-button .mq-icon-close { display: none; }

.mq-result__inner {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	row-gap: 1.25rem;
	padding-inline: 24px;
}
.mq-result__title {
	color: var(--secondary-navy);
	font-size: 1.625rem;
	font-weight: 700;
	align-self: center;
	margin: 0;
	text-transform: uppercase;
}
.mq-result__line {
	width: auto;
	margin: 0 auto;
}

.mq-result__subtitle {
	color: var(--monash-blue);
	font-size: 1.25rem;
	font-weight: 700;
	margin-bottom: 0.25rem;
	text-align: left;
	font-family: var(--second-family);
  text-align: center;
}

.mq-result__subtitle--lg { font-size: 1.5rem; }
.mq-result__subtitle--normal { font-weight: 400; }
.mq-result__text {
    text-align: left;
    font-size: 1rem;
    color: var(--charcoal);
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 16px;
    line-height: 138%;
    color: var(--charcoal);
    margin: 0;
}
.mq-result__list {
	list-style: disc;
	padding-left: 1.875rem;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	text-align: left;
	font-size: 1.25rem;
	font-weight: 600;
	margin: 0;
}

.mq-result__list li {
	text-decoration: underline;
	text-underline-offset: 2px;
}

.mq-result__save {
	width: 100%;
	text-align: center;
}
.mq-result__buttons {
	display: flex;
	justify-content: space-around;
	margin-top: 1.625rem;
}
.mq-result__button {
	display: flex;
	flex-direction: column;
	align-items: center;
	border: none;
	background: transparent;
	cursor: pointer;
}
.mq-result__button--disabled {
	pointer-events: none;
	opacity: 0.2;
}
.mq-result__button p {
	color: var(--light-blue);
	font-size: 1.3125rem;
	font-weight: 700;
}

/* Story card */
.mq-result__card-story {
	position: relative;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1.25rem;
	padding: 1.5rem 1.25rem;
	border: 0.125rem solid var(--grey-3);
	border-radius: 2rem;
}
.mq-result__card-story::after {
	content: "";
	position: absolute;
	inset: 2px -7px -8px 4px;
	border: inherit;
	border-color: var(--light-blue);
	border-radius: inherit;
	pointer-events: none;
}/*
.mq-result__card-story p{
	margin: 0;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 16px;
    line-height: 138%;
    color: var(--charcoal);
}
*/
.mq-result__card-story h2 {  font-size: 26px;margin: 0; }
.mq-result__card-story h3 {  font-size: 20px; margin-bottom: 0; }
.mq-result__story-avatar {
	width: 10rem;
	height: 10rem;
	border-radius: 50%;
	object-fit: cover;
	object-position: top center;
}
.mq-result__button-watch {
    display: inline-block;
    padding: 9px 23px;
    border-radius: 0.625rem;
    color: var(--light-blue);
    font-weight: 700;
    font-family: var(--font-family);
    font-weight: 300;
    font-size: 14px;
    text-align: center;
    transition: all 0.4s;
    color: var(--monash-blue);
	position: relative;
	-webkit-tap-highlight-color: transparent;
}
.mq-result__button-watch-btn{
    display: flex;
    margin: 20px 0 30px;
    justify-content: center;
}
.mq-result__button-watch::after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    top: 0;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: -1;
    height: 100%;
    left: -1px;
    border: 1px solid var(--light-blue);
}
.mq-result__button-watch .mq-result__shadow__button {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    bottom: -9px;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: -1;
    height: 100%;
    left: -1px;
    background: rgba(81, 152, 193, 0.41);
}
.mq-result__button-watch .mq-result__shadow__button:after {
    content: "";
    position: absolute;
    display: block;
    width: 100%;
    bottom: 7px;
    border-radius: inherit;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: 2;
    height: 100%;
    background: #fff;
}
.mq-result__button-watch:active,
.mq-result__button-watch.is-pressed {
    transform: translateY(6px);
}
.mq-result__button-watch:active .mq-result__shadow__button,
.mq-result__button-watch.is-pressed .mq-result__shadow__button {
    transform: translateY(-6px);
}

/* ── Blue button (same layered shadow effect) ───────────────────────────── */
.mq-btn--blue {
	position: relative;
	box-shadow: none;
}
.mq-btn--blue::after {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    top: 0;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: -1;
    height: 100%;
    left: -1px;
    border: 1px solid var(--monash-blue);
    background-color: var(--button-light-blue);
}
.mq-btn--blue .mq-result__shadow__button {
    content: "";
    position: absolute;
    display: block;
    width: calc(100% + 2px);
    bottom: -9px;
    border: none;
    border-radius: 8px;
    box-sizing: border-box;
    pointer-events: none;
    transition: all 0.4s;
    z-index: -1;
    height: 100%;
    left: -1px;
    background: var(--monash-blue);
}

.mq-btn--blue:active,
.mq-btn--blue.is-pressed {
    transform: translateY(6px);
}
.mq-btn--blue:active .mq-result__shadow__button,
.mq-btn--blue.is-pressed .mq-result__shadow__button {
    transform: translateY(-6px);
}
.mq-result__footer {
	width: 100%;
	text-align: center;
	display: flex;
	flex-direction: column;
	row-gap: 1rem;
	align-items: center;
}
.mq-result__footer .mq-result__subtitle { text-align: center; }

/* ============================================================================
   Leave-quiz modal
   ============================================================================ */
.mq-leave {
	position: fixed;
	inset: 0;
	z-index: 2000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(0, 0, 0, 0.55);
    max-width: 100%;
}
.fancybox__slide {
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.is-compact .fancybox__content>.f-button.is-close-btn {
    top: -45px;
}
.mq-leave[hidden] { display: none; }
.mq-leave__panel {
	position: relative;
	width: 100%;
	max-width: 21rem;
	background: var(--monash-blue);
	border-radius: 1.5rem;
	padding: 3rem 1.75rem 2rem;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	row-gap: 1.25rem;
	color: var(--cream);
}
.mq-leave__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: none;
	background: transparent;
	display: inline-flex;
	cursor: pointer;
}
.mq-leave__close svg { width: 1rem; height: 1rem; }
.mq-leave__title {
    font-size: 1.75rem;
    font-weight: 800;
    font-family: var(--second-family);
    font-weight: 700;
    font-size: 19px;
    text-align: center;
    color: var(--white);
}
.mq-leave__text { font-size: 1rem; font-weight: 300; }
.mq-leave__no {
	cursor: pointer;
}
.mq-leave__leave {
	color: var(--cream);
	font-size: 0.9375rem;
	font-weight: 300;
	text-decoration: underline;
	margin-top: 40px;
}

/* Notice (no quiz configured) */
.mq-notice {
	max-width: 32rem;
	margin: 5rem auto;
	padding: 1.5rem;
	color: var(--cream);
	text-align: center;
}
.mq-notice h1 { font-size: 1.5rem; margin-bottom: 0.75rem; }
body.page-template-page-quiz  main.monash-home-main {
		background: var(--monash-blue);
}
/* ── Debug quiz bar ──────────────────────────────────────────────────────── */
.debug-quiz-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 0.4rem 0.75rem;
    background: #222;
    color: #fff;
    font: 11px / 1.4 sans-serif;
    position: fixed;
    top: 3rem;
    z-index: 9999;
		display: none;
}
.debug-quiz-bar span {
	font-weight: 700;
	margin-right: 0.25rem;
}
.debug-quiz-bar a {
	color: #4cf;
	text-decoration: underline;
	margin-right: 0.5rem;
}
.debug-quiz-bar a:hover { color: #8df; }

/* ── Study area modal ───────────────────────────────────────────────────── */
.mq-study-modal {
	position: fixed;
	inset: 0;
	z-index: 2001;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 1.5rem;
	background: rgba(0, 0, 0, 0.55);
}
.mq-study-modal[hidden] { display: none; }
.mq-study-modal__panel {
    position: relative;
    width: 100%;
    max-width: 28rem;
    max-height: 80vh;
    overflow-y: auto;
    background: var(--white);
    border-radius: 1.5rem;
    padding: 2rem 1.75rem 2rem;
    display: flex;
    flex-direction: column;
    row-gap: 1.25rem;
    text-align: left;
}
.mq-study-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	border: none;
	background: transparent;
	display: inline-flex;
	cursor: pointer;
	text-decoration: none;
	color: inherit;
}
.mq-study-modal__close svg { width: 1rem; height: 1rem; }
.mq-study-modal__title {
	font-size: 24px;
	font-weight: 700;
	color: var(--monash-blue);
	margin: 0;
}
.mq-study-modal__text {
	font-size: 1rem;
	font-weight: 400;
	color: #333;
	line-height: 1.6;
	margin: 0;
}
.fancybox__content.mq-story-popup{
    max-width: 100%;
        width: var(--monash-shell-width);
        height: var(--monash-shell-effective-height);
        min-height: var(--monash-shell-effective-height);
    margin: 0;
    padding: 0;
}
.fancybox__content.mq-story-popup>.f-button.is-close-btn{
    left: 8px;
    top: 4px;
}
/* ── Story popup (fancybox inline content) ───────────────────────── */
.fancybox__content .mq-story-popup {
	display: block;
}
.mq-story-popup .monash-story__hero {
	width: 100%;
}
.mq-story-popup .monash-story__hero-img {
	width: 100%;
	display: block;
}
.mq-story-popup .monash-story__hero-placeholder {
	height: 200px;
	background: #e0e0e0;
}
.mq-story-popup .monash-story__hero-play {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
}
.mq-story-popup .monash-story__hero-link {
	position: relative;
	display: block;
}
.mq-story-popup .monash-story__card {
    padding: 0;
    margin: 0 auto;
    width: calc(100% - 40px);
    margin: 20px;
    background: #fff;
    margin-top: -40px;
    z-index: 9;
    padding: 20px;
    border-radius: 10px;
}
.fancybox__slide::before, .fancybox__slide::after{
	display: none;
}
.mq-story-popup .monash-story__identity {
	
    text-align: center;
	 margin-bottom: 0.5rem; }
.mq-story-popup .monash-story__name {
	font-size: 1.5rem;
	font-weight: 700;
	color: var(--monash-blue, #006DAE);
	margin: 0;
}
.mq-story-popup .monash-story__degree {
	font-size: 1rem;
	color: #555;
	margin: 0.25rem 0 0;
}
.mq-story-popup .monash-story__meta-row {
	font-size: 0.95rem;
	margin: 0.5rem 0;
}
.mq-story-popup .monash-story__meta-row--lead { margin-top: 0; 
    text-align: center;}
.mq-story-popup .monash-story__quote {
	font-size: 1.1rem;
	font-style: italic;
    text-align: center;
	color: #333;
	margin: 1rem 0;
}
.mq-story-popup .monash-story__divider { margin: 1rem 0; }
.mq-story-popup .monash-story__content { font-size: 0.95rem; line-height: 1.6; color: #333; }
.mq-story-popup .monash-story__content p { margin: 0.5rem 0; }