/* Think & Remember, batch 5c-2: Balance Scale, Sorting Machine, Who Am I?, Switch It!, Tower Move and Listen and Remember.
   Loaded after games.css by those six pages. Every control is a real button of at least 44px (the main ones use --tap); nothing needs
   movement to be understood: Calm mode and reduced motion switch off the tilting of the scale and the lifting of a disc. */

.is-hint.bal-option, .is-hint.sr-rule, .is-hint.clue-option, .is-hint.sw-bin, .is-hint.tw-peg, .is-hint.lr-option, .is-hint.sr-bin__button { box-shadow: 0 0 0 5px var(--sun), var(--shadow-2); }
.is-hint.bal-stage, .is-hint.sw-sign, .is-hint.clue-list, .is-hint.btn { box-shadow: 0 0 0 5px var(--sun), var(--shadow-2); }

.puzzle-status { min-height: 1.6em; margin: 0 auto var(--space-3); text-align: center; font-size: var(--fs-m); font-weight: 800; }

/* ---------- Balance Scale ---------- */
.bal-legend { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0 auto var(--space-3); padding: 0; list-style: none; }
.bal-legend__item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) var(--space-3); border: 3px solid #cfd6df; border-radius: var(--radius-m); background: #fff; font-weight: 800; }
.bal-legend__icon { display: block; width: 32px; height: 32px; }
.bal-legend__icon .shape, .bal-option__icon .shape, .bal-pile .shape { display: block; width: 100%; height: 100%; }
.bal-blocks { display: inline-flex; flex-wrap: wrap; gap: 3px; }
.bal-block { width: 12px; height: 12px; border-radius: 3px; background: var(--blue-deep); }
.bal-stage { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); width: 100%; max-width: 760px; margin: 0 auto var(--space-4); border-radius: var(--radius-m); }
.bal-figure { flex: 1 1 260px; max-width: 360px; margin: 0; text-align: center; }
.bal-figure--main { flex-basis: 320px; max-width: 400px; }
.bal-figure figcaption { font-size: var(--fs-s); font-weight: 800; }
.bal-scale { display: block; width: 100%; height: auto; }
.bal-beam { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 700ms var(--ease-out); }
.bal-pan__inner { transition: transform 700ms var(--ease-out); }
html.calm .bal-beam, html.calm .bal-pan__inner { transition: none; }
@media (prefers-reduced-motion: reduce) { .bal-beam, .bal-pan__inner { transition: none; } }
.bal-options { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--space-3); width: 100%; max-width: 640px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
.bal-options--chain { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); }
.bal-option { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-1); width: 100%; min-height: var(--tap); padding: var(--space-3); border: 4px solid #cfd6df; border-radius: var(--radius-m); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-m); font-weight: 900; text-align: center; cursor: pointer; touch-action: manipulation; }
.bal-option:focus-visible, .sr-rule:focus-visible, .clue-option:focus-visible, .sw-bin:focus-visible, .lr-option:focus-visible, .sr-item:focus-visible, .sr-bin__button:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.bal-option.is-dimmed, .clue-option.is-dimmed, .lr-option.is-dimmed { opacity: 0.4; }
.bal-option[aria-disabled="true"], .lr-option[aria-disabled="true"], .clue-option[aria-disabled="true"] { cursor: default; }
.bal-pile { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; max-width: 130px; }
.bal-pile .shape { width: 22px; height: 22px; }
.bal-option__icon { display: block; width: 44px; height: 44px; }

