/* The quiz game (quiz/game.php, scripts/quiz.js): who's playing, a track per player, the question card (picture, text,
   answers or the map), the result with the wheel, and the winner. The page header is the shared play-page shell
   (.ec-play-* in css/ui.css); the type's colors are --t-bg / --t-ink (.ec-t-1). Player 2 is orange. */
.ec-qz-setup, .ec-qz-card { border: 1px solid var(--ec-line); border-radius: 14px; background: var(--ec-surface); box-shadow: var(--ec-shadow); padding: 20px; }
.ec-qz-setup { display: grid; gap: 16px; max-width: 560px; }
.ec-qz-setup[hidden], .ec-qz[hidden], .ec-qz-card[hidden], .ec-qz [hidden] { display: none !important; }
.ec-qz-setup fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.ec-qz-setup legend { font: 600 18px "Rubik", "Lato", sans-serif; margin-bottom: 8px; }
.ec-qz-count { display: flex; flex-wrap: wrap; gap: 10px; }
.ec-qz-count-opt { display: flex; align-items: center; gap: 10px; margin: 0; padding: 12px 18px; border: 2px solid var(--ec-line); border-radius: 12px; font-size: 18px; font-weight: 700; cursor: pointer; }
.ec-qz-count-opt:has(input:checked) { border-color: var(--t-ink); background: var(--t-bg); }
.ec-qz-count-opt input { width: 20px; height: 20px; accent-color: var(--t-ink); margin: 0; }
.ec-qz-names { display: grid; gap: 10px; }
.ec-qz-name { display: grid; gap: 4px; margin: 0; font-weight: 700; }
.ec-qz-name[hidden] { display: none; }
.ec-qz-start { justify-self: start; min-height: 48px; font-size: 18px; }

.ec-qz { display: grid; gap: 14px; }
/* the tracks */
.ec-qz-tracks { display: grid; gap: 8px; }
.ec-qz-track { --p: var(--t-ink); --p-bg: var(--t-bg); display: grid; grid-template-columns: minmax(110px, 180px) minmax(0, 1fr); align-items: center; gap: 6px 14px;
	padding: 10px 14px; border: 2px solid var(--ec-line); border-radius: 12px; background: var(--ec-surface); transition: border-color .2s, box-shadow .2s; }
