/* Science Quiz (games/science-quiz/build/build.js): the Map Quiz look (../map-quiz/quiz.css) on diagrams. */
.sq .mq-stage { background: #fff; }
.sq .mq-over { background: rgba(255, 255, 255, .72); }
.sq-table .mq-stage { background: #f6f9fc; }
#mq-map image { pointer-events: none; }

/* picture quizzes: a dot on each part; the part's name appears beside it once it's found */
#mq-map .sq-dot { fill: #fff; stroke: #2f5d8a; stroke-width: 7; transition: fill .15s; }
#mq-map .sq-dot:hover { fill: #c3d0de; }
#mq-map .sq-dot.g { fill: #49a86f; stroke: #fff; }
#mq-map .sq-dot.a { fill: #f0b43c; stroke: #fff; }
#mq-map .sq-dot.r { fill: #dd5a52; stroke: #fff; }
#mq-map .sq-dot.wrong { animation: sq-wrong .65s; }
#mq-map .sq-dot.blink { animation: sq-blink .4s 3; }
#mq-map .tiny, #mq-map .tiny.g, #mq-map .tiny.a, #mq-map .tiny.r { fill: none; stroke: none; }
.sq .sq-lbl { display: none; font: 800 40px system-ui, -apple-system, 'Segoe UI', sans-serif; paint-order: stroke; stroke: #fff; stroke-width: 9px; stroke-linejoin: round; pointer-events: none; }
.sq .pl.g + .sq-lbl, .sq .pl.a + .sq-lbl, .sq .pl.r + .sq-lbl { display: block; }
.sq .pl.g + .sq-lbl { fill: #2b7a4b; }
.sq .pl.a + .sq-lbl { fill: #9a6a08; }
.sq .pl.r + .sq-lbl { fill: #b8352d; }

/* shape quizzes: the thing itself (a planet) is the target; found ones get a coloured ring */
.sq-shapes #mq-map circle.pl { fill: transparent; stroke: transparent; stroke-width: 10; transition: stroke .15s, fill .15s; }
.sq-shapes #mq-map circle.pl:hover { stroke: rgba(47, 93, 138, .45); }
.sq-shapes #mq-map circle.pl.g { stroke: #49a86f; fill: rgba(73, 168, 111, .14); }
.sq-shapes #mq-map circle.pl.a { stroke: #f0b43c; fill: rgba(240, 180, 60, .14); }
.sq-shapes #mq-map circle.pl.r { stroke: #dd5a52; fill: rgba(221, 90, 82, .14); }
.sq-shapes #mq-map circle.pl.wrong { animation: sq-ring-wrong .65s; }
.sq-shapes #mq-map circle.pl.blink { animation: sq-ring-blink .4s 3; }
.sq-shapes .sq-lbl { font-size: 30px; stroke-width: 8px; }

/* the periodic table: grey squares like the map's states, green when found */
#mq-map rect.pl { fill: #d9e1ea; stroke: #fff; stroke-width: 1; transition: fill .15s; }
#mq-map rect.pl:hover { fill: #c3d0de; }
#mq-map rect.off { fill: #f0f3f6; pointer-events: none; }
#mq-map rect.g, #mq-map rect.g:hover { fill: #49a86f; }
#mq-map rect.a, #mq-map rect.a:hover { fill: #f0b43c; }
#mq-map rect.r, #mq-map rect.r:hover { fill: #dd5a52; }
#mq-map rect.wrong { animation: mq-wrong .65s; }
#mq-map rect.blink { animation: mq-blink .4s 3; }
.sq-cell text { pointer-events: none; fill: #1f2d3d; font-family: system-ui, -apple-system, 'Segoe UI', sans-serif; }
.sq-num { font-size: 10px; font-weight: 600; opacity: .7; }
.sq-sym { font-size: 21px; font-weight: 800; text-anchor: middle; }
.sq-cell rect.off ~ text { opacity: .3; }
.sq-cell rect.g ~ text, .sq-cell rect.r ~ text { fill: #fff; }

@keyframes sq-wrong { 0%, 60% { fill: #f19b94; } }
@keyframes sq-blink { 50% { fill: #dd5a52; } }
@keyframes sq-ring-wrong { 0%, 60% { stroke: #f19b94; } }
@keyframes sq-ring-blink { 50% { stroke: #dd5a52; fill: rgba(221, 90, 82, .25); } }

.sq-study { list-style: none; padding: 0; margin: 0; columns: 2 280px; column-gap: 28px; }
.sq-study li { break-inside: avoid; margin: 0 0 8px; color: var(--text-secondary); }
.sq-study b { color: var(--text-primary); margin-right: 4px; }

.sq-hub { max-width: 980px; margin: 8px auto 28px; padding: 0 16px; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; }
.sq-card { display: flex; flex-direction: column; gap: 4px; padding: 12px; border: 1px solid #dfe5ec; border-radius: 14px; background: #fff; color: inherit; text-decoration: none; }
.sq-card:hover { border-color: #2f5d8a; }
.sq-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: contain; background: #f6f9fc; border-radius: 10px; margin-bottom: 6px; }
.sq-card b { font-size: 17px; color: var(--text-primary); }
.sq-card span { font-size: 14px; color: var(--text-secondary); }
.sq .mq-tools > span { display: flex; gap: 6px; } .sq .mq-tools > span[hidden] { display: none; }
.sq-packlink { display: block; margin: 8px 0 2px; font-size: 14px; color: #00583a; text-decoration: none; }
.sq-packlink b { font-weight: 800; }
.sq-pack { margin: 22px 0 6px; padding: 16px 18px; display: flex; gap: 20px; align-items: center; background: #e7f3ed; border-radius: 14px; }
.sq-pcover { flex: 0 0 150px; }
.sq-pcover img { display: block; width: 100%; height: auto; border-radius: 6px; box-shadow: 0 10px 22px -12px rgba(20, 50, 40, .5); transition: transform .15s; }
.sq-pcover:hover img { transform: translateY(-2px); }
.sq-ptag { display: inline-block; font-size: 11.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: #fff; background: #006a45; border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.sq-pack h2 { font-size: 21px; font-weight: 800; color: var(--text-primary); margin: 8px 0 4px; }
.sq-pack p { margin: 0 0 12px; color: var(--text-secondary); line-height: 1.55; }
.sq-pbtns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.sq-price { font-weight: 800; color: #00583a; }
.sq-pack a.btn, .sq-pack a.btn:hover { color: #fff; text-decoration: none; }
@media (max-width: 560px) { .sq-pack { gap: 14px; align-items: flex-start; } .sq-pack { padding: 14px; } .sq-pcover { flex-basis: 84px; } .sq-ptag { font-size: 10.5px; letter-spacing: .03em; } .sq-pack h2 { font-size: 18px; } }