/* ---------- Sorting Machine ---------- */
.sr-items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); max-width: 640px; min-height: 84px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
.sr-item { display: grid; place-items: center; width: clamp(64px, 20vw, 92px); aspect-ratio: 1; min-height: var(--tap); padding: var(--space-1); border: 4px solid #cfd6df; border-radius: var(--radius-m); background: #fff; cursor: pointer; touch-action: manipulation; }
.sr-item.is-sorted { width: 52px; min-height: 44px; border-width: 2px; background: #f4f0e6; cursor: default; }
.sr-shape { display: block; width: 100%; height: 100%; }
.sr-shape--small { width: 58%; height: 58%; }
.sr-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 720px; margin: 0 auto var(--space-4); }
.sr-bin { display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: var(--space-2); min-height: 170px; padding: var(--space-3); border: 4px dashed var(--sr-color); border-radius: var(--radius-l); background: #fff; }
.sr-bin--yes { --sr-color: var(--green-deep); }
.sr-bin--no { --sr-color: var(--pink-deep); }
.sr-bin__button { min-height: var(--tap); padding: 0 var(--space-2); border: 0; border-radius: var(--radius-m); background: var(--sr-color); color: #fff; font: inherit; font-size: clamp(1rem, 4.4vw, 1.25rem); font-weight: 900; overflow-wrap: anywhere; touch-action: manipulation; }
.sr-bin__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-1); margin: 0; padding: 0; list-style: none; }
@media (max-width: 380px) { .sr-bins { gap: var(--space-2); } .sr-bin { padding: var(--space-2); } }
.sr-machine { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 720px; margin: 0 auto var(--space-4); }
.sr-example-bin { padding: var(--space-3); border: 4px solid; border-radius: var(--radius-l); background: #fff; text-align: center; }
.sr-example-bin--in { border-color: var(--good); }
.sr-example-bin--out { border-color: var(--try); }
.sr-example-bin__title { margin: 0 0 var(--space-2); font-size: var(--fs-m); }
.sr-example-bin__items { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sr-example { display: block; width: 52px; height: 52px; }
.sr-rules { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); max-width: 640px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
.sr-rule { width: 100%; min-height: var(--tap); padding: var(--space-3); border: 4px solid #cfd6df; border-radius: var(--radius-m); background: #fff; color: var(--ink); font: inherit; font-size: var(--fs-m); font-weight: 900; cursor: pointer; touch-action: manipulation; }
.sr-rule.is-dimmed { opacity: 0.4; }
.sr-rule[aria-disabled="true"] { cursor: default; }

/* ---------- Who Am I? ---------- */
.clue-list { display: grid; gap: var(--space-2); max-width: 560px; margin: 0 auto var(--space-3); padding: 0; list-style: none; border-radius: var(--radius-m); }
.clue-item { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3); border: 3px solid var(--sun-deep); border-radius: var(--radius-m); background: #fff7d6; font-size: var(--fs-m); font-weight: 800; }
.clue-item__number { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--ink); color: #fff; font-size: var(--fs-s); font-weight: 900; }
.clue-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0 auto var(--space-4); }
.clue-options { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-3); width: 100%; max-width: 760px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
.clue-option { display: grid; gap: var(--space-1); width: 100%; padding: var(--space-2); border: 4px solid #cfd6df; border-radius: var(--radius-m); background: #fff; color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.clue-option__visual { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: var(--radius-s); }
.clue-option__visual img { width: 100%; height: 100%; object-fit: cover; }
.clue-option__name { font-size: var(--fs-s); font-weight: 800; line-height: 1.2; text-align: center; overflow-wrap: break-word; }
@media (max-width: 420px) { .clue-options[data-count="6"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } .clue-options[data-count="3"] .clue-option__name { font-size: 0.875rem; } }

/* ---------- Switch It! ---------- */
.sw-sign { display: flex; align-items: center; justify-content: center; gap: var(--space-3); max-width: 560px; margin: 0 auto var(--space-4); padding: var(--space-3) var(--space-4); border: 4px solid var(--blue-deep); border-radius: var(--radius-l); background: #e8f1fb; font-size: var(--fs-m); font-weight: 900; text-align: center; }
.sw-sign[data-opposite="true"] { border-color: var(--try); background: #fff0e6; }
.sw-sign__icon { font-size: 2rem; line-height: 1; }
.sw-card { display: grid; place-items: center; width: clamp(110px, 34vw, 150px); aspect-ratio: 1; margin: 0 auto var(--space-4); padding: var(--space-2); border: 4px solid var(--ink); border-radius: var(--radius-m); background: #fff; }
.sw-card__art, .sw-bin__art { display: block; width: 100%; height: 100%; }
.sw-bins { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); max-width: 520px; margin: 0 auto var(--space-4); }
.sw-bin { display: grid; justify-items: center; align-content: center; gap: var(--space-1); min-height: calc(var(--tap) * 2); padding: var(--space-3); border: 4px solid #cfd6df; border-radius: var(--radius-l); background: #fff; color: var(--ink); font: inherit; font-weight: 800; cursor: pointer; touch-action: manipulation; }
.sw-bin__art { width: clamp(64px, 20vw, 96px); height: clamp(64px, 20vw, 96px); }
.sw-bin__name { font-size: var(--fs-s); }

/* ---------- Tower Move ---------- */
.tw-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-2); width: min(100%, 560px); margin: 0 auto var(--space-4); }
.tw-peg { display: grid; align-content: end; justify-items: center; min-height: 220px; padding: var(--space-2) 0; border: 4px solid #cfd6df; border-radius: var(--radius-m); background: #fff; color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.tw-peg.is-goal { border-color: var(--good); background: #f1fbf4; }
.tw-peg[aria-pressed="true"] { border-color: var(--blue-deep); box-shadow: 0 0 0 4px rgba(27, 100, 181, 0.25); }
.tw-peg:focus-visible { outline: 4px solid var(--focus); outline-offset: 2px; }
.tw-peg__stack { position: relative; display: flex; flex-direction: column; justify-content: flex-end; width: 100%; height: 170px; }
.tw-peg__rod { position: absolute; left: 50%; bottom: 0; width: 10px; height: 100%; margin-left: -5px; border-radius: 5px 5px 0 0; background: #8d6e63; }
.tw-peg__discs { position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 3px; width: 100%; }
.tw-disc { box-sizing: border-box; display: grid; place-items: center; height: 32px; border: 3px solid var(--ink); border-radius: 16px; color: var(--ink); font-size: var(--fs-s); font-weight: 900; }
.tw-disc--1 { background: #fdd835; }
.tw-disc--2 { background: #fb8c00; }
.tw-disc--3 { background: #42a5f5; }
.tw-disc--4 { background: #8e24aa; color: #fff; }
.tw-disc.is-lifted { transform: translateY(-14px); box-shadow: 0 6px 0 rgba(43, 45, 66, 0.25); }
.tw-peg__name { margin-top: var(--space-1); font-weight: 900; }

/* ---------- Listen and Remember ---------- */
.lr-story-controls { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-3); margin: 0 auto var(--space-3); }
.lr-note { max-width: 560px; margin: 0 auto var(--space-3); padding: var(--space-2) var(--space-3); border-radius: var(--radius-m); background: #fff7d6; font-weight: 700; text-align: center; }
.lr-story { max-width: 560px; margin: 0 auto var(--space-4); padding: var(--space-3) var(--space-4); border: 4px solid var(--blue-deep); border-radius: var(--radius-m); background: #fff; font-size: var(--fs-m); }
.lr-story__line { margin: 0 0 var(--space-1); }
.lr-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); width: 100%; max-width: 640px; margin: 0 auto var(--space-4); padding: 0; list-style: none; }
@media (min-width: 600px) { .lr-options[data-count="3"] { grid-template-columns: repeat(3, minmax(0, 1fr)); } .lr-options[data-count="4"] { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 760px; } }
.lr-option { display: grid; justify-items: center; align-content: start; gap: var(--space-1); width: 100%; min-height: var(--tap); padding: var(--space-2); border: 4px solid #cfd6df; border-radius: var(--radius-m); background: #fff; color: var(--ink); font: inherit; cursor: pointer; touch-action: manipulation; }
.lr-art { display: block; width: 100%; height: auto; max-width: 110px; }
.lr-option__name { font-size: var(--fs-s); font-weight: 800; text-align: center; }