/* ---------- Grade games: science, art, music and the world (js/puzzles/games/world.js) ---------- */

/* a question under the title (older grades: the title names the strand, this is the question) */
.pz-prompt:has(.gw-q) { font-size: inherit; }
.gw-q { font-size: clamp(17px, min(2.6vw, 4.6vh), 28px); line-height: 1.2; max-width: 760px; margin: 0 auto; text-shadow: none; }
.gw-art { display: flex; justify-content: center; margin: 0 auto 4px; }
.gw-art svg { width: clamp(150px, 26vw, 260px); height: auto; max-height: 24vh; border-radius: 8px; box-shadow: 0 0 0 3px var(--ink); background: #fff; }
.gw-art svg[viewBox="0 0 100 100"] { width: auto; height: clamp(70px, 18vh, 130px); box-shadow: none; background: none; }

/* long answers: two columns of text buttons */
.pz-options.l-txt { grid-template-columns: repeat(2, 1fr); max-width: 760px; }
.pz-options.l-txt.n3 { grid-template-columns: 1fr; max-width: 520px; }
.l-txt .opt, .l-word .opt { min-height: clamp(44px, 8vh, 66px); }
.l-txt .opt { min-height: clamp(44px, 8vh, 66px); padding: 6px 12px; font-size: clamp(15px, min(2.2vw, 3.8vh), 22px); line-height: 1.15; text-shadow: 0 2px 0 rgba(0, 0, 0, .3); }
.pz-options.l-word.n4 { max-width: 760px; }
.l-word .opt { font-size: clamp(17px, min(3vw, 5vh), 34px); }

/* pictures inside answers */
.opt .gw-shape, .opt .face svg.gw-shape { width: 1.25em; height: 1.25em; }
.gw-pic { width: 1em; height: 1em; vertical-align: middle; }
.gw-step { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; line-height: 1; }
.gw-step .pic { font-size: 1.35em; }
@media (max-height: 420px) { .gw-step .pic { font-size: 1em; } }
.gw-step .gw-pic { width: 1.1em; height: 1.1em; }
.gw-step small { font-size: clamp(11px, 1.9vh, 14px); font-weight: 600; color: #6b4f24; white-space: normal; max-width: 9em; text-align: center; line-height: 1.1; }
.or-list .gw-step { flex-direction: row; gap: 10px; }
.or-list .gw-step small { font-size: 1em; max-width: none; text-align: left; color: inherit; }
/* sort groups with longer names: the name may wrap rather than push past the edge */
.pz-body.game .so-bin { min-width: 0; }
.pz-body.game .so-head { flex-wrap: wrap; text-align: center; line-height: 1.1; }
@media (max-aspect-ratio: 1/1) { .pz-body.game .so-bins.g3 .so-head { font-size: 15px; gap: 2px; flex-direction: column; } }
@media (max-height: 420px) { .pz-body.game .so-head { font-size: 16px; } }
.gw-sws { display: inline-flex; gap: 4px; }
.gw-sws .swatch { width: .7em; height: .7em; }
.gw-line { font-size: .7em; letter-spacing: -.05em; color: #2f6fe0; text-shadow: none; }
.pz-body.game .so-card .pic:empty { display: none; }
.pz-body.game .so-card:has(.pic:empty) { width: auto; min-width: clamp(78px, 11vw, 100px); max-width: 170px; height: auto; min-height: clamp(48px, 9vh, 70px); padding: 6px 10px; }
.pz-body.game .so-card:has(.pic:empty) .lbl { font-size: clamp(13px, 2.2vh, 17px); overflow-wrap: anywhere; }
@media (max-aspect-ratio: 1/1) { .pz-body.game .so-card:has(.pic:empty) { min-height: 42px; padding: 4px 8px; } }
.pz-body.game .so-card:has(.pic:empty).placed { width: auto; height: auto; min-height: 0; min-width: 0; padding: 4px 8px; }
.pz-body.game .so-card:has(.pic:empty).placed .lbl { display: block; font-size: 12px; }

@media (max-height: 420px) {
  .gw-art svg { max-height: 24vh; width: auto; height: 24vh; }
  .gw-art { margin-bottom: 0; }
  .l-txt .opt, .l-word .opt { min-height: 38px; padding: 3px 10px; }
  .pz-body:has(.gw-art) .pz-options { gap: 6px; }
  .l-art .opt { min-height: 72px; }
}
@media (max-aspect-ratio: 1/1) {
  .pz-options.l-txt { grid-template-columns: 1fr; gap: 10px; }
  .l-txt .opt, .l-word .opt { min-height: clamp(48px, 7vh, 62px); }
  .gw-art svg { max-height: 18vh; }
  .gw-q { font-size: clamp(17px, 4.8vw, 24px); }
}

/* ---------- Echo Tunes (types/simon.js) ---------- */
.sm { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(6px, 1.6vh, 14px); width: 100%; }
.sm-top { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; min-height: 28px; }
.sm-say { font-weight: 700; font-size: clamp(17px, min(2.6vw, 4.4vh), 26px); color: var(--ink2); }
.sm-say.watch { color: #8a5a10; }
.sm-say.go { color: #1f6a28; animation: popIn .3s cubic-bezier(.2, 1.8, .4, 1); }
.sm-dots { display: inline-flex; gap: 5px; }
.sm-dots i { width: 13px; height: 13px; border-radius: 50%; background: rgba(0, 0, 0, .15); box-shadow: inset 0 1px 0 rgba(0, 0, 0, .25); transition: background .15s, transform .15s; }
.sm-dots i.on { background: #3f9e48; transform: scale(1.2); }
.sm-pads { display: grid; grid-template-columns: repeat(var(--n, 4), 1fr); gap: clamp(8px, 1.6vw, 18px); width: min(100%, 820px); }
.sm-pads.n3 { --n: 3; max-width: 560px; }
.sm-pads.n4 { --n: 4; max-width: 720px; }
.sm-pads.n5 { --n: 5; }
.sm-pads.n6 { --n: 6; }
.sm-pad { position: relative; height: clamp(70px, 26vh, 170px); border: none; border-radius: 22px; cursor: pointer; font-family: var(--font); color: #fff;
  background: var(--c); /* (older browsers: no color-mix) */
  background: radial-gradient(circle at 40% 30%, color-mix(in srgb, var(--c) 70%, #fff), var(--c) 60%, color-mix(in srgb, var(--c) 70%, #000));
  box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .25), inset 0 4px 0 rgba(255, 255, 255, .35), 0 0 0 4px var(--ink), 0 6px 0 4px rgba(0, 0, 0, .25);
  filter: saturate(.75) brightness(.9); transition: transform .1s, filter .12s, box-shadow .12s; }
.sm-pad b { font-size: clamp(22px, min(4vw, 7vh), 44px); text-shadow: 0 3px 0 rgba(0, 0, 0, .35); }
.sm-pad .k { position: absolute; top: 6px; left: 10px; font-size: 12px; font-weight: 600; opacity: .6; }
.sm-pad:active, .sm-pad.press { transform: translateY(4px) scale(.98); }
.sm-pad.lit { filter: saturate(1.2) brightness(1.35); transform: scale(1.06); box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .2), 0 0 0 4px #fff, 0 0 0 8px var(--ink), 0 0 40px 8px var(--c); }
.sm-pad.bad { animation: wiggle .4s; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .25), 0 0 0 4px #c8372b, 0 0 0 8px #fff; }
.sm-pad.bad::after { content: '✖'; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 46px; color: #fff; text-shadow: 0 0 0 #c8372b, 0 3px 0 #8a1a10; }
.sm-pad.good { filter: none; box-shadow: inset 0 -8px 0 rgba(0, 0, 0, .2), 0 0 0 4px #3f9e48, 0 0 0 8px #fff, 0 0 30px rgba(110, 255, 120, .8); }
.sm-pad:focus-visible { outline: 4px solid #ffd25a; outline-offset: 4px; }
.sm-pads.watch .sm-pad { cursor: default; }
.sm-pads.done .sm-pad { filter: saturate(1.1) brightness(1.1); }
@media (max-aspect-ratio: 1/1) {
  .sm-pads.n4 { --n: 2; max-width: 360px; }
  .sm-pads.n5, .sm-pads.n6 { --n: 3; }
  .sm-pads.n3 { --n: 3; }
  .sm-pad { height: clamp(80px, 22vw, 150px); }
}
@media (max-height: 420px) {
  .sm-pad { height: clamp(60px, 30vh, 110px); border-radius: 16px; }
  .sm-pad.bad::after { font-size: 32px; }
  .sm .sm-again { padding: 4px 10px; }
}

/* Music Notes: notes drawn as SVG, on choice buttons and in a row */
.opt .gw-note { width: auto; height: clamp(58px, 15vh, 110px); }
.gw-art svg.gw-staff { width: clamp(220px, 40vw, 380px); height: auto; max-height: 30vh; padding: 4px 8px; }
@media (max-aspect-ratio: 1/1) { .gw-art svg.gw-staff { width: min(100%, 320px); max-height: none; height: auto; } }
.gw-notes svg { width: auto; height: clamp(60px, 14vh, 110px); max-width: 100%; }