.ec-qz-track.is-p1 { --p: #b85c00; --p-bg: #fff1e2; }
.ec-qz-track.is-turn { border-color: var(--p); box-shadow: 0 0 0 3px var(--p-bg); }
.ec-qz-track-name { margin: 0; font: 600 17px "Rubik", "Lato", sans-serif; color: var(--p); overflow-wrap: anywhere; display: grid; }
.ec-qz-track-at { font: 400 13px "Lato", sans-serif; color: var(--ec-ink-2); }
.ec-qz-steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(11, minmax(0, 1fr)); gap: 4px; align-items: center; }
.ec-qz-steps li { aspect-ratio: 1; max-width: 40px; width: 100%; justify-self: center; border-radius: 50%; border: 2px solid #cfd6e2; background: #f4f6fa;
	display: grid; place-items: center; font: 700 15px "Poppins", "Lato", sans-serif; color: #fff; }
.ec-qz-steps li.is-past { background: var(--p-bg); border-color: var(--p); }
.ec-qz-steps li.is-here { background: var(--p); border-color: var(--p); transform: scale(1.18); transition: transform .2s; }
.ec-qz-steps li:last-child:not(.is-here) { border-color: #e2b200; background: #fff7d6; color: #b38600; font-size: 14px; }

/* the question */
.ec-qz-card { display: grid; gap: 14px; }
.ec-qz-turn { margin: 0; font: 700 14px "Lato", sans-serif; letter-spacing: .5px; text-transform: uppercase; color: var(--t-ink); }
.ec-qz-pic { display: block; max-width: 100%; max-height: 280px; margin: 0 auto; border-radius: 10px; object-fit: contain; }
.ec-qz-q { margin: 0; font: 500 22px/1.35 "Rubik", "Lato", sans-serif; color: var(--ec-ink); overflow-wrap: anywhere; }
.ec-qz-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.ec-qz-choice { min-height: 56px; padding: 10px 14px; border: 2px solid var(--ec-line); border-radius: 12px; background: #f8fbff; color: var(--ec-ink); text-align: left;
	font: 600 18px/1.3 "Lato", sans-serif; cursor: pointer; overflow-wrap: anywhere; transition: background-color .15s, border-color .15s; }
.ec-qz-choice:hover:not(:disabled) { border-color: var(--t-ink); background: var(--t-bg); }
.ec-qz-choice:focus-visible { outline: 3px solid var(--ec-focus); outline-offset: 2px; }
.ec-qz-choice:disabled { cursor: default; color: var(--ec-ink); }
.ec-qz-choice.is-right { border-color: #4caf50; background: var(--ec-green-soft); color: var(--ec-green-ink); }
.ec-qz-choice.is-wrong { border-color: #e39a97; background: #fbeaea; color: #a52723; }
.ec-qz-choice.is-key { border-color: var(--ec-ink); border-style: dashed; background: var(--ec-surface); }
.ec-qz-typed { display: flex; gap: 10px; flex-wrap: wrap; }
.ec-qz-typed .ec-input { flex: 1 1 220px; min-width: 0; font-size: 18px; min-height: 48px; }
.ec-qz-typed .ec-btn, .ec-qz-check .ec-btn { min-height: 48px; font-size: 17px; }
.ec-qz-check { text-align: center; }
.ec-qz-mapwrap { display: grid; gap: 6px; width: 100%; }
.ec-qz-mapwrap .ec-hint { margin: 0; text-align: center; }
.ec-qz-zoom { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* after answering, the map is a smaller reference under the wheel / Next */
.ec-qz-result .ec-qz-mapwrap { max-width: 520px; margin: 6px auto 0; padding-top: 12px; border-top: 1px solid var(--ec-line); }

/* the result and the wheel */
.ec-qz-result { justify-items: center; text-align: center; }
.ec-qz-verdict { margin: 0; font: 600 28px "Rubik", "Lato", sans-serif; }
.ec-qz-result.is-right .ec-qz-verdict { color: var(--ec-green-ink); }
.ec-qz-result.is-wrong .ec-qz-verdict { color: #a52723; }
.ec-qz-answer { margin: 0; font-size: 18px; color: var(--ec-ink); overflow-wrap: anywhere; }
.ec-qz-spin { display: grid; justify-items: center; gap: 12px; }
.ec-qz-wheel-wrap { position: relative; width: min(280px, 72vw); aspect-ratio: 1; }
.ec-qz-wheel { width: 100%; height: 100%; display: block; cursor: pointer; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .15)); }
.ec-qz-wheel-turn { transform-box: fill-box; transform-origin: center; transition: transform 3s cubic-bezier(.15, .7, .2, 1); }
.ec-qz-slice { stroke: #fff; stroke-width: 1.5; }
.ec-qz-slice.is-c0 { fill: #7ed987; }
.ec-qz-slice.is-c1 { fill: #8ec3f5; }
.ec-qz-slice.is-c2 { fill: #f8e070; }
.ec-qz-slice.is-c3 { fill: #c3b0f3; }
.ec-qz-slice.is-stay { fill: #e4e8ef; }
.ec-qz-slice.is-back { fill: #f5a29c; }
.ec-qz-slice-ring { fill: none; stroke: #22232d; stroke-width: 4; stroke-linejoin: round; pointer-events: none; }
.ec-qz-slice-text { font: 700 11px "Poppins", "Lato", sans-serif; fill: #22232d; }
.ec-qz-hub { fill: #fff; stroke: #c5ccd8; stroke-width: 2; }
.ec-qz-pointer { position: absolute; z-index: 1; left: 50%; top: -6px; transform: translateX(-50%); width: 0; height: 0;
	border-left: 14px solid transparent; border-right: 14px solid transparent; border-top: 26px solid #22232d; }
.ec-qz-move { margin: 0; min-height: 1.5em; font: 600 22px "Rubik", "Lato", sans-serif; color: var(--t-ink); }
.ec-qz-move:not(:empty) { animation: ec-qz-pop .35s ease-out; }
.ec-qz-spin.is-spinning .ec-qz-pointer { animation: ec-qz-tick .12s ease-in-out infinite alternate; }
@keyframes ec-qz-pop { from { transform: scale(.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes ec-qz-tick { to { transform: translateX(-50%) rotate(-12deg); } }
#qzNext, #qzSpinGo { min-height: 48px; font-size: 17px; }

/* the winner */
.ec-qz-win { position: relative; overflow: hidden; justify-items: center; text-align: center; }
.ec-qz-win > .fa-trophy { animation: ec-qz-hopbig .6s ease-out 2; }
.ec-qz-confetti { position: absolute; top: -12px; width: 8px; height: 14px; border-radius: 2px; pointer-events: none; animation: ec-qz-fall linear forwards; }
@keyframes ec-qz-fall { to { transform: translate(var(--x), 420px) rotate(var(--r)); opacity: 0; } }
@keyframes ec-qz-hopbig { 40% { transform: translateY(-14px) scale(1.1); } }
.ec-qz-win > .fa-trophy { font-size: 72px; color: #d99a00; }
.ec-qz-winner { margin: 0; font: 600 30px "Rubik", "Lato", sans-serif; overflow-wrap: anywhere; }
.ec-qz-again { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }

@media (max-width: 575px) {
	.ec-qz-setup, .ec-qz-card { padding: 14px; }
	.ec-qz-track { grid-template-columns: minmax(0, 1fr); padding: 8px 10px; }
	.ec-qz-track-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; font-size: 16px; }
	.ec-qz-steps li { font-size: 12px; border-width: 2px; }
	.ec-qz-wheel-wrap { width: min(240px, 64vw); }
	.ec-qz-q { font-size: 19px; }
	.ec-qz-choices { grid-template-columns: minmax(0, 1fr); }
	.ec-qz-choice { font-size: 17px; min-height: 50px; }
	.ec-qz-pic { max-height: 200px; }
}
@media (prefers-reduced-motion: reduce) {
	.ec-qz-steps li { transition: none; }
	.ec-qz-move, .ec-qz-pointer, .ec-qz-win > .fa-trophy { animation: none !important; }
}